/* ============================================================================
   Noticias — propuesta "Revista", aplicada al sitio completo.

   Página impresa, no interfaz: blanco puro, display serif grande, mucho aire y
   texto centrado en las cabeceras. Sin modo oscuro a propósito — el papel es
   blanco a cualquier hora, y el contraste alto es justamente lo que le faltaba
   a la versión anterior.

   Contraste medido contra el fondo: cuerpo 13:1, metadatos 5,6:1.
   ========================================================================== */

:root{
  color-scheme:light;
  --fondo:#ffffff; --papel:#ffffff; --tinta:#100f0d; --tinta-media:#33302a;
  --tinta-suave:#6a6357; --linea:#e4ded1; --linea-fina:#efeae0;
  --ia:#8c2f1f; --mercados:#14513f; --semana:#7a4b12;
  --link:#8c2f1f; --acento-base:#8c2f1f;
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --texto:'Newsreader',Georgia,'Times New Roman',serif;
  --ancho:40rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--tinta); font-family:var(--texto);
  font-size:19px; line-height:1.7; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Medio peso más que el de lectura normal: una serif fina se diluye en pantalla. */
.brief p,section.secundario li,section.radar li,.tarjeta{font-weight:450}
[hidden]{display:none !important}

/* --- barra superior ------------------------------------------------------ */
.barra{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linea);
}
.barra > div{
  max-width:var(--ancho); margin:0 auto; padding:13px 24px;
  display:flex; gap:16px; align-items:baseline;
}
.marca{
  font-family:var(--disp); font-size:21px; font-weight:600; letter-spacing:-.02em;
  color:var(--tinta); text-decoration:none;
}
.barra nav{margin-left:auto; display:flex; gap:16px; align-items:baseline}
.barra nav a{
  color:var(--tinta-suave); text-decoration:none;
  font-family:var(--texto); font-size:15px; font-style:italic;
}
.barra nav a:hover{color:var(--tinta)}
.barra nav a.activo{color:var(--tinta)}
.barra nav a.salida{
  border-left:1px solid var(--linea); padding-left:16px; font-style:normal;
}
#progreso{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--acento-base); z-index:30; transition:width .1s linear;
}

main{max-width:var(--ancho); margin:0 auto; padding:56px 24px 90px}

/* --- cabecera de la edición ---------------------------------------------- */
.cabecera{text-align:center; margin-bottom:44px}
.kicker{
  font-family:var(--texto); font-style:italic; font-size:15px; color:var(--tinta-suave);
  margin:0 0 12px; display:flex; gap:10px; justify-content:center; align-items:center;
}
.kicker .sep{width:3px; height:3px; border-radius:50%; background:var(--tinta-suave)}
h1{
  font-family:var(--disp); font-size:47px; line-height:1.02; letter-spacing:-.03em;
  font-weight:600; margin:0;
}

/* --- pestañas ------------------------------------------------------------ */
/* Sin JavaScript las dos secciones quedan visibles y esto se lee como un índice.
   El script las convierte en pestañas al cargar. */
.saltos{
  display:flex; gap:0; margin:30px 0 0; justify-content:center;
  border-bottom:1px solid var(--linea);
}
.saltos a{
  font-family:var(--texto); font-size:16px; text-decoration:none;
  color:var(--tinta-suave); padding:9px 20px 11px; position:relative;
  display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap;
}
.saltos a .min{font-style:italic; font-size:13.5px; opacity:.85}
.saltos a .punto{display:none}
.saltos a:hover{color:var(--tinta)}
.saltos a.activa{color:var(--acento); font-weight:500}
.saltos a.activa::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--acento);
}
.saltos a[data-tab="ia"]{--acento:var(--ia)}
.saltos a[data-tab="mercados"]{--acento:var(--mercados)}
.saltos a[data-tab="semana"]{--acento:var(--semana)}

/* --- un brief ------------------------------------------------------------ */
.brief{margin:0; padding:44px 0 8px; scroll-margin-top:70px}
.brief[data-tipo="ia"]{--acento:var(--ia)}
.brief[data-tipo="mercados"]{--acento:var(--mercados)}
.brief[data-tipo="semana"]{--acento:var(--semana)}
/* Solo cuando las dos están visibles —es decir, cuando el script no corrió—
   hace falta una línea que las separe. Con pestañas dibujaba un filo suelto
   debajo de la barra. */
.brief:not([hidden]) + .brief:not([hidden]){border-top:1px solid var(--linea)}

.brief-cab{margin:0 0 8px}
.rotulo{display:flex; gap:10px; align-items:baseline; justify-content:center; margin-bottom:14px}
.rotulo .punto{display:none}
.rotulo .nombre{
  color:var(--acento); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
}
.rotulo .lectura{color:var(--tinta-suave); font-size:12px; letter-spacing:.16em; text-transform:uppercase}
.rotulo .lectura::before{content:"· "}
.titular{
  font-family:var(--disp); font-size:33px; line-height:1.14; letter-spacing:-.025em;
  font-weight:600; margin:0; text-align:center;
}

