/* =======================================================================
   MEXAV — Página /faqs (Preguntas Frecuentes)
   =======================================================================
   Capa EXCLUSIVA de la vista FAQ. Se carga solo en /faqs (ver header.tpl),
   después de mexav-public.css y mexav-site.css. NO toca Home ni Registro:
   todo cuelga de `.mexav-faqs`, que solo existe en esta plantilla.

   ORIGEN DE LAS MEDIDAS
   ---------------------
   Export oficial FAQS.png (@2x, 3840×6550). Medido pixel a pixel:
     · bloque negro #191313 .......... 1920 × 3275 CSS (ALTURA NATURAL:
       la marca el contenido, no el CSS; el export sólo la confirma)
     · el bloque nace en x=204 @2x → los 102 CSS px a su izquierda son
       SANGRADO del asset de textura, no diseño (por eso left:-102px).
     · textura ....................... 382×759 nativo, alfa real, sin fondo,
       en x=−102 (visible 0→280) y desde y=311.5, REPETIDA en vertical:
       el export muestra 16 barras = el mismo asset 2 veces (y 311.5→1838.5).
     · título "FAQ's" (Munich) ....... tinta en x 369, y 69.5 · ~111.5px
     · columna de respuestas ......... x 708, ancho 777
     · mapa (pregunta 7) ............. mismo asset de Ubicación en Home
       (mapa-ubicacion-desktop.png, 578×376 nativo), 580px en el export
     · preguntas ..................... x 717 (9px de sangría), DM Sans 700
       30.3px, color #EC5E2A
     · respuestas .................... DM Sans 400 25px / interlínea 50px,
       color #F9F3E3
   El ritmo vertical del export crece ~7.5px por línea de respuesta (artefacto
   del auto-layout de Figma: la interlínea medida es 50px constante, pero la
   caja de cada bloque avanza 57.5px por línea). No es reproducible con una
   sola regla CSS, así que se usa el separador CONSTANTE que minimiza el error:
   la primera pregunta cae en su y exacta y la desviación se mantiene por
   debajo del 1% del alto del bloque.

   SISTEMA RESPONSIVE (mismo criterio aprobado en Home)
   ----------------------------------------------------
   1920→1200  todo en proporción del viewport (coef = valor_1920 / 19.2) con
              clamp() cuyo máximo es el valor exacto del Figma: al escalar
              fuente y columna con el mismo factor los CORTES DE LÍNEA no
              cambian en todo el rango.
   ≤1023      Tablet: se apila (título sobre las preguntas) y la tipografía
              deja de encoger para no volverse ilegible.
   ≤768       Mobile: la textura Desktop se sustituye por barras-rojas-mobile
              .png (39×322 nativo), igual que hace Home.
   La textura NUNCA se escala ni se deforma: conserva sus píxeles nativos y
   solo se REPOSICIONA o se REPITE; la sección recorta el sangrado lateral con
   overflow:hidden (nunca el contenido, cuya altura es libre).
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. SECCIÓN
   -------------------------------------------------------------------- */
.mexav-faqs {
	position: relative;                /* ancla de la capa de textura */
	overflow: hidden;                  /* recorta SOLO el sangrado lateral */
	background-color: #191313;         /* medido en el export */
	padding-top: 73.3px;               /* deja la tinta de la 1ª pregunta en 82.5 */
	padding-bottom: 96px;              /* aire final; el alto total es NATURAL */
}

/* Textura oficial: tamaño NATIVO, REPETIDA en vertical, sin deformar.
   `background-size` fija el mosaico a los 382×759 nativos del PNG y
   `repeat-y` lo continúa hacia abajo, así que la decoración acompaña
   cualquier altura de página sin estirarse y sin assets nuevos.
   El borde derecho del asset se mantiene a 14.584vw del borde izquierdo del
   viewport (280px @1920), que es su posición medida; así conserva siempre la
   misma holgura contra el título aunque el viewport encoja, sin escalarse.
   El alto son 2 mosaicos (1518px), que es lo que muestra el export. */
