/* ===========================================================
   CECH — Layout de componentes globales (header, nav, footer)
   Requiere variables.css y base.css cargados antes que este archivo.
   =========================================================== */

/* ---- Salto al contenido ---- */
.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-inverted);
  color: var(--color-text-inverted);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus-visible {
  top: var(--space-4);
}

/* ---- Encabezado ----
   Fijo en todo momento con efecto glassmorphism (fondo translúcido +
   desenfoque). #main lleva padding-top equivalente a --header-height
   para compensar que el header sale del flujo normal del documento. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(24, 54, 96, 0.08);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--color-surface);
  }
}

#main {
  padding-top: var(--header-height);
}

.site-header__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-5) var(--content-padding);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-9);
  position: relative;
}

.site-header__brand {
  display: flex;
  align-items: center;
  flex: none;
}

.site-header__logo {
  height: 3.25rem;
  width: auto;
}

/* ---- Navegación ---- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.site-nav__toggle-bars {
  position: relative;
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--color-heading);
  border-radius: 1px;
}

.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-heading);
  border-radius: 1px;
}

.site-nav__toggle-bars::before {
  top: -6px;
}

.site-nav__toggle-bars::after {
  top: 6px;
}

.site-nav__list {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--content-padding) var(--space-5);
}

.site-nav__list.is-open {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  z-index: 50;
}

.site-nav__list a:not(.btn) {
  display: block;
  padding: var(--space-2) var(--space-1);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__list a:not(.btn):hover {
  color: var(--color-accent);
}

.site-nav__list a:not(.btn)[aria-current='page'] {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

.site-nav__cta {
  margin-top: var(--space-2);
  transition: opacity var(--transition-fast);
}

/* ---- Ítem de grupo ("Eventos") con submenú ---- */
.site-nav__group {
  display: flex;
  flex-direction: column;
}

.site-nav__group-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-1);
  background: none;
  border: none;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: left;
  white-space: nowrap;
}

.site-nav__group-trigger:hover {
  color: var(--color-accent);
}

.site-nav__group-trigger.is-current-group {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

.site-nav__chevron {
  width: 0;
  height: 0;
  margin-left: var(--space-2);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--transition-fast);
}

.site-nav__group-trigger[aria-expanded='true'] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-nav__submenu {
  display: none;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-4);
}

.site-nav__group-trigger[aria-expanded='true'] + .site-nav__submenu {
  display: flex;
}

.site-nav__submenu a {
  display: block;
  padding: var(--space-2) var(--space-1);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__submenu a:hover,
.site-nav__submenu a[aria-current='page'] {
  color: var(--color-accent);
}

@media (min-width: 1080px) {
  .site-nav__toggle {
    display: none;
  }

  .site-nav__list,
  .site-nav__list.is-open {
    display: flex;
    position: static;
    flex: 1;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1) var(--space-6);
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }

  .site-nav__list a:not(.btn) {
    position: relative;
    padding: var(--space-2) 0;
  }

  .site-nav__list a:not(.btn):hover {
    color: var(--color-accent);
  }

  .site-nav__list a:not(.btn)[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-growth);
  }

  /* En escritorio el CTA vive en la pestaña colgada (.cta-tab). */
  .site-nav__cta {
    display: none;
  }

  .site-nav__group {
    position: relative;
  }

  .site-nav__group-trigger {
    width: auto;
    padding: var(--space-1) 0;
    border-bottom: 2px solid transparent;
  }

  .site-nav__group-trigger[aria-expanded='true'] {
    border-bottom-color: var(--color-accent);
  }

  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--space-2);
    min-width: 200px;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 50;
  }

  .site-nav__submenu a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }

  .site-nav__submenu a:hover,
  .site-nav__submenu a[aria-current='page'] {
    color: var(--color-accent);
    background: rgba(24, 54, 96, 0.06);
  }
}

/* ---- Botones ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 18px 40px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-inverted);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-inverted);
}

.btn-teal {
  background: #5a999c;
  color: var(--color-text-inverted);
}

.btn-teal:hover {
  background: #4d8689;
  color: var(--color-text-inverted);
}

.btn-olive {
  background: #99bc4d;
  color: var(--color-text-inverted);
}

.btn-olive:hover {
  background: #86a742;
  color: var(--color-text-inverted);
}

.btn-ghost {
  color: var(--color-heading);
  border-color: var(--color-heading);
}

.btn-ghost:hover {
  background: rgba(24, 54, 96, 0.06);
  color: var(--color-heading);
}

/* ---- Pie de página ---- */
.site-footer {
  margin-top: var(--space-9);
  background: var(--color-bg-inverted);
  color: var(--color-text-inverted);
}

