/* =====================================================================
   Pouca Gula — estilos compartilhados
   ===================================================================== */
:root {
  --verde: #A9C59F;
  --verde-claro: #D9E6D3;
  --verde-toldo: #8EAF83;   /* listras do toldo, para aparecer sobre o verde */
  --creme: #FBF3E4;
  --creme-2: #F6EAD6;
  --rosado: #F0D5C8;
  --choco: #3E2416;
  --choco-80: rgba(62, 36, 22, .8);
  --choco-60: rgba(62, 36, 22, .62);
  --linha: rgba(62, 36, 22, .16);
  --dourado: #B8923F;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 20px;
  --max: 1120px;
  --header: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 12px); }
body {
  margin: 0;
  background: var(--creme);
  color: var(--choco);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--choco); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 96px 0; }
@media (min-width: 900px) { .section { padding: 140px 0; } :root { --gutter: 40px; } }

/* ---------- tipografia ---------- */
.rotulo {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--choco-80);
}
.titulo { font-size: clamp(36px, 9vw, 72px); }
.titulo-m { font-size: clamp(30px, 7vw, 48px); }
.lead { font-size: 17px; font-weight: 300; color: var(--choco-80); max-width: 52ch; text-wrap: balance; }  /* balance: evita palavra sozinha na última linha */
.italico { font-style: italic; }
.pendente {
  font-size: 13px;
  font-style: italic;
  color: var(--choco-60);
}
.pendente::before { content: "◦ "; color: var(--dourado); font-style: normal; }

