/* Paleta: tinta violeta profunda + coral de la criatura; luces coral (cálida) e índigo (fría) */
:root{
  --bg:#0d0b14;--fg:#fff3ee;--muted:#bfb1ae;
  --coral:#f25a45;--soft:#ff8a73;--peach:#ffd9cc;--amber:#ffb86b;
  --ease:cubic-bezier(.16,1,.3,1);
  --u:clamp(10px,3.2vw,16px);          /* tamaño de la criatura */
  --size:clamp(40px,7.4vw,108px);      /* tamaño de los números */
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--fg);overflow-x:hidden;
  font-family:"Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Luces de fondo: solo transform y opacity */
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 108%,#2b1522,rgba(43,21,34,0) 60%),linear-gradient(180deg,#0d0b14,#120e1c)}
.light{position:absolute;border-radius:50%;aspect-ratio:1;will-change:transform,opacity}
.l-coral{left:50%;top:48%;width:min(980px,150vw);margin:calc(min(980px,150vw)/-2) 0 0 calc(min(980px,150vw)/-2);
  background:radial-gradient(circle,rgba(242,90,69,.3),rgba(242,90,69,0) 60%);opacity:.5;
  transition:opacity 1.4s ease;animation:breathe 8s ease-in-out infinite}
.open .l-coral{opacity:1}
.l-cool{left:-12%;top:-22%;width:min(760px,110vw);
  background:radial-gradient(circle,rgba(111,92,255,.24),rgba(111,92,255,0) 62%);animation:drift 16s ease-in-out infinite alternate}

.stage{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:max(32px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}

/* Criatura 3D: cajas con 6 caras (HTML+CSS, sin imágenes ni librerías) */
.logo-wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.hit{position:absolute;inset:-6px;z-index:3;margin:0;padding:0;border:0;border-radius:28px;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hit:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.scene{position:relative;width:calc(var(--u)*14);height:calc(var(--u)*11);perspective:calc(var(--u)*60);perspective-origin:50% 35%;
  transition:transform .6s var(--ease)}
.hit:hover+.scene{transform:scale(1.06)}
.hit:active+.scene{transform:scale(.95);transition-duration:.15s}
.hop,.bob,.tilt,.flip,.spin,.box{transform-style:preserve-3d}
.hop,.bob,.tilt,.flip,.spin{position:absolute;inset:0}
.bob{animation:bob 3.2s ease-in-out infinite alternate}
.tilt{transform:rotateX(-14deg)}
.spin{transform:rotateY(-28deg);animation:spin 14s linear infinite;will-change:transform}
.box{position:absolute;left:50%;top:50%;width:0;height:0;
  --fr:#f25a45;--bk:#bf3d2e;--lf:#e8523f;--rt:#c8402f;--tp:#ff8068;--bt:#9e3326;
  transform:translate3d(calc(var(--x)*var(--u)),calc(var(--y)*var(--u)),calc(var(--z)*var(--u)))}
.eye{--fr:#0f0f12;--bk:#0f0f12;--lf:#1c1c22;--rt:#1c1c22;--tp:#34343c;--bt:#0f0f12}
.f{position:absolute;left:0;top:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--c);box-shadow:0 0 0 .6px var(--c)}
.fr,.bk{width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
.lf,.rt{width:calc(var(--d)*var(--u));height:calc(var(--h)*var(--u))}
.tp,.bt{width:calc(var(--w)*var(--u));height:calc(var(--d)*var(--u))}
.fr{--c:var(--fr);transform:translate(-50%,-50%) translateZ(calc(var(--d)*var(--u)/2))}
.bk{--c:var(--bk);transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d)*var(--u)/2))}
.rt{--c:var(--rt);transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--w)*var(--u)/2))}
.lf{--c:var(--lf);transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w)*var(--u)/2))}
.tp{--c:var(--tp);transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--h)*var(--u)/2))}
.bt{--c:var(--bt);transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h)*var(--u)/2))}
.floor{position:absolute;left:50%;bottom:calc(var(--u)*.2);width:calc(var(--u)*9);height:calc(var(--u)*1.5);margin-left:calc(var(--u)*-4.5);border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.6),rgba(0,0,0,0) 70%);animation:shadow 3.2s ease-in-out infinite alternate}

