/* cinto de segurança: os objetos do hero são absolutos e passam das
   margens; o .hero corta-os, mas isto garante que nunca há scroll lateral */
html, body { overflow-x: hidden; }

/* =============================================================
   GALINHA DO DINIZ · landing page
   Mobile-first. Todos os valores vêm de tokens.css.
   ============================================================= */

.env { width: 100%; max-width: 560px; margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 900px) { .env { max-width: var(--max-w); padding-inline: var(--s-6); } }

.salta {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 200;
  background: var(--carvao-950); color: #FFF; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-full); text-decoration: none; translate: 0 -160%;
}
.salta:focus { translate: 0 0; }

h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.8rem);
  text-transform: uppercase; letter-spacing: var(--track-titulo);
  margin: 0 0 var(--s-3);
}
h3 { font-size: var(--t-xl); text-transform: uppercase; margin: 0; }
.lede { font-size: var(--t-lg); color: var(--texto-suave); margin: 0 0 var(--s-6); }
/* O header é fixo e tem 61 a 62px: sem isto, carregar em «Horários» no
   header deixava o título da secção escondido por baixo dele. */
.sec, .hero { scroll-margin-top: 76px; }

/* Viúvas: o browser faz o que o HTML não consegue. «pretty» evita deixar
   uma palavra sozinha na última linha de um parágrafo, e «balance»
   distribui as linhas de um título. Trabalha também no texto que o JS
   escreve, onde não há como pôr espaços inquebráveis à mão. */
p, li, dd, figcaption, small, .lede, .morada { text-wrap: pretty; }
h1, h2, h3, h4, .lema { text-wrap: balance; }
.sec { padding-block: var(--seccao); }
/* Só UM nome para o fundo alternado, havia .sec--creme e .sec--alt com a
   mesma declaração, e por isso o menu e os horários acabaram com o mesmo
   tom: as duas secções encostavam uma à outra sem fronteira visível e os
   96px+96px de respiro liam-se como um buraco. A alternância é:
   menu (creme) · horários (creme claro) · história (creme) · CTA (laranja). */
