/* ==========================================================================
   A Taberna da Vila Maria · folha de estilos
   Proposta de demonstração criada pela Tino.

   Identidade: a carta da casa. Fundo marfim, castanho muito escuro,
   o dourado do galo da ementa e pequenos apontamentos verde azeitona.
   Linhas finas que se interrompem para dar lugar ao nome, ao galo e aos pratos.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/fraunces-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
}

:root {
  --ivory: #F4EDE1;
  --paper: #FAF6EE;
  --ink: #2A1D14;
  --ink-2: #594738;
  --ink-3: #6E5B4C;
  --gold: #BA9263;        /* o dourado da ementa: galo, linhas, ornamentos */
  --gold-deep: #8A6534;   /* dourado para títulos grandes */
  --gold-text: #7A5629;   /* dourado para texto pequeno (contraste AA) */
  --gold-light: #D2B07F;  /* dourado sobre fundo escuro */
  --olive: #545B30;
  --espresso: #221710;
  --on-dark: #F1E8DA;
  --on-dark-2: #CDBFAC;
  --rule: rgb(186 146 99 / .62);
  --rule-soft: rgb(186 146 99 / .36);
  --rule-dark: rgb(210 176 127 / .3);

  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4.6vw, 56px);
  --header-h: 64px;
  --catnav-h: 50px;
  --section: clamp(84px, 11vw, 156px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 1024px) {
  :root { --header-h: 78px; --catnav-h: 54px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--ivory) url("grain.svg");
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
h1, h2, h3, p, ul, address, figure { margin: 0; }
a { color: inherit; }
svg { display: block; }
::selection { background: rgb(186 146 99 / .35); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.contactos :focus-visible { outline-color: var(--gold-light); }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed;
  left: 12px; top: 10px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--ivory);
  font-weight: 600;
  text-decoration: none;
  border-radius: 3px;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* ---------- etiquetas ---------- */
.kicker {
  font: 600 .6875rem/1.2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.kicker-sep {
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 .55em .18em;
  background: var(--gold);
  transform: rotate(45deg);
}
@media (min-width: 560px) {
  .kicker { font-size: .75rem; letter-spacing: .2em; }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 48px;
  padding: .7em 1.3em;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 600 1rem/1.15 var(--sans);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn-lg { min-height: 56px; padding: .85em 1.6em; font-size: 1.0625rem; }
.btn .ico { width: 1.2em; height: 1.2em; flex: none; }
.btn .ico-end { width: 1.05em; height: 1.05em; margin-right: -.2em; }

.btn-primary { background: var(--ink); color: var(--ivory); }
.btn-primary .ico { color: var(--gold-light); }
.btn-primary:hover { background: #3E2D20; }

.btn-ghost { border-color: rgb(42 29 20 / .32); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: rgb(42 29 20 / .035); }
.btn-ghost .ico { color: var(--gold-text); }

.btn-gold { background: var(--gold-light); color: var(--espresso); }
.btn-gold:hover { background: #E2C597; }

.btn-line { border-color: rgb(241 232 218 / .38); color: var(--on-dark); }
.btn-line:hover { border-color: var(--on-dark); background: rgb(241 232 218 / .06); }
.btn-line .ico { color: var(--gold-light); }

.btn-wa-line { border-color: rgb(84 91 48 / .45); color: var(--olive); }
.btn-wa-line:hover { border-color: var(--olive); background: rgb(84 91 48 / .06); }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--ivory) url("grain.svg");
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.site-header.is-scrolled,
.nav-open .site-header { border-bottom-color: var(--rule-soft); }
.header-in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  color: var(--ink);
  text-decoration: none;
}
.brand-galo { width: 31px; height: auto; aspect-ratio: 780 / 816; fill: var(--gold); flex: none; }
.brand-text { display: flex; flex-direction: column; white-space: nowrap; }
.brand-pre {
  font: 600 .5625rem/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 5px;
}
.brand-name {
  font: 500 1.3125rem/.9 var(--serif);
  letter-spacing: -.01em;
}

.btn-call { min-height: 44px; padding: .55em 1em; font-size: .9375rem; flex: none; }
.btn-call .ico { width: 1.15em; height: 1.15em; }
.call-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.nav-list { list-style: none; padding: 0; }
.nav-list a { text-decoration: none; }

.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle-bars { top: 21px; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; left: 0; }
.nav-toggle-bars::before { transform: translateY(-6px); }
.nav-toggle-bars::after { transform: translateY(6px); }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: rotate(45deg); background: var(--ink); }
.nav-open .nav-toggle-bars::after { transform: rotate(-45deg); background: var(--ink); }

/* Telemóvel e tablet sem JavaScript: links visíveis numa segunda linha */
@media (max-width: 1023.98px) {
  html:not(.js) .site-header { position: static; height: auto; }
  html:not(.js) .header-in { flex-wrap: wrap; padding: 10px 0 4px; row-gap: 0; }
  html:not(.js) .site-nav { order: 3; width: 100%; }
  html:not(.js) .nav-list { display: flex; justify-content: center; gap: 4px 18px; border-top: 1px solid var(--rule-soft); margin-top: 8px; }
  html:not(.js) .nav-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .95rem; }
  html:not(.js) .nav-panel-extra { display: none; }

  /* Com JavaScript: painel que abre por baixo do cabeçalho */
  .js .nav-toggle { display: block; }
  .js .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 6px var(--gutter) 28px;
    background: var(--ivory) url("grain.svg");
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 24px 40px -28px rgb(34 23 16 / .45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  }
  .js.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
  }
  .js .nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    border-bottom: 1px solid var(--rule-soft);
    font: 400 1.75rem/1.1 var(--serif);
    letter-spacing: -.01em;
  }
  .js .nav-list a::after {
    content: "";
    width: 7px; height: 7px;
    border-top: 1.5px solid var(--gold);
    border-right: 1.5px solid var(--gold);
    transform: rotate(45deg);
    margin-right: 4px;
  }
  .nav-panel-extra { display: grid; gap: 14px; margin-top: 22px; }
  .nav-panel-extra .btn { width: 100%; min-height: 52px; }
  .nav-panel-note { font-size: .875rem; color: var(--ink-3); text-align: center; }
}
/* ecrãs muito estreitos (320–359 px) */
@media (max-width: 359.98px) {
  .header-in { gap: 6px; }
  .brand { gap: 8px; }
  .brand-galo { width: 28px; }
  .brand-name { font-size: 1.1875rem; }
  .btn-call { padding-inline: .8em; }
  .frame-top { gap: 8px; }
  .frame-top .kicker { font-size: .625rem; letter-spacing: .1em; }
  .kicker-sep { margin-inline: .4em; }
}
@media (min-width: 560px) {
  .call-more { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .btn-call { padding-inline: 1.2em; }
}
@media (min-width: 1024px) {
  .header-in { gap: 28px; }
  .brand { gap: 12px; }
  .brand-galo { width: 38px; }
  .brand-pre { font-size: .625rem; margin-bottom: 6px; }
  .brand-name { font-size: 1.625rem; }
  .site-nav { display: flex; }
  .nav-list { display: flex; gap: 6px; }
  .nav-list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-weight: 500;
    font-size: .9688rem;
    color: var(--ink-2);
    transition: color .2s;
  }
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 8px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform .25s var(--ease);
  }
  .nav-list a:hover { color: var(--ink); }
  .nav-list a:hover::after { transform: scaleX(1); }
  .nav-panel-extra { display: none; }
  .btn-call { min-height: 48px; font-size: 1rem; }
}

