/* Mariscos Robert · una tarde en la playa que avanza con el dedo.
   Cada sección con data-scroll recibe --p (0 a 1) desde robert.js y aquí se ata todo a ese número.
   --vel es la velocidad del scroll, suavizada, de -1 a 1. Reglas del mundo: ver DESIGN.md. */
@font-face{font-family:Rotulo;src:url(/assets/robert/AlfaSlabOne-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:Pincel;src:url(/assets/robert/Yellowtail-Regular.ttf) format("truetype");font-display:swap}
:root{
  --mesa:#1648b8;--marino:#07205f;--rojo:#e0221e;--rojo-hondo:#b3140f;--turquesa:#40bec8;
  --blanco:#fff;--papel:#f7f3ea;--tinta:#141318;--arena:#f1d8a2;--arena-mojada:#d9b97c;
  --sombra:rgba(74,48,12,.42);--sombra-fuerte:rgba(58,36,8,.55);
  --rotulo:Rotulo,"Arial Black",Impact,sans-serif;--pincel:Pincel,"Brush Script MT",cursive;--texto:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --borde:max(18px,env(safe-area-inset-left,0px));--vel:0;
  --sale:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
body{margin:0;color:var(--tinta);font:17px/1.5 var(--texto);overflow-x:clip;
  background:
    radial-gradient(circle at 22% 28%,rgba(255,248,224,.55) 0 1px,transparent 1.7px) 0 0/17px 21px,
    radial-gradient(circle at 68% 62%,rgba(150,108,52,.2) 0 1px,transparent 1.7px) 0 0/23px 29px,
    radial-gradient(circle at 40% 80%,rgba(150,108,52,.13) 0 1.4px,transparent 2.2px) 0 0/41px 37px,
    var(--arena)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--marino);outline-offset:4px;border-radius:6px}
.mesa :focus-visible,.pie :focus-visible{outline-color:var(--blanco)}
.saltar{position:absolute;left:-999px;top:8px;background:var(--blanco);color:var(--tinta);padding:10px 14px;border-radius:8px;z-index:50}
.saltar:focus{left:12px}
[data-scroll]{--p:0}
/* Lo que se queda fijo mientras la sección avanza. */
.fijo{position:sticky;top:0;height:100svh;overflow:clip}

/* Rótulo: la letra de su logo. Relleno, filete blanco y sombra dura azul marino. */
.rotulo{font-family:var(--rotulo);font-weight:400;text-transform:uppercase;line-height:.98;margin:0;letter-spacing:.005em}
.rotulo span{display:inline-block;paint-order:stroke fill;-webkit-text-stroke:.16em var(--blanco);text-shadow:.07em .1em 0 var(--marino)}
.rotulo .r-rojo{color:var(--rojo)}
.rotulo .r-blanco{color:var(--blanco);-webkit-text-stroke:.16em var(--rojo)}
.rotulo-xl{font-size:clamp(2.3rem,min(13.6vw,10.4svh),6rem)}
.rotulo-xl span{display:block;width:fit-content;white-space:nowrap}
.rotulo-l{font-size:clamp(2.6rem,12vw,4.6rem);transform:rotate(-2deg)}
.pincel{font-family:var(--pincel);font-size:clamp(1.55rem,6.6vw,2.2rem);line-height:1.05;margin:.5em 0 0;color:var(--mesa);transform:rotate(-2deg);transform-origin:left}
.pincel-l{font-size:clamp(1.75rem,7.6vw,2.6rem)}

.boton{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 26px;border-radius:14px;font:400 1.15rem/1 var(--rotulo);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;border:3px solid var(--blanco);box-shadow:5px 6px 0 var(--marino);cursor:pointer;transition:transform .18s var(--sale),box-shadow .18s var(--sale)}
.boton:hover{transform:translate(2px,3px);box-shadow:3px 3px 0 var(--marino)}
.boton:active{transform:translate(5px,6px);box-shadow:0 0 0 var(--marino)}
.boton-rojo{background:var(--rojo);color:var(--blanco)}
.boton-papel{background:var(--papel);color:var(--marino);border-color:var(--marino)}

/* Platos: fotos reales en círculo. La envoltura .servido se mueve con el scroll; el plato gira con el dedo. */
.plato{margin:0;border-radius:50%;overflow:hidden;aspect-ratio:1;background:var(--blanco);border:7px solid var(--blanco);box-shadow:0 9px 0 -3px var(--sombra),0 26px 28px -10px var(--sombra-fuerte);touch-action:pan-y;transition:box-shadow .25s}
.plato img{width:100%;height:100%;object-fit:cover;border-radius:50%;-webkit-user-drag:none;user-select:none}
.plato[data-gira]{cursor:grab;will-change:transform}
.plato.agarrado{cursor:grabbing;box-shadow:0 16px 0 -5px var(--sombra),0 40px 36px -12px var(--sombra-fuerte)}
.servido{position:absolute;will-change:translate,scale}

/* ── 1 · La tarde ─────────────────────────────────────────────────────────────────────────────── */
.mesa{position:relative;height:240svh}
.mesa-fijo{isolation:isolate;display:flex;flex-direction:column;padding:16px var(--borde) 0;min-height:560px}
.playa{position:absolute;inset:0;width:100%;height:100%;z-index:-1;touch-action:pan-y}
.palma{position:absolute;top:0;right:0;width:clamp(150px,44vw,300px);z-index:0;transform-origin:100% 0;rotate:calc(var(--vel) * 5deg);translate:calc(var(--p) * 30px) calc(var(--p) * -50px);animation:mece 6.5s ease-in-out infinite alternate;pointer-events:none;filter:drop-shadow(0 10px 8px rgba(7,32,95,.22))}
@keyframes mece{from{transform:rotate(-2.2deg)}to{transform:rotate(3deg)}}
.mesa-arriba{position:relative;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:clamp(12px,2.6svh,30px);translate:0 calc(var(--p) * -150px)}
.portavasos{flex:none;width:clamp(84px,23vw,118px);border-radius:50%;transform:rotate(-8deg);rotate:calc(var(--p) * -200deg);border:4px solid var(--blanco);background:var(--blanco);overflow:hidden;box-shadow:0 5px 0 -1px rgba(7,32,95,.4),0 14px 18px -8px rgba(7,32,95,.6)}
.portavasos img{border-radius:50%;transform:scale(1.04)}
.aviso-hora{margin:8px clamp(60px,19vw,150px) 0 0;display:grid;justify-items:end;text-align:right;font-size:.86rem;line-height:1.25;background:var(--papel);color:var(--tinta);padding:9px 12px;border-radius:4px 4px 12px 4px;transform:rotate(3deg);box-shadow:3px 4px 0 var(--marino)}
.aviso-hora b{font:400 .95rem/1.1 var(--rotulo);text-transform:uppercase;color:var(--rojo-hondo)}
.aviso-hora.abierto b{color:#1d6b12}
/* El texto se abre de lado y se va mientras llega el plato. */
.mesa-texto{position:relative;z-index:3;opacity:clamp(0,calc(1 - (var(--p) - .26) * 3.6),1);translate:0 calc(var(--p) * -7svh)}
.mesa-texto.ido{pointer-events:none}
.rotulo-xl span:nth-child(1){transform:rotate(-3deg);translate:calc(var(--p) * -20%) 0}
.rotulo-xl span:nth-child(2){transform:rotate(-3deg) translateX(.35em);margin-top:.06em;translate:calc(var(--p) * 24%) 0}
.rotulo-xl span:nth-child(3){transform:rotate(-3deg) translateX(.1em);margin-top:.1em;translate:calc(var(--p) * -12%) 0}
.mesa .pincel{color:var(--blanco);text-shadow:0 2px 0 rgba(7,32,95,.45);margin-top:.75em;font-size:clamp(1.5rem,min(7.6vw,4.6svh),2.6rem)}
.acciones{display:flex;flex-wrap:wrap;gap:14px 12px;margin-top:clamp(14px,2.6svh,32px)}
/* Los platos: al deslizar, el grande se acerca al centro y crece; el chico se va de lado. */
.plato-a{width:clamp(250px,74vw,430px);right:-22vw;top:calc(63% + 34px);z-index:2;translate:calc(var(--p) * -27vw) calc(var(--p) * -34svh);scale:calc(1 + var(--p) * .38)}
.plato-b{width:clamp(150px,42vw,260px);left:-13vw;top:calc(63% + 120px);z-index:2;translate:calc(var(--p) * -46vw) calc(var(--p) * 12svh)}
.limon{position:absolute;width:clamp(62px,17vw,96px);filter:drop-shadow(0 6px 5px var(--sombra))}
.limon-a{left:30vw;top:calc(63% + 150px);z-index:2;translate:calc(var(--p) * 62vw) calc(var(--p) * 8svh);rotate:calc(152deg + var(--p) * 620deg)}
.desliza{position:absolute;left:50%;bottom:14px;z-index:4;margin:0;translate:-50% 0;font:400 .8rem/1 var(--rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--marino);background:var(--papel);padding:8px 12px;border-radius:999px;box-shadow:3px 4px 0 var(--marino);opacity:clamp(0,calc(1 - var(--p) * 9),1)}
.desliza span{display:inline-block;animation:baja 1.3s var(--sale) infinite}
@keyframes baja{from{translate:0 -3px}to{translate:0 4px}}

/* ── 2 · Dichos: caen como sellos al pasar ────────────────────────────────────────────────────── */
.dichos{min-height:92svh;display:grid;place-items:center;padding:8svh var(--borde)}
.dichos-palabras{font-size:clamp(3rem,15.5vw,6.5rem);display:flex;flex-wrap:wrap;gap:.12em .3em;max-width:900px}
.dichos-palabras span{--k:clamp(0,calc((var(--p) - .17 - var(--i) * .07) * 12),1);opacity:var(--k);scale:calc(2.1 - var(--k) * 1.1);rotate:calc(-3deg + (1 - var(--k)) * 16deg);transform-origin:20% 60%}

/* ── 3 · La barra: los platos ruedan de lado con el scroll vertical ───────────────────────────── */
.barra{height:calc(100svh + var(--n) * 62svh)}
.barra-fijo{display:flex;flex-direction:column;justify-content:center;gap:0}
.barra-cabeza{padding:0 var(--borde)}
.pista{list-style:none;margin:26px 0 0;padding:26px var(--borde) 44px;display:flex;gap:30px;width:max-content;translate:calc(var(--p) * (100vw - 100%)) 0;will-change:translate}
.pista li{flex:0 0 min(68vw,300px);translate:0 calc(var(--vel) * -16px)}
.pista li:nth-child(even){margin-top:26px;translate:0 calc(var(--vel) * 16px)}
/* Ruedan: el giro va atado al mismo avance que el desplazamiento. */
.pista .plato{cursor:pointer}
.pista .plato img{rotate:calc(var(--p) * -700deg);transition:transform 1.1s var(--sale)}
.banderita{position:relative;z-index:2;margin:-26px 0 0 8%;width:fit-content;max-width:92%;background:var(--papel);color:var(--tinta);padding:9px 14px 10px;border-radius:3px;transform:rotate(-3deg);box-shadow:4px 5px 0 var(--marino);display:grid;gap:1px}
.pista li:nth-child(even) .banderita{transform:rotate(2.5deg);margin-left:14%}
.banderita b{font:400 1.08rem/1.12 var(--rotulo);text-transform:uppercase;color:var(--rojo-hondo)}
.banderita span{font-size:.9rem;line-height:1.25}
.avance{margin:0 var(--borde);height:6px;border-radius:3px;background:rgba(7,32,95,.16);overflow:hidden}
.avance span{display:block;height:100%;background:var(--rojo);transform-origin:0 50%;scale:var(--p) 1}

/* ── 4 · Carteles y cinta ─────────────────────────────────────────────────────────────────────── */
.carteles{padding:12svh 0 6svh;overflow-x:clip}
.cinta{rotate:-2.5deg;margin:0 -4vw;background:var(--rojo);color:var(--blanco);border-block:4px solid var(--blanco);box-shadow:0 7px 0 var(--marino);padding:12px 0;font:400 clamp(1.1rem,5vw,1.6rem)/1 var(--rotulo);text-transform:uppercase;white-space:nowrap;overflow:clip}
/* Corre con el avance y se inclina con la velocidad del dedo. */
.cinta span{display:inline-block;translate:calc(-6% - var(--p) * 44%) 0;transform:skewX(calc(var(--vel) * -18deg))}
.carteles-par{display:grid;grid-template-columns:1fr 1fr;padding:74px var(--borde) 40px;align-items:start}
.cartel{margin:0;border:0;font:inherit;background:var(--blanco);padding:6px;cursor:zoom-in;position:relative;box-shadow:0 8px 0 -4px var(--sombra),0 22px 26px -10px var(--sombra-fuerte);transition:scale .35s var(--sale)}
.cartel::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:24px;margin-left:-37px;background:rgba(247,243,234,.85);transform:rotate(-4deg);box-shadow:0 2px 3px rgba(74,48,12,.25)}
.cartel-a{--k:clamp(0,calc((var(--p) - .12) * 3.6),1);z-index:1;translate:calc(4% - (1 - var(--k)) * 90vw) 0;rotate:calc(-4deg - (1 - var(--k)) * 26deg)}
.cartel-b{--k:clamp(0,calc((var(--p) - .2) * 3.6),1);translate:calc(-4% + (1 - var(--k)) * 90vw) 34px;rotate:calc(3.5deg + (1 - var(--k)) * 26deg)}
.cartel:hover,.cartel:focus-visible{scale:1.05;z-index:3}

/* ── 5 · La carta ─────────────────────────────────────────────────────────────────────────────── */
.carta-zona{padding:6svh var(--borde) 0}
.carta{--k:clamp(0,calc((var(--p) - .06) * 4.2),1);background:var(--papel);color:var(--tinta);padding:26px 22px 22px;border-radius:3px;max-width:560px;box-shadow:7px 9px 0 var(--marino);rotate:calc(1.2deg - (1 - var(--k)) * 10deg);translate:0 calc((1 - var(--k)) * 130px);opacity:clamp(0,calc(var(--k) * 3),1);transform-origin:10% 0}
.carta-cabeza{margin:0;font:400 2.1rem/1 var(--rotulo);text-transform:uppercase;color:var(--rojo)}
.carta-columnas{display:grid;grid-template-columns:1.15fr 1fr;gap:6px 18px;margin-top:16px}
.carta h3{margin:0 0 8px;font:400 1.7rem/1 var(--pincel);color:var(--mesa)}
.carta ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-weight:650;font-size:1rem;line-height:1.2}
.carta li{--r:clamp(0,calc((var(--p) - .2 - var(--j,0) * .02) * 18),1);padding-bottom:7px;border-bottom:2px dotted rgba(20,19,24,.28);opacity:var(--r);translate:calc((1 - var(--r)) * -20px) 0}
.carta-nota{margin:16px 0 0;font-size:.92rem;color:#4b4741}

/* ── 6 · La marea: entra y sale con el scroll (--m sube a 1 a media pasada) ───────────────────── */
.marea{--m:0;position:relative;height:190px;margin-top:9svh;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,var(--arena-mojada),rgba(217,185,124,0) 80%)}
.marea svg{position:absolute;left:-14%;top:0;width:128%;height:150px;translate:calc((var(--p) - .5) * 90px) calc(-70% + var(--m) * 82%)}
.marea-agua{fill:var(--turquesa);opacity:.92}
.marea-espuma{fill:none;stroke:var(--blanco);stroke-width:9;stroke-linecap:round;margin-top:5px}

