/* ══════════════════════════════════════════════════════════════════════════
   CARTA DE DEMONSTRAÇÃO — identidade da casa e montagem do frozen
   ──────────────────────────────────────────────────────────────────────────
   Carregado DEPOIS do style.css (o motor partilhado). Faz três coisas:

     1. veste o motor com a identidade da casa (abaixo);
     2. desenha a MONTAGEM DO FROZEN (tamanho → calda → toppings), com o
        copo a encher em 3D;
     3. dá-lhe VIDA (skill carta-com-vida), no volume CALMO: o fundo do
        cabeçalho, o selo que roda, o banner por hora com o palco, e o
        movimento fino da carta.

   A CASA — o sector primeiro, a paleta depois
   Uma gelataria-café de autor no Chiado: gelado e frozen feitos na casa,
   café de especialidade, pastelaria fina, um copo de espumante ao fim da
   tarde. O registo é o de uma pastelaria parisiense em Lisboa — calma,
   quente, cara sem o dizer. Nada de cores primárias a brilhar: a casa
   fala baixo, e a comida é a única coisa com cor.

   A IDENTIDADE (de onde vem cada cor)
     · porcelana #F7F2EB — o papel: a louça da casa, o mármore do balcão.
     · cacau     #33261F — a tinta e o cabeçalho: chocolate negro, o grés
       das chávenas. 13,2:1 no papel.
     · champanhe #B89B66 — o filete de ouro: a borda das chávenas, o selo,
       as linhas. Só decoração e texto grande (no papel fica nos 2,4:1).
     · rosé      #C98F84 — o acento: o gelado de morango do símbolo. Onde
       se pede um toque (a quantidade, o guardado, a aba). Com cacau por
       cima: 5,4:1. Em texto vai o rosé-tinta #8E4F45 (5,7:1).
     · pistácio  #AEB98C — só no produto e no "aberto agora".
   A REGRA: porcelana é o papel, cacau é a marca, o ouro é o filete, e a
   cor de FRUTA só vive no produto (as ilustrações, o copo 3D, os cartões
   do banner por hora). A interface nunca é mais colorida do que a comida.

   O MATERIAL — volume CALMO, e MINIMALISTA
   Blocos lisos, linha fina de ouro, sombra suave (nunca a dura deslocada),
   1–2 tons por bloco, movimento de 6–9 s com 2–3 px. Sem padrões, sem
   recortes, sem brilhos a passar: o ornamento é UM — o símbolo e o selo,
   em linha de ouro. Tudo o que mexe responde a alguma coisa (a carta a
   chegar, um prato a entrar no pedido) ou respira devagar.

   OS TIPOS: Prata (o letreiro, os títulos, os preços — um didone de alto
   contraste, a voz da casa) e Onest (a interface, que se lê pequena). As
   duas têm cirílico: o ucraniano não cai letra a letra para a fonte do
   sistema (gotcha_fonte_sem_cirilico). A Prata só tem um peso: em lado
   nenhum se lhe pede negrito, que o browser fingia.

   Porquê um ficheiro próprio e não mexer no style.css: o motor é o mesmo em
   todas as cartas. Uma cor mudada lá dentro muda-as a todas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. A PALETA ───────────────────────────────────────────────────────────── */

:root {
  --bg:          #F7F2EB;   /* porcelana — o papel */
  --bg-alt:      #EFE6DA;   /* linho — faixa recuada */
  --surface:     #FFFDF9;   /* o que flutua: folhas, modais, cartões */
  --areia:       #ECE2D5;   /* botões e campos POUSADOS no papel */
  --text:        #33261F;   /* cacau — 13,2:1 no papel */
  --text-muted:  #5E4E45;   /* 7,2:1 */
  --muted:       #7A6A60;   /* 4,7:1 no papel */
  --border:      #E3D7C8;
  --border-soft: #EDE4D8;

  /* A marca: cacau. Botões, abas, o pedido. */
  --accent:        #33261F;
  --accent-dark:   #241A15;
  --accent-bright: #5A453A;

  /* O ouro e o rosé. (Os nomes `--coral*` e `--sol` ficaram do resto do
     ficheiro: são o acento e o filete.) */
  --ouro:         #B89B66;
  --ouro-claro:   #D9C49A;
  --ouro-texto:   #CDB585;    /* ouro sobre o cacau — 7,0:1 */
  --coral:        #C98F84;    /* rosé cheio — com cacau por cima (5,4:1) */
  --coral-claro:  #F4E4DD;
  --coral-tinta:  #8E4F45;    /* texto rosé no papel — 5,7:1 */
  --sol:          #B89B66;
  --pistache:     #AEB98C;

  /* Os fundos escuros — o cabeçalho, o palco da montagem, o Wi-Fi, o
     rodapé. Os nomes vêm da versão a preto e branco; são o cacau. */
  --preto-fundo: #33261F;
  --preto-topo:  #4A382F;
  --preto-pedra: #241A15;

  /* O produto: o cacau. O botão que abre a montagem, as medidas, o copo. */
  --produto:       #33261F;
  --produto-claro: #5A453A;
  --produto-fundo: #241A15;
  --produto-tinta: #F1E6DA;   /* fundo de um copo/opção escolhido */

  /* O destaque: o ouro. */
  --destaque:       #B89B66;
  --destaque-fundo: #A0844F;
  --destaque-claro: #D9C49A;

  /* O motor pede estes nomes. */
  --gold:        #8C7140;
  --gold-bright: #B89B66;
  --gold-deep:   #241A15;
  --navy:        #33261F;
  --navy-mid:    #4A382F;
  --sage:        #4F5A36;   /* etiquetas VEGAN… — 6,6:1 no seu fundo */
  --sage-bg:     #E9ECDD;
  --sage-border: #CDD4B4;

  --font-ui:      'Onest', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* `--font-display` é a dos títulos FUNCIONAIS (a montagem, o carrinho,
     os botões): a Onest forte. A voz da casa — o letreiro, as secções, os
     preços — é a `--font-serif`. */
  --font-display: 'Onest', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:   'Prata', Georgia, 'Times New Roman', serif;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;

  /* Altura reservada para os cartões dos mais pedidos (ver
     .most-ordered-list no style.css): levam a ilustração. */
  --mo-lista-h: 196px;

  --shadow-sm: 0 1px 2px rgba(51, 38, 31, .05);
  --shadow-md: 0 8px 22px -10px rgba(51, 38, 31, .18);
  --shadow-lg: 0 18px 44px -16px rgba(51, 38, 31, .28);
  --sombra-casa: 0 1px 2px rgba(51, 38, 31, .05), 0 10px 24px -14px rgba(51, 38, 31, .3);

  /* As curvas de movimento da casa: uma saída lenta e macia (o registo
     calmo) e uma mola quase sem ressalto. */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.3, 1.3, .6, 1);

  /* Os blocos de cacau são lisos (sem padrão): `--toldo` fica vazio para
     as regras da montagem e do Wi-Fi que o pedem. */
  --toldo: none;
}

body { background: var(--bg); color: var(--text); font-family: var(--font-ui); }

/* ── 2. TIPOS ──────────────────────────────────────────────────────────── */

/* A voz da casa: a Prata, sempre no seu único peso. */
.hero-name,
.menu-section-title,
.section-title-elite,
.most-ordered-title,
.wine-section .section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.005em;
}
.cart-title, h1, h2 { font-family: var(--font-display); }
.menu-item-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.01em;
  color: var(--text);
}

/* O motor põe em itálico os títulos, as descrições de secção e as listas
   vazias (vem do serif do Marisca). Nenhuma das letras da casa tem itálico:
   o browser inclinava-as à força, uma letra falsa. As notas do pedido e o
   nome na língua da casa ficam como o motor as tem — ali o itálico diz
   "isto é uma nota", e é a única pista que o balcão tem. */
.hero-tagline, .special-banner-headline, .special-banner-text,
.section-title-elite, .section-sub-elite, .menu-section-desc,
.wine-empty, .cart-empty, .menu-empty-title,
.split-podium-allequal, .split-podium-unassigned,
.menu-item-photo-placeholder span, .menu-item-photo.is-placeholder span { font-style: normal; }
.menu-section-desc { color: var(--muted); font-family: var(--font-ui); font-weight: 500; }

/* ── 3. O CABEÇALHO ────────────────────────────────────────────────────────
   Um bloco de cacau liso: o símbolo da casa por cima do letreiro, um
   filete de ouro, e o selo no canto. Não há fotografia, nem padrão, nem
   recorte — o cacau acaba numa linha recta e o papel começa.            */

.hero {
  position: relative;
  isolation: isolate;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #3A2C24 0%, var(--preto-fundo) 100%);
  border-radius: 0;
  padding: 0 0 30px;
}

.hero-image,
.hero::before,
.hero::after { display: none; }

.hero-overlay { display: none; }

