/* =======================================================================
   MEXAV — CAPA DE SITIO COMPARTIDA (.mexav-site)
   -----------------------------------------------------------------------
   Estilos que deben verse IGUAL en todas las páginas públicas con identidad
   MEXAV (Home, Registro y las que vengan): Header, navegación y —en un paso
   posterior— Footer, con sus breakpoints.

   Reparto de responsabilidades:
     · mexav-public.css  → base pública (variables, tipografías, estructura
       genérica de header/nav/logo/container). Carga en TODAS las vistas.
     · mexav-site.css    → ESTA capa: la identidad MEXAV del chrome (header y
       footer) compartida por Home y Registro.
     · mexav-home.css    → EXCLUSIVO de las secciones de la landing.
     · mexav-registro.css→ EXCLUSIVO del formulario.

   Orden de carga: mexav-public.css → mexav-site.css → CSS de la vista.

   Especificidad: se usa `.mexav-public.mexav-site` (el body lleva ambas)
   donde hace falta vencer a los neutralizadores de code4you.css, igual que
   hacía la versión anterior con `.mexav-public.mexav-home`.
   ======================================================================= */

/* -----------------------------------------------------------------------
   HEADER + NAVEGACIÓN
   Estas cinco reglas vivían en mexav-home.css bajo `.mexav-home` y eran lo
   único que diferenciaba el header del Home del header base. Al pasar a
   `.mexav-site`, Registro hereda exactamente el mismo header sin duplicar
   markup ni estilos.
   ----------------------------------------------------------------------- */

/* Barra de navegación: negro puro y altura del diseño. */
.mexav-site .mexav-header__bar { background: var(--mx-black-pure); }
.mexav-site .mexav-header__inner { min-height: 70px; }

/* Header full-bleed como en la maqueta: SIN el cap de 1200px del contenedor
   general; padding lateral ~60px (logo pegado a la izquierda, nav a la
   derecha). Aplica a todo lo que use .mexav-container dentro del header. */
.mexav-site .mexav-header .mexav-container {
	max-width: none;
	padding-inline: 60px;
}

/* Isotipo M/A: algo mayor que el base (34px), como en la maqueta (~44px). */
.mexav-site .mexav-logo__mark {
	width: 44px;
	height: 44px;
	border-width: 2px;
	font-size: 1.2rem;
}

/* Navegación en escritorio: fuente display (Munich) y peso bold igual que
   Figma. El header base usa DM Mono; aquí se corrige para todo el sitio. */
@media (min-width: 992px) {
	.mexav-public.mexav-site .mexav-nav__link {
		font-family: var(--mx-font-display);
		font-weight: 700;
		font-size: 1.05rem;
		letter-spacing: 0.01em;
	}
}

/* Enlace de navegación aún sin destino ("Contáctanos"): se marca como
   pendiente igual que los legales del footer. El JS compartido cancela el
   clic (js/mexav-public.js → initNavPending), así que no salta al inicio.
   Visualmente NO se distingue: el diseño no contempla un estado apagado. */
.mexav-site .mexav-nav__link[data-nav-pending="true"] { cursor: default; }

/* =======================================================================
   NAVEGACIÓN POR ANCLAS — scroll suave y compensación del header sticky
   -----------------------------------------------------------------------
   El header es `position: sticky; top: 0` con 70px de alto (+1 de borde),
   así que sin compensar, el destino de un ancla quedaría debajo de él.
   Se resuelve SOLO con CSS (sin JS): `scroll-margin-top` en los destinos.

   Se declara de dos formas complementarias:
     · sobre los ids reales (soporte universal, es lo que realmente aplica);
     · sobre `:target` como red genérica, para que cualquier ancla futura
       herede la compensación sin tener que añadirla aquí.

   Con `prefers-reduced-motion` el desplazamiento vuelve a ser instantáneo.
   ======================================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

.mexav-site #agenda,
.mexav-site #faqs,
.mexav-site :target { scroll-margin-top: 90px; }

/* =======================================================================
   FOOTER DE SITIO (.mexav-site-footer)
   -----------------------------------------------------------------------
   Diseño oficial (CINTILLO.png) reconstruido con HTML accesible: panel
   BLANCO con la tira de logos oficial (footer-patrocinadores.png,
   transparente = misma tira de CINTILLO) + barra legal NEGRA con enlaces
   reales. Medidas del export 1:1 (footer ≈415px: panel blanco ≈376 + barra
   legal ≈39). vw para escalar con el diseño base 1920.

   Venía de mexav-home.css como `.mexav-home-footer`; se movió tal cual (los
   mismos 17 bloques, incluidas las capas Tablet y Mobile) cambiando solo el
   scope a `.mexav-site` y el nombre de bloque a `.mexav-site-footer`, para
   que Home y Registro compartan un único markup y un único CSS.
   ======================================================================= */