/* ── 7 · La tarjeta: cada tramo de scroll, una corcholata ─────────────────────────────────────── */
.tarjeta{height:270svh}
.tarjeta-fijo{display:flex;flex-direction:column;justify-content:center;padding:0 var(--borde);min-height:600px}
.carton{position:relative;margin:26px auto 0;width:100%;max-width:410px;background:var(--papel);color:var(--tinta);border-radius:16px;padding:16px 16px 14px;box-shadow:8px 10px 0 var(--marino),0 30px 30px -16px var(--sombra-fuerte);rotate:calc(-10deg + var(--p) * 8deg);scale:calc(.84 + min(var(--p) * 2.4,1) * .16)}
.carton-cabeza{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:3px solid var(--tinta)}
.carton-cabeza img{border-radius:50%;border:2px solid var(--tinta)}
.carton-cabeza p{margin:0;display:grid}
.carton-cabeza b{font:400 1.3rem/1.05 var(--rotulo);text-transform:uppercase;color:var(--rojo)}
.carton-cabeza span{font-size:.92rem}
.huecos{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px 10px}
.huecos li{position:relative;aspect-ratio:1;border-radius:50%;border:3px dashed rgba(20,19,24,.4);display:grid;place-items:center;cursor:pointer}
.huecos li span{font:400 1.3rem/1 var(--rotulo);color:rgba(20,19,24,.42);text-align:center}
.huecos .premio{border-style:solid;border-color:var(--rojo)}
.huecos .premio span{font:400 1.02rem/.95 var(--pincel);color:var(--rojo-hondo);transform:rotate(-8deg);padding:0 3px}
.huecos li::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 46%,rgba(255,255,255,.9) 47% 50%,transparent 51%),
    radial-gradient(circle at 34% 30%,#ff6a5c 0 12%,transparent 46%),
    repeating-conic-gradient(var(--rojo) 0 9deg,var(--rojo-hondo) 9deg 17.14deg);
  box-shadow:0 5px 0 -1px rgba(60,6,4,.55),0 12px 12px -5px var(--sombra-fuerte);
  opacity:0;transform:translateY(-220%) rotate(-150deg) scale(1.3);transition:transform .3s cubic-bezier(.5,0,.8,.4),opacity .12s linear .12s}
