/*
Theme Name: Portezuelo Noticias
Theme URI: https://portezuelonoticias.com
Description: Tema de Portezuelo Noticias — AUDICO v1.0. Tema hijo de AUDICO Base. Diseño desde el kit portal_web de su Design System (diseno/09_portezuelo_noticias/ui_kits/portal_web): portada v2 y nota aprobadas el 03/11/2026 (diseno/09_portezuelo_noticias/propuesta_audico/), con el audio de opinión en el lugar de la radio, «Lo más leído» y la franja «Escuchá Portezuelo».
Author: Narrativas Públicas
Template: audico-base
Version: 1.0
Text Domain: portezuelo
*/

/* Los tokens del DS (tokens/colors.css, typography.css, spacing.css) y el kit portal_web pasados a CSS, con lo que
   aprobó el operador el 03/11: líneas finas de 1 px, «Lo más leído» liviano y la portada con la destacada a dos columnas. */
:root{
  --ocre:#7A5800;--ocre-700:#5C4200;--ocre-500:#946B00;--ocre-400:#B68708;--ocre-100:#EFE2B0;--ocre-050:#F7EFCF;
  --amarillo:#F4C430;--amarillo-600:#D9A800;--amarillo-300:#FADF7E;--amarillo-100:#FCEFBE;
  --crema:#FFFBEA;--tinta:#1A1A18;--tinta-700:#3D3C37;
  --gris-600:#6B6A63;--gris-500:#888780;--gris-300:#C9C7BC;--gris-200:#E3E0D2;--gris-100:#F0EDE0;--blanco:#FFFFFF;
  --f-display:'Oswald','Barlow Condensed',system-ui,sans-serif;
  --f-head:'Barlow','Oswald',system-ui,sans-serif;
  --f-cond:'Barlow Condensed','Oswald',system-ui,sans-serif;
  --f-body:'Roboto',system-ui,sans-serif;
  --f-ui:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--crema);color:var(--tinta-700);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.ft img,.av img{display:block;width:100%;height:100%;object-fit:cover}