/* A barra de topo tem de ficar ACIMA do .hero-content (gotcha do empate de
   z-index: o padding do conteúdo, que é espaço vazio, engolia os cliques
   dos idiomas). */
.hero-top-bar { z-index: 4; }

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 58px 22px 0;
  color: var(--bg);
}

/* O monograma de iniciais do motor sai: o símbolo da casa é o .casa-logo. */
.hero-logo { display: none; }

/* O SÍMBOLO — o gelado que é um arco de Lisboa, a linha de ouro. SVG em
   linha no index.html (para a estrela poder brilhar e a bola respirar);
   um anel só, sem grade no cone — o símbolo diz-se em cinco traços.
   decorativo: o nome está logo por baixo. */
.casa-logo {
  order: 0;
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 0 8px;
  overflow: visible;
}

/* O LETREIRO. O nome é o que o visitante escreveu na landing — "Bar",
   "Tasca do Manel" ou "Restaurante Marisqueira do Bairro Alto" — e é ISSO
   que a demonstração existe para mostrar.

   Três corpos, escolhidos pelo `data-tamanho` que o `/js/nexo-demo-casa.js`
   lhe põe pelo número de letras. O que nunca pode acontecer: cortar o nome
   ou fazê-lo sair do ecrã — quebra em linhas equilibradas, e uma palavra
   maior do que o ecrã parte-se (`anywhere`) em vez de transbordar. */
.hero-name {
  order: 1;
  position: static;
  width: auto; height: auto;
  max-width: 100%;
  overflow: visible;
  clip: auto; clip-path: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 11vw, 54px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--bg);
  text-shadow: none;
}
.hero-name[data-tamanho="curto"] { font-size: clamp(46px, 14vw, 68px); }
.hero-name[data-tamanho="longo"] {
  font-size: clamp(26px, 7.6vw, 36px);
  line-height: 1.08;
}

/* "CAFÉ · GELADOS · BRUNCH", em ouro, entre dois filetes. */
.hero-tagline {
  order: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-size: 10px;
  opacity: 1;
  color: var(--ouro-texto);
  margin: 14px 0 0;
}
.hero-tagline::before,
.hero-tagline::after {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .6;
}

/* O carimbo "Est. 2026" e a pastilha do heroStamp saem: a frase vive no
   SELO que roda (abaixo). */
.casa-carimbo,
.hero-stamp { display: none !important; }

.hero-meta {
  order: 5;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 500;
  opacity: 1;
  color: rgba(247, 242, 235, .8);
}
.hero-city, .hero-hours-today, .hero-dot { color: inherit; }
.hero-dot { color: var(--ouro); }
/* "Aberto agora" leva o ponto pistácio de quem está aberto. */
.hero-hours-today::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--pistache);
  box-shadow: 0 0 0 3px rgba(174, 185, 140, .18);
  vertical-align: middle;
}

/* O tempo de hoje (Open-Meteo, por `nexo-casa.js`). Entra depois do
   primeiro desenho, por isso tem altura reservada. */
.casa-tempo {
  order: 6;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 17px;
  margin: 5px 0 0;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 500;
  letter-spacing: .03em;
  color: rgba(247, 242, 235, .72);
}
.casa-tempo-ico { display: inline-flex; color: var(--ouro); }
.casa-tempo-ico svg { display: block; width: 14px; height: 14px; }

/* Os idiomas: vidro claro sobre o cacau, o activo em porcelana. */
.lang-toggle { background: rgba(247, 242, 235, .08); border-color: rgba(184, 155, 102, .32); }
.lang-toggle button { color: rgba(247, 242, 235, .82); font-family: var(--font-ui); font-weight: 600; letter-spacing: .04em; }
.lang-toggle button.active { background: var(--bg); color: var(--text); }
.table-badge { background: rgba(247, 242, 235, .1); border-color: rgba(184, 155, 102, .32); color: var(--bg); font-weight: 600; }

/* ── 4. A BARRA DE ATALHOS ─────────────────────────────────────────────────
   O papel da casa com um filete. "Avaliar" vai em cacau, com a estrela de
   ouro: é o botão que o dono quer que se veja, sem gritar. */

.quick-nav {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  gap: 7px;
}
.quick-nav-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* A MARCA NA BARRA — quando o cabeçalho já saiu do ecrã, esta barra passa a
   ser o topo da página: o símbolo fica colado à esquerda e leva ao topo.
   O botão é criado pelo `nexo-casa.js`; o desenho é daqui. */
.casa-marca {
  position: sticky; left: 0; z-index: 2;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  height: 40px; width: 44px; padding: 0;
  margin-right: 0;
  border: none; border-radius: 0; background: var(--bg); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.casa-marca::after {
  content: ""; width: 32px; height: 32px;
  background: url("img/casa-marca.svg?v=20261103c") no-repeat center / contain;
}
.casa-marca:active::after { opacity: .6; }
.casa-marca:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.quick-nav-btn svg { color: var(--text); }
.quick-nav-btn.highlighted { border-color: var(--accent); color: var(--accent); }
.quick-nav-btn.highlighted svg { color: var(--accent); }
.quick-nav-btn.quick-nav-review {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.quick-nav-btn.quick-nav-review svg { color: var(--ouro-claro); }

/* ── 5. OS MAIS PEDIDOS — a faixa de linho ─────────────────────────────────
   O motor desenha este bloco em azul-noite com uma grelha de pontos e uma
   onda branca em baixo — é a identidade do Marisca.

   Aqui é uma faixa de linho liso a atravessar a carta. Os cartões são
   porcelana, cada um com a ilustração do prato a respirar (posta pelo
   `nexo-casa.js`). */

.most-ordered {
  position: relative;
  margin: 0 0 var(--s5);
  padding: calc(var(--s5) + 8px) 0 calc(var(--s5) + 10px);
  border: none;
  overflow: hidden;
  background: var(--bg-alt);
}

.most-ordered::before,
.most-ordered::after { display: none; }   /* a grelha e a onda azul do motor, fora */

.most-ordered > * { position: relative; z-index: 1; }

/* Fica o título. O sobrelinha, o subtítulo e a etiqueta do primeiro cartão
   saem: quatro linhas a dizer uma coisa (o primeiro lugar já diz que é o
   mais pedido). As outras etiquetas ficam, porque dizem coisas DIFERENTES. */
.most-ordered .elite-badge,
.most-ordered .section-sub-elite { display: none; }

.most-ordered .section-title-elite {
  font-style: normal;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: none;
  text-shadow: none;
  font-size: clamp(26px, 7vw, 32px);
  margin: 0 0 4px;
}
.most-ordered-card:first-child .most-ordered-card-badge { display: none; }

/* O encaixe conta com a margem da faixa: sem isto o browser encaixava o
   primeiro cartão no bordo do ecrã, colado ao vidro. */
.most-ordered-list { scroll-padding-inline: 18px; }

.most-ordered-card {
  position: relative;
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px 13px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease-out);
}
.most-ordered-card::before { display: none; }
.most-ordered-card:active { transform: scale(.98); }
.most-ordered-card-content { flex: 0 0 auto; margin-bottom: 8px; }
.most-ordered-card-name  { color: var(--text); font-family: var(--font-ui); font-weight: 600; }
.most-ordered-card-desc  { color: var(--muted); }
.most-ordered-card-badge { color: var(--coral-tinta); font-weight: 600; letter-spacing: .14em; }
.most-ordered-card-price { color: var(--text); font-family: var(--font-serif); font-weight: 400; font-size: 19px; }
.most-ordered-rank { display: none; }
.most-ordered-card-price { border-top: none; padding-top: 0; }

/* A ilustração do prato no cartão (nexo-casa.js). */
.casa-mo-foto {
  display: block;
  width: 100%;
  height: 78px;
  object-fit: contain;
  margin: 0 0 6px;
  pointer-events: none;
}

/* ── 5b. O RODAPÉ ──────────────────────────────────────────────────────────
   O cacau do cabeçalho, liso: o topo e o fundo da página fecham com a
   mesma cor. */

.footer {
  background: var(--preto-fundo);
  padding-top: 40px;
}
.footer::before,
.footer::after { display: none; }
.footer .footer-info   { color: rgba(247, 242, 235, .76); }
.footer .footer-row strong { color: var(--ouro-texto); font-weight: 600; }
.footer .footer-row a  { color: rgba(247, 242, 235, .94); }
.footer .nexo-brand,
.footer .nexo-brand a  { color: rgba(247, 242, 235, .66); }

/* ── 6. O SÍMBOLO NO FIM DA CARTA ──────────────────────────────────────── */

.casa-mascote {
  display: block;
  width: 84px; height: auto;
  margin: 30px auto 8px;
}

/* ── 7. SECÇÕES E CARTÕES ──────────────────────────────────────────────── */

.menu-section { margin-bottom: 30px; }

.menu-section-title {
  color: var(--text);
  font-size: clamp(27px, 7.4vw, 34px);
}
/* O filete por baixo do título: uma linha de ouro, curta. Desenha-se da
   esquerda para a direita quando o título entra. */
.menu-section-title::after {
  content: ""; display: block;
  width: 32px; height: 1px;
  margin-top: 10px;
  background: var(--ouro);
  transform-origin: 0 50%;
}

/* O PRATO VIVE NO PAPEL — sem cartão, separado por um filete, como as
   cartas de papel separam linhas há cem anos. A área de toque continua a
   ser o bloco inteiro. */
.menu-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding-left: 2px; padding-right: 2px;
  -webkit-tap-highlight-color: transparent;
}
.menu-section .menu-item:last-child { border-bottom: none; }
.menu-item:active { background: rgba(51, 38, 31, .035); }
.menu-item-price { font-family: var(--font-serif); font-weight: 400; font-size: 19px; color: var(--text); letter-spacing: 0; }
/* "a fatia", "a unidade" — o que o preço compra (`priceNote` no config). */
.menu-item-price-note {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  margin-left: -2px;
}

