/* LA LETRA DE LOS TITULARES VIAJA CON LA WEB (24/9/2026).
   Optima sólo existe en Apple: en Android y en casi todo Windows los titulares
   caían en la serif genérica del sistema, y era lo que más abarataba la casa.
   Marcellus es de inscripción clásica, de piedra griega y romana, y va alojada
   aquí mismo: un único fichero de 14 KB, sin CDN, con `swap` para que el texto
   salga al instante con la de reserva y cambie en cuanto llega. */
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/marcellus-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --cal:#F5F1E6; --tinta:#322F8F; --egeo:#1F5FB0; --bugan:#C2456B; --miel:#E0A03C;
  --bg:var(--cal); --panel:#FFF; --ink:#141A33; --ink-soft:#5B6178;
  --line:rgba(20,26,51,.14); --brand:var(--tinta); --on-brand:#FFF;
  --photo-b:1.25; --photo-s:.86; --photo-c:.98; --wash:rgba(190,216,242,.34);
  --display:"Marcellus","Optima","Candara","Gill Sans MT","Gill Sans","Palatino Linotype",Palatino,Georgia,serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --meandro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 9.25H20M14.5 9.25V.75H3.25V6.75H10.25V3.75H7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");   /* la greca griega, usada como máscara */
  /* EL MOVIMIENTO, EN CUATRO NÚMEROS Y NO EN CUARENTA.
     Antes había .12, .2, .25, .26, .3, .4, .54, .68, .8, .9 y 1.1 repartidos a
     mano por el fichero, sin criterio: dos cosas que hacen lo mismo tardaban
     distinto según el día en que se escribieron.
     Los dos últimos NO son animación de entrada: son el cambio de luz y el
     grading de las fotos. Tienen nombre propio para que nadie los "optimice"
     creyendo que sobran — acortarlos convierte el amanecer en un parpadeo. */
  --dur-fast:.2s;      /* lo que sigue al dedo: pulsar, levantar */
  --dur-base:.25s;     /* el estado de un control cambia */
  --dur-slow:.4s;      /* algo entra o sale de la pantalla */
  --dur-entrada:.7s;   /* la coreografía del hero */
  --dur-luz:.9s;       /* la casa amanece y anochece */
  --dur-foto:1.1s;     /* el grading de las fotos, que va detrás de la luz */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;transition:background-color var(--dur-luz) var(--ease),color var(--dur-luz) var(--ease);overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
p,li{text-wrap:pretty}
p{margin:0 0 1em}
img,picture{display:block}
.wrap{width:min(1140px,100% - 40px);margin-inline:auto}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brand);
  font-weight:600;margin-bottom:14px;display:block;transition:color var(--dur-luz) var(--ease)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── mati (ojo griego), motivo de marca ─────────── */
.mati{width:1em;height:1em;flex:none}

/* ── entrada ────────────────────────────────────── */
#veil{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;
  transition:opacity var(--dur-luz) var(--ease),visibility var(--dur-luz)}
#veil.gone{opacity:0;visibility:hidden}
#veil .mati{width:54px;height:54px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.09);opacity:1}}

/* ── barra ──────────────────────────────────────── */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13px 20px;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
  transition:background-color var(--dur-luz) var(--ease),border-color var(--dur-luz) var(--ease),transform var(--dur-slow) var(--ease)}
.top.hide{transform:translateY(-100%)}
.mark{color:inherit;display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:17px;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.mark .mati{width:22px;height:22px}
.top nav{display:flex;gap:24px;font-size:13.5px}
.top nav a{color:inherit;text-decoration:none;opacity:.68;transition:opacity var(--dur-base);position:relative;padding-bottom:2px}
.top nav a:hover,.top nav a.on{opacity:1}
.top nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--brand)}
/* EL BOTÓN ES MAGNÉTICO (vista previa "elevar").
   La posición sale de tres variables: --mx/--my las mueve el puntero cuando se
   acerca (sólo con ratón; el JS las deja a 0 en táctil y con movimiento reducido)
   y --lift es el salto del :hover. Así el imán y el salto no se pisan, y todo
   viaja por transform (nunca top/left). */
.btn{font:inherit;font-size:13.5px;font-weight:600;border:0;cursor:pointer;padding:11px 21px;border-radius:999px;
  background:var(--bugan);color:#fff;text-decoration:none;display:inline-block;
  --mx:0px;--my:0px;--lift:0px;will-change:transform;
  transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0);
  transition:transform var(--dur-base) var(--ease),filter var(--dur-fast),box-shadow var(--dur-fast)}
.btn:hover{--lift:-2px;filter:brightness(1.08);box-shadow:0 12px 26px -12px var(--bugan)}
.btn:active{--lift:0px;transform:translate3d(var(--mx),var(--my),0) scale(.98);transition-duration:.08s}
.btn-ghost{background:transparent;color:inherit;border:1px solid currentColor;opacity:.82;box-shadow:none}
.btn-ghost:hover{opacity:1;box-shadow:none}
@media(max-width:900px){.top nav{display:none}}

/* EL BOTÓN DE RESERVAR LATE COMO UN CORAZÓN.
   Sólo los `.btn` que llevan a #reserva (la barra y el hero); el resto de
   botones no se tocan. El latido es lub-dub: dos pulsos seguidos y una pausa
   larga, en bucle (~1,8 s). Va por la propiedad `scale` —INDEPENDIENTE de
   `transform`— para no pisar el imán (--mx/--my) ni el salto del :hover (--lift),
   que siguen viajando por `transform`. El halo es un ::after que late con el
   mismo compás usando --bugan (el color de la CTA). Sólo scale/box-shadow;
   con `prefers-reduced-motion` el bloque global de abajo lo deja quieto. */
.btn[href="#reserva"]{position:relative;animation:latido 1.8s var(--ease) infinite}
.btn[href="#reserva"]::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;animation:latidoHalo 1.8s var(--ease) infinite}
/* Al pasar el puntero, el latido se aquieta: manda el gesto (salto + imán) y el
   clic no compite con la escala. La pastilla se queda a tamaño real. */
.btn[href="#reserva"]:hover,.btn[href="#reserva"]:active{animation-play-state:paused;scale:1}
.btn[href="#reserva"]:hover::after{animation-play-state:paused;box-shadow:none}
@keyframes latido{
  0%,34%,100%{scale:1}
  9%        {scale:1.05}   /* lub */
  17%       {scale:1}
  25%       {scale:1.04}   /* dub */
}
@keyframes latidoHalo{
  0%,34%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bugan) 0%,transparent)}
  9%        {box-shadow:0 0 20px 5px color-mix(in srgb,var(--bugan) 50%,transparent)}
  17%       {box-shadow:0 0 7px 1px  color-mix(in srgb,var(--bugan) 20%,transparent)}
  25%       {box-shadow:0 0 15px 4px color-mix(in srgb,var(--bugan) 42%,transparent)}
}
/* El bloque global de `prefers-reduced-motion` usa `*`, que NO alcanza a los
   pseudo-elementos: se apaga aquí el latido y su halo de forma explícita. */
@media(prefers-reduced-motion:reduce){
  .btn[href="#reserva"],.btn[href="#reserva"]::after{animation:none!important}
  .btn[href="#reserva"]{scale:1!important}
  .btn[href="#reserva"]::after{box-shadow:none!important}
}

/* ── hero ───────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding-top:66px;overflow:hidden}
.hero-photo{position:absolute;inset:-4%}
.hero-photo picture{width:100%;height:100%}
.hero-photo img{width:100%;height:100%;object-fit:cover;
  filter:brightness(var(--photo-b)) saturate(var(--photo-s)) contrast(var(--photo-c));
  transition:filter var(--dur-foto) var(--ease)}
.hero-photo::after{content:"";position:absolute;inset:0;background:var(--wash);mix-blend-mode:screen;transition:background-color var(--dur-foto) var(--ease)}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,
  color-mix(in srgb,var(--bg) 60%,transparent) 0%,transparent 26%,transparent 42%,
  color-mix(in srgb,var(--bg) 94%,transparent) 100%);transition:background var(--dur-foto) var(--ease)}
.hero-inner{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:36px 20px 0}
/* EL TEXTO DE LA PORTADA VA ENCIMA DE LA FOTO, y la foto tiene una ventana
   llena de luz justo detrás de la frase: sin nada debajo, la frase pequeña y
   "y los alcanzarás" se perdían. Un velo del color del fondo SÓLO donde está el
   texto (claro de día, oscuro de noche) y un halo en la letra; el resto de la
   foto queda como estaba, nítida. */
