/* ==========================================================================
   NÓMADA RESTAURANTE — Design System
   --------------------------------------------------------------------------
   Grounded in the real Nómada identity (gruponomada.es):
   - Typeface: Barlow (the brand's own condensed grotesque, used loud & bold)
   - Palette: forest green / deep navy / terracotta-coral / warm stone-beige /
     mustard-gold, sampled from the site's own texture files
     (Textura_Beige, Textura_Durazno, Textura_Green) and CTA colours.
   - Signature motif: the zig-zag "textile" frame Nómada already uses around
     photography — kept as the one bold recurring device, refined and used
     deliberately rather than everywhere.
   - No serif is introduced: the brand has no serif in its DNA, and stacking
     a display serif onto a cream background is the generic "AI restaurant
     site" tell. Barlow, set very large and very bold, carries the editorial
     weight instead.
   ========================================================================== */

/* -------------------------------- Tokens -------------------------------- */
:root{
  /* Colour */
  --color-bg:        #F4EEE1;   /* warm stone / paper — "Textura Beige" */
  --color-peach:      #F0B98B;   /* "Textura Durazno" section colour */
  --color-coral:      #E15B3A;   /* headline / CTA accent */
  --color-coral-dark: #C24A2C;
  --color-green:      #26402E;   /* "Textura Green" — header, footer, ink sections */
  --color-green-deep: #1B2F22;
  --color-green-light:#3B5B41;
  --color-navy:       #142330;   /* primary buttons, dark headings */
  --color-navy-light: #223648;
  --color-gold:       #E5B24C;   /* frame / mat accent */
  --color-cream:      #FBF7ED;   /* text-on-dark, card paper */
  --color-ink:        #1C1912;   /* body text on light backgrounds */
  --color-ink-soft:   rgba(28,25,18,0.68);
  --color-line:       rgba(28,25,18,0.14);
  --color-line-invert:rgba(251,247,237,0.24);

  /* Type */
  --font-display: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Barlow', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad-y: clamp(4rem, 9vw, 8rem);
  --radius-none: 0;

  /* Motion */
  --ease-editorial: cubic-bezier(.22,.61,.28,1);
  --dur-slow: 900ms;
  --dur-med: 550ms;
  --dur-fast: 260ms;
}

/* -------------------------------- Reset ---------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, select, textarea{ font: inherit; }

/* Skip link */
.skip-link{
  position: absolute; left: 1rem; top: -60px;
  background: var(--color-navy); color: var(--color-cream);
  padding: .75rem 1.25rem; z-index: 999; transition: top var(--dur-fast) ease;
}
.skip-link:focus{ top: 1rem; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--color-coral);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------ Film grain ------------------------------ */
/* A fixed, whole-page noise layer in mix-blend-mode:overlay — the cheapest
   way to give flat digital color the tactile, slightly imperfect texture of
   print/film, which also happens to be forgiving of the one lower-resolution
   hero photo. Pure SVG turbulence, no image request. */
.grain-overlay{
  position: fixed; top: 0; left: 0; z-index: 998; pointer-events: none;
  /* Explicit dvw/dvh instead of inset:0 — inset (and % widths) on a fixed
     element resolve against the *layout* viewport, which on mobile can be
     wider than what's actually visible while the browser's address bar is
     mid-animation on scroll. dvw/dvh track the real, currently-visible
     viewport, so this (and every other full-bleed fixed element below)
     stops drifting past the right edge while scrolling on a phone. */
  width: 100vw; height: 100vh;
  width: 100dvw; height: 100dvh;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
@media (prefers-reduced-motion: reduce){ .grain-overlay{ opacity: .035; } }

/* ------------------------------ Scroll progress -------------------------- */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px;
  width: 100vw; width: 100dvw;
  z-index: 999; transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--color-coral);
  pointer-events: none;
}

/* ------------------------------ Custom cursor ----------------------------- */
.cursor-dot{
  position: fixed; top: 0; left: 0; width: 10px; height: 10px;
  border-radius: 50%; background: var(--color-coral);
  transform: translate(-50%,-50%); z-index: 997; pointer-events: none;
  transition: width var(--dur-fast) var(--ease-editorial), height var(--dur-fast) var(--ease-editorial),
              background var(--dur-fast) var(--ease-editorial), opacity var(--dur-fast) ease;
  opacity: 0;
  mix-blend-mode: difference;
}
.cursor-dot.is-active{ opacity: 1; }
.cursor-dot.is-hover{ width: 46px; height: 46px; background: var(--color-cream); }
@media (hover: none), (pointer: coarse){ .cursor-dot{ display: none; } }