/* ==========================================================================
   Primeira secção · a capa da carta
   ========================================================================== */
.hero {
  --galo-h: 66px;
  padding: 30px 10px calc(var(--galo-h) * .1 + 8px);
}
.hero-frame {
  position: relative;
  max-width: 1380px;
  min-height: calc(100svh - var(--header-h) - 44px);
  margin: 0 auto;
  padding: 58px 18px calc(var(--galo-h) * .9 + 44px);
  border-left: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* linha de cima, interrompida pela indicação */
.frame-top {
  position: absolute;
  top: 0; left: -1px; right: -1px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
}
.frame-top::before,
.frame-top::after { content: ""; flex: 1 1 0; height: 1px; background: var(--gold); }
.frame-top .kicker { flex: none; max-width: calc(100% - 40px); }

/* linha de baixo, interrompida pelo galo, como na ementa impressa */
.frame-base {
  position: absolute;
  left: -1px; right: -1px; bottom: 0;
  display: flex;
  align-items: flex-end;
  transform: translateY(calc(var(--galo-h) * .1));
}
.frame-base::before,
.frame-base::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  margin-bottom: calc(var(--galo-h) * .1);
  background: var(--gold);
}
.frame-galo {
  flex: none;
  height: var(--galo-h);
  width: calc(var(--galo-h) * 780 / 816);
  margin: 0 calc(var(--galo-h) * .22);
  fill: var(--gold);
}

