/* Porta Lisboa design system.
   Everything here is taken off the house itself rather than invented: the
   limestone cream of the printed carte, the azulejo cobalt of its tile
   border, the tram yellow the wordmark sits on, and the green of the Lisbon
   door on the carte's cover. The house opens at noon and pours porto past
   midnight, so the page is stone and tile by day, with two bands of glazed
   night blue where the evening runs long.

   One motif, used everywhere and owned by nobody else: the arch. The final A
   of the wordmark is drawn as a doorway, so photographs stand in arched
   doorframes, the signature band and the footer close under a strip of
   glazed tiles, and every button is a cement tile: square, with the glaze
   line drawn just inside the edge. */

:root {
  --pedra: #f8f1de;        /* limestone cream off the printed carte: the page ground */
  --pedra-2: #efe5c8;      /* deeper stone, for the printed bands */
  --card: #fffcf1;         /* a clean plate: cards and panels */
  --ink: #1d2a52;          /* cobalt ink: the tile blue, darkened to read */
  --ink-soft: #35426e;
  --para: #4f5570;         /* the paragraph voice; slate with a blue cast */
  --azul: #2b57a8;         /* azulejo cobalt: the first voice */
  --azul-deep: #1e4390;    /* the same glaze where small type needs contrast */
  --azul-ink: #173576;     /* prices at 15px on cream clear 4.5:1 here */
  --tram: #f2c445;         /* the tram yellow the wordmark sits on */
  --tram-deep: #b9880f;    /* the same yellow where type must read on cream */
  --verde: #2e6a52;        /* the green door on the carte's cover. The second voice */
  --verde-deep: #204c3a;
  --noite: #16295c;        /* glazed night blue. The evening bands */
  --noite-deep: #0d1b40;   /* the deep blue the footer sits on */
  --zest: rgba(43, 87, 168, 0.08);
  --line: rgba(29, 42, 82, 0.16);
  --line-soft: rgba(29, 42, 82, 0.09);
  --on-dusk: #f6efdb;      /* what reads on the night bands */
  --on-dusk-dim: #b6c0dc;
  --dusk-line: rgba(246, 239, 219, 0.18);
  --dusk-line-soft: rgba(246, 239, 219, 0.1);
  --ok: #2f7a52;
  --err: #b3403a;

  /* The two printed bands (the carte and the hours) sit on the cream of the
     printed menu, tile-watermarked rather than photographed. */
  --paper: #f4ebd2;
  --paper-2: #ece0bd;
  --ink-on-paper: #1d2a52;
  --para-on-paper: #565c74;
  --gold-on-paper: #1e4390;
  --rule-on-paper: rgba(29, 42, 82, 0.18);

  /* Light. One wash per band, each anchored somewhere different: cobalt where
     the tiles are, one patch of tram yellow where the sun gets in. */
  --sun-tr: radial-gradient(70% 55% at 88% 0%, rgba(43, 87, 168, 0.07), transparent 70%);
  --sun-tl: radial-gradient(70% 55% at 12% 0%, rgba(242, 196, 69, 0.12), transparent 70%);
  --sun-bc: radial-gradient(85% 60% at 50% 100%, rgba(242, 196, 69, 0.1), transparent 72%);
  --verde-tl: radial-gradient(70% 55% at 8% 0%, rgba(46, 106, 82, 0.07), transparent 70%);

  --display: 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;
  --sans: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  /* Caveat is the hand on the carte: "a casa portuguesa" written under the
     door. The note on the programme strip, the note beside the hours. It is
     never used inside a heading. */
  --script: 'Caveat', 'Segoe Script', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* A strip of glazed tiles, drawn: cobalt, sky, yellow, sky, with cream
     grout between. It closes the signature band and the footer the way the
     tile border runs around every page of the printed carte. */
  --tiles: repeating-linear-gradient(90deg,
      var(--azul) 0 14px, #f4ebd2 14px 16px,
      #d7e0f0 16px 30px, #f4ebd2 30px 32px,
      var(--tram) 32px 46px, #f4ebd2 46px 48px,
      #d7e0f0 48px 62px, #f4ebd2 62px 64px);

  /* The joints of a whitewashed tile wall: a faint square grid both ways, at
     an alpha the eye reads as texture rather than lines. */
  --weave: repeating-linear-gradient(90deg,
      rgba(29, 42, 82, 0.02) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,
      rgba(29, 42, 82, 0.02) 0 1px, transparent 1px 46px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--weave), var(--pedra);
  color: var(--para);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--azul); color: #fff; }

:focus-visible { outline: 2px solid var(--azul-deep); outline-offset: 3px; }

/* ---------- Typography ---------- */
/* The wordmark is geometric caps with an arch for an A, so every heading is
   set the way the printed carte sets its own: Josefin's compass-drawn caps,
   letterspaced, in cobalt ink. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.14;
}

/* The eyebrow states a fact about the house, never a mood word, and it rides
   a hairline that runs out to the end of the measure. The heading sits under
   it, left. The house alternates left and centred heads through the page so
   it never reads as a template. */
.kicker {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--azul-deep); line-height: 1;
}
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-head.center .kicker::before { content: ''; flex: 1; height: 1px; background: var(--line); }

.section-title {
  font-size: clamp(29px, 3.8vw, 50px);
  margin: 24px 0 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  max-width: 22ch;
}
.section-head.center .section-title { max-width: none; }
.section-sub { color: var(--para); max-width: 58ch; font-size: 16px; margin-top: 20px; }
.section-head.center .section-sub { max-width: 66ch; }

.serif { font-family: var(--display); }

/* ---------- Layout ---------- */
.container { width: min(1200px, 90vw); margin: 0 auto; }
section { padding: clamp(84px, 10vw, 150px) 0; position: relative; }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* The side rail: the address, set vertically down the left edge the way it is
   printed down the spine of the carte. Desktop only. */
.side-rail {
  position: fixed; left: 20px; top: 50%; z-index: 40;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--sans); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.45;
  pointer-events: none;
}
@media (max-width: 1400px) { .side-rail { display: none; } }

/* ---------- Buttons ---------- */
/* A button is a cement tile: dead square, with the glaze line drawn just
   inside the edge the way every tile on the carte's border is framed twice.
   The solid one is the wordmark itself: dark letters on tram yellow.
   ::after draws the glaze line so the label never fights a border. */
.btn {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 17px 42px;
  border: 0;
  border-radius: 3px;
  background: var(--azul-deep);
  color: #fdf9ec;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 4px; pointer-events: none;
  border: 1px solid rgba(253, 249, 236, 0.45);
  border-radius: 1px;
  transition: border-color 0.4s var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--pedra);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(23, 32, 64, 0.22);
}
.btn:hover::after { border-color: rgba(248, 241, 222, 0.4); }

