/* ═══════════════════════════════════════════════════════════════════════
   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:#EFEDE8;
  --negro-canal:#0E0E0E;
  --gris-canal:#2A2825;
  --canal-tinta:#FFFFFF;
  --canal-dato:#A8A49B;
  --canal-filete:#2A2825;
  /* — tintas, todas cálidas, ninguna azulada — */
  --tinta:#111111;
  --tinta-media:#5A5852;
  --tinta-debil:#77746C;
  --filete:#D6D3CC;
  --filete-fuerte:#111111;
  /* — el rojo del logo, promovido a color de marca — */
  --rojo:#E6352B;
  --rojo-tinta:#B71D15;
  /* — la única cosa brillante del diario — */
  --amarillo:#FFD200;
  --sobre-amarillo:#111111;
  /* — chrome de la propuesta, fuera del diseño — */
  --chrome:#1C1B18;
  --chrome-tinta:#EDEAE3;
  --chrome-h:46px;

  --titular:'Newsreader','Iowan Old Style',Charter,Georgia,'Times New Roman',serif;
  --texto:'Piazzolla',Charter,Georgia,'Iowan Old Style',serif;
  --datos:'Archivo','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',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;
    --chrome:#0B0B09;
    --chrome-tinta:#EDEAE3;
  }
}
: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;
  --chrome:#0B0B09;
  --chrome-tinta:#EDEAE3;
}

*{box-sizing:border-box}
input,select,button{max-width:100%}
h1,h2,h3,p,a{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}

/* ─── chrome de la propuesta ─────────────────────────────────────────── */
.chrome{
  position:sticky;top:0;z-index:90;height:var(--chrome-h);
  background:var(--chrome);color:var(--chrome-tinta);
  display:flex;align-items:center;gap:4px;
  padding:0 14px;overflow-x:auto;
  font-family:var(--datos);font-size:12px;
  border-bottom:1px solid #000;
}
.chrome b{
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:10px;color:#8B867C;white-space:nowrap;margin-right:10px;
}
.chrome a,.chrome button{
  font-family:inherit;font-size:12px;font-weight:600;
  background:none;border:0;color:#B5B0A6;cursor:pointer;
  padding:6px 11px;border-radius:2px;white-space:nowrap;letter-spacing:.02em;
}
.chrome a:hover,.chrome button:hover{color:#fff}
.chrome a[aria-current="page"],.chrome button[aria-current="true"]{background:var(--rojo);color:#fff}
.nota-margen{
  font-family:var(--datos);font-size:11.5px;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}
.piso{padding:32px 0 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:12px;line-height:16px;color:var(--tinta-debil);font-variant-numeric:tabular-nums}
.volanta{
  font-size:11px;line-height:14px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--rojo-tinta);
  display:block;margin-bottom:7px;
}
.rubro{
  font-size:11px;line-height:14px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);
}
.credencial{font-size:13px;line-height:17px;color:var(--tinta-media)}
.credencial b{color:var(--tinta);font-weight:700}
.credencial .cargo{
  display:block;font-size:11px;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:64px;line-height:64px;letter-spacing:-.021em}
.t8{font-size:52px;line-height:54px;letter-spacing:-.021em}
.t7{font-size:44px;line-height:46px;letter-spacing:-.021em}
.t6{font-size:36px;line-height:39px;font-weight:700}
.t5{font-size:30px;line-height:33px;font-weight:700}
.t4{font-size:26px;line-height:29px;font-weight:700}
.t3{font-size:22px;line-height:25px;font-weight:700;letter-spacing:-.006em}
.t2{font-size:19px;line-height:23px;font-weight:700;letter-spacing:-.006em}
.t1{font-size:17px;line-height:21px;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:21px;line-height:32px;color:var(--tinta-media);margin-top:12px}
.bajada-chica{font-size:17px;line-height:27px;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:10px;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:12px;line-height:16px;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 46px;font-family:var(--datos);font-size:12px;line-height:21px;
  color:var(--tinta-debil);font-variant-numeric:tabular-nums}
.fila .cuerpo{flex:1;min-width:0}
.fila .sec{font-family:var(--datos);font-size:11px;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;
  border-top:3px solid var(--filete-fuerte);padding-top:10px;margin-bottom:20px;
}
.abre h2{font-family:var(--titular);font-size:30px;line-height:1;font-weight:800;letter-spacing:-.02em}
.abre h2 .barra{color:var(--rojo)}
.abre .mas{font-family:var(--datos);font-size:12px;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:20px}

