/* =========================================================
   SUB-PÁGINAS DE MARCA — la experiencia, el lugar y la carta
   Usa el mismo sistema de style.css y cambia el tema por marca
   ========================================================= */

body.mk{ background:var(--bg); color:var(--ink); }
.mk-main{ position:relative; z-index:1; }

/* temas */
body.t-lalala{ --bg:#fdf7e7; --ink:#17140d; --acc:#f0be2e; --acc-ink:#17140d; --suave:rgba(23,20,13,.08); --linea:rgba(23,20,13,.16); }
body.t-viva{ --bg:#f6ebd8; --ink:#2b1710; --acc:#e2601c; --acc-ink:#fff8ee; --suave:rgba(226,96,28,.08); --linea:rgba(43,23,16,.16); }   /* beige + naranja */
body.t-otafuku{ --bg:#e2601c; --ink:#fff4e6; --acc:#f6ebd8; --acc-ink:#c24a10; --suave:rgba(255,244,230,.12); --linea:rgba(255,244,230,.34); }   /* naranja + beige */
/* amarillo + beige (la la la!) · negro (Sombras) */
body.t-sombras{ --bg:#050505; --ink:#fdf2e4; --acc:#fdf2e4; --acc-ink:#050505; --suave:rgba(253,242,228,.07); --linea:rgba(253,242,228,.18); }

.mk .sec-head{ border-color:var(--linea); margin-bottom:clamp(18px,2.4vw,30px); padding-bottom:14px; }
.mk .eyebrow{ color:var(--acc); }
.btn--acc{ background:var(--acc); color:var(--acc-ink); }
.btn--acc:hover{ filter:brightness(1.08); }
.btn--borde{ border:1px solid currentColor; color:inherit; }
.btn--borde:hover{ background:var(--ink); color:var(--bg); }

/* ---------- volver ---------- */
.mk-back{ position:fixed; z-index:101; left:var(--pad); bottom:22px; display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:999px; background:var(--ink); color:var(--bg);
  font:600 11px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; transition:transform .35s var(--out); }
.mk-back:hover{ transform:translateX(-3px); }

/* ---------- portada ---------- */
.mk-hero{ position:relative; min-height:92vh; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; color:#fff; }
.mk-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mk-hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,6,4,.55) 0%,rgba(10,6,4,.15) 40%,rgba(10,6,4,.9) 100%); }
.mk-hero__in{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(46px,7vw,90px); }
.mk-hero__logo{ height:clamp(46px,6vw,92px); width:auto; margin-bottom:24px; filter:brightness(0) invert(1) drop-shadow(0 8px 30px rgba(0,0,0,.45)); }  /* logo siempre en blanco */
.mk-hero__logo--lalala{ height:clamp(70px,9vw,140px); }
.mk-hero__logo--viva{ height:clamp(26px,3vw,44px); }
.mk-hero h1{ font:400 clamp(34px,5vw,80px)/.98 var(--f-display); letter-spacing:-.025em; max-width:16ch; }
.mk-hero h1 em{ font-style:italic; color:var(--acc); }
.mk-hero__sub{ max-width:520px; margin-top:18px; font-size:16px; line-height:1.6; opacity:.9; }
.mk-hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

/* ---------- datos rápidos ---------- */
.mk-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border-bottom:1px solid var(--linea); }
.mk-facts div{ background:var(--bg); padding:24px clamp(16px,2.4vw,32px); }
.mk-facts dt{ font:600 10px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--acc); }
.mk-facts dd{ margin-top:10px; font:400 clamp(17px,1.5vw,22px)/1.25 var(--f-display); }

/* ---------- secciones ---------- */
.mk-sec{ padding:clamp(40px,4.5vw,64px) 0; }   /* menos aire entre secciones */
.mk-sec--linea{ border-top:1px solid var(--linea); }
.mk-tit{ font:400 clamp(32px,4.4vw,68px)/.98 var(--f-display); letter-spacing:-.025em; }
.mk-tit em{ font-style:italic; color:var(--acc); }

