:root { --altura-topo: 60px; }
section { scroll-margin-top: calc(var(--altura-topo) + 8px); }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: var(--margem); }
.secao { padding-top: 56px; }
.secao h2 { font-size: clamp(2.25rem, 9.6vw, 3.25rem); line-height: 1.05; margin: 0 0 16px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Topo fixo: some sobre o banner e ganha fundo e linha ao rolar a página. */
.topo-site { position: sticky; top: 0; z-index: 20; transition: background-color .25s, box-shadow .25s; }
.topo-site.rolou { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 var(--borda); }
.topo-site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--altura-topo); }
.topo-site .marca { font-size: 17px; }
.topo-acoes { display: flex; align-items: center; gap: 8px; }
.topo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; transition: transform .2s var(--curva), box-shadow .2s; }
.topo-btn:active { transform: scale(.95); }
.topo-btn span { display: none; }
/* Menu das seções: no celular, abre pelo botão e desce do topo; no computador, fica sempre à vista. */
.menu { display: none; }
@media (max-width: 759.98px) {
  .topo-site.menu-aberto { background: #fff; box-shadow: 0 1px 0 var(--borda); }
  .topo-site.menu-aberto .menu { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: 4px var(--margem) 14px; border-radius: 0 0 24px 24px; background: #fff; box-shadow: 0 18px 30px -18px rgba(42, 42, 51, .35); animation: aparece .2s ease; }
  .menu a { display: flex; align-items: center; min-height: 56px; color: var(--texto); font-family: var(--serifa); font-size: 26px; text-decoration: none; }
  .menu a + a { border-top: 1px solid var(--borda); }
}

/* Banner: a loja normal usa o padrão; cada campanha troca o fundo e os enfeites pelo tema dela. */
.hero { --hero-a: var(--ciano-claro); --hero-b: var(--rosa-claro); position: relative; overflow: hidden; margin-top: calc(-1 * var(--altura-topo)); padding: calc(var(--altura-topo) + 20px) 0 36px; border-radius: 0 0 32px 32px; background: radial-gradient(130% 75% at 0% 0%, var(--hero-a), transparent 72%), radial-gradient(130% 70% at 100% 100%, var(--hero-b), transparent 72%), #fff; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.hero-bio { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--texto-suave); text-wrap: balance; }
.hero-bio::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rosa); transform: translateY(-1px); }
.hero[data-tema] .hero-bio { display: none; }
.script { font-family: var(--cursiva); font-size: 42px; line-height: 1; margin: 0 0 6px; }
.hero h1 { font-size: clamp(2.55rem, 11.2vw, 3.6rem); line-height: 1.02; margin: 0 0 14px; }
#hero-texto { max-width: 44ch; margin: 0 0 22px; font-size: 17px; color: var(--texto-suave); }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.acoes .btn { flex: 1 1 auto; padding: 0 20px; }
.selos { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 500; }
.selos li { display: flex; align-items: center; gap: 7px; }
.bola { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ciano); }
.bola.r { background: var(--rosa-pastel); }
.bola .icone { width: 12px; height: 12px; stroke-width: 3; }

