/* Viver Natural Saúde · landing
   Tokens = Figma ApsxVw2NTGytYdETo5pUSB, variáveis "Viver Natural · Cores" + estilos Web/, Mobile/, Comum/.
   Mudou no Figma? Mude só este bloco. */
:root {
  --marca-verde: #33503a;
  --marca-verde-escuro: #24402c;
  --marca-mel: #b87a1e;
  --marca-mel-texto: #8a5a12;
  --marca-mel-claro: #fbebd0;
  --texto-principal: #1f2a21;
  --texto-apoio: #57615a;
  --texto-invertido: #ffffff;
  --fundo-branco: #ffffff;
  --fundo-salvia: #eef1e8;
  --fundo-imagem: #e3e8dc;
  --linha: #d3d9cc;
  --whatsapp-botao: #15803d;
  --whatsapp-balao: #d9fdd3;
  --whatsapp-fundo-chat: #e5ddd4;
  --pote-oleos: #a86c14;
  --pote-fito: #3d7a3a;
  --pote-omega: #245c7a;

  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mobile/ */
  --t-display: 700 32px/1.12 var(--serif);
  --t-h2: 700 26px/1.2 var(--serif);
  --t-texto: 400 18px/1.5 var(--sans);
  /* Comum/ */
  --t-marca: 700 22px/1.2 var(--serif);
  --t-botao: 800 18px/1.2 var(--sans);
  --t-titulo-card: 800 20px/1.25 var(--sans);
  --t-destaque: 700 18px/1.4 var(--sans);
  --t-preco: 800 24px/1.2 var(--sans);
  --t-apoio: 400 17px/1.4 var(--sans);
  --t-legenda: 600 16px/1.35 var(--sans);

  --raio-botao: 14px;
  --raio-card: 20px;
  --toque: 56px;
  --borda: 16px;
  --largura: 1200px;
}
@media (min-width: 900px) {
  :root {
    /* Web/ */
    --t-display: 700 52px/1.1 var(--serif);
    --t-h2: 700 38px/1.15 var(--serif);
    --t-texto: 400 20px/1.5 var(--sans);
    --borda: 40px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
html.mov { scroll-behavior: auto; } /* a rolagem suave é feita em js/movimento.js */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: var(--t-texto); color: var(--texto-principal); background: var(--fundo-salvia); }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--marca-mel); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--largura) + 2 * var(--borda)); margin: 0 auto; padding: 0 var(--borda); }
.apoio { font: var(--t-apoio); color: var(--texto-apoio); }
.legenda { font: var(--t-legenda); color: var(--texto-apoio); }

