/* ==========================================================================
   BUENA GENTE — Zaragoza (Puerto Venecia)
   Paleta tomada del logo: negro corpóreo + dorado + rojo de la copa.

   Referencias de estilo aplicadas:
   · Red Bamboo   → hero-collage de platos alrededor del nombre y
                    animaciones de entrada al hacer scroll
   · Milk + T     → titulares tipográficos enormes, bloques de color plano
   · Moshi Moshi  → fondo crema cálido, esquinas muy redondeadas, foto grande
   · Miramar      → parallax suave y bloque de reseñas de Google
   ========================================================================== */

:root{
  --negro:      #0B0B0B;
  --carbon:     #141414;
  --carbon-2:   #1C1C1C;
  --borde-osc:  #2E2E2E;

  --oro:        #DEB012;   /* dorado oficial, tomado del logotipo */
  --oro-vivo:   #F5C520;
  --oro-suave:  #F3DFA0;
  /* dorado oscurecido: el #E9C34F no llega a 4.5:1 sobre la crema */
  --oro-texto:  #8A6210;

  --rojo:       #D93A2B;

  --crema:      #F7F3E9;
  --crema-2:    #EFE9DA;
  --tinta:      #14120C;
  --tinta-2:    #4A4638;

  /* Titulares: la que mas se parece al rotulo del restaurante. */
  --fuente-t: "Archivo Black", "Arial Black", Impact, sans-serif;
  /* Textos: geometrica con caracter, no una neutra de sistema. */
  --fuente-b: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Acentos en cursiva: serif calida, para las frases que respiran. */
  --fuente-a: "Fraunces", Georgia, "Times New Roman", serif;

  --wrap: 1200px;
  --r: 16px;
  --r-lg: 26px;
  --r-xl: 34px;      /* esquinas generosas, como en Moshi Moshi */

  --z-nav: 50;
  --z-fab: 40;
  --z-menu: 45;

  --t: 220ms cubic-bezier(.4,0,.2,1);
  --t-lento: 700ms cubic-bezier(.16,.84,.44,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--fuente-b);
  font-size:17.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  color:var(--tinta);
  background:var(--crema);
  overflow-x:hidden;
}
/* height:auto neutraliza el atributo height="" del HTML (que existe para
   reservar espacio y evitar saltos de layout) y deja mandar al aspect-ratio */
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.05; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--oro-vivo); outline-offset:3px; border-radius:4px; }
.franja :focus-visible{ outline-color:var(--negro); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--oro); color:var(--negro); padding:.9rem 1.4rem;
  font-weight:700; border-radius:0 0 var(--r) 0;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

/* ==========================================================================
   ANIMACIONES DE ENTRADA
   ========================================================================== */
/* Un desplazamiento corto y una curva que frena despacio: se nota que algo
   entra, pero no es el «fade-up» largo de las plantillas. */
.js-anim .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .75s cubic-bezier(.22,.61,.36,1) var(--d,0s);
  will-change:opacity, transform;
}
.js-anim .reveal.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .js-anim .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}


/* ==========================================================================
   TELÓN DE ENTRADA
   El nombre sube por líneas sobre negro, se traza una línea dorada y el
   telón se retira hacia arriba dejando ver la portada.
   Todo en CSS: si el JavaScript no llega a cargar, la clase `js-anim` no se
   pone, el telón no aparece y la web se ve igual.
   ========================================================================== */
.entrada{ display:none; }

.js-anim .entrada{
  display:grid; place-content:center; gap:1.4rem;
  position:fixed; inset:0; z-index:9000;
  background:var(--negro);
  animation:telonFuera .9s cubic-bezier(.76,0,.24,1) 2s forwards;
}

.entrada__logo{ overflow:hidden; }
.entrada__logo img{
  width:min(340px,62vw); height:auto;
  transform:translateY(110%);
  animation:sube .9s cubic-bezier(.16,.84,.44,1) forwards;
}

.entrada__barra{
  display:block; width:0; height:3px; margin-inline:auto;
  background:var(--oro); border-radius:2px;
  animation:barraCrece 1.5s cubic-bezier(.22,1,.36,1) .25s forwards;
}

@keyframes sube{ to{ transform:translateY(0); } }
@keyframes barraCrece{ to{ width:min(240px,52vw); } }
@keyframes telonFuera{
  0%  { clip-path:inset(0 0 0 0);    opacity:1; }
  99% { opacity:1; }
  100%{ clip-path:inset(0 0 100% 0); opacity:0; visibility:hidden; }
}

/* quien pide menos movimiento no ve el telón */
@media (prefers-reduced-motion: reduce){
  .js-anim .entrada{ display:none; }
}

/* ---------- wordmark ---------- */
.wordmark{ text-decoration:none; display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:46px; }
/* el logotipo de la cabecera: alto fijo para que no baile con el scroll */
.wordmark__logo{
  height:clamp(34px,4.4vw,42px);
  width:auto;
}

.wordmark__text{
  display:block;
  font-family:var(--fuente-t);
  font-size:clamp(1.15rem,3.2vw,1.45rem);
  letter-spacing:-.02em;
  color:var(--crema);
  line-height:1;
}
.wordmark__text .au{ color:var(--oro); }
.wordmark__sub{
  display:block;
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-suave); opacity:.9;
}
.wordmark__text--footer{ font-size:clamp(1.4rem,5vw,2rem); margin-bottom:.4rem; }
.footer__logo{ width:min(190px,52vw); height:auto; margin-bottom:.9rem; }

