/* =====================================================================
   MODELO DE LP · OFICINAS ONLINE — Escola Fran Tonello
   Folha compartilhada por todas as landing pages de oficina online.

   ESTA FOLHA NÃO TEM COR NENHUMA ESCRITA NELA.
   Ela consome cinco tokens que cada oficina define no seu próprio
   styles.css:

     --p-fundo    chapa base da página
     --p-quente   chapa de apoio, mais encorpada
     --p-forte    CTA e acentos (é chapa, quase nunca letra)
     --p-luz      grifo e realce
     --p-tinta    texto e chapa escura

   Trocar esses cinco tokens troca a identidade da oficina inteira.
   Todos precisam ser cores exatas do manual (--ft-*, css/brand.css).

   DE ONDE VEM O DESENHO
   ---------------------
   1. O CATÁLOGO (css/styles.css) — cantos generosos (18px nos cards,
      30px nos blocos), botões em pílula, sombras longas, seções de cor
      com o topo arredondado, rótulos em pílula clara. A LP é irmã do
      catálogo, não um site à parte.

   2. O MANUAL DA MARCA (assets/FT_manual-da-marca.pdf) — chapa de cor
      cheia por seção, ilustração botânica tom sobre tom por trás do
      lettering (pág. 12 e 18), foto boiando sobre a chapa (mockup de
      site da pág. 19), Moderno FB nos títulos, Bebas Neue nos rótulos,
      Montserrat no corpo.

   REGRA DE CONTRASTE QUE VALE PRA TODA OFICINA
   --------------------------------------------
   As cores de chapa do manual são claras: usadas como LETRA elas
   reprovam em quase tudo. Então --p-forte só vira texto em cima do
   --p-tinta; nos fundos claros ele é chapa, filete ou bolinha, e quem
   escreve é o charcoal. Cada oficina anota suas medições no topo do
   próprio styles.css.

   Carregue depois do css/brand.css e antes do styles.css da oficina.
   ===================================================================== */

:root{
  /* ---- texto ------------------------------------------------------ */
  --tx       : var(--p-tinta);
  --tx-2     : var(--ft-charcoal-suave);
  --tx-claro : rgba(255,255,255,.74);

  /* ---- tipografia ------------------------------------------------- */
  --display: var(--ft-font-display);    /* Moderno FB   */
  --rotulo : var(--ft-font-heading);    /* Bebas Neue   */
  --corpo  : var(--ft-font-body);       /* Montserrat   */

  /* ---- métrica (mesmos valores do catálogo) ----------------------- */
  --branco  : #ffffff;
  --wrap    : 1180px;
  --gutter  : clamp(20px,5vw,40px);
  --secY    : clamp(66px,8vw,120px);
  --r       : 18px;
  --r-lg    : 30px;
  --r-topo  : clamp(30px,4vw,56px);
  --borda   : 1px solid rgba(56,43,46,.09);
  --sombra  : 0 30px 70px -36px rgba(56,43,46,.45);
  --sombra-s: 0 16px 40px -24px rgba(56,43,46,.4);
  --ease    : cubic-bezier(.22,1,.36,1);
}


/* ====================== base ======================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--branco);color:var(--tx);
  font-family:var(--corpo);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--p-forte);color:var(--branco)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap-fino{max-width:860px}

/* ====================== chapas ===================================== */
.chapa{position:relative;padding:var(--secY) 0}
.t-branco{background:var(--branco)}
.t-base  {background:var(--p-fundo)}
.t-quente {background:var(--p-quente)}
.t-luz {background:var(--p-luz)}
.t-forte{background:var(--p-forte)}
.t-tinta {background:var(--p-tinta);color:var(--branco)}
/* as chapas de cor entram com o topo arredondado, subindo um pouco por
   cima da seção anterior — é o gesto do catálogo */
.t-base,.t-quente,.t-luz,.t-forte,.t-tinta{
  border-radius:var(--r-topo) var(--r-topo) 0 0;margin-top:-1px}

/* EMENDA ENTRE CHAPAS
   O canto arredondado deixa passar o que está atrás — e atrás é o
   branco do body. Quando a seção de cima também é colorida, isso vira
   duas orelhas brancas no encontro. Este forro repinta só a faixa do
   raio com a cor da seção anterior.
   z-index:-1 num filho de elemento que NÃO cria contexto de
   empilhamento pinta abaixo do fundo do pai — é o que faz a cor
   aparecer pelo canto vazado e não por cima da seção. */