/* Botões (componente Botão 8:26: Primário · WhatsApp · Secundário · Link) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--toque); padding: 16px 24px; border-radius: var(--raio-botao);
  border: 2px solid var(--marca-verde); background: var(--marca-verde); color: var(--texto-invertido);
  font: var(--t-botao); text-decoration: none; cursor: pointer; text-align: center;
}
.btn:hover { background: var(--marca-verde-escuro); border-color: var(--marca-verde-escuro); }
.btn--sec { background: var(--fundo-branco); color: var(--marca-verde); }
.btn--sec:hover { background: var(--fundo-salvia); color: var(--marca-verde-escuro); }
.btn--wa { background: var(--whatsapp-botao); border-color: var(--whatsapp-botao); }
.btn--wa:hover { background: #116b33; border-color: #116b33; }
.btn--wa::before { content: ""; width: 24px; height: 24px; flex: none; background: url(../img/whatsapp.svg) center / contain no-repeat; }
.btn--link { background: none; border-color: transparent; color: var(--marca-verde); padding: 12px 10px; min-height: 48px; }
.btn--link:hover { background: var(--fundo-salvia); border-color: transparent; }
.btn--bloco { width: 100%; }
.btn[aria-pressed="true"] { background: var(--fundo-branco); color: var(--marca-verde); }
.btn[aria-pressed="true"]::before { content: "✓"; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Header */
.topo { position: sticky; top: 0; z-index: 20; background: var(--fundo-branco); border-bottom: 1px solid var(--linha); }
.topo .wrap { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca img { width: 48px; height: 48px; border-radius: 50%; }
.marca b { display: block; font: var(--t-marca); color: var(--marca-verde); }
.online { font: var(--t-legenda); color: var(--marca-verde); }
.online::before { content: "●"; color: var(--whatsapp-botao); margin-right: 4px; }
.menu { display: none; }
@media (min-width: 900px) { .menu { display: flex; gap: 4px; margin-right: 12px; } }
@media (max-width: 400px) { .marca b { font-size: 20px; } }

/* Hero */
.hero { padding: 20px 0 28px; }
.hero .wrap { display: grid; gap: 16px; }
.hero .texto { display: grid; gap: 16px; }
.fala { display: flex; gap: 12px; align-items: flex-end; }
.foto-geraldo { width: 96px; height: 96px; flex: none; border-radius: 50%; object-fit: cover; border: 4px solid var(--fundo-branco); }
.balao { background: var(--fundo-branco); padding: 12px 14px; border-radius: 18px 18px 18px 4px; font: var(--t-destaque); }
.hero h1 { font: var(--t-display); color: var(--marca-verde-escuro); }
.selos { display: flex; flex-wrap: wrap; gap: 8px; }
.selos li { list-style: none; background: var(--fundo-branco); padding: 6px 12px; border-radius: 8px; font: var(--t-legenda); color: var(--texto-principal); }
.selos { padding: 0; margin: 0; }
.acoes { display: grid; gap: 10px; }
.conversa { display: none; }
@media (min-width: 900px) {
  .hero { padding: 64px 0; }
  .hero .wrap { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 24px 64px; }
  .hero .texto { display: grid; gap: 24px; }
  .acoes { display: flex; }
  .conversa { display: grid; gap: 16px; background: #e2e8dc; border-radius: 28px; padding: 48px 40px; }
  .conversa .foto-geraldo { width: 134px; height: 134px; }
  .fala--mobile { display: none; }
}

/* Funil (Passo funil 8:41) */
.funil { background: var(--fundo-branco); border-bottom: 1px solid var(--linha); }
.funil ol { display: flex; gap: 4px 8px; align-items: center; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.funil li { display: flex; align-items: center; gap: 10px; min-height: 48px; white-space: nowrap; font: var(--t-destaque); color: var(--texto-apoio); }
.funil li + li::before { content: "›"; font-weight: 800; color: var(--texto-apoio); }
.funil .num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--linha); background: var(--fundo-branco); }
.funil [aria-current] { color: var(--texto-principal); font-weight: 800; }
.funil [aria-current] .num { background: var(--marca-verde); border-color: var(--marca-verde); color: var(--texto-invertido); }
@media (min-width: 900px) { .funil ol { justify-content: center; } }

/* Seções */
.secao { padding: 36px 0; }
.secao > .wrap { display: grid; gap: 12px; }
.titulo { display: grid; gap: 4px; }
.titulo h2 { font: var(--t-h2); color: var(--marca-verde-escuro); }
.titulo h3 { font: var(--t-titulo-card); font-family: var(--serif); font-size: 24px; color: var(--marca-verde-escuro); }
.dica { font: var(--t-legenda); color: var(--marca-mel-texto); }
@media (min-width: 900px) { .secao { padding: 56px 0; } .dica { display: none; } }

/* Carrossel no mobile, grade no web (A3) */
.trilho {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--borda)); padding: 4px var(--borda) 12px; scroll-padding: 0 var(--borda);
}
.trilho > * { scroll-snap-align: start; }
.trilho--reels { grid-auto-columns: 42%; }
@media (min-width: 900px) {
  .trilho { grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; margin: 0; padding: 4px 0 12px; scroll-padding: 0; scrollbar-width: thin; }
  .trilho--reels { grid-auto-columns: calc((100% - 4 * 24px) / 5); }
  .trilho--kits { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
}
.carrossel { position: relative; }
.setas { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .setas:not([hidden]) { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
  .seta { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--marca-verde); background: var(--fundo-branco); color: var(--marca-verde); font: 800 26px/1 var(--sans); cursor: pointer; }
  .seta:hover:not(:disabled) { background: var(--marca-verde); color: var(--texto-invertido); }
  .seta:disabled { opacity: .35; cursor: default; }
}

/* Reel vídeo (8:91) */
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: var(--marca-verde-escuro) center / cover; color: var(--texto-invertido); text-align: left; font: inherit; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(15, 25, 17, .85)); }
.reel .play { position: absolute; top: 12px; left: 12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: var(--fundo-branco); display: grid; place-items: center; }
.reel .play::before { content: ""; border-left: 14px solid var(--marca-verde); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.reel .txt { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: grid; gap: 4px; }
.reel b { font: var(--t-destaque); font-size: 17px; line-height: 1.25; }
.reel small { font: var(--t-legenda); font-size: 16px; }
.reel[data-sem-video] { cursor: default; }
.reel[data-sem-video] .play { opacity: .6; }

/* Kit (8:101) */
.kit { display: grid; gap: 16px; align-content: space-between; background: var(--fundo-branco); border: 2px solid var(--marca-mel); border-radius: var(--raio-card); padding: 20px; }
.kit .topo-kit { display: flex; gap: 16px; align-items: flex-start; }
.kit .potes { flex: none; width: 96px; display: flex; }
.kit .potes svg { width: 40px; margin-right: -12px; }
.kit h3 { font: var(--t-titulo-card); }
.economia { justify-self: start; display: inline-block; background: var(--marca-mel-claro); color: var(--marca-mel-texto); padding: 3px 8px; border-radius: 6px; font: var(--t-legenda); font-weight: 700; }
.kit .info { display: grid; gap: 6px; }
.preco { font: var(--t-preco); color: var(--texto-principal); }

/* Card produto (8:88) */
.categorias { display: flex; flex-wrap: wrap; gap: 8px; }
.categorias .btn { min-height: 48px; padding: 10px 18px; }
.categoria { display: grid; gap: 12px; padding-top: 16px; }
.card { display: grid; gap: 10px; grid-template-rows: auto auto 1fr auto auto; background: var(--fundo-branco); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: 16px; }
.card .img { aspect-ratio: 1; background: var(--fundo-imagem); border-radius: 14px; display: grid; place-items: center; overflow: hidden; }
.card .img img { width: 100%; height: 100%; object-fit: cover; }
.card .img svg { width: 42%; }
.card .marcas { display: flex; gap: 6px; min-height: 28px; flex-wrap: wrap; }
.selo { display: inline-block; padding: 3px 8px; border-radius: 6px; font: var(--t-legenda); font-weight: 700; background: var(--fundo-salvia); color: var(--marca-verde); }
.selo--premium { background: var(--marca-mel-claro); color: var(--marca-mel-texto); }
.card h4 { margin: 0; font: var(--t-titulo-card); }
.card .desc { display: grid; gap: 4px; align-content: start; }

/* Seu pedido: Passo 2 e Passo 3 */
.pedido { background: var(--fundo-branco); }
.passos { display: grid; gap: 24px; }
@media (min-width: 900px) { .passos { grid-template-columns: 1fr 1fr; align-items: start; gap: 40px; } }
.passo { display: grid; gap: 16px; background: var(--fundo-salvia); border-radius: 24px; padding: 20px 16px; }
@media (min-width: 900px) { .passo { padding: 28px; } }
.passo-cab { display: grid; gap: 6px; }
.passo-cab small { font: var(--t-destaque); color: var(--marca-mel-texto); }
.passo-cab h3 { font: var(--t-h2); font-size: 26px; color: var(--marca-verde-escuro); }
.progresso { height: 12px; border-radius: 6px; background: var(--linha); overflow: hidden; }
.progresso i { display: block; position: relative; overflow: hidden; height: 100%; background: var(--whatsapp-botao); border-radius: 6px; }
/* Brilho correndo na barra: mostra movimento em direção ao próximo passo */
.progresso i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); animation: progresso-brilho 2s ease-in-out infinite; }
@keyframes progresso-brilho { 60%, 100% { transform: translateX(100%); } }
/* Com "reduzir movimento" ligado no sistema: o mesmo brilho, mais lento e suave (é pequeno e não pisca) */
@media (prefers-reduced-motion: reduce) { .progresso i::after { animation-duration: 5s; opacity: .6; } }
.itens { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.item { display: grid; gap: 12px; background: var(--fundo-branco); border: 2px solid var(--marca-verde); border-radius: 18px; padding: 16px; }
.item .topo-item { display: flex; gap: 12px; align-items: center; }
.item .mini { width: 64px; height: 64px; flex: none; border-radius: 12px; background: var(--fundo-imagem); display: grid; place-items: center; }
.item .mini svg { width: 26px; }
.item h4 { margin: 0; font: var(--t-titulo-card); }
.item fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.item legend { font: var(--t-destaque); padding: 0; margin-bottom: 10px; }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao { position: relative; display: grid; gap: 2px; justify-items: center; min-height: var(--toque); padding: 12px; border: 2px solid var(--linha); border-radius: var(--raio-botao); background: var(--fundo-branco); cursor: pointer; text-align: center; }
.opcao input { position: absolute; opacity: 0; }
.opcao b { font: var(--t-destaque); }
.opcao span { font: var(--t-apoio); color: var(--texto-apoio); }
.opcao:has(input:checked) { background: var(--marca-verde); border-color: var(--marca-verde); color: var(--texto-invertido); }
.opcao:has(input:checked) span { color: var(--texto-invertido); }
.opcao:has(input:checked) b::before { content: "✓ "; }
.opcao:has(input:focus-visible) { outline: 3px solid var(--marca-mel); outline-offset: 3px; }
.remover { justify-self: start; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: var(--t-destaque); }
.total b { font: var(--t-preco); }
.vazio { background: var(--fundo-branco); border: 2px dashed var(--linha); border-radius: 18px; padding: 20px; }
.chat { background: var(--whatsapp-fundo-chat); border-radius: 22px; padding: 24px 16px; }
.msg { margin-left: auto; max-width: 92%; background: var(--whatsapp-balao); border-radius: 14px 14px 4px 14px; padding: 14px 16px 8px; font: var(--t-apoio); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg small { display: block; text-align: right; font: var(--t-legenda); font-size: 16px; color: var(--texto-apoio); margin-top: 6px; }

/* Barra fixa "Conferir pedido (n)" e WhatsApp flutuante (18:694) */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--fundo-branco); border-top: 1px solid var(--linha); box-shadow: 0 -6px 20px rgba(31, 42, 33, .08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .2s; }
.barra.ativa { transform: none; }
.barra .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; }
.barra small { display: block; font: var(--t-legenda); color: var(--texto-apoio); }
.barra b { font: var(--t-preco); }
.barra .btn { background: var(--whatsapp-botao); border-color: var(--whatsapp-botao); }
.flutuante { display: none; }
@media (min-width: 900px) {
  .flutuante { display: block; position: fixed; right: 24px; bottom: 24px; z-index: 25; width: 72px; height: 72px; border-radius: 50%; background: var(--whatsapp-botao) url(../img/whatsapp.svg) center / 40px no-repeat; box-shadow: 0 8px 24px rgba(31, 42, 33, .3); transition: transform .15s; }
  .flutuante:hover { transform: scale(1.06); }
  body.com-pedido .flutuante { display: none; }
}
body.com-pedido { padding-bottom: 96px; }