/* Auréola dourada acima de títulos */
.aureola::before {
  content: "";
  display: block;
  width: 46px; height: 11px;
  margin-bottom: 18px;
  border: 1.5px solid var(--dourado);
  border-radius: 50%;
  outline: 1px solid rgba(184, 146, 63, .45);
  outline-offset: 2px;
  /* mais perto do título e inclinada como a auréola do logo (lado direito mais alto, ~10°) */
  transform: translateY(12px) rotate(-10deg);
}
.centro { text-align: center; }
.centro.aureola::before, .centro .aureola::before { margin-left: auto; margin-right: auto; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--choco);
  border-radius: 999px;
  background: var(--choco);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s, opacity .25s;
}
.btn:hover { background: #2A170D; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.btn-linha { background: transparent; color: var(--choco); }
.btn-linha:hover { background: var(--choco); color: var(--creme); }
.btn-bloco { width: 100%; }
.link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.link::after { content: "→"; letter-spacing: 0; }

/* ---------- elementos de marca ---------- */
/* Toldo de ondinhas: listras verde/creme com borda recortada */
.toldo {
  --w: 56px;
  height: calc(var(--w) * .82);
  background: repeating-linear-gradient(90deg, var(--verde-toldo) 0 var(--w), var(--creme) var(--w) calc(var(--w) * 2));
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 34% no-repeat,
    radial-gradient(circle calc(var(--w) / 2) at 50% 0, #000 98%, transparent 100%) 0 34% / var(--w) 66% repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% 34% no-repeat,
    radial-gradient(circle calc(var(--w) / 2) at 50% 0, #000 98%, transparent 100%) 0 34% / var(--w) 66% repeat-x;
  filter: drop-shadow(0 6px 6px rgba(62, 36, 22, .08));
}
.toldo-invertido { background: repeating-linear-gradient(90deg, var(--creme) 0 var(--w), var(--verde-toldo) var(--w) calc(var(--w) * 2)); }

/* Borda de ondinhas: o verde termina em ondinhas sobre o creme */
.borda-ondas {
  --w: 56px;
  position: relative;
  z-index: 1;
  height: calc(var(--w) / 2);
  margin-bottom: calc(var(--w) / -2);       /* as ondinhas avançam sobre a seção seguinte */
  background: var(--verde);
  -webkit-mask: radial-gradient(circle calc(var(--w) / 2) at 50% 0, #000 98%, transparent 100%) 0 0 / var(--w) 100% repeat-x;
          mask: radial-gradient(circle calc(var(--w) / 2) at 50% 0, #000 98%, transparent 100%) 0 0 / var(--w) 100% repeat-x;
  filter: drop-shadow(0 6px 6px rgba(62, 36, 22, .08));
}

/* Prateleira com borda de ondinhas */
.prateleira {
  --c: var(--creme-2);
  position: relative;
  height: 10px;
  background: var(--c);
  box-shadow: 0 1px 0 rgba(62, 36, 22, .06);
}
.prateleira::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 12px;
  background: radial-gradient(circle 12px at 50% 0, var(--c) 98%, transparent 100%) 0 0 / 24px 12px repeat-x;
  filter: drop-shadow(0 3px 2px rgba(62, 36, 22, .07));
}
.prateleira-rosada { --c: var(--rosado); }

/* Arco: topo arredondado para fotos e espaços reservados */
.arco { border-radius: 999px 999px 0 0; overflow: hidden; }

/* Moldura fina em creme */
.moldura { position: relative; }
.moldura::after {
  content: "";
  position: absolute; inset: 10px;
  border: 1.5px solid var(--creme);
  border-radius: inherit;
  pointer-events: none;
}

/* ---------- foto de produto (foto real ou ilustração) ---------- */
.foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--rosado);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.foto.tom-verde { background: var(--verde-claro); }
.foto-desenho { width: 84%; margin-top: 14%; }
.foto-desenho svg { display: block; width: 100%; height: auto; }
.foto .foto-nome {
  position: absolute; left: 0; right: 0; bottom: 7%;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--choco-80);
  text-align: center;
  padding: 0 12px;
}
.foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16% 10% 10%;
}
.foto.tem-foto .foto-nome { display: none; }
.foto.foto-cheia img { object-fit: cover; padding: 0; }

/* sabor esgotado: continua na carta, mas não vai para a sacola */
.selo-esgotado {
  position: absolute; top: 14%; left: 50%; transform: translateX(-50%) rotate(-4deg);
  padding: 6px 14px;
  background: var(--creme); color: var(--choco);
  border: 1.5px solid var(--choco);
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
}
.cartao.esgotado .foto-desenho, .cartao.esgotado .foto img { opacity: .55; filter: grayscale(.5); }
.item-indisponivel { margin-top: 6px; font-size: 13px; font-weight: 600; color: #9A3B2E; }

/* links de WhatsApp e Instagram com símbolo */
.link-rede { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; white-space: nowrap; }
.link-rede .icone { width: 20px; height: 20px; flex: none; }
.link-rede:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- cabeçalho ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header);
  transition: background .35s, box-shadow .35s;
}
.site-header.solido {
  background: rgba(251, 243, 228, .94);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--linha);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  white-space: nowrap;
}
.marca img { height: 32px; width: auto; flex: none; }   /* asas, auréola e brigadeiro do logo */
@media (max-width: 380px) {
  .marca { font-size: 20px; gap: 8px; }
  .marca img { height: 28px; }
}
.nav-principal { display: none; }
.nav-principal a, .nav-principal span {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav-principal a[aria-current="page"] { box-shadow: inset 0 -1px 0 currentColor; }
.nav-desativado { opacity: .45; cursor: default; }
.nav-desativado small { font-size: 9px; letter-spacing: .14em; margin-left: 6px; }
.header-acoes { display: flex; align-items: center; gap: 4px; }
.btn-sacola, .btn-menu {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px;
  padding: 0 8px;
  background: none; border: 0; cursor: pointer;
  text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.contador {
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  background: var(--choco); color: var(--creme);
  font-size: 11px; letter-spacing: 0;
  display: inline-grid; place-items: center;
}
.contador[data-vazio="true"] { background: transparent; color: var(--choco); box-shadow: inset 0 0 0 1px var(--linha); }
.btn-menu span, .btn-menu span::before, .btn-menu span::after {
  display: block; width: 22px; height: 1.5px; background: var(--choco); position: relative; transition: transform .3s;
}
.btn-menu span::before, .btn-menu span::after { content: ""; position: absolute; left: 0; }
.btn-menu span::before { top: -7px; }
.btn-menu span::after { top: 7px; }
.menu-aberto .btn-menu span { background: transparent; }
.menu-aberto .btn-menu span::before { transform: translateY(7px) rotate(45deg); }
.menu-aberto .btn-menu span::after { transform: translateY(-7px) rotate(-45deg); }

.menu-movel {
  position: fixed; inset: 0;
  z-index: 49;
  background: var(--creme);
  padding: calc(var(--header) + 24px) var(--gutter) 40px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
  overflow-y: auto;
}
.menu-aberto .menu-movel { opacity: 1; visibility: visible; }
.menu-aberto { overflow: hidden; }
.menu-movel ul { list-style: none; margin: 0; padding: 0; }
.menu-links li { border-bottom: 1px solid var(--linha); }
.menu-links a, .menu-links .nav-desativado {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 18px 0;
  font-family: var(--serif); font-weight: 300; font-size: 32px;
  text-decoration: none;
}
.menu-links .nav-desativado small { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.menu-movel .menu-rodape { margin-top: auto; padding-top: 32px; display: grid; gap: 2px; font-size: 15px; color: var(--choco-80); }
.menu-rodape li { white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.menu-rodape a { text-decoration: none; }

@media (min-width: 960px) {
  .nav-principal { display: flex; gap: 28px; align-items: center; }
  .btn-menu, .menu-movel { display: none; }
}

/* ---------- rodapé ---------- */
.site-footer { background: var(--verde); color: var(--choco); padding-bottom: 40px; }
.site-footer .toldo { margin-bottom: 64px; }
.footer-grid { display: grid; gap: 40px; }
.footer-grid h2 { font-size: 34px; font-style: italic; font-weight: 300; }
.footer-grid h3 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 12px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-grid li a:hover { text-decoration: underline; }
.footer-grid p, .footer-grid li { font-size: 15px; }
.footer-base {
  margin-top: 56px; padding-top: 20px;
  border-top: 1px solid rgba(62, 36, 22, .22);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 13px; color: var(--choco-80);
}
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- topo de página interna ---------- */
.pagina-topo { padding: calc(var(--header) + 56px) 0 48px; }
.pagina-topo .lead { margin-top: 18px; }

/* ---------- carta de sabores ---------- */
.carta { list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid var(--linha); }
.carta > li > a {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas: "num nome" "num sabores" "num preco";
  gap: 6px 12px;
  padding: 28px 0;
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  transition: background .3s;
}
.carta > li > a:hover { background: rgba(240, 213, 200, .25); }
.carta .num { grid-area: num; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--dourado); padding-top: 4px; }
.carta h3 { grid-area: nome; font-size: clamp(26px, 6vw, 38px); }
.carta .sabores { grid-area: sabores; font-size: 15px; font-weight: 300; color: var(--choco-80); }
.carta .preco {
  grid-area: preco;
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 8px;
  font-size: 14px;
}
.carta .preco small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--choco-60); white-space: nowrap; }
.carta .preco .pontilhado { flex: 1; border-bottom: 1px dotted rgba(62, 36, 22, .35); transform: translateY(-4px); }
.carta .preco strong { font-family: var(--serif); font-weight: 400; font-size: 20px; white-space: nowrap; }
@media (min-width: 900px) {
  .carta > li > a {
    grid-template-columns: 72px minmax(0, 1fr) 280px;
    grid-template-areas: "num nome preco" "num sabores preco";
    padding: 36px 16px;
  }
  .carta .preco { align-self: center; margin: 0; }
}

/* ---------- cartões de produto ---------- */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
@media (min-width: 700px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; } }
@media (min-width: 1000px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cartao {
  display: block; width: 100%;
  background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer; text-decoration: none;
}
.cartao .foto { transition: transform .5s var(--ease); }
.cartao:hover .foto { transform: translateY(-4px); }
.cartao .cartao-linha { margin-top: 14px; font-size: 10px; letter-spacing: .2em; }
.cartao h3 { font-size: 21px; margin-top: 4px; }
.cartao .cartao-preco { margin-top: 6px; font-size: 14px; color: var(--choco-80); }

/* ---------- controles ---------- */
.campo { display: grid; gap: 8px; }
.campo > label, .campo > legend, .campo-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.entrada {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(62, 36, 22, .3);
  border-radius: 10px;
  background: #FFFDF8;
  font-size: 16px; /* evita zoom no iOS */
}
.entrada:focus { border-color: var(--choco); outline: none; box-shadow: 0 0 0 3px rgba(62, 36, 22, .12); }
textarea.entrada { min-height: 96px; resize: vertical; }
.ajuda { font-size: 13px; color: var(--choco-60); }
.erro { font-size: 13px; color: #8A2B12; }

/* Opções em pílula (radio) */
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao span {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 48px; min-width: 56px;
  padding: 8px 14px;
  border: 1px solid rgba(62, 36, 22, .3);
  border-radius: 999px;
  font-size: 14px; line-height: 1.2;
  transition: background .2s, color .2s, border-color .2s;
}
.opcao span small { font-size: 11px; opacity: .75; }
.opcao input:checked + span { background: var(--choco); border-color: var(--choco); color: var(--creme); }
.opcao input:focus-visible + span { outline: 2px solid var(--choco); outline-offset: 3px; }

/* Stepper de quantidade */
.stepper { display: inline-flex; align-items: center; border: 1px solid rgba(62, 36, 22, .3); border-radius: 999px; }
.stepper button { width: 44px; height: 44px; border: 0; background: none; font-size: 18px; cursor: pointer; border-radius: 50%; }
.stepper output { min-width: 28px; text-align: center; font-weight: 600; }

/* ---------- monte sua caixa ---------- */
.caixa-montar { display: grid; gap: 32px; }
@media (min-width: 900px) { .caixa-montar { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }
.caixa-visual {
  position: relative;
  padding: 22px;
  border-radius: 18px;
  background: var(--rosado);
  box-shadow: inset 0 0 0 1.5px rgba(62, 36, 22, .08), 0 18px 40px -24px rgba(62, 36, 22, .45);
}
.caixa-visual::before {
  content: ""; position: absolute; inset: 9px; border-radius: 12px;
  border: 1.5px solid var(--creme); pointer-events: none;
}
.caixa-grade { display: grid; gap: 8px; position: relative; }
.caixa-slot {
  aspect-ratio: 1;
  border: 0; padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background:
    repeating-conic-gradient(from 0deg, #fff8ee 0 7.5deg, #f4e6d4 7.5deg 15deg);
  box-shadow: inset 0 0 0 1px rgba(62, 36, 22, .08), inset 0 4px 8px rgba(62, 36, 22, .12);
  display: grid; place-items: center;
  position: relative;
  min-width: 44px;
}
.caixa-slot.forminha-marrom { background: repeating-conic-gradient(#6b4430 0 7.5deg, #5a3626 7.5deg 15deg); }
.caixa-slot .bola {
  width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), transparent 32%), var(--cor, #4A2A1A);
  box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .22), 0 3px 6px rgba(62, 36, 22, .25);
  transform: scale(0);
  transition: transform .35s var(--ease);
}
.caixa-slot.cheio .bola { transform: scale(1); }
.caixa-slot.vazio-proximo { box-shadow: inset 0 0 0 1.5px var(--choco), inset 0 4px 8px rgba(62, 36, 22, .12); }
.caixa-legenda { margin-top: 14px; font-size: 13px; color: var(--choco-80); min-height: 1.6em; }
.sabor-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sabor-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 14px 6px 8px;
  border: 1px solid rgba(62, 36, 22, .25); border-radius: 999px;
  background: #FFFDF8; cursor: pointer; font-size: 14px;
}
.sabor-chip:hover { border-color: var(--choco); }
.sabor-chip i {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), transparent 35%), var(--cor);
  box-shadow: inset -2px -3px 5px rgba(0, 0, 0, .2);
}
.sabor-chip[disabled] { opacity: .4; cursor: not-allowed; }
.caixa-total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--linha); margin-top: 24px; }
.caixa-total strong { font-family: var(--serif); font-weight: 400; font-size: 28px; }