.sec--alt { background: var(--fundo-alt); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--alvo-cta); padding: var(--s-3) var(--s-5);
  font-family: var(--fonte-titulo); font-weight: var(--peso-forte);
  font-size: var(--t-lg); text-transform: uppercase; letter-spacing: .02em;
  border-radius: var(--r-full); border: 2px solid transparent;
  /* background: none, o «Como chegar» é um <button> (abre o mapa dentro
     do cartão) e sem isto apanhava o cinzento do browser */
  background: none; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-entra), background var(--dur-rapida) var(--ease-entra);
}
.btn:active { transform: translateY(1px); }
.btn--branco { background: #FFF; color: var(--cartaz-700); }
.btn--branco:hover { background: var(--creme); }
.btn--contorno { border-color: #FFF; color: #FFF; }
.btn--contorno:hover { background: rgb(255 255 255 / .16); }
/* Fora do hero, o primário é a laranja da marca, não há blocos escuros
   na página, por isso também não há botões pretos. */
.btn--marca { background: var(--marca); color: var(--sobre-marca); }
.btn--marca:hover { background: var(--marca-hover); }
.btn--contorno-esc { border-color: var(--carvao-700); color: var(--carvao-900); }
.btn--contorno-esc:hover { background: rgb(68 61 51 / .08); }

/* O CTA final tem fundo laranja: aqui o primário volta a ser branco,
   como no hero, laranja sobre laranja não se vê. */
.cta-final .btn--marca { background: #FFF; color: var(--cartaz-700); }
.cta-final .btn--marca:hover { background: var(--creme); }
.cta-final .btn--contorno-esc { border-color: #FFF; color: #FFF; }
.cta-final .btn--contorno-esc:hover { background: rgb(255 255 255 / .18); }
.acoes { display: grid; gap: var(--s-3); width: 100%; max-width: 360px; }
.acoes--centro { margin-inline: auto; }
@media (min-width: 640px) { .acoes { grid-auto-flow: column; width: auto; max-width: none; justify-content: center; } }

/* ---------- header fixo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
  box-shadow: var(--sombra-sm);
  animation: topo-desce var(--dur-media) var(--ease-entra);
}
@keyframes topo-desce { from { translate: 0 -100%; } to { translate: 0 0; } }
.topo[hidden] { display: none; }
.topo-in { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-2); }
.topo-marca { flex: none; line-height: 0; }
.topo-marca img { width: 86px; height: auto; }
.topo-nav { display: flex; gap: var(--s-3); margin-left: auto; }
.topo-nav a {
  font-family: var(--fonte-titulo); font-weight: var(--peso-semi); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  color: var(--texto); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--alvo-toque); padding-inline: 2px;
}
.topo-nav a:hover { color: var(--marca-texto); }
.topo-ligar {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--alvo-toque); min-width: var(--alvo-toque); padding-inline: var(--s-3);
  background: var(--marca); color: var(--sobre-marca); border-radius: var(--r-full);
  font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--t-base);
  text-transform: uppercase; text-decoration: none;
}
/* 22px: o traço fica com 1,9 de espessura a esse tamanho, que é o mínimo
   para se ver sobre o laranja. Abaixo dos 560px o ícone está sozinho,
   a palavra «Ligar» não cabe, por isso tem de se ler por si. */
.topo-ligar svg { width: 22px; height: 22px; flex: none; }
.so-largo { display: none; }
@media (min-width: 560px) {
  .topo-marca img { width: 110px; }
  .topo-nav { gap: var(--s-5); }
  .so-largo { display: inline; }
  .topo-ligar { padding-inline: var(--s-5); }
}

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Gradiente a sério, não um laranja chapado: um foco quente em cima à
     esquerda e uma descida para laranja queimada no canto oposto. Dá
     profundidade sem sair da família cartaz. */
  background:
    radial-gradient(75% 60% at 28% 18%, #FFA95E 0%, rgb(255 169 94 / 0) 62%),
    radial-gradient(90% 70% at 88% 92%, #C94E17 0%, rgb(201 78 23 / 0) 55%),
    linear-gradient(158deg, #F98139 0%, #F16A22 52%, #D9551A 100%);
  /* A proporção da prancheta, mas NUNCA mais alta que o ecrã: em
     telemóvel tudo (logótipo, estado, lema e botão) tem de estar
     visível sem fazer scroll. A largura tem de ser explícita, senão o
     browser encolhe-a para manter o rácio dentro do max-height. */
  width: 100%;
  aspect-ratio: 693 / 1191;
  max-height: 100svh;
}
.obj {
  position: absolute; z-index: 1; pointer-events: none;
  left: var(--cx); top: var(--cy); width: var(--w);
  translate: -50% -50%; rotate: var(--r);
  opacity: 0; animation: obj-entra 950ms var(--ease-entra) var(--d, 0ms) both;
}
.obj img, .obj picture { width: 100%; display: block; }
@keyframes obj-entra {
  from { opacity: 0; translate: calc(-50% + var(--de)) -50%; }
  to   { opacity: 1; translate: -50% -50%; }
}
.o-bat1 { --cx:  -6.68%; --cy: 45.19%; --w: 101.00%; --r: -36.00deg; --de: -18%; --d:   0ms; }
.o-bat2 { --cx: 102.82%; --cy: 37.51%; --w:  95.50%; --r: 116.00deg; --de:  14%; --d:  90ms; }
.o-burg { --cx:  12.94%; --cy: 12.84%; --w:  72.50%; --r:  17.50deg; --de: -26%; --d: 220ms; }
.o-pern { --cx:  89.70%; --cy: 11.34%; --w:  52.50%; --r:  27.70deg; --de:  26%; --d: 310ms; }
.o-peit { --cx: 103.64%; --cy: 54.18%; --w:  72.50%; --r:  51.00deg; --de:  26%; --d: 400ms; }
.o-pali { --cx:   4.78%; --cy: 61.84%; --w:  59.50%; --r: -16.00deg; --de: -26%; --d: 490ms; }

/* Sem drop-shadow no logótipo nem text-shadow no lema: o cliente quer o
   branco assente no laranja, sem halo. */
.marca {
  position: absolute; z-index: 3; left: 50%; top: 28%; width: 64%;
  translate: -50% -50%;
  animation: marca-entra 800ms var(--ease-entra) 560ms both;
}
@keyframes marca-entra { from { opacity: 0; scale: .88; } to { opacity: 1; scale: 1; } }

.baixo {
  position: absolute; z-index: 3; left: 0; right: 0; top: 52%;
  display: grid; gap: var(--s-4); justify-items: center; text-align: center;
  padding-inline: var(--gutter);
  animation: sobe 700ms var(--ease-entra) 700ms both;
}

/* Abaixo dos 740px o logótipo e o texto deixam de estar em posições
   absolutas e passam a empilhar-se no meio do hero. Com percentagens, a
   320px o botão caía 39px fora da caixa e era cortado pelo overflow. Assim
   o hero nunca pode ser mais baixo do que aquilo que tem lá dentro. */
@media (max-width: 739px) {
  .hero {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: var(--s-5);
    padding: var(--s-7) 0 var(--s-6);
    /* a proporção da prancheta deixa de ser imposta e passa a ser um
       mínimo: assim o hero pode crescer quando o conteúdo não cabe, que
       era o que falhava a 320px */
    aspect-ratio: auto; height: auto;
    min-height: min(171.86vw, 100svh);
  }
  .marca { position: static; translate: none; width: min(64%, 260px); }
  .baixo { position: static; width: 100%; top: auto; }
}
@keyframes sobe { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0; } }

.lema {
  font-family: var(--fonte-titulo); font-weight: var(--peso-forte);
  font-size: clamp(1.6rem, 9.1vw, 2.9rem);
  line-height: 1.08; text-transform: uppercase; color: #FFF;
  margin: 0; max-width: 15ch;
}
.lema em { font-style: normal; display: block; font-size: .6em; font-weight: var(--peso-semi);
  opacity: .85; margin-top: .35em; line-height: 1.1; }

/* A composição larga entra aos 740px, não aos 900. Entre os dois, a
   prancheta vertical esticava: a 884px o logótipo chegava aos 566px de
   largura e entrava por cima das caixas de estado. */
@media (min-width: 740px) {
  /* Altura com chão: a 53vw o hero ficava com 395px a 740 e o bloco de
     texto não deixava espaço nenhum para o logótipo. */
  .hero { width: 100%; aspect-ratio: auto; max-height: none;
          height: clamp(560px, 53.333vw, 880px); }
  .o-bat1 { --cx:  20.28%; --cy: 40.09%; --w: 41.50%; --r: -68.00deg; --de: -14%; }
  .o-bat2 { --cx:  83.30%; --cy: 39.71%; --w: 39.50%; --r: 150.00deg; --de:  14%; }
  .o-burg { --cx:  23.15%; --cy: 38.54%; --w: 32.30%; --r:  17.50deg; --de: -20%; }
  .o-pern { --cx:  85.81%; --cy: 34.15%; --w: 22.50%; --r: 127.00deg; --de:  20%; }
  .o-peit { --cx:  81.39%; --cy: 68.65%; --w: 29.00%; --r:  67.00deg; --de:  20%; }
  .o-pali { --cx:  19.18%; --cy: 70.84%; --w: 24.50%; --r:   1.00deg; --de: -20%; }
  /* O logótipo passa a ser medido pela ALTURA do hero, não pela largura.
     Medido pela largura crescia mais depressa do que o espaço disponível e,
     a 768px, a barra de estado passava por cima do «DO DINIZ». A 1440px dá
     353px, praticamente o mesmo que os 356px de antes. */
  .marca  { left: 50%; top: 31%; height: 46%; width: auto; }
  .baixo  { top: auto; bottom: 5%; gap: var(--s-3); }
  .lema   { font-size: clamp(1.9rem, 3.05vw, 3rem); max-width: 20ch; }
}

/* ---------- etiquetas de estado ---------- */
/* Duas no hero: o restaurante e as roulotes. Quem chega quer saber se
   pode ir agora, e são coisas com horários completamente diferentes. */
/* Cada etiqueta numa só linha. Sem largura fixa: a caixa cresce com o
   texto, e nos ecrãs estreitos o lp.js encolhe a letra até caber. */
.estados {
  display: grid; gap: var(--s-2); max-width: 100%; min-width: 0;
  grid-template-columns: minmax(0, max-content);
}
@media (min-width: 680px) {
  .estados { grid-template-columns: none; grid-auto-columns: minmax(0, max-content); grid-auto-flow: column; }
}
/* minmax(0, …) também na coluna do .baixo: sem ele a coluna crescia
   até ao texto inteiro e a caixa saía do ecrã a 320px. */
.baixo { grid-template-columns: minmax(0, 1fr); }
.estados .estado { white-space: nowrap; min-width: 0; }

.estado {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: var(--peso-semi);
  color: #FFF; background: rgb(16 13 10 / .38);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-full); margin: 0;
}
.estado b {
  font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: 1em;
  text-transform: uppercase; letter-spacing: var(--track-etiqueta);
}
.estado .txt { opacity: .95; }
.estado .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--carvao-300); flex: none; }
.estado[data-aberto="sim"] .ponto { background: #7BE8A6; }
.estado[data-aberto="nao"] .ponto { background: #F0A28A; }

/* ---------- menu ---------- */
.destaque {
  /* overflow visível, para a bandeja poder sair do painel. Os raios vão
     num ::before, que se recorta a si próprio com o mesmo raio. */
  position: relative; overflow: visible; border-radius: var(--r-lg);
  margin-block: var(--s-6); padding: var(--s-6) var(--s-5);
  color: #FFF; display: grid; gap: var(--s-4);
}
.destaque::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden;
  background:
    repeating-conic-gradient(from 0deg at 50% 58%, var(--raios) 0deg 6deg, transparent 6deg 17deg),
    radial-gradient(90% 80% at 50% 45%, var(--cartaz-400), var(--cartaz-500) 70%);
}
.destaque > * { position: relative; z-index: 1; }
.destaque img {
  /* justify-self em vez de margin:auto, margens automáticas não centram
     um elemento mais largo que o contentor, encostam-no à esquerda */
  width: 124%; max-width: 440px; justify-self: center;
  margin-top: calc(-1 * var(--s-6)); margin-bottom: calc(-1 * var(--s-3));
  filter: drop-shadow(0 18px 26px rgb(90 36 4 / .38));
}
.destaque .sobre { font-family: var(--fonte-titulo); font-weight: var(--peso-semi); font-size: var(--t-xl);
  text-transform: uppercase; letter-spacing: .04em; margin: 0; }
/* O título é a peça da secção: tem de pesar. Antes ficava do tamanho dos
   preços e lia-se tímido ao lado da bandeja. */
.destaque h3 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.2rem); line-height: .95;
  letter-spacing: -.015em; white-space: nowrap; }
.opcoes { margin: var(--s-3) 0 0; display: grid; gap: var(--s-3); }
.opcoes > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  border-top: 2px solid rgb(255 255 255 / .45); padding-top: var(--s-2); }
.opcoes dt { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--t-xl); text-transform: uppercase; }
/* «para 2 pessoas» vai à frente do nome, não por baixo: é a primeira
   pergunta de quem escolhe entre uma galinha e meia. Fica em corpo
   regular e mais pequeno, para não disputar com o nome. */
