/* Noche en Trujillo: la portada. La noche es fija en el inicio, Seguridad, Descarga y el pie.
   El resto sigue el modo del sistema: en claro, amanece.

   Orden: 1) secciones  2) composición de celular (< 768 px)  3) mejoras con @supports  4) rendimiento  5) movimiento.
   Sin JavaScript y sin animaciones por scroll todo se ve: el estado de reposo es siempre el estado final. */

:root {
  --dia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 51 51'%3E%3Cpath d='M24 0h3v3h-3zM21 3h9v3h-9zM18 6h6v3h-6zM27 6h6v3h-6zM15 9h6v3h-6zM30 9h6v3h-6zM12 12h6v3h-6zM24 12h3v3h-3zM33 12h6v3h-6zM9 15h6v3h-6zM21 15h9v3h-9zM36 15h6v3h-6zM6 18h6v3h-6zM18 18h6v3h-6zM27 18h6v3h-6zM39 18h6v3h-6zM3 21h6v3h-6zM15 21h6v3h-6zM30 21h6v3h-6zM42 21h6v3h-6zM0 24h6v3h-6zM12 24h6v3h-6zM33 24h6v3h-6zM45 24h6v3h-6zM3 27h6v3h-6zM15 27h6v3h-6zM30 27h6v3h-6zM42 27h6v3h-6zM6 30h6v3h-6zM18 30h6v3h-6zM27 30h6v3h-6zM39 30h6v3h-6zM9 33h6v3h-6zM21 33h9v3h-9zM36 33h6v3h-6zM12 36h6v3h-6zM24 36h3v3h-3zM33 36h6v3h-6zM15 39h6v3h-6zM30 39h6v3h-6zM18 42h6v3h-6zM27 42h6v3h-6zM21 45h9v3h-9zM24 48h3v3h-3z'/%3E%3C/svg%3E");
  --zone: #ffcc33; --zone-edge: #1d1c19; --zone-ink: #1d1c19; --sea-line: #0f766e;
  --cam-turn: 46deg; --peek: 148px; --bar: 72px;
}
@media (prefers-color-scheme: dark) { :root { --sea-line: #4fd1c5; } }

main > section, .thumb-zone > section, .block { padding: clamp(72px, 9vw, 148px) 0; }
main, section[id], .hero, .how { scroll-margin-top: calc(var(--stick) + 8px); }

/* ── Apertura de marca: el taxi recorre una cuadra bajo la cabecera y se enciende el logo.
      No tapa nada, así que no retrasa el contenido. Solo CSS: termina sola, con o sin JavaScript. ── */
.intro { display: none; }

/* ── Invitación ── */
.invite-wrap { padding: 0 var(--gutter); background: var(--night-1); display: flow-root; }
.invite { width: 100%; max-width: 860px; margin: 28px auto; padding: clamp(22px, 4vw, 40px); background: var(--surface); border: 2px solid var(--taxi); border-radius: 20px; scroll-margin-top: calc(var(--stick) + 8px); box-shadow: 0 0 80px -30px rgba(255, 204, 51, .6); }
.invite h2 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 10px; }
.invite p { margin-bottom: 10px; }
.invite .note { margin-top: 10px; }
.invite-label { color: var(--muted); }
.invite-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.invite-code { font: 900 clamp(24px, 6vw, 34px)/1.3 var(--sans); letter-spacing: .12em; padding: 4px 14px; max-width: 100%; overflow-wrap: anywhere; background: var(--bg); border: 1.5px dashed var(--outline); border-radius: 12px; -webkit-user-select: all; user-select: all; font-variant-numeric: tabular-nums slashed-zero; }
.invite-steps { margin: 16px 0 0; padding-left: 22px; list-style: decimal; }
.invite-steps li { margin-bottom: 6px; }
.invite .stores { margin: 12px 0 18px; }
.invite .cta { margin-bottom: 10px; }
.invite-driver a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ── Escenario: mapa fijo detrás del inicio y de Cómo funciona ── */
.thumb-zone { position: relative; }
.noche { display: grid; grid-template-columns: minmax(0, 1fr); background-color: var(--night-0); }
.noche > * { grid-area: 1 / 1; min-width: 0; }
.noche-in { position: relative; z-index: 1; }
.city { position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; overflow: hidden; background: var(--night-0); }
.city-cam { position: absolute; inset: -12%; transform-origin: 50% 46%; }
.city-cam svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.city::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 9, .72), rgba(11, 10, 9, .4) 34%, rgba(11, 10, 9, .4) 70%, rgba(11, 10, 9, .82)); }
.m-sea { fill: #0e1716; }
.m-wave { fill: none; stroke: #2a4744; stroke-width: 1.4; stroke-linecap: round; }
.m-coast { fill: none; stroke: #2f7f78; stroke-width: 2; }
.m-st { fill: none; stroke: #2a2823; stroke-width: 1.2; }
.m-av { fill: none; stroke: #3b3831; stroke-width: 2; }
.m-road { fill: none; stroke: #57513f; stroke-width: 3.2; stroke-linecap: round; }
.m-ring { fill: none; stroke: #57513f; stroke-width: 3; }
.m-oval { fill: rgba(255, 204, 51, .05); stroke: #8a7433; stroke-width: 3; }
.m-chan { fill: #171310; stroke: #b5714d; stroke-width: 1.6; }
.m-win { fill: #ffcc33; opacity: .55; }
.m-t { font: 500 13px var(--sans); fill: #8c887c; letter-spacing: .08em; text-transform: uppercase; }
.m-a { fill: #d9895f; }
.m-s { fill: #3f8e87; font-size: 15px; letter-spacing: .3em; }
.city-live { z-index: 1; }
.side path { fill: none; stroke: var(--sea); stroke-width: 2; stroke-linecap: round; opacity: .3; }
.tramos path { fill: none; stroke: var(--taxi); stroke-width: 5; stroke-linecap: round; }
.halo { opacity: .2; }
.halo path { fill: none; stroke: var(--taxi); stroke-width: 20; stroke-linecap: round; }
.p-a circle { fill: var(--night-1); stroke: var(--sea); stroke-width: 4; }
.p-a .p-in { fill: var(--sea); stroke: none; }
.p-b rect { fill: var(--night-1); stroke: var(--taxi); stroke-width: 4; }
.p-b .p-in { fill: var(--taxi); stroke: none; }
.p-a text, .p-b text { font: 700 15px var(--sans); fill: var(--night-ink); paint-order: stroke; stroke: var(--night-0); stroke-width: 4px; }
.taxi { transform: translate(947.6px, 410.6px); }
.t-beam { fill: url(#beam); }
.t-car { fill: var(--taxi); stroke: #0b0a09; stroke-width: 1.5; }
.t-glass { fill: #1d1c19; }
.t-sign { fill: #fff3c4; }
.t-flag rect { fill: var(--taxi); stroke: #0b0a09; stroke-width: 1.5; }
.t-flag text { font: 900 16px var(--sans); fill: var(--on-taxi); font-variant-numeric: tabular-nums; }
.t-flag text.t-ej { font: 700 12px var(--sans); }
@media (max-width: 1099px) {
  .city-map { opacity: .6; }
  .m-t, .side { display: none; }
}
/* A la izquierda del pin, el título "Cómo funciona" queda encima de la etiqueta incluso al llegar por el menú. */
@media (min-width: 980px) { .p-b text { text-anchor: start; transform: translateX(44px); } }
/* Si el taxi no se mueve se queda en el pin, y su haz caería sobre esa etiqueta. */
@media (min-width: 980px) and (prefers-reduced-motion: reduce) { .t-beam { display: none; } }
@supports not (animation-timeline: view()) { @media (min-width: 980px) { .t-beam { display: none; } } }
/* En táctil la ruta se enciende por tramos: el halo de cada cuadra no se anima y por eso se quita. */
@media (pointer: coarse) { .halo { display: none; } }

/* ── Inicio ── */
.hero { position: relative; overflow-x: clip; padding: clamp(28px, 4.5vw, 56px) 0 clamp(40px, 5vw, 72px); }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
.hero-copy, .hero-show { min-width: 0; }
.place { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 15px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.place::before { content: ""; width: 14px; height: 14px; background: var(--taxi); clip-path: var(--stair); }
h1 { font: 700 clamp(46px, 14.2vw, 92px)/.94 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.mark { display: inline-block; white-space: nowrap; margin-top: .14em; padding: .05em .14em .02em; background: var(--taxi); color: var(--on-taxi); border-radius: .1em .1em .03em .03em; box-shadow: 0 .4em 1.2em -.3em rgba(255, 204, 51, .55); }
.lead { margin: 24px 0 28px; max-width: 34em; font-size: clamp(18px, .5vw + 16px, 22px); line-height: 1.45; color: var(--ink); }
.hero .note { margin-top: 14px; }
.facts { display: grid; border-top: 1px solid var(--outline); background: rgba(11, 10, 9, .78); }
.facts li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts b { display: block; font-size: 17px; line-height: 1.3; }
.facts span { font-size: 15px; color: var(--muted); line-height: 1.4; }
@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts li { padding: 14px 18px 0 0; border-bottom: 0; }
  .facts li + li { padding-left: 18px; border-left: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  .hero { min-height: calc(100vh - var(--topbar)); min-height: calc(100svh - var(--topbar)); display: grid; align-items: center; }
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "copy show" "facts show"; row-gap: 32px; }
  .hero-copy { grid-area: copy; align-self: end; }
  .hero-show { grid-area: show; }
  .facts { grid-area: facts; align-self: start; }
  h1 { font-size: clamp(92px, 8.1vw, 140px); }
}

/* ── Maqueta: la puja. Estado de reposo = tres ofertas a la vista. ── */
.ui, .ui * { font-variant-numeric: tabular-nums; }
.scene { position: relative; display: grid; place-items: center; width: 100%; font-size: 12.5px; }
@supports (container-type: inline-size) { .scene { container-type: inline-size; } }
.rings { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.rings i { position: absolute; left: -24em; top: -24em; width: 48em; height: 48em; border: 1px solid var(--taxi); border-radius: 50%; opacity: .1; transform: scale(.74); }
.rings i + i { opacity: .07; transform: scale(.9); }
.rings i + i + i { opacity: .05; transform: none; }
.phone { position: relative; z-index: 2; width: 24.5em; max-width: 100%; padding: .7em; background: #050505; border-radius: 3.5em; box-shadow: 0 0 0 1px #3a3732, 0 2.5em 5em -1em #000, 0 0 9em -2em rgba(255, 204, 51, .4); }
.screen { position: relative; height: 49em; overflow: hidden; background: var(--bg); border-radius: 2.85em; color: var(--ink); line-height: 1.35; }
.status { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: .8em 1.5em 0; font-size: .9em; font-weight: 700; }
.status em { font-style: normal; color: var(--on-taxi); background: var(--taxi); padding: 0 .55em; border-radius: 99em; font-size: .88em; }
.map { position: absolute; left: 0; right: 0; top: 0; height: 30em; background: #151412; }
.map svg { width: 100%; height: 100%; }
.map .road { fill: none; stroke: #36332c; stroke-width: 7; }
.map .road-sm { fill: none; stroke: #2a2823; stroke-width: 3; }
.map .oval { fill: none; stroke: #6b5a2a; stroke-width: 5; }
.map .route { fill: none; stroke: var(--taxi); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.map .dot-a { fill: var(--night-1); stroke: var(--sea); stroke-width: 3.5; }
.map .dot-b { fill: var(--taxi); stroke: #0b0a09; stroke-width: 2.5; }
.minicar { fill: var(--taxi); stroke: #0b0a09; stroke-width: 1.5; opacity: 0; }
.route-chip { position: absolute; left: 1em; right: 1em; top: 3em; padding: .55em 1em; background: var(--surface); border-radius: 99em; font-size: .92em; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: .8em 1em 1.1em; background: var(--surface); border-radius: 1.9em 1.9em 0 0; box-shadow: 0 -1em 2.4em rgba(0, 0, 0, .5); }
.sh-propose, .sh-ride { opacity: 0; transform: translateY(100%); }
.grip { width: 3em; height: .32em; margin: 0 auto .7em; border-radius: 1em; background: var(--line); }
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.sheet-title { font-size: 1.28em; font-weight: 900; letter-spacing: -.01em; }
.sheet-sub { margin-top: .1em; color: var(--muted); font-size: .9em; }
.c0, .c1, .c2 { opacity: 0; }
.timer { height: .3em; margin-top: .6em; overflow: hidden; border-radius: 1em; background: var(--line); }
.timer i { display: block; height: 100%; background: var(--sea); transform-origin: left; transform: scaleX(.6); }
.offer { position: relative; margin-top: .6em; padding: .65em .75em .75em; border: 1px solid var(--line); border-radius: 1.05em; background: var(--raised); }
.offer.is-pick { border-color: var(--taxi); box-shadow: inset 0 0 0 1px var(--taxi); }
.offer-top { display: flex; align-items: center; gap: .55em; }
.avatar { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: #12302d; color: var(--sea); font-weight: 900; }
.who { min-width: 0; flex: 1; font-size: 1.05em; font-weight: 700; }
.who small { display: flex; align-items: center; gap: .2em; font-size: .84em; font-weight: 500; color: var(--muted); }
.who small .i { width: .9em; height: .9em; fill: var(--star); stroke: var(--star); }
.quote { text-align: right; font-size: 1.3em; font-weight: 900; letter-spacing: -.01em; }
.tag { display: inline-flex; align-items: center; gap: .25em; padding: .08em .6em; border-radius: 99em; font-size: .86em; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.quote .tag { display: flex; font-size: .62em; letter-spacing: 0; }
.tag .i { width: 1em; height: 1em; stroke-width: 3; }
.tag-ok { background: var(--tag-ok); color: var(--tag-ok-ink); }
.tag-counter { background: var(--tag-cnt); color: var(--tag-cnt-ink); }
.offer-meta { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .45em; font-size: .86em; color: var(--muted); }
.offer-meta b { color: var(--ink); font-weight: 700; }
.plate { flex: none; overflow: hidden; background: #ffffff; color: #111111; border: 1px solid #111111; border-radius: .3em; text-align: center; }
.plate i { display: block; background: #1f4e9c; color: #ffffff; font-size: .55em; font-style: normal; font-weight: 700; letter-spacing: .1em; line-height: 1.4; }
.plate b { display: block; padding: 0 .45em .08em; color: #111111; font-size: .95em; font-weight: 900; letter-spacing: .06em; line-height: 1.25; }
.fake-btn { display: block; margin-top: .75em; padding: .65em; border-radius: .9em; background: var(--taxi); color: var(--on-taxi); font-size: 1.04em; font-weight: 700; text-align: center; white-space: nowrap; }
.offer .fake-btn { margin-top: .5em; padding: .5em; }
.tap { position: absolute; z-index: 4; width: 3em; height: 3em; margin: -1.5em; border-radius: 50%; background: #fff; opacity: 0; }
.propose-trip { font-size: .92em; color: var(--muted); margin-top: .1em; }
.stepper { display: flex; align-items: center; justify-content: space-between; margin: .9em 0 .7em; }
.stepper-btn { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 50%; border: 1.5px solid var(--outline); color: var(--ink); }
.stepper-btn .i { width: 1.3em; height: 1.3em; stroke-width: 2.6; }
.stepper-val { font: 900 2.6em/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; text-align: center; }
.v0 { opacity: 0; }
.slider { position: relative; height: .4em; border-radius: 1em; background: var(--line); }
.slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; border-radius: 1em; background: var(--taxi); }
.slider b { position: absolute; left: 20%; top: 50%; width: 1.4em; height: 1.4em; margin: -.7em 0 0 -.7em; border-radius: 50%; background: var(--taxi); border: 2px solid #0b0a09; }
.propose-hint { margin-top: 1em; font-size: .92em; line-height: 1.4; color: var(--muted); }
.propose-hint b { display: block; color: var(--ink); }
.ride-pin { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-top: .8em; padding: .7em .8em; border-radius: 1.05em; background: var(--raised); }
.ride-pin small { font-size: .92em; color: var(--muted); }
.ride-pin small b { display: block; color: var(--ink); }
.pin { display: flex; gap: .4em; justify-content: center; }
.pin b { display: grid; place-items: center; width: 2.2em; height: 2.6em; border-radius: .7em; background: var(--surface); font-size: 1.2em; font-weight: 900; }
.chips { display: none; }
.chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: .55em; padding: .55em .95em .55em .55em; border-radius: 99em; background: var(--surface); box-shadow: 0 0 0 1px var(--outline), 0 1em 2em -1em #000; font-size: 1.04em; white-space: nowrap; }
.chip::after { content: ""; position: absolute; left: 100%; top: 50%; width: 2.2em; border-top: 1.5px dotted var(--outline); }
.chip span { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--raised); color: var(--ink); }
.chip .i { width: 1.3em; height: 1.3em; }
.chip b { font-weight: 900; font-size: 1.2em; }
.chip.is-pick { background: var(--taxi); color: var(--on-taxi); box-shadow: 0 0 3em -.6em var(--taxi); }
.chip.is-pick span { background: var(--on-taxi); color: var(--taxi); }
.chip.c-1 { top: 22%; right: calc(50% + 14em); }
.chip.c-2 { top: 44%; right: calc(50% + 16.5em); }
.chip.c-3 { top: 65%; right: calc(50% + 14.6em); }
.show-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 16px; padding: 8px 12px; border-radius: 10px; background: rgba(11, 10, 9, .86); }
.mock-note { flex: 1 1 18em; font-size: 15px; color: var(--muted); }
.pausa { display: none; }
.try-start { flex: none; }

/* La puja que se puede tocar: solo aparece cuando js/motion.js quita el hidden. */
.is-live .sh-propose, .is-live .sh-ride, .is-live .tap, .is-live .minicar, .is-live .offer .fake-btn, .is-live .timer { display: none; }
.is-live .phone { cursor: default; }
.try-stepper { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: .6em; padding: .2em 0; }
.step-btn { display: grid; place-items: center; width: max(44px, 3.6em); height: max(44px, 3.6em); flex: none; padding: 0; border: 1.5px solid var(--outline); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.step-btn .i { width: 1.5em; height: 1.5em; stroke-width: 2.6; }
.step-btn:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) { .step-btn:hover:not(:disabled) { border-color: var(--taxi-strong); background: var(--wash); } }
.fig { display: inline-flex; align-items: center; font: 900 2.5em/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.fig .cur { font-size: .56em; margin-right: .2em; }
.rolls { display: inline-flex; }
.d { --s: 1; position: relative; display: inline-block; width: .56em; height: 1em; overflow: hidden; overflow: clip; font-style: normal; text-align: center; }
.d::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; display: block; white-space: pre; line-height: 1em; transform: translateY(calc(var(--n) * -1em)); }
.dt { width: .26em; text-align: center; }
.d-tens { display: none; }
.has-tens .d-tens { display: inline-block; }
.row-pick { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 1.05em; background: transparent; color: inherit; cursor: pointer; touch-action: manipulation; }
.row-pick:focus-visible { outline-offset: -3px; }
.try-pick { display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 3.2em; margin-top: .6em; padding: .4em .9em; border-radius: .9em; background: var(--taxi); color: var(--on-taxi); font-weight: 700; }
.try-pick b { font-size: 1.3em; font-weight: 900; white-space: nowrap; }
.try-pick .i { width: 1.2em; height: 1.2em; stroke-width: 3; }
.try-pick span { flex: 1; min-width: 0; }
.is-open .try-pick { background: transparent; box-shadow: inset 0 0 0 1.5px var(--outline); color: var(--ink); }
.is-open .try-pick .i, .is-open .try-pick b { display: none; }
.try-note { display: block; margin-top: 4px; }

/* ── Cómo funciona: tres paradas sobre el mapa; el scroll maneja el taxi ── */
.how { position: relative; padding: clamp(72px, 10vw, 140px) 0 38vh; background: none; }
.how-head h2 { font-size: clamp(52px, 9.4vw, 148px); }
.how .steps { display: grid; gap: 34vh; margin-top: clamp(40px, 7vw, 88px); }
.step { position: relative; max-width: 34rem; padding: 26px 22px 24px; background: var(--night-2); border: 1px solid var(--line); border-radius: 16px; }
.stop { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px; background: var(--taxi); color: var(--on-taxi); clip-path: var(--stair); font: 700 28px/1 var(--display); }
.step h3 { font: 700 clamp(32px, 3.4vw, 50px)/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.step p { margin-top: 12px; color: var(--muted); max-width: 44ch; }
.bit { margin-top: 20px; max-width: 340px; padding: 12px 14px 14px; background: var(--night-3); border-radius: 12px; font-size: 15px; }
.bit-tag { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.bit .stepper { margin: 0; font-size: 12.5px; }
.bit .stepper-val { font-size: 34px; }
.bit .stepper-btn { width: 40px; height: 40px; }
.bit-sub { margin-top: 6px; text-align: center; font-size: 14px; color: var(--muted); }
.mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-weight: 900; font-size: 18px; white-space: nowrap; }
.mini + .mini { border-top: 1px solid var(--line); }
.mini .tag { font-size: 13px; }
.bit .pin b { width: 42px; height: 48px; font-size: 22px; }
.ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.ways span { padding: 3px 12px; border: 1px solid var(--outline); border-radius: 99px; font-size: 14px; font-weight: 500; }
.rail-hint { display: none; }
@media (min-width: 768px) {
  .city-cam { inset: -10% -36% -10% -8%; }
  .step { max-width: min(34rem, 48vw); }
}
@media (min-width: 1100px) {
  .city::after { background: linear-gradient(90deg, rgba(11, 10, 9, .97), rgba(11, 10, 9, .92) 36%, rgba(11, 10, 9, 0) 58%), linear-gradient(180deg, rgba(11, 10, 9, .4), rgba(11, 10, 9, 0) 30%); }
  .step { background: none; border: 0; padding: 0; min-height: 44vh; max-width: 34rem; }
  .how .steps { gap: 24vh; }
  .bit { background: var(--night-2); border: 1px solid var(--line); }
}

/* ── Categorías: índice grande, no tarjetas ── */
.cat-grid { display: grid; gap: clamp(44px, 6vw, 88px); margin-top: clamp(40px, 6vw, 80px); }
.cat-group { display: grid; }
.cat-head { padding-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--muted); }
.cat { position: relative; isolation: isolate; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); padding: clamp(14px, 2vw, 26px) 0; border-top: 1px solid var(--outline); }
.cat::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * clamp(8px, 1vw, 16px)); background: var(--wash); border-radius: 8px; transform: scaleX(0); transform-origin: left; }
.cat .i { width: clamp(30px, 3.4vw, 44px); height: clamp(30px, 3.4vw, 44px); stroke-width: 1.5; }
.cat > div { min-width: 0; flex: 1; display: grid; gap: 2px clamp(16px, 3vw, 48px); align-items: baseline; }
.cat h3 { font: 700 clamp(38px, 5.8vw, 84px)/.98 var(--display); text-transform: uppercase; letter-spacing: 0; }
.cat p { color: var(--muted); }
.cat-foot { padding-top: 16px; border-top: 1px solid var(--outline); font-size: 16px; color: var(--muted); }
.schedule { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: start; margin-top: clamp(40px, 6vw, 72px); padding: clamp(20px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.schedule .i { margin-top: 2px; color: var(--accent); }
.schedule p { color: var(--muted); max-width: 70ch; }
.schedule b { color: var(--ink); }
.sched-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font: 700 18px/1 var(--display); text-transform: uppercase; }
.sched-bar i { flex: 1; height: 8px; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--taxi) 0 18px, transparent 18px 26px); box-shadow: inset 0 0 0 1px var(--outline); }
@media (hover: hover) { .cat:hover::before { transform: none; } }
@media (min-width: 768px) { .cat > div { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
@media (min-width: 1000px) {
  .cat-group { grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; }
  .cat-head { grid-row: 1 / span 3; padding-top: 16px; border-top: 1px solid var(--outline); align-self: start; position: sticky; top: calc(var(--topbar) + 24px); }
  .cat, .cat-foot { grid-column: 2; }
}

/* ── Seguridad: el muro de la noche, ordenado por momentos del viaje ── */
.band { position: relative; overflow: clip; }
.band::before { content: ""; position: absolute; right: -80px; top: 0; bottom: 0; width: min(46vw, 620px); background: var(--adobe-lit); opacity: .09; -webkit-mask: var(--dia) 0 0 / 110px 110px repeat; mask: var(--dia) 0 0 / 110px 110px repeat; }
.band .wrap { position: relative; }
.band h2 { font-size: clamp(56px, 11vw, 176px); }
.moments { display: grid; gap: clamp(44px, 6vw, 88px); margin-top: clamp(40px, 6vw, 80px); }
.moment-title { padding-top: 12px; border-top: 3px solid var(--taxi); font: 700 clamp(30px, 3.4vw, 48px)/1 var(--display); text-transform: uppercase; letter-spacing: 0; color: var(--taxi); }
.moments ul { display: grid; gap: 0 clamp(24px, 3vw, 48px); margin-top: 8px; }
.safe { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.safe .i { margin-top: 2px; color: var(--taxi); }
.safe h4 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; }
.safe p { margin-top: 4px; font-size: 16px; color: var(--muted); }
.safe.is-sos { padding: 20px; margin-top: 12px; background: var(--night-2); border: 1px solid var(--sos); border-radius: 14px; }
.safe.is-sos .i { color: var(--on-sos); background: var(--sos); padding: 8px; width: 44px; height: 44px; border-radius: 12px; }
.safe.is-sos h4 { font: 700 34px/1 var(--display); text-transform: uppercase; }
.disclaimer { margin-top: 36px; font-size: 16px; color: var(--muted); }
@media (min-width: 720px) { .moments ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .safe.is-sos { grid-column: 1 / -1; } }
@media (min-width: 1000px) {
  .moments > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: start; }
  .moment-title { position: sticky; top: calc(var(--topbar) + 24px); }
  .moments ul { margin-top: 0; }
}

/* ── Conductores: la luz del taxi a todo el ancho ── */
.driver { --ink: #1d1c19; --on-ink: #f2f0e9; --muted: #3f3c33; --line: rgba(29, 28, 25, .3); --accent: #1d1c19; --focus: #1d1c19; color-scheme: light; position: relative; background: var(--taxi); color: var(--ink); }
#conductores { padding-bottom: 0; }
.driver::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px; background: repeating-conic-gradient(#1d1c19 0 25%, transparent 0 50%) 0 0 / 28px 28px; }
.driver-grid { display: grid; gap: clamp(36px, 5vw, 64px); }
.driver-grid > div:first-child { padding-bottom: clamp(32px, 5vw, 72px); }
.driver h2 { font-size: clamp(52px, 9.6vw, 150px); line-height: 1; }
.driver .sub { color: var(--ink); }
.perks { display: grid; margin-top: clamp(28px, 4vw, 48px); }
.perk { padding: 18px 0; border-top: 1.5px solid var(--ink); }
.perk h3 { font: 700 clamp(26px, 2.6vw, 36px)/1.05 var(--display); text-transform: uppercase; letter-spacing: 0; }
.perk p { margin-top: 6px; color: var(--muted); }
.driver .todo { color: var(--ink); }
.driver-card { position: relative; z-index: 2; align-self: end; margin-bottom: -56px; background-color: var(--night-2); border: 1px solid var(--night-line); padding: clamp(22px, 3vw, 36px); border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(29, 28, 25, .6); }
.driver-card h3 { font: 700 clamp(30px, 3vw, 42px)/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.join { margin-top: 20px; counter-reset: join; }
.join li { position: relative; padding: 0 0 18px 48px; counter-increment: join; }
.join li::before { content: counter(join); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; background: var(--taxi); color: var(--on-taxi); clip-path: var(--stair); font: 700 16px/1 var(--display); }
.join span { display: block; font-size: 16px; color: var(--muted); }
.driver-card .stores { margin-top: 4px; }
.driver-card .btn-dark { background: var(--taxi); color: var(--on-taxi); }
.moto { display: flex; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.moto .i { color: var(--ink); }
@media (min-width: 720px) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1000px) { .driver-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); align-items: end; } }

/* ── Cobertura: la ciudad como ciudadelas de adobe ── */
.cover-grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
#cobertura { padding-top: clamp(128px, 13vw, 208px); }
.zones { width: 100%; max-width: 620px; margin: 0 auto; }
.zones svg { width: 100%; height: auto; }
.z-on { fill: var(--zone); stroke: var(--zone-edge); stroke-width: 2; }
.z-net { fill: url(#zona-red); pointer-events: none; }
.z-air { fill: var(--surface); stroke: var(--zone-edge); stroke-width: 2; }
.z-off { fill: transparent; stroke: var(--outline); stroke-width: 2; stroke-dasharray: 7 6; }
.z-plane { fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.z-sea { fill: none; stroke: var(--sea-line); stroke-width: 2; stroke-linecap: round; opacity: .6; }
.z-t { font: 700 17px var(--sans); fill: var(--zone-ink); }
.z-t-off { fill: var(--muted); font-weight: 500; }
.z-t-sea { fill: var(--accent); font-weight: 500; font-style: italic; }
.z-c { text-anchor: middle; }
.zones-note { text-align: center; }
.district-title { margin-top: 32px; font-size: 16px; font-weight: 700; color: var(--muted); }
.districts { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--outline); }
.districts li { display: inline; font: 700 clamp(30px, 3.5vw, 46px)/1.14 var(--display); text-transform: uppercase; }
.districts li:not(:last-child)::after { content: " /"; color: var(--taxi-strong); font-weight: 700; }
.districts.is-next li { color: var(--muted); }
.districts.is-next li:not(:last-child)::after { color: var(--muted); }
@media (prefers-color-scheme: light) { .districts li:not(:last-child)::after { color: var(--adobe); } }
@media (min-width: 980px) { .cover-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* ── Descarga: el letrero encendido ── */
.download { position: relative; overflow: clip; text-align: center; background-color: var(--night-0); }
.sign { position: relative; display: grid; place-items: center; width: clamp(150px, 19vw, 240px); height: clamp(56px, 7vw, 84px); margin: 0 auto clamp(28px, 4vw, 44px); background: var(--taxi); color: var(--on-taxi); border-radius: 14px 14px 4px 4px; font: 700 clamp(34px, 4.4vw, 54px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 60px rgba(255, 204, 51, .55), 0 0 200px rgba(255, 204, 51, .3); }
.beam { position: absolute; left: 50%; top: 0; width: 1400px; height: 760px; margin-left: -700px; background: radial-gradient(50% 60% at 50% 16%, rgba(255, 204, 51, .17), rgba(255, 204, 51, 0)); pointer-events: none; }
.download .wrap { position: relative; }
.download h2 { font-size: clamp(56px, 12vw, 192px); }
.dl-grid { display: grid; gap: 14px; margin-top: clamp(32px, 5vw, 60px); text-align: left; }
.dl { padding: clamp(22px, 3.5vw, 36px); background: var(--night-2); border: 1px solid var(--line); border-radius: 16px; }
.dl h3 { font: 700 clamp(30px, 3vw, 42px)/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
.dl p { margin: 8px 0 20px; color: var(--muted); }
@media (min-width: 768px) { .dl-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* ── Ayuda ── */
.help-grid { display: grid; gap: clamp(40px, 5vw, 72px); }
.help-grid h2 { font-size: clamp(46px, 6.4vw, 96px); line-height: 1; }
.help-links { margin-top: 28px; border-top: 1px solid var(--outline); }
.help-card { position: relative; display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.help-card .i { color: var(--accent); margin-top: 2px; }
.help-card a { font-weight: 700; font-size: 19px; }
.help-card a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.help-card p { font-size: 16px; color: var(--muted); }
.help-card.is-main { margin: 16px 0 6px; padding: 20px; border: 2px solid var(--taxi-strong); border-radius: 14px; background: var(--wash); }
.help-card.is-main a { font-size: 22px; color: var(--ink); }
.help-card.is-main .i { color: var(--ink); }
.help-card.is-main p { color: var(--ink); }
.faq-title { font: 700 clamp(30px, 3vw, 42px)/1 var(--display); text-transform: uppercase; letter-spacing: 0; margin-bottom: 12px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--outline); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 0; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 28px/1 var(--sans); color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 18px; color: var(--muted); max-width: 62ch; }
.faq details p a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
@media (min-width: 980px) { .help-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

/* ── Barra del pulgar. Sin JavaScript ni animación: es sticky dentro de un riel que empieza pasada la
      primera pantalla y termina antes de Descargar, así que entra y sale sola con el scroll. ── */
.thumb-rail { display: none; }
@media (max-width: 979px) {
  .thumb-rail { position: absolute; z-index: 30; left: 0; right: 0; top: 170vh; top: 170svh; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
  .thumb-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px max(12px, var(--safe-r)) max(8px, var(--safe-b)) max(12px, var(--safe-l)); background: var(--night-1); border-top: 1px solid var(--night-line); box-shadow: 0 -12px 32px rgba(0, 0, 0, .4); pointer-events: auto; }
  .thumb-menu { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 52px; min-height: 52px; padding: 0 12px; border: 1.5px solid var(--night-outline); border-radius: 12px; color: var(--night-ink); font-size: 15px; font-weight: 500; text-decoration: none; }
  .thumb-go { flex: 1; min-width: 0; }
}

/* ══ Composición de celular (< 768 px): pensada para el pulgar ══ */
@media (max-width: 767px) {
  /* El mapa gira para que la ruta cruce la pantalla de lado a lado: es el recorrido que maneja el carrusel. */
  .halo { display: none; }
  .city-map { opacity: .92; }
  .city-cam {
    --cam-h: min(100vh, 186vw); --cam-y: 34vh; inset: auto; left: 50%; top: calc(var(--cam-y) - var(--cam-h) * .59);
    width: calc(var(--cam-h) * 1.6); height: var(--cam-h); margin-left: calc(var(--cam-h) * -.824);
    transform-origin: 51.5% 59%; transform: rotate(var(--cam-turn));
  }
  @supports (height: 1svh) {
    .city-cam { --cam-h: min(100svh, 186vw); --cam-y: 34svh; }
  }
  .city::after { background: linear-gradient(180deg, rgba(11, 10, 9, .86), rgba(11, 10, 9, .5) 16%, rgba(11, 10, 9, .08) 30%, rgba(11, 10, 9, .08) 44%, rgba(11, 10, 9, .72) 58%, rgba(11, 10, 9, .94)); }
  .t-flag, .p-a text, .p-b text { transform: rotate(calc(var(--cam-turn) * -1)); }
  .p-a text { transform: rotate(calc(var(--cam-turn) * -1)) translate(66px, 2px); }
  .p-b text { transform: rotate(calc(var(--cam-turn) * -1)) translate(44px, 54px); }

  /* Inicio: el mensaje llena la pantalla y el teléfono asoma por abajo. En celulares altos asoma más. */
  @media (min-height: 800px) { :root { --peek: 176px; } }
  .hero { padding: 0 0 32px; }
  .hero-grid { gap: 20px; }
  .hero-copy { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--topbar) - var(--peek)); min-height: calc(100svh - var(--topbar) - var(--peek)); padding-top: 12px; }
  .place { align-self: flex-start; margin-bottom: 14px; }
  /* La ruta del mapa cruza esta altura: el texto lleva fondo propio para leerse siempre. */
  .lead { margin: 16px -12px 18px; padding: 10px 12px; border-radius: 12px; background: rgba(11, 10, 9, .86); }
  .hero .cta .btn { flex: 1 1 auto; padding-inline: 14px; }
  .hero-show { position: relative; }
  .phone { font-size: clamp(10.4px, 3.7cqi, 13px); }
  /* Lleva fondo propio: el mapa fijo y el taxi pasan por detrás y no deben chocar con el texto. */
  .facts { padding: 2px 12px; border-top: 0; border-radius: 10px; background: rgba(18, 17, 16, .92); }
  .facts li { padding: 14px 0; }
  .facts li:last-child { border-bottom: 0; }
  .show-foot { margin-top: 20px; background: rgba(18, 17, 16, .92); }

  /* Cómo funciona: mapa arriba y tarjetas abajo, como en la app. Deslizar las tarjetas maneja el taxi. */
  .how { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: 28px 0 calc(var(--bar) + 16px + var(--safe-b)); }
  .how > .wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .how-head h2 { font-size: clamp(40px, 12.2vw, 56px); }
  .how-head .sub { margin-top: 8px; font-size: 16px; color: var(--night-ink); }
  .how .steps { display: flex; flex: none; gap: 10px; margin-top: auto; }
  .step { flex: 0 0 min(86%, 340px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; max-width: none; padding: 14px 16px 16px; border-radius: 18px; }
  .stop { width: 44px; height: 44px; margin: 0; font-size: 22px; }
  .step h3 { font-size: 28px; }
  .step p { grid-column: 1 / -1; margin: 0; font-size: 16px; line-height: 1.42; }
  .bit { grid-column: 1 / -1; max-width: none; margin-top: 2px; padding: 8px 12px 10px; }
  .bit-tag { margin-bottom: 2px; font-size: 12px; }
  .bit .stepper-val { font-size: 28px; }
  .bit-sub { margin-top: 2px; }
  .mini { padding: 3px 0; font-size: 16px; }
  .bit .pin b { width: 36px; height: 40px; font-size: 19px; }
  .ways { margin-top: 6px; }

  /* Con el ejemplo visible la tarjeta crece: en altura media la ruta sube un poco para que no la tape. */
  @media (min-height: 681px) and (max-height: 799px) {
    .city-cam { --cam-y: 30vh; }
    @supports (height: 1svh) { .city-cam { --cam-y: 30svh; } }
  }

  /* En pantallas bajas el ejemplo cede su sitio al mapa: es decoración y el paso se entiende sin él.
     La ruta sube para quedar entre el título y las tarjetas; si no, las tarjetas tapan la salida y la llegada. */
  @media (max-height: 680px) {
    .bit { display: none; }
    .how-head .sub { display: none; }
    .city-cam { --cam-y: 26vh; }
    @supports (height: 1svh) { .city-cam { --cam-y: 26svh; } }
    .city::after { background: linear-gradient(180deg, rgba(11, 10, 9, .86), rgba(11, 10, 9, .4) 10%, rgba(11, 10, 9, .08) 18%, rgba(11, 10, 9, .08) 32%, rgba(11, 10, 9, .72) 46%, rgba(11, 10, 9, .94)); }
  }

  /* Carruseles: la tarjeta siguiente asoma; el teclado entra con tabindex y el lector de pantalla lee todo. */
  .rail { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
  .rail::after { content: ""; flex: 0 0 1px; }
  .rail:focus-visible { outline-offset: -3px; }
  .rail-hint { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--muted); }
  .rail-hint .i { width: 18px; height: 18px; }

  /* Categorías */
  #categorias { padding-bottom: 56px; }
  .cat-grid { gap: 10px; margin-top: 28px; }
  .cat-group { flex: 0 0 min(86%, 340px); align-content: start; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
  .cat { gap: 12px; padding: 12px 0; }
  .cat .i { width: 34px; height: 34px; }
  .cat h3 { font-size: 34px; }
  .cat p { font-size: 16px; }
  .cat-foot { font-size: 15px; }
  .schedule { margin-top: 24px; }

  .dl .stores .btn, .driver-card .stores .btn, .invite .stores .btn { width: 100%; }
  main > section, .thumb-zone > section { padding: 64px 0; }
  .thumb-zone > #conductores { padding-bottom: 0; }
  .thumb-zone > #cobertura { padding-top: 112px; }
}

/* ── Mejoras nuevas, siempre detrás de @supports ── */
@supports (container-type: inline-size) {
  .phone { font-size: clamp(10.4px, 3.55cqi, 12.5px); }
  @container (min-width: 460px) { .chips { display: block; } }
  /* Apilado en una columna: sin espacio a los lados, las fichas se saldrían de la pantalla. */
  @media (max-width: 1099px) { @container (max-width: 679px) { .chips { display: none; } } }
  @media (max-width: 767px) { .phone { font-size: clamp(10.4px, 3.7cqi, 13px); } }
}
@supports (text-wrap: balance) { .step p { text-wrap: pretty; } }
@supports (color: color-mix(in oklch, red, blue)) {
  .schedule { background: color-mix(in oklch, var(--surface) 86%, var(--wash)); }
}
@supports (color: oklch(0.8 0.15 90)) {
  .mark { box-shadow: 0 .4em 1.2em -.3em oklch(0.86 0.17 90 / .55); }
}
/* Puntos nativos del carrusel, sin JavaScript. Donde no existen queda la pista "Desliza para ver más". */
@supports selector(::scroll-marker) {
  @media (max-width: 767px) {
    .rail-hint { display: none; }
    .rail { scroll-marker-group: after; }
    .rail::scroll-marker-group { display: flex; justify-content: center; height: 44px; margin-top: 2px; }
    .rail > *::scroll-marker { content: "" / attr(data-marker); width: 44px; height: 44px; background: radial-gradient(circle, var(--outline) 4px, transparent 5px); }
    .rail > *::scroll-marker:target-current { background: radial-gradient(circle, var(--marker-on, var(--ink)) 7px, transparent 8px); }
    .rail > *::scroll-marker:focus-visible { outline: 3px solid var(--focus); outline-offset: -6px; border-radius: 50%; }
    .how { --marker-on: var(--taxi); }
  }
}

/* ══ Rendimiento. Lo lejano no se maqueta hasta después del primer pintado: maquetar los 11 000 px de la portada
      antes de pintar, y otra vez al llegar las fuentes, era casi todo el bloqueo de la carga.
      Es solo para esa primera carga: mientras dura, Chrome saca lo omitido del árbol de accesibilidad y las alturas
      son estimadas. Por eso js/motion.js le pone .cv-libre a cada bloque tras el evento load, de uno en uno en ratos
      libres, y la página queda igual que sin esta regla. Si cambias esta lista, cambia también LEJOS en js/motion.js.
      Solo con pantalla y con JavaScript: sin él nadie soltaría los bloques, y al imprimir sale todo completo.
      Las alturas no cuentan el padding. Quedan fuera .driver-card y .foot-word: la primera sobresale 56 px y la
      contención de pintura la recortaría; el margen negativo de la segunda dejaría de colapsar y el pie se encogería.
      .cv-espera es otra cosa: la pone y la quita js/motion.js en el celular, para lo que queda bajo el pliegue, y dura
      solo hasta el primer pintado. Sin ese archivo no existe y nada se oculta. ══ */
@media screen {
  .city { contain: strict; }
}
@supports (content-visibility: auto) {
  @media screen and (max-width: 767px) {
    .cv-espera { content-visibility: hidden; contain-intrinsic-height: auto 300px; }
  }
  @media screen and (scripting: enabled) {
    :where(#categorias, #seguridad, .driver-grid > div:first-child, #cobertura, #descargar, #reclamos, .foot-grid) { content-visibility: auto; contain-intrinsic-height: auto var(--alto); }
    .cv-libre { content-visibility: visible; }
    #categorias { --alto: 1201px; }
    #seguridad { --alto: 1317px; }
    .driver-grid > div:first-child { --alto: 756px; }
    #cobertura { --alto: 717px; }
    #descargar { --alto: 714px; }
    #reclamos { --alto: 617px; }
    .foot-grid { --alto: 291px; }
    @media (max-width: 1099px) {
      #categorias { --alto: 1050px; }
      #seguridad { --alto: 1360px; }
      .driver-grid > div:first-child { --alto: 650px; }
      #cobertura { --alto: 900px; }
      #descargar { --alto: 640px; }
      #reclamos { --alto: 760px; }
      .foot-grid { --alto: 450px; }
    }
    @media (max-width: 767px) {
      #categorias { --alto: 860px; }
      #seguridad { --alto: 1767px; }
      .driver-grid > div:first-child { --alto: 800px; }
      #cobertura { --alto: 968px; }
      #descargar { --alto: 688px; }
      #reclamos { --alto: 1066px; }
      .foot-grid { --alto: 616px; }
    }
  }
}

/* ══ Movimiento. Todo vive aquí abajo: con reducción de movimiento, o al imprimir, la página queda en reposo. ══ */

/* Para todos los tamaños */
@media screen and (prefers-reduced-motion: no-preference) {
  .cat::before { transition: transform .4s var(--ease); }
  .d::before { transition: transform .32s var(--ease); }
  .tick { animation: tick .28s ease-out; }
  @keyframes tick { from { opacity: .2; transform: translateY(-.5em); } }
  .faq details[open] p { animation: open-in .3s var(--ease) both; }
  @keyframes open-in { from { opacity: 0; transform: translateY(-6px); } }

  /* Apertura: 100 ms de espera para que js/motion.js la apague antes de verse en la segunda página. Total: 900 ms. */
  .intro { position: fixed; z-index: 50; left: 0; right: 0; top: 0; display: block; height: calc(var(--topbar) + 30px); overflow: hidden; pointer-events: none; animation: intro-out .8s linear .1s both; }
  .intro-road { position: absolute; left: 0; right: 0; top: calc(var(--topbar) - 1px); height: 2px; background: var(--taxi); box-shadow: 0 0 14px rgba(255, 204, 51, .8); transform: scaleX(0); transform-origin: right; animation: intro-road .56s var(--ease) .1s both; }
  .intro-car { position: absolute; left: 0; top: calc(var(--topbar) + 2px); width: 86px; height: 26px; transform: translateX(100vw); animation: intro-car .56s var(--ease) .1s both; }
  .topbar .logo span { animation: logo-on .8s linear .1s backwards; }
  .no-intro .intro { display: none; }
  .no-intro .topbar .logo span { animation: none; }
  @keyframes intro-out { 0%, 74% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes intro-road { to { transform: scaleX(1); } }
  @keyframes intro-car { to { transform: translateX(calc(max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter)) + 124px)); } }
  @keyframes logo-on { 0%, 62% { opacity: .22; } 70% { opacity: 1; } 76% { opacity: .4; } 86%, 100% { opacity: 1; } }
}

/* Escritorio con ratón: la maqueta en bucle y la coreografía completa ligada al scroll */
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) and (pointer: fine) {
  .pausa { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap; }
  .pausa i { width: 20px; height: 20px; border: 1.5px solid var(--outline); border-radius: 5px; }
  #pausa:focus-visible ~ .show-foot .pausa { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
  #pausa:checked ~ .show-foot .pausa i { background: var(--taxi); box-shadow: inset 0 0 0 3px var(--night-1); }
  .is-live ~ .show-foot .pausa { display: none; }
  .scene.is-off * { animation-play-state: paused !important; }
  #pausa:checked ~ .scene * { animation-play-state: paused !important; }

  .scene:not(.is-live) { --t: 15s; }
  .scene:not(.is-live) .sh-propose { animation: k-propose var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .sh-offers { animation: k-offers var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .sh-ride { animation: k-ride var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .v0 { animation: k-v0 var(--t) linear infinite both; }
  .scene:not(.is-live) .v1 { animation: k-v1 var(--t) linear infinite both; }
  .slider b, .slider i { transform-origin: left; }
  .scene:not(.is-live) .slider b { animation: k-thumb var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .tap.t-1 { animation: k-tap1 var(--t) ease-out infinite both; }
  .scene:not(.is-live) .tap.t-2 { animation: k-tap2 var(--t) ease-out infinite both; }
  .scene:not(.is-live) .c0 { animation: k-c0 var(--t) linear infinite both; }
  .scene:not(.is-live) .c1 { animation: k-c1 var(--t) linear infinite both; }
  .scene:not(.is-live) .c2 { animation: k-c2 var(--t) linear infinite both; }
  .scene:not(.is-live) .c3 { animation: k-c3 var(--t) linear infinite both; }
  .scene:not(.is-live) .timer i { animation: k-timer var(--t) linear infinite both; }
  .scene:not(.is-live) .offer.o-1 { animation: k-o1 var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .offer.o-2 { animation: k-o2 var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .offer.o-3 { animation: k-o3 var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .chip.c-1 { animation: k-chip1 var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .chip.c-2 { animation: k-chip2 var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .chip.c-3 { animation: k-chip3 var(--t) var(--ease) infinite both; }
  .scene:not(.is-live) .rings i { animation: k-ring var(--t) ease-out infinite both; }
  .scene:not(.is-live) .rings i + i { animation-delay: .5s; }
  .scene:not(.is-live) .rings i + i + i { animation-delay: 1s; }
  .scene:not(.is-live) .minicar { animation: k-car var(--t) linear infinite both; }
  .scene:not(.is-live) .phone { cursor: pointer; }

  @keyframes k-propose { 0% { opacity: 0; transform: translateY(100%); } 3%, 20% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; transform: translateY(100%); } }
  @keyframes k-offers { 0%, 21% { opacity: 0; transform: translateY(100%); } 25%, 66% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(100%); } }
  @keyframes k-ride { 0%, 67% { opacity: 0; transform: translateY(100%); } 71%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(100%); } }
  @keyframes k-v0 { 0%, 9% { opacity: 1; } 10%, 100% { opacity: 0; } }
  @keyframes k-v1 { 0%, 9% { opacity: 0; } 10%, 100% { opacity: 1; } }
  @keyframes k-thumb { 0%, 9% { transform: translateX(-1.6em); } 11%, 100% { transform: none; } }
  @keyframes k-tap1 { 0%, 15% { opacity: 0; transform: scale(.4); } 16.5% { opacity: .75; transform: scale(1); } 20%, 100% { opacity: 0; transform: scale(1.9); } }
  @keyframes k-tap2 { 0%, 59% { opacity: 0; transform: scale(.4); } 60.5% { opacity: .75; transform: scale(1); } 64%, 100% { opacity: 0; transform: scale(1.9); } }
  @keyframes k-c0 { 0%, 31% { opacity: 1; } 32%, 100% { opacity: 0; } }
  @keyframes k-c1 { 0%, 31% { opacity: 0; } 32%, 41% { opacity: 1; } 42%, 100% { opacity: 0; } }
  @keyframes k-c2 { 0%, 41% { opacity: 0; } 42%, 51% { opacity: 1; } 52%, 100% { opacity: 0; } }
  @keyframes k-c3 { 0%, 51% { opacity: 0; } 52%, 100% { opacity: 1; } }
  @keyframes k-timer { 0%, 24% { transform: scaleX(1); } 66%, 100% { transform: scaleX(.42); } }
  @keyframes k-o1 { 0%, 31% { opacity: 0; transform: translateY(1.2em) scale(.97); } 35%, 100% { opacity: 1; transform: none; } }
  @keyframes k-o2 { 0%, 41% { opacity: 0; transform: translateY(1.2em) scale(.97); } 45%, 60% { opacity: 1; transform: none; } 64%, 100% { opacity: .35; transform: none; } }
  @keyframes k-o3 { 0%, 51% { opacity: 0; transform: translateY(1.2em) scale(.97); } 55%, 60% { opacity: 1; transform: none; } 64%, 100% { opacity: .35; transform: none; } }
  @keyframes k-chip1 { 0%, 30% { opacity: 0; transform: translate(-3em, 1.4em); } 35%, 95% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
  @keyframes k-chip2 { 0%, 40% { opacity: 0; transform: translate(-3em, -1em); } 45%, 60% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateX(-1.5em); } }
  @keyframes k-chip3 { 0%, 50% { opacity: 0; transform: translate(-3em, -1.4em); } 55%, 60% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateX(-1.5em); } }
  @keyframes k-ring { 0%, 22% { opacity: 0; transform: scale(.25); } 24% { opacity: .55; } 44%, 100% { opacity: 0; transform: scale(1); } }
  @keyframes k-car { 0%, 70% { opacity: 0; transform: translate(214px, 176px); } 72% { opacity: 1; transform: translate(214px, 176px); } 78% { opacity: 1; transform: translate(214px, 140px); } 88% { opacity: 1; transform: translate(146px, 140px); } 95% { opacity: 1; transform: translate(100px, 108px); } 98%, 100% { opacity: 0; transform: translate(100px, 108px); } }

  /* El taxi avanza con la página y las cuadras se encienden tras él */
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    .noche { timeline-scope: --ruta, --inicio; }
    .hero { view-timeline: --inicio block; }
    .how { view-timeline: --ruta block; }
    .city-cam { animation: cam linear both; animation-timeline: --ruta; animation-range: entry 0% contain 100%; }
    .tramos path, .halo path { animation: lit linear both; animation-timeline: --ruta; animation-range: contain var(--a) contain var(--b); }
    .halo path { animation-name: lit-halo; }
    .side path { animation: lit-side linear both; animation-timeline: --inicio; animation-range: exit var(--a) exit var(--b); }
    .taxi-b { animation: steer linear both; animation-timeline: --ruta; animation-range: contain 2% contain 90%; }
    .taxi { animation: drive linear both, lit linear both; animation-timeline: --ruta, --ruta; animation-range: contain 2% contain 90%, entry 55% contain 0%; }
    .p-a, .p-b { animation: lit linear both; animation-timeline: --ruta; animation-range: entry 55% contain 0%; }
    /* Aquí la etiqueta no cabe a la derecha del pin: aparece cuando el título ya la pasó. */
    @media (max-width: 979px) { .p-b text { animation: lit linear both; animation-timeline: --ruta; animation-range: entry 88% entry 98%; } }
    .hero-copy, .facts { animation: leave linear both; animation-timeline: --inicio; animation-range: exit 35% exit 100%; }
    .hero-show { animation: leave-slow linear both; animation-timeline: --inicio; animation-range: exit 0% exit 100%; }
    .step, .how-head { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    :is(main, .thumb-zone) > section:not(#invitacion) :is(h2, .sub), .cat, .cat-foot, .schedule, .safe, .perk, .dl, .help-card, .faq details, .disclaimer { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .friso { view-timeline: --friso block; }
    .friso i { animation: slide linear both; animation-timeline: --friso; animation-range: cover; }
    .friso i + i { animation: slide linear both, lit-friso linear both; animation-timeline: --friso, --friso; animation-range: cover, entry 40% cover 50%; }
    .zones { view-timeline: --zonas block; }
    .z-g { animation: lit-zone linear both; animation-timeline: --zonas; animation-range: entry var(--a) entry var(--b); }
    .sign { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .beam { animation: lit linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    @keyframes cam { from { transform: translateY(3%) scale(1); } to { transform: translate(-1.5%, 1%) scale(1.08); } }
    @keyframes lit-halo { from { opacity: 0; } to { opacity: .16; } }
    @keyframes lit-side { from { opacity: 0; } to { opacity: .42; } }
    @keyframes lit-zone { from { opacity: .18; } to { opacity: 1; } }
    @keyframes lit-friso { from { opacity: .15; } to { opacity: 1; } }
    @keyframes rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
    @keyframes leave { to { opacity: 0; transform: translateY(-60px); } }
    @keyframes leave-slow { to { transform: translateY(-120px); } }
    @keyframes slide { from { transform: translateX(calc(var(--fw) / -2)); } to { transform: translateX(calc(var(--fw) / 2)); } }
  }
}

/* Celular o pantalla táctil: pocas animaciones, solo las que se notan.
   Son 7: el teléfono entra, el mapa despierta, el taxi avanza y gira, y se encienden los tres tramos de la ruta. */
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 767px), screen and (prefers-reduced-motion: no-preference) and (pointer: coarse) {
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    .noche { timeline-scope: --ruta, --pasos; }
    .how { view-timeline: --ruta block; }
    /* La ruta se enciende cuando el título ya pasó por encima de ella: si no, el texto cruza las marcas al subir. */
    .city-live { animation: lit linear both; animation-timeline: --ruta; animation-range: entry 92% entry 100%; }
    .phone { animation: phone-in linear both; animation-timeline: view(); animation-range: entry 0% entry 62%; }
    @keyframes phone-in { from { opacity: .55; transform: translateY(32px) scale(.9) rotate(-3deg); } to { opacity: 1; transform: none; } }
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  @supports (animation-timeline: scroll()) and (timeline-scope: --a) {
    /* Aquí el carrusel es quien maneja: deslizar las tarjetas mueve el taxi por la ruta. */
    .how .steps { scroll-timeline: --pasos inline; }
    .taxi { animation: drive linear both; animation-timeline: --pasos; }
    .taxi-b { animation: steer linear both; animation-timeline: --pasos; }
    .tramos g { animation: lit linear both; animation-timeline: --pasos; animation-range: var(--a) var(--b); }
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 768px) and (pointer: coarse) {
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    /* Tableta: el mismo recorrido, llevado por el scroll vertical. */
    .taxi { animation: drive linear both; animation-timeline: --ruta; animation-range: contain 2% contain 90%; }
    .taxi-b { animation: steer linear both; animation-timeline: --ruta; animation-range: contain 2% contain 90%; }
    .tramos g { animation: lit linear both; animation-timeline: --ruta; animation-range: contain var(--a) contain var(--b); }
  }
}

/* Curvas compartidas por los dos juegos. */
@keyframes lit { from { opacity: 0; } to { opacity: 1; } }
@keyframes drive { 0%{transform:translate(700px,770px)}8.33%{transform:translate(736.7px,742.3px)}16.67%{transform:translate(773.5px,714.6px)}25%{transform:translate(745.8px,677.9px)}33.33%{transform:translate(782.5px,650.2px)}41.67%{transform:translate(819.3px,622.5px)}50%{transform:translate(856px,594.8px)}58.33%{transform:translate(892.7px,567.2px)}66.67%{transform:translate(865.1px,530.4px)}75%{transform:translate(901.8px,502.7px)}83.33%{transform:translate(938.5px,475.1px)}91.67%{transform:translate(975.3px,447.4px)}100%{transform:translate(947.6px,410.6px)} }
@keyframes steer { 0%{transform:rotate(-37deg)}14.27%{transform:rotate(-37deg)}19.07%{transform:rotate(-127deg)}22.6%{transform:rotate(-127deg)}27.4%{transform:rotate(-37deg)}55.93%{transform:rotate(-37deg)}60.73%{transform:rotate(-127deg)}64.27%{transform:rotate(-127deg)}69.07%{transform:rotate(-37deg)}89.27%{transform:rotate(-37deg)}94.07%{transform:rotate(-127deg)}100%{transform:rotate(-127deg)} }

@media (prefers-reduced-motion: reduce) { #pausa { display: none; } }
@media print {
  .intro, .city, .scene, .bit, .thumb-rail, .show-foot, .beam, .sign, .rail-hint { display: none !important; }
  .noche, .download, .foot { background: #ffffff; }
  .rail { display: grid; overflow: visible; margin: 0; padding: 0; }
  .how { min-height: 0; padding: 24px 0; }
  /* Debe ganarle al flex del celular: una hoja A4 cae dentro de ese ancho y los pasos 2 y 3 se saldrían del papel. */
  .how .steps { display: grid; gap: 16px; margin: 0; }
  .moment-title { color: #000000; }
  .facts { background: none; }
  .faq details::details-content { display: block; content-visibility: visible; }
  .faq summary::after { display: none; }
  .friso + section, .how, .thumb-zone > section { break-inside: auto; }
}