/* =====================================================================
   Mesa do Bairro — folha de estilos
   Cores e tipos de letra: altere só as variáveis em :root para adaptar
   a identidade visual a outro restaurante.
   ===================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}

:root {
  /* Paleta */
  --creme: #f6efe3;
  --creme-2: #efe4d1;
  --papel: #fbf8f2;
  --tinta: #2b2421;
  --tinta-suave: #5a4f48;
  --linha: #ddd0bb;
  --terracota: #a6461e;
  --terracota-escura: #873815;
  --terracota-clara: #f3dfd2;
  --azeitona: #535d2c;
  --azeitona-clara: #e4e6d2;
  --branco: #fffdf9;

  /* Tipografia */
  --fonte-titulos: "Fraunces", Georgia, "Times New Roman", serif;
  --fonte-texto: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Espaçamento e forma */
  --contentor: 1140px;
  --margem: clamp(1rem, 4vw, 2rem);
  --secao: clamp(3.5rem, 9vw, 6.5rem);
  --raio: 14px;
  --raio-peq: 8px;
  --sombra: 0 1px 2px rgba(43, 36, 33, .06), 0 8px 24px rgba(43, 36, 33, .08);
  --altura-cabecalho: 64px;
  --foco: 3px solid #1f5fae;

  /* Secção escura (galeria) e rodapé: versões claras para fundo --tinta */
  --terracota-noite: #f0a27c;   /* itálico dos títulos sobre fundo escuro */
  --noite-etiqueta: #d8c9a8;    /* sobretítulos sobre fundo escuro */
  --noite-texto: #cbbfae;       /* texto corrido sobre fundo escuro */
  --foco-noite: 3px solid #8fbcf5;  /* anel de foco visível sobre fundo escuro */

  /* Motivo de azulejo (flor do logótipo): a forma é uma máscara e a cor vem de --azulejo-cor */
  --azulejo-cor: var(--terracota);
  --azulejo-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 64 64'%3E%3Cg fill='black'%3E%3Cpath d='M32 12c4 6 4 10 0 14-4-4-4-8 0-14zM32 52c-4-6-4-10 0-14 4 4 4 8 0 14zM12 32c6-4 10-4 14 0-4 4-8 4-14 0zM52 32c-6 4-10 4-14 0 4-4 8-4 14 0z'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Ccircle cx='49' cy='15' r='3'/%3E%3Ccircle cx='15' cy='49' r='3'/%3E%3Ccircle cx='49' cy='49' r='3'/%3E%3C/g%3E%3C/svg%3E");

  /* Textura de papel: ruído muito leve sobre a página (ver body::before) */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Movimento (entrada animada da página inicial) */
  --curva-saida: cubic-bezier(.16, 1, .3, 1);
  --curva-cortina: cubic-bezier(.77, 0, .18, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-cabecalho) + 1rem); }
/* Animações: tocam sempre, mesmo com "reduzir movimento" ligado no dispositivo
   (decisão do cliente). A faixa de pratos tem botão para parar e a entrada
   salta-se com um toque. */

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }
[hidden] { display: none !important; }

/* Textura de papel: uma só camada fixa, sem mistura de cores (barata no telemóvel).
   Fica abaixo do cabeçalho, da barra de ações e da cortina, e não apanha toques. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grao); opacity: .065;
}
@media print { body::before { display: none; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--terracota-escura); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinta); }
h1, h2, h3 { font-family: var(--fonte-titulos); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; font-variation-settings: "SOFT" 50, "WONK" 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
h3 { font-size: 1.35rem; }
/* Parte do título entre *asteriscos* nos dados: itálico terracota */
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--terracota); }
p { margin: 0 0 1em; }

:focus-visible { outline: var(--foco); outline-offset: 3px; border-radius: 4px; }

.contentor { width: 100%; max-width: var(--contentor); margin-inline: auto; padding-inline: var(--margem); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--tinta); color: var(--branco); padding: .75rem 1rem; border-radius: var(--raio-peq);
}
.saltar:focus { top: 1rem; color: var(--branco); }

