/* =====================================================================
   Bellumi — Cardápio de Experiências · versão web alinhada ao PDF
   Releitura web do cardápio Bellumi 2026 em 10 páginas.
   CSS puro, mobile-first, sem frameworks e sem dependências externas.

   A diferença para o protótipo 1 é de linguagem visual, não de conteúdo.
   O PDF é a referência de paleta, tipografia e ornamento, mas a página não
   é paginada: o conteúdo corre em faixas de largura inteira, separadas pelo
   filete dourado com o coração da marca. Sem moldura de página, sem número
   de página, sem cartão flutuando sobre o fundo.
   ===================================================================== */

/* ---------- Tokens da marca ----------
   Os valores vinho, creme e dourado foram amostrados diretamente das artes
   em assets/img/cardapio/ do protótipo 1, para o site e o PDF fecharem
   na mesma paleta. */
:root {
  --vinho-900: #4a0d14;   /* faixas, tabela e blocos escuros */
  --vinho-800: #521114;   /* títulos */
  --vinho-700: #6b1a22;

  --dourado: #b37214;         /* ícones e detalhes, amostrado das artes */
  --dourado-linha: #d4a857;   /* molduras e filetes */
  --dourado-claro: #e0b464;   /* texto e ícones sobre vinho */
  --dourado-texto: #8a5a10;   /* texto pequeno sobre creme: 4,5:1 */

  --papel-claro: #fef6ea;  /* fundo de tudo: faixas, documento e impressão */
  --creme: #f9ead7;        /* cartões, listas e blocos, um degrau mais fechado */

  --tinta: #3d2318;        /* texto corrido, marrom quente */
  --tinta-suave: #6b4a3a;
  --whatsapp: #25d366;

  --fonte-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fonte-corpo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raio: 8px;
  --raio-p: 6px;
  --sombra-forte: 0 18px 44px rgba(74, 13, 20, .16);
  --transicao: 240ms cubic-bezier(.22, .61, .36, 1);
  --largura: 1140px;
  --cabecalho-altura: 58px;

  --fs-h1: 2.4rem;
  --fs-h2: 2rem;
  --fs-h3: 1.2rem;
  --fs-capa-manuscrito: 1.9rem;
  --fs-capa-frase: 1.15rem;
  --fs-lead: 1.12rem;
  --fs-tagline: 1.25rem;
  --fs-citacao: 1.05rem;
  --fs-titulo-bloco: 1.35rem;
  --fs-titulo-bloco-grande: 1.9rem;
  --fs-fecho: 1.1rem;
  --fs-valor: 1.35rem;
  --fs-destaque-titulo: 1.15rem;
  --fs-cartao-titulo: 1.25rem;
  --fs-preco-nome: 1.25rem;
  --fs-preco-moeda: 1.1rem;
  --fs-preco-inteiro: 2.8rem;
  --fs-preco-centavos: 1.2rem;
  --fs-precos-linha: 1.2rem;
  --fs-como-marca: 1.2rem;
  --fs-personalizacao-preco: 1.4rem;
  --fs-contato-marca: 1.9rem;
  --fs-rodape-slogan: 1.2rem;
}
@media (min-width: 62rem) {
  :root {
    --cabecalho-altura: 66px;
    --fs-h1: 4.2rem;
    --fs-h2: 3.2rem;
    --fs-h3: 1.5rem;
    --fs-capa-manuscrito: 3.2rem;
    --fs-capa-frase: 1.35rem;
    --fs-lead: 1.28rem;
    --fs-tagline: 1.6rem;
    --fs-citacao: 1.2rem;
    --fs-titulo-bloco: 1.75rem;
    --fs-titulo-bloco-grande: 2.8rem;
    --fs-fecho: 1.32rem;
    --fs-valor: 1.7rem;
    --fs-destaque-titulo: 1.4rem;
    --fs-cartao-titulo: 1.55rem;
    --fs-preco-nome: 1.5rem;
    --fs-preco-moeda: 1.4rem;
    --fs-preco-inteiro: 4.2rem;
    --fs-preco-centavos: 1.7rem;
    --fs-precos-linha: 1.5rem;
    --fs-como-marca: 1.45rem;
    --fs-personalizacao-preco: 1.9rem;
    --fs-contato-marca: 2.4rem;
    --fs-rodape-slogan: 1.55rem;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecalho-altura) + 12px); }

body {
  margin: 0;
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  /* Cormorant tem olho pequeno: sobe um degrau para manter a leitura confortável */
  font-size: 1.1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* mesmo creme das faixas: se sobrar qualquer fresta entre blocos, ela não
     aparece como uma tira de cor diferente */
  background-color: var(--papel-claro);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vinho-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.1; margin: 0 0 .45em; font-weight: 500; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 .9rem; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; cursor: pointer; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.largura { width: min(100% - 2rem, var(--largura)); margin-inline: auto; }

.pular {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--vinho-700); color: #fff;
  font-family: var(--fonte-ui); font-size: .9rem;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--raio-p) var(--raio-p);
  text-decoration: none; transition: top var(--transicao);
}
.pular:focus { top: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Ornamentos da marca ----------
   Coração, rosácea e losango vêm do sprite inline no HTML e são usados
   como separadores, marcadores de lista e assinatura de rodapé de página. */
.orn { fill: var(--dourado-linha); flex: none; }
.orn--coracao { width: 13px; height: 13px; }
.orn--flor { width: 22px; height: 22px; }
.orn--losango { width: 9px; height: 9px; }

/* Filete: linha dourada com ornamento ao centro, o separador do PDF */
.filete {
  display: flex; align-items: center; gap: .8rem;
  margin: clamp(1.6rem, 4vw, 2.4rem) 0;
  color: var(--dourado-linha);
}
.filete::before, .filete::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dourado-linha) 45%, var(--dourado-linha) 55%, transparent);
}
.filete--curto { width: min(100%, 22rem); margin-inline: auto; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.7rem; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--fonte-ui); font-size: .88rem; font-weight: 600; letter-spacing: 0;
  text-decoration: none; text-align: center;
  transition: transform var(--transicao), background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.botao:hover { transform: translateY(-2px); }
