/* Intro */
#intro{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--bg);pointer-events:none;animation:intro-out .3s var(--out) .86s forwards}
.intro-name{font-family:var(--serif);font-weight:500;font-size:clamp(40px,8vw,104px);letter-spacing:-.01em;clip-path:inset(-20% 100% -20% 0);animation:intro-wipe .62s var(--inout) .06s forwards;grid-area:1/1}
.intro-name b{color:var(--orange);font-weight:500}
.intro-line{grid-area:1/1;align-self:center;justify-self:center;width:min(88vw,900px);height:1px;margin-top:clamp(70px,13vw,160px);background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 22px 2px rgba(255,255,255,.55);transform:scaleX(0);transform-origin:left;animation:intro-line .62s var(--inout) .06s forwards}
@keyframes intro-wipe{to{clip-path:inset(-20% -2% -20% 0)}}
@keyframes intro-line{to{transform:scaleX(1)}}
@keyframes intro-out{to{opacity:0;visibility:hidden}}

/* ========== ESCENARIO ========== */
.hero{position:relative;height:calc(100svh - var(--barH));min-height:600px;overflow:hidden;isolation:isolate;background:radial-gradient(120% 70% at 50% 110%,#12131b 0%,#07080c 62%);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.atm{position:absolute;inset:0;opacity:0;transition:opacity .72s ease;pointer-events:none;z-index:0}
.spot{position:absolute;left:50%;top:-6%;width:min(1000px,150vw);height:74%;transform:translateX(-50%);filter:blur(26px);z-index:0;pointer-events:none}
.spot::before{content:"";position:absolute;inset:0;clip-path:polygon(40% 0,60% 0,92% 100%,8% 100%);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.012) 66%,transparent)}
.floor{position:absolute;inset:auto 0 0;height:var(--floorH,30%);background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 40%);border-top:1px solid rgba(255,255,255,.03);z-index:0;pointer-events:none;-webkit-mask:radial-gradient(70% 100% at 50% 0,#000,transparent);mask:radial-gradient(70% 100% at 50% 0,#000,transparent)}

.names{position:absolute;inset:0;z-index:1;pointer-events:none;will-change:transform}
.nm{position:absolute;left:50%;top:var(--nameTop,100px);transform:translate3d(calc(-50% + var(--ox,0px)),0,0);font-family:var(--serif);font-weight:500;font-optical-sizing:none;font-variation-settings:"opsz" 16;line-height:1;white-space:nowrap;letter-spacing:-.022em;opacity:0;transition:opacity .34s ease,transform .46s var(--out);background:linear-gradient(180deg,#fff 18%,rgba(255,255,255,.62) 72%,rgba(255,255,255,.34));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .12em}
.nm.on{opacity:1;--ox:0px}

.base{position:absolute;left:50%;top:var(--baseY,70%);width:var(--baseW,400px);aspect-ratio:4.4/1;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.base-disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,#23242e 0%,#14151c 58%,#0a0b10 100%);box-shadow:0 18px 50px rgba(0,0,0,.7),inset 0 2px 1px rgba(255,255,255,.14)}
.base-ring{position:absolute;inset:7% 5%;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);color:#fff;box-shadow:0 0 14px currentColor,0 0 44px currentColor,inset 0 0 22px currentColor;transition:color .5s ease}

.stage{position:absolute;inset:0;z-index:3;perspective:var(--persp,1400px);perspective-origin:50% 42%;cursor:grab}
.stage.drag{cursor:grabbing}
.arc{position:absolute;inset:0;transform-style:preserve-3d}
.c{position:absolute;left:50%;top:var(--cardY,50%);width:var(--cardW,300px);height:var(--cardH,470px);margin:calc(var(--cardH,470px)/-2) 0 0 calc(var(--cardW,300px)/-2);border-radius:clamp(16px,1.9vh,24px);will-change:transform;transform-style:flat;contain:layout style;box-shadow:0 30px 70px rgba(0,0,0,.6);-webkit-user-drag:none}
.face{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.face::before{content:"";position:absolute;right:-48%;bottom:-24%;width:130%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.075) 0 1px,transparent 1px 13px);opacity:.75}
.face::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 46% at 30% 0,rgba(255,255,255,.2),transparent 70%)}
.c-head,.c-foot{position:absolute;left:8%;right:8%;display:flex;justify-content:space-between;align-items:center;font-size:clamp(9.5px,1.25vh,12px);font-weight:600;color:rgba(255,255,255,.84);z-index:1}
.c-head{top:6%}
.c-foot{bottom:6%}
.c-foot b{font-weight:800;letter-spacing:.01em}
.c-foot b em{font-style:normal;color:#ffb48f}
.c-off{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(170deg,#101117,#08090d 70%);opacity:0}
.c-logo{position:absolute;left:14%;right:14%;top:33%;height:26%;display:grid;place-items:center;z-index:2}
.c.cerca .c-off,.c.cerca .c-logo{will-change:opacity}
/* La tarjeta del centro flota sola, sin ocupar el procesador. Se detiene al girar y fuera de pantalla. */
.c.activa{animation:flota 4.7s ease-in-out infinite alternate}
.hero.fuera .c.activa,.hero.moviendo .c.activa{animation-play-state:paused}
@keyframes flota{from{translate:0 -4px}to{translate:0 4px}}
.c-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;-webkit-user-drag:none;pointer-events:none}
.c-logo{grid-auto-rows:auto;align-content:center;justify-items:center;gap:6%}
.c-logo span{font-family:var(--sans);font-weight:800;font-size:calc(var(--cardW,300px)*.2);letter-spacing:-.03em;color:#fff}
.c-logo img.z6{max-width:44%;max-height:66%}
.c-logo img.z7{max-width:62%;max-height:80%}
.c-logo .sub{font-size:calc(var(--cardW,300px)*.1);font-weight:700;letter-spacing:-.01em}
.mini .c-logo .sub{font-size:13px}
.c-edge{position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:linear-gradient(155deg,rgba(255,255,255,.85),var(--g) 28%,rgba(255,255,255,.06) 58%,var(--g) 88%,rgba(255,255,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;z-index:3}
.c-shine{position:absolute;inset:-30% -70%;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.2) 49%,rgba(255,255,255,.04) 54%,transparent 60%);will-change:transform;pointer-events:none}
.c-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:2;pointer-events:none}

.lines{position:absolute;left:var(--m);right:var(--m);top:calc(env(safe-area-inset-top) + 84px);display:none}

.plan{position:absolute;left:var(--m);right:var(--m);bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:6;border-radius:20px;padding:14px 16px 14px;display:flex;flex-direction:column;gap:12px}
.plan-kind{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);font-weight:600;min-height:20px}
.plan-tag{padding:1px 8px;border:1px solid rgba(255,255,255,.2);border-radius:99px;font-size:11px;color:#d5d6dc}
.plan-line{font-size:16.5px;font-weight:700;letter-spacing:-.012em;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-line.long{font-size:14.5px!important}
.hero.small .c-foot b{display:none}
.hero.small .c-foot{justify-content:center}
.plan-price{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.plan-price strong{font-family:var(--serif);font-weight:500;font-optical-sizing:none;font-variation-settings:"opsz" 11;font-size:34px;line-height:1.05;font-variant-numeric:lining-nums}
.plan-price span{font-size:13px;color:#d5d6dc;font-weight:500}
.plan-price span b{color:#fff;font-weight:800}
.plan-actions{display:grid;grid-template-columns:1.25fr 1fr;gap:8px}
.plan-actions .cta,.plan-actions .ghost{min-height:46px;padding:0 12px}
.cta-b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;transform:translateY(10px);transition:opacity .16s ease,transform .22s var(--out)}
.cta-a{transition:opacity .16s ease,transform .22s var(--out)}
.cta.done .cta-a{opacity:0;transform:translateY(-10px)}
.cta.done .cta-b{opacity:1;transform:none}
.cta-b .i{width:18px;height:18px;stroke-width:2.4}

.ctrl{position:absolute;left:var(--m);right:var(--m);bottom:var(--ctrlB,240px);z-index:5;display:flex;align-items:center;gap:8px}
.ctrl .count{margin-right:auto}
.ctrl .round{width:42px;height:42px;background:rgba(10,11,16,.4)}
.cue{display:none}


@media (min-width:820px){
  .plan{left:var(--m);right:auto;bottom:clamp(24px,4.5vh,44px);width:340px;padding:18px 20px;border-radius:22px;gap:14px}
  .plan-line{font-size:18px}
  .plan-price strong{font-size:40px}
  .ctrl{left:auto;right:var(--m);bottom:clamp(24px,4.5vh,44px)!important;gap:10px}
  .ctrl .count{margin-right:12px}
  .ctrl .round{width:50px;height:50px}
  .count b{font-size:38px}
  .cue{position:absolute;left:50%;bottom:clamp(16px,2.6vh,26px);transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:#c9cbd3;white-space:nowrap}
  .cue .i{width:17px;height:17px;animation:nudge 2.4s var(--inout) infinite}
  @keyframes nudge{50%{transform:translateY(3px)}}
}

@media (min-width:820px) and (max-height:720px){
  .plan{padding:13px 16px;gap:10px;width:310px}
  .plan-price strong{font-size:32px}
  .cue{display:none}
}
@media (min-width:820px) and (max-width:1179px){
  .plan{width:300px;padding:14px 16px}
}
@media (max-width:370px){
  .plan-price strong{font-size:29px}
  .plan-line{font-size:15px}
}

/* El arco ya viene escrito en el HTML como enlaces */
a.c{display:block;color:inherit}
.js .c:not(:first-child){opacity:0}
.face{background:linear-gradient(165deg,var(--a),var(--b) 78%)}
.face,.c-off,.c-logo,.c-edge,.c-clip,.c-shine,.c-head,.c-foot{display:block}
.c-logo{display:grid}
.c-head,.c-foot{display:flex}
.c-edge{--g:inherit}
.nm{font-size:min(calc(90vw/(var(--n,8)*.47)),30svh)}

/* Celular: lo que cuesta a la tarjeta gráfica y casi no se nota en pantalla chica */
@media (max-width:819px){
  .spot{filter:none}
  .spot::before{clip-path:none;background:radial-gradient(42% 100% at 50% 0,rgba(255,255,255,.1),transparent 80%)}
  .floor{-webkit-mask:none;mask:none;background:radial-gradient(70% 100% at 50% 0,rgba(255,255,255,.03),transparent 70%)}
  .c{box-shadow:0 14px 34px rgba(0,0,0,.55)}
  .base-ring{transition:none;box-shadow:0 0 12px currentColor,inset 0 0 14px currentColor}
  .base-disc{box-shadow:0 10px 26px rgba(0,0,0,.7),inset 0 2px 1px rgba(255,255,255,.14)}
}
@media (prefers-reduced-motion:reduce){.c.activa{animation:none}}