.opcoes dt .quantos { font-family: var(--fonte-corpo); font-size: .6em;
  font-weight: var(--peso-normal); text-transform: none; letter-spacing: 0;
  opacity: .92; margin-left: .3em; white-space: nowrap; }
.opcoes dt .comp { display: block; font-family: var(--fonte-corpo); font-size: var(--t-base);
  font-weight: var(--peso-semi); text-transform: none; margin-top: .15em; }
.opcoes dd { margin: 0; font-family: var(--fonte-titulo); font-weight: var(--peso-forte);
  font-size: var(--t-2xl); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nota-peq { font-size: var(--t-sm); font-weight: var(--peso-semi); margin: 0; }
/* o selo passou para o fim do painel: fecha o bloco em vez de empurrar o título */
.destaque .selo-ta { margin-top: var(--s-2); }
@media (min-width: 860px) {
  .destaque { grid-template-columns: 1fr 1fr; gap: var(--s-7); padding: var(--s-7); align-items: center; }
  .destaque img {
    width: 130%; max-width: none; justify-self: start;
    margin: 0 0 0 calc(-1 * var(--s-9));   /* sai mais pela esquerda do painel */
  }
}

.grupo { padding-top: var(--s-6); }
.grupo > h3 { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.grupo > h3::after { content: ""; flex: 1; height: 2px; background: var(--borda); }
.nota-grupo { color: var(--texto-suave); font-size: var(--t-sm); margin: 0 0 var(--s-2); }

.pratos { list-style: none; margin: 0; padding: 0; }
.prato { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s-3);
  align-items: start; padding-block: var(--s-4); border-bottom: 1px solid var(--borda); }
.pratos.simples .prato { grid-template-columns: 1fr auto; }
.mini { width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--carvao-100); border: 1px solid var(--borda); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.corpo b { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--t-lg);
  text-transform: uppercase; line-height: 1.1; display: block; }
