/* ═══ WEB DE CATAS · KNAYA ═══════════════════════════════════════════
   Un solo mundo a propósito: la noche de Knaya (carbón y hueso) y el oro
   del logo como ÚNICO color, reservado para lo que se mueve: la línea del
   recorrido, los soles, los números y el botón de reservar.

   LETRAS
   · Anton (--display): titulares. La letra de la casa.
   · Jost (--texto): cuerpo y rótulos. Geométrica de la familia de la Futura,
     la pareja clásica de las Didot (moda, vino). Sustituye a Manrope, que
     Roman veía «muy básica» (19-sep).
   · Bodoni Moda (--invitado): SOLO números (romanos, años, precio, ficha) y
     la línea de etiqueta del vino en cursiva. Nada de números huecos.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --carbon:#0E1712; --carbon-2:#09100C; --carbon-3:#16211B;
  --hueso:#EDE7D8; --hueso-2:rgba(237,231,216,.72); --hueso-3:rgba(237,231,216,.38); --linea:rgba(237,231,216,.13);
  --oro:#F8C020; --oro-2:#C98A12; --oro-claro:#FFE3A3; --oro-3:#8a5d0a;
  /* los mismos oros en canales, para las transparencias: rgba(var(--oro-rgb),.35) */
  --oro-rgb:248,192,32; --oro2-rgb:201,138,18; --claro-rgb:255,227,163;
  --display:Anton, "Arial Narrow", Impact, sans-serif;
  --texto:Jost, "Century Gothic", Futura, "Trebuchet MS", system-ui, sans-serif;
  --invitado:"Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", "Times New Roman", serif;
  /* pan de oro: empieza y acaba en el mismo tono para poder correr en bucle sin costura */
  --pan:linear-gradient(90deg,#C98A12,#F8C020 24%,#FFE3A3 42%,#F8C020 60%,#C98A12);
  --gutter:clamp(18px,4.2vw,64px);
  --simbolo:url("img/simbolo.png");
  --knaya:url("img/knaya.png");
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--carbon)}
body{margin:0;color:var(--hueso);font:400 17px/1.55 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.gutter{padding-inline:var(--gutter)}
.k{font:500 11.5px/1.3 var(--texto);letter-spacing:.2em;text-transform:uppercase}
.oro{color:var(--oro)}
.h2{font:400 clamp(40px,min(5.6vw,11vh),84px)/.94 var(--display);text-transform:uppercase;margin:0;letter-spacing:.005em}
/* titulares que suben línea a línea desde detrás de una máscara */
.lineas .l{display:block;overflow:hidden;padding:.13em 0 .04em;margin-top:-.13em}
.lineas .l span{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* los números del invitado, y el pan de oro VIVO con el que se pintan: un reflejo que no para de cruzarlos */
.num{font-family:var(--invitado);font-style:normal;font-weight:500;font-variant-numeric:lining-nums;letter-spacing:-.01em}
.pan{background:var(--pan) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-inline:.04em .08em;margin-inline:-.04em -.08em;animation:pan 6.5s linear infinite}
@keyframes pan{to{background-position:220% 0}}

/* ── el símbolo del invitado y la marca Knaya, como máscaras ── */
.sol{display:block;-webkit-mask:var(--simbolo) center/contain no-repeat;mask:var(--simbolo) center/contain no-repeat}
.knaya{display:inline-block;height:20px;aspect-ratio:1129/1023;background:var(--hueso);
  -webkit-mask:var(--knaya) left center/contain no-repeat;mask:var(--knaya) left center/contain no-repeat}
.capa-base{background:var(--hueso)}
.capa-oro{background:linear-gradient(135deg,var(--oro-2),var(--oro) 45%,var(--oro-claro) 60%,var(--oro) 75%,var(--oro-2))}
/* el reflejo del pan de oro: una franja de luz que cruza el grabado */
.capa-brillo{background:linear-gradient(110deg,transparent 42%,rgba(var(--claro-rgb),.0) 44%,rgba(var(--claro-rgb),.95) 50%,rgba(var(--oro-rgb),.0) 56%,transparent 58%);
  background-size:320% 100%;background-position:130% 0;animation:reflejo 7s cubic-bezier(.5,0,.3,1) infinite}
@keyframes reflejo{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}

/* ── el grano: película, no plástico ── */
.grano{position:fixed;inset:-40%;z-index:95;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grano 1s steps(5) infinite}
@keyframes grano{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* ── el polvo de oro: por encima de las escenas, por debajo del telón y del marco ── */
.polvo{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none;mix-blend-mode:screen;opacity:0}

/* ═══ UMBRAL ═══ */
#umbral{position:fixed;inset:0;z-index:100;background:var(--carbon-2);display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding-block:max(28px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-bottom))}
/* la firma de la noche, bien visible: el logo de la casa × el nombre del invitado */
.umbral-arriba{display:flex;align-items:center;gap:clamp(14px,2vw,22px);color:var(--hueso-2)}
.umbral-arriba .knaya{height:clamp(40px,7vh,62px)}
.umbral-arriba span{font:300 clamp(18px,3vh,26px)/1 var(--texto);letter-spacing:0;color:var(--oro)}
.umbral-arriba span:last-child{font:400 clamp(26px,4.4vh,40px)/1 var(--display);letter-spacing:.05em;color:var(--hueso)}
.umbral-sol{all:unset;cursor:pointer;position:relative;align-self:center;width:min(58vmin,540px);aspect-ratio:1;display:block;border-radius:50%}
.umbral-sol .sol{position:absolute;inset:0}
.umbral-aura{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--oro-rgb),.2),rgba(var(--oro2-rgb),.07) 55%,transparent 72%);animation:respira 5s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:1;transform:scale(1.03)}}
.umbral-sol .capa-base{opacity:.38;transition:opacity .6s}
.umbral-sol .capa-oro{opacity:0}
.umbral-sol .capa-brillo{opacity:.8}
.umbral-sol:hover .capa-base,.umbral-sol:focus-visible .capa-base{opacity:.6}
.umbral-sol:focus-visible{outline-offset:12px}
.umbral-abajo{display:grid;justify-items:center;gap:10px;text-align:center}
.umbral-abajo .k{color:var(--hueso)}
.umbral-pista{font-size:14px;color:var(--hueso-3);letter-spacing:.06em}