/* ------------------------------ Typography -------------------------------- */
.eyebrow{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--color-coral);
}
h1, .h1{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
  font-size: clamp(3rem, 9vw, 7.5rem);
}
h2, .h2{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.02;
  font-size: clamp(2rem, 4.6vw, 3.75rem);
}
h3, .h3{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}
p{ max-width: 62ch; }
.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.quote{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  line-height: 1.3;
  max-width: 34ch;
}
.small-caps-label{
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* -------------------------------- Layout ---------------------------------- */
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section{ padding-block: var(--section-pad-y); position: relative; }
.section--tight{ padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--green{ background: var(--color-green); color: var(--color-cream); }
.section--peach{ background: var(--color-peach); color: var(--color-navy); }
.section--navy{ background: var(--color-navy); color: var(--color-cream); }
.section--bg{ background: var(--color-bg); color: var(--color-ink); }

.grid-12{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.visually-hidden{
  position:absolute; width:1px;height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Any author rule that sets `display` on an element beats the UA
   stylesheet's default `[hidden]{display:none}` (author always outranks
   UA origin, specificity aside) — restated here with !important so toggling
   the `hidden` attribute in JS keeps working even on elements that also
   carry their own `display:flex`/`grid` class (e.g. the cookie panel). */
[hidden]{ display: none !important; }

/* -------------------------------- Buttons ---------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .04em;
  padding: 1rem 1.75rem;
  border: 1.5px solid currentColor;
  transition: background var(--dur-fast) var(--ease-editorial), color var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial);
  white-space: nowrap;
}
.btn svg{ width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-editorial); }
/* A handful of buttons carry longer copy ("Seguir en Instagram" with the
   @handle, etc.) that a fixed white-space:nowrap can push past a narrow
   phone's edge. Letting the label wrap (icon stays put via flex-shrink:0)
   is safer than nowrap here, without touching the short, common buttons'
   look on every wider screen. */
@media (max-width: 420px){
  .btn{ white-space: normal; text-align: left; }
  .btn svg{ flex-shrink: 0; }
}
.btn:hover svg{ transform: translate(3px,-3px); }

.btn--solid{
  background: var(--color-coral);
  border-color: var(--color-coral);
  color: var(--color-cream);
}
.btn--solid:hover{ background: var(--color-coral-dark); border-color: var(--color-coral-dark); }

.btn--outline-dark{ color: var(--color-navy); border-color: var(--color-navy); }
.btn--outline-dark:hover{ background: var(--color-navy); color: var(--color-cream); }

.btn--outline-light{ color: var(--color-cream); border-color: var(--color-line-invert); }
.btn--outline-light:hover{ background: var(--color-cream); color: var(--color-green); border-color: var(--color-cream); }

.btn--ghost{ padding: 0; border: none; font-weight: 700; }
.link-underline{
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--dur-med) var(--ease-editorial);
}
.link-underline:hover, .link-underline:focus-visible{ background-size: 100% 1.5px; }

/* -------------------------------- Header ---------------------------------- */
.site-header{
  position: fixed; left: 0; top: 0; z-index: 100;
  width: 100vw; width: 100dvw;
  padding-block: 1.35rem;
  background: transparent;
  transition: background var(--dur-med) var(--ease-editorial), padding var(--dur-med) var(--ease-editorial), box-shadow var(--dur-med) var(--ease-editorial);
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.site-header.is-scrolled{
  background: rgba(38,64,46,0.92);
  backdrop-filter: blur(10px);
  padding-block: .85rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.site-header.is-open{ background: var(--color-green); }
/* Pages with no full-bleed hero behind the header (Contacto, Vístete con
   Nómada, the legal pages, the carta) start straight into a light
   .section--bg — a transparent header there means cream/white nav text on
   a near-white background, invisible until the user scrolls far enough to
   trigger .is-scrolled. Give those pages the solid header from the first
   frame instead of waiting on scroll. */
.site-header.no-hero{
  background: rgba(38,64,46,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

.logo{
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--font-display); color: var(--color-cream);
}
.logo .logo-mark{ font-weight: 900; font-size: 1.65rem; letter-spacing: .01em; }
.logo .logo-sub{ font-weight: 600; font-size: .56rem; letter-spacing: .16em; opacity: .82; margin-top: .3rem; }
.logo-img{ height: 52px; width: auto; display: block; transition: opacity var(--dur-fast) ease, height var(--dur-med) var(--ease-editorial); }
.logo:hover .logo-img{ opacity: .82; }
.site-header.is-scrolled .logo-img{ height: 40px; }
.footer-brand .logo-img{ height: 64px; }

.nav-primary{ display: none; }
.nav-primary > ul{ display: flex; gap: 2.1rem; align-items: center; }
.nav-primary a{
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-cream);
}

/* ------------------------------ Nav dropdown (Nuestra Carta) --------------- */
.nav-dropdown{ position: relative; }
/* Deliberately NOT display:flex here: a flex item's display is
   auto-"blockified" per spec, and a blockified single-line <a> reports its
   *line-height* as its own box height, while the same <a> left inline
   reports a smaller glyph/content-box height — a good few px shorter. Next
   to plain inline siblings ("Sobre Nosotros" etc.) in the tight desktop nav
   row, that's enough to visibly knock "Nuestra Carta" out of vertical line
   with the rest. Keeping the link truly inline and aligning the toggle
   button with vertical-align instead sidesteps the whole discrepancy. */
.nav-dropdown-row{ white-space: nowrap; }
.nav-dropdown-row > a{ padding-bottom: 0; }
.nav-dropdown-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--color-cream); opacity: .75; flex-shrink: 0;
  vertical-align: middle; margin-left: .3rem;
}
.nav-dropdown-toggle .chevron{ width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease-editorial); }
/* The menu's own box sits flush against the trigger (no margin-gap) and
   uses padding-top as an invisible "bridge" instead — a gap made of margin
   is a dead zone the cursor has to cross to get from the trigger down to
   the menu, and CSS :hover drops the instant the pointer leaves the
   trigger's box, so the menu vanished before a diagonal mouse path down to
   an option ever got there. The visible panel (background/border/shadow)
   is drawn by ::before, inset below that bridge, so it still *looks*
   like it floats with a gap. */
.nav-dropdown-menu{
  display: block;
  list-style: none; margin: 0; padding: 10px 0 .5rem;
  position: absolute; top: 100%; left: 50%;
  min-width: 200px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity var(--dur-fast) var(--ease-editorial), transform var(--dur-fast) var(--ease-editorial), visibility 0s var(--dur-fast);
  z-index: 20;
}
.nav-dropdown-menu::before{
  content: ""; position: absolute; inset: 10px 0 0 0; z-index: -1;
  background: var(--color-green); border: 1px solid var(--color-line-invert);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.nav-dropdown-menu a{
  display: block; padding: .6rem 1.15rem; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--color-cream); opacity: .82;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible{ opacity: 1; background: rgba(255,255,255,.07); }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  transition: opacity var(--dur-fast) var(--ease-editorial), transform var(--dur-fast) var(--ease-editorial);
}
.nav-dropdown:hover .nav-dropdown-toggle .chevron,
.nav-dropdown.is-open .nav-dropdown-toggle .chevron{ transform: rotate(180deg); }

/* ------------------------------ Language dropdown --------------------------- */
.lang-switch{ display: none; position: relative; align-items: center; }
.lang-current{
  display: flex; align-items: center; gap: .3rem;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  color: var(--color-cream); padding: .3rem .1rem;
}
.lang-current .chevron{ width: 11px; height: 11px; transition: transform var(--dur-fast) var(--ease-editorial); }
.lang-switch:hover .lang-current .chevron,
.lang-switch.is-open .lang-current .chevron{ transform: rotate(180deg); }
/* Same invisible-bridge technique as .nav-dropdown-menu above (see its
   comment) — no margin-gap for the cursor to lose :hover crossing. */
.lang-menu{
  list-style: none; margin: 0; padding: 10px 0 .5rem;
  position: absolute; top: 100%; right: 0;
  min-width: 150px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-editorial), transform var(--dur-fast) var(--ease-editorial), visibility 0s var(--dur-fast);
  z-index: 20;
}
.lang-menu::before{
  content: ""; position: absolute; inset: 10px 0 0 0; z-index: -1;
  background: var(--color-green); border: 1px solid var(--color-line-invert);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.lang-menu a{
  display: block; padding: .55rem 1.15rem;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--color-cream); opacity: .8;
}
.lang-menu a:hover, .lang-menu a:focus-visible{ opacity: 1; background: rgba(255,255,255,.07); }
.lang-menu a[aria-current="true"]{ opacity: 1; color: var(--color-peach); }
.lang-switch:hover .lang-menu,
.lang-switch:focus-within .lang-menu,
.lang-switch.is-open .lang-menu{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease-editorial), transform var(--dur-fast) var(--ease-editorial);
}

