/* ==========================================================================
   03 · LAYOUT — chrome persistente del sitio (header, footer, FAB)
   ==========================================================================
   Todo lo que aparece en TODAS las páginas del sitio, no solo en el Home:
   header con navegación, footer y el botón flotante de WhatsApp.

   Cuando se agreguen más páginas (Seguros, Aprende, Contacto...), este
   archivo se reutiliza tal cual — no depende de nada de 05-sections.css.
   ========================================================================== */

/* --------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  max-width: var(--content-maxw);
  margin: 0 auto;
  gap: 10px;
}

/* Lockup de marca: isotipo + nombre + tagline. Se usa en el header (fondo
   blanco, variante "positiva") y en el footer (fondo navy, variante
   "negativa") — ver assets/logo/README.md para el porqué de cada archivo. */
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  min-width: 0;
  flex: 0 1 auto;
}

.logo-mark {
  height: 36px;
  width: auto;
  flex: none;
  display: block;
}

@media (min-width: 1024px) {
  .logo-mark {
    height: 42px;
  }
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

.logo-text b {
  font-family: var(--font-head);
  color: var(--color-navy);
  font-size: .82rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-text small {
  color: var(--color-green-dark);
  font-size: .64rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1024px) {
  .logo-text b { font-size: 1.02rem; }
  .logo-text small { font-size: .68rem; }
}

/* Footer usa la variante negativa del isotipo (blanco/verde sobre navy),
   así que el texto junto a ella también pasa a blanco. */
.footer-brand .logo-text b {
  color: var(--color-white);
}

/* Navegación principal — oculta hasta desktop, ver .mobile-drawer para
   el equivalente en móvil/tablet. */
nav.primary {
  display: none;
}

@media (min-width: 1024px) {
  nav.primary {
    display: block;
  }
}

nav.primary ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

nav.primary a {
  text-decoration: none;
  color: var(--color-graphite);
  font-weight: 600;
  font-size: .92rem;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

nav.primary a:hover,
nav.primary a[aria-current="page"] {
  color: var(--color-navy);
  border-bottom-color: var(--color-green);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* En móvil solo se muestran Cotizar + el toggle del menú (ver nav.js);
   el botón de WhatsApp del header aparece recién en desktop para no
   saturar el espacio disponible — el FAB flotante ya cubre esa acción
   en pantallas chicas. */
.header-actions .btn {
  padding: 11px 16px;
  font-size: .9rem;
}

.header-actions .btn-primary {
  padding: 10px 14px;
  font-size: .82rem;
}

.header-actions .btn-whatsapp {
  display: none;
}

@media (min-width: 1024px) {
  .header-actions .btn-whatsapp {
    display: inline-flex;
  }
  .header-actions .btn-primary {
    padding: 14px 22px;
    font-size: .98rem;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  flex: none;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* Drawer de navegación móvil — controlado por js/nav.js (clase .open). */
.mobile-drawer {
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 10px 20px 18px;
}

.mobile-drawer.open {
  display: flex;
}

.mobile-drawer a {
  text-decoration: none;
  color: var(--color-navy);
  font-weight: 600;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.02rem;
}

.mobile-drawer .btn {
  margin-top: 12px;
}

@media (min-width: 1024px) {
  .mobile-drawer {
    display: none !important;
  }
}

/* --------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------- */
footer.site {
  background: var(--color-footer-bg);
  color: #B9C1DA;
  padding: 48px 0 24px;
  font-size: .88rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  }
}

.footer-brand p {
  color: #8D96B3;
  margin-top: 12px;
  font-size: .85rem;
  max-width: 36ch;
}

footer.site h5 {
  color: var(--color-white);
  font-family: var(--font-head);
  font-size: .85rem;
  margin-bottom: 12px;
  letter-spacing: .03em;
}

footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

footer.site a {
  text-decoration: none;
  color: #B9C1DA;
}

footer.site a:hover {
  color: var(--color-white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #7B84A3;
  font-size: .78rem;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer-bottom a {
  color: #9AA3C0;
}

/* --------------------------------------------------------------------
   REDES SOCIALES (footer)
   Íconos en línea (SVG), sin pedidos de red extra — mismo criterio que
   el resto de íconos de UI genéricos del sitio (ver README, "Dos
   familias de íconos"). Facebook se dibuja relleno (glifo estándar,
   el más reconocible así) e Instagram en contorno, para que conviva
   con el resto de íconos de línea del sitio sin desentonar.
   -------------------------------------------------------------------- */
.social-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.social-links a {
  display: inline-flex;
  color: #9AA3C0;
  transition: color .15s ease;
}

.social-links a:hover {
  color: var(--color-white);
}

.social-links svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------
   BOTÓN FLOTANTE DE WHATSAPP
   -------------------------------------------------------------------- */
.fab-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  z-index: 90;
  text-decoration: none;
}