/* Home Sushi Torrevieja - the river world.
   Warm dark wood, lantern amber, soft gold, over living water.
   Shared by every page. Fonts are self-hosted (GDPR): see fonts.relative.css */
:root{
  --agua:    #1A120D;   /* the ground: warm dark, never void */
  --agua-2:  #241811;
  --agua-3:  #2F2016;
  --madera:  #3A2718;   /* rich wood */
  --laca:    #C8362E;   /* deep lacquer red: the spicy mark, one accent job */
  --ambar:   #FFB347;   /* lantern amber: emphasis */
  --oro:     #F2C14E;   /* soft gold: numbers, prices, current state */
  --oro-2:   #D9A83A;
  --shu:     var(--oro);          /* legacy alias kept for the mockups */
  --bone:    #FBF7EE;
  --bone-2:  rgba(251,247,238,.80);
  --bone-3:  rgba(251,247,238,.56);
  --line:    rgba(242,193,78,.30);
  --line-2:  rgba(251,247,238,.12);
  /* los acentos. El sitio vivia de un solo dorado; estos cinco colores tienen
     nombre y oficio japones, y estan aclarados para leerse sobre la madera
     oscura. Cada uno identifica una cosa, no se reparten al azar. */
  --ai:      #6BA3D6;   /* ai, el indigo del tinte: grupos y empresa */
  --matcha:  #8FBF6A;   /* matcha: familias, lo verde y sano */
  --sakura:  #F0A5B8;   /* sakura: fiestas y cumpleanos */
  --murasaki:#A98CD9;   /* murasaki, el purpura noble: reuniones */
  --laca-2:  #E86A5E;   /* la laca, aclarada para texto e iconos */
  --acento:  var(--oro);          /* el acento en curso; lo cambian los bloques */
  --e-out:   cubic-bezier(.16,1,.3,1);
  --e-flip:  cubic-bezier(.22,1,.30,1);
  --r-lg:22px; --r-md:16px; --r-sm:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--agua); color:var(--bone);
  font-family:'Manrope','Golos Text',system-ui,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100dvh;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--ambar); outline-offset:3px}
.wrap{max-width:1360px; margin:0 auto; padding:0 40px}
.grain{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E")}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* the world: water below, veil, petals above, page on top */
#agua{position:fixed; inset:0; width:100vw; height:100dvh; z-index:0; display:block}
.veil{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,18,13,.42) 0%, rgba(26,18,13,.30) 34%,
    rgba(26,18,13,.72) 70%, rgba(26,18,13,.94) 100%)}
#aire{position:fixed; inset:0; width:100vw; height:100dvh; z-index:2; pointer-events:none}
/* the photo ground: a licensed photograph, full page, that drifts and leans (world.js) */
#fondo{position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--agua)}
#fondo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  transform:scale(1.12); will-change:transform; filter:saturate(.92) contrast(1.04)}
.veil--photo{background:
  radial-gradient(90% 60% at 50% 20%, rgba(255,179,71,.06) 0%, transparent 60%),
  linear-gradient(90deg, rgba(26,18,13,.34) 0%, rgba(26,18,13,.10) 50%, rgba(26,18,13,.04) 100%),
  linear-gradient(180deg, rgba(26,18,13,.30) 0%, rgba(26,18,13,.18) 28%, rgba(26,18,13,.58) 64%, rgba(26,18,13,.90) 100%)}
/* blossom glows: soft pink lights that wander around the tree (world.js moves them) */
#fondo .glow{position:absolute; left:0; top:0; width:38vmin; height:38vmin; border-radius:50%; pointer-events:none;
  mix-blend-mode:screen; filter:blur(28px); will-change:transform, opacity;
  background:radial-gradient(circle, rgba(255,170,200,.62) 0%, rgba(255,140,180,.30) 38%, rgba(255,120,170,0) 70%)}
#fondo .glow.b{background:radial-gradient(circle, rgba(255,215,225,.55) 0%, rgba(255,175,205,.26) 40%, rgba(255,150,190,0) 70%)}
#fondo .glow.c{background:radial-gradient(circle, rgba(255,150,175,.50) 0%, rgba(255,120,160,.24) 40%, rgba(255,100,150,0) 70%)}
body.photo .hero h1{text-shadow:0 2px 6px rgba(0,0,0,.55), 0 4px 40px rgba(0,0,0,.85)}
body.photo .hero .sub,body.photo .lede{text-shadow:0 1px 3px rgba(0,0,0,.7), 0 2px 22px rgba(0,0,0,.8)}
body.photo .rows{background:rgba(26,18,13,.42); backdrop-filter:blur(6px); border-radius:var(--r-lg); padding:8px 20px}
body.photo .row dt{color:var(--bone-2)}
main{position:relative; z-index:3}
footer{position:relative; z-index:3}

/* type */
.mincho{font-family:'Prata',serif; font-weight:400}
h1,h2,h3{font-family:'Prata',serif; font-weight:400; letter-spacing:-.012em; line-height:1.06}
h1{font-size:clamp(38px,5.4vw,84px); text-shadow:0 2px 34px rgba(0,0,0,.8)}
h2{font-size:clamp(28px,3.2vw,46px)}
h1 em,h2 em{font-style:normal; color:var(--ambar)}
.red{color:var(--oro)}
.lede{color:var(--bone-2); font-size:17px; line-height:1.62; max-width:58ch}
.lede b{color:var(--bone); font-weight:600}
.num{font-family:'Prata',serif; font-weight:400; color:var(--oro); line-height:.9;
  display:inline-flex; align-items:baseline; gap:2px}