.header-actions{ display: flex; align-items: center; gap: 1.25rem; }

.btn--reserve{
  background: var(--color-coral); color: var(--color-cream);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .04em; padding: .8rem 1.4rem;
  border: 1.5px solid var(--color-coral);
}
.btn--reserve:hover{ background: transparent; color: var(--color-cream); }

.menu-toggle{
  display: flex; flex-direction: column; gap: 5px; padding: .4rem;
  width: 40px; height: 34px; justify-content: center; align-items: flex-end;
}
.menu-toggle span{ display:block; height: 2px; background: var(--color-cream); transition: all var(--dur-fast) var(--ease-editorial); }
.menu-toggle span:nth-child(1){ width: 26px; }
.menu-toggle span:nth-child(2){ width: 20px; }
.menu-toggle span:nth-child(3){ width: 26px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); width: 26px; }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); width: 26px; }

.mobile-menu{
  position: fixed; top: 0; left: 0; background: var(--color-green); z-index: 90;
  width: 100vw; height: 100vh;
  width: 100dvw; height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem var(--container-pad);
  transform: translateY(-100%);
  transition: transform var(--dur-med) var(--ease-editorial);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu nav > ul{ display: flex; flex-direction: column; gap: 1.1rem; }
.mobile-menu li{
  opacity: 0; transform: translateX(-16px);
  transition: opacity var(--dur-med) var(--ease-editorial), transform var(--dur-med) var(--ease-editorial);
}
.mobile-menu.is-open li{ opacity: 1; transform: translateX(0); }
.mobile-menu.is-open li:nth-child(1){ transition-delay: .08s; }
.mobile-menu.is-open li:nth-child(2){ transition-delay: .14s; }
.mobile-menu.is-open li:nth-child(3){ transition-delay: .2s; }
.mobile-menu.is-open li:nth-child(4){ transition-delay: .26s; }
.mobile-menu a{
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 2.75rem); color: var(--color-cream);
}
.mobile-menu .mobile-menu-foot{
  margin-top: 3rem; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--color-line-invert); padding-top: 1.5rem;
}
/* The mobile drawer's language switcher must show regardless of the
   960px breakpoint gating the header's own — this is the only place it's
   reachable below that width. */
.mobile-menu .lang-switch{ display: flex; }
.mobile-menu .lang-current{ font-size: 1rem; }
.mobile-menu .lang-current .chevron{ width: 13px; height: 13px; }
.mobile-menu .lang-menu{
  top: auto; right: auto; left: 0; bottom: 100%; margin-top: 0; margin-bottom: 10px;
}

/* On the full-screen mobile drawer a hover-triggered popover makes no sense
   (no hover on touch) and an absolutely-positioned "Nuestra Carta" submenu
   would float oddly over the other huge nav links — instead it expands
   inline, toggled only by the chevron button (tapping the link itself still
   navigates straight to the dish section). */
/* The desktop row deliberately avoids display:flex (see .nav-dropdown-row
   comment above) to keep the link genuinely inline for alignment purposes;
   that concern doesn't apply to these huge stacked mobile-drawer rows, and
   flex is the simplest way to push the toggle to the far right here. */
.mobile-menu .nav-dropdown-row{ display: flex; align-items: center; justify-content: space-between; white-space: normal; }
.mobile-menu .nav-dropdown-toggle{ width: 38px; height: 38px; vertical-align: unset; margin-left: 0; }
.mobile-menu .nav-dropdown-toggle .chevron{ width: 22px; height: 22px; }
.mobile-menu .nav-dropdown-menu{
  display: block;
  position: static; left: auto; transform: none; background: none; border: none; box-shadow: none;
  min-width: 0; margin: 0; padding: 0;
  max-height: 0; overflow: hidden; opacity: 1; visibility: visible; pointer-events: auto;
  transition: max-height var(--dur-med) var(--ease-editorial);
}
/* The desktop version's floating panel background lives on ::before now
   (see .nav-dropdown-menu::before) — this drawer renders the submenu
   inline instead, so that panel graphic must be switched off here too. */
.mobile-menu .nav-dropdown-menu::before{ content: none; }
/* Specificity note: the desktop hover/open state rule
   (`.nav-dropdown.is-open .nav-dropdown-menu`, 3 classes) outranks the
   plain `.mobile-menu .nav-dropdown-menu` reset above (2 classes) — so the
   open-state transform/position it sets for the *desktop* centred popover
   must be re-overridden here at matching-or-higher specificity, or it wins
   and drags this full-width mobile panel ~50% of its own width off-screen. */