/* Rodapé */
.rodape { background: var(--marca-verde-escuro); color: var(--texto-invertido); padding: 40px 0 48px; }
.rodape .wrap { display: grid; gap: 12px; }
.rodape img { width: 64px; height: 64px; border-radius: 50%; }
.rodape b { font: var(--t-marca); }
.rodape .aviso { font: var(--t-destaque); }
.rodape p { font: var(--t-apoio); }
.rodape a { color: var(--texto-invertido); }

/* Ajustes de largura pequena (375–400 px) */
.marca span, .barra small, .barra .btn { white-space: nowrap; }
.card .img { aspect-ratio: 5 / 4; }
@media (max-width: 400px) {
  .topo .wrap { gap: 8px; }
  .marca { gap: 8px; }
  .marca img { width: 44px; height: 44px; }
  .topo .btn--wa { padding: 12px; gap: 8px; }
  .barra .btn { padding: 14px 16px; }
}
@media (min-width: 900px) { .card .img { aspect-ratio: 1; } }

/* Celular: header + funil colados no topo (Figma: menu acompanha navegação mobile) */
html { scroll-padding-top: 150px; }
.funil--topo { border-top: 1px solid var(--linha); border-bottom: 0; }
.funil--topo li:not([aria-current]) .rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.funil--faixa { display: none; }
@media (min-width: 900px) {
  html { scroll-padding-top: 104px; }
  .funil--topo { display: none; }
  .funil--faixa { display: block; }
}

