/* =======================================================================
   MEXAV — Página /agenda (Programación oficial)
   =======================================================================
   Capa EXCLUSIVA de la vista Agenda. Se carga solo en /agenda (ver
   header.tpl), después de mexav-public.css y mexav-site.css. Todo cuelga
   de `.mexav-agenda`, que solo existe en esta plantilla: no toca Home,
   Registro, FAQ ni Contacto.

   FUENTES Y RECORTES
   ------------------
   Desktop · `Agenda WEB.png` (3840×11190 = @2x de 1920×5595, fondo
     #DCDCDC opaco). Recorte crop(0, 630, 3840, 11190) ⇒ 3840×10560, que
     son 1920×5280 CSS a @2x. y=629 todavía es gris y y=630 ya es el azul
     #435AA8: el corte cae exactamente en el borde de la composición.
     Se descartó `Agenda WEB v4.png` (@4x, idéntica píxel a píxel: dif.
     media 0.03/255) porque para un render máximo de 1920 CSS el @2x ya
     cubre Retina con la mitad del peso y la cuarta parte de memoria.
   Mobile · `HOME_Agenda.png` (1284×6675 = @3x de 428×2225). Recorte
     crop(0, 543, 1242, 6351) ⇒ 1242×5808 = 414×1936 CSS a @3x. El ancho
     se corta en 1242 y no en 1284 porque el export deja 42px (14 CSS) de
     fondo EXTERIOR a la derecha de la composición — gris arriba y BLANCO
     en los últimos 216 CSS px, donde asoma el bloque de patrocinadores.
     Ese blanco no empalmaría con el fondo de la sección. No se tocó ni
     un píxel de la composición: solo se excluyó espacio exterior.
   Las dos son composiciones DISTINTAS (reflow real, verificado banda a
   banda contra `MEXAV_AGENDA_v4.png`), no una escalada de la otra.

   MEDIDAS DEL ENCABEZADO EDITORIAL (tinta medida sobre el export final)
   --------------------------------------------------------------------
   Desktop (CSS): título x 428.75→1021, y 124.75→217.25, color #EF4123,
     alto de caja 92.5px ⇒ Munich ~94.9px. Nota x 427→704.75, y 242→259,
     #000, avance 10.7px/carácter ⇒ DM Mono ~17.8px sin tracking extra.
     Composición arranca en y=315. El sangrado del bloque es 427/1920 =
     22.24% del ancho de la imagen — porcentaje, no un `left` fijo, para
     que siga a la composición al reducir el viewport.
   Mobile (CSS): título x 29.7, y 118.3→149.3; nota x 29.7, y 159.3→170.7;
     composición en y=181. Sangrado 29.7/414 = 7.17% del ancho del asset.

   SISTEMA RESPONSIVE
   ------------------
   ≥1024  Asset Desktop, FULL-BLEED hasta 1920 CSS y centrado por encima
          de ese ancho (la composición nueva ocupa los 1920 completos, ya
          no es una pieza de 1587 con aire lateral). Encabezado e imagen
          escalan con el MISMO factor, así que la alineación del 22.24%
          se mantiene a cualquier ancho.
   ≤1023  Asset Mobile, tope 856px (= 2× su ancho lógico: nunca se estira
          más allá de 2x de densidad). El corte es de LEGIBILIDAD, no
          arbitrario: el cuerpo del asset Desktop mide 21 CSS px a 1920,
          o sea 11.2px a 1024 (legible) pero 8.4px a 769 (no). El asset
          Mobile a 856 rinde ese mismo cuerpo a 14.6px, así que en el
          cruce el texto CRECE en vez de encogerse.
   La imagen nunca se recorta ni se deforma: width:100% + height:auto, sin
   object-fit, sin background-size.
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. SECCIÓN — fondo exterior gris claro (idéntico al horneado)
   -------------------------------------------------------------------- */
.mexav-agenda {
	background-color: #DCDCDC;
	/* Full-bleed: la composición Desktop llega al borde del viewport. */
	padding-inline: 0;
	/* 124.75px a 1920 = 6.4974vw; se congela al llegar al tope de 1920. */
	padding-top: clamp(48px, 6.4974vw, 124.75px);
	/* SIN padding-bottom: la composición termina donde termina la imagen y el
	   footer compartido arranca inmediatamente después, como en el diseño. */
	padding-bottom: 0;
}

/* Ancho útil = ancho lógico del asset Desktop. Por encima de 1920 la
   composición se centra; por debajo escala en proporción. */
.mexav-agenda__wrap {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
}

/* -----------------------------------------------------------------------
   2. ENCABEZADO EDITORIAL (HTML real, NO el horneado del export)
   -------------------------------------------------------------------- */
/* Sangrado en PORCENTAJE del ancho de la imagen: 427/1920 = 22.24%. Al ser
   relativo, el título sigue a la composición en todo el rango Desktop. */
.mexav-agenda__head {
	padding-left: 22.24%;
	padding-right: 4%;
}

.mexav-public .mexav-agenda__title {
	margin: 0;
	/* !important gana al neutralizador global de headings de code4you.css. */
	color: #EF4123 !important;
	font-family: var(--mx-font-display);
	font-weight: 700;
	font-size: clamp(40px, 4.9427vw, 94.9px);   /* 94.9px @1920 */
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase !important; /* gana al neutralizador (none!important) */
}

.mexav-public .mexav-agenda__note {
	/* 16px @1920: sitúa la tinta de la nota en y=242 como en el export. */
	margin: clamp(8px, 0.8333vw, 16px) 0 0;
	color: var(--mx-black-pure);
	font-family: var(--mx-font-mono);
	/* Suelo de 11px: el proporcional (9.5px a 1024) dejaba de leerse. */
	font-size: clamp(11px, 0.9271vw, 17.8px);
	line-height: 1.2;
	letter-spacing: 0;
}

/* -----------------------------------------------------------------------
   3. IMAGEN DE PROGRAMACIÓN — pieza principal, siempre completa
   -------------------------------------------------------------------- */
.mexav-agenda__img {
	display: block;
	width: 100%;
	height: auto;
	/* 58px @1920: deja el arranque de la composición en y=315. */
	margin-top: clamp(24px, 3.0208vw, 58px);
}

/* -----------------------------------------------------------------------
   4. TABLET / MOBILE (≤1023px) — entra el asset Mobile (reflow propio)
   -------------------------------------------------------------------- */
@media (max-width: 1023px) {
	/* Base del sistema Mobile: 414 CSS px de ancho de composición. Los vw
	   de aquí son proporciones de ese ancho; los topes corresponden al
	   render máximo de 856px (2×). */
	.mexav-agenda {
		padding-top: clamp(24px, 11.29vw, 96.6px);   /* tinta del título en y=48.3 */
		padding-bottom: 0;
	}

	/* Tope de 856px = 2× el ancho lógico del asset: nunca baja de 2x de
	   densidad. A ≤856px queda full-bleed. */
	.mexav-agenda__wrap { max-width: 856px; }

	/* 29.7/414 = 7.17% */
	.mexav-agenda__head {
		padding-left: 7.17%;
		padding-right: 7.17%;
	}

	.mexav-public .mexav-agenda__title { font-size: clamp(24px, 7.43vw, 63.6px); }
	.mexav-public .mexav-agenda__note  {
		margin-top: clamp(3px, 1.12vw, 9.6px);
		font-size: clamp(10px, 2.85vw, 24.4px);
	}
	.mexav-agenda__img { margin-top: clamp(7px, 2.69vw, 23px); }
}