.mobile-menu .nav-dropdown.is-open .nav-dropdown-menu,
.mobile-menu .nav-dropdown:focus-within .nav-dropdown-menu{
  max-height: 16rem; margin-top: .75rem;
  position: static; left: auto; transform: none;
}
.mobile-menu .nav-dropdown-menu a{
  font-size: 1.15rem; font-weight: 600; text-transform: none;
  padding: .5rem 0; opacity: .78; color: var(--color-cream);
}
.mobile-menu .nav-dropdown.is-open .nav-dropdown-toggle .chevron{ transform: rotate(180deg); }

@media (min-width: 960px){
  .nav-primary{ display: block; }
  .lang-switch{ display: flex; }
  .menu-toggle{ display: none; }
}

/* -------------------------------- Hero ---------------------------------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--color-cream);
  overflow: hidden;
}
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img{
  width: 100%; height: 112%; object-fit: cover;
  transform: scale(1.08) translateY(var(--parallax, 0));
  animation: hero-settle 1.6s var(--ease-editorial) forwards;
  will-change: transform;
}
@keyframes hero-settle{ to{ transform: scale(1) translateY(var(--parallax, 0)); } }
.hero-media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,10,.35) 0%, rgba(20,17,10,.15) 38%, rgba(15,13,8,.78) 100%);
}
.hero-content{
  position: relative; z-index: 1;
  width: 100%;
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(3rem, 7vw, 4.5rem);
}
.hero-eyebrow{
  font-family: var(--font-display); font-weight: 600; letter-spacing: .18em;
  font-size: .78rem; text-transform: uppercase; color: var(--color-peach);
  opacity: 0; animation: rise var(--dur-slow) var(--ease-editorial) .5s forwards;
}
.hero-title{
  font-size: clamp(3.4rem, 13vw, 9.5rem);
  opacity: 0; animation: rise var(--dur-slow) var(--ease-editorial) .68s forwards;
}
.hero-title.is-split{ opacity: 1; animation: none; overflow: hidden; }
.hero-title.is-split .char{
  display: inline-block;
  opacity: 0; transform: translateY(110%) rotate(4deg);
  animation: char-rise .85s var(--ease-editorial) forwards;
  animation-delay: calc(.5s + var(--i) * 45ms);
}
@keyframes char-rise{ to{ opacity: 1; transform: translateY(0) rotate(0); } }
.hero-tagline{
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  max-width: 26ch; margin-top: 1.1rem;
  opacity: 0; animation: rise var(--dur-slow) var(--ease-editorial) .86s forwards;
}
.hero-cta-row{
  display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem;
  opacity: 0; animation: rise var(--dur-slow) var(--ease-editorial) 1.05s forwards;
}
@keyframes rise{ from{ opacity: 0; transform: translateY(22px);} to{ opacity: 1; transform: translateY(0);} }

.scroll-cue{
  position: absolute; right: var(--container-pad); bottom: 2rem; z-index: 1;
  display: none; flex-direction: column; align-items: center; gap: .6rem;
  color: var(--color-cream); opacity: .85;
}
.scroll-cue .line{ width: 1px; height: 46px; background: currentColor; overflow: hidden; position: relative; }
.scroll-cue .line::after{
  content:""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--color-coral);
  animation: scroll-run 1.8s ease-in-out infinite;
}
@keyframes scroll-run{ 0%{ top: -100%; } 60%{ top: 100%; } 100%{ top: 100%; } }
@media (min-width: 720px){ .scroll-cue{ display: flex; } }

/* ---------------------------- Reveal utility ------------------------------ */
.reveal{
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-editorial), transform var(--dur-slow) var(--ease-editorial);
  transition-delay: calc(var(--stagger, 0) * 70ms);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-img{ overflow: hidden; }
.reveal-img img{ transform: scale(1.12); transition: transform 1.1s var(--ease-editorial); }
.reveal-img.is-visible img{ transform: scale(1); }
.reveal-clip{ clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-slow) var(--ease-editorial); }
.reveal-clip.is-visible{ clip-path: inset(0 0 0% 0); }

/* ------------------------------ Marquee strip ------------------------------ */
/* A signature "boarding pass" ticker — a very current device on editorial /
   hospitality sites, and a natural fit for a restaurant literally named
   Nómada ("nomad"): a strip of destinations/flavours in perpetual transit. */
.marquee{
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-cream);
  border-block: 1px solid var(--color-line-invert);
  padding-block: .9rem;
}
.marquee-track{
  display: flex; width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-item{
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.85rem, 1.6vw, 1.15rem); letter-spacing: .04em;
  padding-inline: 1.25rem; white-space: nowrap;
}
.marquee-item svg{ width: 16px; height: 16px; color: var(--color-coral); flex-shrink: 0; }
@keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } }

/* ------------------------------ Section texture ---------------------------- */
/* The live site's own Textura_Beige/Durazno/Green photography, used directly
   as each section's background — these are already the correct brand hue
   (not a neutral grain needing a colour wash), so no tint/blend is applied
   on top; `background-color` is just the pre-image-load/fallback paint. */
