/* =====================================================================
   BOLOS · LP 2 · "POPULAR"
   LP de infoproduto no estilo mais direto/amador, na linha do exemplo
   de referência (os "brownies mais virais do mundo").

   O visual é deliberadamente diferente do que a gente faria por padrão:
     · tudo centralizado
     · muitos pesos e tamanhos de fonte brigando na mesma tela
     · negrito + cor + marca-texto empilhados na mesma frase
     · botão de compra repetido a cada seção
     · caixas com borda grossa e sombra dura
   Isso não é descuido: é o padrão que converte nesse nicho.

   PALETA · atualizada a pedido. Saiu o magenta genérico de infoproduto
   e entraram as cores do manual da Fran, mas nas versões quentes:
     · coral   #ff6f5e  · o salmão 1775 C puxado pra saturação alta.
                          É o novo "rosa": mesma energia, cara de Fran.
     · pêssego #fac7b8  · Pantone 698 C, fundos suaves
     · nude    #ede3e3  · Pantone 503 C
     · verde   #003c2b  · Pantone 3308 C, substitui o marrom chocolate
                          da referência nas faixas de destaque
     · lima    #d5e05b  · Pantone 584 C, o botão de maior contraste
     · amarelo #f5f085  · Pantone 3935 C, o marca-texto
   A página continua gritando, mas agora grita na voz da marca.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

/* -------------------------------------------------------------------
   PALETA DO CURSO · BOLOS
   Cacau escuro de base, dourado champanhe no CTA, telha na régua.
   Família análoga e quente, na linha de confeitaria.

   A primeira versão era vinho com pêssego e framboesa. Ficou adocicada
   demais, então voltou pro território do cacau.

   ATENÇÃO ao mexer aqui: esta é a paleta mais próxima da de biscoitos,
   que também é marrom com âmbar. As duas foram separadas de propósito e
   convém manter a distância:
     · o cacau de bolos é mais ESCURO e mais VERMELHO (#2a1712) que o
       marrom de biscoitos (#33262a), que puxa pro acinzentado;
     · o dourado de bolos é um champanhe PÁLIDO (#eec87a), enquanto o
       âmbar de biscoitos é saturado (#f2b134);
     · a régua de bolos é telha avermelhada, a de biscoitos é terracota.
   Se alguma das duas for mexida, olhe as duas juntas antes de fechar.
   ------------------------------------------------------------------- */
:root{
  /* Versões RGB dos mesmos tons, para uso em rgba(). Estavam sendo
     CHAMADAS no corpo do arquivo sem nunca terem sido declaradas: uma
     var() indefinida invalida a regra inteira, então as sombras e os
     fundos translúcidos simplesmente não pintavam, sem erro nenhum. */
  --base-rgb: 42,23,18;
  --papel-rgb: 255,250,244;
  --tinta-rgb: 36,22,18;

  --quente:      #a8543a;
  --quente-esc:  #823c28;
  --suave:    #f6ddc2;
  --nude:       #f5e7d8;
  --base:      #2a1712;
  --base-cl:   #4f3025;
  --acento:       #eec87a;
  --acento-esc:   #d4aa57;
  --realce:    #f5f085;
  --tinta:      #241612;
  --cinza:      #6b5146;
  --papel:      #fffaf4;
  --borda:      #eddbc9;
}

body{
  background:var(--papel);
  color:var(--tinta);
  font:400 17px/1.7 'Poppins',Arial,Helvetica,sans-serif;
  text-align:center;
  overflow-x:hidden;
  padding-bottom:82px;
}
img{max-width:100%;height:auto;display:block;margin-inline:auto}
a{color:inherit}

.wrap{width:min(860px,calc(100% - 32px));margin-inline:auto}
section{padding:clamp(40px,5.5vw,66px) 0}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:'Poppins',Arial,sans-serif;font-weight:800;line-height:1.18;margin:0}
h1{font-size:clamp(26px,4.4vw,42px)}
h2{font-size:clamp(23px,3.6vw,36px)}
h3{font-size:clamp(18px,2.2vw,23px)}
p{margin:0 0 1.1em}
.grande{font-size:clamp(17px,2.1vw,21px);line-height:1.6}
.coral{color:var(--quente-esc)}
.verde-tx{color:var(--base)}
/* marca-texto: o gesto mais característico do estilo, agora no amarelo
   do manual em vez do amarelo puro de banner. */
.mark{background:var(--realce);padding:1px 6px;border-radius:3px;font-weight:700}
.sub{color:var(--cinza);font-size:15.5px}

/* ---------- barra de topo ---------- */
/* Régua em duas linhas, no formato do exemplo de referência: chamada da
   promoção em caixa alta e, embaixo, a frase de missão. É o que o
   público de tráfego frio lê antes de qualquer coisa. */
.topo-aviso{background:var(--base);color:var(--papel);padding:11px 14px}
.topo-aviso b{display:block;font:800 clamp(13px,1.8vw,17px)/1.25 'Poppins',Arial,sans-serif;
  letter-spacing:.02em;text-transform:uppercase;color:var(--acento)}