/* ═══ MARCO ═══ */
.marco-arriba{position:fixed;top:0;left:0;right:0;z-index:80;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter) 18px;pointer-events:none;opacity:0}
.marco-arriba>*{pointer-events:auto}
/* un fundido detrás de los marcos: lo que pasa por debajo no les pisa la letra */
.marco-arriba::before,.marco-abajo::before{content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none}
.marco-arriba::before{top:0;bottom:-26px;background:linear-gradient(rgba(14,23,18,.92),rgba(14,23,18,.6) 55%,rgba(14,23,18,0))}
.marco-abajo::before{bottom:0;top:-30px;background:linear-gradient(rgba(14,23,18,0),rgba(14,23,18,.62) 45%,rgba(14,23,18,.94))}
.marco-marca{justify-self:start;display:flex}
.marco-marca .knaya{height:30px}
.marco-centro{color:var(--hueso-2)}
.marco-centro b{color:var(--hueso);font-weight:600}
.marco-reservar{justify-self:end;font:600 11.5px var(--texto);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--oro);
  border:1px solid rgba(var(--oro-rgb),.5);padding:11px 16px;transition:background .3s,color .3s}
.marco-reservar:hover{background:var(--oro);color:var(--carbon)}
.marco-abajo{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--gutter) calc(18px + env(safe-area-inset-bottom,0px));color:var(--hueso-3);pointer-events:none;opacity:0}
.marco-escena{display:flex;align-items:center;gap:10px}
.marco-escena i{width:28px;height:1px;background:var(--oro)}
.marco-escena b{color:var(--hueso);font-weight:600}

/* ═══ EL TELÓN ═══════════════════════════════════════════════════════
   Terciopelo del verde de la casa con ORLA de oro. Los pliegues van en
   porcentaje del paño: al recogerse (scaleX) se aprietan solos, como tela.
   Dos capas por lado: `.cortina` la mueve el scroll (cerrar) y `.cortina-pano`
   la mueve el tiempo (abrir). Así ninguna animación le pisa el valor a la otra. */