.mk-exp{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px); align-items:center; }
.mk-exp p{ max-width:56ch; margin-top:20px; font-size:16.5px; line-height:1.7; opacity:.86; }
.mk-exp__media{ position:relative; }
.mk-exp__media img{ width:100%; border-radius:var(--r); }
.mk-exp__media figcaption{ margin-top:12px; font:500 12px/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; opacity:.6; }

.mk-puntos{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(24px,3vw,40px); }
.mk-punto{ padding:26px 24px; border-radius:var(--r); background:var(--suave); border:1px solid var(--linea); }
.mk-punto b{ display:block; font:400 clamp(22px,2vw,30px)/1.1 var(--f-display); }
.mk-punto span{ display:block; margin-top:10px; font-size:14px; line-height:1.55; opacity:.78; }
.mk-punto i{ display:block; margin-bottom:14px; font:600 10px/1 var(--f-ui); font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); }

/* ---------- el lugar: tira horizontal ---------- */
.mk-lugar__top{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.mk-lugar__nav{ display:flex; gap:10px; flex:none; }
.mk-lugar__nav button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--linea); color:var(--ink); font-size:17px; transition:background-color .3s, color .3s, border-color .3s; }
.mk-lugar__nav button:hover{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); }
.mk-lugar{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; cursor:grab;
  --borde:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));
  width:100vw; margin:clamp(20px,2.6vw,34px) 0 0 calc(50% - 50vw); padding:0 var(--borde) 6px; scroll-padding-inline:var(--borde); }
.mk-lugar::-webkit-scrollbar{ display:none; }
.mk-lugar.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.mk-lugar figure{ position:relative; flex:none; height:clamp(320px,32vw,470px); aspect-ratio:3/4; margin:0; border-radius:18px; overflow:hidden; scroll-snap-align:start; }
.mk-lugar figure.w{ aspect-ratio:16/10; }
.mk-lugar figure.h{ aspect-ratio:4/5; }
.mk-lugar img{ width:100%; height:100%; object-fit:cover; pointer-events:none; transition:transform 1.1s var(--out); }
.mk-nota{ max-width:640px; margin-top:22px; font-size:14px; line-height:1.6; opacity:.72; }
.mk-lugar figure:hover img{ transform:scale(1.06); }
.mk-lugar figcaption{ position:absolute; left:12px; bottom:12px; padding:7px 11px; border-radius:999px; background:rgba(10,6,4,.6);
  color:#fff; font:500 11px/1 var(--f-ui); letter-spacing:.06em; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

/* ---------- la carta ---------- */
.mk-cartas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:clamp(20px,2.6vw,34px); }
.mk-carta{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:320px; padding:24px; border-radius:var(--r); overflow:hidden; color:#fff; }
.mk-carta img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.1s var(--out); }
.mk-carta::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(10,6,4,.2),rgba(10,6,4,.88)); }
.mk-carta:hover img{ transform:scale(1.06); }
.mk-carta b{ font:400 26px/1.1 var(--f-display); }
.mk-carta span{ margin-top:8px; font:500 11px/1.4 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.mk-carta em{ position:absolute; top:20px; right:20px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); transition:background-color .3s, transform .4s var(--out); }
.mk-carta:hover em{ background:var(--acc); color:var(--acc-ink); transform:translate(3px,-3px); }
.mk-carta__idiomas{ position:relative; display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.mk-carta__idiomas a{ padding:10px 15px; border-radius:999px; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.12);
  font:600 10.5px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; transition:background-color .3s, color .3s, border-color .3s, transform .35s var(--out); }