.botao--zap { background: var(--vinho-700); color: #fff; box-shadow: 0 8px 22px rgba(74, 13, 20, .26); }
.botao--zap:hover { background: var(--vinho-800); }
.botao--dourado { background: var(--dourado); color: #fff; box-shadow: 0 8px 22px rgba(179, 114, 20, .28); }
.botao--dourado:hover { background: #c8831c; }
.botao--contorno { background: transparent; color: var(--dourado-claro); border-color: rgba(224, 180, 100, .55); }
.botao--contorno:hover { background: rgba(224, 180, 100, .12); }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transicao), border-color var(--transicao);
}
.cabecalho.rolado {
  background-color: rgba(254, 246, 234, .95);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--dourado-linha);
}
.cabecalho__interno {
  width: min(100% - 1.5rem, var(--largura));
  margin-inline: auto;
  min-height: var(--cabecalho-altura);
  display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
}
.marca { display: none; }
.marca img { width: 168px; height: auto; }

.hamburguer {
  display: grid; place-content: center; gap: 5px;
  width: 46px; height: 40px; padding: 0;
  background: rgba(254, 246, 234, .88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--dourado-linha); border-radius: var(--raio-p);
}
.hamburguer span {
  display: block; width: 22px; height: 2px; background: var(--vinho-700);
  transition: transform var(--transicao), opacity var(--transicao);
}
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.navegacao {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papel-claro);
  border-bottom: 1px solid var(--dourado-linha);
  padding: 1rem 1.25rem 1.5rem;
  display: none;
  box-shadow: var(--sombra-forte);
}
.navegacao.aberto { display: block; }
.navegacao ul { display: grid; gap: .2rem; margin-bottom: 1rem; }
.navegacao ul a {
  display: block; padding: .6rem .4rem;
  font-family: var(--fonte-ui); font-size: .9rem; font-weight: 500;
  text-decoration: none; color: var(--tinta);
  border-bottom: 1px solid rgba(212, 168, 87, .35);
}
.navegacao ul a:hover, .navegacao ul a.ativo { color: var(--vinho-700); }
.navegacao__cta { width: 100%; }

@media (min-width: 62rem) {
  .cabecalho {
    position: sticky;
    background-color: rgba(254, 246, 234, .93);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--dourado-linha);
  }
  .hamburguer { display: none; }
  .navegacao {
    position: static; display: flex; align-items: center; gap: 1.5rem;
    background: transparent; border: 0; padding: 0; box-shadow: none;
  }
  .navegacao ul { display: flex; gap: 1.4rem; margin: 0; }
  .navegacao ul a { border: 0; padding: .35rem 0; position: relative; }
  .navegacao ul a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--dourado); transition: right var(--transicao);
  }
  .navegacao ul a:hover::after, .navegacao ul a.ativo::after { right: 0; }
  .navegacao__cta { width: auto; padding: .58rem 1.3rem; }
  .cabecalho__interno { justify-content: space-between; }
  .marca { display: block; line-height: 0; }
  .marca img { width: 146px; }
}

/* ---------- Faixas de conteúdo ----------
   O PDF é paginado; a web não precisa ser. Aqui não há moldura de página nem
   numeração: o conteúdo corre em faixas de largura inteira, todas no mesmo
   creme, e a identidade do PDF fica por conta da paleta, dos ornamentos, da
   tipografia serifada e das bordas douradas de 1 px nos blocos. */
.faixa-conteudo {
  /* o respiro generoso em cima e embaixo é o que dá ar à divisória */
  padding: clamp(3.6rem, 9vw, 6.5rem) 0;
  position: relative;
  background: var(--papel-claro);
}
/* Uma cor só, do começo ao fim, como o papel do PDF. Quem separa as seções
   é o filete com o coração, não a troca de fundo. O contraste dos blocos vem
   do creme mais fechado dos cartões e do vinho das caixas de destaque. */

/* Divisória entre seções: o filete dourado com o coração ao centro, o mesmo
   separador do PDF. É ele que marca onde uma "página" termina e a próxima
   começa, no lugar da moldura e da numeração. */
.faixa-conteudo + .faixa-conteudo::before,
.capa + .faixa-conteudo::before,
.rodape.faixa-conteudo::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100% - 2rem, var(--largura)); height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--dourado-linha) 22%, var(--dourado-linha) 46.5%,
    transparent 46.5%, transparent 53.5%, var(--dourado-linha) 53.5%,
    var(--dourado-linha) 78%, transparent);
}
.faixa-conteudo + .faixa-conteudo::after,
.capa + .faixa-conteudo::after,
.rodape.faixa-conteudo::after {
  content: '';
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 13px;
  background-color: var(--dourado);
  -webkit-mask: var(--mask-coracao) center / contain no-repeat;
  mask: var(--mask-coracao) center / contain no-repeat;
}

/* ---------- Capa ----------
   Marca, título e índice em cima; foto do carrinho contida logo abaixo, na
   mesma ordem da página 1 do PDF. */
.capa {
  text-align: center;
  background: var(--papel-claro);
  /* o respiro fica como padding da capa, não como margem da figura: margem de
     último filho colapsa para fora da seção e abre um vão antes da divisória */
  padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
}
.capa__marca {
  padding: clamp(5.5rem, 14vw, 8rem) 0 clamp(2.2rem, 6vw, 3.4rem);
  background: var(--papel-claro);
}
.capa__logo { width: min(84%, 420px); margin: 0 auto 1.4rem; }
.capa h1 {
  color: var(--vinho-800);
  margin-bottom: .1em;
  letter-spacing: 0;
}
/* "de Colher" manuscrito em dourado, como na capa do PDF */
.capa__manuscrito {
  display: block;
  font-family: var(--fonte-corpo); font-style: italic; font-weight: 500;
  font-size: var(--fs-capa-manuscrito);
  color: var(--dourado); line-height: 1.1; margin-top: -.1em;
}

.sobrelinha {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--fonte-ui);
  font-size: .72rem; letter-spacing: 0; text-transform: uppercase;
  color: var(--dourado-texto); font-weight: 600; margin-bottom: 1rem;
}
.sobrelinha::before, .sobrelinha::after {
  content: ''; width: clamp(1.5rem, 5vw, 3rem); height: 1px; background: var(--dourado-linha);
}