.hero-title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(3.3rem, 1.25rem + 8.8vw, 8.75rem);
  line-height: .97;
  letter-spacing: -.028em;
  color: var(--ink);
}
.hero-title .t1 {
  display: block;
  font-style: italic;
  font-weight: 360;
  color: var(--gold-deep);
  letter-spacing: -.02em;
  margin-bottom: .04em;
}
.hero-title .t2, .hero-title .t3 { display: inline-block; white-space: nowrap; }

.hero-sub {
  max-width: 31em;
  margin-top: clamp(22px, 3vw, 34px);
  font-size: clamp(1.0625rem, .98rem + .42vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin-top: clamp(28px, 3.6vw, 40px);
}
.hero-meta {
  margin-top: 18px;
  font-size: .9375rem;
  color: var(--ink-3);
}

@media (min-width: 560px) {
  .hero { --galo-h: 82px; padding-inline: 16px; }
  .hero-frame { padding-inline: 32px; }
  .hero-actions { flex-direction: row; justify-content: center; max-width: none; width: auto; }
}
@media (min-width: 1024px) {
  .hero { --galo-h: 108px; padding: 34px 24px calc(var(--galo-h) * .1 + 12px); }
  .hero-frame { min-height: min(calc(100svh - var(--header-h) - 56px), 900px); padding-top: 72px; }
  .frame-top { gap: 18px; }
}

/* ==========================================================================
   A Taberna
   ========================================================================== */
.taberna { padding: var(--section) 0 calc(var(--section) * .92); }
.taberna-grid { display: grid; gap: 22px; }
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 .75rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.label-rule { flex: none; width: 34px; height: 1px; background: var(--gold); }
.taberna-lead {
  max-width: 17.5em;
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(1.8rem, 1.12rem + 2.8vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -.018em;
  text-wrap: pretty;
}
.taberna-lead em { font-style: italic; font-weight: 340; color: var(--gold-deep); }

.pilares {
  list-style: none;
  padding: 0;
  margin-top: clamp(52px, 7vw, 104px);
  display: grid;
  border-top: 1px solid var(--rule-soft);
}
.pilar {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--rule-soft);
}
.pilar > :not(.pilar-num) { grid-column: 2; }
.pilar-num {
  grid-row: 1 / span 3;
  font: italic 400 1.0625rem/1.75 var(--serif);
  color: var(--gold-text);
}
.pilar-title { font: 450 1.5rem/1.2 var(--serif); letter-spacing: -.01em; }
.pilar-txt { margin-top: 8px; color: var(--ink-2); text-wrap: pretty; }
.pilar-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-top: 6px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--olive);
  text-decoration: underline;
  text-decoration-color: rgb(84 91 48 / .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color .2s;
}
.pilar-link:hover { text-decoration-color: currentColor; }
.pilar-link .ico { width: 1.05em; height: 1.05em; }

@media (min-width: 860px) {
  .pilares { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule-soft); }
  .pilar { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; padding: 34px 32px 26px; border-bottom: 0; border-left: 1px solid var(--rule-soft); }
  .pilar > :not(.pilar-num) { grid-column: 1; }
  .pilar:first-child { border-left: 0; padding-left: 0; }
  .pilar:last-child { padding-right: 0; }
  .pilar-num { grid-row: auto; margin-bottom: 18px; line-height: 1; }
  .pilar-link { align-self: end; margin-top: 18px; }
}
@media (min-width: 1024px) {
  .taberna-grid { grid-template-columns: 3fr 9fr; align-items: start; gap: 40px; }
  .section-label { margin-top: 1.55em; }
}

/* ==========================================================================
   Ementa
   ========================================================================== */
