/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5
 * Hallmark · genre: playful · macrostructure: Marquee Hero · theme: Hum
 *   H1 Marquee knobs: size=xxl, alignment=left-bias, underlay=rule-below
 *   enrichment: none (typography) + one CSS character moment (pulsing pin + coral star-burst)
 *   nav: N9 Edge-aligned minimal · footer: Ft8 Marquee scroll · tone: playful/warm
 * Consumes tokens.css by name. No inline OKLCH. No serif. No pure white/black. No square corners. */

@import "tokens.css";

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-feature-settings: "ss01" on, "cv11" on;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  font-style: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }
a { color: inherit; }

/* Visually hidden but available to assistive tech. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Emphasis highlighter — tracks the text across wraps (Hum rule) */
em, .hl {
  font-style: normal;
  color: inherit;
  background-image: linear-gradient(var(--hl, oklch(86% 0.18 95 / 0.55)) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 82%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.02em;
}
.hl--cyan  { --hl: oklch(66% 0.18 235 / 0.45); }
.hl--coral { --hl: oklch(68% 0.24 18 / 0.40); }

/* — Shell: one width model everywhere ————————————————————— */
.section {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-3xl) var(--page-gutter);
}
.section--band { max-width: none; padding-inline: 0; padding-block: var(--space-3xl); }
.section--band > .band-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.band-pear  { background: var(--color-paper-2); }
.band-cyan  { background: var(--tint-cyan); }

.eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-2);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-accent-3);
  box-shadow: 0 0 0 0 oklch(68% 0.24 18 / 0.5);
  animation: soft-pulse 2.4s var(--ease-in-out) infinite;
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-ink);
  opacity: 0.9;
  max-width: 46ch;
}

/* — Buttons: the Hum push system (verbatim base) ————————————— */
.btn {
  --btn-face: var(--color-accent); --btn-ink: var(--color-ink);
  --btn-edge: var(--color-accent-deep); --btn-cast: oklch(76% 0.20 95 / 0.45);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.85rem 1.5rem; font-family: var(--font-body); font-size: var(--text-base);
  font-weight: 600; border: 0; border-radius: var(--radius-pill);
  color: var(--btn-ink); background: var(--btn-face); cursor: pointer;
  position: relative; isolation: isolate; text-decoration: none;
  box-shadow: 0 4px 0 0 var(--btn-edge), 0 6px 12px -3px var(--btn-cast);
  transform: translateY(0);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color 160ms;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--btn-edge), 0 12px 22px -4px var(--btn-cast); }
.btn:active { transform: translateY(3px);  box-shadow: 0 1px 0 0 var(--btn-edge), 0 2px 6px -2px var(--btn-cast); transition-duration: 70ms; }
.btn:focus-visible { outline: 3px solid color-mix(in oklch, var(--btn-edge) 70%, var(--color-focus)); outline-offset: 3px; }
.btn[disabled], .btn.is-loading { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: 0 4px 0 0 var(--btn-edge); }
.btn__arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--sm { padding: 0.55rem 1.05rem; font-size: var(--text-sm); }
.btn--outline {
  background: transparent; color: var(--color-ink);
  box-shadow: inset 0 0 0 2px var(--color-ink);
}
.btn--outline:hover { background: var(--color-ink); color: var(--color-paper); box-shadow: none; transform: translateY(-2px); }
.btn--outline:active { transform: translateY(1px); }

/* — Community strip: the WhatsApp / Telegram group invites —————————————
   Above the nav, not inside the hero, because the fold decides it: on a 390px phone the hero's
   first actionable element already starts below the viewport. Ink face borrowed from .band-ink so
   it reads as chrome; the pills reuse the store-button idiom inverted (paper outline on ink,
   filling to solid paper on hover). Not sticky — the nav below it already owns that job, and two
   stacked sticky bars would eat the fold this strip exists to win. */