/* ---------- diálogo de detalhe ---------- */
.detalhe {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0;
  background: var(--creme); color: var(--choco);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.detalhe::backdrop { background: rgba(62, 36, 22, .45); }
.detalhe-fechar {
  position: sticky; top: 8px; z-index: 2;
  display: block;
  width: 48px; height: 48px; margin: 8px 8px 0 auto;
  border: 0; border-radius: 50%; background: rgba(251, 243, 228, .9);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.detalhe-corpo { display: grid; gap: 28px; padding: 0 var(--gutter) 40px; }
.detalhe-corpo .foto { max-width: 420px; width: 100%; margin: 8px auto 0; }
.detalhe-corpo h2 { font-size: clamp(34px, 8vw, 52px); margin-top: 6px; }
.detalhe-corpo .descricao { font-weight: 300; font-size: 17px; color: var(--choco-80); margin-top: 12px; max-width: 40ch; }
.detalhe-acao { display: grid; gap: 12px; position: sticky; bottom: 0; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--creme) 30%); }
@media (min-width: 900px) {
  .detalhe { width: min(980px, 92vw); height: auto; max-height: 90vh; margin: auto; border-radius: 22px; }
  .detalhe-corpo { grid-template-columns: 1fr 1fr; align-items: start; padding: 0 48px 48px; }
}

/* ---------- aviso de sacola ---------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translate(-50%, 20px);
  width: min(420px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 20px;
  border-radius: 999px;
  background: var(--choco); color: var(--creme);
  font-size: 14px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, transform .3s var(--ease), visibility .3s;
}
.aviso.visivel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.aviso a { color: var(--creme); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(251,243,228,.4); }

/* ---------- revelação suave ao rolar ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.visto { opacity: 1; transform: none; }

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

/* ---------- catálogo ---------- */
.filtros-barra {
  position: sticky; top: var(--header); z-index: 10;
  background: rgba(251, 243, 228, .96);
  border-bottom: 1px solid var(--linha);
}
.filtros {
  display: flex; gap: 8px;
  padding-top: 12px; padding-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
  flex: none;
  min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(62, 36, 22, .25); border-radius: 999px;
  background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.filtro[aria-pressed="true"] { background: var(--choco); border-color: var(--choco); color: var(--creme); }
@media (min-width: 900px) { .filtros { flex-wrap: wrap; } }
.catalogo-linha { padding: 72px 0 24px; }
.catalogo-linha + .catalogo-linha { border-top: 1px solid var(--linha); }
#presentes.catalogo-linha { padding-bottom: 120px; }
.linha-topo { display: grid; grid-template-columns: 44px 1fr; gap: 12px; margin-bottom: 40px; }
.linha-topo .num { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--dourado); padding-top: 6px; }
.linha-topo h2 { font-size: clamp(30px, 7vw, 48px); }
.linha-precos { margin-top: 8px; font-size: 14px; color: var(--choco-80); }
.sub-rotulo { margin-bottom: 6px; }