.chapa::before,.rodape::before{
  content:'';position:absolute;left:0;right:0;top:0;height:var(--r-topo);
  background:var(--atras,transparent);z-index:-1;pointer-events:none}
.rodape{position:relative}
.atras-base  {--atras:var(--p-fundo)}
.atras-quente {--atras:var(--p-quente)}
.atras-luz {--atras:var(--p-luz)}
.atras-forte{--atras:var(--p-forte)}
.atras-tinta {--atras:var(--p-tinta)}
.t-tinta .lead{color:var(--tx-claro)}

/* ====================== tipografia ================================= */
/* rótulo em pílula clara, como o "FORMATO 01 · OFICINAS" do catálogo */
.rotulo{
  display:inline-block;font-family:var(--rotulo);font-size:.95rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--p-tinta);
  background:var(--branco);border-radius:100px;padding:8px 18px 6px;
  box-shadow:var(--sombra-s);
}
.t-branco .rotulo{background:var(--p-fundo);box-shadow:none}
.t-tinta  .rotulo{background:rgba(255,255,255,.1);color:var(--p-quente);box-shadow:none}
.t-forte .rotulo{background:rgba(255,255,255,.5);box-shadow:none}

.display{font-family:var(--display);font-weight:600;line-height:1.05;
  letter-spacing:-.022em;color:var(--p-tinta)}
h1.display{font-size:clamp(2.5rem,5.6vw,4.1rem);line-height:1.02}
h2.display{font-size:clamp(2rem,3.9vw,3rem)}
h3.display{font-size:clamp(1.22rem,1.9vw,1.5rem);line-height:1.18;letter-spacing:-.01em}
.t-tinta .display{color:var(--branco)}
.display em{font-style:italic;font-weight:400}

/* Grifo de marca-texto. Pintado como fundo do próprio inline, com
   box-decoration-break:clone, pra acompanhar o texto quando ele quebra
   em mais de uma linha. Com pseudo-elemento posicionado, um título de
   duas linhas ganhava uma tarja atravessando a coluna inteira. */
.grifo{
  --grifo-cor:var(--p-luz);
  background-image:linear-gradient(transparent 54%,var(--grifo-cor) 54%,
                                   var(--grifo-cor) 93%,transparent 93%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:0 .06em;
}
.t-tinta .grifo,.t-forte .grifo{--grifo-cor:rgba(255,255,255,.28)}

.lead{font-size:clamp(1.04rem,1.4vw,1.18rem);color:var(--tx-2);line-height:1.66}
.cab{max-width:730px}
.cab .display{margin-top:20px}
.cab .lead{margin-top:18px}
.cab.centro{margin-inline:auto;text-align:center}

/* ====================== ilustração do manual ======================= */
.ilu{position:absolute;pointer-events:none;user-select:none;z-index:0}
.ilu img{width:100%;height:auto}
.chapa > .wrap,.hero-in,.fecho .wrap{position:relative;z-index:1}

/* ====================== botões (pílula) ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--corpo);font-weight:700;font-size:1rem;line-height:1;
  padding:19px 32px;border:0;border-radius:100px;text-decoration:none;
  cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,background .25s,color .25s;
}
.btn .seta{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--p-tinta);color:var(--branco);
  font-size:.85rem;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:var(--sombra-s)}
.btn:hover .seta{transform:translateX(3px)}
.btn-cta{background:var(--p-forte);color:var(--p-tinta)}      /* 5.18:1 */
.btn-cta:hover{background:var(--p-tinta);color:var(--branco)}
.btn-cta:hover .seta{background:var(--p-forte);color:var(--p-tinta)}
.btn-escuro{background:var(--p-tinta);color:var(--branco)}
.btn-escuro .seta{background:var(--p-forte);color:var(--p-tinta)}
.btn-escuro:hover{background:var(--branco);color:var(--p-tinta)}
.btn-linha{background:transparent;color:var(--p-tinta);box-shadow:inset 0 0 0 1.5px rgba(56,43,46,.3)}
.btn-linha .seta{display:none}
.btn-linha:hover{background:var(--p-tinta);color:var(--branco)}
.t-tinta .btn-linha{color:var(--branco);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.t-tinta .btn-linha:hover{background:var(--branco);color:var(--p-tinta)}
.btn-bloco{width:100%}
.btn-g{padding:23px 38px;font-size:1.06rem}

/* ====================== topo (não é menu) ========================== */
.topo{position:relative;z-index:3;background:var(--p-fundo)}
.topo-in{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:22px;padding-bottom:6px}
.topo-logo img{height:clamp(30px,3.4vw,38px);width:auto}
.voltar{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--rotulo);font-size:.92rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--p-tinta);background:var(--branco);border-radius:100px;padding:9px 18px 7px;
  transition:transform .3s var(--ease),box-shadow .3s}
