/* Base do site público. Cores e fontes do layout do Claude Design (tela 09, tokens). */
:root {
  color-scheme: light;
  --bg: #F7EFE4;
  --bg-cardapio: #F5E9DC;
  --superficie: #FFFAF3;
  --superficie-2: #EFE3D3;
  --cartao-produto: #F0DFCC;
  --linha: #DCC8B2;
  --linha-suave: #EADBC8;
  --campo-borda: #CDB59C;
  --tinta: #3A2418;
  --tinta-2: #6B4E3D;
  --tinta-3: #5C3D2A;
  --rotulo: #8A5A3C;
  --vinho: #7A1F24;
  --vinho-forte: #6E1419;
  --vinho-escuro: #5A1418;
  --vinho-hover: #560F13;
  --creme: #FFF6EC;
  --creme-2: #F3DCC6;
  --ouro: #C9A27A;
  --sucesso: #2F6B4F;
  --perigo: #B3261E;
  --perigo-fundo: #F8E5E2;
  --aviso-fundo: #F3E3DF;
  --serifa: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Parisienne', 'Cormorant Garamond', cursive;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --gutter: 16px;
  --raio: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
#app { min-height: 100vh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
.logo { height: auto; }
a { color: var(--vinho); text-underline-offset: 3px; }
a:hover { color: var(--vinho-escuro); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, p { margin: 0; }
hr { border: 0; height: 1px; background: var(--linha-suave); margin: 0; width: 100%; }
.numero { font-variant-numeric: tabular-nums; }
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--vinho); color: var(--creme);
  padding: 10px 16px; border-radius: 999px; font-weight: 700;
}
.pular:focus { top: 8px; }

/* Páginas e textos */
.pagina-estreita {
  width: 100%; max-width: 600px; margin: 0 auto; padding: 16px var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 18px; flex: 1;
}
.pilha { display: flex; flex-direction: column; gap: 14px; }
.titulo { font-family: var(--serifa); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--vinho-escuro); }
.titulo-grande { font-size: clamp(32px, 8vw, 40px); text-wrap: balance; }
.sobretitulo { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rotulo); }
.texto-suave { color: var(--tinta-2); font-size: 15px; }
.texto-pequeno { font-size: 13px; line-height: 1.5; color: var(--tinta-2); text-align: center; }
.carregando { padding: 24px 0; text-align: center; color: var(--tinta-2); }