.mexav-faqs__textura {
	position: absolute;
	z-index: 1;
	top: 311.5px;
	left: calc(14.584vw - 382px);
	width: 382px;                      /* NATIVO 1:1 */
	height: 1518px;                    /* 2 × 759 nativos */
	background-image: url("../img/mexav/faq-textura-desktop.png");
	background-repeat: repeat-y;
	background-position: left top;
	background-size: 382px 759px;      /* tamaño NATIVO: nunca se deforma */
	pointer-events: none;
	user-select: none;
}

.mexav-faqs__inner {
	position: relative;
	z-index: 2;                        /* contenido SIEMPRE sobre la textura */
	display: flex;
	align-items: flex-start;
	padding-left: 363.65px;            /* + LSB de la Munich ⇒ tinta en 369 */
	padding-right: 40px;
	gap: 108px;
}

/* -----------------------------------------------------------------------
   2. TÍTULO
   -------------------------------------------------------------------- */
.mexav-public .mexav-faqs__title {
	flex: 0 0 236.35px;                /* 231 de tinta + su bearing izquierdo */
	margin: -4.4px 0 0;                /* sube la tinta a y=69.5, la medida */
	color: #ffffff !important;
	font-family: var(--mx-font-display);
	font-weight: 700;
	font-size: 111.5px;
	line-height: 1;
	letter-spacing: 0;
}

/* -----------------------------------------------------------------------
   3. LISTA (sin acordeón: todo permanentemente visible)
   -------------------------------------------------------------------- */
.mexav-faqs__list {
	/* La columna es más ancha que el texto de las respuestas: la pregunta 3
	   mide 789px en el export y debe caber en UNA línea, como ahí. */
	flex: 0 0 810px;
	max-width: 810px;
	min-width: 0;
}
.mexav-faqs__item + .mexav-faqs__item { margin-top: 42.05px; }

.mexav-public .mexav-faqs__q {
	margin: 0;
	padding-left: 10px;                /* sangría medida frente a la respuesta */
	/* !important porque mexav-public.css fuerza `color: inherit !important`
	   en todos los h1–h6 (misma convención que los títulos de Home). */
	color: #ec5e2a !important;
	font-family: "DM Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 30.3px;
	/* 1.32 = 40px sobre 30.3px, la interlínea que mide el export en la única
	   pregunta que va a dos líneas (la 10). Unitless para que siga al
	   font-size en todo el responsive. */
	line-height: 1.32;
	letter-spacing: 0;
}
.mexav-faqs__a { margin: 0; }
.mexav-public .mexav-faqs__a-text {
	margin: 6.9px 0 0;
	padding: 0;
	max-width: 777px;                  /* ancho que reproduce los cortes de
	                                      línea exactos del export */
	color: #f9f3e3;
	font-family: "DM Sans", system-ui, sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 50px;
}
.mexav-public .mexav-faqs__a-text strong { font-weight: 700; }

/* Respuestas de varios párrafos (preguntas 5 y 7): en el export las líneas
   quedan a 100px, o sea una línea en blanco completa entre párrafos. */
.mexav-public .mexav-faqs__a-text + .mexav-faqs__a-text { margin-top: 50px; }

/* Mapa de la pregunta 7: MISMO asset que la sección Ubicación de Home
   (578×376 nativo). Fluido y sin deformar; el max-width lo mantiene en su
   tamaño nativo, que es el que muestra el export (580px). */