/* Cuando la última sección de <main> es de fondo blanco a sangre
   completa, el blanco debe llegar hasta el footer sin dejar ver el
   hueso del body entre ambos (footer.php cierra </main> justo antes
   de abrir <footer>, así que el vecino real es #main, no la sección). */
#main:has(> .section--white:last-child) + .site-footer {
  margin-top: 0;
}

.site-footer__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-8) var(--content-padding) var(--space-6);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
}

.site-footer__logo-link {
  display: inline-block;
}

/* Variante vertical (ícono + wordmark apilado), por eso necesita más
   alto que ancho para que el texto no quede diminuto. El wordmark
   "Centro Empresarial" ya se recoloreó a blanco y la sombra del ícono
   ya viene "horneada" en el archivo (logo-v.webp) — así la sombra cae
   solo detrás del ícono y el texto queda plano, sin filtro CSS.
   Sin el tagline debajo, el logo puede crecer para anclar la columna
   de marca sin superar la altura que ya marcan las columnas de enlaces
   (7 renglones en Institucional), evitando que domine el footer. */
.site-footer__logo {
  height: 6.5rem;
  width: auto;
}

.site-footer__nav .eyebrow {
  color: rgba(250, 250, 248, 0.6);
  margin-bottom: var(--space-4);
  display: block;
}

.site-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav a,
.site-footer__contact a {
  color: var(--color-text-inverted);
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__contact a:hover {
  color: var(--color-growth);
}

.site-footer__contact p {
  margin: 0 0 var(--space-2);
}

.site-footer__contact .eyebrow {
  color: rgba(250, 250, 248, 0.6);
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  border-top: 1px solid rgba(250, 250, 248, 0.15);
  padding: var(--space-4) var(--content-padding);
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(250, 250, 248, 0.65);
}

/* Sin esto, la leyenda de copyright (texto largo, sin saltos) no se
   encoge por debajo de su ancho natural dentro del flex column — es
   el mínimo implícito (min-width:auto) de todo ítem flex — y empuja
   el ancho de TODO el documento más allá del viewport en móvil,
   aunque el texto en sí quepa de sobra al envolver en 2-3 líneas. */
.site-footer__legal > p {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 640px) {
  .site-footer__legal {
    flex-direction: row;
    justify-content: space-between;
  }
}

.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  min-width: 0;
  max-width: 100%;
}

.site-footer__legal-links a {
  color: rgba(250, 250, 248, 0.65);
}

.site-footer__legal-links a:hover {
  color: var(--color-text-inverted);
}

/* Escritorio angosto: con el espaciado completo, los 8 enlaces del
   menú no caben en una fila ("Contacto" baja a una segunda). */
@media (min-width: 1080px) and (max-width: 1279px) {
  .site-header__inner {
    gap: var(--space-5);
  }

  .site-nav__list,
  .site-nav__list.is-open {
    column-gap: var(--space-4);
  }
}

/* ---- CTA "Quiero afiliarme" ----
   Escritorio: pestaña magenta colgada del borde inferior del header.
   Móvil: barra fija inferior con Afiliarme + WhatsApp.
   .is-cta-pending (nav-cta-reveal.js) los oculta mientras los CTA del
   hero están a la vista; sin JS se quedan visibles siempre. */
.cta-tab {
  display: none;
}

@media (min-width: 1080px) {
  .cta-tab {
    position: absolute;
    top: 100%;
    right: var(--content-padding);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 1px; /* debajo del borde del header, no encima */
    padding: var(--space-3) var(--space-5);
    background: var(--color-accent);
    color: var(--color-text-inverted);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-md);
    transition: background var(--transition-fast), transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
  }

  .cta-tab:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-inverted);
  }

  .cta-tab svg {
    width: 1.1em;
    height: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cta-tab.is-cta-pending {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
  }
}

.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--content-padding) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-surface-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(24, 54, 96, 0.08);
  transition: transform var(--transition-base), visibility var(--transition-base);
}

.cta-bar .btn {
  justify-content: center;
  padding: 14px var(--space-5);
}

.cta-bar.is-cta-pending {
  visibility: hidden;
  transform: translateY(100%);
}

/* Espacio para que la barra no tape el final del footer. */
body {
  padding-bottom: 76px;
}

@media (min-width: 1080px) {
  .cta-bar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-tab,
  .cta-bar {
    transition: none;
  }
}