.community { background: var(--color-ink); color: var(--color-paper); }
.community__inner {
  /* Edge-aligned like the nav right below it: the label lands under the wordmark and the pills
     under the download button, so the two bars share one grid instead of reading as two systems. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--space-xs) var(--page-gutter);
}
.community__label {
  display: inline-flex; align-items: center; gap: 0.55em; margin: 0;
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in oklch, var(--color-paper) 74%, transparent);
}
.community__label .dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-accent-3);
}
.community__links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.community__link {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.28rem 0.85rem; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  color: var(--color-paper);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-paper) 40%, transparent);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.community__link:hover { background: var(--color-paper); color: var(--color-ink); }
.community__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.community__icon { width: 1.05rem; height: 1.05rem; flex: none; }
/* Brand hue only on the ink face, where both clear 3:1 against near-black. On hover the pill turns
   to paper and the glyph joins the ink text — mint on cream would not hold that contrast. */
.community__link--wa .community__icon { color: var(--color-mint); }
.community__link--tg .community__icon { color: var(--color-accent-2); }
.community__link:hover .community__icon { color: currentColor; }

/* — Nav: N9 edge-aligned minimal ————————————————————————— */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--space-md) var(--page-gutter);
  background: color-mix(in oklch, var(--color-paper) 82%, transparent);
  backdrop-filter: blur(8px);
}
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  letter-spacing: -0.03em; text-decoration: none; color: var(--color-ink);
  display: inline-flex; align-items: baseline; gap: 0.12em;
}
.wordmark .mark-dot { color: var(--color-accent-3); }

/* — Hero: Marquee ——————————————————————————————————— */
.hero { padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
.hero__inner { position: relative; }
.hero__eyebrow { margin-bottom: var(--space-lg); }
.hero h1 {
  font-size: var(--text-display);
  max-width: 15ch;
  margin-bottom: var(--space-xl);
}
.hero .lede { margin-bottom: var(--space-xl); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.hero__note { font-size: var(--text-sm); color: var(--color-ink-2); }

/* Hero claims — the above-the-fold proof chips (100% to the driver · Voy only suggests).
 * Solid pear badge (ink text) reuses the primary-button colour pair, so it stays contrast-safe
 * on the light paper; the surrounding pill echoes the count-cell / compare--voy ring language. */
.hero__claims { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-xl); }
.hero__claims .hero__claim { margin-bottom: 0; }
.hero__claim {
  display: inline-flex; align-items: center; gap: var(--space-md);
  max-width: 100%; margin-bottom: var(--space-xl);
  padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-xs);
  background: var(--tint-pear); border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 2px var(--color-accent-deep);
}
.hero__claim-num {
  flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink); background: var(--color-accent);
  padding: 0.4em 0.55em; border-radius: var(--radius-pill);
}
.hero__claim-txt { font-size: var(--text-base); line-height: 1.25; color: var(--color-ink); }
/* The key words inside both chips reuse the h1's pear highlighter ("ustedes"), so the hooks
 * visibly rhyme with the headline. Band is thicker than the h1's (0.45em vs 0.32em) because
 * the chip text is much smaller; ink on pear stays far above AA contrast. */
.hero__claim-txt strong {
  font-weight: 700;
  background-image: linear-gradient(var(--hl, oklch(86% 0.18 95 / 0.55)) 0 0);
  background-repeat: no-repeat;
  background-size: 100% 0.45em;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 0.02em;
}

/* Character moment — a taxi with a passenger cruising a route (pickup → destino).
 * Built entirely in SVG + CSS. One character moment per page (Hum rule). */
.route-scene { width: 100%; margin-top: var(--space-2xl); }
.route-scene svg { width: 100%; height: auto; max-height: 160px; display: block; }

.rs-road { stroke: var(--color-line); stroke-width: 2.5; stroke-dasharray: 5 9; stroke-linecap: round; fill: none; }
.rs-pin-pear  { fill: var(--color-accent); }
.rs-pin-coral { fill: var(--color-accent-3); }
.rs-pin-dot   { fill: var(--color-paper); }

.car-body   { fill: var(--color-accent); }
.car-roof   { fill: var(--color-accent-3); }
.car-window { fill: var(--color-accent-2); fill-opacity: 0.35; }
.car-head   { fill: var(--color-ink); opacity: 0; }   /* the boarded passenger — fades in at pickup */
.car-wheel  { fill: var(--color-ink); }
.car-hub    { fill: var(--color-accent); }
.car-light  { fill: var(--color-paper); stroke: var(--color-accent-deep); stroke-width: 1; }
.rider-fill { fill: var(--color-ink); }