.num i{font-style:normal; font-size:.46em; color:var(--laca)}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(20,13,9,.72); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid rgba(251,247,238,.07)}
.nav__in{max-width:1360px; margin:0 auto; padding:0 40px; height:68px;
  display:flex; align-items:center; gap:22px}
.nav__mark{text-decoration:none; display:flex; align-items:center; flex:none}
.nav__mark img{height:32px; width:auto; display:block}
.nav__links{display:flex; gap:2px; margin-left:8px}
.nav__links a{
  text-decoration:none; font-size:14.5px; font-weight:600; color:var(--bone-2);
  height:40px; padding:0 15px; border-radius:999px; display:inline-flex; align-items:center;
  transition:color .3s var(--e-out), background .3s var(--e-out);
}
.nav__links a:hover{color:var(--bone); background:rgba(251,247,238,.06)}
.nav__links a[aria-current=page]{color:var(--oro); background:rgba(242,193,78,.12)}
.nav__cta{display:flex; align-items:center; gap:10px; order:2}
.nav__burger{display:none; width:44px; height:44px; border-radius:999px; border:1px solid var(--line);
  background:rgba(26,18,13,.6); color:var(--bone); cursor:pointer; place-items:center}
.nav__burger span{display:block; width:18px; height:2px; background:currentColor; border-radius:2px;
  position:relative; transition:transform .35s var(--e-out), background .2s}
.nav__burger span::before,.nav__burger span::after{content:''; position:absolute; left:0; width:18px; height:2px;
  background:currentColor; border-radius:2px; transition:transform .35s var(--e-out)}