.huecos li::before{content:"R";position:absolute;inset:0;z-index:1;display:grid;place-items:center;font:400 1.5rem/1 var(--rotulo);color:var(--blanco);opacity:0;transition:opacity .12s}
.huecos .premio::before{content:"★"}
/* La corcholata cae y rebota: es un objeto que cae, el único rebote de la página. */
.huecos li.puesta::after{opacity:1;transform:none;transition:transform .55s cubic-bezier(.2,1.5,.36,1),opacity .1s linear}
.huecos li.puesta::before{opacity:1;transition:opacity .2s .34s}
.huecos li.brinca::after{animation:brinca .5s var(--sale)}
@keyframes brinca{40%{transform:translateY(-34%) rotate(40deg)}}
.carton-pie{margin:14px 0 0;font-size:.95rem;font-weight:650;text-align:center}
.carton-sello{position:absolute;right:-6px;top:38%;margin:0;padding:8px 16px;font:400 1.7rem/1 var(--rotulo);text-transform:uppercase;color:var(--rojo);border:4px solid var(--rojo);border-radius:10px;background:rgba(247,243,234,.92);transform:rotate(-14deg) scale(2.4);opacity:0;pointer-events:none;transition:transform .2s,opacity .15s}
.carton.completa .carton-sello{opacity:1;transform:rotate(-14deg) scale(1);transition:transform .3s cubic-bezier(.3,0,.2,1) .45s,opacity .1s linear .45s}
.tarjeta-texto{--k:clamp(0,calc((var(--p) - .8) * 9),1);max-width:410px;width:100%;margin:26px auto 0;display:grid;gap:18px;justify-items:start;opacity:var(--k);translate:0 calc((1 - var(--k)) * 26px)}
.tarjeta-texto p{margin:0;font-size:1.02rem;line-height:1.45;text-wrap:pretty}
.tarjeta-texto.ido{pointer-events:none}