.menu-item-photo,
.menu-item-photo.is-placeholder {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.menu-item-photo { object-fit: contain; padding: 0; }

.menu-item-bookmark {
  width: 40px; height: 40px;
  background: rgba(247, 242, 235, .86);
  border: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--muted);
}
.menu-item-bookmark.saved { border-color: var(--coral); color: var(--coral-tinta); background: var(--coral-claro); }

/* O "+" é o cacau: cheio, com a porcelana por cima. */
.menu-item-add-btn { border-color: var(--accent); background: var(--accent); color: var(--bg); box-shadow: var(--shadow-sm); }
.menu-item-add-btn:active { background: var(--accent-dark); color: var(--bg); }
.menu-item-add-btn.added::after { border-color: rgba(184, 155, 102, .6); }
.menu-item-order-controls.has-qty { border-color: var(--accent); background: rgba(51, 38, 31, .04); }
.menu-item-step-btn { color: var(--accent); }
.qty-badge { background: var(--coral); color: var(--text); font-weight: 700; }

/* As etiquetas: o POPULAR e o NOVO levam o rosé, o chef o ouro, o vegan o
   pistácio. Linhas finas, fundos claros. */
.item-badge-chef,
.item-badge-recommended {
  color: #6B5532;
  border: 1px solid rgba(184, 155, 102, .5);
  background: #F3EBDC;
}
.item-badge-popular,
.item-badge-new {
  color: var(--coral-tinta);
  border: 1px solid rgba(201, 143, 132, .5);
  background: var(--coral-claro);
}
.item-badge-veg {
  color: var(--sage);
  border: 1px solid var(--sage-border);
  background: var(--sage-bg);
}
.tag-diet { color: var(--sage); background: var(--sage-bg); border-color: var(--sage-border); }

/* As abas e a procura. O sublinhado animado do motor (.tab-ink) é ouro. */
.category-tab { font-family: var(--font-ui); font-weight: 600; color: var(--muted); }
.category-tab.active { color: var(--text); }
.tab-ink { background: var(--ouro) !important; height: 2px; border-radius: 999px; }
.menu-search { background: var(--surface); border-color: var(--border); }
.menu-search:focus-within { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(184, 155, 102, .18); }

.loyalty-card {
  background: transparent;
  border: 1px solid var(--border);
}
.loyalty-btn {
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  padding: 13px;
  font-family: var(--font-ui);
}
.loyalty-btn:active { background: var(--accent-dark); }
.loyalty-icon { background: var(--accent); color: var(--bg); }

/* O botão de chamar o balcão: o cacau, em vidro, com um filete de ouro. */
#nexo-call-staff-btn {
  background: rgba(51, 38, 31, .94);
  border-color: rgba(184, 155, 102, .4);
  box-shadow: 0 8px 20px -8px rgba(51, 38, 31, .45);
}

/* ── 7b. SPRITZ & VINHOS ───────────────────────────────────────────────────
   O separador "Drinks" do motor, na paleta da casa. */
.wine-section { background: linear-gradient(180deg, transparent 0%, rgba(232, 201, 190, .18) 100%); }
.wine-section .section-title { color: var(--text); font-size: clamp(27px, 7.4vw, 34px); }
.wine-section .section-title::before { display: none; }   /* a barra do motor: o título da casa não leva marcador */
.wine-section .section-badge { background: #F3EBDC; color: #6B5532; }
.wine-chip { background: var(--surface); border-color: var(--border); color: var(--text-muted); font-weight: 600; }
.wine-chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }


/* ── 8. MONTAGEM DO FROZEN ─────────────────────────────────────────────── */

/* O botão que chama a montagem, no cabeçalho da secção do frozen. É o
   único sítio da carta, fora do painel, onde o preto puro manda — e é de
   propósito. */
.casa-montar {
  /* Largura toda: é a acção principal da secção e, num telemóvel, um botão
     que atravessa o ecrã é um alvo que não se falha. */
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  margin: 2px 0 16px;
  padding: 15px 20px; min-height: 56px;
  border: none; border-radius: 999px;
  background: var(--produto); color: var(--bg);   /* 4,8:1 */
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  cursor: pointer;
  /* um degrau por baixo, como uma tecla: diz que se carrega */
  box-shadow: 0 3px 0 rgba(51, 38, 31, .28), 0 10px 20px -12px rgba(184, 155, 102, .6);
  transition: transform .15s ease, box-shadow .2s ease;
}
.casa-montar:hover  { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(51, 38, 31, .3), 0 14px 24px -12px rgba(184, 155, 102, .65); }
.casa-montar:active { transform: scale(.98); }
.casa-montar:focus-visible { outline: 3px solid rgba(184, 155, 102, .45); outline-offset: 3px; }
.casa-montar-ico { width: 21px; height: 21px; flex-shrink: 0; }
/* FROZEN ESGOTADO (acai:0 esgotado ou retirado no portal — ver
   `frozenEsgotado()` no nexo-casa.js). O botão diz "Frozen esgotado" e não
   responde; perde o preto pleno e o degrau de tecla, porque já não é uma
   tecla. Texto preto sobre a areia (~16:1): esgotado é informação, tem de
   se ler — nada de opacidade. */
.casa-montar:disabled {
  background: var(--areia);
  color: var(--text);
  box-shadow: none;
  cursor: not-allowed;
}
.casa-montar:disabled:hover,
.casa-montar:disabled:active { transform: none; box-shadow: none; }

/* ── AS MEDIDAS NA CARTA ───────────────────────────────────────────────
   As três, em linha, antes do botão: a carta responde com os olhos a
   "que tamanhos há e quanto custam". Tocar numa abre a montagem já nesse
   tamanho. */
.casa-medidas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 2px 0 16px;
}
.casa-medida {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 13px 6px 11px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: rgba(236, 226, 213, .42);
  color: var(--text);
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: center;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.casa-medida:hover  { transform: translateY(-2px); border-color: var(--produto); }
.casa-medida:active { transform: scale(.985); }
.casa-medida:focus-visible { outline: 3px solid rgba(184, 155, 102, .45); outline-offset: 2px; }
.casa-medida-cup { display: flex; align-items: flex-end; justify-content: center; height: 48px; }
.casa-medida-cup svg { display: block; width: 38px; height: 38px; }
/* Os copos ao tamanho relativo: o cone é estreito e alto, a taça é a maior. */
.casa-size-cone  .casa-medida-cup svg { width: 29px; height: 36px; }
.casa-size-copo  .casa-medida-cup svg { width: 38px; height: 38px; }
.casa-size-taca  .casa-medida-cup svg { width: 46px; height: 46px; }
.casa-size-wbowl .casa-medida-cup svg { width: 42px; height: 40px; }
.casa-medida-nome {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1.1;
  color: var(--accent-dark);
}
/* `--text-muted` e não `--muted`: sobre a areia o `--muted` fica nos 4,1. */
.casa-medida-ml {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.casa-medida-preco {
  margin-top: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  color: var(--produto-fundo); font-variant-numeric: tabular-nums;
}
/* A medida de um frozen esgotado continua no sítio (a carta não muda de
   forma a meio do dia), mas com "esgotado" no lugar do preço e sem
   responder ao toque. O copo esbate-se; o texto não — tem de se ler. */
.casa-medida.esgotado {
  cursor: not-allowed;
  background: transparent;
  border-style: dashed;
}
.casa-medida.esgotado:hover,
.casa-medida.esgotado:active { transform: none; border-color: var(--border); }
.casa-medida.esgotado .casa-medida-cup { opacity: .4; }
.casa-medida-fora {
  margin-top: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text);
}
/* Os destaques do topo com o frozen esgotado: o "Frozen · monte o seu" e o
   de um tamanho da montagem (o Waffle Bowl), que fica sem frozen ao mesmo
   tempo — ver `marcarDestaque` no nexo-casa.js. Por isso a regra vale para
   qualquer cartão com `.casa-esgotado`, e não só para o do frozen. */
.most-ordered-card.casa-esgotado .most-ordered-card-price {
  font-size: .78em; letter-spacing: .06em; text-transform: uppercase;
}
/* "Mais pedido" é um destaque: leva o sol, não o produto. */
.casa-medida-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 3px 7px 2px; border-radius: 999px;
  background: var(--destaque); color: var(--text);
  box-shadow: 1px 2px 0 rgba(51, 38, 31, .18);
  font-size: 8px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase;
}

