/* ============================================================
   QIOSK — sistema visual
   Inter + Space Mono. Blanco y negro, sin más color.
   Todo lo de aquí sale de SISTEMA-VISUAL.md. No improvisar.
   ============================================================ */

:root{
  /* Blanco y negro. Sin color: la jerarquía la hacen el tamaño, el peso del
     negro y el aire. Un solo tono obliga a que la composición se sostenga sola. */
  --bg:#FFFFFF;
  --bg-alt:#F4F4F2;      /* franjas y bloques */
  --surface:#FFFFFF;
  --text:#0A0A0A;
  --text-2:#3D3D3D;
  --muted:#767676;       /* AA sobre blanco a partir de 0,72rem */
  --line:#E6E6E4;
  --accent:#0A0A0A;      /* el acento es el propio negro */
  --accent-soft:#F0F0EE;
  --on-accent:#FFFFFF;

  /* Nivel de relevancia 1-5, en grises hasta el negro */
  --n1:#DCDCDA; --n2:#BDBDBB; --n3:#8A8A88; --n4:#4A4A48; --n5:#0A0A0A;

  /* Espaciado */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px;

  --medida:620px;        /* columna de lectura */
  --medida-ancha:960px;  /* portada, listas, admin */
  --radio:3px;
}

/* El modo oscuro es el mismo sistema, invertido. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0A; --bg-alt:#161616; --surface:#121212;
    --text:#F5F5F3; --text-2:#C9C9C7; --muted:#8E8E8C;
    --line:#242424; --accent:#FFFFFF; --accent-soft:#1E1E1E;
    --on-accent:#0A0A0A;
    --n1:#2A2A2A; --n2:#454545; --n3:#7A7A7A; --n4:#B8B8B6; --n5:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0A; --bg-alt:#161616; --surface:#121212;
  --text:#F5F5F3; --text-2:#C9C9C7; --muted:#8E8E8C;
  --line:#242424; --accent:#FFFFFF; --accent-soft:#1E1E1E;
  --on-accent:#0A0A0A;
  --n1:#2A2A2A; --n2:#454545; --n3:#7A7A7A; --n4:#B8B8B6; --n5:#FFFFFF;
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;
     scroll-padding-top:calc(56px + env(safe-area-inset-top,0px))}
body{margin:0}
img,video{max-width:100%; height:auto; display:block}
button,input,select{font:inherit; color:inherit}

/* ============ BASE ============ */
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--fs,18px); line-height:1.8; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Inter sí tiene pesos: la jerarquía ya no depende solo del tamaño */
h1,h2,h3,h4{font-weight:700; letter-spacing:-.02em}
strong,b{font-weight:600}

a{color:inherit; text-decoration:underline;
  text-decoration-color:var(--accent); text-decoration-thickness:1px;
  text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}

::selection{background:var(--accent-soft); color:var(--text)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ============ UTILIDADES TIPOGRÁFICAS ============ */
.mono{font-family:'Space Mono',ui-monospace,monospace}
.meta{font-family:'Space Mono',ui-monospace,monospace;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted)}
.micro{font-family:'Space Mono',ui-monospace,monospace;
  font-size:.62rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted)}
.dato{font-family:'Space Mono',ui-monospace,monospace;
  font-weight:700; font-size:1.6rem; letter-spacing:-.02em}
.destaca{font-style:normal; color:var(--accent)}  /* sustituye a la negrita */
/* En blanco y negro la dirección la da el signo, no el color. */
.sube{color:var(--text)} .baja{color:var(--muted)}
.sube::before{content:"▲ "; font-size:.7em}
.baja::before{content:"▼ "; font-size:.7em}

/* ============ CABECERA ============ */
.cab{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  height:56px; display:flex; align-items:center;
  padding:0 var(--e5); gap:var(--e5);
}
.logo{font-family:'Inter',sans-serif; font-size:1.3rem;
  letter-spacing:-.02em; text-decoration:none}
.nav{display:flex; gap:var(--e5); margin-left:auto}
.nav a{font-family:'Space Mono',monospace; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  color:var(--muted)}
.nav a[aria-current]{color:var(--text)}
@media(max-width:700px){ .nav{display:none} }