.btn.solid { background: var(--tram); color: #2f2812; }
.btn.solid::after { border-color: rgba(47, 40, 18, 0.4); }
.btn.solid:hover { background: var(--ink); color: var(--pedra); }
.btn.solid:hover::after { border-color: rgba(248, 241, 222, 0.4); }

.btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn.ghost::after { border-color: transparent; }
.btn.ghost:hover { background: var(--ink); color: var(--pedra); box-shadow: none; }

.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn.danger { background: var(--err); color: #fff; }
.btn.danger::after { border-color: rgba(255, 255, 255, 0.45); }
.btn.danger:hover { background: var(--ink); color: var(--pedra); }

/* ---------- The bands ---------- */
/* A daylight page divides itself with shadow, not gilt: a soft hairline
   between bands, and each light band carrying its own wash of light anchored
   somewhere different. Two bands are night-glaze blue, and they close under
   a strip of drawn tiles. */
section, footer { position: relative; }
section + section::before,
.formule::before, .programme-section::before, footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  z-index: 2;
}
.hero::before { display: none; }

#about { background-image: var(--sun-tr); }
#spaces { background-image: var(--verde-tl); }
.programme-section { background-image: var(--sun-bc); }
.gallery-section { background: var(--pedra-2); }

/* ---------- Paper ---------- */
/* The carte and the hours are printed things, so they sit on the cream of
   the printed menu: a sheet warmed a shade past the page, watermarked with
   the faintest tile grid. Fixed, so the two printed bands read as one sheet
   running behind the page. */
section.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(100% 68% at 50% -8%, rgba(255, 255, 255, 0.55), transparent 68%),
    url('../images/paper.jpg');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  background-attachment: scroll, fixed;
  color: var(--para-on-paper);
}
.paper::before {
  background: linear-gradient(90deg, transparent, var(--rule-on-paper) 18%, var(--rule-on-paper) 82%, transparent) !important;
}
.paper .kicker { color: var(--gold-on-paper); }
.paper .kicker::before, .paper .kicker::after { background: var(--rule-on-paper); }
.paper .section-title, .paper h1, .paper h2, .paper h3 { color: var(--ink-on-paper); }
.paper .section-sub, .paper p { color: var(--para-on-paper); }