.capa__frase {
  font-size: var(--fs-capa-frase);
  color: var(--tinta-suave);
  max-width: 42ch; margin: 1.2rem auto 1.8rem;
}

/* A foto do carrinho é retrato (1000 × 1333) e mostra o carrinho inteiro.
   Fica contida, na proporção do arquivo: qualquer recorte panorâmico cortaria
   as rodas ou a placa da marca. */
.capa__figura {
  width: min(100% - 2rem, 420px);
  margin: 0 auto;
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.capa__figura img { width: 100%; height: auto; }

/* Índice da capa: ícone + nome, como a régua de quatro itens do PDF */
.capa__indice {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .8rem 1rem; max-width: 34rem; margin-inline: auto;
}
@media (min-width: 40rem) { .capa__indice { grid-template-columns: repeat(4, 1fr); } }
.capa__indice a {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .7rem .4rem;
  font-family: var(--fonte-ui); font-size: .78rem; letter-spacing: 0;
  text-decoration: none; color: var(--vinho-800);
  border: 1px solid transparent; border-radius: var(--raio-p);
  transition: background var(--transicao), border-color var(--transicao);
}
.capa__indice a:hover { background: var(--creme); border-color: var(--dourado-linha); }
.capa__indice .ico-grande { width: 26px; height: 26px; fill: var(--dourado); }

/* ---------- Seções ---------- */
.secao h2 { color: var(--vinho-800); }

/* Cabeçalho de seção centralizado, como as aberturas de página do PDF */
.abertura { text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.abertura .tagline { margin-inline: auto; }

.lead {
  font-size: var(--fs-lead);
  max-width: 62ch;
  color: var(--tinta);
}
.abertura .lead, .lead--centro { margin-inline: auto; }
.lead strong { color: var(--vinho-700); font-weight: 600; }

.texto { max-width: 62ch; color: var(--tinta-suave); }

/* Citação em itálico dourado, o recurso mais repetido do PDF */
.tagline {
  font-style: italic; font-weight: 500;
  font-size: var(--fs-tagline);
  color: var(--dourado-texto); margin-bottom: 1.2rem;
  max-width: 40ch;
}

/* Aspas do bloco de destaque da página 2 */
.citacao {
  position: relative;
  padding: .2rem 0 0 2.2rem;
  font-style: italic; font-size: var(--fs-citacao);
  color: var(--tinta); max-width: 34ch;
}
.citacao::before {
  content: '\201C';
  position: absolute; left: 0; top: -.5rem;
  font-family: var(--fonte-titulo); font-size: 3.4rem; line-height: 1;
  color: var(--dourado-linha);
}

.titulo-bloco {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 1.1rem;
  color: var(--vinho-800);
  font-size: var(--fs-titulo-bloco);
  text-align: center;
}
.titulo-bloco .orn { fill: var(--dourado); }
.titulo-bloco--grande { font-size: var(--fs-titulo-bloco-grande); }

/* Notas: informativas, então ficam na fonte de interface e sem itálico */
.nota {
  font-family: var(--fonte-ui); font-style: normal;
  font-size: .86rem; line-height: 1.6; color: var(--tinta-suave);
}
.nota--centro { text-align: center; max-width: 62ch; margin-inline: auto; }

.aviso {
  background: var(--creme); border: 1px solid var(--dourado-linha);
  border-radius: var(--raio-p);
  padding: 1rem 1.3rem; margin: 1.4rem 0 0;
  font-size: 1.02rem; color: var(--vinho-800); text-align: center;
}
.aviso--investimento {
  display: grid;
  gap: .45rem;
  margin: 1.2rem 0 1.25rem;
}
.aviso--investimento strong {
  font-family: var(--fonte-ui);
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dourado-escuro);
}
.aviso--investimento span {
  max-width: 64ch;
  margin-inline: auto;
}
.aviso--investimento a {
  justify-self: center;
  color: var(--vinho-800);
  font-family: var(--fonte-ui);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(179, 114, 20, .55);
}
.aviso--investimento a:hover,
.aviso--investimento a:focus-visible {
  color: var(--dourado-escuro);
  border-bottom-color: currentColor;
}

.fecho {
  margin: 1.8rem 0 0; padding: 1.3rem 1.6rem;
  background: rgba(212, 168, 87, .14);
  border: 1px solid rgba(224, 180, 100, .45);
  border-radius: var(--raio);
  font-style: italic;
  font-size: var(--fs-fecho);
  text-align: center; color: var(--vinho-800);
}

/* ---------- Galerias e figuras ----------
   Regra geral: nenhuma foto é ampliada além do tamanho real do arquivo e
   nenhuma proporção é forçada em cima de uma imagem que não a tem. Onde há
   recorte, ele só existe em par homogêneo, e o `max-width` de cada figura
   corresponde à largura nativa do arquivo. */
/* Galeria de altura casada: em vez de forçar todas as fotos na mesma proporção
   e cortar o que sobra, iguala-se a ALTURA e deixa a largura variar. A fileira
   fica alinhada, e nenhuma foto perde um pixel. No celular cada uma ocupa a
   linha inteira, na proporção do arquivo. */
.galeria {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .9rem; margin: 1.8rem 0;
}
.galeria__item {
  margin: 0; border-radius: var(--raio-p); overflow: hidden;
  border: 1px solid var(--dourado-linha);
  /* `0 1 auto` nunca estica o item: a foto encolhe se a tela for menor que ela,
     mas jamais é esticada acima do tamanho do arquivo. */
  flex: 0 1 auto;
  max-width: 100%;
}
.galeria__item img {
  width: auto; max-width: 100%; height: auto;
  cursor: zoom-in; transition: transform 500ms cubic-bezier(.22, .61, .36, 1);
}
.galeria__item img:hover { transform: scale(1.04); }

/* Na largura de desktop a fileira casa a altura das fotos, e aí a largura de
   cada uma é que varia: paisagem e retrato lado a lado, sem recorte. */
@media (min-width: 48rem) {
  .galeria__item img { height: 13rem; width: auto; }
}
/* a coluna da equipe é estreita, então lá a altura casada é menor */
@media (min-width: 55rem) {
  .galeria--equipe .galeria__item img { height: 13.5rem; }
}

/* O teto de cada figura é a largura nativa do arquivo, informada em
   --largura-nativa no HTML, ao lado do atributo width da própria imagem.
   Sem isso a coluna estica a foto além do original e ela sai borrada. */
.figura-legenda {
  margin: 0;
  width: min(100%, var(--largura-nativa, 100%));
  margin-inline: auto;
}
.figura-legenda img {
  width: 100%; height: auto;
  border-radius: var(--raio);
  border: 1px solid var(--dourado-linha);
  cursor: zoom-in;
}
/* fotos em retrato não podem esticar até a coluna inteira, senão dominam a faixa */
.figura--retrato { width: min(100%, 380px); margin-inline: auto; }
.figura-legenda figcaption {
  margin-top: .7rem; font-family: var(--fonte-ui);
  font-size: .84rem; text-align: center; color: var(--tinta-suave);
}


/* Foto do Brigadeiro do Cerrado, já com o selo da arte original do PDF */
.figura-selo { position: relative; margin: 0 auto; width: min(100%, 442px); }
.figura-selo img.foto {
  width: 100%; height: auto;
  border-radius: var(--raio);
  border: 1px solid var(--dourado-linha);
  cursor: zoom-in;
}

/* ---------- Layout de duas colunas ---------- */
.duplo { display: grid; gap: 1.8rem; align-items: start; }
@media (min-width: 55rem) {
  .duplo--carrinho { grid-template-columns: 1.05fr .95fr; gap: 2.6rem; align-items: center; }
  .duplo--petit { grid-template-columns: 1fr 1fr; gap: 2.8rem; }
  .duplo--sabores { grid-template-columns: 1fr 1.12fr; gap: 2.4rem; align-items: stretch; }
  .duplo--cerrado { grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; }
  .duplo--personalizacao { grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; }
  .duplo--corporativo { grid-template-columns: 1.1fr .9fr; gap: 2.4rem; align-items: center; }
}

/* ---------- Listas com marcador de coração ----------
   No PDF nenhum marcador é um bullet redondo: são corações dourados.
   O coração vem de uma máscara SVG, então acompanha a cor do texto. */
.lista-coracao li,
.inclusos li,
.lista-sabores li,
.passos li,
.toppings li {
  position: relative;
  padding-left: 1.6rem;
}
.lista-coracao li::before,
.inclusos li::before,
.lista-sabores li::before,
.passos li::before,
.toppings li::before {
  content: '';
  position: absolute; left: 0; top: .58em;
  width: 11px; height: 11px;
  background-color: var(--dourado);
  -webkit-mask: var(--mask-coracao) center / contain no-repeat;
  mask: var(--mask-coracao) center / contain no-repeat;
}

:root {
  /* coração da marca, usado como máscara dos marcadores */
  --mask-coracao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 3.5 13c-2.6-2.6-2.6-6.8 0-9.4a6.2 6.2 0 0 1 8.5-.2 6.2 6.2 0 0 1 8.5.2c2.6 2.6 2.6 6.8 0 9.4Z'/%3E%3C/svg%3E");
}

/* ---------- "A experiência inclui" ---------- */
.cartao-inclui {
  background: var(--creme);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio);
  padding: clamp(1.3rem, 3vw, 1.9rem);
}
.cartao-inclui .titulo-bloco { margin-top: 0; }
.inclusos { display: grid; gap: .72rem; }
.inclusos li { font-size: 1.05rem; }

