/*
Theme Name: Kodi 4K
Theme URI: https://kodi4k.example
Author: Safae
Author URI: https://kodi4k.example
Description: Cyber-gamer IPTV theme for Kodi & 4K streaming — neon on black, animated grid, glitch headline, crosshair cursor, loadout color switcher, item-vault pricing. Adapted from the Overclock design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kodi4k
*/

:root{
  --bg:         #07070d;
  --bg-2:       #0d0d18;
  --bg-3:       #14142a;
  --panel:      #11111f;
  --line:       #1f1f3a;
  --line-soft:  #15152a;
  --text:       #e8ecff;
  --text-dim:   #7a82a8;
  --text-mute:  #4a527a;

  --cyan:       #00f0ff;
  --magenta:    #ff2e9a;
  --acid:       #aaff00;
  --amber:      #ffb300;
  --red:        #ff3355;

  --display: 'Chakra Petch', sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --pixel:   'Press Start 2P', monospace;
}

body[data-loadout="assault"] { --accent: var(--magenta); --accent2: var(--cyan); }
body[data-loadout="recon"]   { --accent: var(--cyan);    --accent2: var(--acid); }
body[data-loadout="medic"]   { --accent: var(--acid);    --accent2: var(--amber); }
body[data-loadout="ghost"]   { --accent: var(--amber);   --accent2: var(--magenta); }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img{ max-width:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.55;
  overflow-x:hidden;
  cursor:none;
  min-height:100vh;
  position:relative;
}
a{ color:inherit; text-decoration:none; }
a,button,.pill,.product,.roll-slide,.cart-btn,.buy{ -webkit-tap-highlight-color:transparent; }

body::before{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  opacity:0.5; pointer-events:none; z-index:0;
  animation: gridShift 30s linear infinite;
}
@keyframes gridShift { 0%{ background-position:0 0,0 0; } 100%{ background-position:50px 50px,50px 50px; } }
body::after{
  content:""; position:fixed; inset:0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,240,255,0.018) 2px, rgba(0,240,255,0.018) 3px);
  pointer-events:none; z-index:9998;
}

/* CURSOR — CROSSHAIR */
.cursor{ position:fixed; top:0; left:0; width:40px; height:40px; pointer-events:none; z-index:10000; transform:translate(-50%,-50%); transition: width .2s ease, height .2s ease, transform .15s ease-out; mix-blend-mode:screen; }
.cursor::before, .cursor::after{ content:""; position:absolute; background:var(--accent, var(--cyan)); box-shadow: 0 0 8px var(--accent, var(--cyan)); }
.cursor::before{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.cursor::after{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.cursor .ring{ position:absolute; inset:35%; border:1px solid var(--accent, var(--cyan)); border-radius:50%; box-shadow:0 0 6px var(--accent, var(--cyan)); }
.cursor .corners{ position:absolute; inset:0; }
.cursor .corners::before, .cursor .corners::after, .cursor .corners > span{ content:""; position:absolute; width:8px; height:8px; border-color:var(--accent, var(--cyan)); border-style:solid; border-width:0; }
.cursor .corners::before{ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.cursor .corners::after{ top:0; right:0; border-top-width:2px; border-right-width:2px; }
.cursor .corners .bl{ bottom:0; left:0; border-bottom-width:2px; border-left-width:2px; }
.cursor .corners .br{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }
.cursor.hover{ width:60px; height:60px; }

/* STATUS BAR */
.statusbar{ position:fixed; top:0; left:0; right:0; z-index:99; background:var(--bg-2); border-bottom:1px solid var(--line); padding:6px 24px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:0.08em; text-transform:uppercase; }
.statusbar .left, .statusbar .right{ display:flex; gap:18px; align-items:center; }
.statusbar .item{ display:flex; gap:6px; align-items:center; }
.statusbar .dot{ width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 8px var(--acid); animation:blink 1.4s ease-in-out infinite; }
.statusbar .val{ color:var(--cyan); font-weight:500; }
@keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

/* NAV */
nav{ position:fixed; top:30px; left:0; right:0; z-index:90; padding:18px 32px; display:flex; justify-content:space-between; align-items:center; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(12px); border-bottom:1px solid var(--line); }
.logo{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:0.04em; color:var(--text); display:flex; align-items:center; gap:10px; }
.logo .br{ color:var(--accent, var(--cyan)); text-shadow:0 0 10px var(--accent, var(--cyan)); }
.logo .blink{ width:8px; height:18px; background:var(--accent, var(--cyan)); animation:blink 1s steps(1) infinite; margin-left:4px; }
.nav-links{ display:flex; gap:6px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.12em; }
.nav-links a{ color:var(--text-dim); text-decoration:none; padding:8px 14px; border:1px solid transparent; transition:all .2s ease; position:relative; }
.nav-links a:hover{ color:var(--text); border-color:var(--line); background:var(--bg-2); }
.nav-links a::before{ content:"["; opacity:0; margin-right:4px; color:var(--accent, var(--cyan)); transition:opacity .2s ease; }
.nav-links a::after{ content:"]"; opacity:0; margin-left:4px; color:var(--accent, var(--cyan)); transition:opacity .2s ease; }
.nav-links a:hover::before, .nav-links a:hover::after{ opacity:1; }
.cart-btn{ background:transparent; color:var(--text); padding:10px 16px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.12em; border:1px solid var(--accent, var(--cyan)); cursor:none; display:flex; align-items:center; gap:10px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); box-shadow: 0 0 0 1px var(--accent, var(--cyan)) inset, 0 0 12px color-mix(in srgb, var(--accent, var(--cyan)) 40%, transparent); transition:all .2s ease; text-decoration:none; }
.cart-btn:hover{ background: color-mix(in srgb, var(--accent, var(--cyan)) 15%, transparent); }
.cart-btn .count{ background:var(--accent, var(--cyan)); color:var(--bg); padding:2px 8px; font-weight:700; min-width:22px; text-align:center; }
.games-btn{ background:transparent; color:var(--acid); padding:10px 14px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.12em; border:1px solid var(--acid); cursor:none; display:inline-flex; align-items:center; gap:7px; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); box-shadow: 0 0 10px color-mix(in srgb, var(--acid) 30%, transparent); transition:all .2s ease; text-decoration:none; animation: gamesBtnPulse 2.2s ease-in-out infinite; }
.games-btn:hover{ background: color-mix(in srgb, var(--acid) 15%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--acid) 55%, transparent); }
@keyframes gamesBtnPulse{ 0%,100%{ box-shadow:0 0 10px color-mix(in srgb,var(--acid) 30%,transparent); } 50%{ box-shadow:0 0 22px color-mix(in srgb,var(--acid) 65%,transparent); } }
@media(max-width:960px){ .games-btn{ font-size:10px; padding:8px 10px; } }
@media(max-width:640px){ .games-btn{ display:none; } }

/* KODIGAMES — botón dentro del menú hamburguesa (solo móvil) */
.games-btn-mobile{ display:none; }
@media(max-width:960px){
  .games-btn-mobile{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:10px 18px 6px;
    padding:16px 20px;
    background: linear-gradient(135deg, color-mix(in srgb,var(--acid) 18%,transparent), color-mix(in srgb,var(--acid) 8%,transparent));
    border:2px solid var(--acid);
    border-radius:6px;
    color:var(--acid);
    font-family:var(--mono);
    font-size:15px;
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    text-decoration:none;
    box-shadow:0 0 22px color-mix(in srgb,var(--acid) 45%,transparent), inset 0 0 12px color-mix(in srgb,var(--acid) 8%,transparent);
    animation: gamesBtnPulse 2s ease-in-out infinite;
    min-height:56px;
  }
  .games-btn-mobile:active{ background:color-mix(in srgb,var(--acid) 22%,transparent); }
}
.nav-toggle{ display:none; flex-direction:column; gap:4px; width:42px; height:38px; padding:9px; background:var(--bg-2); border:1px solid var(--line); cursor:none; }
.nav-toggle span{ height:2px; background:var(--accent,var(--cyan)); transition:.25s; box-shadow:0 0 6px var(--accent,var(--cyan)); }
nav.open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
nav.open .nav-toggle span:nth-child(2){ opacity:0; }
nav.open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* HERO */
.hero{ min-height:100vh; padding:150px 32px 60px; position:relative; z-index:2; }
.hero-grid{ max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 380px; gap:50px; align-items:end; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:30px; } }
.hero-top{ display:flex; flex-direction:column; gap:18px; }
.hero-tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; padding:6px 12px; border:1px solid var(--line); background:var(--bg-2); color:var(--text-dim); width:fit-content; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.hero-tag .dot{ width:6px; height:6px; background:var(--accent, var(--cyan)); box-shadow:0 0 8px var(--accent, var(--cyan)); animation:blink 1.2s ease-in-out infinite; }
.hero-tag .val{ color:var(--accent, var(--cyan)); }
.hero h1{ font-family:var(--display); font-weight:700; font-size:clamp(54px, 10vw, 150px); line-height:0.9; letter-spacing:-0.02em; color:var(--text); position:relative; }
.hero h1 .glitch{ position:relative; display:inline-block; }
.hero h1 .glitch::before, .hero h1 .glitch::after{ content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.hero h1 .glitch::before{ color:var(--magenta); transform:translate(-3px,0); mix-blend-mode:screen; animation:glitchA 5s infinite steps(2); opacity:.85; }
.hero h1 .glitch::after{ color:var(--cyan); transform:translate(3px,0); mix-blend-mode:screen; animation:glitchB 5s infinite steps(2); opacity:.85; }
@keyframes glitchA{ 0%,88%,100%{ transform:translate(0,0); clip-path:none; } 90%{ transform:translate(-6px,2px); clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%); } 93%{ transform:translate(-3px,-2px); clip-path:polygon(0 60%,100% 60%,100% 70%,0 70%); } 96%{ transform:translate(-5px,1px); clip-path:polygon(0 80%,100% 80%,100% 95%,0 95%); } }
@keyframes glitchB{ 0%,88%,100%{ transform:translate(0,0); clip-path:none; } 90%{ transform:translate(6px,-1px); clip-path:polygon(0 10%,100% 10%,100% 25%,0 25%); } 93%{ transform:translate(3px,2px); clip-path:polygon(0 50%,100% 50%,100% 65%,0 65%); } 96%{ transform:translate(5px,-2px); clip-path:polygon(0 75%,100% 75%,100% 90%,0 90%); } }
.hero h1 .neon{ color:var(--accent, var(--cyan)); text-shadow: 0 0 12px var(--accent, var(--cyan)), 0 0 24px color-mix(in srgb, var(--accent, var(--cyan)) 50%, transparent); }
.hero-desc{ font-family:var(--mono); font-size:16px; color:var(--text-dim); max-width:560px; line-height:1.5; margin-top:8px; }
.hero-desc span{ color:var(--text); }
.hero-desc .cmd{ color:var(--acid); background: color-mix(in srgb, var(--acid) 10%, transparent); padding:2px 6px; border:1px dashed color-mix(in srgb, var(--acid) 30%, transparent); }
.hero-cta{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.btn-primary, .btn-secondary{ padding:18px 26px; font-family:var(--mono); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:0.18em; border:none; cursor:none; display:inline-flex; align-items:center; gap:14px; text-decoration:none; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: transform .2s ease, background .2s ease; position:relative; }
.btn-primary{ background:var(--accent, var(--cyan)); color:var(--bg); box-shadow: 0 0 24px color-mix(in srgb, var(--accent, var(--cyan)) 50%, transparent); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-primary::after{ content:"▶"; font-size:10px; }
.btn-secondary{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn-secondary:hover{ background:var(--bg-2); border-color:var(--accent, var(--cyan)); }

/* BIG GLOWING FREE-TRIAL BUTTON — fixed "gratis" green */
.btn-trial{ padding:28px 54px; font-size:18px; letter-spacing:0.2em; font-weight:800; background:#16e06a; color:#04130a; position:relative; overflow:hidden; animation: trialPulse 1.6s ease-in-out infinite; }
.btn-trial:hover{ transform:translateY(-4px) scale(1.03); background:#2bff7e; }
@keyframes trialPulse{
  0%,100%{ box-shadow: 0 0 20px rgba(22,224,106,0.6), 0 0 0 0 rgba(22,224,106,0.55); }
  50%    { box-shadow: 0 0 48px rgba(22,224,106,1), 0 0 0 11px rgba(22,224,106,0); }
}
.btn-trial::after{ content:""; position:absolute; top:0; bottom:0; left:-60%; width:42%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.85), transparent); transform:skewX(-20deg); animation: trialShine 2.4s ease-in-out infinite; pointer-events:none; }
@keyframes trialShine{ 0%{ left:-60%; } 55%,100%{ left:140%; } }
.btn-trial .free{ background:#04130a; color:#16e06a; padding:3px 10px; margin:0 3px; font-weight:800; }

/* Nav trial button — keep it glowing & present */
.cart-btn{ animation: navTrialGlow 2.6s ease-in-out infinite; }
@keyframes navTrialGlow{
  0%,100%{ box-shadow: 0 0 0 1px var(--accent, var(--cyan)) inset, 0 0 12px color-mix(in srgb, var(--accent, var(--cyan)) 40%, transparent); }
  50%    { box-shadow: 0 0 0 1px var(--accent, var(--cyan)) inset, 0 0 24px color-mix(in srgb, var(--accent, var(--cyan)) 85%, transparent); }
}

/* HERO PLAYER/PASS CARD */
.player-card{ background:var(--panel); border:1px solid var(--line); padding:22px; position:relative; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.player-card::before{ content:""; position:absolute; top:0; right:0; width:18px; height:18px; background:var(--accent, var(--cyan)); clip-path:polygon(100% 0, 0 0, 100% 100%); }
.player-card .pc-head{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:10px; color:var(--text-mute); letter-spacing:0.15em; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:18px; }
.player-card .pc-head .live{ color:var(--acid); display:flex; align-items:center; gap:6px; }
.player-card .pc-head .live::before{ content:""; width:6px; height:6px; background:var(--acid); border-radius:50%; box-shadow:0 0 6px var(--acid); animation:blink 1.4s infinite; }
.player-card .avatar-row{ display:flex; gap:16px; align-items:center; margin-bottom:18px; }
.player-card .avatar{ width:60px; height:60px; background: linear-gradient(135deg, var(--accent, var(--cyan)), var(--accent2, var(--magenta))); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:24px; color:var(--bg); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.player-card .name{ font-family:var(--display); font-weight:600; font-size:18px; line-height:1.2; }
.player-card .handle{ font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:0.05em; }
.player-card .stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.player-card .stat{ background:var(--bg-2); border:1px solid var(--line); padding:8px; text-align:center; }
.player-card .stat .lbl{ font-family:var(--mono); font-size:9px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:2px; }
.player-card .stat .num{ font-family:var(--display); font-size:18px; font-weight:700; color:var(--accent, var(--cyan)); }
.player-card .xp-label{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--text-dim); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; }
.player-card .xp-label .lvl{ color:var(--accent, var(--cyan)); font-weight:700; }
.player-card .xp-bar{ height:8px; background:var(--bg-2); border:1px solid var(--line); position:relative; overflow:hidden; }
.player-card .xp-bar .fill{ height:100%; width:88%; background: linear-gradient(90deg, var(--accent, var(--cyan)), var(--accent2, var(--magenta))); box-shadow:0 0 12px var(--accent, var(--cyan)); position:relative; }
.player-card .xp-bar .fill::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent 0, transparent 4px, color-mix(in srgb, var(--bg) 30%, transparent) 4px, color-mix(in srgb, var(--bg) 30%, transparent) 5px); }

/* ROLL CAROUSEL — EN CARTELERA */
.roll{ padding:60px 32px 20px; max-width:1400px; margin:0 auto; position:relative; z-index:2; }
.roll-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:24px; border-bottom:1px solid var(--line); padding-bottom:18px; }
.roll-head .micro{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:8px; }
.roll-head .micro span{ color:var(--accent, var(--cyan)); }
.roll-head h3{ font-family:var(--display); font-weight:700; font-size:clamp(28px,4vw,48px); line-height:1; }
.roll-live{ font-family:var(--mono); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent, var(--cyan)); border:1px solid var(--accent, var(--cyan)); padding:5px 10px; box-shadow:0 0 10px color-mix(in srgb, var(--accent, var(--cyan)) 25%, transparent); }
.roll-viewport{ overflow:hidden; }
.roll-track{ display:flex; gap:16px; padding:6px 0 14px; width:max-content; animation: rollscroll 55s linear infinite; }
.roll-viewport:hover .roll-track{ animation-play-state:paused; }
@keyframes rollscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.roll-slide{ flex:0 0 auto; width:200px; aspect-ratio:2/3; position:relative; overflow:hidden; border:1px solid var(--line); background:var(--bg-2); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); display:block; }
.roll-slide img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.05) contrast(1.03); transition: transform .5s ease; }
.roll-slide::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 80%, transparent)); pointer-events:none; }
.roll-slide:hover{ transform:translateY(-6px); border-color:var(--accent, var(--cyan)); box-shadow:0 0 24px color-mix(in srgb, var(--accent, var(--cyan)) 40%, transparent); }
.roll-slide:hover img{ transform:scale(1.06); }
.roll-badge{ position:absolute; top:8px; left:8px; z-index:3; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:0.1em; color:var(--bg); background:var(--accent, var(--cyan)); padding:2px 7px; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.roll-play{ position:absolute; bottom:10px; right:10px; z-index:3; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--accent, var(--cyan)); color:var(--accent, var(--cyan)); background: color-mix(in srgb, var(--bg) 60%, transparent); font-size:12px; opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); }
.roll-slide:hover .roll-play{ opacity:1; transform:translateY(0); }
@media (max-width:640px){ .roll{ padding:50px 18px 10px; } .roll-slide{ width:150px; } }