.nav__burger span::before{top:-6px} .nav__burger span::after{top:6px}
body.nav-open .nav__burger span{background:transparent}
body.nav-open .nav__burger span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .nav__burger span::after{transform:translateY(-6px) rotate(-45deg)}
.btn{
  font-family:inherit; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer;
  height:44px; padding:0 20px; border-radius:999px; border:1px solid transparent;
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  transition:transform .3s var(--e-out), background .3s var(--e-out), border-color .3s var(--e-out), color .3s var(--e-out);
}
.btn:active{transform:scale(.97)}
.btn--shu,.btn--oro{background:var(--oro); color:#241505}
.btn--shu:hover,.btn--oro:hover{background:var(--ambar); color:#241505}
.btn--wa{background:#1E9E52; color:#fff}
.btn--wa:hover{background:#25B862}
.btn--ghost{border-color:var(--line); color:var(--bone); background:rgba(26,18,13,.35);
  backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--ambar); background:rgba(242,193,78,.10)}
.btn--laca{background:var(--laca); color:#fff}
.btn--laca:hover{background:var(--laca-2)}
/* el boton que se pinta del acento del bloque en el que vive */
.btn--acento{background:var(--acento); color:#241505}
.btn--acento:hover{filter:brightness(1.12)}
.btn--acento-linea{border-color:var(--acento); color:var(--acento); background:rgba(26,18,13,.35)}
.btn--acento-linea:hover{background:color-mix(in srgb, var(--acento) 14%, transparent)}
.btn--icon{width:44px; padding:0; justify-content:center}
.btn--icon .t{display:none}

/* sections */
section{padding:96px 0}
.sec-head{margin-bottom:44px}
.sec-head p{margin-top:16px}

/* pills / tools */
.pill{font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--bone-2);
  background:rgba(26,18,13,.45); border:1px solid var(--line-2); height:42px; padding:0 18px;
  border-radius:999px; backdrop-filter:blur(8px);
  transition:color .3s var(--e-out), background .3s var(--e-out), border-color .3s var(--e-out), transform .2s var(--e-out)}
.pill:hover{color:var(--bone); border-color:var(--ambar)}
.pill:active{transform:scale(.97)}
.pill[aria-pressed=true]{background:var(--oro); border-color:var(--oro); color:#241505}
.tools{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:34px}
.count{margin-left:auto; font-size:13px; color:var(--bone-3); font-variant-numeric:tabular-nums}

/* glass card: the one surface material of the site */
.card{position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(168deg, rgba(51,34,21,.18) 0%, rgba(29,19,12,.55) 100%), rgba(38,25,16,.62);
  border:1px solid rgba(242,193,78,.20); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .45s var(--e-out), box-shadow .45s var(--e-out), transform .45s var(--e-out)}
.card:hover{border-color:rgba(255,179,71,.5); box-shadow:0 26px 60px rgba(0,0,0,.45)}

/* the dish photo, cut from the atlas */
.foto{background-color:rgba(16,10,7,.5); background-repeat:no-repeat; border-radius:var(--r-md)}

/* the rivers: one horizontal current per section, each drifting the opposite
   way to the one below it. Cards flip: front photo + number, back the facts. */
.rio-wrap{position:relative}
.rio{--tilt:0deg; display:flex; gap:14px; overflow-x:auto; padding:18px 40px 22px;
  direction:ltr;   /* una cinta transportadora no tiene sentido de lectura: en
    arabe (dir=rtl) scrollLeft pasa a ser negativo y el bucle de arrastre
    teletransporta la cinta en cada fotograma. La cinta va siempre en LTR. */
  scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain;
  touch-action:pan-x pan-y;            /* el dedo desliza la cinta con inercia del navegador */
  -webkit-overflow-scrolling:touch; scroll-behavior:auto;
  perspective:1600px; perspective-origin:50% 50%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%)}
.rio::-webkit-scrollbar{display:none}
.rio.dragging{cursor:grabbing; scroll-behavior:auto}
.rio.dragging .ficha{pointer-events:none}
.ficha{flex:none; width:236px; perspective:1100px; position:relative;
  background:none; border:0; padding:0; text-align:left; color:inherit; font:inherit; text-decoration:none;
  cursor:pointer; outline-offset:4px; border-radius:var(--r-lg);
  transform:rotateY(var(--tilt)); transition:transform .45s var(--e-out)}
.ficha .cap{margin-top:9px; padding:0 4px; font-size:13.5px; font-weight:600; color:var(--bone-2); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 8px rgba(0,0,0,.8)}
.ficha__in{position:relative; height:236px; transform-style:preserve-3d; border-radius:var(--r-lg);
  transition:transform .64s var(--e-flip), box-shadow .5s var(--e-out);
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ficha.flip .ficha__in{transform:rotateY(180deg) translateY(-6px)}
@media (hover:hover) and (pointer:fine){
  .ficha:hover .ficha__in{transform:rotateY(180deg) translateY(-6px); box-shadow:0 26px 54px rgba(0,0,0,.55)}
}
.ficha:focus-visible .ficha__in{transform:rotateY(180deg) translateY(-6px)}
.ficha__front,.ficha__back{position:absolute; inset:0; border-radius:var(--r-lg); overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid rgba(242,193,78,.24); background:rgba(38,25,16,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.ficha__front .foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0;
  transition:transform .8s var(--e-out)}
@media (hover:hover) and (pointer:fine){ .ficha:hover .ficha__front .foto{transform:scale(1.05)} }
.ficha__front::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,10,7,.0) 45%, rgba(16,10,7,.82) 100%)}
.ficha__front .num{position:absolute; left:16px; bottom:12px; font-size:46px; z-index:1;
  text-shadow:0 2px 14px rgba(0,0,0,.9)}
.ficha__front .spice{position:absolute; top:12px; right:12px; z-index:1; font-size:10px; font-weight:800;
  letter-spacing:.1em; color:#fff; background:var(--laca); padding:4px 9px; border-radius:999px;
  box-shadow:0 4px 14px rgba(200,54,46,.45)}
.ficha__front .np{position:absolute; inset:0; display:grid; place-items:center; color:var(--bone-3);
  font-size:12px; text-align:center; padding:0 30px}
.ficha__back{transform:rotateY(180deg); padding:18px 18px 16px; display:flex; flex-direction:column;
  background:linear-gradient(165deg, #3E2614, #1B100A 78%); border-color:rgba(255,179,71,.45)}
.ficha__back::before{content:''; position:absolute; left:18px; right:18px; top:58px; height:1px;
  background:linear-gradient(90deg, rgba(242,193,78,.55), transparent)}
.ficha__back > *{opacity:0; transform:translateY(8px); transition:opacity .35s var(--e-out), transform .45s var(--e-out)}
.ficha:hover .ficha__back > *,.ficha.flip .ficha__back > *,.ficha:focus-visible .ficha__back > *{opacity:1; transform:none}
.ficha__back > :nth-child(1){transition-delay:.12s} .ficha__back > :nth-child(2){transition-delay:.17s}
.ficha__back > :nth-child(3){transition-delay:.22s} .ficha__back > :nth-child(4){transition-delay:.26s}
.ficha__back > :nth-child(5){transition-delay:.30s} .ficha__back > :nth-child(6){transition-delay:.34s}
.ficha__back .num{font-size:30px}
.ficha__back .sec{margin-top:8px; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ambar); font-weight:800}
.ficha__back .nom{margin-top:10px; font-family:'Manrope',sans-serif; font-size:16px; font-weight:700; color:var(--bone); line-height:1.25}
.ficha__back .nom-en{margin-top:3px; font-size:12.5px; color:var(--bone-3)}
.ficha__back .als{display:flex; gap:4px; flex-wrap:wrap; margin-top:auto; padding-top:10px}
.ficha__back .als i{font-style:normal; font-size:9.5px; font-weight:700; color:var(--bone-2);
  border:1px solid rgba(251,247,238,.22); border-radius:999px; padding:2px 7px}
.ficha__back .als i.hot{background:var(--laca); border-color:var(--laca); color:#fff}
.ficha__back .ver{margin-top:10px; font-size:12.5px; font-weight:700; color:var(--oro);
  display:inline-flex; align-items:center; gap:6px}
.ficha__back .ver::after{content:''; width:26px; height:1px; background:currentColor;
  transform:scaleX(.54); transform-origin:0 50%; transition:transform .3s var(--e-out)}
.ficha:hover .ficha__back .ver::after{transform:scaleX(1)}
.ficha.dimmed{opacity:.2; filter:saturate(.3)}
.ficha.now .ficha__in{box-shadow:0 22px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,179,71,.35)}
.ficha.now{transform:rotateY(var(--tilt)) translateY(-6px)}
.ficha:active .ficha__in{transform:rotateY(180deg) translateY(-2px) scale(.97)}
.rio-sec{position:relative}
.rio-sec .rio-head{display:flex; align-items:baseline; gap:14px; padding:26px 40px 0}
.rio-sec .rio-head h2{font-size:clamp(22px,2.4vw,34px)}
.rio-sec .rio-head span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); font-weight:700}
@media (max-width:760px){
  .rio{padding:10px 16px 14px; gap:10px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%)}
  .ficha{width:184px} .ficha__in{height:184px} .ficha .cap{font-size:12px}
  .ficha__front .num{font-size:36px; left:12px; bottom:9px}
  .ficha__back{padding:14px}
  .ficha__back::before{top:50px}
  .ficha__back .nom{font-size:14px}
  .rio-sec .rio-head{padding:18px 16px 0}
}
@media (prefers-reduced-motion:reduce){
  .ficha,.ficha__in,.ficha__front .foto,.ficha__back > *{transition:none}
}

/* tiles (galeria) */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.tile{position:relative; border-radius:var(--r-md); overflow:hidden; cursor:pointer; border:0; padding:0;
  background:rgba(38,25,16,.62); aspect-ratio:1; text-align:left; color:inherit;
  outline-offset:-2px; transition:transform .45s var(--e-out)}
.tile .foto{position:absolute; inset:0; border-radius:0; transition:transform .7s var(--e-out)}
.tile:hover .foto{transform:scale(1.06)}
.tile figcaption,.tile .cap{position:absolute; left:0; right:0; bottom:0; padding:12px 14px; font-size:13px;
  background:linear-gradient(180deg,transparent,rgba(16,10,7,.9)); color:var(--bone-2);
  display:flex; align-items:baseline; gap:8px}
.tile .cap b{font-family:'Prata',serif; font-weight:400; color:var(--oro); font-size:20px; line-height:1}
.tile .cap b i{font-style:normal; font-size:11px; color:var(--laca)}

/* rows (facts) */
.rows{display:grid; gap:0}
.row{display:grid; grid-template-columns:170px 1fr; gap:24px; padding:20px 0;
  border-top:1px solid var(--line-2)}
.row dt{font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-3)}
.row dd{font-size:16.5px}
.row dd a{color:var(--oro); text-decoration:none; box-shadow:inset 0 -1px 0 rgba(242,193,78,.5);
  display:inline-block; padding:3px 0}

