/* Chinito Venezuela - tarjeta digital. CSS propio, sin fuentes ni recursos externos. */
:root{color-scheme:dark;
  --y:#F2C41A; --b:#16568C; --r:#EE1C2C;
  --ink:#fff; --soft:#d3d9e3; --bg:#000;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --disp:"Arial Rounded MT Bold","Avenir Next Rounded","Avenir Next","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:#000;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100svh;background:#000;color:var(--ink);font-family:var(--font);line-height:1.4;overflow-x:clip;position:relative}
img{max-width:100%;display:block}
a{color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:99;background:var(--y);color:#1b1300;padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:12px}

/* fondo vivo */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
   radial-gradient(60vmax 40vmax at 50% -8%,rgba(22,86,140,.38),transparent 62%),
   radial-gradient(50vmax 30vmax at 100% 100%,rgba(238,28,44,.2),transparent 65%),
   radial-gradient(45vmax 28vmax at 0% 85%,rgba(242,196,26,.14),transparent 65%)}
#sparks{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#waves{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.wave{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(242,196,26,.8);box-shadow:0 0 18px rgba(242,196,26,.45),inset 0 0 12px rgba(22,86,140,.5);transform:translate(-50%,-50%) scale(.3);opacity:.9;animation:wave 1.2s cubic-bezier(.16,.7,.3,1) forwards}
@keyframes wave{to{transform:translate(-50%,-50%) scale(12);opacity:0}}

.page{position:relative;z-index:2;width:min(100%,560px);margin:0 auto;padding-block:14px 28px;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}

/* idioma */
.langbar{display:flex;justify-content:flex-end;position:relative;z-index:5}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:999px;overflow:hidden;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.lang button{appearance:none;border:0;background:transparent;color:var(--soft);font:700 .8rem var(--font);letter-spacing:.06em;padding:8px 14px;min-width:46px;min-height:36px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--y);color:#1b1300}

/* hero */
.hero{position:relative;text-align:center;padding:4px 0 18px}
.halo{position:absolute;left:50%;top:44%;width:min(78vw,330px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:conic-gradient(from 0deg,var(--y),var(--b),var(--r),var(--y));filter:blur(46px);opacity:.38;animation:haloSpin 14s linear infinite;pointer-events:none}
@keyframes haloSpin{to{rotate:360deg}}
.logo-wrap{position:relative;width:min(52vw,220px);margin:0 auto;perspective:900px;cursor:pointer;touch-action:manipulation}
.logo-in{transform-style:preserve-3d}
.logo-in.spin{animation:logoSpin 1s cubic-bezier(.3,.7,.2,1)}
@keyframes logoSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.logo-float{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px)}}
.logo-tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.logo{width:100%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 97%,transparent);mask-composite:intersect;filter:drop-shadow(0 14px 26px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(242,196,26,.18))}
.tagline{position:relative;margin-top:8px;color:var(--soft);font-size:.95rem}

.deco i{position:absolute;display:block;pointer-events:none}
.fl-heart{width:24px;height:24px;background:var(--r);clip-path:path('M12 21s-8-5.500-8-11a4.500 4.500 0 0 1 8-2.800A4.500 4.500 0 0 1 20 10c0 5.500-8 11-8 11z');animation:bob 5s ease-in-out infinite}
.fl-star{width:22px;height:22px;background:var(--y);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%);animation:bob 4.4s ease-in-out infinite}
.h1{left:6%;top:30%;scale:1.1}.h2{right:5%;top:56%;scale:.75;animation-delay:-2s}
.s1{right:9%;top:12%;animation-delay:-1s}.s2{left:10%;top:68%;scale:.7;animation-delay:-3s}.s3{left:20%;top:6%;scale:.55;animation-delay:-2s}
@keyframes bob{50%{transform:translateY(-10px) rotate(12deg)}}

/* botones 3D */
.stack{display:flex;flex-direction:column;gap:14px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.btn{
  --depth:6px;--c:var(--y);--c2:#ff9a1f;--edge:#6d5400;--ic:#fff;
  position:relative;display:flex;align-items:center;gap:14px;width:100%;
  padding:14px 16px;border-radius:22px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 34%,transparent),transparent 58%),
    linear-gradient(160deg,color-mix(in srgb,var(--c) 20%,#101014),#07070a 75%);
  box-shadow:0 var(--depth) 0 var(--edge),0 calc(var(--depth) + 12px) 26px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -12px 22px rgba(0,0,0,.35);
  transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s,opacity .3s,filter .3s;
  will-change:transform;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);
  transform:translateX(-120%);animation:sheen 5.5s ease-in-out infinite}