.paper .menu-tabs button { border-color: var(--rule-on-paper); color: var(--para-on-paper); }
.paper .menu-tabs button.active { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.paper .cat-head { border-bottom-color: var(--rule-on-paper); }
.paper .menu-cat h3 { color: var(--ink-on-paper); }
.paper .menu-cat-sub { color: var(--gold-on-paper); }
.paper .menu-item .mi-name { color: var(--ink-on-paper); }
.paper .menu-item .mi-price { color: var(--gold-on-paper); }
.paper .menu-item .mi-dots { border-bottom-color: rgba(29, 42, 82, 0.26); }
.paper .menu-item-desc { color: var(--para-on-paper); opacity: 0.9; }
.paper .menu-item.mi-head { border-bottom-color: var(--rule-on-paper); }
.paper .mi-was { color: var(--para-on-paper); }
.paper .mi-deal { color: #2f6a4c; }

.paper .hours-list li { border-bottom-color: var(--rule-on-paper); }
.paper .hours-list .day { color: var(--ink-on-paper); }
.paper .hours-list .day-note { color: var(--gold-on-paper); }
.paper .hours-list .dots { border-bottom-color: rgba(29, 42, 82, 0.24); }
.paper .hours-list .time { color: var(--para-on-paper); }
.paper .hours-list .closed { color: #9c3a34; }
.paper .contact-lines { color: var(--para-on-paper); }
.paper .contact-lines strong { color: var(--gold-on-paper); }
.paper .contact-lines a:hover { color: var(--ink-on-paper); }
.paper #map { border-color: var(--rule-on-paper); }
.paper #map .leaflet-tile-pane { filter: sepia(0.18) saturate(0.78) brightness(1.02) contrast(0.96); }
.paper #map .leaflet-control-attribution { background: rgba(244, 235, 210, 0.8); color: var(--para-on-paper); }
.paper #map .leaflet-control-attribution a { color: var(--gold-on-paper); }
.paper #map .leaflet-bar a { background: var(--paper); color: var(--ink-on-paper); border-bottom-color: var(--rule-on-paper); }

/* On canvas the button keeps its own ink */
.paper .btn { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn::after { border-color: rgba(244, 235, 210, 0.4); }
.paper .btn:hover { background: var(--azul-deep); color: #fdf9ec; }
.paper .btn.solid { background: var(--azul); color: #2f2812; }
.paper .btn.solid::after { border-color: rgba(47, 40, 18, 0.4); }
.paper .btn.solid:hover { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid:hover::after { border-color: rgba(244, 235, 210, 0.4); }
.paper ::selection { background: var(--ink-on-paper); color: var(--paper); }

/* ---------- Nav ---------- */
/* Over the hero the bar is glass over the photograph; once the page scrolls
   it becomes the ivory of the page, and the type flips to ink. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 20px 0;
  transition: background 0.5s, padding 0.5s, box-shadow 0.5s;
}
.nav.scrolled {
  background: rgba(248, 241, 222, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--line-soft), 0 12px 34px rgba(23, 32, 64, 0.08);
}
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; }
.nav .container { width: min(1580px, 94vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.nav-logo { justify-self: start; grid-column: 1; grid-row: 1; display: flex; align-items: center; }
/* The mark sits transparent, straight on the bar. Over the hero photograph a
   soft shadow lifts it off the picture; once the bar turns ivory on scroll the
   shadow is dropped and the logo reads on its own. */
.nav-logo img {
  height: 60px; width: auto; flex: none;
  filter: drop-shadow(0 2px 10px rgba(7, 12, 30, 0.55));
  transition: height 0.4s var(--ease), filter 0.4s var(--ease);
}
.nav.scrolled .nav-logo img { height: 48px; filter: none; }
.nav-links { display: flex; gap: 26px; align-items: center; list-style: none; grid-column: 2; grid-row: 1; justify-content: center; }
.nav-right { display: flex; gap: 16px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
.nav-links a, .nav-right a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #fbf7ea;
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(8, 12, 32, 0.6);
  transition: opacity 0.35s, color 0.35s;
  position: relative;
  padding: 8px 0;
  display: inline-block;
}
.nav.scrolled .nav-links a, .nav.scrolled .nav-right a { color: var(--ink); text-shadow: none; }
/* The tile border in miniature: the underline is a chain of glazed diamonds */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 6px;
  background: no-repeat center / auto 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M12 4l4-4 4 4-4 4zM33 4l4-4 4 4-4 4zM54 4l4-4 4 4-4 4zM75 4l4-4 4 4-4 4z' fill='%23f2c445'/%3E%3C/svg%3E");
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--azul); }
.nav.scrolled .nav-links a:hover { color: var(--azul-deep); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta { border: 1.5px solid rgba(251, 247, 234, 0.6); padding: 10px 22px !important; border-radius: 10px; }
.nav-cta:hover { background: var(--azul); border-color: var(--azul); color: #2f2812 !important; }
.nav.scrolled .nav-cta { border-color: var(--line); }
.nav.scrolled .nav-cta:hover { background: var(--azul); border-color: var(--azul); color: #2f2812 !important; }
.nav-cta::after { display: none; }

/* Two-state switch with the knob sliding under the active language */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid rgba(251, 247, 234, 0.35); border-radius: 10px;
}
.nav.scrolled .lang-switch { border-color: var(--line-soft); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--azul);
  border-radius: 7px;
  transition: transform 0.4s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: #fbf7ea;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; padding: 6px 14px;
  transition: color 0.35s;
}
.nav.scrolled .lang-switch button { color: var(--para); }
.lang-switch button.active, .nav.scrolled .lang-switch button.active { color: #2f2812; }

.burger { display: none; background: none; border: 0; width: 30px; height: 20px; position: relative; z-index: 70; justify-self: end; grid-column: 3; grid-row: 1; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fbf7ea; transition: 0.4s var(--ease); }
.nav.scrolled .burger span { background: var(--ink); }
.nav.menu-open .burger span { background: var(--ink); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 18px; }
.burger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  height: 100svh; min-height: 660px;
  position: relative; display: grid; place-items: center;
  text-align: center; overflow: hidden; padding: 0;
}
.hero-bg { position: absolute; inset: 0; background: var(--noite-deep); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: drift 30s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.11) translateY(-1.5%); } }
/* Held light on purpose: the film is the room and it is the point of the
   hero. A pool of shade under the words, a vignette, and a blue foot the
   next band can arrive out of. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 44% at 50% 48%, rgba(9, 15, 35, 0.62), rgba(9, 15, 35, 0.28) 62%, transparent 80%),
    linear-gradient(180deg, rgba(9, 15, 35, 0.42) 0%, rgba(9, 15, 35, 0.06) 40%, rgba(22, 41, 92, 0.52) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The house name, set the way the azulejo sign over the green door sets it.
   One orchestrated arrival, then nothing. */
.hero-script {
  font-family: var(--display);
  font-size: clamp(34px, 5.4vw, 76px);
  color: #fbf7ea;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.14;
  letter-spacing: 0.05em;
  max-width: 19ch;
  margin: 0 auto;
  text-shadow: 0 6px 46px rgba(7, 12, 30, 0.65);
}
.hero-tag {
  margin-top: 26px;
  font-family: var(--sans);
  color: #f6d474;
  text-shadow: 0 2px 22px rgba(7, 12, 30, 0.8);
  font-size: clamp(11.5px, 1.25vw, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 46px; }

.hero-content > * { opacity: 0; transform: translateY(24px); animation: heroIn 1.3s var(--ease) forwards; }
.hero-content > .hero-script { transform: translateY(24px); animation: heroTitleIn 1.5s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-content > *:nth-child(3) { animation-delay: 0.44s; }
.hero-content > *:nth-child(4) { animation-delay: 0.62s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(24px); letter-spacing: 0.16em; }
  to { opacity: 1; transform: none; letter-spacing: 0.05em; }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The hours: the two facts people look for, morning and midnight */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 38px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.36em; text-indent: 0.36em;
  color: #f6d474;
  text-shadow: 0 2px 18px rgba(7, 12, 30, 0.85);
}
.hero-hours i { display: block; width: 54px; height: 1px; background: currentColor; opacity: 0.55; }
@media (max-width: 700px) { .hero-hours { margin-top: 28px; letter-spacing: 0.26em; text-indent: 0.26em; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-70px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.12s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.24s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.36s; }

/* ---------- The frame ---------- */
/* Photographs stand in doorways: the arch off the wordmark's final A, a
   plate of ivory for a frame, lifted on a soft noon shadow. Hover opens the
   door a little, it never draws on the picture. */
.img-frame {
  position: relative; overflow: hidden;
  border-radius: 340px 340px 10px 10px;
  border: 8px solid var(--card);
  box-shadow: 0 18px 44px rgba(23, 32, 64, 0.16);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.img-frame img { transition: transform 1.4s var(--ease); border-radius: 332px 332px 4px 4px; }
.img-frame:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(23, 32, 64, 0.22); }
.img-frame:hover img { transform: scale(1.05); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 92px); align-items: center; }
.about-images { position: relative; padding-bottom: 92px; }
.about-images .img-main { width: 80%; }
.about-images .img-accent {
  position: absolute; right: 0; bottom: 0; width: 50%;
  transform: rotate(2.2deg);
  box-shadow: 0 30px 64px rgba(23, 32, 64, 0.26);
}
.about-images .img-accent:hover { transform: rotate(0.6deg) translateY(-4px); }
.about-text p { color: var(--para); margin: 26px 0; font-size: 16.5px; }

/* ---------- Menu ---------- */
.menu-section { background: var(--pedra); }
.menu-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 46px; }
.menu-tabs button {
  background: transparent; border: 1.5px solid var(--line); color: var(--para);
  border-radius: 10px;
  padding: 13px 40px;
  font-family: var(--sans); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em; font-size: 12px;
  transition: 0.4s var(--ease);
}
.menu-tabs button.active { border-color: var(--ink); color: var(--pedra); background: var(--ink); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 4vw, 64px) clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 1500px) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }
/* min-width:0 stops a long, un-wrapping dish name from forcing its 1fr track
   wider than the container and blowing the whole grid past the page edge. */
.menu-cat { break-inside: avoid; min-width: 0; }
/* The carte's headings, set the way the printed carte sets them: the name in
   the slab over its column, the note under it in the hand, one rule closing
   the block. */
.cat-head {
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.menu-cat h3 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.26em; text-indent: 0.26em;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}
.menu-cat-sub {
  font-family: var(--display);
  font-style: italic;
  color: var(--azul-deep);
  font-size: 14.5px;
  line-height: 1.4;
  margin: 7px 0 0;
}
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
/* Names wrap when they must: some dishes carry a gloss ("Khlii tagine with
   eggs · cured beef") that is far too long to hold on one line in a column. */
.menu-item .mi-name { font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.menu-item .mi-dots { flex: 1; min-width: 18px; border-bottom: 1px dotted rgba(80, 86, 112, 0.4); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--display); font-style: italic; color: var(--azul-ink); font-size: 15.5px; white-space: nowrap; }
.menu-item-desc { color: var(--para); opacity: 0.82; font-size: 13.5px; margin: -4px 0 8px; max-width: 88%; }
.menu-actions { text-align: center; margin-top: 50px; }
.menu-page { padding-top: clamp(46px, 5vw, 76px); }
.menu-page .promo-notice { margin-bottom: 24px; }

/* Sold by the glass and by the bottle: one row, two price columns */
.menu-cat.two-way .mi-price { width: 5.6em; text-align: right; }
.menu-cat.two-way .mi-price.alt { width: 6.2em; }
.menu-item.mi-head { padding: 0 0 5px; border-bottom: 1px solid var(--line-soft); margin-bottom: 5px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans); font-weight: 600; font-style: normal;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--para); opacity: 0.75;
}

