@font-face{font-family:'Jost';src:url('/fuentes/jost.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('/fuentes/jost-italica.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Piazzolla';src:url('/fuentes/piazzolla-italica.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Piazzolla';src:url('/fuentes/piazzolla.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Crimson Pro';src:url('/fuentes/crimson.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Crimson Pro';src:url('/fuentes/crimson-italica.woff2') format('woff2');font-weight:200 900;font-style:italic;font-display:swap}


/* ═══════════════════════════════════════════════════════════════════════
   BANDERA IZQUIERDA · propuesta estética para politicaobrera.com
   Tres materiales: papel blanco = diario · gris papel = partido · negro = canal
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* — los tres materiales — */
  --papel:#FFFFFF;
  --gris-papel:#F0F0F0;  /* la banda del cabezal impreso */
  --negro-canal:#0E0E0E;
  --gris-canal:#2A2825;
  --canal-tinta:#FFFFFF;
  --canal-dato:#A8A49B;
  --canal-filete:#2A2825;
  /* — tintas, todas cálidas, ninguna azulada — */
  --tinta:#282828;       /* el negro del cabezal impreso, no un negro puro */
  --tinta-media:#5A5852;
  --tinta-debil:#77746C;
  --filete:#D6D3CC;
  --filete-fuerte:#111111;
  /* — el rojo del logo, promovido a color de marca — */
  --rojo:#E82028;        /* medido en la banda del pie del impreso */
  --rojo-tinta:#B4161C;  /* el mismo, un escalón más oscuro, para texto chico */
  /* — la única cosa brillante del diario — */
  --amarillo:#FFD200;
  --sobre-amarillo:#111111;
  /* Altura de lo que hubiera arriba de la cabecera: las barras pegajosas se
     apoyan en esto. Era la barra oscura de la propuesta; ya no hay nada. */
  --chrome-h:0px;
  /* alto de la barra de secciones: las pestañas del teléfono se pegan debajo */
  --barra-h:45px;

  /* La misma pareja que el impreso: Futura para todo lo que titula y rotula, una
     serif para el cuerpo. Jost es el renacimiento libre de Futura; si el partido
     tiene licencia web de FuturaStd, se cambia acá y en las dos @font-face. */
  --titular:'Jost','Futura Std','Futura','Avenir Next',Avenir,'Century Gothic',sans-serif;
  --texto:'Crimson Pro',Georgia,'Times New Roman',Charter,serif;
  --datos:'Jost','Futura Std','Futura','Avenir Next',Avenir,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papel:#14140F;
    --gris-papel:#23221D;
    --negro-canal:#1B1A16;
    --gris-canal:#2E2C26;
    --canal-tinta:#F2F0EA;
    --canal-dato:#9B968B;
    --canal-filete:#3D3A33;
    --tinta:#F2F0EA;
    --tinta-media:#B4B0A6;
    --tinta-debil:#8E8A80;
    --filete:#35332C;
    --filete-fuerte:#F2F0EA;
    --rojo:#FF5A4E;
    --rojo-tinta:#FF7C70;
    --amarillo:#FFD200;
    --sobre-amarillo:#111111;
  }
}
:root[data-theme="dark"]{
  --papel:#14140F;
  --gris-papel:#23221D;
  --negro-canal:#1B1A16;
  --gris-canal:#2E2C26;
  --canal-tinta:#F2F0EA;
  --canal-dato:#9B968B;
  --canal-filete:#3D3A33;
  --tinta:#F2F0EA;
  --tinta-media:#B4B0A6;
  --tinta-debil:#8E8A80;
  --filete:#35332C;
  --filete-fuerte:#F2F0EA;
  --rojo:#FF5A4E;
  --rojo-tinta:#FF7C70;
  --amarillo:#FFD200;
  --sobre-amarillo:#111111;
}

*{box-sizing:border-box}
input,select,button{max-width:100%}
.g12>*{min-width:0}
h1,h2,h3,h4,p,a,li,blockquote,figcaption,span{overflow-wrap:break-word}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
img{max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}

.nota-margen{
  font-family:var(--datos);font-size:0.7188rem;line-height:1.5;
  color:var(--tinta-debil);border-left:2px solid var(--rojo);
  padding:6px 0 6px 12px;margin:14px 0;max-width:62ch;
}
.nota-margen b{color:var(--tinta);font-weight:700}

/* ─── grilla ──────────────────────────────────────────────────────────── */
.ancho{max-width:1360px;margin:0 auto;padding:0 32px}
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.cuarto{grid-column:span 4}
.tercio{grid-column:span 4}
/* Sólo lo vertical: con el atajo `padding:32px 0 40px` pisaba el padding
   lateral de .ancho (misma especificidad, regla posterior) y los pisos
   arrancaban 32 px a la izquierda del logo; en el celular, contra el borde. */
.piso{padding-top:32px;padding-bottom:40px;border-top:1px solid var(--filete)}
.piso:first-of-type{border-top:0}

/* ─── tipografía de datos ─────────────────────────────────────────────── */
.dato,.rubro,.volanta,.credencial{font-family:var(--datos)}
.dato{font-size:0.75rem;line-height:1rem;color:var(--tinta-debil);font-variant-numeric:tabular-nums}
.volanta{
  font-size:0.6875rem;line-height:0.875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--rojo-tinta);
  display:block;margin-bottom:7px;
}
.rubro{
  font-size:0.6875rem;line-height:0.875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);
}
.credencial{font-size:0.8125rem;line-height:1.0625rem;color:var(--tinta-media)}
.credencial b{color:var(--tinta);font-weight:700}
.credencial .cargo{
  display:block;font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rojo-tinta);font-weight:700;margin-top:2px;
}

/* ─── escala de titulares ─────────────────────────────────────────────── */
.t9,.t8,.t7,.t6,.t5,.t4,.t3,.t2,.t1{
  font-family:var(--titular);font-weight:800;
  text-wrap:balance;letter-spacing:-.014em;
}
.t9{font-size:4rem;line-height:4rem;letter-spacing:-.021em}
.t8{font-size:3.25rem;line-height:3.375rem;letter-spacing:-.021em}
.t7{font-size:2.75rem;line-height:2.875rem;letter-spacing:-.021em}
.t6{font-size:2.25rem;line-height:2.4375rem;font-weight:700}
.t5{font-size:1.875rem;line-height:2.0625rem;font-weight:700}
.t4{font-size:1.625rem;line-height:1.8125rem;font-weight:700}
.t3{font-size:1.375rem;line-height:1.5625rem;font-weight:700;letter-spacing:-.006em}
.t2{font-size:1.1875rem;line-height:1.4375rem;font-weight:700;letter-spacing:-.006em}
.t1{font-size:1.0625rem;line-height:1.3125rem;font-weight:700;letter-spacing:-.006em}
a.t9:hover,a.t8:hover,a.t7:hover,a.t6:hover,a.t5:hover,
a.t4:hover,a.t3:hover,a.t2:hover,a.t1:hover{color:var(--rojo-tinta)}

.bajada{font-size:1.3125rem;line-height:2rem;color:var(--tinta-media);margin-top:12px}
.bajada-chica{font-size:1.0625rem;line-height:1.6875rem;color:var(--tinta-media);margin-top:8px}

/* ─── foto ────────────────────────────────────────────────────────────── */
.foto{
  position:relative;background:var(--filete);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:3/2;overflow:hidden;
}
.foto::after{
  content:attr(data-marca);
  font-family:var(--datos);font-size:0.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-debil);
}
.foto.v169{aspect-ratio:16/9}
.foto.v916{aspect-ratio:9/16}
.foto.v11{aspect-ratio:1/1}
.epigrafe{font-family:var(--datos);font-size:0.75rem;line-height:1rem;color:var(--tinta-media);margin-top:8px}
.epigrafe .credito{color:var(--tinta-debil)}

/* ─── piezas ──────────────────────────────────────────────────────────── */
.pieza{display:flex;flex-direction:column;gap:0}
.pieza .foto{margin-top:16px}
.hijas{margin-top:24px;border-top:1px solid var(--filete)}
.hijas li{padding:14px 0;border-bottom:1px solid var(--filete)}
.corondel{border-left:1px solid var(--filete);padding-left:24px}
.fila{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--filete);align-items:flex-start}
.fila .hora{flex:0 0 2.875rem;font-family:var(--datos);font-size:0.75rem;line-height:1.3125rem;
  color:var(--tinta-debil);font-variant-numeric:tabular-nums}
.fila .cuerpo{flex:1;min-width:0}
.fila .sec{font-family:var(--datos);font-size:0.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rojo-tinta);margin-right:8px}
.fila .credencial{margin-top:5px}

/* ─── rubro de piso ───────────────────────────────────────────────────── */
.abre{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:3px solid var(--filete-fuerte);padding-top:10px;margin-bottom:20px;
}
.abre h2{min-width:0;overflow-wrap:break-word;font-family:var(--titular);font-size:1.875rem;line-height:1;font-weight:800;letter-spacing:-.02em}
.abre h2 .barra{color:var(--rojo)}
.abre .mas{font-family:var(--datos);font-size:0.75rem;font-weight:600;color:var(--tinta-media)}
.abre .mas:hover{color:var(--rojo-tinta)}
.abre.chico{border-top-width:3px}
.abre.chico h2{font-size:1.25rem}

