/* ============================================================
   KIU NAM — Vietnamese Restaurant · Barcelona
   styles.css — Design System & Components
   ============================================================ */

/* ─── 1. DESIGN TOKENS ───────────────────────────────────── */
:root {
  /* Sage / Teal Wood Panel (Header, Footer & Structure) */
  --clr-sage-900:  #364c47;
  --clr-sage-800:  #4c6962;
  --clr-sage-700:  #6A8A82;   /* Panel green */
  --clr-sage-600:  #7b9b93;
  --clr-sage-100:  #eaf1ef;
  --clr-sage-50:   #f3f7f6;

  /* Vibrant Red (CTAs, Buttons, Prices, Main Links) */
  --clr-red-700:   #b71c1c;
  --clr-red-600:   #D32F2F;   /* Primary accent */
  --clr-red-500:   #e53935;
  --clr-red-100:   #fdecea;
  --clr-red-50:    #fdf5f4;

  /* Leaf Green (Allergens, Features, Placemats/Bamboo) */
  --clr-leaf-700:  #286b33;
  --clr-leaf-600:  #358843;   /* Leaf green */
  --clr-leaf-100:  #eaf4eb;
  --clr-leaf-50:   #f3f9f4;

  /* Mustard Yellow (Popular Badges, Special Highlights) */
  --clr-mustard-600: #cb8e22;
  --clr-mustard-500: #E5A93C; /* Yellow chair color */
  --clr-mustard-100: #fdf5e6;

  /* Warm Neutrals (Upper walls & Light wood tables) */
  --clr-white:     #ffffff;
  --clr-cream:     #faf8f5;   /* Warm off-white / light cream */
  --clr-cream-100: #f3efe6;
  --clr-gray-200:  #e6e0d5;
  --clr-gray-400:  #a69b8d;
  --clr-gray-600:  #665b50;
  --clr-gray-800:  #2b251f;
  --clr-gray-900:  #181410;

  /* Semantic */
  --clr-primary:     var(--clr-red-600);
  --clr-primary-dk:  var(--clr-red-700);
  --clr-primary-lt:  var(--clr-red-100);
  --clr-bg:          var(--clr-cream);
  --clr-surface:     var(--clr-white);
  --clr-text:        var(--clr-gray-800);
  --clr-text-muted:  var(--clr-gray-600);
  --clr-border:      var(--clr-gray-200);

  /* Typography */
  --ff-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --ff-serif:  'Playfair Display', Georgia, serif;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* Font scale (fluid) */
  --fs-xs:   clamp(0.75rem,  1.5vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 2vw,   0.9375rem);
  --fs-base: clamp(1rem,     2.2vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 2.5vw, 1.25rem);
  --fs-xl:   clamp(1.375rem, 3vw,   1.75rem);
  --fs-2xl:  clamp(1.75rem,  4vw,   2.5rem);
  --fs-3xl:  clamp(2.25rem,  6vw,   3.75rem);
  --fs-4xl:  clamp(2.75rem,  8vw,   5rem);

  /* Spacing scale */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* Radii */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / .06), 0 1px 2px -1px rgb(0 0 0 / .06);
  --shadow-md:  0 4px 16px -2px rgb(0 0 0 / .10), 0 2px 8px -2px rgb(0 0 0 / .08);
  --shadow-lg:  0 12px 40px -4px rgb(0 0 0 / .14), 0 4px 16px -4px rgb(0 0 0 / .08);
  --shadow-red: 0 4px 20px -4px rgb(211 47 47 / .35);
  --shadow-sage: 0 4px 20px -4px rgb(106 138 130 / .35);

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout variables */
  --header-h: 90px;
}

/* ─── 2. RESET & BASE ────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  /* Evita franja blanca en el safe-area superior de iOS/Android.
     Coincide con el theme-color de la meta tag (#4c6962 = sage-800). */
  background-color: #4c6962;
}

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-400);
  line-height: 1.65;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Global Noise Texture */
.noise-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
  mix-blend-mode: multiply;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

ul { list-style: none; }

address { font-style: normal; }

/* Focus ring — accessible */
:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ─── 3. UTILITIES ───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.section-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-sage-700);
  margin-bottom: var(--sp-3);
}

.section-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-700);
  color: var(--clr-gray-900);
  line-height: 1.2;
  margin-bottom: var(--sp-4);
}

.section-subtitle {
  font-size: var(--fs-lg);
  color: var(--clr-text-muted);
  max-width: 54ch;
}

.section-header {
  text-align: center;
  margin-bottom: var(--sp-12);
}

.section-header .section-subtitle {
  margin-inline: auto;
}

.hide-mobile { display: none; }

@media (min-width: 768px) {
  .hide-mobile { display: initial; }
}

/* ─── 4. SCROLL ANIMATIONS ───────────────────────────────── */

/* Hero: animación directa CSS (above-the-fold, no depende de scroll) */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-reveal {
  animation: heroReveal var(--transition-slow) both;
}
.hero-reveal.delay-1 { animation-delay: 120ms; }
.hero-reveal.delay-2 { animation-delay: 260ms; }
.hero-reveal.delay-3 { animation-delay: 400ms; }

/* Secciones below-fold: se activan con IntersectionObserver */
.reveal-up {
  opacity: 0;
  transform: translateY(80px) scale(0.9); /* Aumentado a 80px y añadido scale para efecto orgánico */
  transition: opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1), transform 1000ms cubic-bezier(0.4, 0, 0.2, 1); /* Aumentado a 1000ms */
  /* Fallback: si el observer no dispara, el elemento se muestra solo */
  animation: scrollRevealFallback 0.5s ease-out 1.8s both;
}

@keyframes scrollRevealFallback {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* La clase .is-visible cancela el fallback y aplica la transición normal */
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: none;
}

/* Delays */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }

/* ─── 5. BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8em 1.9em;
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-white);
  box-shadow: var(--shadow-red);
}

.btn--primary:hover {
  background-color: var(--clr-primary-dk);
  border-color: var(--clr-primary-dk);
  box-shadow: 0 6px 24px -4px rgb(211 47 47 / .45);
}

.btn--ghost {
  background-color: transparent;
  border-color: rgba(255,255,255,0.7);
  color: var(--clr-white);
}

.btn--ghost:hover {
  background-color: rgba(255,255,255,0.15);
  border-color: var(--clr-white);
}

.btn--sm {
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  /* Mantenemos herencia de box-shadow y border-radius del .btn principal */
}

.btn--full {
  width: 100%;
}