.hero-midia { position: relative; min-width: 0; }
/* A foto do banner vem num .quadro (tema.css), com o enquadramento escolhido no painel. */
.hero-foto { width: 100%; aspect-ratio: 4 / 3; border-radius: 28px; box-shadow: var(--sombra); }
.hero-foto:not([hidden]) + .mosaico { display: none; }
/* object-position: as fotos vêm de recortes do Instagram, com o ícone dele no canto de cima. */
.mosaico { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; aspect-ratio: 5 / 3; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; border-radius: 18px; }
.mosaico img:first-child { grid-row: span 2; border-radius: 50% 50% 18px 18px / 44% 44% 18px 18px; }
.mosaico img:nth-child(2) { border-top-right-radius: 64px; }
.selo-redondo { position: absolute; left: 54.5%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 12px rgba(42, 42, 51, .18)); }
.selo-redondo text { font-family: var(--sans); font-size: 10.5px; font-weight: 700; fill: var(--texto); }
.selo-redondo use { fill: none; stroke: var(--texto); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.selo-anel { transform-origin: 60px 60px; animation: gira 32s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.hero[data-tema="natal"], .hero[data-tema="maes"], .hero[data-tema="criancas"] { --hero-a: var(--rosa-claro); --hero-b: var(--ciano-claro); }
/* Enfeites: no celular ficam só no canto de cima, para não cair em cima do texto. */
.hero[data-tema]::before { content: ''; position: absolute; top: var(--altura-topo); right: 0; width: 170px; height: 130px; background-size: 320px 220px; background-position: right top; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.hero[data-tema="natal"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220'%3E%3Cg fill='%235ac4c0'%3E%3Cpath d='M40 26Q40 40 54 40Q40 40 40 54Q40 40 26 40Q40 40 40 26z'/%3E%3Cpath d='M286 97Q286 112 301 112Q286 112 286 127Q286 112 271 112Q286 112 286 97z'/%3E%3Cpath d='M192 170Q192 176 198 176Q192 176 192 182Q192 176 186 176Q192 176 192 170z'/%3E%3Ccircle cx='110' cy='30' r='2'/%3E%3C/g%3E%3Cg fill='%23f474a1'%3E%3Cpath d='M218 24Q218 34 228 34Q218 34 218 44Q218 34 208 34Q218 34 218 24z'/%3E%3Cpath d='M76 153Q76 162 85 162Q76 162 76 171Q76 162 67 162Q76 162 76 153z'/%3E%3Ccircle cx='250' cy='190' r='2'/%3E%3C/g%3E%3Cpath fill='%23fa9dc1' d='M130 81Q130 88 137 88Q130 88 130 95Q130 88 123 88Q130 88 130 81z'/%3E%3C/svg%3E"); }
.hero[data-tema="pascoa"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220'%3E%3Cellipse fill='%23fa9dc1' cx='44' cy='46' rx='11' ry='14' transform='rotate(-14 44 46)'/%3E%3Cellipse fill='none' stroke='%235ac4c0' stroke-width='1.5' cx='150' cy='96' rx='8' ry='10.5' transform='rotate(12 150 96)'/%3E%3Cellipse fill='%235ac4c0' cx='244' cy='40' rx='9' ry='12' transform='rotate(10 244 40)'/%3E%3Cellipse fill='none' stroke='%23f474a1' stroke-width='1.5' cx='286' cy='136' rx='11' ry='14' transform='rotate(-10 286 136)'/%3E%3Cellipse fill='%23f474a1' cx='84' cy='168' rx='8' ry='10.5' transform='rotate(14 84 168)'/%3E%3Ccircle fill='%235ac4c0' cx='200' cy='180' r='2'/%3E%3C/svg%3E"); }
.hero[data-tema="maes"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:x='http://www.w3.org/1999/xlink' width='320' height='220'%3E%3Cdefs%3E%3Cpath id='c' d='M0 9C-12 1-9-8-4-8c1.8 0 3.2 1.1 4 2.8C.8-6.9 2.2-8 4-8c5 0 8 9-4 17z'/%3E%3C/defs%3E%3Cuse x:href='%23c' fill='%23f474a1' transform='translate(42 44) scale(1.3)'/%3E%3Cuse x:href='%23c' fill='none' stroke='%235ac4c0' stroke-width='1.3' transform='translate(150 96)'/%3E%3Cuse x:href='%23c' fill='%23fa9dc1' transform='translate(240 38)'/%3E%3Cuse x:href='%23c' fill='none' stroke='%23f474a1' stroke-width='1' transform='translate(286 132) scale(1.5)'/%3E%3Cuse x:href='%23c' fill='%235ac4c0' transform='translate(84 168) scale(.8)'/%3E%3C/svg%3E"); }
.hero[data-tema="pais"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:x='http://www.w3.org/1999/xlink' width='320' height='220'%3E%3Cdefs%3E%3Cpath id='g' d='M-14-8 0 0-14 8zM14-8 0 0 14 8z'/%3E%3C/defs%3E%3Cuse x:href='%23g' fill='%235ac4c0' transform='translate(46 44) rotate(-10)'/%3E%3Cuse x:href='%23g' fill='none' stroke='%23f474a1' stroke-width='1.5' stroke-linejoin='round' transform='translate(150 100) scale(.8) rotate(8)'/%3E%3Cuse x:href='%23g' fill='%23fa9dc1' transform='translate(244 36) scale(.8) rotate(10)'/%3E%3Cuse x:href='%23g' fill='none' stroke='%235ac4c0' stroke-width='1.3' stroke-linejoin='round' transform='translate(284 134) scale(1.1) rotate(-8)'/%3E%3Cuse x:href='%23g' fill='%23f474a1' transform='translate(86 170) scale(.7) rotate(12)'/%3E%3C/svg%3E"); }
.hero[data-tema="junina"] { padding-top: calc(var(--altura-topo) + 60px); }
.hero[data-tema="junina"]::before { width: 100%; height: 64px; background-size: 120px 64px; background-repeat: repeat-x; background-position: 0 0; -webkit-mask-image: none; mask-image: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Cpath fill='%23f474a1' d='M8 13l24 2-12 25z'/%3E%3Cpath fill='%235ac4c0' d='M48 18h24L60 45z'/%3E%3Cpath fill='%23fa9dc1' d='M88 15l24-2-12 27z'/%3E%3Cpath fill='none' stroke='%232A2A33' stroke-opacity='.45' d='M0 10Q60 26 120 10'/%3E%3C/svg%3E"); }
.hero[data-tema="criancas"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:x='http://www.w3.org/1999/xlink' width='320' height='220'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cellipse rx='11' ry='14'/%3E%3Cpath d='M0 14q-3 8 0 18' fill='none' stroke='%232A2A33' stroke-opacity='.35'/%3E%3C/g%3E%3C/defs%3E%3Cuse x:href='%23b' fill='%235ac4c0' x='44' y='42'/%3E%3Cuse x:href='%23b' fill='%23fa9dc1' x='150' y='92'/%3E%3Cuse x:href='%23b' fill='%23f474a1' x='242' y='36'/%3E%3Cuse x:href='%23b' fill='%235ac4c0' x='288' y='128'/%3E%3Cuse x:href='%23b' fill='%23f474a1' x='82' y='160'/%3E%3C/svg%3E"); }
.hero[data-tema="geral"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220'%3E%3Cg fill='%235ac4c0'%3E%3Ccircle cx='40' cy='40' r='4'/%3E%3Ccircle cx='286' cy='116' r='6'/%3E%3Ccircle cx='192' cy='178' r='3'/%3E%3C/g%3E%3Cg fill='%23f474a1'%3E%3Ccircle cx='218' cy='34' r='5'/%3E%3Ccircle cx='76' cy='162' r='3'/%3E%3C/g%3E%3Ccircle fill='%23fa9dc1' cx='130' cy='90' r='5'/%3E%3C/svg%3E"); }

/* Cardápio */
.filtros { position: sticky; top: var(--altura-topo); z-index: 10; margin-inline: calc(-1 * var(--margem)); padding: 10px 0; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cats { display: flex; gap: 8px; padding: 0 var(--margem); overflow-x: auto; scrollbar-width: none; }
.cats + .cats { margin-top: 8px; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--borda); font-weight: 500; font-size: 15px; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.cat[aria-pressed="true"] { background: var(--ciano); box-shadow: none; font-weight: 600; }
/* Filtro por selo: botões menores, em rosa quando ligados; dá para ligar vários (o produto precisa ter todos).
   A linha quebra em vez de rolar, para nenhum selo ficar escondido. O ✓ ocupa o espaço da margem da
   esquerda (8 + 12 + 4 = 24 = 17 + 7 a menos à direita), então o botão não muda de largura ao ligar. */
#filtro-selos { flex-wrap: wrap; overflow: visible; }
.cat.selo { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 17px; font-size: 14px; font-weight: 500; }
.cat.selo .icone { display: none; width: 12px; height: 12px; stroke-width: 2.8; }
.cat.selo[aria-pressed="true"] { padding: 0 10px 0 8px; background: var(--rosa-pastel); font-weight: 500; }
.cat.selo[aria-pressed="true"] .icone { display: block; }

.lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; padding-top: 12px; }
.produto { display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-margin-top: calc(var(--altura-topo) + 64px); animation: aparece .35s ease; }
.foto { position: relative; flex: none; aspect-ratio: 1; overflow: hidden; border-radius: var(--raio); transition: box-shadow .25s; }
.foto.tom-0 { background: var(--ciano-claro); }
.foto.tom-1 { background: var(--rosa-claro); }
.foto img { transition: transform .6s var(--curva); }
/* Carrossel de fotos do cartão: rola para o lado e para em cada foto. */
.trilha { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.trilha::-webkit-scrollbar { display: none; }
.trilha > .quadro { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
/* Cada foto vem num .quadro (tema.css), com o enquadramento escolhido no painel. */
.foto > .quadro { width: 100%; height: 100%; }
.pontos { position: absolute; z-index: 1; top: 8px; left: 50%; display: flex; gap: 5px; padding: 5px 7px; border-radius: 999px; background: rgba(42, 42, 51, .35); transform: translateX(-50%); pointer-events: none; }
.pontos span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: background-color .2s, transform .2s; }
.pontos span.on { background: #fff; transform: scale(1.2); }
.passar { position: absolute; z-index: 1; top: 50%; display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: var(--sombra); cursor: pointer; transform: translateY(-50%); opacity: 0; transition: opacity .2s; }
.passar .icone { width: 18px; height: 18px; }
.passar.ant { left: 8px; }
.passar.ant .icone { transform: scaleX(-1); }
.passar.prox { right: 8px; }
.passar:disabled { visibility: hidden; }
.foto > .icone { position: absolute; inset: 0; width: 42%; height: 42%; margin: auto; stroke-width: 1.1; transform: translate(-8%, -8%); }
.foto::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ciano); opacity: 0; pointer-events: none; transition: opacity .2s; }
.no-pedido .foto::after { opacity: 1; }
.produto.destaque .foto { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--rosa-pastel); }
.qtd { position: absolute; z-index: 1; right: 8px; bottom: 8px; display: flex; align-items: center; border-radius: 999px; background: #fff; box-shadow: var(--sombra); }
.qtd button { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .2s var(--curva); }
.qtd button:active { transform: scale(.88); }
.qtd .mais { background: var(--rosa); }
.qtd output { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.produto:not(.no-pedido) .menos, .produto:not(.no-pedido) output { display: none; }
/* Nome do produto: no máximo 2 linhas, no cartão e no carrinho; o resto vira reticências. */
.nome-btn, .item-nome { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.nome { margin: 0; font-size: 21px; line-height: 1.12; overflow-wrap: anywhere; }
/* O nome também abre a janela de detalhes: é o caminho pelo teclado quando não há o "i". */
.nome-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
/* Selos no cartão: uma linha só. Se não couber, o texto passa devagar, como um letreiro (para no mouse ou no toque).
   Tocar ou passar o mouse abre um balão com todos os selos. Com "reduzir movimento" ligado, a linha quebra em vez de rolar. */
.selos-linha { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; margin: 5px 0 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; text-align: left; cursor: pointer; }
.selos-linha::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rosa); }
.selos-janela { flex: 1; min-width: 0; overflow: hidden; }
.selos-trilho { display: flex; width: max-content; }
.selos-txt { white-space: nowrap; }
.selos-txt + .selos-txt { display: none; }
.selos-linha.quebra .selos-trilho { width: auto; }
.selos-linha.quebra .selos-txt { white-space: normal; }
.selos-linha.rola .selos-janela { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
.selos-linha.rola .selos-txt { padding-right: 28px; }
.selos-linha.rola .selos-txt + .selos-txt { display: block; }
.selos-linha.rola .selos-trilho { animation: letreiro var(--dur, 14s) linear infinite; }
.selos-linha.aberta .selos-trilho { animation-play-state: paused; }
/* Fica parado no começo por um quarto do tempo e depois anda uma cópia inteira: a volta não dá salto. */
@keyframes letreiro { 0%, 25% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.selos-dica { position: absolute; z-index: 3; top: calc(100% + 8px); left: -6px; right: -6px; display: none; flex-wrap: wrap; gap: 4px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: var(--sombra-forte); font-size: 12.5px; letter-spacing: 0; text-transform: none; cursor: auto; }
.selos-dica span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--ciano-claro); }
.selos-dica .icone { width: 12px; height: 12px; stroke-width: 2.8; }
.selos-linha.aberta .selos-dica { display: flex; }
.selos-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.selos-pills li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--ciano-claro); font-size: 13.5px; font-weight: 600; }
.selos-pills .icone { width: 14px; height: 14px; stroke-width: 2.6; }
.selos-pills:empty { display: none; }
.desc { margin: 3px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--texto-suave); }
.desc:empty { display: none; }
.preco { margin: 6px 0 0; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.preco:empty { display: none; }
.vazio { grid-column: 1 / -1; padding: 24px 0; text-align: center; color: var(--texto-suave); }
.esqueleto { aspect-ratio: 1; border-radius: var(--raio); background: linear-gradient(100deg, var(--ciano-fundo) 30%, var(--ciano-claro) 50%, var(--ciano-fundo) 70%) 0 0 / 200% 100%; animation: brilho 1.4s linear infinite; }
@keyframes brilho { to { background-position: -200% 0; } }

.destaques { margin-bottom: 48px; padding: 24px 18px 26px; border-radius: 28px; background: var(--rosa-fundo); }
.destaques .lista { padding-top: 4px; }
.destaques .foto.tom-0, .destaques .foto.tom-1 { background: #fff; }
.destaques .produto:only-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
.destaques .produto:only-child .foto { width: 46%; max-width: 220px; }
.destaques .produto:only-child .nome { font-size: 26px; }

/* Sobre */
.sobre { padding: 36px 24px; border-radius: 32px; background: linear-gradient(150deg, var(--rosa-claro), var(--ciano-fundo) 80%); }
.sobre p { margin: 0; }
.sobre-foto { width: 100%; height: auto; margin-bottom: 26px; border-radius: 50% 50% 24px 24px / 40% 40% 24px 24px; }
.sobre-frase { margin-top: 26px !important; font-family: var(--serifa); font-size: clamp(1.75rem, 7.4vw, 2.75rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.assinatura { margin-top: 14px !important; font-family: var(--cursiva); font-size: 38px; line-height: 1; }

/* Como pedir */
.passos { display: grid; grid-template-columns: minmax(0, 1fr); margin: 8px 0 0; padding: 0; list-style: none; counter-reset: passo; }
.passos li { counter-increment: passo; display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--borda); color: var(--texto-suave); }
.passos li::before { content: counter(passo); display: flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ciano-claro); color: var(--texto); font-family: var(--serifa); font-style: italic; font-size: 24px; line-height: 1; }
.passos li:nth-child(2)::before { background: var(--rosa-claro); }
.passos strong { display: block; margin-bottom: 2px; color: var(--texto); font-family: var(--serifa); font-weight: 400; font-size: 25px; line-height: 1.15; }

/* Instagram */
.insta { display: grid; gap: 18px; padding: 30px 24px; border-radius: 32px; background: var(--rosa-fundo); }
.insta-icone { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 22px; background: linear-gradient(135deg, var(--rosa-pastel), var(--rosa) 55%, var(--ciano)); }
.insta-icone .icone { width: 32px; height: 32px; }
.insta h2 { margin-bottom: 6px !important; }
.insta p { margin: 0; color: var(--texto-suave); }
.insta .arroba { color: var(--texto); font-weight: 600; }

/* Rodapé */
footer { margin-top: 64px; padding: 44px 0 32px; border-radius: 32px 32px 0 0; background: var(--ciano-fundo); text-align: center; font-size: 14px; color: var(--texto-suave); }
footer .marca { font-size: 26px; }
footer p { margin: 14px 0 0; text-wrap: balance; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin-top: 14px; }
.rodape-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; color: var(--texto); font-weight: 500; text-underline-offset: 4px; }
.rodape-links .icone { width: 18px; height: 18px; }
body.com-barra footer { padding-bottom: 104px; }

/* Barra do pedido */
.barra { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; animation: sobe .4s var(--curva); }
.barra .btn { display: flex; justify-content: space-between; width: 100%; max-width: 460px; min-height: 60px; margin: 0 auto; padding: 0 20px 0 10px; box-shadow: var(--sombra-forte); pointer-events: auto; }
.barra-qtd { display: flex; align-items: center; justify-content: center; flex: none; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; background: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.barra-resumo { flex: 1; text-align: left; font-variant-numeric: tabular-nums; }
.barra-resumo small { margin-left: 4px; font-size: 13px; font-weight: 500; opacity: .75; }
.barra-ver { display: flex; align-items: center; gap: 6px; }

/* Aviso de pedido limpo, com a opção de desfazer: aparece no lugar da barra. */
.aviso { position: fixed; z-index: 15; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% - 24px); max-width: 460px; min-height: 60px; padding: 0 8px 0 22px; border-radius: 999px; background: #fff; box-shadow: var(--sombra-forte); font-weight: 500; transform: translate(-50%, 160%); visibility: hidden; transition: transform .35s var(--curva), visibility .35s; }
.aviso.on { transform: translate(-50%, 0); visibility: visible; transition: transform .35s var(--curva), visibility 0s; }
.aviso button { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ciano-claro); font-weight: 600; cursor: pointer; }

/* Pedido: folha que sobe no celular, painel lateral no computador */
/* Altura fixa: a folha tem sempre o mesmo tamanho, com 1 item ou com 20 (a lista de itens rola por dentro). */
#checkout { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; height: min(92vh, 760px); height: min(92dvh, 760px); max-height: none; margin: 0; overflow: hidden; border-radius: 28px 28px 0 0; }
#checkout[open] { animation: sobe .38s var(--curva); }
.checkout { display: flex; flex-direction: column; height: 100%; }
.checkout-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 22px; }
.titulo { margin: 0; font-size: 32px; line-height: 1.1; }
.fechar { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--rosa-fundo); cursor: pointer; }
.checkout-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 4px 22px 16px; overflow-y: auto; overscroll-behavior: contain; }
.checkout-corpo > * { flex: none; }
.resumo { display: flex; flex-direction: column; border-block: 1px solid var(--borda); font-size: 15px; }
/* Lista de itens com altura máxima: com muitos itens, ela rola por dentro e a folha não cresce. */
.itens { max-height: 30vh; max-height: 30dvh; overflow-y: auto; overscroll-behavior: contain; }
.linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; font-variant-numeric: tabular-nums; }
.item-pedido + .item-pedido { border-top: 1px solid var(--borda); }
.item-pedido { padding: 6px 0; }
.item-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-valor { flex: none; text-align: right; color: var(--texto-suave); }
.passo { display: flex; align-items: center; flex: none; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--borda); margin-right: 12px; }
.passo button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .2s var(--curva); }
.passo button:active { transform: scale(.88); }
.passo .icone { width: 16px; height: 16px; }
.passo output { min-width: 18px; text-align: center; font-weight: 700; }
.linha.total { border-top: 1px solid var(--borda); font-weight: 600; font-size: 17px; }
.total-nota { margin: -6px 0 11px; font-size: 14px; color: var(--texto-suave); }
.total-nota:empty { display: none; }
.limpar { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -14px 0 -8px; padding: 0 2px; border: 0; background: none; color: var(--texto-suave); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.limpar .icone { width: 16px; height: 16px; }
.nota strong { color: var(--texto); font-weight: 600; }
.nota { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--ciano-fundo); font-size: 14px; color: var(--texto-suave); }
.nota + .nota { margin-top: -8px; }
.checkout-rodape { padding: 12px 22px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--borda); }
.checkout-rodape .btn { width: 100%; }
.rodape-nota { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--texto-suave); }
.etapa-confirmar.checkout-rodape { display: grid; gap: 8px; }
/* Confirmação antes de abrir o WhatsApp */
.confirmar-intro { margin: 0; font-size: 17px; color: var(--texto-suave); }
.garantias { display: grid; gap: 18px; margin: 4px 0 0; padding: 0; list-style: none; }
.garantias li { display: flex; gap: 14px; color: var(--texto-suave); }
.garantias .bola { width: 32px; height: 32px; margin-top: 2px; }
.garantias .bola .icone { width: 16px; height: 16px; }
.garantias strong { display: block; color: var(--texto); font-family: var(--serifa); font-weight: 400; font-size: 23px; line-height: 1.15; margin-bottom: 2px; }
.nota-privacidade { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--texto-suave); }
.nota-privacidade a, footer p a { color: inherit; text-underline-offset: 3px; }