/* ─── el segundo material: el partido ─────────────────────────────────── */
.pliego{
  background:var(--gris-papel);
  border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);
  padding:64px 0;margin:48px 0;
}
.boton-sumate{
  display:inline-block;background:var(--amarillo);color:var(--sobre-amarillo);
  font-family:var(--datos);font-size:1rem;line-height:1.25rem;font-weight:800;
  letter-spacing:.02em;padding:15px 22px;
}
.boton-sumate:hover{filter:brightness(1.06)}

/* ─── el tercer material: el canal ────────────────────────────────────── */
.canal{
  background:var(--negro-canal);color:var(--canal-tinta);
  padding:44px 0;border-top:3px solid var(--rojo);
}
.canal a{color:var(--canal-tinta)}
.canal .dato{color:var(--canal-dato)}
.canal .rubro{color:var(--canal-tinta)}
.canal .foto{background:var(--gris-canal)}
.canal .foto::after{color:var(--canal-dato)}
.canal .fila{border-bottom-color:var(--canal-filete)}
.canal .fila .hora{color:var(--canal-dato)}
.play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.play::before{
  content:"";border-style:solid;border-width:15px 0 15px 26px;
  border-color:transparent transparent transparent var(--rojo);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.foto.chico .play::before{border-width:9px 0 9px 15px}
.duracion{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);
  color:#fff;font-family:var(--datos);font-size:0.6875rem;font-weight:600;
  padding:3px 6px;font-variant-numeric:tabular-nums;
}
.envivo{display:inline-flex;align-items:center;gap:7px;font-family:var(--datos);
  font-size:0.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.punto{width:8px;height:8px;border-radius:50%;background:var(--rojo);flex:0 0 8px}
@media (prefers-reduced-motion:no-preference){
  .punto{animation:latir 1.8s ease-in-out infinite}
}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.28}}

/* ─── cabecera del diario ─────────────────────────────────────────────── */
.franja-fecha{
  border-bottom:1px solid var(--filete);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:34px;padding:6px 0;flex-wrap:wrap;
}
.franja-fecha .izq{font-family:var(--datos);font-size:0.75rem;color:var(--tinta-media);
  font-variant-numeric:tabular-nums}

.cabecera{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;padding:22px 0 16px;flex-wrap:wrap}
/* El nombre del diario no se compone: es el logo del partido, servido como
   máscara. Todo su tamaño y su color están en el bloque EL LOGOTIPO, al final. */
.lema{font-family:var(--datos);font-size:0.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-media);margin-top:9px;display:block}
.oreja{border-left:1px solid var(--filete);padding-left:20px;max-width:330px}
.filete-rojo{height:3px;background:var(--rojo)}

.barra-secciones{
  position:sticky;top:var(--chrome-h);z-index:40;background:var(--papel);
  border-bottom:1px solid var(--filete);
}
.barra-secciones .ancho{display:flex;align-items:center;gap:0;
  min-height:44px;overflow-x:auto;scrollbar-width:none}
.barra-secciones .ancho::-webkit-scrollbar{display:none}
.barra-secciones a{
  font-family:var(--datos);font-size:0.75rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinta);white-space:nowrap;
  padding:12px 11px;border-right:1px solid var(--filete);
}
.barra-secciones .secciones-visibles a:first-child{padding-left:16px}
.barra-secciones .secciones-visibles .corta{display:none}
/* Las secciones que entran se ven; el resto cae en el menú. El reparto lo hace
   secciones.js midiendo el ancho real, porque depende de la pantalla y del
   tamaño de letra que eligió el lector, no de una lista escrita a mano. */
.barra-secciones .secciones-visibles{display:flex;align-items:center;flex:0 0 auto}
.barra-secciones .secciones-mas{position:relative}

/* El botón es un ícono y nada más: tres renglones, que es lo que cualquiera lee
   como "menú". Va primero y no se mueve de ahí, entren doce secciones o ninguna:
   si cambiara de lugar con el ancho habría que buscarlo cada vez. */
.barra-secciones .mas-boton{
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--tinta);background:none;border:0;border-right:1px solid var(--filete);
  padding:12px 14px 12px 0;min-width:2.5rem;line-height:1;
}
.barra-secciones .mas-boton svg{display:block}
.barra-secciones .mas-boton:hover,
.barra-secciones .mas-boton[aria-expanded="true"]{color:var(--rojo-tinta)}
.barra-secciones .mas-menu{
  position:absolute;top:100%;left:0;z-index:60;min-width:13rem;
  display:flex;flex-direction:column;
  background:var(--papel);border:1px solid var(--filete);
  box-shadow:0 14px 36px -16px rgba(0,0,0,.35);
  /* Trece secciones no entran en una pantalla de teléfono. En vez de salirse
     por abajo —donde además está el botón de sumarse—, el menú se queda dentro
     de lo que hay y se desplaza adentro. */
  max-height:calc(100vh - 8rem);max-height:calc(100dvh - 8rem);overflow-y:auto;overscroll-behavior:contain;
}
/* mientras el menú está abierto, el botón de sumarse se aparta: estaba por
   encima y tapaba las últimas dos o tres secciones */
body.menu-abierto .sumate-chico{display:none}
.barra-secciones .mas-menu[hidden]{display:none}
.barra-secciones .mas-menu a{
  border-right:0;border-bottom:1px solid var(--filete);padding:11px 14px;
}
.barra-secciones .mas-menu a:last-child{border-bottom:0}
/* mientras el menú está abierto la barra no recorta: si no, en Firefox el
   desplegable queda cortado por el overflow que permite deslizarla de costado */
.barra-secciones .ancho.abierto{overflow:visible}
.barra-secciones .sep{flex:0 0 24px}
.barra-secciones .partido{margin-left:auto;border-right:0;padding-right:0}


/* ─── sumate a Política Obrera ────────────────────────────────────────── */
/* El aviso aparece una vez y no vuelve solo. No trae el formulario: trae la
   invitación —que el formulario de Google no da— y el código, y lleva a
   /sumate/, donde el formulario entra entero y se lee. */
.sumate{position:fixed;inset:0;z-index:300}
.sumate[hidden]{display:none}
.sumate-fondo{position:absolute;inset:0;background:rgba(20,18,15,.55);backdrop-filter:blur(2px)}
.sumate-caja{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(380px,calc(100% - 28px));
  background:var(--papel);border:1px solid var(--filete);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
}
.sumate-x{
  position:absolute;top:8px;right:8px;z-index:2;
  background:none;border:1px solid var(--filete);border-radius:999px;
  width:30px;height:30px;cursor:pointer;color:var(--tinta-media);font-size:13px;line-height:1;
}
.sumate-x:hover{border-color:var(--rojo);color:var(--rojo-tinta)}
.sumate-ir{display:block;padding:30px 28px 26px;text-align:center}
.sumate-ir:hover .sumate-boton{background:var(--rojo-tinta);border-color:var(--rojo-tinta)}
.sumate-rubro{
  display:block;font-family:var(--datos);font-size:0.6875rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rojo-tinta);
}
.sumate-tit{
  display:block;font-family:var(--titular);font-size:2rem;line-height:1.05;font-weight:800;
  letter-spacing:-.02em;color:var(--tinta);margin-top:2px;
}
.sumate-texto{font-size:0.9375rem;line-height:1.4rem;color:var(--tinta-media);
  margin:12px auto 0;max-width:24rem}