/* ─── 6. HEADER / NAV ─────────────────────────────────────── */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10000;
  height: var(--header-h);
  /*
   * TRUCO ALFA: rgba(106,138,130,0) en lugar de "transparent" (=rgba(0,0,0,0)).
   * Con "transparent" el navegador interpola TAMBIÉN los canales RGB (negro→verde)
   * causando el flash oscuro visible a mitad de la transición.
   * Con rgba(106,138,130,0) solo cambia el canal alfa (0→1): fundido perfecto.
   */
  background-color: rgba(106, 138, 130, 0);
  box-shadow: none;
  backdrop-filter: blur(0px) saturate(1);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  /* Transición en la clase BASE: anima en ambas direcciones */
  transition:
    background-color 0.4s ease-in-out,
    box-shadow       0.4s ease-in-out,
    backdrop-filter  0.4s ease-in-out,
    -webkit-backdrop-filter 0.4s ease-in-out !important;
}

/* Forzar header sólido cuando el menú móvil está abierto */
.site-header.menu-open {
  background-color: var(--clr-sage-800) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Contenedor interno: transición heredada para que no bloquee el fundido */
.site-header .nav-container {
  transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out !important;
}

/*
 * .scrolled — Efecto Glassmorphism Restaurado:
 * Fondo semitransparente (sage 75% opacidad) + desenfoque de 12px.
 */
.site-header.scrolled {
  background-color: rgba(106, 138, 130, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px -2px rgba(0, 0, 0, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

/* ── Cabecera específica de carta.html ──────────────────────────
 * Sobreescribe el estado transparente del header base para páginas
 * sin hero. Fondo verde salvia (75% opaco) y desenfoque desde el primer píxel.
 * ─────────────────────────────────────────────────────────────── */
.header-carta,
.header-carta.scrolled {
  background-color: rgba(106, 138, 130, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 20px -2px rgba(0, 0, 0, 0.22),
              inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Espaciado para compensar la cabecera fija en páginas sin Hero */
.pt-header {
  padding-top: calc(var(--header-h) + 2rem);
}

/* Logo y subtítulo: siempre blanco puro */
.site-header .nav-logo .logo-text,
.site-header.scrolled .nav-logo .logo-text {
  color: var(--clr-white);
}

.site-header .nav-logo .logo-sub,
.site-header.scrolled .nav-logo .logo-sub {
  color: rgba(255, 255, 255, 0.85);
}

/* Enlaces de navegación: siempre blanco */
.site-header .nav-link,
.site-header.scrolled .nav-link {
  color: rgba(255, 255, 255, 0.95);
}

.site-header .nav-link:hover,
.site-header.scrolled .nav-link:hover {
  color: var(--clr-white);
  background-color: transparent;
}

/* Botón de Reservar: siempre Rojo Vibrante (#D32F2F) en ambos estados */
.site-header .nav-link--cta,
.site-header.scrolled .nav-link--cta {
  color: var(--clr-white) !important;
  background-color: var(--clr-primary) !important;
  box-shadow: var(--shadow-red);
}

.site-header .nav-toggle .hamburger-line,
.site-header.scrolled .nav-toggle .hamburger-line {
  background-color: rgba(255, 255, 255, 0.95);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: var(--sp-6);
  padding-block: 0;
  max-width: 1200px;
  margin-inline: auto;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-fast);
  margin: 0;
  padding: 0;
}

/* Reseteo radical para evitar cualquier recuadro oscuro no deseado */
.nav-logo:hover,
.nav-logo:focus,
.nav-logo:active {
  opacity: 0.85 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

/* Bloqueo de pseudo-elementos espurios en el logo */
.nav-logo::before,
.nav-logo::after,
.nav-logo:hover::before,
.nav-logo:hover::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

.logo-text {
  font-family: var(--ff-serif);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: var(--fw-700);
  color: var(--clr-white);
  letter-spacing: 0.08em;
  line-height: 1;
  transition: color var(--transition-base);
}

.logo-sub {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  font-weight: var(--fw-400);
  transition: color var(--transition-base);
}

/* Nav links */
.nav-menu {
  display: none;
  gap: var(--sp-4);
}

.nav-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  color: rgba(255,255,255,0.92);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--clr-white);
  background-color: transparent;
}

.nav-link--cta {
  background-color: var(--clr-primary);
  color: var(--clr-white) !important;
  padding: 0.55em 1.2em;
  box-shadow: var(--shadow-red);
}

.nav-link--cta:hover {
  background-color: var(--clr-primary-dk) !important;
}

/* Hamburger */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.nav-toggle:hover { background-color: rgba(255,255,255,0.15); }

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: rgba(255,255,255,0.9);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Open state */
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
  .nav-menu { display: flex; }
  .nav-toggle { display: none; }
}

/* Mobile menu open */
@media (max-width: 767px) {
  .nav-menu.is-open {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    height: auto;
    background-color: var(--clr-sage-800) !important;
    padding: var(--sp-6) var(--sp-6) var(--sp-12);
    z-index: 99; /* Dentro de site-header */
    transform: translateY(-100%);
    opacity: 0; /* Para evitar parpadeo antes de animar */
    animation: menuSlideDown 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }

  .nav-menu.is-open .nav-link {
    color: var(--clr-cream);
    font-family: var(--ff-serif);
    font-size: clamp(2.2rem, 8vw, 3rem);
    padding: 0;
    border-bottom: none;
    border-radius: 0;
    width: auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: linkFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    
    /* Unificar interacción */
    -webkit-tap-highlight-color: transparent;
    outline: none;
    position: relative;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* Efecto hover uniforme: Subrayado expandible elegante */
  .nav-menu.is-open .nav-link::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 40px;
    height: 2px;
    background-color: var(--clr-primary);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-menu.is-open .nav-link:hover::after,
  .nav-menu.is-open .nav-link:active::after {
    transform: translateX(-50%) scaleX(1);
  }
  
  .nav-menu.is-open .nav-link:hover {
    background-color: transparent !important;
    color: var(--clr-cream) !important;
    box-shadow: none !important;
    transform: translateY(0) scale(1.02); /* Reset Y + subtle scale */
    transition: transform 0.3s ease;
  }

  /* Efecto cascada escalonado */
  .nav-menu.is-open li:nth-child(1) .nav-link { animation-delay: 0.15s; }
  .nav-menu.is-open li:nth-child(2) .nav-link { animation-delay: 0.25s; }
  .nav-menu.is-open li:nth-child(3) .nav-link { animation-delay: 0.35s; }
  .nav-menu.is-open li:nth-child(4) .nav-link { animation-delay: 0.45s; }

  /* Sobrescribir residuos del botón desktop CTA */
  .nav-menu.is-open .nav-link--cta {
    margin-top: 0; /* Unificar espaciado */
  }
}

@keyframes menuSlideDown {
  from { transform: translateY(-50%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes linkFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Nav Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998; /* Justo debajo del site-header */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nav-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ─── 6b. LANG SWITCHER ───────────────────────────────────── */

/*
 * Versión escritorio: contenedor anclado al extremo derecho del nav-container.
 * El nav-container ya es flex + space-between (logo ← → menú).
 * Añadimos el lang-switcher como tercer hijo, y empujamos con margin-left: auto
 * para separarlo visualmente del bloque central de enlaces.
 */
.lang-switcher {
  display: none;          /* Oculto en móvil por defecto */
  align-items: center;
  gap: 0;
  /* Con justify-content:space-between en .nav-container y 3 hijos,
     el lang-switcher queda naturalmente en el extremo derecho. */
}

@media (min-width: 768px) {
  .lang-switcher {
    display: flex;
  }
}

/* Enlace individual (ES / CA / EN) — escritorio */
.lang-switcher__link {
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
  padding: 0.3em 0.55em;
  border-radius: var(--radius-full);   /* Forma de píldora */
  transition: color var(--transition-fast), background-color var(--transition-fast);
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.lang-switcher__link:hover {
  color: var(--clr-white);
  background-color: rgba(0, 0, 0, 0.28);
}

/* Separador vertical | */
.lang-sep {
  color: rgba(255, 255, 255, 0.40);
  font-size: var(--fs-xs);
  line-height: 1;
  user-select: none;
  padding: 0 0.1em;
}

/* ── Versión móvil: dentro del menú desplegado ──────────────
 * .lang-switcher-mobile es un <li> que vive dentro de .nav-menu
 * y solo se muestra cuando el menú está abierto.
 * En escritorio lo ocultamos porque ya existe .lang-switcher.
 */
.lang-switcher-mobile {
  display: none;          /* Oculto siempre salvo menú móvil abierto */
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: linkFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (max-width: 767px) {
  /* Solo visible cuando el menú está activo */
  .nav-menu.is-open .lang-switcher-mobile {
    display: flex;
    animation-delay: 0.52s; /* Justo después del último nav-link */
  }

  /* Reutiliza la clase .lang-switcher__link pero con tamaño móvil */
  .nav-menu.is-open .lang-switcher-mobile .lang-switcher__link {
    font-family: var(--ff-sans);  /* Inter, no serif */
    font-size: clamp(0.9rem, 4vw, 1.1rem);
    font-weight: var(--fw-600);
    color: rgba(255, 255, 255, 0.75);
    padding: 0.4em 0.7em;
    border-radius: var(--radius-full);
    background-color: transparent;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Sobrescribir herencias del .nav-link en menú móvil */
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .nav-menu.is-open .lang-switcher-mobile .lang-switcher__link:hover {
    background-color: rgba(0, 0, 0, 0.28) !important;
    color: #fff !important;
  }

  .nav-menu.is-open .lang-switcher-mobile .lang-sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
    padding: 0 0.05em;
  }

  /* Sin el subrayado-expandible que tienen los nav-links principales */
  .nav-menu.is-open .lang-switcher-mobile .lang-switcher__link::after {
    display: none !important;
  }
}

/* En escritorio, aseguramos que el li móvil nunca sea visible */
@media (min-width: 768px) {
  .lang-switcher-mobile {
    display: none !important;
  }
}

/* ─── 7. HERO SECTION ─────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media (max-width: 767px) {
  .hero { background-attachment: scroll; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(54, 76, 71, 0.76) 0%,
    rgba(106, 138, 130, 0.60) 50%,
    rgba(35, 52, 47, 0.72) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  max-width: 800px;
  margin-inline: auto;
}

.hero-pretitle {
  font-size: var(--fs-xs);
  font-weight: var(--fw-600);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--sp-4);
}

.hero-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-700);
  color: var(--clr-white);
  line-height: 1.1;
  margin-bottom: var(--sp-6);
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.hero-title em {
  font-style: italic;
  color: var(--clr-mustard-500);
}

.hero-subtitle {
  font-size: var(--fs-lg);
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--sp-10);
  font-weight: var(--fw-300);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-actions .btn {
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.scroll-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.85);
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%       { transform: translateY(10px); opacity: 1; }
}

/* ─── 8. INTRO STRIP ─────────────────────────────────────── */
.intro-strip {
  padding-block: var(--sp-24);
  background-color: var(--clr-white);
}

.intro-grid {
  display: grid;
  gap: var(--sp-12);
  align-items: start;
}

@media (min-width: 900px) {
  .intro-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
}

.intro-text p {
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base);
  line-height: 1.75;
}

.intro-text .btn { margin-top: var(--sp-4); }

.intro-features {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  .intro-features {
    /* Alinea el borde superior con el h2 (.section-title) ignorando el kicker (.section-label) */
    margin-top: calc(var(--fs-xs) * 1.5 + var(--sp-3));
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background-color: var(--clr-leaf-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-leaf-100);
  border-left: 4px solid var(--clr-leaf-600);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.feature-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.feature-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  line-height: 1;
}

.feature-card h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-600);
  color: var(--clr-leaf-700);
  margin-bottom: 0;
}

.feature-card p {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  line-height: 1.6;
}

/* ─── 9. CARTA SECTION ───────────────────────────────────── */
.carta {
  padding-block: var(--sp-24);
  background-color: var(--clr-bg);
}

/* Tabs — wrapper con scroll horizontal en móvil (sin degradado lateral) */
.carta-tabs-wrapper {
  position: relative;
  margin-bottom: var(--sp-10);
}

/* Tabs */
.carta-tabs {
  position: relative; /* contexto para el indicador deslizante */
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-3);
  margin-bottom: 0;
  background-color: var(--clr-cream-100);
  /* Padding lateral simétrico: el texto no choca con los bordes redondeados */
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--clr-border);

  /* ─── Scroll horizontal táctil en móvil ─── */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* deslizamiento nativo con inercia en iOS */

  /* Scrollbar oculta visualmente pero funcional para touch/móvil */
  scrollbar-width: none; /* Firefox */

  /* Respeta el padding derecho al final del scroll en móvil
     para que 'Bebidas' no quede cortado contra el borde de pantalla */
  scroll-padding-inline-end: var(--sp-5);
}

/* Chrome / Safari / Edge (Chromium): scrollbar oculta visualmente, scroll táctil funcional */
.carta-tabs::-webkit-scrollbar {
  height: 0;
  width: 0;
}

/* ── Escritorio (≥900px): todos los tabs visibles, centrados, sin scroll ── */
@media (min-width: 900px) {
  .carta-tabs {
    /*
     * overflow-x: clip NO crea un scroll container (a diferencia de hidden),
     * así justify-content: center funciona sin clipear el lado izquierdo.
     * Si el contenido no desborda (que es el objetivo) esto es transparente.
     */
    overflow-x: clip;
    justify-content: center;
    gap: 4px;                        /* separación mínima pero visible */
    padding: var(--sp-2) var(--sp-4); /* simétrico: 8px arriba/abajo, 16px lados */
  }

  .tab-btn {
    padding: 10px 8px;               /* compacto y uniforme en todos los estados */
    font-size: var(--fs-xs);         /* ~13px: suficiente para que quepan los 8 tabs */
    letter-spacing: 0;               /* sin kern extra que sume anchura */
  }
}

/*
 * Indicador deslizante (pill) — se posiciona y dimensiona desde JS
 * usando variables de CSS (--indicator-x y --indicator-scale)
 * para animar únicamente transform, delegándolo a la GPU (evita Reflow).
 * opacity: 0 en CSS → JS lo revela tras posicionarlo correctamente,
 * eliminando el flash de indicador desalineado en la primera carga.
 */
.carta-tabs::before {
  content: '';
  position: absolute;
  top: var(--sp-2);
  bottom: var(--sp-2);
  left: 0;
  width: 100px;
  transform-origin: left center;
  transform: translateX(var(--indicator-x, 0px)) scaleX(var(--indicator-scale, 0));
  background-color: var(--clr-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-red);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity   120ms ease;
  z-index: 0;
  pointer-events: none;
  opacity: var(--indicator-opacity, 0); /* JS lo pone a 1 tras calcular la posición correcta */
}

.tab-btn {
  position: relative;  /* encima del indicador */
  z-index: 1;
  flex-shrink: 0;      /* evita que se compriman en scroll horizontal */
  white-space: nowrap;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  color: var(--clr-text-muted);
  background: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: color var(--transition-fast);
  letter-spacing: 0.01em;
}

/*
 * NO hay truco ::after: el text-shadow del estado activo no suma
 * ni un píxel de ancho, así que no hay layout shift que compensar.
 */

.tab-btn:hover:not(.tab-btn--active) {
  color: var(--clr-primary);
}

/*
 * Estado activo: única diferencia respecto al inactivo es el COLOR.
 * text-shadow simula la negrita visualmente sin sumar ningún píxel
 * de anchura al botón → cero layout shift al hacer clic.
 */
.tab-btn--active,
.tab-btn--active:hover,
.tab-btn--active:focus {
  color: var(--clr-white);
  text-shadow:
    0 0 0.5px currentColor,
    0 0 0.5px currentColor; /* pseudo-bold sin cambio de ancho */
  outline: none;
  box-shadow: none;
  border: none;
}

/* Panels */
.carta-panel--hidden {
  display: none;
}

/* Subsection titles within carta panels */
.carta-subsection-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-700);
  color: var(--clr-sage-700);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--clr-sage-100);
}

.carta-subsection-desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  margin-top: calc(var(--sp-8) * -1 + var(--sp-2));
  margin-bottom: var(--sp-6);
  font-style: italic;
}

/* Dish grid */
.carta-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .carta-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .carta-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Ingredientes extra (Noodles / Arroces panel) ────────────── */
.extras-list {
  margin-top: 3rem;
  padding: 1.5rem;
  background-color: var(--clr-cream);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.extras-list__title {
  font-size: 1.1rem;
  font-weight: var(--fw-600);
  color: var(--clr-text-dark);
  margin: 0 0 1rem 0;
}

.extras-list__price {
  color: #D32F2F;
  font-weight: var(--fw-700);
  margin-left: 0.5rem;
}

.extras-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1.5rem;
}

.extras-list__items li {
  font-size: var(--fs-sm);
  color: var(--clr-text-dark);
}

/*
 * ── DISH CARD — Hover premium ────────────────────────────────────────
 *
 * Principio de diseño:
 *   · Una sola curva de aceleración para tarjeta, sombra e imagen.
 *   · La misma duración (500 ms) en todos los elementos garantiza
 *     que todos terminan el movimiento exactamente al mismo tiempo.
 *   · Curva elegida: cubic-bezier(0.22, 0.61, 0.36, 1)
 *     — Arranque suave, desaceleración progresiva, cero rebote.
 *     — Idéntica tanto en hover-in como en hover-out gracias a que
 *     está definida en la clase base (no solo en :hover).
 */

/* Variable local para reutilizar la curva en todos los elementos */
.dish-card {
  --_ease-card: cubic-bezier(0.22, 0.61, 0.36, 1);
  --_dur-card:  500ms;

  background-color: var(--clr-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;

  /* Transición unificada: entrada Y salida viajan con la misma curva */
  transition:
    transform   var(--_dur-card) var(--_ease-card),
    box-shadow  var(--_dur-card) var(--_ease-card),
    border-color var(--_dur-card) var(--_ease-card);
}

.dish-card:hover {
  /*
   * Elevación contenida (1.025 × -5px):
   * Suficiente para percibir profundidad sin que la tarjeta
   * invada el espacio de las tarjetas vecinas en el grid.
   */
  transform: scale(1.025) translateY(-5px);
  border-color: var(--clr-gray-200);

  /*
   * Sombra en tres capas:
   *   1. Umbra larga y difusa (sensación de altura real)
   *   2. Penumbra corta y definida (plano de contacto)
   *   3. Halo de color rojo muy tenue (toque premium y coherente
   *      con la paleta del restaurante)
   */
  box-shadow:
    0 12px 36px -6px  rgba(0, 0, 0, 0.13),
    0  4px 12px -4px  rgba(0, 0, 0, 0.09),
    0  0   0    1px   rgba(211, 47, 47, 0.06);
}

/* ── Imagen dentro de la tarjeta ── */
.dish-card__image-wrap {
  position: relative;
  overflow: hidden;
  /* 4/3: formato más equilibrado que da mayor aire vertical a la comida */
  aspect-ratio: 4 / 3;
}

.dish-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;

  /*
   * Misma curva y duración que la tarjeta padre.
   * Resultado: el zoom de la foto y la elevación de la tarjeta
   * arrancan, progresan y terminan exactamente a la vez.
   */
  transition:
    transform var(--_dur-card) var(--_ease-card),
    filter    var(--_dur-card) var(--_ease-card);
  filter: brightness(1) saturate(1);
}

.dish-card:hover .dish-card__image-wrap img {
  /*
   * Zoom sutil (1.05): revela más contexto de la foto sin
   * deformar la composición original.
   * El ligero aumento de brillo y saturación hace que el plato
   * «salte» visualmente sin necesidad de efectos adicionales.
   */
  transform: scale(1.05);
  filter: brightness(1.04) saturate(1.08);
}

/*
 * ── PANEL BEBIDAS: tarjetas verticales con imagen completa ───────────
 * Todas las fotos de la sección de bebidas se muestran íntegras (sin
 * recorte) dentro de un marco retrato 3/4. object-fit:contain preserva
 * la composición original; el fondo crema rellena el espacio sobrante
 * de forma elegante cuando la foto no llena todo el contenedor.
 */
#panel-bebidas .dish-card__image-wrap {
  aspect-ratio: 3 / 4;                        /* retrato vertical */
  background-color: var(--clr-cream);         /* fondo visible con contain */
}

