/*
Theme Name:   Perfiles 2026
Theme URI:    https://www.perfiles.uy
Description:  Tema hijo de ColorMag para el portal Perfiles. Rediseño de portada: identidad del logo, paleta vino #A62D52, Último Momento, Perfiles TV y zonas AdRotate.
Author:       Sergio Pérez — Gestor Cultural
Author URI:   https://www.sergioperez.uy
Template:     colormag
Version:      1.1.0
Requires PHP: 7.4
Text Domain:  perfiles-child
*/


/* ============ TOKENS ============ */
:root{
  --paper:#FBF7F8; --paper-2:#FFFFFF; --paper-3:#F4E9ED;
  --ink:#1C0A12; --ink-2:#4C3540; --ink-3:#7C6670;
  --rule:#E7D7DC; --rule-2:#D4BCC4;
  --brand:#A62D52; --brand-deep:#82203F; --live:#D70B52;
  --on-brand:#FFFFFF;
  --k-regionales:#A62D52; --k-policiales:#274060; --k-deportes:#0B7A4B;
  --k-agro:#96631A; --k-show:#7B3AA8; --k-mundial:#1B4FD8; --k-general:#5B5563;
  --shadow:0 1px 2px rgba(28,10,18,.06), 0 8px 24px -12px rgba(28,10,18,.18);
  --shadow-lift:0 2px 4px rgba(28,10,18,.08), 0 18px 40px -16px rgba(28,10,18,.28);
  --dock:#24101A; --dock-ink:#FBF7F8;
  --invert-bg:#1C0A12; --invert-ink:#FBF7F8;
  --maxw:1240px; --gut:20px;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --crowd:url("assets/img/crowd.webp");
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#140A0E; --paper-2:#1E1015; --paper-3:#28161C;
  --ink:#F8EFF2; --ink-2:#CDB4BD; --ink-3:#9C838C;
  --rule:#38202A; --rule-2:#4E2E3A;
  --brand:#E8688C; --brand-deep:#F08AA6; --live:#FF5C8A;
  --on-brand:#1C0A12;
  --k-regionales:#E8688C; --k-policiales:#7FA8D9; --k-deportes:#3ED89A;
  --k-agro:#E0B14A; --k-show:#C08CEA; --k-mundial:#7CA0FF; --k-general:#AEA8B8;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.55), 0 18px 40px -16px rgba(0,0,0,.8);
  --dock:#2A1219; --dock-ink:#F8EFF2;
  --invert-bg:#0D0508; --invert-ink:#F8EFF2;
}}
:root[data-theme="dark"]{
  --paper:#140A0E; --paper-2:#1E1015; --paper-3:#28161C;
  --ink:#F8EFF2; --ink-2:#CDB4BD; --ink-3:#9C838C;
  --rule:#38202A; --rule-2:#4E2E3A;
  --brand:#E8688C; --brand-deep:#F08AA6; --live:#FF5C8A;
  --on-brand:#1C0A12;
  --k-regionales:#E8688C; --k-policiales:#7FA8D9; --k-deportes:#3ED89A;
  --k-agro:#E0B14A; --k-show:#C08CEA; --k-mundial:#7CA0FF; --k-general:#AEA8B8;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.55), 0 18px 40px -16px rgba(0,0,0,.8);
  --dock:#2A1219; --dock-ink:#F8EFF2;
  --invert-bg:#0D0508; --invert-ink:#F8EFF2;
}

/* ============ BASE ============ */
/* ColorMag declara svg{display:block}, que gana sobre la regla del navegador
   para [hidden]. Sin esto se ven los dos iconos del cambio de tema a la vez. */
[hidden]{display:none!important}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;padding-bottom:96px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* utility type */
.kicker{font-family:var(--f-display);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-variation-settings:"wdth" 88}
.meta{font-family:var(--f-display);font-size:13px;font-weight:500;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;text-wrap:balance;
  letter-spacing:-.021em;line-height:1.08;font-weight:800}

/* ============ TOPBAR ============ */
.topbar{background:var(--invert-bg);color:var(--invert-ink)}
.topbar .wrap{display:flex;align-items:center;gap:16px;
  min-height:34px;padding-block:6px;flex-wrap:wrap}