.sumate-qr{display:block;width:132px;height:132px;margin:18px auto 0;
  border:1px solid var(--filete);padding:8px;background:#fff}
.sumate-boton{
  display:block;margin:18px auto 0;width:fit-content;
  background:var(--rojo);border:1px solid var(--rojo);color:#fff;padding:11px 20px;
  font-family:var(--datos);font-size:0.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
}
.sumate-pie{display:block;margin-top:10px;font-family:var(--datos);font-size:0.6875rem;
  color:var(--tinta-debil)}

/* el botón que queda siempre a mano: lleva al mismo lugar */
.sumate-chico{
  position:fixed;left:16px;bottom:16px;z-index:290;
  display:flex;flex-direction:column;gap:1px;text-align:left;
  background:var(--rojo);border:1px solid var(--rojo);color:#fff;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.5);padding:9px 15px;
}
.sumate-chico[hidden]{display:none}
.sumate-chico:hover{background:var(--rojo-tinta);border-color:var(--rojo-tinta);color:#fff}
/* "Sumate a" heredaba el rojo del aviso grande, y sobre el fondo rojo del botón
   quedaba rojo sobre rojo: se leía a duras penas. Va en blanco. */
.sumate-chico .sumate-rubro{color:#fff;opacity:.88}
.sumate-nombre{font-family:var(--datos);font-size:0.8125rem;font-weight:700;letter-spacing:.02em}

/* En la cola de la nota, el video no manda: acompaña. Al sacar la columna del
   autor las dos que quedaron se ensancharon, y un recorte vertical de 9:16
   pasó a medir casi seiscientos píxeles de alto. Se le pone techo. */
.cola-nota .video{max-height:340px}
.cola-nota .video img{height:100%;object-fit:cover}

/* ─── la revista ──────────────────────────────────────────────────────── */
/* Cada número es un bloque: a la izquierda su tapa de texto —rubro, número,
   cuándo salió— y al lado su índice. La gramática es la del sumario del
   impreso, que es donde esto ya existe en papel. */
.numero-revista{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px 28px;
  padding:22px 0;border-top:1px solid var(--filete);
}
.numero-revista:first-of-type{border-top:3px solid var(--filete-fuerte)}
.numero-tapa{display:flex;flex-direction:column;gap:2px}
.numero-tapa .rubro{font-family:var(--datos);font-size:0.6875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rojo-tinta)}
.numero-n{font-family:var(--titular);font-size:1.75rem;line-height:1;font-weight:800;
  letter-spacing:-.02em}
.numero-notas{display:flex;flex-direction:column}
.numero-notas .pie-linea{display:flex;flex-direction:column;gap:2px;padding:7px 0;
  border-bottom:1px solid var(--filete)}
.numero-notas .pie-linea:last-child{border-bottom:0}
.numero-notas a{font-size:1.0625rem;line-height:1.4rem}
.numero-notas a:hover{color:var(--rojo-tinta)}
@media (max-width:760px){
  .numero-revista{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* la página /sumate/: título, una línea y el formulario. El que llegó acá ya
   escaneó o ya hizo clic; el código sobra. */
.sumate-pagina{max-width:44rem}
.sumate-pagina .bajada{max-width:34rem}
.form-sumate{width:100%;height:min(900px,88vh);margin-top:26px;
  border:1px solid var(--filete);display:block;background:var(--papel)}
@media (max-width:760px){
  .sumate-caja{width:calc(100% - 24px)}
  .sumate-tit{font-size:1.75rem}
  .sumate-qr{width:112px;height:112px}
  .sumate-chico{left:10px;bottom:calc(58px + env(safe-area-inset-bottom));padding:8px 13px}
  .form-sumate{height:78vh}
}

/* ─── avisos del diario ───────────────────────────────────────────────── */
/* Dibujados con la letra del sitio, no pegados como imagen. La gramática es la
   del impreso: rubro en rojo arriba, título grande, pie chico, y el filete
   grueso que abre y cierra —lo mismo que separa un piso de otro—, para que se
   lea como un aviso del diario y no como una nota más. */
/* En filas flexibles y no en una grilla de dos columnas fijas: con la letra al
   200% el bloque de texto quedaba estrujado contra el botón y salía una letra
   por renglón. Así, cuando el texto no entra al lado, baja. */
.aviso-diario{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 24px;margin:10px 0 30px;padding:20px 24px;
  border-top:3px solid var(--filete-fuerte);border-bottom:3px solid var(--filete-fuerte);
}
.aviso-diario .aviso-texto{
  flex:1 1 18rem;min-width:0;display:flex;flex-direction:column;gap:5px;
}
.aviso-diario .aviso-rubro{
  font-family:var(--datos);font-size:0.6875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rojo-tinta);
}
.aviso-diario .aviso-titulo{
  font-family:var(--titular);font-size:1.75rem;line-height:1.1;
  font-weight:500;letter-spacing:-.02em;color:var(--tinta);
}
.aviso-diario .aviso-titulo b{font-weight:800}
.aviso-diario .aviso-pie{font-size:0.9375rem;color:var(--tinta-media)}
.aviso-diario .aviso-ir{
  flex:0 0 auto;white-space:nowrap;
  font-family:var(--datos);font-size:0.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rojo-tinta);
  border:1px solid var(--rojo-tinta);padding:10px 16px;
}
.aviso-diario:hover .aviso-ir{background:var(--rojo);border-color:var(--rojo);color:#fff}
/* El del canal pesa más que el de la revista: es el que pide algo del lector
   —que se suscriba— y no sólo le avisa que algo salió. Va en rojo pleno. */
.aviso-diario.canal{background:var(--rojo);border-color:var(--rojo);color:#fff}
.aviso-diario.canal .aviso-rubro{color:rgba(255,255,255,.82)}
.aviso-diario.canal .aviso-titulo,
.aviso-diario.canal .aviso-pie{color:#fff}
.aviso-diario.canal .aviso-pie{opacity:.9}
.aviso-diario.canal .aviso-ir{color:var(--rojo);background:#fff;border-color:#fff}
.aviso-diario.canal:hover .aviso-ir{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* el del newsletter no lleva a ningún lado: el campo está ahí mismo */
.aviso-diario .alta-correo{
  flex:1 1 20rem;min-width:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.aviso-diario .alta-correo input{
  flex:1 1 11rem;min-width:0;font:inherit;font-size:0.875rem;padding:10px 12px;
  background:var(--papel);color:var(--tinta);border:1px solid var(--filete-fuerte);border-radius:0;
}
.aviso-diario .alta-correo input:focus{outline:2px solid var(--rojo);outline-offset:-1px}
.aviso-diario .alta-correo button{
  flex:0 0 auto;font-family:var(--datos);font-size:0.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;padding:11px 18px;
  background:var(--rojo);color:#fff;border:1px solid var(--rojo);
}
.aviso-diario .alta-correo button:hover{background:var(--rojo-tinta);border-color:var(--rojo-tinta)}
.aviso-diario .alta-aviso{
  flex-basis:100%;font-family:var(--datos);font-size:0.75rem;color:var(--tinta-debil);
  margin:0;min-height:1rem;
}
/* la confirmación pesa: es la única señal de que el correo quedó */
.aviso-diario .alta-aviso.listo{color:var(--rojo-tinta);font-weight:700}

@media (max-width:760px){
  .aviso-diario{padding:16px 0}
  /* el del canal tiene fondo: sin aire adentro el texto queda contra el borde
     del rojo, que es peor que contra el borde de la página */
  .aviso-diario.canal{padding:18px 16px}
  .aviso-diario .aviso-titulo{font-size:1.4375rem}
  .aviso-diario .aviso-ir{margin-top:4px}
}

/* ─── pie ─────────────────────────────────────────────────────────────── */
.pie{background:var(--negro-canal);color:var(--canal-tinta);padding:56px 0 40px;margin-top:0}
.pie a{color:var(--canal-tinta)}
.pie a:hover{color:var(--rojo)}
.pie h3{font-family:var(--datos);font-size:0.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--canal-dato);margin-bottom:14px}
.pie li{font-family:var(--datos);font-size:0.8125rem;line-height:1.625rem}
.pie .redes{display:flex;flex-wrap:wrap;gap:6px}
.pie .redes a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--canal-filete);color:var(--canal-tinta)}
.pie .redes a:hover{color:var(--rojo);border-color:var(--rojo)}
/* el canal de WhatsApp lleva nombre y fondo: es al que más interesa que la gente se suscriba */
.pie .redes a.destacada{width:auto;padding:0 14px 0 12px;gap:9px;background:var(--rojo);
  border-color:var(--rojo);color:#fff;font-family:var(--datos);font-size:0.6875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pie .redes a.destacada:hover{color:#fff;background:var(--rojo-tinta);border-color:var(--rojo-tinta)}
/* Cuando la fila ya no entra en un renglón —el canal mide 196 px y los seis
   iconos 294, así que hacen falta unos 500—, el canal se queda solo arriba y
   los iconos bajan enteros. Los dos renglones van centrados: media fila de
   iconos colgando a la derecha del canal se lee como un sobrante. */
@media (max-width:560px){
  .pie .redes{justify-content:center}
  .pie .redes a.destacada{flex-basis:100%;justify-content:center}
}
.colofon{border-top:1px solid var(--canal-filete);margin-top:36px;padding-top:20px;
  font-family:var(--datos);font-size:0.75rem;color:var(--canal-dato)}

/* ─── índice de gremios: nombre, puntillado, número ───────────────────── */
.pie-linea{display:flex;align-items:baseline;gap:8px;padding:7px 0;
  border-bottom:1px solid var(--filete)}
.pie-linea i{flex:1;border-bottom:1px dotted var(--tinta-debil);transform:translateY(-3px)}
.pie-linea b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--tinta)}

/* ─── cuerpo de la nota ───────────────────────────────────────────────── */
.cuerpo-nota{max-width:620px;margin-top:30px}
/* Justificado, como el impreso. El corte de palabra ya estaba —y hace falta
   justamente acá: sin él, justificar una columna angosta abre ríos de blanco
   entre palabra y palabra—. El idioma lo toma del <html lang="es">, que es lo
   que le dice al navegador dónde puede partir. */
.cuerpo-nota p{hyphens:auto;text-align:justify;text-justify:inter-word;
  font-size:1.1875rem;line-height:1.875rem;margin-bottom:22px}
/* la última línea de un párrafo nunca se estira: eso es lo que separa el
   justificado de un diario del de un procesador de textos */
.cuerpo-nota p:last-child{text-align:justify}
.cuerpo-nota h2{font-family:var(--titular);font-size:1.625rem;line-height:1.875rem;font-weight:800;
  margin:34px 0 14px}
.cuerpo-nota blockquote{margin:28px 0;padding-left:20px;border-left:3px solid var(--rojo);
  font-family:var(--titular);font-style:italic;font-size:1.5rem;line-height:2.0625rem;color:var(--tinta)}

/* ─── esquemas del sistema ────────────────────────────────────────────── */
.paleta{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.paleta i{display:block;height:56px;border:1px solid var(--filete)}
.paleta b{display:block;font-family:var(--datos);font-size:0.8125rem;font-weight:700;margin-top:10px}
.paleta code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.75rem;color:var(--tinta-debil);margin-top:2px}
.paleta span{display:block;font-size:0.875rem;line-height:1.3125rem;color:var(--tinta-media);margin-top:7px}

.escala{border-top:1px solid var(--filete)}
.escala>div{display:flex;gap:24px;align-items:baseline;padding:14px 0;
  border-bottom:1px solid var(--filete)}
.escala span{flex:0 0 5.75rem;font-family:var(--datos);font-size:0.6875rem;font-weight:700;
  letter-spacing:.06em;color:var(--tinta-debil);font-variant-numeric:tabular-nums}
.escala p{flex:1;min-width:0}

.regla-largo{margin-top:14px;border-top:1px solid var(--filete)}
.regla-largo div{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;padding:10px 0;
  border-bottom:1px solid var(--filete);font-family:var(--datos);font-size:0.875rem;
  color:var(--tinta-media)}
.regla-largo b{flex:0 0 5.75rem;color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums}
.regla-largo i{color:var(--rojo);font-style:normal}

.senas{counter-reset:s;padding:0;margin:0;list-style:none;border-top:1px solid var(--filete)}
.senas li{counter-increment:s;position:relative;padding:20px 0 20px 54px;
  border-bottom:1px solid var(--filete);font-size:1.0625rem;line-height:1.6875rem;color:var(--tinta-media);
  max-width:80ch}
.senas li::before{content:counter(s);position:absolute;left:0;top:20px;
  font-family:var(--datos);font-size:0.8125rem;font-weight:700;color:var(--rojo);
  border-top:3px solid var(--rojo);padding-top:6px;width:34px}
.senas b{color:var(--tinta);font-weight:700}

.roto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 28px}
.roto>div{display:flex;gap:16px;align-items:baseline;padding:16px 0;
  border-bottom:1px solid var(--filete)}
.roto b{flex:0 0 5.75rem;font-family:var(--datos);font-size:1.375rem;font-weight:800;color:var(--rojo);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.roto span{flex:1;min-width:0;font-size:0.875rem;line-height:1.375rem;color:var(--tinta-media)}
.roto code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem}

.barrita{height:34px;background:var(--papel);border:1px solid var(--filete);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--datos);font-size:0.6875rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-debil);text-align:center;padding:0 6px}
.barrita.hueco{background:transparent;border-style:dashed;color:var(--tinta-media)}

/* ─── vistas ──────────────────────────────────────────────────────────── */
.vista[hidden]{display:none}
[hidden]{display:none !important}

/* ─── responsive ──────────────────────────────────────────────────────── */
/* columna principal y riel: en escritorio 8+4, y de tableta para abajo, apilados.
   Sin esto, un riel en 9/13 sobre una grilla de 8 columnas se sale de la página. */
.principal{grid-column:1/9}
.principal.angosta{grid-column:1/8}
.riel{grid-column:9/13}

@media (max-width:1023px){
  .g12{grid-template-columns:repeat(8,1fr);gap:20px}
  .principal,.principal.angosta,.riel{grid-column:1/-1}
  .riel{border-left:0;padding-left:0;border-top:1px solid var(--filete);padding-top:24px;margin-top:8px}
  .t9{font-size:2.75rem;line-height:2.875rem}
  .t8{font-size:2.375rem;line-height:2.5rem}
  .t7{font-size:2.125rem;line-height:2.3125rem}
  /* de tableta para abajo, las columnas de cuatro y de tres pasan a dos por fila,
     y los titulares de esas columnas bajan un escalón: en 8 columnas, cuatro al
     lado quedaban demasiado angostas para la letra grande */
  .cuarto,.tercio{grid-column:span 4}
  .t5{font-size:1.6875rem;line-height:1.875rem}
  .t4{font-size:1.5rem;line-height:1.6875rem}
}
@media (max-width:1023px){
  .riel-clips{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)) !important}
  .riel-clips>*{min-width:0}
}
@media (max-width:760px){
  .ancho{padding:0 18px}
  .g12{grid-template-columns:repeat(4,1fr);gap:18px}
  .g12>*{grid-column:1/-1 !important}
  .riel-clips{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)) !important}
  .escala>div{flex-direction:column;gap:6px}
  .escala span{flex:none}
  .fila .foto{display:none}
  .cabecera{flex-direction:column;align-items:flex-start}
  .oreja{border-left:0;padding-left:0;border-top:1px solid var(--filete);padding-top:14px;max-width:none}
  .senas li{padding-left:0;padding-top:44px}
  .senas li::before{top:14px}
  .corondel{border-left:0;padding-left:0;border-top:1px solid var(--filete);padding-top:20px}
  .t9{font-size:2.5rem;line-height:2.625rem}
  .t8{font-size:2.125rem;line-height:2.25rem}
  .t7{font-size:1.875rem;line-height:2.0625rem}
  .t6{font-size:1.6875rem;line-height:1.875rem}
  .t5{font-size:1.5625rem;line-height:1.75rem}
  .t4{font-size:1.4375rem;line-height:1.625rem}
  .t3{font-size:1.3125rem;line-height:1.5rem}
  .bajada{font-size:1.125rem;line-height:1.75rem}
  .pliego{padding:44px 0;margin:32px 0}
  .piso{padding-top:24px;padding-bottom:28px}
}