/* --- Faixa de demonstração ------------------------------------------ */
.faixa-demo {
  background: var(--tinta); color: #f3ebdd;
  font-size: .875rem; line-height: 1.4; text-align: center;
  padding: .5rem var(--margem);
}
.faixa-demo strong { color: #ffd9c4; font-weight: 600; }

/* --- Cabeçalho ------------------------------------------------------- */
.cabecalho {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 239, 227, .94);
  -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--linha);
}
.cabecalho .contentor { display: flex; align-items: center; gap: 1rem; min-height: var(--altura-cabecalho); }
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tinta); margin-right: auto; }
.marca svg { width: 36px; height: 36px; flex: none; }
.marca-nome { font-family: var(--fonte-titulos); font-size: 1.3rem; font-weight: 650; letter-spacing: -.01em; line-height: 1; }
.marca-tipo { display: block; font-family: var(--fonte-texto); font-size: .8125rem; white-space: nowrap; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); margin-top: .2rem; }

.nav-principal ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.nav-principal a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem;
  color: var(--tinta); text-decoration: none; font-weight: 600; border-radius: 999px;
}
.nav-principal a:hover { background: var(--creme-2); }
.nav-principal a[aria-current="page"] { color: var(--terracota-escura); box-shadow: inset 0 -2px 0 var(--terracota); border-radius: 0; }
.nav-principal .so-desktop { display: none; }
.cabecalho .botao { display: none; }
@media (min-width: 760px) { .nav-principal .so-desktop { display: list-item; } }
@media (min-width: 900px) { .cabecalho .botao { display: inline-flex; } }