.section--bg, .section--peach, .section--green{
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.section--bg{ background-color: var(--color-bg); background-image: url("../images/generated/textura-beige.webp"); }
.section--peach{ background-color: var(--color-peach); background-image: url("../images/generated/textura-durazno.webp"); }
.section--green{ background-color: var(--color-green); background-image: url("../images/generated/textura-green.webp"); }

/* Carta > Vinos y Bebidas: same brand green + cream contrast as every other
   .section--green on the site, just flat — no texture photography here. */
.carta-section.section--green{ background-image: none; }

/* ------------------------------ Scrollspy nav ------------------------------ */
/* bottom:-4px (not padding-bottom:4px) on purpose: a real padding-bottom is
   inert on a plain inline "Sobre Nosotros"-style link, but "Nuestra Carta"'s
   <a> sits inside a flex row (.nav-dropdown-row) and gets auto-blockified by
   flex layout — on a block box that same padding is NOT inert, it adds 4px
   of real height and pushed that one link's text 4-5px out of line with its
   siblings. An absolutely-positioned ::after never affects box height in
   either case, so offsetting it below the border box sidesteps the whole
   inline/block discrepancy instead of fighting it. */
.nav-primary a{ position: relative; }
.nav-primary a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1.5px;
  background: var(--color-coral); transition: right var(--dur-med) var(--ease-editorial);
}
.nav-primary a.is-active::after,
.nav-primary a:hover::after{ right: 0; }
.nav-primary a.is-active{ color: var(--color-peach); }

/* ------------------------------ Magnetic buttons --------------------------- */
.btn--magnetic{ will-change: transform; }

/* ------------------------------ Zig-zag frame ------------------------------ */
/* The signature Nómada "textile" mat, refined: an SVG zig-zag border in green
   + gold, used deliberately around a small number of hero dishes/photos. */
.framed{
  position: relative;
  padding: 14px;
  background: var(--color-green);
  transform: perspective(1200px) rotateX(var(--tilt-x, 0)) rotateY(var(--tilt-y, 0));
  transition: transform .4s var(--ease-editorial);
  will-change: transform;
}
.framed::before{
  content: "";
  position: absolute; inset: 4px;
  border: 2px solid var(--color-gold);
  pointer-events: none;
  z-index: 2;
}
.framed .zigzag{
  position: absolute; left: 0; right: 0; height: 14px;
  background-image: linear-gradient(135deg, var(--color-coral) 25%, transparent 25%),
                     linear-gradient(225deg, var(--color-coral) 25%, transparent 25%);
  background-position: 0 0;
  background-size: 16px 14px;
  z-index: 1;
}
.framed .zigzag--top{ top: 0; }
.framed .zigzag--bottom{ bottom: 0; }
.framed figure{ position: relative; z-index: 1; }
.framed img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------------------- Concept -------------------------------- */
.concept-grid{
  grid-template-columns: repeat(12,1fr);
  align-items: center;
}
.concept-media{ grid-column: 1 / span 7; }
.concept-text{ grid-column: 8 / span 5; }
.concept-media .framed{ aspect-ratio: 4/5; }
.concept-media .framed figure{ height:100%; }
.concept-kicker{ margin-bottom: 1.25rem; }
.concept-text h2{ margin-bottom: 1.5rem; }
.concept-text p + p{ margin-top: 1rem; }
.concept-text .btn{ margin-top: 2rem; }

@media (max-width: 900px){
  .concept-media, .concept-text{ grid-column: 1 / -1; }
  .concept-text{ margin-top: 2.5rem; }
}

/* ------------------------------ Dish journey ------------------------------ */
.journey-head{
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.journey-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 320px);
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 1.5rem;
  margin: 0 calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scrollbar-width: thin;
  scrollbar-color: var(--color-coral) transparent;
  cursor: grab;
}
.journey-track.is-dragging{ cursor: grabbing; scroll-snap-type: none; user-select: none; }
.journey-progress{
  position: relative; height: 2px; margin-inline: var(--container-pad);
  background: rgba(20,35,48,.16);
}
.journey-progress span{
  position: absolute; left: 0; top: 0; bottom: 0; width: 16.66%;
  background: var(--color-navy); transform-origin: 0 50%;
  transition: transform .12s linear;
}
.dish{
  scroll-snap-align: start;
  position: relative;
  display: flex; flex-direction: column;
}
.dish + .dish{ margin-left: clamp(1.25rem, 2.5vw, 2.5rem); }
.dish-index{
  font-family: var(--font-display); font-weight: 800; font-size: .8rem;
  color: var(--color-coral); letter-spacing: .05em; margin-bottom: .6rem;
}
.dish-photo{ aspect-ratio: 3/4; overflow: hidden; background: var(--color-line); }
.dish-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-editorial); }
.dish:hover .dish-photo img{ transform: scale(1.06); }
.dish-name{ margin-top: 1.1rem; font-size: 1.2rem; }
.dish-desc{ margin-top: .4rem; font-size: .92rem; color: var(--color-ink-soft); max-width: 32ch;}
.dish-price{ margin-top: .6rem; font-family: var(--font-display); font-weight: 700; color: var(--color-coral); }
.dish:nth-child(even){ margin-top: clamp(1.5rem, 5vw, 3.5rem); }

.journey-route{
  position: relative; height: 2px; margin: 0 calc(var(--container-pad) * -1) 0;
  background-image: linear-gradient(to right, var(--color-ink-soft) 0 8px, transparent 8px 16px);
  background-size: 16px 2px; opacity: .35;
}

/* ------------------------------ Experience -------------------------------- */
.experience{ position: relative; }
.experience-pillars{
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--color-line-invert);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.pillar{ background: var(--color-green); padding: clamp(1.5rem,3vw,2.25rem) 1.25rem; }
.pillar-label{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; }
.pillar-desc{ margin-top: .6rem; font-size: .88rem; color: rgba(251,247,237,.72); max-width: 24ch; }
.experience-quote{
  max-width: 640px; margin-top: clamp(2rem,4vw,3rem);
  border-left: 3px solid var(--color-coral); padding-left: 1.75rem;
}
.experience-quote cite{ display:block; margin-top: 1rem; font-style: normal; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-peach); }

@media (max-width: 760px){ .experience-pillars{ grid-template-columns: repeat(2,1fr); } }