.hero-inner::before{content:"";position:absolute;inset:4% -8% -2%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 46%,color-mix(in srgb,var(--bg) 82%,transparent) 0%,
    color-mix(in srgb,var(--bg) 58%,transparent) 55%,transparent 82%);
  transition:background var(--dur-luz) var(--ease)}
.hero-inner .eyebrow,.hero h1,.kicker{text-shadow:0 0 14px color-mix(in srgb,var(--bg) 85%,transparent),0 0 3px color-mix(in srgb,var(--bg) 70%,transparent)}
.hero h1{font-size:clamp(2.6rem,8.4vw,5.9rem);letter-spacing:-.012em}
.hero h1 em{font-style:normal;display:block;color:var(--brand);transition:color var(--dur-luz) var(--ease)}
.kicker{font-size:clamp(.98rem,2.2vw,1.16rem);max-width:40ch;margin:22px auto 0;color:var(--ink-soft);transition:color var(--dur-luz) var(--ease)}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.status{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-size:13px;padding:8px 16px;
  border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 50%,transparent);backdrop-filter:blur(8px)}
.dot{width:8px;height:8px;border-radius:50%;background:#3FA96A;box-shadow:0 0 0 4px rgba(63,169,106,.2)}
.dot.shut{background:#B4443F;box-shadow:0 0 0 4px rgba(180,68,63,.18)}
.rise{opacity:0;transform:translateY(24px)}
/* LA COREOGRAFÍA DE ENTRADA, CON UN TOPE.
   Cada pieza tardaba .9s —la duración del cambio de luz, que se coló aquí por
   copiar— con escalón de .14s: la última, el dial, no acababa de aparecer hasta
   1,58 s. Demasiado para lo primero que ve alguien.
   Ahora entra en .7s con escalón de .09s: la primera pieza está a los 90 ms y
   la última acaba en 1,06 s. Se sigue notando el orden —el nombre, la frase, el
   dial— sin que nadie espere a que la casa termine de montarse. */
.ready .rise{opacity:1;transform:none;
  transition:opacity var(--dur-entrada) var(--ease),transform var(--dur-entrada) var(--ease)}
.ready .d1{transition-delay:.09s}.ready .d2{transition-delay:.18s}
.ready .d3{transition-delay:.27s}.ready .d4{transition-delay:.36s}.ready .d5{transition-delay:.45s}

/* ── dial de la luz ─────────────────────────────── */
.dial{position:relative;padding:0 20px 24px}
.dial-inner{width:min(760px,100%);margin-inline:auto;position:relative}
.dial svg{display:block;width:100%;height:auto;overflow:visible}
.arc-track{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 6}
.arc-live{fill:none;stroke:var(--brand);stroke-width:2;opacity:.5;transition:stroke var(--dur-luz) var(--ease)}
/* EL SOL SE COGE CON LA MANO.
   El input range sigue existiendo y sigue siendo el mando accesible —teclado y
   lector de pantalla—, pero ocupaba sólo una franja de 42 px abajo: quien
   intentaba arrastrar el sol, que es lo que la web te está pidiendo que hagas,
   no cogía nada. Ahora el propio sol se arrastra.
   `touch-action:none` en el sol y NO en todo el dial: si se pone arriba, la
   página deja de poder desplazarse con el dedo apoyado en esa zona. */
.orb{pointer-events:auto;cursor:grab;touch-action:none}
.dial.cogido .orb,.orb:active{cursor:grabbing}
.dial.cogido #orbCore{filter:drop-shadow(0 0 10px var(--miel))}
.orb circle{transition:filter var(--dur-base) var(--ease)}
.dial svg{pointer-events:none}   /* sólo el sol escucha, el resto del SVG no */
.dial input[type=range]{position:absolute;left:0;bottom:-6px;width:100%;height:42px;margin:0;opacity:0;cursor:grab}
.dial input[type=range]:active{cursor:grabbing}
.dial input:focus-visible ~ svg .orb circle:first-child{stroke:var(--bugan);stroke-width:3}
.dial-legend{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:6px;transition:color var(--dur-luz) var(--ease)}
.dial-now{position:absolute;top:-4px;left:50%;transform:translateX(-50%);text-align:center;font-family:var(--display);pointer-events:none}
.dial-now b{display:block;font-size:clamp(1.4rem,3.8vw,1.9rem);font-weight:400;letter-spacing:.02em}
.dial-now span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-family:var(--body)}
.dial-hint{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:11px;opacity:.85}

section{padding:100px 0;position:relative}
.head{max-width:58ch;margin-bottom:40px}
.head h2{font-size:clamp(2rem,5vw,3.3rem)}
.head p{margin-top:16px;color:var(--ink-soft);font-size:1.04rem;transition:color var(--dur-luz) var(--ease)}

/* ── el paseo ───────────────────────────────────── */
#paseo{padding-bottom:70px}
.paseo{position:relative;perspective:1400px;overflow:hidden;padding:14px 0 6px;
  cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.paseo.drag{cursor:grabbing}
.paseo::before,.paseo::after{content:"";position:absolute;top:0;bottom:0;width:11vw;z-index:5;pointer-events:none}
.paseo::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.paseo::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.track{display:flex;gap:18px;will-change:transform;transform-style:preserve-3d;padding-inline:6vw}
.panel{position:relative;flex:none;width:clamp(244px,29vw,392px);aspect-ratio:4/5;overflow:hidden;
  border-radius:14px;background:var(--line);will-change:transform,opacity;transform-origin:center;
  box-shadow:0 34px 66px -34px rgba(6,13,32,.62)}
.panel picture{width:126%;height:100%;margin-left:-13%;pointer-events:none}
.panel img{width:100%;height:100%;object-fit:cover;pointer-events:none;
  filter:brightness(calc(var(--photo-b)*.96)) saturate(var(--photo-s));transition:filter var(--dur-foto) var(--ease)}
.panel figcaption{position:absolute;left:0;right:0;bottom:0;padding:46px 16px 15px;color:#fff;
  background:linear-gradient(transparent,rgba(6,13,32,.82))}
.panel figcaption b{display:block;font-family:var(--display);font-size:1.24rem;font-weight:400;margin-bottom:3px}
.panel figcaption span{font-size:12px;opacity:.82;line-height:1.45;display:block}
/* EL OJO TIENE QUE PODER TOCARSE.
   Los paneles del paseo se echan hacia atrás en 3D (translateZ negativo, con
   perspectiva puesta en .paseo). Con eso, el punto donde SE VE el ojo no era el
   punto donde el navegador lo encontraba: comprobado barriendo la zona entera,
   no había ni un píxel alrededor del ojo que resolviera al botón. Se veía y no
   se abría.
   Sacarlo un milímetro hacia delante en su propio plano lo devuelve al frente
   del panel sin cambiar nada de lo que se ve. Y 44 px de zona tocable, que es
   la medida de un dedo: el dibujo sigue midiendo 20. */
.spot{position:absolute;border:0;padding:0;background:none;cursor:pointer;width:44px;height:44px;
  transform:translateZ(1px);z-index:4;
  display:grid;place-items:center;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.spot .mati{width:20px;height:20px;transition:transform var(--dur-base) var(--ease)}
.spot::before,.spot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  animation:ring 2.6s ease-out infinite}
/* Un segundo aro a media vuelta: el ojo late en dos ondas, como un radar. */
.spot::after{border-color:rgba(255,255,255,.5);animation-delay:1.3s}
.spot:hover .mati{transform:scale(1.28)}
@keyframes ring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.65);opacity:0}}
.spot-note{position:absolute;left:14px;right:14px;top:14px;background:rgba(255,255,255,.94);color:#141A33;
  font-size:12.5px;line-height:1.45;padding:11px 13px;border-radius:3px;opacity:0;transform:translateY(-6px);
  transition:opacity var(--dur-base),transform var(--dur-base);pointer-events:none}