/* Conmutador de tema: convive con la navegación, mismo lenguaje */
.tema{background:none; border:0; cursor:pointer; padding:var(--e2);
  font-family:'Space Mono',monospace; font-size:.7rem; color:var(--muted);
  min-width:44px; min-height:44px}
.cab .tema{margin-left:auto}
.cab .nav + .tema{margin-left:0}

/* Menú inferior en móvil (la cabecera oculta .nav por debajo de 700px) */
.nav-movil{display:none}
@media(max-width:700px){
  .nav-movil{
    display:flex; position:fixed; left:0; right:0; z-index:45;
    bottom:0; padding-bottom:env(safe-area-inset-bottom,0px);
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:blur(12px); border-top:1px solid var(--line);
  }
  .nav-movil a{
    flex:1; text-align:center; text-decoration:none; color:var(--muted);
    font-family:'Space Mono',monospace; font-size:.62rem;
    text-transform:uppercase; letter-spacing:.1em;
    padding:var(--e4) var(--e2); min-height:44px;
  }
  .nav-movil a[aria-current]{color:var(--text)}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}

/* ============ FRANJA DE MERCADOS ============ */
.mercados{
  background:var(--bg-alt); border-bottom:1px solid var(--line);
  display:flex; gap:var(--e6); padding:var(--e3) var(--e5);
  overflow-x:auto; scrollbar-width:none;
  font-family:'Space Mono',monospace; font-size:.72rem;
  white-space:nowrap;
}
.mercados::-webkit-scrollbar{display:none}
.mercados .item{display:flex; gap:var(--e2); align-items:baseline}
.mercados .nom{color:var(--muted); text-transform:uppercase; letter-spacing:.08em}

/* ============ NIVEL 1-5 ============ */
.nivel{display:inline-flex; gap:3px; align-items:center}
.nivel i{width:6px; height:6px; border-radius:50%; background:var(--n1)}
.nivel[data-n="3"] i:nth-child(-n+3),
.nivel[data-n="4"] i:nth-child(-n+4),
.nivel[data-n="5"] i:nth-child(-n+5){background:var(--n5)}
.nivel[data-n="1"] i:nth-child(1),
.nivel[data-n="2"] i:nth-child(-n+2){background:var(--n2)}

/* ============ PORTADA: FEED DE TARJETAS ============ */
.feed{height:100dvh; overflow-y:scroll; scroll-snap-type:y mandatory;
  scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.tarjeta{
  height:100dvh; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--e6) var(--e5) var(--e8);
  max-width:var(--medida-ancha); margin:0 auto; position:relative;
}
.tarjeta .img{position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center}
.tarjeta .img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,var(--bg) 18%,transparent 70%)}
.tarjeta h2{font-size:clamp(1.6rem,4.5vw,2.3rem); line-height:1.2;
  letter-spacing:-.02em; margin:var(--e3) 0}
.tarjeta h2 a{text-decoration:none}
.tarjeta .resumen{color:var(--text-2); font-size:.95em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden}
.tarjeta .cabecera-meta{display:flex; gap:var(--e4); align-items:center}
.tarjeta .acciones{display:flex; gap:var(--e3); margin-top:var(--e5);
  align-items:center}
.guardar{background:none; border:1px solid var(--line); cursor:pointer;
  border-radius:var(--radio); padding:var(--e2) var(--e4);
  font-family:'Space Mono',monospace; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  min-height:44px}
.guardar[aria-pressed="true"]{border-color:var(--accent); color:var(--accent);
  background:var(--accent-soft)}

/* Pista de deslizamiento: solo en la primera tarjeta y solo una vez */
.pista{position:absolute; left:50%; transform:translateX(-50%);
  bottom:var(--e5); color:var(--muted); pointer-events:none}

/* Enlace permanente a la vista clásica: obligatorio (§5.4) */
/* Va por debajo de la cabecera Y de la franja de mercados, no encima. */
.a-lista{position:fixed; z-index:46;
  top:calc(56px + 42px + env(safe-area-inset-top,0px) + var(--e3)); right:var(--e5);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radio); padding:var(--e2) var(--e4);
  font-family:'Space Mono',monospace; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  color:var(--text); min-height:44px; display:flex; align-items:center}