/* -------------------------------- Gallery -------------------------------- */
.gallery-grid{
  display: grid; grid-template-columns: repeat(6,1fr); gap: clamp(.75rem,2vw,1.5rem);
}
.gallery-grid figure:nth-child(1){ grid-column: 1 / span 4; grid-row: 1 / span 2; }
.gallery-grid figure:nth-child(2){ grid-column: 5 / span 2; grid-row: 1; }
.gallery-grid figure:nth-child(3){ grid-column: 5 / span 2; grid-row: 2; }
.gallery-grid figure{ overflow: hidden; }
.gallery-grid img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
.gallery-grid figure:nth-child(1) img{ aspect-ratio: auto; height: 100%; }
.gallery-text{ margin-top: clamp(2rem,4vw,3.5rem); max-width: 640px; }

@media (max-width: 760px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid figure:nth-child(1){ grid-column: 1 / -1; grid-row: auto; }
  .gallery-grid figure:nth-child(2), .gallery-grid figure:nth-child(3){ grid-column: span 1; grid-row: auto; }
}

/* ------------------------------ Reservation CTA ---------------------------- */
.cta-band{
  text-align: left;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem;
}
.cta-band h2{ max-width: 14ch; }
.cta-band .btn{ flex-shrink: 0; }
@media (max-width: 760px){ .cta-band{ grid-template-columns: 1fr; } .cta-band .btn{ margin-top: 1rem; } }

/* -------------------------------- Location -------------------------------- */
.location-grid{ grid-template-columns: repeat(12,1fr); }
.location-info{ grid-column: 1 / span 5; }
.location-map{ grid-column: 6 / span 7; aspect-ratio: 4/3; background: var(--color-line); }
.location-map iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }
.info-row{ display: flex; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--color-line); }
.info-row:last-of-type{ border-bottom: 1px solid var(--color-line); }
.info-row dt{ font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; color: var(--color-coral); width: 7rem; flex-shrink: 0; }
.info-row dd{ margin: 0; min-width: 0; overflow-wrap: break-word; }
.location-info .btn{ margin-top: 2rem; }

@media (max-width: 900px){
  .location-info, .location-map{ grid-column: 1 / -1; }
  .location-map{ margin-top: 2rem; }
}

/* Contact page's own full-bleed map — a plain banner strip below the
   contact-info grid, not a grid item like the home page's .location-map,
   so it needs its own class rather than reusing that one (which was
   leaking a mobile margin-top onto this section too). */
.contact-map{ background: var(--color-line); }
.contact-map iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }

/* -------------------------------- Instagram -------------------------------- */
.insta-head{ display:flex; align-items:flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem,3vw,2.5rem); }
.insta-grid{ display: grid; grid-template-columns: repeat(6,1fr); gap: .6rem; }
.insta-grid a{ display:block; overflow: hidden; aspect-ratio: 1/1; position: relative; }
.insta-grid img{ width:100%; height:100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-editorial); }
.insta-grid a:hover img{ transform: scale(1.08); }
.insta-grid a::after{
  content: "@nomada_alicante";
  position: absolute; inset: 0; display:flex; align-items:center; justify-content:center;
  background: rgba(20,35,48,0); color: transparent;
  font-family: var(--font-display); font-weight: 700; font-size: .7rem; text-transform: uppercase;
  transition: all var(--dur-fast) ease; text-align: center; padding: .5rem;
}
.insta-grid a:hover::after{ background: rgba(20,35,48,.55); color: var(--color-cream); }
@media (max-width: 760px){ .insta-grid{ grid-template-columns: repeat(3,1fr); } }

/* -------------------------------- Footer -------------------------------- */
.site-footer{ background: var(--color-green-deep); color: var(--color-cream); padding-block: clamp(3rem,6vw,5rem) 1.5rem; }
.footer-top{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: clamp(2.5rem,5vw,4rem); }
.footer-brand .logo-mark{ font-size: 2rem; }
.footer-tagline{ margin-top: 1rem; max-width: 30ch; color: rgba(251,247,237,.68); font-size: .9rem; }
.footer-col h4{ font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .74rem; letter-spacing: .07em; color: var(--color-peach); margin-bottom: 1.1rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: .65rem; }
.footer-col a, .footer-col address{ font-size: .92rem; font-style: normal; color: rgba(251,247,237,.86); }
.footer-social{ margin-top: 1.25rem; display:flex; gap: .9rem; }
.footer-social a{ width: 38px; height: 38px; border: 1px solid var(--color-line-invert); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width: 16px; height: 16px; }
.footer-bottom{ border-top: 1px solid var(--color-line-invert); padding-top: 1.5rem; display:flex; flex-wrap:wrap; gap: 1rem; justify-content: space-between; font-size: .8rem; color: rgba(251,247,237,.55); }
.footer-bottom ul{ display:flex; gap: 1.5rem; }

@media (max-width: 860px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns: 1fr; }
}
.footer-bottom .cookie-settings-link{ font-size: inherit; }

/* ============================== SUBPAGES ================================= */

/* A shorter, quieter hero for interior pages — the homepage's full-bleed
   100svh, giant-wordmark hero is a once-per-site device, not something
   every "Sobre Nosotros"-length title should inherit. */
.hero--page{ min-height: 56svh; align-items: flex-end; }
.hero-title--page{
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  text-transform: none;
  max-width: 18ch;
}

/* First section on a page with no hero needs its own clearance under the
   fixed header, which the (absent) hero would otherwise have provided. */
.section--first{ padding-top: calc(var(--section-pad-y) + 3.5rem); }

/* ------------------------------ Value tags -------------------------------- */
.value-tags{ display: flex; flex-wrap: wrap; gap: .75rem; }
.value-tag{
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em;
  padding: .65rem 1.1rem; border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}

