/* SBOS · web comercial — tipografías propias (sin servicios externos) */
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:900;font-display:swap;src:url(../fonts/barlow-condensed-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:400;font-display:swap;src:url(../fonts/source-sans-3-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:600;font-display:swap;src:url(../fonts/source-sans-3-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:700;font-display:swap;src:url(../fonts/source-sans-3-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Share Tech Mono';font-weight:400;font-display:swap;src:url(../fonts/share-tech-mono-latin-400-normal.woff2) format('woff2')}

/* ── Tokens ─────────────────────────────────────────────
   Paleta tomada del propio marcador: noche de estadio, ámbar LED, azul local, rojo visitante,
   hielo (hoja de partido) y césped (solo para franjas de campo). */
:root{
  --noche:#0a1222; --noche-2:#121c33; --noche-3:#1c2a49;
  --hielo:#eceff4; --papel:#ffffff;
  --ambar:#ffb21a; --ambar-ink:#3b2700;
  --azul:#1d5fd8; --azul-ink:#0f3e96; --rojo:#d62631; --rojo-ink:#9d1620;
  --cesped:#17603f; --cesped-2:#1b6b46;
  --mute:#47536c; --mute-d:#a9b4cc; --linea:#c5cddd; --linea-d:#2b3a5e;
  --wrap:1240px; --gut:clamp(16px,4vw,36px);
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--hielo);color:var(--noche);font:400 clamp(1rem,.96rem + .2vw,1.1rem)/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:3px}
.band-hielo :focus-visible,.band-papel :focus-visible{outline-color:var(--azul)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ambar);color:var(--noche);padding:10px 16px;font-weight:700;z-index:99;border-radius:0 0 6px 6px}
.skip:focus{top:0}
h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:800;letter-spacing:.003em}
h1{font-size:clamp(2.4rem,1.2rem + 4vw,4.4rem);line-height:.92;font-weight:900}
h2{font-size:clamp(2rem,1.3rem + 2.9vw,3.7rem);line-height:.95;max-width:21ch}
h3{font-size:clamp(1.4rem,1.15rem + 1vw,2rem);line-height:1.02;font-weight:800}
h4{font-size:1.25rem;line-height:1.1;font-weight:700}
p{margin:0 0 1em}
.lede{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.5;color:var(--mute);max-width:58ch}
.band-noche .lede,.band-cesped .lede,.hero .lede{color:var(--mute-d)}
.mono{font-family:var(--mono)}
.small{font-size:.9rem}
b,strong{font-weight:700}

/* ── Botones ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:700 1rem/1 var(--body);text-decoration:none;padding:15px 24px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,color .15s}
.btn-amber{background:var(--ambar);color:var(--noche)}
.btn-amber:hover{background:#ffc654}
.btn-line{border-color:rgba(236,239,244,.5);color:var(--hielo)}
.btn-line:hover{background:rgba(236,239,244,.12)}
.btn-dark{background:var(--noche);color:var(--hielo)}
.btn-dark:hover{background:var(--noche-3)}
.btn-ghost{border-color:var(--noche);color:var(--noche)}
.btn-ghost:hover{background:var(--noche);color:var(--hielo)}
.btn:active{transform:translateY(1px)}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* ── Cabecera ─────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:50;background:var(--noche);color:var(--hielo);border-bottom:3px solid var(--ambar)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 1.7rem/1 var(--display);letter-spacing:.14em}
.logo i{display:inline-flex;gap:2px;font:400 .95rem/1 var(--mono);letter-spacing:0;font-style:normal;background:#000;color:var(--ambar);border:2px solid var(--noche-3);border-radius:4px;padding:4px 6px}
.nav{display:flex;gap:clamp(14px,1.7vw,26px);align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:.95rem;color:#d3daea}
.nav a:not(.btn):hover{color:#fff;text-decoration:underline;text-decoration-color:var(--ambar);text-underline-offset:7px;text-decoration-thickness:3px}
.nav a[aria-current=page]{color:#fff;text-decoration:underline;text-decoration-color:var(--ambar);text-underline-offset:7px;text-decoration-thickness:3px}
.nav .btn{padding:10px 16px;font-size:.92rem;color:var(--noche)}
.burger{display:none;background:none;border:2px solid rgba(236,239,244,.5);color:inherit;border-radius:4px;padding:8px 12px;font:700 .9rem var(--body);cursor:pointer}
@media (max-width:1040px){
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:62px;background:var(--noche);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 20px;border-bottom:3px solid var(--ambar);max-height:calc(100vh - 62px);overflow:auto}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--linea-d)}
  .nav .btn{margin-top:14px;border:0;text-align:center}
}

/* ── Bandas de sección ────────────────────────────────── */
section{position:relative}
.band{padding:clamp(64px,9vw,128px) 0}
.band-noche{background:var(--noche);color:var(--hielo)}
.band-hielo{background:var(--hielo)}
.band-papel{background:var(--papel)}
.band-cesped{color:#fff;background:repeating-linear-gradient(90deg,var(--cesped) 0 9vw,var(--cesped-2) 9vw 18vw)}
.band-cesped::before,.band-cesped::after{content:"";position:absolute;left:0;right:0;height:4px;background:rgba(255,255,255,.75)}
.band-cesped::before{top:18px}.band-cesped::after{bottom:18px}
.head{margin-bottom:clamp(32px,5vw,64px)}
.head .lede{margin-top:20px}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:900px){.split,.split.flip{grid-template-columns:1fr}}

/* divisor de campo: línea de medio campo y círculo */
.pitchline{display:block;width:100%;height:56px;color:var(--noche);opacity:.9}
.band-noche+.pitchline{color:var(--hielo)}

/* ── Hero ─────────────────────────────────────────────── */
.hero{background:var(--noche);color:var(--hielo);position:relative;overflow:hidden;padding:clamp(36px,5vw,64px) 0 clamp(48px,6vw,88px)}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(105deg,rgba(29,95,216,.5) 0 22%,transparent 22.1%),
  linear-gradient(105deg,transparent 0 78%,rgba(214,38,49,.45) 78.1%);pointer-events:none}