.mexav-site .mexav-site-footer { margin: 0; }

/* Panel de logos (blanco). Logos centrados; alto ≈376px por padding. */
.mexav-site .mexav-site-footer__sponsors {
	background: var(--mx-white);
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: 4.8vw;              /* ~92px @1920 → panel ≈376px con la tira */
}
.mexav-site .mexav-site-footer__logos {
	display: block;
	width: min(1833px, 95vw);          /* logos ≈85px de alto, como el export */
	height: auto;                      /* tamaño nativo, sin deformar */
}

/* Barra legal (negra). Enlaces reales (rutas pendientes). */
.mexav-site .mexav-site-footer__legal {
	background: var(--mx-black-pure);
	padding-block: 0.55rem;            /* barra ≈39px como el export */
}
.mexav-site .mexav-site-footer__legal-inner {
	max-width: 1680px;
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 4vw, 3rem);
	display: flex;
	align-items: center;      /* centrado vertical dentro de la barra */
	justify-content: center;  /* centrado horizontal (antes space-between) */
	gap: 1rem;
}
/* Aviso de copyright: hereda el mismo tamaño/color que tenían los enlaces
   legales, así que la barra conserva exactamente su alto visual. */
.mexav-public.mexav-site .mexav-site-footer__copy {
	color: var(--mx-white);
	font-family: var(--mx-font-mono);
	font-size: 1.4rem;                 /* ~18px */
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* ---- 1023–769 Tablet: logos proporcionales (height:auto ⇒ sin deformar) ---- */
@media (max-width: 1023px) and (min-width: 769px) {
	.mexav-site .mexav-site-footer__sponsors { padding-block: clamp(28px, 3.6vw, 40px); }
	.mexav-site .mexav-site-footer__logos { width: min(680px, 90vw); }
}

/* ---- 768–601 Tablet angosta ---- */
@media (max-width: 768px) and (min-width: 601px) {
	.mexav-site .mexav-site-footer__sponsors { padding-block: clamp(22px, 3.2vw, 28px); }
	.mexav-site .mexav-site-footer__logos { width: min(560px, 92vw); }
}

/* ---- ≤600 Mobile (medido en BACKS/CINTILLO.png + HOME @3x).
   Tira blanca de 80px con la tira OFICIAL de logos: los 7 grupos de
   footer-patrocinadores.png, normalizados a 382px de ancho, coinciden uno a
   uno con los del cintillo Mobile, así que es el MISMO asset escalado. El
   cintillo NO se usa como imagen: los legales son enlaces reales. ---- */
@media (max-width: 600px) {
	.mexav-site .mexav-site-footer__sponsors { padding: 22px 0 15.9px; }
	.mexav-site .mexav-site-footer__logos {
		width: min(407px, 95vw);       /* tinta = 382px a 428, como el diseño */
		height: auto;                  /* sin deformar */
	}
	/* Barra legal: una sola fila (así está en el Figma), con los enlaces a los
	   extremos. OJO: el diseño la dibuja de 10px con texto de ~7px, ilegible;
	   se sube a 10px de texto por accesibilidad y la barra queda en ~22px. */
	.mexav-site .mexav-site-footer__legal { background: var(--mx-black); padding-block: 4px; }
	.mexav-site .mexav-site-footer__legal-inner {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 12px;
		padding-inline: clamp(14px, 14.3vw, 61px);
	}
	.mexav-public.mexav-site .mexav-site-footer__copy { font-size: 10px; letter-spacing: 0.02em; }
}