.w{max-width:1280px;margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- Barra de arriba ---- */
.top{background:var(--tinta);color:var(--crema)}
.top .w{height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.top .fecha{font-family:var(--f-cond);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amarillo);white-space:nowrap}
.top .redes{display:flex;gap:12px;align-items:center}
.top .redes a{font-family:var(--f-ui);font-size:12px;color:var(--gris-300)}
.top .redes a:hover{color:var(--amarillo)}

/* ---- Cabecera ---- */
.mast{background:var(--crema);border-bottom:1px solid var(--tinta)}
.mast .w{padding-top:14px;padding-bottom:14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.mast h1{margin:0;font-size:inherit;justify-self:center}
.buscar{display:flex;align-items:center;gap:8px;background:var(--blanco);border:1px solid var(--gris-300);border-radius:3px;padding:8px 12px;width:230px}
.buscar svg{flex-shrink:0}
.buscar input{border:0;outline:0;background:transparent;font-family:var(--f-ui);font-size:14px;width:100%;color:var(--tinta)}
.logo{display:inline-block;color:var(--tinta);justify-self:center}
.logo .a{font-family:var(--f-display);font-weight:700;font-size:44px;letter-spacing:-.01em;text-transform:uppercase;line-height:.84;white-space:nowrap}
.logo .b{display:flex;justify-content:space-between;font-family:var(--f-cond);font-weight:700;font-size:17.6px;line-height:1;margin-top:5.7px;color:var(--ocre)}
.logo.claro{color:var(--crema)}.logo.claro .b{color:var(--amarillo)}
.logo.chico .a{font-size:30px}.logo.chico .b{font-size:12px;margin-top:3.9px}
.mast .der{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-ui);font-weight:700;font-size:15px;line-height:1;padding:10px 18px;border-radius:3px;border:2px solid transparent;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.btn.prim{background:var(--amarillo);color:var(--tinta)}.btn.prim:hover{background:var(--amarillo-600)}
.btn.osc{background:var(--tinta);color:var(--crema);font-family:var(--f-cond);font-size:13px;letter-spacing:.08em;padding:8px 12px}
.btn.osc:hover{background:#000}
.btn:active{transform:translateY(1px)}
.btn .pt{width:8px;height:8px;border-radius:999px;background:var(--amarillo)}
.lupa{display:none;width:38px;height:38px;border:1px solid var(--gris-300);border-radius:3px;background:var(--blanco);align-items:center;justify-content:center;cursor:pointer;padding:0}
.panel-busqueda{display:none;background:var(--crema);border-bottom:1px solid var(--gris-200)}
.panel-busqueda .w{padding-top:10px;padding-bottom:10px}
.panel-busqueda .buscar{display:flex;width:100%}

/* ---- Secciones sobre el ocre ---- */
.nav{background:var(--ocre);position:sticky;top:0;z-index:30;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.admin-bar .nav{top:32px}
.nav .w{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.nav .w::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;padding:12px 14px;font-family:var(--f-head);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--crema);white-space:nowrap}
.nav a:hover{background:var(--ocre-700)}
.nav a.on{background:var(--amarillo);color:var(--tinta)}

/* ---- «Lo último» (BreakingBar del DS en amarillo; el rojo queda para un último momento real) ---- */
.ultimo{display:flex;background:var(--tinta);overflow:hidden;margin:14px 0}
.ultimo .l{display:inline-flex;align-items:center;gap:8px;background:var(--amarillo);color:var(--tinta);font-family:var(--f-cond);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;white-space:nowrap;flex-shrink:0}
.ultimo .l i{width:8px;height:8px;border-radius:999px;background:var(--tinta)}
.ultimo .t{display:block;color:var(--crema);font-family:var(--f-head);font-weight:700;font-size:15px;padding:10px 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ultimo:hover .t{text-decoration:underline}

/* ---- Sección, meta y tarjetas ---- */
.kick{display:inline-block;font-family:var(--f-cond);font-weight:700;font-size:13px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--ocre);margin-bottom:8px}
.kick.slab{background:var(--amarillo);color:var(--tinta);padding:4px 9px}
.meta{display:flex;gap:8px;align-items:center;font-family:var(--f-ui);font-size:13px;color:var(--gris-600);margin-top:8px;font-variant-numeric:tabular-nums}
.meta b{font-weight:600;color:var(--tinta-700)}
.meta span,.meta time{white-space:nowrap}
.card{display:block}
.card .ft{background:var(--ocre-100);overflow:hidden}
.card .ft.sin{display:flex;align-items:center;justify-content:center;background:var(--ocre)}
.card .ft.sin span{font-family:var(--f-display);font-weight:700;font-size:44px;color:var(--crema);position:relative;padding-bottom:8px}
.card .ft.sin span::after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:5px;background:var(--amarillo)}
.card h2,.card h3{font-family:var(--f-head);font-weight:800;color:var(--tinta);margin:0;line-height:1.05;letter-spacing:-.01em;text-underline-offset:3px}
.card:hover h2,.card:hover h3{text-decoration:underline}
.card p{font-family:var(--f-body);font-size:15px;line-height:1.45;color:var(--tinta-700);margin:8px 0 0}
.card .tx{padding-top:12px}
.card.lead .ft{height:470px}
.card.lead .tx{padding-top:14px}
.card.lead h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.3rem)}
.card.lead p{font-size:19px;line-height:1.4;margin-top:10px;max-width:70ch}
.card.std h3{font-size:clamp(1.2rem,1.1rem + .4vw,1.5rem)}
.card.txt{padding-bottom:16px;border-bottom:1px solid var(--gris-200)}
.card.txt h3{font-size:clamp(1.1rem,1rem + .5vw,1.4rem)}

