/* ───────────────────────────────────────────────────────────────────────────
   P2Pilot · landing pública
   Dirección: editorial venezolano (papel + tinta navy + ámbar). Sin pipeline:
   fuentes self-hosted, CSS a mano. Colores derivados de la marca --p2p-*.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('/fonts/landing/archivo-latin-ext.woff2?v=wdth') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url('/fonts/landing/archivo-latin.woff2?v=wdth') format('woff2')}

:root {
    color-scheme: light;
    --ink: #071848;
    --paper: #f7f5ee;
    --paper2: #efece1;
    --panel: #fffdf8;
    --line: #ded8c9;
    --line-strong: #c9c1ad;
    --muted: #596277;
    --amber: #f0a500;
    --amber-ink: #8a5a00;
    --yellow: #ffca05;
    --green: #1b7049;
    --red: #c8424b;
    --blue: #255fc3;
    --night: #071848;
    --night2: #0a2352;
    --night-line: rgba(255, 255, 255, .14);
    --night-text: #eaf0ff;
    --night-muted: #a9b6d6;
    --night-amber: #ffca05;
    --night-green: #71d49b;
    --chip: #071848;
    --chip-line: transparent;
    --shadow: 0 1px 2px rgba(31, 43, 79, .06), 0 10px 28px rgba(31, 43, 79, .10);
    --shadow-lg: 0 2px 4px rgba(31, 43, 79, .07), 0 24px 60px rgba(31, 43, 79, .16);
    --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --wrap: 76rem;
}

/* Oscuro: sigue al teléfono salvo que el visitante elija (data-theme en <html>, lo pone el selector del encabezado). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ink: #f6f8fc;
        --paper: #040d19;
        --paper2: #071321;
        --panel: #0a1726;
        --line: #203249;
        --line-strong: #33465f;
        --muted: #9eabc0;
        --amber: #f7c600;
        --amber-ink: #ffcf12;
        --yellow: #ffcf12;
        --green: #71d49b;
        --red: #ff737c;
        --blue: #69a6ff;
        --night: #03080f;
        --night2: #061225;
        --night-text: #f6f8fc;
        --night-muted: #9eabc0;
        --chip: #10285a;
        --chip-line: #f7c600;
        --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .35);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .5);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f6f8fc;
    --paper: #040d19;
    --paper2: #071321;
    --panel: #0a1726;
    --line: #203249;
    --line-strong: #33465f;
    --muted: #9eabc0;
    --amber: #f7c600;
    --amber-ink: #ffcf12;
    --yellow: #ffcf12;
    --green: #71d49b;
    --red: #ff737c;
    --blue: #69a6ff;
    --night: #03080f;
    --night2: #061225;
    --night-text: #f6f8fc;
    --night-muted: #9eabc0;
    --chip: #10285a;
    --chip-line: #f7c600;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .5);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.02rem;
    line-height: 1.62;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }

::selection { background: var(--yellow); color: #071848; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.skip {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: .5rem;
    font-weight: 700; text-decoration: none; transition: top .15s;
}
.skip:focus { top: 1rem; }

.grain {
    position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grain { mix-blend-mode: screen; opacity: .05; } }
:root[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .05; }

/* ── Tipografía editorial ─────────────────────────────────────────────────── */
.h2 {
    font-family: var(--sans);
    font-stretch: 68%;
    font-weight: 800;
    font-size: clamp(2.5rem, 6.6vw, 4.6rem);
    line-height: .95;
    letter-spacing: -.008em;
    margin: .35rem 0 0;
    text-wrap: balance;
}

.h2--onDark, .h2--onDark em { color: var(--night-text); }
.h2--onDark em { color: var(--night-amber); }

.eyebrow {
    font-family: var(--sans);
    font-weight: 600;
    font-size: .95rem;
    color: var(--amber-ink);
    margin: 0;
}

