/* Capa de animación de NoFee. Todo se ve bien sin JS: estas reglas solo añaden escenas. */

/* Titulares partidos en líneas para la entrada con máscara */
.split .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split .ln > span { display: inline-block; will-change: transform; }

/* Ticket en 3D */
.ticket-stage { perspective: 1200px; }
.ticket { will-change: transform; transform-style: preserve-3d; }

/* Cursor (solo con ratón) */
.cursor { position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--pink);
  pointer-events: none; z-index: 50; mix-blend-mode: multiply; opacity: 0; transition: width .25s, height .25s, margin .25s, opacity .3s; }
.cursor.is-on { opacity: 1; }
.cursor.is-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Cintas de texto */
.marquee { overflow: hidden; background: var(--ink); color: #fff; padding-block: 28px; display: grid; gap: 8px; border-block: 1px solid #2A2150; }
.marquee__row { display: flex; white-space: nowrap; }
.marquee__track { display: flex; flex: none; gap: 0; will-change: transform; }
.marquee__track span { font: 800 clamp(40px, 7vw, 104px)/1 var(--display); letter-spacing: -0.02em; padding-right: .6em; position: relative; }
.marquee__track span::after { content: ""; position: absolute; right: .17em; top: 50%; width: .26em; height: .26em; margin-top: -.13em; border-radius: 50%; background: var(--pink); }
.marquee__row--rev .marquee__track span { color: transparent; -webkit-text-stroke: 2px #8E7BFF; }
.marquee__row--rev .marquee__track span::after { background: #8E7BFF; }

/* Escena FEE */
.kill { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.kill__pin { height: 100vh; min-height: 560px; display: grid; place-items: center; position: relative; }
.kill__word { position: relative; display: flex; font: 800 min(36vw, 52vh)/0.8 var(--display); letter-spacing: -0.05em; color: #fff; }
.kill__word span { display: inline-block; will-change: transform; }
.kill__slash { position: absolute; left: -6%; right: -6%; top: 46%; height: .11em; background: var(--pink); border-radius: 999px;
  transform: rotate(-8deg) scaleX(1); transform-origin: left center; }
.kill__zero { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 12px; padding-inline: 16px; opacity: 0; }
.kill__zero strong { font: 800 clamp(64px, 15vw, 220px)/0.9 var(--display); letter-spacing: -0.04em; color: #fff; }
.kill__zero p { font-size: clamp(18px, 2vw, 26px); color: #C9C2E8; }
.no-js .kill__word, .reduced .kill__word { display: none; }
.no-js .kill__zero, .reduced .kill__zero { opacity: 1; position: static; }
.no-js .kill__pin, .reduced .kill__pin { height: auto; min-height: 0; padding-block: 120px; }

/* Comparativa: tachado que se dibuja */
.compare s { text-decoration: none; background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 55% / 100% 3px; }

/* Pasos en horizontal (escritorio) */
.steps-sec { padding-block: 104px; background: var(--paper); overflow: hidden; }
.steps-head { margin-bottom: 56px; }
.steps-sec .steps { margin: 0; }
.phone { border-radius: 30px; border: 7px solid var(--ink); background: var(--ink); overflow: hidden; position: relative; box-shadow: 0 40px 80px -40px rgb(22 15 51 / .55); }
.phone img { border-radius: 0; border: 0; width: 100%; }
.steps .phone { max-width: 300px; }
.steps__txt h3 { margin-top: 26px; }
@media (min-width: 961px) {
  .js .steps-sec { padding-block: 0; }
  .js .steps-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 72px; }
  .js .steps { display: flex; gap: 8vw; padding-left: max(16px, calc((100vw - var(--wrap)) / 2)); padding-right: 30vw; width: max-content; }
  .js .steps li { width: min(420px, 30vw); display: grid; grid-template-columns: 1fr; }
  .js .steps .phone { max-width: none; width: min(300px, 22vw); }
}

/* Puerta: línea de escaneo */
.door__shots .phone { width: 46%; max-width: 260px; border-color: #2A2150; }
.door__shots .phone:last-child { margin-top: 64px; }
.door__shots img { width: 100%; border: 0; border-radius: 0; max-width: none; margin: 0 !important; }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #fff; box-shadow: 0 0 18px 6px rgb(255 255 255 / .7);
  animation: scan 2.4s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes scan { from { top: 18%; } to { top: 78%; } }

/* Panel con perspectiva */
.panel__stage { perspective: 1400px; }
.panel__img { transform-origin: 50% 0; }

/* Precio: se abre en círculo */
.price { clip-path: circle(150% at 50% 50%); }

/* Botones magnéticos */
.magnet { will-change: transform; }

@media (max-width: 640px) {
  .marquee { padding-block: 18px; }
  .door__shots .phone:last-child { margin-top: 40px; }
}

/* Sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  .scanline { animation: none; top: 50%; }
  .cursor { display: none; }
}
.steps .phone img { border: 0; border-radius: 0; max-width: none; width: 100%; }