/* Rosto animado: anel pulsando, fala chegando, "digitando" e a mensagem do pedido */
@media (prefers-reduced-motion: no-preference) {
  .foto-geraldo { animation: entra .5s ease-out both, pulso 2.4s ease-out 1s infinite; }
  .balao { animation: sobe .45s ease-out .45s both; }
  .digitando i { animation: pula 1s ease-in-out infinite; }
  .digitando i:nth-child(2) { animation-delay: .15s; }
  .digitando i:nth-child(3) { animation-delay: .3s; }
}
@keyframes entra { from { opacity: 0; transform: scale(.85); } }
@keyframes sobe { from { opacity: 0; transform: translateY(12px); } }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(21, 128, 61, 0); } }
@keyframes aparece-some { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; height: 0; padding: 0; margin: -16px 0 0; } }
@keyframes pula { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }
.digitando { justify-self: end; display: flex; gap: 5px; margin: 0; background: var(--whatsapp-balao); border-radius: 14px; padding: 14px 16px; overflow: hidden; }
.digitando i { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-apoio); }

/* Seções novas */
.secao--branca { background: var(--fundo-branco); }
.como { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.como li { display: grid; gap: 8px; align-content: start; background: var(--fundo-salvia); border-radius: var(--raio-card); padding: 20px; }
.como .num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--marca-verde); color: var(--texto-invertido); font: var(--t-destaque); }
.como h3 { font: var(--t-titulo-card); }
@media (min-width: 900px) { .como { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.sobre { display: grid; gap: 20px; align-items: center; }
.sobre img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.sobre .titulo { gap: 12px; }
@media (min-width: 900px) { .sobre { grid-template-columns: 240px 1fr; gap: 48px; } .sobre img { width: 240px; height: 240px; } }
.depo { margin: 0; display: grid; gap: 16px; align-content: space-between; background: var(--fundo-branco); border: 1px solid var(--linha); border-radius: var(--raio-card); padding: 24px; }
.depo blockquote { margin: 0; font: var(--t-titulo-card); font-weight: 700; }
.depo figcaption { display: grid; }
.estreito { max-width: 840px; }
details { background: var(--fundo-branco); border: 1px solid var(--linha); border-radius: 16px; }
details + details { margin-top: 10px; }
summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; font: var(--t-destaque); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 800 26px/1 var(--sans); color: var(--marca-verde); }
details[open] summary::after { content: "–"; }
details p { padding: 0 20px 18px; color: var(--texto-apoio); }

/* Stories: vídeo em tela cheia com o produto embaixo */
.stories { border: 0; padding: 0; margin: auto; width: min(440px, 100vw); height: min(100dvh, 860px); max-width: 100vw; max-height: 100dvh; background: #000; color: #fff; overflow: hidden; }
.stories::backdrop { background: rgba(10, 16, 12, .9); }
@media (max-width: 600px) { .stories { width: 100vw; height: 100dvh; } }
.stories video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-barras { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; display: flex; gap: 4px; }
.st-barras span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.st-barras i { display: block; height: 100%; width: 0; background: #fff; }
.st-acoes { position: absolute; top: 24px; right: 10px; z-index: 3; display: flex; gap: 8px; }
.st-btn { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; background: rgba(40, 40, 40, .55); color: #fff; font: 700 20px/1 var(--sans); cursor: pointer; display: grid; place-items: center; }
.st-zona { position: absolute; top: 80px; bottom: 120px; z-index: 2; width: 35%; border: 0; background: none; cursor: pointer; }
.st-zona--ant { left: 0; }
.st-zona--prox { right: 0; }
.st-rodape { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 3; display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.st-produto { flex: 1; display: flex; gap: 10px; align-items: center; background: #fff; color: var(--texto-principal); border-radius: 14px; padding: 8px 8px 8px 10px; }
.st-produto[hidden] { display: none; }
.st-mini { width: 48px; height: 48px; flex: none; border-radius: 10px; background: var(--fundo-imagem); display: grid; place-items: center; }
.st-mini svg { width: 22px; }
.st-info { flex: 1; display: grid; min-width: 0; }
.st-info b { font: 700 16px/1.25 var(--sans); }
.st-info small { font: var(--t-legenda); color: var(--texto-apoio); }
.st-info small span { color: var(--texto-principal); font-weight: 800; }
.st-add { background: var(--whatsapp-botao); font-size: 28px; }
.st-add[aria-pressed="true"] { background: var(--marca-verde); font-size: 20px; }

/* Quem atende você: texto centralizado, ícones Instagram + WhatsApp */
.sobre .titulo { justify-items: center; text-align: center; }
.sobre h2 { font: 700 34px/1.15 var(--sans); color: var(--texto-principal); }
@media (min-width: 900px) { .sobre { justify-content: center; grid-template-columns: 240px minmax(0, 600px); } .sobre h2 { font-size: 56px; } }
.sobre img { justify-self: center; }
.contatos { display: flex; align-items: center; gap: 10px; font: var(--t-destaque); }
.contatos a { text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; }
.ico { width: 48px; justify-content: center; }
.ico::before { content: ""; width: 22px; height: 22px; border-radius: 6px; }
.ico--ig::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='5'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Ccircle cx='17' cy='7' r='.6' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat, linear-gradient(45deg, #f9a825, #e91e63 55%, #7b1fa2); }
.ico--wa::before { border-radius: 50%; background: var(--whatsapp-botao) url(../img/whatsapp.svg) center / 16px no-repeat; }

/* Impede que os carrosséis alarguem a página no celular (estouro de grid → zoom out) */
.secao > .wrap:not(.sobre), .categoria { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) { .hero .wrap, .sobre { grid-template-columns: minmax(0, 1fr); } }
.carrossel, .trilho, .titulo { min-width: 0; }
html, body { overflow-x: clip; }

/* Kit e funil no celular: potes em cima, texto embaixo, nada espremido */
.funil ol { padding: 8px var(--borda); }
.economia { white-space: nowrap; }
.kit .topo-kit { flex-direction: column; gap: 12px; }
.kit .potes { width: auto; justify-content: center; background: var(--fundo-imagem); border-radius: 14px; padding: 14px 0 14px 12px; }
.kit .potes svg { width: 56px; }
.kit h3 { font-size: 20px; }

/* Fotos reais */
.card .img { background: #fff; }
.card .img img { object-fit: contain; }
.kit .potes { background: #fff; padding: 0; overflow: hidden; }
.kit .potes img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; }
.item .mini, .st-mini { background: #fff; overflow: hidden; }
.item .mini img, .st-mini img { width: 100%; height: 100%; object-fit: contain; }

/* Kit: foto centralizada, altura automática */
.kit .potes { display: grid; place-items: center; width: 100%; height: auto; padding: 0; background: #f5f5f5; border-radius: 14px; }
.kit .potes img { display: block; width: 100%; max-width: 180px; height: auto; aspect-ratio: 1; object-fit: contain; }

/* Setas nas laterais do carrossel (web), sem barra de rolagem */
@media (min-width: 900px) {
  .trilho { scrollbar-width: none; }
  .trilho::-webkit-scrollbar { display: none; }
  .setas:not([hidden]) { display: contents; }
  .seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; box-shadow: 0 4px 14px rgba(31, 42, 33, .2); }
  .seta[data-rolar="-1"] { left: -24px; }
  .seta[data-rolar="1"] { right: -24px; }
  .seta:disabled { opacity: 0; pointer-events: none; }
}

/* Celular: sem botão WhatsApp no topo (sobrepunha o logo); botão redondo flutuante embaixo */
@media (max-width: 899px) {
  .topo .btn--wa { display: none; }
  .flutuante { display: block; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25; width: 60px; height: 60px; border-radius: 50%; background: var(--whatsapp-botao) url(../img/whatsapp.svg) center / 34px no-repeat; box-shadow: 0 8px 24px rgba(31, 42, 33, .3); }
  body.com-pedido .flutuante { bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* Quem atende você: só WhatsApp, ícone verde + número grande */
.ico--wa-grande { gap: 10px; font: 700 26px/1.2 var(--sans); color: var(--texto-principal); }
.ico--wa-grande::before { content: ""; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #25d366 url(../img/whatsapp.svg) center / 24px no-repeat; }

/* Passo 2 e Passo 3 em blocos separados, um acima do outro (também no web) */
[hidden] { display: none !important; }
@media (min-width: 900px) {
  .passos { grid-template-columns: minmax(0, 760px); justify-content: center; gap: 56px; }
}
.passo + .passo { position: relative; }
.passo + .passo::before { content: "↓"; position: absolute; top: -44px; left: 50%; transform: translateX(-50%); font: 800 28px/1 var(--sans); color: var(--marca-verde); }

/* Passo 2 e Passo 3: seções dedicadas (1080 px no web) */
.etapa { padding: 56px 0; }
.etapa-grade { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.etapa-texto { display: grid; gap: 16px; align-content: center; }
.etapa-topo { padding-bottom: 24px; }
.etapa-kicker { font: var(--t-destaque); color: var(--marca-mel-texto); }
.etapa h2 { font: var(--t-display); color: var(--marca-verde-escuro); }
.etapa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: var(--t-destaque); }
.etapa-lista li::before { content: "✓"; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--fundo-salvia); color: var(--marca-verde); font-weight: 800; }
.etapa .progresso { max-width: 420px; }
.etapa-card { display: grid; gap: 16px; background: var(--fundo-branco); border: 1px solid var(--linha); border-radius: 28px; padding: 24px 18px; box-shadow: 0 24px 60px rgba(31, 42, 33, .10); }
.etapa-card-titulo { font: var(--t-h2); font-size: 26px; color: var(--marca-verde-escuro); }
.etapa--2 { background: var(--fundo-branco); }
.etapa--2 .etapa-card { background: var(--fundo-salvia); border: 0; }
/* Card do pedido com altura limitada: só a lista rola; título, total e botões ficam sempre à vista */
.etapa--2 .etapa-card { display: flex; flex-direction: column; max-height: max(420px, calc(100svh - 240px)); }
.etapa--2 .etapa-card > * { flex: none; }
.etapa--2 .etapa-card .itens { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 6px; }
/* Barra de rolagem mínima: fina, sem setas, sem trilho */
.etapa--2 .etapa-card .itens { scrollbar-width: thin; scrollbar-color: rgba(51, 80, 58, .35) transparent; }
.etapa--2 .etapa-card .itens::-webkit-scrollbar { width: 6px; }
.etapa--2 .etapa-card .itens::-webkit-scrollbar-track { background: transparent; }
.etapa--2 .etapa-card .itens::-webkit-scrollbar-thumb { background: rgba(51, 80, 58, .35); border-radius: 3px; }
.etapa--2 .etapa-card .itens::-webkit-scrollbar-thumb:hover { background: rgba(51, 80, 58, .6); }
.etapa--2 .etapa-card .itens::-webkit-scrollbar-button { display: none; }
.etapa-card-rodape { display: grid; gap: 16px; }
.total b { white-space: nowrap; }
/* Celular: a lista cresce com a página (sem rolagem interna); total e botões grudam no pé da tela.
   Tamanhos com clamp() acompanham a largura do aparelho e a fonte ampliada do sistema. */
@media (max-width: 899px) {
  .etapa--2 { padding-top: 32px; }
  .etapa--2 .etapa-lista, .etapa--2 .etapa-texto .progresso { display: none; }
  .etapa--2 .etapa-card { max-height: none; padding: 16px 12px 0; gap: 12px; border-radius: 20px; }
  .etapa--2 .etapa-card .itens { overflow: visible; padding-right: 0; gap: 10px; }
  .etapa-card-titulo { font-size: clamp(19px, 5.5vw, 24px); }
  .etapa--2 .item { padding: 12px; gap: 10px; border-radius: 14px; }
  .etapa--2 .item .topo-item { gap: 10px; }
  .etapa--2 .item .mini { width: 48px; height: 48px; border-radius: 10px; }
  .etapa--2 .item h4 { font-size: clamp(15px, 4.4vw, 18px); line-height: 1.25; }
  .etapa--2 .item .legenda { font-size: clamp(13px, 3.6vw, 15px); }
  .etapa--2 .item legend { font-size: clamp(14px, 3.9vw, 16px); margin-bottom: 6px; }
  .etapa--2 .opcoes { gap: 8px; }
  .etapa--2 .opcao { min-height: 48px; padding: 8px 6px; }
  .etapa--2 .opcao b { font-size: clamp(14px, 4vw, 17px); }
  .etapa--2 .opcao span { font-size: clamp(13px, 3.6vw, 15px); }
  .etapa--2 .remover { min-height: 40px; padding: 6px 0; font-size: clamp(14px, 4vw, 16px); }
  .etapa-card-rodape { position: sticky; bottom: 0; gap: 10px; margin: 0 -12px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--fundo-salvia); border-radius: 0 0 20px 20px; box-shadow: 0 -10px 16px -12px rgba(31, 42, 33, .35); }
  .etapa-card-rodape .total { font-size: clamp(14px, 4vw, 17px); }
  .etapa-card-rodape .total b { font-size: clamp(18px, 5.4vw, 22px); }
  .etapa-card-rodape .btn { min-height: 48px; padding: 10px 14px; font-size: clamp(15px, 4.3vw, 18px); }
  .etapa-card-rodape .btn--sec { min-height: 40px; padding: 4px; border: 0; background: none; text-decoration: underline; font-size: clamp(14px, 4vw, 16px); } /* vira link para não ocupar a tela */
  body.nos-passos .flutuante { display: none; }
}
.etapa--3 { background: var(--marca-verde-escuro); color: var(--texto-invertido); }
.etapa--3 h2, .etapa--3 .etapa-kicker { color: var(--texto-invertido); }
.etapa--3 .etapa-kicker { color: var(--marca-mel-claro); }
.etapa--3 .progresso { background: rgba(255, 255, 255, .18); }
.etapa--3 .progresso i { background: linear-gradient(90deg, var(--marca-mel), var(--marca-mel-claro)); } /* mel: não se mistura com o verde do botão do WhatsApp */
.btn--claro { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--texto-invertido); }
.btn--claro:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.celular { justify-self: center; width: min(100%, 400px); border-radius: 36px; overflow: hidden; background: var(--whatsapp-fundo-chat); border: 10px solid #111; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.celular-topo { display: flex; gap: 10px; align-items: center; background: #0f5132; color: #fff; padding: 14px 16px; }
.celular-topo img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.celular-topo span { display: grid; }
.celular-topo b { font: 700 17px/1.2 var(--sans); }
.celular-topo small { font: 400 14px/1.2 var(--sans); opacity: .85; }
.celular-chat { display: grid; gap: 12px; min-height: 380px; align-content: start; padding: 20px 14px 28px; color: var(--texto-principal); }
.celular-chat .legenda { justify-self: center; background: rgba(255, 255, 255, .8); border-radius: 8px; padding: 4px 10px; font-size: 15px; }
@media (min-width: 900px) {
  .etapa { min-height: 1080px; display: grid; grid-template-rows: auto 1fr; padding: 64px 0 96px; }
  .etapa-grade { align-self: center; }
  .etapa--2 { height: 1080px; }
  .etapa--2 .etapa-grade { align-self: start; }
  .etapa--2 .etapa-card { max-height: max(420px, min(820px, calc(100vh - 310px))); /* 310 = menu+funil fixos, "Passo 2 de 3" e respiro embaixo */ }
  .etapa-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
  .etapa-texto { max-width: 520px; }
  .etapa-card { padding: 36px; }
  .etapa--3 .etapa-texto .btn { max-width: 420px; }
  .celular { width: 400px; }
  .celular-chat { min-height: 520px; }
}

/* Funil Escolher › Conferir › WhatsApp fixo junto do menu também no web */
@media (min-width: 900px) {
  html { scroll-padding-top: 160px; }
  .funil--topo { display: block; }
  .funil--topo ol { justify-content: flex-start; padding-top: 4px; padding-bottom: 4px; }
  .funil--topo li:not([aria-current]) .rot { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .funil--faixa { display: none; }
}

/* Movimento (js/movimento.js): entrada com fade, galerias com borda esfumada, conversa em loop */
.mov .revela { opacity: 0; transition: opacity .8s cubic-bezier(.22, .61, .36, 1) var(--atraso, 0ms), transform .8s cubic-bezier(.22, .61, .36, 1) var(--atraso, 0ms); }
.mov--cheio .revela { transform: translateY(24px); }
.mov--calmo .revela { transition-duration: .5s; }
.mov .revela.visivel { opacity: 1; transform: none; }
.trilho { --esfuma: 40px; }
.trilho.tem-depois { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--esfuma)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--esfuma)), transparent); }
.trilho.tem-antes { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--esfuma)); mask-image: linear-gradient(90deg, transparent, #000 var(--esfuma)); }
.trilho.tem-antes.tem-depois { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--esfuma), #000 calc(100% - var(--esfuma)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--esfuma), #000 calc(100% - var(--esfuma)), transparent); }
.chat-loop { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; height: 380px; overflow: hidden; transition: opacity .6s ease;
  -webkit-mask-image: linear-gradient(transparent, #000 48px); mask-image: linear-gradient(transparent, #000 48px); }
.chat-loop.some { opacity: 0; }
.chat-loop > * { flex: none; }
.chat-loop .msg { margin: 0 0 0 auto; max-width: 88%; }
.chat-loop .msg--geraldo { margin: 0 auto 0 0; background: var(--fundo-branco); border-radius: 14px 14px 14px 4px; }
.chat-loop .digitando--geraldo { justify-self: auto; align-self: flex-start; background: var(--fundo-branco); }
.chat-loop .digitando { align-self: flex-end; }
.chat-loop .digitando--geraldo { align-self: flex-start; }
.mov--cheio .chat-loop > * { animation: chat-entra .45s cubic-bezier(.22, .61, .36, 1) both; }
.mov--calmo .chat-loop > * { animation: chat-aparece .35s ease both; }
.mov--calmo .digitando i { animation: piscar 1.2s ease-in-out infinite; }
.mov--calmo .digitando i:nth-child(2) { animation-delay: .2s; }
.mov--calmo .digitando i:nth-child(3) { animation-delay: .4s; }
@keyframes chat-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes chat-aparece { from { opacity: 0; } }
@keyframes piscar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
[tabindex="-1"]:focus { outline: none; } /* seção que recebe o foco depois da rolagem */

/* Portão de prévia (senha) — some quando PORTAO.ativo = false no build */
.portao { position: fixed; inset: 0; z-index: 100; place-items: center; padding: 16px; background: var(--fundo-salvia); }
.portao-caixa { width: min(100%, 400px); display: grid; gap: 12px; padding: 32px 24px; background: var(--fundo-branco); border: 1px solid var(--linha); border-radius: 24px; text-align: center; color: var(--texto-principal); font: var(--t-texto); }
.portao-caixa img { justify-self: center; border-radius: 50%; }
.portao-caixa h1 { margin: 0; font: var(--t-h2); color: var(--marca-verde); }
.portao-caixa p { margin: 0; color: var(--texto-apoio); }
.portao-caixa label { text-align: left; font: var(--t-legenda); margin-top: 8px; }
.portao-caixa input { font: var(--t-texto); min-height: 52px; padding: 0 16px; border: 1px solid var(--linha); border-radius: var(--raio-botao); }
.portao-caixa input:focus { outline: 3px solid var(--marca-mel); outline-offset: 1px; }
.portao-erro { color: #b42318 !important; font: var(--t-legenda); }
.portao-wa { font: var(--t-apoio); }
.portao-wa a { color: var(--whatsapp-botao); font-weight: 700; }