/* ---------- The signature band ---------- */
/* The glazed wall: the one band on the page that is pure azulejo, because
   the pregos and the francesinha are the house's signature and cobalt is the
   house's colour. A strip of drawn tiles closes its top edge, and the list
   sits on a plate of ivory the way the board arrives. */
.formule {
  background:
    radial-gradient(90% 80% at 85% 10%, rgba(242, 196, 69, 0.16), transparent 60%),
    radial-gradient(80% 90% at 10% 100%, rgba(13, 27, 64, 0.55), transparent 70%),
    linear-gradient(112deg, #2b57a8 0%, #244a97 46%, #16295c 100%);
}
.formule::before {
  height: 8px;
  background: var(--tiles) !important;
  top: -1px;
}
.formule .kicker { color: var(--tram); }
.formule .kicker::after { background: rgba(246, 239, 219, 0.25); }
.formule .section-title { color: #fdf9ec; }
.formule-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.formule-copy .section-title { margin-bottom: 0; font-size: clamp(34px, 3.7vw, 54px); }
.formule-copy > p { color: rgba(246, 239, 219, 0.85); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--script); font-size: 28px;
  color: var(--tram); margin: 18px 0 !important;
}
.formule-copy .btn { margin-top: 8px; background: var(--tram); color: #2f2812; }
.formule-copy .btn::after { border-color: rgba(47, 40, 18, 0.4); }
.formule-copy .btn:hover { background: var(--card); color: var(--ink); }
.formule-copy .btn:hover::after { border-color: rgba(29, 42, 82, 0.35); }
/* The board: an ivory tile with the glaze line inside it */
.formule-list {
  position: relative;
  background: var(--card);
  border-radius: 4px;
  box-shadow: 0 26px 60px rgba(7, 14, 36, 0.45);
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3vw, 42px);
}
.formule-list::after {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(30, 67, 144, 0.25);
  border-radius: 2px;
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(80, 86, 112, 0.38); transform: translateY(-4px); }
.fm-price { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--azul-ink); white-space: nowrap; }
.formule-list .menu-item-desc { color: var(--para); }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } }

/* ---------- La semaine ---------- */
/* Seven days, read straight off the opening hours the owner keeps in the
   panel. A tide table more than a bill: the hours hold steady and the note
   under each day is the thing worth coming for. */
.programme-section { background: var(--pedra); }
.programme-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line-soft); border-right: 0;
  border-radius: 16px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 16px 44px rgba(23, 32, 64, 0.08);
}
.prog-day {
  position: relative;
  border-right: 1px solid var(--line-soft);
  padding: 30px 18px 34px;
  text-align: center;
  transition: background 0.5s var(--ease);
}
.prog-day:hover { background: var(--zest); }
.prog-day.today { background: rgba(43, 87, 168, 0.08); }
.prog-day.today::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--azul);
}
.prog-name {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--ink);
}
.prog-hours { display: block; font-size: 12.5px; color: var(--para); opacity: 0.75; margin-top: 8px; letter-spacing: 0.06em; }
.prog-note {
  display: block; font-family: var(--script); font-size: 24px; line-height: 1.2;
  color: var(--azul-deep); margin-top: 16px; min-height: 34px;
}
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.shut .prog-hours { color: var(--err); opacity: 0.9; }
@media (max-width: 1100px) { .programme-grid { grid-template-columns: repeat(4, 1fr); border-bottom: 0; } .prog-day { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 620px) { .programme-grid { grid-template-columns: repeat(2, 1fr); } .prog-note { font-size: 21px; } }

/* ---------- Spaces ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Each room is a doorway: the arch again, full height. */
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.2;
  border-radius: 50% 50% 12px 12px / 36% 36% 12px 12px;
  box-shadow: 0 16px 40px rgba(23, 32, 64, 0.14);
}
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.space-card:hover img { transform: scale(1.07); }
.space-card::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 48%, rgba(15, 27, 62, 0.88));
}
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 4;
  text-align: center;
  font-family: var(--sans); font-weight: 600;
  font-size: 13px; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: #fbf7ea;
  text-shadow: 0 1px 12px rgba(7, 12, 30, 0.6);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--script); font-weight: 400;
  font-size: 19px; letter-spacing: 0.02em; text-indent: 0; text-transform: none;
  color: #f6d474; margin-top: 7px; line-height: 1.4;
}

/* ---------- Gallery ---------- */
/* Six pictures set like a wall of glazed tiles: the lead takes four cells,
   the rest one each, and the gaps read as grout. */
.gal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc((min(1200px, 90vw) - 28px) / 3 * 0.625);
  gap: 14px;
}
.gal-grid figure {
  position: relative; overflow: hidden; margin: 0; cursor: zoom-in;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(23, 32, 64, 0.12);
}
.gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gal-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.gal-grid figure:hover img { transform: scale(1.05); filter: saturate(1.08) brightness(1.04); }
@media (max-width: 760px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(45vw * 0.625); gap: 10px; }
  .gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(13, 24, 56, 0.97);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 8px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.lightbox button {
  position: absolute; background: none; border: 1.5px solid var(--dusk-line); color: var(--on-dusk);
  border-radius: 12px;
  width: 48px; height: 48px; font-size: 18px; transition: 0.35s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--azul); color: var(--azul); }
