/*
Theme Name: Pulso SL
Theme URI: https://pulsosl.com
Description: Tema de Pulso SL — AUDICO v1.1. Tema hijo de AUDICO Base. Diseño copiado del HTML de identidad (diseno/02_pulso_sl/), sin reinterpretar: home con rotación y nota, aprobadas el 14/10/2026.
Author: Narrativas Públicas
Template: audico-base
Version: 1.1
Text Domain: pulsosl
*/

/* ---------- Tokens y primitivas (del HTML de identidad) ---------- */
:root{
  --primario:#C44A00;
  --acento:#FF8C42;
  --fondo:#1A1A18;
  --fondo-2:#222220;
  --fondo-3:#2B2B28;
  --texto:#FFFFFF;
  --neutro:#888780;
  --neutro-2:#5A5A55;
  --linea:#3A3A36;
  --alerta:#FF3B30;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--fondo);color:var(--texto);font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none}
.label{font-family:"Inter",sans-serif;font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--neutro)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 10px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

/* Logo */
.lockup{display:flex;align-items:baseline;gap:4px;font-family:"Barlow Condensed";font-weight:900;font-style:italic;letter-spacing:-0.035em;text-transform:uppercase;line-height:0.85}
.lockup .sep{color:var(--primario);font-style:normal}
.lockup .sl{color:var(--primario)}
.lockup.lg{font-size:120px}
.lockup.md{font-size:64px}
.lockup.sm{font-size:40px}
.lockup.negro,.lockup.negro .sep,.lockup.negro .sl{color:#000}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:"Inter";font-weight:700;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;padding:13px 20px;border:0;cursor:pointer;transition:all .15s ease}
.btn .arr{font-family:"Barlow Condensed";font-weight:900;font-size:20px;line-height:0;transform:translateY(1px)}
.btn-pri{background:var(--primario);color:#fff}
.btn-pri:hover{background:#a73e00}

/* Etiquetas de sección */
.tag{font-family:"Inter";font-weight:700;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--linea);color:var(--texto)}
.tag.solid{background:var(--primario);border-color:transparent}

/* ---------- Header de nota (bloque naranja) — «Aplicación · header de nota» del HTML ---------- */
.article{background:var(--primario);color:#000;padding:36px 40px 28px;position:relative;overflow:hidden}
.article .topnav{display:flex;justify-content:space-between;align-items:center;padding-bottom:36px}
.article .topnav .links{display:flex;gap:36px;font-family:"Barlow Condensed";font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:0.04em;color:#000}
.article .topnav .links a{position:relative}
.article .topnav .right{display:flex;align-items:center;gap:14px}
.article .topnav .right .become{background:#000;color:#fff;padding:9px 14px;font-family:"Inter";font-weight:700;font-size:11px;letter-spacing:0.14em;text-transform:uppercase}
.article .topnav .right .menu{width:44px;height:44px;border-radius:50%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center}
.article .wm{font-family:"Barlow Condensed";font-style:italic;font-weight:900;letter-spacing:-0.04em;text-transform:uppercase;font-size:140px;line-height:0.85;margin:0 0 12px;display:flex;align-items:baseline}
.article .wm .sep{font-style:normal;color:#000}
.article .wm .sl{color:#fff}
.article .pitch{border:1.5px dashed rgba(0,0,0,.45);background:#fff;padding:28px 32px;display:grid;grid-template-columns:1fr 1.4fr auto;gap:28px;align-items:center;margin-bottom:36px}
.article .pitch .accent{height:6px;width:64px;background:var(--primario)}
.article .pitch h4{font-family:"Barlow Condensed";font-weight:800;font-size:26px;line-height:1;margin:10px 0 0;max-width:14ch;text-transform:uppercase}
.article .pitch p{margin:0;color:#222;font-size:14px;line-height:1.55;max-width:48ch}
.article .pitch p b{color:#000}
.article .pitch .cta{background:var(--primario);color:#fff;padding:14px 22px;font-family:"Inter";font-weight:700;letter-spacing:0.12em;text-transform:uppercase;font-size:13px}
.article .meta-row{display:grid;grid-template-columns:200px 1fr;gap:32px;padding-top:18px;border-top:1px dashed rgba(0,0,0,.4)}
.article .byline{font-family:"Inter";font-weight:400;font-size:14px;color:#000;line-height:1.55;border-right:1px dashed rgba(0,0,0,.45);padding-right:24px}
.article .byline b{font-weight:700}
.article .byline .ic{display:flex;gap:10px;margin-top:18px}
.article .byline .ic span,.article .byline .ic button{width:34px;height:34px;border:1px solid rgba(0,0,0,.4);border-radius:50%;display:flex;align-items:center;justify-content:center}
.article .head-block{padding-left:14px}
.article .kick{font-family:"Inter";font-weight:700;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:#000;margin-bottom:14px;display:inline-block;border-bottom:2px solid #000;padding-bottom:4px}
.article .head-block h1,.article .head-block h2{font-family:"Barlow Condensed";font-weight:900;font-size:88px;line-height:0.92;letter-spacing:-0.015em;margin:0;text-transform:uppercase;max-width:14ch}
.article .head-block .sub{font-family:"Inter";font-weight:400;font-size:20px;color:#1a1a18;line-height:1.4;max-width:36ch;margin-top:18px;padding-top:18px;border-top:1px dashed rgba(0,0,0,.35)}

/* ===== Home de Pulso con rotación: 1ª nota = header, 2ª y 3ª = placa de Facebook, 4ª a 7ª = reel, luego lista ===== */
.home{max-width:1440px;margin:0 auto;padding:32px 56px 96px}
.home .article .head-block h1,.home .article .head-block h2{max-width:none;font-size:clamp(44px,6.2vw,96px)}
.home .article .topnav .right .become{cursor:pointer}
.sec-t{display:flex;justify-content:space-between;align-items:baseline;margin:56px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--linea)}
.sec-t h3{font-family:"Barlow Condensed";font-weight:700;font-size:44px;line-height:1;text-transform:uppercase;margin:0}
/* placas (proporción 1200×630) */
.placas{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.placa{container-type:inline-size;aspect-ratio:1200/630;background:var(--primario);color:#000;display:flex;flex-direction:column;padding:3.6% 4.6% 3%;box-sizing:border-box;overflow:hidden}
.p-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:1.8cqw;border-bottom:1.5px dashed rgba(0,0,0,.4)}
.p-top .lockup{font-size:4.6cqw}
.p-tag{font-family:Inter;font-weight:700;font-size:1.4cqw;letter-spacing:.16em;text-transform:uppercase;background:#000;color:#fff;padding:.8cqw 1.3cqw}
.p-bloque{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.p-kick{font-family:Inter;font-weight:700;font-size:1.4cqw;letter-spacing:.16em;text-transform:uppercase;align-self:flex-start;border-bottom:.25cqw solid #000;padding-bottom:.4cqw;margin-bottom:1.4cqw}
.placa h3{font-family:"Barlow Condensed";font-weight:900;font-size:8.6cqw;line-height:.92;letter-spacing:-.015em;text-transform:uppercase;margin:0}
.p-pie{display:flex;justify-content:space-between;padding-top:1.5cqw;border-top:1.5px dashed rgba(0,0,0,.4);font-size:1.4cqw}
/* reels (proporción 9:16) */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.reel{container-type:inline-size;aspect-ratio:9/16;background:linear-gradient(180deg, rgba(26,26,24,0.15), rgba(26,26,24,0.85)), linear-gradient(135deg, #6a2700 0%, #C44A00 100%);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:7% 6% 9%;box-sizing:border-box;overflow:hidden}
.r-top{display:flex;justify-content:space-between;align-items:center}
.r-top .lockup{font-size:7cqw}.r-top .lockup .pulso{color:#fff}.r-top .lockup .sep,.r-top .lockup .sl{color:#000}
.r-chip{font-size:3cqw;letter-spacing:.06em;background:rgba(0,0,0,.4);padding:1cqw 2cqw}
.r-head{display:flex;flex-direction:column;min-height:0;max-height:70%}
.r-tag{font-family:Inter;font-weight:700;font-size:3cqw;letter-spacing:.16em;text-transform:uppercase;color:#000;background:#fff;padding:1.4cqw 2.2cqw;align-self:flex-start;margin-bottom:4cqw}
.reel h3{font-family:"Barlow Condensed";font-weight:900;font-size:15.5cqw;line-height:.9;letter-spacing:-.01em;text-transform:uppercase;margin:0}
.reel.con-foto{position:relative;isolation:isolate;background:#6a2700}
/* foto en color + velo naranja de la paleta + oscurecido abajo para leer el titular */
.reel.con-foto::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--foto) center/cover no-repeat;}
.reel.con-foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg, rgba(196,74,0,.62) 0%, rgba(106,39,0,.78) 100%)}
.reel.con-foto .r-head{position:relative}
.reel.con-foto .r-head::before{content:"";position:absolute;left:-30%;right:-30%;bottom:-40%;top:-20%;z-index:-1;background:linear-gradient(180deg, rgba(106,39,0,0), rgba(60,22,0,.75) 45%, rgba(40,15,0,.9))}
/* lista */
.lista{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 18px}
.lista a{border-top:3px solid var(--primario);padding-top:14px}
.lista .n{font-family:"JetBrains Mono";font-size:12px;color:var(--neutro)}
.lista h5{font-family:"Barlow Condensed";font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;margin:8px 0 0}
.todas{display:flex;justify-content:center;gap:14px;margin-top:36px}
/* Sumate: el formulario, con el recuadro punteado del HTML */
.sumate{margin-top:64px;border:1.5px dashed rgba(255,255,255,.35);background:#fff;color:#000;padding:32px;display:grid;grid-template-columns:1fr 1.4fr;gap:32px;align-items:center}
.sumate .accent{height:6px;width:64px;background:var(--primario)}
.sumate h4{font-family:"Barlow Condensed";font-weight:800;font-size:36px;line-height:1;margin:10px 0 0;text-transform:uppercase}
.sumate p{margin:10px 0 0;color:#222;font-size:14px;line-height:1.55}
.sumate form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.sumate input{font:500 15px Inter;padding:13px 14px;border:1px solid #1a1a18;background:#fff;color:#000}
.home .pie{margin-top:72px;padding-top:32px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.home .pie .tg{font-family:"Barlow Condensed";font-weight:700;letter-spacing:0.16em;text-transform:uppercase;font-size:16px;color:var(--neutro);margin-top:12px}

/* ===== Nota web de Pulso: lo que el HTML no define (foto, cuerpo, audio) se arma con sus componentes ===== */
.nota{max-width:1240px;margin:32px auto 0;padding:0 24px 96px}
.nota .article .wm{font-size:96px}
.nota .article .head-block h1{max-width:none;font-size:clamp(44px,6vw,88px);overflow-wrap:anywhere}
.foto{margin:0;background:#000;border:1px solid var(--linea)}
.foto img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.foto figcaption{display:flex;justify-content:space-between;padding:12px 16px;font-family:"JetBrains Mono";font-size:12px;color:var(--neutro);border-top:1px dashed var(--linea);text-transform:uppercase}
.cols{display:grid;grid-template-columns:200px 1fr;gap:32px;margin-top:40px}
.lado{border-right:1px dashed var(--linea);padding-right:24px;font-size:13px;color:var(--neutro)}
.lado .tag{display:inline-block;margin-bottom:12px}
.texto{max-width:680px}
.texto p{font-family:"Inter";font-size:20px;line-height:31px;color:#E6E6E0;margin:0 0 24px}
.texto a{color:var(--acento);text-decoration:underline}
.audio{border:1.5px dashed var(--linea);background:var(--fondo-2);padding:22px 24px;margin:0 0 36px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.audio .play{width:56px;height:56px;border-radius:50%;background:var(--primario);display:flex;align-items:center;justify-content:center}
.audio .t{font-family:"Barlow Condensed";font-weight:800;font-size:26px;text-transform:uppercase;line-height:1}
.audio .m{font-family:"JetBrains Mono";font-size:12px;color:var(--neutro);margin-top:6px}
.audio audio{grid-column:1/-1;width:100%}
.nota .pie{margin-top:56px;padding-top:22px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center}

/* ===== Lo que el sitio necesita y los diseños no dibujan (mismos componentes) ===== */
/* botones sin estilo de navegador (compartir, menú, play) */
.article .topnav .right .menu,.article .byline .ic button,.audio .play,.lado .compartir{border:0;cursor:pointer;font:inherit;padding:0}
.article .byline .ic button{background:transparent;color:#000;border:1px solid rgba(0,0,0,.4)}
.lado .compartir{background:none;color:var(--neutro);text-decoration:underline;text-underline-offset:3px}
/* Ver todas / anteriores: mismos botones del HTML */
.todas .btn{color:#fff}
/* sección, búsqueda y 404: la lista va sola */
.listado .lista{margin-top:36px}
.vacio{color:var(--neutro);font-size:15px;margin-top:36px}
.buscar{display:flex;gap:10px;margin-top:18px;max-width:560px}
.buscar input{flex:1;font:500 15px Inter;padding:13px 14px;border:1px solid #000;background:#fff;color:#000}

@media (max-width:900px){
  .home{padding:16px 16px 64px}.article{padding:24px 20px}.article .wm{font-size:72px!important}
  .article .pitch{grid-template-columns:1fr}.article .meta-row{grid-template-columns:1fr}.article .byline{border:0}
  .placas{grid-template-columns:1fr}
  .reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px}
  .reel{flex:0 0 68%;scroll-snap-align:start}
  .lista{grid-template-columns:1fr}.sumate form{grid-template-columns:1fr}
}
/* v1.1 — hasta 1200 px las seis secciones no entran en la barra: van al botón redondo (como en el celular)
   y el «Sumate» pasa a una columna para que el título no se parta */
@media (max-width:1200px){
  .article .topnav .links{display:none}
  .article .topnav{flex-wrap:wrap}
  .article .topnav .links.abierto{display:flex;order:3;width:100%;flex-direction:column;gap:14px;padding-top:24px}
  .sumate{grid-template-columns:1fr}
}
@media (max-width:760px){.cols{grid-template-columns:1fr}.lado{border:0;padding:0}.nota .article .wm{font-size:64px!important}}