/* ═══════════════════════════════════════════════════════════
   KITSTREAM · Hoja de estilos principal
   Paleta y tipografía tomadas del manual de marca.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0B0F1A; --bg-2:#080B14; --card:#141B2D; --card-2:#1A2236;
  --violet:#7C3AED; --purple:#B94DFF; --cyan:#00E5FF; --warm:#FFB84D;
  --text:#FFFFFF; --muted:#8892A4; --dim:#5A6478;
  --ok:#22C55E; --warn:#FFB84D; --bad:#EF4444;
  --line:rgba(124,58,237,.26);
  --glow-v:rgba(124,58,237,.55); --glow-c:rgba(0,229,255,.45);
  --r-sm:8px; --r:12px; --r-lg:18px;
  --sh:0 8px 28px rgba(0,0,0,.45);
  --sh-glow:0 8px 32px rgba(124,58,237,.35);
  --fast:.18s cubic-bezier(.4,0,.2,1);
  --slow:.5s cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; overflow-x:hidden; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:'Sora',sans-serif;font-weight:800;line-height:1.15;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
img{max-width:100%;display:block}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--violet),var(--purple));border-radius:5px}
::selection{background:var(--violet);color:#fff}

.grad-txt{background:linear-gradient(115deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ═══════════════════════════════════════════════════════════
   ✦ EFECTO ESTRELLA: brillo que RECORRE el contorno del personaje
   drop-shadow respeta el canal alpha del PNG, así que la luz
   sigue la silueta real del gato, no una caja rectangular.
   Cuatro sombras desfasadas 90° describen una órbita completa.
   ═══════════════════════════════════════════════════════════ */
@keyframes contorno-orbita{
  0%{filter:
      drop-shadow( 6px  0    7px var(--glow-v))
      drop-shadow( 0    6px  9px var(--glow-c))
      drop-shadow(-6px  0    7px rgba(185,77,255,.30))
      drop-shadow( 0   -6px 11px rgba(0,229,255,.18));}
  25%{filter:
      drop-shadow( 0    6px  7px var(--glow-v))
      drop-shadow(-6px  0    9px var(--glow-c))
      drop-shadow( 0   -6px  7px rgba(185,77,255,.30))
      drop-shadow( 6px  0   11px rgba(0,229,255,.18));}
  50%{filter:
      drop-shadow(-6px  0    7px var(--glow-v))
      drop-shadow( 0   -6px  9px var(--glow-c))
      drop-shadow( 6px  0    7px rgba(185,77,255,.30))
      drop-shadow( 0    6px 11px rgba(0,229,255,.18));}
  75%{filter:
      drop-shadow( 0   -6px  7px var(--glow-v))
      drop-shadow( 6px  0    9px var(--glow-c))
      drop-shadow( 0    6px  7px rgba(185,77,255,.30))
      drop-shadow(-6px  0   11px rgba(0,229,255,.18));}
  100%{filter:
      drop-shadow( 6px  0    7px var(--glow-v))
      drop-shadow( 0    6px  9px var(--glow-c))
      drop-shadow(-6px  0    7px rgba(185,77,255,.30))
      drop-shadow( 0   -6px 11px rgba(0,229,255,.18));}
}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes pulso-halo{
  0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:.75;transform:translate(-50%,-50%) scale(1.13)}
}

/* Contenedor del personaje */
.kit{position:relative;display:inline-block;isolation:isolate}
.kit img,.kit svg{position:relative;z-index:2;animation:contorno-orbita 4.5s linear infinite}
.kit--flota img,.kit--flota svg{animation:contorno-orbita 4.5s linear infinite, flotar 5s ease-in-out infinite}
.kit--lento img{animation-duration:7s}
.kit--suave img{--glow-v:rgba(124,58,237,.32);--glow-c:rgba(0,229,255,.24)}

/* Halo difuso detrás */
.kit::before{
  content:'';position:absolute;left:50%;top:52%;
  width:118%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,
    rgba(124,58,237,.34) 0%, rgba(185,77,255,.16) 34%,
    rgba(0,229,255,.07) 56%, transparent 72%);
  transform:translate(-50%,-50%);
  animation:pulso-halo 5s ease-in-out infinite;
  z-index:1;pointer-events:none;filter:blur(9px);
}
.kit--sin-halo::before{display:none}