/* MARQUEE */
.marquee{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; overflow:hidden; white-space:nowrap; position:relative; z-index:2; }
.marquee-track{ display:inline-flex; gap:30px; animation: marquee 30s linear infinite; font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:0.15em; align-items:center; color:var(--text-dim); }
.marquee-track .hl{ color:var(--accent, var(--cyan)); }
.marquee-track .hl2{ color:var(--magenta); }
.marquee-track .hl3{ color:var(--acid); }
.marquee-track .sep{ color:var(--text-mute); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* LOADOUT */
.loadout{ padding:100px 32px 50px; text-align:center; position:relative; z-index:2; }
.loadout .label{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:0.25em; text-transform:uppercase; margin-bottom:14px; }
.loadout .label span{ color:var(--accent, var(--cyan)); }
.loadout h2{ font-family:var(--display); font-weight:700; font-size:clamp(36px,5vw,60px); line-height:1; margin-bottom:14px; }
.loadout h2 .neon{ color:var(--accent, var(--cyan)); text-shadow:0 0 18px var(--accent, var(--cyan)); }
.loadout p{ max-width:560px; margin:0 auto 40px; color:var(--text-dim); font-size:14px; }
.loadout-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:760px; margin:0 auto; }
.pill{ padding:12px 20px; background:var(--panel); border:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--text); cursor:none; display:flex; align-items:center; gap:10px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition:all .2s ease; }
.pill .swatch{ width:12px; height:12px; }
.pill[data-set="assault"] .swatch{ background:var(--magenta); box-shadow:0 0 8px var(--magenta); }
.pill[data-set="recon"] .swatch{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.pill[data-set="medic"] .swatch{ background:var(--acid); box-shadow:0 0 8px var(--acid); }
.pill[data-set="ghost"] .swatch{ background:var(--amber); box-shadow:0 0 8px var(--amber); }
.pill:hover{ border-color:var(--accent, var(--cyan)); color:var(--text); }
.pill.active{ background:var(--bg-2); border-color:var(--accent, var(--cyan)); box-shadow:0 0 12px color-mix(in srgb, var(--accent, var(--cyan)) 40%, transparent); }
.pill.active::before{ content:"▶ "; color:var(--accent, var(--cyan)); margin-right:-4px; }

/* VAULT / PLANS */
.vault{ padding:50px 32px 100px; max-width:1400px; margin:0 auto; position:relative; z-index:2; }
.vault-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:40px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.vault-head .title-block .micro{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:8px; }
.vault-head .title-block .micro span{ color:var(--accent, var(--cyan)); }
.vault-head h3{ font-family:var(--display); font-weight:700; font-size:clamp(32px,4vw,52px); line-height:1; }
.vault-head .filters{ display:flex; gap:6px; }
.vault-head .filter{ font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--line); background:var(--bg-2); color:var(--text-dim); cursor:none; }
.vault-head .filter.on{ color:var(--accent, var(--cyan)); border-color:var(--accent, var(--cyan)); }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:1000px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .product-grid{ grid-template-columns:1fr; } }
.product{ background:var(--panel); border:1px solid var(--line); padding:18px; position:relative; cursor:none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); display:block; }
.product::before{ content:""; position:absolute; top:0; right:0; width:20px; height:20px; background:var(--rarity-c, var(--cyan)); clip-path:polygon(100% 0, 0 0, 100% 100%); }
.product::after{ content:""; position:absolute; bottom:0; left:0; width:20px; height:20px; background:var(--rarity-c, var(--cyan)); clip-path:polygon(0 0, 0 100%, 100% 100%); opacity:0.5; }
.product:hover{ transform:translateY(-6px); border-color:var(--rarity-c, var(--cyan)); box-shadow: 0 0 24px color-mix(in srgb, var(--rarity-c, var(--cyan)) 35%, transparent); }
.product[data-rarity="legendary"]{ --rarity-c: var(--amber); }
.product[data-rarity="epic"]{ --rarity-c: var(--magenta); }
.product[data-rarity="rare"]{ --rarity-c: var(--cyan); }
.product[data-rarity="common"]{ --rarity-c: var(--acid); }
.product .top-row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:0.15em; color:var(--text-mute); margin-bottom:12px; }
.product .top-row .rarity{ color:var(--rarity-c); font-weight:700; }
.product .top-row .rarity::before{ content:"◆ "; }
.product .visual{ aspect-ratio:4/3; background:var(--bg); border:1px solid var(--line); margin-bottom:14px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.product .visual::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rarity-c) 20%, transparent), transparent 70%), linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 100%); }
.product .visual::after{ content:""; position:absolute; inset:0; background-image: linear-gradient(color-mix(in srgb, var(--rarity-c) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--rarity-c) 12%, transparent) 1px, transparent 1px); background-size:20px 20px; opacity:.5; }
.product .visual{ perspective:700px; }
.product .big-emoji{ position:relative; z-index:2; font-size:66px; line-height:1; transform-style:preserve-3d; transition: transform .18s ease-out; will-change:transform; filter: drop-shadow(2px 4px 0 rgba(0,0,0,.55)) drop-shadow(5px 9px 0 rgba(0,0,0,.28)) drop-shadow(0 0 18px var(--rarity-c, var(--cyan))); animation: emojiFloat 4.5s ease-in-out infinite; }
@keyframes emojiFloat{ 0%,100%{ transform: translateY(0) rotateX(0deg) rotateY(0deg); } 50%{ transform: translateY(-7px) rotateX(6deg) rotateY(-5deg); } }
.product:nth-child(2) .big-emoji{ animation-delay:-1.2s; }
.product:nth-child(3) .big-emoji{ animation-delay:-2.4s; }
.product:nth-child(4) .big-emoji{ animation-delay:-0.6s; }
.product:nth-child(5) .big-emoji{ animation-delay:-3s; }
.product:nth-child(6) .big-emoji{ animation-delay:-1.8s; }
.product:hover .big-emoji{ animation-play-state:paused; }