/* One shared 7s timeline so the taxi, wheels, waiting rider and boarded passenger stay in sync. */
.car         { animation: rs-drive 7s linear infinite; }
.car-wheel-g { transform-box: fill-box; transform-origin: center; animation: rs-wheel 7s linear infinite; }
.car-bob     { transform-box: fill-box; transform-origin: center; animation: rs-bob 1.5s var(--ease-in-out) infinite; }
.car-head    { animation: rs-passenger-in 7s linear infinite; }
.rider       { animation: rs-rider 7s linear infinite; }

@keyframes rs-drive {
  0%   { transform: translateX(-120px); }  /* off-screen left */
  18%  { transform: translateX(8px); }     /* pull up to the pickup pin */
  34%  { transform: translateX(8px); }     /* stopped — boarding */
  78%  { transform: translateX(430px); }   /* drive off to destination */
  100% { transform: translateX(430px); }
}
@keyframes rs-wheel {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(300deg); }       /* spinning on approach */
  34%  { transform: rotate(300deg); }       /* stopped at pickup */
  78%  { transform: rotate(1040deg); }      /* spinning to destination */
  100% { transform: rotate(1040deg); }
}
@keyframes rs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
@keyframes rs-passenger-in {   /* passenger appears inside once boarded */
  0%, 18%   { opacity: 0; }
  25%       { opacity: 1; }
  80%       { opacity: 1; }
  85%, 100% { opacity: 0; }
}
@keyframes rs-rider {          /* waiting rider hops in when the taxi stops, reappears next loop */
  0%, 14%   { opacity: 1; transform: translateY(0); }
  22%       { opacity: 0; transform: translateY(3px); }
  84%       { opacity: 0; transform: translateY(3px); }
  93%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes soft-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(68% 0.24 18 / 0.5); }
  70%  { box-shadow: 0 0 0 9px oklch(68% 0.24 18 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(68% 0.24 18 / 0); }
}

/* — App-store buttons — real links since both listings went live (2026-08-15) ————
   Same push idiom as .btn (lift, press, focus ring) on the ink face this block already wore, so the
   download behaves like every other button on the page without introducing a second button language.
   The focus ring is --color-focus straight, NOT .btn's edge-mixed one: mixing near-black ink with the
   focus blue yields a dark ring that all but disappears against cream paper. */
.store-buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.store-btn {
  /* Google Play glyph colours, scoped so they never bleed into other icons. */
  --gp-blue: oklch(70% 0.15 235); --gp-green: oklch(78% 0.17 150);
  --gp-yellow: oklch(85% 0.17 90); --gp-red: oklch(66% 0.2 25);
  --sb-edge: oklch(11% 0.012 250); --sb-cast: oklch(20% 0.012 250 / 0.38);
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.6rem 1.1rem; border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-paper);
  cursor: pointer; position: relative; text-decoration: none;
  box-shadow: 0 4px 0 0 var(--sb-edge), 0 6px 12px -3px var(--sb-cast);
  transform: translateY(0);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.store-btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--sb-edge), 0 12px 22px -4px var(--sb-cast); }
.store-btn:active { transform: translateY(3px);  box-shadow: 0 1px 0 0 var(--sb-edge), 0 2px 6px -2px var(--sb-cast); transition-duration: 70ms; }
.store-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
/* The line under the store buttons: same muted note style as the hero's, it just needs its gaps. */
.store-note { margin-top: var(--space-sm); margin-bottom: var(--space-lg); }
.store-btn__logo { width: 1.55rem; height: 1.55rem; flex: none; }
.store-btn__text { display: grid; line-height: 1.15; text-align: left; }
.store-btn__text small { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.store-btn__text strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }

.rule-thick { border: 0; border-top: var(--rule-thick) solid var(--color-ink); max-width: var(--page-max); margin: 0 auto; }

/* — The two services: rides + parcels ————————————————————
   Each card owns one accent surface the page already speaks: rides rest on the pear tint the
   compare--voy card wears, parcels on the cyan tint the contrast band wears, so the pair reads
   as two faces of the same system instead of a new component language. */