.today{font-family:var(--f-display);font-size:12.5px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;opacity:.72;font-variant-numeric:tabular-nums}
.social{display:flex;gap:2px;margin-left:auto}
.social a{width:28px;height:28px;display:grid;place-items:center;border-radius:6px;opacity:.78;
  transition:opacity .15s,background .15s}
.social a:hover{opacity:1;background:rgba(255,255,255,.12)}
.social svg{width:15px;height:15px;fill:currentColor}

/* ============ MASTHEAD ============ */
.masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;gap:14px;min-height:68px;padding-block:9px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{width:46px;height:46px;flex-shrink:0;filter:drop-shadow(0 2px 5px rgba(166,45,82,.28))}
.brand-type{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--f-display);font-size:30px;font-weight:800;font-style:italic;
  letter-spacing:-.035em;font-variation-settings:"wdth" 96;color:var(--ink)}
.brand-desc{font-family:var(--f-display);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);margin-top:3px}
.mast-actions{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}
.icon-btn{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);
  transition:background .15s,color .15s}
.icon-btn:hover{background:var(--paper-3);color:var(--ink)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.live-btn{display:flex;align-items:center;gap:7px;height:38px;padding-inline:13px;border-radius:999px;
  background:var(--brand);color:var(--on-brand);font-family:var(--f-display);font-size:12.5px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:filter .15s,transform .15s}
.live-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.live-btn .lbl-sm{display:none}
.live-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ============ NAV ============ */
.nav{border-bottom:1px solid var(--rule);background:var(--paper);position:relative}
.nav-scroll{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-scroll a{flex-shrink:0;scroll-snap-align:start;position:relative;
  padding:13px 11px 12px;font-family:var(--f-display);font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
  font-variation-settings:"wdth" 92;transition:color .15s}
.nav-scroll a::after{content:"";position:absolute;left:11px;right:11px;bottom:0;height:2.5px;
  background:var(--k,var(--brand));transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.nav-scroll a:hover{color:var(--ink)}
.nav-scroll a:hover::after,.nav-scroll a[aria-current]::after{transform:scaleX(1)}
.nav-scroll a[aria-current]{color:var(--k,var(--brand))}
.nav-scroll a.urgent{color:var(--live)}
.nav-fade{position:absolute;top:0;bottom:1px;width:36px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--paper));right:0}

/* ============ TICKER ============ */
.ticker{background:var(--paper-3);color:var(--ink);border-bottom:1px solid var(--rule);overflow:hidden}
.ticker .wrap{display:flex;align-items:center;gap:12px;min-height:38px;padding-block:7px}
.ticker-label{font-family:var(--f-display);font-size:11px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;gap:6px;
  background:var(--live);color:#fff;padding:5px 10px;border-radius:999px}
.ticker-label{color:#FFFFFF}
.ticker-items{position:relative;flex:1;min-width:0;height:20px}
.ticker-items a{position:absolute;inset:0;display:flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);
  transition:opacity .4s,transform .4s}
.ticker-items a.on{opacity:1;transform:none}
.ticker-items time{font-size:12px;font-weight:700;color:var(--live);flex-shrink:0;
  font-variant-numeric:tabular-nums}
.ticker-items span{overflow:hidden;text-overflow:ellipsis}

/* ============ PORTADA GRID ============ */
.portada{display:grid;gap:26px;padding-block:26px 34px;
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr) minmax(0,.72fr)}
.lead{position:relative;border-radius:14px;overflow:hidden;background:var(--paper-3);
  min-height:430px;display:flex;align-items:flex-end;box-shadow:var(--shadow-lift)}
.lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.lead:hover img{transform:scale(1.035)}
.lead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(186deg,rgba(15,2,13,.14) 0%,rgba(15,2,13,.52) 38%,rgba(15,2,13,.94) 100%)}
.lead-body{position:relative;z-index:2;padding:26px 26px 24px;color:#fff;width:100%}
.lead h2{font-size:clamp(30px,3.3vw,44px);color:#fff;font-weight:800;
  text-shadow:0 2px 18px rgba(0,0,0,.45);margin-block:11px 0}
.lead .deck{font-size:17.5px;line-height:1.45;color:rgba(255,255,255,.9);margin:11px 0 0;
  max-width:54ch;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.lead .meta{color:rgba(255,255,255,.72);margin-top:13px;display:flex;gap:9px;align-items:center}

.tag{display:inline-flex;align-items:center;gap:6px;padding:4.5px 10px;border-radius:999px;
  background:var(--k,var(--brand));color:#fff;font-family:var(--f-display);font-size:11.5px;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.tag.ghost{background:rgba(255,255,255,.17);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3)}
/* dark theme lightens the section keys, so solid tags flip to dark text */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag:not(.ghost){color:#1C0A12}}
:root[data-theme="dark"] .tag:not(.ghost){color:#1C0A12}

.secondaries{display:flex;flex-direction:column;gap:20px;min-width:0}
.sec-card{display:flex;flex-direction:column;gap:11px;min-width:0;flex:1}
.sec-card .thumb{position:relative;border-radius:11px;overflow:hidden;aspect-ratio:16/9;
  background:var(--paper-3);box-shadow:var(--shadow)}
.sec-card .thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.sec-card:hover .thumb img{transform:scale(1.045)}
.sec-card .thumb .tag{position:absolute;left:10px;top:10px}
.sec-card h3{font-size:21px;line-height:1.16;font-weight:700}
.sec-card:hover h3{color:var(--brand)}
.sec-card .meta{margin-top:-4px}

/* most-read rail: numbers encode real ranking */
.rail{border-left:1px solid var(--rule);padding-left:20px;min-width:0}
.rail-head{display:flex;align-items:baseline;gap:8px;padding-bottom:12px;
  border-bottom:2px solid var(--ink);margin-bottom:4px}
.rail-head h2{font-size:16.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:800}
.rail-head .meta{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}
.rail ol{list-style:none;margin:0;padding:0}
.rail li{border-bottom:1px solid var(--rule)}
.rail a{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;padding:13px 0}
.rail .rank{font-family:var(--f-display);font-size:31px;font-weight:800;line-height:.88;
  color:var(--rule-2);font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 80;
  transition:color .18s}
.rail a:hover .rank{color:var(--brand)}
.rail h4{font-size:16px;line-height:1.26;font-weight:600;font-family:var(--f-display)}
.rail a:hover h4{color:var(--brand)}
.rail .meta{font-size:12.5px;margin-top:5px}

/* ============ AD SLOT ============ */
.adslot{margin-block:8px 30px;border:1px dashed var(--rule-2);border-radius:12px;
  background:var(--paper-2);padding:16px;text-align:center}
.adslot .kicker{color:var(--ink-3);display:block;margin-bottom:9px}
.adslot-inner{display:grid;place-items:center;min-height:96px;border-radius:8px;
  background:linear-gradient(135deg,var(--paper-3),var(--paper-2));color:var(--ink-3);
  font-family:var(--f-display);font-size:14.5px;font-weight:600;padding:16px}

/* ============ SECTION BLOCKS ============ */
.section{padding-block:30px;border-top:1px solid var(--rule)}
.sec-head{display:flex;align-items:center;gap:13px;margin-bottom:22px;position:relative}
.sec-head h2{font-size:clamp(23px,2.5vw,29px);font-weight:800;letter-spacing:-.02em;
  display:flex;align-items:center;gap:11px}
.sec-head h2::before{content:"";width:5px;height:1.05em;border-radius:3px;
  background:var(--k);flex-shrink:0}
.sec-head .all{margin-left:auto;font-family:var(--f-display);font-size:13px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--k);display:flex;align-items:center;gap:5px;
  flex-shrink:0;transition:gap .18s}
.sec-head .all:hover{gap:9px}
.sec-head .all svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

.sec-grid{display:grid;gap:26px;align-items:start;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.block-lead{display:flex;flex-direction:column;gap:13px;min-width:0}
.block-lead .thumb{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;
  background:var(--paper-3);box-shadow:var(--shadow)}
.block-lead .thumb img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.block-lead:hover .thumb img{transform:scale(1.04)}
.block-lead h3{font-size:clamp(21px,2.2vw,27px);line-height:1.14;font-weight:800}
.block-lead:hover h3{color:var(--k)}
.block-lead .deck{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin:0;max-width:60ch}

.stack{display:flex;flex-direction:column;min-width:0}
.stack a{display:grid;grid-template-columns:1fr 92px;gap:14px;align-items:start;
  padding-block:14px;border-bottom:1px solid var(--rule)}
.stack a:first-child{padding-top:0}
.stack a:last-child{border-bottom:0}
.stack .txt{min-width:0}
.stack h4{font-size:17.5px;line-height:1.24;font-weight:600;font-family:var(--f-display)}
.stack a:hover h4{color:var(--k)}
.stack .meta{margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stack .meta .k{color:var(--k);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}
.stack .ph{width:92px;aspect-ratio:1/1;border-radius:9px;overflow:hidden;background:var(--paper-3);flex-shrink:0}
.stack .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.stack a:hover .ph img{transform:scale(1.06)}

/* ============ TV BAND ============ */
.tv{background:var(--dock);color:var(--dock-ink);position:relative;overflow:hidden;margin-block:34px}
.tv::before{content:"";position:absolute;right:-30px;top:0;bottom:0;width:60%;opacity:.07;
  background:var(--live);
  -webkit-mask:var(--crowd) right center/auto 78% repeat-x;
  mask:var(--crowd) right center/auto 78% repeat-x}
.tv .wrap{position:relative;z-index:2;padding-block:34px;display:grid;gap:26px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
.tv h2{font-size:clamp(28px,3.1vw,38px);color:#fff;font-weight:800;margin-bottom:12px}
.tv h2 em{font-style:italic;color:var(--live);font-weight:800}
.tv p{color:rgba(248,239,242,.74);font-size:17px;line-height:1.55;margin:0 0 20px;max-width:46ch}
.tv .kicker{color:var(--live);display:block;margin-bottom:9px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;
  background:var(--live);color:#FFFFFF;font-family:var(--f-display);font-size:13.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;transition:transform .16s,filter .16s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn svg{width:15px;height:15px;fill:currentColor}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.tv-player{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;
  background:#000;box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}
.tv-player img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .4s,transform .7s}
.tv-player:hover img{opacity:.78;transform:scale(1.03)}
.play{position:absolute;inset:0;display:grid;place-items:center}
.play span{width:66px;height:66px;border-radius:50%;background:var(--live);display:grid;
  place-items:center;box-shadow:0 0 0 0 rgba(215,11,82,.5);animation:ring 2.6s ease-out infinite;
  transition:transform .2s}
.tv-player:hover .play span{transform:scale(1.09)}
.play svg{width:23px;height:23px;fill:#FFFFFF;margin-left:4px}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(215,11,82,.45)}70%{box-shadow:0 0 0 26px rgba(215,11,82,0)}100%{box-shadow:0 0 0 0 rgba(215,11,82,0)}}
.tv-caption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;z-index:2;
  background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff}
.tv-caption h3{font-size:17.5px;font-weight:700;line-height:1.24}

/* ============ MARKETPLACE ============ */
.mkt{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  align-items:center;padding:26px;border-radius:14px;background:var(--paper-2);
  border:1px solid var(--rule);box-shadow:var(--shadow);margin-bottom:34px}
.mkt h2{font-size:clamp(24px,2.5vw,31px);margin-bottom:9px}
.mkt p{color:var(--ink-2);font-size:16.5px;margin:0 0 17px;max-width:44ch;line-height:1.5}
.mkt .kicker{color:var(--brand);display:block;margin-bottom:8px}
.mkt-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{display:flex;flex-direction:column;padding:17px 15px;border-radius:11px;
  background:var(--paper);border:1px solid var(--rule);
  transition:transform .18s,border-color .18s,box-shadow .18s}
.tile:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow)}
.tile .n{font-family:var(--f-display);font-size:28px;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums;line-height:1}
.tile .l{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--ink-2);margin-top:6px;
  line-height:1.3}
.btn.solid{background:var(--brand);color:var(--on-brand)}

/* ============ RADIO DOCK ============ */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--dock);color:var(--dock-ink);
  border-top:1px solid rgba(215,11,82,.3);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -12px 40px -16px rgba(0,0,0,.65);overflow:hidden}
.dock::before{content:"";position:absolute;right:0;top:0;bottom:0;width:340px;opacity:.1;
  background:var(--live);pointer-events:none;
  -webkit-mask:var(--crowd) right bottom/auto 86% no-repeat;
  mask:var(--crowd) right bottom/auto 86% no-repeat}
.dock .wrap{position:relative;z-index:2;display:flex;align-items:center;gap:14px;
  min-height:68px;padding-block:11px}
.dock-play{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--live);transition:transform .16s,filter .16s}
.dock-play:hover{transform:scale(1.07);filter:brightness(1.1)}
.dock-play svg{width:17px;height:17px;fill:#FFFFFF}
.dock-play .i-pause{display:none}
.dock[data-state="playing"] .dock-play .i-play{display:none}
.dock[data-state="playing"] .dock-play .i-pause{display:block}
.dock-txt{min-width:0;flex:1}
.dock-txt .kicker{color:var(--live);display:flex;align-items:center;gap:6px}
.dock-txt .now{font-family:var(--f-display);font-size:16px;font-weight:700;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-note{font-family:var(--f-display);font-size:12.5px;color:rgba(248,239,242,.55);margin-top:2px}
.eq{display:flex;align-items:flex-end;gap:2.5px;height:22px;flex-shrink:0;margin-left:4px}
.eq i{width:3px;background:var(--live);border-radius:2px;height:20%;opacity:.35}
.dock[data-state="playing"] .eq i{opacity:1;animation:bounce 1s ease-in-out infinite}
.dock[data-state="playing"] .eq i:nth-child(2){animation-delay:.18s}
.dock[data-state="playing"] .eq i:nth-child(3){animation-delay:.36s}
.dock[data-state="playing"] .eq i:nth-child(4){animation-delay:.09s}
.dock[data-state="playing"] .eq i:nth-child(5){animation-delay:.27s}
@keyframes bounce{0%,100%{height:18%}50%{height:100%}}
.dock-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.dock-chip{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);font-family:var(--f-display);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(248,239,242,.82);transition:background .15s,color .15s}
.dock-chip:hover{background:rgba(255,255,255,.1);color:#fff}
.dock-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dock-close{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  color:rgba(248,239,242,.6);flex-shrink:0}
.dock-close:hover{background:rgba(255,255,255,.1);color:#fff}
.dock-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* ============ FOOTER ============ */
.foot{background:var(--invert-bg);color:var(--invert-ink);padding-block:42px 30px;
  position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;left:50%;top:0;height:46px;width:min(820px,88%);
  transform:translateX(-50%);opacity:.07;background:var(--live);pointer-events:none;
  -webkit-mask:var(--crowd) center top/auto 100% repeat-x;
  mask:var(--crowd) center top/auto 100% repeat-x}
.foot .wrap{position:relative;z-index:2}
.foot-grid{display:grid;gap:30px;grid-template-columns:1.5fr 1fr 1fr 1.2fr;padding-top:28px}
.foot h4{font-family:var(--f-display);font-size:12.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--live);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot li a{font-family:var(--f-display);font-size:15px;color:rgba(248,239,242,.72);
  transition:color .15s}
.foot li a:hover{color:var(--live)}
.foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.foot-brand img{width:50px;height:50px}
.foot-brand .brand-name{color:#fff;font-size:27px}
.foot-tagline{font-size:16px;line-height:1.55;color:rgba(248,239,242,.66);max-width:34ch;margin:0 0 16px}
.foot .social{margin-left:0;margin-top:4px}
.foot .social a{background:rgba(255,255,255,.08);color:#fff;width:34px;height:34px;border-radius:9px}
.foot .social a:hover{background:var(--live);color:#FFFFFF}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;
  font-family:var(--f-display);font-size:12.5px;color:rgba(248,239,242,.48);line-height:1.6}
.legal strong{color:rgba(248,239,242,.72);font-weight:600}
/* credito de desarrollo: firma manuscrita, en blanco sobre el pie oscuro */
.credit{margin-left:auto;display:flex;align-items:center;gap:13px;
  opacity:.75;transition:opacity .2s}
.credit:hover,.credit:focus-visible{opacity:1}
.credit-label{font-family:var(--f-display);font-size:10.5px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:rgba(248,239,242,.55);
  white-space:nowrap}
.credit img{width:200px;height:auto;flex-shrink:0}


/* ===== ULTIMO MOMENTO: cronologia real de la categoria ===== */
.ahora-grid{display:grid;gap:30px;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:start}
.ahora-lead{display:flex;flex-direction:column;gap:12px}
.ahora-lead .thumb{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;
  background:var(--paper-3);box-shadow:var(--shadow)}
.ahora-lead .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.ahora-lead:hover .thumb img{transform:scale(1.04)}
.ahora-lead h3{font-size:clamp(20px,2.1vw,26px);line-height:1.14;font-weight:800}
.ahora-lead:hover h3{color:var(--live)}
.ahora-lead .deck{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin:0;max-width:56ch}
.now-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  background:var(--live);color:#fff;font-family:var(--f-display);font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;align-self:flex-start}
.ahora-list{list-style:none;margin:0;padding:0;position:relative}
.ahora-list::before{content:"";position:absolute;left:64px;top:10px;bottom:10px;width:1px;background:var(--rule)}
.ahora-list li{position:relative}
.ahora-list a{display:grid;grid-template-columns:54px 1fr;gap:22px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.ahora-list li:last-child a{border-bottom:0}
.ahora-list .t{font-family:var(--f-display);font-size:12.5px;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;text-align:right;padding-top:2px;white-space:nowrap}
.ahora-list .dot{position:absolute;left:61px;top:21px;width:7px;height:7px;border-radius:50%;
  background:var(--rule-2);z-index:2;box-shadow:0 0 0 4px var(--paper)}
.ahora-list li:first-child .dot{background:var(--live)}
.ahora-list h4{font-size:16.5px;line-height:1.26;font-weight:600;font-family:var(--f-display)}
.ahora-list a:hover h4{color:var(--live)}
.ahora-list .k{font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-top:5px;display:block}

/* ===== PUBLICIDAD (AdRotate) ===== */
.ad{display:block;text-align:center}
.ad-tag{font-family:var(--f-display);font-size:9.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:7px;opacity:.75}
.ad img{margin-inline:auto;border-radius:8px;max-width:100%;height:auto}
.ad-lead{margin-block:6px 30px}
.ad-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-block:8px 32px;
  padding-block:24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.rail-ad{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}

/* ===== PERFILES TV: modulo principal ===== */
.tv .wrap{display:block;padding-block:44px 46px}
.tv-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.tv-head h2{margin:0}
.tv-head .tv-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.tv-main{display:grid;gap:26px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
.tv-feature{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#000;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);display:block}
.tv-feature img{width:100%;height:100%;object-fit:cover;opacity:.66;transition:opacity .4s,transform .7s}
.tv-feature:hover img{opacity:.82;transform:scale(1.03)}
.tv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tv-card{display:block;position:relative;background:transparent}
.tv-card .ph{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:10px}
.tv-card img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .35s,transform .5s}
.tv-card:hover img{opacity:1;transform:scale(1.05)}
.tv-card .mini{position:absolute;left:8px;bottom:8px;width:26px;height:26px;border-radius:50%;
  background:rgba(215,11,82,.92);display:grid;place-items:center}
.tv-card .mini svg{width:11px;height:11px;fill:#fff;margin-left:2px}
.tv-card h4{font-family:var(--f-display);font-size:13.5px;font-weight:600;line-height:1.3;
  color:rgba(248,239,242,.88);padding:9px 2px 0}
.tv-card:hover h4{color:#fff}
@media (max-width:860px){
  .ahora-grid{grid-template-columns:1fr}
  .tv-main{grid-template-columns:1fr}
  .ad-row{grid-template-columns:1fr}
}
@media (max-width:700px){
  .ahora-list a{grid-template-columns:50px 1fr;gap:15px}
  .ahora-list::before{left:58px}
  .ahora-list .dot{left:55px}
  .ahora-lead .thumb{aspect-ratio:16/9}
  .tv-grid{grid-template-columns:1fr 1fr}
  .tv .wrap{padding-block:34px 36px}
}


/* ===== FRANJA DE ANUNCIANTES ===== */
.sponsors{margin-block:10px 34px;padding-block:24px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sponsors-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.sponsors-head .ad-tag{margin:0}
.sponsors-head .note{font-family:var(--f-display);font-size:12px;color:var(--ink-3);margin-left:auto}
.sponsors-grid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.sponsor{display:grid;place-items:center;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--rule);padding:10px;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.sponsor:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.sponsor img{width:100%;height:100%;object-fit:contain}
.sponsor.wide{grid-column:span 2;aspect-ratio:auto;padding:12px}
.sponsor.wide img{max-height:210px}
@media (max-width:520px){.sponsor.wide{grid-column:span 2}}
.sponsor.free{border-style:dashed;border-color:var(--rule-2);background:transparent;
  text-align:center;gap:5px;align-content:center}
.sponsor.free:hover{border-color:var(--brand);transform:none;box-shadow:none}
.sponsor.free .nm{font-family:var(--f-display);font-size:13.5px;font-weight:700;color:var(--ink-2);
  line-height:1.2;padding-inline:8px}
.sponsor.free .st{font-family:var(--f-display);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);opacity:.8}


/* ===== LATERAL DE PUBLICIDAD (portada) ===== */
.cols{display:grid;gap:36px;grid-template-columns:minmax(0,1fr) 300px;align-items:start}
.col-main{min-width:0}
.col-side{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;gap:20px;min-width:0}
.side-widget{background:var(--paper-2);border:1px solid var(--rule);border-radius:12px;
  padding:14px;text-align:center}
.side-widget .ad-tag{display:block;margin-bottom:9px}
/* tope duro: asi ningun creativo vuelve a salir gigante */
.side-widget img{display:block;margin-inline:auto;max-width:100%;width:auto;
  max-height:340px;height:auto;border-radius:8px}
.side-title{font-family:var(--f-display);font-size:12px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.side-widget ul{list-style:none;margin:0;padding:0;text-align:left}
.side-widget li{padding:7px 0;border-bottom:1px solid var(--rule);font-size:15px}
.side-widget li:last-child{border-bottom:0}
.side-hint{border:1px dashed var(--rule-2);border-radius:12px;padding:14px;
  font-family:var(--f-display);font-size:13px;line-height:1.5;color:var(--ink-2)}
.side-hint strong{display:block;color:var(--brand);margin-bottom:4px}

/* ===== ENTRADA INDIVIDUAL ===== */
.single-wrap{display:grid;gap:40px;grid-template-columns:minmax(0,1fr) 300px;
  align-items:start;padding-block:30px 10px}
.articulo{min-width:0;max-width:760px}
.art-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.art-kicker .tag{position:static}
.articulo h1{font-size:clamp(28px,4.2vw,44px);font-weight:800;line-height:1.08;
  letter-spacing:-.025em;text-wrap:balance}
.art-deck{font-size:19px;line-height:1.5;color:var(--ink-2);margin:16px 0 0;max-width:62ch}
.art-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px;
  padding-bottom:18px;border-bottom:1px solid var(--rule);
  font-family:var(--f-display);font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.art-meta .sep{opacity:.45}
.art-figura{margin:22px 0 0}
.art-figura img{width:100%;height:auto;border-radius:12px;display:block}
.art-figura figcaption{font-family:var(--f-display);font-size:13px;color:var(--ink-3);
  margin-top:9px;line-height:1.45}

.art-cuerpo{margin-top:26px;font-size:18px;line-height:1.72;color:var(--ink)}
.art-cuerpo>*{margin-block:0 1.15em}
.art-cuerpo>*:last-child{margin-bottom:0}
.art-cuerpo p{max-width:68ch}
.art-cuerpo h2{font-size:26px;font-weight:800;margin-top:1.7em;letter-spacing:-.02em}
.art-cuerpo h3{font-size:21px;font-weight:700;margin-top:1.5em}
.art-cuerpo a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
.art-cuerpo a:hover{text-decoration-thickness:2.5px}
.art-cuerpo img,.art-cuerpo iframe,.art-cuerpo video{max-width:100%;height:auto;border-radius:10px}
.art-cuerpo figure{margin-inline:0}
.art-cuerpo figcaption{font-family:var(--f-display);font-size:13px;color:var(--ink-3);margin-top:8px}
/* ColorMag pinta las citas de azul (#257BC1): las devolvemos al sistema del tema. */
.art-cuerpo blockquote{margin-inline:0;padding:4px 0 4px 20px;border-left:4px solid var(--brand);
  background:transparent;border-radius:0;
  font-size:20px;line-height:1.5;color:var(--ink-2);font-style:italic}
.art-cuerpo blockquote p,.art-cuerpo blockquote cite{color:var(--ink-2);background:transparent}
.art-cuerpo blockquote::before,.art-cuerpo blockquote::after{content:none}
.art-cuerpo ul,.art-cuerpo ol{padding-left:24px;max-width:66ch}
.art-cuerpo li{margin-top:.45em}

/* ===== COMPARTIR: lo esencial, nada mas ===== */
.compartir{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:28px;padding-block:18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.compartir .lbl{font-family:var(--f-display);font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.sh{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--rule);background:var(--paper-2);color:var(--ink-2);flex-shrink:0;
  transition:background .15s,color .15s,border-color .15s,transform .15s;cursor:pointer}
.sh:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--brand)}
.sh svg{width:18px;height:18px;fill:currentColor}
.sh.wa:hover{border-color:#25D366;color:#25D366}
.sh.enlace{width:auto;padding-inline:14px;gap:8px;grid-auto-flow:column;
  font-family:var(--f-display);font-size:13px;font-weight:700}
.sh.ok{border-color:var(--k-deportes);color:var(--k-deportes)}

.art-pie{margin-top:26px}
.volver{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand)}
.volver svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

.relacionadas{margin-top:44px;padding-top:26px;border-top:2px solid var(--ink)}
.relacionadas h2{font-size:17px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:18px}
.rel-grid{display:grid;gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
.rel-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.rel-card .ph{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--paper-3)}
.rel-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.rel-card:hover img{transform:scale(1.05)}
.rel-card h3{font-family:var(--f-display);font-size:15.5px;font-weight:600;line-height:1.28}
.rel-card:hover h3{color:var(--brand)}
.rel-card .meta{font-size:12.5px}

@media (max-width:1080px){
  .cols,.single-wrap{grid-template-columns:1fr}
  .col-side{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .col-side .side-widget{flex:0 1 300px}
}
@media (max-width:700px){
  .rel-grid{grid-template-columns:1fr}
  .art-cuerpo{font-size:17px}
  .compartir .lbl{width:100%;margin-bottom:4px}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .portada{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .rail{grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:18px}
  .rail ol{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
  .tv .wrap{grid-template-columns:1fr}
  .mkt{grid-template-columns:1fr}
}
@media (max-width:860px){
  .sec-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  :root{--gut:16px}
  .portada{grid-template-columns:1fr;gap:22px;padding-block:20px 26px}
  .lead{min-height:340px}
  .lead-body{padding:20px 18px 20px}
  .secondaries{flex-direction:row;gap:16px}
  .sec-card{flex:1}
  .sec-card h3{font-size:18px}
  .rail ol{grid-template-columns:1fr}
  .brand-name{font-size:25px}
  .brand-mark{width:39px;height:39px}
  .brand-desc{font-size:8.5px;letter-spacing:.16em}
  .masthead .wrap{min-height:60px;gap:9px}
  .live-btn .lbl{display:none}
  .live-btn .lbl-sm{display:inline}
  .live-btn{padding-inline:13px}
  .mkt-tiles{grid-template-columns:1fr}
  .mkt{padding:20px}
  .today{font-size:11.5px}
  .dock-chip.hide-sm{display:none}
  .dock-txt .now{font-size:15px}
  body{padding-bottom:86px}
}
@media (max-width:520px){
  .secondaries{flex-direction:column}
  .stack a{grid-template-columns:1fr 76px;gap:12px}
  .stack .ph{width:76px}
  .foot-grid{grid-template-columns:1fr}
  .credit{margin-left:0;margin-top:10px;width:100%}
  .topbar .wrap{gap:8px}
  .topbar .social{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}