.lede {
    font-size: clamp(1.06rem, 1.9vw, 1.28rem);
    line-height: 1.55;
    color: var(--muted);
    max-width: 44rem;
    margin: .9rem 0 0;
}
.lede--onDark { color: var(--night-muted); }
.hint { color: var(--muted); font-size: .98rem; margin-top: 1rem; }
.hint b { color: var(--ink); }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .68rem 1.15rem; border-radius: .55rem; border: 1.5px solid transparent;
    font-family: var(--sans); font-weight: 700; font-size: .95rem; text-decoration: none;
    cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, translate .35s cubic-bezier(.32, .72, 0, 1);
    position: relative; overflow: hidden; isolation: isolate; translate: var(--mx, 0) var(--my, 0);
}
.btn.btn:active { transform: scale(.96); transition-duration: .08s; }
/* Los principales: un brillo que los cruza al pasar por encima. */
.btn--solid::after, .btn--amber::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .8s cubic-bezier(.32, .72, 0, 1);
}
.btn--solid:hover::after, .btn--amber:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .btn, .btn::after { transition: none; translate: none; } .btn.btn:active { transform: none; } }
.btn--lg { padding: .9rem 1.5rem; font-size: 1.05rem; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--amber { background: var(--yellow); color: #071848; }
.btn--amber:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(255, 202, 5, .35); }
.btn--onDark { background: transparent; color: var(--night-text); border-color: var(--night-line); }
.btn--onDark:hover { border-color: var(--night-text); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--panel); }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.top {
    position: sticky; top: 0; z-index: 20;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.top__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.4rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand__mark { width: 2.15rem; height: 2.15rem; flex-shrink: 0; }
.brand__mark--sm { width: 1.9rem; height: 1.9rem; }
.brand__tile { fill: #071848; }
.brand__word { font-weight: 800; font-size: 1.22rem; letter-spacing: -.02em; }
.brand__word b { color: var(--amber-ink); }
.top__nav { margin-left: auto; display: flex; gap: 1.5rem; font-size: .9rem; font-weight: 600; }
.top__nav a { color: var(--muted); text-decoration: none; }
.top__nav a:hover { color: var(--ink); }
.top__cta { padding: .55rem 1rem; }
.theme { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; border: 1.5px solid var(--line-strong);
    background: transparent; color: var(--ink); cursor: pointer; flex-shrink: 0; transition: border-color .2s, background .2s; }
.theme:hover { border-color: var(--ink); background: var(--panel); }
.theme svg { width: 1.15rem; height: 1.15rem; }
.theme__sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme__sun { display: block; } :root:not([data-theme="light"]) .theme__moon { display: none; } }
:root[data-theme="dark"] .theme__sun { display: block; }
:root[data-theme="dark"] .theme__moon { display: none; }

@media (max-width: 860px) {
    .top__inner { gap: .5rem; }
    .top__nav { display: none; }
    .top__nav + .theme { margin-left: auto; }
    .top__cta { padding: .5rem .75rem; font-size: .88rem; }
}
/* Teléfono: logo, tema y «Prueba gratis». «Entrar» sigue en el cierre (y quien ya tiene cuenta entra desde la app). */
@media (max-width: 419px) { .top__enter { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { padding: clamp(2.5rem, 7vw, 6rem) 0 clamp(3rem, 8vw, 6.5rem); }
.hero__grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 6vw, 4.5rem); align-items: center;
}
.hero__title {
    font-family: var(--sans); font-stretch: 66%; font-weight: 850;
    font-size: clamp(3.3rem, 6.6vw, 5.6rem); line-height: .9; letter-spacing: -.012em;
    margin: .6rem 0 0; text-wrap: balance;
}
.hero__doubt { color: var(--amber-ink); }
.hero__lede { font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 34rem; margin: 1.4rem 0 0; }
.fchip {
    position: relative; overflow: hidden; display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: .35rem .7rem;
    margin: 0 0 1.2rem; padding: .45rem .9rem .5rem .45rem; border-radius: 999px; max-width: 100%;
    background: var(--chip); color: #f6f8fc; border: 1.5px solid var(--chip-line); text-decoration: none; box-shadow: var(--shadow);
    animation: chip-in .6s cubic-bezier(.2, .8, .2, 1) both;
}
.fchip::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--yellow) 45%, transparent) 50%, transparent 65%);
    transform: translateX(-100%); animation: chip-shine 4.5s 1.6s ease-in-out infinite;
}
.fchip:hover { transform: translateY(-1px); }
.fchip__badge { grid-row: span 2; padding: .3rem .65rem; border-radius: 999px; background: #ffca05; color: #071848; font-weight: 800; font-size: .82rem; }
.fchip__text { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.fchip__text b { color: #ffca05; font-size: 1.15rem; font-stretch: 75%; font-weight: 850; }
.fchip__bar { height: 4px; border-radius: 999px; background: rgba(246, 248, 252, .22); overflow: hidden; }
.fchip__bar i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: #ffca05; transition: width .6s ease; }
.fchip.is-bump { animation: chip-bump .7s ease; }
@keyframes chip-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes chip-shine { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
@keyframes chip-bump { 30% { transform: scale(1.06); box-shadow: 0 0 0 6px color-mix(in srgb, var(--yellow) 35%, transparent); } }

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

/* El video del día: notificaciones que P2Pilot resolvió y, al final, el recibo cuadrado. */
.hero__film { margin: 0; justify-self: center; width: min(32rem, 100%); }
.hero__video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1.4rem; box-shadow: var(--shadow-lg); background: #071848; }
.hero__film-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
}
/* Móvil: la primera pantalla trae el título, el video y el botón. El cupo va en una línea, sin rótulo ni segundo botón. */
@media (max-width: 640px) {
    .hero { padding: 1rem 0 2.5rem; }
    .hero__grid { gap: 0; }
    .hero__copy { display: contents; }
    .fchip { order: 1; justify-self: start; margin: 0 0 .9rem; padding: .3rem .75rem .35rem .3rem; gap: .2rem .5rem; box-shadow: none; }
    .fchip__badge { padding: .2rem .5rem; font-size: .72rem; }
    .fchip__text { white-space: nowrap; font-size: .8rem; }
    .fchip__text b { font-size: 1rem; }
    .fchip__bar { height: 3px; }
    .hero .eyebrow { display: none; }
    .hero__title { order: 2; margin: 0; font-size: clamp(2.5rem, 11.5vw, 3.3rem); }
    .hero__film { order: 3; width: 100%; margin-top: 1.1rem; }
    .hero__video { aspect-ratio: 10 / 9; object-position: 50% 30%; border-radius: 1.1rem; }
    .hero__lede { order: 4; margin-top: 1.1rem; font-size: 1.02rem; }
    .hero__actions { order: 5; margin-top: 1.2rem; }
    .hero__actions .btn--solid { flex: 1; }
    .hero__more { display: none; }
}

/* ── En vivo: el USDT del mes como protagonista a todo el ancho; al llegar, los dígitos ruedan desde 0 ──── */
.proof { border-top: 1px solid var(--line); padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 8vw, 6rem); overflow: hidden; }
.proof__kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-weight: 700; color: var(--green); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pulse { margin-top: .5rem; }
.pulse__giant {
    display: flex; align-items: flex-end; gap: clamp(.5rem, 1.5vw, 1.25rem); margin: 0;
    font-stretch: 62%; font-weight: 900; font-size: clamp(5.2rem, 21vw, 19rem); line-height: .82; letter-spacing: -.02em; color: var(--ink);
}
.pulse__unit { font-size: .16em; font-stretch: 75%; font-weight: 800; letter-spacing: 0; color: var(--amber-ink); padding-bottom: .35em; }
.proof__title { margin: clamp(.8rem, 2vw, 1.4rem) 0 0; max-width: 34ch; font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 500; line-height: 1.35; color: var(--muted); text-wrap: balance; }
.proof__title b { color: var(--ink); font-weight: 800; }
/* Datos de apoyo: una fila sin cajas, separada por líneas finas. */
.pulse__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(2.5rem, 6vw, 4rem) 0 0; border-top: 1px solid var(--line); }
.pulse__row > div { padding: 1.4rem clamp(1rem, 3vw, 2rem) 0; border-left: 1px solid var(--line); }
.pulse__row > div:first-child { padding-left: 0; border-left: 0; }
.pulse__row dt { font-size: .92rem; font-weight: 600; color: var(--muted); }
.pulse__row dd { margin: 0; }
.pulse__mid { margin-top: .5rem !important; font-stretch: 66%; font-weight: 850; font-size: clamp(2.6rem, 5.5vw, 3.8rem); line-height: .9; color: var(--ink); }
.pulse__foot { display: block; margin-top: .6rem; font-size: .85rem; color: var(--muted); }
.pulse__foot b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pulse__live { position: relative; width: .55rem; height: .55rem; border-radius: 999px; background: var(--green); flex-shrink: 0; }
.pulse__live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--green); animation: live 1.8s ease-out infinite; }
@keyframes live { to { transform: scale(2.8); opacity: 0; } }
.pulse__prices { display: flex; gap: 1.5rem; margin-top: .5rem !important; }
.pulse__prices span { display: grid; }
.pulse__prices small { font-size: .78rem; color: var(--muted); }
.pulse__prices b { font-stretch: 72%; font-weight: 850; font-size: 1.9rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pulse__spark { display: block; width: 100%; height: 2.6rem; margin-top: .6rem; overflow: visible; clip-path: inset(-4px 0 -4px 0); transition: clip-path 2.2s cubic-bezier(.32, .72, 0, 1) .3s; }
.pulse__spark polyline { stroke: var(--amber); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pulse.is-waiting .pulse__spark { clip-path: inset(-4px 100% -4px 0); transition: none; }

.pulse__market { min-width: 0; }

/* Cuentakilómetros: cada dígito es una tira 0–9 de una cifra por línea que se desplaza a su valor. */
.odo { display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums; }
.odo__d { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.odo__s { display: block; width: 1ch; line-height: 1; word-break: break-all; transform: translateY(calc(var(--d) * -1em)); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.odo__c { line-height: 1; }
@media (prefers-reduced-motion: reduce) { .odo__s { transition: none !important; } .pulse__live::after { animation: none; } .pulse__spark { transition: none; } }
@media (max-width: 760px) {
    .pulse__row { grid-template-columns: 1fr; }
    .pulse__row > div { padding: 1.2rem 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ── Bandas ───────────────────────────────────────────────────────────────── */
.band { padding: clamp(3.5rem, 9vw, 7rem) 0; border-top: 1px solid var(--line); }
.band--paper2 { background: var(--paper2); }
.band--night { background: var(--night); border-top-color: var(--night-line); color: var(--night-text); }

/* ── Un día en tu mesa: reloj fijo que avanza con tu lectura; cada respuesta, una notificación del teléfono ── */
.day { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.day__clock { position: sticky; top: 6.5rem; align-self: start; }
.day__now { margin: 0; font-stretch: 62%; font-weight: 900; font-size: clamp(4.5rem, 10vw, 8.5rem); line-height: .85; letter-spacing: -.02em; color: var(--night-amber); font-variant-numeric: tabular-nums; }
.day__now small { font-size: .32em; font-weight: 800; letter-spacing: 0; color: var(--night-text); }
.day__clock.is-ticking .day__now { animation: tick .6s cubic-bezier(.32, .72, 0, 1); }
@keyframes tick { from { opacity: .2; transform: translateY(.4rem); filter: blur(4px); } }
.day__track { position: relative; height: 4px; margin-top: 1.4rem; border-radius: 999px; background: rgba(246, 248, 252, .12); max-width: 18rem; }
.day__track i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: var(--night-amber); transition: width .8s cubic-bezier(.32, .72, 0, 1); }
.day__track-labels { display: flex; justify-content: space-between; max-width: 18rem; margin: .5rem 0 0; font-size: .78rem; color: var(--night-muted); }

.day__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.day__hour { transition: opacity .5s cubic-bezier(.32, .72, 0, 1); }
.day__time { display: none; font-stretch: 66%; font-weight: 850; font-size: 2rem; line-height: 1; color: var(--night-amber); margin-bottom: .6rem; }
.day__time small { font-size: .5em; color: var(--night-text); }
.day__pain { margin: 0; font-size: clamp(1.25rem, 2.3vw, 1.65rem); font-weight: 500; line-height: 1.35; color: var(--night-text); max-width: 36rem; }
/* La respuesta: una notificación de vidrio sobre el azul, como las del video. */
.day__fix {
    display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; margin-top: 1.2rem; padding: 1rem 1.15rem;
    border-radius: 1.25rem; background: rgba(246, 248, 252, .06); max-width: 36rem;
    box-shadow: inset 0 0 0 1px rgba(246, 248, 252, .1), inset 0 1px 0 rgba(246, 248, 252, .12), 0 24px 50px -30px rgba(0, 0, 0, .6);
}
.day__ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: rgba(113, 212, 155, .14); color: var(--night-green); }
.day__ico svg { width: 1.4rem; height: 1.4rem; }
.day__what { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-weight: 700; color: var(--night-green); }
.day__what span { font-weight: 500; font-size: .82rem; color: var(--night-muted); }
.day__text { margin: .25rem 0 0; color: var(--night-muted); font-size: .98rem; line-height: 1.5; }
.day__coda { margin: clamp(3rem, 7vw, 5rem) 0 0; font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--night-text); max-width: 40rem; }
/* Móvil: el reloj se pega bajo la cabecera con un sol que recorre el día, un riel marca la hora que lees y el cielo
   del fondo cambia con la hora. */
@property --sky { syntax: '<color>'; inherits: true; initial-value: rgba(255, 150, 90, .3); }
@media (max-width: 860px) {
    .day { grid-template-columns: 1fr; gap: 1.6rem; }
    .day-band { background-image: radial-gradient(120% 45% at 100% 30%, var(--sky), transparent 75%); background-attachment: fixed; transition: --sky 1.2s cubic-bezier(.32, .72, 0, 1); }
    .day__clock {
        top: 4.45rem; z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem 1.1rem;
        margin: 0 -1.1rem; padding: .75rem 1.1rem .8rem;
        background: color-mix(in srgb, var(--night) 72%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
        border-bottom: 1px solid rgba(246, 248, 252, .08);
    }
    .day__now { grid-row: span 2; font-size: 3.4rem; }
    .day__now small { display: block; font-size: .3em; margin-top: .2rem; }
    .day__track { margin-top: .5rem; max-width: none; height: 3px; }
    .day__track-labels { max-width: none; margin-top: .35rem; }
    /* El sol en la punta de la barra. */
    .day__track i::after {
        content: ''; position: absolute; right: -.45rem; top: 50%; width: .9rem; height: .9rem; margin-top: -.45rem; border-radius: 50%;
        background: var(--night-amber); box-shadow: 0 0 0 4px rgba(255, 200, 90, .18), 0 0 18px 4px rgba(255, 190, 80, .55);
    }
    /* Riel de las horas. */
    .day__list { position: relative; padding-left: 1.6rem; gap: 2.8rem; }
    .day__list::before { content: ''; position: absolute; left: .3rem; top: .4rem; bottom: .4rem; width: 2px; border-radius: 2px; background: linear-gradient(rgba(246, 248, 252, .16), rgba(246, 248, 252, .04)); }
    .day__hour { position: relative; }
    .day__hour::before {
        content: ''; position: absolute; left: -1.6rem; top: .55rem; width: .75rem; height: .75rem; border-radius: 50%;
        background: var(--night); box-shadow: inset 0 0 0 2px rgba(246, 248, 252, .3);
        transition: transform .5s cubic-bezier(.32, .72, 0, 1), background-color .5s, box-shadow .5s;
    }
    .day__hour.is-now::before { background: var(--night-amber); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(255, 200, 90, .18), 0 0 16px 2px rgba(255, 190, 80, .5); }
    .day__list:has(.is-now) .day__hour:not(.is-now) { opacity: .5; }
    .day__fix { transition: transform .6s cubic-bezier(.32, .72, 0, 1); }
    .day__list:has(.is-now) .day__hour:not(.is-now) .day__fix { transform: scale(.97); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .day-band, .day__hour::before, .day__fix { transition: none; } }

/* ── Lo que usas todo el día: un mazo de cartas que se apilan con el scroll ───────────────────────────── */
.stack { display: grid; gap: 0; margin-top: clamp(2rem, 5vw, 3rem); }
.stack__card {
    position: sticky; top: calc(5.5rem + var(--i) * 1.25rem); /* cada carta se queda un poco más abajo: se ve el canto de la anterior */
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4rem);
    min-height: min(30rem, 72vh); margin-bottom: clamp(2rem, 8vh, 5rem); padding: clamp(1.6rem, 4vw, 3rem);
    border-radius: 2rem; background: var(--panel); transform-origin: 50% 0;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 -12px 40px -24px rgba(7, 24, 72, .25), 0 40px 80px -40px rgba(7, 24, 72, .4);
    transition: transform .7s cubic-bezier(.32, .72, 0, 1), filter .7s cubic-bezier(.32, .72, 0, 1);
}
.stack__card:last-child { margin-bottom: 0; }
.stack__card.is-behind { transform: scale(.94); filter: brightness(.82) saturate(.9); }
.stack__card:nth-child(1) { background: var(--chip); color: #f6f8fc; }
.stack__card:nth-child(3) { background: color-mix(in srgb, var(--amber) 12%, var(--panel)); }
.stack__head { display: flex; flex-direction: column; }
.stack__head h3 { margin: 0; font-stretch: 66%; font-weight: 900; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .92; letter-spacing: -.01em; }
.tools__note { margin: .8rem 0 0; font-size: 1.1rem; color: var(--muted); max-width: 22rem; }
.stack__card:nth-child(1) .tools__note { color: #a9b6d6; }
.stack__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; align-content: center; }
.stack__list li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; color: var(--muted); font-size: 1.02rem; line-height: 1.5; }
.stack__list b { color: var(--ink); }
.stack__card:nth-child(1) .stack__list li { color: #a9b6d6; }
.stack__card:nth-child(1) .stack__list b { color: #f6f8fc; }
.tools__ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.stack__card:nth-child(1) .tools__ico { background: rgba(255, 202, 5, .14); color: #ffca05; }
.stack__card:nth-child(3) .tools__ico { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber-ink); }
.tools__ico svg { width: 1.3rem; height: 1.3rem; }
.tools__states { margin-top: auto; padding-top: 1.75rem; }
.tools__states p { margin: 0 0 .7rem; color: #a9b6d6; font-size: .9rem; }
.tools__states ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.tools__states .tools__state { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px; font-size: .88rem; font-weight: 700; line-height: 1.2; color: #f6f8fc; background: rgba(246, 248, 252, .08); }
.tools__states .tools__state i { width: .55rem; height: .55rem; border-radius: 999px; background: var(--c); }
@media (prefers-reduced-motion: reduce) { .stack__card { transition: none; } }
@media (max-width: 860px) {
    .stack__card { grid-template-columns: 1fr; top: calc(4.8rem + var(--i) * .8rem); min-height: 0; border-radius: 1.5rem; }
    .stack__head h3 { font-size: clamp(2.2rem, 10vw, 3rem); }
}

/* ── Niveles de Binance: una escalera (mientras más subes, menos pagas) ────── */
.ladder { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; display: grid; gap: .75rem; }
.ladder__step {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.9fr); gap: 1rem 1.5rem; align-items: center;
    padding: 1.1rem 1.25rem; border-radius: .9rem; background: var(--panel); border: 1px solid var(--line);
    margin-left: calc(var(--i) * clamp(0rem, 3vw, 2.5rem)); /* cada nivel, un escalón más arriba */
    box-shadow: var(--shadow);
}
.ladder__step:last-child { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.ladder__who { display: flex; align-items: center; gap: .85rem; }
.ladder__who img { flex-shrink: 0; }
.ladder__who b { display: block; font-stretch: 72%; font-weight: 850; font-size: 1.6rem; line-height: 1; }
.ladder__who small { display: block; margin-top: .2rem; color: var(--muted); font-size: .85rem; }
.ladder__label { display: block; font-size: .78rem; color: var(--muted); }
.ladder__fee b { display: block; font-stretch: 72%; font-weight: 850; font-size: 1.9rem; line-height: 1.05; }
.ladder__bar { display: block; height: .45rem; margin-top: .35rem; border-radius: 999px; background: var(--paper2); overflow: hidden; }
.ladder__bar i { display: block; height: 100%; width: var(--bar); border-radius: inherit; background: linear-gradient(90deg, var(--amber), var(--red)); }
.ladder__facts { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .5rem 1.25rem; margin: 0; }
.ladder__facts dt { font-size: .78rem; color: var(--muted); }
.ladder__facts dd { margin: .1rem 0 0; font-size: .95rem; }
.ladder__facts dd.num { font-weight: 800; font-size: 1.05rem; }
/* Al verla: cada escalón sube a su turno y la barra de lo que pagas se llena. */
.ladder.is-pre .ladder__step { opacity: 0; transform: translateY(1.6rem); transition: opacity .6s cubic-bezier(.32, .72, 0, 1), transform .8s cubic-bezier(.32, .72, 0, 1); transition-delay: calc(var(--i) * .16s); }
.ladder.is-pre .ladder__bar i { width: 0; transition: width 1.1s cubic-bezier(.32, .72, 0, 1); transition-delay: calc(var(--i) * .16s + .45s); }
.ladder.is-in .ladder__step { opacity: 1; transform: none; }
.ladder.is-in .ladder__bar i { width: var(--bar); }
.ladder.is-in .ladder__step:last-child img { animation: shine 1.2s cubic-bezier(.32, .72, 0, 1) 1.2s; }
@keyframes shine { 40% { transform: scale(1.25) rotate(-12deg); filter: brightness(1.35) drop-shadow(0 0 10px rgba(240, 185, 11, .7)); } }
.levels__extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin-top: 1.75rem; }
.levels__extra p { display: flex; gap: .8rem; align-items: flex-start; margin: 0; color: var(--muted); }
.levels__extra img { flex-shrink: 0; }
.levels__extra b { color: var(--ink); }
.levels__note { margin: 1.4rem 0 0; font-size: .85rem; color: var(--muted); max-width: 52rem; }
@media (max-width: 900px) {
    .ladder__step { grid-template-columns: minmax(0, 1fr) auto; margin-left: 0; padding: 1rem; }
    .ladder__fee { text-align: right; min-width: 7.5rem; }
    .ladder__facts { grid-column: 1 / -1; padding-top: .75rem; border-top: 1px dashed var(--line); }
    .levels__extra { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .ladder__who b { font-size: 1.4rem; }
    .ladder__fee b { font-size: 1.6rem; }
    .ladder__facts { grid-template-columns: 1fr; }
}

/* ── Calculadora: deslizadores a la izquierda; el resultado (azul) rueda, la barra reparte el margen ───── */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: clamp(2rem, 5vw, 3rem); }
.calc__controls { display: grid; gap: 1.6rem; }
.calc__field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .2rem 1rem; }
.calc__field label { font-weight: 700; }
.calc__val { font-stretch: 66%; font-weight: 850; font-size: 2.2rem; line-height: 1; color: var(--ink); }
.calc__range {
    grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 2.2rem; margin: .2rem 0 0; background: transparent; cursor: pointer;
    --p: 50%;
}
.calc__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--amber) var(--p), var(--paper2) var(--p)); box-shadow: inset 0 0 0 1px var(--line); }
.calc__range::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--amber) var(--p), var(--paper2) var(--p)); }
.calc__range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 1.6rem; height: 1.6rem; margin-top: calc(3px - .8rem); border-radius: 50%;
    background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 12px rgba(7, 24, 72, .25); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.calc__range::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--panel); border: 3px solid var(--ink); }