/* ---------- botones ---------- */
.btn{
  --bg:var(--oro); --fg:var(--negro); --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:46px; padding:.7rem 1.25rem;
  background:var(--bg); color:var(--fg); border:2px solid var(--bd);
  font:inherit; font-weight:700; letter-spacing:.01em;
  text-decoration:none; border-radius:999px; cursor:pointer;
  transition:background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.btn svg{ width:20px; height:20px; fill:currentColor; flex:none; }
.btn--xl{ min-height:54px; padding:.9rem 1.7rem; font-size:1.02rem; }
.btn--bloque{ display:flex; width:100%; }

.btn--call{ --bg:var(--oro); --fg:#151004; }
.btn--call:hover{ --bg:var(--oro-vivo); box-shadow:0 6px 24px rgba(233,195,79,.32); }

.btn--ghost{ --bg:transparent; --fg:var(--crema); --bd:rgba(247,243,233,.45); }
.btn--ghost:hover{ --bg:rgba(247,243,233,.1); --bd:var(--crema); }

.btn--negro{ --bg:var(--negro); --fg:var(--crema); }
.btn--negro:hover{ --bg:var(--carbon-2); box-shadow:0 6px 24px rgba(0,0,0,.28); }

.btn--outline{ --bg:transparent; --fg:var(--crema); --bd:var(--borde-osc); }
.btn--outline:hover{ --bg:rgba(247,243,233,.08); --bd:var(--oro); --fg:var(--oro); }

.btn--outline-negro{ --bg:transparent; --fg:var(--negro); --bd:rgba(11,11,11,.35); }
.btn--outline-negro:hover{ --bg:rgba(11,11,11,.08); --bd:var(--negro); }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(11,11,11,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde-osc);
}
.header__inner{
  max-width:var(--wrap); margin-inline:auto; padding:12px 20px;
  display:flex; align-items:center; gap:1rem;
}
.nav{ display:none; margin-left:auto; gap:1.6rem; }
.nav a{
  color:var(--crema); text-decoration:none; font-weight:600; font-size:.94rem;
  display:flex; align-items:center; min-height:44px;   /* objetivo táctil */
  border-bottom:2px solid transparent;
  transition:color var(--t), border-color var(--t);
}
.nav a:hover{ color:var(--oro); border-bottom-color:var(--oro); }
.header__call{ display:none; margin-left:.4rem; }

.burger{
  margin-left:auto; width:46px; height:46px;
  display:grid; place-content:center; gap:5px;
  background:transparent; border:1px solid var(--borde-osc); border-radius:10px;
  cursor:pointer;
}
.burger span{ display:block; width:22px; height:2px; background:var(--crema); transition:transform var(--t), opacity var(--t); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-movil{
  z-index:var(--z-menu);
  border-top:1px solid var(--borde-osc);
  background:var(--negro);
  padding:.5rem 20px 1.2rem;
  display:grid;
}
/* la regla de autor de arriba gana al [hidden] del navegador: hay que repetirlo */
.nav-movil[hidden]{ display:none; }
.nav-movil a{
  color:var(--crema); text-decoration:none; font-weight:600;
  padding:.95rem .2rem; min-height:46px; display:flex; align-items:center;
  border-bottom:1px solid var(--borde-osc);
  transition:color var(--t);
}
.nav-movil a:last-child{ border-bottom:0; }
.nav-movil a:hover{ color:var(--oro); }

@media (min-width:960px){
  .nav{ display:flex; }
  .header__call{ display:inline-flex; }
  .burger{ display:none; }
  .nav-movil{ display:none !important; }
}

/* ==========================================================================
   PORTADA
   El collage de platos rodea un recuadro central; dentro de ese recuadro
   van los 9 vídeos encadenados, de fondo, tras el nombre del bar.
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 40%, #1A1A1A 0%, var(--negro) 62%);
  color:var(--crema);
  min-height:min(100vh,940px);
  display:flex; align-items:center; justify-content:center;
  padding:96px 20px;
}

/* --- collage de platos --- */
.collage{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.collage__it{
  position:absolute; margin:0;
  border-radius:var(--r-xl); overflow:hidden;
  border:2px solid rgba(233,195,79,.28);
  box-shadow:0 22px 50px rgba(0,0,0,.55);
}
.collage__it img{ width:100%; height:100%; object-fit:cover; }

.collage__it--1{ width:19vw; max-width:230px; aspect-ratio:1; top:8%;  left:3%;   rotate:-7deg; }
.collage__it--2{ width:13vw; max-width:160px; aspect-ratio:1; top:40%; left:-2%;  rotate:6deg; }
.collage__it--3{ width:16vw; max-width:200px; aspect-ratio:1; bottom:6%; left:7%; rotate:8deg; }
.collage__it--4{ width:15vw; max-width:185px; aspect-ratio:1; top:6%;  right:8%;  rotate:7deg; }
.collage__it--5{ width:19vw; max-width:235px; aspect-ratio:1; top:38%; right:-3%; rotate:-6deg; }
.collage__it--6{ width:14vw; max-width:175px; aspect-ratio:1; bottom:8%; right:6%; rotate:-9deg; }
.collage__it--7{ width:11vw; max-width:135px; aspect-ratio:1; top:22%; left:19%;  rotate:11deg; }
.collage__it--8{ width:11vw; max-width:135px; aspect-ratio:1; bottom:22%; right:18%; rotate:-11deg; }

/* entrada escalonada, solo si el JS está activo */
.js-anim .collage__it{
  opacity:0; transform:translateY(34px) scale(.94);
  animation:entraPlato .9s cubic-bezier(.16,.84,.44,1) forwards;
}
.js-anim .collage__it--1{ animation-delay:.10s; }
.js-anim .collage__it--2{ animation-delay:.30s; }
.js-anim .collage__it--3{ animation-delay:.20s; }
.js-anim .collage__it--4{ animation-delay:.15s; }
.js-anim .collage__it--5{ animation-delay:.35s; }
.js-anim .collage__it--6{ animation-delay:.25s; }
.js-anim .collage__it--7{ animation-delay:.45s; }
.js-anim .collage__it--8{ animation-delay:.50s; }
@keyframes entraPlato{ to{ opacity:1; transform:none; } }

@media (max-width:1100px){ .collage__it--7,.collage__it--8{ display:none; } }
@media (max-width:760px){
  .collage__it{ border-radius:22px; box-shadow:0 14px 32px rgba(0,0,0,.5); }
  .collage__it--1{ width:30vw; max-width:150px; top:2%;  left:-5%;  }
  .collage__it--4{ width:26vw; max-width:130px; top:1%;  right:-4%; }
  .collage__it--2,.collage__it--5{ display:none; }
  .collage__it--3{ width:30vw; max-width:150px; bottom:2%; left:-6%; }
  .collage__it--6{ width:26vw; max-width:130px; bottom:2%; right:-5%; }
}

/* --- recuadro central con el vídeo --- */
.hero__caja{
  position:relative; z-index:2;
  width:100%; max-width:760px;
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid rgba(233,195,79,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  background:var(--negro);
}
.hero__fondo{ position:absolute; inset:0; z-index:0; background:var(--negro); }
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.hero__video.activo{ opacity:1; }

/* velo: el vídeo se ve, pero el nombre manda */
.hero__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(85% 75% at 50% 50%, rgba(11,11,11,.46) 0%, rgba(11,11,11,.62) 60%, rgba(11,11,11,.8) 100%),
    linear-gradient(to bottom, rgba(11,11,11,.34), rgba(11,11,11,.14) 45%, rgba(11,11,11,.5));
}

.hero__inner{
  position:relative; z-index:2;
  padding:clamp(38px,6vw,62px) clamp(20px,4vw,48px);
  text-align:center;
}

.badge-lugar{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--oro); color:#151004;
  padding:.5rem 1rem .5rem .8rem; border-radius:999px;
  font-weight:700; font-size:.88rem; letter-spacing:.02em;
  margin:0 0 1.3rem;
}
.badge-lugar svg{ width:18px; height:18px; fill:currentColor; }
.badge-lugar strong{ font-weight:900; }

.hero__title{ margin:0 0 1.6rem; }
.hero__line1{
  display:block; font-family:var(--fuente-b); font-weight:700;
  font-size:clamp(.9rem,2vw,1.1rem); letter-spacing:.24em; text-transform:uppercase;
  color:var(--oro-suave); margin-bottom:.6rem;
}
.hero__logo{
  display:block; font-family:var(--fuente-t);
  font-size:clamp(2.6rem,9vw,5.4rem); line-height:.9; letter-spacing:-.04em;
  color:var(--crema); text-transform:uppercase;
  text-shadow:0 6px 40px rgba(0,0,0,.75);
}
.hero__logo > span{ display:block; }
.hero__logo .au{ color:var(--oro); }
.hero__line2{
  display:block; margin-top:.7rem;
  font-family:var(--fuente-a); font-style:italic; font-weight:400;
  font-size:clamp(1rem,2.6vw,1.5rem); line-height:1.15;
  color:var(--oro); text-shadow:0 3px 20px rgba(0,0,0,.7);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.oro{ color:var(--oro); }

/* ---------- franja ubicación ---------- */
.franja{
  background:var(--oro);
  color:var(--negro);
  padding:clamp(48px,7vw,90px) 0;
  border-bottom:3px solid var(--negro);
}
.franja__grid{ display:grid; gap:2.5rem; }
.franja__p{ max-width:52ch; font-size:1.05rem; color:#221D08; }

.kicker{
  font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro); margin:0 0 .7rem;
}
.kicker--negro{ color:#453709; }   /* oscurecido: la franja dorada es ahora la oficial, mas oscura */

.h2{
  font-family:var(--fuente-t);
  font-size:clamp(1.9rem,5.2vw,3.1rem); line-height:1.02; letter-spacing:-.03em;
  color:var(--crema); margin:0 0 1rem; text-transform:uppercase;
}
/* titulares gigantes, al estilo Milk+T / Moshi Moshi */
.h2--xl{ font-size:clamp(2.4rem,8.5vw,5.6rem); line-height:.92; letter-spacing:-.04em; }
.h2 em{ font-style:normal; color:var(--oro); }
.h2--negro{ color:var(--negro); }
.h2--negro em{ color:#7A2018; }

.ventajas{ display:grid; gap:1rem; margin:1.8rem 0; }
.ventajas li{ display:flex; gap:.9rem; align-items:flex-start; }
.ventajas svg{ width:26px; height:26px; fill:var(--negro); flex:none; margin-top:2px; }
.ventajas strong{ display:block; font-size:1.02rem; }
.ventajas span{ display:block; font-size:.94rem; color:#3A3211; }

.franja__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

.franja__mapa{
  border:3px solid var(--negro); border-radius:var(--r-xl);
  overflow:hidden; background:var(--carbon);
  box-shadow:10px 10px 0 rgba(11,11,11,.9);
  min-height:340px;
}
.franja__mapa iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.25) contrast(1.05); }

@media (min-width:900px){
  .franja__grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:3.5rem; }
  .franja__mapa{ min-height:460px; }
  .franja__mapa iframe{ min-height:460px; }
}

/* ---------- secciones ---------- */
.seccion{ padding:clamp(60px,9vw,120px) 0; background:var(--crema); }
.seccion--oscura{ background:var(--negro); color:var(--crema); }
.seccion:not(.seccion--oscura) .h2{ color:var(--tinta); }
.seccion:not(.seccion--oscura) .h2 em{ color:var(--oro-texto); }
.seccion:not(.seccion--oscura) .kicker{ color:var(--oro-texto); }

.seccion__head{ max-width:62ch; margin-bottom:clamp(2rem,4vw,3.4rem); }
.seccion__head--centro{ margin-inline:auto; text-align:center; }
.seccion__sub{ font-size:1.1rem; line-height:1.6; color:var(--tinta-2); margin:0; max-width:52ch; }
.seccion__head--centro .seccion__sub{ margin-inline:auto; }
.seccion--oscura .seccion__sub{ color:#B9B4A8; }


/* ==========================================================================
   APARICIÓN CON MÁSCARA
   La imagen entra destapándose en una dirección, en vez de con un fundido.
   Es el recurso que usa miramar-cambrils.com en su galería.
   ========================================================================== */
.js-anim .aparece{
  --dcha:0; --izda:0; --arriba:0; --abajo:0;
  opacity:0;
  clip-path:inset(var(--arriba) var(--dcha) var(--abajo) var(--izda));
  /* con transition y no con animation: si el navegador no llega a animar,
     el estado final se aplica igual y la foto nunca se queda oculta */
  transition:
    clip-path 1s cubic-bezier(.45,.05,.15,.93) var(--retardo,0s),
    opacity .45s ease var(--retardo,0s);
}
.js-anim .aparece--abajo    { --arriba:100%; }   /* se destapa de abajo hacia arriba */
.js-anim .aparece--arriba   { --abajo:100%; }
.js-anim .aparece--derecha  { --izda:100%; }
.js-anim .aparece--izquierda{ --dcha:100%; }

.js-anim .aparece.visible{ clip-path:inset(0); opacity:1; }

/* Los titulares grandes se destapan con una mascara, igual que las fotos:
   el mismo gesto en toda la pagina en vez de dos animaciones distintas. */
.js-anim .h2--xl{
  clip-path:inset(0 0 105% 0);
  transition:clip-path .9s cubic-bezier(.45,.05,.15,.93) var(--d,0s);
}
.js-anim .h2--xl.visible{ clip-path:inset(0 0 -25% 0); }
@media (prefers-reduced-motion: reduce){
  .js-anim .h2--xl{ clip-path:none !important; transition:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .aparece, .js-anim .aparece{ opacity:1 !important; clip-path:none !important; transition:none !important; }
  .js-anim .collage__it{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ==========================================================================
   REJILLA DE PLATOS
   ========================================================================== */
.platos{ display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width:560px){ .platos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .platos{ grid-template-columns:repeat(3,1fr); } }

.plato{
  position:relative; isolation:isolate; margin:0;
  border-radius:var(--r-xl); overflow:hidden;
  background:var(--carbon);
  border:2px solid rgba(11,11,11,.12);
}
.plato img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform var(--t-lento);
}
.plato:hover img{ transform:scale(1.05); }
.plato figcaption{
  position:absolute; inset:auto 0 0 0; z-index:1;
  padding:1.5rem 1.3rem 1.3rem;
  background:linear-gradient(to top, rgba(8,8,8,.94) 30%, rgba(8,8,8,0));
  color:var(--crema);
}
.plato figcaption h3{
  font-family:var(--fuente-t); font-size:1.28rem; letter-spacing:-.02em;
  margin:.6rem 0 0; text-transform:uppercase;
}

/* ==========================================================================
   CARRUSEL DE RESEÑAS
   ========================================================================== */
.carrusel{
  position:relative;
  /* alinea el arranque del carrusel con el resto del contenido */
  --sangria:max(20px, calc((100vw - var(--wrap)) / 2 + 20px));
}
.carrusel__pista{
  display:flex; gap:1.1rem;
  /* proximity y no mandatory: con mandatory el navegador cancela el
     desplazamiento suave de las flechas y devuelve el carrusel al inicio */
  overflow-x:auto; scroll-snap-type:x proximity;
  padding:.5rem var(--sangria) 1.6rem;
  /* sin esto, el scroll-snap pega la primera tarjeta al borde e ignora el padding */
  scroll-padding-inline:var(--sangria);
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.carrusel__pista::-webkit-scrollbar{ display:none; }
.carrusel__pista.arrastrando{ cursor:grabbing; scroll-snap-type:none; }
.carrusel__pista.arrastrando *{ pointer-events:none; }

.etiqueta{
  display:inline-block; background:var(--oro); color:#151004;
  padding:.3rem .75rem; border-radius:999px;
  font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.etiqueta--roja{ background:var(--rojo); color:#fff; }

.carrusel__ctrl{ display:flex; align-items:center; gap:1rem; margin-top:.4rem; }
.flecha{
  width:48px; height:48px; flex:none; border-radius:999px; cursor:pointer;
  background:transparent; border:2px solid rgba(11,11,11,.28);
  display:grid; place-content:center;
  transition:background var(--t), border-color var(--t), color var(--t);
}
.flecha svg{ width:24px; height:24px; fill:var(--tinta); transition:fill var(--t); }
.flecha:hover{ background:var(--negro); border-color:var(--negro); }
.flecha:hover svg{ fill:var(--oro); }
.flecha[disabled]{ opacity:.3; cursor:not-allowed; }
.flecha[disabled]:hover{ background:transparent; border-color:rgba(11,11,11,.28); }
.flecha[disabled]:hover svg{ fill:var(--tinta); }

.flecha--claro{ border-color:rgba(247,243,233,.3); }
.flecha--claro svg{ fill:var(--crema); }
.flecha--claro:hover{ background:var(--oro); border-color:var(--oro); }
.flecha--claro:hover svg{ fill:var(--negro); }
.flecha--claro[disabled]:hover{ background:transparent; border-color:rgba(247,243,233,.3); }
.flecha--claro[disabled]:hover svg{ fill:var(--crema); }

.barra-progreso{ flex:1; height:4px; background:rgba(11,11,11,.14); border-radius:999px; overflow:hidden; }
.barra-progreso--claro{ background:rgba(247,243,233,.18); }
.barra-progreso--claro span{ background:var(--oro); }
.barra-progreso span{
  display:block; height:100%; width:20%; background:var(--negro); border-radius:999px;
  transition:width var(--t), transform var(--t);
}

/* ---------- categorías carta ---------- */
.categorias{ display:grid; gap:1px; background:var(--borde-osc); border:1px solid var(--borde-osc); border-radius:var(--r-xl); overflow:hidden; }
@media (min-width:700px){ .categorias{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1050px){ .categorias{ grid-template-columns:repeat(3,1fr); } }
.categorias li{ background:var(--carbon); padding:1.9rem 1.6rem; transition:background var(--t); }
.categorias li:hover{ background:var(--carbon-2); }
.categorias__n{ font-family:var(--fuente-t); font-size:.95rem; color:var(--oro); letter-spacing:.05em; }
.categorias h3{ font-family:var(--fuente-t); font-size:1.3rem; margin:.5rem 0 .45rem; text-transform:uppercase; letter-spacing:-.01em; }
.categorias p{ margin:0; font-size:.95rem; color:#B9B4A8; }
.carta__nota{ margin:1.8rem 0 0; font-size:1.02rem; color:#B9B4A8; }
.carta__nota a{
  color:var(--oro); font-weight:700;
  display:inline-flex; align-items:center; min-height:44px; padding-inline:.15rem;
}


/* ==========================================================================
   LA CARTA
   Maquetada a mano a partir de la carta del bar, con la tipografía y los
   colores de la casa. Debajo queda el enlace a la carta original.
   ========================================================================== */
/* columnas y no rejilla: los bloques se empaquetan uno tras otro sin dejar
   huecos entre categorías de distinta altura */
.menu{ columns:1; column-gap:1.1rem; }
@media (min-width:700px){ .menu{ columns:2; } }
@media (min-width:1050px){ .menu{ columns:3; } }

.menu__bloque{
  background:var(--carbon); border:1px solid var(--borde-osc);
  border-radius:var(--r-lg); padding:1.6rem 1.5rem;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin-bottom:1.1rem;
}
.menu__bloque--destacado{ background:var(--carbon-2); border-color:var(--oro); }

.menu__cat{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  font-family:var(--fuente-t); font-size:1.22rem; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--oro);
  margin:0 0 1.1rem; padding-bottom:.7rem;
  border-bottom:2px solid var(--borde-osc);
}
.menu__aviso{
  font-family:var(--fuente-b); font-size:.78rem; font-weight:600;
  letter-spacing:.04em; text-transform:none; color:#B9B4A8;
}
.menu__precio-cat{ margin-left:auto; color:var(--crema); }

.menu__lista{ display:grid; gap:.95rem; }
.menu__lista li{ display:flex; align-items:baseline; gap:.8rem; }
.menu__plato{ flex:1; font-weight:600; color:var(--crema); line-height:1.35; }
.menu__desc{
  display:block; margin-top:.15rem;
  font-weight:400; font-size:.86rem; line-height:1.5; color:#A8A296;
}
.menu__precio{
  flex:none; font-family:var(--fuente-t); font-size:.98rem;
  color:var(--oro); white-space:nowrap;
}
.menu__precio small{ font-family:var(--fuente-b); font-weight:600; font-size:.72rem; color:#B9B4A8; }
/* marca los precios que hay que confirmar con el bar */
.menu__duda{
  display:inline-block; margin-left:.25rem;
  width:16px; height:16px; line-height:16px; text-align:center;
  border-radius:50%; background:var(--rojo); color:#fff;
  font-family:var(--fuente-b); font-size:.65rem; font-weight:700;
  cursor:help; vertical-align:top;
}

.menu__intro{ margin:0 0 .5rem; color:#B9B4A8; font-size:.95rem; }
.menu__simple{ display:grid; gap:.45rem; margin-bottom:1rem; }
.menu__simple li{ position:relative; padding-left:1.1rem; color:var(--crema); font-weight:600; }
.menu__simple li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:5px; height:5px; border-radius:50%; background:var(--oro);
}
.menu__nota{ margin:0; font-size:.88rem; color:#A8A296; }

.menu__suplementos{
  margin:1.8rem 0 .6rem; padding:1.1rem 1.3rem;
  background:var(--carbon-2); border-radius:var(--r);
  font-size:.95rem; color:#CFCABE;
}
.menu__suplementos strong{ color:var(--oro); }
.menu__alergenos{ margin:0 0 2rem; font-size:.9rem; color:#A8A296; }

.carta__cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin:0; }

/* ---------- historia ---------- */
.historia{ display:grid; gap:2.6rem; }
@media (min-width:920px){ .historia{ grid-template-columns:1.1fr .9fr; align-items:center; gap:4rem; } }
.historia__texto p{ font-size:1.05rem; color:var(--tinta-2); max-width:56ch; }
.historia__texto .oro{ color:var(--oro-texto); font-weight:800; }
.historia__img{ margin:0; }
.historia__img img{
  width:100%; border-radius:var(--r-xl);
  border:3px solid var(--negro);
  box-shadow:12px 12px 0 var(--oro);
}
.historia__img figcaption,
.equipo__foto figcaption{ margin-top:.9rem; font-size:.88rem; color:var(--tinta-2); }
.equipo__foto figcaption{ color:#B9B4A8; }

.hitos{ display:flex; flex-wrap:wrap; gap:1.6rem 2.6rem; margin-top:2rem; padding-top:1.6rem; border-top:2px solid rgba(20,18,12,.15); }
.hitos__n{ display:block; font-family:var(--fuente-t); font-size:1.9rem; color:var(--oro-texto); line-height:1; }
.hitos p{ margin:.3rem 0 0; font-size:.9rem; color:var(--tinta-2); }

/* ==========================================================================
   BANDA DE IMAGEN REVELADA AL BAJAR
   La foto queda anclada al viewport (background-attachment: fixed) y la
   sección actúa de ventana: al hacer scroll se va viendo más imagen.
   Es el mismo recurso que usa miramar-cambrils.com.
   ========================================================================== */
.banda{
  position:relative; isolation:isolate;
  min-height:min(78vh,620px);
  display:grid; place-items:center;
  border-block:3px solid var(--negro);

  background-image:url("../img/barra.webp");
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
  background-color:var(--negro);
}
/* iOS y varios navegadores móviles ignoran o rompen el fondo fijo:
   allí se queda como una foto normal, que se ve perfectamente igual. */
@media (min-width:900px){
  .banda{ background-attachment:fixed; }
}
.banda::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to right, rgba(11,11,11,.82), rgba(11,11,11,.5));
}
.banda__texto{ text-align:center; position:relative; z-index:1; padding-block:clamp(60px,10vw,110px); }
.banda__frase{
  margin:0; font-family:var(--fuente-t);
  font-size:clamp(2rem,7vw,4.6rem); line-height:1; letter-spacing:-.03em;
  color:var(--crema); text-transform:uppercase;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.banda__frase em{
  font-family:var(--fuente-a); font-style:italic; font-weight:400;
  color:var(--oro); text-transform:none;
  font-size:1.06em; letter-spacing:-.01em;
}

/* ---------- equipo ---------- */
.equipo{ display:grid; gap:2.6rem; }
@media (min-width:920px){ .equipo{ grid-template-columns:.95fr 1.05fr; align-items:center; gap:4rem; } }
.equipo__texto p{ color:#C6C1B5; font-size:1.05rem; max-width:54ch; }
.equipo__lista{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.equipo__lista li{
  background:var(--carbon-2); border:1px solid var(--borde-osc);
  border-radius:999px; padding:.6rem 1.1rem;
}
.equipo__lista strong{ color:var(--oro); }
.equipo__lista span{ color:#B9B4A8; font-size:.9rem; margin-left:.4rem; }
.equipo__foto{ margin:0; }
.equipo__foto img{ width:100%; border-radius:var(--r-xl); border:3px solid var(--oro); }
.placeholder{
  aspect-ratio:4/3; display:grid; place-content:center; text-align:center; gap:.2rem; padding:1.5rem;
  border:3px dashed var(--oro); border-radius:var(--r-xl);
  background:var(--carbon); color:var(--oro-suave);
}
.placeholder svg{ width:56px; height:56px; fill:var(--oro); margin:0 auto .6rem; }
.placeholder p{ margin:0; }
.placeholder__hint{ font-size:.86rem; color:#B9B4A8; }
.placeholder code{ background:var(--carbon-2); padding:.15rem .45rem; border-radius:6px; font-size:.85em; }

/* ---------- galería ---------- */
.galeria{ display:grid; gap:1.3rem; grid-template-columns:1fr; }
@media (min-width:700px){ .galeria{ grid-template-columns:repeat(2,1fr); } }
.galeria figure{ margin:0; }
.galeria img,
.galeria video{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:var(--r-lg); border:2px solid var(--negro);
  background:var(--carbon);
  transition:transform var(--t-lento), box-shadow var(--t);
}
.galeria figure:hover img,
.galeria figure:hover video{ transform:scale(1.03); box-shadow:0 16px 34px rgba(11,11,11,.28); }
.galeria figcaption{ margin-top:.6rem; font-size:.86rem; font-weight:600; color:var(--tinta-2); }

/* ==========================================================================
   RESEÑAS
   ========================================================================== */
.nota-google{ display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; color:#B9B4A8; margin:0; }
.estrellas{ color:var(--oro); letter-spacing:.12em; font-size:1.1rem; }

.resena{
  flex:0 0 clamp(265px, 80vw, 400px);
  scroll-snap-align:start;
  position:relative; margin:0;
  background:var(--carbon-2); border:1px solid var(--borde-osc);
  border-radius:var(--r-xl); padding:1.9rem 1.7rem;
  display:flex; flex-direction:column;
  transition:border-color var(--t), background var(--t);
}
.resena:hover{ border-color:var(--oro); background:#212121; }

/* comilla decorativa de fondo */
.resena::before{
  content:"“";
  position:absolute; right:.22em; bottom:-.42em;
  /* la fuente de titulares no trae este glifo: usamos la de cuerpo */
  font-family:var(--fuente-b); font-weight:700;
  font-size:7rem; line-height:1;
  color:var(--oro); opacity:.1; pointer-events:none;
}

.resena__cab{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; }
.resena__avatar{
  width:44px; height:44px; flex:none; border-radius:50%;
  background:var(--oro); color:#151004;
  display:grid; place-content:center;
  font-family:var(--fuente-t); font-size:1.15rem;
}
.resena__quien{ display:grid; gap:.15rem; min-width:0; }
.resena__quien cite{ font-style:normal; font-weight:700; color:var(--crema); font-size:1rem; }
.resena__google{ width:22px; height:22px; flex:none; margin-left:auto; }

.resena p{
  margin:0; color:#CFCABE; font-size:.98rem; line-height:1.7;
  /* recorte para que las tarjetas no se estiren a la reseña más larga */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:9; overflow:hidden;
}
/* display:block es más fiable que quitar solo el line-clamp */
.resena.abierta p{ display:block; -webkit-line-clamp:none; overflow:visible; }
.resena .estrellas{ font-size:.95rem; letter-spacing:.08em; }

.resena__mas{
  align-self:flex-start; margin-top:.9rem; padding:.2rem 0;
  min-height:44px; display:inline-flex; align-items:center;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:700; color:var(--oro);
  border-bottom:2px solid transparent; transition:border-color var(--t);
}
.resena__mas:hover{ border-bottom-color:var(--oro); }
.resena:hover{ border-color:var(--oro); }
.resena p{ margin:.8rem 0 1.2rem; color:#DCD7CA; font-size:1rem; }
.resena cite{ font-style:normal; font-weight:700; color:var(--oro); font-size:.95rem; }
.resena cite span{ font-weight:400; color:#B9B4A8; }
.resenas__cta{ text-align:center; margin:2.2rem 0 0; }

/* ---------- contacto ---------- */
.contacto{ display:grid; gap:1.2rem; }
@media (min-width:860px){ .contacto{ grid-template-columns:repeat(3,1fr); align-items:start; } }
.contacto--dos{ }
@media (min-width:860px){ .contacto--dos{ grid-template-columns:repeat(2,1fr); } }
.tarjeta{
  background:var(--carbon); border:1px solid var(--borde-osc);
  border-radius:var(--r-xl); padding:1.9rem 1.6rem; color:var(--crema);
}
.tarjeta h3{ font-family:var(--fuente-t); font-size:1.25rem; text-transform:uppercase; margin-bottom:1rem; letter-spacing:-.01em; }
.tarjeta p{ color:#B9B4A8; font-size:.98rem; }
.tarjeta--destacada{ background:var(--negro); border-color:var(--oro); }
.tarjeta--destacada h3{ color:var(--oro); }
.tarjeta__nota{ font-size:.9rem; }
.tarjeta .btn--outline-negro{ --fg:var(--crema); --bd:var(--borde-osc); }
.tarjeta .btn--outline-negro:hover{ --bg:rgba(247,243,233,.08); --bd:var(--oro); --fg:var(--oro); }

.horarios{ width:100%; border-collapse:collapse; font-size:.98rem; }
.horarios th{ text-align:left; font-weight:600; color:#DCD7CA; padding:.5rem 0; }
.horarios td{ text-align:right; color:var(--oro-suave); padding:.5rem 0; }
.horarios tr+tr th,.horarios tr+tr td{ border-top:1px solid var(--borde-osc); }

.direccion{ font-size:1.05rem; line-height:1.7; color:#DCD7CA !important; }
.enlace-ig{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  color:var(--oro-suave); text-decoration:none; font-weight:600; min-height:44px;
  transition:color var(--t);
}
.enlace-ig svg{ width:22px; height:22px; fill:currentColor; }
.enlace-ig:hover{ color:var(--oro); }

/* ---------- footer ---------- */
.footer{ background:var(--negro); color:var(--crema); border-top:1px solid var(--borde-osc); padding:clamp(40px,6vw,64px) 0 24px; }
.footer__inner{ display:grid; gap:2rem; }
@media (min-width:860px){ .footer__inner{ grid-template-columns:1.2fr 1fr .8fr; align-items:start; } }
.footer__claim{ color:#B9B4A8; font-size:.95rem; margin:0; }
.footer__nav{ display:grid; }
.footer__nav a,.footer__contacto a{
  color:#DCD7CA; text-decoration:none; font-size:.95rem;
  display:flex; align-items:center; min-height:44px;   /* objetivo táctil */
  transition:color var(--t);
}
.footer__nav a:hover,.footer__contacto a:hover{ color:var(--oro); }
.footer__contacto{ display:grid; }
.footer__contacto a:first-child{ font-family:var(--fuente-t); font-size:1.2rem; color:var(--oro); }
.footer__legal{ text-align:center; margin:2.5rem 0 0; font-size:.85rem; color:#8A8477; }

/* ---------- botón llamar flotante (móvil) ---------- */
.call-fab{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:var(--z-fab);
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:56px; background:var(--oro); color:#151004;
  font-weight:800; font-size:1.05rem; text-decoration:none;
  border-radius:999px; box-shadow:0 8px 28px rgba(0,0,0,.4);
  transition:background var(--t), opacity var(--t), transform var(--t);
}
.call-fab svg{ width:22px; height:22px; fill:currentColor; }
.call-fab:hover{ background:var(--oro-vivo); }

/* Aparece solo cuando el hero (que ya lleva su propio botón) queda atrás */
.call-fab{ opacity:0; transform:translateY(120%); pointer-events:none; }
.call-fab.visible{ opacity:1; transform:none; pointer-events:auto; }

@media (min-width:960px){ .call-fab{ display:none; } }
@media (max-width:959px){
  .footer{ padding-bottom:96px; }
}


/* ==========================================================================
   MENU DEL DIA
   ========================================================================== */
.menu-dia{
  display:grid; gap:1.6rem; align-items:center;
  background:var(--carbon-2); border:2px solid var(--oro);
  border-radius:var(--r-xl); padding:clamp(1.6rem,4vw,2.4rem);
  margin-bottom:1.4rem;
}
@media (min-width:760px){ .menu-dia{ grid-template-columns:1.2fr .8fr; gap:2.4rem; } }
.menu-dia__t{
  font-family:var(--fuente-t); font-size:clamp(1.8rem,5vw,2.6rem);
  text-transform:uppercase; letter-spacing:-.02em; color:var(--crema); margin:0 0 .5rem;
}
.menu-dia__texto p{ margin:0; color:#B9B4A8; }
.menu-dia__precios{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; }
.menu-dia__cifra{
  display:block; font-family:var(--fuente-t);
  font-size:clamp(2rem,6vw,3rem); line-height:1; color:var(--oro);
}
.menu-dia__cuando{ display:block; margin-top:.35rem; font-size:.86rem; color:#B9B4A8; }

/* ==========================================================================
   PREGUNTAS FRECUENTES
   ========================================================================== */
.faq{ display:grid; gap:.8rem; max-width:860px; margin-inline:auto; }
.faq__it{
  background:var(--carbon); border:1px solid var(--borde-osc);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color var(--t);
}
.faq__it[open]{ border-color:var(--oro); }
.faq__it summary{
  display:flex; align-items:center; gap:1rem; cursor:pointer;
  padding:1.15rem 1.4rem; min-height:56px;
  list-style:none;
}
.faq__it summary::-webkit-details-marker{ display:none; }
.faq__it summary h3{
  flex:1; margin:0; font-family:var(--fuente-b);
  font-size:1.02rem; font-weight:700; color:var(--crema); line-height:1.4;
}
.faq__it summary::after{
  content:""; flex:none; width:12px; height:12px;
  border-right:2px solid var(--oro); border-bottom:2px solid var(--oro);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t);
}
.faq__it[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.faq__it summary:hover h3{ color:var(--oro); }
.faq__it > p{
  margin:0; padding:0 1.4rem 1.3rem; color:#B9B4A8; font-size:.98rem; line-height:1.7;
}
.faq__it > p a{ color:var(--oro); font-weight:600; }

/* ==========================================================================
   MAPA BLOQUEADO HASTA ACEPTAR COOKIES
   ========================================================================== */
.mapa-espera{
  display:grid; place-content:center; justify-items:center; gap:.5rem;
  height:100%; min-height:340px; padding:2rem 1.6rem; text-align:center;
  background:var(--carbon); color:var(--crema);
}
.mapa-espera svg{ width:38px; height:38px; fill:var(--oro); }
.mapa-espera p{ margin:0; }
.mapa-espera__aviso{ font-size:.88rem; color:#B9B4A8; max-width:34ch; margin-bottom:.6rem !important; }
.mapa-espera__enlace{
  font-size:.9rem; color:var(--oro-suave); text-decoration:underline;
  display:inline-flex; align-items:center; min-height:44px;
}
.mapa-espera__enlace:hover{ color:var(--oro); }

/* ==========================================================================
   AVISO DE COOKIES
   ========================================================================== */
.cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:16px;
  background:linear-gradient(to top, rgba(11,11,11,.96), rgba(11,11,11,.82));
  backdrop-filter:blur(8px);
}
.cookies[hidden]{ display:none; }
.cookies__caja{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; gap:1rem; align-items:center;
  background:var(--carbon); border:1px solid var(--borde-osc);
  border-radius:var(--r-lg); padding:1.4rem 1.5rem;
}
@media (min-width:900px){
  /* el titulo y el texto en una columna, los botones en la otra: si no se
     colocan a mano, el grid reparte los tres hijos en dos columnas y los
     botones se van a una fila propia */
  .cookies__caja{ grid-template-columns:1fr auto; gap:.3rem 2.4rem; }
  .cookies__t,
  .cookies__d{ grid-column:1; }
  .cookies__botones{ grid-column:2; grid-row:1 / span 2; align-self:center; }
}
.cookies__t{
  font-family:var(--fuente-t); font-size:1.05rem; text-transform:uppercase;
  color:var(--oro); margin:0 0 .4rem; letter-spacing:-.01em;
}
.cookies__d{ margin:0; font-size:.94rem; color:#B9B4A8; line-height:1.6; }
.cookies__d a{ color:var(--oro); font-weight:600; }
.cookies__botones{ display:flex; gap:.7rem; flex-wrap:wrap; }
.cookies__botones .btn{ flex:1 1 auto; min-width:140px; }

@media (max-width:959px){
  /* en el movil el aviso ocupaba media pantalla: aqui va al grano */
  .cookies{ padding:10px; }
  .cookies__caja{ padding:1.1rem 1.15rem; gap:.85rem; border-radius:var(--r); }
  .cookies__t{ font-size:.95rem; margin-bottom:.3rem; }
  .cookies__d{ font-size:.88rem; line-height:1.5; }
  .cookies__botones .btn{ min-width:0; min-height:48px; padding-inline:1rem; }
}

/* Mientras se pregunta por las cookies, el boton flotante de llamar estorba:
   los dos viven pegados al borde inferior. La clase la pone el JavaScript. */
.aviso-cookies-abierto .call-fab{ display:none; }

/* ==========================================================================
   PIE: ENLACES LEGALES
   ========================================================================== */
.footer__legal{
  margin-top:2.5rem; padding-top:1.4rem;
  border-top:1px solid var(--borde-osc);
  display:grid; gap:.4rem; justify-items:center; text-align:center;
}
.footer__legal p{ margin:0; font-size:.85rem; color:#8A8477; }
.footer__legales{ display:flex; flex-wrap:wrap; gap:.2rem 1.4rem; justify-content:center; }
.footer__legales a,
.enlace-cookies{
  color:#B9B4A8; font-size:.85rem; text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  transition:color var(--t);
}
.footer__legales a:hover,
.enlace-cookies:hover{ color:var(--oro); text-decoration:underline; }


/* ==========================================================================
   DECISIONES PROPIAS DE MOVIL
   No es la version de escritorio encogida: en pantalla pequena cambian las
   prioridades, y hay cosas que se ordenan distinto o directamente sobran.
   ========================================================================== */
@media (max-width:700px){

  /* La carta son diez bloques: apilados serian un muro de scroll. En movil
     se pliegan y el visitante abre solo la categoria que le interesa. */
  .menu__bloque{ padding:0; }
  .menu__cat{
    display:flex; align-items:center; gap:.6rem;
    margin:0; padding:1.15rem 1.3rem; border-bottom:0;
    cursor:pointer; min-height:56px;
  }
  .menu__cat::after{
    content:""; margin-left:auto; flex:none; width:11px; height:11px;
    border-right:2px solid var(--oro); border-bottom:2px solid var(--oro);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform var(--t);
  }
  .menu__bloque.abierto .menu__cat::after{ transform:rotate(-135deg) translate(-2px,-2px); }
  .menu__bloque.abierto .menu__cat{ border-bottom:2px solid var(--borde-osc); }
  .menu__lista,
  .menu__bloque > .menu__intro,
  .menu__bloque > .menu__simple,
  .menu__bloque > .menu__nota{ display:none; padding-inline:1.3rem; }
  .menu__bloque.abierto .menu__lista{ display:grid; padding-block:1.2rem; }
  .menu__bloque.abierto > .menu__intro,
  .menu__bloque.abierto > .menu__simple,
  .menu__bloque.abierto > .menu__nota{ display:block; }
  .menu__bloque.abierto > .menu__intro{ padding-top:1.1rem; }
  .menu__bloque.abierto > .menu__nota{ padding-bottom:1.2rem; }
  .menu__bloque.abierto > .menu__simple{ display:grid; }
  .menu__precio-cat{ margin-left:0; }

  /* El menu del dia es el gancho: en movil va antes que nada y a lo ancho. */
  .menu-dia{ text-align:center; }
  .menu-dia__precios{ justify-content:center; gap:1.4rem 2rem; }

  /* Los titulares gigantes se comen la pantalla del movil. */
  .h2--xl{ font-size:clamp(2.1rem,11vw,3rem); }

  /* Menos aire vertical: en el movil el scroll es mas caro. */
  .seccion{ padding-block:clamp(48px,12vw,70px); }
}

/* En pantallas de mano el collage de la portada estorba mas que aporta:
   dejamos solo cuatro fotos, a modo de marco, y el resto fuera. */
@media (max-width:560px){
  .collage__it--2,.collage__it--5,.collage__it--7,.collage__it--8{ display:none; }
}