/* Detalhes do produto: folha que sobe no celular, janela no meio da tela no computador */
.foto { cursor: pointer; }
.info { position: absolute; z-index: 1; top: 8px; left: 8px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: var(--sombra); cursor: pointer; }
.info .icone { width: 18px; height: 18px; }
#detalhe { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh; margin: 0; padding: 0; overflow: hidden; border-radius: 28px 28px 0 0; }
#detalhe[open] { animation: sobe .38s var(--curva); }
.detalhe { position: relative; display: flex; flex-direction: column; max-height: 92vh; max-height: 92dvh; }
.detalhe .fechar { position: absolute; z-index: 2; top: 12px; right: 12px; background: #fff; box-shadow: var(--sombra); }
.detalhe-rola { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.detalhe-foto { aspect-ratio: 1; border-radius: 0; background: var(--ciano-claro); cursor: auto; }
.detalhe-corpo { padding: 20px 22px 24px; }
.detalhe-corpo .desc { margin-top: 6px; font-size: 15px; }
.detalhe-no-pedido { display: flex; align-items: center; gap: 12px; }
.detalhe-no-pedido .btn { flex: 1; }
.passo.grande button { width: 52px; height: 52px; }
.passo.grande .icone { width: 20px; height: 20px; }
.passo.grande output { min-width: 26px; font-size: 18px; }
.md:empty { display: none; }
.md { margin-top: 16px; font-size: 16px; line-height: 1.55; color: var(--texto); overflow-wrap: anywhere; }
.md.simples { white-space: pre-line; }
.md > :first-child { margin-top: 0; }
.md p, .md ul, .md ol { margin: 0 0 12px; }
.md ul, .md ol { padding-left: 22px; }
.md li + li { margin-top: 4px; }
.md h1, .md h2, .md h3 { margin: 20px 0 8px; font-family: var(--serifa); font-weight: 400; font-size: 24px; line-height: 1.15; }
.md a { color: var(--texto); text-underline-offset: 3px; }
.md img { max-width: 100%; height: auto; border-radius: 14px; }

@media (hover: hover) {
  .topo-btn:hover { box-shadow: inset 0 0 0 1px var(--texto); }
  .cat:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--texto); }
  .produto:hover .foto img { transform: scale(var(--s-hover, 1.04)); }
  .passar { display: flex; }
  .produto:hover .passar, .detalhe-foto:hover .passar, .passar:focus-visible { opacity: 1; }
  .selos-linha:hover .selos-dica { display: flex; }
  .selos-linha:hover .selos-trilho { animation-play-state: paused; }
  .menu a:hover { text-decoration: underline; }
}