/* events */
.ev{display:grid; grid-template-columns:150px 1fr auto; gap:26px; align-items:center;
  padding:26px 0; border-top:1px solid var(--line-2)}
.ev__when{font-family:'Prata',serif; font-weight:400; font-size:28px; color:var(--oro); line-height:1}
.ev__when small{display:block; font-size:12px; color:var(--bone-3); font-family:'Manrope',sans-serif;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-top:6px}
.ev__what h3{font-size:21px; margin-bottom:6px}
.ev__what p{color:var(--bone-2); font-size:14.5px; max-width:60ch}
/* socials */
.socials{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.soc{display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 18px; border-radius:999px;
  border:1px solid var(--line); text-decoration:none; font-size:14px; font-weight:600; color:var(--bone);
  background:rgba(26,18,13,.35);
  transition:border-color .3s var(--e-out), background .3s var(--e-out)}
.soc:hover{border-color:var(--ambar); background:rgba(242,193,78,.10)}
.soc[data-soon]{opacity:.62; cursor:default; pointer-events:none}
.soc[data-soon]::after{content:attr(data-soon-label); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-3); border:1px solid var(--line-2);
  padding:2px 7px; border-radius:999px}

.note{margin-top:44px; padding:20px 24px; border-radius:var(--r-md); font-size:13.5px; color:var(--bone-2);
  border:1px solid var(--line); background:rgba(242,193,78,.06)}
.note b{color:var(--oro)}
.legal{font-size:12.5px; color:var(--bone-3); line-height:1.6}

/* the socials, top right in the bar: small lacquer discs, the brand's own shapes */
.socs{display:flex; gap:8px; align-items:center; order:1; margin-left:auto; padding-right:12px; margin-right:4px;
  border-right:1px solid var(--line-2)}
.socs__a{width:40px; height:40px; border-radius:999px; display:grid; place-items:center; color:var(--bone-2);
  border:1px solid var(--line-2); background:rgba(26,18,13,.42); text-decoration:none; position:relative;
  transition:color .25s var(--e-out), border-color .25s var(--e-out), background .25s var(--e-out), transform .25s var(--e-out)}