/* ---- Portada: la destacada a dos columnas y el costado a su altura ---- */
.hero{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,1fr);gap:28px;padding-bottom:28px;border-bottom:1px solid var(--tinta)}
.hero .rail{display:flex;flex-direction:column;gap:20px}
.hero .rail .leido{flex:1;display:flex;flex-direction:column}
.hero .rail .leido ol{flex:1;display:flex;flex-direction:column}
.hero .rail .leido li{flex:1;align-items:center}
.cuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;padding:28px 0;border-bottom:1px solid var(--gris-200)}
.cuatro .ft{height:150px}
.cuatro h3{font-size:18px}
.cuatro .card.std h3{font-size:18px}

/* ---- Títulos de bloque ---- */
.sh{border-bottom:1px solid var(--tinta);margin-bottom:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sh h2{margin:0;display:inline-flex;align-items:center;font-family:var(--f-head);font-weight:800;font-size:22px;letter-spacing:.01em;text-transform:uppercase;color:var(--tinta);line-height:1;padding-bottom:6px}
.sh h2 i{width:4px;height:18px;background:var(--amarillo);margin-right:10px;display:inline-block;flex-shrink:0}
.sh h2 i.ocre{background:var(--ocre)}
.sh a{font-family:var(--f-ui);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ocre-500);padding-bottom:6px;white-space:nowrap}
.bloque{padding:28px 0;border-bottom:1px solid var(--gris-200)}
.bloque.fin{border-bottom:0}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.tres .ft{height:170px}

/* ---- Lo más leído (contador de visitas del tema padre) ---- */
.leido{border:1px solid var(--gris-200);background:var(--blanco)}
.leido .h{color:var(--tinta);border-bottom:2px solid var(--amarillo);margin:0 14px;padding:14px 0 10px;font-family:var(--f-head);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.leido ol{margin:0;padding:0;list-style:none}
.leido li{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--gris-200)}
.leido li:last-child{border-bottom:0}
.leido .n{font-family:var(--f-display);font-weight:500;font-size:26px;line-height:.95;color:var(--ocre-400);flex-shrink:0;width:24px;font-variant-numeric:tabular-nums}
.leido a{font-family:var(--f-head);font-weight:700;font-size:14.5px;line-height:1.2;color:var(--tinta)}
.leido a:hover{text-decoration:underline}

/* ---- Audio de opinión (el reproductor del DS, en el lugar de la radio) ---- */
.oir{display:flex;align-items:center;gap:14px;background:var(--tinta);color:var(--crema);padding:12px 16px}
.oir button{flex-shrink:0;width:40px;height:40px;border-radius:999px;border:0;background:var(--amarillo);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.oir button:hover{background:var(--amarillo-600)}
.oir .q{min-width:0;flex:1}
.oir .r{font-family:var(--f-cond);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--amarillo)}
.oir .t{display:block;font-family:var(--f-head);font-weight:700;font-size:15px;margin-top:2px;line-height:1.2}
.oir a.t:hover{text-decoration:underline}
.eq{display:flex;align-items:flex-end;gap:2.5px;height:20px;flex-shrink:0}
.eq i{width:3px;background:var(--amarillo);height:40%;opacity:.45}
.sonando .eq i{opacity:1;animation:pz-eq .8s ease-in-out infinite}
.sonando .eq i:nth-child(2){animation-duration:.95s}.sonando .eq i:nth-child(3){animation-duration:1.1s}
.sonando .eq i:nth-child(4){animation-duration:.7s}.sonando .eq i:nth-child(5){animation-duration:1.25s}
@keyframes pz-eq{0%,100%{height:30%}50%{height:100%}}
.oir .bar{height:4px;background:rgba(255,251,234,.18);margin-top:8px}
.oir .bar i{display:block;height:100%;width:0;background:var(--amarillo)}