.mk-carta__idiomas a:first-child{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); }
.mk-carta__idiomas a:hover{ transform:translateY(-2px); background:#fff; border-color:#fff; color:var(--marron); }
/* en escritorio las cartas van en una sola línea */
@media (min-width:901px){ .mk-cartas{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:1fr; } }
.mk-carta--txt{ color:var(--ink); background:var(--suave); border:1px solid var(--linea); }
.mk-carta--txt::after{ display:none; }
.mk-carta--txt ul{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.mk-carta--txt li{ padding:7px 12px; border-radius:999px; background:var(--acc); color:var(--acc-ink); font:500 11px/1 var(--f-ui); letter-spacing:.06em; }

/* ---------- info práctica ---------- */
.mk-info{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(30px,5vw,70px); align-items:start; }
.mk-datos{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:20px; }
.mk-datos h4{ font:600 10px/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin:0 0 10px; }
.mk-datos p{ font-size:15px; line-height:1.6; opacity:.86; }
.mk-cta-final{ padding:clamp(28px,4vw,44px); border-radius:var(--r); background:var(--suave); border:1px solid var(--linea); }
.mk-cta-final p{ margin:14px 0 22px; font-size:15px; line-height:1.6; opacity:.8; }

/* ---------- rayas de la la la! ---------- */
.mk-rayas{ height:22px; background:repeating-linear-gradient(90deg,var(--acc) 0 42px,var(--bg) 42px 84px); }
.mk-toldo{ height:70px; background:repeating-linear-gradient(90deg,var(--acc) 0 56px,#fffdf6 56px 112px);
  -webkit-mask:radial-gradient(circle 28px at 28px 42px,#000 98%,transparent 100%) 0 0/56px 70px repeat-x, linear-gradient(#000,#000) 0 0/100% 42px no-repeat;
          mask:radial-gradient(circle 28px at 28px 42px,#000 98%,transparent 100%) 0 0/56px 70px repeat-x, linear-gradient(#000,#000) 0 0/100% 42px no-repeat;
  filter:drop-shadow(0 6px 5px rgba(120,80,10,.18)); }
.mk-sol{ position:absolute; right:-40px; top:90px; width:clamp(110px,13vw,190px); animation:spin 32s linear infinite; z-index:3; }

/* ---------- pie ---------- */
.mk-foot{ border-top:1px solid var(--linea); padding:34px 0; }
.mk-foot .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font:500 10px/1.5 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.mk-foot a:hover{ color:var(--acc); }

@media (max-width:900px){
  .mk-facts{ grid-template-columns:repeat(2,1fr); }
  .mk-exp{ grid-template-columns:1fr; }
  .mk-puntos{ grid-template-columns:1fr; }
  .mk-lugar figure{ height:clamp(260px,68vw,360px); }
  .mk-lugar__nav{ display:none; }
  .mk-info{ grid-template-columns:1fr; }
  .mk-hero{ min-height:80svh; }
  /* en móvil estorba sobre el contenido: el menú lateral ya tiene "Inicio" */
  .mk-back{ display:none; }
}
@media (max-width:560px){
  .mk-datos{ grid-template-columns:1fr; }
  .mk-foot .wrap{ flex-direction:column; }
}

/* =========================================================
   ANIMACIONES Y MAGIA DE LAS SUB-PÁGINAS
   ========================================================= */

/* ---------- telón de entrada / salida con el logo de la marca ---------- */
body.t-lalala{ --logo:url(../assets/logo/lalala.png); --cortina-bg:#f0be2e; --cortina-filtro:brightness(0); }
body.t-viva{ --logo:url(../assets/logo/viva-word.svg); --cortina-bg:#e2601c; --cortina-filtro:brightness(0) invert(1); }
body.t-otafuku{ --logo:url(../assets/logo/otafuku.svg); --cortina-bg:#e2601c; --cortina-filtro:brightness(0) invert(1); }
body.t-sombras{ --logo:url(../assets/logo/sombras.svg); --cortina-bg:#030303; --cortina-filtro:brightness(0) invert(1); }
body.mk::before{ content:""; position:fixed; inset:0; z-index:400; pointer-events:none; background:var(--cortina-bg);
  transform-origin:50% 0; transition:transform .95s cubic-bezier(.76,0,.24,1); }
body.mk::after{ content:""; position:fixed; z-index:401; left:50%; top:50%; width:min(300px,60vw); height:110px; translate:-50% -50%; pointer-events:none;
  background:var(--logo) center/contain no-repeat; filter:var(--cortina-filtro); transition:opacity .35s, scale .7s var(--out); }
body.mk.mk-ready::before{ transform:scaleY(0); }
body.mk.mk-ready::after{ opacity:0; scale:.9; }
body.mk.mk-saliendo::before{ transform-origin:50% 100%; transform:scaleY(1); transition-duration:.6s; }
body.mk.mk-saliendo::after{ opacity:1; scale:1; transition-delay:.3s; }

/* ---------- barra de progreso ---------- */
.mk-progreso{ position:fixed; top:0; left:0; right:0; height:3px; z-index:130; background:var(--acc); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; }

/* ---------- portada: acercamiento lento, parallax y entrada escalonada ---------- */
.mk-hero__bg{ translate:0 calc(var(--hp,0) * 140px); animation:mkKen 24s ease-in-out infinite alternate; }
@keyframes mkKen{ from{ scale:1.16; } to{ scale:1.04; } }
.mk-hero__in{ translate:0 calc(var(--hp,0) * -80px); opacity:calc(1 - var(--hp,0) * 1.35); }
.mk-hero__logo{ opacity:0; translate:0 28px; scale:.94; transition:opacity 1s .45s, translate 1.3s .45s var(--out), scale 1.3s .45s var(--out); }
body.mk-ready .mk-hero__logo{ opacity:1; translate:0 0; scale:1; }
.pal{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .05em .14em; margin:0 -.05em -.14em; }
.pal > span{ display:inline-block; translate:0 112%; rotate:5deg; transform-origin:0 100%;
  transition:translate 1.1s var(--out), rotate 1.1s var(--out); transition-delay:calc(var(--i,0) * 55ms + var(--base,0ms)); }
.mk-hero h1{ --base:620ms; }
body.mk-ready .mk-hero .pal > span, .mk-tit.in .pal > span{ translate:0 0; rotate:0deg; }
.mk-hero .mk-hero__sub, .mk-hero .mk-hero__cta{ opacity:0; translate:0 24px; transition:opacity 1s, translate 1.2s var(--out); }
.mk-hero .mk-hero__sub{ transition-delay:1.05s; }
.mk-hero .mk-hero__cta{ transition-delay:1.2s; }
body.mk-ready .mk-hero .mk-hero__sub{ opacity:.9; translate:0 0; }
body.mk-ready .mk-hero .mk-hero__cta{ opacity:1; translate:0 0; }

.mk-scroll{ position:absolute; z-index:3; left:50%; bottom:22px; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#fff; font:600 9.5px/1 var(--f-ui); letter-spacing:.24em; text-transform:uppercase; opacity:0; transition:opacity 1s 1.7s; pointer-events:none; }
body.mk-ready .mk-scroll{ opacity:.85; }
.mk-scroll i{ position:relative; width:1px; height:42px; overflow:hidden; background:rgba(255,255,255,.3); }
.mk-scroll i::after{ content:""; position:absolute; left:0; top:0; width:1px; height:40%; background:#fff; animation:mkBaja 1.8s var(--out) infinite; }
@keyframes mkBaja{ from{ translate:0 -100%; } to{ translate:0 260%; } }
.mk-particulas{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.mk-hero__in{ z-index:2; }

/* ---------- apariciones ---------- */
.rv{ opacity:0; translate:0 46px; filter:blur(6px);
  transition:opacity .9s var(--ease), translate 1.1s var(--out), filter .9s var(--ease); transition-delay:calc(var(--d,0) * 90ms); }
.rv.in{ opacity:1; translate:0 0; filter:blur(0); }
.mk-lugar figure.rv img, .mk-carta.rv img, .mk-exp__media.rv img{ scale:1.18; transition:scale 1.7s var(--out), transform 1.1s var(--out); transition-delay:calc(var(--d,0) * 90ms); }
.rv.in img{ scale:1; }
.mk .sec-head{ position:relative; border-bottom-color:transparent; }
.mk .sec-head::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--linea); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.4s var(--out); }
.mk .sec-head.in::after{ transform:scaleX(1); }
.mk .sec-head .eyebrow{ opacity:0; translate:0 10px; transition:opacity .7s .15s, translate .9s .15s var(--out); }
.mk .sec-head.in .eyebrow{ opacity:1; translate:0 0; }

/* ---------- tarjetas con inclinación y brillo ---------- */
.mk-carta, .mk-punto{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.mk-carta.rv, .mk-punto.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), box-shadow .5s, border-color .5s; }
.mk-carta.is-tilt, .mk-punto.is-tilt{ transition:transform .12s linear, opacity .9s, translate 1.1s var(--out), filter .9s, box-shadow .5s, border-color .5s; }
.mk-punto{ position:relative; overflow:hidden; }
.mk-brillo{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.5),transparent 48%); }
.is-tilt .mk-brillo{ opacity:1; }

/* ---------- botones magnéticos ---------- */
.mk .btn, .mk-float, .mk-lugar__nav button{ translate:var(--mx,0px) var(--my,0px); }
.mk .btn{ transition:translate .35s var(--out), transform .35s var(--out), background-color .3s, color .3s, box-shadow .35s, opacity 1s; }

/* ---------- marquesina ---------- */
.mk-marquee{ overflow:hidden; padding:clamp(14px,1.8vw,22px) 0; border-bottom:1px solid var(--linea); }
.mk-marquee__track{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); width:max-content; animation:mkMarquee 42s linear infinite; }
.mk-marquee span{ font:italic 400 clamp(26px,3.4vw,50px)/1.1 var(--f-display); white-space:nowrap; }
.mk-marquee i{ font-style:normal; font-size:clamp(14px,1.4vw,20px); color:var(--acc); }
.mk-marquee:hover .mk-marquee__track{ animation-play-state:paused; }
@keyframes mkMarquee{ to{ transform:translateX(-50%); } }
.t-lalala .mk-marquee span:nth-of-type(even){ color:#c28a0e; }

/* ---------- botón flotante de reserva ---------- */
.mk-float{ position:fixed; z-index:110; left:50%; bottom:22px; display:flex; align-items:center; gap:14px; padding:7px 7px 7px 20px; border-radius:999px;
  background:color-mix(in srgb,var(--bg) 80%,transparent); color:var(--ink); border:1px solid var(--linea);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 22px 50px -22px rgba(0,0,0,.5);
  transform:translate(-50%,160%); opacity:0; transition:transform .7s var(--out), opacity .4s, translate .35s var(--out); }
.mk-float.on{ transform:translate(-50%,0); opacity:1; }
.mk-float__txt{ font:italic 400 17px/1.1 var(--f-display); white-space:nowrap; }
.mk-float__btn{ position:relative; overflow:hidden; padding:12px 18px; border-radius:999px; background:var(--acc); color:var(--acc-ink);
  font:600 11px/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }

/* ---------- el lugar: cursor "Arrastra" ---------- */
.mk-cursor{ position:fixed; z-index:120; left:-46px; top:-46px; width:92px; height:92px; border-radius:50%; display:grid; place-items:center; pointer-events:none;
  background:var(--acc); color:var(--acc-ink); font:600 10.5px/1 var(--f-ui); letter-spacing:.14em; text-transform:uppercase;
  scale:0; transition:scale .35s var(--out); box-shadow:0 14px 40px -14px rgba(0,0,0,.45); }
.mk-cursor.on{ scale:1; }
.mk-lugar.is-drag ~ .mk-cursor, body:has(.mk-lugar.is-drag) .mk-cursor{ scale:.8; }
@media (hover:hover) and (pointer:fine){ .mk-lugar{ cursor:none; scroll-snap-type:none; } }

/* ---------- la la la!: toldo que se mece, sol que gira, spritz flotando y vespa ---------- */
.mk-toldo{ transform-origin:50% 0; animation:mkToldo 3.6s ease-in-out infinite alternate; }
@keyframes mkToldo{ to{ transform:scaleY(1.14); } }
.t-lalala .mk-sol{ rotate:var(--giro,0deg); }
.mk-flota--spritz{ position:absolute; z-index:2; right:9%; bottom:13%; width:clamp(80px,8vw,130px); pointer-events:none;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.35)); opacity:0; transition:opacity 1s 1.5s; animation:mkFlotar 5.5s ease-in-out infinite; }
body.mk-ready .mk-flota--spritz{ opacity:1; }
@keyframes mkFlotar{ 0%,100%{ translate:0 0; rotate:8deg; } 50%{ translate:0 -18px; rotate:-5deg; } }
#lugar{ position:relative; }
.mk-vespa{ position:absolute; z-index:3; top:clamp(4px,1.2vw,16px); left:0; width:clamp(80px,8vw,130px); translate:-40vw 0; pointer-events:none;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.25)); }
.mk-vespa.go{ animation:mkVespa 7.5s cubic-bezier(.5,.1,.35,1) forwards; }
@keyframes mkVespa{
  0%{ translate:-40vw 0; rotate:0deg; }
  18%{ rotate:-3deg; }
  42%{ translate:46vw -5px; rotate:1deg; }
  56%{ translate:52vw 0; rotate:-2deg; }
  100%{ translate:125vw 0; rotate:0deg; }
}

/* ---------- Viva: resplandor del atardecer y título dorado ---------- */
.t-viva .mk-hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(55% 45% at 72% 30%,rgba(255,140,60,.38),transparent 70%), radial-gradient(40% 35% at 20% 15%,rgba(255,90,120,.18),transparent 70%);
  animation:mkResplandor 10s ease-in-out infinite alternate; }
@keyframes mkResplandor{ from{ opacity:.55; translate:-2% 2%; } to{ opacity:1; translate:3% -2%; } }
.t-viva .mk-hero h1 em .pal > span{ background:linear-gradient(90deg,#ff8a3d,#ffd08a 25%,#ff6f4e 50%,#ffd08a 75%,#ff8a3d); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:mkOro 5s linear infinite; }
@keyframes mkOro{ to{ background-position:-200% 0; } }

/* ---------- Otafuku: kanji en trazo y pasos que se encienden como brasas ---------- */
.mk-kanji{ position:absolute; z-index:2; right:clamp(16px,5vw,80px); top:50%; translate:0 calc(-50% + var(--hp,0) * 160px); writing-mode:vertical-rl;
  font:500 clamp(64px,9vw,150px)/1 "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; letter-spacing:.08em; color:transparent;
  -webkit-text-stroke:1px rgba(246,235,216,.42); pointer-events:none; opacity:0; transition:opacity 1.8s 1.1s; }
body.mk-ready .mk-kanji{ opacity:1; }
.t-otafuku .mk-puntos.in .mk-punto{ animation:mkBrasa 4.8s ease-in-out infinite; animation-delay:calc(var(--d,0) * 1.6s + 1.4s); }
@keyframes mkBrasa{
  0%,45%,100%{ box-shadow:0 0 0 0 rgba(226,96,28,0); border-color:var(--linea); }
  18%{ box-shadow:0 0 0 1px rgba(226,96,28,.6), 0 20px 60px -18px rgba(226,96,28,.6); border-color:rgba(226,96,28,.75); }
}

/* ---------- Sombras: la portada se ve solo donde apunta la linterna ---------- */
.t-sombras .mk-hero__bg{ filter:brightness(1.5) contrast(1.05);
  -webkit-mask-image:radial-gradient(circle 340px at var(--lx,65%) var(--ly,45%),#000 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.1) 100%);
          mask-image:radial-gradient(circle 340px at var(--lx,65%) var(--ly,45%),#000 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.1) 100%); }
.mk-pista{ position:absolute; z-index:3; right:var(--pad); bottom:26px; color:#fdf2e4; font:600 10px/1 var(--f-ui); letter-spacing:.22em; text-transform:uppercase;
  opacity:0; transition:opacity 1s 1.9s; animation:bob 3s ease-in-out infinite; pointer-events:none; }
body.mk-ready .mk-pista{ opacity:.6; }

/* ---------- ajustes móviles y movimiento reducido ---------- */
@media (max-width:900px){
  .mk-kanji, .mk-flota--spritz, .mk-scroll{ display:none; }
  .mk-float{ left:12px; right:12px; bottom:12px; justify-content:space-between; transform:translateY(160%); }
  .mk-float.on{ transform:translateY(0); }
  .mk-float__txt{ font-size:15px; white-space:normal; }
  .mk-pista{ bottom:auto; top:96px; }
}
/* movimiento reducido: sin partículas, cursor ni zoom continuo; las transiciones suaves se mantienen */
@media (prefers-reduced-motion:reduce){
  .mk-particulas, .mk-cursor{ display:none; }
  .mk-hero__bg{ animation:none; scale:1.04; }
}
@media (max-width:900px){
  .rv{ filter:none; }
  .grain{ display:none; }
}