/*
Theme Name: La Política del Interior
Theme URI: https://lapoliticadelinterior.com.ar
Description: Tema del medio La Política del Interior. Portada en tres columnas, titulares en Archivo, bajadas en Source Serif 4, logo en placas negra y roja. Incluye la API que usa n8n para cargar notas.
Version: 1.1
Text Domain: lpdi
*/
:root{
  --papel:#fff;--papel-gris:#f4f4f2;--linea:#e2e2df;--tinta:#111;--tinta-suave:#5e5e5e;
  --rojo:#d0021b;--rojo-oscuro:#a30015;--sobre-rojo:#fff;--negro-fijo:#111;--sobre-negro:#fff;
  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;--serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ancho:1280px;
}
*{box-sizing:border-box}
html{scroll-padding-top:64px}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--rojo-oscuro)}
a:focus-visible,button:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
img{max-width:100%;height:auto;display:block}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 32px}
.solo-lector{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Logo en placas */
.logo-placas{display:inline-flex;flex-direction:column;gap:5px;font-weight:800;line-height:1;text-transform:uppercase}
.logo-placas span{display:block;padding:6px 14px 5px;color:var(--sobre-negro);font-size:38px;letter-spacing:.005em;text-align:center}
.logo-placas .negra{background:var(--negro-fijo)}
.logo-placas .roja{background:var(--rojo);color:var(--sobre-rojo)}
.logo-linea{font-weight:800;font-size:22px;text-transform:uppercase;white-space:nowrap}
.logo-linea .filete{display:inline-block;width:3px;height:.9em;background:var(--rojo);margin:0 10px;vertical-align:-2px}
.logo-linea .rojo{color:var(--rojo)}

/* Cabezal */
.cabezal{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px 0}
.cabezal .izq{justify-self:start}.cabezal .der{justify-self:end}
.boton-menu{background:none;border:0;padding:8px;cursor:pointer;color:var(--tinta)}
.boton-menu svg,.buscar svg{width:26px;height:26px}
.buscar{padding:8px;display:inline-flex}
.fecha-hoy{font-size:13px;color:var(--tinta-suave);margin-right:16px}
.secciones{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.secciones ul{list-style:none;margin:0 auto;padding:0 32px;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 28px;max-width:var(--ancho)}
.secciones a{display:block;padding:14px 0;font-size:17px}
.secciones .current-menu-item a,.secciones a[aria-current]{color:var(--rojo)}
.barra-fija{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--papel);border-bottom:1px solid var(--linea);transform:translateY(-100%);transition:transform .2s;padding:12px 0}
.barra-fija.visible{transform:none}
.barra-fija .envoltura{display:flex;align-items:center;justify-content:space-between}
.cajon{position:fixed;inset:0 auto 0 0;width:min(360px,90vw);background:var(--papel);z-index:30;border-right:1px solid var(--linea);padding:24px 32px;overflow:auto;transform:translateX(-100%);transition:transform .2s}
.cajon.abierto{transform:none}
.cajon ul{list-style:none;padding:0;margin:24px 0}
.cajon li a{display:block;padding:10px 0;border-bottom:1px solid var(--linea);font-size:18px}
@media (prefers-reduced-motion:reduce){.barra-fija,.cajon{transition:none}}

/* Rótulos y piezas de nota */
.rotulo{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0;padding:20px 0;border-bottom:1px solid var(--linea)}
.rotulo::before{content:"";width:8px;height:8px;background:var(--rojo);flex:none}
.volanta{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo);margin:0 0 8px}
.firma{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);margin:10px 0 0}
.firma b{color:var(--rojo);font-weight:700}
.bajada{font-family:var(--serif);color:var(--tinta-suave);font-size:22px;line-height:32px;margin:12px 0 0}
.bajada p{margin:0}

/* Portada */
.portada{display:grid;grid-template-columns:300px 1fr 300px;border-bottom:1px solid var(--linea)}
.portada>section{padding:0 32px 32px}
.portada>section+section{border-left:1px solid var(--linea)}
.lista{list-style:none;margin:0;padding:0}
.lista li{padding:16px 0;border-bottom:1px solid var(--linea)}
.lista li:last-child{border-bottom:0}
.titular-lista{font-size:20px;line-height:25px;font-weight:700;margin:0}
.hora{display:block;font-size:12px;color:var(--tinta-suave);margin-top:6px}
.principal article h2{font-size:54px;line-height:58px;font-weight:800;letter-spacing:-.01em;margin:24px 0 0}
.principal figure{margin:20px 0 0}
.destacada{padding:20px 0;border-bottom:1px solid var(--linea)}
.destacada:last-child{border-bottom:0}
.destacada h3{font-size:24px;line-height:29px;font-weight:700;margin:12px 0 0}
.bloques{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;padding:8px 0 40px}
.bloque h4{font-size:19px;line-height:24px;font-weight:700;margin:12px 0}
.bloque .rotulo a:hover{color:var(--rojo)}
.sin-notas{font-family:var(--serif);color:var(--tinta-suave);font-size:18px;padding:24px 0}