.voltar:hover{transform:translateY(-2px);box-shadow:var(--sombra-s)}

/* ====================== hero ======================================= */
.hero{background:var(--p-fundo);padding:clamp(26px,3.4vw,44px) 0 clamp(66px,7vw,104px);
  position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,4.5vw,64px);align-items:center}
.hero .ilu{left:-11%;top:30%;width:min(48%,560px);opacity:.42}
.hero-copy{max-width:600px}
.hero h1{margin:20px 0 22px}
.hero .lead{max-width:520px;color:var(--tx)}
.hero-acao{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
.hero-preco{font-size:.92rem;color:var(--tx-2);line-height:1.4}
.hero-preco b{display:block;font-family:var(--display);font-size:1.45rem;font-weight:600;color:var(--p-tinta)}

/* provas em pílulas, no lugar das colunas com fio */
.provas{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.provas li{display:flex;align-items:baseline;gap:8px;background:var(--branco);
  border-radius:100px;padding:11px 20px;box-shadow:var(--sombra-s)}
.provas b{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--p-tinta)}
.provas span{font-size:.86rem;color:var(--tx-2)}

.hero-foto{position:relative}
.hero-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--sombra)}
.hero-foto figcaption{position:absolute;left:18px;bottom:18px;background:var(--branco);
  color:var(--p-tinta);font-family:var(--rotulo);font-size:.88rem;letter-spacing:.13em;
  text-transform:uppercase;padding:10px 18px 8px;border-radius:100px;box-shadow:var(--sombra-s)}

/* ====================== faixa ====================================== */
.faixa{background:var(--p-tinta);color:var(--p-quente);overflow:hidden;padding:16px 0;
  position:relative;z-index:2}
.faixa-linha{display:flex;align-items:center;gap:22px;width:max-content;
  animation:desliza 42s linear infinite}
.faixa-linha span{font-family:var(--rotulo);font-size:1.14rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.faixa-linha i{color:var(--p-forte);font-style:normal;font-size:.78rem}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ====================== barra fixa de CTA ========================== */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:60;
  transform:translateY(130%);transition:transform .45s var(--ease)}
.barra.aparece{transform:none}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--p-tinta);color:var(--branco);border-radius:100px;
  padding:11px 11px 11px 28px;margin-bottom:16px;box-shadow:var(--sombra)}
.barra-tx{min-width:0}
.barra-tx b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-tx span{font-size:.84rem;color:var(--tx-claro)}
.barra .btn{padding:15px 26px;white-space:nowrap}

/* ====================== vídeo / VSL ================================ */
.vsl{max-width:960px;margin:clamp(32px,4vw,50px) auto 0}
.vsl-moldura{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra);line-height:0}
.vsl-moldura > vturb-smartplayer,.vsl-moldura > iframe,
.vsl-moldura > video{display:block;width:100%}

/* ====================== dores ====================================== */
.dores{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.8vw,24px);
  margin-top:clamp(34px,4vw,52px)}
.dor{background:var(--branco);border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);
  transition:transform .45s var(--ease),box-shadow .45s}
.dor:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.dor > b{display:block;font-family:var(--display);font-size:2.4rem;font-weight:600;
  line-height:.5;color:var(--p-forte);margin-bottom:20px}
.dor p{font-size:1.05rem;line-height:1.55}
.virada{margin-top:clamp(22px,2.4vw,32px);display:grid;grid-template-columns:1.6fr auto;
  gap:clamp(24px,3vw,44px);align-items:center;background:var(--p-tinta);color:var(--branco);
  padding:clamp(28px,3.4vw,44px);border-radius:var(--r-lg)}