/* ---------- Tabela de investimento ---------- */
.tabela-envolvente {
  overflow-x: auto;
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio);
  background: var(--papel-claro);
}
.tabela { min-width: 32rem; }
.tabela thead th {
  background: var(--vinho-900); color: var(--creme);
  font-family: var(--fonte-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: 0; text-transform: uppercase;
  padding: .95rem 1.3rem; text-align: left;
}
.tabela thead th:last-child { text-align: center; }
.tabela tbody th {
  text-align: left; font-weight: 500; font-size: 1.08rem;
  padding: .95rem 1.3rem .95rem 2.9rem;
  vertical-align: top; position: relative;
  border-bottom: 1px solid rgba(212, 168, 87, .35);
}
/* coração antes de cada faixa, igual à tabela do PDF */
.tabela tbody th::before {
  content: '';
  position: absolute; left: 1.3rem; top: 1.35rem;
  width: 11px; height: 11px;
  background-color: var(--dourado);
  -webkit-mask: var(--mask-coracao) center / contain no-repeat;
  mask: var(--mask-coracao) center / contain no-repeat;
}
.tabela tbody td {
  text-align: center; font-size: 1.05rem; color: var(--vinho-800);
  padding: .95rem 1.3rem; vertical-align: middle;
  border-bottom: 1px solid rgba(212, 168, 87, .35);
}
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:nth-child(even) th, .tabela tbody tr:nth-child(even) td { background: rgba(249, 234, 215, .55); }
.tabela__nota {
  display: block; margin-top: .35rem;
  font-family: var(--fonte-ui); font-size: .8rem; line-height: 1.55;
  color: var(--tinta-suave); max-width: 40ch;
}
.valor {
  font-family: var(--fonte-titulo); font-size: var(--fs-valor);
  color: var(--vinho-800); font-weight: 500;
}

@media (max-width: 47.999rem) {
  .tabela-envolvente { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .tabela { min-width: 0; display: block; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela tbody { display: grid; gap: .8rem; }
  .tabela tbody tr {
    display: block; border: 1px solid var(--dourado-linha);
    border-radius: var(--raio); overflow: hidden; background: var(--papel-claro);
  }
  .tabela tbody th, .tabela tbody td {
    display: block; width: 100%; text-align: center;
    border-bottom: 0; padding: .9rem 1.1rem;
  }
  .tabela tbody th { padding-left: 1.1rem; background: var(--creme); }
  .tabela tbody th::before { position: static; display: inline-block; margin-right: .5rem; vertical-align: -1px; }
  .tabela tbody tr:nth-child(even) th { background: var(--creme); }
  .tabela tbody tr:nth-child(even) td { background: none; }
  .tabela tbody td { border-top: 1px solid rgba(212, 168, 87, .35); }
  .tabela__nota { max-width: none; margin-inline: auto; }
}

/* Bloco vinho de moldura dupla: o "investimento mínimo" da página 3 */
.destaque-vinho {
  position: relative;
  background: var(--vinho-900); color: var(--creme);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio);
  padding: clamp(1.5rem, 4vw, 2.1rem) clamp(1.3rem, 4vw, 2rem);
  text-align: center;
}
.destaque-vinho::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(224, 180, 100, .45);
  border-radius: calc(var(--raio) - 3px);
  pointer-events: none;
}
.destaque-vinho__titulo {
  font-family: var(--fonte-titulo); font-size: var(--fs-destaque-titulo);
  color: var(--creme); margin-bottom: .6rem; line-height: 1.3;
}
.destaque-vinho__texto {
  margin: 0; font-style: italic; font-size: 1.05rem;
  color: rgba(249, 234, 215, .9);
}

/* ---------- Chamada de orçamento ---------- */
.orcamento {
  position: relative;
  margin-top: 2rem;
  display: grid; gap: 1.3rem; align-items: center;
  background: var(--vinho-900); color: var(--creme);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio); padding: clamp(1.5rem, 4vw, 2.2rem);
  text-align: center;
}
.orcamento::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(224, 180, 100, .4);
  border-radius: calc(var(--raio) - 3px);
  pointer-events: none;
}
.orcamento__rotulo {
  font-family: var(--fonte-ui);
  font-size: .74rem; letter-spacing: 0; text-transform: uppercase;
  color: var(--dourado-claro); font-weight: 600; margin-bottom: .5rem;
}
.orcamento__frase {
  margin: 0; font-size: 1.1rem; line-height: 1.6;
  color: rgba(249, 234, 215, .94); max-width: 52ch; margin-inline: auto;
}
.orcamento__cta { justify-self: center; }