/* ---------- listas ---------- */
.lista-precos { list-style: none; margin: 28px 0 0; padding: 0; max-width: 420px; }
.lista-precos li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.lista-precos .pontilhado { flex: 1; border-bottom: 1px dotted rgba(62, 36, 22, .4); transform: translateY(-4px); }
.lista-precos strong { font-family: var(--serif); font-weight: 400; font-size: 20px; white-space: nowrap; }
.lista-precos li.nota { display: block; border: 0; font-size: 14px; color: var(--choco-80); }
.lista-fina { list-style: none; margin: 24px 0 16px; padding: 0; counter-reset: n; }
.lista-fina li { counter-increment: n; display: grid; grid-template-columns: 36px 1fr; padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: 16px; }
.lista-fina li::before { content: counter(n, decimal-leading-zero); font-family: var(--serif); font-style: italic; color: var(--dourado); font-size: 15px; }
.lista-notas { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--choco-80); }
.lista-notas li::before { content: "◦ "; color: var(--dourado); }
.duas-colunas { display: grid; gap: 72px; }
@media (min-width: 900px) { .duas-colunas { grid-template-columns: 1fr 1fr; gap: 96px; } }

/* ---------- eventos ---------- */
.eventos-topo { background: var(--verde); padding: var(--header) 0 88px; }
.eventos-topo .toldo { margin-bottom: 56px; }
.eventos-topo .lead { margin-top: 18px; color: var(--choco); }
/* topo centralizado: fotos dos formatos lado a lado (empilhadas no celular) */
.eventos-topo .centro .lead { margin-left: auto; margin-right: auto; }
.topo-fotos { display: grid; gap: 40px; margin: 56px auto 0; max-width: 340px; }
@media (min-width: 700px) { .topo-fotos { grid-template-columns: 1fr 1fr; gap: 40px; max-width: 760px; } }
.topo-foto { display: grid; gap: 14px; text-decoration: none; justify-items: center; }
.topo-foto .foto { aspect-ratio: 4 / 5; width: 100%; }
.topo-foto .rotulo { color: var(--choco); text-align: center; }
.formato-bloco:nth-of-type(odd) { background: var(--creme-2); }  /* alterna com o simulador, que também é creme-2 */
.formato-grid { display: grid; gap: 40px; align-items: start; }
.formato-foto .foto { aspect-ratio: 4 / 5; max-width: 460px; }
@media (min-width: 900px) {
  .formato-grid { grid-template-columns: 5fr 6fr; gap: 80px; }
  .formato-bloco.invertido .formato-foto { order: 2; }
  .formato-foto { position: sticky; top: calc(var(--header) + 32px); }
}
.formato-sub { margin-top: 8px; font-size: 16px; color: var(--choco-80); }
.formato-texto { margin-top: 18px; font-size: 17px; font-weight: 300; max-width: 46ch; }
.formato-info .pendente { margin-top: 10px; }
.formato-rotulo { margin-top: 40px; }
.formato-info .lista-fina { margin-top: 12px; }
.formato-info .lista-precos { margin-top: 12px; }
.sim-formato { font-family: var(--serif); font-size: 20px; margin-top: 4px; }
.simulador-sec { background: var(--creme-2); }
.simulador { display: grid; gap: 40px; }
@media (min-width: 900px) { .simulador { grid-template-columns: 1fr 380px; gap: 72px; align-items: start; } }
.sim-campos { display: grid; gap: 28px; }
.stepper .entrada { width: 84px; min-height: 44px; border: 0; background: transparent; text-align: center; padding: 0; font-weight: 600; -moz-appearance: textfield; }
.stepper .entrada::-webkit-outer-spin-button, .stepper .entrada::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .entrada:focus { box-shadow: none; }
.stepper:focus-within { border-color: var(--choco); }
.sim-resultado {
  position: relative;
  padding: 28px 24px;
  border-radius: 999px 999px 18px 18px / 160px 160px 18px 18px;
  background: var(--creme);
  box-shadow: 0 0 0 1px var(--linha);
  text-align: center;
}
@media (min-width: 900px) { .sim-resultado { position: sticky; top: calc(var(--header) + 24px); padding: 56px 32px 32px; } }
.sim-resultado .rotulo { margin-top: 24px; }
.sim-valor { font-family: var(--serif); font-weight: 300; font-size: 52px; line-height: 1.1; margin: 6px 0 16px; }
.sim-conta { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; font-size: 14px; }
.sim-conta li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha); }
.sim-resultado .btn { margin-top: 18px; }

/* ---------- sacola ---------- */
.sacola-grid { display: grid; gap: 56px; }
@media (min-width: 960px) { .sacola-grid { grid-template-columns: 1fr 400px; gap: 72px; align-items: start; } }
.sacola-itens { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.sacola-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-areas: "foto info" "foto total";
  gap: 4px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--linha);
}
.sacola-item-foto { grid-area: foto; }
.sacola-item-foto .foto-desenho { width: 86%; margin-top: 22%; }
.sacola-item-info { grid-area: info; min-width: 0; }
.sacola-item h3 { font-size: 21px; }
.sacola-item .item-detalhe { font-size: 14px; color: var(--choco-80); margin-top: 2px; }
.sacola-item .unit { font-size: 13px; color: var(--choco-60); margin-top: 2px; }
.sacola-item-acoes { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.remover {
  min-height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px; color: var(--choco-80);
}
.sacola-item-total { grid-area: total; font-family: var(--serif); font-size: 19px; }
@media (min-width: 600px) {
  .sacola-item { grid-template-columns: 96px 1fr auto; grid-template-areas: "foto info total"; }
}
.sacola-form { display: grid; gap: 24px; }
@media (min-width: 960px) { .sacola-form { position: sticky; top: calc(var(--header) + 20px); } }
.retirada {
  padding: 22px;
  border-radius: 16px;
  background: var(--verde-claro);
  display: grid; gap: 8px;
}
.retirada .ajuda { color: var(--choco-80); }
.resumo { margin: 0; border-top: 1px solid var(--linha); }
.resumo div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.resumo dt { font-size: 14px; }
.resumo dd { margin: 0; font-family: var(--serif); font-size: 20px; }
.resumo .destaque dt { font-weight: 700; }
.resumo .destaque dd { font-size: 28px; }
.enviado { padding: 22px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--dourado); display: grid; gap: 8px; }
.sacola-vazia { padding: 24px 0 40px; }