.cortinas{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.cortina{position:absolute;top:-2%;bottom:-2%;width:51%;will-change:transform}
.cortina.izq{left:0;transform-origin:0 50%}
.cortina.der{right:0;transform-origin:100% 50%}
.cortina-pano{position:absolute;inset:0;will-change:transform;box-shadow:0 0 90px rgba(0,0,0,.75)}
.cortina.izq .cortina-pano{transform-origin:0 50%}
.cortina.der .cortina-pano{transform-origin:100% 50%}
.cortina-tela{position:absolute;inset:0;background-color:#0C1610;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0) 16%,rgba(0,0,0,0) 72%,rgba(0,0,0,.7)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.2) 2.2%,rgba(255,232,180,.05) 4.6%,rgba(255,232,180,.17) 6.2%,rgba(255,232,180,.05) 7.6%,rgba(0,0,0,.28) 10%,rgba(0,0,0,.62) 12.5%)}
/* la orla: un galón de oro en el canto que se encuentra en el centro */
.cortina-orla{position:absolute;top:0;bottom:0;width:9px;
  background:linear-gradient(180deg,var(--oro-3),var(--oro) 18%,var(--oro-claro) 34%,var(--oro-2) 52%,var(--oro) 70%,var(--oro-claro) 84%,var(--oro-3)) 0 0/100% 220%;
  box-shadow:0 0 22px rgba(var(--oro-rgb),.35);animation:orla 9s linear infinite}
.cortina-orla::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(var(--oro-rgb),.4)}
@keyframes orla{to{background-position:0 220%}}
.cortina.izq .cortina-orla{right:0}.cortina.izq .cortina-orla::after{right:16px}
.cortina.der .cortina-orla{left:0}.cortina.der .cortina-orla::after{left:16px}
/* la luz de la sala, que se cuela por la rendija cuando el telón se abre */
.cortina-luz{position:absolute;inset:0;opacity:0;
  background:radial-gradient(38% 90% at 50% 50%,rgba(var(--claro-rgb),.5),rgba(var(--oro-rgb),.2) 38%,rgba(var(--oro2-rgb),.07) 62%,transparent 80%)}
.cortina-cartel{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
/* el sol hace de broche sobre la costura; detrás del cartel, un fondo que tapa la orla para que el título se lea limpio */
.cartel-in{display:grid;justify-items:center;gap:clamp(12px,2.4vh,22px);text-align:center;padding:clamp(28px,6vh,60px) clamp(40px,9vw,150px);
  background:radial-gradient(closest-side,rgba(9,16,12,.97) 58%,rgba(9,16,12,.6) 80%,rgba(9,16,12,0))}
.cartel-in .sol{width:clamp(84px,16vh,150px);aspect-ratio:1;background:linear-gradient(135deg,var(--oro),var(--oro-claro) 50%,var(--oro));filter:drop-shadow(0 0 26px rgba(var(--oro-rgb),.5))}
.cartel-in b{font:400 clamp(38px,min(6vw,11vh),92px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.cartel-in .num{font-size:clamp(18px,3vh,26px);letter-spacing:.34em;color:var(--oro);padding-left:.34em}

/* ═══ I · PORTADA ═══ centrada y elástica: cabe en un visor bajo sin tener que desplazarse */
.portada{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:center;
  padding-block:calc(74px + env(safe-area-inset-top,0px)) calc(60px + env(safe-area-inset-bottom,0px))}
.portada-cielo{position:absolute;top:50%;right:calc(-1 * min(26vmin,260px));width:min(112vmin,1120px);aspect-ratio:1;translate:0 -50%;will-change:transform}
/* capa 1 · los rayos de luz, que giran despacio por detrás */
.portada-rayos{position:absolute;inset:-22%;border-radius:50%;opacity:.9;animation:gira 160s linear infinite;
  background:
    repeating-conic-gradient(from 3deg,rgba(var(--oro-rgb),.085) 0 1.1deg,transparent 1.1deg 11deg),
    repeating-conic-gradient(from 0deg,rgba(var(--claro-rgb),.05) 0 .5deg,transparent .5deg 7deg);
  -webkit-mask:radial-gradient(closest-side,transparent 34%,#000 50%,transparent 86%);mask:radial-gradient(closest-side,transparent 34%,#000 50%,transparent 86%)}
@keyframes gira{to{transform:rotate(360deg)}}
/* capa 2 · el sol grabado, que gira con el scroll */
.portada-sol{position:absolute;inset:0}
.portada-sol .sol{position:absolute;inset:0}
.portada-sol::before{content:"";position:absolute;inset:4%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--oro-rgb),.2),rgba(var(--oro2-rgb),.1) 45%,transparent 72%)}
.portada-sol .capa-base{opacity:.26}
/* la lumbre: oro en la cara, que se apaga hacia la punta de los rayos */
.portada-sol .capa-lumbre{background:radial-gradient(closest-side,var(--oro-claro) 0,var(--oro) 26%,rgba(var(--oro2-rgb),.85) 48%,rgba(var(--oro2-rgb),.28) 72%,transparent 92%);opacity:.78}
.portada-sol .capa-brillo{opacity:.7;animation-duration:9s}
.portada-texto{position:relative;z-index:2;display:grid;gap:clamp(12px,2.4vh,24px);justify-items:start;will-change:transform}
.portada-texto>*{max-width:min(660px,54vw)}
.titulo{font:400 clamp(42px,min(5.9vw,12.4vh),96px)/.92 var(--display);text-transform:uppercase;margin:0;letter-spacing:.008em}
.bajada{margin:0;font-size:clamp(16px,min(1.3vw,2.7vh),19.5px);line-height:1.5;color:var(--hueso-2);text-wrap:pretty}
.portada-texto .bajada{max-width:min(46ch,54vw)}
.ficha{margin:clamp(2px,1.4vh,14px) 0 0;display:flex;flex-wrap:wrap;gap:12px 0}
.ficha div{position:relative;padding:12px 30px 0 0;margin-right:30px;display:grid;gap:3px}
.ficha div:last-child{margin-right:0}
.ficha div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linea);transform-origin:left}
.ficha dt{font:500 10.5px var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--hueso-3)}
.ficha dd{margin:0;font:500 clamp(17px,min(1.4vw,3vh),21px)/1.2 var(--invitado);font-variant-numeric:lining-nums;white-space:nowrap}
.portada-pista{position:absolute;z-index:2;right:var(--gutter);bottom:calc(50px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;color:var(--oro)}
.portada-pista i{position:relative;width:1px;height:26px;background:var(--hueso-3);overflow:hidden}
.portada-pista i::after{content:"";position:absolute;left:-1px;top:-6px;width:3px;height:6px;background:var(--oro);animation:bajar 1.8s ease-in-out infinite}
@keyframes bajar{to{transform:translateY(38px)}}

/* ═══ II · LA HISTORIA ═══ */
.leyenda{position:relative;height:100vh;height:100svh;overflow:hidden}
.leyenda-frases{position:absolute;inset:0;display:grid;align-items:center}
.frase{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(24px,5vw,90px);align-items:center;max-width:1280px;width:100%;margin:0 auto}
/* la marca: el número grande en pan de oro y, si la lleva, su palabra debajo en cursiva */
.frase-marca{display:grid;justify-items:end;justify-self:end;text-align:right;gap:.04em;font-size:clamp(72px,min(10vw,22vh),172px)}
.frase-marca b{font:500 1em/.9 var(--invitado);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;
  background:var(--pan) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding:.04em .04em .06em;animation:pan 6.5s linear infinite}
.frase-marca small{font:italic 400 .24em/1.1 var(--invitado);color:var(--hueso-2);padding-right:.2em}
/* el texto que se va leyendo, con su mecha de oro al lado: crece a la vez que la lectura */
.frase-cuerpo{position:relative;padding-left:clamp(18px,2.2vw,34px)}
.frase-mecha{position:absolute;left:0;top:.3em;bottom:.3em;width:1px;background:var(--linea)}
.frase-mecha i{position:absolute;inset:0;background:linear-gradient(var(--oro-2),var(--oro) 70%,var(--oro-claro));transform-origin:50% 0;transform:scaleY(0);box-shadow:0 0 12px rgba(var(--oro-rgb),.6)}
.frase-mecha i::after{content:"";position:absolute;left:-3px;bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--oro-claro);box-shadow:0 0 14px 3px rgba(var(--oro-rgb),.8)}
.frase-texto{margin:0;font:400 clamp(21px,min(2.55vw,5.4vh),39px)/1.26 var(--texto);letter-spacing:-.005em;max-width:30ch;text-wrap:pretty}
.frase-texto .w{display:inline-block;opacity:.16}