.ementa {
  --carta-bg: var(--paper);
  padding: calc(var(--section) * .8) 0 calc(var(--section) * .9);
  background: var(--paper);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.ementa-head { text-align: center; }
.kicker-center { display: block; }
.ementa-title {
  margin-top: 10px;
  font: 400 clamp(3.6rem, 2.2rem + 6vw, 7.5rem)/.95 var(--serif);
  letter-spacing: -.03em;
  color: var(--gold-deep);
}
.ementa-demo {
  margin-top: 16px;
  text-wrap: balance;
  font: italic 400 .9688rem/1.45 var(--serif);
  color: var(--ink-3);
}

/* barra de categorias */
.cat-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  margin-top: clamp(30px, 4vw, 48px);
  background: rgb(250 246 238 / .95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.cat-list {
  position: relative;
  list-style: none;
  padding: 0 calc(var(--gutter) - 12px);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 30px), transparent);
}
.cat-list::-webkit-scrollbar { display: none; }
.cat-list li { flex: none; display: flex; align-items: center; }
.cat-list a {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--catnav-h);
  padding: 0 12px;
  white-space: nowrap;
  font: 600 .875rem/1 var(--sans);
  letter-spacing: .02em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .2s;
}
.cat-list a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 11px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .25s var(--ease);
}
.cat-list a:hover,
.cat-list a[aria-current="true"] { color: var(--ink); }
.cat-list a:hover::after,
.cat-list a[aria-current="true"]::after { transform: scaleX(1); }
.cat-list a:focus-visible { outline-offset: -6px; }

@media (min-width: 1024px) {
  .cat-list { justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; }
  .cat-list li + li::before {
    content: "";
    width: 4px; height: 4px;
    background: var(--gold);
    transform: rotate(45deg);
    margin: 0 6px;
  }
  .cat-list a { padding: 0 14px; font-size: .9063rem; }
  .cat-list a::after { left: 14px; right: 14px; }
}

/* a folha da carta */
.carta { margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 768px) {
  .carta {
    position: relative;
    max-width: 720px;
    margin-inline: auto;
    padding: 60px clamp(36px, 6vw, 64px) 64px;
    --carta-bg: #FCF9F3;
    background: var(--carta-bg);
    border: 1px solid var(--gold);
  }
  .carta::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid var(--rule-soft);
    pointer-events: none;
  }
}
@media (min-width: 1024px) {
  .carta {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(64px, 7vw, 112px);
    padding: 72px clamp(48px, 5.6vw, 88px) 80px;
  }
  .carta::after {
    content: "";
    position: absolute;
    top: 72px; bottom: 80px; left: 50%;
    width: 1px;
    background: var(--rule-soft);
  }
  .carta-col + .carta-col .cat:first-child { margin-top: 0; }
}

/* soma-se ao scroll-padding do html (altura do cabeçalho): fica por baixo da barra de categorias */
.cat {
  scroll-margin-top: calc(var(--catnav-h) + 6px);
}
.carta-col + .carta-col,
.cat + .cat { margin-top: clamp(52px, 7vw, 72px); }
@media (min-width: 1024px) {
  .carta-col + .carta-col { margin-top: 0; }
}
.cat-head { text-align: center; margin-bottom: 20px; }
.cat-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 450 clamp(1.625rem, 1.38rem + .9vw, 2.0625rem)/1.1 var(--serif);
  letter-spacing: -.012em;
}
.cat-title::before,
.cat-title::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--rule);
  transition: background-color .4s;
}
.cat-title span { flex: 0 1 auto; }
.cat-aviso {
  margin-top: 7px;
  font: italic 400 1.0313rem/1.4 var(--serif);
  color: var(--gold-text);
}
.cat:target .cat-title::before,
.cat:target .cat-title::after { background: var(--gold-deep); }

.pratos { list-style: none; padding: 0; }
.prato { padding: 9px 0; }
/* Linha do prato: nome · pontos · preço.
   Os pontos correm ao longo da última linha; o nome e o preço têm o fundo da carta
   e tapam-nos. Assim, um nome em duas linhas continua ligado ao preço. */
