/* ============================================================
   Oliver Express — Variante 2 "A Jornada da Visão"
   Dunkle 3D-Scroll-Reise: blind → durch die Linse → Licht.
   Fonts: Optician Sans (Optotypen), Zodiak (Serif-Statements),
   Synonym (Body) + Logo: Playfair italic / Dancing Script.
   ============================================================ */

@font-face { font-family: 'Optician Sans'; src: url('fonts/OpticianSans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Zodiak'; src: url('fonts/Zodiak-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Zodiak'; src: url('fonts/Zodiak-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Synonym'; src: url('fonts/Synonym-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Synonym'; src: url('fonts/Synonym-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Synonym'; src: url('fonts/Synonym-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('fonts/PlayfairDisplay-700-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Dancing Script'; src: url('fonts/DancingScript-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* Nacht-Palette + Logo-Gradient als Akzent-Faden */
  --void:    oklch(0.14 0.022 268);
  --void-2:  oklch(0.18 0.028 265);
  --void-3:  oklch(0.23 0.032 262);
  --star:    oklch(0.93 0.015 85);   /* warmweißer Text */
  --dim:     oklch(0.68 0.02 265);
  --faint:   oklch(0.48 0.025 265);
  --line:    oklch(0.32 0.03 265);
  --violet:  #667eea;                /* Logo-Gradient */
  --purple:  #764ba2;
  --pink:    #f093fb;
  --amber:   oklch(0.80 0.115 80);   /* Optotypen-Glühen */
  --amber-deep: oklch(0.68 0.13 70);
  --hero-bg: #0a0d16;                /* fixer Canvas-Anker */

  --font-opt: 'Optician Sans', sans-serif;
  --font-z: 'Zodiak', Georgia, serif;
  --font-b: 'Synonym', -apple-system, sans-serif;
  --font-logo: 'Playfair Display', serif;

  --t-xs: 0.76rem; --t-sm: 0.9rem; --t-md: 1.05rem;
  --t-lg: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  --t-xl: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --t-2xl: clamp(2.8rem, 2rem + 4.5vw, 6rem);

  --s-sm: 0.75rem; --s-md: 1rem; --s-lg: 1.5rem; --s-xl: 2rem;
  --s-2xl: 3rem; --s-3xl: 4.5rem; --s-4xl: clamp(4.5rem, 3rem + 6vw, 8rem);
  --wrap: 74rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b); font-size: var(--t-md); line-height: 1.65;
  color: var(--star); background: var(--void);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--purple); color: #fff; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

/* ---------- Logo (von oe.thalex.de übernommen) ---------- */
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand .o-mark {
  width: 2.1rem; height: 2.1rem; border-radius: 0.55rem; flex-shrink: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  display: grid; place-items: center;
  font-family: 'Dancing Script', cursive; font-weight: 700; font-size: 1.7rem;
  color: #fff; line-height: 1; padding-bottom: 0.2rem;
  box-shadow: 0 4px 16px oklch(0.5 0.15 300 / 0.35);
}
.brand .word {
  font-family: var(--font-logo); font-style: italic; font-weight: 700;
  font-size: 1.15rem; color: var(--star); letter-spacing: 0.01em;
}

/* ---------- Header ---------- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 70; transition: background 0.4s, box-shadow 0.4s; }
.site-head.scrolled {
  background: color-mix(in oklch, var(--void) 82%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.1rem); }
.nav a:not(.cta) {
  text-decoration: none; font-size: var(--t-sm); font-weight: 500; color: var(--dim);
  letter-spacing: 0.02em; padding-block: 0.3rem; position: relative;
}
.nav a:not(.cta):hover, .nav a[aria-current="page"]:not(.cta) { color: var(--star); }
.nav a[aria-current="page"]:not(.cta)::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--pink)); border-radius: 2px;
}
.cta {
  font-weight: 600; font-size: var(--t-sm); text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #667eea, #764ba2 55%, #b06ad0);
  padding: 0.7rem 1.5rem; border-radius: 999px; border: none;
  box-shadow: 0 6px 22px oklch(0.5 0.16 295 / 0.4);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
  display: inline-block; cursor: pointer;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px oklch(0.55 0.18 300 / 0.55); }
.cta.ghost { background: transparent; border: 1.5px solid var(--line); color: var(--star); box-shadow: none; }
.cta.ghost:hover { border-color: var(--violet); }
.cta.amber { background: linear-gradient(120deg, oklch(0.72 0.13 72), oklch(0.8 0.12 85)); color: #241a05; box-shadow: 0 6px 22px oklch(0.7 0.13 78 / 0.3); }
.nav-toggle { display: none; }

/* ---------- Die Reise ---------- */
.journey { position: relative; height: 640vh; }
.journey-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#voyage {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: blur(var(--vb, 0px)) saturate(var(--vs, 1));
  will-change: filter;
}

/* Stationen (HTML-Overlays) */
.station {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: clamp(1.5rem, 5vw, 4rem);
  opacity: 0; pointer-events: none; z-index: 5;
  will-change: opacity, transform;
}
.station .inner { max-width: 54rem; position: relative; padding: clamp(1rem, 3vw, 2.5rem); }
.station .inner::before { /* weicher dunkler Kern für Lesbarkeit über hellen Szenen */
  content: ''; position: absolute; inset: -10% -14%; z-index: -1;
  background: radial-gradient(ellipse at center, oklch(0.13 0.028 268 / 0.42) 32%, transparent 74%);
}
.station h2, .station p.big {
  font-family: var(--font-z); font-weight: 400; font-size: var(--t-2xl);
  line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance;
}
.station h2 em { font-style: italic; color: var(--pink); }
.station .sub {
  font-size: var(--t-lg); color: oklch(0.88 0.015 85); margin-top: var(--s-lg); font-weight: 400;
  text-shadow: 0 1px 14px oklch(0.1 0.02 268 / 0.6);
}
.station .sub strong { color: var(--amber); font-weight: 600; }

/* Snellen-Station: absteigende Optotypen-Zeilen */
.snellen {
  font-family: var(--font-opt); text-transform: uppercase; color: var(--amber);
  position: relative; padding: clamp(1.5rem, 4vw, 3rem);
}
.snellen::before { /* dunkler Kern, damit der Text vor dem Buchstaben-Tunnel lesbar bleibt */
  content: ''; position: absolute; inset: -12% -18%;
  background: radial-gradient(ellipse at center, oklch(0.12 0.03 268 / 0.82) 30%, transparent 72%);
  z-index: -1;
}
.snellen .row { display: block; line-height: 1.25; letter-spacing: 0.35em; text-shadow: 0 0 26px oklch(0.75 0.13 78 / 0.55); }
.snellen .r1 { font-size: clamp(3.4rem, 9vw, 7.5rem); }
.snellen .r2 { font-size: clamp(2.2rem, 6vw, 4.8rem); opacity: 0.92; }
.snellen .r3 { font-size: clamp(1.4rem, 3.8vw, 3rem); opacity: 0.8; }
.snellen .r4 { font-size: clamp(0.95rem, 2.4vw, 1.8rem); opacity: 0.65; }
.snellen .r5 { font-size: clamp(0.65rem, 1.6vw, 1.1rem); opacity: 0.5; }
.station .chart-note {
  margin-top: var(--s-xl); font-family: var(--font-b); font-size: var(--t-sm);
  color: var(--dim); letter-spacing: 0.18em; text-transform: uppercase;
}

/* Station 5: der Verkauf */
.station .price-line { font-family: var(--font-z); font-size: var(--t-2xl); line-height: 1.05; }
.station .price-line b { color: var(--amber); font-weight: 700; }
.station .cta { margin-top: var(--s-xl); pointer-events: auto; font-size: var(--t-md); padding: 0.95rem 2.2rem; }

/* Scroll-Hinweis + Fortschritt */
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-size: var(--t-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem; z-index: 6;
  transition: opacity 0.5s;
}
.scroll-hint::after {
  content: ''; width: 1px; height: 3rem;
  background: linear-gradient(var(--faint), transparent);
  animation: drip 1.8s ease-in-out infinite;
}
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
.voyage-progress {
  position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%);
  width: 2px; height: 34vh; background: oklch(0.3 0.03 265 / 0.6); border-radius: 2px; z-index: 6;
}
.voyage-progress i {
  display: block; width: 100%; height: calc(var(--p, 0) * 100%);
  background: linear-gradient(180deg, var(--violet), var(--pink)); border-radius: 2px;
  box-shadow: 0 0 12px oklch(0.6 0.18 300 / 0.6);
}

/* ---------- Content nach der Reise ---------- */
.sect { padding-block: var(--s-4xl); position: relative; }
.sect.raised { background: var(--void-2); }
.overline {
  font-family: var(--font-opt); font-size: var(--t-xs); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--amber);
  display: flex; align-items: center; gap: 0.7rem;
}
.overline::before { content: ''; width: 2.2rem; height: 1px; background: var(--amber-deep); }
h1 { font-family: var(--font-z); font-weight: 400; font-size: var(--t-2xl); line-height: 1.07; letter-spacing: -0.015em; margin-top: var(--s-lg); text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--pink); }
.sect h2 { font-family: var(--font-z); font-weight: 400; font-size: var(--t-xl); line-height: 1.12; margin-top: var(--s-md); text-wrap: balance; }
.sect-head { max-width: 46rem; margin-bottom: var(--s-2xl); }
.sect-head p { color: var(--dim); margin-top: var(--s-md); max-width: 58ch; }
.lede { font-size: var(--t-lg); color: var(--dim); margin-top: var(--s-lg); max-width: 38ch; line-height: 1.55; }

/* Plan-Konstellation */
.plans-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-md); align-items: end; }
.plan {
  background: var(--void-2); border: 1px solid var(--line); border-radius: 1rem;
  padding: var(--s-lg); position: relative; display: flex; flex-direction: column; gap: 0.4rem;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s;
}
.plan:hover { transform: translateY(-6px); border-color: var(--violet); box-shadow: 0 18px 44px oklch(0.4 0.12 290 / 0.3); }
.plan .tier { font-family: var(--font-opt); font-size: var(--t-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); }
.plan .price { font-family: var(--font-z); font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.05; margin-top: 0.5rem; color: var(--star); }
.plan .price small { font-family: var(--font-b); font-size: 0.42em; color: var(--faint); }
.plan .adesao { font-size: var(--t-xs); color: var(--faint); }
.plan .gist { font-size: var(--t-sm); color: var(--dim); margin-top: 0.6rem; flex: 1; }
.plan a { margin-top: var(--s-md); font-size: var(--t-sm); font-weight: 600; color: var(--pink); text-decoration: none; }
.plan a::after { content: ' →'; }
.plan.hot {
  background: linear-gradient(160deg, oklch(0.26 0.06 290), oklch(0.2 0.045 280));
  border-color: var(--purple);
  box-shadow: 0 22px 55px oklch(0.4 0.13 295 / 0.45);
}
.plan.hot .flag {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--violet), var(--pink)); color: #fff;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.3rem 0.95rem; border-radius: 999px; white-space: nowrap;
}

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split.rev > .split-media { order: 2; }
.split-media { position: relative; overflow: hidden; border-radius: 1.1rem; }
.split-media img { aspect-ratio: 4/3.2; object-fit: cover; width: 100%; }
.split-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, oklch(0.14 0.022 268 / 0.55));
}
.split-body p { color: var(--dim); margin-top: var(--s-md); }
.split-body .cta { margin-top: var(--s-lg); }
.checks { list-style: none; margin-top: var(--s-lg); display: grid; gap: 0.7rem; }
.checks li { display: flex; gap: 0.75rem; align-items: baseline; color: var(--dim); }
.checks li::before { content: '◈'; color: var(--amber); font-size: 0.8em; }
.checks li strong { color: var(--star); }