.calc__range:active::-webkit-slider-thumb { transform: scale(1.25); }
.calc__range:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }
.calc__hint { grid-column: 1 / -1; margin: .1rem 0 0; font-size: .88rem; color: var(--muted); }
.calc__hint b { color: var(--ink); }
.calc__levels { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.calc__levels legend { font-weight: 700; margin-bottom: .7rem; padding: 0; }
.calc__level { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem .45rem .5rem; border-radius: 999px; background: var(--panel); border: 1.5px solid var(--line); font-weight: 700; font-size: .92rem; cursor: pointer; transition: border-color .2s, background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.calc__level input { position: absolute; opacity: 0; pointer-events: none; }
.calc__level:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.calc__level:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 3px; }

.calc__result { position: relative; padding: clamp(1.4rem, 3vw, 2rem); border-radius: 1.4rem; background: var(--night); color: var(--night-text); box-shadow: var(--shadow-lg); }
.calc__label { margin: 0; font-weight: 700; color: var(--night-muted); }
.calc__big { display: flex; align-items: baseline; gap: .5rem; margin: .3rem 0 0; font-stretch: 62%; font-weight: 900; font-size: clamp(4rem, 9vw, 6.5rem); line-height: .9; color: var(--night-green); font-variant-numeric: tabular-nums; transition: color .4s; }
.calc__big small { font-stretch: 75%; font-size: .22em; font-weight: 800; }
.calc__mini { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0 0; padding: 1rem 0; border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.calc__mini dt { font-size: .82rem; color: var(--night-muted); }
.calc__mini dd { margin: .15rem 0 0; font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.calc__split { margin-top: 1rem; }
.calc__split-title { margin: 0; font-size: .92rem; color: var(--night-muted); }
.calc__split-title b { color: var(--night-text); }
.calc__bar { display: flex; height: .8rem; margin-top: .7rem; border-radius: 999px; overflow: hidden; background: rgba(246, 248, 252, .1); }
.calc__bar i { display: block; width: var(--w); transition: width .6s cubic-bezier(.32, .72, 0, 1); }
.calc__bar-you { background: var(--night-green); }
.calc__bar-bin { background: var(--night-amber); }
.calc__bar-bank { background: #ff8a8a; }
.calc__legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .7rem 0 0; padding: 0; font-size: .88rem; color: var(--night-muted); }
.calc__legend li { display: inline-flex; align-items: center; gap: .4rem; }
.calc__legend li::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; }
.calc__legend b { color: var(--night-text); font-variant-numeric: tabular-nums; }
.calc__you::before { background: var(--night-green); }
.calc__bin::before { background: var(--night-amber); }
.calc__bank::before { background: #ff8a8a; }
.calc__verdict { margin: 1.2rem 0 0; font-weight: 700; line-height: 1.45; }
.calc__verdict b { color: var(--night-amber); font-size: 1.15em; }
.calc__cta { width: 100%; margin-top: 1.2rem; }
.calc__fine { margin: .8rem 0 0; font-size: .78rem; color: var(--night-muted); line-height: 1.5; }
/* Si el margen no alcanza, todo se vuelve rojo de golpe: esa es la vuelta que descuadra. */
.calc__result.is-loss .calc__big { color: #ff8a8a; }
.calc__result.is-loss .calc__verdict { color: #ffb3b3; }
.calc__result.is-flip { animation: flip-shake .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes flip-shake { 20% { transform: translateX(-6px) rotate(-.6deg); } 45% { transform: translateX(5px) rotate(.4deg); } 70% { transform: translateX(-2px); } }
.calc__result { border: 1px solid var(--night-line); }
.calc__peek { display: none; }
@media (max-width: 860px) {
    .calc { grid-template-columns: 1fr; }
    .calc__peek {
        display: flex; justify-content: space-between; align-items: baseline; position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 3;
        margin: 0; padding: .8rem 1.1rem; border-radius: 1rem; background: var(--night); color: var(--night-muted); font-weight: 700; border: 1px solid var(--night-line);
        box-shadow: 0 18px 40px -12px rgba(3, 8, 20, .55); transform: translateY(160%); transition: transform .45s cubic-bezier(.32, .72, 0, 1);
    }
    .calc__peek b { font-stretch: 66%; font-weight: 900; font-size: 1.7rem; line-height: 1; color: var(--night-green); }
    .calc__peek.is-loss b { color: #ff8a8a; }
    .calc__peek.is-on { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .calc__bar i, .calc__level, .calc__range::-webkit-slider-thumb { transition: none; } }

/* ── Split (vuelta / tu plata) ────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.split--wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; }
@media (max-width: 860px) { .split, .split--wide { grid-template-columns: 1fr; gap: 2.4rem; } }

/* La vuelta de ejemplo: un recibo que se juega solo (cada fila a su turno) y cierra con la ganancia. */
.cyc { margin: 2rem 0 0; max-width: 34rem; padding: 1.1rem 1.25rem 1.2rem; border-radius: 1.1rem; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cyc__cap { font-size: .8rem; font-weight: 700; color: var(--muted); }
.cyc__rows { position: relative; list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .2rem; }
.cyc__rows::before { content: ''; position: absolute; left: .95rem; top: 1rem; bottom: 1rem; width: 2px; background: var(--line); transform-origin: top; }
.cyc__row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .55rem 0; }
.cyc__n { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: .85rem; }
.cyc__row p { margin: 0; font-size: .95rem; color: var(--muted); }
.cyc__row p b { color: var(--ink); }
.cyc__amt { font-weight: 800; font-size: 1.05rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cyc__row--fee .cyc__n { background: var(--red); }
.cyc__row--fee .cyc__amt { color: var(--red); }
.cyc__total { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; margin-top: .7rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.cyc__total p { margin: 0; font-weight: 800; }
.cyc__total small { display: block; font-weight: 500; font-size: .82rem; color: var(--muted); }
.cyc__ring { width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); }
.cyc__ring path { transform: rotate(90deg); transform-origin: 22px 22px; }
.cyc__win { font-stretch: 66%; font-weight: 900; font-size: clamp(2rem, 4.5vw, 2.6rem); line-height: 1; color: var(--green); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
    .cyc__row { grid-template-columns: auto minmax(0, 1fr); }
    .cyc__amt { grid-column: 2; }
    .cyc__total { grid-template-columns: auto minmax(0, 1fr); }
    .cyc__win { grid-column: 2; }
}
/* Jugada: aparece cada fila, la línea baja, el anillo se cierra y la ganancia cae como un sello. */
.cyc.is-pre .cyc__row { opacity: 0; transform: translateX(-.8rem); transition: opacity .5s cubic-bezier(.32, .72, 0, 1), transform .6s cubic-bezier(.32, .72, 0, 1); transition-delay: calc(var(--s) * .9s + .1s); }
.cyc.is-pre .cyc__rows::before { transform: scaleY(0); transition: transform 2.4s cubic-bezier(.32, .72, 0, 1) .2s; }
.cyc.is-pre .cyc__ring circle, .cyc.is-pre .cyc__ring path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cyc.is-pre .cyc__ring circle { transition: stroke-dashoffset 2.6s cubic-bezier(.45, 0, .2, 1) .2s; }
.cyc.is-pre .cyc__ring path { transition: stroke-dashoffset .4s cubic-bezier(.32, .72, 0, 1) 2.9s; }
.cyc.is-pre .cyc__total p, .cyc.is-pre .cyc__win { opacity: 0; }
.cyc.is-in .cyc__row { opacity: 1; transform: none; }
.cyc.is-in .cyc__rows::before { transform: none; }
.cyc.is-in .cyc__ring circle, .cyc.is-in .cyc__ring path { stroke-dashoffset: 0; }
.cyc.is-in .cyc__total p { opacity: 1; transition: opacity .4s 2.8s; }
.cyc.is-in .cyc__win { opacity: 1; animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1) 2.85s both; }
@keyframes stamp { from { opacity: 0; transform: scale(1.8) rotate(-6deg); } to { opacity: 1; transform: none; } }

.vuelta__media { width: min(24rem, 100%); justify-self: center; aspect-ratio: 1; }
.vuelta__video { width: 100%; height: 100%; object-fit: cover; border-radius: 1.1rem; box-shadow: var(--shadow-lg); }

/* ── Tu plata ─────────────────────────────────────────────────────────────── */
.shield { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.shield li { position: relative; padding-left: 2.9rem; color: var(--muted); font-size: 1.02rem; }
.shield__ic {
    position: absolute; left: 0; top: -.1em; width: 2rem; height: 2rem; padding: .35rem; border-radius: .55rem;
    background: color-mix(in srgb, var(--green) 14%, transparent); fill: none; stroke: var(--green);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.shield b { color: var(--ink); }

.perms { background: var(--night); color: var(--night-text); border-radius: 1rem; padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--shadow-lg); }
.perms__title { margin: 0 0 .9rem; font-weight: 800; font-size: 1rem; }
.perms__list { list-style: none; margin: 0; padding: 0; display: grid; }
.perms__list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .7rem; padding: .7rem 0; border-top: 1px solid var(--night-line); }
.perms__what { font-size: .95rem; }
.perms__what small { display: block; margin-top: .1rem; font-size: .78rem; color: var(--night-muted); }
.perms__state { font-weight: 800; font-size: .85rem; }
.perms__list .is-on .perms__state { color: var(--night-green); }
.perms__list .is-off .perms__state { color: var(--night-muted); }
.perms__list .is-off .perms__what { color: var(--night-muted); }
/* Interruptor como el de los permisos de una API key de Binance: verde prendido, gris apagado con candado. */
.switch { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: rgba(246, 248, 252, .16); transition: background-color .35s; }
.switch i { position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #a9b6d6; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), background-color .35s; }
.is-on .switch { background: var(--night-green); }
.is-on .switch i { transform: translateX(1.1rem); background: #fff; }
/* Lo que P2Pilot no puede hacer: un candado en la perilla. */
.is-off .switch i::after {
    content: ""; position: absolute; inset: .2rem; background: #0b1a3f;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.perms__list.is-pre .is-on .switch { background: rgba(246, 248, 252, .16); }
.perms__list.is-pre .is-on .switch i { transform: none; background: #a9b6d6; }
.perms__list.is-in .is-on .switch, .perms__list.is-in .is-on .switch i { transition-delay: calc(var(--k) * .35s + .2s); }
.perms__list.is-in .is-on .switch { background: var(--night-green); }
.perms__list.is-in .is-on .switch i { transform: translateX(1.1rem); background: #fff; }
.perms__list.is-in .is-off .switch { animation: nope-track .9s ease-out both; animation-delay: calc(var(--k) * .4s + .2s); }
.perms__list.is-in .is-off .switch i { animation: nope .9s both; animation-delay: calc(var(--k) * .4s + .2s); }
.perms__list.is-in .is-off .perms__state { animation: nope-word .9s both; animation-delay: calc(var(--k) * .4s + .2s); }
@keyframes nope {
    0% { transform: none; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
    35% { transform: translateX(.65rem); }
    48% { transform: translateX(.65rem); animation-timing-function: cubic-bezier(.2, 1.6, .4, 1); }
    70% { transform: translateX(-.12rem); }
    82% { transform: translateX(.08rem); }
    100% { transform: none; }
}
@keyframes nope-track { 35%, 55% { background: rgba(255, 107, 107, .45); } }
@keyframes nope-word { 45% { color: #ff8a8a; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .switch, .switch i { transition: none; } }
.perms__note { margin: .9rem 0 0; padding-top: .9rem; border-top: 1px solid var(--night-line); font-size: .85rem; color: var(--night-muted); line-height: 1.55; }
.perms__note a { color: var(--night-amber); font-weight: 700; }

/* ── Precio ───────────────────────────────────────────────────────────────── */
.price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .price { grid-template-columns: 1fr; } }
.price__list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; }
.price__list li { position: relative; padding-left: 1.6rem; color: var(--ink); }
.price__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; border-radius: 999px; background: var(--green); }

.plan { background: var(--panel); border: 2px solid var(--ink); border-radius: 1rem; padding: clamp(1.4rem, 4vw, 2rem); box-shadow: var(--shadow-lg); }
.plan__badge { display: inline-block; margin: 0; padding: .25rem .75rem; border-radius: 999px; background: var(--yellow); color: #071848; font-weight: 800; font-size: .9rem; }
.plan__price { margin: 1rem 0 0; font-stretch: 66%; font-weight: 850; font-size: clamp(4rem, 12vw, 6rem); line-height: .9; letter-spacing: -.01em; }
.plan__unit { font-stretch: 100%; font-weight: 700; font-size: 1.1rem; color: var(--muted); letter-spacing: 0; }
.plan__was { margin: .7rem 0 0; color: var(--muted); font-size: .95rem; }
.plan__was s { color: var(--ink); text-decoration: none; background: linear-gradient(var(--red), var(--red)) no-repeat 0 55% / 100% 2px; transition: background-size .6s cubic-bezier(.32, .72, 0, 1) 1s; }
.plan.is-pre .plan__was s { background-size: 0 2px; }
.plan.is-in .plan__was s { background-size: 100% 2px; }

.seats { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--line-strong); }

.seats__count { display: flex; align-items: center; gap: .8rem; margin: 0; }
.seats__left { font-stretch: 66%; font-weight: 850; font-size: 4.2rem; line-height: .85; color: var(--amber-ink); min-width: 2ch; }
.seats__label { font-weight: 700; line-height: 1.25; color: var(--ink); }

.seats__grid { list-style: none; margin: 1.7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: .28rem; }
.seats__grid li { aspect-ratio: 1; border-radius: 3px; background: var(--paper2); border: 1px solid var(--line); transition: background .25s, border-color .25s, transform .25s; }
.seats__grid li.is-taken { background: var(--ink); border-color: var(--ink); }
.seats__grid li { position: relative; }
.seats__grid li.is-pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(0); } }
.seats__grid li.is-next { border: 2px solid var(--amber); animation: next 1.2s ease-in-out infinite; }
/* El que sigue es el tuyo: una etiqueta encima y una onda que sale de él. */
.seats__grid li.is-next::before {
    content: 'Tú'; position: absolute; bottom: calc(100% + .35rem); left: 50%; transform: translateX(-50%);
    padding: .1rem .4rem; border-radius: .3rem; background: var(--amber); color: #071848; font-size: .68rem; font-weight: 800; line-height: 1.3; white-space: nowrap;
}
.seats__grid li.is-next::after { content: ''; position: absolute; inset: -2px; border-radius: 4px; border: 2px solid var(--amber); animation: ripple 1.6s cubic-bezier(.32, .72, 0, 1) infinite; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.seats__grid li.is-new { animation: flash 1.2s ease-out 2; }
@keyframes next { 50% { transform: scale(1.35); background: color-mix(in srgb, var(--amber) 35%, transparent); } }
@keyframes flash { 0% { background: var(--amber); transform: scale(1.6); } 100% { transform: scale(1); } }

.seats__note { margin: .8rem 0 0; font-size: .92rem; color: var(--muted); }
.seats__note b { color: var(--ink); }
.seats__warn { margin: .5rem 0 0; font-size: .92rem; font-weight: 700; color: var(--red); }

.plan__cta { width: 100%; margin-top: 1.4rem; }
.plan__terms { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); text-align: center; }
.plan__terms a { color: var(--ink); font-weight: 700; }

/* ── Cierre ───────────────────────────────────────────────────────────────── */
.cierre { background: var(--night); color: var(--night-text); padding: clamp(4rem, 11vw, 8rem) 0; border-top: 1px solid var(--night-line); position: relative; overflow: hidden; }
.cierre__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (max-width: 860px) {
    .cierre__inner { grid-template-columns: 1fr; gap: 0; }
    .cierre__copy { display: contents; }
    .cierre__title { order: 1; } .cierre__lede { order: 2; margin-bottom: 1.2rem; } .cmath { order: 3; margin-bottom: 1.8rem; }
    .cierre__actions { order: 4; } .cierre__seats { order: 5; } .cierre__share { order: 6; }
}
/* La cuenta del día: lo que creías (tachado), lo que se llevaron y lo que quedó, que gira hasta cuadrar. */
.cmath { border-top: 1px solid var(--night-line); }
.cmath__row, .cmath__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; padding: .9rem 0; border-bottom: 1px solid var(--night-line); color: var(--night-muted); }
.cmath__row .num { font-weight: 800; font-size: 1.4rem; color: var(--night-text); white-space: nowrap; }
.cmath__row s { text-decoration: none; background: linear-gradient(#ff737c, #ff737c) no-repeat 0 55% / 100% 2px; transition: background-size .6s cubic-bezier(.32, .72, 0, 1) .3s; }
.cmath.is-pre .cmath__row s { background-size: 0 2px; }
.cmath.is-in .cmath__row s { background-size: 100% 2px; }
.cmath__row--fee .num { color: #ff8a8a; }
.cmath__total { flex-direction: column; align-items: flex-start; gap: .3rem; border-bottom: 0; color: var(--night-text); font-weight: 700; }
.cmath__big { display: flex; align-items: baseline; gap: .6rem; font-stretch: 62%; font-weight: 900; font-size: clamp(5rem, 11vw, 8.5rem); line-height: .85; color: var(--night-green); font-variant-numeric: tabular-nums; }
.cmath__big small { font-stretch: 75%; font-size: .2em; font-weight: 800; }
.cmath__big .js-cuadra span { display: inline-block; }
.cmath__big .is-spin { filter: blur(2px); opacity: .6; }
.cmath__big .is-land { animation: land .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes land { from { transform: translateY(-.12em); } }
.cmath__big .is-done { animation: cuadra 1s cubic-bezier(.32, .72, 0, 1); }
@keyframes cuadra { 30% { text-shadow: 0 0 28px rgba(113, 212, 155, .55); } }
.cierre__inner { position: relative; z-index: 1; }
.cierre__title { font-stretch: 68%; font-weight: 800; font-size: clamp(2.9rem, 8.6vw, 6.2rem); line-height: .92; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.cierre__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.cierre__seats { margin: 1.2rem 0 0; color: var(--night-text); font-weight: 700; }
.cierre__seats b { color: var(--night-amber); }
.cierre__share { margin: 1.2rem 0 0; color: var(--night-muted); font-size: .95rem; }
.cierre__share a { color: var(--night-text); font-weight: 700; }
.cierre__lede { color: var(--night-muted); font-size: clamp(1.05rem, 1.8vw, 1.25rem); max-width: 34rem; margin: 1.2rem 0 2rem; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.foot { background: var(--paper); border-top: 1px solid var(--line); padding: 2.2rem 0; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.foot__brand { display: flex; align-items: center; gap: .8rem; }
.foot__brand b { display: block; font-size: 1.05rem; }
.foot__brand span { color: var(--muted); font-size: .86rem; }
.foot__nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem; font-size: .9rem; }
.foot__nav a { color: var(--muted); text-decoration: none; }
.foot__nav a:hover { color: var(--ink); }
.foot__enter { color: var(--ink) !important; font-weight: 700; }

/* ── Movimiento reducido ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}