.prato-linha {
  position: relative;
  padding-right: 4.6em;   /* espaço do preço mais largo (≈ 4,1em) */
  font: 400 1.125rem/1.38 var(--serif);
  color: var(--ink);
}
.prato-nome {
  position: relative;
  z-index: 1;
  padding-right: .45em;
  background: var(--carta-bg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.prato-porcao {
  margin-left: .5em;
  font: 500 .8125rem/1 var(--sans);
  letter-spacing: .03em;
  color: var(--ink-3);
  white-space: nowrap;
}
.prato-pontos {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
  white-space: nowrap;
  direction: rtl;
  color: var(--gold);
  letter-spacing: .3em;
  user-select: none;
}
.prato-pontos::before {
  content: "....................................................................................................................................................";
}
.prato-preco {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 1;
  padding-left: .45em;
  background: var(--carta-bg);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.prato-nota {
  margin-top: 2px;
  max-width: 30em;
  font: italic 400 .9844rem/1.4 var(--serif);
  color: var(--ink-3);
  text-wrap: pretty;
}
.prato-nota.is-disp { color: var(--olive); }

.cat-rodape {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-soft);
  font: 500 .9375rem/1.45 var(--sans);
  color: var(--olive);
}
.cat-rodape::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  background: var(--olive);
  transform: translateY(-.15em) rotate(45deg);
}

@media (min-width: 1024px) {
  .prato-linha { font-size: 1.1563rem; }
}

/* ==========================================================================
   Reservas e contactos
   ========================================================================== */
.contactos {
  position: relative;
  overflow: hidden;
  padding: var(--section) 0;
  background: var(--espresso) url("grain-dark.svg");
  color: var(--on-dark);
}
.contactos-grid { position: relative; z-index: 1; display: grid; gap: 64px; }

.contactos-title {
  font: 380 clamp(2.6rem, 1.5rem + 4.6vw, 5rem)/1 var(--serif);
  letter-spacing: -.025em;
}
.contactos-title em { font-style: italic; font-weight: 360; color: var(--gold-light); }
.reservas-txt {
  max-width: 30em;
  margin-top: 22px;
  font-size: 1.0938rem;
  color: var(--on-dark-2);
  text-wrap: pretty;
}
.tel-grande {
  display: inline-flex;
  align-items: flex-start;
  gap: .3em;
  margin-top: 34px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-dark);
  font: 360 clamp(2.85rem, 1.5rem + 6vw, 5.75rem)/1 var(--serif);
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  color: var(--gold-light);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s;
}
.tel-grande:hover { border-bottom-color: var(--gold-light); }
.tel-ind {
  margin-top: .32em;
  font: 500 .26em/1 var(--sans);
  letter-spacing: .06em;
  color: var(--on-dark-2);
}
.reservas-acoes { display: grid; gap: 10px; margin-top: 32px; }