#panel-bebidas .dish-card__image-wrap img {
  object-fit: cover;                          /* rellena el marco al 100%, recorte natural */
  object-position: center center;
}


.dish-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background-color: var(--clr-leaf-600);
  color: var(--clr-white);
  font-size: 0.7rem;
  font-weight: var(--fw-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25em 0.75em;
  border-radius: var(--radius-full);
}

.dish-card__badge--popular {
  background-color: var(--clr-mustard-500);
  color: #181410;
}

.dish-card__badge--vegan {
  background-color: var(--clr-leaf-600);
}

.dish-card__body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.dish-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.dish-card__name {
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-600);
  color: var(--clr-gray-900);
  line-height: 1.2;
}

.dish-card__price {
  font-size: var(--fs-base);
  font-weight: var(--fw-700);
  color: var(--clr-primary);
  white-space: nowrap;
}

.dish-card__desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  line-height: 1.65;
  flex: 1;
}

.dish-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
}

.dish-card__tags li {
  font-size: 0.7rem;
  font-weight: var(--fw-500);
  letter-spacing: 0.05em;
  color: var(--clr-leaf-700);
  background-color: var(--clr-leaf-100);
  border: 1px solid var(--clr-leaf-600);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-full);
}

/* Opciones de proteina dentro de una dish-card */
.dish-card__options-label {
  font-size: 0.7rem;
  font-weight: var(--fw-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-top: var(--sp-1);
}

.dish-card__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.dish-card__option-item {
  font-size: 0.7rem;
  font-weight: var(--fw-500);
  color: var(--clr-gray-700);
  background-color: var(--clr-gray-50);
  border: 1px solid var(--clr-gray-200);
  padding: 0.2em 0.65em;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.dish-card__option-item span {
  color: var(--clr-primary);
  font-weight: var(--fw-600);
}

/* Bebidas layout */
.bebidas-grid {
  display: grid;
  gap: var(--sp-4);
}

.bebida-item {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  background-color: var(--clr-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.bebida-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.bebida-icon {
  font-size: 1.75rem;
  text-align: center;
}

.bebida-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-600);
  color: var(--clr-gray-900);
  margin-bottom: var(--sp-1);
}

.bebida-desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  line-height: 1.5;
}

.bebida-price {
  font-size: var(--fs-lg);
  font-weight: var(--fw-700);
  color: var(--clr-primary);
  white-space: nowrap;
}

.carta-cta {
  margin-top: var(--sp-16);
  text-align: center;
}

.carta-cta p {
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-4);
}

