/* =========================================================
   ESTRUCTURAS PROPIAS DE CADA SUB-PÁGINA
   la la la! · postal de verano   |  Viva · atardecer de cine
   Otafuku · el ritual paso a paso |  Sombras · a ciegas
   ========================================================= */

/* ---------- piezas comunes ---------- */
[data-tilt]{ position:relative; overflow:hidden; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .6s var(--out); }
[data-tilt].rv{ transition:transform .6s var(--out) 0s, opacity .9s var(--ease) calc(var(--d,0) * 90ms), translate 1.1s var(--out) calc(var(--d,0) * 90ms), filter .9s var(--ease) calc(var(--d,0) * 90ms); }
[data-tilt].is-tilt{ transition:transform .12s linear, opacity .9s, translate 1.1s var(--out), filter .9s; }
[data-split].in .pal > span{ translate:0 0; rotate:0deg; }
.mk-dato h4{ margin:0 0 8px; font:600 10px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--acc); }
.mk-dato p{ font-size:15px; line-height:1.6; }

/* =========================================================
   LA LA LA! — postal de verano italiano
   ========================================================= */
.lx-hero{ align-items:center; min-height:100vh; min-height:100svh; padding:clamp(100px,12vh,130px) 0 clamp(50px,7vh,80px); background:var(--bg); color:var(--ink); }
.lx-hero__rayas{ position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(240,190,46,.26) 0 64px,transparent 64px 128px); }
.lx-hero__sol{ left:clamp(10px,3vw,50px); right:auto; top:clamp(88px,12vh,120px); width:clamp(90px,10vw,150px); z-index:3; }
.lx-hero__in{ display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:clamp(30px,5vw,80px); padding-bottom:0; }
.lx-postal{ position:relative; margin:0; padding:14px; background:#fffdf6; border-radius:6px; rotate:-2.5deg; box-shadow:0 44px 80px -44px rgba(80,55,10,.6); }
.lx-postal__marco{ position:relative; aspect-ratio:16/11; overflow:hidden; border-radius:3px; }
.lx-postal__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,10,4,0) 30%,rgba(20,10,4,.72)); }
.lx-postal__txt{ position:absolute; left:clamp(18px,3vw,40px); right:clamp(18px,3vw,40px); bottom:clamp(18px,3vw,36px); color:#fff; }
.lx-postal__txt .mk-hero__logo{ margin-bottom:14px; height:clamp(56px,6vw,96px); }
.lx-hero h1{ font:400 clamp(30px,3.8vw,60px)/1 var(--f-display); letter-spacing:-.02em; max-width:15ch; }
.lx-hero h1 em{ color:#ffd76a; }
.lx-sello{ position:absolute; z-index:3; top:-38px; right:-32px; display:grid; place-items:center; width:clamp(110px,10vw,150px); aspect-ratio:1; border-radius:50%;
  background:#f0be2e; rotate:10deg; box-shadow:0 14px 30px -14px rgba(80,55,10,.6); }
.lx-sello svg{ position:absolute; inset:6px; animation:spin 18s linear infinite; }
.lx-sello text{ font:600 13px var(--f-ui); letter-spacing:.16em; text-transform:uppercase; fill:#17140d; }
.lx-sello img{ width:44%; }
.lx-mano{ font:500 clamp(36px,3.8vw,58px)/1 var(--f-hand); color:#c28a0e; rotate:-4deg; margin-bottom:18px; }
.lx-hero__nota .mk-hero__sub{ max-width:36ch; font-size:17px; }
.lx-hero .mk-scroll{ color:var(--ink); }
.lx-hero .mk-scroll i{ background:rgba(23,20,13,.15); }
.lx-hero .mk-scroll i::after{ background:var(--ink); }
.lx-hero .mk-flota--spritz{ right:auto; left:55%; bottom:9%; }

/* pizarra del menú */
.lx-menu__top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; }
.lx-menu__pdf{ display:flex; flex-wrap:wrap; gap:10px; }
.lx-pizarra{ margin-top:clamp(22px,3vw,36px); overflow:hidden; border:2px solid #f0be2e; border-radius:28px; background:#fffdf6; box-shadow:0 30px 70px -50px rgba(80,55,10,.6); }
.lx-pizarra__tabs{ display:flex; gap:6px; padding:10px; overflow-x:auto; scrollbar-width:none; background:repeating-linear-gradient(90deg,#f0be2e 0 36px,#f7d56b 36px 72px); }
.lx-pizarra__tabs::-webkit-scrollbar{ display:none; }
.lx-pizarra__tabs button{ flex:none; padding:12px 20px; border-radius:999px; background:rgba(255,253,246,.6); color:#17140d; font:italic 400 clamp(17px,1.5vw,21px)/1 var(--f-display); transition:background-color .3s, color .3s, transform .35s var(--out); }
.lx-pizarra__tabs button:hover{ transform:translateY(-2px); }
.lx-pizarra__tabs button[aria-selected="true"]{ background:#17140d; color:#fdf7e7; }
.lx-pizarra__cuerpo{ display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(20px,4vw,60px); padding:clamp(22px,3.5vw,48px); }
.lx-platos li{ display:grid; grid-template-columns:auto 1fr; column-gap:14px; padding:15px 0; border-bottom:1px dashed rgba(23,20,13,.2); opacity:0; translate:0 14px; }
.lx-platos li:last-child{ border-bottom:0; }
.lx-platos li::before{ content:"✦"; grid-row:span 2; padding-top:6px; color:#e0a91f; font-size:13px; }
.lx-platos b{ font:400 clamp(20px,1.8vw,26px)/1.15 var(--f-display); }
.lx-platos span{ grid-column:2; margin-top:4px; font-size:14px; line-height:1.5; opacity:.72; }
[role="tabpanel"].entra .lx-platos li{ animation:lxPlato .6s var(--out) forwards; }
[role="tabpanel"].entra .lx-platos li:nth-child(2){ animation-delay:.06s; }
[role="tabpanel"].entra .lx-platos li:nth-child(3){ animation-delay:.12s; }
[role="tabpanel"].entra .lx-platos li:nth-child(4){ animation-delay:.18s; }
[role="tabpanel"].entra .lx-platos li:nth-child(5){ animation-delay:.24s; }
[role="tabpanel"].entra .lx-platos li:nth-child(6){ animation-delay:.3s; }
@keyframes lxPlato{ to{ opacity:1; translate:0 0; } }
.lx-pizarra__fotos{ position:relative; aspect-ratio:4/5; max-height:560px; }
.lx-polaroid{ position:absolute; inset:0; margin:0; padding:12px 12px 54px; background:#fff; box-shadow:0 30px 60px -34px rgba(80,55,10,.6);
  opacity:0; scale:.94; rotate:4deg; transition:opacity .5s, scale .7s var(--out), rotate .7s var(--out); }
.lx-polaroid.on{ opacity:1; scale:1; rotate:-2deg; }
.lx-polaroid img{ width:100%; height:100%; object-fit:cover; }
.lx-polaroid figcaption{ position:absolute; left:0; right:0; bottom:12px; text-align:center; font:500 28px/1 var(--f-hand); color:#17140d; }

/* la giornata */
.lx-horas{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(20px,2.6vw,34px); }
.lx-horas li{ position:relative; overflow:hidden; min-height:260px; padding:26px 24px 28px; border-radius:24px; background:#fffdf6; border:1px solid var(--linea); }
.lx-horas li:nth-child(2){ background:#f0be2e; border-color:#f0be2e; }
.lx-horas li:nth-child(3){ background:#17140d; border-color:#17140d; color:#fdf7e7; }
.lx-horas__h{ display:block; font:500 clamp(48px,5vw,78px)/1 var(--f-hand); color:#c28a0e; }
.lx-horas li:nth-child(2) .lx-horas__h{ color:#17140d; }
.lx-horas li:nth-child(3) .lx-horas__h{ color:#f0be2e; }
.lx-horas b{ display:block; margin-top:10px; font:italic 400 30px/1 var(--f-display); }
.lx-horas p{ margin-top:10px; max-width:28ch; font-size:14.5px; line-height:1.55; opacity:.82; }
.lx-horas img{ position:absolute; right:-14px; bottom:-18px; width:118px; rotate:-10deg; transition:rotate .6s var(--out), scale .6s var(--out); }
.lx-horas li:hover img{ rotate:4deg; scale:1.08; }

/* el lugar: instantáneas y postales colgadas de un tendedero */
.lx-cuerda{ align-items:flex-start; gap:clamp(18px,2vw,30px); padding-top:8px; padding-bottom:54px;
  background-image:linear-gradient(rgba(23,20,13,.4),rgba(23,20,13,.4)); background-size:100% 2px; background-repeat:no-repeat; background-position:0 24px; background-attachment:local; }
.lx-cuerda figure{ height:auto; aspect-ratio:auto; overflow:visible; border-radius:2px; margin-top:34px; rotate:var(--r,0deg); transform-origin:50% -28px;
  animation:lxColumpio 4.6s ease-in-out infinite alternate; animation-delay:var(--dl,0s); }
.lx-cuerda figure:hover{ animation-play-state:paused; }
.lx-pinza{ position:absolute; z-index:4; top:-32px; left:50%; width:13px; height:44px; translate:-50% 0; border-radius:3px;
  background:linear-gradient(90deg,#b0824a,#dfb97f 45%,#b0824a); box-shadow:0 4px 6px rgba(0,0,0,.22); }
.lx-pinza::after{ content:""; position:absolute; left:50%; top:16px; width:9px; height:5px; translate:-50% 0; border-radius:2px; background:#8a8f96; }
@keyframes lxColumpio{ from{ transform:rotate(-1.8deg); } to{ transform:rotate(1.8deg); } }

/* instantánea tipo Instax: marco blanco, foto cuadrada y franja escrita a mano */
.lx-insta{ width:clamp(200px,17vw,250px); padding:12px 12px 0; background:linear-gradient(165deg,#fffefb 0%,#f4eee0 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 30px 44px -26px rgba(80,55,10,.55); }
.lx-insta__foto{ position:relative; display:block; aspect-ratio:1; overflow:hidden; background:#2a2418; }
.lx-insta__foto::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 38%), radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(40,25,5,.28)); }
.lx-insta__foto img{ filter:saturate(1.08) contrast(1.02) sepia(.06); }
.lx-cuerda .lx-insta figcaption{ position:static; display:block; height:62px; padding:0 6px; border-radius:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  color:#2a2418; font:500 24px/62px var(--f-hand); letter-spacing:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* postal: foto apaisada con borde, sello, matasellos y saludo escrito */
.lx-postal-c{ width:clamp(320px,29vw,430px); padding:11px; background:#fffdf7; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 32px 46px -28px rgba(80,55,10,.55); }
.lx-postal-c__foto{ position:relative; display:block; aspect-ratio:3/2; overflow:hidden; background:#2a2418; }
.lx-postal-c__foto::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(30,15,0,.45)), radial-gradient(130% 100% at 50% 45%,transparent 60%,rgba(40,25,5,.3)); }
.lx-postal-c__saluti{ position:absolute; z-index:2; left:16px; bottom:12px; rotate:-5deg; color:#fff; font:700 clamp(28px,2.5vw,38px)/1 var(--f-hand);
  text-shadow:0 2px 0 #e2601c, 0 6px 16px rgba(0,0,0,.35); }
.lx-postal-c__sello{ position:absolute; z-index:3; top:-12px; right:16px; width:66px; padding:7px; background:#f0be2e; rotate:7deg;
  outline:2px dashed #fffdf7; outline-offset:-6px; box-shadow:0 8px 14px -6px rgba(80,55,10,.5); }
.lx-cuerda .lx-postal-c__sello img{ height:auto; object-fit:contain; filter:none; }
.lx-matasellos{ position:absolute; z-index:3; top:8px; right:78px; width:112px; rotate:-10deg; opacity:.75; pointer-events:none; overflow:visible; }
.lx-matasellos circle, .lx-matasellos path{ fill:none; stroke:#fffdf7; stroke-width:2.2; }
.lx-matasellos text{ fill:#fffdf7; font:700 10px var(--f-ui); letter-spacing:.12em; }

/* reverso de postal por correo aéreo */
.lx-dorso{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; background:#fffdf6; border:12px solid transparent;
  border-image:repeating-linear-gradient(45deg,#f0be2e 0 14px,#fffdf6 14px 28px,#e2601c 28px 42px,#fffdf6 42px 56px) 12; box-shadow:0 40px 80px -50px rgba(80,55,10,.55); }
.lx-dorso::before{ content:""; position:absolute; top:24px; bottom:24px; left:55%; width:1px; background:rgba(23,20,13,.2); }
.lx-dorso__msg, .lx-dorso__dir{ position:relative; padding:clamp(26px,4vw,52px); }
.lx-dorso .lx-mano{ font-size:clamp(46px,5vw,78px); margin:12px 0 16px; }
.lx-dorso__msg > p:not(.lx-mano){ max-width:40ch; margin-bottom:22px; font-size:15px; line-height:1.6; opacity:.8; }
.lx-dorso__sello{ position:absolute; top:24px; right:24px; width:86px; padding:10px; background:#f0be2e; outline:2px dashed #fffdf6; outline-offset:-8px; rotate:6deg; }
.lx-dorso dl{ margin:96px 0 0; }
.lx-dorso dl div{ padding:12px 0; border-bottom:1px solid rgba(23,20,13,.25); }
.lx-dorso dt{ font:600 10px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:#c28a0e; }
.lx-dorso dd{ margin:6px 0 0; font:italic 400 20px/1.25 var(--f-display); }

/* =========================================================
   VIVA LA VIDA — atardecer de cine
   ========================================================= */
.vv-hero{ align-items:center; justify-content:center; min-height:100vh; min-height:100svh; text-align:center; }
.vv-hero__in{ display:flex; flex-direction:column; align-items:center; padding:clamp(90px,12vh,120px) var(--pad) clamp(70px,10vh,100px); }
.vv-hero h1{ max-width:14ch; font-size:clamp(42px,6.6vw,108px); }
.vv-hero .mk-hero__sub{ max-width:46ch; margin-inline:auto; }
.vv-hero .mk-hero__cta{ justify-content:center; }
.vv-hero .mk-hero__veil{ background:linear-gradient(180deg,rgba(20,10,6,.3),rgba(20,10,6,.25) 45%,rgba(20,10,6,.75)); }
.vv-ocaso{ display:inline-flex; align-items:center; gap:10px; margin-bottom:26px; padding:9px 16px; border-radius:999px; background:rgba(20,10,6,.35); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font:500 12.5px/1.2 var(--f-ui); opacity:0; transition:opacity 1s .3s; }
body.mk-ready .vv-ocaso{ opacity:1; }
.vv-ocaso i{ flex:none; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle,#fffbe6,#ffd166 55%,#ff8a3d); box-shadow:0 0 14px 3px rgba(255,160,70,.6); animation:vvLatido 2.4s ease-in-out infinite; }
@keyframes vvLatido{ 50%{ scale:1.25; } }

/* menú en filas gigantes */
.vv-filas{ margin-top:clamp(20px,2.6vw,34px); border-top:1px solid var(--linea); }
.vv-fila{ position:relative; display:grid; grid-template-columns:70px 1fr auto auto; align-items:center; gap:24px; padding:clamp(18px,2.4vw,32px) var(--pad); border-bottom:1px solid var(--linea); overflow:hidden; }
.vv-fila::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--acc); transform:scaleY(0); transform-origin:50% 100%; transition:transform .6s var(--out); }
.vv-fila > *{ position:relative; z-index:1; transition:color .4s, translate .6s var(--out); }
.vv-fila:hover::before{ transform:scaleY(1); }
.vv-fila:hover{ color:#fff8ee; }
.vv-fila:hover h3{ translate:16px 0; font-style:italic; }
.vv-fila__n{ font:600 12px/1 var(--f-ui); letter-spacing:.14em; opacity:.6; }
.vv-fila h3{ font:400 clamp(42px,6.4vw,100px)/1 var(--f-display); letter-spacing:-.03em; }
.vv-fila__meta{ font:600 11px/1.3 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.vv-fila__acc{ display:flex; gap:8px; }
.vv-fila:hover .btn--sol{ background:#fff8ee; color:var(--acc); }
.vv-fila:hover .btn--borde{ border-color:#fff8ee; color:#fff8ee; background:transparent; }
.vv-fantasma{ position:fixed; left:0; top:0; z-index:60; width:280px; height:360px; overflow:hidden; border-radius:22px; pointer-events:none;
  translate:-50% -50%; opacity:0; scale:.6; rotate:-6deg; transition:opacity .35s, scale .5s var(--out), rotate .5s var(--out); box-shadow:0 40px 70px -30px rgba(0,0,0,.5); }
.vv-fantasma.on{ opacity:1; scale:1; rotate:-3deg; }
.vv-fantasma img{ width:100%; height:100%; object-fit:cover; }
/* top 10: carril horizontal de platos con número gigante */
.vv-top{ margin-top:clamp(44px,5vw,72px); }
.vv-top__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(20px,2.6vw,34px); }
.vv-top__k{ display:block; margin-bottom:12px; color:var(--acc); }
.vv-top__rail{ --borde:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));
  display:flex; gap:clamp(14px,1.6vw,22px); overflow-x:auto; padding:6px var(--borde) 10px; scroll-padding-inline:var(--borde); scroll-snap-type:x mandatory; scrollbar-width:none; list-style:none; cursor:grab; }
.vv-top__rail::-webkit-scrollbar{ display:none; }
.vv-top__rail.is-drag{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.vv-top__rail.is-drag img{ pointer-events:none; }
.vv-top__item{ position:relative; flex:none; width:clamp(250px,23vw,330px); scroll-snap-align:start; }
.vv-top__item--uno{ width:clamp(300px,34vw,500px); }
.vv-top__foto{ position:relative; margin:0; aspect-ratio:3/4; overflow:hidden; border-radius:22px; background:var(--marron); }
.vv-top__item--uno .vv-top__foto{ aspect-ratio:4/5; }
.vv-top__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,10,6,0) 45%,rgba(20,10,6,.55)); }
.vv-top__foto img{ width:100%; height:100%; object-fit:cover; transition:scale 1.1s var(--out); }
.vv-top__item:hover .vv-top__foto img{ scale:1.07; }
.vv-top__n{ position:absolute; z-index:2; top:clamp(150px,20vw,290px); left:14px; translate:0 -50%; color:transparent; -webkit-text-stroke:1.5px #fff8ee;
  font:italic 400 clamp(90px,9vw,150px)/.8 var(--f-display); letter-spacing:-.05em; text-shadow:0 10px 40px rgba(20,10,6,.35); transition:color .5s, translate .6s var(--out); pointer-events:none; }
.vv-top__item--uno .vv-top__n{ top:clamp(230px,32vw,480px); font-size:clamp(130px,14vw,230px); color:var(--naranja-2); -webkit-text-stroke:0; }
.vv-top__item:hover .vv-top__n{ color:var(--naranja-2); -webkit-text-stroke-color:var(--naranja-2); translate:6px -54%; }
.vv-top__txt{ padding:16px 4px 0; }
.vv-top__cat{ font:600 10px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--acc); }
.vv-top__txt h3{ margin-top:8px; font:400 clamp(24px,2.1vw,32px)/1.05 var(--f-display); letter-spacing:-.02em; }
.vv-top__item--uno h3{ font-size:clamp(32px,3vw,46px); font-style:italic; }
.vv-top__txt p{ margin-top:8px; font-size:14px; line-height:1.5; opacity:.72; }

/* el atardecer: escena fija, el sol baja por el arco con el scroll */
.vv-sol{ --sp:0; position:relative; height:260vh; background:#140a06; color:#fff8ee; }
.vv-sol__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center; }
.vv-sol__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; scale:calc(1.18 - var(--sp) * .12);
  filter:brightness(calc(1.05 - var(--sp) * .55)) saturate(calc(1 + var(--sp) * .5)) hue-rotate(calc(var(--sp) * -12deg)); }
.vv-sol__cielo{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,196,110,calc(.32 - var(--sp) * .32)) 0%,rgba(226,96,28,calc(.12 + var(--sp) * .3)) 55%,rgba(20,10,6,.7) 100%),
    linear-gradient(180deg,rgba(40,20,60,calc(var(--sp) * .55)),transparent 60%),
    linear-gradient(90deg,rgba(20,10,6,.72) 0%,rgba(20,10,6,.25) 55%,rgba(20,10,6,0)); }
.vv-sol__arco{ position:absolute; left:0; right:0; bottom:0; width:100%; height:78%; max-width:none; overflow:visible; }
.vv-sol__arco path{ stroke:rgba(255,248,238,.35); stroke-width:1.5; stroke-dasharray:4 9; }
.vv-sol__horizonte{ stroke:rgba(255,248,238,.3); stroke-width:1; }
.vv-sol__disco{ fill:#ffe39a; }
.vv-sol__halo{ fill:rgba(255,160,70,.35); filter:blur(18px); }
#solDisco{ transition:transform .15s linear; }
.vv-sol__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr; align-items:end; gap:clamp(28px,5vw,80px); width:100%; }
.vv-sol__txt .eyebrow{ color:var(--naranja-3); }
.vv-sol__txt .mk-tit{ margin-top:14px; max-width:13ch; font-size:clamp(40px,5.6vw,92px); }
.vv-sol__txt .mk-tit em{ color:var(--naranja-2); }
.vv-sol__txt > p{ max-width:46ch; margin-top:18px; font-size:16px; line-height:1.6; opacity:.86; }
.vv-sol__pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0 0; padding:0; list-style:none; }
.vv-sol__pasos li{ padding:14px 16px; border-radius:16px; border:1px solid rgba(255,248,238,.22); background:rgba(20,10,6,.25); opacity:.55;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:opacity .5s, background-color .5s, border-color .5s, translate .5s var(--out); }
.vv-sol__pasos li.on{ opacity:1; background:rgba(226,96,28,.85); border-color:transparent; translate:0 -6px; }
.vv-sol__pasos b{ display:block; font:600 10.5px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; }
.vv-sol__pasos span{ display:block; margin-top:8px; font-size:13.5px; line-height:1.45; }
.vv-sol__reloj{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:clamp(22px,2.4vw,32px); border-radius:24px;
  background:rgba(20,10,6,.4); border:1px solid rgba(255,248,238,.22); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.vv-sol__etq{ font:600 10.5px/1.4 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.vv-sol__reloj b{ font:italic 400 clamp(64px,7vw,112px)/.9 var(--f-display); letter-spacing:-.03em; color:#ffd8a6; text-shadow:0 0 40px rgba(255,138,61,.55); }
#solFalta{ font-size:15px; }
.vv-sol__sim{ margin:6px 0 10px; font:500 11px/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; opacity:.6; }
.vv-sol__sim i{ font-style:normal; font-variant-numeric:tabular-nums; }

/* el chef */
.vv-chef{ display:grid; grid-template-columns:1fr 1.1fr; min-height:clamp(440px,62vh,600px); background:var(--marron); color:#fff6ea; }
.vv-chef__foto{ position:relative; margin:0; overflow:hidden; }
.vv-chef__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:67% 30%; }
.vv-chef__txt{ display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,4.4vw,64px); }
.vv-chef__txt .eyebrow{ color:var(--naranja-2); }
.vv-cita{ margin:12px 0 0; font:400 clamp(26px,2.7vw,42px)/1.08 var(--f-display); letter-spacing:-.02em; }
.vv-cita em{ font-style:italic; color:var(--naranja-2); }
.vv-chef__firma{ margin-top:18px; font:500 12px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.vv-chef__txt > p:not(.vv-chef__firma){ max-width:52ch; margin-top:16px; font-size:15px; line-height:1.6; opacity:.82; }
.vv-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.vv-chips li{ padding:9px 14px; border-radius:999px; border:1px solid rgba(255,246,234,.3); font:500 12px/1 var(--f-ui); }

/* el lugar: galería fijada que avanza de lado al bajar */
.vv-pin{ position:relative; }
.vv-pin__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:clamp(16px,2.6vh,30px); }
.vv-pin__head .sec-head{ margin-bottom:12px; }
.vv-pin__pista{ display:flex; align-items:center; gap:16px; width:max-content; padding:0 var(--pad); will-change:transform; }
.vv-pin__foto{ position:relative; flex:none; height:clamp(260px,52vh,540px); aspect-ratio:3/4; margin:0; overflow:hidden; border-radius:20px; }
.vv-pin__foto--w{ aspect-ratio:16/10; }
.vv-pin__foto img{ width:100%; height:100%; object-fit:cover; scale:1.12; translate:calc((var(--vp,0) - .5) * -60px) 0; }
.vv-pin__foto figcaption{ position:absolute; left:14px; bottom:14px; padding:8px 12px; border-radius:999px; background:rgba(20,10,6,.55); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font:500 11.5px/1 var(--f-ui); }
.vv-pin__foto figcaption b{ margin-right:6px; color:var(--naranja-3); }
.vv-pin__barra{ height:2px; margin:0 var(--pad); overflow:hidden; border-radius:2px; background:var(--linea); }
.vv-pin__barra i{ display:block; height:100%; background:var(--acc); transform-origin:0 50%; transform:scaleX(var(--vp,0)); }

/* experiencias en bandas */
.vv-exp__lista{ display:grid; gap:12px; margin-top:clamp(20px,2.6vw,34px); }
.vv-banda{ display:grid; grid-template-columns:clamp(160px,22vw,300px) 1fr auto; align-items:center; gap:clamp(18px,3vw,40px); padding:14px clamp(18px,3vw,36px) 14px 14px;
  border-radius:24px; background:#fff8ee; border:1px solid var(--linea); color:var(--ink); }
.vv-banda img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:14px; transition:scale 1s var(--out); }
.vv-banda:hover img{ scale:1.05; }
.vv-banda .eyebrow{ color:var(--acc); }
.vv-banda h3{ margin-top:8px; font:400 clamp(24px,2.6vw,40px)/1.05 var(--f-display); }
.vv-banda p{ margin-top:8px; font-size:14.5px; opacity:.72; }
.vv-banda em{ display:grid; place-items:center; width:54px; height:54px; border-radius:50%; border:1px solid var(--linea); font-style:normal; font-size:20px; transition:background-color .3s, color .3s, translate .4s var(--out); }
.vv-banda:hover em{ background:var(--acc); border-color:var(--acc); color:#fff8ee; translate:4px -4px; }

/* cierre */
.vv-info__t{ font-size:clamp(46px,7vw,112px); }
.vv-info__grid{ display:grid; grid-template-columns:repeat(3,1fr) 1.1fr; align-items:start; gap:24px; margin-top:clamp(20px,2.6vw,34px); }
.vv-info__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }

/* =========================================================
   OTAFUKU — el ritual
   ========================================================= */

.ot-ritual__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,80px); margin-top:clamp(20px,2.6vw,34px); }
.ot-ritual__foto{ position:sticky; top:clamp(90px,12vh,120px); height:calc(100vh - 170px); max-height:680px; overflow:hidden; border-radius:26px; background:#120a06; }
.ot-ritual__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; scale:1.08; transition:opacity .9s var(--ease), scale 1.6s var(--out); }
.ot-ritual__foto img.on{ opacity:1; scale:1; }
.ot-ritual__foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(20,12,8,.78)); }
.ot-ritual__num{ position:absolute; z-index:2; left:26px; bottom:16px; font:500 clamp(80px,9vw,140px)/1 "Shippori Mincho","Hiragino Mincho ProN",serif; color:#f6ebd8; text-shadow:0 10px 40px rgba(0,0,0,.4); }
.ot-paso{ position:relative; display:flex; flex-direction:column; justify-content:center; min-height:62vh; padding:20px 0 20px 30px; border-left:1px solid var(--linea); opacity:.32; transition:opacity .6s; }
.ot-paso::before{ content:""; position:absolute; left:-1px; top:50%; width:2px; height:0; translate:0 -50%; background:var(--acc); transition:height .8s var(--out); }
.ot-paso.on{ opacity:1; }
.ot-paso.on::before{ height:60%; }
.ot-paso > span{ font:600 11px/1 var(--f-ui); letter-spacing:.2em; color:var(--acc); }
.ot-paso h3{ margin-top:12px; font:400 clamp(30px,3.4vw,54px)/1.05 var(--f-display); }
.ot-paso p{ max-width:44ch; margin-top:14px; font-size:16px; line-height:1.65; opacity:.82; }
.ot-paso .btn{ align-self:flex-start; margin-top:22px; }

/* la barra en tira de película */
.ot-pelicula{ padding-top:30px; padding-bottom:30px; background-color:#f6ebd8;
  background-image:radial-gradient(circle 4.5px at 13px 15px,var(--bg) 96%,transparent 100%), radial-gradient(circle 4.5px at 13px calc(100% - 15px),var(--bg) 96%,transparent 100%);
  background-size:26px 100%; background-repeat:repeat-x; background-attachment:local; }
.ot-pelicula figure{ height:clamp(280px,28vw,420px); border-radius:4px; }
.ot-pelicula figcaption{ left:10px; bottom:10px; padding:0; border-radius:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; font:600 10px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:#f6ebd8; }

/* preguntas */
.ot-faq__grid{ display:grid; grid-template-columns:.9fr 1.1fr; align-items:start; gap:clamp(30px,5vw,80px); }
.ot-datos{ display:grid; gap:18px; margin-top:26px; }
.ot-faq__lista details{ border-bottom:1px solid var(--linea); }
.ot-faq__lista details:first-child{ border-top:1px solid var(--linea); }
.ot-faq__lista summary{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; list-style:none; cursor:pointer; font:400 clamp(21px,2vw,28px)/1.2 var(--f-display); }
.ot-faq__lista summary::-webkit-details-marker{ display:none; }
.ot-faq__lista summary::after{ content:"+"; flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--linea);
  font:400 20px/1 var(--f-ui); color:var(--acc); transition:rotate .4s var(--out), background-color .3s, color .3s, border-color .3s; }
.ot-faq__lista details[open] summary::after{ rotate:45deg; background:var(--acc); border-color:var(--acc); color:#fff8ee; }
.ot-faq__lista details p{ max-width:56ch; padding:0 0 22px; font-size:15px; line-height:1.65; opacity:.8; }

/* =========================================================
   SOMBRAS — a ciegas
   ========================================================= */
.sb-hero{ align-items:center; justify-content:center; min-height:100vh; min-height:100svh; text-align:center; }
.sb-hero__in{ display:flex; flex-direction:column; align-items:center; padding:clamp(90px,12vh,120px) var(--pad) clamp(70px,10vh,100px); }
.sb-hero h1{ max-width:15ch; font-size:clamp(42px,6.4vw,104px); }
.sb-hero .mk-hero__sub{ max-width:46ch; margin-inline:auto; }
.sb-hero .mk-hero__cta{ justify-content:center; }
.sb-hero .mk-hero__veil{ background:radial-gradient(60% 60% at 50% 55%,rgba(0,0,0,.25),rgba(0,0,0,.88)); }

/* los sentidos */
.sb-sentidos{ position:relative; overflow:hidden; }
.sb-sentidos__top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px; }
.sb-sentidos__top p{ max-width:40ch; font-size:15px; line-height:1.6; opacity:.72; }
.sb-lista{ position:relative; z-index:2; margin-top:clamp(20px,2.6vw,34px); border-top:1px solid var(--linea); }
.sb-sentido{ display:grid; grid-template-columns:60px 1fr minmax(0,32ch); align-items:center; gap:24px; padding:clamp(12px,1.8vw,24px) 0; border-bottom:1px solid var(--linea); transition:opacity .5s; }
.sb-sentidos.activo .sb-sentido:not(.on){ opacity:.2; }
.sb-sentido__n{ font:600 11px/1 var(--f-ui); letter-spacing:.2em; opacity:.5; }
.sb-sentido h3{ font:400 clamp(56px,9vw,150px)/.95 var(--f-display); letter-spacing:-.03em; transition:translate .6s var(--out); }
.sb-sentido.on h3{ translate:18px 0; font-style:italic; }
.sb-sentido p{ font-size:15px; line-height:1.55; opacity:.72; }
.sb-sentido__img{ display:none; }
.sb-luz{ position:absolute; z-index:1; left:0; top:0; width:clamp(240px,26vw,380px); aspect-ratio:1; overflow:hidden; border-radius:50%; pointer-events:none;
  translate:var(--sx,0px) var(--sy,0px); opacity:0; scale:.6; transition:opacity .45s, scale .6s var(--out);
  -webkit-mask-image:radial-gradient(circle,#000 42%,transparent 71%); mask-image:radial-gradient(circle,#000 42%,transparent 71%); }
.sb-sentidos.activo .sb-luz{ opacity:1; scale:1; }
.sb-luz img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; filter:brightness(1.5) contrast(1.1); transition:opacity .4s; }
.sb-luz img.on{ opacity:1; }
.sb-reserva{ display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:24px; margin-top:clamp(24px,3vw,40px); }
.sb-reserva__card{ position:relative; display:flex; align-items:flex-end; min-height:260px; padding:26px; overflow:hidden; border-radius:24px; color:#fdf2e4; isolation:isolate; }
.sb-reserva__card img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:brightness(1.25); transition:scale 1.1s var(--out); }
.sb-reserva__card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.15)); }
.sb-reserva__card:hover img{ scale:1.05; }
.sb-reserva__card b{ display:block; font:400 clamp(26px,2.6vw,38px)/1.05 var(--f-display); }
.sb-reserva__card span:not(.mk-brillo){ display:block; margin-top:8px; font:600 11px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.sb-reserva__card em{ position:absolute; top:20px; right:20px; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#fdf2e4; color:#000; font-style:normal; transition:translate .4s var(--out); }
.sb-reserva__card:hover em{ translate:4px -4px; }

/* los 90 minutos: de la luz a la oscuridad y de vuelta */
.sb-tiempo{ padding:clamp(40px,4.5vw,64px) 0 0; }
.sb-fases{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(20px,2.6vw,34px); }
.sb-fase{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(340px,38vw,500px); padding:clamp(26px,3vw,44px); overflow:hidden; }
.sb-fase--luz{ background:linear-gradient(160deg,#48433e,#1c1a18); }
.sb-fase--oscuro{ background:#000; }
.sb-fase--revela{ background:#0a0806; }
.sb-fase--revela::before{ content:""; position:absolute; left:50%; top:26%; width:120%; aspect-ratio:1; translate:-50% -50%; border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,200,.95) 0%,rgba(255,200,130,.35) 28%,transparent 62%); animation:sbRespira 5s ease-in-out infinite alternate; }
@keyframes sbRespira{ from{ scale:.85; opacity:.75; } to{ scale:1.08; opacity:1; } }
.sb-fase > *{ position:relative; }
.sb-fase__t{ position:absolute; top:clamp(20px,3vw,36px); left:clamp(26px,3vw,44px); font:400 clamp(56px,6.5vw,110px)/1 var(--f-display); }
.sb-fase--revela .sb-fase__t{ color:#1a1208; }
.sb-fase h3{ font:italic 400 clamp(28px,2.8vw,42px)/1 var(--f-display); }
.sb-fase p{ max-width:36ch; margin-top:12px; font-size:15px; line-height:1.6; opacity:.82; }
.sb-fase--oscuro h3, .sb-fase--oscuro p, .sb-fase--oscuro .sb-fase__t{ filter:blur(3px); transition:filter .7s; }
.sb-fase--oscuro:hover h3, .sb-fase--oscuro:hover p, .sb-fase--oscuro:hover .sb-fase__t{ filter:blur(0); }
.sb-fase__pista{ position:absolute; top:clamp(26px,3vw,44px); right:clamp(26px,3vw,44px); font:600 10px/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; opacity:.5; transition:opacity .5s; }
.sb-fase--oscuro:hover .sb-fase__pista{ opacity:0; }
@media (hover:none){ .sb-fase--oscuro h3, .sb-fase--oscuro p, .sb-fase--oscuro .sb-fase__t{ filter:none; } .sb-fase__pista{ display:none; } }

/* por qué */
.sb-cita{ max-width:18ch; margin:clamp(10px,2vw,20px) auto 0; text-align:center; font:400 clamp(40px,6vw,96px)/1 var(--f-display); letter-spacing:-.025em; }
.sb-cita em{ font-style:italic; text-shadow:0 0 40px rgba(255,236,200,.35); }
.sb-cifras{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(30px,4vw,56px); overflow:hidden; border-radius:22px; border:1px solid var(--linea); background:var(--linea); }
.sb-cifras div{ padding:clamp(20px,2.6vw,34px); background:var(--bg); text-align:center; }
.sb-cifras b{ display:block; font:400 clamp(30px,3.4vw,50px)/1 var(--f-display); }
.sb-cifras span{ display:block; margin-top:10px; font-size:13px; line-height:1.45; opacity:.7; }
.sb-porque__p{ max-width:60ch; margin:clamp(24px,3vw,40px) auto 0; text-align:center; font-size:16px; line-height:1.7; opacity:.78; }

/* el lugar a la luz de una linterna */
.sb-tira{ align-items:center; }
.sb-linterna img{ filter:brightness(1.3);
  -webkit-mask-image:radial-gradient(circle 190px at var(--fx,50%) var(--fy,50%),#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.2) 100%);
          mask-image:radial-gradient(circle 190px at var(--fx,50%) var(--fy,50%),#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.2) 100%); }
.sb-tira figure.sb-mini{ height:clamp(200px,20vw,300px); aspect-ratio:1; }

/* cierre */
.sb-final__in{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.sb-final .mk-tit{ font-size:clamp(40px,6vw,96px); }
.sb-final__datos{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; width:100%; margin:clamp(24px,3vw,40px) 0; padding:24px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); text-align:left; }

/* Otafuku en naranja y beige: portada, película y cierre en naranja; el ritual y las preguntas en beige */
.t-otafuku .ot-ritual, .t-otafuku .ot-faq{ --bg:#f6ebd8; --ink:#2b1710; --acc:#e2601c; --acc-ink:#fff8ee; --suave:rgba(226,96,28,.08); --linea:rgba(43,23,16,.16);
  background:var(--bg); color:var(--ink); }
.t-otafuku #lugar .btn--sol{ background:#f6ebd8; color:#c24a10; box-shadow:0 12px 30px -12px rgba(90,30,5,.5); }
.t-otafuku .mk-progreso{ background:#f6ebd8; }
.t-otafuku .mk-marquee{ background:#e2601c; color:#f6ebd8; border-bottom:0; }
.t-otafuku .mk-marquee i{ color:#2b1710; }

/* portada de Otafuku: minimalista editorial, beige, kanji gigante naranja detrás del título y foto pequeña */
.ot-hero{ --bg:#f6ebd8; --ink:#2b1710; --acc:#e2601c; --acc-ink:#fff8ee; --linea:rgba(43,23,16,.16);
  min-height:100vh; min-height:100svh; align-items:center; background:#f6ebd8; color:#2b1710; }
.ot-hero__in{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(104px,13vh,130px) var(--pad) clamp(40px,6vh,70px); }
.ot-hero__k{ color:#e2601c; }
.ot-hero .mk-hero__in{ opacity:1; translate:none; }
.ot-hero .mk-hero__logo{ height:clamp(30px,3vw,46px); margin:16px 0 0; filter:brightness(0) opacity(.88); }
.ot-kanji{ position:relative; display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.4vw,40px); margin:clamp(18px,2.6vw,34px) 0 clamp(10px,1.4vw,18px); pointer-events:none;
  font:400 clamp(44px,6vw,96px)/1 "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif; color:#e2601c; }
.ot-kanji span{ display:inline-block; opacity:0; translate:0 .2em; filter:blur(6px); transition:opacity 1.2s, translate 1.4s var(--out), filter 1.2s; transition-delay:calc(.5s + var(--c) * .2s); }
body.mk-ready .ot-kanji span{ opacity:1; translate:0 0; filter:blur(0); }
.ot-kanji i{ width:clamp(40px,7vw,110px); height:1px; background:#e2601c; opacity:.55; transform:scaleX(0); transition:transform 1.4s 1.1s var(--out); }
.ot-kanji i:first-child{ transform-origin:100% 50%; } .ot-kanji i:last-child{ transform-origin:0 50%; }
body.mk-ready .ot-kanji i{ transform:scaleX(1); }
.ot-hero h1{ position:relative; max-width:none; font-size:clamp(36px,4.2vw,70px); line-height:1.06; }
.t-otafuku .ot-hero h1 em{ font-style:normal; font-weight:500; color:#e2601c; }
.ot-hero .mk-hero__sub{ max-width:46ch; margin-inline:auto; opacity:.78; }
.ot-hero .mk-hero__cta{ justify-content:center; }
.ot-hero .btn--linea{ border:1px solid rgba(43,23,16,.35); color:#2b1710; }
.ot-hero .btn--linea:hover{ background:#2b1710; color:#f6ebd8; }
.ot-hero__foto{ position:relative; width:100vw; max-width:none; aspect-ratio:21/8; margin:clamp(34px,4.4vw,56px) 0 calc(-1 * clamp(40px,6vh,70px)); overflow:visible;
  clip-path:inset(0 50% 0 50%); transition:clip-path 1.5s 1s var(--out); }
body.mk-ready .ot-hero__foto{ clip-path:inset(0 0 -40px 0); }
.ot-hero__foto .mk-hero__bg{ translate:none; animation:none; scale:1; }
.ot-hanko{ position:absolute; z-index:2; right:var(--pad); bottom:-20px; display:grid; place-items:center; padding:11px 8px; border-radius:6px;
  background:#e2601c; color:#f6ebd8; writing-mode:vertical-rl; font:800 clamp(16px,1.4vw,22px)/1 "Shippori Mincho",serif; letter-spacing:.14em;
  box-shadow:inset 0 0 0 3px #e2601c, inset 0 0 0 5px #f6ebd8, 0 14px 30px -12px rgba(90,30,5,.5); rotate:-5deg; opacity:0; scale:1.4;
  transition:opacity .5s 2.2s, scale .8s 2.2s cubic-bezier(.3,1.6,.5,1); }
body.mk-ready .ot-hanko{ opacity:1; scale:1; }
.t-otafuku .mk-scroll{ color:#2b1710; }
.t-otafuku .mk-scroll i{ background:rgba(43,23,16,.2); }
.t-otafuku .mk-scroll i::after{ background:#2b1710; }
/* la marquesina separa la portada beige del ritual beige */
/* ---------- Otafuku, más japonés ---------- */
.t-otafuku .mk-hero h1, .t-otafuku .mk-tit, .t-otafuku .ot-paso h3, .t-otafuku .ot-faq__lista summary{ font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif; font-weight:500; letter-spacing:-.01em; }
.t-otafuku .mk-tit em{ font-style:normal; font-weight:800; color:#fff4e6; }
.t-otafuku .ot-ritual .mk-tit em, .t-otafuku .ot-faq .mk-tit em{ color:#e2601c; }
/* seigaiha: olas japonesas tenues sobre el naranja */
.t-otafuku #lugar::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-color:#e2601c;
  background-image:
    radial-gradient(circle at 100% 150%, #e2601c 24%, #ec7a40 24%, #ec7a40 28%, #e2601c 28%, #e2601c 36%, #ec7a40 36%, #ec7a40 40%, transparent 40%, transparent),
    radial-gradient(circle at 0 150%, #e2601c 24%, #ec7a40 24%, #ec7a40 28%, #e2601c 28%, #e2601c 36%, #ec7a40 36%, #ec7a40 40%, transparent 40%, transparent),
    radial-gradient(circle at 50% 100%, #ec7a40 10%, #e2601c 10%, #e2601c 23%, #ec7a40 23%, #ec7a40 30%, #e2601c 30%, #e2601c 43%, #ec7a40 43%, #ec7a40 50%, #e2601c 50%, #e2601c 63%, #ec7a40 63%, #ec7a40 71%, transparent 71%, transparent),
    radial-gradient(circle at 100% 50%, #ec7a40 5%, #e2601c 5%, #e2601c 15%, #ec7a40 15%, #ec7a40 20%, #e2601c 20%, #e2601c 29%, #ec7a40 29%, #ec7a40 34%, #e2601c 34%, #e2601c 44%, #ec7a40 44%, #ec7a40 49%, transparent 49%, transparent),
    radial-gradient(circle at 0 50%, #ec7a40 5%, #e2601c 5%, #e2601c 15%, #ec7a40 15%, #ec7a40 20%, #e2601c 20%, #e2601c 29%, #ec7a40 29%, #ec7a40 34%, #e2601c 34%, #e2601c 44%, #ec7a40 44%, #ec7a40 49%, transparent 49%, transparent);
  background-size:84px 42px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 70%); mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 70%); }
.t-otafuku #lugar{ position:relative; }
.t-otafuku #lugar::before{ -webkit-mask-image:linear-gradient(180deg,#000,transparent 55%); mask-image:linear-gradient(180deg,#000,transparent 55%); }
.t-otafuku #lugar > *{ position:relative; }
/* cada paso del ritual con su número en kanji relleno */
.t-otafuku .ot-paso{ padding-right:clamp(90px,10vw,160px); }
.t-otafuku .ot-paso::after{ content:attr(data-kanji); position:absolute; right:0; top:50%; translate:0 -50%; font:800 clamp(80px,9vw,150px)/1 "Shippori Mincho",serif;
  color:#e2601c; opacity:.14; transition:opacity .6s, scale .8s var(--out); pointer-events:none; }
.t-otafuku .ot-paso.on::after{ opacity:1; scale:1.06; }
.t-otafuku .ot-ritual__num{ font-weight:800; color:#e2601c; text-shadow:none; background:#f6ebd8; left:20px; bottom:20px; width:1.25em; height:1.25em; display:grid; place-items:center; border-radius:50%; font-size:clamp(56px,6vw,90px); line-height:1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .lx-hero__in{ grid-template-columns:1fr; }
  .lx-sello{ top:-40px; right:-6px; width:96px; }
  .lx-pizarra__cuerpo{ grid-template-columns:1fr; }
  .lx-pizarra__fotos{ order:-1; aspect-ratio:4/3; max-height:none; }
  .lx-horas{ grid-template-columns:1fr; }
  .lx-dorso{ grid-template-columns:1fr; }
  .lx-dorso::before{ display:none; }
  .lx-dorso dl{ margin-top:70px; }

  .vv-fila{ grid-template-columns:40px 1fr; gap:10px 16px; }
  .vv-fila__meta, .vv-fila__acc{ grid-column:2; }
  .vv-top__head .mk-lugar__nav{ display:none; }
  .vv-top__item{ width:72vw; }
  .vv-top__item--uno{ width:84vw; }
  .vv-top__n{ top:48vw; }
  .vv-top__item--uno .vv-top__n{ top:78vw; }
  .vv-sol{ height:auto; }
  .vv-sol__sticky{ position:relative; height:auto; min-height:100svh; padding:90px 0 60px; align-items:flex-end; }
  .vv-sol__arco{ height:55%; bottom:auto; top:0; }
  .vv-sol__in{ grid-template-columns:1fr; }
  .vv-sol__pasos{ grid-template-columns:1fr; }
  .vv-chef{ grid-template-columns:1fr; }
  .vv-chef__foto{ min-height:0; aspect-ratio:4/3; }
  .vv-pin{ height:auto !important; }
  .vv-pin__sticky{ position:relative; height:auto; padding:40px 0; }
  .vv-pin__pista{ width:auto; overflow-x:auto; transform:none !important; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .vv-pin__foto{ height:340px; scroll-snap-align:start; }
  .vv-pin__barra{ display:none; }
  .vv-banda{ grid-template-columns:1fr; }
  .vv-banda em{ display:none; }
  .vv-info__grid{ grid-template-columns:1fr 1fr; }

  .ot-hero__in{ padding-top:92px; padding-bottom:44px; }
  .ot-kanji{ font-size:44px; }
  .ot-hero h1{ font-size:clamp(30px,8.4vw,42px); }
  .ot-hero__foto{ aspect-ratio:4/3; }
  .ot-hanko{ font-size:14px; padding:8px 6px; }
  .t-otafuku .ot-paso{ padding-right:80px; }
  .ot-ritual__grid{ grid-template-columns:minmax(0,1fr); }
  .ot-ritual__grid > *{ min-width:0; }
  .t-otafuku .ot-paso::after{ font-size:64px; top:28px; translate:none; }
  .ot-paso .btn{ white-space:normal; }
  .ot-ritual__foto{ top:64px; z-index:3; height:40vh; }
  .ot-paso{ min-height:52vh; }
  .ot-pelicula figure{ height:clamp(240px,62vw,320px); }
  .ot-faq__grid{ grid-template-columns:1fr; }

  .sb-sentido{ grid-template-columns:34px 1fr; gap:8px 14px; }
  .sb-sentido p, .sb-sentido__img{ grid-column:2; }
  .sb-sentido__img{ display:block; width:92px; height:92px; object-fit:cover; border-radius:50%; filter:brightness(1.4); }
  .sb-luz{ display:none; }
  .sb-reserva{ grid-template-columns:1fr; }
  .sb-fases{ grid-template-columns:1fr; }
  .sb-fase{ min-height:300px; }
  .sb-cifras{ grid-template-columns:1fr; }
  .sb-final__datos{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  .lx-cuerda figure, .lx-sello svg{ animation:none; }
  .lx-platos li{ opacity:1; translate:none; }
  .vv-pin__foto img{ translate:none; }
}

/* =========================================================
   LA LA LA! — portada con video (2-oct-2026)
   El video es vertical (grabado en el local): va en una postal de
   pie, con una polaroid del cóctel asomando detrás.
   ========================================================= */
.lx-hero--video .lx-hero__in{ grid-template-columns:auto minmax(0,460px); justify-content:center; gap:clamp(40px,7vw,120px); }
.lx-postal--video{ width:min(420px, 82vw, calc(76svh * 9 / 16 + 28px)); justify-self:end; rotate:-3deg; animation:lxFlota 7s ease-in-out infinite alternate; }
.lx-postal--video .lx-postal__marco{ aspect-ratio:9/16; background:#2a2418; }
.lx-postal__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lx-postal--video .lx-postal__veil{ background:linear-gradient(180deg,rgba(20,10,4,.25) 0%,rgba(20,10,4,0) 22%,rgba(20,10,4,0) 52%,rgba(20,10,4,.8)); }
.lx-postal--video .lx-postal__txt .mk-hero__logo{ height:clamp(48px,4.4vw,72px); }
.lx-postal--video h1{ font-size:clamp(28px,2.7vw,42px); }
.lx-postal__extra{ position:absolute; left:-46%; bottom:10%; width:42%; margin:0; padding:9px 9px 34px; background:#fffdf6; rotate:-9deg;
  box-shadow:0 30px 50px -30px rgba(80,55,10,.6); }
.lx-postal__extra img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.lx-postal__extra figcaption{ position:absolute; left:0; right:0; bottom:6px; text-align:center; font:700 22px/1 var(--f-hand); color:#c28a0e; }
.lx-pausa{ position:absolute; z-index:4; top:14px; left:14px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:rgba(23,20,13,.45); color:#fff; font-size:12px; letter-spacing:.06em; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background-color .3s; }
.lx-pausa:hover{ background:rgba(23,20,13,.7); }
.lx-pausa:focus-visible{ outline:2px solid #ffd76a; outline-offset:2px; }
.lx-hero--video .lx-hero__sol{ left:auto; right:clamp(14px,4vw,70px); }
@keyframes lxFlota{ from{ translate:0 0; rotate:-3deg; } to{ translate:0 -10px; rotate:-1.6deg; } }
@media (max-width:1100px){ .lx-postal__extra{ display:none; } }
@media (max-width:900px){
  .lx-hero--video .lx-hero__in{ grid-template-columns:1fr; justify-items:center; text-align:left; }
  .lx-postal--video{ justify-self:center; width:min(380px, 84vw); }
  .lx-hero--video .lx-hero__nota{ max-width:420px; }
  .lx-hero--video .lx-hero__sol{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .lx-postal--video{ animation:none; } }