.btn:nth-child(2)::before{animation-delay:-1.5s}.btn:nth-child(3)::before{animation-delay:-3s}
@keyframes sheen{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.btn:hover{--ty:-3px;border-color:var(--c)}
.btn:active{--ty:3px;--depth:2px}
.txt{display:flex;flex-direction:column;min-width:0;flex:1;overflow-wrap:anywhere}
.txt strong{font:800 1.08rem var(--disp);letter-spacing:.01em}
.txt small{font-size:.8rem;color:var(--soft);margin-top:1px}
.arr{font-size:1.9rem;line-height:1;color:var(--c);transition:translate .25s}
.btn:hover .arr{translate:4px 0}
.full{padding:16px 18px}
.full .txt strong{font-size:1.18rem}

.tile{flex-direction:column;justify-content:center;text-align:center;gap:10px;padding:18px 10px 16px;min-height:150px}
.tile .txt{align-items:center;flex:0 1 auto}

.c-gold{--c:#F2C41A;--c2:#ff9a1f;--edge:#7a5d00;--ic:#2b1d00}
.c-blue{--c:#3b8be0;--c2:#16568C;--edge:#0a2c4d}
.c-pink{--c:#f0447f;--c2:#a22ad8;--edge:#561450}
.c-fb{--c:#2b86ff;--c2:#1458c9;--edge:#0a2a63}
.c-red{--c:#ff3b4a;--c2:#b3101d;--edge:#5a0710}
.c-cyan{--c:#27d3f0;--c2:#0b83a6;--edge:#05455a}
.c-green{--c:#2fe07a;--c2:#128a45;--edge:#08462a}
.c-game{--c:#F2C41A;--c2:#EE1C2C;--edge:#6d1a12;--ic:#fff}
.c-game{background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(242,196,26,.3),transparent 58%),
    linear-gradient(120deg,rgba(242,196,26,.2),rgba(22,86,140,.25) 50%,rgba(238,28,44,.25)),#07070a}

/* iconos-moneda que giran sobre sí mismos */
.ico{flex:0 0 auto;width:58px;height:58px;perspective:420px;display:block}
.tile .ico{width:64px;height:64px}
.coin{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;position:relative;color:var(--ic);
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--c) 85%,#fff) 0,var(--c) 38%,var(--c2) 100%);
  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 5px 0 var(--edge),0 10px 18px rgba(0,0,0,.55),inset 0 2px 5px rgba(255,255,255,.55),inset 0 -6px 10px rgba(0,0,0,.28);
  transform-style:preserve-3d;animation:coin 6s cubic-bezier(.5,0,.2,1) infinite;animation-delay:var(--cd,0s)}
.coin::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed rgba(255,255,255,.45);pointer-events:none}
.coin svg{width:54%;height:54%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.coin svg .fl{fill:currentColor;stroke:none}
@keyframes coin{0%,62%{transform:rotateY(0)}84%,100%{transform:rotateY(360deg)}}
.btn:hover .coin,.btn:focus-visible .coin{animation-duration:1.8s}
.stack>.btn:nth-child(1) .coin{--cd:-.2s}
.grid .btn:nth-child(1) .coin{--cd:-1s}.grid .btn:nth-child(2) .coin{--cd:-2s}.grid .btn:nth-child(3) .coin{--cd:-3s}
.grid .btn:nth-child(4) .coin{--cd:-4s}.grid .btn:nth-child(5) .coin{--cd:-5s}.grid .btn:nth-child(6) .coin{--cd:-.5s}
.stack>.btn:last-child .coin{--cd:-2.5s}

.rip{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 62%);transform:translate(-50%,-50%) scale(0);animation:rip .7s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* resaltar el botón sobre el que estás (solo con mouse) */
@media (hover:hover) and (pointer:fine){
  .grid:has(.btn:hover) .btn:not(:hover){opacity:.7;filter:saturate(.75)}
}

/* entrada */
.js .rv{opacity:0;translate:0 22px;transition:opacity .6s ease var(--d,0s),translate .6s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s,filter .3s}
.js .rv.in{opacity:1;translate:0 0}

/* pie */
.foot{margin-top:30px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.powered{display:inline-block;color:#aeb6c4;font-size:.78rem;text-decoration:none;letter-spacing:.05em;padding:8px 12px;border-radius:999px;opacity:.9}
.powered b{color:var(--y);font-weight:700}
.powered:hover{opacity:1}
.legal{display:flex;gap:10px;align-items:center;font-size:.78rem;color:#aeb6c4}
.legal a{color:#aeb6c4;padding:8px 6px}

/* modal / Snake */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.84);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s ease;overflow-y:auto}
.modal.open{opacity:1}
.m-card{position:relative;width:min(100%,400px);margin:auto;padding:18px 16px 16px;border-radius:26px;text-align:center;
  background:linear-gradient(165deg,#15151b,#050507);border:1px solid rgba(242,196,26,.5);
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 24px 60px rgba(0,0,0,.8),0 0 40px rgba(22,86,140,.35);
  transform:translateY(16px) scale(.96);transition:transform .4s cubic-bezier(.2,.8,.2,1);outline:none}
.modal.open .m-card{transform:none}
.m-card h2{font:800 1.4rem var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--y);margin-bottom:8px}
.m-close{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.scorebar{display:flex;justify-content:center;gap:22px;color:var(--soft);font-size:.92rem;margin-bottom:10px}
.scorebar b{color:#fff;font-variant-numeric:tabular-nums}
.board{position:relative;width:min(100%,340px);aspect-ratio:1;margin:0 auto;border-radius:16px;overflow:hidden;border:2px solid rgba(242,196,26,.6);background:#05070b;box-shadow:inset 0 0 30px rgba(22,86,140,.35),0 0 24px rgba(242,196,26,.18);touch-action:none}
.board canvas{display:block;width:100%;height:100%}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.overlay.off{display:none}
.ov-t{font:800 1.35rem var(--disp);color:#fff}
.ov-s{font-size:.88rem;color:var(--soft);max-width:26ch}
.opt{width:auto;min-width:150px;justify-content:center;margin-top:6px;padding:12px 26px;text-align:center}
.opt .txt{align-items:center;flex:0 1 auto}
.pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-areas:". up ." "left . right" ". down .";gap:8px;justify-content:center;margin-top:14px}
.pb{width:64px;height:56px;border-radius:16px;border:1px solid rgba(242,196,26,.5);cursor:pointer;color:#fff;font-size:1.25rem;
  background:linear-gradient(160deg,#242a36,#0c0e13);box-shadow:0 4px 0 #3a2f05,0 8px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2);touch-action:manipulation;transition:transform .12s,box-shadow .12s}
.pb:active{transform:translateY(3px);box-shadow:0 1px 0 #3a2f05}
.pb.up{grid-area:up}.pb.left{grid-area:left}.pb.right{grid-area:right}.pb.down{grid-area:down}
@media (hover:hover) and (pointer:fine){.pad{opacity:.85}}

/* páginas legales */
.legalpage{background:#000}
.pol{position:relative;z-index:2;width:min(100%,720px);margin:0 auto;padding:22px 18px 10px;color:#e8ecf3;line-height:1.65}
.pol .home{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--y);font-weight:700;padding:6px 0}
.pol .home img{border-radius:12px}
.pol .upd{color:#aeb6c4;font-size:.85rem;margin:10px 0 6px}
.pol .sub{display:flex;gap:14px;margin:8px 0 18px;flex-wrap:wrap}
.pol .sub a{color:#cfd6e2;padding:6px 0}.pol .sub a[aria-current="page"]{color:var(--y);font-weight:700}
.pol section{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.pol h1{font:800 1.5rem var(--disp);color:#fff}
.pol h2{font-size:1.02rem;margin-top:16px;color:var(--y)}
.pol p{margin-top:6px;color:#d6dbe4}
.pol a{color:#8fc4ff}
.pol-foot{text-align:center;padding:20px 18px 40px;position:relative;z-index:2}

@media (max-width:360px){
  .page{padding-left:12px;padding-right:12px}.grid{gap:10px}
  .tile{min-height:140px;padding:16px 6px 14px}.tile .ico{width:56px;height:56px}
  .txt strong{font-size:1rem}.txt small{font-size:.74rem}
}
@media (min-width:700px){.page{padding-top:26px}.tile{min-height:160px}}

/* ahorro de batería / movimiento reducido */
.lite .halo{animation:none;filter:blur(34px)}.lite .btn::before{display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;translate:0 0}
}