.lb-close { top: 26px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* ---------- Hours / contact / map ---------- */
.info-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 640px; }
.hours-list { list-style: none; margin-top: 8px; }
.hours-list li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.hours-list .day-col { min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
.hours-list .day { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; text-indent: 0.16em; font-size: 11.5px; color: var(--ink); }
.hours-list .day-note { font-family: var(--script); font-size: 20px; line-height: 1.15; color: var(--azul-deep); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(80, 86, 112, 0.32); transform: translateY(-4px); }
.hours-list .time { color: var(--ink-soft); letter-spacing: 0.06em; }
.hours-list .closed { color: var(--err); font-family: var(--display); font-style: italic; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--azul-deep); }
.contact-lines strong { color: var(--azul-deep); font-weight: 500; }
#map { min-height: 440px; height: 100%; border: 1px solid var(--line); border-radius: 16px; z-index: 1; }
#map .leaflet-tile-pane { filter: sepia(0.14) saturate(0.85) brightness(1.02) contrast(0.97); }
#map .leaflet-control-attribution { background: rgba(248, 241, 222, 0.8); color: var(--para); }
#map .leaflet-control-attribution a { color: var(--azul-deep); }
#map .leaflet-bar a { background: var(--card); color: var(--ink); border-bottom-color: var(--line); }
#map .leaflet-bar a:hover { background: var(--pedra-2); color: var(--azul-deep); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--azul); border: 3px solid var(--card);
  box-shadow: 0 2px 12px rgba(23, 32, 64, 0.4);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--azul);
  animation: pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse {
  from { transform: scale(0.5); opacity: 0.9; }
  to { transform: scale(1.3); opacity: 0; }
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card); color: var(--ink); border-radius: 10px; }
.leaflet-popup-content a { color: var(--azul-deep); font-weight: 500; }

/* ---------- Reservation ---------- */
/* The room after dark: the photograph under a night-glaze veil, and the form
   on a plate of ivory in the middle of it. */
.reserve-section {
  background:
    linear-gradient(rgba(13, 24, 56, 0.8), rgba(10, 19, 46, 0.88)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background: var(--card);
  border-radius: 6px;
  color: var(--para);
  box-shadow: 0 34px 90px rgba(6, 11, 28, 0.5);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel::after {
  content: ''; position: absolute; inset: 11px; pointer-events: none;
  border: 1px solid rgba(30, 67, 144, 0.22);
  border-radius: 3px;
}
.reserve-panel > * { position: relative; z-index: 1; }
.reserve-panel .kicker { color: var(--azul-deep); }
.reserve-panel .kicker::before, .reserve-panel .kicker::after { background: var(--line); }
.reserve-panel .section-title { color: var(--ink); }
.reserve-panel .section-sub, .reserve-panel .form-note { color: var(--para); }
.reserve-panel .prefill-note { color: var(--azul-deep); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; }
.form-field { display: grid; gap: 9px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--sans); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--azul-deep); }
.form-field input, .form-field select {
  background: var(--pedra);
  border: 1.5px solid var(--line-soft);
  color: var(--ink);
  padding: 15px 16px;
  font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0.02em;
  transition: border-color 0.35s;
  width: 100%; border-radius: 10px; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--azul); }
.form-field input::placeholder { color: rgba(80, 86, 112, 0.5); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--azul-deep) 50%), linear-gradient(135deg, var(--azul-deep) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.form-field select option { background: var(--card); color: var(--ink); }
.form-field input[type='date'], .form-field input[type='time'] { color-scheme: light; }
.phone-row { display: grid; grid-template-columns: 136px 1fr; gap: 10px; }
.form-note { color: var(--para); opacity: 0.85; font-size: 13px; margin-top: 20px; text-align: center; }
.form-submit { margin-top: 34px; text-align: center; }
.form-msg { margin-top: 20px; text-align: center; font-size: 14px; display: none; }
.form-msg.ok { display: block; color: var(--ok); }
.form-msg.err { display: block; color: var(--err); }
.field-note { display: block; margin-top: 7px; font-size: 12.5px; color: rgba(80, 86, 112, 0.7); letter-spacing: 0.02em; }
.prefill-note { color: var(--azul-deep); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
/* The glazed night the evening ends on, closed under the tile strip. */
footer {
  background:
    radial-gradient(80% 70% at 12% 0%, rgba(43, 87, 168, 0.4), transparent 66%),
    var(--noite-deep);
  color: var(--on-dusk-dim);
  padding: 90px 0 34px;
}
footer::before {
  height: 8px;
  background: var(--tiles);
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 46px; margin-bottom: 54px; }
.footer-grid h4 {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em;
  margin-bottom: 20px; color: var(--azul);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--on-dusk-dim); font-size: 15.5px; line-height: 1.7; list-style: none; }
.footer-grid a:hover { color: var(--azul); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo {
  height: 62px; width: auto; margin-bottom: 20px;
  /* Transparent on the deep teal; a faint light halo keeps the darker part of
     the wordmark from sinking into the ground. */
  filter: drop-shadow(0 0 1px rgba(246, 239, 219, 0.55)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.socials { display: flex; gap: 14px; margin-top: 26px; }
/* The mark is the button. No frame, no tint, no filter: these are the
   official logos and they are recognised by their colour. */
.socials a {
  width: 46px; height: 46px; display: block; border-radius: 10px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.footer-bottom {
  border-top: 1px solid var(--dusk-line-soft); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--on-dusk-dim); opacity: 0.9; font-size: 13.5px; letter-spacing: 0.05em;
}
.footer-bottom a:hover { color: var(--azul); }

/* ---------- Subpages ---------- */
.page-hero { height: 50vh; min-height: 380px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; }
.page-hero .hero-bg img { animation: none; }
.page-hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(9, 15, 35, 0.6) 0%, rgba(9, 15, 35, 0.42) 45%, rgba(22, 41, 92, 0.75) 100%);
}
.hero-video { display: block; }
.page-hero .hero-video { filter: blur(3px) saturate(0.98); transform: scale(1.05); }
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-video { display: none; }
  .page-hero .hero-bg { background: url('../images/menu-hero-poster.jpg') center / cover no-repeat; }
}
.page-hero h1 { font-size: clamp(34px, 5vw, 60px); position: relative; z-index: 2; letter-spacing: 0.05em; text-transform: uppercase; color: #fbf7ea; text-shadow: 0 6px 40px rgba(7, 12, 30, 0.6); }
.page-hero .kicker { position: relative; z-index: 2; color: #f6d474; }
.page-hero .kicker::after, .page-hero .kicker::before { background: rgba(251, 247, 234, 0.3); }
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { letter-spacing: -0.01em; }
.legal h2 { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; margin: 48px 0 16px; color: var(--azul-deep); font-weight: 600; }
.legal p, .legal li { color: var(--para); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 0; left: 50%; z-index: 120;
  transform: translate(-50%, -130%);
  display: flex; align-items: center; gap: 14px;
  width: min(620px, calc(100vw - 32px));
  margin-top: 16px; padding: 16px 22px;
  border-radius: 14px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(23, 32, 64, 0.3);
  font-size: 14.5px; font-weight: 400; line-height: 1.5;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
  opacity: 0;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast::before {
  content: ''; flex: none; width: 4px; align-self: stretch; border-radius: 2px;
  background: var(--ok);
}
.toast.err::before { background: var(--err); }
.toast .toast-close {
  margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--para); padding: 0 2px;
}
.toast .toast-close:hover { color: var(--ink); }
@media (max-width: 560px) { .toast { font-size: 13.5px; padding: 14px 16px; } }

/* ---------- Account ---------- */
.nav-auth {
  border: 1.5px solid rgba(251, 247, 234, 0.5); border-radius: 10px;
  padding: 10px 20px !important; letter-spacing: 0.18em; text-indent: 0.18em;
  transition: background .35s, color .35s, border-color .35s;
}
.nav.scrolled .nav-auth { border-color: var(--line); }
.nav-auth::after { display: none; }
.nav-auth:hover { background: var(--azul); border-color: var(--azul); color: #2f2812 !important; }
.nav-auth.signed-in { border-color: var(--azul); color: var(--azul) !important; }
.nav.scrolled .nav-auth.signed-in { color: var(--azul-deep) !important; border-color: var(--azul-deep); }
.nav-auth.signed-in:hover { background: var(--azul); border-color: var(--azul); color: #2f2812 !important; }

.page-account { background: var(--noite-deep); }
.page-account::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: url('/images/account-bg.jpg') center/cover no-repeat;
}
.page-account::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 20, 48, .66), rgba(11, 20, 48, .8) 55%, rgba(8, 14, 36, .92));
}
.page-account .nav {
  background: rgba(248, 241, 222, 0.95); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); padding: 10px 0;
}
.page-account .nav .nav-links a, .page-account .nav .nav-right a { color: var(--ink); text-shadow: none; }
.page-account .nav .lang-switch { border-color: var(--line-soft); }
.page-account .nav .lang-switch button { color: var(--para); }
.page-account .nav .lang-switch button.active { color: #2f2812; }
.page-account .nav .nav-auth { border-color: var(--line); }
.page-account .nav .burger span { background: var(--ink); }
.page-account .nav-logo img { height: 46px; filter: none; }
.account-main { padding: 96px 0 36px; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; }
.account-main > .container { width: 100%; }
.account-main section { padding: 0; }
.page-account footer { border-top: 1px solid var(--dusk-line-soft); background: rgba(8, 14, 36, .6); }
.page-account footer::before { display: none; }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  position: relative;
  width: min(580px, 100%); background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 22px; padding: 34px 36px; text-align: center;
  box-shadow: 0 34px 80px rgba(6, 11, 28, 0.45);
}
.auth-card::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(30, 67, 144, 0.16); border-radius: 3px; }
.auth-card > * { position: relative; z-index: 1; }
.auth-logo { width: 150px; height: auto; margin: 0 auto 10px; display: block; }
.auth-card .section-title { font-size: 27px; margin: 0 0 6px; }
.auth-sub { color: var(--para); font-size: 13px; line-height: 20px; margin-bottom: 16px; }
.auth-form { display: grid; gap: 6px; text-align: left; }
#signupForm { grid-template-columns: 1fr 1fr; column-gap: 14px; }
#signupForm .full { grid-column: 1 / -1; }
.auth-form label {
  font-family: var(--sans); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--azul-deep); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: var(--pedra); border: 1.5px solid var(--line-soft);
  border-radius: 10px; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--azul); }