.panel.open .spot-note{opacity:1;transform:none}
.paseo-hint{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;
  color:var(--ink-soft);margin-top:22px;transition:color var(--dur-luz) var(--ease)}
.paseo-hint svg{width:30px;height:9px}

@media(max-width:620px){
  /* En el móvil el paseo enseña una foto entera y la siguiente asomando, en vez
     de una foto a medias bajo el degradado del borde, que parecía un fallo. */
  .panel{width:min(72vw,300px)}
  .track{padding-inline:14vw;gap:14px}
  .paseo::before,.paseo::after{width:7vw}
}

/* ── manual de los sueños ───────────────────────
   Antes eran ocho cajas grises iguales, con borde a la izquierda: plantilla.
   Ahora es lo que es en la pared, una declaración: la palabra grande en la letra
   de la casa y el resto en cursiva, separadas por un filete. Enmarcado arriba y
   abajo por la greca, el meandro griego. */
.manual{background:transparent}
.tablas{display:grid;grid-template-columns:1fr;max-width:none;margin-top:10px;border-top:1px solid var(--line);
  transition:border-color var(--dur-luz) var(--ease)}
@media(min-width:760px){.tablas{grid-template-columns:1fr 1fr;column-gap:56px}}
.tabla{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:18px 0 16px;border-bottom:1px solid var(--line);
  transition:border-color var(--dur-luz) var(--ease)}
/* La plumilla que escribe cada precepto. Fuera de flujo (no empuja el texto);
   invisible en reposo, así con movimiento reducido no aparece. La tinta es
   --brand y la ranura --bg, de modo que también amanece y anochece. */
svg.pluma{position:absolute;left:-3px;top:5px;width:34px;height:auto;opacity:0;pointer-events:none;
  z-index:2;overflow:visible;transform:translate3d(-.4em,0,0)}
.pluma-cuerpo{fill:var(--brand);transition:fill var(--dur-luz) var(--ease)}
.pluma-slit{fill:none;stroke:var(--bg);stroke-width:1.6;stroke-linecap:round;transition:stroke var(--dur-luz) var(--ease)}
.pluma-vent{fill:var(--bg);transition:fill var(--dur-luz) var(--ease)}
.tabla b{font-family:var(--display);font-size:clamp(1.55rem,4.4vw,2.1rem);font-weight:400;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand);transition:color var(--dur-luz) var(--ease),letter-spacing var(--dur-slow) var(--ease)}
.tabla span{font-family:var(--display);font-style:italic;font-size:1.06rem;color:var(--ink-soft);transition:color var(--dur-luz) var(--ease)}
.tabla:hover b{letter-spacing:.1em}
.manual-cred{font-size:12.5px;color:var(--ink-soft);margin-top:26px;max-width:52ch}

/* La greca: un meandro griego pintado con el color de marca, que amanece y
   anochece como todo lo demás (es una máscara, el color lo pone --brand). */
.manual::before,.manual::after{content:"";position:absolute;left:0;right:0;height:10px;background:var(--brand);opacity:.4;
  transition:background-color var(--dur-luz) var(--ease);
  -webkit-mask:var(--meandro) repeat-x left center/20px 10px;
          mask:var(--meandro) repeat-x left center/20px 10px}
.manual::before{top:0}
.manual::after{bottom:0;transform:scaleY(-1)}

/* ── carta ──────────────────────────────────────── */
.carta{background:color-mix(in srgb,var(--panel) 58%,transparent);border-block:1px solid var(--line);
  transition:background-color var(--dur-luz) var(--ease),border-color var(--dur-luz) var(--ease)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-size:13px;border:1px solid var(--line);background:transparent;color:inherit;
  padding:9px 16px;border-radius:999px;cursor:pointer;position:relative;
  transition:background-color var(--dur-base),color var(--dur-base),border-color var(--dur-base),opacity var(--dur-base),transform var(--dur-base) var(--ease)}
.chip:hover{border-color:var(--brand);transform:translateY(-2px)}
.chip:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.chip.now::after{content:"ahora";position:absolute;top:-9px;right:8px;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--bugan);color:#fff;padding:2px 7px;border-radius:999px}
.chip.off{opacity:.4}
.filters{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0 30px;font-size:13px;color:var(--ink-soft)}
.toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.track-sw{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:background-color var(--dur-base);flex:none}
.track-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--panel);transition:transform var(--dur-base) var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle input:checked + .track-sw{background:var(--brand)}
.toggle input:checked + .track-sw::after{transform:translateX(16px)}
.toggle input:focus-visible + .track-sw{outline:2px solid var(--bugan);outline-offset:3px}
.search{font:inherit;font-size:13.5px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:inherit;width:210px;max-width:none}
.service-note{font-size:13px;color:var(--ink-soft);border-left:2px solid var(--brand);padding:3px 0 3px 14px;
  margin-bottom:30px;transition:color var(--dur-luz) var(--ease),border-color var(--dur-luz) var(--ease)}
/* LA CARTA NO ALARGA LA PÁGINA. Los platos viven en un panel de altura acotada
   ACORDEÓN por categoría: cada grupo es un botón-cabecera; por defecto RECOGIDO
   (sólo cabeceras → la página queda corta) y sólo se despliega lo que el usuario
   abre. Nada de caja con scroll; la altura la controla el acordeón. La cascada
   plato-a-plato (.cartaIn) se conserva al abrir. */
.menu-grid{display:flex;flex-direction:column;gap:10px}
.group{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:color-mix(in srgb,var(--panel) 42%,transparent);
  transition:border-color var(--dur-base) var(--ease),background var(--dur-luz) var(--ease)}
.cat-cab{width:100%;font:inherit;cursor:pointer;background:none;border:0;color:inherit;
  display:flex;align-items:center;gap:12px;padding:14px 16px;text-align:left}
.cat-tit{font:700 12px/1.25 var(--body);letter-spacing:.17em;text-transform:uppercase;color:var(--brand);
  transition:color var(--dur-luz) var(--ease)}
.cat-num{margin-left:auto;font-size:12px;color:var(--ink-soft)}
.cat-cab:hover .cat-tit{color:var(--ink)}
.cat-cab:focus-visible{outline:2px solid var(--bugan);outline-offset:-3px;border-radius:10px}
/* Signo +/−: la barra vertical desaparece (sólo transform) al abrir. */
.cat-mas{position:relative;width:13px;height:13px;flex:none}
.cat-mas::before,.cat-mas::after{content:"";position:absolute;inset:0;margin:auto;
  background:var(--brand);border-radius:2px;transition:transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease)}
.cat-mas::before{width:13px;height:2px}
.cat-mas::after{width:2px;height:13px}
.group.abierta .cat-mas::after{transform:scaleY(0);opacity:0}
.cat-platos{padding:0 16px 14px}
.cat-platos[hidden]{display:none}
.item{display:grid;grid-template-columns:1fr auto;gap:3px 14px;padding:7px 0;align-items:baseline;
  border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.item:first-child{border-top:0}
.item .n{font-size:15px}
.item .d{grid-column:1/-1;font-size:13px;color:var(--ink-soft);transition:color var(--dur-luz) var(--ease)}
.item .p{font-size:14px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;
  color:var(--brand);border-radius:4px;padding:1px 5px;margin-left:7px;vertical-align:1.5px}
.empty{padding:30px 4px;color:var(--ink-soft);font-size:15px}

/* ── reserva ────────────────────────────────────── */
.book{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:start}
@media(max-width:920px){.book{grid-template-columns:1fr}}
.field{margin-bottom:26px}
.field > label,.field > .lab{display:block;font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:11px;transition:color var(--dur-luz) var(--ease)}
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.zones{grid-template-columns:1fr}}
.zone{font:inherit;text-align:left;cursor:pointer;border:1px solid var(--line);color:inherit;border-radius:14px;
  padding:16px 15px;background:color-mix(in srgb,var(--panel) 44%,transparent);
  transition:border-color var(--dur-base),background-color var(--dur-base),transform var(--dur-base) var(--ease)}
