/* =================================================================
   home-hero.css — Hero de portada, variante 1 (editorial 4 imágenes).
   Solo se encola en is_front_page() (inc/enqueue.php). CSS plano (§4.3).
   ================================================================= */

@layer views {
	.hero-home {
		position: relative;
		background: #000 var(--hero-home-bg) center center/cover no-repeat;
		color: #fff;
		padding-block: 2.8125rem; /* 45px desktop, ver §2 de las notas de David */
		padding-inline: clamp(var(--space-m), 8vw, 7.5rem); /* gutter mobile/tablet, ver override desktop abajo */
	}
	/* Desktop (mismo breakpoint que .site-header, ver base.css): el gutter de vw de arriba crece
	   más rápido que el 1200px real -- a 1280px de viewport ya da un área de contenido de
	   ~1075px, por debajo de var(--container), así que .hero-home__inner (abajo) nunca llega a
	   tocar su propio max-width:1200px (bug real, visto en newdia.nett.mx: hero medía 1075px en
	   vez de 1200px). Se apaga acá y el ancho de 1200px queda ENTERAMENTE a cargo de
	   max-width + margin-inline:auto en .hero-home__inner. */
	@media (width >= 80rem) {
		.hero-home { padding-inline: 0; }
	}

	/* 1200px es el ancho TOTAL del contenido (sin padding adicional aquí: el gutter ya lo da
	   .hero-home arriba). Si se suma padding-inline también aquí, las columnas se encogen
	   por debajo de las medidas de Figma (710/460 → ~480/310). */
	.hero-home__inner {
		max-width: var(--container);
		margin-inline: auto;
		display: flex;
		align-items: flex-start;
		gap: 3.75rem; /* 60px, Figma */
	}

	.hero-home__main { flex: 1 1 0; min-width: 0; }

	.hero-home__media {
		display: block;
		aspect-ratio: var(--ratio-article);
		border-radius: 12px;
		overflow: hidden;
		box-shadow: var(--shadow-thumb);
	}
	.hero-home__media img {
		width: 100%; height: 100%;
		object-fit: cover; object-position: var(--img-focal);
		/* Mismo timing "con peso" que .story-card__img (home-stories.css) — la foto respira un
		   poco detrás del marco en vez de saltar al tamaño final. */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	}

	.hero-home__tags { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
	.hero-home__tags .card-tag { display: inline-flex; align-items: center; gap: .5rem; }
	.hero-home__tags .card-tag .icon { width: 16px; height: 16px; color: var(--dia-color-icon-muted); }

	.hero-home__title { margin-top: 1rem; }
	.hero-home__title a { color: #fff; text-decoration: none; transition: opacity .25s ease; }

	/* Hover de la noticia principal: título e imagen son DOS links separados (no uno envolviendo
	   al otro, a diferencia de .hero-home__latest-link de abajo) — :has() deja que cualquiera de
	   los dos dispare el efecto combinado en ambos (imagen + texto), sin duplicar el estado en JS.
	   Mismo scale que .story-card__link:hover .story-card__img (home-stories.css). */
	.hero-home__main:has(.hero-home__media:hover, .hero-home__title a:hover) .hero-home__media img {
		transform: scale(1.06);
	}
	.hero-home__main:has(.hero-home__media:hover, .hero-home__title a:hover) .hero-home__title a {
		opacity: .7;
	}

	.hero-home__latest {
		flex: 0 0 430px; /* 1200 - 710 (main) - 60 (gap), Figma */
		max-width: 430px;
	}
	.hero-home__latest .label-section { color: #fff; margin-bottom: 1rem; }

	.hero-home__latest-list { list-style: none; margin: 0; padding: 0; }
	.hero-home__latest-item { border-top: 1px solid rgba(237, 242, 246, .2); }
	.hero-home__latest-item:last-child { border-bottom: 1px solid rgba(237, 242, 246, .2); }

	.hero-home__latest-link {
		display: flex; align-items: flex-start; gap: 1.25rem;
		padding-block: 2rem; /* 32px desktop */
		text-decoration: none; color: #fff;
	}

	.hero-home__latest-media {
		position: relative;
		flex: 0 0 180px; /* 180x112, Figma */
		aspect-ratio: var(--ratio-article-compact);
		border-radius: 6px;
		overflow: hidden;
		box-shadow: var(--shadow-thumb);
	}
	.hero-home__latest-media img {
		width: 100%; height: 100%;
		object-fit: cover; object-position: var(--img-focal);
		transition: transform 1s cubic-bezier(.22, 1, .36, 1); /* mismo timing que .hero-home__media img arriba */
	}
	.hero-home__latest-media::after {
		content: "";
		position: absolute; inset: 0;
		pointer-events: none;
	}

	/* Tratamiento decorativo por posición, tal cual el Inspect de Figma (demo content fijo).
	   OJO: si el CMS rota contenido real en estos 3 slots, esto sigue aplicando por posición,
	   no por artículo — confirmar con diseño si es un sistema intencional o solo flourish del mock. */
	.hero-home__latest-item:nth-child(1) .hero-home__latest-media {
		box-shadow: 0 6px 14px 0 rgba(0, 0, 0, .55);
	}
	.hero-home__latest-item:nth-child(1) .hero-home__latest-media::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62.98%, #0d5c68 100%);
	}
	.hero-home__latest-item:nth-child(2) .hero-home__latest-media::after {
		background: linear-gradient(130.76deg, rgba(0, 0, 0, 0) 67.123%, rgb(175, 107, 8) 110.3%);
	}
	.hero-home__latest-item:nth-child(3) .hero-home__latest-media::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 63%, #000 100%);
	}

	.hero-home__latest-body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
	/* Truncamiento 100% CSS (el título llega COMPLETO desde PHP, sin recorte por caracteres —
	   antes había un dia_trim_title(...,70) en hero-home.php que chocaba con esto: 70 caracteres
	   se quedaban cortos para llenar 3 líneas en desktop [texto-ancho] pero alcanzaban para más de
	   3 en columnas angostas [texto-angosto, más wrap por línea], dos fuentes de verdad peleando
	   entre sí. line-clamp es ahora la ÚNICA fuente: trunca Y pone el "…" automáticamente al
	   límite real de líneas de CADA breakpoint, sin depender de cuántos caracteres "deberían"
	   caber. Base 3 líneas = Figma desktop (contenedor de título a 75px / line-height:24px). */
	.hero-home__latest-body .heading-card {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		transition: opacity .25s ease;
	}

	/* Hover de las 3 noticias chicas: título y thumbnail viven DENTRO del mismo <a>
	   (.hero-home__latest-link, a diferencia de la noticia principal de arriba) — un solo
	   :hover en el link ya cubre "pasar sobre el título" y "pasar sobre la imagen" a la vez. */
	.hero-home__latest-link:hover .hero-home__latest-media img {
		transform: scale(1.06);
	}
	.hero-home__latest-link:hover .heading-card {
		opacity: .7;
	}
	.hero-home__latest-body .card-tag {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		max-width: 100%;
	}
	.hero-home__latest-body .card-tag .icon { width: 16px; height: 16px; color: var(--dia-color-icon-muted); flex-shrink: 0; }
	/* El label (ej. "FROM THE HEADQUARTERS", .card-tag__label en hero-home.php) nunca debe
	   partirse a 2 líneas — en mobile, con la columna de texto más angosta (thumbnail fijo a
	   120px le come espacio), un label largo alcanzaba a envolver. text-overflow:ellipsis NO
	   funciona puesto en el propio .card-tag (es un flex container, no aplica ahí) ni sobre un
	   nodo de texto suelto -- necesita su PROPIO elemento. min-width:0 es necesario porque es un
	   flex item: sin eso, su ancho mínimo por defecto es el del contenido sin wrap (font: auto),
	   así que nunca se encoge lo suficiente para que el ellipsis tenga algo que recortar. */
	.hero-home__latest-body .card-tag__label {
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Tablet (768–1280px, mismo rango que separa mobile/tablet en home-resources.css): la columna
	   de texto queda más angosta que en mobile real (el thumbnail sigue fijo a 120px, pero el
	   contenedor general es más estrecho que el de mobile a ancho completo), así que 3 líneas se
	   ve desproporcionado contra el thumbnail de 75px de alto — se baja a 2. */
	@media (48rem <= width < 80rem) {
		.hero-home__latest-body .heading-card { -webkit-line-clamp: 2; line-clamp: 2; }
	}

	@media (width < 80rem) {
		.hero-home__inner { flex-direction: column; }
		.hero-home__latest { flex: 1 1 auto; max-width: none; width: 100%; }
		.hero-home__latest-link { padding-block: 1.0625rem; } /* 17px mobile */

		/* Tipografía mobile del Inspect de Figma (spec del diseñador): el titular grande baja
		   de peso 600 a 250 — instancia variable nueva, ver wght@75,250 en dia_enqueue(). */
		.hero-home__main .heading-display {
			font-size: 24px;
			font-weight: 250;
			line-height: 32px;
		}
	}

	/* Tablet: va DESPUÉS del bloque `<80rem` de arriba a propósito — mismo peso de especificidad
	   que .hero-home__latest-link ahí adentro, y a este rango (48rem-80rem) matchean los dos
	   media queries a la vez, así que el que quede último en el archivo es el que gana la cascada.
	   Valor intermedio entre 33px desktop y 17px mobile. */
	@media (48rem <= width < 80rem) {
		.hero-home__latest-link { padding-block: 1.5625rem; } /* 25px */
	}

	/* Hero variante 2 "Historia destacada" (Figma 2828:8303). Dos linear-gradient apilados: uno
	   oscurece arriba, el otro abajo — deja el centro más claro. El de abajo NO es el valor
	   literal del Inspect (rgba(0,0,0,.81) con stop en 27%): ese valor crea una banda PLANA
	   sólida al .81 desde el borde hasta 27% (sin stop en 0%, el navegador extrapola el primer
	   color hacia atrás) — se veía como una franja negra sólida, no un fade. Se suavizó a un fade
	   continuo desde el borde, sin plateau. Tipografía con peso/tracking propios, NO reusa
	   .heading-display/.label-eyebrow: los valores del Inspect (peso 500 no 600, tracking 5px no
	   2px, etc.) no coinciden con esas clases, que se definieron para la variante 1. */
	.hero-story {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		/* Proporción 1440x900 del Inspect SIN usar aspect-ratio: con max-height presente,
		   aspect-ratio recalcula el ANCHO a partir del alto ya clampeado (900px * 8/5 = 1440px)
		   en vez de mantenerlo al 100% del contenedor — eso recortaba la sección a 1440px en
		   pantallas anchas. height en vw (62.5vw = 100vw * 5/8) da la misma proporción sin pasar
		   por el algoritmo de aspect-ratio, así el ancho nunca se ve afectado. */
		height: clamp(26rem, 62.5vw, 56.25rem);
		color: #fff;
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .6) 1.58%, rgba(0, 0, 0, 0) 50.79%),
			linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 50%),
			var(--hero-story-bg) center var(--hero-story-bg-pos, center)/cover no-repeat;
	}
	.hero-story__inner {
		max-width: var(--container);
		width: 100%;
		margin-inline: auto;
		padding-inline: clamp(var(--space-m), 8vw, 7.5rem);
		display: flex;
		justify-content: flex-end;
		position: relative; /* por encima del sujeto, que es absolute respecto a .hero-story */
		z-index: 1;
	}

	/* Sujeto recortado (home_hero_story_subject, opcional): pegado al borde inferior izquierdo,
	   alto relativo al hero — NO participa del flex de .hero-story__inner, así nunca empuja ni
	   se solapa con el texto (decisión: van lado a lado, sin overlap). */
	.hero-story__subject {
		position: absolute;
		left: clamp(var(--space-m), 8vw, 7.5rem);
		bottom: 0;
		/* 78%/36% (antes 92%/42%): contra el Inspect real (Figma 2828:8303, frame 1297px) el
		   sujeto deja ~86px (6.6% del frame) de aire antes del texto. Con object-fit:contain el
		   ANCHO escala junto con el alto — 92% inflaba el ancho renderizado y se comía ese aire,
		   quedando "pegado" al texto en desktop. max-width es el tope de seguridad si algún PNG
		   de sujeto trae una proporción más ancha de lo esperado. */
		height: 78%;
		width: auto;
		max-width: 36%;
		object-fit: contain;
		object-position: bottom;
		pointer-events: none;
	}
	.hero-story__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		max-width: 31.5rem; /* 504px, igual al Inspect */
	}
	.hero-story__label {
		display: inline-flex;
		align-items: center;
		gap: .4375rem; /* 7px */
		font-family: var(--font-sans);
		font-size: 13px;
		font-weight: 400;
		line-height: 19px;
		letter-spacing: 5px;
		text-transform: uppercase;
		color: #ccc;
	}
	.hero-story__title {
		margin: 0;
		font-family: var(--font-serif);
		font-weight: 500;
		font-stretch: 75%; /* "Condensed" — ver token --font-serif en base.css */
		font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem); /* hasta 44px desktop, igual al Inspect */
		line-height: 1.295; /* 57/44, igual al Inspect */
		color: #fff;
	}
	/* Botón de los Hero oscuros (variantes 2 y 3) — mismo valor literal del Inspect en ambas,
	   compartido para no duplicar el bloque. */
	.hero-cta {
		display: inline-flex;
		align-items: center;
		gap: .875rem; /* 14px */
		border: 1px solid #fff;
		border-radius: 6px;
		padding: 19px 33px;
		font-family: var(--font-sans);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 4px;
		line-height: 18px;
		text-transform: uppercase;
		color: #fff;
		text-decoration: none;
		transition: background-color .15s;
	}
	.hero-cta:hover { background: rgba(255, 255, 255, .12); }

	@media (width < 80rem) {
		.hero-story { height: auto; min-height: 30rem; align-items: flex-end; padding-block: 2.5rem; }
		.hero-story__inner { justify-content: flex-start; }
		.hero-story__content { max-width: none; width: 100%; }
		/* El sujeto a la izquierda asume el layout de texto a la derecha (desktop) — en mobile
		   el texto ocupa todo el ancho apilado, así que el sujeto se oculta en vez de competir
		   por espacio con él. Revisar si el diseñador define un tratamiento mobile específico. */
		.hero-story__subject { display: none; }
	}

	/* Tablet (Figma node 3352:12324, frame 768px): a diferencia de mobile, el sujeto NO se apila
	   — vuelve al layout lado a lado de desktop (sujeto izquierda, texto derecha), solo que más
	   compacto. Por eso este bloque sobreescribe selectivamente lo que el `<80rem` general dejó
	   pensado para mobile (align-items:flex-end, subject:none, content:100% width). Rango acotado
	   a 30rem–80rem para no pisar el layout apilado de `<30rem` que va después en el archivo. */
	@media (30rem <= width < 80rem) {
		.hero-story {
			align-items: center;
			min-height: 24rem;
			/* Ancho del sujeto y "colchón" mínimo respecto al texto, como variables — el ancho
			   del TEXTO (abajo) se calcula a partir de estas dos, en vez de traer su propio
			   clamp() independiente. Con dos clamp() sueltos (intento anterior) cada uno se
			   ajustaba bien solo en el punto medio del rango (768px) pero en los extremos (768px
			   bajo, y sobre todo 480px) los anchos ya no sumaban y se traslapaban — clamps
			   independientes no garantizan que sus resultados sigan siendo complementarios en
			   todo el rango. Esto sí lo garantiza, porque content se calcula EN FUNCIÓN del
			   ancho real del sujeto, nunca puede invadirlo. */
			--hero-story-subject-w: clamp(9rem, 32vw, 19rem);
			--hero-story-gap: clamp(1rem, 4vw, 3rem);
		}
		.hero-story__inner { justify-content: flex-end; }
		.hero-story__content {
			/* 100% acá es el ancho de .hero-story__inner (el contexto de %, ya neto de los 2
			   gutters de su padding-inline) — restarle el sujeto + el gap da el espacio real
			   disponible a la derecha del sujeto, nunca negativo en la práctica porque ambos
			   términos vienen de las mismas variables que usa .hero-story__subject abajo. El
			   min(...) tope en 21.75rem (348px, el valor del Inspect a 768px) evita que el texto
			   se infle de más cerca del límite superior del rango (80rem). */
			max-width: min(calc(100% - var(--hero-story-subject-w) - var(--hero-story-gap)), 21.75rem);
			width: auto;
		}
		.hero-story__subject {
			display: block;
			position: absolute;
			/* Antes traía un gutter "custom" (clamp 1.5rem/4vw/2rem) que NO coincidía con el
			   gutter estándar del resto de la página (el mismo que usa .hero-story__inner abajo
			   y la sección "Historias" para su título/flechas) — por eso se veía descuadrado
			   contra el texto de esa sección. Mismo valor que el padding-inline del inner, para
			   que sujeto/texto/título de la sección siguiente comparten una sola línea vertical. */
			left: clamp(var(--space-m), 8vw, 7.5rem);
			bottom: 0;
			height: 85%; /* 327/382 del Inspect */
			width: var(--hero-story-subject-w);
			max-width: none;
			object-fit: contain;
			object-position: bottom;
		}
	}

	/* Mobile específico (Figma node 3349:12301, frame 375px): el sujeto recortado deja de ir
	   oculto y pasa a mostrarse DEBAJO del texto (no a la izquierda, como en desktop) — layout
	   en columna: tag+título+botón arriba, sujeto abajo. Se reusa el breakpoint de detalle fino
	   (30rem) que ya existe en este archivo para el resto de ajustes de móvil. */
	@media (width < 30rem) {
		.hero-story {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			padding-block: 2rem 0;
			padding-inline: 1rem;
			/* Mismo fondo, pero con el degradado inferior más marcado: en el mock mobile el bloque
			   de abajo (sujeto + fotos flotantes) necesita más contraste que en desktop porque
			   ocupa casi toda la mitad inferior del hero, no solo una franja angosta a un lado. */
			background:
				linear-gradient(180deg, rgba(0, 0, 0, .6) 1.58%, rgba(0, 0, 0, 0) 50.79%),
				linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 55%),
				var(--hero-story-bg) center var(--hero-story-bg-pos, center)/cover no-repeat;
		}
		.hero-story__inner { width: 100%; padding-inline: 0; justify-content: flex-start; order: 1; }
		.hero-story__content { gap: 1.5rem; } /* 24px — Spacing size=24 del Inspect entre título y botón */
		.hero-story__label { letter-spacing: 2px; font-size: 12px; }
		.hero-story__title { font-size: 2.125rem; line-height: 1.29; } /* 34px/44px, igual al Inspect */
		.hero-cta { padding: 19px 33px; }

		/* El sujeto pasa de absolute (desktop) a un bloque normal en el flujo, centrado, DEBAJO
		   del texto — order:2 lo manda después de .hero-story__inner aunque en el HTML venga
		   primero (markup no cambia entre variantes de pantalla, solo el orden visual). */
		.hero-story__subject {
			display: block;
			position: relative;
			order: 2;
			left: auto;
			bottom: auto;
			margin-top: 1.75rem; /* 28px — gap real del Inspect entre botón y sujeto, ~25-30px */
			margin-inline: auto;
			height: auto;
			width: 100%;
			max-width: 22rem; /* ~343px del Inspect */
			object-position: center;
		}
	}

	/* Hero variante 3 "Noticia/evento destacado" (Figma 2828:8326). Mismo tratamiento de fondo
	   y gradientes que .hero-story (consistencia entre variantes > fidelidad pixel-perfect al
	   mock, que en Figma trae blur decorativo — se omite a propósito, misma decisión que ya se
	   tomó para la variante 2). */
	.hero-news {
		position: relative;
		overflow: hidden; /* recorta el ::before escalado de más (ver abajo) */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: clamp(26rem, 62.5vw, 56.25rem);
		color: #fff;
		text-align: center;
	}
	/* El fondo va en un pseudo-elemento separado, NO en .hero-news directamente: `filter` aplica
	   también a los hijos (blurearía el texto y el slider), así que se aísla en su propia capa.
	   inset:-12px + scale(1.03) evita que se note el borde transparente que el blur deja en los
	   bordes de la imagen (Safari/Chrome ambos lo hacen). */
	.hero-news::before {
		content: '';
		position: absolute;
		inset: -12px;
		background: var(--hero-news-bg) center/cover no-repeat;
		filter: blur(6px);
		transform: scale(1.03);
		z-index: 0;
	}
	.hero-news::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .6) 1.58%, rgba(0, 0, 0, 0) 50.79%),
			linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, 0) 62%);
	}
	.hero-news__inner {
		position: relative;
		z-index: 1; /* por encima de ::before/::after */
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		width: 100%;
		padding-inline: clamp(var(--space-m), 8vw, 7.5rem);
	}
	.hero-news__label {
		display: inline-flex;
		align-items: center;
		gap: .75rem; /* 12px */
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 17px;
		line-height: 19px;
		letter-spacing: 8px;
		text-transform: uppercase;
		color: #fff;
	}
	.hero-news__title {
		margin: 0;
		max-width: 56rem;
		font-family: var(--font-serif);
		font-weight: 600;
		font-stretch: 75%; /* "Condensed" — ver token --font-serif en base.css */
		font-size: clamp(1.375rem, .9rem + 2vw, 2.125rem); /* hasta 34px desktop, igual al Inspect */
		line-height: 1.294; /* 44/34, igual al Inspect */
		color: #fff;
	}
	.hero-news__title a {
		color: inherit;
		text-decoration: none;
	}
	.hero-news__title a:hover { text-decoration: underline; }

	.hero-news__slider-wrap {
		--hero-news-slide-shadow:
			0 18px 48px rgba(0, 0, 0, .38),
			0 4px 16px rgba(0, 0, 0, .28);
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.hero-news .swiper {
		width: min(754px, 78vw);
		overflow: visible !important; /* !important necesario: swiper-bundle.min.css (CDN) declara
		   `.swiper{overflow:hidden}` sin @layer, y por spec gana sobre cualquier regla con @layer
		   sin importar especificidad (mismo motivo que el !important de abajo, ver §12.1/§12.22).
		   Permite que el box-shadow de la slide activa no se recorte; las slides vecinas no se
		   asoman porque el swiper mide lo mismo que cada slide (sin "peek"). */
		border-radius: 6px;
		box-shadow: var(--hero-news-slide-shadow);
	}
	/* !important necesario: swiper-bundle.min.css (CDN) no declara sus reglas dentro de ningún
	   @layer, y por spec los estilos SIN layer le ganan a CUALQUIER estilo con layer sin importar
	   especificidad — todo el CSS de este tema vive en @layer views/components/etc (ver
	   base.css), así que sin !important el `.swiper-slide{width:100%}` de Swiper siempre ganaba,
	   dejando el slide a ancho completo y sin alto controlado (la imagen se veía gigante, sin
	   recorte ni bordes). También se fija el alto explícito (no aspect-ratio): el alto:100% que
	   trae Swiper en su propio `.swiper-slide` necesita un alto explícito para resolver bien. */
	.hero-news .swiper-slide,
	.hero-news__static-img {
		width: min(754px, 78vw) !important;
		height: calc(min(754px, 78vw) * 471 / 754) !important; /* misma proporción 754:471 del Inspect */
		position: relative;
		z-index: 1; /* por encima del pseudo-elemento de sombra del slider-wrap */
	}
	.hero-news__static-img { box-shadow: var(--hero-news-slide-shadow); /* sin swiper, sin overflow:hidden de por medio: el shadow normal funciona aquí */ }
	/* El redondeado va en el <img> mismo, no en el contenedor: una <img> no necesita
	   overflow:hidden para recortar sus propias esquinas, y así el box-shadow del contenedor
	   no se ve cortado (antes ambos estaban en el mismo elemento con overflow:hidden). */
	.hero-news .swiper-slide img,
	.hero-news__static-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		border-radius: 6px;
	}

	/* Slides que NO son la activa (las que se asoman a los lados, "peek") se oscurecen un poco
	   más — además de la jerarquía visual, ayuda a que las flechas (blancas) se distingan mejor
	   contra ellas. El overlay lleva su propio border-radius (igual al de la imagen) en vez de
	   depender de overflow:hidden en el padre — mismo motivo que con el box-shadow más arriba. */
	.hero-news .swiper-slide:not(.swiper-slide-active) {
		position: relative;
	}
	.hero-news .swiper-slide:not(.swiper-slide-active)::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 6px;
		background: rgba(0, 0, 0, .45);
	}

	.hero-news__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		border: 1px solid #fff;
		border-radius: 4px;
		background: none;
		color: #fff;
		cursor: pointer;
		z-index: 2;
		transition: background-color .15s, opacity .15s;
	}
	.hero-news__nav--prev { left: clamp(var(--space-m), 4vw, 3.75rem); }
	.hero-news__nav--next { right: clamp(var(--space-m), 4vw, 3.75rem); }
	.hero-news__nav-icon { display: inline-flex; }
	.hero-news__nav--prev .hero-news__nav-icon { transform: rotate(180deg); }
	/* Fondo blanco sólido en hover (pedido explícito) — sin bajar `color` acá el ícono
	   (stroke="currentColor") quedaría blanco sobre blanco, invisible. */
	.hero-news__nav:hover:not(.swiper-button-disabled) {
		background: #fff;
		color: var(--dia-color-text-primary, #121212);
	}
	/* Clase que Swiper agrega solo en los extremos sin loop (primera/última slide) — mismo
	   "estado deshabilitado" que el mock de Figma mostraba fijo, pero real e interactivo aquí. */
	.hero-news__nav.swiper-button-disabled { opacity: .2; pointer-events: none; }

	@media (width < 80rem) {
		.hero-news { height: auto; min-height: 32rem; padding-block: 2.5rem; }
		.hero-news .swiper { width: 92vw; }
		.hero-news .swiper-slide,
		.hero-news__static-img { width: 92vw !important; height: calc(92vw * 471 / 754) !important; }
		.hero-news__nav { width: 40px; height: 40px; }
		.hero-news__nav svg { width: 20px; height: 20px; }
		.hero-news__nav--prev { left: .5rem; }
		.hero-news__nav--next { right: .5rem; }
	}
}