/* ---------- informações ---------- */
.faq { display: grid; gap: 64px; max-width: 760px; }
.faq-grupo h2 { margin-bottom: 8px; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 64px; padding: 16px 0;
  font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.25;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--linha);
  font-family: var(--sans); font-size: 18px; transition: transform .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-resposta { padding: 0 0 24px; font-weight: 300; color: var(--choco-80); max-width: 60ch; display: grid; gap: 6px; }
.faq-resposta a:not(.link) { color: var(--choco); }

/* chamada para montar a caixa */
.chamada-caixa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 72px; padding: 28px;
  border-radius: 18px;
  background: var(--rosado);
}
.chamada-caixa .ajuda { color: var(--choco-80); }

/* montador de caixa: medidas e foto do tamanho escolhido */
.caixa-medidas { display: block; margin-top: 4px; font-size: 13px; color: var(--choco-80); }
.caixa-foto { margin: 24px 0 0; max-width: 260px; }
.caixa-foto figcaption { margin-top: 10px; font-size: 13px; color: var(--choco-80); }

/* ---------- calendário de datas disponíveis ---------- */
.cal { padding: 16px; border-radius: 16px; background: var(--branco, #FFFDF8); box-shadow: inset 0 0 0 1px var(--linha); }
.cal-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-mes { font-family: var(--serif); font-size: 20px; }
.cal-nav {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: none;
  font-size: 24px; line-height: 1; color: var(--choco); cursor: pointer;
}
.cal-nav:hover { background: var(--creme-2); }
.cal-nav:disabled { opacity: .25; cursor: default; background: none; }
.cal-semana, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-semana span { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--choco-60); padding: 4px 0; }
.cal-dia {
  aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 50%; background: none;
  font-size: 15px; color: var(--choco-60); opacity: .45;
}
.cal-dia.livre {
  opacity: 1; color: var(--choco); font-weight: 700; cursor: pointer;
  background: var(--verde-claro); box-shadow: inset 0 0 0 1px rgba(62, 36, 22, .08);
}
.cal-dia.livre:hover { box-shadow: inset 0 0 0 1.5px var(--choco); }
.cal-dia.escolhida { background: var(--choco); color: var(--creme); box-shadow: none; }
.data-escolhida { font-weight: 700; }

/* consentimento e campo-armadilha */
.consentimento { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; }
.consentimento input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--choco); }
.consentimento a { font-weight: 700; }
.armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* aviso de data indisponível, com sugestões */
.aviso-pedido { padding: 16px 18px; border-radius: 14px; background: #F5DDD5; color: #6E2A1C; display: grid; gap: 8px; font-size: 15px; }
.aviso-pedido .link { font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* pedido gravado */
.pedido-feito { max-width: 640px; display: grid; gap: 20px; padding: 8px 0 40px; outline: none; }
.pedido-feito .lead strong { font-weight: 700; color: var(--choco); }
.pedido-feito-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.aviso-pedido .link::after { content: none; }

/* ---------- acompanhar pedido ---------- */
.acompanhar { max-width: 640px; display: grid; gap: 24px; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.etapas li { position: relative; padding: 10px 0 10px 34px; color: var(--choco-60); }
.etapas li::before {
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--choco-60); background: var(--creme);
}
.etapas li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: calc(50% + 9px); height: calc(100% - 18px); width: 2px; background: var(--linha); }
.etapas li.feita { color: var(--choco-80); }
.etapas li.feita::before { background: var(--verde); box-shadow: none; }
.etapas li.atual { color: var(--choco); font-weight: 700; }
.etapas li.atual::before { background: var(--choco); box-shadow: 0 0 0 4px var(--verde-claro); }
.acompanhar-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acompanhar-itens li { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.acompanhar-itens small { display: block; color: var(--choco-60); font-size: 13px; }

/* ---------- textos legais ---------- */
.texto-legal { max-width: 720px; padding-bottom: 120px; display: grid; gap: 16px; }
.texto-legal h2 { font-size: clamp(24px, 5vw, 30px); margin-top: 24px; }
.texto-legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.texto-legal p, .texto-legal li { color: var(--choco-80); }
.sim-feito { display: grid; gap: 12px; margin-top: 20px; padding: 20px; border-radius: 16px; background: var(--verde-claro); outline: none; }
.sim-feito-numero { font-family: var(--serif); font-size: 26px; }

/* ---------- conveniências (itens de apoio) ---------- */
.conv-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linha); }
.conv-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--linha);
}
.conv-foto .foto { width: 56px; }
.conv-foto .foto-desenho { width: 88%; margin-top: 18%; }
.conv-nome { font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.conv-detalhe { font-size: 13px; color: var(--choco-80); margin-top: 2px; }
.conv-sugestao { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--choco); margin-top: 4px; }
.conv-item .stepper button { width: 40px; height: 40px; }
.btn-pequeno { min-height: 44px; padding: 0 18px; font-size: 12px; letter-spacing: .12em; }
.para-servir { margin-top: 36px; display: grid; gap: 10px; }
.para-servir > .ajuda { margin-bottom: 4px; }
.combina { display: grid; gap: 8px; margin-top: 28px; }
.conv-compacta .conv-item { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; }
.conv-compacta .conv-foto .foto { width: 44px; }
.conv-compacta .conv-nome { font-size: 16px; }
.combina-linha { max-width: 560px; margin-top: 40px; }
.legenda-opcional { font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ---------- chamada do quiz na home ---------- */
.chamada-quiz {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px;
  margin-top: 48px; padding: 22px 24px; border-radius: 18px;
  background: var(--verde-claro); text-decoration: none;
}
.chamada-quiz span { font-family: var(--serif); font-size: 22px; font-weight: 300; font-style: italic; }
.chamada-quiz strong {
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.chamada-quiz strong::after { content: " →"; letter-spacing: 0; }
.chamada-quiz:hover strong { border-bottom-width: 2px; }

/* ---------- quiz "Me ajuda a escolher" ---------- */
.aviso-caixa-site { padding: 14px 18px; border-radius: 14px; background: var(--rosado); font-size: 14px; margin-bottom: 24px; }
.quiz { max-width: 760px; }
.quiz-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: 20px; }
.quiz-voltar {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--choco-80);
}
.quiz-passos { list-style: none; display: flex; gap: 8px; margin: 0 0 0 auto; padding: 0; }
.quiz-passos li { width: 26px; height: 4px; border-radius: 4px; background: var(--linha); transition: background .3s; }
.quiz-passos li.feito { background: var(--verde-toldo); }
.quiz-passos li.atual { background: var(--choco); }
.quiz-tela { display: grid; gap: 18px; }
.quiz-tela.entrando { animation: quiz-entra .45s var(--ease) both; }
@keyframes quiz-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quiz-tela.entrando { animation: none; } }
.quiz-pergunta { font-size: clamp(32px, 8vw, 52px); outline: none; text-wrap: balance; }
.quiz-respostas { display: grid; gap: 12px; margin-top: 10px; }
@media (min-width: 640px) { .quiz-respostas { grid-template-columns: 1fr 1fr; } }
.quiz-resposta {
  min-height: 68px; padding: 16px 22px; text-align: left;
  border: 1px solid rgba(62, 36, 22, .3); border-radius: 18px; background: transparent; cursor: pointer;
  font-family: var(--serif); font-size: 20px; font-weight: 300; line-height: 1.25;
  transition: background .2s, color .2s, border-color .2s;
}
.quiz-resposta:hover { border-color: var(--choco); background: var(--creme-2); }
.quiz-resposta[aria-pressed="true"] { background: var(--choco); border-color: var(--choco); color: var(--creme); }
.quiz-sugestao { display: grid; gap: 28px; }
.quiz-sugestao-foto .foto { max-width: 260px; width: 100%; }
@media (min-width: 760px) { .quiz-sugestao-foto .foto { max-width: 280px; } }
@media (min-width: 760px) {
  .quiz-sugestao { grid-template-columns: 280px 1fr; gap: 44px; align-items: center; }
}
.quiz-sugestao-texto { display: grid; gap: 14px; }
.quiz-porque { font-size: 17px; font-weight: 300; color: var(--choco-80); max-width: 46ch; }
.quiz-aviso { padding: 14px 18px; border-radius: 14px; background: var(--rosado); font-size: 15px; max-width: 52ch; }
.quiz-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.quiz-alt-titulo { margin-top: 36px; }
.quiz-alternativas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linha); }
.quiz-alt { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--linha); }
.quiz-alt-foto .foto { width: 72px; }
.quiz-alt-foto .foto-desenho { width: 88%; margin-top: 18%; }
.quiz-alt-nome { font-family: var(--serif); font-size: 21px; line-height: 1.2; }
.quiz-alt-texto { font-size: 14px; color: var(--choco-80); margin: 4px 0 2px; max-width: 52ch; }
.quiz-refazer { justify-self: start; margin-top: 28px; }
.quiz-desligado { max-width: 640px; }