section{margin:44px 0 0}
section > h2{
  font-family:var(--texto); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-suave); margin:0 0 18px; text-align:center; font-weight:400;
}

section.lead{border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); padding:26px 0}
section.lead > h2{color:var(--acento)}
section.lead ul{margin:0; padding:0; list-style:none}
section.lead li{
  margin:0; padding:11px 0; font-size:18px; line-height:1.55;
  color:var(--tinta); text-align:center; font-style:italic;
}

section.principal h3{
  font-family:var(--disp); font-size:26px; line-height:1.2; letter-spacing:-.02em;
  font-weight:600; margin:44px 0 14px;
}
section.principal h3:first-of-type{margin-top:6px}
/* Capitular en la entrada de la primera nota. */
section.principal h3:first-of-type + p::first-letter{
  float:left; font-family:var(--disp); font-size:58px; line-height:.82;
  padding:6px 10px 0 0; color:var(--acento);
}
section.principal p{margin:14px 0 0; color:var(--tinta-media)}
section.principal p > strong:first-child{
  font-style:italic; font-weight:400; color:var(--tinta-suave);
  text-transform:none; letter-spacing:0;
}

section.secundario ul,section.radar ul{margin:0; padding:0; list-style:none}
section.secundario li,section.radar li{
  padding:14px 0; border-top:1px solid var(--linea); color:var(--tinta-media); font-size:18px;
}
section.secundario li:first-child,section.radar li:first-child{border-top:0}

p{margin:14px 0}
ul,ol{padding-left:22px}
li{margin:6px 0}
a{color:var(--link)}
a:hover{text-decoration:none}
strong{font-weight:600}

/* --- tabla de precios ---------------------------------------------------- */
.tabla{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0 0}
table{border-collapse:collapse; width:100%; font-size:16px; min-width:19rem; font-family:var(--texto)}
th,td{border-bottom:1px solid var(--linea); padding:11px 12px 11px 0; text-align:left}
th{color:var(--tinta-suave); font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase}
td:first-child{font-weight:500}
td:nth-child(n+2){text-align:right; font-variant-numeric:tabular-nums; color:var(--tinta-media)}

/* --- navegación entre días ----------------------------------------------- */
.paso{display:flex; gap:14px; margin:50px 0 0; padding-top:26px; border-top:1px solid var(--linea)}
.paso a{flex:1; text-decoration:none; color:inherit}
.paso a:hover .cual{color:var(--acento-base)}
.paso .dir{
  display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:4px;
}
.paso .cual{font-family:var(--disp); font-size:20px; font-weight:600}
.paso .siguiente{text-align:right}

/* --- archivo ------------------------------------------------------------- */
.mes{
  font-family:var(--texto); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tinta-suave); font-weight:400; margin:44px 0 6px; text-align:center;
}
.mes:first-of-type{margin-top:8px}
.tarjeta{
  display:block; text-decoration:none; color:inherit;
  padding:24px 0; border-top:1px solid var(--linea);
}
.tarjeta:first-of-type{border-top:0}
.tarjeta:hover .tt{color:var(--acento-base)}
.tarjeta .cuando{
  font-family:var(--texto); font-style:italic; font-size:15px;
  color:var(--tinta-suave); margin-bottom:10px;
}
.tarjeta .cuando::first-letter{text-transform:uppercase}
.linea-brief{display:flex; gap:12px; margin:0 0 12px; align-items:baseline}
.linea-brief:last-child{margin-bottom:0}
.linea-brief .pt{width:6px; height:6px; border-radius:50%; flex:none; margin-top:9px}
.linea-brief[data-tipo="ia"] .pt{background:var(--ia)}
.linea-brief[data-tipo="mercados"] .pt{background:var(--mercados)}
.linea-brief[data-tipo="semana"] .pt{background:var(--semana)}
.tt{font-family:var(--disp); font-size:20px; line-height:1.25; font-weight:600}

.pie{
  max-width:var(--ancho); margin:0 auto; padding:0 24px 60px;
  color:var(--tinta-suave); font-size:14px; font-style:italic; text-align:center;
}
.pie a{color:var(--tinta-suave)}
.vacio{
  color:var(--tinta-suave); padding:56px 0; text-align:center;
  font-family:var(--disp); font-size:21px;
}

@media (max-width:520px){
  body{font-size:18px}
  main{padding:40px 20px 70px}
  .barra > div,.pie{padding-left:20px; padding-right:20px}
  .barra nav{gap:14px}
  .barra nav a.salida .larga{display:none}
  .barra nav a.salida{padding-left:14px}
  h1{font-size:36px}
  .titular{font-size:27px}
  section.principal h3{font-size:23px}
  section.principal h3:first-of-type + p::first-letter{font-size:50px}
  .saltos a{padding:9px 14px 11px; font-size:15px}
  .paso{flex-direction:column; gap:18px}
  .paso .siguiente{text-align:left}
}