/* =====================================================================
   Etapa 1 (inspirada en Moahu): hojas que suben, marfil, escenas fijas
   ===================================================================== */

/* ---------- hojas ---------- */
.sheet{ position:relative; z-index:2; border-radius:28px 28px 0 0; margin-top:-28px; background:var(--bg); box-shadow:0 -24px 48px rgba(0,0,0,.35); }
.sheet-light{
  --bg:#EEEAE2; --bg-2:#E3DDD1; --panel:#F7F4EE;
  --ink:#151311; --ink-soft:#5F5950;
  --gold:#8A6A3A; --coral:#7A5A2E; --sage:#5F5950;
  --line:rgba(21,19,17,0.14); --shadow:rgba(21,19,17,0.12);
  background:var(--bg); color:var(--ink);
}
.sheet-light.section-alt{ background:var(--bg); }
.sheet-light .eyebrow{ color:var(--gold); }
@media (min-width:900px) and (min-height:640px){
  .home-hero,.city-hero{ position:sticky; top:0; z-index:0; }
}
.city .subnav{ z-index:35; }

/* ---------- frases que aparecen recortadas ---------- */
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.split .w > span{ display:inline-block; transform:translateY(110%); transition:transform .9s var(--ease-out); transition-delay:calc(var(--d, 0) * 55ms); }
.split.in .w > span{ transform:none; }
.statement{ font-family:var(--serif); font-weight:400; font-size:clamp(2.3rem,7vw,6.2rem); line-height:1.04; letter-spacing:.01em; margin:0; }
.statement-wrap{ padding-top:clamp(72px,11vw,170px); padding-bottom:clamp(24px,4vw,56px); }
.statement-wrap p{ max-width:46ch; color:var(--ink-soft); font-size:1.1rem; margin:22px 0 0; }

