/* =================================================================
   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);
			/* Fluido de 72px (continúa el padding-block base de la tablet) a 80px/120px en 1920px de
			   ancho de viewport — evita el salto brusco fijo al cruzar 80rem. */
			padding-top: clamp(4.5rem, 3.5rem + 1.25vw, 80px);
			padding-bottom: clamp(4.5rem, -1.5rem + 7.5vw, 120px);
		}
	}
	.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;
		color: #babac7;
	}
	.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;
		color: #fff;
	}
	.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 #4a6c78;
		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 { min-height: 0; }
		.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__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;
		background: #000; /* antes gris (#e5e5e5 heredado del placeholder), pedido explícito del usuario */
	}
	@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;
		/* Mismo zoom de hover que el resto del sitio (news-card/story-card/etc.) — ver
		   .landing-video__thumb-btn:hover más abajo. */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	}
	.landing-video__thumb-btn:hover img:not(.landing-video__play) {
		transform: scale(1.06);
	}
	/* .landing-video__play: imagen del diseñador (play.webp, círculo+ícono ya incluidos) — SIN
	   background/border-radius propios. Mismo estilo exacto reusado por .landing-videos-cols__play
	   (three-videos.php) — ver su regla propia en la sección "3 Videos en Columnas" más abajo. */
	.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;
	}

	/* ============ 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;
		/* Estandarizado 2026-08-06 (pedido del diseñador) al mismo clamp/line-height que
		   .landing-cards__title/.landing-faq__title/etc. — antes era fijo (32px, sin bajar en
		   mobile ni line-height controlado), fuera de línea con el resto de los "subheadline" de
		   bloque del Landing. */
		font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); /* hasta 40px, spec Figma */
		line-height: 1.25;
		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 ============ */
	/* Fondo: imagen (--landing-num-bg-image) gana sobre el color sólido de respaldo
	   (--landing-num-bg) si ambos vienen seteados — ver numeralia.php. Default sólido negro. */
	.landing-numeralia {
		padding-block: 80px;
		background: var(--landing-num-bg-image, none) center/cover no-repeat, var(--landing-num-bg, #000);
	}
	.landing-numeralia__eyebrow {
		margin: 0 0 16px;
		text-align: center;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px; /* 153.846% */
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--landing-num-eyebrow-color, #b5b3bf);
	}
	.landing-numeralia__title {
		margin: 0 0 2rem;
		text-align: center;
		font-family: var(--font-sans);
		font-weight: 700;
		/* Estandarizado 2026-08-06 (pedido del diseñador) al mismo clamp/line-height que
		   .landing-cards__title/.landing-faq__title/etc. — antes era fijo (40px/50px, sin bajar en
		   mobile), fuera de línea con el resto de los "subheadline" de bloque del Landing. */
		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-num-title-color, var(--dia-color-text-inverse, #fff));
	}
	.landing-numeralia__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
	/* Cada cifra vive en su propia "card" — gradiente + blur fijos (no editables), bisel vía
	   box-shadow inset con los 2 colores ACF, misma técnica que .department-team__card
	   (single-department.css) pero recoloreada a tonos morados en vez de blanco/negro translúcido.
	   overflow:hidden recorta el backdrop-filter a las esquinas redondeadas, mismo criterio que
	   .department-team__card. */
	.landing-numeralia__stat {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 278px;
		padding: 32px 24px;
		gap: 16px;
		text-align: center;
		border-radius: 12px;
		overflow: hidden;
		border: 1px solid #350e4e;
		background: linear-gradient(180deg, rgba(8, 1, 27, 0) 0%, rgba(18, 9, 55, .5) 50%, #1b1053 100%);
		box-shadow:
			0 4px 24px 0 rgba(0, 46, 80, .08),
			inset 0 1px 1px var(--landing-num-bevel-light, #665291),
			inset 1px 0 1px var(--landing-num-bevel-light, #665291),
			inset 0 -1px 1px var(--landing-num-bevel-dark, #340d4d),
			inset -1px 0 1px var(--landing-num-bevel-dark, #340d4d);
		backdrop-filter: blur(6px);
	}
	/* Desktop: 1 sola fila, cards estiradas para llenar el ancho completo del container (1200px de
	   extremo a extremo, pedido explícito del usuario 2026-07-31) — en mobile/tablet siguen
	   apiladas/wrap con su ancho fijo de 278px (default de arriba). */
	@media (width >= 80rem) {
		.landing-numeralia__stats { flex-wrap: nowrap; }
		.landing-numeralia__stat { width: auto; flex: 1 1 0; }
		.landing-numeralia__inner { padding-inline: 0; }
	}
	.landing-numeralia__stat-value {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 48px;
		line-height: 56px; /* 116.667% */
		letter-spacing: -.5px;
		color: var(--landing-num-value-color, var(--dia-color-text-inverse, #fff));
	}
	.landing-numeralia__stat-label {
		margin: 0; /* espaciado con stat-value vía gap del flex .landing-numeralia__stat, no margin */
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 16px;
		line-height: 24px; /* 150% */
		color: var(--landing-num-label-color, var(--dia-color-text-inverse, #fff));
	}

	/* ============ 5. Cita ============ */
	.landing-quote { position: relative; padding-block: 120px; overflow: hidden; }
	.landing-quote__inner { position: relative; z-index: 1; max-width: 790px; text-align: center; }
	@media (width >= 80rem) {
		.landing-quote__inner { padding-inline: 0; }
	}
	.landing-quote__text {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); /* hasta 40px, mismo clamp que .landing-hero__title */
		line-height: 1.3;
		color: var(--landing-quote-text-color, var(--dia-color-text-primary, #121212));
	}

	/* ============ 6. Slider de Imágenes (Figma nodo 4341:19550) ============ */
	/* Swiper — mismo componente que home-news.php/single-perspective, no un carrusel propio. Nav
	   alineada a la derecha arriba del slider (flex-end, spec Figma), dots debajo centrados. */
	/* padding-block: proporcional al viewport (6.25vw = 80px exactos a 1280px, el breakpoint
	   desktop estándar del sitio), con piso de 3rem/48px para que no se aplaste en mobile. */
	.landing-slider { padding-block: clamp(3rem, 6.25vw, 80px); background: var(--landing-slider-bg, transparent); }
	.landing-slider__inner { display: flex; flex-direction: column; align-items: flex-end; gap: 32px; }
	.landing-slider__nav { display: flex; gap: 8px; }
	/* Mismos 3 estados que .home-news__nav-btn (home-news.css) — mismo criterio, colores editables
	   por ACF, default = literales del Figma (border #f7f8f9, radio 4px). 54×54px EXACTOS (spec
	   Figma) — con box-sizing:border-box global (base.css) el padding solo no lo garantiza, el
	   border de 1px se sumaba encima y daba 56px; width/height explícitos + padding:0 lo fijan. */
	.landing-slider__nav-btn {
		display: flex; align-items: center; justify-content: center;
		width: 54px;
		height: 54px;
		padding: 0;
		border: 1px solid var(--landing-slider-nav-border, #f7f8f9);
		border-radius: 4px;
		background: transparent;
		cursor: pointer;
		color: var(--landing-slider-nav-icon, var(--dia-color-text-primary, #121212));
	}
	.landing-slider__nav-btn.swiper-button-disabled { opacity: .7; cursor: default; }
	/* Sin hover por lo pronto (pedido explícito del usuario 2026-07-31) — antes tenía el mismo
	   gris/gradiente que .home-news__nav-btn, se quitó a la espera de definir el tratamiento final. */
	.landing-slider__nav-icon { display: block; width: 16px; height: 16px; }
	.landing-slider__nav-icon svg { display: block; width: 100%; height: 100%; }
	.landing-slider__nav-icon--prev { transform: rotate(180deg); }
	.landing-slider__swiper { width: 100%; }
	.landing-slider__swiper .swiper-slide { height: auto; }
	.landing-slider__slide img {
		display: block;
		width: 100%;
		height: 100%;
		aspect-ratio: 585 / 366; /* spec Figma */
		object-fit: cover;
		border-radius: 16px;
		/* El drag nativo del navegador sobre un <img> (arrastrar para "abrir imagen"/soltarla en
		   otra pestaña) compite con el swipe de Swiper — draggable="false" en el HTML alcanza en
		   Chrome/Firefox, pero Safari sigue iniciando el drag ghost sin este par. */
		-webkit-user-drag: none;
		user-select: none;
	}
	.landing-slider__dots { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; }
	/* !important necesario: swiper-bundle.min.css (CDN) define sus propios estilos de
	   .swiper-pagination-bullet SIN @layer, le gana a cualquier regla en @layer sin importar
	   especificidad — mismo gotcha ya documentado para home-news/home-stories (§12.1/§12.22). */
	.landing-slider__dots .swiper-pagination-bullet {
		width: 8px !important; height: 8px !important;
		border-radius: 50% !important;
		background: var(--landing-slider-dot, #d0d1d3) !important;
		opacity: 1 !important;
		cursor: pointer;
		transition: background-color .15s;
	}
	.landing-slider__dots .swiper-pagination-bullet-active {
		background: var(--landing-slider-dot-active, var(--dia-color-text-primary, #121212)) !important;
	}

	/* ============ 7. Galería de Fotos ============ */
	/* 80px arriba/abajo en desktop (Figma node-id=4456-16432), mismo patrón fluido que
	   .landing-slider (6.25vw = 80px exactos a 1280px, piso de 3rem/48px en mobile). */
	.landing-gallery { padding-block: clamp(3rem, 6.25vw, 80px); }
	/* Proporciones de columna = anchos reales del Figma (380/483/277, suman 1200px con los 2 gaps
	   de 30px) — usar esos px como peso de fr distribuye el espacio disponible en la misma
	   proporción sin importar el ancho real del contenedor. */
	.landing-gallery__inner { display: grid; grid-template-columns: 380fr 483fr 277fr; gap: 1.875rem; align-items: stretch; }
	.landing-gallery__item { border-radius: 16px; overflow: hidden; }
	.landing-gallery__item img {
		width: 100%; height: 100%; object-fit: cover; object-position: var(--img-focal, 50% 50%); display: block; cursor: zoom-in;
		/* Mismo zoom de hover que el resto del sitio (news-card/story-card/etc.) — clickeable, abre
		   el lightbox (landing-gallery-lightbox.js). */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	}
	.landing-gallery__item:hover img { transform: scale(1.06); }
	.landing-gallery__col2 { display: flex; flex-direction: column; gap: 1.875rem; }
	.landing-gallery__item--2 { aspect-ratio: 483 / 236; }
	.landing-gallery__row { display: flex; gap: 1.875rem; }
	.landing-gallery__item--3 { flex: 175 0 0; aspect-ratio: 175 / 180; }
	.landing-gallery__item--4 { flex: 278 0 0; aspect-ratio: 278 / 180; }
	@media (width >= 80rem) {
		.landing-gallery__inner { padding-inline: 0; }
	}
	@media (width < 64rem) {
		.landing-gallery__inner { grid-template-columns: 1fr; }
		.landing-gallery__item--1,
		.landing-gallery__item--5 { aspect-ratio: 380 / 446; }
	}
	@media (width < 48rem) {
		.landing-gallery__row { flex-direction: column; }
		.landing-gallery__item--3,
		.landing-gallery__item--4 { flex-basis: auto; aspect-ratio: 3 / 2; }
	}

	/* ============ 8. 3 Pasos ============ */
	/* 80px arriba/abajo en desktop, mismo patrón fluido que .landing-slider/.landing-gallery
	   (6.25vw = 80px exactos a 1280px, piso de 3rem/48px en mobile). */
	.landing-steps { position: relative; padding-block: clamp(3rem, 6.25vw, 80px); overflow: hidden; }
	.landing-steps__bg { position: absolute; inset: 0; z-index: -1; }
	.landing-steps__bg img { width: 100%; height: 100%; object-fit: cover; }
	/* padding-bottom, no margin-bottom: nunca colapsa con el margin-top de .landing-steps__slider
	   (el siguiente hermano) — con margin-bottom acá sí colapsaría y el resultado real sería menos
	   de 64px (mismo motivo por el que .landing-steps__cta también usa padding-top). */
	.landing-steps__header { max-width: 585px; margin-inline: auto; padding-bottom: 64px; text-align: center; }
	/* Mismo tratamiento que .landing-faq__eyebrow — convención de eyebrow del sitio, genérico hasta
	   tener el spec de Figma de este bloque en particular. */
	.landing-steps__eyebrow {
		margin: 0 0 8px;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--landing-steps-eyebrow-color, var(--dia-color-text-secondary, #767778));
	}
	/* Estandarizado 2026-08-06 (pedido del diseñador) al mismo clamp/line-height que
	   .landing-cards__title/.landing-faq__title/etc. — antes bajaba hasta 24px en mobile pero con
	   line-height fijo de 50px, desproporcionado contra el texto. */
	.landing-steps__title { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.25; letter-spacing: -.5px; color: var(--landing-steps-section-title-color, var(--dia-color-text-primary, #121212)); }
	/* Swiper (assets/js/landing-steps-slider.js): swiper-wrapper es flex, no grid — la propia
	   librería calcula el ancho de cada .swiper-slide según slidesPerView del breakpoint activo.
	   `.swiper{overflow:hidden}` (swiper-bundle.css) recortaba el box-shadow de las cards en los 4
	   bordes (bug real reportado 2026-08-02 — mismo síntoma que gotchas.md §12.30) — overflow:visible
	   lo resuelve por completo. Scoped SOLO a `.landing-steps__slider` (no `.swiper` a secas): otros
	   sliders del sitio (home-news, related-news, etc.) sí necesitan seguir recortando los slides
	   fuera de vista, no tocar ese overflow ahí. !important necesario contra swiper-bundle.css (sin
	   @layer, gotcha §12.1). Sin restricción por breakpoint a propósito (pedido explícito del
	   usuario) — incluso en mobile/tablet, donde técnicamente hay slides "ocultas", el resultado
	   visual confirmado es correcto.
	   SIN padding-block/margin-block acá (el primer intento de fix, §12.30, antes de llegar a
	   overflow:visible): investigado a fondo 2026-08-02 con mediciones reales de DevTools —
	   swiper-bundle.css define `.swiper{padding:0}` (shorthand físico, sin @layer), que le ganaba
	   SIEMPRE a nuestro `padding-block:32px` (propiedad lógica) sin importar especificidad —
	   quedaba en 0px real, confirmado con getComputedStyle+offsetHeight. El `margin-block:-32px` SÍ
	   se aplicaba (swiper-bundle solo toca margin-left/right, no top/bottom), así que el resultado
	   real de aquel intento nunca fue "padding+margin que se cancelan solos": era margin-bottom:-32px
	   SIN NADA que lo compensara, tirando de todo lo siguiente (.landing-steps__dots/__cta) hacia
	   arriba sin que ningún cálculo de esta sesión lo hubiera anticipado — de ahí salieron los
	   parches a mano (dots +55px, cta +32px) que ya no hacen falta con esto limpio. */
	.landing-steps__slider { width: 100%; overflow: visible !important; }
	/* height:auto !important — al revés de lo que parece intuitivo: swiper-bundle.min.css (CDN, sin
	   @layer) trae su propio `.swiper-slide{height:100%}`, que le gana a CUALQUIER regla en @layer
	   sin importar especificidad (gotcha ya documentado varias veces en el tema — home-news.css
	   .home-news__swiper, archive-stories.css .story-archive-slide, single-news.css
	   .related-news__swiper, single-perspective.css .related-perspectives__swiper, todas con el
	   mismo !important por el mismo motivo). Con height:100% ganando, cada slide queda fijo al
	   100% de un wrapper sin altura definida en vez de estirarse — el fix real es height:auto
	   !important, que es lo que deja que el align-items:stretch del .swiper-wrapper iguale cada
	   slide a la altura de la más alta de la fila. La corrección anterior (2026-08-02, cambiar a
	   height:100% sin !important) tenía el diagnóstico invertido — quedaba igual de rota. */
	.landing-steps__slider .swiper-slide { height: auto !important; }
	/* min-width:0 es necesario: un swiper-slide es flex item, por default no se encoge más allá de
	   su contenido min-content (min-width:auto) — sin esto un título largo/sin cortes lo ensancha
	   más que el ancho calculado por Swiper en vez de forzar el texto a wrap. Bug real reportado
	   2026-08-02 ("los anchos de las columnas dependen del ancho del título"), reproducible igual
	   con flex que con el grid anterior. */
	.landing-steps__column { min-width: 0; height: 100%; background: #fff; border-radius: 12px; padding: 2rem; box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .32); box-sizing: border-box; }
	/* El título se superpone al numeral (margin-left negativo tirando el texto sobre el trazo del
	   número) — spec exacto del usuario 2026-08-02: -15px. */
	.landing-steps__column-header { display: flex; align-items: center; margin-bottom: 16px; }
	/* Puede traer un <span> con texto (fallback, ver three-steps.php) o el <svg> del numeral
	   decorativo (steps_show_numbers) — mismo selector para ambos casos, el svg hereda el tamaño
	   por su propio viewBox (no cuadrado, cada número tiene su ancho). */
	.landing-steps__number { display: flex; align-items: center; flex-shrink: 0; font-family: var(--font-sans); font-weight: 700; font-size: 32px; color: var(--dia-color-brand-secondary, #3e8391); }
	.landing-steps__number svg { display: block; height: 40px; width: auto; color: var(--landing-steps-number-color, var(--dia-color-text-primary, #121212)); }
	/* Mayúsculas + tipografía "DIA DS/Heading/H1-ish" (spec literal pegado por el usuario
	   2026-08-02): Noto Sans 700, 40/50px, -1px de letter-spacing, a 80rem+ (desktop). Fluido hacia
	   abajo con clamp() en vez de px fijo (line-height en unitless 1.25 = 50/40, así escala junto
	   con el font-size del clamp en vez de quedar fijo en 50px). */
	.landing-steps__column-title {
		margin: 0 0 0 -15px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
		line-height: 1.25;
		letter-spacing: -1px;
		text-transform: uppercase;
		overflow-wrap: break-word;
		color: var(--landing-steps-column-title-color, var(--dia-color-text-primary, #121212));
	}
	.landing-steps__divider { border: none; border-top: 1px solid #e5e5e5; margin: 0 0 16px; }
	/* flex-direction:column (ícono/título/texto apilados) — NO row, ver comentario en
	   three-steps.php sobre el bug real que causaba tenerlos en la misma línea. */
	.landing-steps__point { display: flex; flex-direction: column; gap: 4px; margin-bottom: 32px; }
	.landing-steps__point-icon { display: flex; width: 16px; height: 16px; margin-bottom: 4px; color: var(--landing-steps-icon-color, #7270b6); }
	.landing-steps__point-icon svg { display: block; width: 100%; height: 100%; }
	/* "DIA DS/Heading News/H4" (spec literal 2026-08-02): Noto Sans 700, 24/32px, -0.5px a
	   desktop — fluido hacia abajo (mismo criterio de clamp+line-height unitless que column-title). */
	.landing-steps__point-title {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.0625rem, 0.95rem + .6vw, 1.5rem);
		line-height: 1.333;
		letter-spacing: -.5px;
		color: var(--landing-steps-point-title-color, var(--dia-color-text-primary, #121212));
	}
	/* "DIA DS/Body/Body Small" (spec literal 2026-08-02): Noto Sans 400, 16/24px — ya es el tamaño
	   mínimo legible, no se achica más en mobile. */
	.landing-steps__point-text {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 1rem;
		line-height: 1.5;
		color: var(--landing-steps-text-color, var(--dia-color-text-primary, #121212));
	}
	/* Dots — mismo patrón que .landing-slider__dots (image-slider.php): !important necesario, el
	   CSS de swiper-bundle.min.css (CDN) no usa @layer, le gana a cualquier regla en @layer sin
	   importar especificidad (gotcha ya documentado, §12.1/§12.22 de gotchas.md). Swiper la oculta
	   sola (clase swiper-pagination-lock) cuando no hay overflow que recorrer — a 1280px+ (3 de 3
	   slides visibles) no se ve ningún dot, sin lógica condicional propia.
	   position:static !important — causa real del bug "los dots quedan pegados al slider" (gotchas.md
	   §12.131): Swiper le agrega automáticamente la clase `swiper-pagination` a cualquier elemento
	   pasado como `pagination.el`, y swiper-bundle.css define `.swiper-pagination{position:absolute}`
	   — eso saca al elemento del flujo normal por completo, así que CUALQUIER margin-top declarado
	   acá no tenía ningún efecto real. Con position:static, vuelve a flujo normal y el margin-top de
	   abajo por fin tiene efecto real.
	   margin-top:32px (no 55px, valor parcheado a mano el mismo día): ese 55px compensaba además el
	   margin-block:-32px sin cancelar de .landing-steps__slider (ver comentario ahí) — con ese
	   margin-block ya eliminado del slider, 32px vuelve a ser el valor limpio real. */
	.landing-steps__dots { position: static !important; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 32px; }
	.landing-steps__dots .swiper-pagination-bullet {
		width: 8px !important; height: 8px !important;
		border-radius: 50% !important;
		background: #d0d1d3 !important;
		opacity: 1 !important;
		cursor: pointer;
		transition: background-color .15s;
	}
	.landing-steps__dots .swiper-pagination-bullet-active {
		background: var(--dia-color-text-primary, #121212) !important;
	}
	/* 64px entre las cards y el CTA en desktop (1280px+, donde Swiper oculta los dots con
	   display:none — watchOverflow — y el CTA queda directo después de .landing-steps__slider),
	   fluido hacia abajo. padding-top, no margin-top: nunca colapsa con el hermano anterior.
	   Sin el +32px que tuvo esta regla temporalmente (2026-08-02): compensaba el margin-block:-32px
	   sin cancelar de .landing-steps__slider (causa raíz real: swiper-bundle.css pisa el
	   padding-block de esa regla con su propio `.swiper{padding:0}`, sin @layer — ver comentario en
	   .landing-steps__slider). Con ese margin-block ya eliminado del slider, el valor limpio de acá
	   vuelve a ser 1:1 la separación real. */
	.landing-steps__cta { text-align: center; padding-top: clamp(2rem, 5vw, 64px); }
	/* Mismo patrón que .landing-hero__btn/-icon (hero.php) — gap entre ícono y texto, ícono 16x16. */
	.landing-steps__cta-btn { gap: 8px; }
	/* Pedido explícito 2026-08-02: sin hover — resetea el gris/gradiente/box-shadow de
	   .landing-btn--secondary:hover a los mismos valores base (misma especificidad 0,2,0, gana por
	   orden de aparición al estar declarado después). */
	.landing-steps__cta-btn:hover {
		border-color: var(--dia-color-border-strong, #232323);
		background: none;
		box-shadow: none;
	}
	.landing-steps__cta-icon { display: flex; }
	.landing-steps__cta-icon svg { width: 16px; height: 16px; }
	@media (width >= 80rem) {
		.landing-steps__inner { padding-inline: 0; }
	}
	/* Bajo 80rem (1280px) el título de columna se fija a 32px (deja de escalar con el clamp) —
	   pedido explícito del usuario 2026-08-02. */
	@media (width < 80rem) {
		.landing-steps__column-title { font-size: 32px; }
	}

	/* ============ 9. Slider de Tarjetas (Iniciativas) ============ */
	.landing-cards { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
	.landing-cards__header { max-width: 40rem; margin: 0 auto 48px; text-align: center; }
	/* Mismo tratamiento que .landing-faq__eyebrow/.landing-steps__eyebrow — convención de eyebrow
	   estandarizada del sitio (antes/arriba del título, no como subtítulo debajo). */
	.landing-cards__eyebrow {
		margin: 0 0 8px;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--landing-cards-eyebrow-color, var(--dia-color-text-secondary, #767778));
	}
	/* 40px en desktop, fluido hacia abajo (mismo patrón clamp() que .landing-hero__title/
	   .landing-faq__title) — pedido explícito del usuario 2026-08-02. */
	.landing-cards__title { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.25; letter-spacing: -.5px; color: var(--landing-cards-title-color, var(--dia-color-text-primary, #121212)); }
	/* Swiper real (assets/js/landing-cards-slider.js) — mismo layout que .landing-slider__inner:
	   nav alineada a la derecha arriba del track. */
	.landing-cards__carousel { display: flex; flex-direction: column; align-items: flex-end; gap: 32px; width: 100%; }
	/* Nav — mismo diseño EXACTO que .landing-slider__nav (image-slider.php), clase propia pedido
	   explícito del usuario 2026-08-02. 54×54px, radio 4px, sin hover (mismo criterio que el otro). */
	.landing-cards__nav { display: flex; gap: 8px; }
	.landing-cards__nav-btn {
		display: flex; align-items: center; justify-content: center;
		width: 54px;
		height: 54px;
		padding: 0;
		border: 1px solid var(--landing-cards-nav-border, #f7f8f9);
		border-radius: 4px;
		background: transparent;
		cursor: pointer;
		color: var(--landing-cards-nav-icon, var(--dia-color-text-primary, #121212));
	}
	.landing-cards__nav-btn.swiper-button-disabled { opacity: .7; cursor: default; }
	.landing-cards__nav-icon { display: block; width: 16px; height: 16px; }
	.landing-cards__nav-icon svg { display: block; width: 100%; height: 100%; }
	.landing-cards__nav-icon--prev { transform: rotate(180deg); }
	/* Recorta horizontal (la card siguiente debe quedar oculta) Y le da aire vertical a la sombra de
	   las cards ANTES de ese mismo recorte — mismo mecanismo que gotchas.md §12.30, pero en un DIV
	   propio (no `.swiper`) para no pelear contra `.swiper{padding:0}` de swiper-bundle.css (esa
	   pelea fue la causa raíz real del lío de "3 Pasos", gotchas.md §12.130). 32px cubre de sobra
	   el offset-Y 8px + blur 24px de .landing-cards__card (box-shadow: 0 8px 24px 0).
	   SIN padding/margin horizontal a propósito (se probó 2026-08-02 y se revirtió, ver gotchas.md
	   §12.132): el "aire" para la sombra vive en el borde del VIEWPORT visible, no en el borde del
	   track completo — y el viewport se mueve al hacer scroll. Solo es seguro dar aire ahí cuando
	   ese borde coincide con el inicio/final REAL del track (nada scrolleó todavía); en cualquier
	   posición intermedia, el mismo "aire" revela un pedazo real de la card que quedó justo afuera
	   de la vista — confirmado con captura real, bug peor que el que se quería resolver. La sombra
	   de la card en el borde del viewport se sigue viendo cortada en AMBOS lados según la posición
	   del scroll — trade-off geométrico real de cualquier carrusel con overflow horizontal
	   recortado, no tiene fix con CSS solo mientras el diseño necesite ocultar la card vecina. */
	.landing-cards__swiper-clip { width: 100%; overflow: hidden; padding-block: 32px; margin-block: -32px; }
	/* Sin overflow propio (!important necesario contra swiper-bundle.css, que define
	   `.swiper{overflow:hidden}` sin @layer — gotcha §12.1: sin el !important, esa regla le sigue
	   ganando a esta pese a que la sombra parecía "cortada afuera de .swiper" cuando en realidad
	   .swiper seguía con overflow:hidden real, bug reportado 2026-08-02). Todo el recorte real lo
	   hace el wrapper de arriba (.landing-cards__swiper-clip).
	   opacity:0→1 hasta que Swiper termine de inicializar (clase .swiper-initialized que la propia
	   librería agrega al `.swiper` al terminar `init()`) — patrón oficial documentado por Swiper
	   para el "flash" de layout sin estilo antes de que el JS calcule anchos/spaceBetween (bug real
	   reportado 2026-08-02: se veían las cards pegadas sin gap ni bordes redondeados por un
	   instante). https://github.com/nolimits4web/swiper/issues/3633 */
	.landing-cards__swiper { width: 100%; overflow: visible !important; opacity: 0; transition: opacity .2s ease; }
	.landing-cards__swiper.swiper-initialized { opacity: 1; }
	/* height:auto !important — mismo gotcha ya resuelto en "3 Pasos" (gotchas.md, entrada sobre
	   .swiper-slide{height:100%} de swiper-bundle.css ganándole a cualquier regla en @layer sin
	   importar especificidad): sin esto las cards de distinto largo de texto no quedan a la misma
	   altura. .landing-cards__card en height:100% + display:flex column para que el ícono/título/
	   texto se acomoden dentro de esa altura pareja. */
	.landing-cards__swiper .swiper-slide { height: auto !important; }
	/* 384px c/u: con el gap de 1.5rem/24px, 3 cards + 2 gaps llenan exacto los 1200px del container
	   en desktop sin dejar espacio vacío a la derecha (pedido explícito del usuario 2026-08-02) —
	   (1200 - 2×24) / 3 = 384px. */
	.landing-cards__card {
		flex: 0 0 384px;
		width: 384px;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 24px;
		border-radius: 12px;
		background: var(--landing-cards-card-bg-color, var(--dia-color-bg-subtle, #fafbfb));
		/* Sin borde por defecto (pedido explícito del usuario 2026-08-02) — el campo ACF
		   "Color del borde de las tarjetas" sigue funcionando si el editor elige un color a mano.
		   Custom property renombrada a --landing-cards-card-border (SIN "-color" al final) —
		   ver el comentario largo en cards-slider.php sobre por qué el nombre viejo rompía la
		   sección completa (regla global de WP `[style*=border-color]`). */
		border: 1px solid var(--landing-cards-card-border, transparent);
		/* Sombra más sutil que la de "3 Pasos" a propósito (0 4px 12px, no 0 8px 24px): en un
		   carrusel que se desliza (no un grid estático) el borde de la card en el viewport SIEMPRE
		   se ve algo cortado en algún punto del scroll (gotchas.md §12.132, sin fix real con CSS) —
		   una sombra más chica hace ese corte mucho menos notorio, pedido explícito del usuario
		   2026-08-02 tras confirmar que no hay forma de eliminarlo del todo. */
		box-shadow: 0 4px 12px 0 var(--landing-cards-card-shadow-color, transparent);
	}
	/* Círculo detrás del ícono (cards_icon_bg_color) — sin color configurado, transparente (el
	   ícono se ve solo, sin fondo). */
	.landing-cards__card-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		margin-bottom: 24px;
		border-radius: 50%;
		background: var(--landing-cards-icon-bg-color, transparent);
		color: var(--landing-cards-icon-color, #7270b6);
	}
	.landing-cards__card-icon svg { display: block; width: 24px; height: 24px; }
	/* 24px en desktop, fluido hacia abajo (mismo patrón que .landing-steps__point-title). */
	.landing-cards__card-title { margin: 0 0 12px; font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.0625rem, 0.95rem + .6vw, 1.5rem); line-height: 1.333; color: var(--landing-cards-card-title-color, var(--dia-color-text-primary, #121212)); }
	/* 20px en desktop, fluido hacia abajo (piso 15px en mobile). */
	.landing-cards__card-text { margin: 0; font-family: var(--font-sans); font-size: clamp(0.9375rem, 0.85rem + .4vw, 1.25rem); line-height: 1.5; color: var(--landing-cards-card-text-color, var(--dia-color-text-secondary, #767778)); }
	@media (width >= 80rem) {
		.landing-cards__inner { padding-inline: 0; }
	}
	/* Responsive: 3 tarjetas visibles en desktop (384px c/u, fijo arriba), 2 en tablet/laptop chica,
	   1 en mobile — porcentual (no px fijo) porque acá el ancho del container es fluido bajo 80rem
	   (no siempre 1200px). El ancho de la card sigue siendo width:auto para Swiper
	   (slidesPerView:'auto' lee el ancho CSS de cada slide, no lo calcula él). */
	@media (width < 80rem) {
		.landing-cards__card { flex-basis: calc((100% - 1.5rem) / 2); width: calc((100% - 1.5rem) / 2); }
	}
	@media (width < 48rem) {
		.landing-cards__card { flex-basis: 100%; width: 100%; }
	}

	/* ============ 10. 3 Videos en Columnas — Figma nodo 4229:20441 ============ */
	.landing-videos-cols {
		position: relative;
		overflow: hidden; /* recorta .landing-videos-cols__bg-image, que se asoma por abajo a propósito */
		padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(3rem, 1rem + 10vw, 12.5rem);
		background: #0d0517; /* fallback si el campo ACF videos_bg_color viniera vacío */
	}
	@media (width >= 80rem) {
		/* Spec Figma: 80px arriba / 200px abajo, fijos en desktop (pedido explícito del usuario,
		   distinto del padding simétrico genérico de abajo, que solo aplica bajo 80rem). Mismo
		   criterio que .landing-cards__inner/.landing-faq__inner: sin padding-inline en desktop, el
		   container SÍ llega a los 1200px completos de un extremo a otro (--container). */
		.landing-videos-cols { padding-block: 80px 200px; }
		.landing-videos-cols__inner { padding-inline: 0; }
	}
	/* Glow/imagen decorativa opcional (videos_bg_image) — se SOBREPONE al color de fondo (nunca lo
	   reemplaza, ver three-videos.php), anclada abajo del bloque y recortada por el overflow:hidden
	   de arriba, igual que el mockup de Figma. */
	.landing-videos-cols__bg-image {
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		line-height: 0;
		pointer-events: none;
	}
	.landing-videos-cols__bg-image img { display: block; width: 100%; height: auto; }
	.landing-videos-cols__inner { position: relative; z-index: 1; }
	.landing-videos-cols__header { max-width: 40rem; margin: 0 auto 48px; text-align: center; }
	.landing-videos-cols__eyebrow {
		margin: 0 0 8px;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--landing-videos-eyebrow-color, #ffffff);
		opacity: .7;
	}
	.landing-videos-cols__title {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
		line-height: 1.25;
		letter-spacing: -.5px;
		color: var(--landing-videos-title-color, #ffffff);
	}
	/* flex + justify-content:center (no grid de 3 columnas fijas) — con 1 o 2 videos, respeta el
	   ancho máximo de 380px de cada item en vez de estirarlos a todo el ancho disponible (pedido
	   explícito del usuario 2026-08-02); con 3+, hacen wrap centrados igual. */
	.landing-videos-cols__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
	.landing-videos-cols__item { width: 100%; max-width: 380px; }
	/* aspect-ratio 380/237 (no 4/3) — a 380px de ancho (el max-width de arriba) da exactamente
	   237px de alto, spec Figma; sigue siendo fluido hacia abajo en mobile/tablet. */
	.landing-videos-cols__media { position: relative; aspect-ratio: 380 / 237; border-radius: 12px; overflow: hidden; background: #000; }
	/* :not(.landing-videos-cols__play) — mismo motivo que .landing-video__media img (video-quote.php):
	   sin esto, esta regla le gana a .landing-videos-cols__play y estira el botón de play a 100%. */
	.landing-videos-cols__media img:not(.landing-videos-cols__play) {
		width: 100%; height: 100%; object-fit: cover;
		/* Mismo zoom de hover que el resto del sitio (news-card/story-card/etc.). */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	}
	.landing-videos-cols__thumb-btn:hover img:not(.landing-videos-cols__play) {
		transform: scale(1.06);
	}
	/* Mismo componente/comportamiento que .landing-video__play (video-quote.php): imagen del
	   diseñador (play.webp, círculo+ícono ya incluidos), sin background/border-radius propios. */
	.landing-videos-cols__play {
		position: absolute; top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		width: 54px; height: 54px;
	}
	.landing-videos-cols__thumb-btn {
		position: absolute; inset: 0;
		display: block;
		width: 100%; height: 100%;
		padding: 0;
		border: none;
		background: none;
		cursor: pointer;
	}
	.landing-videos-cols__iframe {
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		border: 0;
	}

	/* ============ 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);
		transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
	}
	/* Hover del acordeón (pedido explícito del usuario 2026-07-31): mismo tratamiento visual que
	   la pregunta abierta, mismas custom properties editables por ACF — así el hover siempre
	   coincide con el color "abierto" que el editor haya elegido, sin duplicar valores. */
	.landing-faq__item.--open,
	.landing-faq__item:hover {
		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 — Figma nodo 4457:16479 ============ */
	.landing-form {
		position: relative;
		overflow: hidden; /* recorta .landing-form__bg-image, decorativa y ancha de más a propósito */
		padding-block: clamp(3rem, 2rem + 4vw, 80px);
		background: #0a0a0a; /* fallback si el campo ACF form_bg_color viniera vacío */
	}
	/* Imagen decorativa opcional (form_bg) — se SOBREPONE al color de fondo (nunca lo reemplaza, ver
	   newsletter-form.php), anclada arriba del bloque. */
	.landing-form__bg-image {
		position: absolute;
		inset-inline: 0;
		top: 0;
		height: min(662px, 100%);
		overflow: hidden;
		pointer-events: none;
	}
	/* object-position: top — sin esto, el default (50% 50%, centrado) recorta parejo arriba/abajo y
	   la porción superior real de la foto (justo lo que queda pegado al top:0 del bloque) se pierde;
	   pedido explícito del usuario 2026-08-02 tras notar que la imagen no arrancaba en su propio 0. */
	.landing-form__bg-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
	.landing-form__bg-image::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(270deg, rgba(10, 10, 10, 1) 8%, rgba(10, 10, 10, 0) 50%),
			linear-gradient(90deg, rgba(10, 10, 10, 1) 10%, rgba(10, 10, 10, 0) 50%);
	}
	.landing-form__inner { position: relative; z-index: 1; }
	.landing-form__header { max-width: 36.5625rem; margin: 0 auto 24px; text-align: center; } /* 585px */
	.landing-form__eyebrow {
		margin: 0 0 16px;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--landing-form-eyebrow-color, #ffffff);
		opacity: .7;
	}
	.landing-form__title {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
		line-height: 1.25;
		letter-spacing: -.5px;
		color: var(--landing-form-title-color, #ffffff);
	}
	.landing-form__desc {
		max-width: 49.375rem; /* 790px, spec Figma */
		margin: 0 auto 24px;
		text-align: center;
		font-family: var(--font-sans);
		font-size: clamp(1rem, 0.85rem + .6vw, 1.25rem);
		line-height: 1.6;
		color: var(--landing-form-desc-color, #d0d1d3);
	}
	.landing-form__form { max-width: 30.125rem; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; } /* 482px */
	.landing-form__fields { display: flex; flex-direction: column; gap: 30px; }
	.landing-form__field { display: flex; flex-direction: column; gap: 8px; }
	.landing-form__label {
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #ffffff;
	}
	.landing-form__input,
	.landing-form__select {
		width: 100%;
		padding: 15px 24px;
		border: 1px solid #777777;
		border-radius: var(--dia-radius-sm, 4px);
		background: #0d0710;
		font-family: var(--font-sans);
		font-size: 16px;
		line-height: 24px;
		color: #ffffff;
	}
	.landing-form__input::placeholder { color: #a3a3a3; }
	.landing-form__select-wrap { position: relative; }
	.landing-form__select {
		-webkit-appearance: none;
		appearance: none;
		padding-right: 48px;
		cursor: pointer;
	}
	.landing-form__select-icon {
		position: absolute;
		top: 50%; right: 24px;
		transform: translateY(-50%);
		display: flex;
		width: 24px; height: 24px;
		color: #ffffff;
		pointer-events: none;
	}
	.landing-form__select-icon svg { display: block; width: 100%; height: 100%; }
	.landing-form__checkbox {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		cursor: pointer;
	}
	/* Checkbox nativo oculto (accesible, sigue recibiendo foco/click) — la caja visible es
	   .landing-form__checkbox-box, un <span> hermano que refleja el estado :checked. */
	.landing-form__checkbox input[type="checkbox"] {
		position: absolute;
		width: 24px; height: 24px;
		margin: 0;
		opacity: 0;
		cursor: pointer;
	}
	.landing-form__checkbox-box {
		position: relative;
		flex-shrink: 0;
		width: 24px; height: 24px;
		border: 1px solid #777777;
		border-radius: var(--dia-radius-sm, 4px);
		background: #0d0710;
	}
	.landing-form__checkbox input:checked + .landing-form__checkbox-box::after {
		content: "";
		position: absolute;
		inset: 5px;
		border-radius: 2px;
		background: #ffffff;
	}
	.landing-form__checkbox input:focus-visible + .landing-form__checkbox-box {
		outline: 2px solid #ffffff;
		outline-offset: 2px;
	}
	.landing-form__checkbox-text {
		font-family: var(--font-sans);
		font-size: 14px;
		line-height: 20px;
		color: #d0d1d3;
	}
	.landing-form__submit {
		width: 100%;
		padding: 17px 24px;
		border: 1px solid #ffffff;
		border-radius: var(--dia-radius-sm, 4px);
		background: none;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #ffffff;
		cursor: pointer;
	}
	.landing-form__submit:hover { background: rgba(255, 255, 255, .1); }

	/* ============ Lightbox de la Galería de Fotos (landing-gallery-lightbox.js) ============ */
	.landing-lightbox {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, .92);
	}
	.landing-lightbox.is-open { display: block; }
	.landing-lightbox__body {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 2rem clamp(4rem, 10vw, 7.5rem);
	}
	.landing-lightbox__image {
		display: block;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		border-radius: 8px;
	}
	.landing-lightbox__close {
		position: absolute;
		top: 24px;
		right: clamp(var(--space-m), 6vw, 7.5rem);
		display: flex;
		background: none;
		border: 0;
		color: #fff;
		cursor: pointer;
		padding: 0;
	}
	.landing-lightbox__close svg { width: 28px; height: 28px; }
	.landing-lightbox__nav-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, .3);
		background: rgba(255, 255, 255, .08);
		color: #fff;
		cursor: pointer;
	}
	.landing-lightbox__nav-btn--prev { left: clamp(1rem, 4vw, 3rem); }
	.landing-lightbox__nav-btn--next { right: clamp(1rem, 4vw, 3rem); }
	.landing-lightbox__nav-btn svg { width: 20px; height: 20px; }
	.landing-lightbox__nav-btn:disabled { opacity: .3; cursor: default; }
	.landing-lightbox__nav-btn:not(:disabled):hover { background: rgba(255, 255, 255, .18); }
	.landing-lightbox__count {
		position: absolute;
		bottom: 24px;
		left: 50%;
		transform: translateX(-50%);
		font-family: var(--font-sans);
		font-size: 14px;
		color: rgba(255, 255, 255, .7);
	}
	@media (width < 48rem) {
		.landing-lightbox__body { padding: 4.5rem 1rem 3rem; }
		.landing-lightbox__nav-btn { width: 40px; height: 40px; }
	}
}