/* ── DUAS MEDIDAS NUMA LINHA (cafés, chás) ─────────────────────────────
   Pastilhas dentro do prato: toca-se, o preço muda, e o "+" passa a
   apontar para a variante certa. */
.casa-medidas-linha {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 2px;
}
.casa-medida-chip {
  /* 28px de alto era um alvo pequeno para um polegar a andar (Fitts: o
     tempo de acertar cresce quando o alvo encolhe). 40 é o mínimo
     confortável, e a área cresce sem a pastilha ficar pesada. */
  min-height: 40px;
  display: inline-flex; align-items: center;
  padding: 5px 15px 6px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.casa-medida-chip:hover { border-color: var(--muted); }
.casa-medida-chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.casa-montar-desde {
  margin: -10px 0 18px 4px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── O painel ─────────────────────────────────────────────────────────── */

.casa-build {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.22,1,.36,1);
  visibility: hidden;
}
.casa-build.open { transform: translateY(0); visibility: visible; }

.casa-build-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px 12px;
  background: var(--bg);
}
/* O símbolo da casa no cabeçalho da montagem: o painel tapa a página
   inteira, e sem ele o cliente estava num ecrã que podia ser de qualquer
   marca. */
.casa-build-marca {
  flex: 0 0 auto; width: 32px; height: 32px;
  background: url("img/casa-marca.svg?v=20261103") no-repeat center / contain;
}
.casa-build-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--accent-dark); margin: 0;
}
.casa-build-close {
  margin-left: auto; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--areia);
  color: var(--text-muted); font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.casa-build-close:hover { color: var(--text); border-color: var(--muted); }

/* ── O caminho até ao fim (efeito gradiente-objectivo) ─────────────────
   Quem vê o quanto falta acelera; quem não vê não sabe se são mais dois
   toques ou mais dez. Fio fino, por baixo do cabeçalho. */
.casa-progresso {
  flex-shrink: 0;
  height: 3px;
  background: var(--border-soft);
  margin: 0 18px 2px;
  border-radius: 999px;
  overflow: hidden;
}
.casa-progresso-barra {
  display: block; height: 100%; width: 33%;
  background: var(--produto);
  border-radius: 999px;
  transition: width .32s cubic-bezier(.22,1,.36,1);
}
.casa-progresso.cheio .casa-progresso-barra { background: var(--sage); }

/* ── Os grupos de toppings (Região Comum + Proximidade) ────────────────
   Quinze numa grelha só eram mais do que a memória de trabalho aguenta.
   Em três conjuntos com moldura e título, compara-se dentro do grupo. */
.casa-grupo {
  margin-top: 12px;
  padding: 10px 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: rgba(236, 226, 213, .26);
}
.casa-grupo-titulo {
  margin: 0 0 8px 2px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.casa-grupo .casa-opt { background: var(--surface); }

.casa-build-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 18px 28px;
  /* ao saltar para um passo, não o escondas por baixo do palco pegajoso */
  scroll-padding-top: 128px;
}

/* ── O palco ──────────────────────────────────────────────────────────────
   Fica colado ao topo enquanto se escolhe: é o ponto todo da montagem —
   ver o copo a encher.

   O fundo TEM de ser opaco. Com um gradiente que acabava em transparente,
   as opções passavam por trás do copo: via-se "Chocolate" e "Caramelo" a
   atravessar o desenho. */
.casa-stage {
  position: sticky; top: 0; z-index: 3;
  margin: 0 -18px 2px;
  padding: 2px 18px 10px;
  background: var(--bg);
  box-shadow: 0 6px 12px -8px rgba(51, 38, 31, .35);
}
/* O palco é o toldo: preto às riscas, com o sol por trás do copo. O
   frozen de baunilha e o copo preto leem-se melhor no escuro do que no
   papel. */
.casa-stage-card {
  position: relative;
  height: 212px;
  transition: height .26s cubic-bezier(.22,1,.36,1);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(232, 201, 190, .14), transparent 62%),
    var(--preto-fundo);
}
/* Sem a biblioteca 3D (ficheiro em falta, browser antigo) o painel continua
   a funcionar — o palco é só um fundo com o nome do copo por cima. */
.casa-stage-card.sem-3d { height: 96px; }
.casa-stage-card.sem-3d .casa-stage-hint { display: none; }

.casa-cup3d {
  display: block; width: 100%; height: 100%;
  touch-action: none; cursor: grab;
}
.casa-cup3d.a-agarrar { cursor: grabbing; }

/* Em baixo e ao centro ficava por trás do copo. No canto vê-se sempre. */
.casa-stage-hint {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(247, 242, 235, .76);   /* 4,6:1 no canto mais claro do palco */
  pointer-events: none;
}

/* ── O palco encolhido ───────────────────────────────────────────────────
   Quando a lista começa a correr, o copo não sai do ecrã: passa a uma
   faixa. A 212px ocupava um quarto de um telemóvel e escolher entre quinze
   toppings era rolar às cegas. */
.casa-stage.compacto .casa-stage-card { height: 96px; }
.casa-stage.compacto .casa-stage-hint { opacity: 0; }
.casa-stage.compacto .casa-cup-label  { font-size: 12.5px; margin-top: 6px; }
.casa-stage.compacto .casa-cup-resumo { display: none; }

.casa-cup-label {
  text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--accent-dark); margin: 9px 0 0;
}
/* O que já lá está, por palavras — para quem tem o dedo em cima do copo. */
.casa-cup-resumo {
  text-align: center; font-size: 12px; line-height: 1.45;
  color: var(--text-muted); margin: 3px 0 0;
}
.casa-stage-hint { transition: opacity .2s ease; }

/* ── Começar por algum lado ───────────────────────────────────────────
   O atalho do "meu último" e as três montagens da casa. Cartões largos e
   baixos: lêem-se de uma vez, e não competem com os tamanhos, que são a
   decisão a seguir. */
.casa-atalhos-titulo {
  margin: 18px 0 8px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);   /* no papel: 4,7:1 */
}
.casa-atalhos { display: grid; gap: 7px; }
.casa-atalho {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--areia);
  text-align: left; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.casa-atalho:hover  { border-color: var(--produto); }
.casa-atalho:active { background: #EDE4D8; }
.casa-atalho-nome {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--accent-dark);
}
.casa-atalho-nota { font-size: 11.5px; line-height: 1.35; color: var(--text-muted); }
/* O último leva a cor do produto: é o atalho mais provável de todos. */
.casa-atalho-ultimo { border-color: var(--produto); background: var(--produto-tinta); }
.casa-atalho-ultimo .casa-atalho-nome { color: var(--produto-fundo); }

/* ── Partilhar e guardar ──────────────────────────────────────────────
   Só aparecem quando a montagem está completa: antes disso não há nada
   para partilhar. */
.casa-cup-accoes {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 8px;
}
.casa-accao {
  padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}
.casa-accao:hover { border-color: var(--accent); color: var(--accent-dark); }
.casa-stage.compacto .casa-cup-accoes { display: none; }
/* O JS põe [hidden] enquanto não há montagem para partilhar; o display:flex
   de cima ganhava ao atributo e o "Partilhar" aparecia com o copo vazio. */
.casa-cup-accoes[hidden] { display: none; }

/* ── Os passos ────────────────────────────────────────────────────────── */

.casa-step { margin-top: 20px; }
.casa-step-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.casa-step-n {
  width: 23px; height: 23px; flex-shrink: 0; border-radius: 999px;
  background: var(--accent); color: var(--surface);
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.casa-step-title {
  font-family: var(--font-display); font-weight: 700; font-size: 16.5px;
  color: var(--accent-dark); margin: 0;
}
.casa-step-count {
  margin-left: auto; font-size: 12px; font-weight: 700;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  background: var(--bg-alt); border-radius: 999px; padding: 3px 9px;
}
.casa-step-count.full { color: var(--surface); background: var(--sage); }
.casa-step-hint { width: 100%; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0 0 10px; }

.casa-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 9px; }

