/* ============================================================================
   RESUMiDO · la nota
   Acá manda la legibilidad. Es la vista que indexa Google.
   ========================================================================== */

:root{
	--ink:      #0B0E14;
	--ink-2:    #141922;
	--ink-3:    #1E2531;
	--bone:     #EDEFF2;
	--muted:    #7C8798;
	--ice:      #6FD3E5;
	--cat:      #E01B24;

	--display:  'Bodoni Moda', Georgia, serif;
	--body:     'IBM Plex Sans', system-ui, sans-serif;
	--meta:     'IBM Plex Mono', ui-monospace, monospace;

	--cabecera: 56px;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
	margin:0;
	background:var(--ink);
	color:var(--bone);
	font-family:var(--body);
	-webkit-font-smoothing:antialiased;
}

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

.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(--bone); color:var(--ink); }
.saltar:focus{ left:12px; top:12px; }

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

.cabecera{
	position:sticky;
	top:0;
	height:var(--cabecera);
	padding:0 20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	z-index:50;
	background:var(--ink);
	border-bottom:1px solid var(--ink-3);
}
.logo{
	font-family:var(--display);
	font-weight:700;
	font-size:24px;
	letter-spacing:.01em;
	color:var(--bone);
	text-decoration:none;
}
.logo i{ font-style:italic; color:var(--cat); padding:0 .02em; }

.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:var(--ink-3); }
.btn-icono svg{ width:20px;height:20px; }

.panel{
	position:absolute;
	inset:var(--cabecera) 0 auto 0;
	z-index:49;
	padding:20px;
	background:var(--ink-2);
	border-bottom:1px solid var(--ink-3);
}
.panel[hidden]{ display:none; }
.panel-lista{ list-style:none;margin:0;padding:0;columns:2;column-gap:24px; }
.panel-lista li{ break-inside:avoid;margin:0 0 12px; }
.panel-lista a{
	color:var(--bone);text-decoration:none;
	font-family:var(--meta);font-size:13px;
	letter-spacing:.06em;text-transform:uppercase;
}
.busqueda{ display:flex;gap:8px; }
.busqueda input{
	flex:1;padding:12px 14px;
	background:var(--ink);border:1px solid var(--ink-3);border-radius:6px;
	color:var(--bone);font-size:16px;
}
.busqueda button{
	padding:12px 18px;background:var(--bone);color:var(--ink);
	border:0;border-radius:6px;font-family:var(--meta);
	font-size:12px;text-transform:uppercase;cursor:pointer;
}

/* -------------------------------------------------------------------- nota */

.nota{
	/* 68 caracteres por línea: el rango cómodo es 65-75. La plantilla vieja
	   llegaba a 130 por renglón, que es donde se pierde el hilo al volver. */
	max-width:68ch;
	margin-inline:auto;
	padding:44px 22px 90px;
}

.nota-cabecera{ margin-bottom:30px; }

.pastilla{
	display:inline-block;
	font-family:var(--meta);
	font-size:11px;font-weight:500;
	letter-spacing:.1em;text-transform:uppercase;
	background:var(--cat);color:#fff;
	padding:5px 10px;margin-bottom:18px;
	text-decoration:none;
}

.nota-titular{
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(31px, 5.6vw, 46px);
	line-height:1.13;
	letter-spacing:-.015em;
	margin:0 0 16px;
	text-wrap:balance;
}

.nota-fecha{
	font-family:var(--meta);
	font-size:11.5px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--muted);
	margin:0;
	display:flex;gap:14px;flex-wrap:wrap;
}
.nota-capitulo{ color:var(--ice); }

.nota-foto{ margin:0 0 32px; }
.nota-foto img{ width:100%;height:auto;display:block;border-radius:8px; }
.nota-foto figcaption{
	margin-top:8px;
	font-family:var(--meta);
	font-size:11px;
	letter-spacing:.05em;
	color:var(--muted);
}

/* Texto corrido: alineado a la izquierda, no justificado. La justificación
   abre huecos entre palabras y complica la lectura, sobre todo en móvil. */
.nota-cuerpo{
	font-size:18px;
	line-height:1.72;
	color:#DDE2E9;
	text-align:left;
	hyphens:none;
}
.nota-cuerpo p{ margin:0 0 1.3em; }
.nota-cuerpo a{ color:var(--ice); }
.nota-cuerpo h2,.nota-cuerpo h3{
	font-family:var(--display);
	font-weight:700;
	line-height:1.2;
	margin:1.8em 0 .6em;
}
.nota-cuerpo blockquote{
	margin:1.6em 0;
	padding-left:20px;
	border-left:3px solid var(--cat);
	color:var(--bone);
}
.nota-cuerpo img{ max-width:100%;height:auto;border-radius:6px; }

/* --------------------------------------------------------------------- pie */

.nota-pie{
	margin-top:48px;
	padding-top:26px;
	border-top:1px solid var(--ink-3);
}

.nota-fuentes{
	font-family:var(--meta);
	font-size:11.5px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
	margin:0 0 16px;
}
.fuentes-rotulo{ display:block;color:var(--ice);margin-bottom:5px; }

.nota-origen{ margin:0 0 30px; }
.nota-origen a{
	font-family:var(--meta);
	font-size:12px;
	letter-spacing:.05em;
	color:var(--bone);
	text-decoration:underline;
	text-underline-offset:4px;
}

.nota-relacionadas{
	margin:0 0 34px;
	padding:22px;
	background:var(--ink-2);
	border-radius:10px;
}
.nota-relacionadas h2{
	font-family:var(--meta);
	font-size:11px;font-weight:500;
	letter-spacing:.12em;text-transform:uppercase;
	color:var(--ice);
	margin:0 0 14px;
}
.nota-relacionadas ul{ list-style:none;margin:0;padding:0; }
.nota-relacionadas li{
	padding:10px 0;
	border-bottom:1px solid var(--ink-3);
	display:flex;justify-content:space-between;gap:16px;
}
.nota-relacionadas li:last-child{ border-bottom:0; }
.nota-relacionadas a{
	color:var(--bone);
	text-decoration:none;
	font-weight:500;
	line-height:1.35;
}
.nota-relacionadas a:hover{ text-decoration:underline;text-underline-offset:3px; }
.nota-relacionadas span{
	font-family:var(--meta);
	font-size:10.5px;
	color:var(--muted);
	white-space:nowrap;
}

.volver-feed{
	display:inline-block;
	font-family:var(--meta);
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:12px 20px;
	border-radius:999px;
	background:var(--bone);
	color:var(--ink);
	text-decoration:none;
}

@media (min-width:768px){
	.nota{ padding:60px 22px 110px; }
	.nota-cuerpo{ font-size:19px; }
}

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

@media print{
	.cabecera,.panel,.volver-feed,.nota-relacionadas{ display:none; }
	body{ background:#fff;color:#000; }
	.nota-cuerpo{ color:#000; }
}