/* ------------------------------ Product grid ------------------------------- */
.product-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.product-card{ display: flex; flex-direction: column; }
.product-photo{
  aspect-ratio: 1/1; background: var(--color-cream);
  border: 1px solid var(--color-line); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.product-photo img{ width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; transition: transform var(--dur-slow) var(--ease-editorial); }
.product-card:hover .product-photo img{ transform: scale(1.04); }
.product-name{ margin-top: 1.25rem; font-size: 1.2rem; }
.product-desc{ margin-top: .5rem; font-size: .92rem; color: var(--color-ink-soft); max-width: 34ch; }
.product-card .btn{ margin-top: 1.25rem; align-self: flex-start; }

/* -------------------------------- Contact ---------------------------------- */
.contact-grid{ grid-template-columns: repeat(12,1fr); align-items: start; }
.contact-form-wrap{ grid-column: 1 / span 7; }
.location-grid .location-info, .contact-grid .location-info{ grid-column: 8 / span 5; }
.contact-form{ display: flex; flex-direction: column; gap: 1.1rem; max-width: 480px; }
.contact-form label{
  display: flex; flex-direction: column; gap: .4rem;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--color-navy);
}
.contact-form input, .contact-form textarea{
  border: 1.5px solid var(--color-navy); background: var(--color-cream);
  padding: .8rem .9rem; font-family: var(--font-body); font-size: .95rem;
  color: var(--color-ink); resize: vertical;
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible{
  outline: 2px solid var(--color-coral); outline-offset: 2px;
}
.contact-form button{ margin-top: .5rem; align-self: flex-start; }
.contact-form-success h3{ font-size: 1.5rem; }
.contact-form-success p{ margin-top: .75rem; color: var(--color-ink-soft); }

@media (max-width: 900px){
  .contact-form-wrap{ grid-column: 1 / -1; }
  .contact-grid .location-info{ grid-column: 1 / -1; margin-top: 3rem; }
}

/* ---------------------------- Legal / policy pages -------------------------- */
.legal-content{ max-width: 74ch; }
.legal-content h1{ font-size: clamp(2rem, 4vw, 3rem); text-transform: none; margin-top: .75rem; }
.legal-content h2{
  font-size: 1.35rem; text-transform: none; margin-top: 2.75rem; margin-bottom: 1rem;
  font-weight: 700;
}
.legal-content > .eyebrow + h1{ margin-top: .5rem; }
.legal-updated{ margin-top: 1rem; font-size: .85rem; color: var(--color-ink-soft); }
.legal-note{
  margin-top: 1rem; padding: .9rem 1.1rem; background: rgba(28,25,18,.05);
  border-left: 3px solid var(--color-coral); font-size: .88rem; color: var(--color-ink-soft);
  max-width: 60ch;
}
.legal-body{ margin-top: 2rem; }
.legal-body p{ margin-top: 1.2rem; max-width: 74ch; color: var(--color-ink-soft); line-height: 1.65; }
.legal-body p:first-child{ margin-top: 0; }
.legal-body strong{ color: var(--color-ink); }
.legal-contact-note{
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-line);
}
.legal-contact-note h3{ font-size: 1.15rem; }
.legal-contact-note p{ margin-top: .5rem; color: var(--color-ink-soft); }

.cookie-table-wrap{ margin-top: 1.5rem; overflow-x: auto; }
.cookie-table{ width: 100%; border-collapse: collapse; min-width: 480px; }
.cookie-table th, .cookie-table td{
  text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--color-line);
  font-size: .9rem; vertical-align: top;
}
.cookie-table th{
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: .72rem; letter-spacing: .04em; color: var(--color-coral);
}
.cookie-table td:first-child{ font-weight: 700; white-space: nowrap; }
[data-cookie-action="open"].btn{ margin-top: 1.5rem; }

/* ------------------------------ WhatsApp button ----------------------------- */
.whatsapp-fab{
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  z-index: 940;
  transition: transform var(--dur-fast) var(--ease-editorial), bottom var(--dur-med) var(--ease-editorial);
}
.whatsapp-fab svg{ width: 30px; height: 30px; }
.whatsapp-fab:hover{ transform: scale(1.08); }
body.has-cookie-banner .whatsapp-fab{ bottom: calc(var(--cookie-banner-h, 0px) + clamp(1rem, 3vw, 1.75rem)); }

/* ------------------------------ Cookie banner ------------------------------- */
.cookie-banner{
  position: fixed; left: 0; bottom: 0; z-index: 950;
  width: 100vw; width: 100dvw;
  background: var(--color-green-deep); color: var(--color-cream);
  border-top: 1px solid var(--color-line-invert);
  transform: translateY(100%);
  visibility: hidden; pointer-events: none;
  transition: transform var(--dur-med) var(--ease-editorial), visibility 0s var(--dur-med);
}
/* Deliberately not using the `hidden` attribute here: it forces
   display:none, which can't be transitioned from — the slide-up/down is
   done with transform alone. visibility:hidden (delayed on the way in,
   immediate on the way out) keeps it out of the keyboard tab order while
   off-screen without breaking the transition. */
.cookie-banner.is-visible{
  transform: translateY(0); visibility: visible; pointer-events: auto;
  transition: transform var(--dur-med) var(--ease-editorial);
}

.cookie-banner-panel{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.5rem var(--container-pad); max-width: var(--container-max); margin-inline: auto;
}
.cookie-banner-text{ max-width: 60ch; font-size: .88rem; color: rgba(251,247,237,.82); }
.cookie-banner-title{ font-family: var(--font-display); font-weight: 700; color: var(--color-cream); margin-bottom: .35rem; }
.cookie-banner-text a{ color: var(--color-peach); }
.cookie-banner-actions{ display: flex; flex-wrap: wrap; gap: .75rem; flex-shrink: 0; }
.cookie-banner .btn--outline-dark{ color: var(--color-cream); border-color: var(--color-line-invert); }
.cookie-banner .btn--outline-dark:hover{ background: var(--color-cream); color: var(--color-green-deep); }