.socs__a:hover{color:#241505; background:var(--oro); border-color:var(--oro); transform:translateY(-2px)}
/* WhatsApp is the one that answers today, so it wears its own green */
.socs__a--wa{background:#1E9E52; border-color:#1E9E52; color:#fff}
.socs__a--wa:hover{background:#25b862; border-color:#25b862; color:#fff; transform:translateY(-2px)}
.socs__a:active{transform:scale(.94)}
.socs__a.is-soon{opacity:.42; cursor:default}
.socs__a.is-soon:hover{color:var(--bone-2); background:rgba(26,18,13,.42); border-color:var(--line-2); transform:none}
.socs__a.is-soon::after{content:''; position:absolute; right:3px; bottom:3px; width:6px; height:6px; border-radius:999px;
  background:var(--bone-3); box-shadow:0 0 0 2px rgba(26,18,13,.8)}

/* the map: OpenStreetMap tiles fetched once at build time and served from here */
.mapcard{position:relative; overflow:hidden; padding:0}
.mapcard__img{display:block; width:100%; height:clamp(240px,34vw,360px); object-fit:cover; object-position:50% 50%;
  transition:transform 1.2s var(--e-out)}
.mapcard:hover .mapcard__img{transform:scale(1.03)}
.mapcard__pin{position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); pointer-events:none}
.mapcard__pin svg{filter:drop-shadow(0 6px 14px rgba(0,0,0,.65))}
.mapcard__pin::after{content:''; position:absolute; left:50%; bottom:-7px; width:16px; height:6px; border-radius:50%;
  transform:translateX(-50%); background:rgba(0,0,0,.5); filter:blur(2px)}
.mapcard__ring{position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:999px;
  border:2px solid var(--oro); opacity:0; animation:ping 3.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.6); opacity:.75} 70%{transform:scale(4.6); opacity:0} 100%{opacity:0}}
.mapcard__over{position:absolute; left:0; right:0; bottom:0; padding:16px 18px; display:flex; align-items:flex-end;
  justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:linear-gradient(180deg, transparent, rgba(16,10,7,.86))}
.mapcard__addr{font-size:13.5px; color:var(--bone); line-height:1.4; text-shadow:0 1px 6px rgba(0,0,0,.9)}
.mapcard__addr b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.6vw,21px); color:var(--bone)}
.mapcard__cred{position:absolute; top:8px; right:10px; font-size:10px; color:rgba(251,247,238,.5);
  background:rgba(16,10,7,.55); padding:2px 7px; border-radius:999px}
.mapcard__cred a{color:inherit; text-decoration:none}
@media (prefers-reduced-motion:reduce){ .mapcard__ring{animation:none; opacity:.5} }