/* ═══ III · EL RECORRIDO ═══ */
.recorrido{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--carbon)}
.mundo{position:absolute;top:0;left:0;height:100%;will-change:transform}
.ruta{position:absolute;inset:0;overflow:visible}
.ruta-guia{fill:none;stroke:var(--hueso-3);stroke-width:1;stroke-dasharray:1 9;stroke-linecap:round}
.ruta-halo{fill:none;stroke:var(--oro);stroke-width:7;opacity:.45}
.ruta-oro{fill:none;stroke:url(#oro);stroke-width:2;stroke-linecap:round}
.nodo{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1px solid var(--hueso-3);display:grid;place-items:center;transition:border-color .5s}
.nodo .sol{width:50px;height:50px;background:var(--hueso-3);transition:background .5s}
.nodo.encendido{border-color:var(--oro)}
.nodo.encendido .sol{background:var(--oro)}
.estallido{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.estallido .aro{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1.5px solid var(--oro);opacity:0}
.estallido .rayo{position:absolute;left:-1px;top:0;width:2px;height:26px;background:linear-gradient(var(--oro-claro),var(--oro) 60%,transparent);opacity:0;transform-origin:50% 0}
.estallido .chispa{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--oro-claro);box-shadow:0 0 8px var(--oro);opacity:0}

/* la ficha de la parada: el romano a la izquierda; debajo, el vino y el pase lado a lado */
.parada{position:absolute;isolation:isolate;width:min(720px,86vw);display:grid;grid-template-columns:clamp(54px,5.4vw,78px) minmax(0,1fr);column-gap:clamp(14px,1.6vw,22px);opacity:0}
/* un velo de carbón detrás: la línea y el sol grande nunca le pisan el texto */
.parada::before{content:"";position:absolute;inset:-46px -64px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,23,18,.92),rgba(14,23,18,.7) 62%,rgba(14,23,18,0))}
.p-num{grid-column:1;grid-row:1/span 2;justify-self:end;font:500 clamp(44px,min(4.6vw,8vh),72px)/.9 var(--invitado);letter-spacing:-.02em;margin-top:.12em;transform-origin:70% 60%}
.p-cab{grid-column:2;display:grid;gap:clamp(5px,1vh,8px)}
.p-lugar{color:var(--oro)}
.p-lugar span{color:var(--hueso-3);margin-left:10px}
.p-vino{font:400 clamp(32px,min(4vw,6.6vh),58px)/.95 var(--display);text-transform:uppercase;margin:-.13em 0 0;padding:.13em 0 .04em;letter-spacing:.005em;text-wrap:balance;overflow:hidden}
.p-vino span{display:block}
.p-tipo{margin:0;font:italic 400 clamp(16px,min(1.35vw,2.9vh),19px)/1.3 var(--invitado);color:var(--hueso-2)}
.p-raya{grid-column:2;height:1px;background:var(--linea);margin-top:clamp(10px,2vh,16px);transform-origin:0 50%}
.p-cuerpo{grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);padding-top:clamp(10px,2vh,16px)}
.p-col{display:grid;gap:7px;align-content:start}
.p-col .k{color:var(--hueso-3);font-size:10.5px}
.p-col p{margin:0;font-size:clamp(15px,2.5vh,16.5px);line-height:1.5;color:var(--hueso-2);text-wrap:pretty}
/* el pase, como en una carta: cada plato en su línea, con un sol pequeño por viñeta */
.p-platos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,.9vh,7px)}
.p-platos li{position:relative;padding-left:20px;font-size:clamp(15px,2.55vh,17px);line-height:1.34;font-weight:500;color:var(--hueso);text-wrap:balance}
.p-platos li::before{content:"";position:absolute;left:0;top:.26em;width:11px;height:11px;background:var(--oro);
  -webkit-mask:var(--simbolo) center/contain no-repeat;mask:var(--simbolo) center/contain no-repeat}