/* menu do computador em telas estreitas (960 a 1099 px): um pouco mais junto, para caber o "Descubra" */
@media (min-width: 960px) and (max-width: 1099px) {
  .nav-principal { gap: 18px; }
  .nav-principal a, .nav-principal span { letter-spacing: .15em; }
}

/* =====================================================================
   Temas de datas comemorativas (js/temas.js)
   Tudo aqui depende de [data-tema] no <html>: sem tema, nada se aplica.
   As cores e os desenhos chegam como variáveis (--tema, --orn-*).
   Movimento só uma vez, e nenhum com prefers-reduced-motion.
   ===================================================================== */
/* faixa fina no topo, dentro do cabeçalho, com acabamento metálico */
html.com-faixa { --faixa: 32px; --header: calc(64px + var(--faixa)); }
.com-faixa .site-header { display: flex; flex-direction: column; }
.com-faixa .site-header .wrap { height: 64px; flex: none; }
.faixa-tema {
  position: relative; overflow: hidden;
  flex: none; height: var(--faixa);
  display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter);
  background: linear-gradient(100deg, var(--tema) 0%, var(--tema-2) 48%, var(--tema) 100%);
  box-shadow: inset 0 1px 0 rgba(232, 200, 119, .55), inset 0 -1px 0 rgba(232, 200, 119, .7);
  color: var(--creme); text-decoration: none; text-align: center;
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
}
.faixa-tema span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.faixa-tema span::after { content: " →"; }
a.faixa-tema:hover span { text-decoration: underline; text-underline-offset: 3px; }
.faixa-tema::after {      /* um reflexo dourado passa uma vez */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 236, 180, .45) 50%, transparent 70%);
  animation: tema-reflexo 1.8s .8s ease-in-out 1 both;
}
@keyframes tema-reflexo { to { transform: translateX(120%); } }

/* guirlanda (ou varal) pendurada no toldo: não ocupa espaço, fica por cima da borda */
.tema-toldo { position: relative; z-index: 2; height: 0; pointer-events: none; }
.tema-toldo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 76px;
  background: var(--orn-toldo) repeat-x 0 0 / auto 76px;
  filter: drop-shadow(0 4px 4px rgba(62, 36, 22, .18));
}
.tema-toldo + .borda-ondas { z-index: 1; }

/* topo dos arcos: composição do tema + filete dourado acompanhando o arco */
[data-tema] .foto.arco::before {
  content: ""; position: absolute; z-index: 3; left: 50%; top: 2%;
  width: min(44%, 150px); aspect-ratio: 2 / 1; transform: translateX(-50%);
  background: var(--orn-arco) no-repeat center / contain; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(62, 36, 22, .2));
}
[data-tema] .foto.arco::after {
  content: ""; position: absolute; z-index: 2; inset: 9px 9px 0; pointer-events: none;
  border: 1px solid var(--dourado); border-bottom: 0; border-radius: 999px 999px 0 0; opacity: .75;
}
[data-tema] :is(.conv-foto, .sacola-item-foto, .quiz-alt-foto) .foto.arco::after { display: none; }
[data-tema] :is(.conv-foto, .sacola-item-foto, .quiz-alt-foto) .foto.arco::before { width: 70%; top: 0; }

