/*
Theme Name: Sierra Noticias
Theme URI: https://sierranoticias.com
Description: Tema de Sierra Noticias — AUDICO v1.0. Tema hijo de AUDICO Base. Diseño desde el kit WordPress de su Design System (diseno/06_sierra_noticias/ui_kits/wordpress): home y nota aprobadas el 22/10/2026 (diseno/06_sierra_noticias/propuesta_audico/), con «Más leído en el barrio» y el boletín «El barrio en tu mail».
Author: Narrativas Públicas
Template: audico-base
Version: 1.0
Text Domain: sierranoticias
*/

:root{
  --green-900:#0F3D24;--green-700:#16492E;--green:#1E5C3A;--green-500:#2E7350;--green-100:#DDE8E0;--green-50:#EDF3EE;
  --orange-700:#D98538;--orange-600:#EC944A;--orange:#F4A261;--orange-200:#FBDDC2;--orange-100:#FCEBD9;
  --cream:#F5F0E8;--cream-200:#ECE5D8;--paper:#FFFFFF;
  --ink:#2A2A28;--ink-soft:#514F4A;--neutral:#9A9590;--neutral-300:#C9C4BC;--neutral-200:#DFDAD1;
  --on-brand:#F3F7F2;--on-accent:#3A2410;--alert:#C0392B;
  --f-disp:'Nunito',system-ui,sans-serif;--f-body:'Lato',Georgia,sans-serif;--f-ui:'Inter',system-ui,sans-serif;
  --shadow-sm:0 1px 4px rgba(42,42,40,.08);--shadow-md:0 4px 16px rgba(42,42,40,.12);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}
body{font:400 16px/1.65 var(--f-body)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--orange-200)}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}

/* ---- Barra superior (TopBar del DS, sin clima, radio ni «Ingresar») ---- */
.top{background:var(--green-900);color:rgba(243,247,242,.85)}
.top .wrap{height:36px;display:flex;align-items:center;gap:18px;font:600 12px var(--f-ui)}
.top__lugar{color:var(--orange);display:flex;align-items:center;gap:6px}
.top__lugar svg{width:13px;height:13px}

/* ---- Cabecera con la marca (Masthead del DS; el lugar del anuncio pasa a buscar + «Sumarme») ---- */
.mast{background:var(--cream);border-bottom:1px solid var(--neutral-200)}
.mast .wrap{padding-top:18px;padding-bottom:18px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:13px;line-height:1}
.logo svg{flex:none}
.logo__word{font:900 30px/.95 var(--f-disp);letter-spacing:-.01em;color:var(--green);white-space:nowrap}
.logo__word span{color:var(--ink)}
.logo__tag{font:italic 700 12.5px/1 var(--f-body);color:var(--orange-700);margin-top:6px}
.mast__acc{margin-left:auto;display:flex;align-items:center;gap:12px}
.buscar{display:flex;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--neutral-300);border-radius:999px;padding:9px 16px;font:500 13px var(--f-ui);color:var(--neutral);width:240px}
.buscar svg{width:16px;height:16px;flex:none}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;font:800 13px var(--f-ui);padding:11px 20px;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.btn--acento{background:var(--orange);color:var(--on-accent);box-shadow:0 6px 18px rgba(244,162,97,.35)}
.btn--acento:hover{background:var(--orange-600);transform:translateY(-1px)}
.btn svg{width:16px;height:16px}