/* ---------- Cartões ---------- */
.cartao {
  background: var(--papel-claro);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio);
  padding: clamp(1.3rem, 3vw, 1.9rem);
}
.cartao h3 {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  color: var(--vinho-800);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-cartao-titulo);
  letter-spacing: 0; text-transform: uppercase; font-weight: 500;
  padding-bottom: .8rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--dourado-linha);
  text-align: center;
}
.cartao h3 .ico-grande { width: 24px; height: 24px; fill: var(--dourado); }
.cartao--classicos { background: var(--creme); }
.duplo--sabores .cartao { display: flex; flex-direction: column; }
.duplo--sabores .lista-sabores, .duplo--sabores .lista-especiais { flex: 1; align-content: space-between; }
.duplo--sabores .cartao .nota { margin: 1rem 0 0; }

/* ---------- Preço em display, como o R$ 590,00 da página 4 ---------- */
.preco-cartao {
  margin: 1.4rem 0;
  background: var(--creme); color: var(--vinho-900);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio); padding: 1.4rem 1.6rem;
  text-align: center;
}
.preco-cartao__nome {
  font-family: var(--fonte-titulo); font-size: var(--fs-preco-nome);
  color: var(--vinho-800); margin-bottom: .3rem;
}
.preco-cartao__nota { margin: 0 0 .8rem; font-family: var(--fonte-ui); font-size: .82rem; color: var(--tinta-suave); }
.preco-cartao__valor {
  display: flex; align-items: baseline; justify-content: center; gap: .2rem;
  font-family: var(--fonte-titulo); color: var(--vinho-800);
  line-height: 1; margin: 0;
}
.preco-cartao__moeda { font-size: var(--fs-preco-moeda); font-weight: 500; }
.preco-cartao__inteiro { font-size: var(--fs-preco-inteiro); font-weight: 600; letter-spacing: 0; }
.preco-cartao__centavos { font-size: var(--fs-preco-centavos); font-weight: 500; }

/* Preço em linha, usado no Brigadeiro do Cerrado */
.precos-linha { display: grid; grid-template-columns: 1fr; gap: .9rem; margin: 1.4rem 0; }
@media (min-width: 30rem) { .precos-linha { grid-template-columns: 1fr 1fr; } }
.precos-linha > li {
  border: 1px solid var(--dourado-linha); border-radius: var(--raio-p);
  padding: .9rem 1rem; text-align: center; background: var(--creme);
}
.precos-linha__rotulo {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--fonte-ui); font-size: .68rem; letter-spacing: 0;
  text-transform: uppercase; color: var(--dourado-texto); font-weight: 600;
  margin-bottom: .35rem;
}
.precos-linha__rotulo .ico { width: 16px; height: 16px; fill: var(--dourado); }
.precos-linha__valor {
  font-family: var(--fonte-titulo); font-size: var(--fs-precos-linha);
  color: var(--vinho-800); margin: 0;
}

/* ---------- Fichas com ícone (2 kg · 2 sabores · até 6) ---------- */
.fichas { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .fichas { grid-template-columns: repeat(3, 1fr); } }
.fichas li {
  text-align: center; padding: 1.1rem .8rem;
  background: var(--creme);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio-p);
}
.fichas .ico-grande { width: 28px; height: 28px; fill: var(--dourado); margin: 0 auto .5rem; }
.fichas__numero {
  display: block; font-family: var(--fonte-titulo);
  font-size: 1.4rem; color: var(--vinho-800); text-transform: uppercase; line-height: 1.1;
}
.fichas__texto { display: block; font-family: var(--fonte-ui); font-size: .78rem; line-height: 1.45; color: var(--tinta-suave); margin-top: .35rem; }

/* ---------- "Como funciona" ---------- */
.como-funciona {
  display: grid; gap: 1.1rem; align-items: start;
  background: var(--creme);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio);
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
@media (min-width: 40rem) { .como-funciona { grid-template-columns: auto 1fr; gap: 1.6rem; } }
.como-funciona__marca {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fonte-titulo); font-size: var(--fs-como-marca);
  color: var(--vinho-800); white-space: nowrap;
}
.como-funciona__marca .ico-grande { width: 26px; height: 26px; fill: var(--dourado); }
.passos { display: grid; gap: .6rem; }
.passos li { font-size: 1.02rem; color: var(--tinta-suave); }