.modes__head { margin-bottom: var(--space-2xl); }
.modes__head h2 { font-size: var(--text-3xl); max-width: 18ch; }
.modes { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode { border-radius: var(--radius-card); padding: var(--space-xl); }
.mode--viaje   { background: var(--tint-pear); box-shadow: inset 0 0 0 2px var(--color-accent-deep); }
.mode--paquete { background: var(--tint-cyan); box-shadow: inset 0 0 0 2px var(--color-accent-2); }
.mode__key {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-2);
  display: block; margin-bottom: var(--space-sm);
}
.mode h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.mode p { color: var(--color-ink); opacity: 0.86; }

/* — "Qué es Voy": lede + one big + supporting (not a 3-card row) ——— */
.about { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; }
.about__head h2 { font-size: var(--text-3xl); max-width: 20ch; }
.about__head p { margin-top: var(--space-lg); font-size: var(--text-lg); max-width: 58ch; color: var(--color-ink); opacity: 0.9; }
.pillars { display: grid; gap: var(--space-lg); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar { padding: var(--space-lg); }
.pillar h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.pillar p { color: var(--color-ink); opacity: 0.85; font-size: var(--text-sm); }
.pillar__key { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-2); display: block; margin-bottom: var(--space-sm); }

/* — Contrast: "otras apps" vs "Voy" (comparison, honest) —————————— */
.contrast__head { margin-bottom: var(--space-2xl); }
.contrast__head h2 { font-size: var(--text-3xl); max-width: 18ch; }
.contrast-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare {
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  background: var(--color-paper);
  box-shadow: 0 12px 32px -18px oklch(20% 0.012 250 / 0.16);
}
.compare--old { background: var(--color-paper-3); box-shadow: none; }
.compare--voy { background: var(--tint-pear); box-shadow: inset 0 0 0 2px var(--color-accent-deep); }
.compare h3 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.compare li { display: flex; gap: 0.6em; align-items: flex-start; font-size: var(--text-base); }
.compare li .glyph { flex: none; width: 1.4em; height: 1.4em; margin-top: 0.15em; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-label); font-size: 0.8em; }
.compare--old .glyph { background: oklch(20% 0.012 250 / 0.10); color: var(--color-ink-2); }
.compare--voy .glyph { background: var(--color-accent); color: var(--color-ink); }
.compare--old li { color: var(--color-ink-2); }

/* El <span> de la viñeta es el segundo y último item flex: sin él, cada <strong> se convertía en una
   columna aparte y la frase salía partida en dos. Las viñetas sin negrita del resto de la página no
   lo necesitan, así que la regla es aditiva y no toca nada de lo que ya había. */
.compare li > span:not(.glyph) { flex: 1 1 auto; min-width: 0; }

/* — Para choferes: the 100% moment on ink + subscription payment options ——— */
.band-ink { background: var(--color-ink); color: var(--color-paper); }
.driver { display: grid; gap: var(--space-2xl); }
.driver__head h2 { font-size: var(--text-3xl); max-width: 18ch; margin-bottom: var(--space-lg); }
.eyebrow--ink { color: color-mix(in oklch, var(--color-paper) 74%, transparent); }
.eyebrow--ink .dot { background: var(--color-accent-3); }
.lede--ink { color: var(--color-paper); opacity: 0.86; max-width: 54ch; }
/* the big pear number — override the global em highlight; make it the character moment */
.big100 {
  background: none; color: var(--color-accent); font-style: normal;
  padding: 0; font-weight: 700; font-size: 1.08em;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

.pay { display: grid; gap: var(--space-lg); }
.pay__q { font-size: var(--text-lg); color: var(--color-paper); opacity: 0.92; }
.pay__opts { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pay__card {
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  background: color-mix(in oklch, var(--color-paper) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-paper) 16%, transparent);
}
.pay__key {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent);
  display: block; margin-bottom: var(--space-xs);
}
.pay__card h3 { font-size: var(--text-lg); color: var(--color-paper); margin-bottom: var(--space-2xs); }
.pay__card p { color: var(--color-paper); opacity: 0.78; font-size: var(--text-sm); }
.pay__tags { display: flex; gap: var(--space-2xs); margin-top: var(--space-md); }
.paytag {
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.06em; padding: 0.2em 0.7em; border-radius: var(--radius-pill);
  color: var(--color-paper);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--color-accent) 65%, transparent);
}
.pay__note {
  font-size: var(--text-sm); color: var(--color-paper); opacity: 0.7;
  max-width: 60ch; border-top: var(--rule-hair) solid color-mix(in oklch, var(--color-paper) 16%, transparent);
  padding-top: var(--space-md);
}