/* ---- Menú de secciones (NavMenu del DS) ---- */
.nav{position:sticky;top:0;z-index:40;background:var(--green);box-shadow:0 2px 12px rgba(15,61,36,.22)}
.nav .wrap{display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;padding:0 14px;height:46px;font:600 13.5px var(--f-ui);color:rgba(243,247,242,.78);border-bottom:3px solid transparent;white-space:nowrap}
.nav a:hover{color:#fff}
.nav a.on{font-weight:800;color:#fff;border-bottom-color:var(--orange)}

/* ---- Cinta de lo último (Ticker del DS; «Lo último» en naranja, no rojo: no es una alerta) ---- */
.tick{background:var(--paper);border-bottom:1px solid var(--neutral-200)}
.tick .wrap{display:flex;align-items:center;gap:14px;height:42px;overflow:hidden}
.tick__tag{flex:none;font:800 11px var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--on-accent);background:var(--orange);padding:6px 11px;border-radius:3px}
.tick__win{flex:1;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 92%,transparent)}
.tick__track{display:inline-flex;gap:34px;font:700 13px var(--f-ui);color:var(--ink);animation:tick 40s linear infinite}
.tick__track span::before{content:"●";color:var(--orange);margin-right:10px}
.tick__track span[aria-hidden]::before{content:none}
.tick__track a:hover{color:var(--green)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Etiqueta de sección (Cat del DS, sólida) ---- */
.cat{display:inline-flex;align-items:center;font:800 11px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--green);padding:6px 11px;border-radius:3px;white-space:nowrap}
.cat--sm{font-size:10px;padding:5px 9px}
.cat--plana{background:none;padding:0;color:var(--green)}
.cat[data-s="Comunidad"]{background:var(--orange-700)}.cat--plana[data-s="Comunidad"]{background:none;color:var(--orange-700)}
.cat[data-s="Política local"]{background:var(--green-900)}.cat--plana[data-s="Política local"]{background:none;color:var(--green-900)}
.cat[data-s="Cultura"]{background:var(--orange);color:var(--on-accent)}.cat--plana[data-s="Cultura"]{background:none;color:var(--orange-700)}
.cat[data-s="Deportes"]{background:var(--green-500)}.cat--plana[data-s="Deportes"]{background:none;color:var(--green-500)}