/* ── 8 · La comanda sale impresa ──────────────────────────────────────────────────────────────── */
.donde{position:relative;padding:12svh var(--borde) 0;min-height:680px;overflow:clip}
.impresora{position:relative;z-index:2;max-width:346px;overflow:clip;padding:0 12px 12px 4px}
.comanda{--k:clamp(0,calc((var(--p) - .1) * 2.9),1);background:var(--blanco);color:var(--tinta);padding:24px 20px 34px;transform:rotate(-2deg);translate:0 calc((1 - var(--k)) * -104%);
  --d:12px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--d)),95% 100%,90% calc(100% - var(--d)),85% 100%,80% calc(100% - var(--d)),75% 100%,70% calc(100% - var(--d)),65% 100%,60% calc(100% - var(--d)),55% 100%,50% calc(100% - var(--d)),45% 100%,40% calc(100% - var(--d)),35% 100%,30% calc(100% - var(--d)),25% 100%,20% calc(100% - var(--d)),15% 100%,10% calc(100% - var(--d)),5% 100%,0 calc(100% - var(--d)))}
.comanda h2{margin:0;font:400 1.75rem/1 var(--rotulo);text-transform:uppercase;color:var(--rojo)}
.comanda-sub{margin:6px 0 0;font-size:.92rem}
.comanda dl{margin:18px 0 0;display:grid;gap:9px}
.comanda dl div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-bottom:2px dotted rgba(20,19,24,.3);padding-bottom:8px}
.comanda dt{font-weight:650}
.comanda dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.comanda-tel{display:block;margin:18px 0 0;font:400 1.9rem/1 var(--rotulo);color:var(--mesa);text-decoration:none;letter-spacing:.01em}
.comanda-ligas{display:flex;gap:10px;margin-top:16px}
.comanda-ligas a{flex:1;text-align:center;min-height:48px;display:grid;place-items:center;border:2px solid var(--tinta);border-radius:10px;font-weight:700;text-decoration:none}
.comanda-ligas a:first-child{background:var(--tinta);color:var(--blanco)}
.plato-c{width:clamp(230px,66vw,400px);right:-22vw;bottom:-30px;z-index:1;translate:calc((.5 - var(--p)) * -30vw) calc((.5 - var(--p)) * 240px)}