/* Anillo orbital de partículas */
.kit-orbita{position:absolute;inset:-14%;z-index:0;pointer-events:none;
  animation:girar 20s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.kit-orbita span{position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 11px var(--cyan);opacity:.75}
.kit-orbita span:nth-child(1){top:6%;left:50%}
.kit-orbita span:nth-child(2){top:50%;right:3%;background:var(--purple);box-shadow:0 0 11px var(--purple)}
.kit-orbita span:nth-child(3){bottom:8%;left:44%;width:4px;height:4px}
.kit-orbita span:nth-child(4){top:44%;left:2%;background:var(--warm);box-shadow:0 0 9px var(--warm);width:3px;height:3px}

/* ═══════════════════════════════════════════════════════════
   FONDO ATMOSFÉRICO
   ═══════════════════════════════════════════════════════════ */
.fondo-estrellas{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.fondo-estrellas::before,.fondo-estrellas::after{
  content:'';position:absolute;inset:-50%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 32% 62%, rgba(185,77,255,.45), transparent),
    radial-gradient(1.8px 1.8px at 58% 28%, rgba(0,229,255,.40), transparent),
    radial-gradient(1.2px 1.2px at 78% 72%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.6px 1.6px at 88% 12%, rgba(124,58,237,.45), transparent),
    radial-gradient(1.2px 1.2px at 22% 88%, rgba(255,255,255,.30), transparent);
  background-size:520px 520px;
  animation:deriva 130s linear infinite;
}
.fondo-estrellas::after{background-size:340px 340px;opacity:.55;animation-duration:200s;animation-direction:reverse}
@keyframes deriva{to{transform:translate(-520px,-520px)}}

.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);animation:vagar 26s ease-in-out infinite}
.aurora span:nth-child(1){width:46vw;height:46vw;top:-14%;right:-9%;
  background:radial-gradient(circle,rgba(124,58,237,.42),transparent 70%)}
.aurora span:nth-child(2){width:38vw;height:38vw;bottom:-16%;left:-8%;
  background:radial-gradient(circle,rgba(0,229,255,.24),transparent 70%);animation-delay:-9s}
.aurora span:nth-child(3){width:30vw;height:30vw;top:42%;left:38%;
  background:radial-gradient(circle,rgba(185,77,255,.22),transparent 70%);animation-delay:-17s}
@keyframes vagar{
  0%,100%{transform:translate(0,0) scale(1)}
  33%    {transform:translate(4vw,-3vh) scale(1.09)}
  66%    {transform:translate(-3vw,4vh) scale(.94)}
}

/* ═══════════════════════════════════════════════════════════
   REVELADO AL HACER SCROLL
   ═══════════════════════════════════════════════════════════ */
[data-revelar]{opacity:0;transform:translateY(26px);
  transition:opacity var(--slow),transform var(--slow)}