.p-col .p-nota{font-size:14.5px;color:var(--hueso-3);font-style:italic}

.cabeza{position:absolute;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;will-change:transform;filter:drop-shadow(0 0 10px rgba(var(--oro-rgb),.65))}
.cabeza-halo{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--oro-rgb),.34),rgba(var(--oro-rgb),0))}
.cabeza-sol{position:absolute;inset:0;background:linear-gradient(135deg,var(--oro-claro),var(--oro) 50%,var(--oro-2))}

.final-brillo{position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(60% 70% at 62% 50%,rgba(var(--oro2-rgb),.26),rgba(var(--oro2-rgb),.06) 55%,transparent 75%)}
.final-sol{position:absolute;top:50%;left:62%;width:min(92vmin,900px);aspect-ratio:1;margin:calc(-1 * min(46vmin,450px)) 0 0 calc(-1 * min(46vmin,450px));opacity:0;pointer-events:none}
.final-sol .sol{position:absolute;inset:0;opacity:.2}
.recorrido-pie{position:absolute;left:50%;bottom:calc(54px + env(safe-area-inset-bottom,0px));translate:-50% 0;display:grid;justify-items:center;gap:6px;pointer-events:none}
.progreso{list-style:none;margin:0;padding:0;display:flex;align-items:baseline;gap:24px;font:500 17px/1 var(--invitado);letter-spacing:.02em;color:var(--hueso-3)}
.progreso li{position:relative;transition:color .5s,text-shadow .5s}
.progreso li+li::before{content:"";position:absolute;left:-16px;top:50%;width:8px;height:1px;background:var(--linea)}
.progreso li.actual{color:var(--oro);text-shadow:0 0 14px rgba(var(--oro-rgb),.55)}
.recorrido-pista{font:400 13px var(--texto);letter-spacing:.06em;color:var(--hueso-3);white-space:nowrap;transition:opacity .5s}

/* ═══ IV · QUIÉN OS RECIBE ═══ */
.recibe{padding-block:clamp(110px,16vh,180px) clamp(70px,10vh,120px);display:grid;gap:clamp(40px,6vh,64px)}
.recibe-cab,.reserva-cab{display:grid;gap:18px;max-width:1280px;width:100%;margin:0 auto}
.anfitriones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);max-width:1280px;width:100%;margin:0 auto}
.anfitrion{display:grid;gap:8px;padding-top:22px;border-top:1px solid var(--linea);align-content:start}
.anfitrion .k{color:var(--oro)}
.anfitrion b{font:400 clamp(30px,3.4vw,50px)/1 var(--display);text-transform:uppercase;font-weight:400}
.anfitrion span:last-child{color:var(--hueso-2);font-size:16.5px;max-width:46ch}
/* proveedores: fijos, solo el logo, todos pintados en hueso por máscara */
.proveedores{display:grid;gap:22px;max-width:1280px;width:100%;margin:0 auto}
.proveedores>.k{color:var(--hueso-3)}
.prov-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));border-block:1px solid var(--linea)}
.prov{display:grid;place-items:center;min-height:clamp(120px,14vw,168px);padding:26px clamp(14px,2.2vw,34px)}
.prov+.prov{border-left:1px solid var(--linea)}
.prov i{display:block;width:100%;max-width:190px;height:calc(62px * var(--alto,1));background:var(--hueso);opacity:.82;transition:opacity .4s;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.prov:hover i{opacity:1}
.prov b{font:400 clamp(22px,2.4vw,34px)/1 var(--display);text-transform:uppercase;text-align:center;color:var(--hueso-2)}

/* ═══ V · LA RESERVA ═══ */
.reserva{padding-block:clamp(90px,14vh,160px) clamp(90px,12vh,140px);display:grid;gap:clamp(36px,6vh,60px)}
.reserva-bajada{margin:0;max-width:44ch;color:var(--hueso-2)}
.pase-escena{max-width:1280px;width:100%;margin:0 auto;display:grid;gap:28px;perspective:1400px}
.pase{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);background:var(--carbon-3);border:1px solid rgba(var(--oro-rgb),.35);
  overflow:hidden;transform-style:preserve-3d;will-change:transform}