.mexav-faqs__mapa {
	margin: 34px 0 0;
	max-width: 578px;
}
.mexav-faqs__mapa img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* Enlaces dentro de las respuestas ("Ubicación", "el programa", pre-registro). */
.mexav-public .mexav-faqs__a-link {
	color: #ec5e2a;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mexav-public .mexav-faqs__a-link:hover,
.mexav-public .mexav-faqs__a-link:focus-visible { color: #f26a35; }

/* Enlace DESTACADO ("Puedes realizar tu pre-registro aquí", "el programa"):
   en el export va en el color del cuerpo y en negrita, no en naranja. */
.mexav-public .mexav-faqs__a-link--fuerte {
	color: #f9f3e3;
	font-weight: 700;
}
.mexav-public .mexav-faqs__a-link--fuerte:hover,
.mexav-public .mexav-faqs__a-link--fuerte:focus-visible { color: #ffffff; }

/* =======================================================================
   4. DESKTOP/LAPTOP FLUIDO (1920 → 1200)
   -----------------------------------------------------------------------
   Coeficiente = valor_1920 / 19.2. Máximo del clamp = valor del Figma a
   1920 (por encima de 1920 nunca crece); mínimo = valor a 1200.
   ======================================================================= */
@media (min-width: 1024px) {
	.mexav-faqs {
		padding-top: clamp(45.8px, 3.818vw, 73.3px);
		padding-bottom: clamp(60px, 5vw, 96px);
	}
	/* La textura escala su recorrido con el resto de la composición: el mosaico
	   sigue a tamaño nativo (repeat-y), lo que cambia es cuántos se ven. */
	.mexav-faqs__textura {
		top: clamp(194.7px, 16.224vw, 311.5px);
		height: clamp(948.8px, 79.063vw, 1518px);
	}
	.mexav-faqs__inner {
		padding-left: clamp(227.3px, 18.94vw, 363.65px);
		padding-right: clamp(25px, 2.083vw, 40px);
		gap: clamp(67.5px, 5.625vw, 108px);
	}
	.mexav-public .mexav-faqs__title {
		flex-basis: clamp(147.7px, 12.31vw, 236.35px);
		margin-top: clamp(-4.4px, -0.229vw, -2.75px);
		font-size: clamp(69.7px, 5.807vw, 111.5px);
	}
	.mexav-faqs__list {
		flex-basis: clamp(506.3px, 42.188vw, 810px);
		max-width: clamp(506.3px, 42.188vw, 810px);
	}
	.mexav-faqs__item + .mexav-faqs__item { margin-top: clamp(26.3px, 2.19vw, 42.05px); }
	.mexav-public .mexav-faqs__q {
		padding-left: clamp(6.25px, 0.521vw, 10px);
		font-size: clamp(18.9px, 1.578vw, 30.3px);
	}
	.mexav-public .mexav-faqs__a-text + .mexav-faqs__a-text { margin-top: clamp(31.3px, 2.604vw, 50px); }
	.mexav-faqs__mapa {
		margin-top: clamp(21.3px, 1.771vw, 34px);
		max-width: clamp(361.3px, 30.104vw, 578px);
	}
	.mexav-public .mexav-faqs__a-text {
		max-width: clamp(485.6px, 40.469vw, 777px);
		margin-top: clamp(4.3px, 0.359vw, 6.9px);
		font-size: clamp(15.6px, 1.302vw, 25px);
		line-height: clamp(31.3px, 2.604vw, 50px);
	}
}

/* =======================================================================
   5. TABLET (≤1023) — se apila y la tipografía deja de encoger
   ======================================================================= */
@media (max-width: 1023px) {
	.mexav-faqs {
		padding-top: clamp(40px, 5vw, 51px);
		padding-bottom: clamp(40px, 5vw, 51px);
	}
	/* Misma regla de siempre: tamaño nativo, solo reposicionada. El borde
	   derecho queda 24px antes del carril de contenido. */
	.mexav-faqs__textura {
		top: clamp(140px, 17.5vw, 180px);
		left: calc(12vw - 24px - 382px);
		height: clamp(759px, 95vw, 1000px);
	}
	.mexav-faqs__inner {
		display: block;
		padding-left: clamp(92px, 12vw, 123px);
		padding-right: clamp(24px, 4vw, 48px);
	}
	.mexav-public .mexav-faqs__title {
		margin: 0 0 clamp(24px, 3.4vw, 35px);
		font-size: clamp(56px, 7vw, 72px);
	}
	/* Al apilarse, la columna dejaría una línea larguísima: se le pone un
	   tope de medida (la del Figma es el 40% del viewport, aquí sería el
	   85%) para conservar una lectura de ~70-75 caracteres. */
	.mexav-faqs__list { max-width: min(100%, 640px); }
	.mexav-public .mexav-faqs__a-text { max-width: 100%; }
	.mexav-faqs__item + .mexav-faqs__item { margin-top: clamp(26px, 3.2vw, 33px); }
	.mexav-public .mexav-faqs__q {
		padding-left: 6px;
		font-size: clamp(19px, 2.35vw, 24px);
		line-height: 1.25;
	}
	.mexav-public .mexav-faqs__a-text {
		margin-top: clamp(8px, 1vw, 10px);
		font-size: clamp(15px, 1.85vw, 19px);
		line-height: 2;
	}
}

/* =======================================================================
   6. ≤768 — cambio de ASSET decorativo (igual que Home)
   -----------------------------------------------------------------------
   A partir de aquí la textura Desktop deja de tener sentido (quedaría un
   hilo de 60px) y se sustituye por el asset Mobile ya usado en Home. Ambos
   van a TAMAÑO NATIVO: `content:url()` cambia el archivo sin reescalarlo.
   La tipografía sigue en la escala Tablet hasta 600px.
   ======================================================================= */
@media (max-width: 768px) {
	.mexav-faqs {
		padding-top: 44px;
		padding-bottom: 40px;
	}
	.mexav-faqs__textura {
		top: 92px;
		left: 0;
		width: 39px;                   /* NATIVO 1:1 */
		height: 966px;                 /* 3 × 322 nativos */
		background-image: url("../img/mexav/barras-rojas-mobile.png");
		background-size: 39px 322px;   /* tamaño NATIVO: nunca se deforma */
	}
	.mexav-faqs__inner {
		padding-left: 56px;            /* libra los 39px de barras + aire */
		padding-right: 30px;
	}
	.mexav-faqs__list { max-width: min(100%, 560px); }
	.mexav-public .mexav-faqs__title { margin-bottom: 20px; }
}

/* =======================================================================
   7. MOBILE (≤600) — escala del FAQ Mobile ya aprobada en Home
   ======================================================================= */
@media (max-width: 600px) {
	.mexav-faqs { padding-top: 47px; padding-bottom: 40px; }
	.mexav-faqs__textura { top: 96px; }
	.mexav-faqs__list { max-width: 100%; }
	.mexav-public .mexav-faqs__title {
		margin-bottom: 14px;
		font-size: 49px;               /* misma escala del FAQ Mobile de Home */
	}
	.mexav-faqs__item + .mexav-faqs__item { margin-top: 22px; }
	.mexav-public .mexav-faqs__q {
		padding-left: 0;
		font-size: 16px;
		line-height: 1.2;
	}
	.mexav-public .mexav-faqs__a-text {
		margin-top: 7px;
		font-size: 13.3px;
		line-height: 1.95;
	}
}

/* ---- ≤428 (Mobile estrecho): se ajusta el carril, nada más ---- */
@media (max-width: 428px) {
	.mexav-faqs { padding-top: 42px; padding-bottom: 36px; }
	.mexav-faqs__textura { top: 88px; }
	.mexav-faqs__inner { padding-left: 52px; padding-right: 24px; }
	.mexav-public .mexav-faqs__title { font-size: 42px; }
	.mexav-public .mexav-faqs__q { font-size: 15px; }
	.mexav-public .mexav-faqs__a-text { font-size: 12.6px; line-height: 1.9; }
}