/* Optotypen-Trenner */
.opto-divider {
  font-family: var(--font-opt); text-align: center; color: var(--faint);
  letter-spacing: 0.6em; text-transform: uppercase; font-size: var(--t-sm);
  padding-block: var(--s-lg); user-select: none;
  border-block: 1px solid var(--line);
}

/* Steps (Subpage) */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); }
.step { counter-increment: step; position: relative; padding-top: var(--s-lg); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-opt); font-size: var(--t-2xl); letter-spacing: 0.08em;
  color: transparent; -webkit-text-stroke: 1px var(--purple);
  position: absolute; top: -0.35em; left: -0.03em; z-index: 0; opacity: 0.9;
}
.step h3 { font-family: var(--font-z); font-weight: 400; font-size: var(--t-lg); margin-top: var(--s-2xl); position: relative; }
.step p { color: var(--dim); font-size: var(--t-sm); margin-top: 0.6rem; }

/* Plan-Detail (Subpage) */
.plan-detail { border-top: 1px solid var(--line); }
.plan-row {
  display: grid; grid-template-columns: 0.9fr 1.2fr 1fr auto; gap: var(--s-lg); align-items: center;
  padding-block: var(--s-xl); border-bottom: 1px solid var(--line); transition: background 0.3s;
}
.plan-row:hover { background: oklch(0.2 0.04 285 / 0.35); }
.plan-row .name { font-family: var(--font-z); font-size: var(--t-lg); }
.plan-row .name small { display: block; font-family: var(--font-opt); font-size: var(--t-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.3rem; }
.plan-row ul { list-style: none; display: grid; gap: 0.35rem; font-size: var(--t-sm); color: var(--dim); }
.plan-row ul li::before { content: '— '; color: var(--purple); }
.plan-row .p { font-family: var(--font-z); font-size: 1.9rem; }
.plan-row .p small { font-family: var(--font-b); font-size: 0.45em; color: var(--faint); display: block; }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-lg); padding-block: var(--s-lg);
  font-family: var(--font-z); font-size: var(--t-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-b); font-size: 1.6rem; color: var(--pink); transition: transform 0.3s var(--ease-out); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding-bottom: var(--s-lg); color: var(--dim); max-width: 62ch; }

