/* =================================================================
   landing.css — single-landing.php (CPT `landing`, PoC de landings de evento 2026-07-30, Figma
   39-Blank-Canvas-Desktop nodo 4187:18126). 12 secciones de la biblioteca de Flexible Content
   (acf-json/group_landing_sections.json) — estilos INTENCIONALMENTE genéricos/funcionales por
   ahora (spacing/tamaños aproximados, no pixel-perfect): el detalle fino de cada layout se agrega
   después de validar reordenar/activar-desactivar secciones con contenido real (pedido explícito
   del usuario). Reusa tokens existentes (--dia-color-..., --space-..., --font-sans, --container),
   convención `@layer views` estándar del tema. OJO al editar este bloque: nunca escribir "*" seguido
   de "/" en un comentario (gotcha §12.97 de gotchas.md) — cierra el comentario antes de tiempo y el
   navegador descarta en silencio TODO el resto del archivo (eso pasó acá: cssRules.length daba 0).
   ================================================================= */

@layer views {

	.landing-page { overflow-x: hidden; }

	/* ---- Contenedor genérico reusado por (casi) todas las secciones — .landing-hero__inner NO
	   entra acá a propósito: es el único bloque alineado a la izquierda con el gutter fijo del
	   sitio en vez de centrado (ver su regla propia más abajo, pedido explícito del usuario). ---- */
	.landing-video__inner,
	.landing-numeralia__inner,
	.landing-quote__inner,
	.landing-slider__inner,
	.landing-gallery__inner,
	.landing-steps__inner,
	.landing-cards__inner,
	.landing-videos-cols__inner,
	.landing-form__inner {
		max-width: var(--container);
		margin-inline: auto;
		padding-inline: var(--space-m);
		box-sizing: border-box;
	}

	/* ---- Botones compartidos: mismo tratamiento (border+hover gris) que el resto del sitio
	   (.btn-general/.contact-form__submit/.error-404__btn — nunca duplicado en 4 lugares
	   distintos, ver §12.76 gotchas.md sobre este mismo combo repetido). ---- */
	.landing-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 17px 24px;
		border-radius: var(--dia-radius-sm, 4px);
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-decoration: none;
		cursor: pointer;
	}
	.landing-btn--primary {
		border: 1px solid var(--dia-color-border-strong, #232323);
		background: var(--dia-color-text-primary, #121212);
		color: #fff;
	}
	.landing-btn--primary:hover { opacity: .85; }
	.landing-btn--secondary {
		border: 1px solid var(--dia-color-border-strong, #232323);
		background: none;
		color: var(--dia-color-text-primary, #121212);
	}
	.landing-btn--secondary:hover {
		border-color: #a7b7ca;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}

	/* ============ 1. Hero (Figma nodo 4526:14368) ============ */
	.landing-hero {
		position: relative;
		min-height: 600px; /* spec Figma a 1440px de canvas */
		display: flex;
		align-items: center;
		overflow: hidden;
		background: #0d001d; /* mismo tono que el fondo del Figma, visible mientras carga la imagen */
	}
	.landing-hero__bg { position: absolute; inset: 0; }
	.landing-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
	/* SIN scrim propio: la imagen de fondo ya viene flateada/editada por el diseñador (pedido
	   explícito del usuario 2026-07-30) — mismo criterio que .contact-info-card__bg (contact.css). */
	.landing-hero__inner {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		max-width: 587px;
		box-sizing: content-box;
		/* Mismo gutter fluido que el resto del sitio hasta 80rem (§12.41) — el contenido queda
		   alineado a la izquierda con el header, no centrado como las demás secciones de la
		   landing (pedido explícito del usuario). */
		padding-inline-start: clamp(var(--space-m), 6vw, 7.5rem);
		padding-block: 4.5rem;
		color: var(--dia-color-text-inverse, #fff);
	}
	/* A partir de 80rem el header/resto del sitio dejan de crecer con el viewport (pasan a un
	   contenedor centrado de --container/1200px, §12.41) — el padding fluido de arriba, calculado
	   sobre el 100vw completo, se seguía separando del borde izquierdo real de ese contenedor en
	   pantallas anchas (bug real reportado por el usuario, capturado en newdia.nett.mx: el hero
	   quedaba ~230px más a la izquierda que el logo del header). Esta regla replica el borde
	   izquierdo EXACTO de un `max-width:var(--container);margin-inline:auto` sin centrar la caja
	   completa (el contenido debe quedar pegado a la izquierda, no centrado). */
	@media (width >= 80rem) {
		.landing-hero__inner {
			padding-inline-start: calc((100% - var(--container)) / 2);
		}
	}
	.landing-hero__logo {
		display: block;
		max-width: 482px;
		width: 100%;
		height: auto;
		margin-bottom: 48px;
	}
	.landing-hero__eyebrow {
		margin: 0 0 12px;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: .6px;
		text-transform: uppercase;
		opacity: .7;
	}
	.landing-hero__title {
		margin: 0 0 48px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); /* hasta 40px, spec Figma */
		line-height: 1.25;
		letter-spacing: -1px;
	}
	.landing-hero__buttons { display: flex; flex-wrap: wrap; gap: 30px; }
	.landing-hero__btn { gap: 8px; }
	.landing-hero__btn-icon { display: flex; }
	.landing-hero__btn-icon svg { width: 16px; height: 16px; }
	.landing-hero__btn--primary {
		border: 1px solid rgba(230, 234, 240, .8);
		background-image:
			linear-gradient(143.84deg, rgba(0, 0, 0, .2) 1.83%, rgba(62, 131, 145, .2) 60.47%),
			linear-gradient(50.64deg, rgb(45, 84, 128) 3.29%, rgb(34, 64, 97) 65.54%, rgb(31, 66, 73) 95.89%);
		color: #fff;
	}
	.landing-hero__btn--secondary {
		border: 1px solid #fff;
		background: none;
		color: #fff;
	}
	/* Mobile + tablet (pedido explícito del usuario): logo centrado (el margin-inline:auto pisa el
	   align-items:flex-start del contenedor SOLO para este ítem, comportamiento estándar de flexbox)
	   y padding parejo de 40px a los lados en vez del gutter fluido de desktop. */
	@media (width < 80rem) {
		.landing-hero__inner { padding-inline: 40px; }
		.landing-hero__logo { margin: 0 auto 40px; }
	}
	/* Tablet SOLO, 768-1023px (mobile ya centra "gratis" con el width:100% de abajo) — pedido
	   explícito del usuario, acotado a 64rem (no 80rem, que cubría de más hasta 1279px). */
	@media (48rem <= width < 64rem) {
		.landing-hero__inner { margin: 0 auto; }
	}
	@media (width < 48rem) {
		.landing-hero { min-height: 0; }
		.landing-hero__inner { padding-block: 2.5rem; width: 100%; box-sizing: border-box; }
		.landing-hero__logo { max-width: 320px; }
		.landing-hero__title { margin-bottom: 32px; }
		.landing-hero__buttons { flex-direction: column; align-items: stretch; width: 100%; }
		.landing-hero__btn { width: 100%; }
	}

	/* ============ 2. Video + Cita (Figma nodo 4460:16647) ============ */
	.landing-video {
		padding-block: 80px; /* spec Figma, fijo (no clamp) */
		background: var(--landing-video-bg, transparent);
	}
	.landing-video__header {
		margin: 0 auto 32px;
		max-width: 49.5rem; /* 792px, spec Figma */
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--landing-video-header-color, var(--dia-color-text-secondary, #767778));
		text-align: center;
	}
	.landing-video__quote {
		margin: 0 auto 32px;
		max-width: 49.5rem; /* 792px, spec Figma */
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
		line-height: 1.3;
		text-align: center;
		color: var(--landing-video-quote-color, var(--dia-color-text-primary, #121212));
	}
	.landing-video__media {
		position: relative;
		max-width: 49.5rem; /* 792px, spec Figma */
		margin-inline: auto;
		aspect-ratio: 16 / 9;
		border-radius: 12px;
		overflow: hidden;
	}
	@media (width < 48rem) {
		.landing-video { padding-block: 48px; }
	}
	/* :not(.landing-video__play) — sin esto, esta regla (más específica que .landing-video__play)
	   le ganaba y estiraba el botón de play (54x54) a todo el tamaño de la caja (792x445),
	   pixelándolo al ampliarlo tanto (bug real reportado con captura por el usuario). */
	.landing-video__media img:not(.landing-video__play) { width: 100%; height: 100%; object-fit: cover; }
	/* .landing-video__play: imagen del diseñador (play.webp, círculo+ícono ya incluidos) — SIN
	   background/border-radius propios, a diferencia de .landing-videos-cols__play (que sigue
	   usando dia_icon('play') sin imagen). */
	.landing-video__play {
		position: absolute; top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		width: 54px; height: 54px;
	}
	/* Botón real (video_url configurado) — llena toda la caja de :media para que el click funcione
	   en cualquier punto de la miniatura, no solo sobre el ícono. Reset de estilos nativos de
	   <button> (border/padding/background que el UA agrega por default). */
	.landing-video__thumb-btn {
		position: absolute; inset: 0;
		display: block;
		width: 100%; height: 100%;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
	}
	.landing-video__iframe {
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		border: 0;
	}
	.landing-videos-cols__play {
		position: absolute; top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		display: flex; align-items: center; justify-content: center;
		width: 54px; height: 54px;
		border-radius: 50%;
		background: #fff;
		color: var(--dia-color-text-primary, #121212);
	}

	/* ============ 3. Textos e imgs en columnas ============ */
	.landing-text-image {
		/* 48px mobile / 80px desktop, proporcional en tablet — misma fórmula algebraica que
		   .error-404 (404.css) y calibrada contra los mismos breakpoints (48rem/80rem, §12). */
		padding-block: clamp(3rem, 6.25vw, 5rem);
		background: var(--landing-ti-bg, transparent);
	}
	/* padding-inline propio (sale del selector compartido de arriba, que da 24px fijos siempre) —
	   pedido explícito del usuario, 3 checkpoints reales: 24px en mobile Y en 768px (sin salto
	   entre ambos), 32px en 1024px, 0 en desktop (para que el contenedor SÍ llegue a los 1200px
	   completos del Figma, sin el --space-m genérico restándole ancho). Como 24→32 (768-1024) y
	   32→0 (1024-1280) tienen pendientes opuestas, no entran en un solo clamp lineal — 2 tramos. */
	.landing-text-image__inner {
		max-width: var(--container);
		margin-inline: auto;
		box-sizing: border-box;
		padding-inline: 24px; /* mobile, <48rem */
	}
	@media (48rem <= width < 64rem) {
		/* 3.125vw da EXACTO 24px a 768px y 32px a 1024px. */
		.landing-text-image__inner { padding-inline: clamp(1.5rem, 3.125vw, 2rem); }
	}
	@media (64rem <= width < 80rem) {
		/* 160px-12.5vw da EXACTO 32px a 1024px y 0 a 1280px. */
		.landing-text-image__inner { padding-inline: clamp(0px, calc(160px - 12.5vw), 2rem); }
	}
	@media (width >= 80rem) {
		.landing-text-image__inner { padding-inline: 0; }
	}
	/* flex+gap (no margin) — así el espaciado eyebrow→título no depende de margin-collapse, y el
	   margin-bottom del propio .intro es la ÚNICA fuente de los 48px hacia el primer bloque (antes
	   .landing-text-image__title también traía su propio margin-bottom, que podía sumarse al de
	   .intro según el navegador — pedido explícito del usuario de que la distancia total sea
	   exactamente 48px, sin depender de que el collapse "de casualidad" dé el resultado correcto). */
	.landing-text-image__intro {
		max-width: 40rem;
		margin: 0 auto 48px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}
	.landing-text-image__eyebrow {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--landing-ti-eyebrow-color, var(--dia-color-text-secondary, #767778));
	}
	.landing-text-image__title {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 32px;
		letter-spacing: -.5px;
		color: var(--landing-ti-text-color, var(--dia-color-text-primary, #121212));
	}
	/* SIN gap entre imagen y contenido a propósito (spec Figma: image+content miden 600+600=1200
	   exactos, sin separación entre ambos) — el "aire" visible viene del padding INTERNO del
	   propio contenido (80px, ver .landing-text-image__content), no de un gap del row. Antes tenían
	   el mismo fondo detrás (gap invisible) — bug real reportado con captura por el usuario. */
	.landing-text-image__block {
		display: flex;
		align-items: stretch;
		overflow: hidden;
		background: transparent; /* pisado inline por style="background:..." cuando hay block_bg_color (por tarjeta, no por sección) */
		/* margin-top SOLO (no margin-block) — con margin-bottom el ÚLTIMO bloque sumaba su propio
		   margen al padding-bottom de la sección (el padding actúa de "pared" y evita el collapse
		   que sí ocurre entre bloques hermanos), dejando más aire del pedido debajo de la sección
		   (bug real reportado por el usuario). El primer bloque no necesita margin-top propio: ya
		   colapsa con el margin-bottom de .landing-text-image__intro (ambos 48px). */
		margin-top: 3rem;
	}
	.landing-text-image__block:first-child { margin-top: 0; }
	.landing-text-image__block--right { flex-direction: row-reverse; }
	/* flex-basis:0 + flex-grow igual NO garantiza 50/50 real cuando uno de los 2 items tiene
	   contenido propio (la imagen) — el navegador igual respeta un tamaño mínimo automático pese a
	   min-width:0 (confirmado en vivo: 496px vs 656px, la diferencia era exacta a 2×80px del
	   padding — bug real reportado con captura). Se fuerza 50%/50% explícito en vez de depender
	   del reparto de flex-grow. */
	.landing-text-image__media {
		flex: 0 0 50%;
		width: 50%;
		min-width: 0;
		box-sizing: border-box;
	}
	.landing-text-image__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.landing-text-image__content {
		flex: 0 0 50%;
		width: 50%;
		min-width: 0;
		box-sizing: border-box;
		/* 80px a partir de 1024px (spec Figma), proporcional hacia abajo — 7.8125vw da EXACTO
		   20px a 256px de viewport y 80px a 1024px (64rem, mismo breakpoint donde el bloque pasa a
		   una columna), sin necesidad de un valor fijo aparte para mobile. */
		padding: clamp(1.25rem, 7.8125vw, 5rem);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.landing-text-image__block-title {
		margin: 0 0 12px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		letter-spacing: -.5px;
		color: var(--landing-ti-text-color, var(--dia-color-text-primary, #121212));
	}
	/* WYSIWYG (pedido explícito del usuario 2026-07-30, antes texto plano) — reglas mínimas para
	   los elementos que el editor puede insertar (negritas ya vienen por default con <strong>). */
	.landing-text-image__block-text {
		font-family: var(--font-sans);
		font-size: 16px;
		line-height: 1.6;
		color: var(--landing-ti-text-color, var(--dia-color-text-primary, #121212));
	}
	.landing-text-image__block-text p { margin: 0 0 1em; }
	.landing-text-image__block-text p:last-child { margin-bottom: 0; }
	.landing-text-image__block-text ul,
	.landing-text-image__block-text ol { margin: 0 0 1em; padding-left: 1.25rem; }
	.landing-text-image__block-text li + li { margin-top: 4px; }
	/* 1023px hacia abajo (pedido explícito del usuario) — antes el corte a una columna era 48rem
	   (768px), dejando el layout de 2 columnas apretado en tablet. El padding interno YA es
	   proporcional en todo el rango (clamp de arriba), no necesita un valor fijo aparte acá. */
	@media (width < 64rem) {
		.landing-text-image__block,
		.landing-text-image__block--right {
			flex-direction: column;
		}
		/* flex-direction:column convierte el eje principal en vertical — el flex:0 0 50% de
		   desktop pasaría a repartir ALTO (no ancho) 50/50 entre imagen y contenido, no lo que se
		   quiere apilados. flex:0 0 auto + width:100% para que cada uno tome su alto natural y el
		   100% del ancho disponible (cross-axis, ya con stretch por default del padre). */
		.landing-text-image__media,
		.landing-text-image__content {
			flex: 0 0 auto;
			width: 100%;
		}
		/* En modo fila (desktop) el alto de la imagen viene del stretch contra el contenido — en
		   columna no hay con qué "estirarse", necesita su propio alto explícito o el img (height:
		   100% de un padre sin alto definido) colapsa a 0. */
		.landing-text-image__media { aspect-ratio: 3 / 2; }
	}

	/* ============ 4. Numeralia ============ */
	.landing-numeralia { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); background: var(--dia-color-bg-subtle, #fafbfb); }
	.landing-numeralia__title { margin: 0 0 2rem; text-align: center; font-family: var(--font-sans); font-weight: 700; font-size: 28px; color: var(--dia-color-text-primary, #121212); }
	.landing-numeralia__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 4vw, 4rem); }
	.landing-numeralia__stat { text-align: center; }
	.landing-numeralia__stat-value { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: var(--dia-color-brand-secondary, #3e8391); }
	.landing-numeralia__stat-label { margin: 4px 0 0; font-family: var(--font-sans); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--dia-color-text-secondary, #767778); }

	/* ============ 5. Cita ============ */
	.landing-quote { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; }
	.landing-quote__bg { position: absolute; inset: 0; }
	.landing-quote__bg img { width: 100%; height: 100%; object-fit: cover; }
	.landing-quote__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
	.landing-quote__inner { position: relative; z-index: 1; max-width: 45rem; text-align: center; }
	.landing-quote__text {
		margin: 0 0 16px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
		line-height: 1.3;
		color: var(--dia-color-text-primary, #121212);
	}
	.landing-quote__bg ~ .landing-quote__inner .landing-quote__text { color: #fff; }
	.landing-quote__author { margin: 0; font-family: var(--font-sans); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--dia-color-text-secondary, #767778); }
	.landing-quote__bg ~ .landing-quote__inner .landing-quote__author { color: rgba(255, 255, 255, .75); }

	/* ============ 6. Slider de Imágenes ============ */
	.landing-slider { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
	.landing-slider__title { margin: 0 0 2rem; text-align: center; font-family: var(--font-sans); font-weight: 700; font-size: 28px; color: var(--dia-color-text-primary, #121212); }
	.landing-slider__carousel { position: relative; }
	.landing-slider__track { display: flex; overflow: hidden; border-radius: 12px; transition: transform .4s ease; }
	.landing-slider__slide { flex: 0 0 100%; margin: 0; }
	.landing-slider__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
	.landing-slider__slide figcaption { padding: 8px 4px 0; font-family: var(--font-sans); font-size: 14px; color: var(--dia-color-text-secondary, #767778); }
	.landing-slider__arrow,
	.landing-cards__arrow {
		position: absolute; top: 50%; transform: translateY(-50%);
		display: flex; align-items: center; justify-content: center;
		width: 44px; height: 44px;
		border-radius: 50%;
		border: 1px solid var(--dia-color-border-strong, #232323);
		background: #fff;
		cursor: pointer;
		z-index: 2;
	}
	.landing-slider__arrow--prev { left: -22px; }
	.landing-slider__arrow--next { right: -22px; }
	.landing-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 1rem; }
	.landing-slider__dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: #d0d1d3; padding: 0; cursor: pointer; }
	.landing-slider__dot.is-active { background: var(--dia-color-text-primary, #121212); }

	/* ============ 7. Galería de Fotos ============ */
	.landing-gallery { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
	.landing-gallery__inner { display: grid; grid-template-columns: 1fr 1.3fr .7fr; gap: 1.5rem; align-items: stretch; }
	.landing-gallery__item { border-radius: 12px; overflow: hidden; }
	.landing-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
	@media (width < 64rem) {
		.landing-gallery__inner { grid-template-columns: 1fr; }
	}

	/* ============ 8. 3 Pasos ============ */
	.landing-steps { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 7rem); overflow: hidden; }
	.landing-steps__bg { position: absolute; inset: 0; z-index: -1; }
	.landing-steps__bg img { width: 100%; height: 100%; object-fit: cover; }
	.landing-steps__header { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
	.landing-steps__title { margin: 0 0 12px; font-family: var(--font-sans); font-weight: 700; font-size: 32px; letter-spacing: -.5px; color: var(--dia-color-text-primary, #121212); }
	.landing-steps__subtitle { margin: 0; font-family: var(--font-sans); font-size: 18px; color: var(--dia-color-text-secondary, #767778); }
	.landing-steps__columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
	.landing-steps__column { background: #fff; border-radius: 12px; padding: 2rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }
	.landing-steps__column-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
	.landing-steps__number { font-family: var(--font-sans); font-weight: 700; font-size: 32px; color: var(--dia-color-brand-secondary, #3e8391); }
	.landing-steps__column-title { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: 20px; color: var(--dia-color-text-primary, #121212); }
	.landing-steps__divider { border: none; border-top: 1px solid #e5e5e5; margin: 0 0 16px; }
	.landing-steps__point { margin-bottom: 16px; }
	.landing-steps__point-title { margin: 0 0 4px; font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--dia-color-text-primary, #121212); }
	.landing-steps__point-text { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--dia-color-text-secondary, #767778); }
	.landing-steps__cta { text-align: center; margin-top: 3rem; }
	@media (width < 64rem) {
		.landing-steps__columns { grid-template-columns: 1fr; }
	}

	/* ============ 9. Slider de Tarjetas (Iniciativas) ============ */
	.landing-cards { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
	.landing-cards__header { max-width: 40rem; margin: 0 auto 2.5rem; text-align: center; }
	.landing-cards__title { margin: 0 0 12px; font-family: var(--font-sans); font-weight: 700; font-size: 32px; letter-spacing: -.5px; color: var(--dia-color-text-primary, #121212); }
	.landing-cards__subtitle { margin: 0; font-family: var(--font-sans); font-size: 18px; color: var(--dia-color-text-secondary, #767778); }
	.landing-cards__carousel { position: relative; }
	.landing-cards__track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
	.landing-cards__card {
		flex: 0 0 340px;
		scroll-snap-align: start;
		padding: 2rem;
		border-radius: 12px;
		background: var(--dia-color-bg-subtle, #fafbfb);
		border: 1px solid #e5e5e5;
	}
	.landing-cards__card-title { margin: 0 0 8px; font-family: var(--font-sans); font-weight: 700; font-size: 20px; color: var(--dia-color-text-primary, #121212); }
	.landing-cards__card-text { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--dia-color-text-secondary, #767778); }
	.landing-cards__arrow--prev { left: -22px; }
	.landing-cards__arrow--next { right: -22px; }

	/* ============ 10. 3 Videos en Columnas ============ */
	.landing-videos-cols { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
	.landing-videos-cols__title { margin: 0 0 2rem; text-align: center; font-family: var(--font-sans); font-weight: 700; font-size: 28px; color: var(--dia-color-text-primary, #121212); }
	.landing-videos-cols__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
	.landing-videos-cols__media { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #e5e5e5; }
	.landing-videos-cols__media img { width: 100%; height: 100%; object-fit: cover; }
	.landing-videos-cols__play { width: 44px; height: 44px; }
	.landing-videos-cols__item-title { margin: 12px 0 0; font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--dia-color-text-primary, #121212); }
	@media (width < 64rem) {
		.landing-videos-cols__grid { grid-template-columns: 1fr; }
	}

	/* ============ 11. FAQ (Acordeón) — Figma nodo 4189:18629 ============ */
	.landing-faq {
		padding-block: 80px; /* spec Figma, fijo */
		background: var(--landing-faq-bg, transparent);
	}
	/* Mismo ajuste exacto que .landing-text-image__inner (pedido explícito del usuario) — sale del
	   selector compartido de arriba (24px fijos siempre) a sus propios 3 checkpoints: 24px en
	   mobile Y en 768px (sin salto), 32px en 1024px, 0 en desktop (>=80rem) para que el contenedor
	   SÍ llegue a los 1200px completos del Figma. 2 tramos porque 24→32 y 32→0 tienen pendientes
	   opuestas, no entran en un solo clamp lineal. */
	.landing-faq__inner {
		max-width: var(--container);
		margin-inline: auto;
		box-sizing: border-box;
		padding-inline: 24px; /* mobile, <48rem */
	}
	@media (48rem <= width < 64rem) {
		/* 3.125vw da EXACTO 24px a 768px y 32px a 1024px. */
		.landing-faq__inner { padding-inline: clamp(1.5rem, 3.125vw, 2rem); }
	}
	@media (64rem <= width < 80rem) {
		/* 160px-12.5vw da EXACTO 32px a 1024px y 0 a 1280px. */
		.landing-faq__inner { padding-inline: clamp(0px, calc(160px - 12.5vw), 2rem); }
	}
	@media (width >= 80rem) {
		.landing-faq__inner { padding-inline: 0; }
	}
	.landing-faq__header {
		max-width: 585px; /* spec Figma */
		margin: 0 auto 48px; /* 48px: gap entre el header y la lista, spec Figma */
		display: flex;
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}
	.landing-faq__eyebrow {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		opacity: .7;
		color: var(--landing-faq-eyebrow-color, var(--dia-color-text-primary, #121212));
	}
	.landing-faq__title {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); /* hasta 40px, spec Figma */
		line-height: 1.25;
		letter-spacing: -1px;
		color: var(--landing-faq-title-color, var(--dia-color-text-primary, #121212));
	}
	.landing-faq__list {
		display: flex;
		flex-direction: column;
		gap: 24px; /* spec Figma — tarjetas independientes, NO una lista con separadores */
	}
	.landing-faq__item {
		border-radius: 16px;
		border: 1px solid #44217c; /* borde de la pregunta CERRADA, spec Figma — sin ACF, solo la abierta se pidió editable */
		background: var(--landing-faq-item-bg, #0e031f);
	}
	.landing-faq__item.--open {
		border-color: var(--landing-faq-item-border-open, #7270b6);
		background: var(--landing-faq-item-bg-open, #160926);
		box-shadow: 0 12px 12px var(--landing-faq-item-shadow, rgba(43, 0, 80, .98));
	}
	.landing-faq__question {
		display: flex; align-items: center; justify-content: space-between; gap: 16px;
		width: 100%;
		padding: 24px;
		border: none;
		background: none;
		text-align: left;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--landing-faq-question-color, #fff);
		cursor: pointer;
	}
	.landing-faq__icon {
		display: flex; flex-shrink: 0;
		width: 24px; height: 24px;
		color: var(--landing-faq-icon-color, #fff);
	}
	.landing-faq__icon svg { width: 100%; height: 100%; }
	/* Mismo truco que .event-row__body-wrap (card-event.php/archive-event.css): grid-template-rows
	   0fr→1fr en vez de x-show/x-collapse (Alpine solo trae el core en este tema). */
	.landing-faq__answer-wrap {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .25s ease;
	}
	.landing-faq__item.--open .landing-faq__answer-wrap { grid-template-rows: 1fr; }
	.landing-faq__answer { overflow: hidden; min-height: 0; }
	.landing-faq__answer p {
		margin: 0;
		padding: 0 24px 24px;
		font-family: var(--font-sans);
		font-size: 20px;
		line-height: 32px;
		color: var(--landing-faq-answer-color, #d0d1d3);
	}
	@media (width < 48rem) {
		.landing-faq { padding-block: 48px; }
		.landing-faq__question { padding: 20px; font-size: 18px; line-height: 26px; }
		.landing-faq__answer p { padding: 0 20px 20px; font-size: 16px; line-height: 1.6; }
	}

	/* ============ 12. Formulario de Newsletter ============ */
	.landing-form { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; }
	.landing-form__bg { position: absolute; inset: 0; z-index: -1; }
	.landing-form__bg img { width: 100%; height: 100%; object-fit: cover; }
	.landing-form__header { max-width: 40rem; margin: 0 auto 8px; text-align: center; }
	.landing-form__title { margin: 0 0 8px; font-family: var(--font-sans); font-weight: 700; font-size: 32px; letter-spacing: -.5px; color: var(--dia-color-text-primary, #121212); }
	.landing-form__subtitle { margin: 0; font-family: var(--font-sans); font-size: 18px; color: var(--dia-color-text-secondary, #767778); }
	.landing-form__desc { max-width: 40rem; margin: 0 auto 2rem; text-align: center; font-family: var(--font-sans); font-size: 16px; color: var(--dia-color-text-secondary, #767778); }
	.landing-form__form { max-width: 30rem; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }
	.landing-form__row { display: flex; flex-direction: column; gap: 6px; }
	.landing-form__label { font-family: var(--font-sans); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--dia-color-text-secondary, #767778); }
	.landing-form__input {
		padding: 15px 20px;
		border: 1px solid #cacaca;
		border-radius: var(--dia-radius-sm, 4px);
		font-family: var(--font-sans);
		font-size: 16px;
		background: #fff;
	}
	.landing-form__checkbox { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: 14px; color: var(--dia-color-text-secondary, #767778); }
	.landing-form__submit { margin-top: 8px; }
}