/* ═══ añadidos del sitio estático multipágina ═══ */
.foto{background:var(--filete)}
.foto img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.foto.tiene::after{content:none}
.fila .miniatura{flex:0 0 120px;width:120px;aspect-ratio:3/2;background:var(--filete);overflow:hidden}
.fila .miniatura img{width:100%;height:100%;object-fit:cover;display:block}
.gris{filter:grayscale(1) contrast(1.04)}
.gris:hover{filter:none}
.canal .foto img{opacity:.92}

.migas{font-family:var(--datos);font-size:0.75rem;color:var(--tinta-debil);margin-bottom:18px}
.migas a:hover{color:var(--rojo-tinta)}

.filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);padding:16px 0;margin:24px 0}
.filtros input,.filtros select{border:1px solid var(--filete);padding:11px 13px;
  background:var(--papel);color:var(--tinta);font-family:var(--datos);font-size:0.875rem}
.filtros input{flex:1 1 260px;min-width:0;border-color:var(--tinta)}
.filtros .cuenta{font-family:var(--datos);font-size:0.75rem;color:var(--tinta-debil);
  margin-left:auto;font-variant-numeric:tabular-nums}
.sin-resultado{font-family:var(--datos);font-size:0.875rem;color:var(--tinta-media);padding:28px 0}

.paginacion{display:flex;align-items:center;gap:12px;margin-top:26px;
  font-family:var(--datos);font-size:0.8125rem;font-weight:600;flex-wrap:wrap}
.paginacion .aqui{background:var(--tinta);color:var(--papel);padding:6px 11px}
.paginacion a{padding:6px 11px;border:1px solid var(--filete)}
.paginacion a:hover{border-color:var(--tinta)}

.dia{font-family:var(--datos);font-size:0.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta);border-bottom:1px solid var(--tinta);
  padding:22px 0 8px}
.dia:first-child{padding-top:0}

.volver-archivo{background:var(--gris-papel);border-bottom:1px solid var(--tinta);
  font-family:var(--datos);font-size:0.8125rem;padding:10px 0}
.volver-archivo .ancho{display:flex;gap:14px;align-items:center;justify-content:space-between}
.volver-archivo b{font-weight:700}

.ficha-autor{display:flex;gap:18px;align-items:flex-start;
  border-top:3px solid var(--filete-fuerte);padding-top:18px}
/* La inicial del autor dentro de un cuadro gris se sacó: prometía una foto
   que no tenemos y quedaba una letra suelta ocupando el lugar de una cara.
   Cuando haya retratos de verdad, vuelve. */

@media (max-width:760px){
  .fila .miniatura{display:none}
  .filtros .cuenta{margin-left:0}
}