/* ─── 10. GALLERY STRIP ──────────────────────────────────── */
.gallery-strip {
  height: clamp(280px, 45vw, 480px);
  overflow: hidden;
}

.gallery-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
  gap: 0;
}

.gallery-strip__item {
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-slow), filter var(--transition-slow);
  filter: saturate(0.9) brightness(0.92);
}

.gallery-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-strip__item:hover {
  transform: scale(1.04);
  filter: saturate(1.1) brightness(1);
  z-index: 1;
}

@media (max-width: 600px) {
  .gallery-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-strip__item:nth-child(3),
  .gallery-strip__item:nth-child(4) { display: none; }
}

/* ─── 11. CONTACTO SECTION ───────────────────────────────── */
.contacto {
  padding-block: var(--sp-24);
  background-color: var(--clr-white);
}

.contacto-grid {
  display: grid;
  gap: var(--sp-16);
}

@media (min-width: 900px) {
  .contacto-grid { grid-template-columns: 1fr 1fr; }
}

.contacto-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-block: var(--sp-8);
}

.contacto-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.contacto-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.contacto-item strong {
  display: block;
  font-weight: var(--fw-600);
  color: var(--clr-gray-900);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-1);
}

.contacto-item a,
.contacto-item p,
.contacto-item address {
  font-size: var(--fs-base);
  color: var(--clr-text-muted);
  transition: color var(--transition-fast);
}

