/* ============ Tokio · Jhoan Carvajal Hurtado 8-A ============ */
:root{
  --sakura:#fbe1e9; --blush:#f3b6c8; --rose:#e4507f; --torii:#d7263d;
  --paper:#fff7f2; --night:#15112a; --ink:#2b1630; --wood:#e3bd88;
  --bg:var(--sakura); --fg:var(--ink); --muted:#6e4a5e; --accent:#d23c6c; --line:rgb(43 22 48 / .14);
  --f-display:"Shippori Mincho B1", "Times New Roman", serif;
  --f-text:"Zen Kaku Gothic New", system-ui, sans-serif;
  --f-hand:"Klee One", "Shippori Mincho B1", serif;
  --pad:clamp(16px, 5vw, 64px);
  --nav-h:56px;
}
body.t-sakura{ --bg:#fbe1e9; --fg:#2b1630; --muted:#6e4a5e; --accent:#d23c6c; --line:rgb(43 22 48 / .14) }
body.t-paper { --bg:#fff7f2; --fg:#2b1630; --muted:#6e4a5e; --accent:#d7263d; --line:rgb(43 22 48 / .12) }
body.t-rose  { --bg:#d9466f; --fg:#fff4f7; --muted:#ffd9e4; --accent:#ffe3ec; --line:rgb(255 255 255 / .25) }
body.t-night { --bg:#15112a; --fg:#fbe1e9; --muted:#c9b3c4; --accent:#ff6fa0; --line:rgb(255 255 255 / .14) }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scrollbar-width:thin; scrollbar-color:var(--rose) transparent }
/* Sin "anclaje de scroll": en Chrome Android chocaba con las secciones sticky y devolvía la página */
html, body{ overflow-anchor:none }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 17px/1.6 var(--f-text);
  transition:background-color .7s ease, color .7s ease;
  overflow-x:clip;
}
img{ max-width:100%; display:block }
h1,h2,h3,p{ margin:0 }
a{ color:inherit }
em{ font-style:normal; color:var(--accent); font-weight:700 }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:fixed; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; border-radius:10px }
.skip:focus{ top:12px }
:focus-visible{ outline:3px solid var(--rose); outline-offset:3px }

/* ---------- Pétalos ---------- */
#petals{ position:fixed; inset:0; width:100%; height:100%; z-index:40; pointer-events:none }

/* ---------- Nav con vuelo ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 var(--pad); padding-top:env(safe-area-inset-top);
  color:var(--fg); transition:color .4s, background-color .4s, box-shadow .4s;
}
.nav.is-scrolled{ background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line) }
.nav.on-hero{ color:#fff }
.brand{ font:700 18px/1 var(--f-display); text-decoration:none; display:flex; align-items:center; gap:6px; min-height:44px }
.brand-jp{ color:var(--accent) }
.nav.on-hero .brand-jp{ color:#fff }
.nav.on-hero{ text-shadow:0 1px 8px rgb(60 0 30 / .5) }
@media (max-width:420px){ .flight{ gap:5px; font-size:10px } .brand{ font-size:16px } .nav-grade{ font-size:11px; padding:5px 8px } }
.nav-grade{ font:700 13px/1 var(--f-text); letter-spacing:.08em; border:1.5px solid currentColor; border-radius:99px; padding:6px 10px }
.flight{ display:flex; align-items:center; gap:8px; font:700 11px/1 var(--f-text); letter-spacing:.1em; flex:1; max-width:340px }
.flight-line{ position:relative; flex:1; height:2px; background:currentColor; opacity:.9; border-radius:2px; background:repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px) }
/* Solo transform (sin cambiar ancho ni posición): no obliga a recalcular la página al bajar */
.flight-fill{ position:absolute; inset:0; background:var(--rose); border-radius:2px; transform:scaleX(var(--p,0)); transform-origin:left }
.nav.on-hero .flight-fill{ background:#ffd0de }
.plane-track{ position:absolute; inset:0; transform:translateX(calc(var(--p,0) * 100%)) }
.plane{ position:absolute; top:50%; left:0; width:18px; height:18px; transform:translate(-50%,-50%) rotate(90deg); fill:currentColor }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 26px;
  border:0; border-radius:99px; background:var(--torii); color:#fff; cursor:pointer; text-decoration:none;
  font:700 16px/1 var(--f-text); box-shadow:0 10px 24px rgb(215 38 61 / .3);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgb(215 38 61 / .38) }
.btn:active{ transform:translateY(1px) scale(.98) }
.btn-ghost{ background:transparent; color:var(--fg); border:2px solid currentColor; box-shadow:none }

/* ---------- Tipos ---------- */
.eyebrow{ font:700 13px/1.2 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px }
.eyebrow span{ letter-spacing:.05em }
.title{ font:800 clamp(36px, 9.6vw, 92px)/1.02 var(--f-display); letter-spacing:-.01em; padding-bottom:.08em }
.lead{ margin-top:18px; max-width:60ch; color:var(--muted); font-size:clamp(16px, 2.2vw, 19px) }
.lead strong{ color:var(--fg) }
.sec-head{ padding:0 var(--pad); max-width:1200px; margin:0 auto }

/* ---------- 1. Portada (cortina) ---------- */
.hero{ position:sticky; top:0; height:100svh; overflow:hidden; color:#fff; z-index:0 }
.hero-media{ position:absolute; inset:-4% 0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 50% }
.hero-tint{ position:absolute; inset:0;
  background:
   radial-gradient(80% 55% at 50% 52%, rgb(60 8 40 / .55), transparent 80%),
   linear-gradient(180deg, rgb(255 160 190 / .28) 0%, rgb(255 170 200 / .06) 40%, rgb(70 10 45 / .6) 100%) }
.hero-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:calc(var(--nav-h) + 10px) var(--pad) 90px }
.coords{ font:700 12px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing:.18em; padding:8px 12px; border:1px solid rgb(255 255 255 / .5); border-radius:99px; background:rgb(255 255 255 / .1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.hero-title{ margin:18px 0 10px; line-height:.86 }
.ht-line{ display:block; overflow:hidden; padding-bottom:.06em }
.ht-word{ display:inline-block; white-space:nowrap; font:800 clamp(64px, 20vw, 300px)/.9 var(--f-display); letter-spacing:.02em; text-shadow:0 10px 50px rgb(80 0 40 / .45) }
.ht-word .ch{ display:inline-block }
.hero-sub{ max-width:34ch; font-size:clamp(16px, 2.4vw, 21px); line-height:1.5; text-shadow:0 2px 14px rgb(40 0 20 / .5) }
.hero-credit{ margin-top:22px; font-size:14px; letter-spacing:.04em; padding:10px 16px; border-radius:99px; background:rgb(255 255 255 / .16); border:1px solid rgb(255 255 255 / .35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.hero-kanji{ position:absolute; z-index:2; right:var(--pad); top:calc(var(--nav-h) + 22px); display:flex; flex-direction:column; align-items:center; font:800 clamp(30px, 5vw, 56px)/1.05 var(--f-display); color:rgb(255 255 255 / .92) }
.seal{ font-style:normal; margin-top:10px; width:1.25em; height:1.25em; display:grid; place-items:center; font-size:.62em; background:var(--torii); color:#fff; border-radius:8px; transform:rotate(-6deg) }
.scroll-cue{ position:absolute; z-index:2; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; font:700 12px/1 var(--f-text); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; min-height:44px }
.scroll-cue i{ width:2px; height:34px; background:linear-gradient(#fff, transparent); animation:cue 1.8s ease-in-out infinite; transform-origin:top }
@keyframes cue{ 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0} }

/* La hoja que sube sobre la portada */
.sheet{ position:relative; z-index:1; background:var(--bg); border-radius:28px 28px 0 0; box-shadow:0 -30px 60px rgb(60 0 30 / .22); transition:background-color .7s ease }
section{ position:relative }

/* ---------- 2. Muro de ema ---------- */
.ema-sec{ padding:clamp(64px, 12vw, 130px) 0 clamp(56px, 9vw, 110px); overflow:hidden }
.ema-sec::before{ /* luz suave detrás del muro */
  content:""; position:absolute; inset:30% -10% 0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 40%, rgb(255 255 255 / .7), transparent 70%) }
.ema-wall{
  --cols:2; --gap:12px;
  position:relative; display:grid; grid-template-columns:repeat(var(--cols), 1fr); column-gap:var(--gap); row-gap:6px;
  max-width:1180px; margin:clamp(30px, 6vw, 60px) auto 0; padding:0 var(--pad);
  touch-action:pan-y;
}
@media (min-width:760px){ .ema-wall{ --cols:4; --gap:26px; row-gap:18px } }
.ema-slot{ position:relative; padding-top:40px }
.ema-slot::before{ /* cuerda roja trenzada */
  content:""; position:absolute; top:8px; left:calc(var(--gap) / -2 - 1px); right:calc(var(--gap) / -2 - 1px); height:7px; border-radius:4px;
  background:repeating-linear-gradient(115deg, #c7183a 0 5px, #8f0f27 5px 8px, #e0425f 8px 10px);
  box-shadow:0 3px 4px rgb(90 0 20 / .25);
}
.ema-slot:nth-child(2n+1)::before{ left:-6px } .ema-slot:nth-child(2n)::before{ right:-6px }
@media (min-width:760px){
  .ema-slot:nth-child(2n+1)::before{ left:calc(var(--gap) / -2 - 1px) } .ema-slot:nth-child(2n)::before{ right:calc(var(--gap) / -2 - 1px) }
  .ema-slot:nth-child(4n+1)::before{ left:-10px } .ema-slot:nth-child(4n)::before{ right:-10px }
}
.ema{ position:relative; transform-origin:50% -30px; will-change:transform; filter:drop-shadow(0 12px 12px rgb(90 20 50 / .22)) }
.ema::before{ /* hilo */
  content:""; position:absolute; left:50%; top:-30px; width:2px; height:36px; margin-left:-1px; background:#b0142f; border-radius:2px }
.ema-inner{
  position:relative; aspect-ratio:4/5; width:100%; transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.9,.25,1.15); cursor:pointer; border:0; padding:0; background:none; display:block; color:inherit; text-align:inherit; font:inherit;
}
.ema.is-flipped .ema-inner{ transform:perspective(900px) rotateY(180deg) }
.ema-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  clip-path:polygon(50% 0, 100% 19%, 100% 100%, 0 100%, 0 19%);
  background:
    radial-gradient(120% 70% at 28% 18%, rgb(255 255 255 / .38), transparent 60%),
    repeating-linear-gradient(93deg, rgb(120 66 24 / .09) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(87deg, rgb(120 66 24 / .07) 0 2px, transparent 2px 15px),
    linear-gradient(180deg, #f0d4a6, #d9a96f);
  color:#3a1d10; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:22% 10% 9%;
}
.ema-face::before{ /* agujero */
  content:""; position:absolute; top:9%; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:#5b3418; box-shadow:inset 0 2px 2px rgb(0 0 0 / .5) }
.ema-face::after{ /* borde tallado */
  content:""; position:absolute; inset:5px; clip-path:inherit; border:0; pointer-events:none;
  box-shadow:inset 0 0 0 2px rgb(110 60 20 / .25) }
.ema-num{ display:grid; place-items:center; width:2.1em; height:2.1em; border-radius:50%; background:var(--torii); color:#fff; font:800 clamp(16px, 4vw, 22px)/1 var(--f-display); margin-top:4px; box-shadow:0 2px 0 rgb(0 0 0 / .15) }
.ema-title{ margin-top:auto; margin-bottom:auto; font:600 clamp(17px, 4.6vw, 23px)/1.18 var(--f-hand); padding-top:6px }
.ema-tap{ font:700 10.5px/1 var(--f-text); letter-spacing:.12em; text-transform:uppercase; color:#8a5a33; display:flex; align-items:center; gap:5px }
.ema-back{ transform:rotateY(180deg); padding:0; justify-content:flex-start }
.ema-back img{ width:100%; height:44%; object-fit:cover; flex:none }
.ema-back p{ padding:8% 9% 0; font:500 clamp(12px, 3.2vw, 14.5px)/1.38 var(--f-text); color:#3a1d10; text-align:left }
.ema-back p b{ display:block; font:600 1.05em/1.2 var(--f-hand); color:var(--torii); margin-bottom:3px }
/* Ema en blanco: escribe la tuya */
.ema-wish .ema-front{ background:
    repeating-linear-gradient(93deg, rgb(120 66 24 / .07) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #fbebd2, #ecc996) }
.ema-wish .ema-title{ color:#7a4a25 }
.ema-wish .ema-front.has-wish .ema-title{ color:#3a1d10 }
.ema-pen{ font-size:26px; line-height:1 }
.wish-form{ display:flex; flex-direction:column; gap:8px; width:100%; padding:24% 9% 9%; height:100% }
.wish-form label{ font:600 14px/1.2 var(--f-hand); color:#6a3b1a; text-align:center }
.wish-form textarea{ flex:1; min-height:0; width:100%; resize:none; border:1.5px dashed #a87445; border-radius:8px; background:rgb(255 255 255 / .45); font:600 16px/1.3 var(--f-hand); color:#3a1d10; padding:8px }
.wish-form button{ min-height:44px; border:0; border-radius:99px; background:var(--torii); color:#fff; font:700 14px/1 var(--f-text); cursor:pointer }
.wish-form .wish-err{ font-size:11.5px; color:#a3122c; min-height:1em; margin:-4px 0 0; text-align:center }

/* ---------- 3. Zoom parallax ---------- */
.zoom{ height:300vh }
.zoom-sticky{ position:sticky; top:0; height:100svh; overflow:hidden }
.zp-el{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.zp-img{ position:relative; overflow:hidden; border-radius:6px; will-change:transform; backface-visibility:hidden }
.zp-img picture{ display:block; width:100%; height:100% }
.zp-img img{ width:100%; height:100%; object-fit:cover }
.zp-0{ width:46vw; height:26vh }
.zp-1{ top:-31vh; left:8vw;  width:50vw; height:20vh }
.zp-2{ top:-5vh;  left:-36vw; width:24vw; height:34vh }
.zp-3{ top:-3vh;  left:37vw; width:24vw; height:24vh }
.zp-4{ top:27vh;  left:10vw; width:36vw; height:19vh }
.zp-5{ top:25vh;  left:-30vw; width:32vw; height:17vh }
.zp-6{ top:18vh;  left:37vw; width:22vw; height:13vh }
@media (min-width:760px){
  .zp-0{ width:25vw; height:25vh }
  .zp-1{ top:-30vh; left:5vw; width:35vw; height:30vh }
  .zp-2{ top:-10vh; left:-25vw; width:20vw; height:45vh }
  .zp-3{ top:0; left:27.5vw; width:25vw; height:25vh }
  .zp-4{ top:27.5vh; left:5vw; width:20vw; height:25vh }
  .zp-5{ top:27.5vh; left:-22.5vw; width:30vw; height:25vh }
  .zp-6{ top:22.5vh; left:25vw; width:15vw; height:15vh }
}
.zoom-text{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:0 var(--pad); opacity:0; background:radial-gradient(60% 50% at 50% 50%, rgb(40 5 30 / .55), transparent 80%) }
.zt-big{ font:800 clamp(34px, 8.6vw, 96px)/1.04 var(--f-display); text-shadow:0 6px 30px rgb(0 0 0 / .4) }
.zt-big b{ color:#ffc4d6 }
.zt-small{ margin-top:14px; font-size:clamp(16px, 2.4vw, 22px); text-shadow:0 2px 12px rgb(0 0 0 / .5) }

/* ---------- 4. Lugares ---------- */
.places{ padding:clamp(70px, 11vw, 130px) 0 clamp(60px, 9vw, 110px) }
.place-list{ list-style:none; margin:clamp(26px, 5vw, 50px) auto 0; padding:0 var(--pad); max-width:1200px }
.place{
  position:relative; display:grid; grid-template-columns:76px 1fr; grid-template-areas:"thumb head" "thumb text"; column-gap:14px; row-gap:4px;
  padding:16px 0; border-top:1px solid var(--line);
}
.place::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--accent); transform:scaleX(var(--draw,0)); transform-origin:left; transition:transform 1s cubic-bezier(.2,.8,.2,1) }
.place.in{ --draw:1 }
.place-thumb{ grid-area:thumb; width:76px; height:76px; object-fit:cover; border-radius:12px }
.place-n{ display:none }
.place h3{ grid-area:head; font:800 clamp(21px, 5.4vw, 52px)/1.1 var(--f-display); padding-right:74px }
.place-jp{ font:700 13px/1 var(--f-display); color:var(--accent); position:absolute; right:0; top:20px }
.place p{ grid-area:text; font-size:15px; line-height:1.5; color:var(--muted) }
.place-float{ display:none }
@media (min-width:900px) and (hover:hover){
  .place{ grid-template-columns:70px 1fr 160px; grid-template-areas:"n head jp" "n text jp"; padding:26px 0; cursor:default }
  .place-thumb{ display:none }
  .place-n{ display:block; grid-area:n; font:700 14px/2.6 var(--f-text); color:var(--accent) }
  .place-jp{ position:static; grid-area:jp; justify-self:end; align-self:center; font-size:26px }
  .place p{ max-width:56ch; font-size:16px }
  .place h3{ padding-right:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), color .3s }
  .place:hover h3{ transform:translateX(16px); color:var(--accent) }
  .place-float{ display:block; position:fixed; left:0; top:0; z-index:30; width:300px; height:380px; pointer-events:none; border-radius:16px; overflow:hidden; opacity:0; transform:translate(-50%,-50%) scale(.6); box-shadow:0 30px 60px rgb(60 0 30 / .3) }
  .place-float img{ width:100%; height:100%; object-fit:cover }
}

/* ---------- 5. Kaiten-zushi ---------- */
.food{ padding:clamp(70px, 11vw, 130px) 0 clamp(56px, 8vw, 100px); overflow:hidden }
.belt-wrap{ position:relative; margin-top:clamp(30px, 5vw, 56px); padding:26px 0 30px;
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 30px), #b9825a calc(100% - 30px), #8e5b37 100%);
}
.belt-wrap::before{ /* luz cálida sobre la barra */
  content:""; position:absolute; inset:-40px 0 auto; height:160px; pointer-events:none; background:radial-gradient(50% 100% at 50% 0, rgb(255 236 210 / .7), transparent 70%) }
.belt{
  position:relative; height:clamp(170px, 40vw, 236px); overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none;
  background:
    linear-gradient(180deg, #9aa3ad 0, #e8edf2 7%, #c4ccd4 12%, transparent 12%, transparent 88%, #c4ccd4 88%, #e8edf2 93%, #8d96a0 100%),
    repeating-linear-gradient(90deg, #5c6168 0 2px, #7d838b 2px 46px);
  background-position:0 0, var(--bx, 0px) 0;
  box-shadow:inset 0 10px 18px rgb(0 0 0 / .25), 0 18px 30px rgb(80 20 40 / .2);
}
.belt:active{ cursor:grabbing }
.belt-track{ position:absolute; top:50%; left:0; display:flex; gap:clamp(18px, 4vw, 34px); transform:translate3d(0,-50%,0); will-change:transform; padding-left:16px }
.plate{
  position:relative; flex:none; width:clamp(128px, 31vw, 186px); aspect-ratio:1; border-radius:50%; padding:clamp(12px, 2.8vw, 17px); border:0; cursor:pointer;
  background:radial-gradient(circle at 50% 50%, #fff 0 58%, var(--pc) 59% 72%, #fff 73% 76%, var(--pc) 77%);
  box-shadow:0 10px 16px rgb(0 0 0 / .32), inset 0 -4px 6px rgb(0 0 0 / .12);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.3);
}
.plate img{ width:100%; height:100%; object-fit:cover; border-radius:50%; pointer-events:none; -webkit-user-drag:none }
.plate[aria-selected="true"]{ transform:translateY(-8px) scale(1.06); box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--rose), 0 18px 24px rgb(0 0 0 / .3) }
.plate-tag{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); white-space:nowrap; background:#fff; color:var(--ink); font:700 11.5px/1 var(--f-text); padding:5px 9px; border-radius:99px; box-shadow:0 3px 8px rgb(0 0 0 / .2) }
.dish-info{ display:flex; gap:16px; align-items:flex-start; max-width:760px; margin:26px auto 0; padding:18px var(--pad) 0 }
.dish-plate{ flex:none; width:44px; height:44px; border-radius:50%; background:radial-gradient(circle, #fff 0 52%, var(--pc, #e4507f) 53%); box-shadow:0 4px 10px rgb(0 0 0 / .18) }
.dish-name{ font:800 clamp(24px, 6vw, 40px)/1.1 var(--f-display) }
.dish-jp{ font-size:.55em; color:var(--accent); margin-left:6px }
.dish-desc{ margin-top:6px; color:var(--muted); font-size:16px }
.dish-info.swap .dish-name, .dish-info.swap .dish-desc{ animation:swapIn .5s cubic-bezier(.2,.8,.2,1) }
@keyframes swapIn{ from{ opacity:0; transform:translateY(10px) } }
.food-fact{ max-width:760px; margin:22px auto 0; padding:0 var(--pad); font-size:14px; color:var(--muted) }

/* ---------- 6. Emaki (scroll horizontal) ---------- */
.emaki{
  background-color:#f6c9d6;
  /* patrón seigaiha (olas japonesas) */
  background-image:
    radial-gradient(circle at 50% 100%, transparent 0 9px, rgb(255 255 255 / .45) 9px 11px, transparent 11px 17px, rgb(255 255 255 / .45) 17px 19px, transparent 19px 25px, rgb(255 255 255 / .45) 25px 27px, transparent 27px),
    radial-gradient(circle at 50% 100%, transparent 0 9px, rgb(255 255 255 / .45) 9px 11px, transparent 11px 17px, rgb(255 255 255 / .45) 17px 19px, transparent 19px 25px, rgb(255 255 255 / .45) 25px 27px, transparent 27px);
  background-size:56px 28px; background-position:0 0, 28px 14px;
}
.emaki-pin{ height:100svh; display:flex; align-items:center; overflow:hidden }
.emaki-track{
  position:relative; display:flex; align-items:stretch; width:max-content; height:min(78svh, 680px);
  margin-left:var(--pad);
}
.emaki-track::before{ /* el papel */
  content:""; position:absolute; inset:0 14px; z-index:0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgb(255 255 255 / .6), transparent 60%),
    repeating-linear-gradient(0deg, rgb(150 110 70 / .05) 0 1px, transparent 1px 5px),
    #fbf1e1;
  box-shadow:0 30px 50px rgb(90 20 50 / .25);
}
.roller{ position:relative; z-index:2; flex:none; width:28px; margin:-14px 0; border-radius:14px;
  background:linear-gradient(90deg, #5a2a12, #b8763f 35%, #e9b77d 50%, #a8682f 70%, #4d230e) }
.roller::before, .roller::after{ content:""; position:absolute; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:#2c1206 }
.roller::before{ top:-8px } .roller::after{ bottom:-8px }
.ep{ position:relative; z-index:1; flex:none; width:min(80vw, 440px); padding:clamp(18px, 3vw, 30px); display:flex; flex-direction:column; gap:14px; color:#2b1630 }
.ep + .ep{ border-left:1px dashed rgb(150 90 60 / .3) }
.ep img{ width:100%; height:52%; min-height:0; object-fit:cover; border-radius:6px; filter:saturate(1.05) }
.ep h3{ font:800 clamp(24px, 5.6vw, 36px)/1.1 var(--f-display) }
.ep h3 span{ color:var(--torii); margin-right:6px }
.ep p{ font-size:clamp(15px, 1.6vw, 17px); line-height:1.5; color:#5a3a4a }
.ep-intro{ justify-content:center; width:min(84vw, 520px) }
.ep-intro .eyebrow{ color:var(--torii) }
.ep-intro .title{ font-size:clamp(36px, 4.6vw, 62px) }
.ep-hint{ font-weight:700; color:var(--torii) !important }
.ep-text{ justify-content:center }
.ep-text h3 + p{ margin-bottom:14px }
/* Sin JS / movimiento reducido: desliza con el dedo */
.emaki.no-pin .emaki-pin{ height:auto; padding:60px 0; overflow-x:auto; scroll-snap-type:x mandatory }
.emaki.no-pin .ep{ scroll-snap-align:start }

/* ---------- 7. Personas ---------- */
.people{ padding:clamp(80px, 13vw, 160px) var(--pad); max-width:1200px; margin:0 auto }
.people .eyebrow{ color:var(--accent) }
.manifesto{ font:700 clamp(28px, 7.4vw, 70px)/1.16 var(--f-display); letter-spacing:-.01em }
.manifesto .w{ opacity:.2; transition:none }
.people-facts{ list-style:none; padding:0; margin:clamp(40px, 7vw, 70px) 0 0; display:grid; gap:14px }
@media (min-width:760px){ .people-facts{ grid-template-columns:repeat(3,1fr); gap:20px } }
.people-facts li{ display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:16px; background:rgb(255 255 255 / .12); border:1px solid rgb(255 255 255 / .25) }
.people-facts b{ flex:none; font:800 20px/1.2 var(--f-display); writing-mode:vertical-rl; color:#fff; background:rgb(0 0 0 / .14); padding:8px 6px; border-radius:8px }
.people-facts span{ font-size:15.5px; line-height:1.5 }
.people-img{ width:100%; height:clamp(220px, 45vw, 460px); object-fit:cover; border-radius:20px; margin-top:clamp(30px, 5vw, 50px) }

/* ---------- 8. Noche ---------- */
.night{ padding:clamp(80px, 12vw, 150px) 0 clamp(60px, 10vw, 120px); overflow:hidden }
.neon{ font:800 clamp(40px, 11vw, 120px)/1.02 var(--f-display); color:#fff1f6;
  text-shadow:0 0 6px #fff, 0 0 14px #ff6fa0, 0 0 30px #ff2f7d, 0 0 60px #ff2f7d; animation:flicker 5s infinite }
.neon span{ color:#9ff3ff; text-shadow:0 0 6px #fff, 0 0 14px #2fe0ff, 0 0 34px #00b7ff; font-size:.6em }
@keyframes flicker{ 0%,18%,22%,25%,53%,57%,100%{ opacity:1 } 20%,24%,55%{ opacity:.55; text-shadow:none } }
.night-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; padding:0 var(--pad); max-width:1200px; margin:clamp(36px, 6vw, 70px) auto 0 }
.ng{ margin:0; overflow:hidden; border-radius:14px; box-shadow:0 20px 50px rgb(0 0 0 / .4) }
.ng img{ width:100%; height:100%; object-fit:cover }
.ng-1{ grid-column:1 / 3; aspect-ratio:16/9 }
.ng-2{ aspect-ratio:3/4.4 } .ng-3{ aspect-ratio:3/4.4; margin-top:40px }
.ng-4{ aspect-ratio:4/3 } .ng-5{ aspect-ratio:4/3; margin-top:24px }
@media (min-width:760px){
  .night-grid{ grid-template-columns:repeat(6, 1fr); gap:22px }
  .ng-1{ grid-column:1 / 4; aspect-ratio:4/3 } .ng-2{ grid-column:4 / 6; margin-top:80px } .ng-3{ grid-column:6 / 7; margin-top:20px; aspect-ratio:3/5 }
  .ng-4{ grid-column:2 / 4; margin-top:-40px } .ng-5{ grid-column:4 / 7; margin-top:30px; aspect-ratio:16/9 }
}

/* ---------- 9. Pase de abordar ---------- */
.board{ padding:clamp(80px, 12vw, 140px) 0 clamp(70px, 10vw, 120px) }
.printer{ position:relative; max-width:440px; margin:clamp(34px, 5vw, 56px) auto 0; padding:0 var(--pad) }
.slot{ height:26px; border-radius:13px; background:linear-gradient(180deg, #3b2233, #1c0f19); box-shadow:inset 0 4px 8px rgb(0 0 0 / .6), 0 2px 0 rgb(255 255 255 / .5); position:relative; z-index:2 }
.ticket-window{ overflow:hidden; margin:-13px 10px 0; padding:0 4px 18px }
.ticket{
  position:relative; background:#fffaf4; color:#2b1630; border-radius:4px 4px 14px 14px; padding:30px 22px 26px;
  font-family:var(--f-text); box-shadow:0 18px 30px rgb(90 20 50 / .22);
  -webkit-mask:radial-gradient(circle 10px at 0 60%, transparent 98%, #000) , radial-gradient(circle 10px at 100% 60%, transparent 98%, #000);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.tk-top{ display:flex; justify-content:space-between; font:700 12px/1 var(--f-text); letter-spacing:.16em; color:var(--torii); padding-bottom:14px; border-bottom:2px dashed rgb(43 22 48 / .2) }
.tk-route{ display:flex; align-items:center; justify-content:space-between; padding:18px 0 }
.tk-route b{ display:block; font:800 clamp(40px, 12vw, 52px)/1 var(--f-display) }
.tk-route small{ font-size:13px; color:#7a5a6a }
.tk-route div:last-child{ text-align:right }
.tk-route svg{ width:34px; height:34px; fill:var(--rose); transform:rotate(90deg) }
.tk-field{ display:block; font:700 11px/1 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:#7a5a6a }
.tk-field input{ display:block; width:100%; margin-top:8px; min-height:46px; border:0; border-bottom:2px solid #2b1630; background:transparent; font:600 22px/1.2 var(--f-hand); color:#2b1630; padding:4px 0; border-radius:0 }
.tk-field input::placeholder{ color:#b39aa6 }
.tk-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; padding-top:16px; border-top:2px dashed rgb(43 22 48 / .2) }
.tk-grid small{ display:block; font:700 10.5px/1 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:#7a5a6a; margin-bottom:5px }
.tk-grid b{ font:800 22px/1 var(--f-display) }
.tk-note{ margin-top:16px; font-size:12.5px; line-height:1.45; color:#7a5a6a }
.tk-bar{ height:46px; margin-top:16px; background:repeating-linear-gradient(90deg, #2b1630 0 2px, transparent 2px 4px, #2b1630 4px 7px, transparent 7px 9px, #2b1630 9px 10px, transparent 10px 13px) }
.stamp{
  position:absolute; right:18px; top:118px; width:118px; height:118px; border-radius:50%; border:5px solid var(--torii); color:var(--torii);
  display:flex; flex-direction:column; align-items:center; justify-content:center; font:800 34px/1 var(--f-display);
  opacity:0; transform:scale(2.2) rotate(-30deg); mix-blend-mode:multiply; pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stamp small{ font:800 13px/1 var(--f-text); letter-spacing:.06em; margin-top:6px }
.board-cta{ text-align:center; margin-top:28px; padding:0 var(--pad) }
.board-msg{ margin-top:14px; min-height:1.6em; font-weight:700; color:var(--accent) }

/* ---------- Footer ---------- */
.foot{ position:relative; z-index:1; background:var(--bg); padding:clamp(70px, 10vw, 120px) var(--pad) 40px; text-align:center; overflow:hidden; transition:background-color .7s }
.foot-kicker{ font:700 14px/1.2 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.wordmark{
  --fill:0%;
  font:800 clamp(150px, 46vw, 520px)/1 var(--f-display); margin:10px 0 0;
  color:transparent; -webkit-text-stroke:2px rgb(255 255 255 / .85);
  background:linear-gradient(0deg, #fff var(--fill), transparent var(--fill)); -webkit-background-clip:text; background-clip:text;
}
.foot-credit{ margin-top:12px; font-size:clamp(18px, 3vw, 24px) }
.foot-credit strong{ font-family:var(--f-display); font-weight:800 }
.foot-photos{ margin:22px auto 26px; max-width:52ch; font-size:13px; color:var(--muted) }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .hero{ position:relative }
  .zoom{ height:auto } .zoom-sticky{ position:relative; height:70svh }
  .zp-el:not(:first-of-type){ display:none }
  .zoom-text{ opacity:1 }
  .manifesto .w{ opacity:1 }
  .neon{ animation:none }
  .scroll-cue i{ animation:none }
  #petals{ display:none }
}