/* Botões: alvo mínimo de 44px */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 0; font-size: 16px; font-weight: 800; text-decoration: none; text-align: center;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.botao:active:not(:disabled) { transform: scale(.98); }
.botao-primario { background: var(--vinho); color: var(--creme); }
.botao-primario:hover { background: var(--vinho-hover); color: var(--creme); }
.botao-primario:disabled, .botao-primario[aria-disabled="true"] { background: #E3D5C5; color: var(--tinta-2); }
.botao-primario[aria-disabled="true"]:hover { background: #E3D5C5; color: var(--tinta-2); }
.botao-claro { background: var(--creme); color: var(--vinho-forte); }
.botao-claro:hover { color: var(--vinho-hover); }
.botao-claro:disabled { background: #8E3A3E; color: var(--creme-2); }
.botao-contorno { background: transparent; color: var(--vinho); border: 1px solid var(--vinho); }
.botao-desligado { background: transparent; color: var(--tinta-3); border: 1px solid #CDB194; }
.botao-sucesso, .botao-sucesso:hover { background: var(--sucesso); }
.botao-largo { width: 100%; }
.botao-grande { min-height: 52px; padding: 0 26px; }
.botao-serifa { font-family: var(--serifa); font-weight: 600; font-size: 19px; }
.botao-redondo {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie);
  color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none;
}
.link-botao {
  align-self: flex-start; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--vinho);
  font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center;
}

/* Campos */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .rotulo-campo { font-size: 14px; font-weight: 800; }
.campo-opcional { font-weight: 600; color: var(--tinta-2); }
.campo input {
  min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--campo-borda);
  background: var(--superficie); font-size: 16px; width: 100%;
}
.campo input:focus { outline: none; border-color: var(--vinho); box-shadow: 0 0 0 3px rgba(122, 31, 36, .18); }
.campo input[aria-invalid="true"] { border-color: var(--perigo); }
.campo-dica { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.campo-dica:empty { display: none; }
.campo-dica-erro { color: var(--perigo); }

/* Alertas, cartões e valores */
.alerta { border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; }
.alerta-erro { background: var(--perigo-fundo); border: 1px solid #D9A39B; color: #5C2A24; }
.alerta-erro strong { color: #8C1D18; }
.alerta-aviso { background: var(--aviso-fundo); border: 1px solid #D9B3AC; color: var(--vinho-escuro); }
.cartao-info {
  background: var(--superficie); border: 1px solid var(--linha-suave); border-radius: var(--raio);
  padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--tinta-3);
}
.cartao-info strong { color: var(--tinta); }
.linha-valor { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.linha-valor .numero { white-space: nowrap; }
.resumo-total { font-size: 19px; font-weight: 800; color: var(--tinta); }

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

/* Tela 01 — Cardápio */
.topo { background: var(--bg-cardapio); border-bottom: 1px solid #E6D3BF; }
.topo-conteudo {
  max-width: 1160px; margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.topo .botao { min-height: 44px; }
.topo-acoes { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topo-redes { display: flex; gap: 4px; }
.icone-rede {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--vinho); transition: background-color .15s;
}
.icone-rede:hover { background: rgba(122, 31, 36, .08); }
.botao-rede { display: inline-flex; align-items: center; gap: 8px; }
.botao-rede svg { flex: none; }
/* Em tela estreita não cabem logo, ícones e botão: o botão do destaque logo abaixo faz o mesmo. */
@media (max-width: 420px) { .topo-conteudo { gap: 8px; } .topo-acoes .botao { display: none; } }
@media (prefers-reduced-motion: reduce) { .icone-rede { transition: none; } }
.pagina-cardapio { flex: 1; display: flex; flex-direction: column; background: var(--bg-cardapio); }
.hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; background: #EAD8C4; }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero-veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg-cardapio) 0%, rgba(245, 233, 220, .92) 34%, rgba(245, 233, 220, 0) 66%),
    linear-gradient(to right, rgba(245, 233, 220, .85) 0%, rgba(245, 233, 220, 0) 55%);
}
.hero-conteudo {
  position: relative; width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter) 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.hero-sobretitulo {
  display: flex; align-items: center; gap: 12px; color: var(--vinho-forte); font-family: var(--serifa);
  font-size: 17px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.hero-sobretitulo::before, .hero-sobretitulo::after { content: ''; width: 36px; height: 1px; background: currentColor; }
.hero-titulo {
  font-family: var(--serifa); font-weight: 600; font-size: clamp(44px, 11vw, 72px); line-height: .98;
  color: #5A1015; max-width: 560px; text-wrap: balance;
}
.hero-texto { font-family: var(--serifa); font-style: italic; font-size: 21px; line-height: 1.35; color: #4A2A1E; max-width: 420px; }
.hero .botao { align-self: flex-start; box-shadow: 0 10px 24px -12px rgba(110, 20, 25, .6); }
.agenda { background: var(--vinho-forte); color: var(--creme); }
.agenda-conteudo {
  max-width: 1160px; margin: 0 auto; padding: 20px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.agenda-cabeca { display: flex; align-items: center; gap: 14px; flex: 1 1 280px; }
.agenda-icone {
  width: 48px; height: 48px; border: 2px solid var(--creme-2); border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden; flex: none;
}
.agenda-icone span:first-child { height: 12px; background: var(--creme-2); }
.agenda-icone span:last-child { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.agenda-textos { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid rgba(243, 220, 198, .5); }
.agenda-textos h2 { font-family: var(--serifa); font-size: 24px; font-weight: 600; line-height: 1.1; }
.agenda-textos p { font-size: 14px; line-height: 1.4; color: var(--creme-2); }
.agenda-datas { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.agenda-datas li {
  white-space: nowrap; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--creme-2);
  display: flex; align-items: center; font-size: 15px; font-weight: 700;
}
.cardapio { width: 100%; max-width: 1160px; margin: 0 auto; padding: 32px var(--gutter); display: flex; flex-direction: column; gap: 40px; }
.secao { display: flex; flex-direction: column; gap: 20px; }
.secao-titulo { display: flex; align-items: center; gap: 16px; font-family: var(--serifa); font-weight: 600; font-size: 34px; color: #5A1015; }
.secao-titulo::before, .secao-titulo::after { content: ''; flex: 1; height: 1px; background: #C9A88A; }
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 24px 16px; }
.produto {
  position: relative; background: var(--cartao-produto); border-radius: 6px; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(74, 42, 30, .08), 0 12px 24px -18px rgba(74, 42, 30, .4);
}
.produto-foto { aspect-ratio: 8 / 7; border-radius: 6px 6px 0 0; overflow: hidden; background: #E6D0B8; }
.produto-foto img { width: 100%; height: 100%; object-fit: cover; }
.produto-indisponivel .produto-foto { opacity: .55; filter: grayscale(.5); }
.produto-selo {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--vinho-forte); color: var(--creme);
  font-family: var(--serifa); font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 14px; border-radius: 999px; white-space: nowrap;
}
.produto-esgotado { background: #4A2A1E; color: var(--bg-cardapio); font-size: 13px; font-weight: 700; padding: 7px 14px; text-align: center; letter-spacing: .04em; }
.produto-corpo { padding: 16px 16px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; flex: 1; }
.produto-nome { font-family: var(--serifa); font-weight: 700; font-size: 24px; line-height: 1.1; color: #3B1A12; text-wrap: balance; }
.produto-peso { font-size: 13px; font-weight: 700; color: #7A4B33; letter-spacing: .04em; }
.produto-descricao { font-size: 15px; line-height: 1.45; color: #5A3A2C; text-wrap: pretty; }
.produto-rodape {
  margin-top: auto; padding-top: 14px; width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; border-top: 1px solid #DCC2A6;
}
.produto-preco { font-size: 21px; font-weight: 800; color: #3B1A12; font-variant-numeric: tabular-nums; }
.seletor { display: flex; align-items: center; gap: 2px; background: var(--creme); border: 1px solid #DCC2A6; border-radius: 999px; padding: 2px; }
.seletor button { width: 44px; height: 44px; border-radius: 50%; border: 0; font-size: 22px; font-weight: 700; line-height: 1; }
.seletor-menos { background: transparent; color: var(--vinho-forte); }
.seletor-mais { background: var(--vinho-forte); color: var(--creme); }
.seletor-valor { min-width: 28px; text-align: center; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.vazio-cardapio { text-align: center; color: var(--tinta-2); }
.rodape { border-top: 1px solid #E6D3BF; background: var(--bg-cardapio); }
.rodape-conteudo {
  max-width: 1160px; margin: 0 auto; padding: 28px var(--gutter) 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.rodape-frase { font-family: var(--script); font-size: 30px; line-height: 1.15; color: #5A1015; }
.rodape-links { display: flex; gap: 8px; flex-wrap: wrap; }
.rodape-links .botao { min-height: 44px; font-size: 14px; }
.barra-carrinho {
  position: sticky; bottom: 0; z-index: 20; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg-cardapio) 70%, rgba(245, 233, 220, 0));
}
.barra-carrinho-conteudo {
  max-width: 720px; margin: 0 auto; background: var(--vinho-forte); color: var(--creme); border-radius: 999px;
  padding: 8px 8px 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 14px 30px -12px rgba(86, 15, 19, .6);
}
.barra-carrinho-texto { display: flex; flex-direction: column; }
.barra-carrinho-texto span { font-size: 13px; color: var(--creme-2); }
.barra-carrinho-texto strong { font-size: 19px; }

/* Tela 02 — Carrinho e recebimento */
.cabeca-etapa { display: flex; align-items: center; gap: 10px; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.etapas li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.etapa-barra { height: 4px; border-radius: 4px; background: var(--linha); }
.etapas .etapa-feita { color: var(--vinho-escuro); }
.etapas .etapa-feita .etapa-barra { background: var(--vinho); }
.linha-carrinho {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; background: var(--superficie);
  border: 1px solid var(--linha-suave); border-radius: var(--raio); padding: 12px;
}
.linha-foto { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--superficie-2); }
.linha-foto img { width: 100%; height: 100%; object-fit: cover; }
.linha-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.linha-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; line-height: 1.3; }
.linha-topo .numero { white-space: nowrap; }
.linha-peso { color: var(--rotulo); font-weight: 600; white-space: nowrap; }
.linha-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.seletor-pequeno { background: #F3E6D6; border: 0; }
.seletor-pequeno .seletor-menos { background: var(--superficie); color: var(--vinho); }
.seletor-pequeno .seletor-mais { background: var(--vinho); color: #FFF8F0; }
.linha-presente { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--linha-suave); }
.linha-presente-rotulo { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; }
.linha-presente-preco { color: var(--tinta-2); font-size: 12px; font-weight: 400; }
.resumo-presente-carrinho { background: var(--superficie); border: 1px solid var(--linha-suave); border-radius: var(--raio); padding: 10px 14px; }
.vazio {
  text-align: center; padding: 36px 16px; background: var(--superficie); border: 1px dashed var(--linha);
  border-radius: var(--raio); display: flex; flex-direction: column; gap: 10px; align-items: center; color: var(--tinta-2);
}
.vazio strong { font-family: var(--serifa); font-size: 24px; color: var(--vinho-escuro); }
.grupo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.grupo legend.rotulo-campo { margin-bottom: 8px; padding: 0; }
.opcoes-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px; border-radius: var(--raio);
  border: 2px solid var(--linha); background: var(--superficie); cursor: pointer; font-size: 16px;
}
.opcoes-duas .opcao { min-height: 96px; }
.opcao:has(input:checked) { border-color: var(--vinho); }
.opcao:has(input:focus-visible) { outline: 3px solid var(--ouro); outline-offset: 2px; }
.opcao input { accent-color: var(--vinho); width: 20px; height: 20px; margin: 0; flex: none; }
.opcao-texto { display: flex; flex-direction: column; gap: 4px; }
.opcao-texto strong { font-size: 17px; }
.opcao-texto span { font-size: 14px; color: var(--tinta-2); }
.opcao-linha strong { flex: 1; }
.opcao-linha .numero { font-weight: 700; color: var(--tinta-3); white-space: nowrap; }
.grade-datas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.data {
  position: relative; min-height: 96px; border-radius: var(--raio); border: 2px solid var(--linha); background: var(--superficie);
  color: var(--tinta); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; cursor: pointer;
}
.data input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.data:has(input:checked) { background: var(--vinho); border-color: var(--vinho); color: #FFF8F0; }
.data:has(input:focus-visible) { outline: 3px solid var(--ouro); outline-offset: 2px; }
.data-semana { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.data-dia { font-family: var(--serifa); font-size: 32px; font-weight: 700; line-height: 1; }
.data-mes { font-size: 12px; font-weight: 700; }
.data-vagas { font-size: 11px; font-weight: 800; color: #8C1D18; min-height: 14px; }
.data:has(input:checked) .data-vagas { color: #F3D9C4; }
.nota-data {
  display: flex; gap: 10px; align-items: center; background: var(--superficie); border: 1px solid var(--linha-suave);
  border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--tinta-3);
}
.nota-data::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ouro); flex: none; }
.nota-data:empty { display: none; }
.resumo {
  background: var(--superficie); border: 1px solid var(--linha-suave); border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; color: var(--tinta-3);
}
.resumo h2 { font-family: var(--serifa); font-size: 24px; font-weight: 600; color: var(--vinho-escuro); }
.resumo p { font-size: 14px; }
.resumo strong { color: var(--tinta); }
.rodape-fixo {
  position: sticky; bottom: 0; margin-top: auto; background: var(--superficie); border-top: 1px solid var(--linha-suave);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
}
.rodape-fixo-conteudo { max-width: 568px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.rodape-fixo-total { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rodape-fixo-total span { font-size: 13px; color: var(--tinta-2); }
.rodape-fixo-total strong { font-size: 19px; }
.dica-avancar { max-width: 568px; margin: 0 auto 8px; font-size: 13px; font-weight: 700; color: var(--tinta-2); text-align: right; }
.dica-avancar:empty { display: none; }
.botao-avancar { min-height: 52px; min-width: 180px; }
@media (max-width: 360px) { .botao-avancar { min-width: 0; } }

/* Tela 03 — Pagamento */
.cabeca-pagamento { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pilula-relogio {
  white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-3);
  background: var(--superficie); border: 1px solid var(--linha-suave); border-radius: 999px; padding: 6px 12px;
}
.pilula-urgente { color: #8C1D18; border-color: #D9A39B; }
.cartao-resumo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--linha-suave); border-radius: var(--raio);
}
.cartao-resumo div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--tinta-3); min-width: 0; }
.cartao-resumo strong { font-size: 22px; white-space: nowrap; }
.abas { display: grid; grid-template-columns: 1fr 1fr; background: var(--superficie-2); border-radius: 14px; padding: 4px; gap: 4px; }
.abas button { min-height: 48px; border-radius: 11px; border: 0; background: transparent; color: var(--tinta-3); font-size: 15px; font-weight: 800; }
.abas button[aria-selected="true"] { background: var(--superficie); color: var(--vinho-escuro); box-shadow: 0 1px 3px rgba(58, 36, 24, .18); }
.painel-pix, .painel-cartao {
  background: var(--superficie); border: 1px solid var(--linha-suave); border-radius: 20px; padding: 22px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.painel-pix { align-items: center; text-align: center; }
.pix-qr { width: 220px; height: 220px; border-radius: 14px; border: 1px solid var(--linha); background: #fff; image-rendering: pixelated; }
.pix-copia { width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tinta-2); }
.pix-codigo {
  width: 100%; min-height: 44px; font-family: var(--mono); font-size: 12px; background: #F3E6D6; border: 0;
  border-radius: 10px; padding: 0 12px; color: var(--tinta); text-overflow: ellipsis;
}
.link-centro { align-self: center; }
.pix-aguardando { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--tinta-3); }
.pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--ouro); animation: pulso 1.2s ease-in-out infinite alternate; }
@keyframes pulso { from { opacity: 1; } to { opacity: .35; } }
.painel-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.painel-cartao-topo span { font-size: 12px; color: var(--tinta-2); }
.cartao-brick { min-height: 300px; }
.status-pagamento { text-align: center; font-weight: 700; color: var(--tinta-3); }
.status-pagamento:empty { display: none; }
.expirado {
  background: var(--superficie); border: 1px solid #D9B3AC; border-radius: 20px; padding: 28px 20px;
  display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
}
.expirado-relogio { font-family: var(--mono); font-size: 28px; color: var(--vinho); }
.expirado h2 { font-family: var(--serifa); font-size: 28px; font-weight: 600; color: var(--vinho-escuro); line-height: 1.1; }
.expirado p { font-size: 15px; color: var(--tinta-3); max-width: 380px; }

/* Telas 04 e 05 — Pedido confirmado e acompanhamento */
.pagina-confirmado { max-width: 560px; align-items: center; text-align: center; padding-top: 28px; padding-bottom: 48px; }
.confirmado-cabeca { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.selo-sucesso {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sucesso);
}
.selo-sucesso span { width: 8px; height: 8px; border-radius: 50%; background: var(--sucesso); }
.texto-centro { font-size: 16px; line-height: 1.55; color: var(--tinta-3); max-width: 420px; text-wrap: pretty; }
.cartao-codigo { width: 100%; background: var(--tinta); color: var(--bg); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.cartao-codigo span { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #E3CDB5; }
.cartao-codigo strong { font-family: var(--mono); font-size: 30px; letter-spacing: .06em; }
.pagina-confirmado .resumo, .pagina-confirmado .botao-largo { width: 100%; text-align: left; }
.pagina-confirmado .botao-largo { text-align: center; }
.resumo-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.resumo-grade div { display: flex; flex-direction: column; gap: 2px; }
.rotulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rotulo); }
.pagina-acompanhar { max-width: 560px; padding-top: 24px; padding-bottom: 48px; }
.acompanhar-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pilula-codigo {
  white-space: nowrap; font-family: var(--mono); font-size: 13px; background: var(--superficie);
  border: 1px solid var(--linha-suave); border-radius: 999px; padding: 6px 12px;
}
.pilha-curta { display: flex; flex-direction: column; gap: 6px; }
.status-texto { font-size: 15px; line-height: 1.5; color: var(--tinta-3); }
.status-aviso { background: var(--aviso-fundo); border: 1px solid #D9B3AC; border-radius: var(--raio); padding: 14px 16px; color: var(--vinho-escuro); }
.status-erro { background: var(--perigo-fundo); border: 1px solid #D9A39B; border-radius: var(--raio); padding: 14px 16px; color: #5C2A24; }
.linha-tempo {
  list-style: none; margin: 0; padding: 20px 18px; background: var(--superficie); border: 1px solid var(--linha-suave);
  border-radius: 20px; display: flex; flex-direction: column;
}
.passo { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding-bottom: 22px; }
.passo:last-child { padding-bottom: 0; }
.passo:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--linha); }
.passo-feito:not(:last-child)::after { background: var(--vinho); }
.passo-marca {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid #CDB59C; background: var(--superficie); color: #8A7566;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
}
.passo-feito .passo-marca { background: var(--vinho); border-color: var(--vinho); color: #FFF8F0; }
.passo-proximo .passo-marca { border-color: var(--vinho); color: var(--vinho); }
.passo-texto { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.passo-texto strong { font-size: 16px; }
.passo-futuro .passo-texto strong { color: var(--tinta-2); }
.passo-texto span { font-size: 14px; color: var(--tinta-2); }

/* ==========================================================================
   Fotos múltiplas, carrossel, miniaturas de embalagens e ciência de entrega
   ========================================================================== */

/* Carrossel de fotos no cardápio */
.produto-carrossel {
  position: relative;
  overflow: hidden;
}
.carrossel-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.carrossel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.carrossel-img.ativo {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .carrossel-img {
    transition: none !important;
  }
}
.carrossel-pontos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 6px 0 2px;
}
.carrossel-ponto {
  background: transparent;
  border: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.carrossel-ponto-visual {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C9A88A;
  transition: transform 200ms ease, background-color 200ms ease;
}
.carrossel-ponto.ativo .carrossel-ponto-visual,
.carrossel-ponto[aria-current="true"] .carrossel-ponto-visual {
  background: var(--vinho-forte, #5A1015);
  transform: scale(1.25);
}

/* Selo de peso sobre a foto */
.produto-selo-peso {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(74, 42, 30, .85);
  color: var(--creme, #FFF8F0);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
}

/* Miniaturas de embalagem e modal zoom */
.miniatura-embalagem-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.miniatura-embalagem-btn:focus-visible {
  outline: 2px solid var(--vinho, #8B2500);
  outline-offset: 2px;
}
.miniatura-embalagem {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--linha-suave, #E6D0B8);
}
.linha-embalagem-consumo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.linha-embalagem-rotulo {
  font-size: 14px;
  color: var(--tinta-2, #5A3A2C);
  font-weight: 600;
}
.linha-presente {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* Modal zoom da embalagem */
dialog.modal-zoom-foto {
  border: none;
  border-radius: 16px;
  padding: 20px;
  background: var(--superficie, #FFF);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  max-width: 90vw;
  max-height: 90vh;
}
dialog.modal-zoom-foto::backdrop {
  background: rgba(0, 0, 0, .6);
}
.modal-zoom-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin-bottom: 16px;
}
.modal-zoom-fechar {
  display: block;
  width: 100%;
}

/* Aviso e rótulos de entrega na etapa 3 */
.alerta-entrega {
  background: var(--aviso-fundo, #FFF3CD);
  border: 1px solid #FFEBAA;
  color: #856404;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.data-fornada {
  font-size: 12px;
  color: var(--tinta-3, #7A4B33);
  font-weight: 600;
}

/* Checkbox de ciência de entrega na etapa 4 */
.campo-ciencia-entrega {
  margin-top: 16px;
}
.opcao-ciencia {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinta-3, #3B1A12);
}
.opcao-ciencia input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--vinho-forte, #5A1015);
}

/* Miniaturas 40px no resumo */
.miniatura-resumo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--linha-suave, #E6D0B8);
}
.resumo-linha-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.resumo-item-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
}