/* Pie: el mar de regreso. */
.pie{position:relative;z-index:3;margin-top:120px;padding:54px var(--borde) 120px;background:var(--mesa);color:#eaf1ff;font-size:.9rem;line-height:1.5}
.pie-olas{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:70px}
.pie-olas .ola-1{fill:var(--turquesa);animation:deriva 4.6s ease-in-out infinite alternate}
.pie-olas .ola-2{fill:var(--mesa)}
@keyframes deriva{from{translate:-18px 0}to{translate:18px 3px}}
.pie-muestra{margin:0;max-width:62ch}
.pie-muestra b{color:var(--blanco)}
.pie nav{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 18px}
.pie nav a{text-underline-offset:4px}

/* La ficha: la tarjeta siempre a la mano. */
.ficha{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:30;width:84px;height:84px;display:grid;place-items:center;color:var(--rojo);text-decoration:none;filter:drop-shadow(0 6px 0 rgba(7,32,95,.5)) drop-shadow(0 14px 12px rgba(58,36,8,.5));transform:translateY(150%) rotate(-40deg);transition:transform .5s cubic-bezier(.2,1.35,.4,1)}
.ficha.visible{transform:rotate(calc(-8deg + var(--vel) * 40deg))}
.ficha svg{position:absolute;inset:0;width:100%;height:100%}
.ficha span{position:relative;font:400 .78rem/.95 var(--rotulo);text-transform:uppercase;color:var(--blanco);text-align:center;width:58px}

/* Cartel en grande */
.visor{border:0;padding:0;background:transparent;max-width:min(92vw,520px);max-height:92svh;overflow:visible}
.visor::backdrop{background:rgba(7,32,95,.78)}
.visor img{width:100%;border:8px solid var(--blanco);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.visor form{display:flex;justify-content:center;margin-top:16px}

@media (max-height:700px){.carton{max-width:340px}.tarjeta-texto p{font-size:.95rem}.rotulo-l{font-size:clamp(2.2rem,10vw,3.6rem)}}
@media (min-width:800px){
  body{font-size:18px}
  :root{--borde:max(28px,calc((100vw - 1120px)/2))}
  .mesa-fijo{padding-top:26px}
  .plato-a{width:480px;right:calc(var(--borde) - 40px);top:calc(63% - 70px);translate:calc(var(--p) * -24vw) calc(var(--p) * -22svh)}
  .plato-b{width:280px;left:auto;right:calc(var(--borde) + 400px);top:calc(63% + 60px);translate:calc(var(--p) * -60vw) calc(var(--p) * 10svh)}
  .limon-a{left:auto;right:calc(var(--borde) + 440px);top:calc(63% + 30px)}
  .pista li{flex-basis:300px}
  .carteles-par{grid-template-columns:320px 320px;justify-content:center}
  .carta-zona{display:grid;justify-items:center}
  .carta{width:100%}
  .tarjeta-fijo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-rows:auto auto auto;align-content:center;column-gap:70px}
  .tarjeta-fijo>.rotulo,.tarjeta-fijo>.pincel,.tarjeta-fijo>.tarjeta-texto{grid-column:1;margin-left:0}
  .tarjeta-fijo>.carton{grid-column:2;grid-row:1/4;margin:0;align-self:center}
  .tarjeta-texto{margin-top:30px}
  .plato-c{right:var(--borde);width:420px}
}

/* Movimiento reducido: sin secciones fijas ni viajes; todo en su lugar y legible. */
.quieto .mesa,.quieto .barra,.quieto .tarjeta{height:auto}
.quieto .fijo{position:relative;height:auto}
.quieto .mesa-fijo{min-height:100svh}
.quieto .barra-fijo,.quieto .tarjeta-fijo{padding-block:10svh}
.quieto .pista{translate:none;width:auto;overflow-x:auto;scroll-snap-type:x mandatory}
.quieto .pista li{scroll-snap-align:center}
.quieto .desliza,.quieto .avance{display:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .palma,.desliza span,.pie-olas .ola-1{animation:none}
  .boton,.ficha,.cartel,.huecos li::after,.huecos li::before,.carton-sello,.pista .plato img{transition:none!important}
}

/* ── Rendimiento (12-nov, medido en celular simulado) ─────────────────────────────────────────────
   Lo que viaja con el scroll va en su propia capa: así el teléfono solo lo cambia de lugar en vez
   de volver a pintar letras con filete, fotos y sombras en cada cuadro. Solo con movimiento activo. */
html:not(.quieto) :is(.mesa-arriba,.portavasos,.mesa-texto,.rotulo-xl span,.limon-a,.dichos-palabras span,.pista li,.pista .plato img,.cinta span,.cartel-a,.cartel-b,.carta,.marea svg,.carton,.tarjeta-texto,.comanda,.avance span,.plato-c,.palma){will-change:transform}
/* Recorridos más cortos: menos dedo para llegar a la carta y a la tarjeta. */
.mesa{height:185svh}
.barra{height:calc(100svh + var(--n) * 46svh)}
.tarjeta{height:205svh}
.dichos{min-height:70svh}

/* ── Minijuego: "Antes de que se los lleve la ola" ───────────────────────────────────────────── */
.lv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.juego{padding:14svh var(--borde) 0;scroll-margin-top:12px}
.juego .rotulo-l{font-size:clamp(2.1rem,9.6vw,4rem);line-height:1.04}
.juego-mesa{position:relative;margin:30px auto 0;max-width:560px;border-radius:22px;overflow:clip;border:6px solid var(--blanco);box-shadow:8px 10px 0 var(--marino),0 30px 34px -16px var(--sombra-fuerte);background:var(--arena)}
.juego-lienzo{display:block;width:100%;aspect-ratio:4/5;max-height:72svh;touch-action:manipulation;cursor:pointer}
.juego-marcador{position:absolute;inset:12px 12px auto;z-index:2;display:flex;justify-content:space-between;pointer-events:none}
.juego-marcador p{margin:0;display:grid;justify-items:center;min-width:76px;padding:7px 12px;background:var(--papel);border-radius:12px;box-shadow:3px 4px 0 var(--marino)}
.juego-marcador b{font:400 1.7rem/1 var(--rotulo);color:var(--rojo);font-variant-numeric:tabular-nums}
.juego-marcador span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
/* El cartel de reglas y resultado: papel de comanda sobre la orilla. */
.juego-cartel{position:absolute;inset:auto 14px 14px;z-index:3;display:grid;gap:12px;justify-items:start;padding:18px 18px 16px;background:var(--papel);color:var(--tinta);border-radius:14px;box-shadow:6px 7px 0 var(--marino);rotate:-1deg}
.juego-cartel[hidden]{display:none}
.juego-reglas{margin:0;font-size:1rem;line-height:1.4}
.juego-tabla{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:.92rem;font-weight:650;width:100%}
.juego-tabla li{display:flex;align-items:center;gap:8px}
.juego-tabla b{margin-left:auto;font:400 1rem/1 var(--rotulo);color:var(--mesa)}
.juego-tabla .malo b{color:var(--rojo-hondo)}
.juego-tabla i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--blanco);box-shadow:0 0 0 1px rgba(20,19,24,.2)}
.ico-camaron{background:#f2734f}.ico-callo{background:#f1e3c4}.ico-ostion{background:#8b939a}.ico-jaiba{background:var(--rojo)}
.juego-resultado{margin:0;font:400 1.3rem/1.15 var(--rotulo);text-transform:uppercase;color:var(--rojo)}
.juego-resultado:empty,.juego-record:empty{display:none}
.juego-record{margin:-6px 0 0;font-weight:700;color:var(--mesa)}
.juego-nota{margin:0;font-size:.82rem;color:#5d574f}
.juego.jugando .juego-lienzo{cursor:crosshair}
@media (min-width:800px){.juego{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:60px;align-items:center}.juego-mesa{margin:0;grid-column:2;grid-row:1/3}.juego-cabeza{grid-column:1}}

.juego .rotulo-l span{display:block;width:fit-content}
.juego .rotulo-l span:nth-child(2){margin-left:.3em}

/* Avisos legales */
.legal-pagina{min-height:100svh}
.legal{max-width:68ch;margin:0 auto;padding:28px var(--borde) 64px;line-height:1.6}
.legal-volver{display:inline-block;margin-bottom:26px;font-weight:700;text-underline-offset:4px}
.legal .rotulo{font-size:clamp(2.2rem,10vw,3.6rem);transform:rotate(-2deg);margin-bottom:26px}
.legal h2{margin:34px 0 8px;font:400 1.4rem/1.15 var(--rotulo);text-transform:uppercase;color:var(--mesa)}
.legal-muestra{padding:14px 16px;background:var(--papel);border-radius:12px;box-shadow:4px 5px 0 var(--marino)}
.legal ul{padding-left:1.2em}

.acciones .boton-papel{min-height:50px;padding:11px 18px;font-size:1rem}
.acciones .boton-rojo{flex-basis:100%;max-width:max-content}