.auth-form .btn { margin-top: 16px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--para); opacity: 0.8; line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: var(--pedra); border: 1.5px solid var(--line-soft); border-radius: 10px;
  color: var(--para); padding: 10px 6px; font-size: 13px; font-family: var(--sans); transition: .3s;
}
.gender-row button:hover { border-color: var(--azul); }
.gender-row button.active { border-color: var(--azul); background: var(--zest); color: var(--azul-deep); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-msg { font-size: 13px; min-height: 18px; margin-top: 8px; text-align: center; grid-column: 1 / -1; }
.auth-msg.err { color: var(--err); }
.auth-msg.ok { color: var(--ok); }
.auth-switch { font-size: 13px; color: var(--para); text-align: center; margin-top: 12px; grid-column: 1 / -1; }
.auth-switch a { color: var(--azul-deep); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 24px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }

.auth-form select {
  width: 100%; background: var(--pedra); border: 1.5px solid var(--line-soft);
  border-radius: 10px; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--azul-deep) 50%),
                    linear-gradient(135deg, var(--azul-deep) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.auth-form select:focus { outline: none; border-color: var(--azul); }
.auth-form select option { background: var(--card); color: var(--ink); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; line-height: 0;
  padding: 9px 11px; color: var(--para); opacity: .8; transition: color .25s, opacity .25s;
}
.pw-eye svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on { color: var(--azul-deep); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--ink); opacity: 1; }

.auth-form label.stay-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0.01em;
  color: var(--para); cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--azul); cursor: pointer; }