.corpo small { display: block; font-size: var(--t-sm); color: var(--texto-suave); margin-top: var(--s-1); max-width: 52ch; }
.preco { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--t-xl);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 860px) {
  .pratos { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
}

.resto[hidden] { display: none; }
.ver-mais {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; min-height: var(--alvo-cta); margin-top: var(--s-5);
  font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--t-lg);
  text-transform: uppercase; letter-spacing: .02em;
  background: transparent; color: var(--texto); cursor: pointer;
  border: 2px solid var(--borda-forte); border-radius: var(--r-full);
}
.ver-mais:hover { background: var(--superficie); }
.ver-mais::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  translate: 0 -2px; rotate: 45deg;
  transition: rotate var(--dur-media) var(--ease-entra);
}
.ver-mais[aria-expanded="true"]::after { translate: 0 1px; rotate: -135deg; }
@media (min-width: 860px) { .ver-mais { display: none; } }

.rodape-nota { font-size: var(--t-xs); color: var(--texto-fraco); margin: var(--s-6) 0 0; }

/* ---------- ícone de take-away ---------- */
.ta { display: inline-flex; align-items: center; vertical-align: -.15em; margin-left: .4em; }
.ta svg { width: 1.05em; height: 1.05em; color: var(--marca-texto); }
.corpo b .ta svg { width: .95em; height: .95em; }
/* no painel laranja do destaque o ícone tem de ser branco */
.destaque .ta svg { color: #FFF; }
.selo-ta {
  /* à largura da coluna, alinhado com a régua do título e com as linhas
     de preço, uma pastilha solta a meio partia o alinhamento vertical */
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  background: rgb(16 13 10 / .3); padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full); margin: 0; width: fit-content;
}
.selo-ta .ta { margin: 0; }
.selo-ta .ta svg { width: 17px; height: 17px; }