.hero .wrap{position:relative}
.hero-top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:clamp(24px,3.4vw,44px)}
.hero h1{max-width:none}
.hero .lede{margin:0 0 20px}
@media (max-width:900px){.hero-top{grid-template-columns:1fr}}
.hero-play{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(14px,2vw,24px);align-items:start}
@media (max-width:980px){.hero-play{grid-template-columns:1fr}}

/* tablero (la demo que funciona de verdad) */
.bezel{background:#04070d;padding:clamp(8px,1.1vw,14px);border-radius:6px;border:2px solid #26355a;position:relative;box-shadow:0 0 0 3px #04070d,0 0 0 5px var(--ambar)}
.stage{position:relative;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:linear-gradient(#070d1c,#0a1226);color:#fff;font-family:var(--display);user-select:none}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;background-image:radial-gradient(rgba(0,0,0,.55) 38%,transparent 42%);background-size:.55cqw .55cqw;opacity:.38;mix-blend-mode:multiply}
.stage .tod{position:absolute;left:3.4cqw;top:2.6cqw;font:400 2.5cqw/1 var(--mono);color:#8f9bb3}
.stage .clk{position:absolute;left:50%;top:1.2cqw;transform:translateX(-50%);background:#000;border-radius:.9cqw;padding:.35cqw 2cqw;font:400 6.2cqw/1.2 var(--mono);color:#ffc928;letter-spacing:.2cqw;text-shadow:0 0 1.2cqw rgba(255,190,40,.35);white-space:nowrap}
.stage .tm{position:absolute;top:11cqw;height:34cqw;width:46.5cqw;border-radius:1cqw;border:.22cqw solid rgba(255,255,255,.4);overflow:hidden}
.stage .tm.h{left:2cqw;background:linear-gradient(#1558d0,#0f45a6)}
.stage .tm.a{right:2cqw;background:linear-gradient(#c82028,#9d1620)}
.stage .tm img{position:absolute;top:1.6cqw;width:9.5cqw;height:9.5cqw;object-fit:contain}
.stage .tm.h img{left:2.4cqw}.stage .tm.a img{right:2.4cqw}
.stage .tm .code{position:absolute;top:.6cqw;font:700 7.6cqw/1 var(--display);letter-spacing:.2cqw}
.stage .tm.h .code{right:7cqw}.stage .tm.a .code{left:7cqw}
.stage .tm .sc{position:absolute;left:0;right:0;top:6.4cqw;text-align:center;font:700 17cqw/1 var(--display)}
.stage .tm .sc.bump{animation:bump .5s ease-out}
.stage .tm small{position:absolute;left:1cqw;right:1cqw;bottom:1.2cqw;text-align:center;font:600 1.75cqw/1.35 var(--display);white-space:pre-line;color:#e7ecfa}
.stage .per{position:absolute;left:0;right:0;top:46.4cqw;text-align:center;font:700 3cqw/1 var(--display);color:#ffc928}
.stage .msg{position:absolute;left:2cqw;right:2cqw;bottom:1.4cqw;height:4.6cqw;background:#0f1b36;border-radius:.8cqw;display:flex;align-items:center;justify-content:center;font:600 2cqw/1 var(--display);color:#c9d3ea;letter-spacing:.05cqw}
.stage .layer{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;z-index:5}
.stage .layer.on{opacity:1;visibility:visible}
/* tercio inferior (gol, tarjetas, cambio, falta) */
.stage .lt{position:absolute;left:0;bottom:0;width:62cqw;height:13cqw;background:rgba(6,10,22,.97);border-left:1.2cqw solid var(--tc,#1d5fd8);display:flex;align-items:center;gap:1.4cqw;padding:0 2cqw 0 .6cqw;transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.9,.2,1);z-index:6}
.stage .lt.on{transform:none}
.stage .lt .ph{height:100%;width:9.5cqw;overflow:hidden;flex:none;position:relative}
.stage .lt .ph img{position:absolute;left:0;top:.8cqw;height:130%;width:auto;max-width:none}
.stage .lt .card{width:2.4cqw;height:3.4cqw;border-radius:.3cqw;flex:none;display:none}
.stage .lt .card.y{background:#ffd21f;display:block}.stage .lt .card.r{background:#e53935;display:block}.stage .lt .card.g{background:#43a047;display:block}
.stage .lt .tg{font:700 1.7cqw/1 var(--display);color:#ffc928;letter-spacing:.12cqw;text-transform:uppercase}
.stage .lt .nm{display:flex;align-items:center;gap:1.2cqw;font:700 4.4cqw/1.05 var(--display)}
.stage .lt .nm em{font-style:normal;background:#2a3554;border-radius:.6cqw;padding:.2cqw 1.1cqw}
.stage .lt .cl{font:600 1.6cqw/1 var(--display);color:#9aa7c4;letter-spacing:.14cqw;text-transform:uppercase;margin-top:.5cqw}
/* gol a pantalla completa */
.stage .fx{z-index:8;background:radial-gradient(ellipse at center,var(--tc,#1d5fd8) 0,#050505 85%);overflow:hidden}
.stage .fx .rays{position:absolute;left:50%;top:50%;width:220cqw;height:220cqw;margin:-110cqw 0 0 -110cqw;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.14) 0 6deg,transparent 6deg 18deg);animation:spin 6s linear infinite}
.stage .fx .big{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stage .fx .goool{display:flex;font:900 25cqw/.9 var(--display);color:#fff;text-shadow:0 0 3cqw rgba(160,200,255,.9),0 1cqw 0 rgba(0,0,0,.4);-webkit-text-stroke:.5cqw var(--tc,#1d5fd8);paint-order:stroke fill}
.stage .fx .goool span{display:inline-block;opacity:0;animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
.stage .fx .goool span:nth-child(1){animation-delay:.1s}.stage .fx .goool span:nth-child(2){animation-delay:.2s}.stage .fx .goool span:nth-child(3){animation-delay:.3s}.stage .fx .goool span:nth-child(4){animation-delay:.4s}.stage .fx .goool span:nth-child(5){animation-delay:.5s}.stage .fx .goool span:nth-child(6){animation-delay:.6s}
.stage .fx .who{white-space:nowrap;margin-top:1cqw;font:800 5cqw/1 var(--display);letter-spacing:.9cqw;text-transform:uppercase;border-block:.3cqw solid rgba(255,255,255,.7);padding:.8cqw 3cqw;animation:fade .4s .7s both}
.stage .fx .res{margin-top:2cqw;font:800 7cqw/1 var(--display);color:#ffc928;animation:fade .4s .9s both}
.stage .fx.short .goool{font-size:34cqw}
.stage .fx.short .goool span{animation-delay:0s!important}
.stage .fx i{position:absolute;top:-6cqw;width:1.1cqw;height:1.8cqw;opacity:0;animation:fall var(--d,2.4s) linear var(--l,.3s) both;background:var(--c)}
.stage .fx.flash::before{content:"";position:absolute;inset:0;background:#fff;opacity:0;animation:flash .35s ease-out .05s both}
/* aviso corto: penalti / 7 metros */
.stage .pen{z-index:7;background:radial-gradient(circle,#c3192a 0,#3a0509 85%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.stage .pen::before,.stage .pen::after{content:"";position:absolute;left:0;right:0;height:5.5cqw;background:repeating-linear-gradient(-45deg,#ffd21f 0 2.6cqw,#111 2.6cqw 5.2cqw)}
.stage .pen::before{top:0}.stage .pen::after{bottom:0}
.stage .pen b{font:900 21cqw/1 var(--display);letter-spacing:.4cqw;text-shadow:0 1cqw 0 rgba(0,0,0,.4);animation:slam .5s cubic-bezier(.2,.9,.3,1) both}
.stage .pen span{white-space:nowrap;font:800 4.6cqw/1 var(--display);letter-spacing:1cqw;border-top:.3cqw solid #fff;padding-top:1.4cqw;margin-top:1cqw}
.stage .ann{z-index:7;background:#1565c0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6cqw}
.stage .ann b{font:800 8cqw/1.05 var(--display);text-transform:uppercase}
.stage .rest{z-index:7;background:#000}
.stage .rest .rc{position:absolute;right:3cqw;top:2.6cqw;font:400 6cqw/1 var(--mono);color:#ffd700;border:.4cqw solid #ffd700;border-radius:1cqw;padding:.8cqw 2cqw;background:rgba(0,0,0,.7)}
.stage .rest .rt{position:absolute;left:0;right:0;top:34cqw;text-align:center}
.stage .rest .rt small{display:block;font:600 2.6cqw/1 var(--display);letter-spacing:.8cqw;color:#ffd700}
.stage .rest .rt b{display:block;font:800 6.4cqw/1.1 var(--display);margin-top:1.2cqw;text-transform:uppercase}
.stage .rest .spn{position:absolute;left:50%;top:9cqw;width:34cqw;transform:translateX(-50%);opacity:0;transition:opacity .6s}
.stage .rest.show-sp .spn{opacity:1}
.stage .rest.show-sp .rt{opacity:.0}
.stage .rest .rt{transition:opacity .6s}
.stage .panic{z-index:10;background:#000;display:flex;align-items:center;justify-content:center;font:800 7.4cqw/1 var(--display);text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{opacity:0;transform:translateY(8cqw) scale(.3)}100%{opacity:1;transform:none}}
@keyframes fade{0%{opacity:0;transform:translateY(1cqw)}100%{opacity:1;transform:none}}
@keyframes fall{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:1;transform:translate3d(var(--dx),64cqw,0) rotate(var(--r))}}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
@keyframes slam{0%{transform:scale(3) skewY(-3deg);opacity:0;filter:blur(1cqw)}100%{transform:none;opacity:1;filter:none}}
@keyframes bump{0%{transform:scale(1.35)}100%{transform:scale(1)}}
.stage-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font:400 .85rem/1.4 var(--mono);color:var(--mute-d)}
.sports-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;padding:0;list-style:none}
.sports-tabs button{font:700 .95rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--hielo);border:2px solid var(--linea-d);padding:9px 14px;border-radius:3px;cursor:pointer}
.sports-tabs button[aria-pressed=true]{background:var(--ambar);border-color:var(--ambar);color:var(--noche)}
.sports-tabs button:hover{border-color:var(--ambar)}

/* teclas: el mando de la demo imita el teclado físico */
.keypad{background:#04070d;border:2px solid #26355a;border-radius:8px;padding:12px}
.keypad h2{font-size:1rem;line-height:1;max-width:none;font-weight:700;color:var(--mute-d);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;font-family:var(--display)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}
.keys button{width:100%;aspect-ratio:1/.82;border:0;border-radius:9px;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;font:800 .82rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase;transition:transform .08s,filter .15s;box-shadow:inset 0 -4px 0 rgba(0,0,0,.28)}
.keys button strong{font:900 clamp(1.5rem,1.1rem + 1vw,2.1rem)/1 var(--display);letter-spacing:0}
.keys button:hover{filter:brightness(1.15)}
.keys button:active{transform:translateY(2px);box-shadow:none}
.keys .kb{background:#1565c0}.keys .kr{background:#c62828}.keys .ky{background:#f9a825;color:#1b1300}.keys .kp{background:#4a148c}.keys .kd{background:#263238}.keys .ko{background:#ef6c00}.keys .kg{background:#2e7d32}
.keys button[aria-pressed=true]{outline:3px solid #fff;outline-offset:-3px}
.keypad-foot{display:flex;gap:8px;margin-top:10px}
.keypad-foot button{flex:1;font:700 .9rem/1 var(--body);background:transparent;color:var(--hielo);border:2px solid var(--linea-d);border-radius:5px;padding:10px;cursor:pointer}
.keypad-foot button:hover{border-color:var(--ambar)}
.keypad p{margin:10px 0 0;font-size:.85rem;color:var(--mute-d);line-height:1.4}
@media (max-width:980px){.keys{grid-template-columns:repeat(5,1fr)}.keys button{font-size:.72rem}}
@media (max-width:560px){.keys{grid-template-columns:repeat(3,1fr)}}

/* 7 segmentos (guiño al marcador de LED) */
.seg{display:inline-flex;gap:.12em;height:1em;font-size:inherit;vertical-align:middle;transform:skewX(-6deg)}
.seg svg{height:100%;width:auto;display:block}
.seg .o{fill:rgba(255,178,26,.11)}.seg .l{fill:var(--ambar);filter:drop-shadow(0 0 3px rgba(255,178,26,.55))}
.seg-wrap{font-size:clamp(3.2rem,2rem + 4vw,5.6rem);line-height:1;display:block;height:1em}

/* ── Promesas ─────────────────────────────────────────── */
.promises{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--noche);margin:0;padding:0;list-style:none}
.promises li{padding:26px clamp(14px,1.8vw,26px) 8px 0;border-right:1px solid var(--linea);margin-right:clamp(14px,1.8vw,26px)}
.promises li:last-child{border-right:0;margin-right:0}
.promises .seg-wrap{color:var(--ambar);background:#000;display:inline-flex;align-items:center;padding:.12em .22em;border-radius:6px;margin-bottom:16px;height:auto}
.promises .seg-wrap .seg{height:1em}
.promises .big{display:block;font:800 clamp(1.45rem,1.1rem + 1vw,2rem)/1 var(--display);margin-bottom:8px}
.promises p{font-size:.98rem;color:var(--mute);line-height:1.45;margin:0}
@media (max-width:1000px){.promises{grid-template-columns:repeat(2,minmax(0,1fr))}.promises li{border-right:0;margin:0;border-bottom:1px solid var(--linea);padding-bottom:22px}.promises li:last-child{grid-column:1/-1}}
@media (max-width:560px){.promises{grid-template-columns:1fr}}

/* ── Marcos de pantalla ───────────────────────────────── */
figure{margin:0}
figcaption{font:400 .86rem/1.4 var(--mono);color:var(--mute);margin-top:10px}
.band-noche figcaption,.band-cesped figcaption{color:var(--mute-d)}
.led{background:#03060c;padding:clamp(6px,.9vw,11px);border-radius:5px;position:relative;box-shadow:0 0 0 2px var(--noche-3)}
.led::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ambar);border-radius:5px 5px 0 0}
.led>img,.led>video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.led.dots{position:relative}
.led.dots::after{content:"";position:absolute;inset:clamp(6px,.9vw,11px);pointer-events:none;background-image:radial-gradient(rgba(0,0,0,.5) 36%,transparent 40%);background-size:5px 5px;opacity:.28;mix-blend-mode:multiply}
.ui{border:2px solid var(--noche);background:#0b0e14;box-shadow:6px 6px 0 var(--noche);border-radius:3px;overflow:hidden}
.band-noche .ui,.band-cesped .ui{border-color:#33456f;box-shadow:6px 6px 0 #000}
.ui img{width:100%}
.phone{width:min(100%,290px);border:9px solid #05070c;border-radius:34px;background:#05070c;overflow:hidden;box-shadow:0 0 0 2px #33456f,8px 8px 0 rgba(0,0,0,.35);position:relative}
.phone::before{content:"";position:absolute;left:50%;top:7px;width:70px;height:7px;border-radius:5px;background:#1b2338;transform:translateX(-50%);z-index:2}
.phone img{width:100%}
.phone-crop{max-height:640px;overflow:hidden}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media (max-width:640px){.pair{grid-template-columns:1fr}}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
@media (max-width:760px){.trio{grid-template-columns:1fr}}

/* ── Listas con regla (en lugar de tarjetas) ──────────── */
.ruled{margin:0;padding:0;list-style:none;border-top:2px solid currentColor}
.ruled li{padding:14px 0;border-bottom:1px solid var(--linea)}
.band-noche .ruled li,.band-cesped .ruled li{border-bottom-color:var(--linea-d)}
.band-cesped .ruled li{border-bottom-color:rgba(255,255,255,.3)}
.ruled b{display:block;font:800 1.25rem/1.1 var(--display);margin-bottom:3px}
.ruled span{color:var(--mute);font-size:1rem;line-height:1.5}
.band-noche .ruled span{color:var(--mute-d)}
.band-cesped .ruled span{color:#dff0e6}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}
@media (max-width:900px){.cols3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cols2,.cols3{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.chips li{font:700 .95rem/1 var(--display);letter-spacing:.05em;text-transform:uppercase;border:2px solid currentColor;padding:7px 11px;border-radius:3px}

/* ── Visor con pestañas ───────────────────────────────── */
.viewer{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(18px,3vw,40px);align-items:start}
@media (max-width:900px){.viewer{grid-template-columns:1fr}}
.tablist{display:flex;flex-direction:column;border-top:2px solid var(--noche);margin:0;padding:0}
.band-noche .tablist{border-color:var(--ambar)}
.tablist button{display:flex;align-items:center;gap:12px;text-align:left;background:none;border:0;border-bottom:1px solid var(--linea);color:inherit;font:800 1.25rem/1.1 var(--display);padding:13px 6px 13px 0;cursor:pointer}
.band-noche .tablist button{border-bottom-color:var(--linea-d)}
.tablist button i{width:12px;height:22px;border-radius:2px;flex:none;background:var(--c,#999)}
.tablist button span{flex:1}
.tablist button small{font:400 .8rem/1 var(--mono);opacity:.65;display:none}
.tablist button[aria-selected=true]{background:var(--noche);color:#fff;padding-left:12px}
.band-noche .tablist button[aria-selected=true]{background:var(--ambar);color:var(--noche)}
.tablist button:hover:not([aria-selected=true]){padding-left:8px}
@media (max-width:900px){.tablist{flex-direction:row;overflow-x:auto;border-top:0;gap:6px;padding-bottom:6px}.tablist button{border:2px solid var(--linea);white-space:nowrap;padding:9px 12px;border-radius:3px;font-size:1.05rem}.band-noche .tablist button{border-color:var(--linea-d)}.tablist button[aria-selected=true]{padding-left:12px}}
.tabpanel[hidden]{display:none}
.tabpanel .cap{margin-top:14px;max-width:62ch}
.tabpanel .cap b{font:800 1.5rem/1.1 var(--display);display:block;margin-bottom:4px}
.tabpanel .cap p{color:var(--mute);margin:0}
.band-noche .tabpanel .cap p{color:var(--mute-d)}

/* ── Cómo funciona (diagrama + pasos) ─────────────────── */
.diagram{background:var(--papel);border:2px solid var(--noche);padding:clamp(10px,2vw,24px);box-shadow:6px 6px 0 var(--noche)}
.diagram svg{width:100%;height:auto;display:block}
.diagram svg text{font-family:'Source Sans 3',system-ui,sans-serif}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin:clamp(32px,4vw,56px) 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;border-top:4px solid var(--azul);padding-top:14px}
.steps li:nth-child(2){border-color:var(--ambar)}.steps li:nth-child(3){border-color:var(--rojo)}
.steps li::before{content:counter(s);font:900 3rem/1 var(--display);display:block;color:var(--noche)}
.steps h3{margin:2px 0 6px}
.steps p{color:var(--mute);margin:0}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.nocloud{display:flex;gap:16px;align-items:center;margin-top:clamp(28px,4vw,48px);padding:18px 22px;background:var(--noche);color:var(--hielo);border-left:8px solid var(--ambar)}
.nocloud svg{flex:none;width:64px;height:64px}
.nocloud p{margin:0;font-size:1.08rem}
.nocloud b{font:800 1.5rem/1.1 var(--display);display:block}

/* ── Antes / después (fondo) ──────────────────────────── */
.ba{position:relative;aspect-ratio:3/4;max-width:420px;margin:0 auto;border:2px solid var(--noche);overflow:hidden;background:
  repeating-conic-gradient(#d9dde6 0 25%,#fff 0 50%) 0 0/22px 22px;touch-action:pan-y;box-shadow:6px 6px 0 var(--noche)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .before{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--p,50%);width:4px;margin-left:-2px;background:var(--ambar);pointer-events:none}
.ba .handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--ambar);color:var(--noche);display:flex;align-items:center;justify-content:center;font:700 1.2rem/1 var(--body)}
.ba .tag{position:absolute;top:10px;font:700 .8rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;background:var(--noche);color:#fff;padding:6px 9px;pointer-events:none}
.ba .t1{left:10px}.ba .t2{right:10px}
.ba:focus-within{outline:3px solid var(--azul);outline-offset:4px}
.flow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,32px);margin:0;padding:0;list-style:none;counter-reset:f}
.flow3 li{counter-increment:f;position:relative;padding-top:18px;border-top:4px solid var(--noche)}
.flow3 li::before{content:counter(f);position:absolute;top:-4px;right:0;background:var(--noche);color:var(--ambar);font:900 1.4rem/1 var(--display);padding:4px 10px}
.flow3 h3{margin-bottom:6px}
.flow3 p{color:var(--mute);margin:0}
@media (max-width:760px){.flow3{grid-template-columns:1fr}}

/* ── Roles ────────────────────────────────────────────── */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.roles li{padding:0 clamp(14px,2vw,28px);border-left:1px solid var(--linea)}
.roles li:first-child{padding-left:0;border-left:0}
.roles li::before{content:"";display:block;height:10px;background:var(--c);margin-bottom:14px}
.roles h3{margin-bottom:6px}
.roles p{color:var(--mute);font-size:1rem}
@media (max-width:760px){.roles{grid-template-columns:1fr;gap:22px}.roles li{border-left:0;padding:0}}

/* ── Escenas (programaciones) ─────────────────────────── */
.scene-run{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:clamp(18px,3vw,40px);align-items:start}
@media (max-width:900px){.scene-run{grid-template-columns:1fr}}
.scene-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.scene-btns button{font:800 1.2rem/1 var(--display);padding:16px 20px;background:var(--ambar);color:var(--noche);border:0;border-radius:6px;cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.scene-btns button[aria-pressed=true]{outline:3px solid #fff;outline-offset:2px}
.scene-btns button:hover{filter:brightness(1.1)}
.scene-steps{margin:0;padding:0;list-style:none;border-top:2px solid var(--ambar);counter-reset:z}
.scene-steps li{counter-increment:z;display:flex;gap:14px;align-items:baseline;padding:12px 0 12px 12px;border-bottom:1px solid var(--linea-d);border-left:6px solid transparent;transition:background .2s,border-color .2s;color:var(--mute-d)}
.scene-steps li::before{content:counter(z);font:400 .95rem/1 var(--mono);width:1.4em;flex:none}
.scene-steps li b{color:#fff;font:700 1.1rem/1.2 var(--display);letter-spacing:.02em;display:block}
.scene-steps li.act{background:var(--noche-2);border-left-color:var(--ambar);color:#fff}
.scene-steps li.done{opacity:.55}
.scene-note{font:400 .85rem/1.4 var(--mono);color:var(--mute-d);margin-top:12px}

/* ── Salida transparente / croma ──────────────────────── */
.outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
@media (max-width:760px){.outs{grid-template-columns:1fr}}
.out{position:relative;aspect-ratio:16/9;border:2px solid var(--noche);overflow:hidden;display:flex;align-items:flex-end;box-shadow:5px 5px 0 var(--noche)}
.out .game{position:absolute;inset:0;background:linear-gradient(180deg,#5a8bd0 0 38%,#2f7d46 38% 100%)}
.out .game::before{content:"";position:absolute;left:0;right:0;top:55%;height:3px;background:rgba(255,255,255,.65)}
.out .game::after{content:"";position:absolute;left:50%;top:55%;width:22%;aspect-ratio:1;border:3px solid rgba(255,255,255,.65);border-radius:50%;transform:translate(-50%,-50%) scaleY(.35)}
.out.tr .game{inset:0}
.out.ch{background:#00b140}
.out.ch .game{display:none}
.out .gfx{position:absolute;left:4%;top:6%;display:flex;align-items:stretch;font:800 clamp(.8rem,1.6vw,1.1rem)/1 var(--display);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.out .gfx span{padding:6px 9px;background:#1d5fd8}.out .gfx span+span{background:#000;color:#ffc928;font-family:var(--mono)}.out .gfx span+span+span{background:#d62631;color:#fff;font-family:var(--display)}
.out.ch .gfx{box-shadow:none}
.out.pab{background:#000}
.out.pab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.out figcaption{position:relative;z-index:2;background:var(--noche);color:#fff;width:100%;margin:0;padding:8px 10px;font:700 .9rem/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase}

/* ── Patrocinadores: cinta continua ───────────────────── */
.tape{overflow:hidden;background:#000;border-block:3px solid var(--ambar);padding:16px 0}
.tape-in{display:flex;width:max-content;animation:tape 30s linear infinite}
.tape-in img{height:clamp(70px,9vw,120px);width:auto;margin-right:clamp(16px,2.4vw,32px);border-radius:3px}
@keyframes tape{to{transform:translateX(-50%)}}
.tape:hover .tape-in{animation-play-state:paused}

/* ── Deportes ─────────────────────────────────────────── */
.sport-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3.4vw,48px);align-items:start}
@media (max-width:900px){.sport-panel{grid-template-columns:1fr}}
.sport-panel h3{font-size:clamp(2rem,1.4rem + 2vw,3rem);margin-bottom:10px}
.sport-panel .kb-strip{display:grid;gap:12px}
.sport-panel .kb-strip img{width:100%;border:2px solid #000;border-radius:4px;background:#000}
.band-cesped .tablist{border-color:#fff}
.band-cesped .tablist button{border-bottom-color:rgba(255,255,255,.35)}
.band-cesped .tablist button[aria-selected=true]{background:#fff;color:var(--cesped)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:16px 0 0;font-size:1rem}
.spec dt{font:800 1rem/1.5 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ambar)}
.spec dd{margin:0;color:#eaf5ee}

/* ── Fiabilidad ───────────────────────────────────────── */
.led-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);border-top:2px solid var(--ambar)}
.led-list li{display:grid;grid-template-columns:18px 1fr;gap:6px 14px;padding:16px 0;border-bottom:1px solid var(--linea-d)}
.led-list li::before{content:"";width:12px;height:12px;border-radius:50%;background:#35d07f;box-shadow:0 0 10px #35d07f;margin-top:7px}
.led-list li:nth-child(3n+2)::before{background:var(--ambar);box-shadow:0 0 10px var(--ambar)}
.led-list b{font:800 1.3rem/1.15 var(--display);color:#fff;grid-column:2}
.led-list span{grid-column:2;color:var(--mute-d)}
@media (max-width:760px){.led-list{grid-template-columns:1fr}}

/* ── Comparativa ──────────────────────────────────────── */
.cmp-wrap{overflow-x:auto;border:2px solid var(--noche);box-shadow:6px 6px 0 var(--noche);background:var(--papel)}
table.cmp{border-collapse:collapse;width:100%;min-width:720px;font-size:1rem}
.cmp caption{text-align:left;padding:12px 16px;font:400 .86rem/1.4 var(--mono);color:var(--mute);caption-side:bottom;border-top:1px solid var(--linea)}
.cmp th,.cmp td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
.cmp thead th{background:var(--noche);color:#fff;font:800 1.2rem/1.1 var(--display);vertical-align:bottom}
.cmp thead th:nth-child(2){background:var(--azul)}
.cmp tbody th{font-weight:600;width:34%}
.cmp td{width:22%}
.cmp td:nth-child(2){background:#eef4ff;font-weight:600}
.cmp .y::before,.cmp .p::before,.cmp .n::before{display:inline-block;width:1.2em;font-weight:900;margin-right:.25em}
.cmp .y::before{content:"✓";color:#0d7a3b}.cmp .p::before{content:"~";color:#a56200}.cmp .n::before{content:"✕";color:#b3261e}

/* ── Para quién ───────────────────────────────────────── */
.who{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:2px solid var(--noche)}
.who li{padding:20px clamp(10px,1.6vw,22px) 4px 0;border-right:1px solid var(--linea);margin-right:clamp(10px,1.6vw,22px)}
.who li:last-child{border-right:0;margin-right:0}
.who h3{font-size:1.5rem;margin-bottom:8px}
.who p{font-size:.98rem;color:var(--mute);margin:0}
@media (max-width:1000px){.who{grid-template-columns:repeat(2,minmax(0,1fr))}.who li{border-right:0;margin:0;border-bottom:1px solid var(--linea);padding-bottom:18px}}
@media (max-width:560px){.who{grid-template-columns:1fr}}

/* ── FAQ ──────────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);align-items:start}
.faq details{border-top:1px solid var(--linea)}
@media (max-width:900px){.faq{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font:800 clamp(1.25rem,1.1rem + .6vw,1.6rem)/1.15 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font:700 1.9rem/1 var(--display);color:var(--azul)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px;color:var(--mute);max-width:70ch}

/* ── Presupuesto ──────────────────────────────────────── */
.box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.box{grid-template-columns:1fr}}
.incl{margin:20px 0 0;padding:0;list-style:none}
.incl li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid rgba(255,255,255,.3)}
.incl li::before{content:"";position:absolute;left:0;top:17px;width:16px;height:9px;border-left:4px solid var(--ambar);border-bottom:4px solid var(--ambar);transform:rotate(-45deg)}
form{background:var(--papel);color:var(--noche);padding:clamp(20px,3vw,32px);border:2px solid var(--noche);box-shadow:8px 8px 0 #000;border-radius:3px}
form label{display:block;font-weight:600;font-size:.95rem;margin-bottom:14px}
form input,form select,form textarea{display:block;width:100%;margin-top:5px;font:400 1rem/1.3 var(--body);padding:11px 12px;border:2px solid var(--linea);border-radius:3px;background:#fff;color:var(--noche)}
form textarea{min-height:110px;resize:vertical}
form input:focus,form select:focus,form textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgba(29,95,216,.25)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.92rem}
form .check input{width:20px;height:20px;margin:2px 0 0;flex:none}
.form-msg{margin:12px 0 0;min-height:1.4em;font-weight:600}
.form-msg.ok{color:#0d6b34}.form-msg.err{color:#b3261e}
.contact-line{margin-top:22px}

/* ── Pie ──────────────────────────────────────────────── */
footer{background:var(--noche);color:#c3cbe0;padding:56px 0 30px;border-top:4px solid var(--ambar)}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer h4{color:#fff;font-size:1.1rem;margin-bottom:10px;letter-spacing:.06em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:6px}
footer a:hover{color:#fff}
footer .small{grid-column:1/-1;border-top:1px solid var(--linea-d);padding-top:20px;margin:0;font-size:.88rem}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}footer .wrap>div:first-child{grid-column:1/-1}}

/* ── Páginas interiores ───────────────────────────────── */
.page-hero{background:var(--noche);color:var(--hielo);padding:clamp(44px,6vw,88px) 0 clamp(36px,5vw,64px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(29,95,216,.45) 0 16%,transparent 16.1%),linear-gradient(105deg,transparent 0 86%,rgba(214,38,49,.4) 86.1%)}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(2.6rem,1.4rem + 5vw,5.4rem);max-width:15ch}
.page-hero .lede{margin-top:20px;color:var(--mute-d)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.toc a{display:block;text-decoration:none;font:700 1rem/1 var(--display);letter-spacing:.05em;text-transform:uppercase;border:2px solid var(--linea-d);padding:9px 13px;border-radius:3px;color:var(--hielo)}
.toc a:hover{border-color:var(--ambar);color:#fff}
.ficha{margin-bottom:clamp(40px,6vw,72px)}
.ficha h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);margin-bottom:18px}
.ficha .ruled li{display:grid;grid-template-columns:minmax(0,1fr);}
.ficha-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
@media (max-width:900px){.ficha-grid{grid-template-columns:1fr}}
.sport-block{padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--linea)}
.sport-block:first-of-type{border-top:0}

/* ── Movimiento reducido ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .tape-in{animation:none}
  .tape{overflow-x:auto}
  .stage .fx .goool span,.stage .fx .who,.stage .fx .res{opacity:1!important;transform:none}
  .stage .fx i{display:none}
}
@media print{.top,.hero .keypad,form{display:none}}

.ui.n{width:fit-content;max-width:100%;margin-inline:auto}
.ui.n img{width:auto;max-width:100%;margin:0 auto}
.stack{display:grid;gap:clamp(14px,2vw,24px)}
.diagram{overflow-x:auto}
.diagram svg{min-width:760px}

/* páginas legales */
.legal{padding:clamp(40px,6vw,80px) 0;background:var(--papel,#fff)}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(2.4rem,1.4rem + 4vw,4rem);margin-bottom:24px}
.legal h2{font-size:1.5rem;margin:34px 0 8px}
.legal p{max-width:68ch;line-height:1.65}
.legal .aviso{border-left:6px solid var(--ambar);background:var(--hielo);padding:14px 18px;color:var(--noche)}
.legal code{background:var(--hielo);padding:1px 6px}
table.cmp.plain thead th:nth-child(2){background:var(--noche)}
table.cmp.plain td:nth-child(2){background:none;font-weight:400}
table.cmp.plain tbody th{width:14%}
table.cmp.plain td{width:auto}