.casa-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; min-height: 54px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--areia); color: var(--text);
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.casa-opt:hover { border-color: var(--muted); }
.casa-opt:active { transform: scale(.985); }
.casa-opt:focus-visible { outline: 3px solid rgba(51, 38, 31, .4); outline-offset: 2px; }
.casa-opt[aria-pressed="true"] {
  border-color: var(--produto); background: var(--produto-tinta);
  box-shadow: inset 0 0 0 1px var(--produto);
}
/* Um topping que acabou: continua à vista (para não parecer que a carta
   mudou) mas não se pode escolher. */
.casa-opt.esgotado {
  opacity: .45;
  cursor: not-allowed;
  background: transparent;
}
.casa-opt-fora {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 1px;
}
/* A pinta da calda/topping: a cor do próprio ingrediente, com um aro do
   a tinta para os claros (coco, whey) não desaparecerem no papel. */
.casa-opt-dot {
  width: 17px; height: 17px; flex-shrink: 0; border-radius: 999px;
  border: 1.5px solid rgba(51, 38, 31, .22);
}
.casa-opt-txt { flex: 1; min-width: 0; line-height: 1.25; }
.casa-opt-extra { display: block; font-size: 11px; font-weight: 700; color: var(--produto-fundo); margin-top: 1px; }
.casa-opt-diet { font-size: 10px; color: var(--text-muted); font-weight: 600; letter-spacing: .04em; }

/* Os tamanhos: a base do cartão. A tabela de comparação (desenho ao
   tamanho relativo, ml, o que leva, preço) está na secção 11. */
.casa-sizes { grid-template-columns: repeat(3, 1fr); gap: 9px; }
.casa-size {
  flex-direction: column; align-items: center; gap: 4px;
  padding: 13px 8px; text-align: center;
}

/* ── O rodapé ─────────────────────────────────────────────────────────── */