.zone:hover{transform:translateY(-3px)}
.zone[aria-pressed=true]{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent);box-shadow:inset 0 0 0 1px var(--brand)}
.zone b{display:block;font-family:var(--display);font-size:1.16rem;font-weight:400;margin-bottom:5px}
.zone span{font-size:12.5px;color:var(--ink-soft);display:block;line-height:1.45}
input[type=date],input[type=text],input[type=tel],input[type=email],textarea{font:inherit;font-size:15px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--panel) 44%,transparent);color:inherit;max-width:250px;width:100%;
  transition:border-color var(--dur-base),box-shadow var(--dur-base)}
input:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
textarea{max-width:none;min-height:92px;resize:vertical;line-height:1.5}
[aria-invalid=true]{border-color:var(--bugan)}
.slots{display:flex;gap:8px;flex-wrap:wrap}
.slot{font:inherit;font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer;border:1px solid var(--line);
  background:transparent;color:inherit;padding:9px 15px;border-radius:10px;transition:border-color var(--dur-base),background-color var(--dur-base),color var(--dur-base)}
.slot:hover:not(:disabled){border-color:var(--brand)}
.slot[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.slot:disabled{opacity:.28;cursor:not-allowed;text-decoration:line-through}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stepper button{font:inherit;font-size:19px;line-height:1;width:44px;height:44px;border:0;cursor:pointer;
  background:transparent;color:inherit;transition:background-color var(--dur-fast)}
.stepper button:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.stepper .val{min-width:56px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums}
.ticket{position:sticky;top:92px;border:1px solid var(--line);border-radius:20px;padding:28px;
  background:color-mix(in srgb,var(--panel) 62%,transparent);box-shadow:0 22px 60px -34px rgba(15,26,60,.5);
  transition:background-color var(--dur-luz) var(--ease),border-color var(--dur-luz) var(--ease)}
.ticket h3{font-size:1.5rem;margin-bottom:6px}
.ticket .sub{font-size:13px;color:var(--ink-soft);margin-bottom:20px}
.line{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px}
.line span:first-child{color:var(--ink-soft)}
.line span:last-child{font-weight:600;text-align:right}
.ticket .btn{width:100%;text-align:center;margin-top:22px;padding:14px}
/* Ver la nota del HTML: en una columna, el resumen repetía el formulario que
   queda justo encima. Se deja sólo lo que aporta. */
@media(max-width:920px){
  .ticket{padding:22px}
  .ticket .line-eco{display:none}
  .ticket h3{font-size:1.25rem}
}
.ticket .btn:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none}
.msg{font-size:13px;margin-top:14px;color:var(--ink-soft);min-height:1.2em}
/* El mensaje conserva su color (verde=ok, buganvilla=aviso) pero se compone con
   --ink para que SIEMPRE contraste: el verde/rosa fijos se hundían sobre el
   panel del atardecer (bajaban a ~1,7:1 a las 20:30). Mezclado con la tinta viva
   amanece y anochece con la casa y se lee a cualquier hora. */
.msg.ok{color:color-mix(in srgb,#3D8A5C 40%,var(--ink));transition:color var(--dur-luz) var(--ease)}
.msg.warn{color:color-mix(in srgb,var(--bugan) 40%,var(--ink));transition:color var(--dur-luz) var(--ease)}
.msg a{color:inherit}

/* ── salón privado · constructor del presupuesto ──
   (La escena y el "dentro" inmersivo se estilan más abajo, junto a la puerta.) */
.step{margin-bottom:22px}
.step h4{font:600 11px/1 var(--body);letter-spacing:.19em;text-transform:uppercase;color:var(--brand);margin:0 0 11px;transition:color var(--dur-luz) var(--ease)}
.step h4 i{font-style:normal;opacity:.45;margin-right:8px}
.incluido{font-size:14.5px;margin:0}
.mini{font-size:12.5px;color:var(--ink-soft);margin-top:7px;transition:color var(--dur-luz) var(--ease)}
.picks{display:flex;gap:7px;flex-wrap:wrap}
.pick{font:inherit;font-size:13px;cursor:pointer;border:1px solid var(--line);background:transparent;color:inherit;
  padding:8px 13px;border-radius:999px;transition:background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
.pick:hover{border-color:var(--brand)}
.pick[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.pick small{display:block;font-size:9.5px;opacity:.6;letter-spacing:.09em;text-transform:uppercase;margin-top:1px}
.precio{font-family:var(--display);font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums;margin-top:4px}
.precio small{display:block;font:400 11.5px/1.5 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}
.normas{margin:24px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--ink-soft);line-height:1.55}
.normas li{padding-left:18px;position:relative;margin-bottom:7px}
.normas li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--brand);opacity:.5}
.presu{margin-top:18px;border:1px solid var(--line);border-radius:12px;padding:22px;
  background:color-mix(in srgb,var(--panel) 72%,transparent);transition:background-color var(--dur-luz) var(--ease)}
.presu .campos{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
@media(max-width:700px){.presu .campos{grid-template-columns:1fr}}
.presu .ancho{grid-column:1/-1}
.presu .zones{grid-template-columns:1fr 1fr}

/* ── visítanos ──────────────────────────────────── */
.visit{display:grid;grid-template-columns:1fr 1.2fr;gap:56px}
@media(max-width:900px){.visit{grid-template-columns:1fr;gap:36px}}
.hours{width:100%;border-collapse:collapse;font-size:13.5px}
.hours td{padding:9px 0;vertical-align:middle}
.hours td:first-child{width:36px;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.band{position:relative;height:22px;border-radius:2px;background:var(--line);overflow:hidden}
.band i{position:absolute;top:0;bottom:0;background:var(--brand);opacity:.6;border-radius:2px}
/* LA MARCA DE LA HORA SE MUEVE CON TRANSFORM, NO CON `left`.
   Animar `left` obliga al navegador a recolocar la página en cada fotograma;
   `transform` lo resuelve la tarjeta gráfica sin tocar el layout. Para que el
   porcentaje sea el del CARRIL y no el de la marca —que mide 2 px— la marca
   ocupa todo el ancho y lo que se pinta es su borde izquierdo. */
.band u{position:absolute;top:-3px;bottom:-3px;left:0;width:100%;
  transform:translateX(var(--p,0%));transition:transform var(--dur-base) var(--ease);
  pointer-events:none}
.band u::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--bugan)}
.hours tr.today td{font-weight:700}
.hours tr.today .band i{opacity:.95}
.scale{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-soft);letter-spacing:.1em;margin-top:6px}
.info p{font-size:15px}
.info a{color:var(--brand);text-underline-offset:3px;transition:color var(--dur-luz) var(--ease)}
footer{border-top:1px solid var(--line);padding:30px 0;font-size:12.5px;color:var(--ink-soft);transition:border-color var(--dur-luz) var(--ease)}
.foot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.legal-links{display:flex;gap:18px;flex-wrap:wrap}
.legal-links a{color:inherit;text-underline-offset:3px}

/* ── datos de quien reserva ─────────────────────── */
.campos-reserva{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:6px}
.campos-reserva .ancho{grid-column:1/-1}
.campos-reserva input{max-width:none}
.campos-reserva .field{margin-bottom:20px}
.field > label em{font-style:normal;text-transform:none;letter-spacing:0}
@media(max-width:560px){.campos-reserva{grid-template-columns:1fr}}
/* La casilla es de verdad (accesible con teclado y lector), sólo más grande. */
.acepto{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer;
  transition:color var(--dur-luz) var(--ease)}
.acepto input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--brand)}
.acepto a{color:inherit;text-underline-offset:3px}
.slots-nota{margin:0;font-size:14px;color:var(--ink-soft)}
.slots-nota a{color:inherit}
.normas{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:18px 0 0}
.presu .mini a{color:inherit}

