/* ============================================================================
   RESUMiDO · feed
   Móvil: escenario fijo arriba con la imagen, columna de lectura abajo que se
   desplaza de corrido. La imagen no acompaña el desplazamiento; cambia con un
   fundido cuando cambia el bloque que se está leyendo.
   Desde 768 px todo se convierte en una grilla común.
   ========================================================================== */

:root{
	/* Los colores los inyecta PHP según la paleta elegida en
	   resumido_config(). Estos son el respaldo por si el estilo en línea no
	   llegara a cargar. */
	--ink:      #0B0E14;
	--ink-2:    #141922;
	--ink-3:    #1E2531;
	--papel:    #FBFAF7;   /* la columna de lectura */
	--fondo:    #1A1E26;   /* tono en el que se funde la foto */
	--tinta:    #14171C;
	--tinta-2:  #3C444F;
	--bone:     #EDEFF2;
	--muted:    #7C8798;
	--borde:    rgba(255,255,255,.07);
	--sombra:   0 -6px 34px rgba(0,0,0,.38);
	--velo-cab: rgba(11,14,20,.55);
	--grano:    .055;
	--ice:      #6FD3E5;
	--cat:      #E01B24;

	/* --marca, --display, --body y --peso-titular los define PHP según el
	   juego tipográfico elegido en resumido_config(). Estos son el respaldo
	   por si el estilo en línea no llegara a cargar. */
	--marca:    Georgia, serif;
	--display:  Georgia, serif;
	--body:     system-ui, sans-serif;
	--meta:     'IBM Plex Mono', ui-monospace, monospace;
	--peso-titular: 700;

	--cabecera: 54px;
	--escena:   40dvh;     /* alto del escenario */
	--columna:  620px;     /* ancho máximo de lectura */
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
	background:var(--fondo);
	color:var(--bone);
	font-family:var(--body);
	-webkit-font-smoothing:antialiased;
	overscroll-behavior-y:none;
}

:focus-visible{ outline:2px solid var(--ice); outline-offset:3px; border-radius:2px; }