.legenda-ta {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 4px solid var(--marca); border-radius: var(--r-md);
  padding: var(--s-4); margin: 0 0 var(--s-2);
  font-size: var(--t-sm); color: var(--texto-suave);
  /* à largura do painel do destaque que vem a seguir, o max-width de
     65ch do p global encolhia-a e desalinhava os dois blocos */
  max-width: none;
}
.legenda-ta .ta { margin: 0; flex: none; }
/* a CAIXA ocupa a largura toda, para alinhar com o painel do destaque,
   mas o TEXTO mantém a medida legível, a 1440px seriam 110 caracteres
   numa linha só */
.legenda-ta > span:last-child { max-width: var(--medida); }
.legenda-ta .ta svg { width: 26px; height: 26px; }

/* ---------- menu das roulotes ----------
   Tem de se distinguir do menu do restaurante: é outro sítio, outro
   serviço e outro preço. Painel próprio, em creme escuro e com o
   símbolo de take-away no topo. */
.roulotes-menu {
  margin-top: var(--s-7); padding: var(--s-5);
  background: var(--creme-escuro);
  border: 2px dashed var(--cartaz-400);
  border-radius: var(--r-lg);
}
.roulotes-menu > h3 { margin-bottom: var(--s-2); }
.roulotes-menu > h3::after { content: none; }
.sobre-rou {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  background: var(--cartaz-500); color: #FFF;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-full); margin: 0 0 var(--s-3);
}
.sobre-rou .ta { margin: 0; }
.sobre-rou .ta svg { color: #FFF; width: 18px; height: 18px; }
.intro-rou { font-size: var(--t-sm); color: var(--texto-suave); margin: 0 0 var(--s-3); max-width: 56ch; }
.pratos-rou .prato { border-bottom-color: var(--carvao-300); }
.roulotes-menu .btn { margin-top: var(--s-4); width: 100%; font-size: var(--t-base); }
@media (min-width: 640px) { .roulotes-menu .btn { width: auto; } }

/* ---------- locais ---------- */
.locais { display: grid; gap: var(--s-4); }
@media (min-width: 860px) {
  /* Colunas fixas em vez de auto-fit: o subgrid só partilha as linhas
     de forma previsível quando a grelha-mãe tem colunas explícitas. */
  .locais { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5); }
  /* A altura do cabeçalho é igualada por JS, cartão a cartão dentro de
     cada fila (ver alinharCartoes em lp.js). O subgrid parecia o sítio
     certo para isto, mas não iguala a primeira linha quando as colunas
     são criadas por auto-placement. */
}
@media (min-width: 1180px) {
  .locais { grid-template-columns: repeat(3, 1fr); }
}
.local {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-md); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.local-topo { display: grid; gap: var(--s-3); align-content: start; }
/* empurra os botões para o fundo do cartão: como a grelha estica todos
   os cartões à mesma altura, ficam alinhados entre si */