/* ---------- cinta de sellos ---------- */
.marquee{ overflow:hidden; padding:clamp(28px,4vw,48px) 0; }
.marquee-row{ display:flex; width:max-content; animation:marquee 60s linear infinite; }
.marquee-row + .marquee-row{ margin-top:14px; animation-direction:reverse; animation-duration:80s; }
.marquee-row span{ font-family:var(--serif); font-size:clamp(1.6rem,4vw,3.2rem); white-space:nowrap; padding-right:.9em; }
.marquee-row span::after{ content:"·"; margin-left:.9em; color:var(--gold); }
.marquee-row.ghost span{ color:transparent; -webkit-text-stroke:1px var(--ink-soft); }
.marquee-row a{ color:inherit; text-decoration:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee-row{ animation-play-state:paused; }

/* ---------- escenas fijas (se recorren con el scroll) ---------- */
.scene{ position:relative; }
.scene-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.scene-counter{ height:260vh; }
.scene-train{ height:300vh; }

.counter-pin{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.counter-num{ font-family:var(--serif); font-size:clamp(5rem,22vw,19rem); line-height:.9; letter-spacing:.01em; position:relative; z-index:2; font-variant-numeric:tabular-nums; text-shadow:0 10px 40px rgba(0,0,0,.6); }
.counter-label{ position:relative; z-index:2; font-size:clamp(1.1rem,2.2vw,1.6rem); margin:18px auto 0; max-width:30ch; text-shadow:0 4px 20px rgba(0,0,0,.8); }
.counter-label strong{ color:var(--gold); font-weight:500; }
.fly{ --s:clamp(120px,16vw,240px); position:absolute; left:50%; top:50%; width:var(--s); aspect-ratio:4/5; margin:calc(var(--s) * -.625) 0 0 calc(var(--s) * -.5); border-radius:6px; overflow:hidden; opacity:0; will-change:transform,opacity; z-index:1; box-shadow:0 30px 60px rgba(0,0,0,.45); }
.fly img{ width:100%; height:100%; object-fit:cover; }
.fly span{ position:absolute; left:8px; bottom:8px; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#EEEAE2; background:rgba(14,13,12,.75); padding:3px 7px; border-radius:2px; }

.train-pin{ display:flex; flex-direction:column; justify-content:center; background:#0A0909; }
.train-lines{ position:relative; height:clamp(150px,22vh,220px); }
.train-lines p{ position:absolute; inset:0; margin:0; font-family:var(--serif); font-size:clamp(1.6rem,4.4vw,3.6rem); line-height:1.12; opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); max-width:22ch; }
.train-lines p.on{ opacity:1; transform:none; }
.train-lines p em{ font-style:normal; color:var(--gold); }
.train-art{ width:100%; height:auto; display:block; margin-top:clamp(12px,3vh,40px); }
.train-art .rail{ stroke:#5F5950; stroke-width:2; }
.train-art .sleeper{ stroke:#24211E; stroke-width:7; }
.train-art .platform{ fill:#171614; }
.train-art .edge{ fill:#C9A979; opacity:.4; }
.train-art .post{ fill:#2A2724; }
.train-art .sign rect{ fill:#EEEAE2; }
.train-art .sign text{ font-family:var(--serif); font-size:34px; fill:#0E0D0C; letter-spacing:6px; }
.train-art .lamp{ fill:#C9A979; }
.train-art .glow{ opacity:0; }
.train-art .car{ fill:#1F1D1A; stroke:#3A3530; stroke-width:2; }
.train-art .win{ fill:#C9A979; }
.train-art .head{ fill:#EEEAE2; }
.train-art .bench{ fill:#2A2724; }

/* ---------- entrada animada (solo portada) ---------- */
.intro{ position:fixed; inset:0; z-index:300; background:#0A0909; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; border-radius:0 0 32px 32px; transition:transform 1s cubic-bezier(.77,0,.18,1); cursor:pointer; }
.intro.out{ transform:translateY(-104%); }
.intro svg{ width:min(380px,66vw); height:auto; overflow:visible; }
.intro .r{ fill:none; stroke:#C9A979; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:440; stroke-dashoffset:440; animation:draw 1s .1s var(--ease-out) forwards; }
.intro .s{ stroke:#5F5950; stroke-width:3; stroke-linecap:round; opacity:0; animation:fadein .3s forwards; }
.intro-word{ display:flex; font-family:var(--serif); font-size:clamp(3rem,12vw,8rem); color:#EEEAE2; letter-spacing:.08em; overflow:hidden; line-height:1.1; }
.intro-word span{ display:inline-block; transform:translateY(110%); animation:rise .7s var(--ease-out) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadein{ to{ opacity:1; } }
@keyframes rise{ to{ transform:none; } }
html.is-intro{ overflow:hidden; }

/* ---------- archivo ---------- */
.archive-hero{ padding-top:clamp(56px,9vw,130px); padding-bottom:clamp(32px,5vw,60px); }
.archive-hero .statement{ font-size:clamp(2.1rem,6vw,5.2rem); }
.archive-hero p{ color:var(--ink-soft); max-width:54ch; font-size:1.1rem; margin-top:20px; }
.archive-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(28px,4vw,44px); }
.archive-filter a{ font-size:.92rem; text-decoration:none; color:var(--ink-soft); background:var(--bg-2); border-radius:999px; padding:9px 16px; transition:background .2s, color .2s; }
.archive-filter a span{ color:var(--gold); margin-left:4px; font-size:.8rem; }
.archive-filter a:hover{ color:var(--ink); }
.archive-filter a[aria-current]{ background:var(--ink); color:var(--bg); }
.archive-filter a[aria-current] span{ color:var(--bg); opacity:.6; }
.postcard .city-tag{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); text-decoration:none; margin-bottom:6px; display:inline-block; }
.archive-region{ margin:clamp(40px,6vw,72px) 0 18px; font-size:clamp(1.3rem,2.4vw,1.8rem); }
.archive-region span{ color:var(--gold); font-size:.6em; margin-left:8px; }
.btn-solid{ display:inline-block; background:var(--gold); color:var(--bg); text-decoration:none; font-weight:500; padding:13px 22px; border-radius:999px; transition:transform .15s var(--ease-out), filter .2s; }
.btn-solid:hover{ filter:brightness(1.08); }
.btn-solid:active{ transform:scale(.97); }
.topnav{ display:flex; align-items:center; gap:18px; }
.topnav > a{ text-decoration:none; font-size:.92rem; color:var(--ink-soft); transition:color .2s; }
.topnav > a:hover,.topnav > a[aria-current]{ color:var(--ink); }

@media (max-width:640px){
  .sheet{ border-radius:20px 20px 0 0; margin-top:-20px; }
  .scene-counter{ height:200vh; } .scene-train{ height:240vh; }
  .fly{ --s:110px; }
}
@media (prefers-reduced-motion:reduce){
  .scene-counter,.scene-train{ height:auto; }
  .scene-pin{ position:relative; height:auto; padding:80px 0; }
  .fly{ display:none; }
  .train-lines{ height:auto; } .train-lines p{ position:static; opacity:1; transform:none; margin-bottom:12px; }
  .marquee-row{ animation:none; }
  .intro{ display:none; }
  .split .w > span{ transform:none; }
}
.section-head .statement{ font-size:clamp(2.3rem,7vw,6.2rem); }
.section-head:has(.statement){ max-width:none; }

.train-pin .wrap{ width:100%; }

/* modo video: las escenas ocupan una pantalla y se reproducen solas */
html[data-escenas="video"] .scene-counter,html[data-escenas="video"] .scene-train{ height:auto; }
html[data-escenas="video"] .scene-pin{ position:relative; height:min(100vh, 760px); height:min(100svh, 760px); }
.counter-pin .wrap{ width:100%; }

.scene-counter{ background:#0E0D0C; }
.scene-counter .scene-pin{ border-radius:inherit; }

@media (max-width:760px){ .train-art{ width:230%; max-width:none; margin-left:-65%; } }

/* ---------- una letra por ciudad ---------- */
.cf{ text-transform:none; letter-spacing:0; font-style:normal; }
.ticket h1.city-name{ font-size:calc(clamp(2.6rem,7vw,5.4rem) * var(--cf-scale, 1)); line-height:1.05; letter-spacing:0; }
.board-city .cf{ display:block; font-size:calc(clamp(1.3rem,2.6vw,1.9rem) * var(--cf-scale, 1)); line-height:1.15; }
.next-card b{ font-weight:inherit; display:block; font-size:calc(1.55rem * var(--cf-scale, 1)); line-height:1.15; }
.cities-menu-list .cf,.globe-list .cf{ font-size:calc(1.05rem * var(--cf-scale, 1)); }
.font-note{ font-size:.85rem; color:var(--ink-soft); margin:14px 0 0; max-width:52ch; }
.ticket .font-note{ color:#A8A39A; }

/* ---------- un color por ciudad ---------- */
.city{ --gold:var(--city-accent, #C9A979); --coral:var(--city-accent, #D8CFC0); }
.city .sheet-light{ --gold:color-mix(in srgb, var(--city-accent, #8A6A3A) 58%, #151311); --coral:color-mix(in srgb, var(--city-accent, #7A5A2E) 58%, #151311); }
.city .ticket .eyebrow,.city .ticket-stub dd{ color:var(--city-accent); }
.city .ticket-stub{ border-left-color:color-mix(in srgb, var(--city-accent) 45%, transparent); }
.city .pin-m{ background:var(--city-accent); color:#0E0D0C; }
.city .pin-g{ background:color-mix(in srgb, var(--city-accent) 45%, #EEEAE2); }
.city .tick.is-on::before,.city .subnav a.is-active{ border-bottom-color:var(--city-accent); }
.board li .board-code{ color:color-mix(in srgb, var(--city-accent, #8A6A3A) 62%, #151311); }
.next-card small{ color:var(--city-accent); }

/* ---------- fundido al entrar a una ciudad desde el globo ---------- */
html::after{ content:""; position:fixed; inset:0; z-index:400; background:#0A0909; opacity:0; pointer-events:none; transition:opacity .4s ease; }
html.is-leaving::after{ opacity:1; }