/* ---------- Sabores ---------- */
.lista-sabores { display: grid; gap: .5rem; margin-bottom: 1rem; }
.lista-sabores li { font-size: 1.08rem; }

.lista-especiais { display: grid; gap: .85rem; }
.lista-especiais li {
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(212, 168, 87, .35);
}
.lista-especiais li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-especiais__nome {
  display: block; font-family: var(--fonte-titulo);
  font-size: 1.2rem; font-weight: 500; color: var(--vinho-800);
}
.lista-especiais__preco {
  display: block; margin-top: .1rem;
  font-family: var(--fonte-ui); font-size: .8rem; color: var(--dourado-texto);
}

/* ---------- Toppings com foto, o mosaico da página 6 ---------- */
.toppings-fotos {
  display: grid; gap: 1.2rem .8rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.4rem 0;
}
@media (min-width: 40rem) { .toppings-fotos { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 64rem) { .toppings-fotos { grid-template-columns: repeat(6, 1fr); } }
.toppings-fotos li { text-align: center; }
/* Os arquivos já saem recortados no círculo exato da tigela, com o fundo
   transparente, então aqui não entra borda nem `cover`: a borda dourada é a
   própria borda da louça. 132 px na tela para um arquivo de 264 px = 2x. */
.toppings-fotos img {
  width: min(100%, 132px); height: auto; margin: 0 auto .5rem;
  cursor: zoom-in;
  transition: transform var(--transicao);
}
.toppings-fotos img:hover { transform: scale(1.06); }
.toppings-fotos span {
  display: block; font-size: .98rem; line-height: 1.3; color: var(--tinta);
}

/* Mascote Bellumi ao lado dos toppings, como na página 6.
   Também vem com fundo transparente, então assenta em qualquer faixa. */
.toppings-bloco { display: grid; gap: 1.2rem; align-items: center; justify-items: center; }
@media (min-width: 55rem) { .toppings-bloco { grid-template-columns: 200px 1fr; gap: 2rem; } }
.mascote { width: min(46%, 200px); height: auto; }
@media (min-width: 55rem) { .mascote { width: 100%; } }

/* ---------- Personalização ---------- */
.precos-personalizacao { display: grid; gap: 1.1rem; }
.precos-personalizacao > div {
  background: var(--creme);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio);
  padding: 1.2rem 1.4rem;
  text-align: center;
}
.precos-personalizacao h3 {
  font-family: var(--fonte-ui); font-size: .72rem; letter-spacing: 0;
  text-transform: uppercase; color: var(--dourado-texto); font-weight: 600;
  margin-bottom: .9rem;
}
.precos-personalizacao dl { display: grid; gap: .9rem; }
.precos-personalizacao dt { font-size: 1rem; color: var(--tinta-suave); }
.precos-personalizacao dd {
  font-family: var(--fonte-titulo); font-size: var(--fs-personalizacao-preco);
  color: var(--vinho-800); line-height: 1.1;
}
.precos-personalizacao dd + dt { padding-top: .9rem; border-top: 1px solid rgba(212, 168, 87, .4); }

/* ---------- Grade de ícones dos eventos corporativos ---------- */
.consideramos {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 1.4rem 0;
}
@media (min-width: 40rem) { .consideramos { grid-template-columns: repeat(4, 1fr); } }
.consideramos li {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: .55rem; text-align: center;
  padding: 1.1rem .7rem;
  background: var(--creme);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio-p);
  font-size: .98rem; line-height: 1.3; color: var(--tinta);
}
.consideramos .ico-grande { width: 30px; height: 30px; fill: var(--dourado); }

/* ---------- Cartão de contato ---------- */
.contato-cartao {
  position: relative;
  background: var(--vinho-900); color: var(--creme);
  border: 1px solid var(--dourado-linha);
  border-radius: var(--raio); padding: clamp(1.6rem, 4vw, 2.3rem);
  text-align: center;
}
.contato-cartao::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(224, 180, 100, .4);
  border-radius: calc(var(--raio) - 3px); pointer-events: none;
}
.contato-cartao__marca {
  font-family: var(--fonte-titulo); font-size: var(--fs-contato-marca);
  letter-spacing: 0; margin-bottom: .1rem; color: #fff;
}
.contato-cartao__slogan {
  font-style: italic; font-size: 1.15rem;
  color: var(--dourado-claro); margin-bottom: 1.3rem;
}
.ico { width: 17px; height: 17px; flex: none; fill: var(--dourado-claro); }
.ico--botao { width: 15px; height: 15px; fill: currentColor; }

.rodape__contatos li.contato--ligar,
.contato-cartao__lista li.contato--ligar { display: none; }
@media (max-width: 47.999rem) {
  .rodape__contatos li.contato--ligar,
  .contato-cartao__lista li.contato--ligar { display: flex; }
}

.contato-cartao__lista { display: grid; gap: .65rem; margin-bottom: 1.4rem; }
.contato-cartao__lista li { display: flex; align-items: center; justify-content: center; gap: .55rem; }
.contato-cartao__lista a {
  color: var(--creme); text-decoration: none;
  font-family: var(--fonte-ui); font-size: .9rem;
  border-bottom: 1px solid transparent; transition: border-color var(--transicao);
}
.contato-cartao__lista a:hover { border-bottom-color: var(--dourado-claro); }

/* ---------- Rodapé, releitura da contracapa ---------- */
.rodape { text-align: center; }

.rodape__selo { width: 92px; margin: 0 auto 1.2rem; }
.rodape__logo { width: min(70%, 300px); margin: 0 auto 1rem; }
.rodape__slogan {
  font-style: italic; font-size: var(--fs-rodape-slogan);
  color: var(--vinho-800); margin-bottom: 1.6rem;
}
.rodape__contatos {
  display: grid; gap: .8rem; justify-content: center;
  margin-bottom: 1.8rem; text-align: left;
}
.rodape__contatos li {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: .9rem;
}
.rodape__contatos .ico { width: 20px; height: 20px; fill: var(--dourado); }
.rodape__contatos .ico-envolvente {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--dourado-linha);
}
.rodape__rotulo {
  display: block; font-family: var(--fonte-ui); font-size: .68rem;
  letter-spacing: 0; text-transform: uppercase; color: var(--dourado-texto);
}
.rodape__contatos a, .rodape__valor {
  color: var(--tinta); text-decoration: none; font-size: 1.05rem;
}
.rodape__contatos a:hover { color: var(--vinho-700); text-decoration: underline; }
.rodape__fecho {
  font-style: italic; font-size: 1.08rem; color: var(--tinta-suave);
  max-width: 40ch; margin: 0 auto 1.6rem;
}
.rodape__regras {
  font-family: var(--fonte-ui); font-size: .82rem; line-height: 1.7;
  max-width: 70ch; margin: 0 auto 1.6rem; color: var(--tinta-suave);
}
.rodape__creditos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  font-family: var(--fonte-ui); font-size: .78rem; color: var(--tinta-suave);
  padding-top: 1.3rem; margin: 0;
}