/* the local: one live component for hours, today's price, address */
.local{display:grid; gap:14px}
.local__status{display:flex; align-items:baseline; gap:10px; font-size:14px; color:var(--bone-2)}
.local__status i{width:9px; height:9px; border-radius:999px; background:#8b6b52; align-self:center; box-shadow:0 0 0 3px rgba(139,107,82,.25)}
.local__status.is-open i{background:#3FBF6F; box-shadow:0 0 0 3px rgba(63,191,111,.22)}
.local__status b{color:var(--bone); font-weight:700}
.local__prices{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.local__prices > div{position:relative; padding:14px 14px 12px; border-radius:var(--r-md); border:1px solid var(--line-2); background:rgba(26,18,13,.35);
  transition:border-color .3s var(--e-out), background .3s var(--e-out)}
.local__prices > div.hoy{border-color:var(--oro); background:rgba(242,193,78,.10)}
.local__prices em{position:absolute; top:-9px; left:12px; font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  color:#241505; background:var(--oro); padding:2px 8px; border-radius:999px}
.local__prices b{display:block; font-family:var(--serif); font-weight:400; color:var(--oro); font-size:clamp(24px,2.3vw,34px); line-height:1}
.local__prices .kids b{color:var(--bone)}
.local__prices span{display:block; margin-top:5px; font-size:11.5px; color:var(--bone-2); line-height:1.35}
.local__note{font-size:12px; color:var(--bone-3); margin-top:-4px}
.local__hours{display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline; padding:12px 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.local__hours > span:first-child{flex-basis:100%; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); font-weight:700}
.local__hours .h{display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap}
.local__hours b{font-family:var(--serif); font-weight:400; color:var(--bone); font-size:clamp(18px,1.6vw,24px); direction:ltr; unicode-bidi:isolate}
.local__hours small{font-size:11px; color:var(--bone-3); text-transform:uppercase; letter-spacing:.1em}
.local__addr{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; font-size:14px; color:var(--bone-2); line-height:1.4}
.local__copy{flex:none; font:inherit; font-size:12px; font-weight:700; color:var(--oro); background:none; border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer;
  transition:border-color .2s, transform .2s var(--e-out)}
.local__copy:hover{border-color:var(--ambar)} .local__copy:active{transform:scale(.96)}
.local__go{display:flex; gap:10px; flex-wrap:wrap}
.socials--foot{margin-top:10px} .socials--foot .soc{height:38px; padding:0 13px; font-size:13px; gap:8px}
.socials--foot .soc[data-soon]{opacity:.62}
.soc[data-soon]::after{content:attr(data-soon-label)}

/* the music button, every page */
.orb{position:fixed; z-index:30; right:20px; bottom:18px; width:50px; height:50px; border-radius:999px; border:1px solid rgba(242,193,78,.4);
  background:rgba(31,20,13,.8); backdrop-filter:blur(10px); color:var(--ambar); cursor:pointer; display:grid; place-items:center;
  transition:transform .35s var(--e-out), border-color .35s var(--e-out), background .3s}
.orb:hover{transform:translateY(-3px); border-color:var(--ambar)} .orb:active{transform:scale(.95)}
.orb[aria-pressed="true"]{background:var(--ambar); color:#241505}
.orb .eq{position:absolute; right:-2px; bottom:-2px; display:none; gap:2px; align-items:flex-end; height:12px; padding:2px 3px; border-radius:6px; background:#241505}
.orb[aria-pressed="true"] .eq{display:flex}
.orb .eq i{width:2px; background:var(--ambar); border-radius:1px; animation:eq 1s ease-in-out infinite; height:4px}
.orb .eq i:nth-child(2){animation-delay:.2s} .orb .eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:3px}50%{height:9px}}
@media (max-width:900px){ .orb{right:12px; bottom:14px; width:44px; height:44px} }
@media (prefers-reduced-motion:reduce){ .orb .eq i{animation:none; height:6px} }

/* footer */
footer{border-top:1px solid var(--line-2); padding:56px 0 44px; color:var(--bone-3); font-size:13.5px;
  background:linear-gradient(180deg, transparent, rgba(16,10,7,.55))}
footer .fgrid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px; align-items:start}
footer h4{font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-3); font-weight:700; margin-bottom:12px}
footer p{color:var(--bone-2); line-height:1.7}
footer p a{color:var(--oro); text-decoration:none; display:inline-block; padding:4px 0}
footer .langs{display:flex; flex-wrap:wrap; gap:7px}
footer .langs button{font-family:inherit; cursor:pointer; font-size:12.5px; color:var(--bone-2); padding:6px 12px;
  border-radius:999px; border:1px solid var(--line-2); background:none;
  transition:border-color .3s var(--e-out), color .3s var(--e-out)}
footer .langs button:hover{border-color:var(--ambar); color:var(--bone)}
footer .langs button[aria-current=true]{border-color:var(--oro); color:var(--oro)}
footer .fin{margin-top:36px; padding-top:22px; border-top:1px solid var(--line-2);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px}

/* language dropdown (drawn flags) */
.lang{position:relative}
.lang__btn{display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 15px;
  border-radius:999px; border:1px solid var(--line); background:rgba(26,18,13,.5);
  color:var(--bone); font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  transition:border-color .3s var(--e-out)}
.lang__btn svg{border-radius:3px; display:block}
.lang__btn:hover{border-color:var(--ambar)}
.lang__menu{position:absolute; top:calc(100% + 10px); right:0; z-index:80; width:300px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:10px;
  background:rgba(31,20,13,.96); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.6); backdrop-filter:blur(14px);
  transform-origin:top right; opacity:0; pointer-events:none; transform:scale(.96) translateY(-4px);
  transition:opacity .2s var(--e-out), transform .25s var(--e-out)}
.lang.open .lang__menu{opacity:1; pointer-events:auto; transform:none}
.lang__menu button{display:flex; align-items:center; gap:10px; padding:9px 11px; border:0;
  border-radius:10px; background:none; color:var(--bone-2); font-family:inherit;
  font-size:13px; font-weight:600; cursor:pointer; text-align:left}
.lang__menu button:hover{background:rgba(242,193,78,.12); color:var(--bone)}
.lang__menu button[aria-current="true"]{background:rgba(242,193,78,.18); color:var(--oro)}
.lang__menu svg{border-radius:3px; flex:none}

/* fonts per script: Prata has no Arabic / CJK glyphs, so headings fall back to the Noto faces we ship */
/* El stack global NO nombra arabe, japones ni chino: si los nombra, TODO
   visitante descarga esas tres fuentes (364 KB) aunque lea en espanol. Cada
   idioma pide la suya en las reglas [lang=..] de abajo, que es donde toca. */
:root{--serif:'Prata',serif; --sans:'Manrope',system-ui,sans-serif}
[lang=ar]{--serif:'Prata','Noto Sans Arabic',serif; --sans:'Manrope','Noto Sans Arabic',system-ui,sans-serif}
[lang=ja]{--serif:'Prata','Noto Sans JP',serif; --sans:'Manrope','Noto Sans JP',system-ui,sans-serif}
[lang=zh]{--serif:'Prata','Noto Sans SC',serif; --sans:'Manrope','Noto Sans SC',system-ui,sans-serif}
body{font-family:var(--sans)}
h1,h2,h3,.mincho,.num,.tab,.price b,.hours b{font-family:var(--serif)}
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3{font-family:'Noto Sans Arabic',serif; letter-spacing:0; line-height:1.25}
[lang=ja] h1,[lang=ja] h2,[lang=ja] h3,[lang=zh] h1,[lang=zh] h2,[lang=zh] h3{letter-spacing:0; line-height:1.2}
[lang=ar] body,[lang=ar] .btn,[lang=ar] .pill{font-family:'Noto Sans Arabic',sans-serif}
[lang=ja] .btn,[lang=ja] .pill,[lang=ja] p,[lang=ja] .lede{font-family:'Noto Sans JP',sans-serif}
[lang=zh] .btn,[lang=zh] .pill,[lang=zh] p,[lang=zh] .lede{font-family:'Noto Sans SC',sans-serif}

/* numbers stay left-to-right inside right-to-left editions */
[dir=rtl] :is([data-fact], .btn--tel .t, a[href^="tel"], .hours b, .num, .price b, .facts .p b){direction:ltr; unicode-bidi:isolate}
[dir=rtl] .nav__links{margin-left:0; margin-right:8px}
[dir=rtl] .socs{margin-left:0; margin-right:auto; padding-right:0; padding-left:12px; margin-left:4px;
  border-right:0; border-left:1px solid var(--line-2)}

/* responsive */
@media (max-width:1180px){ .wrap,.nav__in{padding:0 24px} .row{grid-template-columns:140px 1fr} }
@media (max-width:900px){
  .wrap,.nav__in{padding:0 16px}
  /* one line, always: the logo, every social, the flag, the phone, the menu.
     Everything shrinks together so nothing has to drop off or wrap. */
  .nav__in{height:60px; gap:6px}
  .socs{gap:8px; padding-right:6px; margin-right:0; border-right:0}
  [dir=rtl] .socs{padding-left:6px; margin-left:0; border-left:0}
  .socs__a{width:30px; height:30px}
  .socs__a svg{width:14px; height:14px}
  /* the disc is small so the line fits; the finger target is not */
  .socs__a::before{content:''; position:absolute; inset:-9px -3px}   /* mas alto para el dedo, sin pisar al vecino */
  .socs__a.is-soon::after{right:1px; bottom:1px; width:5px; height:5px}
  .nav__mark img{height:28px}
  .nav__links{position:absolute; left:0; right:0; top:100%; z-index:49; display:grid; gap:4px; padding:12px 16px 18px;
    background:rgba(20,13,9,.96); backdrop-filter:blur(18px); border-bottom:1px solid var(--line-2);
    margin:0; opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .25s var(--e-out), transform .3s var(--e-out)}
  body.nav-open .nav__links{opacity:1; pointer-events:auto; transform:none}
  .nav__links a{height:46px; font-size:16px; padding:0 14px}
  .nav__cta{gap:6px}
  .nav__cta .btn{height:38px; padding:0 12px; font-size:13px}
  .nav__cta .btn--tel{width:38px; padding:0; justify-content:center}
  .nav__cta .btn--tel .t{display:none}
  .lang__btn{height:38px; padding:0 9px; gap:6px}
  .lang__btn .lname{display:none}
  .nav__burger{width:40px; height:40px}
  .lang{position:static}
  .lang__menu{position:fixed; left:12px; right:12px; top:calc(var(--navh, 108px) + 6px); width:auto; transform-origin:top center}
  .nav__burger{display:grid}
  section{padding:64px 0}
  .ev{grid-template-columns:1fr; gap:12px}
  .row{grid-template-columns:1fr; gap:6px}
  footer .fgrid{grid-template-columns:1fr; gap:26px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
}
@media (prefers-reduced-transparency:reduce){
  .nav,.card,.pill,.btn--ghost,.lang__menu{backdrop-filter:none; background:var(--agua-2)}
}

/* reservar mesa: booking is a conversation here, so the button opens the two
   real ways to have it instead of pretending there is a form */
.resv-lente{position:fixed; inset:0; z-index:78; background:rgba(10,6,4,.62); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--e-out)}
body.resv-open .resv-lente{opacity:1; pointer-events:auto}
.resv{position:fixed; z-index:79; inset:0; margin:auto; width:min(440px, calc(100vw - 32px)); height:max-content;
  max-height:calc(100dvh - 40px); overflow:auto; padding:30px 30px 26px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(38,26,18,.97), rgba(22,14,10,.98));
  box-shadow:0 40px 90px rgba(0,0,0,.6)}
