/* =================================================================
   news.css — Página "Noticias" (page-news.php, Figma 07-News-Desktop
   2522:3645). Grid de News filtrable por categoría/año vía HTMX.
   Reusa .news-card/.news-card__media/__title/__title-link de
   home-news.css (bare selectors, card "flat" del home) — ver
   inc/enqueue.php, se encola junto.
   Breakpoint estándar 80rem (§12).
   ================================================================= */

@layer views {
	/* ---- Wrap de ancho de página (mismo patrón robusto que home-hero/home-news, §12.41:
	   padding fluido SOLO hasta 80rem, tope duro de --container en vez de competir con él). ---- */
	.news-page {
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	@media (width >= 80rem) {
		.news-page { padding-inline: 0; }
	}
	.news-page__inner {
		max-width: var(--container);
		margin-inline: auto;
	}

	/* ---- Header (título + descripción) ----
	   .news-header vive dentro de .news-page__inner (max-width:var(--container)) y .news-page
	   envuelve TODA la página (header + grid + paginación), así que ni el borde en .news-header
	   (acotado al container) ni en .news-page (aparecería hasta abajo, después de la paginación)
	   dan una línea a todo el viewport justo debajo del header. Truco clásico full-bleed dentro de
	   contenedor centrado (mismo patrón que .site-header__search-bar, base.css §12): pseudo-elemento
	   absoluto que se sale del container vía left:50%/width:100vw/margin-left:-50vw — funciona
	   porque .news-header (position:relative, llena el ancho de .news-page__inner) está centrada
	   en el viewport igual que .news-page__inner. */
	.news-header {
		position: relative;
		padding-block: 3rem;
	}
	.news-header::after {
		content: "";
		position: absolute;
		left: 50%; width: 100vw; margin-left: -50vw;
		bottom: 0;
		border-bottom: 1px solid #e5e5e5;
	}
	@media (width < 80rem) {
		.news-header { padding-block: 2rem; }
	}
	@media (width < 48rem) {
		.news-header { padding-block: 1.5rem; }
	}
	.news-header__desc {
		max-width: 585px;
	}
	.news-header__desc p { margin: 0; }

	/* ---- Filtros ---- */
	.news-filters {
		padding-block: 2rem 3rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	.news-filters__label-row {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.news-filters__label {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 20px;
		line-height: 32px;
		color: var(--dia-color-text-primary, #121212);
	}
	/* Spinner de carga, oculto por default: htmx le agrega la clase .htmx-request directo A ÉL
	   (hx-indicator="#news-spinner" en #results, page-news.php — htmx NO agrega esa clase al
	   hx-target por default, solo al elemento que declares como indicador) mientras cualquier
	   petición de la página esté en vuelo, y recién se muestra si eso dura MÁS de 300ms
	   (transition-delay, no transition-duration) — así una respuesta rápida (el caso normal en
	   este sitio) nunca lo llega a mostrar, y solo se ve si la conexión se pone lenta. */
	.news-spinner {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #d0d1d3;
		border-top-color: var(--dia-color-text-primary, #121212);
		opacity: 0;
		transition: opacity 0s linear .3s;
		animation: news-spinner-spin .7s linear infinite;
	}
	.news-spinner.htmx-request {
		opacity: 1;
		transition-delay: .3s;
	}
	@keyframes news-spinner-spin {
		to { transform: rotate(360deg); }
	}
	/* nowrap (antes wrap): con wrap, el navegador manda TODO el bloque de pills a su propia línea
	   en cuanto no cabe junto al año (así se veía roto en tablet, bug reportado) en vez de dejar
	   que .news-filters__pills se comprima primero — eso es justo lo que necesita medir
	   news-filters-overflow.js. La contrapartida (año/pills SIEMPRE en una sola línea, sin
	   envolver) es intencional: en mobile esta fila se vuelve columna de todos modos (media query
	   abajo), así que acá nunca hace falta el wrap. */
	.news-filters__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-m);
		flex-wrap: nowrap;
	}
	/* nowrap a propósito (antes wrap): news-filters-overflow.js mide el ancho real disponible
	   (scrollWidth vs. clientWidth, ninguno de los dos depende de "overflow") y saca las pills que
	   no quepan hacia el dropdown "…" (news-pill--more) en vez de envolverlas a una 2da línea —
	   patrón "priority+" pedido por el diseñador para no depender de breakpoints fijos (el ancho de
	   cada pill varía por idioma, no por viewport). flex-shrink:0 en .news-pill (abajo) es
	   NECESARIO para que el navegador nunca las achique en vez de desbordarlas. flex:1/min-width:0
	   acá hace que ESTE contenedor (no sus pills) se comprima primero, cediéndole su ancho fijo al
	   año. SIN overflow:hidden a propósito — el script corre sync apenas carga la página (sin
	   flash real en la práctica) y un overflow:hidden acá recortaba también el menú del dropdown
	   "…" (que es descendiente de este contenedor), dejándolo invisible pese a abrirse bien (bug
	   real reportado: "el diseño se ve pero el click no hace nada"). */
	.news-filters__pills {
		display: flex;
		flex: 1 1 0%;
		min-width: 0;
		gap: 12px;
		flex-wrap: nowrap;
	}
	.news-pill {
		position: relative;
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 15px 24px;
		border-radius: 4px;
		border: 1px solid #9f9f9f;
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 16px;
		line-height: 24px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	/* Hover — mismo tratamiento que los botones de paginación (pedido explícito de David), NO
	   aplica sobre el pill activo (aria-current) ni sobre el dropdown de Year (ese es un
	   componente distinto, .news-filter-dropdown__toggle, sin este cambio). */
	.news-pill:not([aria-current="true"]):hover {
		border: 1px solid #a7b7ca;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}
	.news-pill[aria-current="true"] {
		background: #e6eaf0;
		border-color: transparent;
		color: var(--dia-color-text-secondary, #767778);
	}
	/* Triangulito debajo del pill activo (Figma), mismo fill que el fondo del pill (#e6eaf0). */
	.news-pill[aria-current="true"]::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: -8.5px;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 8.5px solid transparent;
		border-right: 8.5px solid transparent;
		border-top: 8.5px solid #e6eaf0;
	}
	/* ---- Dropdown de filtros (categoría en mobile + año en cualquier ancho, reemplaza al
	   <select> nativo de antes): mismo patrón de interacción que .lang-dropdown del selector de
	   idioma (base.css) — botón + <ul> absoluta vía Alpine — con el ancho/altura/borde que antes
	   tenía .news-filters__select (ya no existe, este componente la reemplazó por completo). ---- */
	.news-filter-dropdown { position: relative; }
	.news-filter-dropdown--category { display: none; } /* mobile-only, ver media query abajo */
	.news-filter-dropdown--year { width: 120px; flex-shrink: 0; }
	/* Trigger "…" del overflow de pills (news-filters-overflow.js): SOLO necesita el look de
	   .news-pill (no el de .news-filter-dropdown__toggle, que es para los dropdowns de ancho
	   completo categoría/año) — .news-filter-dropdown de acá arriba ya le da position:relative
	   para anclar el menú. [hidden] mientras todas las pills quepan en la fila. */
	.news-filter-dropdown--overflow { flex-shrink: 0; }
	.news-filter-dropdown--overflow[hidden] { display: none; }
	.news-pill--more { padding-inline: 20px; }
	/* Menú del overflow: a diferencia de categoría/año (ancho completo del trigger), este trigger
	   es angosto ("…") — heredar left:0/right:0 de .news-filter-dropdown__menu lo dejaría del
	   mismo ancho que el botón, comprimiendo el texto de las pills que caigan ahí. Se ancla a la
	   derecha con ancho propio (min 200px) en vez de estirarse al ancho del trigger. */
	.news-filter-dropdown--overflow .news-filter-dropdown__menu {
		left: auto;
		right: 0;
		width: max-content;
		min-width: 200px;
	}
	.news-filter-dropdown__toggle {
		position: relative;
		width: 100%;
		height: 54px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 44px 15px 24px;
		border-radius: 4px;
		border: 1px solid #cacaca;
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 16px;
		line-height: 24px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.news-filter-dropdown__chevron {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%) rotate(90deg);
		width: 16px;
		height: 16px;
		pointer-events: none;
	}
	.news-filter-dropdown__chevron svg { width: 100%; height: 100%; }
	.news-filter-dropdown__menu {
		display: none;
		position: absolute;
		top: calc(100% + .5rem);
		left: 0;
		right: 0;
		z-index: 10;
		margin: 0;
		padding: 8px 0;
		list-style: none;
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .12);
		max-height: min(60vh, 320px);
		overflow-y: auto;
	}
	.news-filter-dropdown.is-open .news-filter-dropdown__menu { display: block; }
	.news-filter-dropdown__item {
		position: relative;
		display: flex;
		align-items: flex-start; /* antes 'center' — con un label de 2 líneas (ej. "ALL YEARS" en
			mobile), centrar verticalmente el row completo dejaba el check ✓ flotando a media
			altura del bloque de texto en vez de pegado arriba — pedido explícito de David
			("no me agrada que esté centrado vertical"), diseño de Lalo (2026-07-06): check a la
			IZQUIERDA del texto, alineado arriba. */
		justify-content: flex-start; /* antes 'space-between' — ya no aplica: el check ahora va
			agrupado junto al texto (mismo lado), no empujado al extremo opuesto. */
		gap: 8px;
		width: 100%;
		text-align: left;
		padding: 12px 24px;
		border: 0;
		background: none;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 16px;
		line-height: 24px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.news-filter-dropdown__item:hover { background: var(--dia-color-border-subtle, #f3f4f6); }
	/* Ítem activo: fondo + texto azul de marca + check ✓ a la IZQUIERDA, alineado arriba — pedido
	   explícito 2026-07-06 (antes a la derecha, centrado vertical — ver comentario arriba). Ya no
	   reusa el tratamiento de .lang-dropdown__menu a[aria-current] (base.css, check a la derecha):
	   ese sigue igual, este es un diseño propio de este dropdown en particular. */
	.news-filter-dropdown__item[aria-current="true"] {
		background: #fafbfb;
		color: #2d5480;
	}
	.news-filter-dropdown__item[aria-current="true"]::after {
		content: '';
		order: -1; /* antes de(izquierda de) el texto — el ::after es un flex item más acá, no solo
			un pseudo-elemento decorativo, así que 'order' sí lo reubica en el layout. */
		width: 16px;
		height: 16px;
		flex-shrink: 0;
		/* Centra el ícono contra el cap-height de la PRIMERA línea del texto (line-height:24px,
		   ícono de 16px → 4px de "leading" arriba, igual que abajo) — sin esto, alinear ambos por
		   el borde superior (align-items:flex-start) deja el ícono visualmente más alto que la
		   tinta de la letra. */
		margin-top: 4px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 4.5L6.5 11L3 7.5' stroke='%232d5480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	}

	/* ---- Grid de resultados ---- */
	.news-grid {
		padding-block-end: 0;
		display: flex;
		flex-direction: column;
		gap: 3rem;
	}

	/* ---- Estado vacío de filtros (Figma 2822:7663 resumen + 2822:7693 card, no-results.php) ----
	   Sin padding-inline propio: .news-page ya trae el gutter fluido (hasta 80rem) + .news-page__
	   inner el tope de --container (§12), así que el resumen/card solo necesitan ser hijos
	   normales de .news-grid. */
	.news-filter-summary {
		display: flex;
		align-items: center;
		gap: 12px;
		/* Sin padding-bottom propio: .news-grid (flex column, gap:3rem/48px) ya da la separación
		   con .news-empty-outer — sumarle padding acá duplicaba el espacio (96px en vez de 48). */
	}
	.news-filter-summary__icon { display: inline-flex; }
	.news-filter-summary__icon svg { width: 24px; height: 24px; }
	.news-filter-summary__divider {
		width: 1px;
		height: 24px;
		background: #d0d1d3;
	}
	.news-filter-summary__text {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--dia-color-text-primary, #121212);
	}
	/* Wrapper "de fondo" (Figma nodo 2822:7694): contenedor tenue de ancho completo con la card
	   crema encajada adentro con 48px de inset en los 4 lados — 2 contenedores anidados, no 1
	   (el fondo rgba(226,231,235,.2) es el de AFUERA, no el de la card). Separado 120px del
	   footer porque este bloque reemplaza TODO el resultado normal (news-results.php corta con
	   return antes de la paginación), así que no compite con el padding-bottom de otro elemento. */
	.news-empty-outer {
		padding: 48px;
		border-radius: 8px;
		background: rgba(226, 231, 235, .2);
		margin-bottom: 120px;
	}
	.news-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 24px;
		padding: 84px;
		border-radius: 16px;
		border: 1px solid #e5e5dc;
		background: rgba(245, 245, 241, .8);
		text-align: center;
	}
	.news-empty__icon svg { width: 80px; height: 80px; color: var(--dia-color-text-primary, #121212); }
	.news-empty__title {
		margin: 0;
		max-width: 585px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: #000;
	}
	.news-empty__desc {
		margin: 0;
		max-width: 585px;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 20px;
		line-height: 32px;
		color: #000;
	}
	.news-empty__reset {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 17px 24px;
		border-radius: 4px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.news-empty__reset svg { width: 16px; height: 16px; }
	@media (width < 48rem) {
		.news-empty { padding: 48px 24px; }
		/* En mobile el wrapper tenue (.news-empty-outer) solo restaba espacio sin aportar nada
		   visible (2 contenedores anidados en una pantalla angosta se ve como puro padding extra,
		   reportado por el usuario) — se aplana a "sin caja": queda solo la card gris/crema. */
		.news-empty-outer {
			padding: 0;
			border-radius: 0;
			background: none;
		}
	}
	/* htmx añade esta clase al target (#results, que envuelve filtros + grid) mientras la
	   petición está en vuelo. */
	#results.htmx-request { opacity: .6; transition: opacity .2s; }

	/* Figma 3848:15298 — la info (tags+título) ahora vive ENCIMA de la imagen, no debajo (antes era
	   flex-column con la imagen arriba y el texto abajo). .news-main-article es la caja recortada
	   (aspect-ratio+overflow:hidden+radius) y todo lo demás (imagen, scrim, glass, texto) son capas
	   absolute apiladas adentro por orden de aparición en el HTML. */
	.news-main-article {
		position: relative;
		display: block;
		aspect-ratio: 1200 / 750;
		border-radius: 12px;
		overflow: hidden;
		margin-bottom: 3rem;
		border: 1px solid transparent; /* Estabiliza el clip/raster de Chromium con backdrop-filter
			+ mask-image; sin borde transparente aparece una banda dura al iniciar el blur. */
	}
	.news-main-article__media {
		position: absolute;
		inset: 0;
		display: block; /* <a>, clickeable, mismo destino que el título */
	}
	.news-main-article__media img {
		width: 100%; height: 100%; object-fit: cover; display: block;
		/* Mismo "parallax"/zoom de .story-card__img (home-stories.css) al hover. */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	}
	.news-main-article:hover .news-main-article__media img {
		transform: scale(1.06);
	}
	/* Gradiente oscuro (Figma 3848:15299, reemplaza el tinte azul anterior) — stops calculados a
	   partir de las coordenadas del frame en Figma: sólido hasta ~22% de la card, apagándose del
	   todo a ~52%. Plain background, sin mask/filter — no tiene el riesgo de compositing de
	   .news-main-article__glass (abajo), no hace falta complicarlo. */
	.news-main-article__scrim {
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .52) 26%, rgba(0, 0, 0, .22) 50%, rgba(0, 0, 0, 0) 74%);
	}
	/* Glass = blur + grano SOLO en el tercio inferior — MISMO patrón, EXACTO, que
	   .news-card__glass (home-news.css, card destacada de News/home): backdrop-filter + mask-image
	   en un solo elemento, ::after para el grano SIN mask propio (el mask del elemento padre ya
	   enmascara su propio box completo, pseudo-elemento incluido). Los intentos anteriores en esta
	   ronda (mask con más stops, separar mask/filter en padre-hijo, escalera de blurs sin mask)
	   sobre-complicaron algo que YA funciona en este mismo archivo (home-news.css) con este patrón
	   simple — la única diferencia real que introdujo el bug fue el `isolation: isolate` agregado
	   arriba en `.news-main-article` (ya quitado): `.news-card`/`.news-card--featured` NUNCA lo
	   usaron y su glass anda bien. */
	.news-main-article__glass {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 73%; /* Igual que .news-card__glass: prueba literal del patrón de la card destacada. */
		pointer-events: none;
		-webkit-backdrop-filter: blur(7px);
		backdrop-filter: blur(7px);
		-webkit-mask-image: linear-gradient(to top, #000 35%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(to top, #000 35%, rgba(0, 0, 0, 0) 100%);
	}
	.news-main-article__glass::after {
		content: '';
		position: absolute; inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 358' preserveAspectRatio='none'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='380' height='358' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E");
		background-size: 100% 100%;
	}
	/* Franja de texto sobre la imagen (Figma 3848:15312/15313). pointer-events:none en el
	   contenedor + auto en los hijos directos: así los huecos de padding/gap siguen dejando pasar
	   el click hacia .news-main-article__media (la imagen), y solo los tags/título (que sí son
	   links) capturan su propio click. */
	.news-main-article__tags-title {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 12px;
		padding: clamp(1.5rem, 4vw, 3rem);
		pointer-events: none;
	}
	.news-main-article__tags-title > * {
		pointer-events: auto;
	}
	.news-main-article__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 24px;
	}
	.news-main-article__tags .news-tag {
		color: var(--dia-color-text-inverse, #fff);
	}
	.news-main-article__title {
		margin: 0;
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 500;
		font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); /* hasta 44px desktop */
		line-height: 1.3;
		color: var(--dia-color-text-inverse, #fff);
	}
	.news-main-article__title a { text-decoration: none; color: inherit; }
	.news-main-article__title a:hover { opacity: .8; }

	/* position:relative + z-index:1: el tag de categoría es un link PROPIO (dia_news_category_url(),
	   inc/helpers.php), distinto del que abre el artículo — necesita quedar arriba del stretched-
	   link (.news-card__title-link::after) que cubre el resto de la card, mismo patrón que
	   a.news-card__tag en home-news.css. */
	.news-tag {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		max-width: 100%;
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-secondary, #767778);
		text-decoration: none;
	}
	a.news-tag:hover { text-decoration: underline; }
	.news-tag svg { width: 16px; height: 16px; flex-shrink: 0; }
	/* Varias categorías unidas en una sola línea (dia_news()->categories, inc/helpers.php) nunca
	   deben partirse a 2 líneas — mismo patrón que .card-tag__label en home-hero.css: el label
	   necesita SU PROPIO elemento con min-width:0 (flex item) para que el ellipsis tenga algo que
	   recortar; puesto directo en .news-tag (flex container) no funciona. text-overflow:ellipsis
	   sigue funcionando aunque el contenido sean VARIOS <a> (uno por categoría, ver
	   .news-tag__link) en vez de un solo nodo de texto — recorta la LÍNEA completa, no un elemento
	   puntual. */
	.news-tag__label {
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.news-tag__link { color: inherit; text-decoration: none; }
	.news-tag__link:hover { text-decoration: underline; }

	.news-track {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 48px 30px;
	}
	.news-track .news-card { min-height: 406px; }
	/* Fila asimétrica (índice 2, ver news-results.php) SIN imagen en el 2do post: no arma la card
	   ancha y cae a 2 cards normales — pero el track sigue siendo grid de 3 columnas, así que
	   quedaba un hueco vacío al final. news-results.php agrega este modificador solo en ese caso
	   para repartir las 2 cards en 2 columnas parejas, sin 3ra columna fantasma. */
	.news-track--pair { grid-template-columns: repeat(2, 1fr); }

	/* ---- Card "plana" con imagen (Figma 2522:4151) — layout normal del grid para posts CON
	   imagen destacada: imagen arriba, categoría(s) + título (3 líneas) + tiempo/fecha abajo, sin
	   fondo ni borde propio (la separación viene del gap de .news-track). Reusa .news-card y
	   .news-card__media/__title/__title-link de home-news.css (bare selectors, sin scoping a
	   .news-card--flat — mismo H3 News 20/28 SemiBold + stretched-link ya construidos para la card
	   "flat" del home) — solo hace falta el hover de zoom (scoped ahí a --flat) y el layout del
	   contenido, que sí es nuevo. Título recortado a 3 líneas (no 2, a diferencia del home) porque
	   con el alto de 406px pedido por el diseñador ya cabe la 3ra línea sin desbalancear la card. */
	/* overflow:visible: .news-card (base) trae overflow:hidden para --featured/--wide, donde el
	   contenido SÍ tiene padding:32px propio que lo aleja del arco de la esquina redondeada. Acá
	   .news-card__content solo tiene padding-top (línea de abajo) — sin relleno lateral/inferior,
	   así que el ícono de "reading time" queda pegado al borde y el overflow:hidden heredado se lo
	   recorta contra la esquina redondeada (bug real reportado 2026-07-12, con captura). --plain no
	   tiene fondo/borde propio (comentario arriba) que justifique el recorte del padre — la imagen
	   ya redondea sus propias 4 esquinas con su propio border-radius+overflow:hidden (ver
	   .news-card--plain .news-card__media abajo), así que no hace falta el del padre acá. */
	.news-card--plain { overflow: visible; }
	.news-card--plain .news-card__title { -webkit-line-clamp: 3; line-clamp: 3; }
	/* .news-card__media (home-news.css) solo hereda esquinas redondeadas donde toca el borde de
	   .news-card (arriba, ver overflow:hidden ahí) — acá NO hay fondo/borde propio en el resto de
	   la card (a diferencia de .news-card--flat en el home), así que las esquinas de ABAJO de la
	   imagen quedaban cuadradas: nada más se ve del "redondeo" del padre porque no hay relleno que
	   lo muestre. Redondeo propio en las 4 esquinas de la imagen misma. */
	.news-card--plain .news-card__media {
		border-radius: 12px;
		overflow: hidden;
	}
	.news-card--plain:hover .news-card__media img { transform: scale(1.06); }
	.news-card--plain .news-card__content {
		padding-top: 24px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.news-card--plain:hover .news-card__title { color: var(--dia-color-text-secondary, #767778); }

	/* ---- Card sin imagen (fallback, Figma 2523:4464) — también la mitad "texto" de
	   .news-card-wide (fila asimétrica de abajo), de ahí que .news-card__content/__circle-btn/
	   __title--lg NO estén anidados bajo .news-card--content-only: se comparten entre ambos
	   contextos (bare selectors). ---- */
	.news-card--content-only {
		justify-content: space-between;
		gap: 2rem;
		padding: 32px;
		background: #fdfdfd;
		border: 1px solid #d0d1d3;
	}
	.news-card__content {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.news-card__title--lg {
		margin: 0;
		font-family: var(--font-serif);
		font-stretch: 75%;
		font-weight: 500;
		font-size: 28px;
		line-height: 1.3;
		color: #111;
	}
	.news-card--content-only .news-card__title-link,
	.news-card-wide .news-card__title-link { text-decoration: none; }
	.news-card--content-only .news-card__title-link:hover,
	.news-card-wide .news-card__title-link:hover { color: var(--dia-color-text-secondary, #767778); }
	/* position:relative + overflow:hidden: ancla y recorta el swap de íconos (mismo patrón que
	   .news-card__cta en home-news.css — reusa sus clases .news-card__cta-icon/--a/--b, solo
	   redefine el estado .is-active porque ahí está scoped a .news-card__cta, no a esta clase). El
	   toggle de .is-active en hover lo agrega home-news.js (reusado en esta página, ver
	   inc/enqueue.php). */
	.news-card__circle-btn {
		position: relative;
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid #cacaca;
		color: var(--dia-color-text-primary, #121212);
		text-decoration: none;
	}
	.news-card__circle-btn svg { width: 34px; height: 34px; }
	.news-card__circle-btn.is-active .news-card__cta-icon--a { transform: translate(140%, -140%); }
	.news-card__circle-btn.is-active .news-card__cta-icon--b { transform: translate(0, 0); }

	/* ---- Fila asimétrica (Figma "Frame169"/2523:4465, 3ra fila del grid): 1 card normal + 1 card
	   "ancha" — UN solo post en 2 columnas SIN gap interno ("todo pegado"): su imagen a la
	   izquierda, su texto a la derecha (mismo contenido/botón circular que .news-card--content-
	   only, pero compartiendo el borde/fondo de todo el bloque en vez de tener el suyo propio). ---- */
	.news-card-wide {
		position: relative; /* ancla el ::after de .news-card__title-link — sin esto el stretched-
			link no tiene ancestro posicionado y se estira contra TODA la página, no solo la card. */
		grid-column: span 2;
		display: flex;
		border-radius: 12px;
		overflow: hidden;
		background: #f5f5f1;
		border: 1px solid #d0d1d3;
	}
	.news-card-wide__media {
		position: relative; /* ancla .news-card__glass (blur+ruido), pedido explícito del usuario
			para que esta imagen no se vea "plana" comparada con el resto de cards con foto */
		flex: 0 0 380px;
		display: block;
		/* El overflow:hidden de .news-card-wide (arriba) solo recorta contra el borde DE TODA la
		   card, no entre sus 2 mitades (flex items) — sin esto, el scale(1.06) del hover se salía
		   de la columna de imagen y se montaba sobre el texto de al lado. */
		overflow: hidden;
	}
	.news-card-wide__media img {
		width: 100%; height: 100%; object-fit: cover; display: block;
		/* Mismo timing/patrón de zoom que .news-card__media img (home-news.css) y
		   .news-main-article__media img (news.css) — faltaba acá, pedido explícito del usuario. */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	}
	.news-card-wide:hover .news-card-wide__media img { transform: scale(1.06); }
	.news-card-wide__content {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 2rem;
		padding: 32px;
	}

	/* Mobile (<48rem, ver media query al final): las 2 mitades lado a lado no entran en 1
	   columna, así que se ocultan y se muestra esto en su lugar — MISMO tratamiento que
	   .news-card--featured (imagen de fondo + glass + texto encima), reusando su markup/clases de
	   home-news.css tal cual (más confiable que reacomodar el layout de 2 mitades vía CSS). Oculto
	   por default; el media query lo activa. */
	.news-card-wide__mobile { display: none; }

	/* ---- Paginación (Figma "Pagination-Card" 3086:12880) — mismo patrón que
	   .resource-pagination (archive-resource.css), extendido acá: ventana de ancho fijo
	   desktop/tablet + prev/next siempre visibles (disabled) + texto plano en mobile. ---- */
	/* padding-block-start: 2rem (NO 5rem como .resource-pagination/.project-pagination) — CORREGIDO
	   2026-07-08: a diferencia de Resources/Projects (paginación como sibling aparte del grid, sin
	   gap de por medio), acá .news-pagination es hijo DIRECTO de .news-grid (flex column con
	   gap:3rem, ver regla de arriba) — ese gap de 48px YA se suma automáticamente antes de
	   .news-pagination sea cual sea su padding-top propio. Con 5rem (80px) propios + 48px del gap
	   el total daba 128px, no los 80px del Figma (mismo valor exacto que Resources/Projects). Fix:
	   2rem (32px) propios + 48px del gap = 80px total. padding-block-end (7.5rem/120px) NO se toca —
	   el gap no aplica DESPUÉS del último hijo, así que el valor de abajo no se compone con nada. */
	.news-pagination {
		padding-block: 2rem 7.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}
	.news-pagination__numbers,
	.news-pagination__numbers-compact { display: flex; align-items: center; gap: 12px; }
	.news-pagination__numbers-compact { display: none; }
	.news-page-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border-radius: 4px;
		border: 1px solid var(--dia-color-text-primary, #121212);
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	/* "…" no es un botón clickeable — sin borde propio, mismo criterio que ya no tiene hover. */
	.news-page-btn--ellipsis { border: 0; }
	/* Hover (pedido explícito de David, mismo comportamiento en TODOS los botones de paginación
	   del sitio: news/resources/etc.) — no aplica sobre el activo (aria-current, tiene su propio
	   estado fijo abajo) ni sobre --ellipsis ("…"): no es un botón clickeable, no debe tener hover. */
	.news-page-btn:not([aria-current="page"]):not(.news-page-btn--ellipsis):hover,
	.news-page-next:not(:disabled):hover,
	.news-page-prev:not(:disabled):hover {
		border: 1px solid #a7b7ca;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}
	/* Activo: mismo fondo/borde que el hover, SIN el box-shadow (pedido explícito). */
	.news-page-btn[aria-current="page"] {
		background: var(--dia-btn-gray-gradient);
		border: 1px solid #a7b7ca;
	}
	.news-page-btn--ellipsis { color: var(--dia-color-text-secondary, #767778); }
	.news-page-next,
	.news-page-prev {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		/* 16px 24px (no 17px 24px): compensa la altura para que quede igual a los .news-page-btn de
		   54px (16*2 + 20px de line-height + 2px de border = 54px). */
		padding: 16px 24px;
		border-radius: 4px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}
	.news-page-next svg,
	.news-page-prev svg { width: 16px; height: 16px; }
	/* No hace falta margin-right en .news-page-prev: .news-pagination ya es flex con gap:12px
	   entre TODOS sus hijos directos (prev, números, next) — un margin extra acá sumaría 24px en
	   vez de 12px solo entre prev y números, desparejo contra el resto de los gaps. */
	/* No existe un ícono 'chevron-left' propio (dia_icon(), inc/helpers.php) — mismo patrón que
	   .hero-news__nav--prev (home-hero.css): se reusa 'chevron-right' rotado 180°. */
	.news-page-prev__icon { display: inline-flex; transform: rotate(180deg); }
	/* Disabled (mobile Y desktop/tablet, pedido explícito: prev/next SIEMPRE visibles, incluso sin
	   página a donde ir — ver pagination-news.php, ahí llevan el atributo `disabled` real de HTML,
	   sin hx-get, en vez de omitir el botón). */
	.news-page-next:disabled,
	.news-page-prev:disabled {
		opacity: .35;
		cursor: not-allowed;
	}
	/* .news-pagination__mobile: bloque separado (duplica prev/next/números) SOLO para <48rem —
	   oculto por default, el media query de abajo lo activa y oculta el bloque desktop en su lugar. */
	.news-pagination__mobile { display: none; }

	/* .news-card-wide: layout de 2 mitades → mismo tratamiento que .news-card--featured, extendido
	   a TODO el rango <64rem (no solo <48rem, pedido explícito del usuario 2026-07-07: hasta 1023px
	   debe verse igual que en mobile). .news-card-wide__mobile YA lleva las clases .news-card.news-
	   card--featured (ver card-news-wide.php), así que hereda de home-news.css todo lo necesario
	   (flex column + justify-content:flex-end es lo que empuja categoría/título/hora al fondo de la
	   imagen — NO es position:absolute — así que alcanza con destrabar el display:none de acá.
	   Values propios (position/padding/radius/etc.) romperían esa herencia en vez de complementarla.
	   grid-column:span 1 es NECESARIO acá: sin resetear el span:2 de desktop, esta card ocupaba 2
	   columnas en el grid de 1 (mobile) o 2 (tablet) columnas de abajo — el navegador respondía
	   creando una columna implícita extra auto-ajustada al contenido, dejando la card con un ancho
	   distinto al resto en vez de fluir como una tarjeta normal (bug real reportado). */
	@media (width < 64rem) {
		.news-card-wide { display: block; background: none; border: 0; grid-column: span 1; }
		.news-card-wide__media,
		.news-card-wide__content { display: none; }
		.news-card-wide__mobile { display: flex; }
	}

	/* .news-card-wide__media: de 1024 a 1279px (64rem–80rem) la imagen pasa de 380px fijos a 50%
	   del ancho de la card — pedido explícito del usuario 2026-07-07. De 1280px (80rem) en adelante
	   NO se toca: se queda con los 380px fijos de la regla base de arriba (.news-card-wide__content
	   ya es flex:1 1 auto, así que solo hace falta ajustar el flex-basis de la imagen para que la
	   mitad de texto ocupe el resto). */
	@media (64rem <= width < 80rem) {
		.news-card-wide__media { flex: 0 0 50%; }
		/* Título más chico en este rango puntual: mismo tamaño/interlineado que .news-card__title
		   de las cards normales (20/28, ver home-news.css) en vez de los 28px/1.3 heredados de
		   .news-card__title--lg (h3 padre) — pedido explícito del usuario 2026-07-07. Se pisa en el
		   link, no en el h3, para no tocar otros contextos que comparten esa misma clase --lg. */
		.news-card-wide .news-card__title-link { font-size: 20px; line-height: 28px; }
	}

	/* Tablet (48rem–64rem): cada .news-track se arma pensando en 3 columnas — forzarlo a 2
	   columnas COMO GRID PROPIO deja "huérfanos" (2 cards arriba + 1 sola abajo, con un hueco al
	   lado) fila por fila, en vez de fluir parejo. Se aplana: .news-grid pasa a ser el grid real
	   de 2 columnas y .news-track se vuelve transparente (display:contents, no genera su propia
	   fila) — así TODAS las cards fluyen continuas sin importar de qué fila venían originalmente.
	   Bug real reportado por el usuario. */
	@media (48rem <= width < 64rem) {
		.news-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 48px 30px;
		}
		.news-main-article,
		.news-pagination { grid-column: 1 / -1; }
		.news-track { display: contents; }

		/* Paginación (mismo bug ya resuelto en .resource-pagination, archive-resource.css: en 768px
		   la ventana fija de 7 casillas de .news-pagination__numbers no cabe junto a
		   "previous"/"next" con texto — a partir de 1024px sí entra bien). En este rango puntual
		   (48-64rem) se usa una ventana más angosta (mismo algoritmo, siblingCount=0 en vez de 1 —
		   hasta 4 números reales como máximo, ver $dia_tablet_items en pagination-news.php). */
		.news-pagination__numbers { display: none; }
		.news-pagination__numbers-compact { display: flex; }
	}
	@media (width < 48rem) {
		/* Separación de 32px entre cards en mobile (pedido explícito 2026-07-10) — se pisa el
		   gap:3rem (48px) de .news-grid (separa .news-main-article/.news-track/.news-pagination
		   entre sí) y el gap:48px 30px de .news-track (base, entre cards de la misma fila) para
		   que TODA la columna de cards quede a 32px pareja, no una mezcla de 48/32. min-height
		   de .news-card (406px, regla base) se resetea: con las cards apiladas a ancho completo
		   ese alto fijo dejaba huecos que rompían la separación de 32px pedida. */
		.news-grid { gap: 32px; }
		.news-track { grid-template-columns: 1fr; gap: 32px; }
		/* :not(.news-card--featured): esta regla solo debe resetear el min-height:406px de
		   .news-track .news-card (base, arriba) para las cards "plain"/"content-only" — la card
		   destacada tiene su PROPIO min-height:490px (home-news.css, .news-card--featured) del que
		   depende: es imagen de fondo position:absolute, sin alto propio del contenido, así que sin
		   ese min-height la card colapsaba a la altura del texto (bug real reportado, "la puso
		   chaparra"). Sin el :not() de acá, .news-track .news-card (0,2,0) pisaba igual el
		   min-height:490px de .news-card--featured (0,1,0) por especificidad más alta. */
		.news-track .news-card:not(.news-card--featured) { min-height: 0; }

		/* .news-main-article__title "vertical" como en .news-card--featured (pedido explícito
		   2026-07-10): el tag de categoría sale del bloque de texto y flota arriba-izq., separado
		   del tag de tiempo/fecha + título que se quedan agrupados abajo — mismo patrón que
		   .news-card--featured > .news-card__tag--over (home-news.css) vs. .news-card__featured-content.
		   NO hace falta display:contents en el wrapper (.news-main-article__tags) para esto — probado
		   y revertido: rompía en Safari/iOS (bug real conocido de display:contents + flex-wrap, el tag
		   se salía del overlay y renderizaba como texto suelto arriba de la card). position:absolute
		   ya busca el ancestro POSICIONADO más cercano sin importar el wrapper de en medio, mientras
		   ese wrapper (.news-main-article__tags) no tenga `position` propio (no la tiene) — el
		   containing block sigue siendo .news-main-article__tags-title (position:absolute) igual.
		   El tag de categoría sale del flujo flex de .tags (position:absolute) y el de tiempo/fecha
		   queda solo ahí, fluyendo normal dentro del flex-column de .tags-title, arriba del título.
		   top/left explícitos en vez de heredar el padding (mismo motivo que .news-card__tag--over:
		   el padding-box de un ancestro position:absolute NO incluye su propio padding como origen de
		   coordenadas). */
		.news-main-article__tags > a.news-tag {
			position: absolute;
			top: clamp(1.5rem, 4vw, 3rem);
			left: clamp(1.5rem, 4vw, 3rem);
		}
		/* La card en sí es "apaisada" en TODAS las resoluciones por el aspect-ratio:1200/750 (regla
		   base, arriba) — pedido explícito 2026-07-10: en mobile debe verse vertical, como
		   .news-card--featured de la fila de abajo (esa no tiene aspect-ratio fijo, crece según su
		   min-height:490px + contenido). Acá sí se necesita un aspect-ratio propio (a diferencia de
		   la featured, .news-main-article usa capas position:absolute que necesitan un alto real del
		   que partir) — 3/4 vertical en vez de invertir el mismo 1200/750 (eso daría una proporción
		   MUY alta/angosta, 0.625, no lo pedido). */
		.news-main-article {
			aspect-ratio: 3 / 4;
			/* margin-bottom:3rem (regla base) queda redundante en mobile: el gap:32px de .news-grid
			   (ya pisado arriba en este mismo breakpoint) alcanza solo para separar del siguiente
			   .news-track — sumaba 48px extra encima del gap, desparejo contra la separación de
			   32px pedida entre el resto de las cards. */
			margin-bottom: 0;
		}
		.news-filters__row { flex-direction: column; align-items: stretch; }
		.news-header__title { letter-spacing: -1px; }

		/* Pills → dropdown (bug real: la fila de pills no cabe en un viewport angosto y envuelve
		   en un stack disparejo). Con .news-filters__row en columna (arriba) categoría y año quedan
		   apilados, los dos a ancho completo (el año pasa de 120px fijo a 100%, ver
		   --year más abajo). */
		.news-filters__pills { display: none; }
		.news-filter-dropdown--category { display: block; }
		.news-filter-dropdown--year { width: 100%; }

		/* Paginación mobile — mismo patrón final que .resource-pagination__mobile
		   (archive-resource.css): prev/next son los ÚNICOS botones acá (disabled real de HTML
		   cuando no aplican, nunca omitidos); el resto es solo informativo — texto plano
		   "actual / total" (.news-pagination__mobile-status, ver pagination-news.php), no un botón.
		   Bloque de markup propio (.news-pagination__mobile), no el de desktop con piezas ocultas
		   por CSS. */
		.news-pagination__numbers,
		.news-page-prev--desktop,
		.news-page-next--desktop { display: none; }
		/* La fila ocupa todo el ancho, "<" pegado a la izquierda, ">" pegado a la derecha
		   (space-between, sin gap fijo) y el texto centrado entre medio (flex:1 + text-align:
		   center en .news-pagination__mobile-status abajo, no un simple gap). */
		.news-pagination__mobile {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}
		/* padding-block-start: 16px (NO 0) — bug real encontrado 2026-07-13: el gap:3rem de
		   .news-grid SÍ se sobreescribe a 32px en este breakpoint (arriba, ver comentario de "32px
		   entre cards"), así que con 0 propios el total antes de .news-pagination quedaba en 32px,
		   no en 48px como .resource-pagination/.project-pagination en este mismo rango (3rem 4rem
		   ahí, SIN gap de por medio que lo sume) — inconsistencia visual real confirmada contra
		   Recursos a 740px de ancho. 16px propios + 32px del gap = 48px total, ahora sí igual. */
		.news-pagination {
			gap: 12px;
			padding-block: 16px 4rem;
		}
		.news-page-nav__label { display: none; }
		/* height explícito (antes solo padding): sin esto el botón quedaba con altura variable
		   según el ícono — para que quede cuadrado. */
		.news-page-next,
		.news-page-prev { height: 40px; padding-inline: 11px; padding-block: 0; }
		/* Misma tipografía que los botones de número en tablet/desktop (.news-page-btn, regla
		   base), no un tamaño propio inventado para mobile. */
		.news-pagination__mobile-status {
			flex: 1;
			text-align: center;
			font-family: var(--font-sans);
			font-weight: 700;
			font-size: 13px;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: var(--dia-color-text-primary, #121212);
		}
	}
}