.virada p{font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.6}
.virada p b{color:var(--p-quente)}

/* ====================== conquistas ================================= */
.conquistas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);
  margin-top:clamp(38px,4.5vw,58px)}
.conq{background:var(--branco);border:var(--borda);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s}
.conq:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
.conq figure{margin:0;overflow:hidden;background:var(--p-fundo)}
.conq figure img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease)}
.conq:hover figure img{transform:scale(1.05)}
.conq-tx{padding:26px clamp(22px,2.4vw,28px) 30px}
.conq-n{display:inline-block;font-family:var(--rotulo);font-size:.9rem;letter-spacing:.14em;
  color:var(--p-tinta);background:var(--p-fundo);border-radius:100px;padding:5px 13px 3px;
  margin-bottom:14px}
.conq h3{margin-bottom:10px}
.conq p{font-size:.98rem;color:var(--tx-2);line-height:1.55}

/* ====================== receitas =================================== */
.receitas{overflow:hidden}
.receitas .ilu{right:-10%;bottom:-18%;width:min(46%,540px);opacity:.55}
.rec-cols{display:grid;grid-template-columns:1.32fr 1fr;gap:clamp(20px,2.4vw,32px);
  margin-top:clamp(34px,4vw,52px)}
.rec-bloco{background:var(--branco);border-radius:var(--r-lg);padding:clamp(24px,2.8vw,34px);
  box-shadow:var(--sombra-s)}
.rec-titulo{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:16px}
.rec-titulo h3{font-family:var(--display);font-size:1.4rem;font-weight:600}
.rec-titulo span{font-family:var(--rotulo);font-size:.86rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--p-tinta);background:var(--p-fundo);
  border-radius:100px;padding:5px 13px 3px;white-space:nowrap}
.rec-lista{display:flex;flex-wrap:wrap;gap:9px}
.rec-lista li{display:flex;align-items:baseline;gap:9px;background:var(--p-fundo);
  border-radius:100px;padding:10px 18px;font-size:.97rem}
.rec-lista i{font-family:var(--rotulo);font-style:normal;font-size:.88rem;
  letter-spacing:.06em;color:var(--tx-2)}
.rec-nota{margin-top:18px;font-size:.94rem;color:var(--tx-2);font-style:italic}

/* ====================== passos ===================================== */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);
  margin-top:clamp(40px,5vw,62px)}
.passo{background:rgba(255,255,255,.07);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .45s var(--ease)}
.passo:hover{transform:translateY(-6px)}
.passo figure{margin:0}
.passo figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.passo-tx{padding:24px clamp(22px,2.4vw,28px) 30px}
.passo-n{display:inline-block;font-family:var(--rotulo);font-size:.88rem;letter-spacing:.14em;
  color:var(--p-quente);background:rgba(255,255,255,.12);border-radius:100px;
  padding:5px 13px 3px;margin-bottom:14px}
.passo h3{margin-bottom:10px;color:var(--branco)}
.passo p{color:var(--tx-claro);font-size:.97rem;line-height:1.58}

/* ====================== duas colunas =============================== */
.duas{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4vw,66px);align-items:center}
.duas.inverte{grid-template-columns:1.08fr .92fr}
.duas figure{margin:0;position:relative}
.duas figure img{width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--sombra)}
.selo-ig{position:absolute;left:16px;bottom:-22px;display:flex;align-items:center;gap:11px;
  background:var(--branco);padding:8px 20px 8px 8px;border-radius:100px;text-decoration:none;
  box-shadow:var(--sombra-s);transition:transform .35s var(--ease),box-shadow .35s}
.selo-ig:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.selo-ig img{width:42px;height:42px;object-fit:cover;border-radius:50%}
.selo-ig > span{display:block;line-height:1.3}
.selo-ig b{display:block;font-size:.92rem}
.selo-ig span span{display:block;font-size:.77rem;color:var(--tx-2);white-space:nowrap}
.duas p + p{margin-top:14px}
.credenciais{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.credenciais li{background:var(--p-fundo);border-radius:100px;padding:10px 18px;font-size:.93rem}

/* ====================== pra quem é ================================= */
.grupos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,26px);margin-top:34px}
.grupo{background:var(--branco);border-radius:var(--r-lg);padding:clamp(26px,3vw,36px)}
/* card branco sobre chapa branca some; ali ele usa a chapa base */
.t-branco .grupo{background:var(--p-fundo)}
.grupo h3{font-family:var(--rotulo);font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-tinta);margin-bottom:18px;font-weight:400}
.grupo li{padding:10px 0 10px 32px;position:relative;font-size:1rem}
.grupo li::before{content:'✓';position:absolute;left:0;top:12px;width:20px;height:20px;
  border-radius:50%;background:var(--p-forte);color:var(--p-tinta);font-size:.72rem;
  font-weight:700;display:grid;place-items:center}