/* --- Botões ---------------------------------------------------------- */
.botao {
  --bg: var(--terracota); --fg: var(--branco); --bd: var(--terracota);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.35rem;
  font: 600 1rem/1.2 var(--fonte-texto); letter-spacing: .01em;
  color: var(--fg); background: var(--bg); border: 2px solid var(--bd); border-radius: 999px;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, transform .15s;
}
.botao:hover { --bg: var(--terracota-escura); --bd: var(--terracota-escura); color: var(--fg); }
.botao:active { transform: scale(.97); }
.botao svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) {
  .botao svg { transition: transform .25s var(--curva-saida); }
  .botao:hover svg { transform: translateX(3px); }
}
.botao--contorno { --bg: transparent; --fg: var(--tinta); --bd: var(--tinta); }
.botao--contorno:hover { --bg: var(--tinta); --fg: var(--branco); --bd: var(--tinta); }
.botao--claro { --bg: var(--branco); --fg: var(--tinta); --bd: var(--branco); }
.botao--claro:hover { --bg: var(--creme-2); --bd: var(--creme-2); --fg: var(--tinta); }
.botao--vidro { --bg: rgba(255, 253, 249, .12); --fg: var(--branco); --bd: rgba(255, 253, 249, .85); }
.botao--vidro:hover { --bg: var(--branco); --fg: var(--tinta); --bd: var(--branco); }
.botao--azeitona { --bg: var(--azeitona); --bd: var(--azeitona); }
.botao--azeitona:hover { --bg: #3f4720; --bd: #3f4720; }
.botao--largo { width: 100%; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Herói ----------------------------------------------------------- */
.heroi { position: relative; isolation: isolate; color: var(--branco); background: #2b2421; overflow: hidden; }
.heroi picture, .heroi img { position: absolute; inset: 0; width: 100%; height: 100%; }
.heroi img { object-fit: cover; object-position: 60% 50%; z-index: -2; }
.heroi::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 15, 12, .15) 0%, rgba(20, 15, 12, .25) 35%, rgba(20, 15, 12, .82) 100%);
}
.heroi .contentor { min-height: max(480px, calc(100svh - 240px)); display: flex; flex-direction: column; justify-content: flex-end; padding-block: 3rem 2.5rem; }
.heroi-etiqueta { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffe2d2; margin-bottom: .75rem; }
.heroi h1 { color: var(--branco); margin-bottom: .3em; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.heroi-slogan { font-size: clamp(1.15rem, 3.2vw, 1.45rem); line-height: 1.45; max-width: 34ch; margin-bottom: 1.6rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.heroi-estado { margin: 1.25rem 0 0; font-size: .95rem; color: #f3ebdd; display: flex; align-items: center; gap: .5rem; }
@media (min-width: 900px) {
  .heroi::after { background: linear-gradient(90deg, rgba(20, 15, 12, .85) 0%, rgba(20, 15, 12, .55) 45%, rgba(20, 15, 12, .05) 75%); }
  .heroi .contentor { justify-content: center; min-height: min(80vh, 720px); }
  .heroi img { object-position: 70% 50%; }
}

.pinta { width: .6rem; height: .6rem; border-radius: 50%; background: #9aa0a6; display: inline-block; flex: none; }
.pinta--aberto { background: #7cc36e; box-shadow: 0 0 0 3px rgba(124, 195, 110, .25); }
.pinta--fechado { background: #e39a7d; }
.heroi .pinta--aberto { animation: pulsar 2.2s 3s infinite; }
@keyframes pulsar {
  0% { box-shadow: 0 0 0 0 rgba(124, 195, 110, .7); }
  70% { box-shadow: 0 0 0 9px rgba(124, 195, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 195, 110, 0); }
}

/* Palavras do título do herói: cada uma é uma "janela" por onde a palavra sobe. */
.heroi h1 .palavra { display: inline-block; vertical-align: top; padding: .12em .05em .16em; margin: -.12em -.05em -.16em; }
.heroi h1 .palavra > span { display: inline-block; }

/* --- Entrada animada (só página inicial, 1.ª visita da sessão) -------
   A classe "entrada" é posta no <html> por um pequeno script no <head> de
   index.html e retirada por site.js no fim (ou quando o visitante toca no
   ecrã / carrega numa tecla). Sem JavaScript, nada disto se aplica.
   "a-carregar" segura a animação enquanto a fotografia do herói carrega
   (no máximo 2,5 s). Tempos: cortina sobe aos 0,75 s; texto até ~3 s. */
.cortina { display: none; }
.entrada .cortina {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 200;
  background: var(--terracota); transform-origin: 50% 0; cursor: pointer;
  animation: entrada-cortina 1s .75s var(--curva-cortina) both;
}
.cortina svg { width: 68px; height: 68px; }
.entrada .cortina svg { animation: entrada-surgir .5s ease both; }
.entrada .faixa-demo,
.entrada .cabecalho { animation: entrada-descer .6s 1.4s var(--curva-saida) both; }
.entrada .heroi img { animation: entrada-zoom 2.6s .75s var(--curva-saida) both; }
.entrada .heroi-etiqueta { animation: entrada-surgir .6s 1.45s var(--curva-saida) both; }
.entrada .heroi h1 .palavra { overflow: hidden; }
.entrada .heroi h1 .palavra > span { animation: entrada-subir .9s calc(1.5s + var(--i, 0) * .12s) var(--curva-saida) both; }
.entrada .heroi-slogan { animation: entrada-surgir .7s 1.95s var(--curva-saida) both; }
.entrada .heroi .grupo-botoes { animation: entrada-surgir .7s 2.1s var(--curva-saida) both; }
.entrada .heroi-estado { animation: entrada-surgir .7s 2.25s var(--curva-saida) both; }
.entrada .barra-acoes { animation: entrada-barra .7s 2.3s var(--curva-saida) both; }
.entrada.a-carregar * { animation-play-state: paused !important; }
.entrada.a-carregar .cortina svg { animation-play-state: running !important; }

@keyframes entrada-cortina { to { transform: scaleY(0); } }
@keyframes entrada-zoom { from { transform: scale(1.25); } }
@keyframes entrada-surgir { from { opacity: 0; transform: translateY(14px); } }
@keyframes entrada-descer { from { opacity: 0; transform: translateY(-10px); } }
@keyframes entrada-subir { from { transform: translateY(115%); } }
@keyframes entrada-barra { from { transform: translateY(110%); } }

/* --- Secções --------------------------------------------------------- */
.secao { padding-block: var(--secao); }
.secao--alt { background: var(--creme-2); }
.secao-cabeca { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.secao-cabeca p { color: var(--tinta-suave); }
.sobretitulo { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azeitona); margin-bottom: .6rem; }

/* Destaques */
.destaques { display: grid; gap: 1.5rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) and (max-width: 899px) {
  .destaques { grid-template-columns: 1fr 1fr; }
  .destaques > :last-child { grid-column: 1 / -1; flex-direction: row; }
  .destaques > :last-child .cartao-img { flex: 0 0 50%; aspect-ratio: auto; min-height: 240px; }
  .destaques > :last-child .cartao-corpo { justify-content: center; }
}
@media (min-width: 900px) { .destaques { grid-template-columns: repeat(3, 1fr); } }
.cartao { background: var(--papel); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; height: 100%; }
.cartao-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--creme-2); }
.cartao-img img { width: 100%; height: 100%; object-fit: cover; }
.cartao-corpo { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.cartao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cartao h3 { margin: 0; }
.cartao p { margin: 0; color: var(--tinta-suave); }
.preco { font-family: var(--fonte-titulos); font-weight: 600; font-size: 1.2rem; color: var(--terracota-escura); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.secao-acoes { margin-top: 2rem; }
#destaques .secao-cabeca h2 { font-size: clamp(2.5rem, 10vw, 3.9rem); line-height: 1.02; }

/* Números: faixa de azulejo no topo e 3 linhas (em coluna no telemóvel, lado a lado no ecrã largo) */
.numeros { position: relative; background: var(--papel); padding-block: calc(44px + 2.25rem) 2.25rem; }
.numeros::before, .numeros::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.numeros::before {
  top: 0; height: 44px; background-color: var(--azulejo-cor); opacity: .22;
  -webkit-mask: var(--azulejo-forma) 0 0 / 44px 44px repeat; mask: var(--azulejo-forma) 0 0 / 44px 44px repeat;
}
.numeros::after { top: 44px; height: 1px; background: var(--linha); }
.numeros-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.numeros-lista li { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: .9rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--linha); }
.numeros-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.numeros-lista strong { font-family: var(--fonte-titulos); font-weight: 500; font-size: clamp(2.6rem, 12vw, 2.9rem); line-height: 1; letter-spacing: -.02em; color: var(--terracota); font-variant-numeric: lining-nums; }
.numeros-lista span { font-size: .95rem; line-height: 1.4; color: var(--tinta-suave); }
@media (min-width: 900px) {
  .numeros { padding-block: calc(44px + 3.5rem) 3.5rem; }
  .numeros-lista { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; } /* 2 a 4 colunas, conforme os dados */
  .numeros-lista li { grid-template-columns: 1fr; align-content: start; gap: .6rem; padding: 0 2rem; border-bottom: 0; border-left: 1px solid var(--linha); }
  .numeros-lista li:first-child { padding-left: 0; border-left: 0; }
  .numeros-lista strong { font-size: 4rem; }
  .numeros-lista span { font-size: 1.05rem; max-width: 22ch; }
}

/* Sobre */
.sobre { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .sobre { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }
.sobre-img { border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 4 / 3; }
.sobre-img img { width: 100%; height: 100%; object-fit: cover; }
.sobre-texto p { font-size: 1.1em; }
/* A frase grande da secção: itálico, com a parte final em terracota */
.sobre-texto h2 { font-style: italic; font-weight: 400; font-size: clamp(2.1rem, 8vw, 3.6rem); line-height: 1.05; letter-spacing: -.015em; margin-bottom: .45em; }
.sobre-texto h2 em { font-weight: 500; }
.ano { font-family: var(--fonte-titulos); font-style: italic; color: var(--azeitona); font-size: 1.15rem; }

/* Secção escura (galeria): fundo --tinta, texto claro */
.secao--noite { background: var(--tinta); color: #f3ebdd; }
.secao--noite h2 { color: var(--branco); }
.secao--noite h2 em { color: var(--terracota-noite); }
.secao--noite .sobretitulo { color: var(--noite-etiqueta); }
.secao--noite .secao-cabeca p { color: var(--noite-texto); font-size: .95rem; }
.secao--noite :focus-visible { outline: var(--foco-noite); }

/* Citação de um cliente */
.citacao-fig { margin: 0 auto; max-width: 46rem; }
.citacao .aspas { display: block; font-family: var(--fonte-titulos); font-size: 6rem; line-height: .6; height: 2.6rem; color: var(--terracota); }
.citacao blockquote { margin: 0 0 1rem; }
.citacao blockquote p { margin: 0; font-family: var(--fonte-titulos); font-style: italic; font-weight: 400; font-size: clamp(1.45rem, 5vw, 2.1rem); line-height: 1.3; }
.citacao figcaption { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.pilula-exemplo { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--terracota-clara); color: var(--terracota-escura); font-size: .6875rem; letter-spacing: .06em; vertical-align: middle; }

/* Galeria */
.galeria { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.galeria button {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: zoom-in;
  position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--creme-2);
}
@media (min-width: 900px) { .galeria button { aspect-ratio: 4 / 3; } }
.galeria button:focus-visible { outline: var(--foco-noite); outline-offset: 3px; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.galeria button:hover img { transform: scale(1.04); }
.galeria .legenda {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem .75rem .6rem;
  background: linear-gradient(transparent, rgba(20, 15, 12, .7)); color: var(--branco); font-weight: 600; font-size: .95rem;
}

/* Visite-nos */
.visita { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .visita { grid-template-columns: 1.1fr 1fr 1fr; } }
.painel { background: var(--papel); border-radius: var(--raio); padding: 1.5rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .9rem; }
.painel h3 { margin: 0; display: flex; align-items: center; gap: .6rem; }
.painel h3 svg { width: 24px; height: 24px; color: var(--terracota); flex: none; }
.painel p { margin: 0; }
.painel .nota { font-size: .9rem; color: var(--tinta-suave); }
.estado { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }

.horario { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horario th, .horario td { padding: .45rem 0; border-bottom: 1px dashed var(--linha); text-align: left; vertical-align: top; }
.horario th { font-weight: 600; padding-right: 1rem; }
.horario td { text-align: right; color: var(--tinta-suave); }
.horario tr.hoje th, .horario tr.hoje td { color: var(--terracota-escura); font-weight: 700; }
.horario tr:last-child th, .horario tr:last-child td { border-bottom: 0; }
.morada { font-style: normal; font-size: 1.1rem; line-height: 1.45; }
.etiqueta-exemplo { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azeitona); background: var(--azeitona-clara); padding: .15rem .5rem; border-radius: 999px; vertical-align: middle; }
.lista-contactos { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.lista-contactos .botao { width: 100%; justify-content: flex-start; }

/* Chamada para reserva */
.chamada { background: var(--azeitona); color: #f6f3e6; border-radius: var(--raio); padding: clamp(1.75rem, 5vw, 3rem); display: grid; gap: 1.25rem; align-items: center; }
.chamada h2 { color: #fffdf6; margin-bottom: .25em; }
.chamada p { margin: 0; color: #eceadb; }
@media (min-width: 900px) { .chamada { grid-template-columns: 1fr auto; } }

/* --- Ementa ---------------------------------------------------------- */
.ementa-topo { padding-block: clamp(2.5rem, 7vw, 4.5rem) 1.5rem; }
.ementa-topo p { color: var(--tinta-suave); max-width: 42rem; }
.aviso-exemplo {
  display: flex; gap: .75rem; align-items: flex-start; background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--azeitona);
  border-radius: var(--raio-peq); padding: .85rem 1rem; font-size: .95rem; color: var(--tinta); max-width: 42rem;
}
.aviso-exemplo svg { width: 22px; height: 22px; flex: none; color: var(--azeitona); margin-top: .1rem; }

.nav-categorias {
  position: sticky; top: var(--altura-cabecalho); z-index: 30;
  background: rgba(246, 239, 227, .96); border-bottom: 1px solid var(--linha);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nav-categorias ul {
  list-style: none; margin: 0 auto; padding: .6rem var(--margem); max-width: var(--contentor);
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.nav-categorias ul::-webkit-scrollbar { display: none; }
.nav-categorias a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.05rem; white-space: nowrap; scroll-snap-align: start;
  border: 1.5px solid var(--linha); border-radius: 999px; background: var(--papel);
  color: var(--tinta); text-decoration: none; font-weight: 600;
}
.nav-categorias a:hover { border-color: var(--tinta); }
.nav-categorias a[aria-current="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }

.ementa { padding-block: 1rem var(--secao); }
.categoria { padding-top: 2.25rem; scroll-margin-top: 40px; }
.categoria h2 { display: flex; align-items: center; gap: 1rem; font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
.categoria h2::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.artigos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .artigos { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; } }
.artigo { padding: 1.1rem 0; border-bottom: 1px solid var(--linha); }
.artigo-topo { display: flex; align-items: baseline; gap: .75rem; }
.artigo-nome { font-family: var(--fonte-titulos); font-size: 1.22rem; font-weight: 600; margin: 0; line-height: 1.3; }
.artigo-linha { flex: 1; border-bottom: 2px dotted #c9b9a0; transform: translateY(-.3em); min-width: 1rem; }
.artigo p { margin: .3rem 0 0; color: var(--tinta-suave); max-width: 38rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; padding: 0; list-style: none; }
.etiqueta { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; padding: .15rem .55rem; border-radius: 999px; background: var(--creme-2); color: var(--tinta-suave); }
.etiqueta--vegetariano { background: var(--azeitona-clara); color: #3d4520; }
.etiqueta--da-casa { background: var(--terracota-clara); color: var(--terracota-escura); }
.notas-ementa { margin-top: 2.5rem; display: grid; gap: .5rem; font-size: .95rem; color: var(--tinta-suave); }
.notas-ementa p { margin: 0; }

/* --- Movimento ao fazer scroll ---------------------------------------
   site.js põe "anima" no <html> (só se o navegador tiver IntersectionObserver)
   e marca os elementos com ".rev" (sobe e aparece) ou ".rev-titulo" (título que
   sobe palavra a palavra). Quando entram no ecrã pela 1.ª vez ganham ".visivel";
   "--n" é a ordem de chegada (escalonamento). Sem JavaScript, sem "anima" ou ao
   imprimir, nada fica escondido. Só se anima transform, opacity e clip-path. */
.rev-titulo .palavra { display: inline-block; vertical-align: top; overflow: hidden; padding: .12em .1em .16em; margin: -.12em -.1em -.16em; } /* folga lateral: o itálico sai um pouco da caixa */
.rev-titulo .palavra > span { display: inline-block; }
.cartao-img img { transition: transform .6s var(--curva-saida); }
@media (hover: hover) { .cartao:hover .cartao-img img { transform: scale(1.05); } }

/* "screen": ao imprimir, nada fica escondido por não ter sido visto no ecrã. */
@media screen {
  .anima .rev { transition: opacity .7s ease, transform .8s var(--curva-saida); transition-delay: calc(var(--n, 0) * 90ms); }
  .anima .rev:not(.visivel) { opacity: 0; transform: translateY(22px); }
  .anima .rev-titulo .palavra > span { transition: transform .9s var(--curva-saida) calc(var(--n, 0) * 90ms + var(--i, 0) * 80ms); }
  .anima .rev-titulo:not(.visivel) .palavra > span { transform: translateY(115%); }
  /* Fotografia do prato: abre de baixo para cima, como um estore */
  .anima .cartao.rev .cartao-img { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--curva-saida) calc(var(--n, 0) * 90ms + 150ms); }
  .anima .cartao.rev:not(.visivel) .cartao-img { clip-path: inset(100% 0 0 0); }
  /* Marcador do dia de hoje no horário: cresce quando o painel aparece */
  .anima .painel.rev .horario tr.hoje th::before { transform-origin: 50% 0; transition: transform .6s var(--curva-saida) .5s; }
  .anima .painel.rev:not(.visivel) .horario tr.hoje th::before { transform: scaleY(0); }
}
.horario tr.hoje th { position: relative; }
.horario tr.hoje th::before { content: ""; position: absolute; left: -.8rem; top: .45rem; bottom: .45rem; width: 4px; border-radius: 2px; background: var(--terracota); }

/* Faixa de pratos: pista duplicada que desliza metade da sua largura em ciclo */
.faixa-pratos { position: relative; overflow: hidden; background: var(--papel); border-block: 1px solid var(--linha); padding-block: clamp(.75rem, 2.5vw, 1.5rem); }
.faixa-pista { display: flex; width: max-content; animation: faixa-andar 60s linear infinite; }
.faixa-pratos:hover .faixa-pista,
.faixa-pratos:focus-within .faixa-pista,
.faixa-pratos.parada .faixa-pista { animation-play-state: paused; }
/* Botão para parar/retomar a faixa (movimento contínuo tem de poder parar: WCAG 2.2.2) */
.faixa-pausa {
  position: absolute; right: var(--margem); top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--linha); border-radius: 50%; background: var(--papel); color: var(--tinta);
  cursor: pointer; box-shadow: var(--sombra);
}
.faixa-pausa:hover { background: var(--creme-2); }
.faixa-pausa svg { width: 18px; height: 18px; }
.faixa-pausa .ic-retomar, .faixa-pratos.parada .faixa-pausa .ic-parar { display: none; }
.faixa-pratos.parada .faixa-pausa .ic-retomar { display: block; }.faixa-grupo { display: flex; flex: none; }
.faixa-grupo > span {
  font-family: var(--fonte-titulos); font-style: italic; font-weight: 500; line-height: 1.25; white-space: nowrap;
  font-size: clamp(2rem, 6vw, 3.75rem); color: var(--terracota); padding-inline: clamp(1rem, 3vw, 2rem);
}
.faixa-grupo > span::after { content: "·"; font-style: normal; color: var(--azeitona); margin-left: clamp(2rem, 6vw, 4rem); }
@keyframes faixa-andar { to { transform: translateX(-50%); } }

/* Sobre: a fotografia é 20% mais alta que a moldura e desliza mais devagar que a página */
.sobre-img { position: relative; }
.sobre-img img { position: absolute; top: -10%; left: 0; height: 120%; }
/* A moldura corta (overflow), por isso o "view()" é medido nela e a imagem usa essa linha do tempo. */
@supports (animation-timeline: view()) {
  .sobre-img { view-timeline: --sobre-vista block; }
  .sobre-img img { animation: sobre-paralaxe linear both; animation-timeline: --sobre-vista; animation-range: cover; }
}
@keyframes sobre-paralaxe { from { transform: translateY(-7%); } to { transform: translateY(7%); } }

/* Galeria ampliada: enquanto a fotografia voa desde a miniatura, não é cortada pela caixa */
.dialogo-galeria.a-abrir, .dialogo-galeria.a-abrir .dialogo-corpo { overflow: visible; }

/* Ementa: pílula que desliza por trás da categoria ativa (posicionada por site.js) */
.nav-categorias ul { position: relative; }
.nav-categorias ul::before {
  content: ""; position: absolute; left: 0; top: 0; width: var(--pil-l, 0); height: var(--pil-a, 0);
  transform: translate(var(--pil-x, 0), var(--pil-y, 0)); background: var(--tinta); border-radius: 999px; opacity: 0; pointer-events: none;
}
.nav-categorias ul.tem-pilula::before { opacity: 1; }
.nav-categorias ul.desliza::before { transition: transform .45s var(--curva-saida), width .45s var(--curva-saida); }
.nav-categorias ul.tem-pilula a { position: relative; z-index: 1; background: transparent; transition: color .25s; }
.nav-categorias ul.tem-pilula a[aria-current="true"] { background: transparent; border-color: transparent; }

/* --- Rodapé ---------------------------------------------------------- */
.rodape { background: var(--tinta); color: #e8ded0; padding-block: 3rem 2rem; font-size: .975rem; }
.rodape a { color: #fff3e6; }
.rodape a:hover { color: #ffd9c4; }
.rodape :focus-visible { outline: var(--foco-noite); }
.rodape-nome { font-family: var(--fonte-titulos); font-weight: 600; font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; color: #fffaf1; margin: 0 0 .5rem; }
.rodape-nome em { font-style: italic; font-weight: 400; color: var(--terracota-noite); }
.rodape-tipo { color: var(--noite-texto); margin: 0 0 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .15); }
@media (min-width: 900px) { .rodape-nome { font-size: 4rem; } }
.rodape-grelha { display: grid; gap: 2rem; }
@media (min-width: 900px) { .rodape-grelha { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape h2 { font-size: 1.1rem; color: #fffaf2; margin-bottom: .75rem; font-family: var(--fonte-texto); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.rodape ul a { display: inline-flex; align-items: center; min-height: 40px; }
.rodape .marca { color: #fffaf2; margin-bottom: .75rem; }
.rodape .marca-tipo { color: #cbbfae; }
.rodape-demo { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .9rem; color: #cbbfae; display: grid; gap: .4rem; }
.rodape-demo strong { color: #ffd9c4; }

/* --- Barra de ações (telemóvel) -------------------------------------- */
.barra-acoes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: .5rem;
  padding: .6rem var(--margem) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(251, 248, 242, .97); border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 20px rgba(43, 36, 33, .08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.barra-acoes .botao { min-height: 48px; padding: .5rem .6rem; font-size: .95rem; gap: .4rem; }
.barra-acoes .botao svg { width: 18px; height: 18px; }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .barra-acoes { display: none; } body { padding-bottom: 0; } }

/* --- Diálogos -------------------------------------------------------- */
dialog {
  width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  padding: 0; border: 0; border-radius: var(--raio); background: var(--papel); color: var(--tinta);
  box-shadow: 0 24px 60px rgba(20, 15, 12, .35);
}
dialog::backdrop { background: rgba(20, 15, 12, .6); }
.dialogo-corpo { padding: 1.5rem 1.5rem 1.75rem; overflow-y: auto; max-height: calc(100dvh - 2rem); }
.dialogo-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.dialogo-cabeca h2 { font-size: 1.55rem; margin: 0; }
.fechar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linha); background: var(--branco);
  display: inline-grid; place-items: center; cursor: pointer; color: var(--tinta); margin: -.35rem -.35rem 0 0;
}
.fechar:hover { border-color: var(--tinta); }
.fechar svg { width: 20px; height: 20px; }
.dialogo-demo-selo { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azeitona); margin-bottom: .5rem; }
.caixa-explica { background: var(--creme); border-radius: var(--raio-peq); padding: 1rem 1.1rem; margin: 1rem 0; }
.caixa-explica h3 { font-family: var(--fonte-texto); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .35rem; color: var(--tinta-suave); }
.caixa-explica p { margin: 0; }
.caixa-explica code { font-size: .9em; background: var(--branco); padding: .05rem .35rem; border-radius: 4px; overflow-wrap: anywhere; }

/* Formulário de reserva */
.formulario { display: grid; gap: 1rem; }
.campos-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 440px) { .campos-2 { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 600; font-size: .95rem; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem; color: var(--tinta); width: 100%;
  min-height: 48px; padding: .6rem .8rem; border: 1.5px solid #bcae97; border-radius: var(--raio-peq); background: var(--branco);
}
.campo textarea { min-height: 88px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: var(--foco); outline-offset: 1px; border-color: #1f5fae; }
.campo .ajuda { font-size: .875rem; color: var(--tinta-suave); }
.campo [aria-invalid="true"] { border-color: #b3261e; }
.erro { color: #9b1c14; font-size: .9rem; font-weight: 600; }
.nota-confirmacao { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; background: var(--terracota-clara); color: #5e2a12; border-radius: var(--raio-peq); padding: .75rem .9rem; }
.nota-confirmacao svg { width: 20px; height: 20px; flex: none; margin-top: .15rem; }
.mensagem-previa { white-space: pre-wrap; font-family: var(--fonte-texto); background: var(--branco); border: 1px dashed #bcae97; border-radius: var(--raio-peq); padding: .9rem 1rem; margin: 0; font-size: .95rem; }

/* Galeria ampliada */
.dialogo-galeria { width: min(1100px, calc(100vw - 1rem)); background: #1b1613; color: #f3ebdd; }
.dialogo-galeria .dialogo-corpo { padding: .75rem; }
.dialogo-galeria figure { margin: 0; }
.dialogo-galeria img { width: 100%; max-height: calc(100dvh - 9rem); object-fit: contain; border-radius: var(--raio-peq); background: #000; }
.dialogo-galeria figcaption { padding: .75rem .25rem .25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dialogo-galeria .controlos { display: flex; gap: .5rem; }
.dialogo-galeria .fechar { background: transparent; color: #f3ebdd; border-color: rgba(255, 255, 255, .35); margin: 0; }
.dialogo-galeria .fechar:hover { border-color: #fff; }

/* --- Créditos e páginas simples ------------------------------------- */
.pagina-simples { padding-block: clamp(2.5rem, 7vw, 4.5rem) var(--secao); max-width: 52rem; }
.lista-creditos { padding-left: 1.2rem; display: grid; gap: .8rem; }
.lista-creditos li { padding-left: .25rem; }

.sem-js { background: #fff3cd; color: #4d3800; padding: .75rem var(--margem); text-align: center; }