/* ═══ fachada de video ═══ */
.video{position:relative;display:block;width:100%;background:var(--gris-canal);
  overflow:hidden;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.video img{width:100%;height:100%;object-fit:cover;display:block}
.video iframe{width:100%;height:100%;border:0;display:block}
.video:hover .play::before{border-left-color:#fff}
.video:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
.video[data-abierto] .play,.video[data-abierto] .duracion{display:none}
.v169{aspect-ratio:16/9}
.v916{aspect-ratio:9/16}
.pie-video{font-family:var(--datos);font-size:0.75rem;color:var(--tinta-debil);margin-top:8px}
.canal .pie-video{color:var(--canal-dato)}
.serie{font-family:var(--datos);font-size:0.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rojo-tinta)}
.canal .serie{color:var(--rojo)}

/* ═══════════════════════════════════════════════════════════════════════
   CELULAR
   La mayor parte de los lectores entra desde el teléfono. Acá el diario
   deja de ser una portada que se achica y pasa a ser un feed con pestañas
   que se pasan de costado y notas que siguen cargando al bajar.
   ═══════════════════════════════════════════════════════════════════════ */

/* pestañas: en escritorio no existen, manda la barra de secciones */
.tabs{display:none}
.panel{display:none}
.panel[data-activo]{display:block}
.cargador{display:block;text-align:center;padding:26px 0;
  font-family:var(--datos);font-size:0.75rem;color:var(--tinta-debil);min-height:20px}
.cargador[data-fin]{border-top:1px solid var(--filete)}

@media (max-width:760px){
  /* — cabecera compacta: el diario tiene que empezar arriba de todo — */
  .franja-fecha{min-height:0;padding:5px 0;flex-wrap:nowrap;overflow:hidden}
  .franja-fecha .izq{font-size:0.6875rem;white-space:nowrap}
  .solo-escritorio{display:none}
  .cabecera{padding:12px 0 10px;flex-direction:row;align-items:center;justify-content:space-between}
  .lema{display:none}
  .oreja{display:none}

  /* La barra se queda a la vista mientras se lee: es la única puerta a las
     secciones. Las pestañas se pegan debajo de ella —antes las dos al mismo
     borde, montadas— y la barra pasa por encima para que su menú no quede
     tapado. */
  .barra-secciones{position:sticky;top:var(--chrome-h);z-index:45}
  .barra-secciones .mas-menu{z-index:80}
  .barra-secciones .mas-boton{padding-left:0}
  /* En el teléfono la barra es para las secciones. Audiovisual y Archivo ya
     están abajo, en la barra del pulgar, y acá le sacaban el lugar a las dos
     que el lector busca primero. */
  /* En pantalla angosta quedan las dos secciones que entran y el archivo, que
     es una de sus tres puertas. Audiovisual se va: ya está en la barra del
     pulgar, abajo. */
  .barra-secciones .sep,
  .barra-secciones .ancho > a.propio.tv{display:none}
  .barra-secciones .ancho > a.propio.archivo{border-right:0;padding-right:0}
  .barra-secciones .secciones-visibles .larga{display:none}
  .barra-secciones .secciones-visibles .corta{display:inline}
  /* apretado para que entren las dos secciones y el archivo, que es lo que
     tiene que quedar a la vista en una pantalla angosta */
  .barra-secciones a{font-size:0.75rem;padding:11px 8px;letter-spacing:.04em}
  .barra-secciones .mas-boton{padding-right:10px;min-width:0}

  /* — pestañas de sección, que se pasan de costado — */
  /* las pestañas se van: el ícono de secciones ya es la puerta, y dos renglones
     con las mismas secciones —una de ellas "Portada" estando en la portada— es
     un renglón de más en la pantalla que menos tiene */
  .tabs{
    display:none;position:sticky;top:calc(var(--chrome-h) + var(--barra-h));z-index:42;
    background:var(--papel);border-bottom:1px solid var(--filete);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{
    font-family:var(--datos);font-size:0.8125rem;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--tinta-media);white-space:nowrap;
    padding:14px 15px;border-bottom:3px solid transparent;scroll-snap-align:center;
  }
  .tabs a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--rojo)}
  /* La barra se queda siempre. Las pestañas deslizables sirven para pasar de
     una sección a la de al lado, pero no muestran las trece ni se ven como una
     puerta: en pantalla angosta el menú es lo único que las reúne. */
  .barra-secciones .ancho{padding-right:0}
  .barra-secciones .sep{flex:0 0 14px}

  /* — el carrusel de secciones (sólo si el JS arrancó en modo app) — */
  .es-app .pager{
    display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .es-app .pager::-webkit-scrollbar{display:none}
  .es-app .panel{display:block;flex:0 0 100%;min-width:0;scroll-snap-align:start;
    scroll-snap-stop:always;padding-bottom:20px}
  .es-app .panel[hidden]{display:block}

  /* — el feed: la fila es la unidad de lectura — */
  .fila{gap:12px;padding:15px 0;align-items:flex-start}
  .fila .hora{display:none}
  .fila .miniatura{display:block;flex:0 0 92px;width:92px;order:2}
  .fila .cuerpo{order:1}
  .fila .t2,.fila .t3{font-size:1.125rem;line-height:1.4375rem}
  /* 2.75rem y no 44px: es la altura de la barra de arriba, que crece con la
     letra. Hoy toda página con franja de día es body.app y manda el top:0 de más
     abajo, así que esto es la red por si alguna deja de serlo. */
  .dia{position:sticky;top:calc(var(--chrome-h) + 2.75rem);background:var(--papel);z-index:20}


  .piso:first-of-type .epigrafe{margin-top:10px}

  /* — el filtro no ocupa media pantalla — */
  .filtros{gap:8px;padding:12px 0;margin:16px 0}
  .filtros input{flex:1 1 100%}
  .filtros select{flex:1 1 calc(50% - 4px);font-size:0.8125rem;padding:10px}
  .filtros .cuenta{flex:1 1 100%;margin-left:0;text-align:right}

  /* — objetivos de toque más grandes — */
  .barra-secciones a,.tabs a{min-height:44px;display:flex;align-items:center}
  .boton-sumate{width:100%;text-align:center}
  .paginacion{display:none}
}

@media (max-width:420px){
  .t9{font-size:2.125rem;line-height:2.25rem}
  .t8{font-size:1.875rem;line-height:2.0625rem}
  .t7{font-size:1.6875rem;line-height:1.875rem}
  .fila .miniatura{flex:0 0 78px;width:78px}
}

/* el río de la portada: tres columnas en escritorio, una en el teléfono, y
   las notas que van entrando fluyen solas entre ellas */
#rio .lista{column-count:3;column-gap:24px;column-rule:1px solid var(--filete)}
#rio .fila{break-inside:avoid;-webkit-column-break-inside:avoid}
@media (max-width:1023px){#rio .lista{column-count:2}}
@media (max-width:760px){#rio .lista{column-count:1;column-rule:none}}


/* ═══ con Jost, la versalita condensada se dibuja con el espaciado ═══ */
.volanta,.rubro,.cargo,.credencial .cargo,.lema,.sec,.serie,
.barra-secciones a{letter-spacing:.1em}

/* la óptica de Piazzolla se ajusta sola al cuerpo */
body{font-optical-sizing:auto}
::selection{background:var(--rojo);color:#fff}

/* ═══════════════════════════════════════════════════════════════════════
   EL TELÉFONO ES UNA APLICACIÓN
   Barra inferior fija, pestañas que se pasan de costado como en Instagram,
   y cada sección con su propio scroll: volvés a una pestaña y está donde
   la dejaste. En escritorio nada de esto existe.
   ═══════════════════════════════════════════════════════════════════════ */

/* — barra inferior — */
.appbar{display:none}
.pill-vivo{display:none}

@media (max-width:760px){
  /* el aparato de escritorio se va */
  .franja-fecha{display:none}
  .oreja{display:none !important}
  .lema{display:none}

  /* cabecera de una sola línea: logo + el latido del canal */
  .cabecera{padding:18px 0 12px;flex-direction:row;align-items:center;
    justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:0}
  .cabecera > div:first-child{padding-left:4px}
  .pill-vivo{display:inline-flex;align-items:center;gap:6px;
    flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
    font-family:var(--datos);font-size:0.625rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--rojo-tinta);white-space:nowrap}

  /* barra inferior: cinco lugares, siempre a mano del pulgar */
  .appbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--papel);border-top:1px solid var(--filete);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .appbar a{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 0 7px;font-family:var(--datos);font-size:0.625rem;font-weight:600;
    letter-spacing:.03em;color:var(--tinta-debil);border-top:3px solid transparent;
  }
  .appbar .ap-eti{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .appbar a svg{width:22px;height:22px;stroke:currentColor;fill:none;
    stroke-width:1.6;stroke-linecap:square}
  .appbar a[aria-current="page"]{color:var(--tinta);border-top-color:var(--rojo)}
  body{padding-bottom:calc(4rem + env(safe-area-inset-bottom))}

  /* Las pestañas ya no se dibujan: el ícono de secciones es la puerta y una
     sola línea alcanza. Siguen en el marcado porque son las que llevan la
     cuenta de en qué panel está el carrusel —marcan la URL y el título— y
     sacarlas de ahí rompería el deslizamiento. */
  .tabs{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .tabs a{font-size:0.8438rem;font-weight:700;letter-spacing:.03em;padding:13px 14px;
    color:var(--tinta-media);border-bottom:3px solid transparent;min-height:44px}
  .tabs a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--rojo)}

  /* — la concha de aplicación: sólo portada y secciones — */
  body.app{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;
    padding-bottom:0}
  body.app.acercado{height:auto;overflow:visible;display:block;
    padding-bottom:calc(4rem + env(safe-area-inset-bottom))}
  body.app.acercado main,
  body.app.acercado .pager{display:block;overflow:visible;height:auto}
  body.app.acercado .panel{display:none;height:auto;overflow:visible}
  body.app.acercado .panel[data-activo]{display:block}
  body.app.acercado .pie{display:block}
  body.app #cabecera-diario{flex:none}
  /* main envuelve pestañas y carrusel: también tiene que ser un tubo flexible */
  body.app main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  body.app .tabs{flex:none}
  body.app .pager{flex:1 1 auto;min-height:0;display:flex;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    overscroll-behavior-x:contain}
  body.app .panel{flex:0 0 100%;min-width:0;height:100%;
    overflow-y:auto;overflow-x:hidden;scroll-snap-align:start;scroll-snap-stop:always;
    -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
    padding-bottom:calc(4.75rem + env(safe-area-inset-bottom))}
  body.app .pie{display:none}
  /* los encabezados de día se pegan al techo del panel, no de la ventana */
  body.app .dia{position:sticky;top:0;z-index:20}

  /* en pantalla chica las fotos van en color: una columna no pelea con nadie */
  .gris{filter:none}

}

/* — esqueleto de carga: el feed nunca muestra un hueco mudo — */
.esq{padding:15px 0;border-bottom:1px solid var(--filete)}
.esq i{display:block;height:13px;margin-bottom:8px;
  background:linear-gradient(90deg,var(--filete) 25%,var(--gris-papel) 45%,var(--filete) 65%);
  background-size:300% 100%}
.esq i:nth-child(1){width:92%}
.esq i:nth-child(2){width:70%}
.esq i:nth-child(3){width:34%;height:10px;margin-bottom:0}
@media (prefers-reduced-motion:no-preference){
  .esq i{animation:esqbrillo 1.3s ease-in-out infinite}
}
@keyframes esqbrillo{0%{background-position:100% 0}100%{background-position:0 0}}

/* ═══ la letra en manos del lector ═══ */
.letra-control{display:flex;align-items:center;border:1px solid var(--filete);flex-shrink:0}
.letra-control button{font-family:var(--datos);font-size:13px;font-weight:700;
  background:none;border:0;color:var(--tinta-media);padding:7px 9px;cursor:pointer;
  min-height:2.25rem}
.letra-control button:hover{color:var(--rojo-tinta)}
.letra-nivel{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;
  border-left:1px solid var(--filete) !important;border-right:1px solid var(--filete) !important}
#letra-aviso{position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom));
  transform:translateX(-50%);background:var(--tinta);color:var(--papel);
  font-family:var(--datos);font-size:.8125rem;font-weight:700;letter-spacing:.04em;
  padding:9px 16px;opacity:0;transition:opacity .15s;pointer-events:none;z-index:99;
  white-space:nowrap}