/* ── páginas legales ────────────────────────────── */
.legal{padding:120px 0 70px}
.top .btn{white-space:nowrap}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2rem,6vw,3rem);margin:12px 0 28px}
.legal h2{font-size:1.45rem;margin:34px 0 12px}
.legal p,.legal li{font-size:15.5px;max-width:68ch}
.legal ul{padding-left:1.2em;margin:0 0 1em}
.legal a{color:var(--brand);text-underline-offset:3px}
.legal .ficha{border:1px solid var(--line);border-radius:3px;padding:18px 20px;margin:0 0 10px;
  background:color-mix(in srgb,var(--panel) 50%,transparent)}
.legal .ficha p{margin:0;font-size:15px}
.legal .act{font-size:12.5px;color:var(--ink-soft);margin-top:40px}



/* ── opiniones ──────────────────────────────────
   Sobrio a propósito: una nota, cinco estrellas y el recuento. Sin tarjetas de
   testimonios, que en una web de barrio se huelen a un kilómetro. Las estrellas
   se pintan con el color de MARCA, así que también amanecen y anochecen. */
.opinion{padding:36px 0}
.op-caja{display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;
  transition:border-color var(--dur-luz) var(--ease)}
.op-nota{display:flex;align-items:center;gap:14px;flex:none}
.op-cifra{font-family:var(--display);font-size:clamp(2rem,5vw,3.3rem);line-height:1;color:var(--brand);
  transition:color var(--dur-luz) var(--ease)}
.op-estrellas svg{display:block}
.op-txt{flex:1;min-width:260px}
.op-txt .eyebrow{margin-bottom:9px}
.op-txt p{max-width:52ch;margin-bottom:16px}
@media(max-width:560px){
  /* En el móvil la nota se pone encima del texto y no al lado: al lado deja el
     párrafo en una columna de cuatro palabras. */
  .op-caja{gap:18px}
  .op-nota{width:100%}
}


/* El grano de la cal: un ruido finísimo encima de todo, para que el fondo no
   sea un plano de ordenador. Fijo, sin eventos y sin fundidos caros. */
body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

.reveal{opacity:0;transform:translateY(20px)}
.reveal.in{opacity:1;transform:none;transition:opacity var(--dur-entrada) var(--ease),transform var(--dur-entrada) var(--ease)}
:focus-visible{outline:2px solid var(--bugan);outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation:none !important}
  html{scroll-behavior:auto}
  .reveal,.rise{opacity:1;transform:none}
}

/* ── el plano de sala ───────────────────────────
   Isométrico dibujado a mano en SVG: la misma vista que da un motor 3D, sin
   librería, sin build y sin peso. Todo el color sale de las variables vivas,
   así que el plano también amanece y anochece con la casa. */
.plano{margin-top:4px}
/* ── el plano de sala EN 3D (Three.js auto-alojado, `plano3d.js`) ──
   Sólo mesas y sillas, sin suelo ni paredes: el lienzo es transparente y deja
   ver el panel, así que también amanece y anochece con la casa. Se puede girar
   un poco arrastrando; el 2D en SVG queda de respaldo si Three.js no carga. */
.plano3d{width:100%;border-radius:3px;overflow:hidden;
  /* Un escenario greige suave (no blanco puro) para que las mesas de madera y
     las sillas blancas destaquen; sale de --panel y --ink, así que también
     amanece y anochece con la casa. */
  background:color-mix(in srgb,var(--ink) 13%,var(--panel));
  border:1px solid var(--line);cursor:grab;
  transition:background var(--dur-luz) var(--ease),border-color var(--dur-luz) var(--ease)}
.plano3d:active{cursor:grabbing}
.plano3d-lienzo{display:block;width:100%;height:auto;touch-action:none}
.pl-svg{display:block;width:100%;height:auto;overflow:visible}
.pl-suelo{fill:color-mix(in srgb,var(--panel) 70%,transparent);stroke:var(--line);stroke-width:1;
  transition:fill var(--dur-luz) var(--ease),stroke var(--dur-luz) var(--ease)}
.pl-sombra{fill:var(--ink);opacity:.07}
.pl-tabla{fill:var(--panel);stroke:var(--brand);stroke-width:1.4;
  transition:fill var(--dur-base) var(--ease),stroke var(--dur-luz) var(--ease)}
.pl-num{font-size:9px;fill:var(--ink-soft);text-anchor:middle;font-family:var(--body);
  transition:fill var(--dur-luz) var(--ease)}
.pl-mueble rect{fill:var(--line);stroke:none}
/* La mesa es un mando: se puede tocar, enfocar y elegir con el teclado. */
.pl-mesa{cursor:pointer}
.pl-mesa:hover .pl-tabla{fill:var(--brand-soft,color-mix(in srgb,var(--brand) 12%,var(--panel)))}
.pl-mesa:focus-visible{outline:none}
.pl-mesa:focus-visible .pl-tabla{stroke:var(--bugan);stroke-width:2.5}
.pl-mesa.on .pl-tabla{fill:var(--brand);stroke:var(--brand)}
.pl-mesa.on .pl-num{fill:var(--brand);font-weight:700}
.pl-pie{font-size:12.5px;color:var(--ink-soft);margin:6px 0 0;
  transition:color var(--dur-luz) var(--ease)}
.plano-nota{font-size:12.5px;color:var(--ink-soft);margin:8px 0 0;
  transition:color var(--dur-luz) var(--ease)}
#planoCampo .lab em{text-transform:none;letter-spacing:0;font-style:normal;opacity:.7}

/* ── aparición progresiva del formulario de reserva ──
   Cada paso aparece cuando se completa el anterior. El `hidden` lo pone el JS
   (`pasos()`); al descubrirse, un fundido corto. Con "reducir movimiento" el
   bloque global de arriba anula la animación y sólo aparece. */
@keyframes pasoEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.paso-in{animation:pasoEntra var(--dur-ap,.4s) var(--ease)}
/* `[hidden]` (display:none del UA) lo pisan reglas de autor más específicas
   como `.campos-reserva{display:grid}` o `.ticket`/`.acepto`; forzamos que un
   paso oculto NO se vea, sea cual sea su display. */
.paso[hidden]{display:none!important}

/* ── SALÓN PRIVADO · PINCHAS Y ENTRAS ────────────────────────────────
   La escena es una FOTO REAL de Santorini (Fira sobre la caldera) con un velo
   que sale de las variables vivas: de día casi no se nota, de noche oscurece con
   la casa (como el fondo atmosférico). La puerta azul del momento (--brand) va
   delante; al pincharla se ATRAVIESA la escena (zoom + fundido) descubriendo el
   interior; con "reducir movimiento" no hay zoom, sólo se descubre. Sólo se
   animan transform/opacity/filter. */
.salon-portal{position:relative;overflow:hidden;border-radius:20px;
  border:1px solid var(--line);transition:border-color var(--dur-luz) var(--ease)}
.salon-portal.hecho{overflow:visible;border:0;border-radius:0}
/* Una vez DENTRO, la escena cerrada se retira del todo: la sala ocupa el hueco. */
.salon-portal.hecho .santorini{display:none}
/* ── VUELO 3D: ATRAVESAR LA PUERTA ──
   Contenedor con perspectiva + un "mundo" en preserve-3d que AVANZA en Z. La
   pared (Santorini, con un hueco en el vano) va a Z=0 y el interior (la sala) a
   Z negativo grande: al avanzar la cámara, la pared crece y se sale por los
   bordes mientras el interior crece hasta llenar. Un solo movimiento continuo,
   sin corte. Sólo transform (GPU). */