/* ============ ARTÍCULO = MODO LECTURA ============ */
.articulo{max-width:var(--medida); margin:0 auto;
  padding:var(--e7) var(--e5) var(--e9)}

.articulo .cabecera-meta{display:flex; gap:var(--e4);
  align-items:center; margin-bottom:var(--e5); flex-wrap:wrap}

.articulo h1{font-size:clamp(1.85rem,5vw,2.5rem); line-height:1.18;
  letter-spacing:-.02em; margin:0 0 var(--e5)}

.articulo .entradilla{font-size:1.13em; line-height:1.65;
  color:var(--text-2); margin:0 0 var(--e6)}

.articulo p{margin:0 0 1.5em}
.articulo h2{margin:2.2em 0 .7em; font-size:1.35rem; line-height:1.3;
  letter-spacing:-.01em}
.articulo h3{font-size:1.1rem; line-height:1.4}

.articulo figure{margin:var(--e7) 0}
.articulo figure img{border-radius:var(--radio); aspect-ratio:16/9;
  object-fit:cover; background:var(--bg-alt); width:100%;
  /* Muchos retratos de Commons son verticales: encuadrando por el centro se
     les corta la cabeza. Se prioriza la parte alta de la imagen. */
  object-position:center 28%}
.articulo figcaption{margin-top:var(--e3); font-size:.8rem;
  color:var(--muted); line-height:1.5}
.credito-ia{font-family:'Space Mono',monospace; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
  border:1px solid var(--line); padding:2px 6px; border-radius:2px}

.porque{border-left:2px solid var(--accent); padding-left:var(--e5);
  margin:var(--e7) 0}
.porque .micro{display:block; margin-bottom:var(--e2)}
.porque p{margin:0}

.siguiente{background:var(--bg-alt); border-radius:var(--radio);
  padding:var(--e5); margin:var(--e7) 0}
.siguiente .micro{display:block; margin-bottom:var(--e2)}
.siguiente p{margin:0}

.fuentes{border-top:1px solid var(--line); margin-top:var(--e8);
  padding-top:var(--e5)}
.fuentes ol{margin:var(--e3) 0 0; padding-left:var(--e5);
  font-size:.86rem; line-height:1.7; color:var(--text-2)}
.fuentes li{margin-bottom:var(--e2)}

.transparencia{margin-top:var(--e7); padding-top:var(--e4);
  border-top:1px solid var(--line); font-size:.78rem; color:var(--muted)}

#progreso{position:fixed; top:env(safe-area-inset-top,0px); left:0;
  height:2px; width:0; background:var(--accent); z-index:99;
  transition:width .08s linear}

.tipo{position:fixed; right:var(--e5);
  bottom:calc(var(--e5) + env(safe-area-inset-bottom,0px));
  display:flex; gap:1px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radio); z-index:40}
.tipo button{background:none; border:0; padding:var(--e2) var(--e3);
  font-family:'Space Mono',monospace; font-size:.7rem; cursor:pointer;
  min-width:44px; min-height:44px}
.tipo button[aria-pressed="true"]{background:var(--accent-soft)}
.a{--fs:16px} .b{--fs:18px} .c{--fs:21px}
@media(max-width:700px){
  .tipo{bottom:calc(56px + var(--e3) + env(safe-area-inset-bottom,0px))}
}

/* ============ PUBLICIDAD ============ */
.ad{position:relative; margin:var(--e9) 0; padding:var(--e6) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  min-height:220px;              /* reserva: sin esto la página salta */
  display:flex; align-items:center; justify-content:center}
.ad::before{content:"PUBLICIDAD"; position:absolute; top:var(--e3); left:0;
  font-family:'Space Mono',monospace; font-size:.62rem;
  letter-spacing:.14em; color:var(--muted)}

.ad-nativo{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radio); padding:var(--e5); margin:var(--e8) 0}
.ad-nativo h3{margin:var(--e2) 0 var(--e3); font-size:1.15rem}
.ad-nativo p{font-size:.95em; margin:0 0 var(--e4); color:var(--text-2)}

/* ============ BOTONES Y FORMULARIOS ============ */
.btn{display:inline-block; font-family:'Space Mono',monospace;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  padding:var(--e3) var(--e5); border-radius:var(--radio);
  background:var(--accent); color:var(--on-accent);
  border:0; text-decoration:none; cursor:pointer}