.topo-aviso span{display:block;max-width:70ch;margin:5px auto 0;
  font:400 12.5px/1.42 'Poppins',Arial,sans-serif;color:rgba(var(--papel-rgb),.9)}

/* ---------- botão ---------- */
.cta{display:inline-block;background:var(--quente);color:#fff;text-decoration:none;
  font:800 clamp(15px,2vw,19px)/1.3 'Poppins',Arial,sans-serif;
  padding:19px 34px;border-radius:50px;border:0;cursor:pointer;
  box-shadow:0 6px 0 var(--quente-esc);transition:transform .12s,box-shadow .12s;
  max-width:100%}
.cta:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--quente-esc)}
.cta:active{transform:translateY(6px);box-shadow:none}
/* o botão de maior contraste da marca: lima sobre verde escuro */
.cta-lima{background:var(--acento);color:var(--base);box-shadow:0 6px 0 var(--acento-esc)}
.cta-lima:hover{box-shadow:0 3px 0 var(--acento-esc)}
.cta-bloco{display:block;width:100%}
.cta-nota{display:block;font-size:13.5px;color:var(--cinza);margin-top:12px}
.pisca{animation:pisca 1.9s ease-in-out infinite}
@keyframes pisca{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.pisca{animation:none}}

/* ---------- HERO ----------
   A oficina de bolos não tem VSL gravada. No lugar do player entra uma
   galeria dos bolos do curso, que é o argumento visual mais forte que
   existe aqui: a pessoa precisa ver que bolo sem glúten pode ficar
   bonito. Quando a VSL for gravada, é trocar a galeria pelo bloco do
   player e o resto da página continua igual. */
.hero{background:linear-gradient(180deg,var(--nude),var(--papel));padding-top:clamp(28px,3.6vw,44px)}
.hero h1{margin-bottom:16px}
.numerao{font:800 clamp(40px,7.6vw,68px)/1 'Poppins',Arial,sans-serif;color:var(--quente-esc);
  letter-spacing:-.02em;margin:4px 0 2px}
.numerao-leg{font-size:14px;color:var(--cinza);margin-bottom:20px}

.hero-galeria{margin:26px auto 0;max-width:760px}
.hg-cha{font:700 13px/1 'Poppins',Arial,sans-serif;color:var(--quente-esc);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.hg-grade{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.hg-grade figure{margin:0}
.hg-grade img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;
  border:4px solid var(--papel);box-shadow:0 8px 24px rgba(var(--tinta-rgb),.18)}
.hg-grade figcaption{font-size:12.5px;color:var(--cinza);margin-top:7px}

/* ---------- faixa verde (era chocolate) ---------- */
.faixa-verde{background:var(--base);color:var(--papel);padding:clamp(26px,3.4vw,40px) 0}
.faixa-verde h2{margin-bottom:10px}
.faixa-verde .grande{margin:0;color:rgba(var(--papel-rgb),.92)}
.faixa-verde b{color:var(--acento)}

/* ---------- blocos de texto ----------
   Papel, não nude: as seções onde este bloco aparece já têm fundo nude,
   e nude sobre nude fazia o texto se dissolver no fundo. */
.bloco{background:var(--papel);border:1px solid var(--borda);border-radius:14px;
  padding:clamp(22px,3vw,34px);margin-top:24px;text-align:left}
.bloco p:last-child{margin-bottom:0}

/* ---------- lista de checks ---------- */
.checks{list-style:none;padding:0;margin:26px 0 0;text-align:left;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;
  background:var(--papel);border:1px solid var(--borda);border-radius:10px;padding:15px 17px}
.checks li::before{content:'✔';color:var(--base);font-weight:800;flex:none;font-size:17px}
.checks b{font-weight:700}

/* ---------- receitas ---------- */
.receitas{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));text-align:left}
.receitas li{background:var(--papel);border:2px solid var(--nude);border-radius:9px;
  padding:12px 15px;font-size:15.5px;display:flex;gap:10px;align-items:baseline}
.receitas i{font-style:normal;font-weight:800;color:var(--quente-esc);font-size:13px;min-width:20px}

/* ---------- galeria ---------- */
.galeria{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:26px}
.galeria img{border-radius:10px;border:3px solid var(--papel);box-shadow:0 5px 16px rgba(var(--tinta-rgb),.16);
  aspect-ratio:1;object-fit:cover;width:100%}