.portal-vuelo{position:absolute;z-index:6;inset:0;overflow:hidden;border-radius:20px;
  perspective:1000px;perspective-origin:50% 62%;
  opacity:0;visibility:hidden;pointer-events:none;
  /* El fondo del vuelo es la propia sala, en penumbra: la profundidad se lee como
     "estás entrando en la habitación", no como una caja negra. */
  background:
    linear-gradient(color-mix(in srgb,var(--bg) 64%,#05070f),color-mix(in srgb,var(--bg) 74%,#05070f)),
    url(../../img/salon-privado.webp) center/cover}
.pv-mundo{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(0)}
.pv-pared,.pv-interior{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.pv-foto{width:100%;height:100%;object-fit:cover;display:block}
/* Interior lejano (se acerca hasta llenar). Viñeta para dar profundidad. */
.pv-interior{transform:translateZ(-900px)}
.pv-interior .pv-foto{object-position:50% 38%;
  filter:brightness(calc(var(--photo-b)*.9)) saturate(var(--photo-s))}
.pv-interior::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%,transparent 42%,color-mix(in srgb,var(--bg) 70%,#05070f) 100%)}
/* Pared con la puerta (Z=0). El hueco (máscara transparente en el vano) deja ver
   el interior de detrás; la hoja azul lo tapa al empezar y se abre al arrancar. */
.pv-pared{transform:translateZ(0);
  -webkit-mask:radial-gradient(22% 27% at 50% 62%,transparent 0 58%,#000 96%);
          mask:radial-gradient(22% 27% at 50% 62%,transparent 0 58%,#000 96%)}
.pv-pared .pv-foto{object-position:50% 42%;
  filter:brightness(calc(var(--photo-b)*.94)) saturate(var(--photo-s))}
.pv-hoja{position:absolute;left:38%;top:38%;width:24%;height:48%;
  transform-origin:left center;transform-style:preserve-3d;transform:translateZ(5px);
  border-radius:48% 48% 4px 4px/16% 16% 4px 4px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 86%,#fff),
    var(--brand) 46%,color-mix(in srgb,var(--brand) 76%,var(--ink)));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 26%,transparent),
             0 6px 16px -8px color-mix(in srgb,var(--ink) 60%,transparent)}
.pv-hoja::after{content:"";position:absolute;top:50%;right:8px;width:8px;height:8px;border-radius:50%;
  transform:translateY(-50%);background:color-mix(in srgb,var(--miel) 70%,var(--panel))}
.salon-portal.volando .portal-vuelo,
.salon-portal.volviendo .portal-vuelo{opacity:1;visibility:visible}

/* La escena (estado cerrado). Es el botón que se pincha para entrar. */
.santorini{position:relative;display:block;width:100%;padding:0;border:0;margin:0;
  height:clamp(348px,52vw,520px);overflow:hidden;border-radius:20px;
  background:none;font:inherit;color:inherit;cursor:pointer;
  transition:transform .8s var(--ease),opacity .8s var(--ease),filter .8s var(--ease)}
.santorini:focus-visible{outline:none}
.santorini:focus-visible .st-rotulo{outline:2px solid var(--bugan);outline-offset:3px}

/* Capas de la escena. z-index de fondo a frente: foto · velo · puerta · rótulo
   · flash. */
/* LA FOTO cubre el marco y sigue el grading de la casa (los mismos --photo-*
   que las demás fotos), así también amanece y anochece. */
.st-foto{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;
  filter:brightness(calc(var(--photo-b)*.94)) saturate(var(--photo-s));
  transition:filter var(--dur-foto) var(--ease)}
/* EL VELO ancla la foto a la hora: sale de --bg (el fondo del momento). De día
   es casi transparente; de noche oscurece con la casa. El degradado asienta la
   puerta y da contraste al rótulo, abajo. */
.st-velo{position:absolute;z-index:1;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 20%,transparent) 0%,
      transparent 34%,
      color-mix(in srgb,var(--bg) 30%,transparent) 76%,
      color-mix(in srgb,var(--bg) 54%,transparent) 100%),
    color-mix(in srgb,var(--bg) 12%,transparent);
  transition:background var(--dur-luz) var(--ease)}

/* La puerta: marco encalado, hueco cálido (--miel, como en la terraza) y hoja
   azul del momento. Se entreabre al pasar el puntero; al entrar, se abre. */
.st-puerta{position:absolute;z-index:4;left:50%;bottom:18%;transform:translateX(-50%);
  width:clamp(78px,12%,106px);height:clamp(124px,21%,172px);padding:7px;
  border-radius:50% 50% 4px 4px/20% 20% 4px 4px;perspective:680px;
  background:color-mix(in srgb,var(--panel) 94%,var(--brand));
  border:1.5px solid color-mix(in srgb,var(--ink) 20%,var(--line));
  box-shadow:0 16px 30px -16px color-mix(in srgb,var(--ink) 60%,transparent),
             inset 0 0 0 2px color-mix(in srgb,var(--ink) 10%,var(--panel));
  transition:background var(--dur-luz) var(--ease),box-shadow var(--dur-base) var(--ease)}
.st-vano{position:absolute;inset:7px;border-radius:48% 48% 3px 3px/18% 18% 3px 3px;
  background:radial-gradient(120% 92% at 50% 100%,
    color-mix(in srgb,var(--miel) 34%,var(--panel)),
    color-mix(in srgb,var(--brand) 16%,var(--panel)))}
.st-hoja{position:absolute;inset:7px;border-radius:48% 48% 3px 3px/18% 18% 3px 3px;
  transform-origin:left center;transform-style:preserve-3d;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 86%,#fff),
    var(--brand) 46%,color-mix(in srgb,var(--brand) 76%,var(--ink)));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 26%,transparent),
             0 5px 12px -8px color-mix(in srgb,var(--ink) 60%,transparent);
  transition:transform .6s var(--ease),background var(--dur-luz) var(--ease)}
.st-hoja::before{content:"";position:absolute;inset:15% 22%;border-radius:2px;
  background:
    linear-gradient(color-mix(in srgb,#fff 16%,transparent),color-mix(in srgb,#fff 16%,transparent)) center/100% 1px no-repeat,
    linear-gradient(color-mix(in srgb,var(--ink) 22%,transparent),color-mix(in srgb,var(--ink) 22%,transparent)) center/1px 100% no-repeat}
.st-hoja::after{content:"";position:absolute;top:50%;right:7px;width:7px;height:7px;border-radius:50%;
  transform:translateY(-50%);background:color-mix(in srgb,var(--miel) 70%,var(--panel));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 25%,transparent)}

/* El rótulo, siempre legible sobre la escena (pastilla de cal translúcida). */
.st-rotulo{position:absolute;z-index:6;left:50%;bottom:5%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;
  padding:8px 20px;border-radius:999px;white-space:nowrap;
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  border:1px solid var(--line);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:background var(--dur-luz) var(--ease),border-color var(--dur-luz) var(--ease)}
.st-rotulo b{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,3.4vw,1.3rem);
  color:var(--ink);transition:color var(--dur-luz) var(--ease)}
.st-rotulo em{font-style:normal;font-size:12px;color:var(--ink-soft);
  transition:color var(--dur-luz) var(--ease)}

/* ── DENTRO: la sala de reuniones inmersiva ──
   Foto real del salón a pantalla del bloque + velo que sigue la hora (--bg),
   y encima las fichas en acordeón (cada una sobre su pastilla translúcida para
   que se lean sobre la foto). Todo el color de variables vivas. */
.salon-interior{position:relative;overflow:hidden;border-radius:20px;
  border:1px solid var(--line);isolation:isolate;
  transition:border-color var(--dur-luz) var(--ease)}
.si-foto{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 38%;
  filter:brightness(calc(var(--photo-b)*.9)) saturate(var(--photo-s));
  transition:filter var(--dur-foto) var(--ease)}
.si-velo{position:absolute;z-index:1;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 46%,transparent) 0%,
      color-mix(in srgb,var(--bg) 30%,transparent) 40%,
      color-mix(in srgb,var(--bg) 52%,transparent) 100%),
    color-mix(in srgb,var(--bg) 30%,transparent);
  transition:background var(--dur-luz) var(--ease)}
.si-panel{position:relative;z-index:2;padding:clamp(20px,4vw,34px)}
.si-head{margin:14px 0 20px}
.si-head h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,4.6vw,2.4rem);
  line-height:1.06;margin:6px 0 8px;color:var(--ink);transition:color var(--dur-luz) var(--ease)}