/* cantos das seções: pequenas composições, que entram com um brilho quando aparecem */
[data-tema] .section, [data-tema] .pagina-topo { position: relative; }
[data-tema] .section::before, [data-tema] .pagina-topo::after,
[data-tema] .section::after {
  content: ""; position: absolute; pointer-events: none;
  background: no-repeat center / contain;
  filter: drop-shadow(0 3px 3px rgba(62, 36, 22, .16));
  opacity: 0; transform: scale(.7) rotate(-8deg);
  transition: opacity .9s var(--ease), transform 1.1s cubic-bezier(.2, 1.4, .4, 1);
}
[data-tema] .section::before, [data-tema] .pagina-topo::after {
  right: max(0px, calc((100% - var(--max)) / 2)); top: 44px;
  width: 84px; height: 84px; background-image: var(--orn-canto1);
}
[data-tema] .section::after {
  left: max(0px, calc((100% - var(--max)) / 2)); bottom: 14px;
  width: 76px; height: 76px; background-image: var(--orn-canto2);
}
[data-tema] .tema-visto::before, [data-tema] .tema-visto::after,
[data-tema] .pagina-topo.tema-visto::after { opacity: 1; transform: none; }
@media (min-width: 900px) {
  [data-tema] .section::before, [data-tema] .pagina-topo::after { width: 128px; height: 128px; top: 56px; }
  [data-tema] .section::after { width: 116px; height: 116px; bottom: 28px; }
}

/* papel de presente: na seção de presentes da home, na edição do catálogo e na página de campanha */
[data-tema] .presentes, [data-tema] .catalogo-edicao, [data-tema] .campanha-papel {
  background-image: var(--orn-papel); background-size: 56px 56px;
}
[data-tema] .catalogo-edicao { background-color: var(--rosado); }
/* cabeçalho limpo: nenhum padrão por trás do logo e do menu */
[data-tema] .campanha-papel {
  background-image: linear-gradient(var(--rosado), var(--rosado)), var(--orn-papel);
  background-size: 100% var(--header), 56px 56px;
  background-position: 0 0, 0 var(--header);
  background-repeat: no-repeat, repeat;
}
[data-tema] .site-header.solido { background: var(--creme); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* abertura: fundo com o desenho do tema e detalhe no brigadeiro que cai */
[data-tema] .abertura::before {
  content: ""; position: absolute; inset: var(--header) 0 0 0; z-index: 0; pointer-events: none;   /* o padrão começa abaixo do cabeçalho */
  background: var(--orn-fundo) repeat 0 0 / 180px 180px; opacity: .55;
}
.ball-enfeite {
  position: absolute; left: 50%; top: -14%; width: 64%; aspect-ratio: 120 / 70; transform: translateX(-50%);
  background: var(--orn-bola) no-repeat center / contain;
  filter: drop-shadow(0 3px 3px rgba(62, 36, 22, .25));
}
[data-tema="namorados"] .ball-enfeite { top: -10%; width: 70%; }

/* momento mágico: partículas que o js/temas.js cria uma vez e apaga */
.tema-magia { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.tema-particula { position: absolute; left: 0; top: 0; background: no-repeat center / contain; will-change: transform, opacity; }
.site-header .marca { position: relative; }
.tema-estrela-logo {
  position: absolute; left: 24px; top: 10px; width: 20px; height: 20px; pointer-events: none;   /* sobre a auréola do ícone (centro, no alto) */
  background: no-repeat center / contain; filter: drop-shadow(0 0 6px rgba(246, 221, 138, .9));
}

/* produtos da edição: lacre de cera com o nome da edição */
.selo-edicao {
  position: absolute; z-index: 4; left: 50%; bottom: 6%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0; pointer-events: none;
}
.selo-edicao i {
  flex: none; width: 46px; height: 46px; margin-right: -14px; position: relative; z-index: 1;
  background: var(--orn-lacre) no-repeat center / contain; filter: drop-shadow(0 2px 2px rgba(62, 36, 22, .3));
}
.selo-edicao b {
  padding: 5px 12px 5px 20px; border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--tema-2), var(--tema)); color: var(--creme);
  box-shadow: inset 0 0 0 1px rgba(232, 200, 119, .6);
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.marca-edicao { color: var(--tema); font-style: normal; }
.linha-tema { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--tema); }
.catalogo-edicao .linha-topo .num { color: var(--tema); }

@media (prefers-reduced-motion: reduce) {
  .faixa-tema::after { animation: none; display: none; }
  [data-tema] .section::before, [data-tema] .pagina-topo::after, [data-tema] .section::after { transition: none; opacity: 1; transform: none; }
}

/* página de campanha (tema.html) */
.campanha-topo { padding-bottom: 72px; }
[data-tema] .campanha-topo { background-color: var(--rosado); }
.campanha-prazo {
  display: inline-block; margin-top: 22px; padding: 10px 18px; border-radius: 999px;
  background: var(--creme); box-shadow: inset 0 0 0 1px var(--dourado);
  font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--tema, var(--choco));
}
.campanha-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.campanha-mais { margin-top: 40px; }
.campanha-sem-tema { padding: calc(var(--header) + 56px) var(--gutter) 120px; }
[data-tema="natal"] .tema-particula { filter: drop-shadow(0 0 1.5px rgba(62, 36, 22, .35)); }
.tema-particula.tema-brilho { filter: drop-shadow(0 0 5px rgba(246, 221, 138, .95)); }
[data-tema] .pagina-topo::after { top: calc(var(--header) + 12px); }
/* aviso da aba aberta pelo "Ver como fica" do painel (temas e jornal) */
.tema-vendo, .jornal-vendo {
  position: fixed; z-index: 60; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
  padding: 10px 14px; border-radius: 12px; background: var(--choco); color: var(--creme);
  font-size: 13px; box-shadow: 0 6px 20px rgba(62, 36, 22, .3);
}
.tema-vendo a { color: inherit; font-weight: 700; margin-left: 6px; text-underline-offset: 3px; }

/* durante o efeito, a auréola do ícone (faixa central do alto) fica escondida e a estrela fica no lugar dela */
.marca img.sem-aureola { clip-path: polygon(0 0, 29% 0, 29% 28%, 71% 28%, 71% 0, 100% 0, 100% 100%, 0 100%); }
/* home com tema: enquanto o cabeçalho está sobre a abertura, ele tem o verde dela por baixo,
   para o padrão do fundo nunca passar atrás do logo e do menu ao rolar */
[data-tema] body[data-pagina="home"] .site-header:not(.solido) { background: var(--verde); }