/* ---------- bônus ---------- */
.bonus{display:grid;gap:14px;margin-top:26px;text-align:left}
.bonus-item{background:var(--papel);border:2px dashed var(--quente);border-radius:12px;padding:18px 20px;
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.bonus-item b{display:block;font-size:16.5px;font-weight:700}
.bonus-item span{font-size:14.5px;color:var(--cinza)}
.bonus-val{font-weight:800;color:var(--base);white-space:nowrap;font-size:15px}

/* ---------- CAIXA DE PREÇO ---------- */
.preco-cx{background:var(--base);color:var(--papel);border-radius:18px;padding:clamp(26px,3.6vw,44px);
  margin-top:30px;box-shadow:0 14px 40px rgba(var(--base-rgb),.35)}
.preco-cx .de{font-size:clamp(16px,2vw,19px);opacity:.92;margin-bottom:2px}
.preco-cx .de s{color:var(--suave);text-decoration-thickness:2px}
.preco-cx .por{font:800 clamp(42px,8.4vw,74px)/1 'Poppins',Arial,sans-serif;letter-spacing:-.02em;
  color:var(--acento)}
.preco-cx .por small{font-size:.42em;font-weight:700}
.preco-cx .avista{font-size:clamp(15px,1.9vw,18px);margin:8px 0 8px;opacity:.95}
.economia{display:inline-block;background:var(--acento);color:var(--base);border-radius:100px;
  padding:7px 18px;font:800 13.5px/1 'Poppins',Arial,sans-serif;margin-bottom:20px}
.preco-cx .cta{background:var(--quente);color:#fff;box-shadow:0 6px 0 var(--quente-esc)}
.preco-cx .cta:hover{box-shadow:0 3px 0 var(--quente-esc)}
.pgto{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;
  font-size:13px;opacity:.95}
.pgto span{background:rgba(var(--papel-rgb),.16);border-radius:6px;padding:6px 12px}

/* ---------- depoimentos ---------- */
.depos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin-top:26px}
.depo{background:var(--nude);border-radius:12px;padding:20px;text-align:left}
.depo-estrelas{color:var(--quente-esc);letter-spacing:2px;font-size:15px}
.depo p{font-size:15px;margin:10px 0 14px}
.depo-quem{display:flex;align-items:center;gap:10px}
.depo-av{width:36px;height:36px;border-radius:50%;background:var(--base);color:var(--acento);
  display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.depo-quem b{display:block;font-size:14.5px}
.depo-quem span{font-size:12.5px;color:var(--cinza)}

/* ---------- números da escola ---------- */
.nums{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:26px}
.nums div{background:var(--papel);border:2px solid var(--nude);border-radius:12px;padding:20px 12px}
.nums b{display:block;font:800 clamp(22px,3vw,30px)/1 'Poppins',Arial,sans-serif;color:var(--quente-esc)}
.nums span{display:block;font-size:13px;color:var(--cinza);margin-top:6px}

/* ---------- garantia ---------- */
.garantia{background:var(--suave);border-radius:16px;padding:clamp(26px,3.4vw,40px);margin-top:30px}
.selo{width:120px;height:120px;border-radius:50%;background:var(--base);color:var(--acento);
  display:grid;place-content:center;margin:0 auto 18px;line-height:1;
  box-shadow:0 8px 22px rgba(var(--base-rgb),.3)}
.selo b{font:800 40px/1 'Poppins',Arial,sans-serif}
.selo span{font-size:13px;font-weight:700;letter-spacing:.08em}

/* ---------- FAQ ---------- */
.faq{margin-top:26px;text-align:left}
.faq details{background:var(--papel);border:2px solid var(--nude);border-radius:10px;
  padding:16px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'▼';font-size:12px;color:var(--quente-esc);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq p{margin:12px 0 0;font-size:15.5px;color:var(--cinza)}

/* ---------- rodapé ----------
   SEM links de navegação, a pedido: LP de tráfego pago não pode ter
   rota de fuga antes do checkout. Fica só a marca e o aviso legal. */
.rodape{background:var(--base);color:rgba(var(--papel-rgb),.8);padding:38px 0 30px;font-size:14px}
.rodape img{width:170px;margin:0 auto 14px;opacity:.95}
.rodape-base{margin-top:20px;padding-top:16px;border-top:1px solid rgba(var(--papel-rgb),.2);
  font-size:12.5px;opacity:.9}

/* ---------- barra fixa ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--base);
  padding:11px 14px;transform:translateY(115%);transition:transform .3s ease}
.barra.on{transform:none}
.barra .cta{padding:14px 26px;font-size:15px;box-shadow:0 4px 0 var(--quente-esc)}
.barra-tx{color:var(--papel);font-size:12.5px;margin-bottom:7px}
.barra-tx b{color:var(--acento)}

/* ---------- entrada suave ----------
   Mesma trava das outras variantes: quem esconde é a classe .js. */
.sobe{transition:opacity .6s ease,transform .6s ease}
.js .sobe{opacity:0;transform:translateY(18px)}
.js .sobe.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .sobe{opacity:1;transform:none;transition:none}
}

/* ---------- miniaturas das receitas ----------
   Só entram quando o JS confirma que o arquivo existe (veja script.js).
   O espaçamento maior vive na classe .com-foto e não no <li>: sem a foto,
   a linha mantém o ritmo compacto de lista de texto. */
.rec-foto{width:46px;height:46px;object-fit:cover;border-radius:8px;flex:none}
.rec-lista li.com-foto,.receitas li.com-foto{align-items:center;gap:12px}
.rec-lista li.com-foto{padding:9px 0}