/* p-conoce.css · /conoce-al-fumigador-bonito/ · «Línea de tiempo en vivo» + título rellenable · prefijo .cn-
   Estados iniciales ocultos SOLO bajo html.fx y con la clase que pone p-conoce.js (sin JS todo se ve). */

/* ---------- hero ---------- */
.cn-hero .phero-grid{grid-template-columns:minmax(0,1fr)}
.cn-hero .chip{max-width:100%}
@media (min-width:1024px){.cn-hero .phero-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}}
.cn-h1-3{font-size:.4em;letter-spacing:.05em;color:var(--cian);margin-top:.5em}
.cn-shot{aspect-ratio:3/4;max-width:440px;margin-inline:auto}
.cn-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,17,29,.5),rgba(0,17,29,0) 24%,rgba(0,17,29,0) 60%,rgba(1,47,74,.88))}
.cn-rec{position:absolute;z-index:2;left:1rem;top:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .7rem;border-radius:8px;background:rgba(0,17,29,.72);font-size:.74rem;font-weight:700;letter-spacing:.14em}
.cn-shot figcaption{position:absolute;z-index:2;left:1rem;right:1rem;bottom:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.cn-shot figcaption span{padding:.4rem .75rem;border-radius:999px;background:#fff;color:var(--estudio);font-size:.8rem;font-weight:700}
.cn-shot figcaption span:last-child{background:var(--cian)}

/* ---------- quién es + ficha ---------- */
.cn-quien{align-items:center}
.cn-ficha{position:relative;padding:1.5rem 1.6rem 1.2rem;border-radius:26px;background:var(--estudio);color:#fff;box-shadow:0 40px 70px -40px rgba(1,47,74,.7);--focus:var(--cian)}
.cn-ficha-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cian)}
.cn-ficha dl{margin:0}
.cn-ficha dl>div{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:1rem;padding:.72rem 0;border-top:1px solid rgba(255,255,255,.12)}
.cn-ficha dt{padding-top:.18rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--niebla)}
.cn-ficha dd{margin:0;font-weight:500;line-height:1.4}

/* ---------- frase bandera: título rellenable ---------- */
.cn-eb{margin-bottom:1.3rem}
.cn-fill{font-size:clamp(2.3rem,5.4vw,5.8rem);line-height:.98;max-width:27ch;margin-bottom:1.3rem}
.cn-fill em{font-style:normal;color:var(--cian)}
.fx .cn-fill.is-armed .rf-w{opacity:.46;transition:opacity .5s var(--ease)}
.fx .cn-fill.is-armed .rf-w.on{opacity:1}
.cn-firma{margin-bottom:clamp(2.6rem,5vw,4.2rem);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla)}
.cn-historia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem clamp(2rem,4vw,3.4rem);max-width:none}
.cn-historia>div{margin-top:0}
.cn-historia>div>*+*{margin-top:1rem}
.cn-historia h3{margin-top:0}