/* Apertura: salto con squash, giro rápido, ondas de luz y píxeles */
.open .hop{animation:hop 1.1s cubic-bezier(.3,.7,.3,1)}
.open .flip{animation:flip 1.5s var(--ease)}
.shock{position:absolute;left:50%;top:50%;width:calc(var(--u)*6);aspect-ratio:1;margin:calc(var(--u)*-3) 0 0 calc(var(--u)*-3);
  border-radius:50%;border:1.5px solid rgba(255,138,115,.8);opacity:0}
.open .shock{animation:shock 1.5s cubic-bezier(.1,.7,.2,1) .35s}
.open .s2{animation-delay:.55s}
.px{position:absolute;left:50%;top:50%;width:calc(var(--u)*.55);aspect-ratio:1;opacity:0}
.c0{background:var(--coral)}.c1{background:var(--soft)}.c2{background:var(--peach)}.c3{background:var(--amber)}
.open .px{animation:burst 1.2s cubic-bezier(.1,.7,.2,1) .4s backwards}

/* Panel del contador (0fr → 1fr) y tarjetas */
.reveal{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows 1.1s var(--ease)}
.open .reveal{grid-template-rows:1fr}
.reveal-inner{min-height:0;overflow:hidden}
.reveal-content{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,3vw,32px);padding:clamp(40px,7vw,64px) 8px 12px}
.timer{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.8vw,22px)}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding:clamp(16px,2.2vw,30px) clamp(18px,2.8vw,40px) clamp(14px,1.8vw,22px);border-radius:clamp(18px,2.2vw,28px);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 40px -26px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-6px)}
.card.sec{border-color:rgba(242,90,69,.35);box-shadow:0 22px 40px -26px rgba(242,90,69,.45),inset 0 1px 0 rgba(255,138,115,.5)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%)}
.open .card{animation:unfold 1.1s var(--ease) calc(.5s + var(--i)*.12s) backwards;transform-origin:50% 0}
.open .card::after{animation:sweep 1.4s ease calc(1s + var(--i)*.12s)}
.mask{overflow:hidden}
.num{display:block;font-size:var(--size);font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--peach);background:linear-gradient(180deg,#fff 0%,var(--peach) 55%,var(--soft) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.open .num{animation:slideup 1s var(--ease) calc(.75s + var(--i)*.12s) backwards}
.lbl{margin-top:12px;font-size:clamp(11px,1.4vw,13px);letter-spacing:.14em;color:var(--muted)}
.open .lbl{animation:fade .8s ease calc(1.1s + var(--i)*.12s) backwards}
.tick{position:absolute;top:14px;right:14px;width:6px;height:6px;border-radius:50%;background:var(--coral)}
.tick i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--soft);opacity:0}
.caption{margin:0;font-size:clamp(18px,2.4vw,24px);color:var(--peach);text-align:center}
.caption:empty{display:none}
.open .caption{animation:fade 1s ease .8s backwards}

@media (max-width:560px){
  :root{--size:clamp(48px,20vw,84px)}
  .timer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:420px}
}

@keyframes spin{from{transform:rotateY(-28deg)}to{transform:rotateY(332deg)}}
@keyframes flip{to{transform:rotateY(720deg)}}
@keyframes bob{from{transform:translateY(calc(var(--u)*-.3))}to{transform:translateY(calc(var(--u)*.3))}}
@keyframes shadow{from{transform:scale(1.04);opacity:.9}to{transform:scale(.86);opacity:.6}}
@keyframes hop{0%{transform:none}18%{transform:scale(1.1,.86)}45%{transform:translateY(calc(var(--u)*-3.2)) scale(.93,1.1)}
  72%{transform:scale(1.08,.9)}86%{transform:scale(.97,1.03)}100%{transform:none}}
@keyframes shock{from{opacity:.8;transform:scale(.4)}to{opacity:0;transform:scale(3.6)}}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}12%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)*var(--u)),calc(-50% + var(--dy)*var(--u))) rotate(var(--r)) scale(.2)}}
@keyframes unfold{from{opacity:0;transform:perspective(800px) rotateX(-75deg) translateY(-20px) scale(.92)}to{opacity:1;transform:none}}
@keyframes slideup{from{transform:translateY(105%)}to{transform:none}}
@keyframes sweep{to{transform:translateX(120%)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes breathe{0%,100%{transform:scale(.9)}50%{transform:scale(1.1)}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(8%,10%)}}

/* Accesibilidad: reducir movimiento (la criatura queda quieta en 3D) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .px,.shock,.card::after{display:none}
}