/* ==========================================================================
   Criar Balões — Coleção digital Dia dos Professores
   Versão "coleção visual": pouco texto, produto grande, oferta rápida.
   Tokens copiados do site principal (criar baloes/assets/css/styles.css).
   ========================================================================== */

:root{
  /* Base da marca */
  --creme:        #EBE0D3;
  --creme-claro:  #F5EEE5;   /* fundo principal */
  --creme-escuro: #DED2C2;   /* bordas */
  --papel:        #FBF8F3;   /* cards e faixas claras */
  --lilas-nevoa:  #F2ECFA;
  --lilas:        #B9A0E4;   /* decorativo: nunca texto */
  --lilas-claro:  #E3D8F7;
  --roxo:         #5C3D9B;   /* CTA, preço, palavras-chave */
  --roxo-escuro:  #4A2F80;
  --tinta:        #2B2622;
  --tinta-suave:  #5A5049;
  --rosa:         #E9799F;
  --amarelo:      #F4C53B;
  --verde:        #3E8E4E;

  /* Fredoka: arredondada e alegre, combina com balões. Nunito: mesma família de traço redondo. */
  --fonte-titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --fonte-corpo:  "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter:   clamp(1rem, 5vw, 2.5rem);
  --largura:  1120px;
  --estreita: 680px;
  --secao-y:  clamp(2rem, 4vw, 3.25rem);

  --raio-p: 12px;
  --raio:   16px;
  --raio-g: 22px;
  --borda:  1px solid var(--creme-escuro);
  --sombra: 0 1px 2px rgba(43, 38, 34, .04), 0 6px 18px rgba(43, 38, 34, .05);

  --altura-cabecalho: 60px;
}

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--creme-claro);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
h1, h2, h3{ margin: 0; overflow-wrap: break-word; text-wrap: balance; }
p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
a{ color: var(--roxo); }

.pular{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--roxo); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--raio) 0;
}
.pular:focus{ left: 0; }
:focus-visible{ outline: 3px solid var(--roxo); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus{ outline: none; }
[id]{ scroll-margin-top: calc(var(--altura-cabecalho) + .75rem); }

/* ---------- Tipografia de seção ---------- */
.titulo{
  font-family: var(--fonte-titulo); font-weight: 600;
  font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.2rem);
  line-height: 1.12; letter-spacing: -.005em;
  text-align: center; max-width: 22ch; margin: 0 auto;
}
.titulo em{ font-style: normal; color: var(--roxo); }
.titulo--pequeno{ font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); max-width: none; }
.subtitulo{ text-align: center; color: var(--tinta-suave); font-size: .95rem; margin: .45rem auto 0; max-width: 46ch; }
.nota{ text-align: center; color: var(--tinta-suave); font-size: .84rem; margin: .9rem auto 0; max-width: 60ch; }
.olho{
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave); margin-bottom: .6rem;
}

.ponto--rosa{ background: var(--rosa); }
.ponto--amarelo{ background: var(--amarelo); }
.ponto--verde{ background: var(--verde); }
.ponto--lilas{ background: var(--lilas); }