.local .accoes { margin-top: auto; }
.nota-local { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }
.local .tipo { font-family: var(--fonte-titulo); font-weight: var(--peso-semi); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--marca-texto); margin: 0; }
.local h3 { font-size: var(--t-2xl); }
.local .morada { font-size: var(--t-sm); color: var(--texto-suave); margin: 0; }
.local .estado { align-self: start; background: var(--carvao-100); color: var(--texto); }
.local[data-aberto="sim"] .estado { background: var(--aberto-fundo); color: var(--aberto); }
.local[data-aberto="nao"] .estado { background: var(--fechado-fundo); color: var(--fechado); }
.horas { margin: 0; font-size: var(--t-sm); }
.horas > div { display: flex; justify-content: space-between; gap: var(--s-3);
  padding-block: var(--s-1); border-bottom: 1px solid var(--borda); }
.horas > div[data-hoje] { font-weight: var(--peso-forte); color: var(--texto); }
.horas dt { font-weight: var(--peso-semi); }
.horas dd { margin: 0; color: var(--texto-suave); font-variant-numeric: tabular-nums; text-align: right; }
.horas .fechado { color: var(--texto-fraco); }
.so-estes { display: none; font-size: var(--t-xs); color: var(--texto-fraco); margin: 0; }

/* Em telemóvel o cartão da roulote mostra só os dias em que abre, sete
   linhas para anunciar duas é scroll a mais. */
@media (max-width: 859px) {
  .local[data-roulote] .horas > div[data-fechado] { display: none; }
  .local[data-roulote] .so-estes { display: block; }
}
.local .accoes { display: grid; gap: var(--s-2); }
.local .btn { font-size: var(--t-base); }

/* o mapa estende o cartão, em vez de atirar a pessoa para outro site */
.mapa { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.mapa[hidden] { display: none; }
.mapa iframe {
  width: 100%; height: 220px; display: block; border: 0;
  border-radius: var(--r-sm); border: 1px solid var(--borda);
  /* fundo enquanto o Google carrega, para não piscar branco */
  background: var(--superficie-2);
}
.mapa-pe { margin: 0; font-size: var(--t-sm); }
.mapa-pe a { color: var(--marca-texto); }
.ver-mapa[aria-expanded="true"] { background: var(--carvao-100); }

/* ---------- história ----------
   Linha do tempo em três momentos: o botequim, a roulote, o restaurante.
   A primeira e a terceira são o MESMO sítio visto de cima, com vinte
   anos de diferença, é essa a graça, e por isso ficam na mesma fila. */
.hist-intro { max-width: var(--medida); margin-bottom: var(--s-7); }
.hist-intro p + p { margin-top: var(--s-3); }

.linha-tempo {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-6);
  counter-reset: momento;
}
.linha-tempo > li { display: grid; gap: var(--s-2); }
.linha-tempo img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-md); display: block;
}
/* a foto do botequim é de arquivo: dessaturada, para se ler como memória */
.linha-tempo > li:first-child img { filter: saturate(.5) contrast(1.06) sepia(.2); }