/* — Launch offer: the driver hook, built from the .pay pieces one notch louder ——— */
.offer { gap: var(--space-md); }
.offer .pay__card h3 { font-size: var(--text-xl); }
.offer .pay__tags { flex-wrap: wrap; }
/* the bigger of the two offers wears the full pear ring, so it reads first */
.offer__card { box-shadow: inset 0 0 0 2px var(--color-accent); }

/* — How it works: numbered step sequence (F4) ————————————————— */
.steps__head { margin-bottom: var(--space-2xl); }
.steps__head h2 { font-size: var(--text-3xl); max-width: 16ch; }
.steps { display: grid; gap: var(--space-xl); counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-lg); align-items: start; }
.step__num {
  font-family: var(--font-label); font-weight: 500;
  font-size: var(--text-2xl); color: var(--color-accent-deep);
  line-height: 1; min-width: 2.4ch;
}
.step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.step p { color: var(--color-ink); opacity: 0.86; max-width: 54ch; }

/* — Waitlist form ——————————————————————————————————— */
.waitlist { max-width: 40rem; }
.waitlist h2 { font-size: var(--text-3xl); max-width: 16ch; margin-bottom: var(--space-md); }
.waitlist .lede { margin-bottom: var(--space-xl); }
.form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field input, .field select {
  font-family: var(--font-body); font-size: var(--text-base);
  padding: 0.8rem 1rem; border-radius: var(--radius-input);
  border: 2px solid var(--color-line); background: var(--color-paper);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field input:hover, .field select:hover { border-color: color-mix(in oklch, var(--color-ink) 30%, transparent); }
.field input:focus-visible, .field select:focus-visible {
  outline: 0; border-color: var(--color-focus);
  box-shadow: 0 0 0 3px oklch(55% 0.20 235 / 0.25);
}
.field input[aria-invalid="true"] { border-color: var(--color-accent-3); }
.field .error { font-size: var(--text-sm); color: var(--color-accent-3); min-height: 1.2em; }

/* honeypot — visually hidden, off-screen, not display:none (bots skip display:none) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__actions { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.form__submit-row { position: relative; display: inline-flex; }
.cf-turnstile { min-height: 65px; }

.form__msg { font-size: var(--text-base); min-height: 1.4em; }
.form__msg.ok  { color: color-mix(in oklch, var(--color-mint) 60%, var(--color-ink)); font-weight: 500; }
.form__msg.bad { color: var(--color-accent-3); font-weight: 500; }
.privacy { font-size: var(--text-xs); color: var(--color-ink-2); max-width: 48ch; }

/* success confirmation panel */
.confirm { display: none; text-align: left; }
.confirm.show { display: block; }
.confirm h2 { color: var(--color-ink); }
.confirm .badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-label); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-ink); background: var(--color-mint);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); margin-bottom: var(--space-md);
}

/* star-burst micro-celebration */
.star-burst {
  position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px;
  width: 24px; height: 24px;
  background:
    linear-gradient(90deg, transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%),
    linear-gradient(0deg,  transparent 47%, var(--color-accent-3) 47% 53%, transparent 53%);
  animation: star-burst 420ms ease-out forwards;
  pointer-events: none; z-index: 5;
}
@keyframes star-burst {
  0%   { transform: scale(0) rotate(0deg);   opacity: 1; }
  60%  { transform: scale(1.2) rotate(35deg); opacity: 0.9; }
  100% { transform: scale(1.4) rotate(45deg); opacity: 0; }
}