[data-revelar].visible{opacity:1;transform:none}
[data-revelar="izq"]{transform:translateX(-32px)}
[data-revelar="der"]{transform:translateX(32px)}
[data-revelar="zoom"]{transform:scale(.92)}
[data-revelar].visible{transform:none}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
header{
  position:sticky;top:0;z-index:200;height:66px;
  display:flex;align-items:center;gap:1.6rem;padding:0 1.6rem;
  background:rgba(11,15,26,.85);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);
  transition:background var(--fast),box-shadow var(--fast);
}
header.compacto{background:rgba(11,15,26,.97);box-shadow:0 4px 24px rgba(0,0,0,.5)}
.logo{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.logo img{width:38px;height:38px;object-fit:contain;
  filter:drop-shadow(0 0 8px var(--glow-v));transition:transform var(--fast)}
.logo:hover img{transform:scale(1.1) rotate(-6deg)}
.logo b{font-family:'Sora';font-weight:800;font-size:1.18rem;letter-spacing:-.03em}
.logo b i{font-style:normal;background:linear-gradient(115deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

nav{display:flex;gap:1.4rem;align-items:center}
nav a{color:var(--muted);font-size:.89rem;font-weight:500;padding:.35rem 0;
  position:relative;white-space:nowrap;transition:color var(--fast)}
nav a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  border-radius:2px;transition:width var(--fast)}
nav a:hover,nav a.on{color:#fff}
nav a:hover::after,nav a.on::after{width:100%}

.cab-der{margin-left:auto;display:flex;align-items:center;gap:.65rem}
.ico-btn{width:38px;height:38px;border-radius:var(--r-sm);background:var(--card);
  border:1px solid var(--line);color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:all var(--fast)}
.ico-btn:hover{border-color:var(--violet);color:#fff;transform:translateY(-2px)}
.pin{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
  background:linear-gradient(135deg,var(--purple),var(--violet));color:#fff;
  font-size:.63rem;font-weight:700;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 10px var(--glow-v);animation:latido 2.4s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.pin:empty,.pin[data-n="0"]{display:none}

/* ═══════════════════════════════════════════════════════════
   BOTONES
   ═══════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.66rem 1.35rem;border-radius:var(--r);border:none;cursor:pointer;
  font-size:.88rem;font-weight:600;white-space:nowrap;
  transition:transform var(--fast),box-shadow var(--fast),background var(--fast);
  position:relative;overflow:hidden}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

.btn-1{background:linear-gradient(115deg,var(--violet),var(--purple));color:#fff}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--glow-v)}
.btn-2{background:transparent;color:#fff;border:1px solid var(--line)}
.btn-2:hover{border-color:var(--violet);background:rgba(124,58,237,.1);transform:translateY(-2px)}
.btn-3{background:linear-gradient(115deg,var(--cyan),#00A8CC);color:#06202B;font-weight:700}
.btn-3:hover{transform:translateY(-2px);box-shadow:0 10px 28px var(--glow-c)}
.btn-4{background:linear-gradient(115deg,var(--warm),#FF8C42);color:#1A0F00;font-weight:700}
.btn-4:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,184,77,.4)}
.btn-sm{padding:.42rem .9rem;font-size:.79rem}
.btn-blk{width:100%}

/* Barrido de luz al pasar el cursor */
.btn-1::before,.btn-3::before,.btn-4::before{
  content:'';position:absolute;inset:0 auto 0 -120%;width:60%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-22deg);transition:left .55s ease}
.btn-1:hover::before,.btn-3:hover::before,.btn-4:hover::before{left:130%}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero{position:relative;min-height:clamp(400px,62vh,540px);
  display:flex;align-items:center;padding:3.5rem 2rem;overflow:hidden;
  background:linear-gradient(125deg,#0B0F1A 0%,#141B2D 44%,#1A0D2E 100%);
  border-bottom:1px solid var(--line)}
.hero-txt{max-width:560px;position:relative;z-index:3}
.chip{display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(124,58,237,.16);border:1px solid var(--line);
  border-radius:22px;padding:.32rem .85rem;font-size:.73rem;color:#C9CFDD;
  margin-bottom:1.05rem;backdrop-filter:blur(8px)}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:1rem}
.hero p{color:var(--muted);font-size:.95rem;margin-bottom:1.5rem;max-width:470px}
.confianza{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.7rem}
.confianza div{display:flex;align-items:center;gap:.42rem;font-size:.79rem;color:var(--muted)}
.confianza b{color:#fff;font-weight:600;font-size:.8rem}
.hero-kit{position:absolute;right:4%;bottom:-2%;width:clamp(220px,30vw,380px);z-index:2}

/* ═══════════════════════════════════════════════════════════
   MARCAS
   ═══════════════════════════════════════════════════════════ */
.marcas{background:var(--card);border-bottom:1px solid var(--line);
  padding:.9rem 0;overflow:hidden;position:relative}
.marcas::before,.marcas::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2}
.marcas::before{left:0;background:linear-gradient(90deg,var(--card),transparent)}
.marcas::after{right:0;background:linear-gradient(270deg,var(--card),transparent)}
.marcas-cinta{display:flex;gap:2.6rem;animation:desfile 34s linear infinite;width:max-content}
.marcas:hover .marcas-cinta{animation-play-state:paused}
@keyframes desfile{to{transform:translateX(-50%)}}
.marca{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;
  opacity:.62;transition:opacity var(--fast),transform var(--fast);white-space:nowrap;cursor:pointer}
.marca:hover{opacity:1;transform:scale(1.07)}

/* ═══════════════════════════════════════════════════════════
   SECCIONES Y TARJETAS
   ═══════════════════════════════════════════════════════════ */
.sec{padding:2.2rem 2rem;max-width:1400px;margin:0 auto}
.sec-cab{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.35rem;gap:1rem;flex-wrap:wrap}
.sec-cab h2{font-size:1.12rem;display:flex;align-items:center;gap:.5rem}

.rejilla{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}

.prod{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;cursor:pointer;position:relative;
  transition:transform var(--fast),box-shadow var(--fast),border-color var(--fast)}
.prod:hover{transform:translateY(-5px);border-color:var(--violet);box-shadow:var(--sh-glow)}
.prod-img{height:112px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden}
.prod-img span{font-size:2rem;font-weight:900;letter-spacing:-1px;
  transition:transform var(--fast);z-index:1}
.prod:hover .prod-img span{transform:scale(1.13)}
.prod-img::after{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.13),transparent 62%)}
.tag{position:absolute;top:9px;right:9px;z-index:2;
  font-size:.63rem;font-weight:700;padding:.16rem .48rem;border-radius:5px;
  backdrop-filter:blur(6px)}
.tag-ok{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.45);color:var(--ok)}
.tag-no{background:rgba(136,146,164,.18);border:1px solid rgba(136,146,164,.4);color:var(--muted)}
.tag-hot{background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.45);color:var(--bad)}
.prod-cuerpo{padding:.8rem}
.prod-cuerpo h3{font-size:.87rem;margin-bottom:.16rem}
.prod-cuerpo p{font-size:.71rem;color:var(--muted);margin-bottom:.55rem;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.prod-pie{display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.precio{font-family:'Sora';font-weight:700;font-size:1rem}
.precio s{color:var(--dim);font-size:.72rem;font-weight:400;margin-left:.28rem}
.estrellas{font-size:.7rem;color:var(--warm);display:flex;align-items:center;gap:.16rem}

.caja{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.15rem}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
.toasts{position:fixed;bottom:1.6rem;right:1.6rem;z-index:9999;
  display:flex;flex-direction:column;gap:.55rem;max-width:330px}
.toast{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1.05rem;
  background:var(--card);border:1px solid var(--violet);border-radius:var(--r);
  box-shadow:var(--sh-glow);animation:entra-toast .32s cubic-bezier(.16,1,.3,1)}
.toast.saliendo{animation:sale-toast .26s ease forwards}
@keyframes entra-toast{from{opacity:0;transform:translateX(90px) scale(.94)}to{opacity:1;transform:none}}
@keyframes sale-toast{to{opacity:0;transform:translateX(90px) scale(.94)}}
.toast.ok{border-color:var(--ok)} .toast.err{border-color:var(--bad)}
.toast i{font-style:normal;font-size:1.15rem;line-height:1.2}
.toast b{display:block;font-size:.85rem;font-weight:700}
.toast small{font-size:.75rem;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════
   FORMULARIOS
   ═══════════════════════════════════════════════════════════ */
.campo{margin-bottom:.95rem}
.campo label{display:block;font-size:.79rem;font-weight:600;margin-bottom:.35rem}
.inp{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.66rem .85rem;color:#fff;font-size:.87rem;
  outline:none;transition:border-color var(--fast),box-shadow var(--fast)}
.inp:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,58,237,.16)}
.inp::placeholder{color:var(--dim)}
.inp.mal{border-color:var(--bad)}
.error-txt{color:var(--bad);font-size:.74rem;margin-top:.28rem;display:none}
.error-txt.ver{display:block}
select.inp{cursor:pointer}
textarea.inp{resize:vertical;min-height:88px}

/* ═══════════════════════════════════════════════════════════
   PANELES (admin / distribuidor / cuenta)
   ═══════════════════════════════════════════════════════════ */
.panel{display:grid;grid-template-columns:242px 1fr;min-height:calc(100vh - 66px)}
.lateral{background:var(--card);border-right:1px solid var(--line);
  padding:1.15rem;position:sticky;top:66px;height:calc(100vh - 66px);overflow-y:auto}
.lat-grupo{margin-bottom:1.35rem}
.lat-titulo{font-size:.68rem;font-weight:700;color:var(--dim);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:.5rem;padding:0 .6rem}
.lat-item{display:flex;align-items:center;gap:.62rem;padding:.56rem .7rem;
  border-radius:var(--r-sm);color:var(--muted);font-size:.85rem;cursor:pointer;
  transition:all var(--fast);margin-bottom:.14rem;position:relative}
.lat-item:hover{background:rgba(124,58,237,.1);color:#fff}
.lat-item.on{background:linear-gradient(100deg,rgba(124,58,237,.22),rgba(124,58,237,.05));
  color:#fff;font-weight:600}
.lat-item.on::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;
  background:linear-gradient(var(--violet),var(--cyan));border-radius:0 3px 3px 0}
.lat-item .n{margin-left:auto;background:var(--violet);color:#fff;font-size:.66rem;
  font-weight:700;padding:.08rem .42rem;border-radius:9px}

.contenido{padding:1.5rem 1.8rem;max-width:1300px}
.pag-cab{margin-bottom:1.5rem}
.pag-cab h1{font-size:1.5rem;margin-bottom:.22rem}
.pag-cab p{color:var(--muted);font-size:.85rem}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  gap:.9rem;margin-bottom:1.6rem}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.1rem;position:relative;overflow:hidden;transition:all var(--fast)}
.kpi:hover{border-color:var(--violet);transform:translateY(-3px)}
.kpi::after{content:'';position:absolute;top:-45%;right:-22%;width:130px;height:130px;
  background:radial-gradient(circle,rgba(124,58,237,.16),transparent 68%)}