.casa-build-foot {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.casa-total { display: flex; flex-direction: column; line-height: 1.15; }
.casa-total-k { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.casa-total-v { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.casa-add {
  flex: 1; min-height: 54px; border: none; border-radius: 999px;
  background: var(--produto); color: var(--bg);
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  cursor: pointer; transition: opacity .2s ease, transform .12s ease;
}
.casa-add:active { transform: scale(.985); }
.casa-add:disabled { opacity: .4; cursor: not-allowed; }
/* "Frozen esgotado" no rodapé do painel: o mesmo tratamento do botão
   grande da carta — sem o preto pleno, texto legível, e quieto. */
.casa-add.esgotado:disabled {
  opacity: 1;
  background: var(--areia);
  color: var(--text);
}

/* O botão quando ainda falta escolher: não é o CTA final, mas também não é
   uma pedra cinzenta — diz o que falta e leva lá. */
.casa-add.a-faltar {
  background: transparent;
  color: var(--accent-dark);
  border: 1.5px solid var(--accent);
  font-size: 14.5px;
}

/* O passo pisca quando o botão o vai buscar. */
@keyframes casa-pedir {
  0%, 100% { background: transparent; }
  30%      { background: rgba(184, 155, 102, .1); }
}
.casa-step.a-pedir {
  animation: casa-pedir 1s ease;
  border-radius: var(--r-md);
}

/* ── 9. ECRÃS MAIORES E MOVIMENTO ──────────────────────────────────────── */

@media (min-width: 560px) {
  .hero { padding-bottom: 44px; }
  .hero::after { width: 112px; height: 112px; right: 28px; bottom: 8px; }
}

@media (min-width: 560px) {
  .casa-build {
    inset: auto 50% 0 auto; transform: translate(50%, 100%);
    width: min(560px, 100%); border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--shadow-lg);
  }
  .casa-build.open { transform: translate(50%, 0); }
  .casa-stage-card { height: 248px; }
  .casa-stage.compacto .casa-stage-card { height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .casa-medida, .casa-medida-chip { transition: none; }
  .casa-medida:hover { transform: none; }
  .casa-build { transition: none; }
  .casa-montar { transition: none; }
  .casa-montar:hover { transform: none; }
  .casa-stage-card { transition: none; }
  .casa-progresso-barra { transition: none; }
  .casa-step.a-pedir { animation: none; }
}

/* ── 10. TAMANHOS DO FROZEN — a classe por medida ─────────────────────────
   O `nexo-casa.js` põe `casa-size-<id>` (cone, copo, taca, wbowl) em cada
   medida da carta e em cada tamanho do painel. As medidas vêm do config —
   estes ids são os de `CONFIG.acaiBuilder.sizes`. Um id novo no config
   fica no tamanho por omissão (o do copo) até ter aqui a sua linha. */

/* ── 11. ESCOLHA DE TAMANHO — comparação à primeira vista ───────────────── */

.casa-sizes { align-items: stretch; gap: 8px; }
.casa-size {
  position: relative;
  justify-content: flex-start;
  gap: 3px;
  min-height: 190px;
  padding: 13px 6px 11px;
  overflow: visible;
  background: rgba(236, 226, 213, .42);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.casa-size:hover { transform: translateY(-2px); }
.casa-size:focus-visible { outline: 3px solid rgba(184, 155, 102, .45); outline-offset: 2px; }
.casa-size[aria-pressed="true"] {
  background: var(--produto-tinta);
  border-color: var(--produto);
  box-shadow: inset 0 0 0 1px var(--produto), 3px 4px 0 rgba(51, 38, 31, .12);
}
.casa-size-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 7px 2px;
  border-radius: 999px;
  background: var(--destaque);
  color: var(--text);
  box-shadow: 1px 2px 0 rgba(51, 38, 31, .18);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.casa-size-cup {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin-bottom: 1px;
}
.casa-size-cup svg { display: block; width: 43px; height: 43px; transition: width .18s ease, height .18s ease; }
.casa-size-cone  .casa-size-cup svg { width: 33px; height: 40px; }
.casa-size-copo  .casa-size-cup svg { width: 43px; height: 43px; }
.casa-size-taca  .casa-size-cup svg { width: 52px; height: 52px; }
.casa-size-wbowl .casa-size-cup svg { width: 47px; height: 45px; }
.casa-size-ml {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  margin-top: -1px;
}
.casa-size[aria-pressed="true"] .casa-size-ml { color: var(--produto-fundo); }
.casa-size-name {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.05;
}
.casa-size-features {
  display: grid;
  gap: 3px;
  width: 100%;
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid rgba(51, 38, 31, .16);
}
.casa-size-features > span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  color: var(--text-muted);
  line-height: 1.1;
}
.casa-size-features b {
  flex: 0 0 auto;
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}
.casa-size-features small {
  font-size: 8px;
  font-weight: 600;
  line-height: 1.15;
  text-align: left;
}
.casa-size-fixed {
  margin-top: 3px;
  color: var(--sage);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
}
.casa-size-price {
  margin-top: auto;
  padding-top: 7px;
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.casa-size[aria-pressed="true"] .casa-size-price { color: var(--produto-fundo); }
.casa-size-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 9px 1px 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}
.casa-size-note > span {
  display: inline-flex;
  flex: 0 0 15px;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1px solid var(--sage-border);
  border-radius: 50%;
  color: var(--sage);
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 360px) {
  .casa-build-body { padding-inline: 13px; }
  .casa-stage { margin-inline: -13px; padding-inline: 13px; }
  .casa-sizes { gap: 6px; }
  .casa-size { padding-inline: 4px; }
  .casa-size-name { font-size: 11px; }
  .casa-size-features small { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .casa-size, .casa-size-cup svg { transition: none; }
  .casa-size:hover { transform: none; }
}

/* ── 12. FAIXA WI-FI NO FIM DA CARTA ────────────────────────────────────── */

.wifi-card {
  width: min(calc(100% - 40px), 900px);
  margin: 22px auto 30px;
  padding: 17px 20px;
  gap: 13px;
  color: var(--bg);
  background: var(--preto-fundo);
  border: 1px solid rgba(51, 38, 31, .38);
  border-radius: 20px;
  box-shadow: 3px 4px 0 rgba(51, 38, 31, .14), 0 9px 24px rgba(51, 38, 31, .1);
  cursor: pointer;
}
.wifi-card:active {
  background: var(--preto-pedra);
  transform: translateY(1px);
  border-color: rgba(247, 242, 235, .35);
}
.wifi-card.is-ask-only { cursor: default; }
.wifi-card.is-ask-only:active { background: inherit; transform: none; }
.wifi-icon {
  width: 44px;
  height: 44px;
  color: var(--destaque);
  background: rgba(247, 242, 235, .1);
  border: 1px solid rgba(247, 242, 235, .24);
}
/* .82: a etiqueta fica no canto mais claro do cartão (o preto #2D2D2D). */
.wifi-label { color: rgba(247, 242, 235, .82); letter-spacing: .15em; }
.wifi-pass {
  margin-top: 2px;
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .015em;
}
.wifi-hint { color: var(--destaque); font-size: 10px; }
/* Sem rede, a frase do balcão ocupa o lugar do SSID — e aí não é uma
   etiqueta em maiúsculas de 10px, é uma frase para ler. */
.wifi-card.is-ask-only .wifi-hint {
  color: rgba(247, 242, 235, .9);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  margin-top: 1px;
}
/* O motor escreve aqui as coordenadas da casa do Marisca/Olim (Carcavelos).
   Esta é em Lisboa — e coordenadas erradas num cartão são piores do que
   nenhumas. */
.wifi-card::after {
  content: "38°43'N · 9°08'W";
  bottom: 10px;
  color: rgba(247, 242, 235, .62);
}
.wifi-mark {
  align-self: flex-start;
  margin: 1px 22px 0 auto;
  color: rgba(247, 242, 235, .82);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .wifi-card { width: calc(100% - 28px); margin: 18px auto 26px; padding: 15px 14px; }
  .wifi-mark { display: none; }
  .wifi-pass { font-size: 15px; }
}

/* A folha fica contida no ecrã e deixa a comparação rolar abaixo do copo,
   inclusive em portáteis baixos e telemóveis em paisagem. */
@media (min-width: 560px) {
  .casa-build { max-height: min(92dvh, 860px); }
}
@media (max-height: 680px) {
  .casa-stage-card { height: 72px; }
  .casa-stage { padding-bottom: 0; }
  .casa-size { min-height: 160px; }
}

/* ── 13. CONTROLOS FLUTUANTES E AVALIAÇÃO ───────────────────────────────── */

/* O ecrã de confirmação do motor é preto, com os rótulos das secções em
   branco a 40% — 3,8:1. A .62 passa os 4,5 sem gritar mais do que o resto. */
.confirm-section-label { color: rgba(255, 255, 255, .62); }

/* A marca fixa na navegação deve ler como um símbolo pequeno, sem uma
   pastilha própria a ocupar a largura do primeiro botão. */
.quick-nav { gap: 6px; padding-inline: 12px; }
.casa-marca { width: 42px; flex-basis: 42px; }
.casa-marca::after { width: 30px; height: 30px; }

/* Cinco estrelas selecionadas num ouro queimado (3,2:1 na folha: o mínimo
   de um elemento gráfico) e sem o halo azul do motor. O destaque da casa não
   chega a 2:1 no papel — as estrelas acesas ficavam por adivinhar. */
#star-picker .star-btn { font-size: 42px; }
#star-picker .star-btn.lit {
  color: #B89B66;
  transform: translateY(-1px);
  filter: none;
}
#star-picker:hover .star-btn { transform: none; filter: none; }
#star-picker:hover .star-btn:hover { color: #B89B66; transform: translateY(-1px); }

/* O pedido ocupa a largura disponível entre margens estáveis, e deixa os
   dois atalhos laterais fora da sua caixa nos ecrãs mais largos. */
.cart-pill {
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px));
  min-width: 0;
  max-width: calc(100vw - 32px);
  gap: 8px;
  padding-inline: 16px;
}
.cart-pill-icon,
.cart-pill-total { flex: 0 0 auto; }
.cart-pill-text { flex: 1 1 auto; min-width: 0; }
.cart-pill-total { padding-left: 10px; }

/* Em telemóveis os atalhos passam para uma linha acima do pedido, em vez de
   competirem com ele. A distância mantém-se acima da safe area do iPhone. */
@media (max-width: 559px) {
  body.has-cart #nexo-call-staff-btn:not(.hidden),
  body.has-cart .back-to-top.visible {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
  .cart-pill { width: calc(100vw - 28px); max-width: calc(100vw - 28px); }
}

@media (max-width: 360px) {
  .cart-pill { padding-inline: 12px; gap: 7px; font-size: 13px; }
  .cart-pill-total { padding-left: 8px; font-size: 14px; }
  .cart-pill-icon svg { width: 16px; height: 16px; }
  #nexo-call-staff-btn,
  .back-to-top { width: 40px; height: 40px; }
}

@media (max-width: 420px) {
  .quick-nav {
    justify-content: flex-start;
    gap: 6px;
    padding-inline: 10px;
    /* auto e não hidden: a 323px (a janela da landing num telemóvel) o
       último botão ficava cortado e não havia como lá chegar. Desliza-se,
       sem barra à vista. */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .quick-nav::-webkit-scrollbar { display: none; }
  .casa-marca { width: 34px; flex-basis: 34px; margin-right: 2px; }
  .casa-marca::after { width: 28px; height: 28px; }
  /* Os botões medem o que o nome precisa. Encolhidos a 38px redondos, o
     nome saía por cima do ícone do botão seguinte. */
  .quick-nav-btn {
    flex: 0 0 auto;
    width: auto;
    height: 38px;
    gap: 6px;
    padding: 0 13px;
    font-size: 13px;
  }
  /* As palavras FICAM.

     Uma estrela sozinha não diz "avaliar" a ninguém — obriga a adivinhar,
     e um atalho que se adivinha não é um atalho (Jakob: as pessoas esperam
     que funcione como o que já conhecem).

     O que sai é um BOTÃO, não as palavras: o "Menu" saltava para a carta,
     que está logo por baixo. Com ele fora, os outros três cabem com nome
     e tudo. Tirar uma escolha é melhor do que apagar o que as escolhas
     dizem (Hick, e Occam).
     O rótulo continua a existir para quem usa leitor de ecrã. */
  .quick-nav-btn[data-target="menu"] { display: none; }
  .quick-nav-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
}

/* Os emojis do motor voltam às suas cores: a carta já não é a preto e
   branco, e um 🔥 laranja numa etiqueta coral é da mesma família. */

/* ── Afinações depois da revisão independente ────────────────────────────
   Cada linha corrige uma coisa medida, não um gosto. */

/* Halos azuis que o motor desenha à mão (rgba do azul do Marisca) por baixo
   do "Avaliar", do "voltar ao topo" e do botão do pedido: a sombra passa
   à tinta da casa. */
.quick-nav-btn.quick-nav-review,
.back-to-top,
.cart-pill { box-shadow: 0 6px 18px rgba(51, 38, 31, .24); }

/* O pedido é a chávena: cobalto, creme por cima (6,6:1), a conta em coral. */
.cart-pill { background: var(--accent); color: var(--bg); }
.cart-pill-total { color: var(--bg); }
#cart-pill-count { background: var(--coral); color: var(--text); }
.back-to-top { background: var(--text); color: var(--bg); }

/* No ecrã de confirmação (o que se mostra a quem serve), o motor põe o
   nome na língua da casa por baixo do nome traduzido. Herdava a tinta
   preta, sobre um fundo preto: invisível. */
#confirm-screen .confirm-item-name-house { color: rgba(255, 255, 255, .72); opacity: 1; }

/* "Falar com o restaurante · Abrir WhatsApp" e o botão "Contacto" que lá
   leva: a demonstração não tem WhatsApp DE PROPÓSITO, e sem número o botão
   abria o WhatsApp sem destinatário e com o nome errado na mensagem. */
#loyalty-card,
.quick-nav-btn[data-target="loyalty-card"] { display: none !important; }

/* O TheFork está vazio no config (o molde apontava para um restaurante
   real); o motor mostrava a opção na mesma e o link recarregava a carta. */
#review-thefork { display: none !important; }

/* As bolinhas de cor das caldas e dos toppings ficam: a preto e branco o
   morango, a framboesa e os mirtilos davam três bolas cinzento-escuro
   iguais; a cores dizem o que são, no passo mais carregado da montagem. */


/* ══════════════════════════════════════════════════════════════════════════
   O MENU PEQUENO-ALMOÇO E OS AVISOS — o que veio das cartas com mesa
   ──────────────────────────────────────────────────────────────────────────
   A pergunta que aparece ao juntar um salgado (`extraOffer` no config,
   `showExtraSheet()` no script.js), o aviso do menu no fim da carta
   (`menuDoDia`) e o aviso de alergénios. O desenho é o de uma folha que
   sobe do fundo: o polegar está lá.
   ══════════════════════════════════════════════════════════════════════════ */

#nm-extra-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(51, 38, 31, .42);
  opacity: 0;
  transition: opacity .22s var(--ease-out);
}
#nm-extra-sheet.show { opacity: 1; }
.nm-extra-card {
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: 28px;
  padding: 22px 20px 16px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translateY(24px);
  transition: transform .34s var(--ease-spring);
}
#nm-extra-sheet.show .nm-extra-card { transform: translateY(0); }
.nm-extra-emoji {
  width: 58px; height: 58px;
  margin: -50px auto 8px;
  display: grid; place-items: center;
  font-size: 28px;
  background: var(--coral-claro);
  border: 1px solid rgba(184, 155, 102, .45);
  border-radius: 50%;
  box-shadow: var(--sombra-casa);
}
.nm-extra-q { font-family: var(--font-serif); font-weight: 400; font-size: 23px; line-height: 1.15; color: var(--text); margin: 0 0 6px; }
.nm-extra-detail { font-size: 14px; font-weight: 600; color: var(--text-muted); margin: 0; }
.nm-extra-for { font-size: 12px; font-weight: 700; color: var(--muted); margin: 6px 0 14px; letter-spacing: .02em; }
.nm-extra-for::before { content: "+ "; }
.nm-extra-for:empty { display: none; }
.nm-extra-actions { display: grid; gap: 8px; }
.nm-extra-yes,
.nm-extra-no {
  min-height: 50px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform .15s var(--ease-out);
}
.nm-extra-yes { background: var(--accent); color: var(--bg); border: none; box-shadow: var(--shadow-sm); }
.nm-extra-no  { background: transparent; color: var(--text-muted); border: 1.5px solid var(--border); }
.nm-extra-yes:active, .nm-extra-no:active { transform: scale(.97); }
.nm-extra-yes:focus-visible, .nm-extra-no:focus-visible { outline: 3px solid rgba(184, 155, 102, .4); outline-offset: 2px; }

.menu-do-dia {
  margin: 8px var(--s3) 14px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(232, 201, 190, .5), transparent 62%),
    #F3EBDC;
  border: 1px solid rgba(184, 155, 102, .32);
}
.menu-do-dia-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.menu-do-dia-label { font-family: var(--font-serif); font-weight: 400; font-size: 19px; color: var(--text); }
.menu-do-dia-price { font-family: var(--font-serif); font-weight: 400; font-size: 18px; color: var(--text); white-space: nowrap; }
.menu-do-dia-desc { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.menu-allergen-notice {
  margin: 6px var(--s3) 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   VIDA — o cabeçalho, o selo e o banner por hora (skill carta-com-vida)
   ──────────────────────────────────────────────────────────────────────────
   O QUE ESTAVA MAL
   A demonstração era a única carta sem faixa por hora (`timeBanners: []`),
   o cabeçalho era um toldo cinzento com uma mascote no canto, e a página
   não respondia a nada — um prato a mais no pedido não tinha um único
   sinal de que tinha entrado. É a carta que a landing abre a cada dono que
   está a decidir; era a mais parada de todas.

   O QUE SE FEZ — as quatro camadas, no volume CALMO, só com o que a casa
   já tem:
     1. o fundo do cabeçalho: liso — o cacau é o fundo;
     2. o selo: a frase do `heroStamp` num anel de ouro a rodar devagar à
        volta do cone;
     3. o banner por hora: cinco faixas, cada uma com o seu palco de três
        ilustrações da carta, o tom de sorvete da hora (o linho de manhã,
        o pistácio ao almoço, o rosé à tarde, o damasco no spritz, o cacau
        à noite), e o toque a levar à secção de que fala;
     4. micro-vida: a bola do símbolo respira e a estrela brilha, a carta
        entra escalonada, o filete do título desenha-se, o "+" dá um salto
        curto e manda uma bola de gelado para o pedido.

   O CONTRATO
   Tudo `aria-hidden`, `pointer-events: none`, atrás do texto (`isolation`
   no .hero + z-index), e movimento SÓ em `prefers-reduced-motion:
   no-preference`, com `transform`/`opacity` (composição, sem layout).
   As entradas do cabeçalho e do banner são @keyframes com `both`: acabam
   sempre visíveis, com ou sem JS. A única coisa escondida à espera é o
   prato que ainda não chegou ao ecrã — armada pelo JS (`casa-anim`), com
   rede de segurança lá: sem o JS, ou num separador escondido, nada fica
   invisível.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · O fundo do cabeçalho ──────────────────────────────────────────
   Liso, de propósito: o cacau É o fundo. A única peça é o selo, abaixo. */

/* ── 2 · O selo ──────────────────────────────────────────────────────── */
.casa-selo {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 54px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(247, 242, 235, .04);
  border: 1px solid rgba(184, 155, 102, .55);
  pointer-events: none;
}
.casa-selo-anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.casa-selo-txt {
  fill: var(--ouro-texto);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.casa-selo-cone {
  position: absolute;
  left: 50%; top: 50%;
  width: 30px; height: 30px;
  margin: -16px 0 0 -15px;
  rotate: 10deg;
}
@media (max-width: 360px) {
  .casa-selo { width: 54px; height: 54px; right: 8px; top: 54px; }
  .casa-selo-cone { width: 26px; height: 26px; margin: -14px 0 0 -13px; }
}

/* ── 3 · O banner por hora ─────────────────────────────────────────────
   O style.css do motor pinta este bloco com as cores do Marisca escritas
   à mão (gotcha_motor_cores_marisca): redefine-se o bloco, o ::before, o
   ::after, o fantasma, o texto e a contagem. */
.special-banner {
  --bn-a: #FBF6EE;            /* luz do cartão */
  --bn-b: #F2E8D8;            /* cor do cartão — o linho da manhã */
  --bn-c: #E6D5BC;            /* sombra do cartão */
  --bn-disco: #FFFDF9;
  --bn-tinta: #33261F;
  --bn-tinta-2: #5E4E45;

  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 18px var(--s3) 6px !important;
  padding: 0 !important;
  min-height: 132px;
  border: 1px solid rgba(184, 155, 102, .28) !important;
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--bn-a) 0%, transparent 58%),
    linear-gradient(160deg, var(--bn-b) 30%, var(--bn-c) 100%) !important;
  box-shadow: var(--sombra-casa);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease-out);
}
.special-banner:active { transform: scale(.98); }
.special-banner:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.special-banner::before,
.special-banner::after { display: none !important; }
.special-banner .banner-art { display: none !important; }   /* o toldo cinzento antigo */

.special-banner[data-casa-bn="brunch"]     { --bn-a: #F7F8EF; --bn-b: #E6EAD6; --bn-c: #D3DABD; }
.special-banner[data-casa-bn="frozen"]     { --bn-a: #FCF3EF; --bn-b: #F2DFD7; --bn-c: #E6C6B9; }
.special-banner[data-casa-bn="happy-hour"] { --bn-a: #FCF1E7; --bn-b: #F2DCC8; --bn-c: #E4C1A3; }
/* Depois das oito, o cartão passa a cacau — a casa à noite. */
.special-banner[data-casa-bn="noite"]      { --bn-a: #5A453A; --bn-b: #3E2E26; --bn-c: #2A1F1A;
                                             --bn-disco: #4A382F; --bn-tinta: #F7F2EB; --bn-tinta-2: rgba(247, 242, 235, .78); }

.special-banner .special-banner-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 15px 0 30px 16px;
  max-width: 60%;
}
.special-banner .special-banner-label {
  display: inline-block;
  background: var(--bn-tinta);
  color: var(--bn-b) !important;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  margin: 0;
}
.special-banner .special-banner-headline {
  font-style: normal !important;
  color: var(--bn-tinta) !important;
  font-family: var(--font-serif) !important;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.005em;
  text-shadow: none !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 0;
}
.special-banner .special-banner-text {
  display: block !important;
  font-style: normal !important;
  color: var(--bn-tinta-2) !important;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}
.special-banner .special-banner-ghost { display: none !important; }
@media (max-width: 360px) {
  .special-banner .special-banner-headline { font-size: 19px; }
}
/* "Ver na carta →" — escrito pelo nexo-casa.js na língua da carta. */
.casa-bn-ir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--bn-tinta);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.casa-bn-ir:empty { display: none; }

/* A contagem da hora do spritz, em tinta sobre o cartão. */
.special-banner .special-cd {
  margin-top: 4px;
  background: rgba(255, 253, 249, .7);
  border: 1px solid rgba(184, 155, 102, .3);
  color: var(--text);
}
.special-banner .special-cd-top,
.special-banner .cd-unit-lbl,
.special-banner .cd-colon { color: var(--text-muted) !important; }
.special-banner .cd-digit { color: var(--text) !important; font-family: var(--font-serif); font-weight: 400; }
.special-banner .special-cd.urgent .cd-digit { color: var(--coral-tinta) !important; }

.casa-bn-palco {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44%;
  pointer-events: none;
}
.casa-bn-disco {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 84px;
  height: 84px;
  margin-top: -52px;
  border-radius: 50%;
  background: var(--bn-disco);
  border: 1px solid rgba(184, 155, 102, .4);
  box-shadow: var(--sombra-casa);
}
.casa-bn-p {
  position: absolute;
  display: block;
  object-fit: contain;
}
.casa-bn-p1 { width: 88px; height: 88px; right: 20px; top: 50%; margin-top: -56px; }
.casa-bn-p2 { width: 56px; height: 56px; right: 94px; bottom: 14px; rotate: -10deg; }
.casa-bn-p3 { width: 46px; height: 46px; right: 8px;  top: 8px;     rotate: 12deg; }
/* ── 4 · Movimento — só para quem não pediu menos ───────────────────────
   Durações da casa: o que responde a um toque, 150–300 ms; o que vive
   sozinho, 4–9 s, em ease-in-out e com amplitude de 2–4 px. */
@media (prefers-reduced-motion: no-preference) {

  /* O símbolo: o sol roda devagar, a bola boia. */
  .casa-logo-estrela { transform-box: fill-box; transform-origin: center; animation: casa-cintilar 6s ease-in-out infinite alternate; }
  .casa-logo-bola    { animation: casa-boiar 7s ease-in-out infinite alternate; }

  /* O selo roda; o cone boia. */
  .casa-selo-anel  { animation: casa-rodar 40s linear infinite; }
  .casa-selo-cone  { animation: casa-boiar 6.5s ease-in-out infinite alternate; }

  /* O banner. */

  /* As ilustrações dos mais pedidos respiram, desfasadas. */
  /* (o boiar da ilustração vai com a entrada, em "A ENTRADA") */

  /* ── A ENTRADA ─────────────────────────────────────────────────────
     O cabeçalho chega em coreografia: o símbolo cai e assenta, o nome
     sobe, as linhas seguem, o selo é carimbado. Por @keyframes com
     `both` e não por uma classe posta pelo JS: começa no primeiro desenho
     (sem um clarão da página pronta antes de esconder), e acaba SEMPRE
     visível, com ou sem JS. */
  .casa-logo    { animation: casa-cai .9s var(--ease-out) .05s both; }
  .hero-name    { animation: casa-sobe .8s var(--ease-out) .18s both; }
  .hero-tagline { animation: casa-sobe .8s var(--ease-out) .32s both; }
  .hero-meta    { animation: casa-sobe .8s var(--ease-out) .42s both; }
  .casa-tempo   { animation: casa-sobe .8s var(--ease-out) .1s both; }
  .casa-selo    { animation: casa-carimba 1.1s var(--ease-out) .4s both; }

  /* O palco do banner salta para o lugar quando o banner aparece (uma
     animação começa quando o elemento passa a ser desenhado — o motor
     tira o display:none quando escolhe a faixa). Somam-se ao boiar, que
     mexe noutra propriedade. */
  .special-banner .casa-bn-disco { animation: casa-salta .6s var(--ease-spring) .05s both; }
  .special-banner .casa-bn-p1 { animation: casa-salta .8s var(--ease-out) .14s both, casa-boiar 6.5s ease-in-out .9s infinite alternate; }
  .special-banner .casa-bn-p2 { animation: casa-salta .8s var(--ease-out) .26s both, casa-boiar-2 7.5s ease-in-out 1s infinite alternate; }
  .special-banner .casa-bn-p3 { animation: casa-salta .8s var(--ease-out) .36s both, casa-boiar-3 6s ease-in-out 1.1s infinite alternate; }

  /* Os cartões dos mais pedidos chegam um a um. Anima-se o que está
     DENTRO do cartão e não o cartão: a faixa tem scroll-snap, e o browser
     encaixava no cartão deslocado do primeiro fotograma — a faixa abria
     24px adiantada, com o primeiro cartão cortado à esquerda. */
  .most-ordered-card > * { animation: casa-sobe .55s var(--ease-out) both; }
  .most-ordered-card:nth-child(2) > * { animation-delay: .07s; }
  .most-ordered-card:nth-child(3) > * { animation-delay: .14s; }
  .most-ordered-card:nth-child(4) > * { animation-delay: .21s; }
  .most-ordered-card > .casa-mo-foto { animation: casa-salta .8s var(--ease-out) both, casa-boiar 7s ease-in-out .8s infinite alternate; }

  /* Os pratos entram quando se aproximam do ecrã: isto precisa de saber
     onde está o ecrã, por isso é armado pelo nexo-casa.js (`casa-anim` no
     <html>, `data-casa-armado` em cada prato, `is-in` à passagem) — e tem
     rede de segurança lá. Sem a classe, nada disto esconde coisa nenhuma. */
  .casa-anim .menu-item[data-casa-armado] { opacity: 0; translate: 0 14px; }
  .casa-anim .menu-item[data-casa-armado] .menu-item-photo { scale: .82; }
  .casa-anim .menu-item[data-casa-armado].is-in {
    opacity: 1; translate: 0 0;
    transition: opacity .45s var(--ease-out) var(--casa-atraso, 0ms),
                translate .55s var(--ease-out) var(--casa-atraso, 0ms);
  }
  .casa-anim .menu-item[data-casa-armado].is-in .menu-item-photo {
    scale: 1;
    transition: scale .6s var(--ease-spring) calc(var(--casa-atraso, 0ms) + 80ms);
  }
  /* O pingo do título pinta-se da esquerda para a direita. */
  .casa-anim .menu-section-title[data-casa-armado]::after { scale: 0 1; }
  .casa-anim .menu-section-title[data-casa-armado].is-in::after { scale: 1 1; transition: scale .7s var(--ease-out) .1s; }

  /* ── O TOQUE ───────────────────────────────────────────────────────
     O "+" dá um salto (a mola do motor, mais curta) e o guardar faz pop. */
  .menu-item-add-btn { transition: transform .2s var(--ease-spring), background-color .2s ease; }
  .menu-item-add-btn:active { transform: scale(.86); }
  .menu-item-add-btn.casa-salto { animation: casa-salto .5s var(--ease-spring); }
  .menu-item-bookmark.saved svg { animation: casa-salto .45s var(--ease-spring); }
  .quick-nav-btn { transition: transform .16s var(--ease-out); }
  .quick-nav-btn:active { transform: scale(.95); }
  .cart-pill.pop { animation: casa-pedido .45s var(--ease-spring); }
  .lang-toggle button { transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
  .lang-toggle button:active { transform: scale(.9); }
}

/* A bola de gelado que voa do "+" para o pedido (nexo-casa.js, Web
   Animations). Fora do fluxo, por cima de tudo e sem tocar em nada. */
.casa-voo {
  position: fixed;
  left: 0; top: 0;
  z-index: 1300;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px rgba(255, 253, 249, .95), 0 0 0 3px rgba(184, 155, 102, .6), 0 8px 16px -6px rgba(51, 38, 31, .45);
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes casa-rodar    { to { transform: rotate(360deg); } }
@keyframes casa-cai      { from { opacity: 0; scale: .8; translate: 0 -6px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes casa-sobe     { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes casa-carimba  { from { opacity: 0; scale: .9; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes casa-salta    { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
@keyframes casa-boiar    { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes casa-boiar-2  { from { translate: 0 0; rotate: -10deg; } to { translate: 0 -3px; rotate: -8deg; } }
@keyframes casa-boiar-3  { from { translate: 0 0; rotate: 12deg; } to { translate: 0 -3px; rotate: 9deg; } }
@keyframes casa-onda     { to { transform: translateX(-50%); } }
@keyframes casa-cintilar { from { opacity: .45; scale: .82; } to { opacity: 1; scale: 1.06; } }
@keyframes casa-respirar { from { opacity: .55; } to { opacity: 1; } }
@keyframes casa-brilho   { 0% { translate: -120% 0; } 18%, 100% { translate: 120% 0; } }
@keyframes casa-halo     { 0% { opacity: .7; scale: 1; } 70%, 100% { opacity: 0; scale: 1.08; } }
@keyframes casa-salto    { 0% { scale: 1; } 35% { scale: 1.12; } 100% { scale: 1; } }
@keyframes casa-pedido   { 0% { scale: 1; } 40% { scale: 1.06; } 100% { scale: 1; } }


/* ══════════════════════════════════════════════════════════════════════════
   MESA EM GRUPO — o carrinho partilhado, nas cores da casa
   O motor (e o <style> do index.html, que vem do molde) pinta-o em
   cinzento-de-tinta. Aqui é o linho com um filete de ouro; o código das 4
   letras em Prata, que é o que se lê em voz alta à mesa.
   ══════════════════════════════════════════════════════════════════════════ */
.nexo-shared-trigger {
  background: var(--bg-alt) !important;
  border: 1px solid rgba(184, 155, 102, .35) !important;
  color: var(--text-muted) !important;
  border-radius: 14px !important;
}
.nexo-shared-trigger svg { color: var(--ouro); flex-shrink: 0; }
#shared-cart-q { color: var(--text-muted) !important; font-weight: 500; }
#shared-cart-cta { background: var(--accent) !important; color: var(--bg) !important; font-weight: 600 !important; }
.nexo-shared-header { background: var(--bg-alt) !important; border-color: rgba(184, 155, 102, .35) !important; }
.shared-cart-code-chip {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  border-color: rgba(184, 155, 102, .45) !important;
}
.shared-cart-leave-btn { border-color: var(--border) !important; color: var(--text) !important; }
.nexo-shared-code { font-family: var(--font-serif); font-weight: 400; color: var(--text); letter-spacing: .18em; }