/* ---------- Botão: um único estilo principal ---------- */
.botao{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .75rem 1.5rem;
  border: 0; border-radius: 999px;
  background: var(--roxo); color: #fff;
  font-family: var(--fonte-corpo); font-weight: 800; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.botao:hover{ background: var(--roxo-escuro); transform: translateY(-1px); }
.botao:active{ transform: translateY(1px); }
.botao--grande{ min-height: 54px; padding: .9rem 1.9rem; font-size: 1.05rem; }
.botao--largo{ width: 100%; }
.botao--claro{ background: #fff; color: var(--roxo); }
.botao--claro:hover{ background: var(--creme-claro); }

.preco{ display: flex; align-items: baseline; gap: .6rem; }
.preco__valor{
  font-family: var(--fonte-titulo); font-weight: 600; color: var(--roxo);
  font-size: clamp(2.1rem, 1.85rem + 1vw, 2.6rem); line-height: 1; letter-spacing: -.02em;
}
.preco__rotulo{ font-size: .8rem; font-weight: 700; color: var(--tinta-suave); }
.microcopy{ font-size: .84rem; color: var(--tinta-suave); margin-top: .6rem; }

/* ---------- Balões decorativos ---------- */
.baloes{
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --margem: max(var(--gutter), calc((100% - var(--largura)) / 2));
}
.baloes__defs{ position: absolute; width: 0; height: 0; overflow: hidden; }
.balao{
  --w: var(--s);
  --livre: calc(var(--margem) - var(--w) - 14px);
  position: absolute; top: var(--y);
  width: var(--w); height: calc(var(--w) * 1.8667);
  opacity: .38; will-change: transform;
}
.balao--lilas{ color: #B9A0E4; }
.balao--rosa{ color: #EFA3BD; }
.balao--amarelo{ color: #F4D06F; }
.balao--verde{ color: #9BC8A3; }
/* sempre na margem lateral, fora da coluna de conteúdo */
.balao--e{ left: min(calc(var(--livre) * var(--m)), var(--livre)); }
.balao--d{ left: calc(100% - var(--w) - min(calc(var(--livre) * var(--m)), var(--livre))); }
@media (max-width: 1279px){ .so-desktop{ display: none; } }
main > section > *, .rodape > *{ position: relative; z-index: 1; }

/* ---------- Cabeçalho ---------- */
.cabecalho{
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 238, 229, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, transform .28s ease;
}
.cabecalho.rolou{ border-bottom-color: var(--creme-escuro); }
.cabecalho.recolhido{ transform: translateY(-100%); }
.cabecalho.recolhido:focus-within{ transform: none; }
.cabecalho__interno{
  max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto;
  padding: .45rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.marca{ display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--tinta); min-width: 0; }
.marca__selo{
  width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 3px; object-fit: contain; flex: none;
  box-shadow: 0 0 0 1px rgba(185, 160, 228, .55);
}
.marca__texto{ font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.1rem; white-space: nowrap; }
.cabecalho__acoes{ display: flex; align-items: center; gap: .9rem; }
.cabecalho__voltar{
  display: inline-flex; align-items: center; gap: .3rem; min-height: 44px;
  color: var(--tinta-suave); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.cabecalho__voltar:hover{ color: var(--roxo); text-decoration: underline; }
.cabecalho__cta{ min-height: 44px; padding: .5rem 1.1rem; font-size: .9rem; white-space: nowrap; }

/* ---------- 1. Hero ---------- */
.hero{
  max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto;
  padding: clamp(1rem, 3vw, 2.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "texto produtos" "compra produtos";
  column-gap: clamp(1.25rem, 4vw, 3.5rem); align-items: center;
}
.hero__texto{ grid-area: texto; align-self: end; }
.hero__produtos{ grid-area: produtos; }
.compra{ grid-area: compra; align-self: start; margin-top: 1.1rem; }
.hero h1{ font-family: var(--fonte-titulo); font-weight: 600; letter-spacing: -.01em; }
.hero__h1-a{ display: block; font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); line-height: 1.2; color: var(--tinta-suave); margin-bottom: .3rem; }
.hero__h1-b{ display: block; font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem); line-height: 1.06; max-width: 17ch; }
.hero h1 em{ font-style: normal; color: var(--roxo); white-space: nowrap; }
.hero__sub{ color: var(--tinta); font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); margin-top: .8rem; max-width: 38ch; }
.hero__apoio{ color: var(--tinta-suave); font-size: .92rem; margin-top: .35rem; }
.compra .preco{ margin-bottom: .7rem; }

/* Composição de produtos reais: foto principal + duas menores empilhadas.
   As colunas seguem a proporção das fotos, então nada é cortado. */
.hero__produtos{
  display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr;
  gap: clamp(.5rem, 1.2vw, .8rem); max-width: 520px; width: 100%; justify-self: end;
}
.hero__produto{ width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio); background: var(--creme); }
.hero__produto--principal{ grid-row: span 2; aspect-ratio: 3 / 4; }

/* ---------- 2. Contador ---------- */
.contagem{
  text-align: center;
  border-block: var(--borda);
  background: var(--papel);
  padding: .9rem var(--gutter);
}
.contagem__linha{ font-size: .98rem; color: var(--tinta); }
.contagem__data{ font-weight: 700; }
.contador[hidden], .contador__fim[hidden], .contagem__data[hidden]{ display: none; }
.contador{ display: inline; }
.contador strong{ color: var(--roxo); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.contador__rotulo{ font-weight: 700; }
.contador__sep{ color: var(--lilas); margin: 0 .35rem; }
.contador__fim{ font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.15rem; color: var(--roxo); }
.contagem__texto{ font-size: .86rem; color: var(--tinta-suave); margin-top: .2rem; }

/* ---------- Seções ---------- */
.secao{ padding: var(--secao-y) var(--gutter); }
.secao--curta{ padding-block: calc(var(--secao-y) * .6); }
.secao--faixa{ background: var(--papel); }

/* ---------- Dor / O que recebe: texto central curto, sem cards ---------- */
.texto-central{ max-width: var(--estreita); margin-inline: auto; text-align: center; }
.texto-central > p{ color: var(--tinta-suave); margin-top: .7rem; }
.texto-central .transicao{ color: var(--roxo-escuro); font-weight: 700; margin-top: 1rem; }
.texto-central .formatos{ margin-top: 1rem; }
.secao--nevoa{ background: var(--lilas-nevoa); }
.secao__acao{ text-align: center; margin-top: 1.4rem; }

/* ---------- 5. Galeria ----------
   Desktop/tablet: duas linhas de 3 com altura igual e proporção original
   (cada cartão cresce na proporção --r da foto). Celular: carrossel com encaixe. */
.secao--galeria{ padding-bottom: calc(var(--secao-y) * .8); }
.galeria{
  --g-gap: clamp(.75rem, 1.6vw, 1.1rem);
  max-width: var(--largura); margin: 1.4rem auto 0;
  display: flex; flex-wrap: wrap; gap: var(--g-gap);
}
.galeria::before{ content: ""; flex-basis: 100%; height: 0; order: 2; margin-top: calc(-1 * var(--g-gap)); }
.cartao{ flex: var(--r) 1 0; min-width: 0; order: 3; }
.cartao:nth-child(-n+3){ order: 1; }
.cartao__link{ display: block; border-radius: var(--raio); overflow: hidden; background: var(--creme); cursor: zoom-in; }
.cartao__link img{ width: 100%; transition: transform .35s ease; }
.cartao__link:hover img{ transform: scale(1.02); }
.cartao__legenda{ text-align: center; font-size: .88rem; font-weight: 700; color: var(--tinta); margin-top: .45rem; }
.galeria__dica{ display: none; }

/* ---------- 7. Benefícios ---------- */
.beneficios{
  max-width: 960px; margin: 1.25rem auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem;
}
.beneficios li{ text-align: center; }
.beneficios li::before{
  content: "✓"; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto .5rem;
  border-radius: 50%; background: var(--lilas-claro); color: var(--roxo-escuro); font-weight: 800; font-size: .9rem;
}
.beneficios p{ font-size: .92rem; color: var(--tinta-suave); margin-top: .15rem; }

/* ---------- 8. Como funciona ---------- */
.fluxo{
  text-align: center; font-family: var(--fonte-titulo); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); color: var(--roxo); margin-top: .6rem;
}
.fluxo span{ color: var(--lilas); margin: 0 .3rem; }
.passos{
  max-width: 960px; margin: 1.25rem auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem;
}
.passos li{ text-align: center; }
.passos__num{
  display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto .55rem;
  border-radius: 50%; background: var(--roxo); color: #fff;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem;
}
.passos p{ font-size: .92rem; color: var(--tinta-suave); margin-top: .15rem; max-width: 30ch; margin-inline: auto; }

/* ---------- 9. Formatos ---------- */
.formatos{ display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .8rem auto 0; max-width: 640px; }
.formatos li{
  background: var(--papel); border: 1px solid var(--lilas-claro); color: var(--roxo-escuro);
  font-weight: 800; font-size: .86rem; padding: .32rem .85rem; border-radius: 999px;
}
#formatos .nota{ margin-top: .6rem; }

/* ---------- 11. Objeções ---------- */
.objecoes{
  max-width: 860px; margin: 1.25rem auto 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
}
.objecoes article{ background: var(--papel); border: var(--borda); border-radius: var(--raio-p); padding: .85rem 1rem; }
.objecoes p{ font-size: .92rem; color: var(--tinta-suave); margin-top: .2rem; }

/* ---------- 12. Oferta ---------- */
.posicionamento{
  max-width: 560px; margin: 0 auto 1.4rem; text-align: center;
  font-size: .98rem; color: var(--tinta-suave); line-height: 1.5;
  padding-bottom: 1.2rem; border-bottom: var(--borda);
}
.posicionamento strong{ display: block; color: var(--tinta); font-weight: 700; margin-top: .15rem; }
.oferta__produtos{
  display: flex; gap: .6rem; justify-content: center; align-items: flex-end;
  max-width: 520px; margin: 1.1rem auto 1rem;
}
.oferta__produtos img{ height: clamp(110px, 20vw, 170px); width: auto; border-radius: var(--raio-p); min-width: 0; flex: 0 1 auto; object-fit: cover; }
.secao--oferta{ padding-top: calc(var(--secao-y) * .6); }
.oferta__intro{
  text-align: center; font-family: var(--fonte-titulo); font-style: italic; font-weight: 600;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--tinta); margin: 0 auto 1rem; max-width: 26ch;
}
.oferta{
  max-width: 420px; margin-inline: auto; text-align: center;
  background: #fff; border: 1.5px solid var(--lilas); border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 1.5rem 1.4rem 1.3rem;
}
.oferta__rotulo{ font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.oferta__titulo{ font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.6rem; line-height: 1.15; margin-top: .15rem; }
.oferta__inclui{ font-size: .93rem; color: var(--tinta-suave); margin-top: .45rem; }
.oferta__formatos{ font-size: .84rem; font-weight: 700; color: var(--roxo-escuro); margin-top: .3rem; }
.preco--oferta{ justify-content: center; margin: .35rem 0 .9rem; }
.preco--oferta .preco__valor{ font-size: clamp(2.6rem, 2.3rem + 1.2vw, 3.1rem); }

/* ---------- 13. FAQ ---------- */
.faq{ max-width: 680px; margin: 1.25rem auto 0; }
.faq details{ background: var(--papel); border: var(--borda); border-radius: var(--raio-p); margin-bottom: .5rem; }
.faq details[open]{ border-color: var(--lilas); }
.faq summary{
  cursor: pointer; list-style: none; position: relative;
  padding: .8rem 2.8rem .8rem 1rem; font-weight: 800; font-size: .96rem; line-height: 1.4;
  border-radius: var(--raio-p);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--roxo); transition: transform .2s ease;
}
.faq details[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.faq details p{ padding: 0 1rem .9rem; font-size: .93rem; color: var(--tinta-suave); }

/* ---------- 14. CTA final ---------- */
.chamada{
  position: relative; z-index: 1;   /* cobre a camada de balões */
  background: var(--roxo); color: #fff; text-align: center;
  padding: clamp(2rem, 4vw, 3rem) var(--gutter);
}
.chamada__interno{ max-width: 620px; margin-inline: auto; }
.chamada h2{ font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.18; }

.chamada h2 span{ display: block; color: var(--lilas-claro); margin-top: .25em; }
.chamada__apoio{ color: rgba(255, 255, 255, .88); margin-top: .7rem; }
.chamada__preco{ font-family: var(--fonte-titulo); font-weight: 600; font-size: 2.3rem; line-height: 1; margin: 1rem 0 .9rem; }
.microcopy--claro{ color: rgba(255, 255, 255, .86); }
.chamada :focus-visible{ outline-color: #fff; }

/* ---------- 15. Rodapé ---------- */
.rodape{ padding: 1.4rem var(--gutter) 1rem; }
.rodape__interno{
  max-width: var(--largura); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem;
  padding-bottom: .9rem; border-bottom: var(--borda);
}
.rodape__marca{ display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tinta); }
.rodape__marca img{ width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 3px; box-shadow: 0 0 0 1px rgba(185, 160, 228, .55); }
.rodape__marca strong{ display: block; font-family: var(--fonte-titulo); font-weight: 600; }
.rodape__marca span span{ font-size: .85rem; color: var(--roxo); text-decoration: underline; }
.rodape__contato{ display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; font-size: .9rem; align-items: center; }
.rodape__contato a{ display: inline-flex; align-items: center; min-height: 40px; color: var(--tinta); font-weight: 700; text-decoration: none; }
.rodape__contato a:hover{ color: var(--roxo); text-decoration: underline; }
.rodape__contato li:last-child{ color: var(--tinta-suave); }
.rodape__base{ max-width: var(--largura); margin: .8rem auto 0; font-size: .8rem; color: var(--tinta-suave); text-align: center; }

/* ---------- Barra de compra (celular) ---------- */
.barra-compra{ display: none; }

/* ---------- Aviso de prévia ---------- */
.aviso-previa{
  position: fixed; z-index: 150; left: 50%; bottom: 1rem; transform: translateX(-50%);
  width: min(92vw, 440px);
  background: var(--tinta); color: #fff; border-radius: var(--raio-p);
  padding: .8rem 3rem .8rem 1rem; box-shadow: 0 10px 30px rgba(43, 38, 34, .18);
}
.aviso-previa[hidden]{ display: none; }
.aviso-previa p{ font-size: .93rem; line-height: 1.45; }
.aviso-previa__fechar{
  position: absolute; top: .25rem; right: .25rem; width: 44px; height: 44px;
  border: 0; background: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 10px;
}
.aviso-previa :focus-visible{ outline-color: var(--lilas); }

/* ---------- Lightbox ---------- */
.lupa{
  position: fixed; inset: 0; z-index: 200; background: rgba(43, 38, 34, .94);
  display: grid; place-items: center; padding: 4rem clamp(.75rem, 6vw, 5rem) 3rem;
}
.lupa[hidden]{ display: none; }
.lupa__figura{ margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.lupa__figura img{ max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; border-radius: var(--raio); }
.lupa__figura figcaption{ color: #fff; margin-top: .7rem; font-weight: 700; text-align: center; }
.lupa__botao{
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 50%;
  font-size: 2rem; line-height: 1; cursor: pointer; transition: background-color .18s ease;
}
.lupa__botao:hover{ background: rgba(255, 255, 255, .24); }
.lupa__botao:focus-visible{ outline-color: #fff; }
.lupa__fechar{ top: .75rem; right: .75rem; }
.lupa__anterior{ left: .75rem; top: 50%; transform: translateY(-50%); }
.lupa__proxima{ right: .75rem; top: 50%; transform: translateY(-50%); }

/* ---------- Revelação ao rolar (só com JS) ---------- */
.js .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, .8, .3, 1); }
.js .reveal.visivel{ opacity: 1; transform: none; }
.js .reveal.reveal-lista{ opacity: 1; transform: none; transition: none; }
.js .reveal-lista > *{ opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s cubic-bezier(.22, .8, .3, 1); }
.js .reveal-lista.visivel > *{ opacity: 1; transform: none; }
.js .reveal-lista.visivel > *:nth-child(2){ transition-delay: .05s; }
.js .reveal-lista.visivel > *:nth-child(3){ transition-delay: .1s; }
.js .reveal-lista.visivel > *:nth-child(4){ transition-delay: .15s; }
.js .hero .reveal{ transition-duration: .3s; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; grid-template-areas: "texto" "produtos" "compra"; }
  .hero__produtos{ justify-self: center; max-width: 420px; margin-top: 1rem; }
  .compra{ margin-top: 1rem; }
  .beneficios, .passos{ grid-template-columns: 1fr; max-width: 460px; gap: .6rem; }
  /* no celular os itens de lista ficam em linha: marca à esquerda, texto à direita */
  .beneficios li, .passos li{
    display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; text-align: left;
  }
  .beneficios li::before{ grid-row: span 2; margin: 0; }
  .passos__num{ grid-row: span 2; margin: 0; width: 36px; height: 36px; font-size: 1.05rem; }
  .passos p{ margin: .1rem 0 0; max-width: none; }
  .objecoes{ grid-template-columns: 1fr; max-width: 560px; gap: .5rem; }

  .balao{ --w: calc(var(--s) * .7); opacity: .3; }
  .balao--e{ left: calc(-1 * var(--w) + min(var(--w) * .45, var(--gutter) - 4px)); }
  .balao--d{ left: calc(100% - min(var(--w) * .45, var(--gutter) - 4px)); }

  .barra-compra{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .3rem var(--gutter) calc(.3rem + env(safe-area-inset-bottom));
    background: rgba(251, 248, 243, .97); border-top: var(--borda);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .barra-compra[hidden]{ display: none; }
  .barra-compra.visivel{ transform: none; }
  .barra-compra__preco{ display: flex; flex-direction: column; line-height: 1.05; }
  .barra-compra__preco span{ order: -1; }
  .barra-compra__preco strong{ font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.25rem; color: var(--roxo); }
  .barra-compra__preco span{ font-size: .7rem; font-weight: 700; color: var(--tinta-suave); }
  .barra-compra .botao{ min-height: 44px; padding: .45rem 1.15rem; font-size: .92rem; }
  body.tem-barra .rodape{ padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
  body.barra-visivel .aviso-previa{ bottom: calc(62px + env(safe-area-inset-bottom)); }
}

/* Galeria no celular: carrossel horizontal, fotos inteiras (sem corte), altura igual */
@media (max-width: 640px){
  .galeria{
    --altura-foto: min(84vw, 340px);
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin: 1.1rem calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) .5rem;
    scrollbar-width: none;
  }
  .galeria::-webkit-scrollbar{ display: none; }
  .galeria{ background: var(--creme-claro); }   /* cobre os balões da borda atrás das legendas */
  .oferta{ padding: 1.2rem 1rem 1.1rem; }
  .oferta .botao--grande{ padding-inline: 1rem; font-size: 1rem; }
  .objecoes article{ padding: .75rem .9rem; }
  .objecoes h3{ font-size: .98rem; }
  .objecoes p{ font-size: .9rem; line-height: 1.5; }
  .texto-central > p{ font-size: .95rem; }
  .oferta__produtos img{ height: 104px; }
  .galeria::before{ display: none; }
  .cartao{ flex: none; order: 0 !important; width: calc(var(--altura-foto) * var(--r)); max-width: 86vw; scroll-snap-align: start; }
  .cartao__link img{ height: var(--altura-foto); width: 100%; object-fit: contain; }
  .galeria__dica{ display: block; text-align: center; font-size: .8rem; color: var(--tinta-suave); margin-top: .35rem; }
  .compra .botao{ width: 100%; }
  .chamada .botao{ width: 100%; }
  .some-mobile{ display: none; }
  .rodape__interno{ flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px){
  :root{ --secao-y: 1.9rem; --altura-cabecalho: 54px; }
  .marca__texto{ display: none; }
  .marca__selo{ width: 40px; height: 40px; }
  .cabecalho__interno{ padding-block: .35rem; }
  .cabecalho__acoes{ gap: .55rem; }
  .olho{ font-size: .7rem; letter-spacing: .06em; }
}

@media (max-width: 359px){
  .hero__h1-b{ font-size: 1.62rem; }
  .compra .botao, .oferta .botao--grande, .chamada .botao, .secao__acao .botao{ font-size: .9rem; padding-inline: .6rem; }
  .hero__produtos{ max-width: 250px; margin-top: .8rem; }
  .hero__sub{ font-size: .98rem; }
  .hero__h1-a{ font-size: 1.05rem; }
  .preco__valor{ font-size: 2rem; }
  .cabecalho__cta{ padding: .5rem .85rem; font-size: .86rem; }
  .barra-compra .botao{ padding-inline: .9rem; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
  .js .reveal, .js .reveal-lista > *{ opacity: 1 !important; transform: none !important; }
  .cartao__link:hover img, .botao:hover{ transform: none; }
  .balao{ will-change: auto; }
}

@media print{
  .cabecalho, .barra-compra, .lupa, .aviso-previa, .baloes{ display: none !important; }
  body{ background: #fff; }
}

.visualmente-oculto{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* títulos em Fredoka: peso médio já basta, sem negrito pesado */
.titulo, .hero h1, .oferta__titulo, .chamada h2{ font-weight: 600; }
.preco__valor, .chamada__preco, .barra-compra__preco strong, .marca__texto, .rodape__marca strong, .passos__num{ font-weight: 600; }
.beneficios h3, .passos h3{ font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.1rem; }