/* Lojas */
.lojas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.loja { border-radius: 1rem; overflow: hidden; border: 1px solid var(--line); background: var(--void-2); }
.loja img { aspect-ratio: 16/10; object-fit: cover; }
.loja .body { padding: var(--s-lg); }
.loja h3 { font-family: var(--font-z); font-size: var(--t-lg); }
.loja p { font-size: var(--t-sm); color: var(--dim); margin-top: 0.4rem; }
.loja .hours { font-family: var(--font-opt); font-size: var(--t-xs); color: var(--faint); margin-top: var(--s-sm); letter-spacing: 0.16em; }

/* Banner */
.banner {
  border-radius: 1.5rem; padding: clamp(2.5rem, 5vw, 5rem);
  background:
    radial-gradient(ellipse at 85% 15%, oklch(0.45 0.14 300 / 0.5), transparent 55%),
    linear-gradient(150deg, oklch(0.24 0.05 285), oklch(0.17 0.03 270));
  border: 1px solid var(--purple);
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--s-2xl); align-items: center;
  position: relative; overflow: hidden;
}
.banner h2 { font-family: var(--font-z); font-size: var(--t-xl); }
.banner p { color: var(--dim); margin-top: var(--s-md); }
.banner .cta { justify-self: start; }

/* Contato */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); }
.contact-info dl { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); }
.contact-info dt { font-family: var(--font-opt); font-size: var(--t-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber); }
.contact-info dd { font-family: var(--font-z); font-size: var(--t-lg); margin-top: 0.25rem; }
form { display: grid; gap: var(--s-md); }
.field { display: grid; gap: 0.4rem; }
.field label { font-family: var(--font-opt); font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--star); background: var(--void-2);
  border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.85rem 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px oklch(0.55 0.15 290 / 0.3);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.ok-msg { display: none; background: oklch(0.3 0.07 290 / 0.5); border: 1px solid var(--purple); color: var(--star); border-radius: 0.8rem; padding: var(--s-lg); }