/* Nota */
.nota{max-width:760px;margin:0 auto;padding:40px 32px 64px}
.nota h1{font-size:48px;line-height:52px;font-weight:800;letter-spacing:-.01em;margin:0}
.nota figure{margin:28px 0 0}
.nota figcaption{font-size:13px;color:var(--tinta-suave);margin-top:8px}
.cuerpo{font-family:var(--serif);font-size:19px;line-height:31px;margin-top:28px}
.cuerpo p{margin:0 0 20px}
.cuerpo h2,.cuerpo h3{font-family:var(--sans);font-weight:700;line-height:1.2;margin:32px 0 12px}
.cuerpo blockquote{margin:24px 0;padding-left:20px;border-left:3px solid var(--rojo);font-style:italic}
.cuerpo a{color:var(--rojo);text-decoration:underline;text-underline-offset:3px}
.fuente{margin-top:32px;padding:16px 20px;background:var(--papel-gris);font-size:15px;line-height:22px}
.fuente a{color:var(--rojo);text-decoration:underline}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding:0;list-style:none}
.etiquetas a{display:block;font-size:14px;padding:6px 12px;border:1px solid var(--linea)}

/* Archivo */
.archivo{max-width:900px;margin:0 auto;padding:32px}
.archivo>h1{font-size:40px;font-weight:800;margin:0 0 8px}
.item-archivo{display:grid;grid-template-columns:1fr 220px;gap:24px;padding:24px 0;border-bottom:1px solid var(--linea)}
.item-archivo h2{font-size:26px;line-height:31px;margin:0}
.paginacion{display:flex;gap:16px;justify-content:center;padding:32px 0;font-weight:700}
.paginacion .current{color:var(--rojo)}