.passos-title { margin: clamp(48px, 6vw, 72px) 0 4px; }
.passos { list-style: none; padding: 0; counter-reset: passo; display: grid; }
.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  padding: 14px 0;
  border-bottom: 1px solid rgb(241 232 218 / .12);
  color: var(--on-dark-2);
  font-size: 1rem;
  line-height: 1.5;
}
.passos li::before {
  content: counter(passo);
  font: italic 400 1.25rem/1.2 var(--serif);
  color: var(--gold-light);
}
@media (min-width: 768px) {
  .passos { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .passos li { grid-template-columns: 1fr; align-content: start; gap: 10px; padding: 16px 0 0; border-bottom: 0; border-top: 1px solid var(--rule-dark); }
}

.info { display: grid; gap: 48px; }
.info-bloco { padding-top: 22px; border-top: 1px solid var(--rule-dark); }
.info-title {
  margin-bottom: 18px;
  font: 600 .75rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.morada {
  display: flex;
  flex-direction: column;
  margin-bottom: 22px;
  font: normal 400 clamp(1.25rem, 1.05rem + .9vw, 1.5rem)/1.32 var(--serif);
  letter-spacing: -.005em;
}
.morada-pais { font-size: .72em; color: var(--on-dark-2); margin-top: 2px; }

.horario { width: 100%; border-collapse: collapse; }
.horario th,
.horario td {
  padding: 12px 0;
  border-bottom: 1px solid rgb(241 232 218 / .12);
  vertical-align: baseline;
}
.horario tr:first-child th,
.horario tr:first-child td { padding-top: 2px; }
.horario th { text-align: left; font: 500 1rem/1.4 var(--sans); padding-right: 16px; }
.horario td {
  text-align: right;
  font: 400 1.125rem/1.4 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
}
.periodo { display: inline-block; white-space: nowrap; }
.periodo-sep { font-style: italic; color: var(--on-dark-2); }
.encerrado { font-style: italic; color: var(--on-dark-2); }
.is-fechado th { color: var(--on-dark-2); }

@media (min-width: 560px) {
  .reservas-acoes { display: flex; flex-wrap: wrap; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .info { grid-template-columns: 1fr 1.25fr; gap: 48px; }
}
@media (min-width: 1024px) {
  .contactos-grid { grid-template-columns: 7fr 5fr; gap: clamp(64px, 7vw, 120px); align-items: start; }
  .info { padding-top: 10px; }
}
@media (max-width: 400px) {
  .horario .periodo-sep { display: block; height: 0; overflow: hidden; }
  .horario .periodo { display: block; }
}

/* ==========================================================================
   Rodapé
   ========================================================================== */
.site-footer { padding: 64px 0 calc(40px + env(safe-area-inset-bottom)); }
.footer-in { display: grid; gap: 28px; justify-items: center; text-align: center; }
.footer-mark { display: flex; align-items: flex-end; width: 100%; margin-bottom: 6px; }
.footer-mark::before,
.footer-mark::after { content: ""; flex: 1 1 0; height: 1px; margin-bottom: 5px; background: var(--rule); }
.footer-galo { flex: none; width: 46px; height: auto; aspect-ratio: 780 / 816; margin: 0 14px; fill: var(--gold); }
.footer-name { font: 450 1.4rem/1.2 var(--serif); letter-spacing: -.01em; }
.footer-addr { margin-top: 6px; font-size: .9375rem; color: var(--ink-3); }
@media (max-width: 559.98px) {
  .footer-addr .sep, .nav-panel-note .sep { display: block; height: 0; overflow: hidden; }
}
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 26px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-soft);
  text-underline-offset: 5px;
}
.footer-nav a:hover { color: var(--ink); text-decoration-color: var(--gold); }
.footer-demo {
  width: 100%;
  max-width: 44em;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
  font-size: .875rem;
  color: var(--ink-3);
}

/* ==========================================================================
   WhatsApp flutuante (alternativa discreta à chamada)
   ========================================================================== */
.wa-float {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--ivory);
  box-shadow: 0 10px 24px -10px rgb(34 23 16 / .55), inset 0 0 0 1px rgb(255 255 255 / .08);
  transition: opacity .25s, transform .25s var(--ease), visibility 0s, background-color .2s;
}
.wa-float svg { width: 24px; height: 24px; }
/* Sem JavaScript não é possível evitar que tape a ementa: fica só o WhatsApp dos contactos */
html:not(.js) .wa-float { display: none; }
.wa-float:hover { background: #4A5029; }
.wa-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
@media (min-width: 1024px) {
  .wa-float { right: 28px; bottom: 28px; width: 54px; height: 54px; }
}

/* ==========================================================================
   Revisão com o restaurante: acrescentar ?rever ao endereço
   ========================================================================== */
.rever .a-rever { outline: 1.5px dashed var(--olive); outline-offset: 8px; }
.rever .a-rever::before {
  content: "A confirmar com o restaurante";
  display: block;
  margin-bottom: 8px;
  font: 600 .6875rem/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}
.rever .cat-rodape::before { content: "A confirmar com o restaurante"; flex-basis: 100%; width: auto; height: auto; background: none; transform: none; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }
.rever .cat-rodape { flex-wrap: wrap; }

/* ==========================================================================
   Movimento: só uma entrada suave na abertura, e só se for bem-vindo
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-title > span,
  .js .hero-sub,
  .js .hero-actions,
  .js .hero-meta { animation: subir .9s var(--ease) both; }
  .js .hero-title .t2 { animation-delay: .08s; }
  .js .hero-title .t3 { animation-delay: .14s; }
  .js .hero-sub { animation-delay: .24s; }
  .js .hero-actions { animation-delay: .34s; }
  .js .hero-meta { animation-delay: .42s; }
  .js .frame-top::before, .js .frame-base::before { transform-origin: right; animation: linha 1.3s var(--ease) .1s both; }
  .js .frame-top::after, .js .frame-base::after { transform-origin: left; animation: linha 1.3s var(--ease) .1s both; }
  .js .frame-galo, .js .frame-top .kicker { animation: aparecer 1s ease .2s both; }
}
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
@keyframes linha { from { transform: scaleX(0); } }
@keyframes aparecer { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ==========================================================================
   Impressão: só a ementa e os contactos
   ========================================================================== */
@media print {
  body { background: #fff; }
  .site-header, .cat-nav, .wa-float, .skip, .hero-actions, .reservas-acoes, .info .btn, .pilar-link { display: none !important; }
  .hero-frame { min-height: 0; }
  .contactos { background: #fff; color: #000; }
  .carta { border: 0; padding: 0; }
  .carta::before, .carta::after { display: none; }
  .cat { break-inside: avoid; }
}