/* ---- Portada: la 1ª nota grande y la 2ª y 3ª al costado (PostHero del DS) ---- */
main{padding:24px 0 10px}
.hero{display:grid;grid-template-columns:1.85fr 1fr;gap:20px;margin-bottom:28px}
.hero__col{display:flex;flex-direction:column;gap:20px}
.ph{position:relative;display:block;border-radius:8px;overflow:hidden;height:200px;box-shadow:var(--shadow-md);background:var(--green);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.ph:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(42,42,40,.16)}
.ph--big{height:440px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ph:hover img{transform:scale(1.05)}
.ph__grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,30,20,.94) 8%,rgba(15,30,20,.2) 48%,transparent 72%)}
.ph .cat{position:absolute;top:14px;left:14px}
.ph__copy{position:absolute;left:0;right:0;bottom:0;padding:16px}
.ph--big .ph__copy{padding:26px}
.ph__t{font:900 18px/1.08 var(--f-disp);color:#fff;letter-spacing:-.015em;margin:0 0 8px}
.ph--big .ph__t{font-size:clamp(24px,2.6vw,34px)}
.ph__dek{font:400 15px/1.5 var(--f-body);color:rgba(255,255,255,.85);margin:0 0 10px;max-width:620px}
.ph__meta{font:600 11.5px var(--f-ui);color:rgba(255,255,255,.8)}

/* ---- Contenido + barra lateral ---- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:start}
.sh{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.sh h2{font:900 19px/1 var(--f-disp);color:var(--ink);margin:0;letter-spacing:-.01em;display:flex;align-items:center}
.sh h2::before{content:"";display:inline-block;width:5px;height:20px;background:var(--orange);border-radius:3px;margin-right:11px}
.sh--verde h2::before{background:var(--green)}
.sh__l{flex:1;height:1px;background:var(--neutral-200)}
.sh__v{font:700 12px var(--f-ui);color:var(--orange-700)}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:32px}
.card{display:flex;flex-direction:column;background:var(--paper);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(42,42,40,.16)}
.card__m{position:relative;height:160px;overflow:hidden;background:var(--green)}
.card__m img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__m img{transform:scale(1.05)}
.card__m .cat{position:absolute;top:11px;left:11px}
.card__b{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.card__t{font:800 16px/1.18 var(--f-disp);color:var(--ink);letter-spacing:-.01em;margin:0}
.card__meta{font:600 11px var(--f-ui);color:var(--neutral);margin-top:auto}

.rows{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;margin-bottom:12px}
.row{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--cream-200);align-items:flex-start}
.row__m{width:96px;height:68px;flex:none;border-radius:6px;overflow:hidden;background:var(--green)}
.row__m img{width:100%;height:100%;object-fit:cover}
.row__t{font:800 14.5px/1.22 var(--f-disp);color:var(--ink);letter-spacing:-.01em;margin:5px 0 5px;transition:color .15s}
.row:hover .row__t{color:var(--green)}
.row__meta{font:600 11px var(--f-ui);color:var(--neutral)}
.vertodas{display:inline-flex;align-items:center;gap:6px;margin:14px 0 6px;font:800 13px var(--f-ui);color:var(--green);border:1.5px solid var(--green);border-radius:999px;padding:9px 18px}

/* ---- Widgets (Widget del DS) ---- */
.wg{background:var(--paper);border-radius:8px;box-shadow:0 1px 4px rgba(42,42,40,.07);overflow:hidden;margin-bottom:22px}
.wg__h{border-top:3px solid var(--orange);padding:13px 16px 11px;border-bottom:1px solid var(--cream-200)}
.wg__h h3{font:800 13px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin:0}
.wg__b{padding:6px 16px 16px}
/* «Más leído»: el ranking del DS (número naranja) con las lecturas del contador del tema padre (AUDICO) */
.rk{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--cream-200);align-items:flex-start}
.rk:last-child{border-bottom:none}
.rk__n{font:900 24px/.9 var(--f-disp);color:var(--orange);flex:none;width:22px}
.rk__t{display:block;font:700 13.5px/1.3 var(--f-disp);color:var(--ink)}
.rk__s{display:block;font:800 10px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;color:var(--orange-700);margin-bottom:5px}
/* Boletín «El barrio en tu mail» (NewsletterWidget del DS; los suscriptores van a Hostinger Reach) */
.nl p{font:400 13px/1.5 var(--f-body);color:var(--ink-soft);margin:6px 0 11px}
.nl input{width:100%;border:1.5px solid var(--neutral-300);border-radius:7px;padding:10px 12px;font:400 13px var(--f-body);outline:none;margin-bottom:8px;background:#fff}
.nl input:focus{border-color:var(--green)}
.nl button{width:100%;justify-content:center;border-radius:7px}
.wg--verde{background:var(--green);color:var(--on-brand)}
.wg--verde .wg__h{border-bottom-color:rgba(255,255,255,.12)}
.wg--verde .wg__h h3{color:var(--orange);display:flex;align-items:center;gap:8px}
.wg--verde p{color:rgba(243,247,242,.82)}
.wg--verde input{border-color:transparent}

/* ---- Pie (Footer del DS: filete naranja, verde oscuro) ---- */
.pie{background:var(--green-900);color:rgba(243,247,242,.78);margin-top:46px}
.pie__filete{height:5px;background:var(--orange)}
.pie__top{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:34px;padding-top:40px;padding-bottom:26px}
.pie .logo__word{color:var(--cream);font-size:24px}.pie .logo__word span{color:var(--orange)}
.pie .logo__tag{color:var(--orange)}
.pie p{font:400 13px/1.65 var(--f-body);margin:14px 0 0;max-width:290px;color:rgba(243,247,242,.68)}
.pie h5{font:800 12px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--orange);margin:4px 0 13px}
.pie__col a{display:block;font:500 13px/2 var(--f-body)}
.pie__col a:hover{color:#fff}
.pie__nl{display:flex;gap:7px}
.pie__nl input{flex:1;min-width:0;border:none;border-radius:6px;padding:9px 11px;font:400 12.5px var(--f-body);outline:none}
.pie__nl button{border:none;background:var(--orange);color:var(--on-accent);font:800 12px var(--f-ui);padding:9px 13px;border-radius:6px;cursor:pointer}
.pie__legal{border-top:1px solid rgba(255,255,255,.12)}
.pie__legal .wrap{padding-top:14px;padding-bottom:14px;display:flex;gap:14px;flex-wrap:wrap;font:500 11.5px var(--f-ui);color:rgba(243,247,242,.5)}

/* ================= NOTA (Noticia.html del DS) ================= */
.miga{display:flex;align-items:center;gap:8px;font:600 12px var(--f-ui);color:var(--neutral);margin-bottom:16px;flex-wrap:wrap}
.miga a{color:var(--green)}
.nota__t{font:900 clamp(28px,3.6vw,42px)/1.08 var(--f-disp);color:var(--ink);letter-spacing:-.02em;margin:12px 0 16px}
.nota__dek{font:400 19px/1.55 var(--f-body);color:var(--ink-soft);margin:0 0 22px}
.nota__meta{display:flex;align-items:center;gap:13px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--neutral-200);flex-wrap:wrap}
.nota__av{width:44px;height:44px;border-radius:12px;flex:none;overflow:hidden}
.nota__por{font:800 13.5px var(--f-ui);color:var(--ink)}
.nota__cuando{font:500 12px var(--f-ui);color:var(--neutral)}
.nota__min{margin-left:auto;display:flex;align-items:center;gap:5px;font:600 12.5px var(--f-ui);color:var(--neutral)}
.nota__min svg{width:14px;height:14px}
.nota__foto{margin:0 0 8px}
.nota__foto img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.nota__foto figcaption{font:500 12px var(--f-ui);color:var(--neutral);margin-top:9px}
/* Caja del audio de opinión (AUDICO: la arma el tema hijo con el filtro audico_audio_html) */
.audio{display:flex;align-items:center;gap:16px;background:var(--green);color:var(--on-brand);border-radius:12px;padding:16px 20px;margin:22px 0 4px;box-shadow:0 6px 20px rgba(30,92,58,.22);position:relative;overflow:hidden}
.audio::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--orange)}
.audio__play{width:52px;height:52px;flex:none;border-radius:50%;border:none;background:var(--orange);color:var(--on-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(244,162,97,.35)}
.audio__play svg{width:20px;height:20px}
.audio__k{font:800 11px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.audio__t{font:800 17px/1.2 var(--f-disp);margin:5px 0 0}
.audio__dur{margin-left:auto;font:700 12px var(--f-ui);color:rgba(243,247,242,.7);white-space:nowrap}
.share{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:20px 0 4px}
.share__k{font:800 12px var(--f-ui);color:var(--neutral);letter-spacing:.04em;text-transform:uppercase;margin-right:2px}
.share a{display:flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--neutral-300);border-radius:999px;padding:8px 14px;font:700 12.5px var(--f-ui);color:var(--green)}
.share a:hover{border-color:var(--green)}
.share svg{width:15px;height:15px}
.cuerpo{margin-top:24px}
.cuerpo p{font:400 17px/1.75 var(--f-body);color:var(--ink);margin:0 0 20px}
.cuerpo p:first-of-type::first-letter{float:left;font:900 62px/.86 var(--f-disp);color:var(--green);padding:4px 12px 0 0}
.cuerpo blockquote{border-left:4px solid var(--orange);margin:26px 0;padding:6px 0 6px 22px;font:italic 800 23px/1.4 var(--f-disp);color:var(--green)}
.cuerpo h2{font:800 24px/1.2 var(--f-disp);color:var(--ink);letter-spacing:-.01em;margin:34px 0 14px}
.seguir{margin-top:34px;padding-top:24px;border-top:1px solid var(--neutral-200)}
.cards--3{grid-template-columns:repeat(3,1fr)}

/* ---- Celular ---- */
@media (max-width:1000px){
  .cols{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .hero__col{display:grid;grid-template-columns:1fr 1fr}
  .buscar{width:auto}.buscar span{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .top .wrap{font-size:11px}
  .mast .wrap{padding-top:14px;padding-bottom:14px;gap:12px}
  .logo svg{width:40px;height:40px}
  .logo__word{font-size:22px}.logo__tag{font-size:11px}
  .buscar{display:none}
  .btn{padding:10px 14px;font-size:12px}
  .ph--big{height:380px}
  .ph--big .ph__copy{padding:18px}
  .ph__dek{display:none}
  .hero__col{grid-template-columns:1fr}
  .cards,.cards--3,.rows{grid-template-columns:1fr}
  .pie__top{grid-template-columns:1fr}
  .nota__dek{font-size:17px}
  .audio{padding:14px 16px;gap:12px}
  .audio__dur{display:none}
}

/* ================= Lo que suma el tema (AUDICO) ================= */
/* Buscador real en la cabecera (en la maqueta era una etiqueta) */
.buscar input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:500 13px var(--f-ui);color:var(--ink)}
.buscar input::placeholder{color:var(--neutral)}
.buscar:focus-within{border-color:var(--green)}
/* Lupa del celular: abre el buscador debajo de la cabecera */
.lupa{display:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--neutral-300);background:var(--paper);color:var(--green);align-items:center;justify-content:center;cursor:pointer}
.lupa svg{width:18px;height:18px}
.panel-busqueda{display:none;background:var(--cream);border-bottom:1px solid var(--neutral-200)}
.panel-busqueda.abierto{display:block}
.panel-busqueda .wrap{padding-top:12px;padding-bottom:12px}
.panel-busqueda .buscar{display:flex;width:100%}
/* Notas sin foto: el bloque tonal verde del DS con la etiqueta */
.ph--sin,.card__m--sin,.row__m--sin{background:linear-gradient(150deg,var(--green-500),var(--green))}
/* Cabecera de sección, búsqueda y 404 */
.cabecera{padding:6px 0 22px;margin-bottom:22px;border-bottom:1px solid var(--neutral-200)}
.cabecera h1{font:900 clamp(28px,3.4vw,40px)/1.08 var(--f-disp);letter-spacing:-.02em;color:var(--ink);margin:12px 0 0}
.cabecera p{font:400 17px/1.55 var(--f-body);color:var(--ink-soft);margin:10px 0 0}
.cabecera .buscar{display:flex;width:100%;max-width:520px;margin-top:18px}
.vacio{font:400 17px/1.6 var(--f-body);color:var(--ink-soft);padding:30px 0}
.paginas{display:flex;justify-content:space-between;gap:12px;margin:22px 0 6px}
.paginas a{display:inline-flex;align-items:center;font:800 13px var(--f-ui);color:var(--green);border:1.5px solid var(--green);border-radius:999px;padding:9px 18px}
.rows--1{grid-template-columns:1fr}
/* Lo que n8n escribe en el cuerpo de la nota */
.cuerpo h3{font:800 20px/1.25 var(--f-disp);color:var(--ink);margin:28px 0 12px}
.cuerpo ul,.cuerpo ol{margin:0 0 20px;padding:0 0 0 4px;list-style:none}
.cuerpo li{font:400 16.5px/1.6 var(--f-body);color:var(--ink);padding:5px 0 5px 28px;position:relative}
.cuerpo li::before{content:"";position:absolute;left:6px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.cuerpo a{color:var(--green);font-weight:700;text-decoration:underline;text-decoration-color:var(--orange-200);text-underline-offset:3px}
.cuerpo img,.cuerpo figure{max-width:100%;height:auto;border-radius:12px;margin:0 0 20px}
.cuerpo figcaption{font:500 12px var(--f-ui);color:var(--neutral);margin-top:8px}
.cuerpo audio{width:100%;margin:0 0 20px}
.share button{display:flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--neutral-300);border-radius:999px;padding:8px 14px;font:700 12.5px var(--f-ui);color:var(--green);cursor:pointer}
.share button:hover{border-color:var(--green)}
.audio__play[aria-pressed="true"] svg{display:none}
.audio__play[aria-pressed="true"]::before{content:"";width:16px;height:18px;background:linear-gradient(90deg,var(--on-accent) 0 35%,transparent 35% 65%,var(--on-accent) 65%)}
@media (max-width:640px){
  .lupa{display:inline-flex}
  .mast__acc{gap:8px}
  .mast .btn{width:40px;height:40px;padding:0;justify-content:center}
  .mast .btn__t{display:none}
  .cabecera h1{font-size:28px}
}