/* ---------- Botões flutuantes ----------
   WhatsApp, download do PDF e voltar ao topo ficam empilhados no canto,
   sempre disponíveis: o PDF não fica preso ao rodapé. */
.flutuantes {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  display: grid; gap: .6rem; justify-items: center;
}
.flutuante {
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(61, 35, 24, .3);
  transition: transform var(--transicao), opacity var(--transicao), background var(--transicao);
  position: relative;
}
.flutuante svg { width: 25px; height: 25px; fill: currentColor; }
.flutuante:hover { transform: translateY(-3px); }
.flutuante--zap { background: var(--whatsapp); color: #fff; order: 3; }
.flutuante--pdf {
  background: var(--vinho-900); color: var(--dourado-claro);
  border: 1px solid var(--dourado-linha);
  order: 2;
}
.flutuante--pdf:hover { background: var(--vinho-800); }
.flutuante--topo {
  background: var(--creme); color: var(--vinho-800);
  border: 1px solid var(--dourado-linha);
  order: 1;
  opacity: 0; pointer-events: none;
}
.flutuante--topo.visivel { opacity: 1; pointer-events: auto; }

/* Rótulo que aparece ao passar o mouse, para o ícone do PDF não ficar mudo */
.flutuante__rotulo {
  position: absolute; right: calc(100% + .55rem); top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  background: var(--vinho-900); color: var(--creme);
  font-family: var(--fonte-ui); font-size: .74rem; letter-spacing: 0;
  padding: .35rem .7rem; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transicao);
}
.flutuante:hover .flutuante__rotulo,
.flutuante:focus-visible .flutuante__rotulo { opacity: 1; }
@media (max-width: 47.999rem) {
  body { padding-bottom: 4.4rem; }
  .flutuantes {
    right: .75rem; bottom: .85rem; transform: none;
    grid-auto-flow: row; grid-auto-columns: auto; gap: .5rem;
  }
  .flutuante { width: 46px; height: 46px; }
  .flutuante svg { width: 22px; height: 22px; }
  .flutuante:hover { transform: translateY(-2px); }
  .flutuante--topo:not(.visivel) { display: none; }
  .flutuante__rotulo { display: none; }
}

/* ---------- Lupa (lightbox) ---------- */
.lupa {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(61, 35, 24, .93);
  display: grid; place-items: center; padding: 1.5rem;
}
.lupa[hidden] { display: none; }
.lupa__img {
  max-width: min(100%, 1000px); max-height: 88vh;
  border-radius: var(--raio); box-shadow: var(--sombra-forte);
}
.lupa__fechar {
  position: absolute; top: 1rem; right: 1rem;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(249, 234, 215, .15); color: var(--creme);
  font-size: 1.8rem; line-height: 1;
}
.lupa__fechar:hover { background: rgba(249, 234, 215, .28); }

/* ---------- Revelar ao rolar ---------- */
[data-revelar] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.22, .61, .36, 1);
}
[data-revelar].visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-revelar] { opacity: 1; transform: none; }
}


/* ---------- Refinos de produção: enquadramento das artes aprovadas ----------
   As três imagens recebidas em 18/08/2026 já trazem o enquadramento visual
   aprovado. Por isso são exibidas sempre inteiras, sem crop e com limite de
   largura/altura para não crescerem além da composição do PDF. */
.figura-arte {
  display: grid;
  place-items: center;
  justify-self: center;
}
.figura-arte img,
.figura-arte img.foto {
  width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
  object-position: center;
}
.figura-arte--petit { width: min(100%, 520px); }
.figura-arte--cerrado { width: min(100%, 500px); }

/* O mascote do PDF funciona como apoio visual, não como imagem principal. */
.toppings-bloco { grid-template-columns: 1fr; }
.mascote {
  width: min(44vw, 150px);
  max-width: 150px;
  height: auto;
  object-fit: contain;
  justify-self: center;
}

@media (min-width: 55rem) {
  .duplo--petit { align-items: center; }
  .figura-arte--petit,
  .figura-arte--cerrado { justify-self: end; }
  .toppings-bloco {
    grid-template-columns: clamp(190px, 18vw, 250px) minmax(0, 1fr);
    gap: clamp(1.75rem, 3vw, 2.8rem);
    align-items: center;
  }
  .mascote { width: 100%; max-width: 250px; }
}

/* Com o item Investimento no menu, reduzimos apenas o espaçamento horizontal
   no desktop para evitar quebra em larguras intermediárias. */
@media (min-width: 62rem) {
  .navegacao { gap: 1rem; }
  .navegacao ul { gap: 1rem; }
  .navegacao ul a { font-size: .84rem; }
}

/* Imagens clicáveis mantêm uma área estável e nunca excedem a viewport. */
.figura-legenda,
.figura-selo,
.galeria__item { min-width: 0; }
.figura-legenda img,
.figura-selo img,
.galeria__item img { max-inline-size: 100%; }

/* ---------- Impressão e exportação para PDF ----------
   Aqui a folha é mais direta que no protótipo 1: a tela já imita o A4, então
   basta refixar a tipografia em pt (os clamp() usam vw, que no papel vira a
   largura da página) e paginar uma seção por folha. */
@page { size: A4; margin: 10mm 9mm; }