/* Real 3D extruded icon (built by JS) */
.product .visual{ perspective:760px; }
.big-emoji.is3d{ display:block; position:relative; width:104px; height:104px; font-size:0; filter:none; transform-style:preserve-3d; animation: spin3d 9s linear infinite; cursor:none; }
.big-emoji.is3d .lyr{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:62px; line-height:1; will-change:transform; }
.big-emoji.is3d .lyr:first-child{ filter: drop-shadow(0 0 16px var(--rarity-c, var(--cyan))); }
@keyframes spin3d{ from{ transform: rotateX(12deg) rotateY(0deg); } to{ transform: rotateX(12deg) rotateY(360deg); } }
.product:hover .big-emoji.is3d{ animation-play-state:paused; }
.product .visual .corner-info{ position:absolute; bottom:8px; left:10px; font-family:var(--pixel); font-size:7px; color:var(--rarity-c); z-index:3; letter-spacing:0.1em; }
.product h4{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-0.01em; margin-bottom:4px; line-height:1.1; color:var(--text); }
.product .subtitle{ font-family:var(--mono); font-size:11px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:14px; }
.product .stats{ background:var(--bg-2); border:1px solid var(--line); padding:10px; margin-bottom:14px; }
.product .stat-line{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; margin-bottom:6px; }
.product .stat-line:last-child{ margin-bottom:0; }
.product .stat-line .k{ color:var(--text-mute); text-transform:uppercase; letter-spacing:0.08em; }
.product .stat-line .v{ color:var(--text); }
.product .stat-line .bar{ display:inline-block; width:60px; height:6px; background:var(--bg); margin-left:6px; position:relative; vertical-align:middle; border:1px solid var(--line-soft); }
.product .stat-line .bar::before{ content:""; position:absolute; top:0; left:0; bottom:0; width:var(--w, 75%); background:var(--rarity-c, var(--cyan)); box-shadow:0 0 6px var(--rarity-c, var(--cyan)); }
.product .row{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:14px; }
.product .price{ font-family:var(--display); font-size:22px; font-weight:700; color:var(--text); }
.product .price s{ font-family:var(--mono); font-size:11px; color:var(--text-mute); margin-right:6px; font-weight:400; }
.product .price .credit{ color:var(--rarity-c); font-size:14px; margin-right:3px; }
.product .buy{ background:transparent; color:var(--text); border:1px solid var(--rarity-c, var(--cyan)); padding:10px 16px; font-family:var(--mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; cursor:none; display:inline-flex; align-items:center; gap:8px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); position:relative; overflow:hidden; font-weight:700; text-decoration:none; }
.product .buy::before{ content:""; position:absolute; inset:0; background:var(--rarity-c, var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; z-index:0; }
.product .buy:hover::before{ transform:scaleX(1); }
.product .buy:hover{ color:var(--bg); }
.product .buy span{ position:relative; z-index:1; }

/* ── PLANES PRICING ────────────────────────────────────────── */
.planes-trust-inline{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.planes-trust-inline span{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:0.08em; }
.planes-trust-inline span::before{ content:"✓ "; color:var(--cyan); }

.planes-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:60px; }
@media(max-width:900px){ .planes-grid{ grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; } }

.plan-card{ background:var(--panel); border:1px solid var(--line); padding:28px 24px; position:relative; display:flex; flex-direction:column; gap:0; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.plan-card:hover{ transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 0 28px color-mix(in srgb,var(--cyan) 22%,transparent); }
.plan-popular{ border-color:var(--amber) !important; background:color-mix(in srgb,var(--amber) 5%,var(--panel)); }
.plan-popular:hover{ border-color:var(--amber) !important; box-shadow:0 0 32px color-mix(in srgb,var(--amber) 28%,transparent) !important; }

.plan-badge{ display:inline-block; background:var(--amber); color:#000; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; padding:4px 10px; margin-bottom:16px; align-self:flex-start; }
.plan-savings-badge{ font-family:var(--mono); font-size:10px; color:var(--acid); letter-spacing:0.08em; margin-bottom:16px; min-height:21px; }
.plan-savings-badge s{ color:var(--text-mute); }
.plan-spacer{ min-height:21px; margin-bottom:16px; }

.plan-name{ font-family:var(--display); font-weight:700; font-size:22px; line-height:1; margin-bottom:14px; color:var(--text); }
.plan-popular .plan-name{ color:var(--amber); }

.plan-price-wrap{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.plan-price{ font-family:var(--display); font-weight:700; font-size:clamp(36px,5vw,52px); line-height:1; color:var(--text); }
.plan-popular .plan-price{ color:var(--amber); }
.plan-period{ font-family:var(--mono); font-size:13px; color:var(--text-mute); }

.plan-equiv{ font-family:var(--mono); font-size:11px; color:var(--cyan); letter-spacing:0.06em; margin-bottom:22px; min-height:16px; }
.plan-popular .plan-equiv{ color:var(--amber); }

.plan-divider{ height:1px; background:var(--line); margin-bottom:20px; }

.plan-features{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:9px; flex:1; }
.plan-features li{ font-family:var(--mono); font-size:11.5px; color:var(--text-dim); letter-spacing:0.04em; display:flex; align-items:flex-start; gap:8px; }
.plan-features li::before{ content:"✓"; color:var(--cyan); font-weight:700; flex-shrink:0; }
.plan-popular .plan-features li::before{ color:var(--amber); }
.plan-features li.muted{ color:var(--text-mute); }
.plan-features li.muted::before{ color:var(--text-mute); }

.plan-cta{ display:block; text-align:center; padding:13px 20px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; border:1px solid var(--cyan); color:var(--text); text-decoration:none; position:relative; overflow:hidden; transition:color .25s ease; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.plan-cta::before{ content:""; position:absolute; inset:0; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; z-index:0; }
.plan-cta:hover::before{ transform:scaleX(1); }
.plan-cta:hover{ color:var(--bg); }
.plan-cta span{ position:relative; z-index:1; }
.plan-popular .plan-cta{ border-color:var(--amber); background:var(--amber); color:#000; clip-path:none; }
.plan-popular .plan-cta::before{ background:color-mix(in srgb,var(--amber) 80%,#fff); }
.plan-popular .plan-cta:hover{ color:#000; }

/* What's included */
.planes-include{ border:1px solid var(--line); padding:32px; margin-bottom:40px; background:var(--bg-2); }
.planes-include-title{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:24px; }
.include-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 24px; }
@media(max-width:700px){ .include-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:440px){ .include-grid{ grid-template-columns:1fr; } }
.include-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; color:var(--text-dim); letter-spacing:0.04em; }
.include-item::before{ content:"⬡"; color:var(--cyan); font-size:10px; flex-shrink:0; }

/* Trial CTA at bottom */
.planes-trial{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; border:1px solid var(--line); padding:22px 28px; background:var(--panel); }
.planes-trial-text{ font-family:var(--mono); font-size:13px; color:var(--text-dim); }
.planes-trial-text strong{ color:var(--cyan); }

/* EFECTO TÚNEL PAGE */
.et-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.et-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.et-back:hover{ color:var(--cyan); }
.et-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.et-icon{ font-size:2rem; }
.et-title{ font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--cyan); margin:0; }
.et-badge{ font-family:var(--mono); font-size:10px; background:rgba(0,240,255,.08); border:1px solid var(--cyan); color:var(--cyan); padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.et-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.et-game-wrap{ background:#05050a; border:1px solid rgba(0,240,255,.14); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.et-game-wrap canvas{ display:block; width:100%; height:auto; cursor:default; }
.et-legend{ display:grid; gap:8px; }
.et-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.et-legend-item span{ font-size:1.1rem; font-weight:700; color:var(--cyan); }

/* ZOMBIES EN EL ESTADIO PAGE */
.ze-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.ze-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.ze-back:hover{ color:var(--cyan); }
.ze-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.ze-icon{ font-size:2rem; }
.ze-title{ font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--cyan); margin:0; }
.ze-badge{ font-family:var(--mono); font-size:10px; background:rgba(170,255,0,.10); border:1px solid var(--acid); color:var(--acid); padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.ze-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.ze-game-wrap{ background:var(--bg); border:1px solid rgba(170,255,0,.12); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.ze-game-wrap canvas{ display:block; width:100%; height:auto; cursor:crosshair; }
.ze-legend{ display:grid; gap:8px; }
.ze-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.ze-legend-item span{ font-size:1.1rem; }

/* PAGO EXITO PAGE */
.pe-page{ min-height:80vh; display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.pe-wrap{ max-width:600px; width:100%; text-align:center; }
.pe-icon{ font-size:72px; line-height:1; margin-bottom:20px; filter:drop-shadow(0 0 20px #00ff88); }
.pe-title{ font-family:var(--mono); font-size:clamp(28px,5vw,46px); color:#00ff88; letter-spacing:2px; text-transform:uppercase; margin:0 0 12px; text-shadow:0 0 24px #00ff8880; }
.pe-sub{ color:var(--text-dim); font-size:15px; margin:0 0 40px; }
.pe-sub strong{ color:var(--text); }
.pe-steps{ text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px 28px; margin-bottom:32px; display:flex; flex-direction:column; gap:20px; }
.pe-step{ display:flex; gap:16px; align-items:flex-start; }
.pe-step-num{ width:32px; height:32px; border-radius:50%; background:#00ff8820; border:2px solid #00ff88; color:#00ff88; font-family:var(--mono); font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pe-step strong{ display:block; color:var(--text); font-size:14px; margin-bottom:4px; }
.pe-step span{ color:var(--text-mute); font-size:13px; }
.pe-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.pe-btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:8px; font-family:var(--mono); font-size:13px; font-weight:700; text-decoration:none; letter-spacing:0.5px; transition:transform .15s, box-shadow .15s; }
.pe-btn--wa{ background:#25d366; color:#000; box-shadow:0 0 20px #25d36640; }
.pe-btn--wa:hover{ transform:translateY(-2px); box-shadow:0 4px 28px #25d36680; }
.pe-btn--tg{ background:#229ed9; color:#fff; box-shadow:0 0 20px #229ed940; }
.pe-btn--tg:hover{ transform:translateY(-2px); box-shadow:0 4px 28px #229ed980; }
.pe-home{ display:inline-block; margin-top:4px; font-family:var(--mono); font-size:11px; color:var(--text-mute); text-decoration:none; }
.pe-home:hover{ color:var(--cyan); }

/* ORBE PREDICTOR PAGE */
.op-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.op-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.op-back:hover{ color:var(--cyan); }
.op-header{ margin-bottom:24px; }
.op-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.op-icon{ font-size:2.2rem; line-height:1; }
.op-title{ font-family:var(--display); font-size:clamp(1.5rem,3.8vw,2.5rem); font-weight:700; letter-spacing:.04em; color:var(--cyan); margin:0; }
.op-badge{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; padding:4px 10px; border-radius:3px; background:rgba(0,240,255,.10); border:1px solid var(--cyan); color:var(--cyan); }
.op-desc{ font-size:13px; color:var(--text-dim); line-height:1.6; max-width:680px; }
.op-form{ margin-bottom:16px; }
.op-teams-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
@media(max-width:580px){ .op-teams-grid{ grid-template-columns:repeat(2,1fr); } }
.op-team-slot{ display:flex; align-items:center; gap:8px; }
.op-num{ font-family:var(--pixel); font-size:11px; color:var(--cyan); min-width:22px; }
.op-input{ flex:1; background:rgba(0,240,255,.06); border:1px solid rgba(0,240,255,.22); border-radius:4px; padding:8px 10px; font-family:var(--mono); font-size:13px; color:var(--text); outline:none; width:100%; }
.op-input:focus{ border-color:var(--cyan); box-shadow:0 0 0 2px rgba(0,240,255,.15); }
.op-input::placeholder{ color:var(--text-mute); }
.op-form-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.op-btn{ font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.08em; padding:10px 22px; border-radius:5px; border:1px solid var(--cyan); background:rgba(0,240,255,.10); color:var(--cyan); cursor:pointer; transition:background .15s; }
.op-btn:hover{ background:rgba(0,240,255,.20); }
.op-error{ font-family:var(--mono); font-size:12px; color:var(--red); display:none; }
.op-canvas-wrap{ background:#03050f; border:1px solid rgba(0,240,255,.14); border-radius:6px; overflow:hidden; }
.op-canvas-wrap canvas{ display:block; width:100%; }
.op-legend{ margin-top:16px; display:flex; flex-direction:column; gap:7px; }
.op-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.op-legend-item span{ font-size:1.1rem; }

/* LESIÓN EN EL TÚNEL PAGE */
.lt-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.lt-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.lt-back:hover{ color:var(--acid); }
.lt-header{ margin-bottom:24px; }
.lt-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.lt-icon{ font-size:2.2rem; line-height:1; }
.lt-title{ font-family:var(--display); font-size:clamp(1.4rem,3.5vw,2.4rem); font-weight:700; letter-spacing:.04em; color:var(--acid); margin:0; }
.lt-badge{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; padding:4px 10px; border-radius:3px; background:rgba(170,255,0,.10); border:1px solid var(--acid); color:var(--acid); }
.lt-desc{ font-size:13px; color:var(--text-dim); line-height:1.6; max-width:660px; }
.lt-game-wrap{ background:#04060d; border:1px solid rgba(170,255,0,.16); border-radius:6px; overflow:hidden; }
.lt-game-wrap canvas{ display:block; width:100%; cursor:crosshair; }
.lt-legend{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.lt-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.lt-legend-item span{ font-size:1.1rem; }

/* ÁRBITRO CORRUPTO PAGE */
.ac-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.ac-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.ac-back:hover{ color:var(--red); }
.ac-header{ margin-bottom:24px; }
.ac-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.ac-icon{ font-size:2.2rem; line-height:1; }
.ac-title{ font-family:var(--display); font-size:clamp(1.5rem,3.8vw,2.5rem); font-weight:700; letter-spacing:.04em; color:var(--red); margin:0; }
.ac-badge{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; padding:4px 10px; border-radius:3px; background:rgba(255,51,85,.10); border:1px solid var(--red); color:var(--red); }
.ac-desc{ font-size:13px; color:var(--text-dim); line-height:1.6; max-width:660px; }
.ac-game-wrap{ background:#04050e; border:1px solid rgba(255,51,85,.16); border-radius:6px; overflow:hidden; }
.ac-game-wrap canvas{ display:block; width:100%; cursor:pointer; }
.ac-legend{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.ac-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.ac-legend-item span{ font-family:var(--mono); font-size:11px; font-weight:700; color:var(--red); min-width:32px; }

/* ESTADIO BUILDER PAGE */
.sb-page{ max-width:1100px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.sb-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.sb-back:hover{ color:var(--acid); }
.sb-header{ margin-bottom:24px; }
.sb-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.sb-icon{ font-size:2.2rem; line-height:1; }
.sb-title{ font-family:var(--display); font-size:clamp(1.6rem,4vw,2.6rem); font-weight:700; letter-spacing:.04em; color:var(--acid); margin:0; }
.sb-badge{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em; padding:4px 10px; border-radius:3px; background:rgba(170,255,0,.10); border:1px solid var(--acid); color:var(--acid); }
.sb-desc{ font-size:13px; color:var(--text-dim); line-height:1.6; max-width:660px; }
.sb-wrap{ display:flex; gap:0; border:1px solid rgba(170,255,0,.16); border-radius:6px; overflow:hidden; background:#04060d; }
.sb-wrap canvas{ display:block; flex:1 1 auto; min-width:0; }
.sb-sidebar{ width:192px; flex:0 0 192px; background:#060810; border-left:1px solid rgba(170,255,0,.12); padding:14px 10px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; }
.sb-sec{ display:flex; flex-direction:column; gap:6px; }
.sb-sec-title{ font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--text-mute); text-transform:uppercase; margin-bottom:2px; }
.sb-palette{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.sb-pb{ border:1px solid rgba(255,255,255,.14); border-radius:4px; width:100%; aspect-ratio:1; cursor:pointer; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:2px; overflow:hidden; transition:border-color .15s; }
.sb-pb span{ font-family:var(--mono); font-size:8px; color:#fff; text-shadow:0 0 4px #000; line-height:1.2; text-align:center; background:rgba(0,0,0,.45); padding:1px 2px; border-radius:2px; width:100%; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sb-pb:hover{ border-color:rgba(255,255,255,.5); }
.sb-pb-sel{ border-color:#fff!important; box-shadow:0 0 8px rgba(255,255,255,.35); }
.sb-controls{ flex-direction:row!important; flex-wrap:wrap; gap:4px!important; }
.sb-btn{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.06em; padding:5px 8px; border-radius:4px; border:1px solid rgba(170,255,0,.25); background:rgba(170,255,0,.08); color:var(--acid); cursor:pointer; flex:1 1 auto; text-align:center; transition:background .15s; }
.sb-btn:hover{ background:rgba(170,255,0,.18); }
.sb-btn-danger{ border-color:rgba(255,51,85,.25)!important; background:rgba(255,51,85,.07)!important; color:var(--red)!important; }
.sb-btn-danger:hover{ background:rgba(255,51,85,.18)!important; }
.sb-rating-lbl{ font-family:var(--mono); font-size:10px; color:var(--acid); font-weight:700; line-height:1.3; }
.sb-rating-track{ height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.sb-rating-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--acid),var(--amber)); border-radius:3px; transition:width .4s; }
.sb-stats{ font-family:var(--mono); font-size:10px; color:var(--text-mute); line-height:1.7; }
.sb-hints{ gap:4px!important; }
.sb-hints div{ font-family:var(--mono); font-size:9.5px; color:var(--text-mute); line-height:1.4; }
.sb-hints strong{ color:var(--text-dim); }
@media(max-width:640px){ .sb-wrap{ flex-direction:column; } .sb-sidebar{ width:100%; flex:0 0 auto; border-left:none; border-top:1px solid rgba(170,255,0,.12); flex-direction:row; flex-wrap:wrap; } .sb-sec{ min-width:130px; } }

/* CABEZA DE ORO PAGE */
.cz-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.cz-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.cz-back:hover{ color:var(--cyan); }
.cz-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.cz-icon{ font-size:2rem; }
.cz-title{ font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--cyan); margin:0; }
.cz-badge{ font-family:var(--mono); font-size:10px; background:rgba(0,240,255,.10); border:1px solid var(--cyan); color:var(--cyan); padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.cz-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.cz-game-wrap{ background:#04050e; border:1px solid rgba(0,240,255,.16); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.cz-game-wrap canvas{ display:block; width:100%; height:auto; cursor:crosshair; }
.cz-legend{ display:grid; gap:8px; }
.cz-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.cz-legend-item span{ font-size:1.1rem; font-weight:700; color:var(--cyan); }

/* RUTA AL MUNDIAL PAGE */
.rm-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.rm-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.rm-back:hover{ color:var(--amber); }
.rm-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.rm-icon{ font-size:2rem; }
.rm-title{ font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--amber); margin:0; }
.rm-badge{ font-family:var(--mono); font-size:10px; background:rgba(255,179,0,.12); border:1px solid var(--amber); color:var(--amber); padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.rm-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.rm-game-wrap{ background:#04050f; border:1px solid rgba(255,179,0,.16); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.rm-game-wrap canvas{ display:block; width:100%; height:auto; cursor:pointer; }
.rm-legend{ display:grid; gap:8px; }
.rm-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.rm-legend-item span{ font-size:1.1rem; font-weight:700; color:var(--amber); }

/* CONCENTRACIÓN DEL EQUIPO PAGE */
.co-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.co-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.co-back:hover{ color:var(--acid); }
.co-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.co-icon{ font-size:2rem; }
.co-title{ font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--acid); margin:0; }
.co-badge{ font-family:var(--mono); font-size:10px; background:rgba(170,255,0,.10); border:1px solid var(--acid); color:var(--acid); padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.co-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.co-game-wrap{ background:#05060e; border:1px solid rgba(170,255,0,.14); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.co-game-wrap canvas{ display:block; width:100%; height:auto; cursor:pointer; }
.co-legend{ display:grid; gap:8px; }
.co-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.co-legend-item span{ font-size:1.1rem; font-weight:700; color:var(--acid); }

/* COMENTARISTA EN CRISIS PAGE */
.cm-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.cm-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.cm-back:hover{ color:var(--cyan); }
.cm-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.cm-icon{ font-size:2rem; }
.cm-title{ font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--cyan); margin:0; }
.cm-badge{ font-family:var(--mono); font-size:10px; background:rgba(204,0,0,.14); border:1px solid #cc2222; color:#ff5555; padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.cm-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.cm-game-wrap{ background:#07070f; border:1px solid rgba(0,240,255,.14); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.cm-game-wrap canvas{ display:block; width:100%; height:auto; cursor:pointer; }
.cm-legend{ display:grid; gap:8px; }
.cm-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.cm-legend-item span{ font-size:1.1rem; font-weight:700; color:var(--cyan); }

/* ENTRENADOR TÁCTICO PAGE */
.ta-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.ta-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.ta-back:hover{ color:var(--cyan); }
.ta-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.ta-icon{ font-size:2rem; }
.ta-title{ font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--cyan); margin:0; }
.ta-badge{ font-family:var(--mono); font-size:10px; background:rgba(170,255,0,.10); border:1px solid var(--acid); color:var(--acid); padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.ta-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.ta-game-wrap{ background:#07080f; border:1px solid rgba(170,255,0,.14); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.ta-game-wrap canvas{ display:block; width:100%; height:auto; cursor:pointer; }
.ta-legend{ display:grid; gap:8px; }
.ta-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.ta-legend-item span{ font-size:1.1rem; font-weight:700; color:var(--acid); }

/* BARRERA HUMANA PAGE */
.bh-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.bh-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.bh-back:hover{ color:var(--cyan); }
.bh-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.bh-icon{ font-size:2rem; }
.bh-title{ font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--cyan); margin:0; }
.bh-badge{ font-family:var(--mono); font-size:10px; background:rgba(255,80,80,.10); border:1px solid #ff4444; color:#ff6666; padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.bh-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.bh-game-wrap{ background:#07080f; border:1px solid rgba(255,80,80,.16); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.bh-game-wrap canvas{ display:block; width:100%; height:auto; cursor:pointer; }
.bh-legend{ display:grid; gap:8px; }
.bh-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.bh-legend-item span{ font-size:1.1rem; font-weight:700; color:#ff6666; }

/* VAR SIMULATOR PAGE */
.var-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.var-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.var-back:hover{ color:var(--cyan); }
.var-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.var-icon{ font-size:2rem; }
.var-title{ font-family:var(--display); font-size:clamp(1.5rem,4.5vw,2.6rem); color:var(--cyan); margin:0; }
.var-badge{ font-family:var(--mono); font-size:10px; background:rgba(0,240,255,.08); border:1px solid var(--cyan); color:var(--cyan); padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.var-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.var-game-wrap{ background:#07070d; border:1px solid rgba(0,240,255,.14); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.var-game-wrap canvas{ display:block; width:100%; height:auto; cursor:default; }
.var-legend{ display:grid; gap:8px; }
.var-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.var-legend-item span{ font-size:1.1rem; font-weight:700; color:var(--cyan); }

/* SIMULADOR DRAMÁTICO PAGE */
.sd-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.sd-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; text-decoration:none; }
.sd-back:hover{ color:var(--cyan); }
.sd-title-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.sd-icon{ font-size:2rem; }
.sd-title{ font-family:var(--display); font-size:clamp(1.6rem,5vw,2.8rem); color:var(--cyan); margin:0; }
.sd-badge{ font-family:var(--mono); font-size:10px; background:rgba(255,46,154,.12); border:1px solid var(--red); color:var(--red); padding:4px 10px; border-radius:4px; text-transform:uppercase; letter-spacing:.06em; }
.sd-desc{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin:0 0 24px; max-width:620px; line-height:1.7; }
.sd-game-wrap{ background:var(--bg); border:1px solid rgba(0,240,255,.12); border-radius:8px; overflow:hidden; margin-bottom:28px; }
.sd-game-wrap canvas{ display:block; width:100%; height:auto; cursor:crosshair; }
.sd-legend{ display:grid; gap:8px; }
.sd-legend-item{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--text-mute); }
.sd-legend-item span{ font-size:1.1rem; }

/* EL AUTOBÚS PAGE */
.ab-page{ max-width:920px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.ab-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; }
.ab-back:hover{ color:var(--cyan); }
.ab-title-row{ display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
.ab-icon{ font-size:32px; }
.ab-title{ font-family:var(--display); font-size:clamp(1.8rem,5vw,3rem); font-weight:700; letter-spacing:.06em; color:var(--text); }
.ab-badge{ font-family:var(--pixel); font-size:8px; color:var(--magenta); border:1px solid var(--magenta); padding:3px 8px; align-self:center; }
.ab-desc{ font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-bottom:22px; }
.ab-game-wrap{ background:#000; border:1px solid var(--line); margin-bottom:18px; line-height:0; }
.ab-game-wrap canvas{ display:block; width:100%; height:auto; cursor:crosshair; }
.ab-legend{ display:flex; flex-wrap:wrap; gap:10px; }
.ab-legend-item{ font-family:var(--mono); font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:7px; border:1px solid var(--line); padding:7px 12px; }

/* FUTBOL ARENA PAGE */
.fa-page{ max-width:900px; margin:0 auto; padding:90px 20px 60px; position:relative; z-index:2; }
.fa-back{ font-family:var(--mono); font-size:11px; color:var(--text-mute); display:inline-block; margin-bottom:18px; }
.fa-back:hover{ color:var(--cyan); }
.fa-title-row{ display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
.fa-icon{ font-size:32px; }
.fa-title{ font-family:var(--display); font-size:clamp(1.8rem,5vw,3rem); font-weight:700; letter-spacing:.06em; color:var(--text); }
.fa-badge{ font-family:var(--pixel); font-size:8px; color:var(--acid); border:1px solid var(--acid); padding:3px 8px; align-self:center; }
.fa-desc{ font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-bottom:22px; }
.fa-game-wrap{ background:#000; border:1px solid var(--line); position:relative; margin-bottom:20px; line-height:0; }
.fa-game-wrap canvas{ display:block; width:100%; height:auto; cursor:default; }
.fa-touch-controls{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:rgba(0,0,0,0.7); border-top:1px solid var(--line); }
@media(min-width:700px){ .fa-touch-controls{ display:none; } }
.fa-btn{ background:var(--panel); border:1px solid var(--line); color:var(--text); font-family:var(--display); font-size:13px; font-weight:700; padding:12px 22px; cursor:pointer; user-select:none; -webkit-user-select:none; }
.fa-btn:active{ background:var(--bg-3); }
.fa-btn-jump{ background:rgba(0,240,255,.1); border-color:var(--cyan); color:var(--cyan); flex:1; margin:0 10px; }
.fa-legend{ display:flex; flex-wrap:wrap; gap:10px; }
.fa-legend-item{ font-family:var(--mono); font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:7px; border:1px solid var(--line); padding:7px 12px; }
.fa-lbadge{ font-size:14px; }
.fa-lbadge.good{ filter:drop-shadow(0 0 4px #ffaa00); }
.fa-lbadge.bad{ filter:drop-shadow(0 0 4px #aa00ff); }

/* PAGO PAGE */
.pago-page{ max-width:900px; margin:0 auto; padding:100px 24px 80px; position:relative; z-index:2; }
.pago-breadcrumb{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.08em; margin-bottom:32px; }
.pago-breadcrumb a{ color:var(--text-mute); }
.pago-breadcrumb a:hover{ color:var(--cyan); }
.pago-breadcrumb .sep{ margin:0 8px; color:var(--line); }
.pago-header{ text-align:center; margin-bottom:36px; }
.pago-title{ font-family:var(--display); font-size:clamp(2.4rem,6vw,4rem); font-weight:700; letter-spacing:.06em; color:var(--text); margin-bottom:10px; }
.pago-subtitle{ font-family:var(--mono); font-size:14px; color:var(--text-dim); }
.pago-subtitle strong{ color:var(--cyan); }

/* Plan bar */
.pago-plan-bar{ display:flex; align-items:center; gap:16px; border:1px solid var(--cyan); background:rgba(0,240,255,.04); padding:14px 20px; margin-bottom:36px; }
.pago-plan-emoji{ font-size:24px; line-height:1; }
.pago-plan-info{ flex:1; display:flex; flex-direction:column; gap:2px; }
.pago-plan-name{ font-family:var(--display); font-size:15px; font-weight:700; color:var(--text); }
.pago-plan-period{ font-family:var(--mono); font-size:11px; color:var(--text-mute); }
.pago-plan-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.pago-plan-tag{ font-family:var(--pixel); font-size:8px; color:var(--amber); border:1px solid var(--amber); padding:2px 6px; }
.pago-plan-price{ font-family:var(--display); font-size:20px; font-weight:700; color:var(--cyan); }

/* Methods label */
.pago-methods-label{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }

/* Method cards */
.pago-methods{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:56px; }
@media(max-width:620px){ .pago-methods{ grid-template-columns:1fr; } }

.pago-method{ border:1px solid var(--line); background:var(--panel); padding:28px 24px; display:flex; flex-direction:column; gap:18px; position:relative; transition:border-color .2s; }
.pago-method:hover{ border-color:var(--accent, var(--cyan)); }
.pago-pp{ border-top:2px solid #009cde; }
.pago-wa{ border-top:2px solid #25d366; }

.pago-method-top{ display:flex; align-items:center; justify-content:space-between; }
.pago-method-icon{ width:40px; height:40px; }
.pago-method-icon svg{ width:100%; height:100%; }

.pago-method-badge{ font-family:var(--pixel); font-size:7px; padding:3px 7px; letter-spacing:.05em; }
.pago-pp .pago-method-badge{ color:#009cde; border:1px solid #009cde; }
.pago-badge-wa{ color:#25d366; border:1px solid #25d366; }

.pago-method-name{ font-family:var(--display); font-size:20px; font-weight:700; color:var(--text); letter-spacing:.04em; }
.pago-method-desc{ font-family:var(--mono); font-size:12px; color:var(--text-dim); line-height:1.7; }
.pago-method-desc strong{ color:var(--text); }

.pago-method-features{ list-style:none; display:flex; flex-direction:column; gap:7px; }
.pago-method-features li{ font-family:var(--mono); font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:8px; }
.pago-method-features .ok{ color:var(--acid); font-size:11px; }

.pago-method-btn{ margin-top:auto; display:flex; align-items:center; justify-content:center; gap:9px; padding:14px 20px; font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.06em; border:none; cursor:pointer; text-decoration:none; transition:filter .2s, transform .1s; }
.pago-method-btn:hover{ filter:brightness(1.15); transform:translateY(-1px); }
.pago-method-btn:active{ transform:translateY(0); }
.pago-btn-pp{ background:linear-gradient(90deg,#003087,#009cde); color:#fff; }
.pago-btn-wa{ background:linear-gradient(90deg,#128c7e,#25d366); color:#fff; }

/* PayPal notice + contact buttons */
.pago-pp-notice{ display:flex; align-items:flex-start; gap:12px; background:rgba(255,51,85,.08); border:2px solid var(--red); padding:16px 18px; }
.pago-pp-notice-icon{ font-size:26px; flex-shrink:0; line-height:1.2; }
.pago-pp-notice-text{ display:flex; flex-direction:column; gap:6px; }
.pago-pp-notice-text strong{ font-family:var(--display); font-size:15px; color:var(--red); font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.pago-pp-notice-text span{ font-family:var(--mono); font-size:12px; color:var(--text); line-height:1.7; }
.pago-pp-notice-text em{ color:var(--acid); font-style:normal; font-weight:700; }
.pago-contact-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pago-contact-btn{ display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 10px; font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.05em; border:none; cursor:pointer; text-decoration:none; transition:filter .2s, transform .1s; }
.pago-contact-btn:hover{ filter:brightness(1.15); transform:translateY(-1px); }
.pago-cbt-wa{ background:linear-gradient(90deg,#128c7e,#25d366); color:#fff; }
.pago-cbt-tg{ background:linear-gradient(90deg,#1a7ab5,#229ed9); color:#fff; }

/* How it works */
.pago-how{ margin-bottom:40px; }
.pago-how-title{ font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; }
.pago-steps{ display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; }
.pago-step{ flex:1; min-width:160px; display:flex; flex-direction:column; gap:8px; padding:20px 16px; border:1px solid var(--line); background:var(--bg-2); }
.pago-step-num{ font-family:var(--pixel); font-size:9px; color:var(--cyan); }
.pago-step-body{ display:flex; flex-direction:column; gap:5px; }
.pago-step-body strong{ font-family:var(--display); font-size:13px; color:var(--text); font-weight:700; }
.pago-step-body span{ font-family:var(--mono); font-size:11px; color:var(--text-mute); line-height:1.6; }
.pago-step-body em{ color:var(--cyan); font-style:normal; }
.pago-step-final{ border-color:var(--cyan); background:rgba(0,240,255,.04); }
.pago-step-final .pago-step-num{ color:var(--acid); }
.pago-step-arrow{ padding:20px 6px; font-size:18px; color:var(--text-mute); align-self:center; flex:none; }
@media(max-width:640px){ .pago-step-arrow{ display:none; } .pago-step{ min-width:100%; } }

/* Guarantee */
.pago-guarantee{ display:flex; align-items:center; gap:20px; border:1px solid var(--acid); background:rgba(170,255,0,.04); padding:22px 24px; margin-bottom:40px; }
.pago-g-icon{ font-size:32px; flex-shrink:0; }
.pago-g-text{ display:flex; flex-direction:column; gap:4px; }
.pago-g-text strong{ font-family:var(--display); font-size:15px; color:var(--acid); font-weight:700; }
.pago-g-text span{ font-family:var(--mono); font-size:12px; color:var(--text-dim); }

/* Back link */
.pago-back{ font-family:var(--mono); font-size:12px; }
.pago-back a{ color:var(--text-mute); }
.pago-back a:hover{ color:var(--cyan); }

/* LORE */
.lore{ padding:120px 32px; position:relative; z-index:2; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); }
.lore-inner{ max-width:1000px; margin:0 auto; background:var(--panel); border:1px solid var(--line); padding:36px; position:relative; }
.lore-inner::before{ content:"// lore.txt"; position:absolute; top:-1px; left:30px; background:var(--bg-2); color:var(--accent, var(--cyan)); padding:0 12px; font-family:var(--mono); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; transform:translateY(-50%); }
.term-line{ font-family:var(--mono); font-size:13px; color:var(--text-dim); margin-bottom:8px; display:flex; gap:10px; }
.term-line .prompt{ color:var(--accent, var(--cyan)); flex-shrink:0; }
.term-line .cmd{ color:var(--text); }
.lore p{ font-family:var(--display); font-weight:500; font-size:clamp(22px,2.4vw,32px); line-height:1.35; margin:24px 0; color:var(--text); }
.lore p .hl{ color:var(--accent, var(--cyan)); text-shadow:0 0 10px var(--accent, var(--cyan)); }
.lore p .strike{ background:var(--magenta); color:var(--bg); padding:0 8px; }
.lore-sig{ font-family:var(--mono); font-size:12px; color:var(--text-mute); letter-spacing:0.15em; text-transform:uppercase; margin-top:30px; padding-top:18px; border-top:1px dashed var(--line); }
.lore-sig span{ color:var(--accent, var(--cyan)); }

/* REVIEWS */
.reviews{ padding:120px 32px; max-width:1300px; margin:0 auto; position:relative; z-index:2; }
.reviews-head{ text-align:center; margin-bottom:50px; }
.reviews-head .label{ font-family:var(--mono); font-size:11px; letter-spacing:0.25em; color:var(--accent, var(--cyan)); text-transform:uppercase; margin-bottom:14px; }
.reviews-head h3{ font-family:var(--display); font-weight:700; font-size:clamp(36px,5vw,60px); line-height:1; }
.reviews-head .sub{ font-family:var(--mono); font-size:14px; color:var(--text-dim); margin-top:10px; }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .review-grid{ grid-template-columns:1fr; } }
.review{ background:var(--panel); border:1px solid var(--line); padding:20px; position:relative; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.review .who{ display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.review .avatar{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:18px; color:var(--bg); }
.review .a1{ background:var(--cyan); }
.review .a2{ background:var(--magenta); }
.review .a3{ background:var(--acid); }
.review .name{ font-family:var(--display); font-weight:600; font-size:15px; }
.review .role{ font-family:var(--mono); font-size:10px; color:var(--text-mute); letter-spacing:0.1em; text-transform:uppercase; }
.review .rank{ margin-left:auto; font-family:var(--mono); font-size:10px; padding:3px 8px; border:1px solid var(--line); text-transform:uppercase; letter-spacing:0.1em; }
.review .r-diamond{ color:var(--cyan); border-color:var(--cyan); }
.review .r-gold{ color:var(--amber); border-color:var(--amber); }
.review .r-plat{ color:var(--magenta); border-color:var(--magenta); }
.review .stars{ font-family:var(--mono); font-size:12px; color:var(--amber); margin-bottom:8px; letter-spacing:0.1em; }
.review p{ font-family:var(--mono); font-size:13px; color:var(--text-dim); line-height:1.55; }

/* CTA */
.cta{ padding:120px 32px; text-align:center; border-top:1px solid var(--line); position:relative; overflow:hidden; z-index:2; }
.cta::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent, var(--cyan)) 30%, transparent), transparent 60%); pointer-events:none; }
.cta .label{ font-family:var(--mono); font-size:11px; color:var(--accent, var(--cyan)); letter-spacing:0.3em; text-transform:uppercase; margin-bottom:18px; position:relative; z-index:2; }
.cta h2{ font-family:var(--display); font-weight:700; font-size:clamp(46px,8vw,110px); line-height:0.9; letter-spacing:-0.02em; position:relative; z-index:2; }
.cta h2 .neon{ color:var(--accent, var(--cyan)); text-shadow:0 0 25px var(--accent, var(--cyan)); }
.cta .tagline{ font-family:var(--mono); font-size:14px; color:var(--text-dim); margin:24px 0 36px; position:relative; z-index:2; }
.cta-form{ max-width:520px; margin:0 auto; display:flex; gap:0; position:relative; z-index:2; background:var(--panel); border:1px solid var(--accent, var(--cyan)); box-shadow: 0 0 24px color-mix(in srgb, var(--accent, var(--cyan)) 30%, transparent); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.cta-form input{ flex:1; background:transparent; border:none; padding:18px 20px; font-family:var(--mono); font-size:13px; color:var(--text); letter-spacing:0.05em; outline:none; }
.cta-form input::placeholder{ color:var(--text-mute); }
.cta-form button{ background:var(--accent, var(--cyan)); color:var(--bg); border:none; padding:18px 28px; font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; cursor:none; }
.cta-note{ margin-top:20px; font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:0.1em; position:relative; z-index:2; }

/* FOOTER */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--line); padding:50px 32px 24px; position:relative; z-index:2; }
.foot-grid{ max-width:1300px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
@media (max-width:780px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-brand h4{ font-family:var(--display); font-weight:700; font-size:30px; margin-bottom:14px; }
.foot-brand h4 .br{ color:var(--accent, var(--cyan)); }
.foot-brand p{ font-family:var(--mono); font-size:12px; color:var(--text-dim); max-width:300px; line-height:1.6; }
.foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent, var(--cyan)); margin-bottom:18px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.foot-col a{ display:block; color:var(--text-dim); text-decoration:none; font-family:var(--mono); font-size:13px; margin-bottom:8px; transition: color .2s, transform .2s; }
.foot-col a:hover{ color:var(--accent, var(--cyan)); transform:translateX(4px); }
.foot-col a::before{ content:"› "; color:var(--text-mute); }
.foot-bottom{ border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:0.1em; text-transform:uppercase; }

/* TOAST */
.toast{ position:fixed; top:80px; right:30px; background:var(--panel); border:1px solid var(--accent, var(--cyan)); padding:14px 18px 14px 14px; z-index:10001; display:flex; align-items:center; gap:14px; min-width:300px; box-shadow:0 0 30px color-mix(in srgb, var(--accent, var(--cyan)) 50%, transparent); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transform:translateX(calc(100% + 40px)); transition: transform .4s cubic-bezier(.2,.9,.3,1.3); }
.toast.show{ transform:translateX(0); }
.toast .icon{ width:40px; height:40px; background:var(--accent, var(--cyan)); color:var(--bg); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:22px; clip-path:polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.toast .label{ font-family:var(--mono); font-size:10px; color:var(--accent, var(--cyan)); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:2px; }
.toast .text{ font-family:var(--display); font-weight:600; font-size:14px; color:var(--text); }

/* WHATSAPP FLOAT */
.wa-float{ position:fixed; right:20px; bottom:20px; z-index:10001; width:56px; height:56px; background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; border:1px solid #25d366; box-shadow:0 0 22px rgba(37,211,102,.6); animation:wapulse 2.4s infinite; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.wa-float svg{ width:30px; height:30px; fill:currentColor; }
@keyframes wapulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); } 50%{ box-shadow:0 0 0 13px rgba(37,211,102,0); } }

/* SOUND TOGGLE */
.sound-toggle{ position:fixed; left:20px; bottom:20px; z-index:10001; width:48px; height:48px; background:var(--panel); border:1px solid var(--accent,var(--cyan)); color:var(--text); font-size:18px; cursor:none; display:flex; align-items:center; justify-content:center; box-shadow:0 0 14px color-mix(in srgb, var(--accent,var(--cyan)) 30%, transparent); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition:all .2s ease; }
.sound-toggle:hover{ background: color-mix(in srgb, var(--accent,var(--cyan)) 16%, transparent); }
.sound-toggle.off{ opacity:.55; border-color:var(--line); box-shadow:none; }
@supports(padding:max(0px)){ .sound-toggle{ left:max(20px,env(safe-area-inset-left)); bottom:max(20px,env(safe-area-inset-bottom)); } }

/* REVEAL */
.reveal{ opacity:0; transform:translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* BLOG */
.post-wrap{ max-width:780px; margin:130px auto 60px; background:var(--panel); border:1px solid var(--line); padding:34px; position:relative; z-index:2; }
.post-wrap h1{ font-family:var(--display); font-weight:700; font-size:clamp(28px,5vw,48px); line-height:1; margin-bottom:10px; }
.post-meta{ font-family:var(--mono); font-size:12px; color:var(--accent,var(--cyan)); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.post-content{ font-family:var(--mono); font-size:15px; line-height:1.7; color:var(--text-dim); }
.post-content h2{ font-family:var(--display); font-size:26px; color:var(--text); margin:26px 0 10px; }
.post-content p{ margin-bottom:14px; }
.post-content a{ color:var(--accent,var(--cyan)); }
.post-content ul,.post-content ol{ margin:0 0 14px 22px; }
.post-content li{ margin-bottom:6px; }
.post-content strong{ color:var(--text); }
.post-table{ overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); -webkit-overflow-scrolling:touch; }
.post-table table{ width:100%; border-collapse:collapse; min-width:360px; }
.post-table th,.post-table td{ padding:10px 12px; text-align:left; border:1px solid var(--line); font-size:13px; }
.post-table th{ background:var(--bg-3); color:var(--accent,var(--cyan)); font-family:var(--display); text-transform:uppercase; }
.post-table td:first-child{ color:var(--text); }
.post-cover{ margin:0 -34px 22px; border-bottom:1px solid var(--accent,var(--cyan)); }
.post-cover img{ width:100%; display:block; }

/* In-article IPTV pass box */
.post-cta-box{ background:var(--bg-2); border:1px solid var(--accent,var(--cyan)); padding:24px; margin:30px 0; box-shadow:0 0 22px color-mix(in srgb, var(--accent,var(--cyan)) 22%, transparent); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.pcb-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent,var(--cyan)); }
.post-cta-box h3{ font-family:var(--display); font-weight:700; font-size:24px; color:var(--text); margin:6px 0 8px; }
.post-cta-box p{ color:var(--text-dim); font-size:14px; margin-bottom:16px; }
.post-cta-box strong{ color:var(--text); }
.pcb-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.post-cta-box .pcb-plan{ display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid var(--line); padding:16px 10px; color:var(--text); text-decoration:none; position:relative; transition:all .2s; background:var(--panel); }
.post-cta-box .pcb-plan:hover{ border-color:var(--accent,var(--cyan)); transform:translateY(-3px); box-shadow:0 0 16px color-mix(in srgb, var(--accent,var(--cyan)) 30%, transparent); }
.post-cta-box .pcb-plan.feat{ border-color:var(--accent,var(--cyan)); }
.post-cta-box .pcb-plan b{ font-family:var(--display); font-size:18px; }
.post-cta-box .pcb-plan span{ font-family:var(--display); font-weight:700; font-size:30px; color:var(--accent,var(--cyan)); line-height:1; }
.post-cta-box .pcb-plan i{ font-size:10px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.1em; font-style:normal; }
.post-cta-box .pcb-plan em{ position:absolute; top:-11px; background:var(--accent,var(--cyan)); color:var(--bg); font-family:var(--mono); font-size:10px; padding:2px 8px; text-transform:uppercase; font-style:normal; font-weight:700; }
.post-cta-box .pcb-trial{ display:inline-block; background:var(--accent,var(--cyan)); color:var(--bg); font-family:var(--mono); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.12em; padding:12px 22px; text-decoration:none; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
@media(max-width:560px){ .pcb-plans{ grid-template-columns:1fr; } .post-cover{ margin:0 -20px 18px; } .post-wrap{ padding:20px; } }
/* Blog card cover */
.product .card-cover img{ width:100%; aspect-ratio:1200/630; object-fit:cover; display:block; border:1px solid var(--line); margin-bottom:12px; }
.blog-wrap{ max-width:1300px; margin:130px auto 60px; padding:0 32px; position:relative; z-index:2; }
.blog-wrap h1{ font-family:var(--display); font-weight:700; font-size:clamp(34px,6vw,64px); margin-bottom:30px; }

/* TOUCH */
@media (hover: none){ body{ cursor:auto; } .cursor{ display:none; } button,a,.pill,.product{ cursor:pointer !important; } }

/* RESPONSIVE */
@media (max-width:960px){
  nav{ padding:14px 18px; }
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--bg-2); border-bottom:1px solid var(--line); padding:8px 18px 16px; }
  nav.open .nav-links{ display:flex; }
  .nav-links a{ padding:13px 0; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:flex; }
  .cart-btn{ display:none; }
}
@media (max-width:640px){
  .statusbar{ padding:6px 14px; font-size:10px; }
  .statusbar .item.opt{ display:none; }
  .hero{ padding:130px 18px 50px; }
  .vault, .reviews{ padding-left:18px; padding-right:18px; }
}
@supports(padding:max(0px)){
  .wa-float{ right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); }
}
input,select,textarea{ font-size:16px; }
/* iOS / app safe areas (notch + home bar) */
@supports (padding: max(0px)){
  .statusbar{ padding-top:max(6px, env(safe-area-inset-top)); padding-left:max(24px, env(safe-area-inset-left)); padding-right:max(24px, env(safe-area-inset-right)); }
  nav{ top: calc(30px + env(safe-area-inset-top)); padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
  .hero{ padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
  .nav-links{ padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
}
@media (max-width:640px){
  .hero h1{ font-size: clamp(42px, 13vw, 70px); }
  .lore{ padding:80px 18px; }
  .lore-inner{ padding:24px 18px; }
  .reviews{ padding:80px 18px; }
  .cta{ padding:90px 18px; }
}
@media (max-width:420px){
  .foot-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; }
  .reveal{ opacity:1; transform:none; }
  body::before{ animation:none; }
  .roll-track{ animation:none; }
}

/* ═══════════════════════════════════════════════════════
   ¿QUIÉN GANARÁ EL PARTIDO? — EL ORÁCULO 3D + TEAM PICKER
   ═══════════════════════════════════════════════════════ */
.match-predictor{
  padding:50px 32px 80px;
  max-width:1400px;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.match-predictor .vault-head{ margin-bottom:20px; }
.mp-badge{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--accent,var(--cyan));
  border:1px solid var(--accent,var(--cyan));
  padding:5px 14px;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  white-space:nowrap;
  align-self:center;
}
.mp-sub{
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--text-dim);
  letter-spacing:0.06em;
  margin:0 0 36px;
  max-width:520px;
}

/* ── Team Picker ── */
.mp-picker{
  margin-bottom:28px;
}
.mp-pick-label{
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:14px;
}
.mp-slots{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.mp-slot{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  background:var(--panel);
  border:1px solid var(--line);
  cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  min-width:180px;
  position:relative;
}
.mp-slot.active{
  border-color:var(--accent,var(--cyan));
  box-shadow:0 0 14px color-mix(in srgb,var(--accent,var(--cyan)) 30%,transparent);
}
.mp-slot.filled{ border-color:rgba(0,240,255,0.35); }
.mp-slot-a.active{ border-color:var(--cyan); box-shadow:0 0 14px rgba(0,240,255,.3); }
.mp-slot-b.active{ border-color:var(--magenta); box-shadow:0 0 14px rgba(255,46,154,.3); }
.mp-slot-flag{ width:40px; height:29px; flex-shrink:0; }
.mp-slot-flag img{ width:40px; height:29px; object-fit:cover; border-radius:2px; display:block; }
.mp-slot-name{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text);
  flex:1;
}
.mp-slot-arrow{
  font-size:0.7rem;
  color:var(--text-mute);
  transition:color .2s;
}
.mp-slot.active .mp-slot-arrow{ color:var(--accent,var(--cyan)); }
.mp-vs-sep{
  font-family:var(--pixel);
  font-size:0.75rem;
  color:var(--text-mute);
  letter-spacing:0.15em;
  padding:0 4px;
  flex-shrink:0;
}

/* Search filter */
.mp-search-wrap{
  margin-bottom:10px;
}
.mp-filter-input{
  width:100%;
  padding:9px 14px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  outline:none;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition:border-color .18s,box-shadow .18s;
}
.mp-filter-input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 10px rgba(0,240,255,.2);
}
.mp-filter-input::placeholder{ color:rgba(255,255,255,0.28); }

/* Mute toggle */
.mp-btn-mute{
  position:absolute;
  top:10px;
  right:12px;
  z-index:25;
  background:rgba(3,3,10,0.7);
  border:1px solid var(--line);
  color:var(--text);
  font-size:16px;
  width:34px;
  height:34px;
  line-height:1;
  cursor:pointer;
  transition:border-color .18s,background .18s;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
}
.mp-btn-mute:hover{ border-color:var(--cyan); background:rgba(0,240,255,0.1); }

/* REC button */
.mp-btn-rec{
  position:absolute;
  top:10px;
  left:12px;
  z-index:25;
  background:rgba(3,3,10,0.7);
  border:1px solid var(--line);
  color:var(--text);
  font-size:16px;
  width:34px;
  height:34px;
  line-height:1;
  cursor:pointer;
  transition:border-color .18s,background .18s,box-shadow .18s;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
}
.mp-btn-rec:hover{ border-color:#ff3c3c; background:rgba(255,60,60,0.1); }
.mp-btn-rec.active{
  border-color:#ff3c3c;
  color:#ff3c3c;
  background:rgba(255,60,60,0.12);
  box-shadow:0 0 12px rgba(255,60,60,0.4);
}

/* Recording indicator (blinking dot + timer) */
.mp-rec-indicator{
  position:absolute;
  top:14px;
  left:52px;
  z-index:25;
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:#ff3c3c;
  letter-spacing:0.08em;
}
.mp-rec-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff3c3c;
  box-shadow:0 0 6px #ff3c3c;
  animation:recBlink 1s steps(1) infinite;
}
@keyframes recBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

/* Arena border turns red while recording */
.mp-arena.mp-recording{
  border-color:rgba(255,60,60,0.5);
  box-shadow:
    0 0 80px rgba(255,60,60,0.12),
    0 0 0 1px rgba(255,60,60,0.1) inset;
}

/* Team cards grid */
.mp-teams-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  gap:8px;
}
.mp-team-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:8px 6px;
  background:var(--panel);
  border:1px solid var(--line);
  cursor:pointer;
  transition:border-color .18s,background .18s,transform .15s,box-shadow .18s;
}
.mp-team-card:hover{
  border-color:rgba(0,240,255,0.35);
  background:var(--bg-2);
  transform:translateY(-2px);
}
.mp-team-card.sel-a{
  border-color:var(--cyan);
  background:rgba(0,240,255,0.07);
  box-shadow:0 0 10px rgba(0,240,255,.25);
}
.mp-team-card.sel-b{
  border-color:var(--magenta);
  background:rgba(255,46,154,0.07);
  box-shadow:0 0 10px rgba(255,46,154,.25);
}
.mp-team-flag{
  width:40px;
  height:29px;
  object-fit:cover;
  border-radius:2px;
  display:block;
}
.mp-card-rank{
  font-family:var(--pixel);
  font-size:0.42rem;
  color:var(--acid);
  letter-spacing:0.04em;
  line-height:1;
}
.mp-team-name{
  font-family:var(--mono);
  font-size:0.56rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  text-align:center;
  line-height:1.3;
}

/* Matchup display inside intro screen */
.mp-matchup{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  min-height:40px;
}
.mp-matchup-a,.mp-matchup-b{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text);
}
.mp-matchup-a img,.mp-matchup-b img{
  width:34px; height:24px;
  object-fit:cover;
  border-radius:2px;
  border:1px solid rgba(0,240,255,0.2);
}
.mp-matchup-vs{
  font-family:var(--pixel);
  font-size:0.62rem;
  color:var(--text-mute);
}

/* Prediction flags + score row */
.mp-pred-score-row{
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:center;
  margin:8px 0 4px;
}
.mp-pred-team-a,
.mp-pred-team-b{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.mp-pred-flag{
  width:44px;
  height:32px;
  object-fit:cover;
  border-radius:3px;
  border:1px solid rgba(0,240,255,0.25);
  box-shadow:0 0 10px rgba(0,240,255,0.15);
}
.mp-pred-rank{
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--acid);
  background:rgba(170,255,0,0.08);
  border:1px solid rgba(170,255,0,0.25);
  padding:2px 6px;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
}
.mp-pred-winner{
  font-family:var(--display);
  font-size:clamp(0.7rem,2.2vw,1rem);
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--magenta);
  text-shadow:0 0 12px var(--magenta);
  margin-top:2px;
}

/* Arena ── */
.mp-arena{
  position:relative;
  width:100%;
  min-height:200px;
  background:#03030a;
  border:1px solid rgba(0,240,255,0.15);
  box-shadow:
    0 0 80px rgba(0,240,255,0.06),
    0 0 0 1px rgba(0,240,255,0.05) inset;
  overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  cursor:grab;
}
.mp-arena:active{ cursor:grabbing; }
.mp-canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}

/* ── Generic overlay ── */
.mp-screen{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  z-index:20;
  background:rgba(3,3,10,0.72);
  backdrop-filter:blur(2px);
}
.mp-hidden{ display:none !important; }

/* ── INTRO / IDLE ── */
.mp-orb-label{
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--accent,var(--cyan));
  opacity:.65;
  text-align:center;
}
.mp-orb-hint{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  color:var(--text-dim);
  text-align:center;
  animation:hint-fade 2.4s ease-in-out infinite;
}
@keyframes hint-fade{
  0%,100%{ opacity:.45; }
  50%{ opacity:.9; }
}
.mp-btn-start{
  font-family:var(--mono);
  font-size:0.76rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#03030a;
  background:var(--accent,var(--cyan));
  border:none;
  padding:15px 36px;
  clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%);
  cursor:pointer;
  box-shadow:
    0 0 28px color-mix(in srgb,var(--accent,var(--cyan)) 55%,transparent),
    0 0 60px color-mix(in srgb,var(--accent,var(--cyan)) 20%,transparent);
  transition:background .2s,box-shadow .2s,transform .18s;
  margin-top:8px;
}
.mp-btn-start:hover{
  background:#fff;
  box-shadow:0 0 40px rgba(0,240,255,.85);
  transform:scale(1.05) translateY(-2px);
}

/* ── ACTIVATING ── */
.mp-screen-activating{
  background:rgba(3,3,10,0.35);
  backdrop-filter:none;
  pointer-events:none;
}
.mp-activating-text{
  font-family:var(--pixel);
  font-size:clamp(.75rem,2.5vw,1.1rem);
  color:var(--accent,var(--cyan));
  letter-spacing:0.22em;
  text-transform:uppercase;
  text-shadow:0 0 20px var(--accent,var(--cyan));
  animation:act-flicker .12s infinite;
}
@keyframes act-flicker{
  0%,90%,100%{ opacity:1; }
  92%{ opacity:0.6; }
}
#mpDots{ color:var(--magenta); }

/* ── PREDICTION ── */
.mp-screen-pred{
  background:rgba(3,3,10,0.88);
  backdrop-filter:blur(4px);
}
.mp-pred-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:28px 24px;
  max-width:400px;
  width:100%;
  border:1px solid rgba(0,240,255,0.1);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  background:rgba(7,7,20,0.75);
  animation:pred-appear .5s ease-out;
}
@keyframes pred-appear{
  0%{ opacity:0; transform:scale(.92); }
  100%{ opacity:1; transform:scale(1); }
}
.mp-pred-label{
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent,var(--cyan));
  opacity:.7;
}
.mp-pred-label span{ color:var(--magenta); opacity:1; }
.mp-pred-score{
  font-family:var(--pixel);
  font-size:clamp(1.4rem,4vw,2.4rem);
  color:var(--text);
  text-shadow:0 0 24px rgba(0,240,255,.55);
  line-height:1.2;
  margin:8px 0 4px;
}
.mp-pred-title{
  font-family:var(--display);
  font-size:clamp(.9rem,3vw,1.7rem);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent,var(--cyan));
  text-shadow:0 0 20px var(--accent,var(--cyan));
}
.mp-pred-sub{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--text-dim);
  letter-spacing:.05em;
  max-width:290px;
  line-height:1.55;
}
.mp-pred-btns{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
  width:100%;
}
.mp-btn-cta{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:#03030a;
  background:var(--accent,var(--cyan));
  padding:14px 20px;
  text-align:center;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  box-shadow:0 0 20px color-mix(in srgb,var(--accent,var(--cyan)) 45%,transparent);
  transition:background .2s,box-shadow .2s;
}
.mp-btn-cta:hover{
  background:#fff;
  box-shadow:0 0 32px rgba(0,240,255,.75);
}
.mp-btn-restart{
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,240,255,.5);
  background:transparent;
  border:1px solid rgba(0,240,255,.2);
  padding:10px 20px;
  cursor:pointer;
  transition:border-color .2s,color .2s;
}
.mp-btn-restart:hover{
  border-color:var(--accent,var(--cyan));
  color:var(--accent,var(--cyan));
}

/* ── Fallback ── */
.mp-screen-fallback{
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--text-dim);
  text-align:center;
}
.mp-screen-fallback a{ color:var(--cyan); }

/* ── Responsive ── */
@media (max-width:960px){
  .mp-teams-grid{ grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); }
}
@media (max-width:640px){
  .match-predictor{ padding:40px 18px 60px; }
  .mp-arena{
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  }
  .mp-slots{ gap:10px; }
  .mp-slot{ min-width:140px; padding:10px 14px; }
  .mp-teams-grid{ grid-template-columns:repeat(auto-fill,minmax(62px,1fr)); gap:6px; }
  .mp-team-card{ padding:6px 4px; }
  .mp-team-flag{ width:34px; height:24px; }
  .mp-pred-wrap{ max-width:100%; padding:18px 14px; }
  .mp-btn-start{ font-size:.66rem; padding:13px 22px; }
  .mp-pred-btns{ max-width:280px; margin:12px auto 0; }
  .mp-pred-flag{ width:36px; height:26px; }
}
@media (max-width:420px){
  .mp-slot{ min-width:120px; padding:8px 10px; gap:8px; }
  .mp-slot-name{ font-size:.64rem; }
  .mp-teams-grid{ grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); }
}
@media (hover:none){
  .mp-btn-start:hover,.mp-btn-cta:hover,.mp-btn-restart:hover,.mp-team-card:hover{ transform:none; box-shadow:none; }
  .mp-btn-start:active{ transform:scale(.97); }
  .mp-team-card:active{ border-color:var(--accent,var(--cyan)); }
  .mp-arena{ cursor:default; }
  .mp-arena:active{ cursor:default; }
}

/* ══════════════════ RITUAL VUDÚ ═══════════════════════════ */
.mp-voodoo-wrap {
  margin: 22px auto 0;
  padding: 18px 20px;
  max-width: 700px;
  background: rgba(6,2,22,.88);
  border: 1px solid rgba(140,0,220,.38);
  border-radius: 10px;
  box-shadow: 0 0 36px rgba(110,0,190,.20), inset 0 0 60px rgba(100,0,180,.06);
}
.mp-vd-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(140,0,220,.25);
  flex-wrap: wrap;
}
.mp-vd-icon  { font-size: 20px; }
.mp-vd-title {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #c040ff;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.mp-vd-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(192,64,255,.50);
  margin-left: auto;
}
.mp-vd-dolls {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  gap: 14px;
}
.mp-vd-card {
  flex: 1;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 10px 12px;
  background: rgba(15,5,35,.70);
  border: 1px solid rgba(140,0,220,.22);
  border-radius: 8px;
  transition: border-color .25s;
}
.mp-vd-card:hover { border-color: rgba(192,64,255,.55); }
.mp-vd-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.2px;
  text-align: center;
}
.mp-vd-canvas {
  border-radius: 6px;
  background: rgba(5,0,20,.55);
  transition: transform .06s ease;
  display: block;
}
.mp-vd-btns {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
}
.mp-vd-btn {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 6px 11px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform .10s, box-shadow .18s;
  letter-spacing: .4px;
}
.mp-vd-btn:active { transform: scale(.90); }
.mp-vd-needle {
  background: #6a0000;
  color: #ffaaaa;
  box-shadow: 0 0 10px rgba(200,0,0,.28);
}
.mp-vd-needle:hover {
  background: #990000;
  box-shadow: 0 0 18px rgba(220,0,0,.55);
  color: #ffcccc;
}
.mp-vd-beer {
  background: #4a2e00;
  color: #ffd060;
  box-shadow: 0 0 10px rgba(190,130,0,.22);
}
.mp-vd-beer:hover {
  background: #6a4400;
  box-shadow: 0 0 18px rgba(210,160,0,.44);
  color: #ffe590;
}
.mp-vd-punch {
  background: #5a1a00;
  color: #ffbb88;
  box-shadow: 0 0 10px rgba(255,100,0,.25);
}
.mp-vd-punch:hover {
  background: #8a2800;
  box-shadow: 0 0 18px rgba(255,120,0,.50);
  color: #ffd0aa;
}
.mp-vd-kick {
  background: #1a1a00;
  color: #eeff44;
  box-shadow: 0 0 10px rgba(200,200,0,.22);
}
.mp-vd-kick:hover {
  background: #333300;
  box-shadow: 0 0 18px rgba(220,220,0,.44);
  color: #ffff66;
}
.mp-vd-cake {
  background: #3a0030;
  color: #ffaaee;
  box-shadow: 0 0 10px rgba(200,0,160,.22);
}
.mp-vd-cake:hover {
  background: #5a0050;
  box-shadow: 0 0 18px rgba(220,0,180,.44);
  color: #ffccff;
}
.mp-vd-penalty {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(255,255,255,.32);
  text-align: center;
  min-height: 14px;
  transition: color .3s;
}
.mp-vd-penalty-low  { color: #ffaa00; }
.mp-vd-penalty-high { color: #ff3333; font-weight: 700; }
.mp-vd-skull {
  font-size: 28px;
  align-self: center;
  flex-shrink: 0;
  animation: vdFloat 2.4s ease-in-out infinite;
}
@keyframes vdFloat {
  0%,100% { transform: translateY(0)   rotate(-5deg); }
  50%      { transform: translateY(-9px) rotate(5deg); }
}
@media (max-width: 480px) {
  .mp-vd-dolls { flex-direction: column; align-items: center; }
  .mp-vd-card  { max-width: 100%; width: 100%; }
  .mp-vd-skull { transform: none !important; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PERFECT — Android & iOS (additions to base responsive)
   ═══════════════════════════════════════════════════════════════ */

/* Eliminate 300ms tap delay on all interactive / canvas elements */
canvas,
button, a,
.pill, .product, .buy, .plan-cta,
.pago-method-btn, .pago-contact-btn,
.cart-btn, .nav-toggle, .sb-btn, .op-btn,
.filter, .fa-btn, .pe-btn, .pe-home { touch-action: manipulation; }

/* Canvas cursor restore on touch screens */
@media (hover: none) {
  canvas { cursor: auto !important; }
  .lt-game-wrap canvas,
  .cz-game-wrap canvas,
  .ze-game-wrap canvas,
  .sd-game-wrap canvas,
  .ab-game-wrap canvas { cursor: pointer !important; }
  .sound-toggle,
  .nav-toggle { cursor: pointer !important; }
}

/* ── GAME PAGES — compact top on mobile ── */
@media (max-width: 640px) {
  .et-page,.ze-page,.op-page,.lt-page,
  .ac-page,.cz-page,.rm-page,.co-page,
  .cm-page,.ta-page,.bh-page,.var-page,
  .sd-page,.ab-page,.fa-page,.sb-page {
    padding-top: 72px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .pago-page  { padding-top:80px; padding-left:14px; padding-right:14px; }
  .pe-page    { padding-left:14px; padding-right:14px; }
  .post-wrap  { margin-top:100px; }
  .blog-wrap  { margin-top:100px; padding:0 14px; }

  /* Nav — keep try button visible on mobile */
  .cart-btn { display:inline-flex !important; font-size:10px; padding:7px 10px; gap:5px; }
  .cart-btn .count { padding:1px 5px; min-width:16px; font-size:10px; }

  /* CTA newsletter form — stack vertically */
  .cta-form { flex-direction:column; clip-path:none; border-radius:4px; }
  .cta-form input { border-bottom:1px solid var(--accent,var(--cyan)); }
  .cta-form button { width:100%; min-height:50px; cursor:pointer; }

  /* Plans grid single column */
  .planes-grid { grid-template-columns:1fr; }
  .planes-include { padding:16px; }
  .planes-trial { flex-direction:column; gap:14px; }

  /* Success page */
  .pe-ctas { flex-direction:column; align-items:stretch; }
  .pe-btn  { justify-content:center; min-height:52px; }

  /* Back links — bigger tap target (min 44px) */
  .op-back,.lt-back,.ac-back,.sb-back,.cz-back,
  .rm-back,.co-back,.cm-back,.et-back,.ze-back,
  .ta-back,.bh-back,.var-back,.sd-back,.ab-back,.fa-back {
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }

  /* Legend text compact */
  .op-legend-item,.lt-legend-item,.ac-legend-item,
  .cz-legend-item,.rm-legend-item,.co-legend-item,
  .cm-legend-item,.et-legend-item,.ze-legend-item,
  .ta-legend-item,.bh-legend-item,.var-legend-item,
  .sd-legend-item,.ab-legend-item,.fa-legend-item { font-size:11px; gap:6px; }

  /* Pago methods full-width on small */
  .pago-methods { grid-template-columns:1fr; }
  .pago-contact-btns { grid-template-columns:1fr; }
  .pago-method { padding:20px 16px; }

  /* Orbe predictor — 2 column inputs always */
  .op-teams-grid { grid-template-columns:1fr 1fr; }

  /* Estadio builder sidebar compact */
  .sb-sidebar { max-height:220px; overflow-y:auto; }

  /* Footer single column on very small screens */
  .foot-grid { grid-template-columns:1fr; }

  /* Match predictor compact */
  .match-predictor { padding:60px 14px 50px; }
  .mp-slots { gap:8px; }

  /* Toast — full width on mobile */
  .toast { right:10px; left:10px; min-width:auto; transform:translateY(-110%); top:auto; bottom:20px; }
  .toast.show { transform:translateY(0); }

  /* Loadout pills wrap better */
  .loadout-pills { gap:7px; }
  .pill { padding:10px 12px; font-size:10px; min-height:44px; }

  /* Buttons tap size */
  .btn-primary,.btn-secondary { min-height:48px; }
  .btn-trial { min-height:56px; }
  .buy,.plan-cta,.pago-method-btn,.pago-contact-btn { min-height:44px; }
}

/* Very small phones (≤380px) */
@media (max-width:380px) {
  .hero h1 { font-size:34px; }
  .btn-trial { padding:14px 20px; font-size:13px; }
  .hero-desc { font-size:12px; }
  .statusbar .right .item:not(#time-now) { display:none; }
  .plan-price { font-size:34px; }
  .pago-plan-bar { flex-direction:column; align-items:flex-start; gap:8px; }
}

/* =========================================================
   FEATURE 1 — MUNDIAL 2026 COUNTDOWN
   ========================================================= */
.mundial-countdown {
  position:relative;
  background:linear-gradient(160deg,#0a0a14 0%,#0d0d1f 60%,#07080f 100%);
  border-top:1px solid color-mix(in srgb,var(--acid) 20%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--acid) 15%,transparent);
  padding:56px 24px;
  overflow:hidden;
  text-align:center;
}
.mundial-countdown::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,color-mix(in srgb,var(--acid) 8%,transparent),transparent 70%);
  pointer-events:none;
}
.mc-inner { position:relative; max-width:700px; margin:0 auto; }
.mc-live-row {
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:18px; flex-wrap:wrap;
}
.mc-live-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--acid);
  box-shadow:0 0 8px var(--acid);
  animation:mcDotPulse 1.2s ease-in-out infinite;
}
@keyframes mcDotPulse{
  0%,100%{opacity:1; box-shadow:0 0 8px var(--acid);}
  50%{opacity:.4; box-shadow:0 0 3px var(--acid);}
}
.mc-live-lbl {
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--acid); text-transform:uppercase;
}
.mc-edition {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:rgba(255,255,255,.45); text-transform:uppercase;
}
.mc-title {
  font-family:var(--mono); font-size:clamp(18px,4vw,28px);
  font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; margin:0 0 32px;
}
.mc-timer {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-bottom:20px; flex-wrap:nowrap;
}
.mc-unit { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:64px; }
.mc-n {
  font-family:var(--mono); font-size:clamp(36px,8vw,64px); font-weight:700; line-height:1;
  color:var(--acid);
  text-shadow:0 0 20px color-mix(in srgb,var(--acid) 60%,transparent);
}
.mc-l {
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  color:rgba(255,255,255,.4); text-transform:uppercase;
}
.mc-colon {
  font-family:var(--mono); font-size:clamp(28px,6vw,48px); font-weight:700;
  color:rgba(255,255,255,.25); line-height:1; margin-bottom:16px;
  animation:mcColonBlink 1s step-end infinite;
}
@keyframes mcColonBlink{ 0%,100%{opacity:1;} 50%{opacity:.15;} }
.mc-sub {
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:rgba(255,255,255,.35); margin:0 0 28px; text-transform:uppercase;
}
.mc-ctas { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.mc-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  background:var(--acid); color:#07070d; font-weight:700;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:filter .2s;
}
.mc-btn-primary:hover { filter:brightness(1.15); }
.mc-btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 24px; font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--acid); color:var(--acid); background:transparent;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:background .2s,color .2s;
}
.mc-btn-secondary:hover { background:color-mix(in srgb,var(--acid) 12%,transparent); }
.mc-finished { font-family:var(--mono); font-size:22px; color:var(--acid); letter-spacing:.1em; }

@media (max-width:640px) {
  .mundial-countdown { padding:36px 16px; }
  .mc-unit { min-width:50px; }
  .mc-n { font-size:36px; }
  .mc-colon { font-size:28px; }
  .mc-ctas { flex-direction:column; align-items:stretch; }
  .mc-btn-primary,.mc-btn-secondary { justify-content:center; padding:16px 20px; min-height:52px; }
}

/* =========================================================
   FEATURE 2 — SHARE OVERLAY
   ========================================================= */
.share-overlay {
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(7,7,13,.88); backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
.share-overlay.open { display:flex; }
.share-box {
  background:#0d0d1f;
  border:1px solid color-mix(in srgb,var(--acid) 35%,transparent);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  padding:32px 28px; max-width:380px; width:90%; text-align:center;
  box-shadow:0 0 40px color-mix(in srgb,var(--acid) 25%,transparent);
  position:relative;
}
.share-box-close {
  position:absolute; top:10px; right:14px; background:none; border:none;
  color:rgba(255,255,255,.4); font-size:22px; cursor:pointer; line-height:1;
}
.share-box-close:hover { color:#fff; }
.share-score-label {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:rgba(255,255,255,.4); text-transform:uppercase; margin-bottom:6px;
}
.share-score-val {
  font-family:var(--mono); font-size:56px; font-weight:700; line-height:1;
  color:var(--acid);
  text-shadow:0 0 24px color-mix(in srgb,var(--acid) 55%,transparent);
  margin-bottom:4px;
}
.share-game-name {
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:rgba(255,255,255,.55); text-transform:uppercase; margin-bottom:24px;
}
.share-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.share-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 18px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border:1px solid rgba(255,255,255,.18); color:#fff; background:transparent;
  cursor:pointer; transition:border-color .2s,background .2s;
}
.share-btn:hover { border-color:var(--acid); color:var(--acid); background:color-mix(in srgb,var(--acid) 8%,transparent); }
.share-btn-wa { border-color:#25d366; color:#25d366; }
.share-btn-wa:hover { background:rgba(37,211,102,.1); border-color:#25d366; color:#25d366; }
.share-btn-skip { color:rgba(255,255,255,.3); border-color:rgba(255,255,255,.1); font-size:10px; }
.share-btn-skip:hover { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.25); background:transparent; }

/* =========================================================
   FEATURE 4 — LEADERBOARD
   ========================================================= */
.leaderboard-section {
  padding:64px 24px; background:#07070d;
  border-top:1px solid rgba(255,255,255,.05);
}
.lb-inner { max-width:860px; margin:0 auto; }
.lb-header {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:32px; flex-wrap:wrap; gap:10px;
}
.lb-title {
  font-family:var(--mono); font-size:clamp(16px,3vw,22px); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.lb-sub { font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.3); text-transform:uppercase; }
.lb-tabs { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.lb-tab {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 16px; border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.4);
  background:transparent; cursor:pointer; transition:all .2s;
}
.lb-tab.active,.lb-tab:hover { border-color:var(--acid); color:var(--acid); background:color-mix(in srgb,var(--acid) 8%,transparent); }
.lb-table { width:100%; border-collapse:collapse; }
.lb-table th {
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.3); text-align:left; padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.lb-table td {
  font-family:var(--mono); font-size:12px; padding:12px;
  border-bottom:1px solid rgba(255,255,255,.04); color:#fff;
}
.lb-rank { color:rgba(255,255,255,.3); width:40px; }
.lb-rank-1 { color:gold; font-weight:700; }
.lb-rank-2 { color:silver; font-weight:700; }
.lb-rank-3 { color:#cd7f32; font-weight:700; }
.lb-pts { color:var(--acid); font-weight:700; text-align:right; }
.lb-date { color:rgba(255,255,255,.25); font-size:10px; text-align:right; }
.lb-empty { font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.25); padding:24px 0; text-align:center; letter-spacing:.1em; }
.lb-clear-btn {
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.1);
  background:transparent; padding:6px 12px; cursor:pointer; margin-top:16px;
  transition:all .2s;
}
.lb-clear-btn:hover { color:var(--red,#f23) ; border-color:var(--red,#f23); }

@media (max-width:640px) {
  .leaderboard-section { padding:40px 14px; }
  .lb-date { display:none; }
}

/* =========================================================
   FEATURE 3 — TRIVIA GAME page
   ========================================================= */
.trivia-page { padding-top:80px; min-height:100vh; background:#07070d; }
@media (max-width:640px) { .trivia-page { padding-top:70px; } }