/* — Footer: Ft8 marquee scroll + meta —————————————————————— */
.footer { border-top: var(--rule-hair) solid var(--color-line); overflow: hidden; }
.marquee { overflow: hidden; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-line); }
.marquee__track {
  display: inline-flex; gap: 1.5rem; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl);
  letter-spacing: -0.02em; will-change: transform;
  animation: marquee 32s linear infinite;
}
.marquee__track span { color: var(--color-ink); }
.marquee__track .sep { color: var(--color-accent-3); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.footer__meta {
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--space-xl) var(--page-gutter);
  display: grid; gap: var(--space-lg);
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.footer__top {
  display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl);
  justify-content: space-between; align-items: flex-start;
}
.footer__brand { display: grid; gap: var(--space-xs); }
.footer__brand .wordmark { font-size: var(--text-xl); }
.footer__tag { color: var(--color-ink-2); max-width: 34ch; line-height: 1.4; }
.footer__links { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.footer__links a {
  color: var(--color-ink-2); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-ink); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  justify-content: space-between; align-items: center;
  border-top: var(--rule-hair) solid var(--color-line);
  padding-top: var(--space-md);
}
.footer__made {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.55em;
}
.footer__made .dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-accent-3);
}

/* — Reveal on scroll (section heads only) —————————————————————
 * Gated behind html.js so that without JavaScript every element stays visible
 * (progressive enhancement — core content is never hidden behind script). */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-snap), transform var(--dur-slow) var(--ease-snap); }
.js .reveal.in { opacity: 1; transform: none; }

/* — Responsive ————————————————————————————————————— */
@media (max-width: 60rem) {
  .pillars { grid-template-columns: 1fr; }
  .contrast-grid { grid-template-columns: 1fr; }
  .modes { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .pay__opts { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .section { padding-block: var(--space-2xl); }
  .section--band { padding-block: var(--space-2xl); }
  .route-scene { margin-top: var(--space-xl); }
  /* full-width only for the hero + form CTAs — never the compact nav button */
  .hero__actions { width: 100%; }
  .hero__actions .btn, .form .btn, .form__submit-row, .form__submit-row .btn { width: 100%; }
  .nav .btn { width: auto; }
  .step { grid-template-columns: 1fr; gap: var(--space-sm); }
  .footer__top { flex-direction: column; gap: var(--space-lg); }
  .store-buttons { width: 100%; }
  .store-btn { flex: 1 1 auto; justify-content: center; }
  /* The strip wraps to two rows here, so the edge alignment it borrows from the nav no longer
     applies: centre both rows and grow the pills to a real thumb target. */
  .community__inner { justify-content: center; }
  .community__link { padding-block: 0.55rem; }
}

/* — Reduced motion ———————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eyebrow .dot, .car-wheel-g, .car-bob, .rider { animation: none; }
  .car { animation: none; transform: translateX(150px); }  /* taxi mid-route, en route */
  .car-head { animation: none; opacity: 1; }               /* passenger aboard */
  .rider { opacity: 0; }                                    /* already picked up */
  .marquee__track { animation: none; transform: none; }
  .reveal { transition: opacity 150ms linear; transform: none; }
  .star-burst { display: none; }
  * { transition-duration: 1ms !important; }
}

/* — Voy para Empresas · el cierre hablado ————————————————————————————
   Una empresa que evalúa esto pregunta antes de registrarse, así que el bloque termina en una
   persona y no en un formulario. En móvil se apila; el botón va primero porque es la acción, y los
   dos contactos debajo porque son la alternativa, no el plato principal. */
.empresas__talk {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-card, 18px);
  background: var(--color-paper);
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 860px) {
  .empresas__talk { grid-template-columns: 1.35fr 1fr; }
}
.empresas__talk-copy h3 { margin: 0 0 0.4rem; }
.empresas__talk-copy p { margin: 0; max-width: 46ch; }
.empresas__talk-actions { display: grid; gap: 0.75rem; justify-items: start; }
@media (min-width: 860px) {
  .empresas__talk-actions { justify-items: stretch; }
}
.empresas__contact {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
  font-family: var(--font-label);
  font-size: var(--text-sm);
}
.empresas__contact a { color: var(--color-ink); text-underline-offset: 3px; }
.empresas__more { font-size: var(--text-sm); text-underline-offset: 3px; }