@media print {
  html, body {
    background: var(--papel-claro) !important;
    font-size: 9.5pt; line-height: 1.5;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .cabecalho, .flutuantes, .lupa, .pular, .sprite,
  .contato--ligar, .orcamento, .botao { display: none !important; }

  [data-revelar] { opacity: 1 !important; transform: none !important; }
  .largura { width: 100%; }
  p { margin: 0 0 6pt; }

  .faixa-conteudo { padding: 0; }
  .capa, .rodape, .secao { padding: 0; }

  h1 { font-size: 30pt; }
  h2 { font-size: 21pt; }
  h3 { font-size: 11pt; }
  .capa__manuscrito { font-size: 23pt; }
  .sobrelinha { font-size: 7pt; margin-bottom: 5pt; }
  .capa__frase { font-size: 11pt; margin: 6pt auto 9pt; }
  .tagline { font-size: 12pt; margin-bottom: 7pt; }
  .citacao { font-size: 10.5pt; }
  .lead { font-size: 10.5pt; }
  .titulo-bloco { font-size: 13pt; margin: 12pt 0 6pt; }
  .nota { font-size: 7.5pt; }
  .aviso { font-size: 9pt; padding: 6pt 9pt; margin-top: 8pt; }
  .fecho { font-size: 10.5pt; padding: 8pt 10pt; margin-top: 10pt; }
  .valor { font-size: 14pt; }
  .preco-cartao__inteiro { font-size: 30pt; }
  .preco-cartao__centavos { font-size: 13pt; }
  .preco-cartao__moeda { font-size: 11pt; }
  .fichas__numero { font-size: 12pt; }
  .fichas__texto { font-size: 7pt; }
  .lista-sabores li, .inclusos li, .passos li { font-size: 9pt; }
  .lista-especiais__nome { font-size: 10pt; }
  .lista-especiais__preco { font-size: 7pt; }
  .toppings-fotos span { font-size: 8pt; }
  .toppings-fotos img { width: 18mm; }
  .consideramos li { font-size: 8pt; padding: 6pt 4pt; }
  .precos-personalizacao dd { font-size: 15pt; }
  .contato-cartao__marca { font-size: 18pt; }
  .rodape__slogan { font-size: 12pt; }
  .rodape__regras { font-size: 7pt; }
  .rodape__creditos { font-size: 7pt; }

  .capa__logo { width: 58mm; margin-bottom: 6pt; }
  .capa__figura { width: 64mm; margin-bottom: 8pt; }
  .rodape__logo { width: 62mm; }
  .rodape__selo { width: 20mm; }
  .figura-legenda img, .figura-selo img.foto { max-height: 68mm; width: auto; margin-inline: auto; }

  /* a área útil do A4 fica abaixo dos breakpoints de tela: colunas refixadas */
  .duplo--carrinho, .duplo--petit, .duplo--cerrado,
  .duplo--personalizacao { grid-template-columns: 1fr 1fr; gap: 12pt; }
  .duplo--sabores { grid-template-columns: 1fr 1.12fr; gap: 12pt; }
  .duplo--corporativo { grid-template-columns: 1.1fr .9fr; gap: 12pt; }
  .fichas { grid-template-columns: repeat(3, 1fr); }
  .toppings-fotos { grid-template-columns: repeat(5, 1fr); }
  .consideramos { grid-template-columns: repeat(4, 1fr); }
  .capa__indice { grid-template-columns: repeat(4, 1fr); }
  .toppings-bloco { grid-template-columns: 30mm 1fr; }
  .precos-linha { grid-template-columns: 1fr 1fr; }
  .contato-cartao__lista { gap: 4pt; }

  #carrinho, #investimento, #petit, #sabores, #cerrado, #personalizacao, #corporativo { break-before: page; }
  .rodape { break-before: page; }
  .secao h2, .titulo-bloco { break-after: avoid; }
  .tabela-envolvente, .cartao-inclui, .destaque-vinho, .orcamento,
  .cartao, .preco-cartao, .fichas, .contato-cartao, .como-funciona,
  .galeria__item, .figura-legenda, .figura-selo { break-inside: avoid; }
  #carrinho .galeria { flex-wrap: nowrap; gap: 4pt; }
  #carrinho .galeria__item { flex: 0 0 auto; }
  #carrinho .galeria__item img { height: 34mm; width: auto; max-width: none; }
  .mascote { width: 28mm; max-width: 28mm; }
  .tabela tbody tr { break-inside: avoid; }

  .tabela { min-width: 0; display: table; }
  .tabela thead { position: static; width: auto; height: auto; clip: auto; }
  .tabela tbody { display: table-row-group; }
  .tabela tbody tr { display: table-row; }
  .tabela tbody th { display: table-cell; width: auto; padding-left: 22pt; }
  .tabela tbody th::before { position: absolute; left: 9pt; top: 8pt; margin: 0; }
  .tabela tbody td { display: table-cell; width: auto; text-align: center; border-top: 0; }

  a { text-decoration: none; }
}


/* Complementos 2026: fotos reais, vitrine, uso móvel e acessibilidade */
.galeria--petit { margin-block: clamp(1rem, 3vw, 2rem); }
.galeria--petit .galeria__item { flex: 1 1 240px; min-width: 0; }
.galeria--petit .galeria__item img { width: 100%; height: clamp(230px, 33vw, 360px); object-fit: cover; }
.galeria-momentos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(.7rem,2vw,1.2rem); margin-top: 1.6rem; }
.galeria-momentos__item { margin:0; border:1px solid var(--dourado-linha); border-radius: var(--raio); overflow:hidden; background:var(--creme); }
.galeria-momentos__item img { width:100%; height:clamp(210px,33vw,440px); object-fit:cover; display:block; transition:transform var(--transicao); }
.galeria-momentos__item img:hover { transform:scale(1.025); }
@media(min-width:62rem) { .galeria-momentos { grid-template-columns: repeat(4,minmax(0,1fr)); } .galeria-momentos__item img { height:310px; } }
@media(max-width:34rem) { .galeria-momentos__item img { height:220px; } }
@media(prefers-reduced-motion:reduce) { .galeria-momentos__item img {transition:none;} }
#cerrado .figura-selo figcaption { font-family:var(--fonte-ui);font-size:.85rem;max-width:40ch;line-height:1.4;margin-top:.5rem; }
:focus-visible { outline: 3px solid var(--dourado-texto);outline-offset: 3px; }