.resv[hidden]{display:none}
.resv h3{font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,30px); line-height:1.15}
.resv__sub{margin-top:10px; color:var(--bone-2); font-size:14.5px; line-height:1.55}
.resv__x{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2); background:rgba(26,18,13,.6); color:var(--bone-2); display:grid; place-items:center;
  transition:color .25s var(--e-out), border-color .25s var(--e-out)}
.resv__x:hover{color:var(--bone); border-color:var(--ambar)}
[dir=rtl] .resv__x{right:auto; left:14px}
.resv__ways{display:grid; gap:10px; margin-top:22px}
.resv__way{display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:var(--r-md);
  text-decoration:none; border:1px solid var(--line-2); background:rgba(26,18,13,.5);
  transition:border-color .3s var(--e-out), transform .3s var(--e-out), background .3s var(--e-out)}
.resv__way:hover{border-color:var(--ambar); transform:translateY(-2px); background:rgba(242,193,78,.08)}
.resv__way b{display:block; font-size:15px; color:var(--bone)}
.resv__i{flex:none; width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  background:rgba(242,193,78,.14); color:var(--oro)}
.resv__way--wa .resv__i{background:#1E9E52; color:#fff}
.resv__n{display:block; margin-top:2px; font-size:13.5px; color:var(--bone-3); direction:ltr; unicode-bidi:isolate}
.resv__note{margin-top:18px; font-size:12.5px; color:var(--bone-3); text-align:center}
@media (max-width:480px){ .resv{padding:26px 20px 22px} }

/* the narrow phones: the same single line, smaller pieces */
@media (max-width:412px){
  .nav__in{gap:5px}
  .nav__mark img{height:24px}
  .socs{gap:7px; padding-right:4px}
  [dir=rtl] .socs{padding-left:4px}
  .socs__a{width:28px; height:28px}
  .socs__a svg{width:13px; height:13px}
  .lang__btn{height:36px; padding:0 7px}
  .lang__btn .lcar{display:none}
  .nav__cta{gap:5px}
  .nav__cta .btn--tel{width:36px; height:36px}
  .nav__burger{width:36px; height:36px}
}
@media (max-width:365px){
  .nav__mark img{height:21px}
  .socs{gap:6px}
  .socs__a{width:25px; height:25px}
  .socs__a svg{width:12px; height:12px}
  .lang__btn{height:34px; padding:0 6px}
  .nav__cta .btn--tel{width:34px; height:34px}
  .nav__burger{width:34px; height:34px}
}

/* the small laptops and tablets in landscape: the links, the five discs, the flag
   and the phone all still on one line, just tighter */
@media (min-width:901px) and (max-width:1180px){
  .nav__in{gap:12px}
  .nav__links a{padding:0 10px; font-size:14px}
  .socs{gap:6px; padding-right:8px}
  .socs__a{width:34px; height:34px}
  .nav__cta{gap:8px}
  .nav__cta .btn{padding:0 12px}
  .lang__btn{padding:0 11px; gap:7px}
}
@media (min-width:901px) and (max-width:980px){
  .nav__in{gap:9px}
  .nav__links a{padding:0 7px; font-size:13.5px}
  .socs__a{width:32px; height:32px}
}

/* los alérgenos con su icono: el mismo dibujo y color que la carta impresa */
.alz{display:inline-grid; place-items:center; line-height:0}
.alz svg{display:block; border-radius:999px}
.alz b{font-style:normal; font-family:'Manrope',sans-serif; font-weight:800; font-size:9px; width:20px; height:20px;
  border-radius:999px; display:grid; place-items:center; border:1px solid var(--line-2); color:var(--bone-2)}
.alrow{display:flex; align-items:center; gap:9px; padding:4px 0}
.alrow span{font-size:13.5px; color:var(--bone-2)}

/* El dedo, en todas las pantallas tactiles: nada que se toque por debajo de
   34 px de alto. Medido con build/probe-movil.mjs, no a ojo. */
@media (max-width:1024px){
  .nav__mark{padding:7px 0}                       /* el logo lleva a la portada */
  .local__go .btn, .local__copy{min-height:38px}
  footer .fgrid a, .fin a{display:inline-block; padding:6px 0}
  footer .legal a{padding:7px 0}
  .rows dd a{display:inline-block; padding:6px 0}
}

/* El QR de cada seccion. En el ordenador se escanea con el movil y es util
   de verdad; en el movil, donde escanear tu propia pantalla no sirve, se
   convierte en un boton que lleva al mismo sitio. */
.qrbox{display:flex; align-items:center; gap:20px; padding:20px 22px; margin-top:26px;
  border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(22,14,9,.72), rgba(14,9,6,.8))}
