/* OS FAMILIA · Bear Chicken — estilos */
:root{
  --azul:#1f4fd1; --azul-2:#2f6bff; --marino:#0d1f5c; --noche:#081443;
  --cielo:#cfe4ff; --cielo-2:#e9f3ff; --crema:#fff4dc; --crema-2:#fffaf0;
  --oro:#ffc62e; --oro-2:#ffb000; --rojo:#e6332a; --rojo-2:#c4211a;
  --tinta:#0d1f5c; --gris:#5b6a93; --blanco:#fff;
  --r:22px; --r-l:34px;
  --sombra:0 6px 0 var(--marino);
  --sombra-s:0 4px 0 var(--marino);
  --display:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif;
  --texto:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(18px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{font-family:var(--texto);color:var(--tinta);background:var(--crema-2);line-height:1.5;overflow-x:clip;font-size:17px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{width:min(1240px,100%);margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ko{white-space:nowrap;font-family:"Nunito",sans-serif;font-weight:800;letter-spacing:.02em;opacity:.75}

/* ---------- Splash (doble red de seguridad: CSS 2.6s + JS) ---------- */
.splash{position:fixed;inset:0;z-index:100;background:var(--azul);display:grid;place-items:center;
  animation:splashOut .5s ease 2.6s forwards}
.splash.out{animation:splashOut .45s ease forwards}
.splash__in{display:grid;justify-items:center;gap:14px;color:#fff}
.splash__crown{width:86px;animation:crownHop .7s cubic-bezier(.3,1.6,.5,1) infinite alternate}
.splash__t{font-family:var(--display);font-size:42px;letter-spacing:.02em}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
@keyframes crownHop{from{transform:translateY(6px) rotate(-6deg)}to{transform:translateY(-14px) rotate(6deg)}}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;letter-spacing:.02em;
  padding:14px 24px;border-radius:999px;border:3px solid var(--marino);background:var(--oro);color:var(--marino);
  box-shadow:var(--sombra-s);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--marino)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--marino)}
.btn--rojo{background:var(--rojo);color:#fff}
.btn--blanco{background:#fff}
.btn--azul{background:var(--azul);color:#fff}
.btn svg{width:20px;height:20px}

/* ---------- Header ---------- */
.hdr{position:fixed;top:12px;left:0;right:0;z-index:50;padding:0 var(--pad);transition:transform .35s}
.hdr.esconde{transform:translateY(-120%)}
.hdr__bar{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:18px;background:#fff;border:3px solid var(--marino);
  border-radius:999px;padding:8px 8px 8px 10px;box-shadow:var(--sombra-s)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:22px;color:var(--azul)}
.logo img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--marino)}
.logo small{display:block;font-family:var(--texto);font-weight:900;font-size:10px;letter-spacing:.18em;color:var(--rojo);margin-top:-3px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font-weight:800;font-size:15px;padding:9px 14px;border-radius:999px;transition:background .2s}
.nav a:hover{background:var(--cielo-2)}
.hdr .btn{padding:10px 18px;font-size:16px}
.burger{display:none;width:48px;height:48px;border-radius:50%;background:var(--azul);margin-left:auto;place-items:center}
.burger span{display:block;width:20px;height:3px;background:#fff;border-radius:3px;box-shadow:0 -7px 0 #fff,0 7px 0 #fff}
.menu{position:fixed;inset:0;z-index:60;background:var(--azul);color:#fff;padding:100px var(--pad) 40px;display:flex;flex-direction:column;gap:6px;
  clip-path:circle(0 at calc(100% - 50px) 40px);transition:clip-path .55s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu.abierto{clip-path:circle(150% at calc(100% - 50px) 40px);visibility:visible}
.menu a{font-family:var(--display);font-size:clamp(34px,9vw,56px);line-height:1.15}
.menu a span{font-family:var(--texto);font-size:14px;font-weight:900;color:var(--oro);margin-right:10px;vertical-align:middle}
.menu__x{position:absolute;top:24px;right:var(--pad);width:52px;height:52px;border-radius:50%;background:#fff;color:var(--azul);font-size:30px;font-weight:900}
.menu__pie{margin-top:auto;font-weight:700;opacity:.85}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--azul);color:#fff;padding:120px 0 0;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;opacity:.12;
  background-image:radial-gradient(#fff 2px,transparent 2.5px);background-size:26px 26px;animation:puntos 18s linear infinite}
@keyframes puntos{to{background-position:260px 260px}}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.hero .eyebrow{background:var(--oro);color:var(--marino);padding:7px 14px;border-radius:999px;border:2px solid var(--marino)}
.hero__t{font-family:var(--display);font-weight:400;font-size:clamp(58px,8.6vw,126px);white-space:nowrap;line-height:.86;margin:22px 0 20px;letter-spacing:.005em}
.hero__t .l{display:block}
.hero__t .l--oro{color:var(--oro);-webkit-text-stroke:0}
.hero__t .ch{display:inline-block;animation:gelatina 1s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--i)*55ms + .3s)}
@keyframes gelatina{0%{transform:translateY(80%) scale(.6,1.4);opacity:0}55%{transform:translateY(-8%) scale(1.15,.85);opacity:1}100%{transform:none;opacity:1}}
.hero__t .ch:hover{animation:boing .5s}
@keyframes boing{30%{transform:scale(1.25,.8)}60%{transform:scale(.9,1.12)}}
.hero__p{font-size:clamp(17px,1.6vw,20px);max-width:30em;font-weight:600;opacity:.95}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__vis{position:relative;align-self:end}
.hero__foto{border-radius:var(--r-l) var(--r-l) 0 0;border:4px solid var(--marino);border-bottom:0;overflow:hidden;aspect-ratio:4/4.6;
  transform:rotate(2deg);transform-origin:bottom center}
.hero__foto img{width:100%;height:100%;object-fit:cover}
.sticker{position:absolute;display:grid;place-items:center;text-align:center;font-family:var(--display);border:3px solid var(--marino);box-shadow:var(--sombra-s)}
.sticker--precio{top:8%;left:-6%;width:132px;height:132px;border-radius:50%;background:var(--oro);color:var(--marino);font-size:16px;line-height:1.05;
  animation:girito 9s linear infinite}
.sticker--precio b{display:block;font-size:40px}
.sticker--sal{bottom:14%;right:-3%;padding:10px 16px;border-radius:14px;background:var(--rojo);color:#fff;font-size:20px;transform:rotate(-8deg);animation:flota 3.2s ease-in-out infinite}
@keyframes girito{50%{transform:rotate(10deg) scale(1.04)}}
@keyframes flota{50%{transform:rotate(-4deg) translateY(-10px)}}

/* tarjeta de coronas (en hero) */
.coronas{margin-top:32px;background:#fff;color:var(--marino);border:3px solid var(--marino);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sombra);max-width:520px}
.coronas__top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.coronas__t{font-family:var(--display);font-size:24px;line-height:1.05}
.coronas__t em{font-style:normal;color:var(--azul)}
.coronas__pts{font-family:var(--display);font-size:15px;color:var(--rojo)}
.coronas__fila{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin:14px 0}
.coronas__fila i{aspect-ratio:1;border-radius:50%;background:var(--cielo-2);border:2px dashed #9db7e8;display:grid;place-items:center;transition:background .3s,border-color .3s}
.coronas__fila i svg{width:70%;opacity:0;transform:scale(.2) rotate(-40deg);transition:opacity .3s,transform .45s cubic-bezier(.3,1.8,.5,1)}
.coronas__fila i.on{background:var(--oro);border:2px solid var(--marino)}
.coronas__fila i.on svg{opacity:1;transform:none}
.coronas__premios{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:800}
.coronas__premios span{background:var(--crema);border-radius:999px;padding:5px 11px;border:2px solid var(--marino)}
.coronas__premios b{color:var(--azul)}

.hechos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--marino);color:#fff;border-top:4px solid var(--marino)}
.hechos div{padding:18px var(--pad);border-right:2px solid rgba(255,255,255,.12);font-weight:700;font-size:14px}
.hechos div:last-child{border:0}
.hechos b{display:block;font-family:var(--display);font-weight:400;font-size:24px;color:var(--oro)}

/* ---------- Cinta de salsas (marquee) ---------- */
.cinta{background:var(--oro);border-block:4px solid var(--marino);overflow:hidden;padding:14px 0;transform:rotate(-1.5deg);margin:-10px -20px 0;position:relative;z-index:2}
.cinta__pista{display:flex;gap:14px;width:max-content;animation:cinta 38s linear infinite}
.cinta:hover .cinta__pista{animation-play-state:paused}
.cinta span{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:22px;color:var(--marino);white-space:nowrap}
.cinta span::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--c,#e6332a);border:2px solid var(--marino)}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ---------- Secciones ---------- */
.sec{padding:clamp(80px,10vw,140px) 0;position:relative}
.sec--crema{background:var(--crema)}
.sec--cielo{background:var(--cielo)}
.sec--azul{background:var(--azul);color:#fff}
.sec--marino{background:var(--marino);color:#fff}
.num{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--rojo)}
.num::before{content:attr(data-n);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--rojo);color:#fff;letter-spacing:0;font-size:13px}
.sec--azul .num,.sec--marino .num{color:var(--oro)}
.sec--azul .num::before,.sec--marino .num::before{background:var(--oro);color:var(--marino)}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(42px,6.4vw,88px);line-height:.95;margin:16px 0 18px;letter-spacing:.005em}
.h2 em{font-style:normal;color:var(--azul)}
.sec--azul .h2 em,.sec--marino .h2 em{color:var(--oro)}
.lead{font-size:clamp(17px,1.5vw,20px);max-width:36em;font-weight:600;color:var(--gris)}
.sec--azul .lead,.sec--marino .lead{color:#dbe6ff}
.cab{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:46px}

/* gotas de salsa: separador con zigzag que se dibuja con el scroll */
.chorro{position:relative;height:70px;margin-top:-35px;z-index:3;pointer-events:none}
.chorro svg{width:100%;height:100%;overflow:visible}
.chorro path{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- La idea ---------- */
.idea__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:center}
.idea__t{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,50px);line-height:1.08}
.idea__t mark{background:var(--oro);color:var(--marino);padding:0 .18em;border-radius:10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.idea__t .rojo{color:var(--rojo)}
.puntos4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:40px}
.punto{background:#fff;border:3px solid var(--marino);border-radius:var(--r);padding:20px;box-shadow:var(--sombra-s);transition:transform .25s}
.punto:hover{transform:translateY(-6px) rotate(-1.2deg)}
.punto b{display:block;font-family:var(--display);font-weight:400;font-size:22px;margin:8px 0 4px}
.punto p{font-size:15px;color:var(--gris);font-weight:600}
.punto .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--cielo);border:2px solid var(--marino);font-size:24px}
.idea__fotos{position:relative;height:620px}
.idea__fotos figure{position:absolute;border:4px solid var(--marino);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra);background:#fff}
.idea__fotos img{width:100%;height:100%;object-fit:cover}
.idea__fotos .f1{width:68%;height:72%;top:0;right:0;transform:rotate(3deg)}
.idea__fotos .f2{width:52%;height:52%;bottom:0;left:0;transform:rotate(-5deg)}
.idea__fotos .mascota{position:absolute;height:auto;width:44%;bottom:-6%;right:-4%;z-index:2;filter:drop-shadow(0 8px 0 rgba(13,31,92,.25));animation:saluda 2.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes saluda{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}}

/* ---------- Menús (precios) ---------- */
.pestanas{display:inline-flex;background:#fff;border:3px solid var(--marino);border-radius:999px;padding:5px;gap:4px;box-shadow:var(--sombra-s)}
.pestanas button{font-family:var(--display);font-size:18px;padding:10px 20px;border-radius:999px;transition:background .25s,color .25s}
.pestanas button[aria-selected="true"]{background:var(--azul);color:#fff}
.boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
.box{position:relative;background:#fff;border:3px solid var(--marino);border-radius:var(--r-l);padding:26px 24px 24px;box-shadow:var(--sombra);
  transform-style:preserve-3d;transition:transform .2s ease-out;display:flex;flex-direction:column}
.box--top{background:var(--oro)}
.box__talla{position:absolute;top:-22px;left:22px;width:62px;height:62px;border-radius:50%;background:var(--rojo);color:#fff;border:3px solid var(--marino);
  display:grid;place-items:center;font-family:var(--display);font-size:28px}
.box__tag{position:absolute;top:16px;right:16px;font-weight:900;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--marino);color:#fff;padding:5px 10px;border-radius:999px}
.box h3{font-family:var(--display);font-weight:400;font-size:28px;margin:26px 0 2px}
.box .sub{font-weight:800;color:var(--gris);font-size:14px}
.box--top .sub{color:var(--marino)}
.box ul{list-style:none;margin:16px 0 18px;display:grid;gap:7px;font-weight:700;font-size:15px}
.box li{display:flex;gap:10px;align-items:center}
.box li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--azul);flex:none}
.box__precio{margin-top:auto;font-family:var(--display);font-size:52px;line-height:1;color:var(--azul);display:flex;align-items:baseline;gap:6px}
.box--top .box__precio{color:var(--marino)}
.box__precio small{font-family:var(--texto);font-weight:800;font-size:13px;color:var(--gris)}
.panel[hidden]{display:none}
.combos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:22px}
.combo{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--azul);color:#fff;border:3px solid var(--marino);border-radius:var(--r-l);padding:14px 22px 14px 14px;box-shadow:var(--sombra)}
.combo img{width:150px;height:150px;object-fit:cover;border-radius:20px;border:3px solid var(--marino)}
.combo h3{font-family:var(--display);font-weight:400;font-size:28px;line-height:1}
.combo p{font-size:14px;font-weight:700;opacity:.9;margin-top:6px}
.combo .precio{font-family:var(--display);font-size:42px;color:var(--oro);text-align:right;line-height:1}
.combo .precio small{display:block;font-family:var(--texto);font-weight:800;font-size:12px;color:#fff;opacity:.85;margin-top:4px}
.normas{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:n}
.normas p{background:var(--crema-2);border:2px dashed var(--marino);border-radius:18px;padding:16px;font-weight:700;font-size:14px}
.normas p::before{counter-increment:n;content:"0" counter(n);display:block;font-family:var(--display);font-size:24px;color:var(--rojo)}

/* ---------- Cómo funciona ---------- */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:p}
.paso{position:relative;border-radius:var(--r-l);overflow:hidden;border:4px solid var(--marino);aspect-ratio:3/4;background:var(--marino);box-shadow:0 8px 0 rgba(0,0,0,.25)}
.paso img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.paso:hover img{transform:scale(1.07)}
.paso__txt{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;color:var(--marino);border:3px solid var(--marino);border-radius:20px;padding:14px 16px}
.paso__txt b{display:block;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.05}
.paso__txt b::before{counter-increment:p;content:"0" counter(p) " ";color:var(--rojo)}
.paso__txt p{font-weight:700;font-size:14px;color:var(--gris);margin-top:4px}
.paso:nth-child(2){transform:translateY(40px)}

/* ---------- Carta destacada ---------- */
.cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.cats a{display:inline-flex;gap:8px;align-items:center;background:#fff;border:3px solid var(--marino);border-radius:999px;padding:8px 16px;font-weight:900;font-size:15px;transition:background .2s,transform .2s}
.cats a:hover{background:var(--oro);transform:translateY(-3px)}
.cats a i{font-style:normal;background:var(--azul);color:#fff;border-radius:999px;padding:1px 9px;font-size:12px}
.platos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.plato{background:#fff;border:3px solid var(--marino);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra-s);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.plato:hover{transform:translateY(-8px) rotate(var(--rot,1.5deg))}
.plato:nth-child(even){--rot:-1.5deg}
.plato figure{aspect-ratio:1;overflow:hidden;border-bottom:3px solid var(--marino);position:relative}
.plato figure img{width:100%;height:100%;object-fit:cover}
.plato .n{position:absolute;top:10px;left:10px;background:var(--oro);border:2px solid var(--marino);border-radius:999px;font-weight:900;font-size:12px;padding:3px 10px}
.plato div{padding:14px 16px 16px;display:flex;justify-content:space-between;gap:10px;align-items:end}
.plato h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.05}
.plato small{display:block;font-weight:800;color:var(--gris);font-size:13px;margin-top:3px}
.plato .p{font-family:var(--display);font-size:24px;color:var(--rojo);white-space:nowrap}
.plato--todo{background:var(--azul);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:24px}
.plato--todo h3{font-size:36px}
.plato--todo .flecha{width:70px;height:70px;border-radius:50%;background:var(--oro);border:3px solid var(--marino);display:grid;place-items:center;transition:transform .3s}
.plato--todo:hover .flecha{transform:rotate(-45deg)}
.plato--todo small{color:#cfdcff}

/* ---------- Laboratorio de salsas ---------- */
.lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center}
.lab__escena{position:relative;aspect-ratio:1;background:var(--azul-2);border:4px solid var(--marino);border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 -18px 0 rgba(0,0,0,.12),var(--sombra)}
.lab__escena::before{content:"";position:absolute;inset:8%;border-radius:50%;border:3px dashed rgba(255,255,255,.35);animation:girito2 30s linear infinite}
@keyframes girito2{to{transform:rotate(360deg)}}
.lab__escena svg{position:absolute;left:11%;top:11%;width:78%;height:78%;overflow:visible;transform:rotate(-28deg)}
#chorroSalsa{filter:drop-shadow(0 3px 0 rgba(13,31,92,.55))}
#chorroSalsa{transition:stroke .3s}
.lab__escena.pinta #chorroSalsa{animation:dibuja 1.1s cubic-bezier(.6,.1,.3,1) forwards}
@keyframes dibuja{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
.lab__escena .polvo circle{opacity:0;transition:opacity .3s}
.lab__escena.conpolvo .polvo circle{opacity:1;animation:cae .6s ease-out both;animation-delay:calc(var(--d)*20ms)}
@keyframes cae{from{transform:translateY(-60px);opacity:0}}
.lab__nombre{position:absolute;bottom:4%;left:50%;transform:translateX(-50%) rotate(-3deg);background:#fff;border:3px solid var(--marino);border-radius:999px;padding:8px 18px;font-family:var(--display);font-size:22px;white-space:nowrap;box-shadow:var(--sombra-s)}
.salsas{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 12px}
.salsa{display:inline-flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--marino);border-radius:999px;padding:7px 14px 7px 8px;font-weight:800;font-size:14px;transition:transform .15s}
.salsa::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--c);border:2px solid var(--marino)}
.salsa:hover{transform:translateY(-3px)}
.salsa[aria-pressed="true"]{background:var(--marino);color:#fff}
.lab small.nota{display:block;font-weight:700;color:var(--gris);font-size:14px;margin-top:6px}
.lab h3{font-family:var(--display);font-weight:400;font-size:26px;margin-top:22px}

/* ---------- Locales ---------- */
.locales{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
.local{position:relative;border:4px solid var(--marino);border-radius:var(--r-l);overflow:hidden;background:#fff;color:var(--marino);box-shadow:0 8px 0 rgba(0,0,0,.25)}
.local figure{aspect-ratio:16/11;overflow:hidden}
.local figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.local:hover figure img{transform:scale(1.05)}
.local__txt{padding:22px 24px 24px;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.local h3{font-family:var(--display);font-weight:400;font-size:38px;line-height:1}
.local p{font-weight:700;color:var(--gris)}
.local .pin{position:absolute;top:16px;left:16px;background:var(--rojo);color:#fff;border:3px solid var(--marino);border-radius:999px;padding:6px 14px;font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.tira{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:26px}
.tira figure{border:3px solid var(--marino);border-radius:20px;overflow:hidden;aspect-ratio:3/4;transform:rotate(var(--r,0deg));transition:transform .3s}
.tira figure:hover{transform:rotate(0) scale(1.04);z-index:2}
.tira img{width:100%;height:100%;object-fit:cover}
.tira figure:nth-child(1){--r:-3deg}.tira figure:nth-child(2){--r:2deg}.tira figure:nth-child(3){--r:-1deg}.tira figure:nth-child(4){--r:3deg}.tira figure:nth-child(5){--r:-2deg}

/* ---------- Opinión / reseña ---------- */
.opina{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:30px;align-items:center;background:#fff;border:4px solid var(--marino);border-radius:var(--r-l);padding:30px 36px;box-shadow:var(--sombra)}
.opina .h2{font-size:clamp(34px,4.4vw,58px);margin:0}
.ojos{width:120px;height:120px}

/* ---------- Pide (CTA grande) ---------- */
.pide{text-align:center;overflow:hidden}
.pide__t{font-family:var(--display);font-weight:400;font-size:clamp(70px,14vw,210px);line-height:.82;letter-spacing:.005em}
.pide__t span{display:block}
.pide__t span:last-child{color:var(--oro)}
.pide .lead{margin:22px auto 30px}
.pide__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.pide__flotan img{position:absolute;width:clamp(90px,13vw,190px);border-radius:24px;border:3px solid var(--marino);box-shadow:var(--sombra-s);animation:flota 4s ease-in-out infinite}
.pide__flotan img:nth-child(1){top:12%;left:4%;transform:rotate(-10deg)}
.pide__flotan img:nth-child(2){bottom:10%;left:9%;animation-delay:-1.3s}
.pide__flotan img:nth-child(3){top:14%;right:5%;animation-delay:-2.1s}
.pide__flotan img:nth-child(4){bottom:12%;right:8%;animation-delay:-.6s}

/* ---------- Galería ---------- */
.gal{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;gap:14px}
.gal figure{border:3px solid var(--marino);border-radius:20px;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.gal figure:hover img{transform:scale(1.08)}
.gal .a{grid-column:span 2;grid-row:span 3}.gal .b{grid-column:span 2;grid-row:span 2}.gal .c{grid-column:span 2;grid-row:span 2}
.gal .d{grid-column:span 2;grid-row:span 2}.gal .e{grid-column:span 2;grid-row:span 1}.gal .f{grid-column:span 2;grid-row:span 2}

/* ---------- Footer ---------- */
.ftr{background:var(--noche);color:#c9d6ff;padding:80px 0 110px;position:relative;overflow:hidden}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:34px}
.ftr h4{font-family:var(--display);font-weight:400;color:#fff;font-size:22px;margin-bottom:12px}
.ftr p,.ftr li{font-weight:600;font-size:15px}
.ftr ul{list-style:none;display:grid;gap:6px}
.ftr a:hover{color:var(--oro)}
.ftr__lema{font-family:var(--display);font-size:30px;line-height:1.05;color:#fff;margin:16px 0 8px}
.ftr__marca{font-family:var(--display);font-size:clamp(56px,15.5vw,230px);line-height:.8;color:var(--azul);margin-top:60px;white-space:nowrap;letter-spacing:.01em}
.ftr__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;margin-top:22px;opacity:.75}

/* barra fija móvil */
.barra{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;gap:10px}
.barra .btn{flex:1;justify-content:center;padding:13px 10px;font-size:17px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,1.2,.4,1)}
.reveal.visto{opacity:1;transform:none}
.reveal[data-split]{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ---------- Página carta ---------- */
.carta-hero{background:var(--azul);color:#fff;padding:140px 0 70px;position:relative;overflow:hidden}
.carta-hero .h2{font-size:clamp(56px,9vw,130px)}
.carta-hero .mascota{position:absolute;right:4%;bottom:-8px;width:clamp(150px,22vw,300px)}
.chips{position:sticky;top:86px;z-index:20;background:var(--crema-2);border-bottom:3px solid var(--marino);padding:12px 0}
.chips .wrap{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.chips a{flex:none;font-weight:900;font-size:14px;padding:8px 15px;border-radius:999px;border:2px solid var(--marino);background:#fff;transition:background .2s,color .2s}
.chips a.activa{background:var(--marino);color:#fff}
.bloque{padding:70px 0 20px;scroll-margin-top:150px}
.bloque__cab{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.bloque__cab h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,60px);line-height:1}
.bloque__cab .ko{font-size:18px;color:var(--rojo)}
.bloque__cab p{width:100%;font-weight:700;color:var(--gris)}
.lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.item{display:flex;gap:16px;align-items:center;background:#fff;border:3px solid var(--marino);border-radius:20px;padding:14px 18px;box-shadow:var(--sombra-s)}
.item__n{font-family:var(--display);font-size:18px;color:#fff;background:var(--azul);border-radius:12px;min-width:48px;height:48px;display:grid;place-items:center;padding:0 6px}
.item__c{flex:1}
.item h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.1}
.item p{font-size:14px;font-weight:700;color:var(--gris)}
.item .p{font-family:var(--display);font-size:24px;color:var(--rojo);white-space:nowrap}
.item .tag{display:inline-block;background:var(--oro);border:2px solid var(--marino);border-radius:999px;font-size:11px;font-weight:900;padding:1px 8px;margin-left:6px;vertical-align:middle;letter-spacing:.06em}
.carta-foto{border:4px solid var(--marino);border-radius:var(--r-l);overflow:hidden;margin-bottom:22px;max-height:420px}
.carta-foto img{width:100%;height:420px;object-fit:cover}
.salsero{display:flex;flex-wrap:wrap;gap:10px}


/* ---------- Tira del queso (scroll fijo) ---------- */
.gingham{background-color:#fff;background-image:
  repeating-linear-gradient(0deg,rgba(31,79,209,.16) 0 22px,transparent 22px 44px),
  repeating-linear-gradient(90deg,rgba(31,79,209,.16) 0 22px,transparent 22px 44px)}
.queso{height:230vh;position:relative;background-color:#fff;background-image:
  repeating-linear-gradient(0deg,rgba(31,79,209,.14) 0 22px,transparent 22px 44px),
  repeating-linear-gradient(90deg,rgba(31,79,209,.14) 0 22px,transparent 22px 44px);
  border-block:4px solid var(--marino)}
.queso__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.queso__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;width:100%}
.queso__txt{background:#fff;border:3px solid var(--marino);border-radius:var(--r-l);padding:30px;box-shadow:var(--sombra)}
.queso__metro{font-weight:800;margin:14px 0 20px;font-size:18px}
.queso__metro b{font-family:var(--display);font-weight:400;font-size:46px;color:var(--rojo);margin-right:6px;font-variant-numeric:tabular-nums}
.queso__esc{position:relative;height:min(82vh,720px)}
.queso__esc svg{width:100%;height:100%;overflow:visible}
.etq{position:absolute;background:var(--oro);border:3px solid var(--marino);border-radius:999px;padding:7px 14px;font-weight:900;font-size:14px;
  box-shadow:var(--sombra-s);opacity:0;transform:scale(.6);transition:opacity .35s,transform .45s cubic-bezier(.3,1.7,.5,1);white-space:nowrap}
.queso__esc.abierto .etq{opacity:1;transform:none}
.etq--1{top:12%;left:2%}
.etq--2{top:44%;right:0;background:#fff6cf;transition-delay:.1s}
.etq--3{top:70%;left:4%;background:#ffd0c4;transition-delay:.2s}

/* locales: tres */
.locales{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.local h3{font-size:32px}
.local__txt{flex-direction:column;align-items:flex-start}
.local__btns{display:flex;flex-wrap:wrap;gap:8px}
.local__btns .btn{font-size:15px;padding:10px 16px}
.ftr__grid{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))!important}

@media (max-width:1020px){
  .locales{grid-template-columns:minmax(0,1fr)!important}
  .ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .queso__grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .queso__txt{padding:18px;order:2}
  .queso__txt .lead{display:none}
  .queso__txt .h2{font-size:38px;margin:8px 0 0}
  .queso__metro{margin:6px 0 10px}
  .queso__metro b{font-size:32px}
  .queso__esc{height:52vh}
  .etq{font-size:12px;padding:5px 10px}
}
@media (max-width:680px){
  .ftr__grid{grid-template-columns:minmax(0,1fr)!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .nav,.hdr .btn{display:none}
  .burger{display:grid}
  .hero__grid,.idea__grid,.lab{grid-template-columns:minmax(0,1fr)}
  .hero__vis{max-width:560px;margin:0 auto;width:100%}
  .boxes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .combos,.locales{grid-template-columns:minmax(0,1fr)}
  .platos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .normas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .idea__fotos{height:520px}
  .lab__escena{max-width:480px;width:100%;margin:0 auto}
}
@media (max-width:680px){
  body{font-size:16px}
  .hero{padding-top:100px}
  .hechos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hechos div:nth-child(2){border-right:0}
  .hechos div{border-bottom:2px solid rgba(255,255,255,.12)}
  .boxes,.pasos,.lista{grid-template-columns:minmax(0,1fr)}
  .box{margin-top:14px}
  .paso{aspect-ratio:4/4.4}
  .paso:nth-child(2){transform:none}
  .platos{gap:12px}
  .plato div{flex-direction:column;align-items:flex-start;gap:4px;padding:12px}
  .plato h3{font-size:18px}
  .puntos4{grid-template-columns:minmax(0,1fr)}
  .combo{grid-template-columns:90px minmax(0,1fr);padding:12px}
  .combo img{width:90px;height:90px}
  .combo .precio{grid-column:2;text-align:left}
  .normas{grid-template-columns:minmax(0,1fr)}
  .tira{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tira figure:nth-child(n+4){display:none}
  .opina{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;padding:26px 20px}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:130px}
  .gal figure{grid-column:span 1!important;grid-row:span 2!important}
  .ftr__grid{grid-template-columns:minmax(0,1fr)}
  .barra{display:flex}
  .sticker--precio{left:-2%;width:104px;height:104px;font-size:13px}
  .sticker--precio b{font-size:30px}
  .sticker--sal{right:2%}
  .idea__fotos{height:440px}
  .pide__flotan img:nth-child(n+2){display:none}
  .carta-hero{padding-bottom:150px}
  .carta-hero .mascota{width:150px;right:50%;transform:translateX(50%)}
  .pide__flotan img{width:80px}
  .pide__flotan img:nth-child(1){top:3%}
  .pide__flotan img:nth-child(2){bottom:3%;left:auto;right:6%}
  .chips{top:74px}
  .coronas__fila{gap:4px}
  .cinta span{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .cinta__pista,.hero__bg,.lab__escena::before{animation-duration:120s}
}

/* ---------- Hero v2: CRUJE. MOJA. REPITE. ---------- */
.hero{padding-top:110px}
.hero__filas{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none;overflow:hidden}
.fila{display:flex;width:max-content;animation:fila 60s linear infinite}
.fila--inv{animation-direction:reverse;animation-duration:75s}
.fila span{font-family:var(--display);font-size:clamp(70px,11vw,170px);line-height:1;white-space:nowrap;color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.16);padding-right:.3em}
@keyframes fila{to{transform:translateX(-50%)}}
.hero__t{display:flex;flex-direction:column;font-size:clamp(66px,9.4vw,140px);line-height:.88;margin:20px 0 26px;white-space:nowrap}
.hero__t .w{position:relative;display:inline-block;width:max-content;opacity:0;animation:entra .8s cubic-bezier(.3,1.6,.5,1) forwards}
.hero__t .w--cruje{animation-delay:.25s}
.hero__t .w--moja{animation-delay:.45s;color:var(--oro);margin-bottom:.12em}
.hero__t .w--repite{animation-delay:.65s}
@keyframes entra{from{opacity:0;transform:translateY(60%) rotate(-4deg) scale(.8)}to{opacity:1;transform:none}}
.w--cruje>span{display:inline-block;animation:cruje 3.2s ease-in-out 1.4s infinite}
@keyframes cruje{0%,82%,100%{transform:none}84%{transform:translate(-4px,2px) rotate(-1.5deg)}86%{transform:translate(4px,-2px) rotate(1.5deg)}88%{transform:translate(-3px,1px)}90%{transform:translate(3px,0) rotate(.8deg)}92%{transform:none}}
.gota{position:absolute;left:0;top:78%;width:100%;height:.5em;transform-origin:top;animation:gotea 3.2s cubic-bezier(.5,0,.3,1) 1.2s infinite;transform:scaleY(0)}
@keyframes gotea{0%{transform:scaleY(0)}35%,80%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.w--moja>span,.w--moja{position:relative;z-index:1}
.vuelta{display:inline-block;width:.42em;height:.42em;margin-left:.12em;vertical-align:.08em;animation:vuelta 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes vuelta{to{transform:rotate(360deg)}}
.hero__t .w:hover>span{animation:boing .5s}

/* baraja de fotos */
.baraja{position:relative;aspect-ratio:4/4.7;margin-bottom:34px}
.carta{position:absolute;inset:0;border:4px solid var(--marino);border-radius:var(--r-l);overflow:hidden;background:var(--marino);box-shadow:0 10px 0 rgba(13,31,92,.45);
  transition:transform .8s cubic-bezier(.5,1.4,.5,1),opacity .5s;will-change:transform}
.carta img{width:100%;height:100%;object-fit:cover}
.carta[data-pos="0"]{transform:rotate(2deg);z-index:4}
.carta[data-pos="1"]{transform:rotate(-5deg) translate(-26px,10px) scale(.96);z-index:3}
.carta[data-pos="2"]{transform:rotate(7deg) translate(30px,16px) scale(.92);z-index:2}
.carta[data-pos="3"]{transform:rotate(-2deg) translate(0,24px) scale(.88);z-index:1}
.carta.sale{transform:translate(120%,-30px) rotate(24deg)!important;z-index:5}
.hero__vis .sticker--precio{z-index:6}.hero__vis .sticker--sal{z-index:6;bottom:6%}
@media (max-width:1020px){.baraja{max-width:440px;margin:0 auto 40px}}
@media (max-width:680px){
  .hero__t{font-size:clamp(58px,19vw,96px)}
  .fila span{font-size:64px}
  .eyebrow{font-size:11px;letter-spacing:.1em}
  .baraja{max-width:300px}
  .carta.sale{transform:translate(70%,-20px) rotate(20deg)!important}
}

/* ---------- La casa del oso ---------- */
/* puerta de entrada */
.puerta{background:transparent;display:block;animation:splashOut .4s ease 3.4s forwards}
.puerta__hoja{position:absolute;top:0;bottom:0;width:50.5%;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 3px,transparent 3px 60px),var(--azul);
  border:6px solid var(--marino);transition:transform 1.1s cubic-bezier(.7,0,.2,1);animation:abre 1.1s cubic-bezier(.7,0,.2,1) 2.4s forwards}
.puerta__hoja::before{content:"";position:absolute;inset:7% 12%;border:5px solid rgba(13,31,92,.55);border-radius:18px}
.puerta__hoja--i{left:0;transform-origin:left}
.puerta__hoja--d{right:0;transform-origin:right;--dir:1}
.pomo{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--oro);border:4px solid var(--marino)}
.puerta__hoja--i .pomo{right:7%}.puerta__hoja--d .pomo{left:7%}
@keyframes abre{to{transform:translateX(-102%)}}
.puerta__hoja--d{animation-name:abreD}
@keyframes abreD{to{transform:translateX(102%)}}
.puerta.out .puerta__hoja--i{transform:translateX(-102%)}
.puerta.out .puerta__hoja--d{transform:translateX(102%)}
.puerta.out{animation:none;opacity:1}
.puerta.out .puerta__cartel{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-6deg)}
.puerta__cartel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;background:#fff;border:5px solid var(--marino);border-radius:28px;
  padding:26px 40px 22px;text-align:center;box-shadow:0 10px 0 var(--marino);display:grid;justify-items:center;gap:2px;
  transition:opacity .35s,transform .4s;animation:balanceo 2.2s ease-in-out infinite;transform-origin:50% -60px}
.puerta__cartel::before{content:"";position:absolute;top:-62px;left:50%;width:4px;height:58px;background:var(--marino);transform:translateX(-50%)}
.puerta__cartel small{font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--rojo);font-size:13px}
.puerta__cartel b{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,58px);line-height:1;color:var(--marino)}
.puerta__cartel span{font-weight:800;font-size:13px;color:var(--gris);margin-top:6px}
.puerta .splash__crown{width:64px;height:48px}
@keyframes balanceo{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}

/* carteles de habitación colgando */
.num.cartel{background:#fff;color:var(--marino);border:3px solid var(--marino);border-radius:14px;padding:6px 14px 6px 6px;box-shadow:0 4px 0 var(--marino);
  position:relative;margin-top:26px;transform-origin:50% -24px;animation:balanceo 3.4s ease-in-out infinite}
.num.cartel::after{content:"";position:absolute;left:18px;right:18px;top:-24px;height:22px;border:3px solid var(--marino);border-bottom:0;border-radius:40px 40px 0 0}
.sec--azul .num.cartel,.sec--marino .num.cartel{color:var(--marino)}
.sec--azul .num.cartel::after,.sec--marino .num.cartel::after{border-color:#fff}
.sec--azul .num.cartel,.sec--marino .num.cartel{box-shadow:0 4px 0 rgba(0,0,0,.35)}

/* vídeos */
.paso video,.carta video{width:100%;height:100%;object-fit:cover;display:block}

/* oso anfitrión que camina */
.anfitrion{position:fixed;left:6px;bottom:10px;z-index:45;width:118px;pointer-events:none;will-change:transform;transition:opacity .4s}
.anfitrion.fuera{opacity:0}
.anfitrion__oso{pointer-events:auto;cursor:pointer;transition:transform .25s}
.anfitrion__oso svg{width:100%;height:auto;overflow:visible;display:block}
.anfitrion.izq .anfitrion__oso{transform:scaleX(-1)}
.anfitrion__oso .pierna{transform-box:fill-box;transform-origin:50% 0}
.anfitrion__oso .brazo{transform-box:fill-box;transform-origin:50% 85%}
.anfitrion__oso .brazo--i{transform-origin:50% 10%}
.anfitrion.anda .pierna--i{animation:paso .32s ease-in-out infinite alternate}
.anfitrion.anda .pierna--d{animation:paso .32s ease-in-out infinite alternate-reverse}
.anfitrion.anda .brazo--i{animation:brazo .32s ease-in-out infinite alternate}
.anfitrion.anda .cuerpo{animation:bota .16s ease-in-out infinite alternate}
@keyframes paso{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes brazo{from{transform:rotate(30deg)}to{transform:rotate(-30deg)}}
@keyframes bota{to{transform:translateY(-4px)}}
.anfitrion:not(.anda) .brazo--d{animation:hola 1.6s ease-in-out infinite}
@keyframes hola{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-22deg)}80%{transform:rotate(8deg)}90%{transform:rotate(-14deg)}}
.anfitrion .ojo{transform-box:fill-box;transform-origin:center;animation:parpadeo 4s infinite}
@keyframes parpadeo{0%,92%,100%{transform:none}95%{transform:scaleY(.2)}}
.anfitrion.salta .anfitrion__oso{animation:salto .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes salto{40%{translate:0 -46px}}
.anfitrion__bocadillo{position:absolute;bottom:100%;left:50%;margin-bottom:8px;transform:translateX(-30%) scale(.6);opacity:0;background:#fff;color:var(--marino);
  border:3px solid var(--marino);border-radius:18px;padding:8px 14px;font-weight:900;font-size:14px;line-height:1.25;width:max-content;max-width:220px;
  box-shadow:0 4px 0 var(--marino);transition:opacity .25s,transform .35s cubic-bezier(.3,1.7,.5,1)}
.anfitrion__bocadillo::after{content:"";position:absolute;top:100%;left:28%;border:9px solid transparent;border-top-color:var(--marino)}
.anfitrion.habla .anfitrion__bocadillo{opacity:1;transform:translateX(-30%) scale(1)}
.anfitrion.borde-d .anfitrion__bocadillo{transform:translateX(-78%) scale(1)}
.anfitrion.borde-d .anfitrion__bocadillo::after{left:auto;right:18%}
@media (max-width:680px){
  .anfitrion{width:64px;bottom:76px}
  .anfitrion__bocadillo{font-size:12px;max-width:170px;padding:6px 10px}
  .puerta__cartel{padding:20px 22px 18px}
}
.anfitrion.borde-i .anfitrion__bocadillo{transform:translateX(-12%) scale(1)}
.anfitrion.borde-i:not(.habla) .anfitrion__bocadillo{transform:translateX(-12%) scale(.6)}
.anfitrion.borde-i .anfitrion__bocadillo::after{left:22%}
@media (max-width:680px){.anfitrion{width:70px}}

/* ---------- Vida de fondo: calles y escenas ---------- */
.calle{position:relative;height:120px;overflow:hidden;pointer-events:none}
.calle--hero{margin-top:10px;border-bottom:6px solid var(--marino);background:linear-gradient(transparent 70%,rgba(13,31,92,.35) 70%)}
.calle--noche{height:110px;margin-top:40px;margin-bottom:-60px;border-bottom:4px solid rgba(255,255,255,.15)}
.paseante{position:absolute;bottom:6px;left:0;width:56px;animation-timing-function:linear;animation-fill-mode:both}
.paseante--oso{width:64px}
.paseante--peque{width:42px}
.paseante__in{width:100%}
.mira-i .paseante__in{transform:scaleX(-1)}
.paseante .bicho{width:100%;height:auto;display:block;overflow:visible}
.cruza-d{animation-name:cruzaD}.cruza-i{animation-name:cruzaI}
@keyframes cruzaD{from{left:-90px}to{left:calc(100% + 90px)}}
@keyframes cruzaI{from{left:calc(100% + 90px)}to{left:-90px}}
.paseante .pierna{transform-box:fill-box;transform-origin:50% 0}
.paseante .brazo--i{transform-box:fill-box;transform-origin:50% 10%}
.paseante.anda .pierna--i{animation:paso var(--paso,.34s) ease-in-out infinite alternate}
.paseante.anda .pierna--d{animation:paso var(--paso,.34s) ease-in-out infinite alternate-reverse}
.paseante.anda .brazo--i{animation:brazo var(--paso,.34s) ease-in-out infinite alternate}
.paseante.anda .cuerpo{animation:bota calc(var(--paso,.34s) / 2) ease-in-out infinite alternate}
.paseante .ojo{transform-box:fill-box;transform-origin:center;animation:parpadeo 4s infinite}
/* puerta de la casita */
.calle--puerta{position:absolute;left:0;right:0;bottom:0;height:200px;overflow:hidden}
.casita{position:absolute;left:50%;bottom:0;width:170px;transform:translateX(-50%);z-index:0}
.casita svg{width:100%;height:auto;display:block}
.casita__hoja{transform-box:fill-box;transform-origin:left center;transition:transform .5s}
.casita.abierta .casita__hoja{animation:puertita 1.6s ease-in-out}
@keyframes puertita{0%,100%{transform:none}20%,70%{transform:scaleX(.15)}}
.calle--puerta .paseante{bottom:2px;z-index:2}
.sale-d{animation-name:saleD}.sale-i{animation-name:saleI}
@keyframes saleD{from{left:calc(50% - 28px);transform:scale(.7);opacity:0}8%{opacity:1}30%{transform:none}to{left:calc(100% + 90px);transform:none}}
@keyframes saleI{from{left:calc(50% - 28px);transform:scale(.7);opacity:0}8%{opacity:1}30%{transform:none}to{left:-90px;transform:none}}
.pide{padding-bottom:230px!important}
/* escenas */
.escena{position:absolute;top:24px;right:3%;width:230px;height:150px;pointer-events:none;z-index:1}
.escena .bicho{width:100%;height:auto;display:block;overflow:visible}
.escena__oso{position:absolute;bottom:0;width:86px}
.escena__prop{position:absolute;bottom:0}
.escena .ojo{transform-box:fill-box;transform-origin:center;animation:parpadeo 4.6s infinite}
/* cocina */
.escena__oso--cocina{left:0}
.freidora{right:0;width:130px}
.cesta{animation:sacude .9s ease-in-out infinite}
@keyframes sacude{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px) rotate(-3deg)}55%{transform:translateY(-4px) rotate(2deg)}}
.escena--cocina .brazo--d{transform-box:fill-box;transform-origin:50% 0;animation:sacude .9s ease-in-out infinite}
.vapor{opacity:0;animation:vapor 2.2s ease-out infinite}
.v2{animation-delay:.7s}.v3{animation-delay:1.4s}
@keyframes vapor{0%{opacity:0;transform:translateY(10px) scale(.5)}30%{opacity:.85}100%{opacity:0;transform:translateY(-34px) scale(1.4)}}
/* siesta */
.escena--siesta{width:240px}
.sofa{left:0;width:220px}
.escena__oso--siesta{left:62px;bottom:18px;width:96px;transform:rotate(-14deg);transform-origin:50% 100%}
.escena__oso--siesta .cuerpo{animation:respira 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes respira{50%{transform:scale(1.04,1.06)}}
.zeta{position:absolute;left:150px;top:10px;font-family:var(--display);color:#fff;font-size:26px;opacity:0;animation:zeta 3.6s ease-out infinite}
.z2{animation-delay:1.2s;font-size:20px}.z3{animation-delay:2.4s;font-size:16px}
@keyframes zeta{0%{opacity:0;transform:translate(0,20px)}25%{opacity:1}100%{opacity:0;transform:translate(34px,-40px) rotate(14deg)}}
/* salsas */
.escena__oso--salsa{left:0}
.olla{right:0;width:140px}
.cuchara{transform-box:fill-box;transform-origin:50% 90%;animation:remueve 1.6s ease-in-out infinite}
@keyframes remueve{0%,100%{transform:rotate(-14deg) translateX(-8px)}50%{transform:rotate(14deg) translateX(8px)}}
.escena--salsa .brazo--d{transform-box:fill-box;transform-origin:50% 0;animation:remueve 1.6s ease-in-out infinite}
.burbuja{transform-box:fill-box;transform-origin:center;animation:burbuja 1.8s ease-in-out infinite}
.b2{animation-delay:.6s}.b3{animation-delay:1.2s}
@keyframes burbuja{0%{transform:scale(0)}60%{transform:scale(1.2)}70%,100%{transform:scale(0)}}
/* fotógrafo */
.escena--foto{width:170px}
.escena__oso--foto{left:0}
.camara{left:58px;bottom:62px;width:58px;animation:enfoca 3s ease-in-out infinite}
@keyframes enfoca{0%,70%,100%{transform:none}75%{transform:translateY(-3px)}}
.flash{position:absolute;left:86px;bottom:84px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 30px 18px #fff;opacity:0;animation:flash 3s infinite}
@keyframes flash{0%,72%,84%,100%{opacity:0}76%{opacity:1}}
@media (max-width:1020px){
  .escena{transform:scale(.7);transform-origin:top right;top:10px}
}
@media (max-width:680px){
  .escena{transform:scale(.5);right:2%}
  .calle{height:96px}
  .paseante{width:44px}.paseante--oso{width:50px}.paseante--peque{width:34px}
  .casita{width:130px}
  .calle--puerta{height:160px}
  .pide{padding-bottom:190px!important}
}

/* tamaños más grandes de la vida de fondo */
.calle{height:170px}
.paseante{width:82px}.paseante--oso{width:96px}.paseante--peque{width:62px}
.escena{width:320px;height:200px}
.escena__oso{width:116px}
.freidora{width:170px}.olla{width:180px}.sofa{width:280px}.escena--siesta{width:300px}
.escena__oso--siesta{left:84px;width:120px}
.zeta{left:200px}
.escena--foto{width:220px}.camara{left:78px;bottom:84px;width:72px}.flash{left:114px;bottom:110px}
.casita{width:220px}.calle--puerta{height:250px}.pide{padding-bottom:270px!important}
@media (max-width:680px){
  .calle{height:120px}
  .paseante{width:56px}.paseante--oso{width:64px}.paseante--peque{width:44px}
  .casita{width:150px}.calle--puerta{height:180px}.pide{padding-bottom:200px!important}
}

/* ---------- Tarrinas de salsa (carta) ---------- */
.tarrinas{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px}
.tarrina{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:#fff;border:3px solid var(--marino);border-radius:22px;
  padding:12px 10px 14px;box-shadow:0 4px 0 var(--marino);transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .2s,box-shadow .2s}
.tarrina svg{width:86px;height:88px;overflow:visible}
.tarrina b{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.05;color:var(--marino)}
.tarrina small{font-size:12px;font-weight:800;color:var(--gris)}
.tarrina:hover{transform:translateY(-5px) rotate(-1.5deg)}
.tarrina:nth-child(even):hover{transform:translateY(-5px) rotate(1.5deg)}
.tarrina .tapa{transform-box:fill-box;transform-origin:100% 100%;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.tarrina[aria-pressed="true"]{background:var(--cielo-2);box-shadow:0 4px 0 var(--azul);border-color:var(--azul)}
.tarrina--salsa[aria-pressed="true"] .tapa{transform:translate(18px,-22px) rotate(38deg)}
.tarrina--polvo[aria-pressed="true"] .tapa{transform:translate(0,-6px)}
.tarrina .pizca{opacity:0}
.tarrina--polvo[aria-pressed="true"] svg{animation:agita .5s ease-in-out 2}
.tarrina--polvo[aria-pressed="true"] .pizca{animation:pizca .9s ease-out infinite}
@keyframes agita{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@keyframes pizca{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-14px)}}
.tarrina--salsa[aria-pressed="true"] svg{animation:pop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{40%{transform:scale(1.12,.9)}70%{transform:scale(.95,1.06)}}
.tarrina::after{content:"✓";position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:var(--azul);color:#fff;border:3px solid var(--marino);
  display:grid;place-items:center;font-weight:900;font-size:15px;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.tarrina[aria-pressed="true"]::after{transform:scale(1)}
.tarrina.gratis::before{content:"Incluida";position:absolute;top:-11px;left:10px;background:var(--oro);border:2px solid var(--marino);border-radius:999px;font-size:10px;font-weight:900;padding:1px 8px;letter-spacing:.06em;text-transform:uppercase}
.bandeja{position:sticky;bottom:14px;z-index:15;margin-top:26px;display:flex;align-items:center;gap:16px;background:var(--marino);color:#fff;border-radius:22px;padding:14px 18px;
  box-shadow:0 6px 0 rgba(0,0,0,.25);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px)}
.bandeja__txt{flex:1;display:grid;gap:2px;font-weight:700;font-size:14px}
.bandeja__txt b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--oro)}
.bandeja__total{text-align:right}
.bandeja__total small{display:block;font-weight:800;font-size:12px;opacity:.8}
.bandeja__total b{font-family:var(--display);font-weight:400;font-size:28px}
.bandeja__vaciar{background:#fff;color:var(--marino);border-radius:999px;padding:8px 14px;font-weight:900;font-size:13px}
.bandeja.salta{animation:pop .45s cubic-bezier(.3,1.7,.5,1)}
@media (max-width:680px){
  .tarrinas{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .tarrina{padding:10px 4px 10px;border-radius:18px}
  .tarrina svg{width:62px;height:64px}
  .tarrina b{font-size:14px}
  .bandeja{bottom:76px;flex-wrap:wrap;gap:8px}
}

/* ---------- Fondos vivos en las secciones claras ---------- */
.sec > .wrap{position:relative;z-index:1}
.fondo-vivo{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(transparent 82%,rgba(13,31,92,.07) 82%)}
.fondo-vivo--lejos{bottom:auto;top:30%;height:120px;opacity:.2;background:none;filter:saturate(.5)}
.fondo-vivo--lejos .paseante{width:58px}.fondo-vivo--lejos .paseante--oso{width:66px}.fondo-vivo--lejos .paseante--peque{width:44px}
.sec:has(.fondo-vivo){padding-bottom:max(clamp(80px,10vw,140px),170px)}
@media (max-width:680px){.fondo-vivo{height:120px}.fondo-vivo--lejos{display:none}.sec:has(.fondo-vivo){padding-bottom:150px}}

/* ---------- Fondo fijo: la casa del oso ---------- */
body{background:#bfe3ff}
.fondo-casa{position:fixed;inset:0;z-index:-1;background:#bfe3ff url(assets/img/casa-del-oso.webp) center bottom/cover no-repeat}
@media (max-width:680px){.fondo-casa{background-image:url(assets/img/casa-del-oso-movil.webp);background-position:62% bottom}}
.sec--crema,.chorro[style*="crema"]{background:rgba(255,244,220,.86)!important}
.sec:not(.sec--crema):not(.sec--azul):not(.sec--marino):not(.sec--cielo){background:rgba(255,250,240,.86)}
.sec--cielo{background:rgba(207,228,255,.8)}
.queso{background-color:rgba(255,255,255,.82)}
.carta-hero~.chips,.chips{background:rgba(255,250,240,.94)}
main>.wrap{background:rgba(255,250,240,.88);box-shadow:0 0 0 100vmax rgba(255,250,240,.88);clip-path:inset(0 -100vmax)}
.ventana-casa{height:78vh;min-height:420px;display:grid;place-items:end center;padding-bottom:9vh;position:relative;z-index:2}
.ventana-casa__cartel{background:#fff;border:4px solid var(--marino);border-radius:24px;padding:16px 28px;text-align:center;box-shadow:0 8px 0 var(--marino);
  display:grid;gap:2px;transform-origin:50% -50px;animation:balanceo 3s ease-in-out infinite;position:relative}
.ventana-casa__cartel::before{content:"";position:absolute;left:22%;right:22%;top:-46px;height:42px;border:4px solid var(--marino);border-bottom:0;border-radius:60px 60px 0 0}
.ventana-casa__cartel small{font-weight:900;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--rojo)}
.ventana-casa__cartel b{font-family:var(--display);font-weight:400;font-size:clamp(30px,4.5vw,52px);line-height:1;color:var(--marino)}
.ventana-casa__cartel span{font-weight:800;font-size:14px;color:var(--gris)}

/* ---------- La familia: fichas de personajes ---------- */
.familia{background:rgba(255,250,240,.9)}
.fichas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ficha{background:#fff;border:3px solid var(--marino);border-radius:26px;overflow:hidden;box-shadow:0 6px 0 var(--marino);display:flex;flex-direction:column}
.ficha__escenario{position:relative;height:210px;overflow:hidden;border-bottom:3px solid var(--marino);
  background:linear-gradient(transparent 72%,rgba(31,79,209,.16) 72%),linear-gradient(#e9f3ff,#cfe4ff)}
.ficha__escenario::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;
  background-image:repeating-linear-gradient(0deg,rgba(31,79,209,.18) 0 10px,transparent 10px 20px),repeating-linear-gradient(90deg,rgba(31,79,209,.18) 0 10px,transparent 10px 20px)}
.ficha__num{position:absolute;top:10px;left:12px;z-index:3;background:var(--oro);border:2px solid var(--marino);border-radius:999px;font-weight:900;font-size:12px;padding:2px 9px}
.ficha__bicho,.ficha__dormido{position:absolute;left:50%;bottom:16px;width:112px;margin-left:-56px;z-index:2}
.ficha__bicho--peque{width:86px;margin-left:-43px}
.ficha .bicho{width:100%;height:auto;display:block;overflow:visible}
.ficha .pierna,.ficha .brazo,.ficha .cuerpo,.ficha .cabeza{transform-box:fill-box}
.ficha .pierna{transform-origin:50% 0}.ficha .brazo--i{transform-origin:50% 10%}.ficha .brazo--d{transform-origin:50% 0}
.ficha__dormido{display:none}
.ficha .zeta{display:none;left:62%;top:30px;color:var(--azul)}
.ficha__txt{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ficha h3{font-family:var(--display);font-weight:400;font-size:24px;line-height:1}
.ficha__rol{font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo)}
.ficha__frase{font-size:14px;font-weight:600;color:var(--gris);flex:1}
.ficha__movs{display:flex;flex-wrap:wrap;gap:6px}
.ficha__movs button{border:2px solid var(--marino);border-radius:999px;padding:4px 10px;font-weight:900;font-size:12px;background:#fff;transition:background .2s,transform .15s}
.ficha__movs button:hover{transform:translateY(-2px)}
.ficha__movs button[aria-pressed="true"]{background:var(--marino);color:#fff}
.ficha__hab{font-size:13px;font-weight:800;color:var(--azul);margin-top:4px}
.ficha__hab:hover{text-decoration:underline}
/* movimientos */
[data-mov="andar"] .ficha__bicho,[data-mov="correr"] .ficha__bicho{animation:vaiven 4s ease-in-out infinite}
[data-mov="correr"] .ficha__bicho{animation-duration:1.8s}
@keyframes vaiven{0%,100%{translate:-60px 0;scale:1 1}49%{translate:60px 0;scale:1 1}50%{translate:60px 0;scale:-1 1}99%{translate:-60px 0;scale:-1 1}}
[data-mov="andar"] .pierna--i,[data-mov="correr"] .pierna--i{animation:paso .32s ease-in-out infinite alternate}
[data-mov="andar"] .pierna--d,[data-mov="correr"] .pierna--d{animation:paso .32s ease-in-out infinite alternate-reverse}
[data-mov="andar"] .brazo--i,[data-mov="correr"] .brazo--i{animation:brazo .32s ease-in-out infinite alternate}
[data-mov="andar"] .cuerpo{animation:bota .16s ease-in-out infinite alternate}
[data-mov="correr"] .pierna--i,[data-mov="correr"] .pierna--d,[data-mov="correr"] .brazo--i{animation-duration:.16s}
[data-mov="correr"] .cuerpo{animation:bota .08s ease-in-out infinite alternate;rotate:8deg}
[data-mov="saludar"] .brazo--d{animation:hola2 .9s ease-in-out infinite}
@keyframes hola2{0%,100%{transform:rotate(-150deg)}50%{transform:rotate(-120deg)}}
[data-mov="comer"] .brazo--d{animation:come 1.4s ease-in-out infinite}
@keyframes come{0%,100%{transform:rotate(0)}40%,60%{transform:rotate(-115deg) translate(4px,-6px)}}
[data-mov="comer"] .cabeza{animation:mastica 1.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes mastica{45%,55%{transform:scale(1.03,.97)}50%{transform:scale(.98,1.03)}}
[data-mov="enfadarse"] .ficha__bicho{animation:pisoton .5s ease-in-out infinite}
@keyframes pisoton{0%,100%{translate:0 0}25%{translate:-4px 2px;rotate:-3deg}50%{translate:0 -6px}75%{translate:4px 2px;rotate:3deg}}
[data-mov="enfadarse"] .cabeza{filter:drop-shadow(0 0 0 #e6332a) saturate(1.4) hue-rotate(-25deg)}
[data-mov="enfadarse"] .brazo--i,[data-mov="enfadarse"] .brazo--d{animation:puno .25s ease-in-out infinite alternate}
@keyframes puno{to{transform:rotate(-30deg)}}
[data-mov="freir"] .brazo--d{animation:sacude .5s ease-in-out infinite}
[data-mov="freir"] .cuerpo{animation:bota .25s ease-in-out infinite alternate}
[data-mov="remover"] .brazo--d{animation:remueve 1s ease-in-out infinite}
[data-mov="remover"] .cuerpo{animation:bota .5s ease-in-out infinite alternate}
[data-mov="bailar"] .ficha__bicho{animation:baila 1s ease-in-out infinite}
@keyframes baila{0%,100%{rotate:-10deg;translate:-8px 0}50%{rotate:10deg;translate:8px -8px}}
[data-mov="bailar"] .brazo--i{animation:brazo .5s ease-in-out infinite alternate}
[data-mov="bailar"] .brazo--d{animation:hola2 .5s ease-in-out infinite}
[data-mov="saltar"] .ficha__bicho{animation:brinco .8s cubic-bezier(.3,0,.5,1) infinite}
@keyframes brinco{0%,100%{translate:0 0;scale:1.08 .92}15%{scale:.94 1.08}50%{translate:0 -70px;scale:1 1}85%{translate:0 0;scale:1.06 .94}}
[data-mov="saltar"] .pierna--i{transform:rotate(-14deg)}[data-mov="saltar"] .pierna--d{transform:rotate(14deg)}
[data-mov="dormir"] .ficha__bicho{display:none}
[data-mov="dormir"] .ficha__dormido{display:block;animation:respira 3s ease-in-out infinite;transform-origin:50% 100%;rotate:-8deg}
[data-mov="dormir"] .zeta{display:block}
@media (max-width:1020px){.fichas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .fichas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin:0 -4px}
  .ficha{scroll-snap-align:start}
}

/* movimientos de trabajo */
.ficha__escenario{height:230px}
.ficha__bicho,.ficha__dormido{width:128px;margin-left:-64px}
[data-mov="servir"] .brazo--d{animation:servir 1.2s ease-in-out infinite}
@keyframes servir{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-8deg) translateY(-6px)}}
[data-mov="servir"] .ficha__bicho{animation:vaiven 5s ease-in-out infinite}
[data-mov="servir"] .pierna--i{animation:paso .34s ease-in-out infinite alternate}
[data-mov="servir"] .pierna--d{animation:paso .34s ease-in-out infinite alternate-reverse}
[data-mov="reverencia"] .cuerpo{transform-box:fill-box;transform-origin:50% 100%;animation:reverencia 2s ease-in-out infinite}
@keyframes reverencia{0%,100%{transform:none}40%,60%{transform:rotate(22deg) translateY(4px)}}
[data-mov="reverencia"] .brazo--i{animation:none;transform:rotate(-60deg)}
[data-mov="cobrar"] .brazo--d{animation:cobra .35s ease-in-out infinite alternate}
@keyframes cobra{from{transform:rotate(-40deg)}to{transform:rotate(-55deg) translateY(-2px)}}
[data-mov="cobrar"] .cabeza{animation:asiente 1.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes asiente{0%,100%{transform:none}50%{transform:rotate(4deg)}}
[data-mov="reparar"] .brazo--d{animation:martillo .3s ease-in infinite alternate}
@keyframes martillo{from{transform:rotate(-70deg)}to{transform:rotate(10deg)}}
[data-mov="reparar"] .cuerpo{animation:bota .3s ease-in-out infinite alternate}
[data-mov="entregar"] .brazo--d{animation:entrega 1.6s ease-in-out infinite}
@keyframes entrega{0%,100%{transform:rotate(0)}35%,70%{transform:rotate(-80deg)}}
[data-mov="entregar"] .ficha__bicho{animation:entregaPaso 1.6s ease-in-out infinite}
@keyframes entregaPaso{0%,100%{translate:0 0}35%,70%{translate:16px 0}}

/* fotos de los platos en la carta */
.item{padding:10px 18px 10px 10px}
.item__foto{position:relative;flex:none;width:92px;height:92px;border-radius:16px;overflow:hidden;border:3px solid var(--marino)}
.item__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.item:hover .item__foto img{transform:scale(1.1)}
.item__foto .item__n{position:absolute;left:4px;bottom:4px;min-width:0;height:auto;padding:2px 7px;border-radius:999px;font-size:12px;border:2px solid var(--marino)}
@media (max-width:680px){.item__foto{width:72px;height:72px}}

/* zoom de los platos */
.item__foto{cursor:zoom-in;width:110px;height:110px}
@media (max-width:680px){.item__foto{width:84px;height:84px}}
.zoom-plato{position:fixed;inset:0;z-index:90;background:rgba(8,20,67,.78);display:grid;place-items:center;padding:20px;animation:aparece .25s ease}
.zoom-plato[hidden]{display:none}
@keyframes aparece{from{opacity:0}}
.zoom-plato__in{position:relative;width:min(560px,100%);background:#fff;border:4px solid var(--marino);border-radius:28px;overflow:hidden;box-shadow:0 10px 0 var(--marino);animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.zoom-plato__in img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-bottom:4px solid var(--marino)}
.zoom-plato__txt{padding:14px 18px 18px;display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center}
.zoom-plato__txt b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.05}
.zoom-plato__txt p{grid-column:1;font-weight:700;color:var(--gris);font-size:14px}
.zoom-plato__txt .p{grid-row:1/3;grid-column:2;font-family:var(--display);font-size:30px;color:var(--rojo)}
.zoom-plato__x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid var(--marino);font-size:26px;font-weight:900;line-height:1;color:var(--marino)}

/* fotos en las tarjetas de menú */
.box{padding-top:0;overflow:visible}
.box__foto{margin:0 -24px;aspect-ratio:16/10;overflow:hidden;border-radius:31px 31px 0 0;border-bottom:3px solid var(--marino);background:var(--cielo-2)}
.box__foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.box:hover .box__foto img{transform:scale(1.06)}
.box__talla{z-index:2;top:-18px}
.box__tag{z-index:2;top:14px}
.box h3{margin-top:16px}

/* ---------- Tarjetas de menú estilo cadena (producto flotando) ---------- */
.boxes{gap:26px;margin-top:70px}
.box{padding:0 24px 24px;overflow:visible}
.box__foto{margin:-64px -10px 0;aspect-ratio:1;border:0;border-radius:0;background:none;overflow:visible;position:relative;z-index:1}
.box__foto img{filter:drop-shadow(0 16px 12px rgba(13,31,92,.16));transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.box:hover .box__foto img{transform:translateY(-10px) scale(1.05) rotate(-2deg)}
.box__talla{top:16px;left:16px}
.box h3{margin-top:0;font-size:30px}
.box ul{grid-template-columns:1fr 1fr;gap:6px 10px;font-size:14px}
.box__precio{font-size:58px}
.combo img{mix-blend-mode:normal;background:#fff;object-fit:contain}
.carta-foto img{object-position:center 60%}

/* todas las tarjetas blancas; la más pedida con acentos amarillos */
.box--top{background:#fff;border-color:var(--marino);box-shadow:0 6px 0 var(--marino),0 0 0 6px var(--oro)}
.box--top .box__tag{background:var(--oro);color:var(--marino);border:2px solid var(--marino)}
.box--top .box__precio{color:var(--marino);background:var(--oro);border:3px solid var(--marino);border-radius:18px;padding:4px 14px;align-self:flex-start}
.box--top .sub{color:var(--gris)}
.box__foto{margin:-80px -14px -6px}
.boxes{margin-top:96px}

.carta-foto{background:#fff}
.carta-foto img[src*="blanco"]{object-fit:contain}

/* =========================================================
   COMPACTO (12-11): misma página, todo el contenido, menos altura
   ========================================================= */
/* ritmo general */
.sec{padding:clamp(52px,6vw,88px) 0}
.sec:has(.fondo-vivo){padding-bottom:max(clamp(52px,6vw,88px),130px)}
.fondo-vivo{height:120px}
.h2{font-size:clamp(38px,5.2vw,72px);margin:12px 0 12px}
.cab{margin-bottom:30px;gap:20px}
.num.cartel{margin-top:22px}
.ventana-casa{height:52vh;min-height:320px;padding-bottom:6vh}
.chorro{height:50px;margin-top:-25px}

/* hero: cabe en una pantalla */
.hero{padding-top:96px}
.hero__t{font-size:clamp(60px,7.6vw,118px);margin:14px 0 16px}
.hero__cta{margin-top:18px}
.coronas{margin-top:20px;padding:14px 18px}
.coronas__fila{margin:10px 0}
.baraja{max-width:440px;margin:0 auto 28px}
.hechos div{padding:12px var(--pad)}
.hechos b{font-size:21px}

/* familia: fichas más bajas */
.ficha__escenario{height:168px}
.ficha__bicho,.ficha__dormido{width:104px;margin-left:-52px;bottom:12px}
.ficha__txt{padding:12px 14px 14px;gap:5px}
.ficha h3{font-size:22px}

/* la idea */
.idea__grid{gap:44px}
.idea__fotos{height:480px}
.puntos4{margin-top:26px;gap:12px}
.punto{padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center}
.punto .ico{grid-row:span 2;width:42px;height:42px;font-size:22px}
.punto b{margin:0;font-size:20px}

/* menús */
.boxes{margin-top:72px;gap:22px}
.box__foto{margin:-64px 30px -10px}
.box h3{font-size:27px}
.box ul{margin:12px 0 14px}
.box__precio{font-size:48px}
.combos{gap:18px;margin-top:18px}
.combo{grid-template-columns:110px minmax(0,1fr) auto;padding:10px 20px 10px 10px}
.combo img{width:110px;height:110px}
.normas{margin-top:22px;gap:12px}
.normas p{padding:12px 14px}
.normas p::before{font-size:20px}

/* cómo funciona */
.paso{aspect-ratio:5/4.6}
.paso:nth-child(2){transform:translateY(20px)}

/* carta destacada */
.cats{margin-bottom:22px}
.platos{gap:16px}
.plato figure{aspect-ratio:4/3}
.plato div{padding:12px 14px}

/* tira del queso: menos recorrido */
.queso{height:165vh}

/* salsas */
.lab{gap:40px}
.lab__escena{max-width:430px;width:100%;justify-self:center}
.salsas{margin:18px 0 8px;gap:7px}
.lab h3{margin-top:14px}

/* locales */
.local figure{aspect-ratio:16/9}
.local__txt{padding:16px 18px 18px;gap:10px}
.tira{margin-top:20px}
.tira figure{aspect-ratio:1}

/* libro de visitas + otra ronda */
.opina{padding:22px 30px}
.ojos{width:96px;height:96px}
.pide__t{font-size:clamp(64px,10.5vw,160px)}
.pide .lead{margin:16px auto 22px}
.casita{width:170px}.calle--puerta{height:200px}.pide{padding-bottom:215px!important}

/* galería */
.gal{grid-auto-rows:110px;gap:12px}

/* pie */
.ftr{padding:60px 0 90px}
.ftr__lema{font-size:26px;margin:12px 0 6px}
.calle--noche{height:130px;margin-top:20px}
.ftr__marca{font-size:clamp(56px,12vw,170px);margin-top:30px}

/* ---- tablet ---- */
@media (max-width:1020px){
  .idea__fotos{height:420px}
  .lab__escena{max-width:380px}
  /* locales en carrusel horizontal */
  .locales{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:min(78%,420px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin:0 -4px;scrollbar-width:none}
  .local{scroll-snap-align:start}
}

/* ---- móvil ---- */
@media (max-width:680px){
  .sec{padding:44px 0}
  .sec:has(.fondo-vivo){padding-bottom:110px}
  .fondo-vivo{height:96px}
  .h2{font-size:clamp(34px,10vw,44px)}
  .lead{font-size:16px}
  .cab{margin-bottom:20px}
  .ventana-casa{height:40vh;min-height:260px}

  /* hero */
  .hero{padding-top:88px}
  .hero__t{font-size:clamp(52px,16vw,80px);margin:12px 0 12px}
  .hero__p{font-size:16px}
  .hero__cta{flex-wrap:nowrap;gap:8px;margin-top:14px}
  .hero__cta .btn{flex:1;justify-content:center;padding:12px 10px;font-size:16px}
  .baraja{max-width:250px;margin-bottom:22px}
  .coronas{padding:12px 14px}
  .coronas__t{font-size:20px}
  .hechos div{padding:10px 16px;font-size:13px}
  .hechos b{font-size:19px}

  /* idea: fotos más bajas, puntos en 2 columnas */
  .idea__t{font-size:26px}
  .idea__fotos{height:300px}
  .puntos4{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:20px}
  .punto{padding:12px;display:block}
  .punto .ico{width:36px;height:36px;font-size:19px}
  .punto b{font-size:17px;margin:6px 0 2px}
  .punto p{font-size:13px;line-height:1.35}

  /* menús: cajas en carrusel */
  .cab .pestanas{width:100%}
  .pestanas button{flex:1;font-size:16px;padding:9px 10px}
  .boxes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:56px -4px 0;padding:14px 4px 16px;gap:14px;scrollbar-width:none}
  .box{margin-top:0;scroll-snap-align:center;padding:0 18px 18px}
  .box__foto{margin:-58px 40px -8px}
  .box h3{font-size:24px}
  .box__precio{font-size:42px}
  .combos{gap:12px}
  .combo{grid-template-columns:80px minmax(0,1fr);gap:4px 12px}
  .combo img{width:80px;height:80px;grid-row:span 2}
  .combo h3{font-size:22px}
  .combo p{font-size:13px;margin-top:2px}
  .combo .precio{font-size:30px}
  .combo .precio small{display:inline;margin-left:6px}
  .normas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .normas p{padding:10px 12px;font-size:13px}

  /* cómo funciona: carrusel */
  .pasos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -4px;padding:4px 4px 14px;gap:14px;scrollbar-width:none}
  .paso{aspect-ratio:4/4.6;scroll-snap-align:center}

  /* carta: categorías en una fila deslizable, fotos más bajas */
  .cats{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1*var(--pad)) 18px;padding:2px var(--pad) 6px;scrollbar-width:none}
  .cats a{flex:none;font-size:14px;padding:7px 13px}
  .platos{gap:10px}
  .plato figure{aspect-ratio:1/0.85}
  .plato div{padding:9px 10px 10px}
  .plato h3{font-size:17px}
  .plato small{font-size:12px}
  .plato .p{font-size:20px}
  .plato--todo{padding:16px}.plato--todo h3{font-size:26px}
  .plato--todo .flecha{width:52px;height:52px}

  /* queso */
  .queso{height:150vh}
  .queso__esc{height:44vh}

  /* salsas */
  .lab{gap:20px}
  .lab__escena{max-width:240px}
  .lab__nombre{font-size:18px;padding:6px 14px}
  .salsa{font-size:13px;padding:5px 11px 5px 6px;border-width:2px}
  .salsa::before{width:16px;height:16px}
  .lab h3{font-size:21px}

  /* locales */
  .locales{grid-auto-columns:84%}
  .local h3{font-size:28px}
  .local__btns .btn{font-size:14px;padding:9px 13px}
  .tira{gap:10px;margin-top:14px}

  /* opina / pide */
  .opina{padding:20px 18px;gap:12px}
  .ojos{width:80px;height:80px}
  .pide__t{font-size:clamp(58px,19vw,84px)}
  .casita{width:130px}.calle--puerta{height:150px}.pide{padding-bottom:165px!important}

  /* galería */
  .gal{grid-auto-rows:100px;gap:10px}

  /* pie: dos columnas */
  .ftr{padding:44px 0 96px}
  .ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:22px 16px}
  .ftr__grid>div:first-child{grid-column:1/-1}
  .ftr p,.ftr li{font-size:14px}
  .ftr h4{font-size:19px;margin-bottom:6px}
  .calle--noche{height:100px}
  .ftr__marca{margin-top:20px}
}
/* fotos reales de los locales */
.local figure img[src*="local-bcn"]{object-position:50% 30%}
.local figure img[src*="local-valencia"]{object-position:50% 25%}
.local figure img[src*="local-salou"]{object-position:50% 40%}

/* El recibidor: cuadros con el oso en acción */
.puntos4{margin-top:22px;gap:16px}
.punto{display:flex;flex-direction:column;padding:0;overflow:hidden}
.punto__foto{aspect-ratio:4/3;overflow:hidden;border-bottom:3px solid var(--marino);background:var(--cielo-2)}
.punto__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .5s}
.punto:hover .punto__foto img{transform:scale(1.06)}
.punto b{margin:12px 16px 2px;font-size:21px}
.punto p{margin:0 16px 14px}
@media (max-width:680px){
  .punto{display:flex}
  .punto b{margin:8px 10px 2px;font-size:16px}
  .punto p{margin:0 10px 10px;font-size:12.5px}
}

/* página galería */
.galeria-pag{padding-top:130px!important;min-height:100vh}
@media (max-width:680px){.galeria-pag{padding-top:110px!important}}
.nav a[aria-current="page"]{background:var(--cielo-2)}

/* splash en mayúsculas */
.puerta__cartel b{text-transform:uppercase;letter-spacing:.02em}

/* tarjeta de salsas: enlace a la sección */
.plato--salsas{display:block;color:inherit}
.plato:not(.plato--todo):not(.plato--salsas){cursor:pointer}
.zoom-plato__cta{grid-column:1/-1;justify-self:start;margin-top:10px;font-size:15px;padding:10px 16px}
.zoom-plato__in img{object-fit:cover}

/* baraja del inicio un poco más arriba */
.baraja{margin-bottom:64px}
.hero__vis .sticker--sal{bottom:12%}
@media (max-width:680px){.baraja{margin-bottom:40px}}

/* cartel colgante de "La casa del oso" */
.colgante{position:relative;display:grid;justify-items:center;transform-origin:50% 0;animation:balanceo 3.2s ease-in-out infinite}
.colgante__clavo{width:22px;height:22px;border-radius:50%;background:var(--oro);border:4px solid var(--marino);box-shadow:0 3px 0 rgba(13,31,92,.35);position:relative;z-index:3}
.colgante__cuerda{width:min(300px,62vw);height:64px;margin-top:-12px;display:block;overflow:visible}
.ventana-casa .ventana-casa__cartel{animation:none;transform:none;margin-top:-6px;min-width:min(420px,84vw);
  background:linear-gradient(var(--oro) 0 14px,#fff 14px);border:5px solid var(--marino);border-radius:26px;
  padding:34px 34px 18px;box-shadow:0 10px 0 var(--marino),0 22px 30px rgba(13,31,92,.25);gap:4px}
.ventana-casa .ventana-casa__cartel::before{content:none}
.ventana-casa__cartel::after{content:"";position:absolute;left:10px;right:10px;top:22px;bottom:10px;border:3px dashed rgba(13,31,92,.18);border-radius:18px;pointer-events:none}
.colgante__corona{position:absolute;top:-30px;left:50%;width:58px;height:44px;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 3px 0 rgba(13,31,92,.3))}
.ventana-casa__cartel b{text-transform:uppercase;letter-spacing:.02em;font-size:clamp(32px,5vw,56px)}
.ventana-casa__cartel small{font-size:13px}
.ventana-casa__cartel span{display:inline-flex;align-items:center;gap:6px;justify-self:center;background:var(--cielo-2);border:2px solid var(--marino);border-radius:999px;padding:3px 12px;font-size:13px;color:var(--marino);margin-top:4px}
.ventana-casa{place-items:end center}
@media (prefers-reduced-motion:reduce){.colgante{animation:none}}

/* hero: baraja de fotos más arriba (a la altura del título) */
@media (min-width:1021px){
  .hero__grid{align-items:start}
  .hero__vis{align-self:start;margin-top:34px}
  .baraja{margin-bottom:40px}
}
@media (max-width:1020px){.hero__vis{margin-top:-10px}}
/* vecinos: gorro con hélice */
.helice{transform-box:fill-box;transform-origin:center;animation:helice .5s linear infinite}
@keyframes helice{0%{transform:scaleX(1)}50%{transform:scaleX(.15)}100%{transform:scaleX(1)}}

/* MOJA.: la salsa chorrea desde debajo de las letras */
.hero__t .w--moja{margin-bottom:.32em;isolation:isolate}
.hero__t .w--moja .gota{position:absolute;left:.02em;top:auto;bottom:-.34em;width:calc(100% - .5em);height:.62em;z-index:-1;
  transform:none;transform-origin:top;animation:chorrea 3.6s ease-in-out 1.2s infinite;overflow:visible}
.gota__salsa{transform-box:fill-box;transform-origin:top}
@keyframes chorrea{0%,100%{transform:scaleY(.92)}50%{transform:scaleY(1.08)}}
.gotita{transform-box:fill-box;transform-origin:center;opacity:0;animation:gotita 3.6s ease-in 1.2s infinite}
.gotita.g2{animation-delay:2.4s}.gotita.g3{animation-delay:3.1s;animation-duration:4.2s}
@keyframes gotita{0%,35%{opacity:0;transform:translateY(-18px) scale(.4)}45%{opacity:1;transform:translateY(-6px) scale(1)}80%{opacity:1;transform:translateY(26px) scale(.9,1.1)}100%{opacity:0;transform:translateY(34px) scale(.6)}}
@media (prefers-reduced-motion:reduce){.hero__t .w--moja .gota,.gotita{animation:none}.gotita{opacity:0}}
.hero__t .w--moja>span,.hero__t .w--moja{text-shadow:0 .06em 0 #0d1f5c}
.hero__t .w--moja .gota{bottom:-.3em;height:.6em;left:.04em;width:calc(100% - .62em)}
.hero__t .w--moja .gota svg,.hero__t .w--moja .gota{overflow:visible}
.tira video{width:100%;height:100%;object-fit:cover;display:block}
.tira video[src*="llamada"]{object-position:50% 80%}
/* la cinta de salsas ya no tapa el texto de los datos */
.hechos div{padding-bottom:30px}
@media (max-width:680px){.hechos div{padding-bottom:14px}.hechos div:nth-child(n+3){padding-bottom:28px}}