.contacto-item a:hover { color: var(--clr-primary); }

/* Instagram link */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  color: var(--clr-primary);
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid var(--clr-red-100);
  border-radius: var(--radius-full);
  background-color: var(--clr-red-50);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ig-link:hover {
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-white);
  box-shadow: var(--shadow-red);
}

.ig-icon {
  width: 20px;
  height: 20px;
  color: inherit;
  flex-shrink: 0;
}

/* Form */
.contacto-form-wrap {
  background-color: var(--clr-bg);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-md);
}

/* En móvil, el FAB se oculta al llegar al formulario, por lo que
   ya no es necesario reservar espacio extra en la parte inferior. */

.form-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-600);
  color: var(--clr-gray-900);
  margin-bottom: var(--sp-6);
}

#reservar {
  /* Compensa la cabecera fija + pequeño respiro visual */
  scroll-margin-top: calc(var(--header-h, 70px) + 16px);
}

.reserva-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}


.form-group {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  margin-top: var(--sp-2);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-4);
}

/* ── Móvil: redistribuir Fecha / Hora / Personas ── */
@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--sp-5);
  }

  /* Fecha ocupa toda la primera fila */
  .form-row .form-group:first-child {
    grid-column: 1 / -1;
  }

  /* Hora y Personas ocupan la segunda fila al 50% cada uno */
  .form-row .form-group:nth-child(2),
  .form-row .form-group:nth-child(3) {
    grid-column: auto;
  }

  /* Más espacio entre los demás campos del formulario en móvil */
  .reserva-form {
    gap: var(--sp-6);
  }

  /* Inputs y selects más altos y con mayor padding táctil */
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 0.85em 1em;
    font-size: var(--fs-base);
  }
}

.form-group label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-base);
  color: var(--clr-gray-400);   /* token correcto: gray-500 no existe en este sistema */
  transition: all var(--transition-fast);
  pointer-events: none;
  background-color: var(--clr-white);
  padding: 0 4px;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group select:focus + label,
.form-group select:not(:invalid) + label {
  top: 0;
  transform: translateY(-50%) scale(0.85);
  color: var(--clr-primary);
  font-weight: var(--fw-500);
}

/* Variante estática — anula el position:absolute del label genérico.
   Debe ir DESPUÉS de .form-group label para ganar la cascada. */
.form-group--static {
  flex-direction: column;   /* label arriba, input debajo */
  margin-top: 0;
}

.form-group--static > label {
  position: static !important;  /* garantiza la anulación frente a .form-group label */
  transform: none !important;
  top: auto;
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  color: var(--clr-gray-600);
  background-color: transparent;
  padding: 0;
  margin-bottom: 0.35rem;
  pointer-events: auto;
  transition: none;
}

.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  color: var(--clr-text);
  background-color: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 0.7em 1em;
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgb(211 47 47 / .15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--clr-gray-400);
}

.form-group input:user-valid,
.form-group select:user-valid {
  border-color: var(--clr-leaf-600);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-note {
  font-size: var(--fs-sm);
  color: var(--clr-primary);
  text-align: center;
  min-height: 1.5em;
}

.form-note:empty {
  display: none;
}

.form-note.error { color: var(--clr-primary-dk); }
.form-note.success { color: var(--clr-leaf-700); }

/* ─── 12. FOOTER ─────────────────────────────────────────── */
.site-footer {
  background-color: var(--clr-sage-800);
  color: rgba(255,255,255,0.85);
  padding-block: var(--sp-16) var(--sp-8);
}

.footer-logo {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 0 var(--sp-4) 0;
}

.footer-grid {
  display: grid;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2.5fr 1fr 1fr 1fr; align-items: start; }
}