/* ====================== calculadora ================================ */
.calc{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(32px,4vw,48px);
  background:var(--branco);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra)}
.calc-lado{padding:clamp(28px,3.2vw,40px)}
.calc-lado + .calc-lado{background:var(--p-fundo)}
.campo + .campo{margin-top:28px}
.campo-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.campo-cab label{font-weight:600;font-size:.97rem}
.campo-cab output{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--p-tinta);
  background:var(--p-fundo);border-radius:100px;padding:5px 14px}
.calc-lado + .calc-lado .campo-cab output{background:var(--branco)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;
  border-radius:100px;background:rgba(56,43,46,.14);outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--p-forte);cursor:pointer;border:4px solid var(--branco);
  box-shadow:var(--sombra-s)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
  background:var(--p-forte);cursor:pointer;border:4px solid var(--branco)}
.campo-escala{display:flex;justify-content:space-between;margin-top:9px;font-size:.8rem;color:var(--tx-2)}
.calc-rotulo{font-family:var(--rotulo);font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-2)}
.calc-num{display:flex;align-items:baseline;gap:14px;margin:10px 0 20px}
.calc-num > b{font-family:var(--display);font-size:clamp(3.2rem,5.6vw,4.3rem);font-weight:600;
  line-height:.9;color:var(--p-tinta)}
.calc-num span{font-size:1rem;line-height:1.4}
.calc-renda{background:var(--branco);border-radius:var(--r);padding:18px 22px;margin-bottom:14px}
.calc-renda span{display:block;font-size:.86rem;color:var(--tx-2)}
.calc-renda b{font-family:var(--display);font-size:1.9rem;font-weight:600}
.calc-nota{font-size:.89rem;color:var(--tx-2);margin-bottom:22px}

/* ====================== números ==================================== */
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(36px,4vw,54px)}
.numeros div{background:var(--p-quente);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px);
  text-align:center}
.numeros b{display:block;font-family:var(--display);font-size:clamp(1.7rem,2.7vw,2.2rem);
  font-weight:600;line-height:1}
.numeros span{display:block;margin-top:8px;font-size:.85rem;color:var(--p-tinta);opacity:.72;line-height:1.35}