.ok-msg.show { display: block; }

/* Footer */
.site-foot { background: var(--void-2); border-top: 1px solid var(--line); padding-block: var(--s-2xl) var(--s-lg); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-xl); }
.foot-grid p { font-size: var(--t-sm); color: var(--dim); margin-top: var(--s-sm); max-width: 30ch; }
.foot-grid h4 { font-family: var(--font-opt); font-size: var(--t-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s-sm); }
.foot-grid ul { list-style: none; display: grid; gap: 0.45rem; }
.foot-grid ul a { font-size: var(--t-sm); color: var(--dim); text-decoration: none; }
.foot-grid ul a:hover { color: var(--pink); }
.foot-base { display: flex; justify-content: space-between; gap: var(--s-md); border-top: 1px solid var(--line); margin-top: var(--s-xl); padding-top: var(--s-lg); font-size: var(--t-xs); color: var(--faint); flex-wrap: wrap; }

/* Page-Head (Subpages) */
.page-head { padding-top: clamp(8rem, 7rem + 4vw, 11rem); padding-bottom: var(--s-2xl); position: relative; }
.hero-note { font-size: var(--t-xs); color: var(--faint); margin-top: var(--s-md); }

/* Reveals */
.js .rv { opacity: 0; transform: translateY(26px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.js .rv-d1.in { transition-delay: 0.08s; } .js .rv-d2.in { transition-delay: 0.16s; } .js .rv-d3.in { transition-delay: 0.24s; }

/* Skip */
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--star); color: var(--void); padding: 0.6rem 1rem; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* Guide */
.guide-body { max-width: 46rem; }
.guide-body h2 { font-family: var(--font-z); font-size: var(--t-xl); margin-top: var(--s-2xl); }
.guide-body h3 { font-family: var(--font-z); font-size: var(--t-lg); margin-top: var(--s-xl); }
.guide-body p, .guide-body li { color: var(--dim); margin-top: var(--s-sm); }
.guide-body ul, .guide-body ol { padding-left: 1.2rem; }
.guide-body code { background: var(--void-3); border-radius: 0.3rem; padding: 0.1rem 0.4rem; font-size: 0.9em; }
.swatches { display: flex; gap: var(--s-sm); flex-wrap: wrap; margin-top: var(--s-md); }
.swatch { width: 7.5rem; border-radius: 0.8rem; border: 1px solid var(--line); overflow: hidden; font-size: 0.7rem; }
.swatch i { display: block; height: 4rem; }
.swatch span { display: block; padding: 0.4rem 0.5rem; color: var(--dim); }

/* Responsive */
@media (max-width: 60rem) {
  .split, .contact-grid, .banner { grid-template-columns: 1fr; }
  .split.rev > .split-media { order: 0; }
  .plans-scale { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .plan.hot { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; gap: var(--s-2xl); }
  .lojas-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .plan-row { grid-template-columns: 1fr; gap: var(--s-md); }
  .journey { height: 560vh; }

  .nav-toggle {
    display: block; background: none; border: 1px solid var(--line); border-radius: 999px;
    font: inherit; font-family: var(--font-opt); font-size: var(--t-xs); letter-spacing: 0.22em;
    padding: 0.55rem 1.1rem; cursor: pointer; color: var(--star);
  }
  .nav {
    position: fixed; inset: 0; background: var(--void);
    flex-direction: column; justify-content: center; gap: var(--s-lg);
    font-size: 1.3rem; transform: translateY(-100%); transition: transform 0.45s var(--ease-out); z-index: 65;
  }
  .nav.open { transform: none; }
  .nav a:not(.cta) { font-size: 1.3rem; }
  .site-head .wrap { position: relative; z-index: 66; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .journey { height: auto; }
  .journey-stage { position: relative; height: auto; min-height: 100vh; }
  .station { position: relative; opacity: 1; pointer-events: auto; padding-block: var(--s-3xl); }
  #voyage, .scroll-hint, .voyage-progress { display: none; }
  .js .rv { opacity: 1; transform: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}