/* ---- Franja «Escuchá Portezuelo» (audios de opinión de las últimas notas) ---- */
.franja{background:var(--tinta);color:var(--crema);margin:28px 0 0;padding:26px 0 30px;border-top:3px solid var(--amarillo)}
.franja .sh{border-color:rgba(255,251,234,.25)}
.franja .sh h2{color:var(--crema)}
.franja .sh span{font-family:var(--f-ui);font-size:13px;color:var(--gris-300);padding-bottom:6px}
.franja .tres{gap:20px}
.franja .oir{background:#262622;padding:16px}
.franja .oir .t{font-size:17px}

/* ---- Pie ---- */
.pie{background:var(--tinta);color:var(--crema);margin-top:40px}
.pie .w{padding-top:36px;padding-bottom:28px}
.pie .arr{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:24px}
.pie p{font-family:var(--f-body);font-size:14px;color:var(--gris-300);line-height:1.5;margin:14px 0 0;max-width:300px}
.pie .cols{display:flex;gap:48px;flex-wrap:wrap}
.pie h4{font-family:var(--f-cond);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--amarillo);margin:0 0 12px}
.pie .cols a{display:block;font-family:var(--f-ui);font-size:14px;color:var(--gris-300);margin-bottom:8px}
.pie .cols a:hover{color:var(--crema)}
.pie .ab{padding-top:18px;font-family:var(--f-ui);font-size:12px;color:var(--gris-500)}
.vertodas{display:flex;justify-content:center;padding:28px 0 0}
.paginas{display:flex;justify-content:space-between;gap:12px;padding:28px 0 0}
.paginas a{font-family:var(--f-ui);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--ocre-500)}
.vacio{font-family:var(--f-ui);font-size:16px;color:var(--gris-600);padding:40px 0}

/* ---- Cabecera de sección, búsqueda y 404 ---- */
.cabecera{padding:22px 0 18px;border-bottom:1px solid var(--tinta)}
.cabecera h1{font-family:var(--f-head);font-weight:800;font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1.04;letter-spacing:-.015em;color:var(--tinta);margin:6px 0 0}
.cabecera p{font-family:var(--f-body);font-size:17px;margin:12px 0 0}
.cabecera .buscar{width:100%;max-width:460px;margin-top:16px}