#letra-aviso[data-ver]{opacity:1}
@media (max-width:760px){
  .letra-control{margin-left:auto}
  .letra-control button{padding:6px 7px}
  .cabecera{gap:8px}
}

/* ═══════════════════════════════════════════════════════════════════════
   LO QUE VIENE DEL IMPRESO
   Medido sobre los N° 148 y 149: tabloide de 290×420 mm, FuturaStd-Bold y
   FuturaStd-MediumOblique, rojo #E82028, cabezal sobre banda #F0F0F0.
   El cuerpo va vectorizado en el PDF, pero es una serif justificada a tres
   columnas con capitular. Acá se traduce lo que tiene sentido en pantalla.
   ═══════════════════════════════════════════════════════════════════════ */

/* — la capitular con que abre cada nota del impreso — */
.cuerpo-nota > p:first-of-type::first-letter{
  float:left;font-family:var(--titular);font-weight:700;
  font-size:3.6em;line-height:.82;margin:.06em .14em 0 0;color:var(--rojo-tinta);
}
.cuerpo-nota.sin-capitular > p:first-of-type::first-letter{
  float:none;font-size:inherit;line-height:inherit;margin:0;color:inherit;
  font-family:inherit;font-weight:inherit;
}

/* — el destacado: palo seco, filetes arriba y abajo, como en la columna del impreso — */
.destacado{
  font-family:var(--titular);font-weight:700;font-size:1.3125rem;line-height:1.6875rem;
  color:var(--tinta);border-top:1px solid var(--tinta);border-bottom:1px solid var(--tinta);
  padding:1rem 0;margin:1.75rem 0;max-width:22rem;
}
.principal .destacado{float:right;margin:.5rem 0 1.25rem 2rem;max-width:17rem}

/* — el epígrafe del impreso es Futura oblicua, no serif — */
.epigrafe{font-family:var(--datos);font-style:italic}
.epigrafe .credito{font-style:normal}

/* — la firma centrada en itálica de las notas de opinión — */
.firma-impresa{font-family:var(--datos);font-style:italic;font-size:1rem;
  color:var(--tinta-media);text-align:center;margin-top:.5rem}

/* — la banda roja del pie de tapa — */
.banda-roja{
  background:var(--rojo);color:#fff;text-align:center;
  padding:1.25rem 0;margin-top:0;
}
.banda-roja a{font-family:var(--titular);font-weight:700;font-size:1.5rem;
  letter-spacing:.01em;color:#fff}
.banda-roja span{font-family:var(--titular);font-weight:400;font-size:1.5rem;opacity:.9}
@media (max-width:760px){
  .banda-roja a,.banda-roja span{font-size:1.125rem}
  .principal .destacado{float:none;margin:1.5rem 0;max-width:none}
  .cuerpo-nota > p:first-of-type::first-letter{font-size:3.1em}
}

/* — el rótulo de sección del impreso: rojo, versalitas, con filete al lado — */
.rubro-impreso{
  display:flex;align-items:center;gap:1rem;
  border-bottom:1px solid var(--filete);padding-bottom:.5rem;margin-bottom:1.5rem;
}
.rubro-impreso b{font-family:var(--datos);font-size:.8125rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rojo)}
.rubro-impreso i{flex:1;border-top:1px solid var(--filete);font-style:normal}
.rubro-impreso .der{font-family:var(--datos);font-size:.75rem;color:var(--tinta-debil)}

/* — el freno del scroll: después de dos tirones decide el lector — */
.mas-notas{
  font-family:var(--datos);font-size:.9375rem;font-weight:700;letter-spacing:.02em;
  background:none;color:var(--tinta);border:1px solid var(--tinta);
  padding:.8125rem 1.5rem;cursor:pointer;min-height:2.75rem;
}
.mas-notas:hover{background:var(--tinta);color:var(--papel)}
.mas-notas[disabled]{opacity:.5;cursor:default}
.canal .mas-notas{color:var(--canal-tinta);border-color:var(--canal-filete)}

/* — el interruptor de tono, al lado del de letra — */
.tono-control button{display:flex;align-items:center;justify-content:center;padding:7px 8px}
.tono-control button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
@media (max-width:760px){.tono-control button{padding:6px 6px}}

/* — la cabecera se agrupa para no depender del ancho de la letra —
   Con las tres piezas sueltas eran cuatro huecos de 24 px y la oreja se caía de
   renglón apenas el lema crecía un poco. Agrupadas y sin envolver, aguanta. */