/* ---------- línea de tiempo en vivo ---------- */
.cn-tl{position:relative;background:var(--madrugada);color:#fff;padding-block:var(--sec);--ph:34vw;--cw:330px}
.cn-tl-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.2rem 4rem;align-items:end}
.cn-tl-top .head{margin-bottom:0}
.cn-tl-hud{display:none}
.cn-tl-view{position:relative;max-width:var(--wrap);margin:clamp(2.4rem,5vw,3.4rem) auto 0}
/* base (celular, sin JS o con reduced-motion): línea vertical */
.cn-tl-rail{position:relative;display:grid;gap:1rem;padding:0 var(--gut) 0 calc(var(--gut) + 2.3rem)}
.cn-tl-rail::before{content:"";position:absolute;left:calc(var(--gut) + .62rem);top:.5rem;bottom:.5rem;width:2px;background:rgba(255,255,255,.14)}
.cn-tl-head{position:absolute;z-index:1;left:calc(var(--gut) + .62rem);top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(var(--cian),var(--magenta));transform-origin:50% 0;transform:scaleY(var(--p,1));pointer-events:none}
.cn-clip{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:.15rem 1rem;align-items:start;padding:1rem 1.1rem 1.1rem 1rem;border-radius:20px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);transition:background-color .45s,box-shadow .45s,opacity .45s}
.cn-clip::before{content:"";position:absolute;left:-2.06rem;top:1.35rem;width:14px;height:14px;border-radius:50%;background:var(--madrugada);box-shadow:0 0 0 2px rgba(255,255,255,.45);transition:background-color .3s,box-shadow .3s}
.cn-clip.is-live{background:rgba(37,244,238,.08);box-shadow:inset 0 0 0 1.5px var(--cian)}
.cn-clip.is-live::before{background:var(--rec);box-shadow:0 0 0 2px var(--rec),0 0 0 8px rgba(255,59,48,.22)}
.cn-clip>*{grid-column:2}
.cn-clip-img,.cn-clip-art{grid-column:1;grid-row:1 / span 4;display:grid;place-items:center;aspect-ratio:1;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,var(--senal),var(--estudio))}
.cn-clip-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.cn-clip-art svg{width:40%;height:40%;fill:#fff}
.cn-clip-art b{font:400 1.25rem/1 var(--f-display);text-align:center;padding:.3rem}
.cn-clip-art--pc{background:linear-gradient(150deg,var(--magenta),var(--pcd))}
.cn-clip-art--viral{background:linear-gradient(150deg,var(--magenta),#7a1236)}
.cn-clip-art--doc{background:linear-gradient(150deg,var(--pcd),var(--madrugada))}
.cn-clip-art--doc svg{fill:none;stroke:#fff;stroke-width:1.6}
.cn-clip-art--news{background:#F4F1EA;color:#111}
.cn-clip-art--news b{font-family:Georgia,'Times New Roman',serif;font-size:.9rem;font-style:italic;font-weight:700;text-transform:none;letter-spacing:-.01em}
.cn-clip-art--now{background:radial-gradient(circle,rgba(255,59,48,.35),transparent 62%),var(--estudio)}
.cn-clip-art--now .rec-dot{width:18px;height:18px}
.cn-clip-yr{font:400 1.2rem/1 var(--f-display);letter-spacing:.03em;color:var(--cian);margin-bottom:.3rem}
.cn-clip h3{font-size:clamp(1.4rem,2vw,1.7rem);margin-bottom:.4rem}
.cn-clip p:not(.cn-clip-yr){font-size:.94rem;line-height:1.5;color:var(--niebla)}
.cn-clip-a{justify-self:start;margin-top:.7rem;font-weight:700;font-size:.9rem;color:#fff;text-decoration:underline;text-decoration-color:var(--cian);text-decoration-thickness:2px;text-underline-offset:.22em}
.cn-clip-btn{padding:0;border:0;background:none;cursor:pointer;font-family:inherit}
.cn-clip-a:hover{text-decoration-color:#fff}
.cn-clip--now .cn-clip-yr{color:var(--magenta)}
.fx .cn-tl.is-flow .cn-tl-head{transition:transform .12s linear}
/* escritorio sin tira anclada (reduced-motion, sin JS o pantalla baja): rejilla de 2 columnas en orden */
@media (min-width:1024px){
  .cn-tl:not(.is-pin) .cn-tl-rail{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:var(--gut)}
  .cn-tl:not(.is-pin) .cn-tl-rail::before,.cn-tl:not(.is-pin) .cn-tl-head,.cn-tl:not(.is-pin) .cn-clip::before{display:none}
}

/* escritorio con JS y movimiento: tira horizontal anclada (la mueve el scroll vertical) */
.cn-tl.is-pin{padding:0}
.cn-tl.is-pin .cn-tl-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--hdr) + .6rem)}
.cn-tl.is-pin .cn-tl-top .h2{font-size:clamp(2.4rem,4.4vw,4.6rem)}
.cn-tl.is-pin .cn-tl-hud{display:flex;align-items:center;gap:1rem;width:100%;max-width:var(--wrap);margin:clamp(1.2rem,2.6vh,2rem) auto 0;padding-inline:var(--gut);font-weight:700;font-size:.78rem;letter-spacing:.16em}
.cn-tl-rec{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-radius:8px;background:rgba(255,59,48,.16);box-shadow:inset 0 0 0 1.5px var(--rec)}
.cn-tl-now{font:400 2.2rem/1 var(--f-display);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--cian);min-width:3.2ch}
.cn-tl-bar{position:relative;flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.cn-tl-bar i{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,var(--cian),var(--magenta));transform-origin:0 50%;transform:scaleX(var(--tp,0))}
.cn-tl.is-pin .cn-tl-view{max-width:none;width:100%;margin:1rem 0 0}
.cn-tl.is-pin .cn-tl-rail{display:flex;align-items:stretch;gap:1.1rem;width:max-content;max-width:none;margin:0;padding:2.3rem calc(100vw - var(--ph) - var(--cw) / 2) .4rem calc(var(--ph) - var(--cw) / 2);will-change:transform}
.cn-tl.is-pin .cn-tl-rail::before{left:0;right:0;top:.55rem;bottom:auto;width:auto;height:12px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 1px,transparent 1px 22px);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cn-tl.is-pin .cn-tl-head{left:var(--ph);top:0;bottom:auto;height:2.3rem;width:2px;margin-left:-1px;background:var(--rec);transform:none;z-index:3;box-shadow:0 0 14px rgba(255,59,48,.7)}
.cn-tl.is-pin .cn-tl-head::before{content:"";position:absolute;left:50%;top:0;width:16px;height:16px;margin-left:-8px;border-radius:3px 3px 50% 50%;background:var(--rec)}
.cn-tl.is-pin .cn-clip{flex:none;display:flex;flex-direction:column;width:var(--cw);opacity:.6}
.cn-tl.is-pin .cn-clip.is-live{opacity:1}
.cn-tl.is-pin .cn-clip::before{display:none}
.cn-tl.is-pin .cn-clip-img,.cn-tl.is-pin .cn-clip-art{aspect-ratio:16/9;width:100%;margin-bottom:.85rem}
.cn-tl.is-pin .cn-clip-art b{font-size:clamp(2.2rem,3.4vw,3rem)}
.cn-tl.is-pin .cn-clip-art--news b{font-size:1.9rem}
.cn-tl.is-pin .cn-clip-a{margin-top:auto;padding-top:.7rem}
@media (max-height:800px){.cn-tl.is-pin .cn-tl-top .lead{display:none}.cn-tl.is-pin{--cw:300px}.cn-tl.is-pin .cn-clip p:not(.cn-clip-yr){font-size:.88rem}}

/* ---------- cifras ---------- */
.cn-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.22)}
.cn-nums li{display:flex;flex-direction:column;gap:.35rem;padding:1.4rem 1.2rem 1.5rem 0;border-bottom:1px solid rgba(255,255,255,.22)}
.cn-nums li:not(:nth-child(3n+1)){padding-left:1.4rem;border-left:1px solid rgba(255,255,255,.22)}
.cn-nums b{font:400 clamp(2.4rem,4.6vw,4.4rem)/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.cn-nums li>span{font-size:.96rem;color:var(--bruma)}
.cn-nota{margin-top:1.3rem;font-size:.84rem;color:var(--bruma)}

/* ---------- El PestCast ---------- */
.cn-pc{align-items:center}
.cn-pc .ctas{margin-top:1.8rem}
.cn-pc .follow{box-shadow:inset 0 0 0 1.5px rgba(1,47,74,.14)}
.cn-pc-card{padding:1.8rem 1.8rem 2rem;border-radius:28px;background:#fff;box-shadow:0 40px 70px -40px rgba(1,47,74,.55)}
.cn-pc-card h3{font-size:clamp(1.7rem,2.4vw,2.2rem);margin:1.2rem 0 1rem}
.cn-wave{display:flex;align-items:center;gap:6px;height:64px}
.cn-wave i{flex:1;height:100%;border-radius:6px;background:linear-gradient(var(--magenta),var(--pcd));transform:scaleY(var(--h,.5));transform-origin:50% 50%}
.cn-wave i:nth-child(3n){--h:.85}.cn-wave i:nth-child(3n+1){--h:.4}.cn-wave i:nth-child(4n){--h:.65}.cn-wave i:nth-child(5n){--h:.95}
@media (prefers-reduced-motion:no-preference){.cn-wave i{animation:cnWave 1.3s ease-in-out infinite alternate;animation-play-state:paused}.cn-wave.is-playing i{animation-play-state:running}.cn-wave i:nth-child(2n){animation-duration:.9s}.cn-wave i:nth-child(3n){animation-delay:-.4s}}
@keyframes cnWave{to{transform:scaleY(calc(var(--h,.5) * .35))}}

/* ---------- así trabajo · PCD ---------- */
.cn-cards .card h3{font-size:clamp(1.4rem,1.8vw,1.65rem)}
.cn-links{margin-top:2.2rem;max-width:80ch}
.cn-pcd{align-items:center}
.cn-pcd-card{display:grid;gap:1.6rem;padding:2rem;border-radius:28px;background:rgba(0,27,46,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.cn-pcd-card>img{width:min(240px,70%);height:auto}
.cn-pcd-card .iso{margin:0}
#preguntas .me-links{margin:1.4rem 0 .4rem}

/* ---------- responsivo ---------- */
@media (max-width:1023px){
  .cn-tl-top{grid-template-columns:1fr}
  .cn-historia{grid-template-columns:1fr}
  .cn-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cn-nums li:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .cn-nums li:nth-child(2n){padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.22)}
  .cn-shot{max-width:380px}
}
@media (max-width:480px){
  .cn-clip{grid-template-columns:72px minmax(0,1fr);padding:.9rem .9rem 1rem .85rem}
  .cn-ficha{padding:1.3rem 1.2rem 1rem}
  .cn-ficha dl>div{grid-template-columns:1fr;gap:.2rem}
  .cn-nums b{font-size:2.1rem}
}
/* medida de texto en escritorio (45-95 caracteres por renglon) */
.cn-nota{max-width:88ch}