.si-head p{font-size:14px;color:var(--ink-soft);margin:0;transition:color var(--dur-luz) var(--ease)}

.salon-volver{font:inherit;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;
  color:var(--ink);background:color-mix(in srgb,var(--panel) 74%,transparent);
  border:1px solid var(--line);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),transform var(--dur-fast) var(--ease)}
.salon-volver:hover{border-color:var(--brand);transform:translateX(-2px)}

/* Las fichas (acordeón). Cabecera siempre visible; el detalle se descubre. */
.sala-lista{display:flex;flex-direction:column;gap:10px}
.sala-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--panel) 74%,transparent);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background var(--dur-luz) var(--ease),border-color var(--dur-base) var(--ease)}
.sala-cab{width:100%;font:inherit;cursor:pointer;background:none;border:0;color:inherit;
  display:flex;align-items:center;gap:12px;padding:15px 18px;text-align:left}
.sala-tit{font-family:var(--display);font-size:1.16rem;color:var(--ink);
  transition:color var(--dur-luz) var(--ease)}
.sala-res{margin-left:auto;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;
  transition:color var(--dur-luz) var(--ease)}
/* El signo: una cruz que gira a "−" al abrir (sólo transform). */
.sala-mas{position:relative;width:14px;height:14px;flex:none}
.sala-mas::before,.sala-mas::after{content:"";position:absolute;inset:0;margin:auto;
  background:var(--brand);border-radius:2px;transition:transform var(--dur-base) var(--ease),opacity var(--dur-base) var(--ease)}
.sala-mas::before{width:14px;height:2px}
.sala-mas::after{width:2px;height:14px}
.sala-item.abierta .sala-mas::after{transform:scaleY(0);opacity:0}
.sala-cab:hover .sala-tit{color:var(--brand)}
.sala-cab:focus-visible{outline:2px solid var(--bugan);outline-offset:-3px;border-radius:12px}
.sala-det{padding:0 18px 18px}
.sala-det[hidden]{display:none}
.sala-det p{font-size:14px;color:var(--ink-soft);margin:0 0 10px;line-height:1.55;
  transition:color var(--dur-luz) var(--ease)}
.sala-det .normas{margin:0}
/* La ficha del presupuesto se destaca: es la acción principal. */
.sala-item-cta{background:color-mix(in srgb,var(--brand) 14%,var(--panel));
  border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.sala-cab-cta .sala-tit{color:var(--brand)}

@media (prefers-reduced-motion:no-preference){
  /* Reposo: la puerta invita con una sombra al pasar el puntero y se entreabre. */
  .santorini:hover .st-puerta{box-shadow:0 20px 36px -16px color-mix(in srgb,var(--ink) 62%,transparent)}
  .santorini:hover .st-hoja{transform:rotateY(-30deg)}
  .santorini:hover .st-rotulo em{color:var(--brand)}
  /* EL VUELO: la cámara avanza (el mundo va hacia +Z). La pared crece y pasa de
     largo; el interior crece de lejos a tamaño real. Un solo movimiento. */
  .salon-portal.volando .pv-mundo{animation:volarDentro 1.6s var(--ease) forwards}
  .salon-portal.volando .pv-hoja{animation:abreHoja .5s var(--ease) forwards}
  @keyframes volarDentro{from{transform:translateZ(0)} to{transform:translateZ(900px)}}
  @keyframes abreHoja{from{transform:translateZ(5px) rotateY(0)} to{transform:translateZ(5px) rotateY(-108deg)}}
  /* Volver: la cámara RETROCEDE y sales por la puerta (el mismo vuelo al revés). */
  .salon-portal.volviendo .pv-mundo{animation:volarFuera 1.15s var(--ease) forwards}
  .salon-portal.volviendo .pv-hoja{animation:cierraHoja .5s var(--ease) .55s forwards}
  @keyframes volarFuera{from{transform:translateZ(900px)} to{transform:translateZ(0)}}
  @keyframes cierraHoja{from{transform:translateZ(5px) rotateY(-108deg)} to{transform:translateZ(5px) rotateY(0)}}
  /* Al aterrizar, el interior aparece a tamaño real (sin salto: el vuelo ya lo
     dejó lleno; sólo un fundido cortísimo para el relevo). */
  .salon-interior{opacity:0;transition:opacity .25s var(--ease)}
  .salon-interior.dentro{opacity:1}
  /* Cada ficha entra con un fundido/deslizamiento al desplegarse. */
  .sala-item.abierta .sala-det{animation:fichaAbre .34s var(--ease) both}
  @keyframes fichaAbre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* ---- HERO EN VÍDEO (vista previa "elevar", 28/9/2026) ----
   El vídeo va SOBRE la foto (que queda de póster/respaldo). Mantiene el grading
   de la hora (--wash, .hero-photo::after) y el velo. Con "reducir movimiento"
   no se muestra: la foto real manda. */
.hero-photo video.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.1s var(--ease);
  pointer-events:none;
}
.hero-photo video.hero-video.on{opacity:1}
@media (prefers-reduced-motion: reduce){
  .hero-photo video.hero-video{display:none}
}

/* ============================================================================
   MÁS MOVIMIENTO — vista previa "elevar" (28/9/2026). Mismos colores y tokens
   (--ease, --dur-*), sólo transform/opacity/filter. Todo bajo
   prefers-reduced-motion: sin él, cada zona queda quieta y visible.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference){

  /* 1) EL MANUAL DE LOS SUEÑOS — cada precepto se ESCRIBE a mano, uno tras otro.
        Una plumilla recorre la palabra mientras la tinta aparece de izquierda a
        derecha (clip-path); acto seguido se escribe la frase en cursiva; cuando
        un precepto termina empieza el siguiente (cadena, no todos a la vez).
        Sólo clip-path/opacity/transform; la tinta sale de --brand, así que
        también amanece. --manual-slot es el hueco de cada precepto en la cadena. */
  :root{--manual-slot:.62s}

  /* La palabra: se descubre de izquierda a derecha. El clip deja un pelín de
     holgura (-.14em) para no comer los acentos ni el filo de las letras. */
  .tablas.reveal .tabla b{
    clip-path:inset(-.14em 100% -.18em -.04em);
    transition:clip-path .58s var(--ease),letter-spacing var(--dur-base) var(--ease),color var(--dur-luz) var(--ease);
    transition-delay:calc(var(--i,0) * var(--manual-slot)),0s,0s;
    will-change:clip-path;
  }
  .tablas.reveal.in .tabla b{clip-path:inset(-.14em -.16em -.18em -.04em)}

  /* La frase en cursiva: se escribe después, ya sin la pluma, como la tinta que
     sigue fluyendo. */
  .tablas.reveal .tabla span{
    clip-path:inset(-.14em 100% -.18em -.04em);
    transition:clip-path .5s var(--ease),color var(--dur-luz) var(--ease);
    transition-delay:calc(var(--i,0) * var(--manual-slot) + .40s),0s;
    will-change:clip-path;
  }
  .tablas.reveal.in .tabla span{clip-path:inset(-.14em -.12em -.18em -.04em)}

  /* La plumilla: entra, viaja por la palabra hasta su ancho real (--wpx, que
     mide el JS) y se retira. El recorrido usa la misma curva y duración que el
     descubrimiento de la palabra, así la punta va justo sobre el filo de tinta. */
  .tablas.reveal.in .tabla .pluma{
    animation:escribe .58s var(--ease) both;
    animation-delay:calc(var(--i,0) * var(--manual-slot));
  }
  @keyframes escribe{
    0%  {opacity:0; transform:translate3d(-.4em,0,0)}
    12% {opacity:1}
    84% {opacity:1}
    100%{opacity:0; transform:translate3d(var(--wpx,4em),0,0)}
  }

  /* 2) DATE UNA VUELTA (el paseo) — entrada de los paneles en cascada y un
        Ken Burns lentísimo en las fotos: cine, no una tira de tarjetas quieta.
        El box lleva .reveal pero no lo movemos a él: mandan los paneles. */
  #paseoBox.reveal{opacity:1; transform:none}
  #paseoBox .panel{
    opacity:0; transform:translateY(30px) scale(.98);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  #paseoBox.reveal.in .panel{opacity:1; transform:none}
  #paseoBox.reveal.in .track .panel:nth-child(2){transition-delay:.10s}
  #paseoBox.reveal.in .track .panel:nth-child(3){transition-delay:.20s}
  #paseoBox.reveal.in .track .panel:nth-child(4){transition-delay:.30s}
  #paseoBox.reveal.in .track .panel:nth-child(5){transition-delay:.40s}
  #paseoBox.reveal.in .track .panel:nth-child(6){transition-delay:.50s}
  .panel img{animation:kenburns 26s var(--ease) infinite alternate; will-change:transform}
  .panel:hover img{animation-play-state:paused; transform:scale(1.05)}
  @keyframes kenburns{from{transform:scale(1)} to{transform:scale(1.08)}}
  /* la flecha de "arrastra" da un empujoncito para invitar al gesto */
  .paseo-hint svg{animation:nudge 2.6s var(--ease) infinite}
  @keyframes nudge{0%,100%{transform:translateX(0)} 50%{transform:translateX(7px)}}

  /* 3) LA CARTA EN ACORDEÓN — las cabeceras de categoría entran en cascada al
        cambiar de momento/filtro; al ABRIR una categoría, SUS platos entran uno
        a uno (plato-a-plato). El innerHTML se rehace, así que se repite. */
  .menu-grid .group{animation:cartaIn .5s var(--ease) both}
  .menu-grid .group:nth-child(2){animation-delay:.05s}
  .menu-grid .group:nth-child(3){animation-delay:.10s}
  .menu-grid .group:nth-child(4){animation-delay:.15s}
  .menu-grid .group:nth-child(n+5){animation-delay:.20s}
  .group.abierta .cat-platos .item{animation:cartaIn .46s var(--ease) both}
  .group.abierta .cat-platos .item:nth-child(2){animation-delay:.05s}
  .group.abierta .cat-platos .item:nth-child(3){animation-delay:.09s}
  .group.abierta .cat-platos .item:nth-child(4){animation-delay:.13s}
  .group.abierta .cat-platos .item:nth-child(5){animation-delay:.17s}
  .group.abierta .cat-platos .item:nth-child(n+6){animation-delay:.21s}
  @keyframes cartaIn{from{opacity:0; transform:translateY(12px); filter:blur(4px)} to{opacity:1; transform:none; filter:blur(0)}}
}