@media (min-width: 720px) {
  .lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; }
  .nome { font-size: 24px; }
  .desc { font-size: 14.5px; }
  .destaques { padding: 36px; }
  .destaques .lista { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .destaques .produto { max-width: 300px; }
  .destaques .produto:only-child { max-width: none; }
  .destaques .produto:only-child .foto { width: 200px; }
  .destaques .produto:only-child .nome { font-size: 34px; }
  #checkout { inset: 0 0 0 auto; width: 460px; height: 100vh; height: 100dvh; max-height: none; border-radius: 28px 0 0 28px; }
  #checkout[open] { animation-name: entra-do-lado; }
  #detalhe { inset: 0; width: calc(100% - 48px); max-width: 600px; height: fit-content; max-height: calc(100dvh - 48px); margin: auto; border-radius: 28px; }
  .detalhe { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
  .detalhe-corpo { padding: 24px 32px 28px; }
  .itens { max-height: 40vh; max-height: 40dvh; }
  .checkout-topo { padding: 24px 24px 16px 32px; }
  .checkout-corpo { padding: 4px 32px 20px; }
  .checkout-rodape { padding: 16px 32px 24px; }
}

@media (min-width: 760px) {
  :root { --altura-topo: 72px; }
  .topo-site .marca { font-size: 20px; }
  .menu { display: flex; gap: 2px; margin-left: auto; }
  .menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--texto); font-weight: 500; font-size: 15px; text-decoration: none; text-underline-offset: 5px; }
  #abrir-menu { display: none; }
  #topo-wpp { width: auto; padding: 0 18px; }
  #topo-wpp span { display: inline; }
  .insta { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 40px 48px; border-radius: 44px; }
  .secao { padding-top: 88px; }
  .secao h2 { margin-bottom: 20px; }
  .hero { padding-bottom: 56px; border-radius: 0 0 44px 44px; }
  .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; }
  .hero h1 { font-size: clamp(2.9rem, 5.6vw, 5.25rem); }
  .acoes .btn { flex: 0 0 auto; padding: 0 22px; }
  .sobre { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding: 64px 56px; border-radius: 44px; }
  .sobre p:not(.sobre-frase):not(.assinatura) { font-size: 18px; }
  .sobre-foto { margin-bottom: 0; }
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .passos li { flex-direction: column; gap: 14px; padding: 24px 0 0; }
  .passos strong { font-size: 28px; margin-bottom: 4px; }
  footer { margin-top: 96px; padding: 56px 0 36px; border-radius: 44px 44px 0 0; }
  .barra { padding-bottom: 20px; }
  .aviso { bottom: 20px; }
}