.btn-sec{background:none; color:var(--text); border:1px solid var(--line)}

input[type=email],input[type=text]{
  width:100%; padding:var(--e3) var(--e4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radio); font-size:1rem}
input:focus{border-color:var(--accent); outline:none}

.chips{display:flex; flex-wrap:wrap; gap:var(--e2)}
.chip{font-family:'Space Mono',monospace; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.08em;
  padding:var(--e2) var(--e4); border:1px solid var(--line);
  border-radius:99px; cursor:pointer; user-select:none}
.chip[aria-pressed="true"]{background:var(--accent-soft);
  border-color:var(--accent); color:var(--accent)}

/* ============ LISTA CRONOLÓGICA ============ */
.lista{max-width:var(--medida-ancha); margin:0 auto; padding:var(--e7) var(--e5)}
.fila{display:grid; grid-template-columns:auto 1fr; gap:var(--e5);
  padding:var(--e5) 0; border-bottom:1px solid var(--line);
  align-items:start; text-decoration:none}
.fila .hora{font-family:'Space Mono',monospace; font-size:.72rem;
  color:var(--muted); padding-top:4px}
.fila h3{margin:0 0 var(--e2); font-size:1.15rem; line-height:1.35}
.fila p{margin:0; color:var(--text-2); font-size:.92em}
.fila .pie-fila{display:flex; gap:var(--e3); align-items:center;
  margin-top:var(--e2)}
@media(max-width:600px){ .fila{grid-template-columns:1fr; gap:var(--e2)} }

/* Cabecera de sección y día */
.titulo-seccion{max-width:var(--medida-ancha); margin:0 auto;
  padding:var(--e7) var(--e5) 0}
.titulo-seccion h1{font-size:clamp(1.85rem,5vw,2.5rem); line-height:1.18;
  letter-spacing:-.02em; margin:0 0 var(--e3)}
.titulo-seccion p{color:var(--text-2); margin:0; max-width:var(--medida)}
.dia{position:sticky; top:calc(56px + env(safe-area-inset-top,0px));
  background:var(--bg); padding:var(--e5) 0 var(--e3); z-index:20;
  border-bottom:1px solid var(--line)}

/* ============ CASO / CRONOLOGÍA ============ */
.crono{border-left:1px solid var(--line); padding-left:var(--e5);
  margin-left:var(--e3)}
