
/* ══════════════════════════════════════
   DISEÑO 2 — CELESTE FRESCO
   Paleta: #00AAFF / #0077CC / #005599
   ══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:'Inter',Arial,sans-serif;background:#F0F6FF;color:#111;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

:root{
  --cel:#00AAFF;
  --cel-d:#0077CC;
  --cel-dd:#005599;
  --rojo:#FF3B30;
  --dorado:#F5A623;
  --blanco:#FFFFFF;
  --fondo:#F0F6FF;
  --fondo2:#E8F3FF;
  --gris1:#F5F9FF;
  --borde:#C0DCFF;
  --txt2:#4A6080;
  --txt3:#8AA8C8;
}

.ct{max-width:1280px;margin:0 auto;padding:0 16px}
.btn-cel{background:var(--cel);color:#fff;border:none;border-radius:7px;padding:7px 16px;font-size:11.5px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:.15s}
.btn-cel:hover{background:var(--cel-d)}
.btn-cel.sm{padding:5px 12px;font-size:10.5px}
.btn-cel.bl{display:block;width:100%;text-align:center;justify-content:center}
.btn-cel-d{background:var(--cel-d);color:#fff;border:none;border-radius:7px;padding:7px 16px;font-size:11.5px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.btn-cel-d.sm{padding:5px 12px;font-size:10.5px}
.btn-cel-d.bl{display:block;width:100%;text-align:center;justify-content:center}

/* ── TICKER ── */
.tkr{background:var(--cel-dd);height:28px;display:flex;align-items:center;overflow:hidden}
.tkr-lbl{background:var(--rojo);color:#fff;font-size:9px;font-weight:800;letter-spacing:.12em;padding:0 12px;height:100%;display:flex;align-items:center;gap:5px;flex-shrink:0;white-space:nowrap}
.tkr-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:bk 1.2s infinite}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.3}}
.tkr-tr{display:flex;gap:28px;padding:0 16px;white-space:nowrap;animation:sc 28s linear infinite}
@keyframes sc{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ti{color:rgba(255,255,255,.7);font-size:10.5px;text-decoration:none}
.ti-w{color:#fff;font-weight:600}
.ti-y{color:#FFD580}

/* ── HEADER ── */
.hdr{background:#fff;border-bottom:3px solid var(--cel);height:58px;display:flex;align-items:center;padding:0 20px;gap:12px;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,170,255,.1)}
.logo{display:flex;flex-direction:column;line-height:.9;flex-shrink:0;margin-right:14px;text-decoration:none}
.logo-t{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:20px;font-weight:900;color:var(--cel);letter-spacing:-.02em}
.logo-b{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:20px;font-weight:900;color:var(--cel-dd);letter-spacing:-.02em}
.nav{display:flex;flex:1;gap:1px}
.nav a{font-size:11.5px;font-weight:600;color:#4A5568;padding:5px 9px;border-radius:5px;text-decoration:none;white-space:nowrap;position:relative;transition:.12s}
.nav a.on{color:var(--cel-d)}
.nav a.on::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--cel);border-radius:2px}
.nav a:hover{color:var(--cel);background:var(--fondo)}
.nav-mas{font-size:11.5px;font-weight:600;color:#4A5568;padding:5px 9px;background:none;border:none;cursor:pointer;border-radius:5px}
.hdr-r{display:flex;align-items:center;gap:7px;margin-left:auto}
.btn-ev{background:var(--rojo);color:#fff;border:none;border-radius:20px;padding:6px 14px;font-size:10px;font-weight:800;letter-spacing:.04em;cursor:pointer;display:flex;align-items:center;gap:5px;animation:evp 2s infinite;text-decoration:none}
@keyframes evp{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.4)}70%{box-shadow:0 0 0 5px rgba(255,59,48,0)}}
.ev-dot{width:6px;height:6px;border-radius:50%;background:#fff}
.hic{background:none;border:none;cursor:pointer;font-size:17px;color:#8AA8C8;padding:4px;text-decoration:none}
.av{width:28px;height:28px;border-radius:50%;background:var(--cel-d);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}

/* ── BARRA VIVO ── */
.bpv{background:#fff;border-top:1px solid #E0EEFF;border-bottom:1px solid #E0EEFF;padding:8px 0;box-shadow:0 2px 8px rgba(0,119,204,.08)}
.bpv-inner-box{display:flex;align-items:center;gap:10px;background:#FFF5F5;border:1px solid #FFCCCC;border-radius:8px;padding:7px 14px;flex:1}
.bpv-in{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bpv-l{display:flex;align-items:center;gap:9px}
.badge-lv{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.1em;padding:3px 9px;border-radius:9px}
.lv-d{width:6px;height:6px;border-radius:50%;background:#fff;animation:bk 1s infinite}
.bpv-t{color:#fff;font-weight:700;font-size:13px}
.bpv-s{color:rgba(255,255,255,.6);font-size:10.5px}
.btn-bpv{background:var(--cel-d);color:#fff;border:none;border-radius:7px;padding:5px 12px;font-size:10px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px}
.bpv-x{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:18px;line-height:1}

/* ── HERO 3 COLUMNAS ── */
.hero-sec{background:var(--fondo2);padding:11px 0}
.hero-grid{display:grid;grid-template-columns:1fr 258px 245px;gap:11px;align-items:start}

.hc{border-radius:12px;min-height:340px;background:linear-gradient(160deg,rgba(0,60,120,.5) 0%,rgba(0,30,80,.95) 100%),#051828;display:flex;align-items:flex-end;position:relative;overflow:hidden}
.hc-img{position:absolute;inset:0;background:center/cover no-repeat;z-index:0}
.hc-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,50,100,.2) 0%,rgba(0,50,100,.9) 100%);z-index:1}
.hc-body{padding:18px;position:relative;z-index:2;flex:1}
.hc-cat{display:inline-block;background:var(--cel);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.1em;padding:3px 10px;border-radius:9px;margin-bottom:9px;text-transform:uppercase}
.hc-tit{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:30px;font-weight:900;color:#fff;line-height:1.06;margin-bottom:7px;max-width:340px}
.hc-baj{color:rgba(255,255,255,.65);font-size:12px;line-height:1.5;margin-bottom:13px;max-width:320px}
.hc-dots{display:flex;gap:5px;position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3}
.hc-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.hc-dot.on{background:#fff;width:18px;border-radius:4px}

/* MATCH FLOAT */
.mfl{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:#fff;border-radius:14px;padding:13px 15px;width:176px;z-index:5;box-shadow:0 5px 24px rgba(0,119,204,.25);border:1px solid var(--borde)}
.mfl-lv{font-size:8.5px;font-weight:800;color:var(--rojo);letter-spacing:.1em;margin-bottom:9px;display:flex;align-items:center;gap:4px}
.mfl-lvd{width:6px;height:6px;border-radius:50%;background:var(--rojo);animation:bk 1s infinite}
.mfl-row{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:5px}
.mfl-tm{text-align:center}
.mfl-esc{width:38px;height:38px;border-radius:50%;background:var(--fondo);margin:0 auto 3px;display:flex;align-items:center;justify-content:center;font-size:19px}
.mfl-nm{font-size:8.5px;font-weight:800;color:#111;letter-spacing:.03em}
.mfl-sc{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:900;color:#111;line-height:1;text-align:center}
.mfl-mn{color:var(--rojo);font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;text-align:center;margin-bottom:9px}

/* SIDEBAR */
.sc{background:#fff;border:1px solid var(--borde);border-radius:11px;padding:11px;box-shadow:0 2px 12px rgba(0,119,204,.07)}
.sc-h{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);border-bottom:2px solid var(--borde);padding-bottom:4px;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center}
.sc-h a{font-family:'Inter',sans-serif;font-size:9px;font-weight:600;color:var(--cel-d);text-decoration:none}
.sc-h.blue{color:var(--cel-d)}
.sc-empty{color:var(--txt3);font-size:12px;padding:6px 0}

/* PRÓXIMOS PARTIDOS */
.pp{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--fondo);text-decoration:none;transition:.12s}
.pp:last-of-type{border:none}
.pp:hover{background:var(--gris1);border-radius:6px}
.pp-f{width:52px;font-size:8.5px;font-weight:700;color:var(--txt3);text-align:center;flex-shrink:0;line-height:1.3;text-transform:uppercase}
.pp-h{font-size:7.5px;font-weight:400}
.pp-m{flex:1}
.pp-e{display:flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:#111}
.pp-vs{font-size:9px;color:var(--txt3);padding:1px 0 1px 16px}
.pp-esc{width:16px;height:16px;object-fit:contain;border-radius:50%}

/* STREAM */
.stm{display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;background:#003366;aspect-ratio:16/9;position:relative;margin-bottom:7px;text-decoration:none}
.stm-bg{position:absolute;inset:0;background:linear-gradient(135deg,#003366,#001A33)}
.stm-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stm-badge{position:absolute;top:6px;left:6px;background:var(--rojo);color:#fff;font-size:8px;font-weight:800;letter-spacing:.08em;padding:2px 8px;border-radius:7px;z-index:2}
.stm-play{width:40px;height:40px;border-radius:50%;border:2.5px solid rgba(255,255,255,.7);background:rgba(0,170,255,.3);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;position:relative;z-index:2}
.stm-t{font-weight:700;font-size:11.5px;color:#111;margin-bottom:1px}
.stm-s{font-size:9.5px;color:var(--txt2);margin-bottom:5px}

/* RADIO */
.rdc{background:var(--gris1);border-radius:8px;padding:9px;margin-top:9px;display:flex;gap:7px;align-items:center}
.rdc-lg{width:42px;height:42px;border-radius:8px;background:var(--cel-d);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:#fff;font-weight:900;font-family:'Barlow Condensed',sans-serif;overflow:hidden}
.rdc-lg img{width:42px;height:42px;object-fit:contain}
.rdc-nm{font-weight:700;font-size:11.5px;color:#111}
.rdc-lv{display:inline-block;background:rgba(255,59,48,.1);color:var(--rojo);font-size:8px;font-weight:800;padding:2px 7px;border-radius:7px;margin:2px 0}
.rdc-pr{font-size:9.5px;color:var(--txt2)}

/* TRASPASOS */
.tr{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid var(--fondo)}
.tr:last-of-type{border:none}
.tr-ft{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.tr-ph{width:32px;height:32px;border-radius:50%;background:var(--fondo2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.tr-nm{font-weight:700;font-size:11.5px;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-cl{font-size:9px;color:var(--txt2);display:flex;align-items:center;gap:2px}
.chip{font-size:8px;font-weight:800;padding:2px 7px;border-radius:7px;white-space:nowrap;flex-shrink:0}
.ch-c{background:#E0F5E9;color:#1A7A40}
.ch-r{background:#FFF3CD;color:#8A6010}
.ch-p{background:#E0EEFF;color:#1A4A8A}

/* PREMIUM */
.pm{background:linear-gradient(135deg,var(--cel-dd) 0%,#002244 100%);border-radius:9px;padding:12px;margin-top:9px;text-align:center}
.pm-l{font-size:8.5px;font-weight:800;letter-spacing:.1em;color:#7FDDFF;margin-bottom:5px;text-transform:uppercase}
.pm-d{color:rgba(255,255,255,.55);font-size:10px;line-height:1.5;margin-bottom:8px}
.pm-mp{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.pm-mp span{font-size:8.5px;color:rgba(255,255,255,.4)}
.pm-mpb{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);font-size:8.5px;padding:3px 10px;border-radius:7px}
.btn-pm{background:var(--cel);color:#fff;border:none;border-radius:7px;padding:8px 0;font-size:11px;font-weight:700;cursor:pointer;width:100%}

/* ── ACCESOS RÁPIDOS ── */
.acc{background:#fff;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);padding:8px 0;margin-top:10px}
.acc-gr{display:flex;justify-content:space-around}
.ai{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--txt2);padding:7px 8px;border-radius:8px;flex:1;max-width:115px;transition:.12s}
.ai:hover{background:var(--fondo2);color:var(--cel-d)}
.ai-ico{font-size:23px}
.ai-lbl{font-size:7.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center;line-height:1.25}

/* ── BANNER CARRUSEL ── */
.bnr{background:var(--cel-dd);padding:9px 0}
.bnr-in{position:relative}
.bnr-ph{height:108px;background:linear-gradient(92deg,#003D7A,#0055AA);border-radius:10px;display:flex;align-items:center;justify-content:space-around;padding:0 36px;gap:14px}
.bnr-arr{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;width:26px;height:26px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bnr-arr.l{left:-13px}.bnr-arr.r{right:-13px}
.bnr-col{text-align:center}
.bnr-tit{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:20px;font-weight:900;color:#fff;line-height:1.1}
.bnr-gld{color:#FFD580}
.bnr-sub{font-size:9px;color:rgba(255,255,255,.5);margin-top:3px}
.bnr-div{width:1px;height:54px;background:rgba(255,255,255,.15)}
.btn-bnr{background:var(--cel);color:#fff;border:none;border-radius:6px;padding:4px 13px;font-size:9px;font-weight:700;cursor:pointer;margin-top:8px;display:block}
.bnr-dots{display:flex;justify-content:center;gap:5px;margin-top:6px}
.bnr-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:.2s}
.bnr-dot.on{background:#7FDDFF;width:16px;border-radius:3px}

/* ── MAIN GRID ── */
.mg{padding:13px 0;background:var(--fondo)}
.mg-gr{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sec-h{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);border-bottom:2px solid var(--borde);padding-bottom:4px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.sec-h a{font-family:'Inter',sans-serif;font-size:9px;font-weight:600;color:var(--cel-d);text-decoration:none}

/* NOTICIAS */
.nf{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--fondo2);text-decoration:none;transition:.12s}
.nf:last-child{border:none}
.nf:hover .nf-t{color:var(--cel-d)}
.nf-img{width:84px;height:60px;border-radius:7px;flex-shrink:0;overflow:hidden;background:var(--fondo2)}
.nf-img img{width:100%;height:100%;object-fit:cover}
.nf-ph1{background:linear-gradient(135deg,#003D7A,#001A40)}
.nf-ph2{background:linear-gradient(135deg,#0055AA,#002244)}
.nf-ph3{background:linear-gradient(135deg,#0077CC,#003366)}
.nf-cat{font-size:8.5px;font-weight:800;letter-spacing:.1em;color:var(--cel-d);text-transform:uppercase}
.nf-t{font-weight:700;font-size:12.5px;line-height:1.28;color:#111;margin:2px 0 4px;transition:.12s}
.nf-m{font-size:9.5px;color:var(--txt2)}

/* TABLA */
.tb{width:100%;border-collapse:collapse;font-size:12px}
.tb th{font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--txt3);border-bottom:2px solid var(--borde);padding:3px 3px 5px;text-align:center}
.tb th.l{text-align:left}
.tb td{padding:5px 3px;border-bottom:1px solid var(--fondo2);text-align:center;color:#111}
.tb td.l{text-align:left}
.tb tr:last-child td{border:none}
.tb .hl td{background:rgba(0,170,255,.04)}
.pn{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:900}
.p1{color:var(--dorado)}.p2,.p3{color:var(--cel-d)}.p4,.p5{color:var(--txt3)}
.ec{display:flex;align-items:center;gap:4px}
.ec-esc{width:18px;height:18px;object-fit:contain;border-radius:50%}
.ec a{font-weight:600;font-size:12px;color:#111;text-decoration:none}
.ec a:hover{color:var(--cel-d)}
.td-pts{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;color:var(--cel-d)}
.btn-tb{display:block;width:100%;margin-top:9px;background:transparent;border:1.5px solid var(--borde);border-radius:7px;padding:7px 0;font-size:10.5px;font-weight:700;color:var(--cel-dd);text-align:center;text-decoration:none;letter-spacing:.04em;text-transform:uppercase;transition:.12s}
.btn-tb:hover{background:var(--fondo2)}

/* VIDEOS */
.vm{display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;background:#003366;aspect-ratio:16/9;position:relative;text-decoration:none;margin-bottom:8px}
.vm-bg{position:absolute;inset:0;background:linear-gradient(135deg,#003366,#001A33)}
.vm-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vm-play{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;z-index:2}
.vm-cat{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;font-size:8.5px;padding:2px 8px;border-radius:7px;z-index:2}
.vm-t{font-weight:700;font-size:12.5px;color:#111;margin-bottom:2px}
.vm-s{font-size:10px;color:var(--txt2);margin-bottom:8px}
.vmr{display:flex;gap:8px;align-items:center;margin-bottom:7px;text-decoration:none}
.vmr:hover .vmr-t{color:var(--cel-d)}
.vmr-th{width:92px;height:62px;border-radius:7px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;background:#003366;overflow:hidden}
.vmr-bg{position:absolute;inset:0;background:linear-gradient(135deg,#003366,#001A33)}
.vmr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vmr-p{color:rgba(255,255,255,.75);font-size:14px;position:relative;z-index:2}
.vmr-t{font-weight:600;font-size:12px;color:#111;line-height:1.28;transition:.12s}
.vmr-c{font-size:9px;color:var(--txt2);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}

/* ── BANNER SUMA MARCA ── */
.bs{background:var(--cel-dd);padding:13px 0}
.bs-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bs-t{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:26px;font-weight:900;color:#fff;line-height:1.06}
.bs-t span{color:#7FDDFF}
.bs-feats{display:flex;gap:18px;color:rgba(255,255,255,.65);font-size:11.5px}
.bs-cta{background:var(--cel);padding:11px 18px;border-radius:8px;text-align:center;cursor:pointer;text-decoration:none;display:block;transition:.12s}
.bs-cta:hover{background:#0095E8}
.bs-cta-t{font-weight:800;color:#fff;font-size:12px}
.bs-cta-s{font-size:9.5px;color:rgba(255,255,255,.7);margin-top:2px}

/* ── FOOTER ── */
.ft{background:var(--cel-dd);padding:26px 0 0;border-top:3px solid var(--cel)}
.ft-gr{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:22px;margin-bottom:20px}
.ft-logo{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:19px;font-weight:900;color:#fff;margin-bottom:6px}
.ft-tag{font-size:9.5px;color:rgba(255,255,255,.4);margin-bottom:10px}
.ft-soc{display:flex;gap:10px;font-size:17px}
.ft-soc a{color:rgba(255,255,255,.55);text-decoration:none;transition:.12s}
.ft-soc a:hover{color:#fff}
.ft-h{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7FDDFF;margin-bottom:8px}
.ft-a{display:block;color:rgba(255,255,255,.5);font-size:10.5px;margin-bottom:5px;text-decoration:none;transition:.12s}
.ft-a:hover{color:rgba(255,255,255,.9)}
.ft-a.gld{color:#FFD580}
.ft-saas{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:15px 17px;margin-bottom:17px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.ft-saas-t{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:15px;font-weight:900;color:#fff;margin-bottom:4px}
.ft-saas-d{font-size:10.5px;color:rgba(255,255,255,.4);max-width:420px;line-height:1.5}
.btn-demo{background:var(--cel);color:#fff;border:none;border-radius:7px;padding:9px 18px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.12s}
.btn-demo:hover{background:#0095E8}
.ft-bot{border-top:1px solid rgba(255,255,255,.1);padding:12px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.ft-copy{font-size:9.5px;color:rgba(255,255,255,.3)}
.ft-lnks a{font-size:9.5px;color:rgba(255,255,255,.3);text-decoration:none;margin-left:12px}
.ft-lnks a:hover{color:rgba(255,255,255,.7)}

/* FLASH */
.flash{padding:9px 16px;font-size:13px;font-weight:600}
.flash-ok{background:#E0F5E9;color:#1A7A40}
.flash-err{background:#FFE8E6;color:#CC2200}
.flash-inf{background:#E0EEFF;color:#1A4A8A}

/* RESPONSIVE */
@media(max-width:1200px){
  .hero-grid{grid-template-columns:1fr 220px 200px}
}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr 220px}
  .hero-grid>*:last-child{display:none}
  .mg-gr{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hero-grid{grid-template-columns:1fr}
  .hero-grid>*:nth-child(2),.hero-grid>*:last-child{display:none}
  .mfl{display:none}
  .mg-gr{grid-template-columns:1fr}
  .acc-gr{overflow-x:auto;justify-content:flex-start}
  .ft-gr{grid-template-columns:1fr 1fr}
  .bs-in{flex-direction:column;text-align:center}
  .nav{display:none}
}

/* ══════════════════════════════════════
   VARIABLES SISTEMA PÚBLICO
   (requeridas por todas las vistas)
   ══════════════════════════════════════ */
:root {
  /* Paleta anterior mapeada a celeste fresco */
  --negro:       #0A1628;
  --verde:       #16A34A;
  --verde-d:     #15803D;
  --verde-oscuro:#0C2A18;
  --rojo:        #DC2626;
  --dorado:      #D97706;
  --blanco:      #FFFFFF;
  --gris-100:    #F8FAFF;
  --gris-200:    #E2E8F4;
  --gris-400:    #94A3B8;
  --gris-600:    #475569;

  /* Tipografía */
  --font-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:   'Inter',Arial,sans-serif;

  /* Espaciado */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem;--sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;

  /* Bordes */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px;

  /* Sombras */
  --sombra-sm:0 1px 4px rgba(0,0,0,.08);
  --sombra-md:0 4px 16px rgba(0,0,0,.12);
  --sombra-lg:0 8px 32px rgba(0,0,0,.16);
}

/* ── LAYOUT BASE ── */
.contenedor { max-width:1280px; margin:0 auto; padding:0 1rem; }
.seccion    { padding:2.5rem 0; }
.seccion-titulo {
  font-family:var(--font-display);
  font-size:1.05rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#111; border-bottom:3px solid var(--cel); padding-bottom:.4rem;
  margin-bottom:1.25rem; display:flex; justify-content:space-between; align-items:center;
}
.seccion-titulo a { font-family:var(--font-body); font-size:.78rem; font-weight:600; color:var(--cel-d); text-decoration:none; text-transform:none; letter-spacing:0; }

/* ── BOTONES ── */
.btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem 1rem; border-radius:var(--r-md);
  font-size:.82rem; font-weight:600; cursor:pointer;
  border:none; text-decoration:none; transition:.15s; line-height:1;
  font-family:var(--font-body);
}
.btn-verde  { background:var(--verde);  color:#fff; }
.btn-verde:hover { background:var(--verde-d); }
.btn-rojo   { background:var(--rojo);   color:#fff; }
.btn-rojo:hover  { background:#B91C1C; }
.btn-dorado { background:var(--dorado); color:#fff; }
.btn-dorado:hover{ background:#B45309; }
.btn-outline{ background:transparent; color:#374151; border:1.5px solid var(--gris-200); }
.btn-outline:hover{ background:#F8FAFF; border-color:#CBD5E1; }
.btn-sm  { padding:.35rem .75rem; font-size:.78rem; }
.btn-xs  { padding:.2rem  .55rem; font-size:.72rem; }

/* ── BADGES ── */
.badge-estado {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.25rem .75rem; border-radius:var(--r-full);
  font-size:.72rem; font-weight:800; letter-spacing:.06em;
}
.badge-en_vivo, .badge-en_curso {
  background:var(--rojo); color:#fff;
  animation:pulse-lv 1.4s infinite;
}
@keyframes pulse-lv { 0%,100%{opacity:1}50%{opacity:.7} }
.badge-finalizado  { background:#DCFCE7; color:var(--verde-d); }
.badge-programado, .badge-proximo { background:#F1F5F9; color:var(--gris-600); }
.badge-suspendido, .badge-postergado { background:#FEF9C3; color:#854D0E; }
.badge-premium     { background:#FEF9C3; color:#854D0E; font-weight:800; }
.badge-radio-vivo  { background:var(--rojo); color:#fff; padding:.1rem .5rem; border-radius:var(--r-full); font-size:.68rem; font-weight:800; vertical-align:middle; margin-left:.35rem; }

/* ── TABLA POSICIONES ── */
.tabla-posiciones {
  width:100%; border-collapse:collapse; font-size:.85rem;
}
.tabla-posiciones th {
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gris-400); border-bottom:2px solid var(--gris-200);
  padding:.4rem .5rem; text-align:center; background:#F8FAFF;
}
.tabla-posiciones th:nth-child(2) { text-align:left; }
.tabla-posiciones td {
  padding:.5rem .5rem; border-bottom:1px solid #F1F5FB; text-align:center;
}
.tabla-posiciones td:nth-child(2) { text-align:left; font-weight:600; }
.tabla-posiciones tr:last-child td { border:none; }
.tabla-posiciones tr:hover td     { background:#F8FAFF; }
.zona-verde td { border-left:3px solid var(--verde); }
.zona-rojo  td { border-left:3px solid var(--rojo); }

/* ── PARTIDO CARD ── */
.partido-card {
  background:#fff; border:1px solid var(--gris-200); border-radius:var(--r-lg);
  padding:.75rem 1rem; transition:.15s; box-shadow:var(--sombra-sm);
}
.partido-card:hover { box-shadow:var(--sombra-md); transform:translateY(-1px); }

/* ── MARCADOR GRANDE ── */
.marcador-grande {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1.5rem; text-align:center;
  padding:2rem 0;
}
.marcador-score {
  font-family:var(--font-display);
  font-size:clamp(3rem,10vw,5.5rem); font-weight:900;
  color:#fff; line-height:1; display:flex; align-items:center; gap:.5rem;
}
.marcador-separador { color:rgba(255,255,255,.4); font-size:60%; }
.marcador-equipo-nombre {
  font-family:var(--font-display); font-size:1.1rem; font-weight:800;
  color:#fff; margin-top:.5rem;
}
.marcador-escudo-grande {
  width:80px; height:80px; object-fit:contain; margin:0 auto .5rem;
}

/* ── EVENTOS EN VIVO ── */
.evento-feed  { display:flex; flex-direction:column; gap:.5rem; }
.evento-item  { display:flex; align-items:center; gap:.75rem; padding:.5rem; border-radius:var(--r-md); background:#F8FAFF; font-size:.82rem; }
.evento-icono { font-size:1.2rem; flex-shrink:0; }
.evento-minuto{ font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--cel-d); min-width:32px; text-align:center; flex-shrink:0; }
.evento-desc  { flex:1; color:#111; font-weight:500; }
.evento-jugador{ color:var(--gris-400); font-size:.75rem; }
.evento-equipo{ color:var(--gris-400); font-size:.75rem; }

/* ── NOTICIA CARD ── */
.noticia-card {
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sombra-sm); border:1px solid var(--gris-200);
  transition:.18s; text-decoration:none; display:flex; flex-direction:column;
}
.noticia-card:hover { transform:translateY(-3px); box-shadow:var(--sombra-md); }
.noticia-card-img   { aspect-ratio:16/9; object-fit:cover; width:100%; background:var(--gris-200); }
.noticia-card-body  { padding:1rem; flex:1; display:flex; flex-direction:column; }
.noticia-card-categoria { font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--cel-d); margin-bottom:.35rem; }
.noticia-card-titulo{ font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:#111; line-height:1.25; margin-bottom:.4rem; flex:1; }
.noticia-card-bajada{ font-size:.8rem; color:var(--gris-600); line-height:1.5; margin-bottom:.5rem; }
.noticia-card-meta  { font-size:.72rem; color:var(--gris-400); }
.noticia-cuerpo     { font-size:1rem; line-height:1.75; color:#222; }
.noticia-cuerpo h2, .noticia-cuerpo h3 { font-family:var(--font-display); font-weight:800; margin:1.5rem 0 .5rem; color:#111; }
.noticia-cuerpo p   { margin-bottom:1rem; }
.noticia-cuerpo img { border-radius:var(--r-lg); margin:1rem 0; }
.share-bar  { display:flex; gap:.5rem; flex-wrap:wrap; margin:1.5rem 0; }
.share-btn  { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .85rem; border-radius:var(--r-full); font-size:.78rem; font-weight:600; text-decoration:none; border:none; cursor:pointer; }
.share-whatsapp { background:#25D366; color:#fff; }
.share-facebook { background:#1877F2; color:#fff; }
.share-twitter  { background:#000;    color:#fff; }
.share-copiar   { background:var(--gris-100); color:var(--gris-600); border:1px solid var(--gris-200); }

/* ── TRASPASO CARD ── */
.traspaso-card {
  background:#fff; border:1px solid var(--gris-200); border-radius:var(--r-lg);
  padding:1rem 1.25rem; display:flex; align-items:center;
  gap:1rem; flex-wrap:wrap; box-shadow:var(--sombra-sm);
}
.traspaso-jugador-info { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:80px; }
.traspaso-club  { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--gris-600); }
.traspaso-flecha{ font-size:1.4rem; color:var(--cel-d); }
.nombre { font-weight:700; font-size:.9rem; color:#111; }
.pos    { font-size:.72rem; color:var(--gris-400); text-transform:uppercase; letter-spacing:.06em; }
.val    { font-family:var(--font-display); font-size:2rem; font-weight:900; color:var(--cel-d); line-height:1; }
.lbl    { font-size:.65rem; color:var(--gris-400); text-transform:uppercase; letter-spacing:.06em; margin-top:.15rem; }

/* ── PERFIL JUGADOR / ENTRENADOR ── */
.perfil-foto { width:120px; height:120px; border-radius:50%; object-fit:cover; border:4px solid var(--dorado); }
.perfil-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.perfil-stat { background:rgba(255,255,255,.08); border-radius:var(--r-md); padding:.75rem; text-align:center; }

/* ── RANKING / ESTADÍSTICAS ── */
.ranking-tabla { width:100%; border-collapse:collapse; }
.ranking-tabla td { padding:.6rem .4rem; border-bottom:1px solid #F1F5FB; vertical-align:middle; font-size:.85rem; }
.ranking-tabla tr:last-child td { border:none; }
.ranking-num   { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-family:var(--font-display); font-size:1rem; font-weight:900; background:var(--gris-100); color:var(--gris-600); }
.ranking-num.top1 { background:#F5C518; color:#000; }
.ranking-num.top2 { background:#C0C0C0; color:#000; }
.ranking-num.top3 { background:#CD7F32; color:#fff; }
.ranking-foto  { width:40px; height:40px; border-radius:50%; object-fit:cover; vertical-align:middle; }
.ranking-info  { padding-left:.5rem; }
.ranking-nombre{ font-weight:700; color:#111; font-size:.88rem; }
.ranking-equipo{ font-size:.72rem; color:var(--gris-400); }
.ranking-valor { font-family:var(--font-display); font-size:1.5rem; font-weight:900; color:var(--cel-d); text-align:right; padding-right:.5rem; }

/* ── RADIO ── */
.radio-card {
  background:#fff; border:1px solid var(--gris-200); border-radius:var(--r-lg);
  padding:1rem 1.25rem; display:flex; align-items:center; gap:1rem;
  box-shadow:var(--sombra-sm); transition:.15s;
}
.radio-card:hover { box-shadow:var(--sombra-md); }
.radio-logo { width:60px; height:60px; border-radius:var(--r-md); object-fit:contain; flex-shrink:0; }
.radio-logo-placeholder { width:60px; height:60px; border-radius:var(--r-md); background:var(--cel-d); display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.radio-info-card { flex:1; min-width:0; }
.radio-nombre   { font-weight:700; font-size:.95rem; color:#111; }
.radio-programa { font-size:.8rem; color:var(--gris-600); margin-top:.15rem; }
.radio-player-sticky {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--cel-dd); color:#fff; padding:.5rem 1rem;
  display:none; align-items:center; gap:.75rem;
  border-top:3px solid var(--cel); box-shadow:0 -4px 16px rgba(0,0,0,.2);
}
.radio-player-sticky.visible { display:flex; }
.radio-close { background:none; border:none; color:rgba(255,255,255,.4); cursor:pointer; font-size:1.1rem; }
.radio-info { flex:1; }

/* ── STREAMING ── */
.stream-card {
  background:var(--negro); border-radius:var(--r-lg); overflow:hidden;
  text-decoration:none; display:block; box-shadow:var(--sombra-sm); transition:.18s;
}
.stream-card:hover { transform:translateY(-3px); box-shadow:var(--sombra-md); }
.stream-card-body  { padding:.85rem; }
.stream-card-titulo{ font-weight:700; font-size:.95rem; color:#fff; line-height:1.3; }
.stream-card-meta  { font-size:.75rem; color:rgba(255,255,255,.4); margin-top:.25rem; }
.stream-card-thumb { aspect-ratio:16/9; background:#111; overflow:hidden; position:relative; }
.stream-wrapper { width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--r-lg); overflow:hidden; }
.stream-wrapper iframe { width:100%; height:100%; border:none; }

/* ── BUSCADOR ── */
.buscador-hero { background:var(--negro); padding:3rem 0; }
.buscador-input-wrap { position:relative; max-width:580px; margin:0 auto; }
.buscador-icon  { position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-size:1.25rem; pointer-events:none; }
.buscador-input {
  width:100%; padding:.9rem 1rem .9rem 3rem;
  border-radius:var(--r-full); border:none; font-size:1.05rem;
  font-family:var(--font-body); outline:none;
  background:#fff; color:#111; box-shadow:var(--sombra-lg);
}
.buscador-seccion-titulo { font-family:var(--font-display); font-size:.85rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-400); margin:1.5rem 0 .5rem; }
.resultado-item { display:flex; align-items:center; gap:.75rem; padding:.65rem 0; border-bottom:1px solid var(--gris-200); text-decoration:none; transition:.12s; }
.resultado-item:hover .resultado-nombre { color:var(--cel-d); }
.resultado-foto { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.resultado-foto-placeholder { width:44px; height:44px; border-radius:50%; background:var(--gris-100); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.resultado-nombre { font-weight:700; font-size:.9rem; color:#111; transition:.12s; }
.resultado-sub    { font-size:.75rem; color:var(--gris-400); }

/* ── PREMIUM / PLANES ── */
.plan-nombre    { font-family:var(--font-display); font-size:1.5rem; font-weight:900; color:#111; margin-bottom:.25rem; }
.plan-precio    { font-family:var(--font-display); font-size:2.5rem; font-weight:900; color:var(--cel-d); line-height:1; margin:.75rem 0; }
.plan-beneficios{ list-style:none; display:flex; flex-direction:column; gap:.5rem; margin:1rem 0; font-size:.85rem; color:var(--gris-600); }
.plan-beneficios li::before { content:'✓ '; color:var(--verde); font-weight:800; }

/* ── TABS ── */
.tabs   { display:flex; gap:.25rem; border-bottom:2px solid var(--gris-200); margin-bottom:1.5rem; }
.tab-btn{ padding:.55rem 1rem; border:none; background:none; font-size:.82rem; font-weight:600; color:var(--gris-400); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:.12s; font-family:var(--font-body); }
.tab-btn.activo, .tab-btn:hover { color:var(--cel-d); border-bottom-color:var(--cel); }
.tab-panel { display:none; }
.tab-panel.activo { display:block; }

/* ── LIGHTBOX ── */
.lightbox-overlay { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:1000; display:none; align-items:center; justify-content:center; }
.lightbox-overlay.visible { display:flex; }
.lightbox-img    { max-width:90vw; max-height:85vh; object-fit:contain; border-radius:var(--r-md); }
.lightbox-close  { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.15); border:none; color:#fff; width:40px; height:40px; border-radius:50%; font-size:1.2rem; cursor:pointer; }
.lightbox-nav    { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.4rem; cursor:pointer; }
.lightbox-prev   { left:1rem; }
.lightbox-next   { right:1rem; }
.lightbox-caption{ position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.6); font-size:.82rem; text-align:center; max-width:600px; }

/* ── GALERÍA ── */
.galeria-item { break-inside:avoid; border-radius:var(--r-md); overflow:hidden; margin-bottom:.6rem; cursor:pointer; position:relative; }
.galeria-item:hover .foto-overlay { opacity:1; }
.foto-overlay { position:absolute; inset:0; background:rgba(0,0,0,.4); opacity:0; transition:.2s; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff; }

/* ── PROGRAMAS RADIO ── */
.programa { background:#F8FAFF; border:1px solid var(--gris-200); border-radius:var(--r-md); padding:.75rem 1rem; display:flex; gap:.75rem; align-items:center; }

/* ── CENTRO PARTIDO (header resultado) ── */
.centro-partido-header { background:linear-gradient(160deg,var(--negro),#162444); padding:2rem 0; }

/* ── RESPONSIVE PÚBLICO ── */
@media(max-width:768px) {
  .marcador-grande       { grid-template-columns:1fr; gap:1rem; }
  .perfil-stat-grid      { grid-template-columns:repeat(2,1fr); }
  .noticia-card-titulo   { font-size:1rem; }
  .ranking-tabla td      { padding:.4rem .2rem; }
}

/* ── BANNER SLIDES ── */
.bnr-slides { width:100%; }
.bnr-sl     { width:100%; }

/* ── ÚLTIMAS CLASES FALTANTES ── */
.perfil-header {
  background:linear-gradient(160deg,var(--verde-oscuro),var(--negro));
  padding:2.5rem 0;
}
.marcador-meta {
  font-size:.8rem; color:rgba(255,255,255,.4); margin-top:.4rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
/* rsty = reproductor de radio sticky (ya definido inline en home.ejs) */
.rsty {
  position:fixed; bottom:0; left:0; right:0; z-index:201;
  background:var(--cel-dd); color:#fff; padding:6px 20px;
  display:none; align-items:center; gap:12px;
  border-top:3px solid var(--cel);
}