/* ====================== avaliações ================================= */
.aval{margin-top:clamp(34px,4vw,50px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.aval-trilho{display:flex;gap:20px;width:max-content;animation:desliza 68s linear infinite}
.aval:hover .aval-trilho{animation-play-state:paused}
.aval-card{width:340px;flex:0 0 340px;background:var(--branco);border-radius:var(--r-lg);padding:28px}
.aval-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.aval-estrelas{color:#f0a500;letter-spacing:2px;font-size:.95rem}
.aval-g{width:19px;height:19px}
.aval-tx{font-size:.96rem;line-height:1.55}
.aval-autor{display:flex;align-items:center;gap:11px;margin-top:20px}
.aval-av{width:38px;height:38px;border-radius:50%;background:var(--p-quente);display:grid;
  place-items:center;font-family:var(--display);font-weight:600;color:var(--p-tinta);flex:0 0 38px}
.aval-autor b{display:block;font-size:.91rem}
.aval-autor span{display:block;font-size:.79rem;color:var(--tx-2)}

/* ====================== oferta ===================================== */
.oferta{max-width:660px;margin:clamp(34px,4vw,50px) auto 0;background:var(--branco);
  color:var(--tx);padding:clamp(32px,3.8vw,48px);border-radius:var(--r-lg);box-shadow:var(--sombra)}
.oferta-tag{display:inline-block;background:var(--p-forte);color:var(--p-tinta);
  font-family:var(--rotulo);font-size:.92rem;letter-spacing:.13em;text-transform:uppercase;
  padding:8px 18px 6px;border-radius:100px;margin-bottom:24px}
.inclui li{padding:12px 0 12px 34px;position:relative;font-size:1rem}
.inclui li::before{content:'✓';position:absolute;left:0;top:14px;width:22px;height:22px;
  border-radius:50%;background:var(--p-fundo);color:var(--p-tinta);font-size:.74rem;
  font-weight:700;display:grid;place-items:center}
.preco{margin:28px 0 6px;display:flex;align-items:baseline;gap:10px}
.preco small{font-size:1rem;color:var(--tx-2)}
.preco b{font-family:var(--display);font-size:clamp(2.7rem,5vw,3.4rem);font-weight:600;line-height:.95}
.preco b i{font-style:normal;font-size:.45em}
.preco-avista{font-size:.94rem;color:var(--tx-2);display:block;margin-bottom:26px}
.gatilhos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.gatilhos div{background:var(--p-fundo);border-radius:var(--r);padding:16px 12px;text-align:center}
.gatilhos b{display:block;font-family:var(--rotulo);font-size:1.02rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--p-tinta)}
.gatilhos span{display:block;font-size:.77rem;color:var(--tx-2);margin-top:2px;line-height:1.3}
.oferta-seguro{display:block;margin-top:20px;text-align:center;font-size:.84rem;color:var(--tx-2)}

.garantia{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  max-width:660px;margin:20px auto 0;background:var(--p-luz);border-radius:var(--r-lg);
  padding:26px clamp(22px,2.8vw,34px)}
.garantia-selo{width:86px;height:86px;border-radius:50%;background:var(--p-tinta);color:var(--p-luz);
  display:grid;place-items:center;text-align:center;line-height:1.05;
  font-family:var(--rotulo);letter-spacing:.06em}
.garantia-selo b{display:block;font-size:2rem}
.garantia-selo span{display:block;font-size:.72rem;letter-spacing:.14em}
.garantia p{font-size:.97rem;line-height:1.55;color:var(--p-tinta)}

/* ====================== FAQ ======================================== */
.faq{margin-top:clamp(30px,3.4vw,44px);display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--p-fundo);border-radius:var(--r);overflow:hidden;transition:background .3s}
.faq details[open]{background:var(--branco);box-shadow:var(--sombra-s)}
.faq summary{list-style:none;cursor:pointer;padding:20px 62px 20px 26px;position:relative;
  font-weight:600;font-size:1.03rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:var(--branco);color:var(--p-tinta);
  font-size:1.15rem;font-weight:400;display:grid;place-items:center;transition:transform .3s var(--ease)}
.faq details[open] summary::after{background:var(--p-forte);transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 26px 24px;color:var(--tx-2);font-size:.99rem;line-height:1.62;max-width:70ch}

/* ====================== fecho ====================================== */
.fecho{text-align:center;overflow:hidden}
.fecho .ilu{left:50%;top:50%;transform:translate(-50%,-50%);width:min(74%,720px);opacity:.32}
.fecho .display{margin-bottom:18px}
.fecho .lead{max-width:600px;margin:0 auto 34px;color:var(--p-tinta)}

/* ====================== rodapé ===================================== */
.rodape{background:var(--p-tinta);color:var(--branco);padding:clamp(48px,5vw,68px) 0 0;
  border-radius:var(--r-topo) var(--r-topo) 0 0;margin-top:-1px}
.rodape-in{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(26px,3.4vw,50px);
  align-items:start;padding-bottom:clamp(34px,4vw,48px)}
.rodape-logo img{height:44px;width:auto;margin-bottom:18px}
.rodape p{color:var(--tx-claro);font-size:.94rem;max-width:44ch}
.rodape-links{display:flex;flex-direction:column;gap:11px}
.rodape-links a{color:var(--branco);text-decoration:none;font-size:.94rem;opacity:.82;transition:opacity .25s}
.rodape-links a:hover{opacity:1;color:var(--p-forte)}
.rodape-links .tit{font-family:var(--rotulo);font-size:.92rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--p-forte);opacity:1}
.rodape-base{border-top:1px solid rgba(255,255,255,.13);padding:18px 0;font-size:.82rem;
  color:rgba(255,255,255,.5);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rodape-base a{color:inherit;text-decoration:none}
.rodape-base a:hover{color:rgba(255,255,255,.85)}

/* ====================== entrada suave ============================== */
.sobe{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.sobe.entrou{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .sobe{opacity:1;transform:none;transition:none}
  .faixa-linha,.aval-trilho{animation:none}
}

/* ====================== manifesto (bloco de virada) ================ */
/* Um parágrafo só, grande, numa chapa escura. Serve pra dar o soco
   emocional entre a dor e a apresentação da oficina. */
.manifesto{text-align:center}
.manifesto-tx{max-width:760px;margin:0 auto;font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.42;color:var(--branco)}
.manifesto-tx + .manifesto-tx{margin-top:22px}
.manifesto-tx b{font-weight:600}
.manifesto-vira{display:block;margin:30px auto 34px;font-family:var(--display);font-weight:600;
  font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--p-quente)}

/* ====================== tags soltas ================================ */
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.tags li{background:var(--branco);border-radius:100px;padding:10px 20px;font-size:.93rem;
  box-shadow:var(--sombra-s)}
.t-branco .tags li{background:var(--p-fundo);box-shadow:none}

/* ====================== "não é pra você" =========================== */
/* Mesmo card do .grupo, com o sinal invertido. Ter a coluna do "não"
   escrita com honestidade vale mais que uma lista de vantagens. */
.grupo.nao{background:var(--p-tinta);color:var(--branco)}
.grupo.nao h3{color:var(--p-quente)}
.grupo.nao li::before{content:'✕';background:rgba(255,255,255,.16);color:var(--branco)}

/* ====================== conta aberta =============================== */
/* A conta da fornada, linha a linha. É mais honesto que um slider:
   os números vêm da apostila da oficina, não de uma projeção. */
.conta{background:var(--branco);border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);
  box-shadow:var(--sombra)}