.hito{position:relative; padding-bottom:var(--e6)}
.hito::before{content:""; position:absolute; left:calc(-1 * var(--e5) - 4px);
  top:9px; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.hito .fecha{font-family:'Space Mono',monospace; font-size:.7rem;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.hito h3{margin:var(--e2) 0; font-size:1.15rem; line-height:1.35}

/* ============ PIE ============ */
.pie-sitio{border-top:1px solid var(--line); margin-top:var(--e9);
  background:var(--bg-alt)}
.pie-sitio .dentro{max-width:var(--medida-ancha); margin:0 auto;
  padding:var(--e7) var(--e5)}
.pie-sitio nav{display:flex; flex-wrap:wrap; gap:var(--e5);
  margin-bottom:var(--e5)}
.pie-sitio a{text-decoration:none}
.pie-sitio .aviso{font-size:.78rem; color:var(--muted); max-width:var(--medida);
  line-height:1.6}
@media(max-width:700px){ .pie-sitio .dentro{padding-bottom:var(--e8)} }

/* ============ CONTENIDO ESTÁTICO ============ */
.pagina{max-width:var(--medida); margin:0 auto; padding:var(--e7) var(--e5) var(--e9)}
.pagina h1{font-size:clamp(1.85rem,5vw,2.5rem); line-height:1.18;
  letter-spacing:-.02em; margin:0 0 var(--e5)}
.pagina h2{margin:2.2em 0 .7em; font-size:1.35rem; line-height:1.3}
.pagina p{margin:0 0 1.5em}
.pagina ul{padding-left:var(--e5); margin:0 0 1.5em}
.pagina li{margin-bottom:var(--e2)}

/* ============ MOVIMIENTO ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .feed{scroll-snap-type:none}
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ============================================================
   PORTADA: el feed es el único elemento con scroll.
   La cabecera y la franja de mercados se superponen; las tarjetas
   alinean su contenido abajo, así que no tapan nada.
   ============================================================ */
body.p-portada{overflow:hidden; padding-bottom:0}
body.p-portada .cab{position:fixed; left:0; right:0}
body.p-portada .mercados{position:fixed; z-index:49;
  left:0; right:0; top:calc(56px + env(safe-area-inset-top,0px))}
body.p-portada .pie-sitio{display:none}   /* el pie vive en /lista y en el artículo */
body.p-portada .tarjeta{
  padding-top:calc(56px + 42px + env(safe-area-inset-top,0px) + var(--e6));
}
@media(max-width:700px){
  body.p-portada .feed{height:calc(100dvh - 56px - env(safe-area-inset-bottom,0px))}
  body.p-portada .tarjeta{height:calc(100dvh - 56px - env(safe-area-inset-bottom,0px))}
}

/* En portada la cabecera y la franja son fijas: cuando no hay feed (aún sin
   piezas), el contenido tiene que bajar o se lee por debajo de ellas. */
body.p-portada .pagina{padding-top:calc(56px + 42px + env(safe-area-inset-top,0px) + var(--e7))}

/* ============================================================
   MODO LECTURA
   El cuerpo se lee en gris y se pone negro lo que estás leyendo.
   Dos formas de avanzar:
     · deslizando — el párrafo que está en pantalla se oscurece;
     · autoleer  — el texto se va marcando palabra a palabra al ritmo
       de lectura, que es lo que ayuda a no despistarse.
   Sin JavaScript no pasa nada: el texto se ve negro y entero.
   ============================================================ */

.articulo .cuerpo-lectura p,
.articulo .cuerpo-lectura h2,
.articulo .cuerpo-lectura h3{
  font-weight:500;                 /* bold medio: el texto tiene cuerpo */
  letter-spacing:-.011em;
  transition:color .35s ease;
}

/* Con el lector activo, lo no leído se apaga */
.leyendo .cuerpo-lectura p,
.leyendo .cuerpo-lectura h2,
.leyendo .cuerpo-lectura h3{ color:var(--n2) }

.leyendo .cuerpo-lectura p.activo,
.leyendo .cuerpo-lectura h2.activo,
.leyendo .cuerpo-lectura h3.activo{ color:var(--text) }

/* Autoleer: palabra a palabra */
.cuerpo-lectura .w{ transition:color .18s linear }
.autoleer .cuerpo-lectura p{ color:var(--n2) }
.autoleer .cuerpo-lectura .w.leida{ color:var(--text) }
.autoleer .cuerpo-lectura .w.aqui{
  color:var(--text);
  box-shadow:inset 0 -.42em 0 var(--accent-soft);   /* dónde va la vista */
}

/* ── Barra del lector ── */
.lector{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--e5) + env(safe-area-inset-bottom,0px));
  z-index:40; display:flex; gap:var(--e2); align-items:center;
}
.lector .grupo{
  display:flex; align-items:center; gap:2px;
  background:var(--text); border-radius:999px; padding:4px;
}
.lector button{
  background:none; border:0; cursor:pointer; color:var(--bg);
  font-family:'Space Mono',monospace; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:0 var(--e4); height:38px; min-width:44px;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
}
.lector button[aria-pressed="true"]{ background:var(--bg); color:var(--text) }
.lector .redondo{ width:44px; min-width:44px; padding:0; font-size:.85rem }
.lector .reloj{
  background:var(--text); color:var(--bg); border-radius:999px;
  height:46px; display:flex; align-items:center; gap:var(--e2);
  padding:0 var(--e5); font-family:'Space Mono',monospace; font-size:.72rem;
}
@media(max-width:700px){
  .lector{ bottom:calc(56px + var(--e3) + env(safe-area-inset-bottom,0px)) }
  .lector .reloj{ display:none }        /* en móvil manda el texto */
}

/* El artículo respira más: es la pantalla donde se está de verdad */
.articulo{ padding-top:var(--e8) }
.articulo .cuerpo-lectura p{ margin:0 0 1.35em; line-height:1.72 }