@media (min-width: 960px) {
  .hero:not([data-tema="junina"])[data-tema]::before { width: 34%; height: calc(100% - var(--altura-topo)); background-size: 400px 275px; -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); }
  .hero { padding: calc(var(--altura-topo) + 44px) 0 72px; }
  .hero .wrap { gap: 56px; }
  .hero h1 { margin-bottom: 18px; }
  /* O título fica no alto, ao lado da primeira fileira, mesmo com várias fileiras de especiais. */
  .destaques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 40px; align-items: start; padding: 44px; }
  .destaques h2 { margin: 0; }
  .destaques .lista { padding-top: 0; }
  .acoes .btn { padding: 0 30px; }
  .hero-bio { font-size: 15px; margin-bottom: 18px; }
  .script { font-size: 54px; margin-bottom: 10px; }
  #hero-texto { font-size: 19px; margin-bottom: 28px; }
  .selos { font-size: 14.5px; margin-top: 26px; gap: 8px 22px; }
  .selo-redondo { width: 116px; height: 116px; }
  .mosaico { gap: 14px; }
  .mosaico img { border-radius: 24px; }
  .mosaico img:first-child { border-radius: 50% 50% 24px 24px / 44% 44% 24px 24px; }
  .mosaico img:nth-child(2) { border-top-right-radius: 96px; }
}