.pase::before{content:"";position:absolute;inset:8px;border:1px solid rgba(var(--oro-rgb),.16);pointer-events:none}
/* el reflejo del pase: una mancha de luz dorada que sigue al ratón, como una entrada con tinta metálica */
.pase-foil{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;mix-blend-mode:screen;
  background:radial-gradient(460px circle at var(--mx,70%) var(--my,30%),rgba(var(--claro-rgb),.2),rgba(var(--oro-rgb),.07) 38%,transparent 62%)}
.pase:hover .pase-foil{opacity:1}
.pase-izq{padding:clamp(24px,4vw,52px);display:grid;gap:14px;align-content:start}
.pase-izq .k{color:var(--oro)}
.pase-titulo{font:400 clamp(34px,4vw,60px)/.94 var(--display);text-transform:uppercase;margin:0}
.pase-fecha{margin:0;color:var(--hueso-2)}
.pase-incluye{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15.5px;color:var(--hueso-2)}
.pase-incluye li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--oro);margin-right:9px;vertical-align:2px}
.pase-der{position:relative;padding:clamp(24px,4vw,52px);display:grid;gap:12px;align-content:center;justify-items:start;border-left:1px dashed rgba(var(--oro-rgb),.35)}
/* muescas de troquel sobre la línea de corte */
.pase-der::before,.pase-der::after{content:"";position:absolute;left:-13px;width:24px;height:24px;border-radius:50%;background:var(--carbon);border:1px solid rgba(var(--oro-rgb),.35)}
.pase-der::before{top:-13px}.pase-der::after{bottom:-13px}
.pase-precio{display:flex;align-items:flex-start;gap:.1em;font:500 clamp(84px,9vw,132px)/.86 var(--invitado);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.pase-precio small{font:500 .38em/1 var(--invitado);color:var(--oro);margin-top:.2em}
.pase-plazas{color:var(--hueso-2)}
.boton{display:inline-flex;align-items:center;gap:12px;margin-top:10px;background:var(--oro);color:var(--carbon);font:600 12.5px var(--texto);letter-spacing:.18em;text-transform:uppercase;padding:17px 24px;text-decoration:none;position:relative;overflow:hidden}
.boton::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:260% 100%;background-position:130% 0;transition:background-position .9s}
.boton:hover::after{background-position:-30% 0}
.boton[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.pase-cuenta{color:var(--hueso-3)}
.pase-sol{position:absolute;right:-70px;top:-70px;width:260px;height:260px;background:var(--oro);opacity:.07;pointer-events:none}
.condiciones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px;font-size:14.5px;color:var(--hueso-3)}

.pie{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;padding-block:36px calc(90px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linea);color:var(--hueso-3);font-size:14.5px;max-width:none}
.pie .knaya{height:22px;background:var(--hueso-2)}
.pie a{text-decoration:none;transition:color .3s}
.pie a:hover{color:var(--oro)}
.pie-casa{margin-left:auto;color:var(--hueso-2)}

/* los números del invitado: corte óptico pequeño = trazos finos que aguantan sobre fondo oscuro.
   Va DESPUÉS de todas las reglas `font:` (el atajo `font` borra este ajuste).
   🔴 En cursiva el «49» se leía «19» y el «II» parecía «//»: los números van RECTOS. */
.num,.p-num,.frase-marca b,.ficha dd,.pase-precio,.pase-precio small,.progreso{font-optical-sizing:none;font-variation-settings:"opsz" 12}

@media (min-width:761px){
  .reserva-cab{grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:clamp(32px,6vw,96px)}
  .reserva-cab .k{grid-column:1/-1}
  .reserva-bajada{padding-bottom:.5em}
}
/* visores y portátiles bajos: la nota del pase sobra antes que apretar lo demás */
@media (min-width:761px) and (max-height:640px){
  .p-col .p-nota{display:none}
  .recorrido-pie{bottom:calc(46px + env(safe-area-inset-bottom,0px))}
  .recorrido-pista{display:none}
}