.cookie-panel{ padding: 0 var(--container-pad) 1.75rem; max-width: var(--container-max); margin-inline: auto; }
.cookie-panel-row{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.1rem; border-top: 1px solid var(--color-line-invert);
}
.cookie-panel-copy{ max-width: 56ch; }
.cookie-panel-label{ font-family: var(--font-display); font-weight: 700; font-size: .88rem; }
.cookie-panel-desc{ margin-top: .3rem; font-size: .82rem; color: rgba(251,247,237,.7); }
.cookie-panel-locked{
  flex-shrink: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: rgba(251,247,237,.55); border: 1px solid var(--color-line-invert); padding: .4rem .7rem;
}
.cookie-toggle{
  flex-shrink: 0; width: 44px; height: 26px; border-radius: 999px;
  background: rgba(251,247,237,.2); position: relative;
  transition: background var(--dur-fast) ease;
}
.cookie-toggle::after{
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--color-cream);
  transition: transform var(--dur-fast) var(--ease-editorial);
}
.cookie-toggle[aria-checked="true"]{ background: var(--color-coral); }
.cookie-toggle[aria-checked="true"]::after{ transform: translateX(18px); }

@media (max-width: 700px){
  .cookie-banner-panel{ flex-direction: column; align-items: flex-start; }
  .cookie-banner-actions{ width: 100%; }
  .cookie-banner-actions .btn{ flex: 1; justify-content: center; }
}

/* -------------------------------- Carta (menu) ------------------------------ */
/* The one DB-driven page (see php/carta_template.php) — same design system,
   just a longer, denser listing than the rest of the site's editorial pages. */

/* Sticky sub-nav (Menú / Cocktails / Vinos y Bebidas) pinned right under the
   main site header, so a page this long stays easy to jump around in.
   `top` tracks the header's real height via --header-h, kept in sync by
   main.js (the header's own height changes on scroll — see .is-scrolled —
   so a hardcoded top would either gap or overlap once that happens). */
.carta-subnav{
  position: sticky; top: var(--header-h, 96px); z-index: 60;
  background: rgba(244,238,225,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.carta-subnav-inner{
  max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad);
  display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carta-subnav-inner::-webkit-scrollbar{ display: none; }
.carta-subnav-link{
  padding-block: .95rem; white-space: nowrap; position: relative; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: .82rem; letter-spacing: .03em; color: var(--color-ink-soft);
}
.carta-subnav-link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-coral); transform: scaleX(0); transition: transform var(--dur-fast) var(--ease-editorial);
}
.carta-subnav-link:hover{ color: var(--color-ink); }
.carta-subnav-link.is-active{ color: var(--color-ink); }
.carta-subnav-link.is-active::after{ transform: scaleX(1); }

/* Anchor targets need breathing room so jumping to a section (subnav click
   or the main nav's dropdown) doesn't land with its heading hidden under
   the fixed header + sticky subnav. */
.carta-section{ scroll-margin-top: calc(var(--header-h, 96px) + 56px); }

.carta-section-title{ margin-bottom: 1rem; }
.carta-category-title{
  margin-top: 3rem; margin-bottom: 1.25rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.1rem; letter-spacing: .04em;
  padding-bottom: .6rem; border-bottom: 1.5px solid currentColor; opacity: .85;
  scroll-margin-top: calc(var(--header-h, 96px) + 56px);
}
.carta-section:first-of-type .carta-category-title:first-of-type{ margin-top: 0; }

.carta-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem 2.5rem;
}
.carta-dish{ padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-line); }
.section--green .carta-dish, .section--navy .carta-dish{ border-bottom-color: var(--color-line-invert); }
.carta-dish-head{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.carta-dish-head .dish-name{ margin-top: 0; font-size: 1.1rem; }
.carta-dish-head .dish-price{ margin-top: 0; flex-shrink: 0; font-family: var(--font-display); font-weight: 700; color: var(--color-coral); white-space: nowrap; }
.section--peach .carta-dish-head .dish-price{ color: var(--color-navy); }
.carta-dish .dish-desc{ margin-top: .4rem; font-size: .9rem; color: var(--color-ink-soft); max-width: 44ch; }
.section--green .carta-dish .dish-desc{ color: rgba(251,247,237,.72); }

/* Allergen (and spicy) icons: a plain <img> can show a name on desktop
   hover via its `title` attribute, but `title` never fires on a touch
   device — there is no equivalent gesture. Each icon is a small button
   with its own tooltip instead, shown on hover *or* focus *or* tap
   (main.js toggles .is-open on click, which covers touch and also doubles
   as a keyboard-free "tap again to close"). */
.carta-allergen-btn, .carta-spicy-btn{
  position: relative; display: inline-flex; padding: 0; border: none; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.carta-allergen-btn img{ width: 26px; height: 26px; border-radius: 50%; display: block; }
.carta-spicy-btn img{ width: 22px; height: 22px; display: block; }
.carta-tooltip{
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-navy); color: var(--color-cream);
  font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .01em;
  white-space: nowrap; padding: .4rem .65rem; border-radius: 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility 0s var(--dur-fast);
  z-index: 30;
}
.carta-tooltip::after{
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--color-navy);
}
.carta-allergen-btn:hover .carta-tooltip, .carta-spicy-btn:hover .carta-tooltip,
.carta-allergen-btn:focus-visible .carta-tooltip, .carta-spicy-btn:focus-visible .carta-tooltip,
.carta-allergen-btn.is-open .carta-tooltip, .carta-spicy-btn.is-open .carta-tooltip{
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.carta-dish-head .dish-name{ display: inline-flex; align-items: center; gap: .1em; flex-wrap: wrap; }
.carta-dish-allergens{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }

/* Sold-out: stays visible on the carta (not hidden like is_active) but
   clearly reads as unavailable right now — dimmed card, struck-through
   price, small badge next to the name. */
.carta-dish.is-sold-out{ opacity: .5; }
.carta-dish.is-sold-out .dish-price{ text-decoration: line-through; }
.carta-soldout-badge{
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: .62rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-cream); background: var(--color-coral-dark);
  padding: .18rem .55rem; border-radius: 999px; line-height: 1.4;
}

.carta-legend{ display: flex; flex-wrap: wrap; gap: 1.1rem 1.75rem; margin-top: 2rem; }
.carta-legend-item{ display: inline-flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--color-ink-soft); }
.carta-legend-item img{ width: 30px; height: 30px; border-radius: 50%; }