.linha-tempo .ano {
  font-family: var(--fonte-titulo); font-weight: var(--peso-forte);
  font-size: var(--t-2xl); line-height: 1; text-transform: uppercase;
  color: var(--marca-texto); margin: var(--s-2) 0 0;
  display: flex; align-items: center; gap: var(--s-3);
}
/* risca que liga os momentos, à maneira de uma linha do tempo */
.linha-tempo .ano::after {
  content: ""; flex: 1; height: 2px; background: var(--borda);
}
.linha-tempo > li > p:last-child {
  font-size: var(--t-sm); color: var(--texto-suave); margin: 0; max-width: 42ch;
}

@media (min-width: 860px) {
  .linha-tempo { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}

/* ---------- CTA final ---------- */
.cta-final {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--sobre-marca); text-align: center;
  /* o mesmo gradiente do hero: foco quente em cima à esquerda, descida
     para laranja queimada no canto oposto */
  background:
    radial-gradient(75% 70% at 24% 16%, #FFA95E 0%, rgb(255 169 94 / 0) 62%),
    radial-gradient(90% 80% at 88% 94%, #C94E17 0%, rgb(201 78 23 / 0) 55%),
    linear-gradient(158deg, #F98139 0%, #F16A22 52%, #D9551A 100%);
}
.cta-final .env { position: relative; z-index: 2; }
/* Sem lede: o título fica sozinho com os botões e pode crescer. O tecto é
   a largura, não o gosto: a 390px cabem 2 linhas sem a comida chegar lá. */
.cta-final h2 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4rem); line-height: .98;
  margin-bottom: var(--s-5); }

/* Dois pratos grandes, a entrar pelas laterais em baixo, valores do
   editor (demos/editor-cta.html), 01-10-2026. Os palitos e o pão de alho
   saíram: com estes dois à escala a que ficaram, não sobrava laranja. */
/* Em telemóvel a faixa é mais alta do que o texto precisa: os 236px em
   baixo são a banda onde a comida assenta. Sem eles os pratos subiam para
   cima dos botões, o «Número das roulotes» é só contorno e o texto
   passava a ler-se por cima do frango. Valor medido: a 208px ainda havia
   251 pixéis de comida dentro do bloco de texto. */
.cta-final { padding-block: var(--s-8) calc(var(--s-9) + var(--s-10) + var(--s-4)); }
.cta-final .obj { z-index: 1; filter: drop-shadow(0 12px 18px rgb(90 36 4 / .3)); }
/* O jet7 só é espelhado em desktop, onde os dois pratos estão lado a lado
   e a repetição se notava. Em telemóvel está ao natural. */
@media (min-width: 900px) { .s-jet7 img { transform: scaleX(-1); } }
/* telemóvel 390x570 */
.s-salada { --cx:  9.21%; --w:  87.50%; --r:  42deg; --de: -20%; --d:   0ms; }
.s-jet7   { --cx: 89.72%; --w: 100.00%; --r: -37deg; --de:  20%; --d: 120ms; }

/* Abaixo dos 900px a comida assenta no fundo da faixa, não a uma
   percentagem da altura, e a largura trava em pixéis.

   Com a posição em % da altura e a largura em % da largura bastava o ecrã
   ser mais largo (ou o texto quebrar noutro sítio) para os pratos
   subirem para cima dos botões: medido, havia 250 pixéis de comida dentro
   do bloco de texto a 430px e 6667 a 768px. Ancorada ao fundo, a folga
   entre o texto e a comida é sempre a mesma, seja qual for a largura. */
@media (max-width: 899px) {
  .cta-final .obj {
    top: auto; bottom: var(--cb);
    width: min(var(--w), var(--wmax));
    translate: -50% 50%;
    animation-name: obj-entra-baixo;
  }
  @keyframes obj-entra-baixo {
    from { opacity: 0; translate: calc(-50% + var(--de)) 50%; }
    to   { opacity: 1; translate: -50% 50%; }
  }
  /* --cb é a distância do CENTRO da imagem ao fundo da secção. Vem do
     cy da prancheta de 570px: (100% - 83,83%) x 570 = 92px, e
     (100% - 84,98%) x 570 = 86px. */
  .s-salada { --cb: 92px; --wmax: 341px; }
  .s-jet7   { --cb: 86px; --wmax: 390px; }
}
/* desktop 1440x402 */
@media (min-width: 900px) {
  /* A faixa mantém-se com os ~400px com que a composição foi feita. Sem o
     lede o texto encolheu 65px e, como a comida está posicionada em % da
     altura, ela subia para cima do título: medido, 101 682 pixéis de
     comida dentro do bloco de texto a 1440px. O respiro compensa. */
  .cta-final { padding-block: var(--seccao-lg); }
  .s-salada { --cx:  7.76%; --cy: 72.29%; --w: 60%; --r:  20deg; }
  .s-jet7   { --cx: 86.47%; --cy: 72.94%; --w: 60%; --r: -20deg; }
}

/* ---------- rodapé ---------- */
/* Sem border-top: o rodapé vem sempre a seguir à faixa laranja do
   «Encomende por telefone», e os 3px de laranja-400 ficavam entre o fim
   do gradiente (226,94,29) e o creme do rodapé, lia-se como uma linha
   solta, não como a aresta da marca. O laranja da faixa já faz a
   separação. */
.rodape { padding-block: var(--seccao) var(--s-6); background: var(--fundo-alt); }

/* ---------- barra de financiamento ----------
   Creme escuro, o tom mais carregado da paleta: destaca a faixa do rodapé
   sem introduzir preto numa página que é toda clara. A barra é a versão
   oficial para fundo claro, tirada da própria ficha do projeto, com o
   branco à volta dos logótipos tornado transparente. */
.prr { background: var(--creme-escuro); padding-block: var(--s-5); }
.prr-in { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
/* A barra é obrigação legal, não é peça de desenho: entra pequena, do
   tamanho de uma assinatura de rodapé. */
.prr img { width: 100%; max-width: 480px; height: auto; display: block; }
/* 13,34:1 sobre o creme escuro */
.prr-ficha {
  color: var(--carvao-900); font-family: var(--fonte-titulo); font-weight: var(--peso-semi);
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  text-decoration: none; border-bottom: 2px solid var(--marca); padding-bottom: 2px;
  min-height: var(--alvo-toque); display: inline-flex; align-items: center;
}
.prr-ficha:hover { color: var(--marca-texto); }
.rodape-in { display: grid; gap: var(--s-6); }
.rodape-marca { width: 150px; height: auto; margin-bottom: var(--s-3); }


@media (min-width: 760px) { .rodape-in { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-7); } }
.rodape h3 { font-size: var(--t-base); letter-spacing: var(--track-etiqueta); margin-bottom: var(--s-2); }
.rodape p { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: var(--s-3); }
.rodape a { color: var(--marca-texto); }
.rodape-fim { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
  border-top: 1px solid var(--borda); margin-top: var(--s-6); padding-top: var(--s-4); }
.rodape-fim p { font-size: var(--t-xs); color: var(--texto-fraco); margin: 0; }
.assinatura a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--borda-forte); }
.assinatura a:hover { color: var(--marca-texto); border-color: currentColor; }

/* Em telemóvel o rodapé é uma coluna só, alinhado à esquerda ficava a
   pender para um lado, com muito ar à direita. Centrado equilibra.
   Tem de vir DEPOIS de .rodape-fim, senão o justify-content de lá ganha. */
@media (max-width: 759px) {
  .rodape-in { text-align: center; justify-items: center; }
  .rodape-marca { margin-inline: auto; }
  .rodape-in p { max-width: 34ch; margin-inline: auto; }
  .rodape-fim { justify-content: center; text-align: center; gap: var(--s-2); }
  .rodape-fim p { width: 100%; }
}