/* ═══ MÓVIL ═══ */
@media (max-width:760px){
  .marco-centro{display:none}
  .marco-arriba{grid-template-columns:1fr 1fr}
  .marco-reservar{padding:9px 12px;font-size:10.5px;letter-spacing:.16em}
  .marco-fecha{display:none}
  /* el sol arriba, el texto abajo y un velo entre los dos: brilla arriba, se lee limpio abajo */
  .portada{align-items:end}
  .portada-cielo{right:auto;left:50%;top:-5%;translate:-50% 0;width:118vw}
  .portada::after{content:"";position:absolute;left:0;right:0;bottom:0;height:86%;z-index:1;pointer-events:none;
    background:linear-gradient(rgba(14,23,18,0),rgba(14,23,18,.5) 16%,rgba(14,23,18,.84) 36%,var(--carbon) 58%)}
  .portada-texto{text-shadow:0 0 16px rgba(14,23,18,.85)}
  .portada-texto>*,.portada-texto .bajada{max-width:100%}
  .ficha{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;row-gap:12px}
  .ficha div{margin-right:16px;padding-right:0}
  .portada-pista{display:none}
  .frase{grid-template-columns:1fr;gap:14px}
  .frase-marca{justify-self:start;justify-items:start;text-align:left;font-size:clamp(64px,14vh,88px)}
  .frase-cuerpo{padding-left:16px}
  .parada{grid-template-columns:minmax(0,1fr);width:min(430px,88vw)}
  .p-num{grid-column:1;grid-row:auto;justify-self:start;font-size:40px;margin:0 0 8px;transform-origin:20% 60%}
  .p-cab,.p-raya,.p-cuerpo{grid-column:1}
  .p-cuerpo{grid-template-columns:1fr;gap:14px}
  .final-sol .sol{opacity:.1}
  .recorrido-pie{bottom:calc(46px + env(safe-area-inset-bottom,0px))}
  .recorrido-pista{display:none}
  .cortina-orla{width:6px}
  .anfitriones{grid-template-columns:1fr}
  .prov-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prov+.prov{border-left:0}
  .prov:nth-child(even){border-left:1px solid var(--linea)}
  .prov:nth-child(n+3){border-top:1px solid var(--linea)}
  .prov:last-child:nth-child(odd){grid-column:1/-1}
  .pase{grid-template-columns:1fr}
  .pase-der{border-left:0;border-top:1px dashed rgba(var(--oro-rgb),.35)}
  .pase-der::before,.pase-der::after{top:-13px;left:auto}
  .pase-der::before{left:-13px}.pase-der::after{right:-13px;bottom:auto}
  .condiciones{grid-template-columns:1fr}
}
@media (max-width:760px) and (max-height:700px){
  .p-col .p-nota{display:none}
}

/* ═══ MENOS MOVIMIENTO: todo se lee de arriba abajo, sin fijados ═══ */
html.quieto #umbral,html.quieto .cortinas,html.quieto .grano,html.quieto .polvo,html.quieto .ruta,html.quieto .cabeza,html.quieto .nodo,
html.quieto .recorrido-pie,html.quieto .final-sol,html.quieto .final-brillo,html.quieto .frase-mecha,html.quieto .portada-pista{display:none}
html.quieto .marco-arriba,html.quieto .marco-abajo{opacity:1}
html.quieto .capa-brillo,html.quieto .umbral-aura,html.quieto .pan,html.quieto .frase-marca b,html.quieto .portada-rayos,html.quieto .cortina-orla{animation:none}
html.quieto .leyenda,html.quieto .recorrido{height:auto;overflow:visible}
html.quieto .leyenda-frases{position:static;display:grid;gap:80px;padding-block:120px}
html.quieto .frase-texto .w{opacity:1}
html.quieto .frase{grid-area:auto}
html.quieto .mundo{position:static;width:auto!important;transform:none!important;display:grid;gap:70px;padding:120px var(--gutter)}
html.quieto .parada{position:relative;left:auto!important;top:auto!important;opacity:1!important;transform:none!important}

/* la línea del recorrido toma el acento del tema (en Luis XIV, los mismos tres oros de siempre) */
#oro stop:nth-child(1){stop-color:var(--oro-2)}
#oro stop:nth-child(2){stop-color:var(--oro)}
#oro stop:nth-child(3){stop-color:var(--oro-claro)}
/* una parada con una sola columna (sin «el vino» o sin platos) */
.p-cuerpo.p-cuerpo-uno{grid-template-columns:minmax(0,1fr)}

/* ═══ III bis · A LA MESA ═══ los pases sentados, como una carta que se va sirviendo.
   Una mecha del acento baja por la izquierda a medida que se lee (la misma de la historia). */