/* ── Móvil: footer centrado ─────────────────────────────── */
@media (max-width: 767px) {
  .footer-grid {
    gap: var(--sp-10);     /* un poco menos de separación que en desktop */
  }

  /* Todas las columnas centradas */
  .footer-col {
    text-align: center;
  }

  /* Logo: auto-margen para centrarlo como bloque */
  .footer-logo {
    margin: 0 auto var(--sp-4);
  }

  /* Descripción de marca: salto de línea equilibrado + aire vertical */
  .footer-col .brand-desc {
    max-width: 20ch;              /* fuerza el corte en un punto simétrico */
    margin-inline: auto;          /* centra el bloque de texto dentro de la columna */
    margin-top: var(--sp-3);      /* respira respecto al logotipo */
    margin-bottom: var(--sp-2);   /* separa suavemente del bloque siguiente */
    text-wrap: balance;           /* distribuye las palabras en líneas de peso igual */
  }

  /* Lista de navegación: items centrados */
  .footer-links ul {
    align-items: center;
  }

  /* Iconos de redes sociales: centrados horizontalmente */
  .social-icons {
    justify-content: center;
  }
}

.footer-col h4 {
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  color: var(--clr-white);
  margin-bottom: var(--sp-5);
  font-weight: var(--fw-600);
}

.footer-col p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--sp-2);
}

.footer-col .brand-desc {
  max-width: 32ch;
}

.footer-col .closed {
  color: #cf8878; /* terracota desaturada — legible sobre verde oscuro sin vibración óptica */
  font-weight: var(--fw-500);
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-links a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.8);
  transition: color var(--transition-fast);
}

.footer-links a:hover { color: var(--clr-white); }

.social-icons {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  color: var(--clr-white);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.social-link:hover {
  background-color: var(--clr-primary);
  border-color: var(--clr-primary);
  transform: translateY(-2px);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--sp-8);
}

.footer-bottom p {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
}

/* ─── 13. REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-up {
    opacity: 1;
    transform: none;
  }
  html { scroll-behavior: auto; }
  .hero { background-attachment: scroll; }
}

/* ─── 14. MENÚ DEL DÍA ───────────────────────────────────── */
.menu-dia-wrap {
  margin-bottom: var(--sp-16);
}

/* Horario — nota discreta dentro de la tarjeta */
.menu-dia-schedule {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--sp-2);
  font-size: 0.85rem;
  font-weight: var(--fw-400);
  color: var(--clr-sage-700);
  letter-spacing: 0.01em;
}

@media (min-width: 768px) {
  .menu-dia-schedule span {
    white-space: nowrap;
  }
}
.menu-dia-schedule em { font-style: normal; opacity: 0.75; }
.menu-dia-clock { font-size: 0.95rem; }

/* Main card */
.menu-dia-card {
  background: var(--clr-white);
  border: 2px solid var(--clr-sage-100);
  border-radius: var(--radius-xl);
  padding: var(--sp-8) var(--sp-8) var(--sp-10);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

/* Decorative sage accent top-left */
.menu-dia-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--clr-sage-700), var(--clr-sage-600));
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

/* Card header */
.menu-dia-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1.5px solid var(--clr-sage-100);
  flex-wrap: wrap;
}

.menu-dia-card__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-700);
  color: var(--clr-gray-900);
  line-height: 1.15;
  margin-bottom: var(--sp-1);
}

.menu-dia-card__subtitle {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  font-weight: var(--fw-400);
  letter-spacing: 0.02em;
}

.menu-dia-card__price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.menu-dia-card__price {
  font-family: var(--ff-serif);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-700);
  color: var(--clr-primary);
  line-height: 1;
}

.menu-dia-card__price-note {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  margin-top: var(--sp-1);
}

/* Three-column layout */
.menu-dia-cols {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .menu-dia-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
  }
}

/* Column */
.menu-dia-col {
  padding: var(--sp-5);
  background: var(--clr-cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-gray-200);
}

.menu-dia-col__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-700);
  color: var(--clr-sage-800);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}

.menu-dia-col__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--clr-sage-700);
  color: var(--clr-white);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: var(--fw-700);
  flex-shrink: 0;
}

.menu-dia-col__note {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  font-style: italic;
  margin-bottom: var(--sp-3);
  margin-top: calc(-1 * var(--sp-2));
}

/* List */
.menu-dia-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.menu-dia-list li {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  line-height: 1.5;
  padding-left: var(--sp-3);
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.menu-dia-list li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--clr-sage-600);
  font-weight: var(--fw-700);
}

/* Inline tags inside lists */
.menu-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.55em;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: var(--fw-600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.menu-tag--vegan {
  background: var(--clr-leaf-100);
  color: var(--clr-leaf-700);
  border: 1px solid var(--clr-leaf-700);
}

.menu-tag--spicy {
  background: var(--clr-red-50);
  color: var(--clr-red-700);
  border: 1px solid var(--clr-red-500);
}

/* Extra price marker */
.menu-dia-extra {
  font-size: var(--fs-xs);
  color: var(--clr-mustard-600);
  font-weight: var(--fw-600);
  white-space: nowrap;
}

/* Bebida text */
.menu-dia-bebida {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  line-height: 1.7;
}

/* ── Menú Sopa secondary card ── */
.menu-sopa-card {
  margin-top: var(--sp-5);
  background: linear-gradient(135deg, var(--clr-sage-900) 0%, var(--clr-sage-800) 100%);
  border-radius: var(--radius-xl);
  padding: var(--sp-5) var(--sp-8);
  box-shadow: var(--shadow-sage);
}

.menu-sopa-card__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.menu-sopa-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.menu-sopa-body {
  flex: 1;
  min-width: 180px;
}

.menu-sopa-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-700);
  color: var(--clr-white);
  margin-bottom: var(--sp-1);
}

.menu-sopa-desc {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.8);
}

.menu-sopa-separator {
  margin-inline: var(--sp-2);
  opacity: 0.5;
}

.menu-sopa-price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}

.menu-sopa-price {
  font-family: var(--ff-serif);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-700);
  color: var(--clr-mustard-500);
  line-height: 1;
}

/* ─── 15. FAB — BOTÓN FLOTANTE DE RESERVA (MÓVIL) ───────── */
/*
 * Estado base: SIEMPRE oculto (invisible + no interactivo).
 * El botón solo aparece cuando JS añade .fab--visible,
 * lo cual ocurre en cuanto el usuario deja atrás la sección Hero.
 * Desaparece de nuevo con .fab--hidden al llegar al formulario de reserva.
 */