.stay-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stay-line .stay-row { margin-top: 12px; }
.forgot-link { margin-top: 12px; font-size: 13px; color: var(--azul-deep); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--ink); }
.birthday-note {
  font-size: 12px; color: var(--azul-deep); margin-top: 10px; text-align: center;
  background: var(--zest); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px;
}

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 28px 0 42px; }
.member-card {
  background: var(--card);
  border: 1px solid var(--line-soft); border-radius: 18px; padding: 28px;
  box-shadow: 0 20px 50px rgba(6, 11, 28, 0.35);
}
.member-card h3 { font-family: var(--display); font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.member-card .btn { margin-top: 16px; width: 100%; text-align: center; }
.member-card .muted { color: var(--para); font-size: 14px; }

.fidelity-card { background: linear-gradient(140deg, var(--tram), #d9a516 62%, #8a6a08); border: 0; }
.fidelity-card .kicker { display: block; margin-bottom: 8px; color: #5c4a10; }
.fidelity-card b { font-family: var(--display); font-size: 56px; font-weight: 600; color: #2f2812; line-height: 1; }
.fidelity-card p { color: #4a3d13; font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { color: #4a3d13; opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 24px; font-weight: 600; margin-bottom: 18px; color: #fbf7ea; }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: var(--card);
  border: 1px solid var(--line-soft); border-radius: 16px; padding: 17px 22px;
  box-shadow: 0 14px 36px rgba(6, 11, 28, 0.3);
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--azul-deep); }
.res-when span { font-size: 12px; color: var(--para); opacity: 0.8; }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 500; color: var(--ink); }
.res-meta span { font-size: 12px; color: var(--para); opacity: 0.7; }
.res-badge { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; border: 1.5px solid; }
.res-badge.pending { color: var(--azul-deep); border-color: rgba(30, 67, 144, 0.5); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(47, 122, 82, 0.5); }
.res-badge.cancelled { color: var(--err); border-color: rgba(179, 64, 58, 0.5); }

.hidden { display: none !important; }

/* ---------- Contact band ---------- */
/* The bar at night: the photograph under a night-glaze veil, one warm lamp
   of tram yellow in the middle of it. */
.contact-band {
  position: relative; padding: 100px 0; overflow: hidden;
  background: url('/images/contact-bg.jpg') center/cover no-repeat fixed;
}
.contact-band::before {
  content: ''; position: absolute; inset: 0;
  /* height and z-index are load-bearing: the generic band divider sets every
     section's ::before to a 1px hairline at z-index 2, and without these the
     veil either collapses to that line or paints over the band's own type. */
  height: auto;
  z-index: 0;
  background: linear-gradient(180deg, rgba(11, 20, 48, .84), rgba(133, 100, 22, .5) 55%, rgba(11, 20, 48, .88));
}
.contact-band > .container { position: relative; z-index: 1; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .kicker { color: #f6d474; }
.contact-inner .kicker::before, .contact-inner .kicker::after { background: rgba(251, 247, 234, 0.28); }
.contact-inner .section-title { font-size: clamp(36px, 4.8vw, 56px); color: #fbf7ea; }
.contact-lead { color: rgba(251, 247, 234, 0.85); max-width: 620px; margin: 24px auto 44px; line-height: 27px; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin-bottom: 40px; }
.contact-card {
  display: flex; align-items: center; gap: 15px; text-align: left; text-decoration: none;
  background: rgba(248, 241, 222, 0.94); border: 0; border-radius: 16px;
  padding: 19px 21px;
  box-shadow: 0 14px 38px rgba(6, 11, 28, 0.35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(6, 11, 28, 0.45); }
.cc-icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--zest); border: 1px solid rgba(30, 67, 144, 0.24);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--azul-deep); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azul-deep); }
.cc-body b { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }

.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.contact-band .btn.ghost { color: #fbf7ea; box-shadow: inset 0 0 0 1.5px rgba(251, 247, 234, 0.45); }
.contact-band .btn.ghost:hover { background: var(--card); color: var(--ink); box-shadow: none; }
.contact-band .socials { justify-content: center; }

/* ---------- Deals ---------- */
.deals-main { align-items: flex-start; padding-top: 120px; }
.deals-main .section-head { margin-bottom: 32px; }
.deals-main .section-head .section-title { color: #fbf7ea; }
.deals-main .section-head .section-sub { color: rgba(251, 247, 234, 0.8); }
.deals-empty {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px;
  padding: 44px 32px; text-align: center; color: var(--para); max-width: 580px; margin: 0 auto;
  box-shadow: 0 20px 50px rgba(6, 11, 28, 0.35);
}
.deals-empty .contact-actions { margin-top: 24px; margin-bottom: 0; }
.deal-group { margin-bottom: 42px; }
.deal-group h2 { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; color: #f6d474; font-weight: 600; margin-bottom: 18px; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.deal-card {
  position: relative; display: flex; gap: 15px; align-items: center;
  background: var(--card); border: 1px solid rgba(30, 67, 144, .2); border-radius: 16px;
  padding: 15px;
  box-shadow: 0 14px 36px rgba(6, 11, 28, 0.3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(6, 11, 28, 0.4); }
.deal-card img { width: 74px; height: 74px; border-radius: 12px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-family: var(--display); font-size: 18px; font-weight: 600; margin-bottom: 3px; }
.deal-body p { color: var(--para); font-size: 12px; opacity: .8; margin-bottom: 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-prices { display: flex; align-items: baseline; gap: 10px; }
.deal-prices s { color: var(--para); opacity: .55; font-size: 13px; }
.deal-prices b { font-family: var(--display); color: var(--azul-deep); font-size: 18px; font-weight: 600; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: var(--zest);
  color: var(--azul-deep); border-radius: 999px; padding: 4px 11px;
  font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.mi-was { color: var(--para); opacity: 0.55; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: var(--ok); font-weight: 500; font-style: normal; }
.nav-deals { color: var(--azul) !important; }
.nav.scrolled .nav-deals { color: var(--azul-deep) !important; }

/* ---------- Delete account ---------- */
.del-card { max-width: 660px; text-align: left; }
.del-card .section-title { text-align: center; }
.del-card .auth-sub { text-align: center; margin-bottom: 28px; }
.del-block { margin-bottom: 28px; }
.del-block h2 {
  font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--azul-deep); margin-bottom: 12px; font-weight: 600;
}
.del-list { list-style: none; display: grid; gap: 9px; }
.del-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--para); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 2px; border-radius: 2px; background: var(--azul); }
.del-note { font-size: 13px; color: var(--para); margin-top: 14px; line-height: 1.6; }
.del-or { margin-top: 22px; }
.del-app { border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 24px; opacity: 0.85; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }

/* ---------- Time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--pedra); border: 1.5px solid var(--line-soft); color: var(--para);
  padding: 15px 16px; font-family: var(--sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0.02em; text-align: left; border-radius: 10px;
  transition: border-color 0.35s, color 0.35s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--azul); }
.timepick-btn.chosen { color: var(--ink); }
.timepick-btn .tp-caret {
  width: 0; height: 0; flex: none; margin-left: auto;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--azul-deep);
  transition: transform 0.3s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--azul-deep); flex: none; }
.timepick-panel {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 236px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 46px rgba(23, 32, 64, 0.25);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: var(--pedra); border: 1.5px solid transparent; color: var(--para);
  padding: 10px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  border-radius: 8px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.timepick-slot:hover { background: var(--zest); color: var(--ink); border-color: var(--azul); }
.timepick-slot.on { background: var(--ink); color: var(--pedra); border-color: var(--ink); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
@media (max-width: 720px) { .timepick-panel { grid-template-columns: repeat(4, 1fr); max-height: 200px; } }

/* ---------- Boot cover ---------- */
.page-boot {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--pedra); transition: opacity .3s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 130px; height: 130px; display: grid; place-items: center; }
.boot-mark img { width: 86px; height: auto; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--line-soft); border-top-color: var(--azul);
  animation: bootSpin 1s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.6s; } }

/* ---------- Marketing ---------- */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: var(--verde-deep);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden; padding: 9px 0;
}
.promo-track {
  display: flex; width: max-content;
  animation-name: promo-scroll; animation-timing-function: linear; animation-iteration-count: infinite;
  will-change: transform;
}
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text {
  flex: none; white-space: nowrap; padding-right: 5rem;
  color: #f2f0e4; font-weight: 600;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.14em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: #f6d474; }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
@media (max-width: 860px) { .promo-banner { font-size: 13px; padding: 8px 14px; } }

.promo-notice {
  display: block; margin: 0 auto 28px; max-width: 660px;
  background: var(--verde-deep); color: #f2f0e4; font-weight: 600;
  border-radius: 12px; padding: 12px 28px;
  font-family: var(--sans); text-align: center; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.promo-notice.hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .spaces-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-cols { grid-template-columns: 1fr; }
}
/* Six links plus the switch, the booking button and two account links do not
   fit a laptop bar. Below this the whole lot moves into the burger panel. */
@media (max-width: 1240px) {
  .nav-logo img { height: 48px; }
  .nav.scrolled .nav-logo img { height: 42px; }
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: var(--pedra);
    flex-direction: column; justify-content: center; align-items: center; gap: 24px;
    /* clip-path rather than translateX: a translated full-screen panel widens
       the layout viewport and lets the page pan sideways on phones */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.55s var(--ease), visibility 0s 0.55s;
    grid-column: auto; grid-row: auto; z-index: 65; list-style: none;
  }
  .nav-links.open { clip-path: inset(0); visibility: visible; transition: clip-path 0.55s var(--ease); }
  .nav-links a { font-size: 18px; letter-spacing: 0.3em; text-indent: 0.3em; color: var(--ink); text-shadow: none; }
  .nav-links .nav-cta { border: 1.5px solid var(--azul); padding: 14px 30px !important; color: var(--azul-deep); }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(14px); }
  .nav-links .lang-switch { display: inline-flex; border-color: var(--line); }
  .nav-links .lang-switch button { color: var(--para); }
  .nav-links .lang-switch button.active { color: #2f2812; }
  .nav-links.open li { animation: navItemIn 0.55s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.2s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.26s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.32s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.38s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.44s; }
  .nav-links.open li:nth-child(8) { animation-delay: 0.5s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links {
    position: static; height: auto; background: none;
    flex-direction: row; clip-path: none; visibility: visible; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 11px; letter-spacing: 0.18em; text-indent: 0.18em; }
}
@media (max-width: 900px) {
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  /* iOS ignores background-attachment: fixed; keep these bands readable */
  #menu.menu-section, .reserve-section, .contact-band, body { background-attachment: scroll; }
  section.paper { background-attachment: scroll, scroll; }
}
@media (min-width: 901px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .space-card { aspect-ratio: 16 / 11; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-tag { letter-spacing: 0.34em; text-indent: 0.34em; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }
  .menu-cat.two-way .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-cat.two-way .mi-name { min-width: 0; max-width: none; flex: 1 1 auto; }
  .menu-cat.two-way .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 3.6em; }
  .menu-cat.two-way .mi-price.alt { width: 4.4em; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
}
@media (max-width: 720px) {
  .account-main { padding: 110px 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 11px; }
  .auth-card { padding: 26px 20px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
  .contact-band { padding: 72px 0; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
}
/* On a short screen, centring a tall card pushes it below the fold */
@media (max-height: 900px) { .account-main { align-items: flex-start; padding-top: 88px; } }

/* Someone who asked their system for less motion gets the content, not the
   choreography. Without this the page reads as blank until it animates in. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; transform: none; }
  .hero-content > * { opacity: 1; transform: none; }
  .hero video { display: none; }
}

/* ---------- The reserve badge ---------- */
/* Booking within reach at any depth of the page. The wording turns; the arch
   in the middle does not, which is the whole trick. The plate behind it is
   not decoration: the page runs light bands against night ones, and the
   badge crosses both. */
.reserve-badge {
  position: fixed; right: 34px; bottom: 34px; z-index: 55;
  width: 112px; height: 112px; display: grid; place-items: center;
}
.reserve-badge::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(255, 252, 241, 0.9); border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(23, 32, 64, 0.2);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text {
  fill: var(--azul-deep); font-family: var(--sans); font-weight: 600;
  font-size: 8.6px; letter-spacing: 0.3em; text-transform: uppercase;
}
.reserve-badge .badge-center { position: relative; display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.reserve-badge .badge-center img { width: 58px; height: auto; }
.reserve-badge:hover .badge-center { transform: scale(1.09); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .reserve-badge svg { animation: none; }
}

@media (max-width: 1024px) {
  .reserve-badge { display: none; }
}

/* ---------- Booking switched off ---------- */
.bookings-off .reserve-section,
.bookings-off .nav-cta,
.bookings-off .reserve-badge,
.bookings-off a[href$="#reserve"],
.bookings-off li:has(> a[href$="#reserve"]) { display: none !important; }

.bookings-off .contact-actions .btn.ghost { margin: 0 auto; }

/* ---------- The carte's own language ---------- */
.carte-lang {
  display: flex; justify-content: center; gap: 0;
  margin: -26px 0 44px;
}
.carte-lang button {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 16px; color: var(--para); opacity: .75;
  border-bottom: 2px solid transparent;
  transition: color .3s var(--ease), opacity .3s var(--ease), border-color .3s var(--ease);
}
.carte-lang button + button { border-left: 1px solid var(--line-soft); }
.carte-lang button:hover { opacity: 1; color: var(--ink); }
.carte-lang button.active { opacity: 1; color: var(--azul-deep); border-bottom-color: var(--azul); }
.paper .carte-lang button { color: var(--para-on-paper); }
.paper .carte-lang button + button { border-left-color: var(--rule-on-paper); }
.paper .carte-lang button:hover { color: var(--ink-on-paper); }
.paper .carte-lang button.active { color: var(--gold-on-paper); border-bottom-color: var(--gold-on-paper); }
@media (max-width: 560px) {
  .carte-lang { margin: -18px 0 32px; }
  .carte-lang button { padding: 8px 11px; font-size: 11px; letter-spacing: .1em; }
}

/* ---------- Booking taken on WhatsApp ---------- */
/* The same form, but the request leaves as a message. The button carries
   WhatsApp green rather than the house cobalt, because a guest recognises it
   before he reads it. */
.reserve-panel .btn.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: #1fa855;
  color: #ffffff;
  text-decoration: none;
  text-indent: 0;
}

.reserve-panel .btn.wa-btn::after { border-color: rgba(255, 255, 255, 0.45); }

.reserve-panel .btn.wa-btn:hover,
.reserve-panel .btn.wa-btn:focus-visible { background: #157a3c; color: #fff; }

.reserve-panel .btn.wa-btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  flex: none;
  transition: fill 0.45s var(--ease);
}

/* Left clickable on purpose: the click handler names the missing field, which
   is more use than a button that cannot be pressed and does not say why. */
.reserve-panel .btn.wa-btn.incomplete { opacity: .5; }