/* ─── 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:16px;line-height:20px;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:11px;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:11px;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:12px;color:var(--tinta-media);
  font-variant-numeric:tabular-nums}
.franja-fecha .der{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.franja-fecha .der span,.franja-fecha .der a{
  font-family:var(--datos);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-media);
}
.franja-fecha .der .vivo{color:var(--rojo-tinta)}

.cabecera{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;padding:22px 0 16px;flex-wrap:wrap}
.masthead{font-family:var(--titular);font-weight:800;font-size:46px;line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;display:block}
.masthead .obrera{color:var(--rojo)}
.lema{font-family:var(--datos);font-size:11px;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:12px;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 a:first-child{padding-left:0}
.barra-secciones a:hover{color:var(--rojo-tinta)}
.barra-secciones a.propio{color:var(--rojo-tinta)}
.barra-secciones .sep{flex:0 0 24px}
.barra-secciones .partido{margin-left:auto;border-right:0;padding-right:0}

.franja-temas{
  border-bottom:1px solid var(--filete);display:flex;gap:0;
  overflow-x:auto;scrollbar-width:none;min-height:30px;align-items:center;
}
.franja-temas::-webkit-scrollbar{display:none}
.franja-temas a{
  font-family:var(--datos);font-size:12px;font-weight:600;color:var(--rojo-tinta);
  white-space:nowrap;padding:6px 14px 6px 0;
}
.franja-temas a::before{content:"/";color:var(--tinta-debil);margin-right:7px}
.franja-temas a:hover{text-decoration:underline;text-underline-offset:3px}

/* ─── 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:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--canal-dato);margin-bottom:14px}
.pie li{font-family:var(--datos);font-size:13px;line-height:26px}
.pie .red{display:flex;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--canal-filete);padding:6px 0}
.pie .red .n{color:var(--canal-dato);font-variant-numeric:tabular-nums}
.colofon{border-top:1px solid var(--canal-filete);margin-top:36px;padding-top:20px;
  font-family:var(--datos);font-size:12px;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}
.cuerpo-nota p{font-size:19px;line-height:30px;margin-bottom:22px}
.cuerpo-nota h2{font-family:var(--titular);font-size:26px;line-height:30px;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:24px;line-height:33px;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:13px;font-weight:700;margin-top:10px}
.paleta code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;color:var(--tinta-debil);margin-top:2px}
.paleta span{display:block;font-size:14px;line-height:21px;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 92px;font-family:var(--datos);font-size:11px;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;gap:12px;align-items:baseline;padding:10px 0;
  border-bottom:1px solid var(--filete);font-family:var(--datos);font-size:14px;
  color:var(--tinta-media)}
.regla-largo b{flex:0 0 92px;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:17px;line-height:27px;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:13px;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 92px;font-family:var(--datos);font-size:22px;font-weight:800;color:var(--rojo);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.roto span{flex:1;font-size:14px;line-height:22px;color:var(--tinta-media)}
.roto code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

.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:11px;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:44px;line-height:46px}
  .t8{font-size:38px;line-height:40px}
  .t7{font-size:34px;line-height:37px}
}
@media (max-width:1023px){
  .riel-clips{grid-template-columns:repeat(3,1fr) !important}
}
@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(2,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:40px;line-height:42px}
  .t8{font-size:34px;line-height:36px}
  .t7{font-size:30px;line-height:33px}
  .t6{font-size:27px;line-height:30px}
  .t5{font-size:25px;line-height:28px}
  .t4{font-size:23px;line-height:26px}
  .t3{font-size:21px;line-height:24px}
  .bajada{font-size:18px;line-height:28px}
  .masthead{font-size:34px}
  .pliego{padding:44px 0;margin:32px 0}
  .piso{padding:24px 0 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:12px;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:14px}
.filtros input{flex:1 1 260px;min-width:0;border-color:var(--tinta)}
.filtros .cuenta{font-family:var(--datos);font-size:12px;color:var(--tinta-debil);
  margin-left:auto;font-variant-numeric:tabular-nums}
.sin-resultado{font-family:var(--datos);font-size:14px;color:var(--tinta-media);padding:28px 0}

.paginacion{display:flex;align-items:center;gap:12px;margin-top:26px;
  font-family:var(--datos);font-size:13px;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:11px;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:13px;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}
.ficha-autor .retrato{flex:0 0 88px;width:88px;aspect-ratio:1;background:var(--filete);
  border:1px solid var(--filete);display:flex;align-items:center;justify-content:center;
  font-family:var(--datos);font-size:26px;font-weight:800;color:var(--tinta-debil)}

@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:12px;color:var(--tinta-debil);margin-top:8px}
.canal .pie-video{color:var(--canal-dato)}
.serie{font-family:var(--datos);font-size:11px;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:12px;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:11px;white-space:nowrap}
  .solo-escritorio{display:none}
  .franja-fecha .der a{display:none}
  .franja-fecha .der .envivo{font-size:10px;white-space:nowrap}
  .cabecera{padding:12px 0 10px;flex-direction:row;align-items:center;justify-content:space-between}
  .masthead{font-size:27px}
  .lema{display:none}
  .oreja{display:none}
  .franja-temas{min-height:26px}
  .franja-temas a{font-size:12.5px;padding:7px 13px 7px 0}

  /* la barra de secciones se queda arriba mientras se lee */
  .barra-secciones{position:sticky;top:var(--chrome-h);z-index:41}
  .barra-secciones a{font-size:12.5px;padding:11px 10px}

  /* — pestañas de sección, que se pasan de costado — */
  .tabs{
    display:flex;position:sticky;top:var(--chrome-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:13px;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)}
  /* si la página trae pestañas, la barra de secciones sobra */
  body:has(.tabs) .barra-secciones{display:none}

  /* — el carrusel de secciones — */
  .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;
  }
  .pager::-webkit-scrollbar{display:none}
  .panel{display:block;flex:0 0 100%;min-width:0;scroll-snap-align:start;
    scroll-snap-stop:always;padding-bottom:20px}
  .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:18px;line-height:23px}
  .dia{position:sticky;top:calc(var(--chrome-h) + 44px);background:var(--papel);z-index:20}


  /* — la apertura, a sangre — */
  .piso:first-of-type .pieza .foto{margin-left:-18px;margin-right:-18px;width:calc(100% + 36px);max-width:none}
  .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:13px;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,.franja-temas a{min-height:44px;display:flex;align-items:center}
  .boton-sumate{width:100%;text-align:center}
  .paginacion{display:none}
}

@media (max-width:420px){
  .masthead{font-size:23px}
  .t9{font-size:34px;line-height:36px}
  .t8{font-size:30px;line-height:33px}
  .t7{font-size:27px;line-height:30px}
  .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}}