.fab-reserva {
  display: none; /* desktop: oculto por display */
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-5);
  z-index: 200;

  align-items: center;
  justify-content: center;

  /* Altura fija: el botón no crece ni encoge verticalmente */
  height: 48px;

  /* Estado PÍLDORA: padding horizontal simétrico generoso */
  padding: 0 20px;

  background-color: var(--clr-primary);
  color: var(--clr-white);
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  text-decoration: none;

  border: none;
  /* border-radius = mitad de height → siempre círculo/píldora perfectos */
  border-radius: 24px;

  /*
   * ESTADO BASE = oculto: parte ligeramente desplazado hacia abajo
   * y completamente transparente. pointer-events: none evita
   * interacciones accidentales cuando no es visible.
   */
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;

  /*
   * Transición elástica sincronizada.
   * Solo animamos las propiedades que realmente cambian; evitamos
   * "transition: all" que provoca conflictos con opacity del fade-out.
   * cubic-bezier(0.34, 1.56, 0.64, 1) → curva con ligero resorte al final
   */
  transition:
    padding          0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s ease,
    transform        0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow       0.3s ease,
    opacity          0.4s ease;
}

.fab-reserva svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.fab-reserva .fab-label {
  display: inline-block;

  /* Valor concreto (no "auto") indispensable para que max-width anime */
  max-width: 140px;
  /* Mismo margen inicial que en .scrolling → 0 cuando se contrae */
  margin-left: 8px;

  white-space: nowrap;
  overflow: hidden;
  opacity: 1;

  /*
   * La curva se sincroniza con el contenedor para que el texto
   * reaparezca exactamente cuando el botón termina de estirarse.
   * opacity tiene un delay corto para que el texto espere a que
   * haya espacio antes de reaparecer.
   */
  transition:
    max-width   0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin-left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity     0.25s ease;
}

/* ── Estado VISIBLE: aparece al dejar atrás el Hero ── */
/*
 * JS añade esta clase cuando el Hero deja de ser visible.
 * Restablece opacity y posición para mostrar el botón con
 * una transición suave de entrada (fade + slide-up).
 */
.fab-reserva.fab--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Efectos Hover / Active — solo cuando el botón es visible */
.fab-reserva.fab--visible:hover {
  background-color: var(--clr-primary-dk);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.fab-reserva.fab--visible:active {
  transform: translateY(0);
}

/* ── Estado .scrolling: círculo (mientras el usuario hace scroll) ── */
/*
 * Padding reducido a: (48px - 20px icono) / 2 = 14px por lado
 * → cuadrado de 48×48 que border-radius convierte en círculo perfecto.
 */
.fab-reserva.scrolling {
  padding: 0 14px;
}

.fab-reserva.scrolling .fab-label {
  max-width: 0;
  margin-left: 0;
  /* El texto desaparece rápido para que no se vea aplastado */
  opacity: 0;
  transition:
    max-width   0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin-left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity     0.15s ease;   /* sale antes de que el botón encoja */
}

/* ── Estado oculto (al llegar al formulario de reserva) ── */
/*
 * Sobrescribe .fab--visible cuando el usuario alcanza el formulario.
 * El botón desaparece con una transición inversa (fade + slide-down).
 */
.fab-reserva.fab--hidden {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

@media (max-width: 767px) {
  .fab-reserva { display: flex; }
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .fab-reserva,
  .fab-reserva .fab-label,
  .fab-reserva.scrolling .fab-label {
    transition: opacity 0.3s ease;
  }
}

.menu-sopa-note {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
  margin-top: var(--sp-1);
}

/* ─── 16. DISH MODAL ─────────────────────────────────────── */
/*
 * Un solo modal reutilizable para todos los platos.
 * JS extrae los datos de la tarjeta clicada y los inyecta aquí.
 *
 * Estructura de animación (3 capas sincronizadas):
 *   1. .dish-modal      → fade del overlay (opacity)
 *   2. .dish-modal__box → entrada de la caja (scale + translateY)
 *   3. .dish-modal__img → zoom de la foto (scale)
 *   Misma curva cubic-bezier en las 3 = movimiento coherente.
 */

.dish-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dish-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.dish-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(24, 20, 16, 0.70);
  backdrop-filter: blur(7px) saturate(0.85);
  -webkit-backdrop-filter: blur(7px) saturate(0.85);
}

.dish-modal__box {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 840px;
  max-height: 70vh;             /* controlamos la altura máxima del popup */
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 32px 80px -12px rgba(0, 0, 0, 0.32),
    0  8px 24px -6px  rgba(0, 0, 0, 0.16);
  transform: scale(0.95);
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity   420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 600px) {
  .dish-modal__box {
    grid-template-columns: 1.05fr 1fr;
    max-height: 70vh;           /* mismo límite en desktop */
  }
}

.dish-modal.is-open .dish-modal__box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.dish-modal__image-col {
  position: relative;
  overflow: hidden;
  height: 240px;
  flex-shrink: 0;
  background-color: var(--clr-cream);
}

/* Las esquinas izquierdas del contenedor imagen deben respetar
 * el border-radius del modal. overflow:hidden en el padre se encarga
 * de los lados derecho/inferior, pero la columna izquierda necesita
 * su propio border-radius para que la imagen no se salga del marco. */
@media (min-width: 600px) {
  .dish-modal__image-col {
    height: auto;
    min-height: 340px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }
}

.dish-modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.06);
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dish-modal.is-open .dish-modal__img {
  transform: scale(1);
}

.dish-modal__badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background-color: var(--clr-mustard-500);
  color: #181410;
  font-size: 0.68rem;
  font-weight: var(--fw-700);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.28em 0.8em;
  border-radius: var(--radius-full);
}

.dish-modal__badge--vegan {
  background-color: var(--clr-leaf-600);
  color: var(--clr-white);
}

/* Columna de texto: padding generoso + centrado vertical */
.dish-modal__content {
  display: flex;
  flex-direction: column;
  justify-content: center;      /* centra el bloque de texto verticalmente */
  gap: var(--sp-5);
  padding: 2.5rem;
  overflow-y: auto;
}

@media (max-width: 599px) {
  .dish-modal__content { padding: 1.75rem 1.5rem; }
}

/* Fila título + precio: alineación limpia sin padding extra
 * (el botón X ya es absolutamente independiente del flujo) */
.dish-modal__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.dish-modal__name {
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-700);
  color: var(--clr-gray-900);
  line-height: 1.2;
}