.controles{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
/* El logotipo no se parte nunca: la regla que quiebra palabras largas —la del
   zoom al 200%— lo hacía caer letra por letra cuando el bloque se encogía. */
.masthead,.lema{overflow-wrap:normal;word-break:normal}
.masthead{white-space:nowrap}

@media (min-width:47.5em){
  /* El bloque de marca puede encogerse: el logo ya está atado a vw y no se
     deforma, y el lema parte en dos renglones antes que empujar la cabecera
     fuera de la pantalla. Con flex:0 0 auto medía el lema entero de una tirada
     —788 px con la letra al 160%— y desbordaba. */
  .cabecera > div:first-child{flex:0 1 auto;min-width:0}
  .lema{letter-spacing:.06em}
  .controles{flex-wrap:wrap;justify-content:flex-end}
  .oreja{flex:0 1 auto;min-width:0}
}
/* Arriba de 85em entra todo en una fila; abajo, la oreja baja de renglón. El corte
   es 85em y no 1360px porque el em de un media query se mide contra el tamaño de
   letra que el lector configuró en su navegador, y así el corte acompaña a quien
   lee grande de entrada.
   Ojo con una trampa: ese em NO se entera del control de letra de la página. En un
   media query el em vale siempre 16px por más que la raíz esté al 160% —lo dice la
   especificación— así que 85em son 1360px y punto. Por eso el encabezado no puede
   confiar en el corte para no desbordar: lo que lo sostiene es que el logo esté
   atado a vw, unos renglones más arriba. */
@media (min-width:85em){
  .cabecera{flex-wrap:nowrap}
}
@media (min-width:47.5em) and (max-width:84.99em){
  .cabecera{flex-wrap:wrap}
  .oreja{flex-basis:100%;border-left:0;padding-left:0;
    border-top:1px solid var(--filete);padding-top:.75rem;margin-top:.25rem;max-width:none}
}
@media (max-width:760px){
  /* En el celular la cabecera son dos renglones limpios y no un rejunte: arriba el
     logo con el latido del canal a la derecha, abajo los controles en una sola fila.
     Antes los controles se plegaban en dos filas al costado del logo y dejaban un
     hueco blanco debajo —el mismo problema del escritorio, en chico—. Si no entran,
     la fila se corre de costado en vez de partirse. */
  /* Cuando el título pasa arriba y los controles caen debajo, los dos van
     centrados: un logo pegado a la izquierda con una fila de botones debajo
     también a la izquierda se lee como un encabezado a medio armar. */
  .cabecera{flex-wrap:wrap;align-items:center;justify-content:center;
    gap:.5rem .625rem;text-align:center}
  .cabecera > div:first-child{order:1;flex:0 0 auto;min-width:0;padding-left:0}
  .pill-vivo{order:2;margin-left:0}
  /* Ojo con el alineado a la derecha: con justify-content:flex-end el desborde se
     va para el lado izquierdo, donde no hay forma de llegar scrolleando, y el
     primer botón queda cortado para siempre. Se empuja con un margen automático,
     que alinea igual pero deja el arranque alcanzable. */
  .controles{order:3;flex-basis:100%;flex-wrap:nowrap;justify-content:center;
    margin-left:0;gap:.5rem;min-width:0;max-width:100%;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .controles::-webkit-scrollbar{display:none}
  .letra-control{margin-left:0;flex:0 0 auto}
}

/* ═══ EL LOGOTIPO ═══
   Es el logo real del partido, el mismo que usa el impreso y el sitio actual.
   No está tipiado: son letras dibujadas a mano —cada una rotada distinto, las
   bases hacen olita, los terminales cortados en ángulos que no se repiten—, así
   que no hay tipografía que lo reemplace. Viene en dos renglones; acá las dos
   palabras van en uno solo, recortando cada línea del original y apoyándolas en
   la misma base, sin retocar ni un trazo.
   Se sirve como máscara y el color se lo da el texto, así que un solo archivo
   sirve para todo: negro en la cabecera, blanco en el pie negro, y lo mismo en
   tono claro que en oscuro. Sin duplicar
   archivos ni inyectar SVG en 1.500 páginas. */
.masthead{
  display:block;width:min(13.5rem,42vw);max-width:100%;height:auto;aspect-ratio:2.026;
  background-color:currentColor;
  -webkit-mask:url('/logo-dos-lineas.svg') no-repeat left center;
  mask:url('/logo-dos-lineas.svg') no-repeat left center;
  -webkit-mask-size:contain;mask-size:contain;
  color:var(--tinta);font-size:0;
}
/* El mismo tope que arriba, y repetido con la misma especificidad adentro del
   @media del celular: .masthead.pie-logo es (0,2,0) y le gana a los .masthead
   (0,1,0), así que sin esto el logo del pie ignoraba las dos reglas de ancho y
   crecía suelto con la letra —a 390 px y al 200% salía 339 px contra los 203 px
   del de la cabecera, un 67% más grande que el logo de arriba—. */
.masthead.pie-logo{
  width:min(12rem,58vw);aspect-ratio:8.601;
  -webkit-mask-image:url('/logo.svg');mask-image:url('/logo.svg');
}
/* el texto siempre está en el marcado: es lo que leen el buscador y el lector de pantalla */
.vh,.masthead .marca{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:760px){
  /* en el celular la cabecera es un renglón: vuelve el logo de una línea */
  /* El logo es de dos renglones también en el teléfono: "Política" arriba y
     "Obrera" abajo es la marca, y partirla en una sola línea para ganar alto la
     convierte en otra cosa. Lo que se corre abajo cuando no entra son los
     controles, que para eso están en su propio renglón. */
  .masthead{width:min(8.5rem,42vw);margin:0 auto;
    -webkit-mask-position:center;mask-position:center}
  .masthead.pie-logo{width:min(12rem,52vw)}
}

/* ═══ LA EDICIÓN IMPRESA ═══
   La tapa que se muestra es una captura de la plana 1 del PDF que entrega el
   partido, no una recreación. El PDF no se ofrece: el diario se compra. La imagen
   queda inerte al puntero —el menú del botón derecho cae en el enlace que la
   envuelve, no en el archivo— y no se puede arrastrar al escritorio. Es un freno
   de cortesía, no una cerradura. */
.tapa-marco{display:block;border:1px solid var(--filete-fuerte);background:var(--gris-papel);
  box-shadow:0 1px 0 var(--filete),0 10px 24px -18px rgba(0,0,0,.55)}
.tapa-grande,.tapa-mini{display:block;width:100%;height:auto;
  -webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
:root[data-theme="dark"] .tapa-marco,
:root:not([data-theme="light"]) .tapa-marco{box-shadow:0 0 0 1px var(--filete)}

/* La oreja de la cabecera: la tapa al lado del titular. Su altura tiene que
   parecerse a la del bloque de marca —el logo más el lema, unos 65 px—, porque la
   cabecera alinea todo abajo: si la oreja crece, se abre un hueco blanco arriba
   del logo. Por eso la tapa va a alto fijo y el titular se corta en dos renglones
   pase lo que pase con el número que venga. */
.oreja-impresa{display:flex;gap:.75rem;align-items:flex-start}
.oreja-impresa .tapa-mini{flex:0 0 auto;height:4.75rem;width:auto;aspect-ratio:.6907;
  border:1px solid var(--filete-fuerte);background:var(--gris-papel)}
.oreja-texto{min-width:0;display:flex;flex-direction:column;gap:.25rem}
.oreja-titular{font-family:var(--titular);font-weight:700;font-size:1.125rem;
  line-height:1.2;letter-spacing:-.006em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* el sumario: la plana a la izquierda, como en el índice de un diario */
.sumario{margin-top:1.25rem;border-top:3px solid var(--filete-fuerte)}
.sumario-fila{display:flex;gap:1rem;align-items:baseline;
  padding:.875rem 0;border-bottom:1px solid var(--filete)}
.sumario-fila .plana{flex:0 0 2.75rem;font-family:var(--datos);font-size:0.75rem;
  font-weight:700;letter-spacing:.04em;color:var(--tinta-media);
  font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:600px){
  .sumario-fila{gap:.75rem}
  .sumario-fila .plana{flex-basis:2.25rem}
}

/* ═══ LA NOTA, PELADA ═══
   Al entrar a una nota no hay riel al costado ni recuadros peleándole la atención
   al texto: una sola columna, de la misma medida que el cuerpo —620 px, unos 66
   caracteres, que es donde el ojo no se pierde de renglón—. La firma, el video y
   lo que sigue viven abajo, después del punto final. */
.lectura{max-width:38.75rem;margin-inline:auto}
.lectura .cuerpo-nota{max-width:none}
.lectura .bajada{max-width:none}
.lectura .migas{margin-bottom:1.25rem}
/* La firma arriba y la fecha debajo, no una a cada punta del renglón. Enfrentadas
   quedaba un hueco en el medio y el ojo no sabía si leer de izquierda a derecha o
   saltar; además, con la fecha más corta el hueco se hizo más grande. */
.credito-nota{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
  margin-top:1.25rem;padding:.875rem 0;
  border-top:1px solid var(--filete);border-bottom:1px solid var(--filete)}
.credito-nota > div{min-width:0}
/* los minutos de lectura pesan un poco más que la fecha: es el dato por el que
   alguien decide si se sienta a leerla ahora o la deja para después */
.credito-nota .lectura-min{color:var(--tinta);font-weight:700}

/* compartir: los enlaces los completa el navegador con la dirección real */
.compartir{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.compartir-pie{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--filete)}
.compartir .rubro{margin-right:.25rem}
.compartir a,.compartir button{font-family:var(--datos);font-size:0.75rem;font-weight:600;
  letter-spacing:.03em;color:var(--tinta-media);background:none;cursor:pointer;
  border:1px solid var(--filete);padding:.4375rem .75rem;line-height:1}
.compartir a:hover,.compartir button:hover{border-color:var(--tinta);color:var(--tinta)}

/* la cola de la nota: lo que rodea, ya leído el texto */
.cola-nota{border-top:3px solid var(--filete-fuerte);margin-top:2.5rem}

/* Donde el prototipo no sabe, lo dice. Antes acá había una afirmación inventada
   sobre las redes de los compañeros; es preferible marcar el hueco. */
.nota-prototipo{font-family:var(--datos);font-size:0.75rem;line-height:1.125rem;
  color:var(--tinta-media);margin-top:.875rem;padding-left:.75rem;
  border-left:2px solid var(--filete)}

/* ═══ EL ENCABEZADO SE ENCOGE AL BAJAR ═══
   En la portada y en las secciones el celular es una aplicación: nada scrollea la
   página, scrollea el panel. Eso dejaba la cabecera clavada arriba ocupando un
   cuarto de la pantalla mientras el lector baja. Ahora, apenas empieza a bajar, la
   cabecera se va y quedan sólo las pestañas; al subir, o
   al llegar arriba de todo, vuelven. Es lo que hace cualquier aplicación de
   noticias, y en un teléfono devuelve 130 px de lectura. */
@media (max-width:760px){
  body.app.encogido #cabecera-diario{display:none}
}

/* En pantallas angostas el porcentaje se va: son 44 px que hacen la diferencia
   entre que la fila entre entera o haya que correrla de costado. Achicar y
   agrandar siguen ahí, y el pellizco también. */
@media (max-width:460px){
  .letra-control .letra-nivel{display:none}
}

/* ═══ LOS PESOS DEL IMPRESO ═══
   El diario se compone en Futura Std Bold para los títulos y Lyon Text para el
   cuerpo. Ninguna de las dos se puede usar en la web: Lyon declara fsType 4 —sólo
   vista previa e impresión— y su licencia pide expresamente una ampliación para
   @font-face; Futura y Minion son de Adobe, cuya licencia de escritorio tampoco
   cubre la web. Las suplentes libres, Jost y Piazzolla, son las más parecidas que
   hay: se midieron contra las reales y ganaron por métrica entre quince candidatas.

   Lo que sí se puede corregir es el peso, porque las dos son variables. Midiendo
   cuánta tinta pone cada una sobre la misma palabra al mismo cuerpo:

     Futura Std Bold  24,8% de tinta  →  Jost 700 pone 21,3% (14% menos)
                                        Jost 900 pone 24,5% (1% menos)  ✓
     Lyon Text        14,4% de tinta  →  Piazzolla 400 pone 12,4% (14% menos)
                                        Piazzolla 490 pone 14,5% (0,6% más)  ✓

   Así que la símil impresa usa 900 en los títulos y 490 en el cuerpo. En tono
   oscuro se aflojan: el texto claro sobre fondo negro siempre engorda a la vista,
   y con los mismos números quedaría más pesado que el papel, no igual. */
:root .t3,
:root .t4,
:root .t5,
:root .t6,
:root .t7,
:root .t8,
:root .t9,
:root .cuerpo-nota h2{font-weight:900}
:root .t1,
:root .t2,
:root .oreja-titular{font-weight:800}
:root .cuerpo-nota,
:root .cuerpo-nota p,
:root .bajada,
:root .bajada-chica{font-weight:490}

:root[data-theme="dark"] .t3,
:root[data-theme="dark"] .t4,
:root[data-theme="dark"] .t5,
:root[data-theme="dark"] .t6,
:root[data-theme="dark"] .t7,
:root[data-theme="dark"] .t8,
:root[data-theme="dark"] .t9{font-weight:850}
:root[data-theme="dark"] .cuerpo-nota,
:root[data-theme="dark"] .cuerpo-nota p,
:root[data-theme="dark"] .bajada,
:root[data-theme="dark"] .bajada-chica{font-weight:440}

/* ═══ LA QUINTA POSICIÓN ═══
   Lo que hay que leer aunque no sea de hoy. Va después de las noticias del día,
   como en politicaobrera.com, y tiene que verse distinto de lo que la rodea: si
   pareciera una noticia más, nadie la distinguiría y el lugar no serviría de
   nada. De ahí los filetes gruesos que la encierran y el fondo apenas cambiado. */
.destacado-central{
  border-top:3px solid var(--filete-fuerte);
  border-bottom:3px solid var(--filete-fuerte);
  background:var(--gris-papel);
  padding-top:1.75rem;padding-bottom:1.75rem;
}
.destacado-central .bajada{max-width:52ch}
@media (max-width:1023px){
  .destacado-central .riel{border-left:0;padding-left:0;margin-top:1.25rem}
}

/* ═══ RENGLONES CON MINIATURA ═══
   En una portada de diario no hay notas sin imagen: hay imágenes de distinto
   tamaño. Estas listas mostraban sólo el titular. La miniatura va chica y a la
   derecha, para que el renglón siga leyéndose como renglón y no compita con las
   piezas grandes de arriba. Cuando la nota no tiene foto no se dibuja el hueco:
   el texto ocupa todo el ancho y no queda un recuadro gris prometiendo nada. */
.renglon{display:flex;gap:.75rem;align-items:flex-start}
.renglon-texto{flex:1;min-width:0}
.mini-renglon{flex:0 0 4.5rem;width:4.5rem;aspect-ratio:3/2;overflow:hidden;
  background:var(--filete);align-self:flex-start}
.mini-renglon img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1023px){
  .mini-renglon{flex-basis:5.25rem;width:5.25rem}
}

/* ═══ LA APERTURA ═══
   Escalonada: la primera ancha, tres en fila abajo, y recién después la grande.
   Antes eran cuatro tarjetas iguales de 529 px cada una —la grilla igualaba las
   filas, así que un titular de un renglón se estiraba hasta la altura de uno de
   seis— y la grande arrancaba a 1.449 px, abajo del pliegue. Cuatro pesos
   iguales tampoco decían cuál mirar primero.

   align-items:start es lo que hace que cada tarjeta mida lo suyo: los pies
   quedan desparejos, como en cualquier diario, y desaparece el aire muerto. */
.terna{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;align-items:start;
  padding:26px 0;margin:26px 0;
  border-top:1px solid var(--filete);border-bottom:3px solid var(--filete-fuerte);
}
.terna .pieza,.pieza.ancha,.pieza.abridora{border:0;padding:0;margin:0}
/* La primera va acostada: foto al costado y no arriba. Apilada empujaba la
   grande a 1.546 px, peor que antes de rediseñar; acostada ocupa la mitad. */
.pieza.ancha{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:start}
.pieza.ancha .ancha-foto{display:block}
/* El arranque del texto al lado de la foto, recortado en líneas: en escritorio
   entra lo que la foto deja; en el celular, cuatro renglones y el "Leer más". */
.pieza.ancha .arranque{font-size:1.0625rem;line-height:1.6875rem;color:var(--tinta);margin-top:14px;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.pieza.ancha .leer-mas{display:inline-block;margin-top:10px;font-family:var(--datos);
  font-size:0.75rem;font-weight:600;color:var(--rojo-tinta)}
.pieza.ancha .leer-mas:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){ .pieza.ancha .arranque{-webkit-line-clamp:4} }
@media (max-width:1023px){ .pieza.ancha{grid-template-columns:minmax(0,1fr)} }
.pieza.abridora .epigrafe{margin-top:.5rem}
/* La foto de la nota grande lleva tope. Cuando el corondel de columnistas ocupaba
   cuatro de las doce columnas, la abridora medía ocho y la foto salía sola en su
   medida; sacado el corondel y pasada la zona a doce, la misma foto se estiraba a
   1.265 × 843 y la sección entera saltaba a 2.048 px de alto. Recortada arriba y
   abajo mantiene el peso que le toca sin comerse la portada. */
@media (min-width:1024px){
  /* El tope va en el contenedor y no sólo en la imagen: el .foto reserva el alto
     con su proporción, así que capando sólo la img quedaba la imagen en 460 y el
     hueco en 843. */
  .pieza.abridora .foto{width:100%;height:460px;aspect-ratio:auto;overflow:hidden}
  .pieza.abridora .foto img{height:100%;width:100%;object-fit:cover}
}

/* la columna de columnistas con peso propio: cada uno con su foto, no dos
   renglones sueltos al costado de una columna de mil setecientos píxeles */
.columnistas .pieza{padding-bottom:22px;margin-bottom:22px;
  border-bottom:1px solid var(--filete)}
.columnistas .pieza:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

@media (max-width:1023px){
  .terna{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}

.tags-nota{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip-tag{font-family:var(--datos);font-size:0.75rem;font-weight:600;color:var(--tinta-media);border:1px solid var(--filete-fuerte);border-radius:999px;padding:4px 12px;text-decoration:none}
.chip-tag:hover{border-color:var(--rojo);color:var(--rojo)}

/* el rótulo de sección va en su renglón: inline, al lado del título, se partía */
.fila .cuerpo .sec{display:block;margin-bottom:3px}
/* en el aviso de la revista, la nota del número va grande pero debajo del número */
.aviso-diario .aviso-nota{font-size:1.5rem;margin-top:4px}
@media (max-width:760px){ .terna{grid-template-columns:minmax(0,1fr);gap:22px} }

/* El río de abajo: dos columnas de lectura (tres dejaban ~180px para el título),
   la hora en su renglón —no al costado— y miniatura chica. En tableta, una columna. */
#rio .lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;align-items:start}
#rio .fila{flex-wrap:wrap}
#rio .fila .hora{flex:0 0 100%;line-height:1rem}
#rio .fila .miniatura{flex:0 0 92px;width:92px}
@media (max-width:1023px){ #rio .lista{grid-template-columns:minmax(0,1fr)} }

/* el buscador de la cabecera: una caja chica con la gramática de los otros controles */
.buscar-control{display:flex;align-items:center;border:1px solid var(--filete);flex-shrink:0}
.buscar-control input{border:0;background:transparent;color:var(--tinta);font-family:var(--datos);
  font-size:13px;padding:7px 10px;width:10rem;min-width:0;outline-offset:-2px}
.buscar-control input::placeholder{color:var(--tinta-debil)}
.buscar-control button{display:flex;align-items:center;padding:7px 8px;border:0;border-left:1px solid var(--filete);
  background:transparent;color:var(--tinta);cursor:pointer}
.buscar-control button:hover{color:var(--rojo-tinta)}
@media (max-width:760px){.buscar-control input{width:7rem;padding:6px 8px}}

/* la barra del pulgar reparte el ancho entre las cuatro pestañas y deja que
   «Archivo histórico» vaya en dos renglones en vez de cortarse */
@media (max-width:760px){
  .appbar a{flex:1 1 0;min-width:0;padding-left:2px;padding-right:2px}
  .appbar .ap-eti{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.05;text-align:center}
}