@media (prefers-reduced-motion:reduce){
  .articulo .cuerpo-lectura p,
  .cuerpo-lectura .w{ transition:none }
}

/* El texto apagado tiene que seguir leyéndose: si alguien mira un párrafo de
   arriba mientras lee, no puede encontrarse un gris ilegible. Se apaga lo
   justo para dirigir la vista. */
.leyendo .cuerpo-lectura p,
.leyendo .cuerpo-lectura h2,
.leyendo .cuerpo-lectura h3,
.autoleer .cuerpo-lectura p{ color:#9A9A98 }
:root[data-theme="dark"] .leyendo .cuerpo-lectura p,
:root[data-theme="dark"] .autoleer .cuerpo-lectura p{ color:#6E6E6C }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .leyendo .cuerpo-lectura p,
  :root:not([data-theme="light"]) .autoleer .cuerpo-lectura p{ color:#6E6E6C }
}

/* Sitio para la barra del lector: que no tape las fuentes */
.articulo{ padding-bottom:calc(var(--e9) + 64px) }

/* Las fotos van en color: es la única nota de color de la página y, en un
   medio, la foto es información, no decoración. */
.tarjeta .img{ filter:contrast(1.03) }
.articulo figure img,
.imagen img{ filter:none }

/* El degradado tiene que dejar leer el titular, no solo insinuarse */
.tarjeta .img::after{
  background:linear-gradient(to top,
    var(--bg) 0%, var(--bg) 30%, color-mix(in srgb,var(--bg) 55%,transparent) 55%, transparent 88%);
}
.tarjeta h2{ font-weight:700 }
.tarjeta .resumen{ font-weight:400 }

/* ============================================================
   PORTADA EN TARJETAS
   Un medio digital que no parece un blog: densidad de terminal
   financiero en los datos, aire de revista en los titulares.
   Sin color: manda el peso, el tamaño y el borde.
   ============================================================ */

.portada{ max-width:1180px; margin:0 auto; padding:var(--e6) var(--e5) var(--e9) }

/* Cabecera del día: la fecha es un dato, va en monoespaciada */
.hoy{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--e5); flex-wrap:wrap;
  padding-bottom:var(--e5); margin-bottom:var(--e6);
  border-bottom:1px solid var(--text);
}
.hoy h1{
  font-size:clamp(2.2rem,6vw,3.4rem); line-height:.98;
  letter-spacing:-.045em; margin:0; font-weight:700;
}
.hoy .cuando{ text-align:right }
.hoy .cuando b{
  display:block; font-family:'Space Mono',monospace;
  font-size:1.5rem; letter-spacing:-.03em; font-weight:700;
}

/* Pestañas de sección: gris lo demás, negro lo que estás viendo */
.pestanas{
  display:flex; gap:var(--e5); flex-wrap:wrap;
  margin:0 0 var(--e6); padding:0; list-style:none;
}
.pestanas a{
  text-decoration:none; color:var(--n2);
  font-size:clamp(1.1rem,2.6vw,1.45rem); font-weight:700;
  letter-spacing:-.025em; transition:color .2s ease;
}
.pestanas a:hover{ color:var(--text-2) }
.pestanas a[aria-current]{ color:var(--text) }

/* ── Rejilla ── */
.rejilla{
  display:grid; gap:var(--e5);
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}
.rejilla .destacada{ grid-column:1/-1 }

/* ── Tarjeta ── */
.pieza{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.pieza:hover{ border-color:var(--text); transform:translateY(-2px) }
.pieza .foto{
  aspect-ratio:16/9; width:100%; object-fit:cover;
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
}
.pieza .dentro{ padding:var(--e5); display:flex; flex-direction:column; gap:var(--e3); flex:1 }
.pieza .arriba{ display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap }
.pieza h3{
  margin:0; font-size:1.18rem; line-height:1.28;
  letter-spacing:-.022em; font-weight:700;
}
.pieza p{
  margin:0; color:var(--text-2); font-size:.94rem; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pieza .abajo{
  margin-top:auto; padding-top:var(--e3);
  display:flex; align-items:center; gap:var(--e3);
  border-top:1px solid var(--line);
}

/* La destacada: a dos columnas y con el titular a tamaño de portada */
.pieza.destacada{ flex-direction:row; align-items:stretch }
.pieza.destacada .foto{
  width:52%; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--line);
}
.pieza.destacada .dentro{ width:48%; justify-content:center; padding:var(--e7) }
.pieza.destacada h3{ font-size:clamp(1.5rem,3.2vw,2.35rem); line-height:1.1; letter-spacing:-.035em }
.pieza.destacada p{ font-size:1.02rem; -webkit-line-clamp:4 }
@media(max-width:820px){
  .pieza.destacada{ flex-direction:column }
  .pieza.destacada .foto{ width:100%; aspect-ratio:16/9; border-right:0; border-bottom:1px solid var(--line) }
  .pieza.destacada .dentro{ width:100%; padding:var(--e5) }
}

/* ── Ticker de mercados: esto es lo que dice "aquí se miran datos" ── */
.ticker{
  border-top:1px solid var(--text); border-bottom:1px solid var(--text);
  background:var(--bg); overflow:hidden; margin-bottom:var(--e6);
}
.ticker .rueda{
  display:flex; gap:var(--e7); padding:var(--e4) var(--e5);
  overflow-x:auto; scrollbar-width:none; white-space:nowrap;
  font-family:'Space Mono',monospace;
}
.ticker .rueda::-webkit-scrollbar{ display:none }
.ticker .valor{ display:flex; flex-direction:column; gap:2px; min-width:max-content }
.ticker .nom{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.ticker .cifra{ font-size:1.12rem; font-weight:700; letter-spacing:-.03em }
.ticker .var{ font-size:.68rem }

/* ── Bloque de datos, tipo terminal ── */
.panel-datos{
  border:1px solid var(--line); border-radius:18px;
  padding:var(--e5); margin-top:var(--e6); background:var(--bg-alt);
}
.panel-datos h2{ margin:0 0 var(--e4); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; font-family:'Space Mono',monospace; color:var(--muted); font-weight:400 }
.panel-datos ol{ margin:0; padding:0; list-style:none; display:grid; gap:var(--e3) }
.panel-datos li{ display:flex; gap:var(--e4); align-items:baseline }
.panel-datos .n{
  font-family:'Space Mono',monospace; font-size:.8rem; color:var(--muted); min-width:2ch;
}
.panel-datos a{ text-decoration:none; font-weight:500; line-height:1.4 }
.panel-datos a:hover{ text-decoration:underline }

/* ── Navegación inferior flotante (móvil) ── */
@media(max-width:700px){
  .nav-movil{
    left:var(--e4); right:var(--e4); bottom:calc(var(--e4) + env(safe-area-inset-bottom,0px));
    background:var(--text); border:0; border-radius:999px;
    padding:6px; gap:2px; box-shadow:0 8px 28px rgba(0,0,0,.22);
  }
  .nav-movil a{
    color:color-mix(in srgb,var(--bg) 62%,transparent);
    border-radius:999px; padding:var(--e3) var(--e2); min-height:40px;
    display:flex; align-items:center; justify-content:center;
  }
  .nav-movil a[aria-current]{ background:var(--bg); color:var(--text) }
  body{ padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)) }
  .portada{ padding:var(--e5) var(--e4) var(--e8) }
  .rejilla{ grid-template-columns:1fr; gap:var(--e4) }
}

/* Relacionadas: enlazado interno al final de cada pieza */
.relacionadas{
  border-top:1px solid var(--line); margin-top:var(--e7); padding-top:var(--e5);
}
.relacionadas ul{ list-style:none; margin:var(--e3) 0 0; padding:0; display:grid; gap:var(--e3) }
.relacionadas li{ display:flex; align-items:baseline; gap:var(--e4); justify-content:space-between }
.relacionadas a{ text-decoration:none; font-weight:500; line-height:1.4; flex:1 }
.relacionadas a:hover{ text-decoration:underline }
.relacionadas .meta{ white-space:nowrap }

/* Migas: contexto para el lector y para el rastreador */
.migas{
  display:flex; gap:var(--e2); align-items:center; flex-wrap:wrap;
  margin-bottom:var(--e4);
}
.migas a{ text-decoration:none; color:var(--muted) }
.migas a:hover{ color:var(--text) }
.migas span{ color:var(--n2) }