.dish-modal__price {
  font-size: var(--fs-xl);
  font-weight: var(--fw-700);
  color: var(--clr-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Precio oculto en el modal — visible solo en las tarjetas de la carta */
#modal-price { display: none; }

.dish-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
}

.dish-modal__tags li {
  font-size: 0.72rem;
  font-weight: var(--fw-500);
  letter-spacing: 0.05em;
  color: var(--clr-leaf-700);
  background-color: var(--clr-leaf-100);
  border: 1px solid var(--clr-leaf-600);
  padding: 0.25em 0.7em;
  border-radius: var(--radius-full);
}

.dish-modal__desc {
  font-size: var(--fs-base);
  color: var(--clr-text-muted);
  line-height: 1.78;
  flex: 1;
}

/* Botón cerrar: sutil, independiente, esquina superior derecha del modal */
.dish-modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  /* Aspecto: círculo traslúcido muy sutil — nada llamativo */
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: rgba(0, 0, 0, 0.55);
  transition:
    color            200ms ease,
    background-color 200ms ease,
    transform        280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}
.dish-modal__close:hover {
  background: rgba(255, 255, 255, 0.95);
  color: rgba(0, 0, 0, 0.85);
  transform: rotate(90deg);
}

.dish-modal__close:active {
  transform: scale(0.93) rotate(90deg);
}

.dish-modal__close svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.dish-card { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .dish-modal,
  .dish-modal__box,
  .dish-modal__img,
  .dish-modal__close {
    transition: opacity 150ms ease !important;
    transform: none !important;
  }
}

/* ─── 14. MICRO-ANIMATIONS ───────────────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    transition: opacity 300ms ease !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ─── 17. AUDITORÍA RESPONSIVIDAD MÓVIL / TABLET ─────────────
   Estas reglas complementan (sin duplicar) los breakpoints
   existentes. Se ordenan de mayor a menor viewport para que
   los overrides más específicos (≤480px) siempre ganen.
   ═══════════════════════════════════════════════════════════════ */

/* ── 17.0 Prevención global de scroll horizontal ─────────────
   Garantiza que ningún elemento desborde la anchura del
   documento en cualquier resolución.                          */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Protección defensiva: cualquier imagen o medio sin max-width
   explícito queda acotado al contenedor padre.               */
img,
video,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

/* ── 17.1 Tablet — ajustes menores (≤768px) ─────────────────*/
@media (max-width: 768px) {

  /* Sección de carta: reducir padding lateral */
  .carta {
    padding-block: var(--sp-16);
  }

  /* Menú del día: header interno puede apilar verticalmente */
  .menu-dia-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  /* Caja de precio del menú: alinear a la izquierda en tablet */
  .menu-dia-card__price-box {
    align-items: flex-start;
  }
}

/* ── 17.2 Móvil — ajustes principales (≤600px) ──────────────*/
@media (max-width: 600px) {

  /* Reducir padding lateral general del contenedor */
  .container {
    padding-inline: var(--sp-4);
  }

  /* Hero: menos padding vertical y horizontal en pantallas pequeñas */
  .hero-content {
    padding: var(--sp-6) var(--sp-4);
  }

  /* Hero: botones apilados en columna si no caben en fila */
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* Secciones intro y contacto: menos padding vertical */
  .intro-strip,
  .contacto {
    padding-block: var(--sp-12);
  }

  /* Formulario: padding lateral reducido para pantallas ajustadas */
  .contacto-form-wrap {
    padding: var(--sp-5);
  }



  /* Fila de teléfono (prefijo fijo + campo número):
     El contenedor es un div con display:flex inline.
     En móvil lo dejamos en fila pero garantizamos que el campo
     de número ocupe el espacio restante sin desbordarse.      */
  [style*="display: flex"][style*="gap: 0.5rem"] {
    flex-wrap: nowrap;         /* mantener en fila — es correcto en móvil */
    align-items: flex-end;
  }

  /* Ítem de bebidas: en pantallas pequeñas, el precio puede
     quedar muy justo. Reducimos el tamaño del icono y el gap. */
  .bebida-item {
    grid-template-columns: 2.5rem 1fr auto;
    gap: var(--sp-3);
    padding: var(--sp-4);
  }

  .bebida-icon { font-size: 1.4rem; }

  /* Precio de bebida: reducir tamaño para evitar desbordamiento */
  .bebida-price {
    font-size: var(--fs-base);
  }

  /* Extras list: pasar a 1 columna en móvil */
  .extras-list__items {
    grid-template-columns: 1fr;
  }

  /* Menú del día: padding de la tarjeta más compacto */
  .menu-dia-card {
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
  }

  /* Tarjeta sopa: padding lateral más ajustado */
  .menu-sopa-card {
    padding: var(--sp-4) var(--sp-5);
  }

  /* Inner de tarjeta sopa: apilar en columna si el contenido no cabe */
  .menu-sopa-card__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  /* Precio de sopa: moverlo abajo y alinear a la izquierda */
  .menu-sopa-price-box {
    align-items: flex-start;
    margin-left: 0;
  }

  /* Galería: ya es 2 col, pero reducir altura del strip en móvil */
  .gallery-strip {
    height: clamp(180px, 50vw, 280px);
  }

  /* Modal: asegurar que no supere la pantalla en altura */
  .dish-modal__box {
    max-height: 85vh;
  }

  /* Footer: reducir padding */
  .site-footer {
    padding-block: var(--sp-10) var(--sp-6);
  }
}

/* ── 17.3 Móvil estrecho — ajustes finos (≤480px) ───────────*/
@media (max-width: 480px) {

  /* Tipografía del Hero: garantizar que el título no se corte */
  .hero-title {
    font-size: clamp(2rem, 9vw, 3rem);
    word-break: break-word;
  }

  .hero-subtitle {
    font-size: var(--fs-base);
  }

  /* Tabs de la carta: reducir padding interior de cada botón */
  .tab-btn {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
  }

  /* Tarjeta de plato: padding interior del cuerpo más compacto */
  .dish-card__body {
    padding: var(--sp-4);
  }

  /* Nombre del plato: reducir tamaño para evitar desbordamiento */
  .dish-card__name {
    font-size: var(--fs-base);
  }

  /* Menú del día: título y precio más compactos */
  .menu-dia-card__title {
    font-size: var(--fs-xl);
  }

  .menu-dia-card__price {
    font-size: var(--fs-2xl);
  }

  /* Sopa: título más pequeño en móvil muy estrecho */
  .menu-sopa-title {
    font-size: var(--fs-xl);
  }

  .menu-sopa-price {
    font-size: var(--fs-2xl);
  }

  /* Section titles: ajustar si el texto desborda */
  .section-title {
    font-size: var(--fs-xl);
    word-break: break-word;
  }

  /* Formulario: campo de fecha, hora y personas más alto para
     facilitar el toque táctil                                */
  .form-group input,
  .form-group select,
  .form-group textarea {
    min-height: 48px;
  }

  /* Wrapper del formulario: padding mínimo */
  .contacto-form-wrap {
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
  }

  /* Feature cards de la sección Nosotros: reducir padding */
  .feature-card {
    padding: var(--sp-4);
  }

  /* Ítem de contacto: gap más estrecho */
  .contacto-item {
    gap: var(--sp-3);
  }

  /* Footer: aún más compacto */
  .footer-col h4 {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-3);
  }
}