/* Janela de detalhes larga: foto grande à esquerda e o texto ao lado, para o nome não ficar abaixo da dobra. */
@media (min-width: 900px) {
  #detalhe:not(:has(.detalhe-foto[hidden])) { max-width: 920px; }
  .detalhe-rola { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .detalhe-foto { position: sticky; top: 0; }
  .detalhe-foto[hidden] + .detalhe-corpo { grid-column: 1 / -1; }
  .detalhe-corpo { padding: 32px 32px 28px; }
  .detalhe-corpo .titulo { padding-right: 44px; }
}

@media (min-width: 1040px) {
  .lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Página do cardápio ---------- */
/* Cabeça da página: o mesmo fundo do banner, mais baixa. */
.cabeca { margin-top: calc(-1 * var(--altura-topo)); padding: calc(var(--altura-topo) + 18px) 0 28px; border-radius: 0 0 32px 32px; background: radial-gradient(130% 90% at 0% 0%, var(--ciano-claro), transparent 72%), radial-gradient(130% 90% at 100% 100%, var(--rosa-claro), transparent 72%), #fff; }
.cabeca h1 { font-size: clamp(2.55rem, 11.2vw, 3.6rem); line-height: 1.02; margin: 0 0 10px; }
.cabeca p { max-width: 46ch; margin: 0; font-size: 16px; color: var(--texto-suave); }
.cabeca strong { color: var(--texto); font-weight: 600; }
body[data-pagina="cardapio"] #cardapio { padding-top: 28px; }
#destaques, #titulo-cardapio { scroll-margin-top: calc(var(--altura-topo) + 8px); }

/* ---------- Início: categorias que levam ao cardápio ---------- */
.lista-categorias { display: grid; gap: 10px; }
.cat-cartao { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 10px 18px 10px 10px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--borda); color: var(--texto); text-decoration: none; transition: box-shadow .2s, transform .2s var(--curva); }
.cat-cartao:active { transform: scale(.98); }
.cat-cartao .foto { width: 76px; border-radius: 18px; cursor: inherit; }
.cat-cartao-txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cat-cartao-nome { font-family: var(--serifa); font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.cat-cartao-qtd { font-size: 14px; color: var(--texto-suave); }
.cat-cartao > .icone { width: 22px; height: 22px; }
.categorias-mais { margin-top: 16px; }
.categorias-mais .btn { width: 100%; }

/* ---------- Pedido de avaliação no Google (aparece só para quem já mandou uma lista) ---------- */
.avaliacao { padding-top: 24px; transition: opacity .25s; }
.avaliacao.saindo { opacity: 0; }
.avaliacao-cartao { display: grid; gap: 14px; padding: 22px 20px 10px; border-radius: 28px; background: #fff; box-shadow: var(--sombra), inset 0 0 0 1px var(--borda); animation: aparece .35s ease; }
.estrelas { display: flex; gap: 3px; }
.estrelas .icone { width: 18px; height: 18px; fill: var(--rosa); stroke: none; }
.avaliacao h2 { margin: 8px 0 4px; font-size: 28px; line-height: 1.1; }
.avaliacao p { margin: 0; font-size: 15px; color: var(--texto-suave); }
.avaliacao-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.avaliacao-acoes .btn { flex: 1 1 auto; min-height: 50px; padding: 0 20px; }
.avaliacao-nunca { justify-self: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--texto-suave); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rodape-links a[hidden] { display: none; }

@media (hover: hover) {
  .cat-cartao:hover { box-shadow: inset 0 0 0 1px var(--texto); }
  .cat-cartao:hover .foto img { transform: scale(var(--s-hover, 1.04)); }
}

@media (min-width: 720px) {
  .lista-categorias { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
  .cat-cartao { flex-direction: column; align-items: stretch; gap: 14px; padding: 10px 10px 18px; border-radius: 28px; }
  .cat-cartao .foto { width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; }
  /* No formato 4:3, o tamanho da foto ajustada é outro (fotos.js, proporcaoLarga). */
  .cat-cartao .foto img { transform: scale(var(--s-larga, 1)); }
  .cat-cartao-txt { padding: 0 10px; }
  .cat-cartao > .icone { display: none; }
  .categorias-mais { text-align: center; }
  .categorias-mais .btn { width: auto; }
}

@media (min-width: 760px) {
  .cabeca { padding: calc(var(--altura-topo) + 36px) 0 44px; border-radius: 0 0 44px 44px; }
  .cabeca h1 { font-size: clamp(2.9rem, 5.6vw, 4.5rem); }
  .cabeca p { font-size: 18px; }
  body[data-pagina="cardapio"] #cardapio { padding-top: 40px; }
  .avaliacao-cartao { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; padding: 26px 32px 8px; }
  .avaliacao-nunca { grid-column: 1 / -1; justify-self: end; }
}

/* ---------- Início: seção do Google (antes do Instagram, com mais destaque) ---------- */
.google { position: relative; overflow: hidden; padding: 36px 24px; border-radius: 32px; background: radial-gradient(120% 90% at 100% 0%, var(--rosa-claro), transparent 65%), linear-gradient(160deg, var(--ciano-claro), var(--ciano-fundo) 75%); text-align: center; }
.google .estrelas { justify-content: center; gap: 6px; }
.google .estrelas .icone { width: 30px; height: 30px; }
.google h2 { margin: 16px auto 12px !important; max-width: 16ch; }
.google p { max-width: 46ch; margin: 0 auto; font-size: 17px; color: var(--texto-suave); }
.google-acoes { display: grid; gap: 10px; margin-top: 24px; }
.google-acoes .icone { fill: currentColor; stroke: none; }
@media (min-width: 760px) {
  .google { padding: 64px 56px; border-radius: 44px; }
  .google .estrelas .icone { width: 38px; height: 38px; }
  .google p { font-size: 19px; }
  .google-acoes { display: flex; justify-content: center; }
  .google-acoes .btn { padding: 0 30px; }
}

@media (min-width: 720px) and (hover: hover) {
  .cat-cartao:hover .foto img { transform: scale(var(--s-larga-hover, 1.04)); }
}