.mesa{padding-block:clamp(110px,16vh,180px) clamp(30px,5vh,70px);display:grid;gap:clamp(34px,5.5vh,56px)}
.mesa-cab{display:grid;gap:18px;max-width:1280px;width:100%;margin:0 auto}
.mesa-bajada{margin:0;max-width:52ch;color:var(--hueso-2);text-wrap:pretty}
.mesa-carta{position:relative;max-width:1280px;width:100%;margin:0 auto}
.mesa-guia{position:absolute;left:var(--gutter);top:6px;bottom:6px;width:1px;background:var(--linea)}
.mesa-mecha{position:absolute;inset:0;background:linear-gradient(var(--oro-2),var(--oro) 70%,var(--oro-claro));transform-origin:50% 0;transform:scaleY(0);box-shadow:0 0 12px rgba(var(--oro-rgb),.6)}
.mesa-lista{list-style:none;margin:0;padding:0 0 0 clamp(24px,3.2vw,52px);display:grid}
.mesa-pase{display:grid;grid-template-columns:clamp(72px,7vw,108px) minmax(0,1fr) minmax(0,1.25fr);gap:6px clamp(18px,3vw,48px);align-items:baseline;
  padding:clamp(16px,2.8vh,26px) 0;border-bottom:1px solid var(--linea)}
.mesa-pase:first-child{border-top:1px solid var(--linea)}
.mesa-hora{font:500 clamp(20px,min(2vw,3.6vh),28px)/1 var(--invitado);font-variant-numeric:lining-nums;color:var(--oro)}
.mesa-nombre{font:400 clamp(26px,min(3vw,6vh),46px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em}
.mesa-texto{color:var(--hueso-2);font-size:clamp(15px,2.5vh,16.5px);line-height:1.5;text-wrap:pretty}
.mesa-hora{font-optical-sizing:none;font-variation-settings:"opsz" 12}
@media (max-width:760px){
  .mesa-pase{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .mesa-texto{grid-column:2}
  .mesa-hora{font-size:19px}
}

/* ═══ TEMA NÁCAR (ostras) ═══ el acento es el interior de la concha: blanco perla frío con un
   viso rosa y verde que corre como el pan de oro. El ORO se queda para la última parada, la del
   fuego: su sol, su ficha y la sala que se calienta al llegar. */
html[data-tema="nacar"]{
  --oro:#D5E3E4; --oro-2:#8FA9AE; --oro-claro:#F5F1EA; --oro-3:#56696E;
  --oro-rgb:213,227,228; --oro2-rgb:143,169,174; --claro-rgb:245,241,234;
  --pan:linear-gradient(90deg,#8FA9AE,#D5E3E4 20%,#F5F1EA 34%,#EBD5DC 44%,#D6E7D9 53%,#D5E3E4 62%,#8FA9AE);
}
html[data-tema="nacar"] :is(.nodo:last-child,.parada:last-of-type,.final-brillo,.final-sol){
  --oro:#F8C020; --oro-2:#C98A12; --oro-claro:#FFE3A3; --oro-3:#8a5d0a;
  --oro-rgb:248,192,32; --oro2-rgb:201,138,18; --claro-rgb:255,227,163;
  --pan:linear-gradient(90deg,#C98A12,#F8C020 24%,#FFE3A3 42%,#F8C020 60%,#C98A12);
}

/* ═══ TELÓN «CONCHA» (ostras) ═══ las dos valvas: nácar oscuro por dentro, con las líneas de
   crecimiento naciendo de la charnela (el canto exterior de cada paño) y el labio en nácar. */
html[data-telon="concha"] .cortina-tela{background-color:#10181B;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 70%,rgba(0,0,0,.7)),
    radial-gradient(95% 62% at var(--charnela) 50%,rgba(235,213,220,.15),rgba(214,231,217,.09) 36%,rgba(213,227,228,.035) 62%,transparent 86%),
    repeating-radial-gradient(ellipse 160% 110% at var(--charnela) 47%,transparent 0 5.4%,rgba(245,241,234,.05) 6%,transparent 6.9%),
    repeating-radial-gradient(ellipse 146% 100% at var(--charnela) 54%,transparent 0 8.2%,rgba(0,0,0,.22) 9%,transparent 10.1%)}
html[data-telon="concha"] .cortina.izq{--charnela:0%}
html[data-telon="concha"] .cortina.der{--charnela:100%}
/* la cabeza de la línea se enciende en oro al acercarse a la ostra del fuego */
html[data-tema="nacar"] .cabeza.al-fuego{
  --oro:#F8C020; --oro-2:#C98A12; --oro-claro:#FFE3A3; --oro-rgb:248,192,32}
html[data-tema="nacar"] :is(.cabeza-halo,.cabeza-sol){transition:background .6s}
/* umbral sin invitado: el nombre de la noche es más largo que un «Luis XIV» y en móvil no cabría */
.umbral-arriba.sin-invitado{max-width:calc(100vw - 2 * var(--gutter))}
.umbral-arriba.sin-invitado span:last-child{font-size:clamp(20px,min(4.4vh,6.4vw),40px);white-space:nowrap}
.umbral-arriba.sin-invitado .knaya{height:clamp(34px,min(7vh,11vw),62px)}