.qrbox__img{flex:none; width:112px; height:112px; padding:8px; border-radius:12px; background:#fff}
.qrbox__img img{width:100%; height:100%; display:block}
.qrbox b{display:block; font-family:var(--serif); font-weight:400; font-size:19px; color:var(--bone)}
.qrbox p{margin-top:6px; font-size:13.5px; color:var(--bone-2); line-height:1.55; max-width:44ch}
.qrbox .btn{margin-top:12px}
@media (max-width:760px){
  .qrbox{flex-direction:column; align-items:flex-start; gap:14px; padding:18px}
  .qrbox__img{display:none}          /* nadie escanea la pantalla que sostiene */
}
@media (min-width:761px){
  .qrbox .btn{display:none}          /* en el ordenador manda el QR, no el boton */
}

/* ── EL DESPLAZAMIENTO EN UN MOVIL ─────────────────────────────────────
   Un telefono no es un ordenador pequeno. Tres cosas le cuestan de verdad y
   se notan justo al arrastrar el dedo:
     1. desenfocar lo que hay DETRAS de una barra pegada arriba: el navegador
        tiene que volver a desenfocar esa franja en cada fotograma
     2. capas con mezcla de color y desenfoque grande (los resplandores)
     3. tener 136 filas de lista medidas y pintadas aunque no se vean
   Aqui se apaga lo caro y se deja lo que se ve igual de bien. */
@media (hover:none) and (pointer:coarse){
  .nav{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(18,12,8,.94)}
  .nav__links{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(18,12,8,.985)}
  .card, .pill, .bcols, .qrbox, .orb, .lang__menu, .mapcard, .rows{
    backdrop-filter:none; -webkit-backdrop-filter:none}
  body.photo .rows{background:rgba(24,16,11,.8)}
  #fondo .glow{filter:blur(22px); opacity:.5}
  #fondo .glow:nth-child(n+4){display:none}      /* de siete a tres */
  /* la cinta sin mascara: el degradado de los bordes cuesta en cada fotograma */
  .rio{-webkit-mask-image:none; mask-image:none}
  /* NADA de content-visibility aqui: probado, y sale mal. Al entrar cada fila
     en pantalla cambia la altura de la pagina, y un salto de seccion se pasa
     de largo casi mil pixeles. Se gana algo de pintado y se pierde el sitio. */
}