/* Pie */
.pie{border-top:3px solid var(--tinta);margin-top:40px;padding:32px 0 48px;background:var(--papel)}
.pie .envoltura{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.pie ul{list-style:none;display:flex;gap:20px;margin:0;padding:0;flex-wrap:wrap}
.pie small{color:var(--tinta-suave);font-size:13px;width:100%}

/* Responsive */
@media (max-width:1080px){
  .portada{grid-template-columns:1fr 1fr}
  .portada .ultimas{grid-column:1/-1;order:3;border-left:0!important;border-top:1px solid var(--linea)}
  .bloques{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .envoltura,.secciones ul{padding:0 16px}
  .logo-placas span{font-size:24px;padding:5px 10px 4px}
  .fecha-hoy{display:none}
  .secciones ul{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto}
  .secciones li{flex:none}
  .portada{grid-template-columns:1fr}
  .portada>section{padding:0 16px 24px}
  .portada>section+section{border-left:0;border-top:1px solid var(--linea)}
  .principal article h2{font-size:34px;line-height:38px}
  .bloques{grid-template-columns:1fr}
  .nota{padding:24px 16px 48px}.nota h1{font-size:32px;line-height:37px}
  .bajada{font-size:19px;line-height:28px}
  .item-archivo{grid-template-columns:1fr}
  .logo-linea{font-size:16px}
}

/* Barra del dólar */
.barra-dolar{background:var(--papel-gris);border-bottom:1px solid var(--linea);font-size:14px;line-height:20px}
.barra-dolar .envoltura{display:flex;align-items:center;gap:24px;padding-top:9px;padding-bottom:9px}
.dolar-titulo{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px;flex:none}
.dolar-titulo::before{content:"";width:8px;height:8px;background:var(--rojo)}
.barra-dolar ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.barra-dolar li{white-space:nowrap;font-variant-numeric:tabular-nums}
.barra-dolar li b{font-weight:700;margin-right:4px}
.dolar-hora{margin-left:auto;color:var(--tinta-suave);font-size:12px;white-space:nowrap;flex:none}

/* Publicidad */
.publicidad{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 auto}
.pub-etiqueta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.publicidad img,.publicidad iframe{display:block;margin:0 auto;max-width:100%;height:auto}
.publicidad .pieza-pub+.pieza-pub{margin-top:12px}
.publicidad-ancho{padding:20px 16px;max-width:var(--ancho)}
.publicidad-ancho .pieza-pub,.publicidad-ancho .pub-libre{min-height:90px;width:min(970px,100%)}
.portada+.publicidad-ancho{border-bottom:1px solid var(--linea);padding:28px 16px}
.portada+.publicidad-ancho .pieza-pub,.portada+.publicidad-ancho .pub-libre{min-height:250px}
.publicidad-lateral{padding:20px 0;border-bottom:1px solid var(--linea)}
.publicidad-lateral .pieza-pub,.publicidad-lateral .pub-libre{min-height:250px;width:300px;max-width:100%}
.publicidad-nota{margin:28px auto;padding:16px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font-family:var(--sans)}
.publicidad-nota .pieza-pub,.publicidad-nota .pub-libre{min-height:250px;width:min(300px,100%)}
.pub-libre{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--papel-gris);border:1px dashed var(--linea);color:var(--tinta-suave);font-size:14px;text-align:center;padding:16px}
.pub-libre b{color:var(--tinta);font-size:15px}
.pub-libre a{color:var(--rojo);text-decoration:underline}
@media (max-width:720px){
  .barra-dolar .envoltura{gap:14px}
  .dolar-hora{display:none}
  .publicidad-ancho .pieza-pub,.publicidad-ancho .pub-libre{min-height:100px;width:min(320px,100%)}
  .portada+.publicidad-ancho .pieza-pub,.portada+.publicidad-ancho .pub-libre{min-height:250px;width:min(300px,100%)}
}

/* Propietario */
.propietario{border-top:1px solid var(--linea);margin-top:32px;padding-top:24px}
.propietario .envoltura{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.propietario .envoltura>span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.propietario img{height:56px;width:auto}
.propietario-texto{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.propietario a:hover{opacity:.85}

/* Autores */
.firma a:hover b{color:var(--rojo-oscuro)}
.caja-autor{display:flex;gap:16px;align-items:flex-start;margin-top:32px;padding:20px 0;border-top:3px solid var(--tinta);border-bottom:1px solid var(--linea)}
.caja-autor-foto{width:72px;height:72px;object-fit:cover;flex:none;filter:grayscale(1)}
.caja-autor p{margin:0}
.caja-autor-nombre{font-size:18px;font-weight:800}
.caja-autor-bio{font-family:var(--serif);font-size:16px;line-height:24px;color:var(--tinta-suave);margin-top:4px!important}
.caja-autor-mas{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:10px!important}
.caja-autor-mas a{color:var(--rojo)}
.caja-autor-pagina{border-top:0;margin-top:0}
.caja-autor-pagina .caja-autor-foto{width:96px;height:96px}

/* Contacto */
.contacto-pie{margin:0;font-size:15px;width:100%}
.contacto-pie a{color:var(--rojo);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.contacto-cajon a{display:inline-block;margin-top:16px;font-weight:700;color:var(--rojo)}
.contacto-flotante{position:fixed;right:20px;bottom:20px;z-index:25;display:flex;align-items:center;gap:8px;background:var(--negro-fijo);color:var(--sobre-negro);padding:12px 16px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 2px 0 var(--rojo)}
.contacto-flotante svg{width:20px;height:20px}
.contacto-flotante:hover{background:var(--rojo);color:var(--sobre-rojo)}
@media (max-width:720px){.contacto-flotante{right:12px;bottom:12px;padding:12px}.contacto-flotante span{display:none}}
/* Logo de La Hilandería Medios (fiel al logo del grupo: bobina, nombre y MEDIOS entre punteados) */
.logo-hilanderia{display:inline-flex;align-items:center;gap:12px;background:#1e3272;padding:10px 18px 10px 14px}
.logo-hilanderia svg{width:30px;height:39px;flex:none}
.lh-texto{display:flex;flex-direction:column;align-items:stretch}
.lh-nombre{font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-weight:800;font-size:19px;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#fff;white-space:nowrap}
.lh-medios{display:flex;align-items:center;gap:8px;margin-top:5px;font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-weight:600;font-size:10px;line-height:1;letter-spacing:.5em;text-transform:uppercase;color:#7fc0f5}
.lh-medios::before,.lh-medios::after{content:"";flex:1;border-top:2px dashed #4fa6f0}
.lh-medios span{margin-right:-.5em}
.propietario a:hover .logo-hilanderia{background:#16255a}

/* Lema bajo el logo + posiciones fijas del cabezal (logo siempre centrado) */
.cabezal{grid-template-rows:auto auto}
.cabezal .izq{grid-column:1;grid-row:1}
.cabezal .cabezal-logo{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center}
.cabezal .der{grid-column:3;grid-row:1;display:flex;align-items:center;gap:6px}
.lema{grid-column:2;grid-row:2;justify-self:center;margin:8px 0 0;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--tinta-suave)}
@media (max-width:720px){.lema{font-size:13px;margin-top:6px}}

/* Más espacios de publicidad */
.li-pub{padding:16px 0}
.li-pub .publicidad-lateral{border-bottom:0;padding:0}
.bloques+.publicidad-ancho{border-top:1px solid var(--linea);padding:28px 16px}
.bloques+.publicidad-ancho .pieza-pub,.bloques+.publicidad-ancho .pub-libre{min-height:250px}
main+.publicidad-ancho{border-top:1px solid var(--linea);margin-top:40px}
.nota-grilla{display:grid;grid-template-columns:minmax(0,760px) 300px;gap:48px;justify-content:center;max-width:var(--ancho);margin:0 auto;padding:0 32px}
.nota-grilla .nota{margin:0;padding-left:0;padding-right:0;max-width:none}
.nota-costado{padding-top:40px}
.nota-costado .publicidad{position:sticky;top:80px}
.publicidad-costado .pieza-pub,.publicidad-costado .pub-libre{width:300px;min-height:600px;max-width:100%}
.archivo .publicidad-nota{margin:24px auto}
@media (max-width:1080px){
  .nota-grilla{grid-template-columns:1fr;padding:0}
  .nota-grilla .nota{padding:40px 32px 32px;max-width:760px;margin:0 auto}
  .nota-costado{padding:0 0 40px}
  .nota-costado .publicidad{position:static}
  .publicidad-costado .pieza-pub,.publicidad-costado .pub-libre{min-height:250px}
}
@media (max-width:720px){.nota-grilla .nota{padding:24px 16px}}

/* Radio en vivo */
.radio-boton{display:inline-flex;align-items:center;gap:8px;background:var(--negro-fijo);color:var(--sobre-negro);border:0;cursor:pointer;font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px}
.radio-boton i,.radio-vivo i{width:8px;height:8px;border-radius:50%;background:#ff4d5e;flex:none;animation:lpdi-late 1.4s ease-in-out infinite}
.radio-boton:hover{background:var(--rojo);color:var(--sobre-rojo)}
.radio-boton:hover i{background:var(--sobre-rojo)}
@keyframes lpdi-late{50%{opacity:.25}}
.radio-barra{position:fixed;left:0;right:0;bottom:0;z-index:26;background:var(--negro-fijo);color:var(--sobre-negro);border-top:3px solid var(--rojo);padding:10px 0;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.radio-barra[hidden]{display:none}
.radio-barra .envoltura{display:flex;align-items:center;gap:16px}
.radio-play{width:44px;height:44px;flex:none;border:0;background:var(--rojo);color:#fff;display:grid;place-items:center;cursor:pointer}
.radio-play svg{width:20px;height:20px}
.radio-play .i-pausa,.radio-barra.sonando .radio-play .i-play{display:none}
.radio-barra.sonando .radio-play .i-pausa{display:block}
.radio-play:disabled{opacity:.4;cursor:default}
.radio-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.radio-texto strong{font-size:16px;font-weight:800}
.radio-vivo{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ff5a5f}
.radio-estado{font-size:13px;color:#bdbdbd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-ventana{margin-left:auto;font-size:13px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.radio-cerrar{background:none;border:0;color:#bdbdbd;font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.radio-ventana+.radio-cerrar{margin-left:0}
.radio-texto+.radio-cerrar{margin-left:auto}
body.con-radio{padding-bottom:72px}
body.con-radio .contacto-flotante{bottom:88px}
.contacto-cajon .radio-boton{margin-top:16px}
@media (max-width:720px){
  .radio-boton{padding:8px 9px}
  .radio-boton .rb-largo{display:none}
  .radio-ventana{display:none}
  body.con-radio .contacto-flotante{bottom:84px}
}
@media (prefers-reduced-motion:reduce){.radio-boton i,.radio-vivo i{animation:none}}

/* Placa de marca para notas sin foto */
.placa-nota{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:16/9;width:100%;background:var(--negro-fijo);color:var(--sobre-negro);padding:6% 6% 7%;overflow:hidden;border-bottom:6px solid var(--rojo)}
.placa-nota::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.06) calc(25% - 1px) 25%)}
.pn-sec{position:relative;font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#ff4d5e}
.pn-dis{position:relative;font:800 clamp(24px,4.4vw,52px)/1.02 var(--sans);letter-spacing:-.01em}
.lpdi-chica .pn-dis{font-size:clamp(20px,2vw,28px)}
.lpdi-chica .pn-sec{font-size:11px}
.pn-marca{position:absolute;top:8%;right:6%;display:flex;flex-direction:column;gap:2px;font:800 12px/1 var(--sans)}
.pn-marca i{font-style:normal;background:#fff;color:#111;padding:3px 5px}
.pn-marca b{background:var(--rojo);color:#fff;padding:3px 5px}
.nota figcaption{font-family:var(--sans)}