/* Sitio principal (SITE = main): portada y páginas corporativas de AgeUrban.
   Los colores van en variables: cambiar la marca es tocar :root. */

:root {
  --au-primario: #1d4e6f;        /* azul plano / institucional */
  --au-primario-oscuro: #143a54;
  --au-acento: #d9772b;          /* ladrillo */
  --au-acento-oscuro: #bb6220;
  --au-fondo-alterno: #f3f6f8;
  --au-texto: #2b3640;
  --au-texto-suave: #5d6b77;
  --au-borde: #dde4ea;
  --au-fuente-titulos: 'Poppins', system-ui, sans-serif;
  --au-fuente-texto: 'Open Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body { font-family: var(--au-fuente-texto); color: var(--au-texto); background: #fff; }
h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--au-fuente-titulos); }

/* ── Botones ─────────────────────────────────────────────── */
.btn-acento { background: var(--au-acento); border-color: var(--au-acento); color: #fff; }
.btn-acento:hover, .btn-acento:focus { background: var(--au-acento-oscuro); border-color: var(--au-acento-oscuro); color: #fff; }
.btn-primario { background: var(--au-primario); border-color: var(--au-primario); color: #fff; }
.btn-primario:hover { background: var(--au-primario-oscuro); border-color: var(--au-primario-oscuro); color: #fff; }
.btn-outline-primario { border: 2px solid var(--au-primario); color: var(--au-primario); }
.btn-outline-primario:hover { background: var(--au-primario); color: #fff; }

/* ── Cabecera: topbar + menú ─────────────────────────────── */
.topbar { background: var(--au-primario-oscuro); color: rgba(255,255,255,.85); font-size: .85rem; min-height: 40px; padding: 6px 0; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; }

.site-nav { background: #fff; box-shadow: 0 2px 12px rgba(20,58,84,.08); padding: .6rem 0; }
.site-nav .navbar-brand { color: var(--au-primario); font-weight: 700; font-size: 1.5rem; }
.site-nav .nav-link { color: var(--au-texto); font-weight: 500; padding: .5rem .9rem !important; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus { color: var(--au-acento); }
.site-nav .dropdown-menu { border: 0; box-shadow: 0 8px 24px rgba(20,58,84,.12); border-radius: .5rem; }
.site-nav .dropdown-item:active { background: var(--au-primario); }

.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 8px; background: var(--au-primario); color: #fff; font-size: 1.1rem; }
footer .brand-mark { background: var(--au-acento); }

/* ── Hero / carrusel ─────────────────────────────────────── */
/* Fondo de plano: cuadrícula fina sobre degradado, como un plano de ordenación. */
.hero-portada {
  color: #fff;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(135deg, var(--au-primario-oscuro) 0%, var(--au-primario) 60%, #2a6f8f 100%);
}
.hero-fila { min-height: 520px; padding: 4.5rem 0 5rem; }
.hero-etiqueta { display: inline-block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 50rem; padding: .3rem .9rem; margin-bottom: 1.25rem; }
.hero-titulo { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; line-height: 1.15; margin-bottom: 1.25rem; }
.hero-texto { font-size: 1.15rem; color: rgba(255,255,255,.85); max-width: 38rem; margin-bottom: 2rem; }
.hero-icono { width: 260px; height: 260px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.35); font-size: 7rem; color: rgba(255,255,255,.9); }
.hero-portada .carousel-control-prev, .hero-portada .carousel-control-next { width: 5%; }
.hero-portada .carousel-indicators { margin-bottom: 1.5rem; }

/* ── Secciones ───────────────────────────────────────────── */
.seccion { padding: 80px 0; }
.seccion-alterna { background: var(--au-fondo-alterno); }
.seccion-oscura { background: var(--au-primario); color: rgba(255,255,255,.9); }
.seccion-oscura h2 { color: #fff; }
.seccion-titulo { text-align: center; margin-bottom: 3rem; }
.seccion-titulo h2 { font-weight: 700; font-size: 2rem; color: var(--au-primario); position: relative; padding-bottom: .75rem; margin-bottom: 1rem; }
.seccion-titulo h2::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 60px; height: 3px; margin-left: -30px; background: var(--au-acento); }
.seccion-titulo.text-start h2::after { left: 0; margin-left: 0; }
.seccion-titulo p { color: var(--au-texto-suave); margin: 0 auto; max-width: 46rem; }
.seccion-oscura .seccion-titulo h2 { color: #fff; }

.tarjeta { background: #fff; border: 1px solid var(--au-borde); border-radius: .75rem; padding: 1.75rem; transition: transform .2s, box-shadow .2s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20,58,84,.1); }
.tarjeta p { color: var(--au-texto-suave); }
.tarjeta-icono { width: 52px; height: 52px; border-radius: .6rem; display: flex; align-items: center; justify-content: center;
  background: rgba(29,78,111,.1); color: var(--au-primario); font-size: 1.5rem; margin-bottom: 1rem; }

.paso-icono { font-size: 2.5rem; color: var(--au-acento); margin-bottom: .5rem; }
.paso p { color: var(--au-texto-suave); }

.ficha { display: block; background: #fff; border: 1px solid var(--au-borde); border-radius: .75rem; overflow: hidden; color: var(--au-texto); }
.ficha-cabecera { display: flex; justify-content: space-between; align-items: flex-start; padding: 1rem 1.25rem; min-height: 110px; color: #fff; font-size: 2rem;
  background:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--au-primario); }
.ficha-invitacion { border: 2px dashed var(--au-borde); background: transparent; color: var(--au-texto-suave); display: flex; align-items: center; justify-content: center; }
.ficha-invitacion:hover { border-color: var(--au-acento); color: var(--au-acento); }

.tramite { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--au-borde); border-radius: .75rem; padding: 1.25rem; }
.tramite > .bi { font-size: 1.6rem; color: var(--au-primario); }
.tramite p { color: var(--au-texto-suave); }

.lista-check { list-style: none; padding: 0; }
.lista-check li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; }
.lista-check li::before { content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: -.05rem; color: var(--au-acento); font-size: 1.15rem; }

.aviso-vacio { border: 2px dashed var(--au-borde); border-radius: .75rem; padding: 3rem 2rem; text-align: center; color: var(--au-texto-suave); }
.aviso-vacio .bi { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
.seccion-oscura .aviso-vacio { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }

/* ── Precios ─────────────────────────────────────────────── */
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--au-borde); border-radius: .75rem; padding: 2rem; }
.plan-destacado { border: 2px solid var(--au-acento); box-shadow: 0 12px 32px rgba(217,119,43,.15); }
.plan-cinta { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); background: var(--au-acento); color: #fff;
  font-size: .75rem; font-weight: 600; border-radius: 50rem; padding: .25rem .9rem; }
.plan-precio { font-family: var(--au-fuente-titulos); font-size: 1.75rem; font-weight: 700; color: var(--au-primario); }

.avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--au-primario); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--au-fuente-titulos); font-size: 1.75rem; font-weight: 600; }

.cta-final { background: linear-gradient(135deg, var(--au-acento) 0%, var(--au-acento-oscuro) 100%); color: #fff; }

/* ── Pie ─────────────────────────────────────────────────── */
footer { background: var(--au-primario-oscuro); color: rgba(255,255,255,.75); }
footer hr { border-color: rgba(255,255,255,.2); }
.pie-titulo { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 1rem; }
.pie-enlaces li { margin-bottom: .45rem; }
.pie-enlaces a { color: rgba(255,255,255,.75); text-decoration: none; }
.pie-enlaces a:hover { color: var(--au-acento); }

/* ── Volver arriba ───────────────────────────────────────── */
.scroll-top { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--au-acento); color: #fff;
  font-size: 1.6rem; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .3s; z-index: 1030; text-decoration: none; }
.scroll-top.activo { opacity: 1; visibility: visible; }
.scroll-top:hover { color: #fff; background: var(--au-acento-oscuro); }

@media (max-width: 575.98px) {
  .seccion { padding: 56px 0; }
  .hero-fila { min-height: 460px; padding: 3rem 0 4rem; }
  .hero-portada .carousel-control-prev, .hero-portada .carousel-control-next { display: none; }
}

/* ── Barra de búsqueda (nav3) ────────────────────────────── */
.barra-busqueda { background: var(--au-fondo-alterno); border-top: 1px solid var(--au-borde); border-bottom: 1px solid var(--au-borde); padding: .6rem 0; }
.buscador { position: relative; max-width: 860px; margin: 0 auto; }
.buscador .buscador-tipo { flex: 0 0 auto; width: auto; max-width: 9.5rem; background-color: #fff; }
.buscador .form-control:focus, .buscador .form-select:focus { border-color: var(--au-primario); box-shadow: 0 0 0 .2rem rgba(29,78,111,.15); }
.buscador-sugerencias { position: absolute; left: 0; right: 0; top: 100%; z-index: 1040; margin-top: 4px;
  box-shadow: 0 12px 28px rgba(20,58,84,.15); max-height: 22rem; overflow-y: auto; }
.buscador-sugerencias .list-group-item.active { background: var(--au-primario); border-color: var(--au-primario); }
.buscador-sugerencias .list-group-item.active .text-secondary { color: rgba(255,255,255,.8) !important; }
.grupo-resultados { color: var(--au-primario); border-bottom: 2px solid var(--au-borde); padding-bottom: .5rem; margin-bottom: 1rem; }
@media (max-width: 575.98px) {
  .buscador .buscador-tipo { max-width: 7rem; font-size: .9rem; }
}