/* =====================================================================
   Jornal: lista, página de cada texto, "Nossa história" e bloco da home
   ===================================================================== */
.jornal-topo .wrap::after {        /* filete duplo de folhetim sob o título */
  content: ""; display: block; max-width: 520px; margin: 40px auto 0;
  border-top: 3px double rgba(184, 146, 63, .7);
}
.jornal-topo .lead { margin-left: auto; margin-right: auto; }
.jornal-secao { padding: 56px 0 120px; }
a.filtro { display: inline-flex; align-items: center; text-decoration: none; }
.filtro[aria-current="page"] { background: var(--choco); border-color: var(--choco); color: var(--creme); }
.jornal-lista { display: grid; gap: 56px 28px; }
@media (min-width: 640px) { .jornal-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .jornal-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jornal-cartao { display: block; text-decoration: none; color: inherit; }
.jornal-capa { width: 100%; transition: transform .5s var(--ease); }
.jornal-cartao:hover .jornal-capa { transform: translateY(-4px); }
.jornal-capa-vazia { font-size: 40px; color: var(--dourado); }
.jornal-meta { margin-top: 20px; }
.jornal-cartao-titulo { margin-top: 10px; font-size: 26px; text-wrap: balance; }
.jornal-cartao:hover .jornal-cartao-titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.jornal-cartao-resumo { margin-top: 10px; font-size: 15px; font-weight: 300; color: var(--choco-80); }
.jornal-mais { margin-top: 48px; text-align: center; }
.jornal-vazio { margin: 0 auto; text-align: center; }
.jornal-home .jornal-lista { margin-top: 48px; }
.jornal-home { padding-bottom: 0; }     /* "Nossa história" vem logo abaixo, com o próprio espaço */
.jornal-home .lead { margin-top: 18px; }
.casa-link { margin-top: 24px; }

/* página de um texto */
.texto-topo { text-align: center; padding-bottom: 32px; }
.texto-topo .wrap { max-width: 860px; }
.texto-voltar {
  display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 20px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--choco-80);
}
.texto-voltar:hover { color: var(--choco); text-decoration: underline; text-underline-offset: 4px; }
.texto-titulo { margin-top: 18px; font-size: clamp(36px, 8vw, 64px); text-wrap: balance; }
.texto-resumo { margin: 22px auto 0; }
.texto-capa { max-width: 520px; margin: 44px auto 0; }
.texto-corpo { max-width: 680px; margin: 0 auto; padding-top: 16px; }
.texto-corpo p { margin-top: 22px; font-size: 18px; font-weight: 300; line-height: 1.75; }
/* capitular dourada no primeiro parágrafo, como nos folhetins */
.texto-corpo > p:first-child { display: flow-root; }   /* a capitular não invade o parágrafo seguinte */
.texto-corpo > p:first-child::first-letter {
  float: left; margin: .08em .1em 0 0; font-family: var(--serif); font-size: 3.6em; line-height: .8; color: var(--dourado);
}
.texto-sub { margin-top: 52px; font-size: clamp(26px, 5.5vw, 34px); text-wrap: balance; }
.texto-destaque { margin: 52px 0; padding: 30px 0; border-top: 1px solid var(--dourado); border-bottom: 1px solid var(--dourado); text-align: center; }
.texto-destaque p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 5vw, 32px); line-height: 1.3; color: var(--choco); text-wrap: balance; }
.texto-lista { margin: 22px 0 0; padding: 0; list-style: none; }
.texto-lista li { position: relative; margin-top: 12px; padding-left: 28px; font-size: 18px; font-weight: 300; line-height: 1.6; }
.texto-lista li::before { content: "✦"; position: absolute; left: 0; top: .3em; font-size: 12px; color: var(--dourado); }
.texto-fotos { display: grid; gap: 12px; margin: 40px 0 0; }
.texto-fotos img { width: 100%; border-radius: 14px; background: var(--rosado); }
.texto-fotos.duas { grid-template-columns: 1fr 1fr; }
.texto-fotos.duas img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 999px 999px 0 0; }
.texto-fotos figcaption { grid-column: 1 / -1; margin-top: 4px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--choco-60); }
.texto-botao { margin-top: 32px; }
.texto-link { margin-top: 22px; }
.texto-assinatura { max-width: 680px; margin: 40px auto 0; }
.texto-compartilhar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  max-width: 680px; margin: 56px auto 0; padding-top: 28px; border-top: 1px solid var(--linha);
}
.texto-compartilhar .rotulo { flex-basis: 100%; }
.leia-tambem { padding-top: 96px; }
.leia-tambem .jornal-lista { margin-top: 40px; }
.texto-sabores { margin-top: 96px; background: var(--creme-2); }
.texto-sabores .lead { margin: 18px auto 0; }
.texto-sabores .campanha-acoes { justify-content: center; }

/* =====================================================================
   Site em espera (painel → Regras): só a página de espera aparece
   ===================================================================== */
html.espera-conferindo body { visibility: hidden; }      /* primeira visita: até 1,5 s, enquanto confere no banco */
html.em-espera body > :not(.espera-pagina):not(.espera-vendo) { display: none !important; }
.espera-pagina { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--creme); }
.espera-corpo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 40px; padding-bottom: 64px; }
.espera-logo { width: min(230px, 62vw); height: auto; }
.espera-foto { width: min(260px, 66vw); }
.espera-titulo { margin-top: 36px; max-width: 18ch; text-wrap: balance; }
.espera-texto { margin: 18px auto 0; }
.espera-volta {
  display: inline-block; margin-top: 24px; padding: 10px 18px; border-radius: 999px;
  background: var(--creme-2); box-shadow: inset 0 0 0 1px var(--dourado);
  font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--tema, var(--choco));
}
.espera-redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.espera-redes .icone { width: 20px; height: 20px; flex: none; }
.espera-marca { margin-top: 40px; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--choco-60); }
[data-tema] .espera-pagina { background: var(--creme); }
.espera-vendo {
  position: fixed; z-index: 61; right: 12px; bottom: 12px; max-width: calc(100% - 24px);
  margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--choco); color: var(--creme);
  font-size: 13px; box-shadow: 0 6px 20px rgba(62, 36, 22, .3);
}
.espera-vendo a { color: inherit; font-weight: 700; margin-left: 6px; text-underline-offset: 3px; }