.kpi .ic{font-size:1.3rem;margin-bottom:.45rem}
.kpi .v{font-family:'Sora';font-size:1.55rem;font-weight:800;line-height:1.1}
.kpi .l{font-size:.75rem;color:var(--muted);margin-top:.16rem}
.kpi .d{font-size:.72rem;margin-top:.42rem;font-weight:600}
.kpi .d.sube{color:var(--ok)} .kpi .d.baja{color:var(--bad)}

/* Wallets */
.wallets{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.6rem}
.wallet{border-radius:var(--r-lg);padding:1.3rem;position:relative;overflow:hidden;
  border:1px solid var(--line)}
.wallet.principal{background:linear-gradient(125deg,#1A0D2E,#0D1B2A)}
.wallet.afiliado {background:linear-gradient(125deg,#0D2A22,#0B1B2A);border-color:rgba(34,197,94,.3)}
.wallet::before{content:'';position:absolute;top:-55%;right:-18%;width:220px;height:220px;
  background:radial-gradient(circle,rgba(124,58,237,.2),transparent 68%);pointer-events:none}
.wallet.afiliado::before{background:radial-gradient(circle,rgba(34,197,94,.16),transparent 68%)}
.wallet h3{font-size:.83rem;color:var(--muted);font-weight:600;
  display:flex;align-items:center;gap:.42rem;margin-bottom:.5rem}
.wallet .saldo{font-family:'Sora';font-size:2.1rem;font-weight:800;line-height:1}
.wallet .sub{font-size:.75rem;color:var(--muted);margin-top:.4rem}
.wallet .acciones{display:flex;gap:.5rem;margin-top:1.05rem;flex-wrap:wrap}

/* Tablas */
.tabla-caja{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
table{width:100%;border-collapse:collapse}
thead th{background:rgba(124,58,237,.09);padding:.72rem 1rem;text-align:left;
  font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:.72rem 1rem;font-size:.84rem;border-bottom:1px solid rgba(255,255,255,.05)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--fast)}
tbody tr:hover{background:rgba(124,58,237,.06)}

.pill{display:inline-flex;align-items:center;gap:.28rem;font-size:.7rem;font-weight:700;
  padding:.2rem .58rem;border-radius:20px}
.pill-ok  {background:rgba(34,197,94,.15);color:var(--ok)}
.pill-warn{background:rgba(255,184,77,.15);color:var(--warm)}
.pill-bad {background:rgba(239,68,68,.15);color:var(--bad)}
.pill-info{background:rgba(0,229,255,.13);color:var(--cyan)}
.pill-vio {background:rgba(124,58,237,.18);color:var(--purple)}

/* Ranking */
.rank-fila{display:flex;align-items:center;gap:.85rem;padding:.72rem 0;
  border-bottom:1px solid rgba(255,255,255,.05);transition:all var(--fast)}
.rank-fila:last-child{border-bottom:none}
.rank-fila:hover{background:rgba(124,58,237,.05);padding-left:.45rem}
.rank-pos{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-family:'Sora';font-weight:800;font-size:.85rem;flex-shrink:0;
  background:var(--card-2);color:var(--muted)}
.rank-fila:nth-child(1) .rank-pos{background:linear-gradient(135deg,#FFD700,#FFA500);color:#1A0F00}
.rank-fila:nth-child(2) .rank-pos{background:linear-gradient(135deg,#C0C0C0,#9A9A9A);color:#111}
.rank-fila:nth-child(3) .rank-pos{background:linear-gradient(135deg,#CD7F32,#A0522D);color:#fff}
.rank-ava{width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.88rem;
  background:linear-gradient(135deg,var(--violet),var(--purple))}
.rank-info{flex:1;min-width:0}
.rank-info b{display:block;font-size:.86rem}
.rank-info small{font-size:.72rem;color:var(--muted)}
.rank-val{font-family:'Sora';font-weight:700;font-size:.92rem;text-align:right}

/* Árbol de afiliados */
.afil-caja{background:linear-gradient(125deg,#150D2E,#0B1B2A);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem;margin-bottom:1.5rem}
.codigo-afil{display:flex;align-items:center;gap:.65rem;background:var(--bg);
  border:1px dashed var(--violet);border-radius:var(--r);padding:.72rem 1rem;margin-top:.75rem}
.codigo-afil code{font-family:'Sora';font-size:1.15rem;font-weight:800;
  letter-spacing:.14em;color:var(--purple);flex:1}

/* Modal */
.modal-fondo{position:fixed;inset:0;background:rgba(5,7,14,.8);backdrop-filter:blur(7px);
  z-index:900;display:none;align-items:center;justify-content:center;padding:1.5rem}
.modal-fondo.abierto{display:flex;animation:aparece .22s ease}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;max-width:480px;width:100%;max-height:88vh;overflow-y:auto;
  animation:sube-modal .3s cubic-bezier(.16,1,.3,1)}
@keyframes sube-modal{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.modal h2{font-size:1.12rem;margin-bottom:.3rem}
.modal .cerrar{float:right;background:none;border:none;color:var(--muted);
  font-size:1.3rem;cursor:pointer;line-height:1}

/* Utilidades */
.cargando{display:inline-block;width:17px;height:17px;border:2px solid rgba(255,255,255,.2);
  border-top-color:var(--purple);border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.vacio{text-align:center;padding:2.6rem 1.5rem;color:var(--muted)}
.vacio .ic{font-size:2.6rem;margin-bottom:.6rem;opacity:.6}
.flex{display:flex} .entre{justify-content:space-between} .centro{align-items:center}
.gap{gap:.7rem} .mt{margin-top:1rem} .mb{margin-bottom:1rem}
.muted{color:var(--muted)} .peq{font-size:.78rem} .ok{color:var(--ok)} .bad{color:var(--bad)}
.oculto{display:none!important}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .panel{grid-template-columns:1fr}
  .lateral{position:fixed;left:0;top:66px;width:262px;z-index:150;
    transform:translateX(-100%);transition:transform var(--slow);
    box-shadow:8px 0 32px rgba(0,0,0,.5)}
  .lateral.abierto{transform:none}
  .wallets{grid-template-columns:1fr}
}
@media (max-width:768px){
  header{padding:0 1rem;gap:.8rem}
  nav{display:none}
  .hero{padding:2.2rem 1.2rem;min-height:auto;text-align:center;flex-direction:column}
  .hero-txt{max-width:100%}
  .hero p{margin-inline:auto}
  .confianza{justify-content:center;gap:1rem}
  .hero-kit{position:static;width:min(230px,62vw);margin:1.4rem auto 0}
  .sec,.contenido{padding:1.4rem 1rem}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.7rem}
  .toasts{left:1rem;right:1rem;bottom:1rem;max-width:none}
  .tabla-caja{overflow-x:auto}
  table{min-width:560px}
}

/* Accesibilidad: respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .kit img{filter:drop-shadow(0 0 9px var(--glow-v))}
}