/* ---- Nota ---- */
.miga{padding:16px 0;font-family:var(--f-ui);font-size:13px;color:var(--gris-600);display:flex;gap:8px;align-items:center}
.miga a{color:var(--ocre-500);font-weight:600}
.miga span{font-family:var(--f-cond);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ocre)}
.nota{max-width:1160px;margin:0 auto;padding:0 20px}
.nota .grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;padding-bottom:40px}
.nota .col{max-width:720px}
.nota h1{font-family:var(--f-head);font-weight:800;font-size:clamp(2.1rem,1.4rem + 2.4vw,3.2rem);line-height:1.04;letter-spacing:-.015em;color:var(--tinta);margin:12px 0 16px}
.nota .baj{font-family:var(--f-body);font-weight:500;font-size:21px;line-height:1.35;color:var(--tinta);margin:0 0 22px}
.firma{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:14px 0;border-top:1px solid var(--tinta);border-bottom:1px solid var(--gris-200);margin-bottom:22px}
.firma .q{display:flex;align-items:center;gap:12px}
.av{width:44px;height:44px;background:var(--ocre);color:var(--crema);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:19px;position:relative;flex-shrink:0}
.av::after{content:"";position:absolute;left:10px;right:10px;bottom:7px;height:3px;background:var(--amarillo)}
.av.chico{width:36px;height:36px;font-size:15px}
.firma .nom{font-family:var(--f-ui);font-weight:700;font-size:15px;color:var(--tinta)}
.firma .cu{font-family:var(--f-ui);font-size:13px;color:var(--gris-600);font-variant-numeric:tabular-nums}
.comp{display:flex;gap:8px;align-items:center}
.comp span{font-family:var(--f-cond);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-600)}
.comp a,.comp button{width:34px;height:34px;border-radius:3px;display:flex;align-items:center;justify-content:center;border:0;padding:0;cursor:pointer}
.comp .wa{background:#25D366}.comp .fb{background:#1877F2}.comp .x{background:var(--tinta)}.comp .cp{background:var(--ocre)}
.comp .cp.ok{background:var(--amarillo-600)}
.nota figure{margin:0 0 12px}
.nota figure .ft{height:440px;background:var(--ocre-100)}
.nota figcaption{font-family:var(--f-ui);font-size:13px;color:var(--gris-600);padding:8px 0;border-bottom:1px solid var(--gris-200)}
.nota figcaption span{text-transform:uppercase;letter-spacing:.04em;color:var(--gris-500)}
.nota .oir{margin:22px 0 4px}
.cuerpo{padding-top:22px}
.cuerpo p{font-family:var(--f-body);font-size:18px;line-height:1.65;color:var(--tinta-700);margin:0 0 22px}
.cuerpo h2,.cuerpo h3{font-family:var(--f-head);font-weight:800;color:var(--tinta);line-height:1.15;margin:30px 0 14px}
.cuerpo h2{font-size:26px}.cuerpo h3{font-size:22px}
.cuerpo ul,.cuerpo ol{font-family:var(--f-body);font-size:18px;line-height:1.6;color:var(--tinta-700);margin:0 0 22px;padding-left:22px}
.cuerpo a{color:var(--ocre-500);text-decoration:underline;text-underline-offset:3px}
.cuerpo img{max-width:100%;height:auto}
.cuerpo figure{margin:0 0 22px}
.cuerpo blockquote{margin:8px 0 26px;padding:4px 0 4px 22px;border-left:3px solid var(--amarillo)}
.cuerpo blockquote p{font-family:var(--f-head);font-weight:800;font-size:24px;line-height:1.2;color:var(--tinta);margin:0}
.cuerpo blockquote cite{font-family:var(--f-ui);font-size:14px;color:var(--gris-600);font-style:normal;display:block;margin-top:10px}
.cuerpo blockquote cite::before{content:"— "}
.cuerpo audio{width:100%}
.cierre{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--gris-200);font-family:var(--f-ui);font-size:14px;color:var(--gris-600)}
.nota aside .pega{position:sticky;top:64px;display:flex;flex-direction:column;gap:20px}
.seguir{border-top:1px solid var(--tinta);padding-top:24px}
.seguir .sh h2 i{background:var(--ocre)}
.seguir .tres .ft{height:160px}

/* ---- Escritorio chico ---- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero .rail{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nota .grid{grid-template-columns:1fr}
  .nota aside{display:none}
}
@media (max-width:782px){.admin-bar .nav{top:0}}

/* ---- Celular ---- */
@media (max-width:720px){
  .w,.nota{padding:0 16px}
  .top .redes{display:none}
  .mast .w{grid-template-columns:1fr auto;gap:12px}
  .mast .buscar{display:none}
  .mast .logo,.mast h1{justify-self:start}
  .logo .a{font-size:34px}.logo .b{font-size:13.6px;margin-top:4.4px}
  .mast .der .osc{display:none}
  .lupa{display:inline-flex}
  .panel-busqueda.abierto{display:block}
  .btn{font-size:13px;padding:8px 12px}
  .nav a{padding:11px 12px;font-size:13px}
  .hero{gap:22px}
  .hero .rail{display:flex}
  .card.lead .ft{height:230px}
  .card.lead p{font-size:17px}
  .cuatro{gap:22px 14px}
  .cuatro .ft{height:110px}
  .cuatro h3,.cuatro .card.std h3{font-size:16px}
  .tres{grid-template-columns:1fr;gap:22px}
  .tres .ft{height:200px}
  .nota figure .ft{height:240px}
  .nota .baj{font-size:18px}
  .cuerpo p,.cuerpo ul,.cuerpo ol{font-size:17px}
  .cuerpo blockquote p{font-size:21px}
  .comp span{display:none}
}