.visually-hidden{
	position:absolute!important;
	width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.saltar{
	position:absolute;left:-9999px;z-index:100;
	padding:12px 18px;background:var(--papel);color:var(--tinta);
	font-family:var(--meta);font-size:13px;
}
.saltar:focus{ left:12px;top:12px; }

/* ---------------------------------------------------------------- cabecera */

.cabecera{
	position:fixed;
	inset:0 0 auto 0;
	height:var(--cabecera);
	padding:0 18px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	z-index:50;
}

/**
 * Velo del encabezado.
 *
 * Va como pseudoelemento y no como fondo de la barra para poder extenderlo más
 * abajo que su altura: así el degradado se disuelve sin dejar un canto visible.
 *
 * Es necesario porque el logo va sobre la foto y las fotos no se eligen. En
 * monitoreo de medios entran escaneos de documentos, planillas y nieve — todo
 * fondo casi blanco, donde un logo blanco desaparece.
 */
.cabecera::before{
	content:'';
	position:absolute;
	inset:0 0 auto 0;
	height:132px;
	pointer-events:none;
	background:linear-gradient(to bottom,
		var(--velo-cab) 0%,
		color-mix(in srgb, var(--velo-cab) 62%, transparent) 38%,
		color-mix(in srgb, var(--velo-cab) 26%, transparent) 68%,
		transparent 100%);
}
.cabecera > *{ position:relative; z-index:1; }
.cabecera-acciones{ display:flex; gap:2px; }

.logo{
	font-family:var(--marca);
	font-weight:800;
	font-size:23px;
	letter-spacing:.01em;
	color:#fff;
	text-decoration:none;
	/* Dos sombras: una corta y opaca que perfila la letra sobre fondo claro,
	   y una larga y difusa que la despega del fondo. Una sola no alcanza. */
	text-shadow:
		0 1px 2px rgba(0,0,0,.55),
		0 2px 20px rgba(0,0,0,.45);
}
/* La i toma el color de la categoría en foco y lo cambia con una transición
   larga: a este cuerpo el punto solo mide unos 2 px, así que lo que se percibe
   es el cambio de la letra entera, no del punto. */
.logo i{
	font-style:italic;
	color:var(--cat);
	padding:0 .02em;
	transition:color .5s ease;
	text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* Logo cargado como imagen desde Apariencia → Personalizar */
.logo--img{ display:flex; align-items:center; }
.logo--img img{ height:30px; width:auto; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.logo--img .custom-logo-link{ display:block; line-height:0; }

.btn-icono{
	width:38px;height:38px;
	display:grid;place-items:center;
	background:none;border:0;padding:0;
	color:var(--bone);cursor:pointer;border-radius:50%;
}
.btn-icono:hover{ background:rgba(255,255,255,.14); }
.btn-icono svg{ width:19px;height:19px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.55)); }

/* Se muestra el icono del modo al que se va a cambiar, no el actual: es lo
   que la gente espera de un interruptor. */
.js-paleta .icono-sol{ display:none; }
.js-paleta .icono-luna{ display:block; }
:root[data-paleta="oscuro"] .js-paleta .icono-sol{ display:block; }
:root[data-paleta="oscuro"] .js-paleta .icono-luna{ display:none; }
@media (prefers-color-scheme: dark){
	:root:not([data-paleta]) .js-paleta .icono-sol{ display:block; }
	:root:not([data-paleta]) .js-paleta .icono-luna{ display:none; }
}

/* ------------------------------------------------------------------ paneles */

.panel{
	position:fixed;
	inset:var(--cabecera) 0 auto 0;
	z-index:49;
	padding:18px 18px 26px;
	background:var(--ink-2);
	border-bottom:1px solid var(--ink-3);
	max-height:70dvh;
	overflow-y:auto;
	overscroll-behavior:contain;
}
.panel[hidden]{ display:none; }

.busqueda{ display:flex;gap:8px; }
.busqueda input{
	flex:1;padding:12px 14px;
	background:var(--ink);border:1px solid var(--ink-3);border-radius:8px;
	color:var(--bone);font-family:var(--body);
	font-size:16px;   /* menos de 16 px hace que iOS haga zoom al enfocar */
}
.busqueda button{
	padding:12px 18px;background:var(--papel);color:var(--tinta);
	border:0;border-radius:8px;
	font-family:var(--meta);font-size:12px;
	text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
}

/* ============================================================================
   EL ESCENARIO · imagen fija arriba
   ========================================================================== */

.escenario{
	position:fixed;
	inset:0 0 auto 0;
	height:var(--escena);
	z-index:0;
	background:var(--fondo);
	overflow:hidden;
	/* Acá no se navega: el gesto vertical pertenece a la columna de lectura. */
	touch-action:pan-x;
}

.escenario-capas{ position:absolute; inset:0; }

/**
 * Dos capas que se alternan.
 *
 * La entrante arranca desenfocada y transparente, y se resuelve encima de la
 * saliente. Ese fundido es lo que hace que el cambio de noticia se sienta como
 * una transición y no como un salto.
 */
.capa{
	position:absolute; inset:0;
	background-size:cover;
	background-position:center 32%;
	opacity:0;
	transform:scale(1.06);
	filter:blur(10px);
	transition:opacity .42s ease, transform .6s cubic-bezier(.25,1,.5,1), filter .42s ease;
	will-change:opacity, transform, filter;
}
.capa.activa{
	opacity:1;
	transform:scale(1);
	filter:blur(0);
}
/* Sin foto usable: la capa se pinta con el color de la categoría. */
.capa.sin-foto{
	background-image:
		radial-gradient(120% 80% at 50% 6%,
			color-mix(in srgb, var(--cat) 58%, #000) 0%, transparent 62%),
		linear-gradient(160deg,
			color-mix(in srgb, var(--cat) 38%, #000) 0%, var(--fondo) 70%);
}

/**
 * Grano.
 *
 * Un degradado largo sobre tono oscuro produce bandas: el navegador sólo tiene
 * 256 valores por canal y el ojo distingue los escalones. Una textura muy fina
 * los rompe. Es ruido generado por SVG, así que no pesa nada y no hay archivo
 * que cargar.
 */
.escenario::before{
	content:'';
	position:absolute; inset:0;
	z-index:2;
	pointer-events:none;
	opacity:var(--grano);
	mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size:140px 140px;
}

/* La foto se funde en el fondo; la columna arranca justo debajo. */
.escenario::after{
	content:'';
	position:absolute; inset:auto 0 0 0;
	height:78%;
	background:linear-gradient(to bottom,
		transparent 0%,
		color-mix(in srgb, var(--fondo)  8%, transparent) 18%,
		color-mix(in srgb, var(--fondo) 22%, transparent) 34%,
		color-mix(in srgb, var(--fondo) 42%, transparent) 48%,
		color-mix(in srgb, var(--fondo) 64%, transparent) 62%,
		color-mix(in srgb, var(--fondo) 84%, transparent) 76%,
		color-mix(in srgb, var(--fondo) 95%, transparent) 88%,
		var(--fondo) 100%);
	pointer-events:none;
	z-index:1;
}

.escenario-credito{
	position:absolute;
	right:16px; top:calc(var(--cabecera) + 10px);
	z-index:3;
	max-width:55%;
	font-family:var(--meta);
	font-size:9.5px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:rgba(255,255,255,.9);
	background:rgba(11,14,20,.45);
	backdrop-filter:blur(6px);
	padding:4px 8px;
	border-radius:4px;
	text-align:right;
	line-height:1.3;
	opacity:0;
	transition:opacity .3s ease;
}
.escenario-credito:not(:empty){ opacity:1; }

.escenario-barra{
	position:absolute;
	left:0; right:0; bottom:12px;
	z-index:3;
	width:100%;
	max-width:calc(var(--columna) + 24px);
	margin:0 auto;
	padding:0 24px;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:12px;
	pointer-events:none;   /* la barra no bloquea el gesto sobre la imagen */
}
.escenario-barra > *{ pointer-events:auto; }

.barra-der{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:9px;
}

.etiqueta{
	font-family:var(--meta);
	font-size:clamp(10.5px, 2.6vw, 13px);
	font-weight:500;
	letter-spacing:.11em;
	text-transform:uppercase;
	padding:6px 12px;
	border-radius:999px;
	text-decoration:none;
	white-space:nowrap;
	color:#fff;
}
.etiqueta--fecha,
.etiqueta--cap{
	background:rgba(255,255,255,.14);
	backdrop-filter:blur(8px);
}
.etiqueta--fecha{ letter-spacing:.03em; padding:6px 10px; font-size:clamp(9.5px, 2.3vw, 11px); }
.etiqueta--cat{
	background:var(--cat);
	border-radius:5px;
	transition:background-color .42s ease;
}
.etiqueta[hidden]{ display:none; }

.riel-btn{
	width:clamp(40px, 10vw, 52px);
	height:clamp(40px, 10vw, 52px);
	display:grid; place-items:center;
	border:0; border-radius:50%;
	background:rgba(255,255,255,.14);
	backdrop-filter:blur(8px);
	color:#fff; cursor:pointer;
	flex:0 0 auto;
}
.riel-btn svg{ width:clamp(19px, 4.6vw, 24px); height:clamp(19px, 4.6vw, 24px); }
a.riel-btn{ text-decoration:none; }
.riel-btn[aria-pressed="true"]{ background:var(--cat); }
.riel-btn[aria-pressed="true"] svg{ fill:currentColor; }

/* ============================================================================
   LA COLUMNA DE LECTURA
   ========================================================================== */

.lector{
	position:fixed;
	/* Márgenes a los lados: la columna flota sobre el gris en vez de estar
	   pegada a los bordes de la pantalla. */
	inset:var(--escena) 24px 0 24px;
	z-index:1;
	background:var(--papel);
	color:var(--tinta);
	border-radius:22px 22px 0 0;
	/* El borde fino más la sombra son lo que define el canto de la tarjeta.
	   Sin ellos, sobre fondo claro la tarjeta se pierde contra el fondo. */
	border:1px solid var(--borde);
	border-bottom:0;
	box-shadow:var(--sombra);
	overflow-y:auto;
	overscroll-behavior:contain;
	scrollbar-width:none;
	padding:0 0 60dvh;   /* aire al final para que el último bloque pueda subir */
	/* El texto se detiene en el comienzo de cada noticia. Si un bloque llegara
	   a ser más alto que la columna, el navegador igual deja recorrerlo: la
	   norma prohíbe que el ajuste vuelva inalcanzable parte del contenido. */
	scroll-snap-type:y mandatory;
}
.lector::-webkit-scrollbar{ display:none; }

.bloque{
	width:100%;
	max-width:var(--columna);
	margin:0 auto;
	padding:26px 18px 0;
	scroll-snap-align:start;
	scroll-snap-stop:always;
	/* Cada nota ocupa la altura completa de la columna, así no asoma el
	   titular siguiente. El precio es espacio en blanco cuando el resumen es
	   corto; con 50-70 palabras el bloque queda bien servido. */
	min-height:calc(100dvh - var(--escena));
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
}

/* El bloque de texto ocupa todo el alto disponible para poder empujar la
   línea de fuentes al pie. */
.bloque-texto{
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	padding-bottom:26px;
}
.bloque-texto .fuentes{ margin-top:auto; }
.bloque:first-child{ padding-top:24px; }

/* En móvil la imagen del bloque no se muestra: la muestra el escenario. */
.bloque-media{ display:none; }
.media-enlace{ display:none; }

.titular{
	font-family:var(--display);
	font-weight:var(--peso-titular);
	font-size:clamp(21px, 5.6vw, 34px);
	line-height:1.15;
	letter-spacing:-.012em;
	margin:0 0 11px;
	text-wrap:balance;
	color:var(--tinta);
}

.resumen{
	font-size:clamp(15.5px, 4vw, 21px);
	line-height:1.5;
	color:var(--tinta-2);
	letter-spacing:-.003em;
}
.resumen p{ margin:0 0 .8em; }
.resumen p:last-child{ margin-bottom:0; }

.resumen--lista p{ position:relative; padding-left:18px; }
.resumen--lista p::before{
	content:'';
	position:absolute; left:0; top:.62em;
	width:6px; height:6px; border-radius:50%;
	background:var(--cat);
}

/**
 * La línea de fuentes cierra el bloque, anclada al pie.
 *
 * Como cada nota ocupa la columna entera, un resumen corto deja lugar libre.
 * Con las fuentes abajo, ese hueco queda ENTRE el texto y el pie, y se lee
 * como aire. Con las fuentes pegadas al resumen, el mismo hueco quedaba
 * después de todo y parecía una tarjeta cortada.
 */
.fuentes{
	margin:16px 0 0;
	padding:0;
	font-family:var(--meta);
	font-size:10px;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:#8A929C;
	line-height:1.4;
}


/* ------------------------------------------------------------------ aviso */

.bloque--aviso{
	padding:26px 20px;
	text-align:center;
	min-height:0;
	display:block;
}
.aviso-rotulo{
	display:block;
	font-family:var(--meta);
	font-size:9.5px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#9AA2AC;
	margin-bottom:12px;
}
.aviso-marco img,.aviso-marco iframe{ max-width:100%;height:auto;display:block;margin:0 auto; }

/* -------------------------------------------------- vacío, estado, páginas */

.bloque--vacio{ padding:40px 20px; text-align:center; min-height:0; display:block; }

.centinela{ height:1px; }

.feed-estado{
	margin:0;
	padding:26px 20px;
	text-align:center;
	font-family:var(--meta);
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#9AA2AC;
}
.feed-estado:empty{ display:none; }

.paginacion{ display:none; }

/* ============================================================================
   DESDE 768 px · grilla común
   El escenario desaparece y cada bloque recupera su propia imagen.
   ========================================================================== */

@media (min-width:768px){

	.escenario{ display:none; }

	.cabecera{
		background:var(--ink);
		border-bottom:1px solid var(--ink-3);
		padding:0 24px;
	}
	.logo{ font-size:24px;text-shadow:none; }
	.btn-icono svg{ filter:none; }
	.panel{ position:absolute; padding:24px 24px 32px; }

	body{ background:var(--ink); }

	.lector{
		position:static;
		inset:auto;
		scroll-snap-type:none;
		background:none;
		color:var(--bone);
		border-radius:0;
		box-shadow:none;
		overflow:visible;
		display:grid;
		grid-template-columns:repeat(2,1fr);
		gap:24px 20px;
		max-width:1240px;
		margin-inline:auto;
		padding:calc(var(--cabecera) + 28px) 24px 70px;
		align-items:start;
	}

	.bloque{
		max-width:none;
		margin:0;
		padding:0;
		min-height:0;
		display:block;
		scroll-snap-align:none;
		background:var(--papel);
		border:1px solid var(--borde);
		border-radius:16px;
		overflow:hidden;
		transition:transform .2s ease, box-shadow .2s ease;
	}
	.bloque:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.4); }
	.bloque:first-child{ padding-top:0; }

	.bloque-media{
		display:block;
		position:relative;
		height:186px;
		overflow:hidden;
		background:var(--fondo);
	}
	.bloque-media img{
		width:100%;height:100%;
		object-fit:cover;object-position:center 32%;
		display:block;
		transition:transform .5s cubic-bezier(.25,1,.5,1);
	}
	.bloque:hover .bloque-media img{ transform:scale(1.04); }

	.bloque--texto .bloque-media{
		background:
			radial-gradient(120% 90% at 50% 8%,
				color-mix(in srgb, var(--cat) 58%, #000) 0%, transparent 68%),
			linear-gradient(160deg,
				color-mix(in srgb, var(--cat) 38%, #000) 0%, var(--fondo) 72%);
	}
	.media-categoria{
		position:absolute; inset:0;
		display:grid; place-items:center;
		font-family:var(--display);
		font-weight:800;
		font-size:30px;
		text-transform:uppercase;
		letter-spacing:-.02em;
		color:rgba(255,255,255,.16);
		text-align:center;
		padding:0 18px;
	}

	.bloque-media .etiqueta--cat{
		position:absolute; left:12px; bottom:12px;
		font-size:9px; padding:4px 9px;
	}
	.bloque-media .etiqueta--fecha{
		position:absolute; right:12px; bottom:12px;
		font-size:9px; padding:4px 9px;
	}
	.media-enlace{
		position:absolute; right:12px; top:12px;
		width:34px; height:34px;
		display:grid; place-items:center;
		border-radius:50%;
		background:rgba(11,14,20,.5);
		backdrop-filter:blur(8px);
		color:#fff;
		opacity:0;
		transition:opacity .2s ease;
	}
	.media-enlace svg{ width:16px; height:16px; }
	.bloque:hover .media-enlace,
	.media-enlace:focus-visible{ opacity:1; }

	.bloque-texto{
		display:block;
		padding:16px 18px 18px;
	}
	.bloque-texto .fuentes{ margin-top:14px; }

	.titular{ font-size:19px;line-height:1.18;margin-bottom:9px; }

	.resumen{
		font-size:14px;
		line-height:1.5;
		display:-webkit-box;
		-webkit-line-clamp:4;
		-webkit-box-orient:vertical;
		overflow:hidden;
	}
	.resumen p{ margin:0; }
	.resumen p ~ p{ display:none; }

	.fuentes{ font-size:9px; margin-top:14px; }

	.bloque--aviso{
		grid-column:1 / -1;
		min-height:0;
		background:var(--ink);
		border:1px solid var(--ink-3);
		border-radius:16px;
		padding:24px;
	}
	.aviso-rotulo{ color:var(--muted); }

	.bloque--vacio{ grid-column:1 / -1; min-height:0; background:none; color:var(--bone); }
	.feed-estado,.centinela{ grid-column:1 / -1; color:var(--muted); }

	.paginacion{
		display:flex;
		grid-column:1 / -1;
		justify-content:center;
		align-items:center;
		flex-wrap:wrap;
		gap:6px;
		padding:26px 0 0;
	}
	.paginacion .page-numbers{
		min-width:38px;
		padding:9px 12px;
		border:1px solid var(--ink-3);
		border-radius:8px;
		font-family:var(--meta);
		font-size:12px;
		letter-spacing:.04em;
		color:var(--bone);
		text-decoration:none;
		text-align:center;
	}
	.paginacion .page-numbers:hover{ border-color:var(--cat); }
	.paginacion .page-numbers.current{
		background:var(--cat);
		border-color:var(--cat);
		color:#fff;
	}
	.paginacion .dots{ border:0; }
}

/* --------------------------------------------- escritorio: tres columnas */

@media (min-width:1024px){
	.cabecera{ padding:0 40px; }
	.logo{ font-size:26px; }
	.panel{ padding:24px 40px 32px; }

	.lector{
		grid-template-columns:repeat(3,1fr);
		gap:26px 22px;
		padding:calc(var(--cabecera) + 40px) 40px 90px;
	}

	.bloque-media{ height:190px; }
	.titular{ font-size:20px; }
}

/* -------------------------------------------------------------- respeto */

@media (prefers-reduced-motion:reduce){
	*{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
	.capa{ filter:none; transform:none; }
}

@media print{
	.cabecera,.panel,.escenario{ display:none; }
	.lector{ position:static; overflow:visible; background:#fff; color:#000; }
	.bloque{ page-break-inside:avoid; }
}