/* ============================================================================
   ELEVAR · 2ª TANDA (28/9/2026) — más impacto, mismos colores y tokens.
   Sólo transform/opacity/filter/clip-path. Todo lo que se mueve va bajo
   no-preference; con movimiento reducido cada cosa queda quieta y visible.
   ============================================================================ */

/* Micro-interacción de la carta: el plato se enciende con la marca al pasar. */
.item .n{transition:color var(--dur-base) var(--ease)}
.item:hover .n{color:var(--brand)}

/* Ojo griego gigante, marca de agua editorial en la franja de opiniones. Es el
   mati de la casa (logo y favicon), muy tenue; late despacio. Sale de --brand,
   así que también amanece y anochece. */
.opinion{position:relative;overflow:hidden}
.opinion .wrap{position:relative;z-index:1}
.mati-mark{position:absolute;top:50%;right:-56px;width:clamp(180px,34vw,320px);aspect-ratio:1;
  transform:translateY(-50%);opacity:.06;pointer-events:none;z-index:0}
.mati-mark svg{width:100%;height:100%;display:block}

/* DUST / LUZ AMBIENTE — motas que derivan sobre las zonas oscuras (el paseo y el
   salón). `screen` hace que de día casi no se vean y de noche brillen, como la
   luz de las bombillas de la terraza. pointer-events:none, muy sutil. El JS las
   siembra (y NO las crea con movimiento reducido). */
.motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;mix-blend-mode:screen}
.motes b{position:absolute;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 50% 50%,var(--brand),transparent 68%)}
#paseo,#salon{position:relative}
#paseo .wrap,#paseo .paseo,#paseo .paseo-hint,#salon .wrap{position:relative;z-index:2}

@media (prefers-reduced-motion: no-preference){

  /* TITULARES DE CINE — cada cabecera de sección se desvela con un barrido de
     máscara (clip-path, izquierda→derecha) sobre la Marcellus grande, y la
     versalita y la entradilla suben escalonadas. El contenedor queda visible;
     mandan sus hijos. */
  .head.reveal{opacity:1;transform:none}
  .head.reveal .eyebrow,.head.reveal p{opacity:0;transform:translateY(20px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .head.reveal .eyebrow{transition-delay:.05s}
  .head.reveal p{transition-delay:.26s}
  .head.reveal.in .eyebrow,.head.reveal.in p{opacity:1;transform:none}
  .head.reveal h2{clip-path:inset(0 100% 0 0);transform:translateY(10px);will-change:clip-path;
    transition:clip-path 1s var(--ease) .12s,transform 1s var(--ease) .12s}
  .head.reveal.in h2{clip-path:inset(0 -0.16em -0.16em 0);transform:none}

  /* La marca de agua respira. */
  .mati-mark{animation:matiBreathe 9s ease-in-out infinite}
  @keyframes matiBreathe{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.055)}}

  /* Una mota: sube despacio, se enciende y se apaga. Duración y retardo se los
     pone el JS por variable, para que no vayan todas a la vez. */
  .motes b{animation:mote var(--d,32s) linear var(--delay,0s) infinite;will-change:transform,opacity}
  @keyframes mote{
    0%{opacity:0;transform:translate3d(0,34px,0) scale(.5)}
    12%{opacity:var(--o,.4)}
    50%{transform:translate3d(var(--dx,6px),-6px,0) scale(1)}
    88%{opacity:var(--o,.4)}
    100%{opacity:0;transform:translate3d(0,-46px,0) scale(.7)}
  }

  /* La carta reacciona al dedo/ratón. */
  .item:hover{transform:translateX(4px)}
  .item{transition:transform var(--dur-base) var(--ease)}
}

/* CARTA: al cambiar de momento, los platos salen desvanecidos uno a uno
   (entran con la cascada .cartaIn que ya existe). Bajo reduced-motion no aplica. */
@media (prefers-reduced-motion: no-preference){
  .menu-grid.saliendo .group,
  .menu-grid.saliendo .item{
    opacity:0; transform:translateY(-8px); filter:blur(3px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease);
  }
  .menu-grid.saliendo .group .item:nth-child(2){transition-delay:.03s}
  .menu-grid.saliendo .group .item:nth-child(3){transition-delay:.06s}
  .menu-grid.saliendo .group .item:nth-child(4){transition-delay:.09s}
  .menu-grid.saliendo .group .item:nth-child(5){transition-delay:.12s}
  .menu-grid.saliendo .group .item:nth-child(n+6){transition-delay:.15s}
  .menu-grid.saliendo .group:nth-child(2){transition-delay:.05s}
  .menu-grid.saliendo .group:nth-child(3){transition-delay:.10s}
  .menu-grid.saliendo .group:nth-child(n+4){transition-delay:.14s}
}

/* ===== FONDO ATMOSFÉRICO del local real (28/9) — la terraza con vida, detrás de
   TODO y muy tenue. El velo de color (--bg, que cambia con la hora) va encima:
   así el escenario cambia día/tarde/atardecer/noche y el vídeo no sobresale.
   Con "reducir movimiento" no hay vídeo: queda el color de fondo de siempre. ===== */
html{background:var(--bg)}
body{background:transparent}
.escena{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.escena-video{width:100%;height:100%;object-fit:cover;opacity:.55;
  transition:opacity var(--dur-foto) var(--ease)}
.escena::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:.84;
  transition:background-color var(--dur-luz) var(--ease), opacity var(--dur-luz) var(--ease)}
@media (prefers-reduced-motion: reduce){ .escena-video{display:none} }