.conta-linha{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid rgba(56,43,46,.1)}
.conta-linha:last-of-type{border-bottom:0}
.conta-linha span{font-size:.99rem}
.conta-linha b{font-family:var(--display);font-size:1.35rem;font-weight:600;white-space:nowrap}
.conta-total{margin-top:8px;background:var(--p-luz);border-radius:var(--r);
  padding:20px 24px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.conta-total span{font-weight:600}
.conta-total b{font-family:var(--display);font-size:clamp(1.9rem,3vw,2.4rem);font-weight:600}
.conta-nota{margin-top:18px;font-size:.86rem;color:var(--tx-2);line-height:1.5}

/* ====================== preço com âncora =========================== */
.preco-de{display:block;font-size:1rem;color:var(--tx-2);margin-bottom:2px}
.preco-de s{opacity:.7}

/* ====================== responsivo ================================= */
@media(max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:34px}
  .hero-foto{order:-1;max-width:540px}
  .hero .ilu{left:auto;right:-18%;top:auto;bottom:-8%;width:min(78%,480px);opacity:.55}
  .duas,.duas.inverte{grid-template-columns:1fr;gap:44px}
  .duas figure img{aspect-ratio:4/3}
  .conquistas{grid-template-columns:repeat(2,1fr)}
  .passos{grid-template-columns:1fr}
  .rec-cols{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .virada{grid-template-columns:1fr;gap:24px}
  .numeros{grid-template-columns:repeat(2,1fr)}
  .rodape-in{grid-template-columns:1fr;gap:30px}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero{padding-bottom:clamp(50px,10vw,72px)}
  .hero-foto img{aspect-ratio:1/1}
  .dores{grid-template-columns:1fr}
  .conquistas{grid-template-columns:1fr}
  .grupos{grid-template-columns:1fr}
  .gatilhos{grid-template-columns:1fr}
  .gatilhos div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-align:left}
  .gatilhos span{margin-top:0;text-align:right}
  .garantia{grid-template-columns:1fr;text-align:center;justify-items:center;gap:16px}
  .aval-card{width:80vw;flex-basis:80vw}
  .conta-linha{flex-direction:column;align-items:flex-start;gap:2px}
  .conta-total{flex-direction:column;align-items:flex-start;gap:4px}
  .barra-tx b{display:none}
  .barra-tx span{font-size:.9rem;color:#fff}
  .barra-in{padding-left:22px}
  .barra .btn{padding:14px 22px;font-size:.94rem}
  .btn{width:100%}
  .hero-acao .btn,.barra .btn{width:auto}
  .faixa-linha span{font-size:1rem}
  .selo-ig{left:12px}
}