/* =========================================================
   Curso de Construção de Aulas de Yoga — Ju Dias
   Folha de estilo principal
   =========================================================
   Organização:
   1. Tokens (cores, fontes, medidas)   → :root
   2. Base / reset
   3. Layout (seções, containers)
   4. Tipografia e blocos de título
   5. Componentes reutilizáveis (botão, selo, cartão, etc.)
   6. Estilos por seção
   7. Responsivo
   ========================================================= */

/* 1. TOKENS ------------------------------------------------ */
:root{
  /* Fontes */
  --serif:'Marcellus', serif;
  --sans:'Mulish', sans-serif;
  --mono:'DM Mono', monospace;

  /* Cores — fundos */
  --cream:#f3ece0;      /* fundo base / seções areia */
  --paper:#fdfcfa;      /* seções claras */

  /* Cores — texto */
  --ink:#2e2a24;        /* títulos */
  --ink-soft:#43403a;   /* texto forte */
  --muted:#6b6459;      /* texto corrido */
  --muted-2:#9c9280;    /* legendas / notas */
  --muted-3:#8f846f;    /* placeholder */

  /* Cores — marca */
  --green:#3e7168;      /* verde principal / links */
  --green-deep:#2c534c; /* painéis escuros */
  --sage:#7cb7ad;       /* botões e detalhes */

  /* Cores sobre verde escuro */
  --on-deep:#f4f0e8;
  --on-deep-soft:#bcd0cb;
  --on-deep-mute:#8fb0aa;
  --on-deep-note:#9fc4bd;

  /* Medidas */
  --maxw:1180px;
  --radius-card:24px;
  --radius-pill:100px;
  --shadow-btn:0 8px 22px rgba(124,183,173,.42);
  --shadow-card:0 2px 12px rgba(46,42,36,.05);
}

/* 2. BASE -------------------------------------------------- */
html,body{margin:0}
body{background:var(--cream);font-family:var(--sans);color:var(--ink)}
a{color:var(--green)}
*{box-sizing:border-box}
img{max-width:100%;display:block}
/* <figure> vem com margem lateral de 40px do navegador — sem reset, o box
   da citação (diagnóstico) ficava mais estreito que as outras seções */
figure{margin:0}

/* 3. LAYOUT ------------------------------------------------ */
.section{width:100%}
.bg-cream{background:var(--cream)}
.bg-paper{background:var(--paper)}
/* cantos superiores arredondados (topo de seção clara) */
.round-top{border-radius:52px 52px 0 0}

/* container padrão das seções */
.wrap{max-width:var(--maxw);margin:0 auto;padding:82px 64px}
.wrap--hero{padding:64px 64px 76px}
.wrap--tall{padding:82px 64px 96px}
.wrap--faq{max-width:900px;padding:82px 64px}
/* container que segura um painel escuro (menos padding lateral) */
.wrap--panel{padding:0 40px 44px}

/* 4. TIPOGRAFIA / TÍTULOS --------------------------------- */
/* olho (eyebrow): rótulo em caixa alta com ícone */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font:500 12px/1 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage);
}

/* bloco de título centralizado (olho + h2 + parágrafo) */
.head{text-align:center;max-width:660px;margin:0 auto 46px}
.head .eyebrow{justify-content:center}
.head h2{margin:14px 0 14px;font:500 42px/1.1 var(--serif);color:var(--ink)}
.head p{margin:0;font:400 16px/1.6 var(--sans);color:var(--muted)}

/* frase em serif itálico usada como fecho de seção */
.pull{
  margin:34px auto 0;max-width:660px;text-align:center;
  font:400 italic 21px/1.55 var(--serif);color:var(--ink);
}

/* saída da seção "A dor" pro diagnóstico: nomeia a pergunta que a leitora
   acabou de fazer e leva pra resposta */
.saida-dor{display:flex;justify-content:center;margin-top:34px}
.saida-dor a{display:inline-flex;align-items:center;gap:9px;text-align:center;
  font:500 14px/1.35 var(--sans);color:var(--green);text-decoration:none;
  border-bottom:1px solid rgba(62,113,104,.3);padding-bottom:4px}
.saida-dor svg{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.5;transition:transform .25s ease}
@media (hover:hover){
  .saida-dor a:hover{border-bottom-color:var(--green)}
  .saida-dor a:hover svg{transform:translateY(2px)}
}
@media (prefers-reduced-motion:reduce){.saida-dor svg{transition:none}}
@media(max-width:900px){.saida-dor{margin-top:28px}.saida-dor a{font-size:13.5px}}

/* 5. COMPONENTES ------------------------------------------ */
/* botão pílula (verde-água) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:18px 38px;background:var(--sage);color:#fff;
  border-radius:var(--radius-pill);font:500 15px/1 var(--sans);
  text-decoration:none;box-shadow:var(--shadow-btn);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),box-shadow .3s ease;
}
.btn--on-deep{box-shadow:0 10px 26px rgba(0,0,0,.2)}
/* hover: o botão sobe e a sombra cresce (vale pros três botões do site) */
@media (hover:hover){
  .btn:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(124,183,173,.55)}
  .btn--on-deep:hover{box-shadow:0 14px 32px rgba(0,0,0,.3)}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* selo/pílula branca (Turma Inaugural) */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px 9px 13px;background:#fff;border-radius:var(--radius-pill);
  font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);box-shadow:0 2px 12px rgba(46,42,36,.06);
}
/* ponto verde-água pulsando na pílula "Turma Inaugural" (sinal de "ao vivo") */
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex:none;
  animation:pill-ponto 1.5s ease-in-out infinite}
@keyframes pill-ponto{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.55);opacity:.4}
}
@media (prefers-reduced-motion:reduce){.pill-dot{animation:none}}

/* etiqueta de contagem (7 encontros) */
.tag{padding:5px 12px;background:#eef4f2;border-radius:var(--radius-pill);
  font:500 11px/1 var(--sans);color:var(--green)}

/* placeholder listrado (foto / print a substituir) */
.ph{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#e7ddcb,#e7ddcb 11px,#ddd0ba 11px,#ddd0ba 22px)}
.ph span{font:400 11px/1 var(--mono);color:var(--muted-3);letter-spacing:.08em}
.ph--print{background:repeating-linear-gradient(45deg,#eee6d8,#eee6d8 10px,#e5dac6 10px,#e5dac6 20px);border-radius:12px}
.ph--print span{font-size:10px;color:var(--muted-2);letter-spacing:.06em}

/* foto circular */
.photo{border-radius:50%;box-shadow:0 22px 55px rgba(46,42,36,.14)}
.photo--hero{width:390px;height:390px}
.photo--about{width:320px;height:320px;box-shadow:0 18px 46px rgba(46,42,36,.13)}

/* PROVA SOCIAL DO HERO — rostos de alunas (recortados dos próprios prints
   de depoimento) + a linha de números da trajetória da Ju */
.prova{display:flex;align-items:center;gap:14px;margin:0 0 26px}
.prova__faces{display:flex}
.prova__faces img{width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:2px solid var(--cream);margin-left:-12px;box-shadow:0 2px 8px rgba(46,42,36,.12)}
.prova__faces img:first-child{margin-left:0}
.prova__txt{font:400 13px/1.45 var(--sans);color:var(--muted)}
.prova__txt b{color:var(--ink-soft);font-weight:600}

/* botão principal + caminho secundário na mesma linha */
.acoes{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.acoes__sec{font:500 14px/1 var(--sans);color:var(--green);text-decoration:none;
  border-bottom:1px solid rgba(62,113,104,.35);padding-bottom:3px}
@media (hover:hover){.acoes__sec:hover{border-bottom-color:var(--green)}}
@media(max-width:900px){.acoes{gap:18px}}
@media(max-width:560px){
  /* botão ocupa a linha inteira e o link secundário fica centrado embaixo:
     em tela estreita os dois lado a lado ficariam apertados */
  .acoes{gap:16px;flex-direction:column;align-items:stretch}
  .acoes .btn{width:100%}
  .acoes__sec{align-self:center}
  /* a quebra fixa do texto da prova social atrapalha quando a linha é curta;
     no celular o texto flui sozinho */
  .prova__txt br{display:none}
  .prova{gap:12px}
  /* os rostos não encolhem e o texto pode quebrar: sem isso, quando a linha
     apertava, o texto montava por cima dos avatares em vez de descer */
  .prova__faces{flex:none}
  .prova__txt{min-width:0}
  /* o botão do método também ocupa a linha inteira no celular */
  .m3-cta{margin-top:30px}
  .m3-cta .btn{width:100%}
}

/* foto do hero em arco/portal, com fio verde-água deslocado atrás */
.photo--arco{
  width:380px;height:520px;border-radius:190px 190px 26px 26px;
  position:relative;z-index:1;
}
.hero__media--arco{position:relative}
.hero__media--arco::before{
  content:"";position:absolute;width:380px;height:520px;
  border:1px solid var(--sage);border-radius:190px 190px 26px 26px;
  transform:translate(18px,18px);opacity:.55;
}

/* anel decorativo posicionado de forma absoluta */
.ring{position:absolute}

/* 6. SEÇÕES ----------------------------------------------- */

/* --- HERO --- */
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin:26px 0 0;font:500 50px/1.1 var(--serif);color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--green)}
.hero__lead{margin:24px 0 30px;max-width:460px;font:400 17px/1.6 var(--sans);color:var(--muted)}
.hero__fine{margin:16px 0 0;font:400 12px/1.4 var(--sans);color:var(--muted-2)}
/* "12 encontros ao vivo + 9 meses de acompanhamento = 1 ano juntas" —
   equação horizontal; rótulo centrado embaixo do número pra caber a palavra
   inteira. Classes prefixadas (hero-eq__) pra não colidir com .num etc. */
.hero-eq{display:flex;align-items:flex-start;gap:16px;margin:0 0 34px}
.hero-eq__item{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-eq__item b{font:500 50px/1 var(--serif);color:var(--green)}
.hero-eq__item i{margin-top:6px;font:400 12px/1.3 var(--sans);font-style:normal;
  color:var(--muted);white-space:nowrap}
.hero-eq__op{margin-top:14px;font:400 28px/1 var(--serif);color:var(--sage)}
.hero-eq__res b{color:var(--ink)}
@media(max-width:560px){
  .hero-eq{gap:12px}
  .hero-eq__item b{font-size:38px}
  .hero-eq__op{margin-top:10px;font-size:22px}
  .hero-eq__item i{font-size:11px}
}
.hero__media{position:relative;display:flex;justify-content:center}

/* --- DOR --- */
.pain__grid{max-width:860px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pain__item{display:flex;align-items:stretch;padding:30px 32px;border-radius:20px;
  background:linear-gradient(180deg,#f7f2e9,#f3ece0);border:1px solid rgba(46,42,36,.055)}
/* número em serif, separado do texto por um filete vertical */
.pain__n{flex:none;display:flex;align-items:center;
  padding-right:22px;margin-right:22px;border-right:1px solid rgba(124,183,173,.45);
  font:400 32px/1 var(--serif);color:var(--sage)}
.pain__item p{margin:0;font:400 16.5px/1.55 var(--sans);color:var(--ink-soft)}
.pain .head{max-width:660px}
/* entrada em cascata dos 4 boxes (mesmo padrão do método e da transformação),
   quando a grade entra na tela (.is-in, via observer no rodapé) */
.pain__grid .pain__item{opacity:0;transform:translateY(22px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1)}
.pain__grid.is-in .pain__item{opacity:1;transform:none}
.pain__grid.is-in .pain__item:nth-child(1){transition-delay:.05s}
.pain__grid.is-in .pain__item:nth-child(2){transition-delay:.15s}
.pain__grid.is-in .pain__item:nth-child(3){transition-delay:.25s}
.pain__grid.is-in .pain__item:nth-child(4){transition-delay:.35s}
@media (prefers-reduced-motion:reduce){
  .pain__grid .pain__item{opacity:1!important;transform:none!important;transition:none!important}
}

/* --- 4 PASSOS --- */
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--paper);border-radius:28px;padding:44px 12px}
.steps__col{padding:0 32px;border-right:1px solid rgba(46,42,36,.1)}
.steps__col:last-child{border-right:0}
.steps__col .n{font:400 46px/1 var(--serif);color:var(--ink);margin-top:16px}
.steps__col h3{margin:12px 0 8px;font:500 17px/1.25 var(--sans);color:var(--ink)}
.steps__col p{margin:0;font:400 14px/1.55 var(--sans);color:var(--muted)}

/* passo 03: o diferencial do curso ganha selo e fundo próprio */
.steps__col{position:relative}
.steps__col--dif{background:#fbf8f2;border-radius:20px;
  padding-top:26px;padding-bottom:26px}
.selo{position:absolute;top:-14px;left:32px;padding:5px 12px;
  background:var(--sage);color:#fff;border-radius:var(--radius-pill);
  font:500 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(124,183,173,.4)}

/* chamada logo depois do método, pra quem já se convenceu aqui */
.m3-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px}
.m3-fine{margin:0;font:400 13px/1.4 var(--sans);color:var(--muted-2)}

/* ---- "O método": ícone que se desenha + reação ao mouse ----
   Cada ícone é traço puro. Com pathLength="1" no SVG, o contorno inteiro
   passa a valer 1 unidade — assim o mesmo dasharray serve pra círculo,
   linha e arco, e os quatro desenham no mesmo ritmo. Os pontos cheios
   (.fillx) acendem depois, e o número e o texto vêm atrás.
   Dispara uma vez quando a seção entra na tela (.is-in, via JS no rodapé). */
.steps__grid svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1s ease}
.steps__grid.is-in svg [pathLength]{stroke-dashoffset:0}
.steps__grid svg .fillx{opacity:0;transition:opacity .45s ease}
.steps__grid.is-in svg .fillx{opacity:1}
/* a cor entra na mesma declaração de transition: se ficasse numa regra
   separada mais abaixo, sobrescreveria o fade de entrada em vez de somar */
.steps__grid .n,.steps__grid h3,.steps__grid p{opacity:0;transform:translateY(12px);
  transition:opacity .55s ease,transform .55s ease,color .35s ease}
.steps__grid.is-in .n,.steps__grid.is-in h3,.steps__grid.is-in p{opacity:1;transform:none}
.steps__grid.is-in .steps__col:nth-of-type(1) svg [pathLength]{transition-delay:.1s}
.steps__grid.is-in .steps__col:nth-of-type(2) svg [pathLength]{transition-delay:.35s}
.steps__grid.is-in .steps__col:nth-of-type(3) svg [pathLength]{transition-delay:.6s}
.steps__grid.is-in .steps__col:nth-of-type(4) svg [pathLength]{transition-delay:.85s}
.steps__grid.is-in .steps__col:nth-of-type(1) .fillx{transition-delay:.75s}
.steps__grid.is-in .steps__col:nth-of-type(2) .fillx{transition-delay:1s}
.steps__grid.is-in .steps__col:nth-of-type(3) .fillx{transition-delay:1.25s}
.steps__grid.is-in .steps__col:nth-of-type(4) .fillx{transition-delay:1.5s}
.steps__grid.is-in .steps__col:nth-of-type(1) :is(.n,h3,p){transition-delay:.55s}
.steps__grid.is-in .steps__col:nth-of-type(2) :is(.n,h3,p){transition-delay:.8s}
.steps__grid.is-in .steps__col:nth-of-type(3) :is(.n,h3,p){transition-delay:1.05s}
.steps__grid.is-in .steps__col:nth-of-type(4) :is(.n,h3,p){transition-delay:1.3s}
/* reação ao mouse — só onde existe mouse de verdade, pra não travar
   estado de hover no toque do celular */
@media (hover:hover){
  .steps__col svg{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
  .steps__col:hover svg{transform:translateY(-5px)}
  .steps__col:hover .n,.steps__col:hover h3{color:var(--green)}
}
/* quem pediu menos movimento vê tudo estático e completo */
@media (prefers-reduced-motion:reduce){
  .steps__grid svg [pathLength]{stroke-dashoffset:0!important;transition:none!important}
  .steps__grid svg .fillx,.steps__grid .n,.steps__grid h3,.steps__grid p{
    opacity:1!important;transform:none!important;transition:none!important}
  .steps__col:hover svg{transform:none}
}

/* --- COMO FUNCIONA --- */
/* ficha técnica do curso: responde "cabe na minha vida?" antes de a pessoa
   ter que caçar isso no FAQ. Só contorno, pra não virar mais uma caixa
   branca logo acima dos cartões de módulo (que já são brancos). */
.ficha{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 34px}
.ficha span{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border-radius:var(--radius-pill);border:1px solid rgba(124,183,173,.55);
  font:500 13px/1 var(--sans);color:var(--green)}
.ficha svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--sage);stroke-width:1.5}
@media(max-width:900px){
  .ficha{gap:8px;margin:22px 0 28px}
  .ficha span{padding:8px 13px;font-size:12.5px}
}

.how__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* o cartão tem duas colunas: uma faixa estreita com "Módulo / 01" e o
   conteúdo. Assim o número organiza o cartão em vez de enfeitá-lo, e o
   nome do módulo ("As ferramentas") não precisa repetir a numeração. */
.how__card{display:grid;grid-template-columns:auto 1fr;padding:0;
  background:var(--paper);border-radius:var(--radius-card);
  border:1px solid rgba(46,42,36,.06);overflow:hidden}
.how-numcol{display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:6px;padding:34px 24px 0;
  border-right:1px solid rgba(46,42,36,.09)}
.how-rotulo{font:500 10px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)}
/* classe própria: ".num" já é o círculo verde-água de outra seção */
.how-num{font:400 38px/1 var(--serif);color:var(--sage);transition:color .3s ease}
.how-conteudo{padding:34px 38px 36px}
.how__card .top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.how__card .mod{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);transition:color .3s ease}
/* filete separando a linha de módulo do título */
.how-risco{height:1px;background:rgba(46,42,36,.09);margin:0 0 16px}
.how__card h3{margin:0 0 10px;font:500 24px/1.15 var(--serif);color:var(--ink)}
.how__card p{margin:0;font:400 15px/1.55 var(--sans);color:var(--muted)}

/* --- entrada em cascata + resposta ao mouse --- */
.how__grid .how__card{opacity:0;transform:translateY(22px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1),
             box-shadow .35s ease,border-color .35s ease}
.how__grid.is-in .how__card{opacity:1;transform:none}
.how__grid.is-in .how__card:nth-child(1){transition-delay:.05s}
.how__grid.is-in .how__card:nth-child(2){transition-delay:.15s}
.how__grid.is-in .how__card:nth-child(3){transition-delay:.25s}
.how__grid.is-in .how__card:nth-child(4){transition-delay:.35s}
@media (hover:hover){
  .how__card:hover{border-color:rgba(124,183,173,.55);
    box-shadow:0 14px 34px rgba(46,42,36,.10)}
  .how__card:hover .mod{color:var(--sage)}
  .how__card:hover .how-num{color:var(--green)}   /* já é sage: escurece */
  /* o translateY do hover só vale depois da entrada, pra não brigar com ela */
  .how__grid.is-in .how__card:hover{transform:translateY(-4px)}
}
.ementa{margin:24px auto 0;background:var(--paper);border-radius:var(--radius-card);
  padding:4px 38px;border:1px solid rgba(46,42,36,.08)}
.ementa>summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;
  align-items:center;gap:14px;font:500 15px/1 var(--sans);color:var(--ink)}
.ementa>summary .meta{margin-left:auto;font:500 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2)}
/* o "+" gira 45° e vira "×" quando a ementa abre */
.ementa>summary .plus{color:var(--sage);font-size:22px;display:inline-block;
  transition:transform .3s ease}
.ementa[open]>summary .plus{transform:rotate(45deg)}
.ementa__grid{padding:0 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.ementa__grid p{margin:0;font:400 14px/1.5 var(--sans);color:var(--muted);
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.ementa[open] .ementa__grid p{opacity:1;transform:none}
.ementa[open] .ementa__grid p:nth-child(1){transition-delay:.03s}
.ementa[open] .ementa__grid p:nth-child(2){transition-delay:.06s}
.ementa[open] .ementa__grid p:nth-child(3){transition-delay:.09s}
.ementa[open] .ementa__grid p:nth-child(4){transition-delay:.12s}
.ementa[open] .ementa__grid p:nth-child(5){transition-delay:.15s}
.ementa[open] .ementa__grid p:nth-child(6){transition-delay:.18s}
.ementa[open] .ementa__grid p:nth-child(7){transition-delay:.21s}
.ementa[open] .ementa__grid p:nth-child(8){transition-delay:.24s}
.ementa[open] .ementa__grid p:nth-child(9){transition-delay:.27s}
.ementa[open] .ementa__grid p:nth-child(10){transition-delay:.30s}
.ementa[open] .ementa__grid p:nth-child(11){transition-delay:.33s}
.ementa[open] .ementa__grid p:nth-child(12){transition-delay:.36s}
.ementa[open] .ementa__grid p:nth-child(13){transition-delay:.39s}
.ementa__grid p b{color:var(--green);font-weight:500}
/* quem pediu menos movimento vê tudo estático e completo */
@media (prefers-reduced-motion:reduce){
  .how__grid .how__card,.ementa__grid p{
    opacity:1!important;transform:none!important;transition:none!important}
  .ementa[open]>summary .plus{transition:none}
}
@media(max-width:700px){
  /* a coluna do módulo vira faixa horizontal no topo do cartão */
  .how__card{grid-template-columns:1fr}
  .how-numcol{flex-direction:row;align-items:baseline;gap:12px;
    justify-content:flex-start;padding:22px 26px 16px;
    border-right:0;border-bottom:1px solid rgba(46,42,36,.09)}
  .how-num{font-size:30px}
  .how-conteudo{padding:24px 26px 30px}
}

/* --- A TRANSFORMAÇÃO --- */
/* A transformação: as quatro conquistas à esquerda e a foto vertical à
   direita, com o fio verde-água deslocado (mesmo detalhe do hero) */
/* painel branco, igual às outras seções de texto (dor, conheça a Ju) */
.tfoto{padding:var(--box-gap) var(--gutter)}
.tfoto .wrap{max-width:var(--col);margin:0 auto;background:var(--paper);
  border-radius:var(--box-radius);padding:var(--box-pad);box-shadow:var(--box-shadow)}
/* foto à direita: "Conheça a Ju", logo adiante, já tem a foto à esquerda */
.tfoto__grid{display:grid;grid-template-columns:1.22fr .78fr;gap:64px;align-items:center}
.tfoto__media{position:relative;order:2}
.tfoto__img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 70%;
  border-radius:24px;position:relative;z-index:1;box-shadow:0 22px 55px rgba(46,42,36,.14)}
/* o fio deslocado acompanha o lado da foto: sai pra esquerda */
.tfoto__media::before{content:"";position:absolute;inset:0;border:1px solid var(--sage);
  border-radius:24px;transform:translate(-18px,18px);opacity:.55}
.tfoto .head{margin-bottom:34px}
.tfoto .transform__list{max-width:none;margin:0}
@media(min-width:701px){.tfoto .transform__row p{font-size:19px}}
@media(max-width:900px){
  /* empilha: a foto volta a vir primeiro e o texto embaixo */
  .tfoto__grid{grid-template-columns:1fr;gap:38px}
  .tfoto__media{order:0}
  /* deitada em 4:5 pra não ocupar a tela inteira de altura */
  .tfoto__img{aspect-ratio:4/5}
  /* o fio deslocado encolhe junto, senão estoura a borda da tela */
  .tfoto__media::before{transform:translate(10px,10px)}
}

.transform__list{max-width:820px;margin:0 auto;display:flex;flex-direction:column}
.transform__row{display:flex;gap:22px;align-items:center;padding:22px 0;
  border-top:1px solid rgba(46,42,36,.1)}
.transform__row:last-child{border-bottom:1px solid rgba(46,42,36,.1)}
.transform__row p{margin:0;font:400 21px/1.5 var(--serif);color:var(--ink)}
/* o check num círculo verde-água claro; a cor vem do CSS, não do SVG */
.transform__ico{flex:none;width:38px;height:38px;border-radius:50%;background:#eef4f2;
  display:flex;align-items:center;justify-content:center;transition:background .3s ease}
.transform__ico svg{width:19px;height:19px;stroke:var(--green);transition:stroke .3s ease}

/* --- entrada: as linhas deslizam da esquerda, o check se desenha --- */
.transform__list .transform__row{opacity:0;transform:translateX(-18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1)}
.transform__list.is-in .transform__row{opacity:1;transform:none}
.transform__list.is-in .transform__row:nth-child(1){transition-delay:.05s}
.transform__list.is-in .transform__row:nth-child(2){transition-delay:.18s}
.transform__list.is-in .transform__row:nth-child(3){transition-delay:.31s}
.transform__list.is-in .transform__row:nth-child(4){transition-delay:.44s}
.transform__ico svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .55s ease}
.transform__list.is-in .transform__ico svg [pathLength]{stroke-dashoffset:0}
.transform__list.is-in .transform__row:nth-child(1) svg [pathLength]{transition-delay:.20s}
.transform__list.is-in .transform__row:nth-child(2) svg [pathLength]{transition-delay:.33s}
.transform__list.is-in .transform__row:nth-child(3) svg [pathLength]{transition-delay:.46s}
.transform__list.is-in .transform__row:nth-child(4) svg [pathLength]{transition-delay:.59s}
@media (hover:hover){
  /* o avanço no hover só vale depois da entrada, pra não brigar com ela */
  .transform__list.is-in .transform__row:hover{transform:translateX(6px)}
  .transform__row:hover .transform__ico{background:var(--sage)}
  .transform__row:hover .transform__ico svg{stroke:#fff}
}
@media (prefers-reduced-motion:reduce){
  .transform__list .transform__row{opacity:1!important;transform:none!important;
    transition:none!important}
  .transform__ico svg [pathLength]{stroke-dashoffset:0!important;transition:none!important}
}
@media(max-width:700px){
  .transform__row{gap:16px}
  .transform__row p{font-size:18px}
}

/* --- PROVA SOCIAL --- */
.social__cols{columns:3;column-gap:20px}
.social__card{break-inside:avoid;margin-bottom:20px;background:var(--paper);
  border-radius:20px;padding:16px;box-shadow:var(--shadow-card)}
.social__card img{display:block;width:100%;height:auto;border-radius:12px}

/* --- CONHEÇA A JU --- */
.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.about__media{position:relative;display:flex;justify-content:center}
.about h2{margin:14px 0 22px;font:500 40px/1.12 var(--serif);color:var(--ink)}
/* credenciais públicas da Ju: obra verificável, não autoelogio */
.cred{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 20px}
.cred a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border-radius:var(--radius-pill);border:1px solid rgba(124,183,173,.5);
  font:500 12.5px/1 var(--sans);color:var(--green);text-decoration:none;
  transition:background .25s ease}
.cred svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--sage);stroke-width:1.6}
@media (hover:hover){.cred a:hover{background:#eef4f2}}

.about__bio{margin:0;max-width:560px;font:400 16px/1.7 var(--sans);color:var(--muted)}
.stats{display:flex;gap:44px;margin-top:34px}
.stats>div{padding-left:44px;border-left:1px solid rgba(46,42,36,.14)}
.stats>div:first-child{padding-left:0;border-left:0}
.stats .num-big{font:500 40px/1 var(--serif);color:var(--green)}
.stats .lbl{margin-top:6px;font:400 13px/1.3 var(--sans);color:var(--muted)}

/* --- FAQ --- */
.faq__list{display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--paper);border-radius:18px;padding:2px 28px}
.faq__item>summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;
  align-items:center;justify-content:space-between;font:500 17px/1.3 var(--sans);color:var(--ink)}
.faq__item>summary .plus{color:var(--sage);font-size:22px;flex:none;margin-left:16px}
.faq__item p{margin:0;padding:0 0 24px;font:400 15px/1.6 var(--sans);color:var(--muted)}

/* 7. RESPONSIVO ------------------------------------------- */
@media (max-width:900px){
  .wrap,.wrap--hero,.wrap--tall,.wrap--faq{padding-left:24px;padding-right:24px}
  .wrap--panel{padding-left:16px;padding-right:16px}
  .hero__grid,.how__grid,.about__grid,.ementa__grid{grid-template-columns:1fr}
  .steps__grid{grid-template-columns:1fr 1fr}
  .steps__col{border-right:0;padding:16px 24px}
  /* flutuando acima da coluna (como no desktop) o selo invadiria o passo de
     cima, e no fluxo empurrava o ícone do passo 3 pra baixo. Aqui ele vira um
     badge no canto superior direito do box: o ícone volta pro topo, alinhado
     com os outros três, e o selo fica bem posicionado sem empurrar nada. */
  .selo{top:16px;left:auto;right:16px;margin:0;white-space:nowrap}
  .steps__col--dif{padding-top:16px;padding-bottom:20px}
  .social__cols{columns:2}
  .hero h1{font-size:44px}
  .head h2,.pain .head h2{font-size:34px}
  .hero__media,.about__media{margin-top:32px}
}
@media (max-width:560px){
  .steps__grid{grid-template-columns:1fr}
  .pain__grid{grid-template-columns:1fr}
  .social__cols{columns:1}
  /* a foto escala com a tela e cresce bem (cap em 340px), o anel acompanha */
  .photo--hero{width:min(340px,80vw);height:min(340px,80vw)}
  /* o arco encolhe junto e o fio deslocado acompanha o mesmo tamanho */
  .photo--arco,.hero__media--arco::before{
    width:min(320px,78vw);height:min(440px,108vw);
    border-radius:160px 160px 22px 22px;
  }
  .hero h1{font-size:38px}
}

/* =========================================================
   8. DIREÇÃO CREME (atual)
      Site inteiro no creme; caixas (painéis brancos / escuros)
      só onde há necessidade. Alinhamento em coluna única:
      TODOS os blocos começam/terminam na mesma linha lateral.
   ========================================================= */
:root{
  --gutter:64px;                /* margem lateral única de todos os blocos */
  --col:1052px;                 /* coluna de conteúdo = 1180 − 2×64 (= largura do Hero) */
  --box-pad:64px 60px;          /* preenchimento interno padrão dos painéis brancos */
  --box-radius:36px;            /* raio de canto padrão */
  --box-shadow:0 14px 40px rgba(46,42,36,.07);
  --box-gap:56px;               /* respiro de creme acima/abaixo dos painéis */
}

/* tudo creme (os cartões seguem brancos, pois usam var(--paper)) */
.bg-paper{background:var(--cream)}
.round-top{border-radius:0}

/* PAINÉIS BRANCOS — seções de texto/história (Dor, Transformação,
   Conheça a Ju). Largura = coluna de conteúdo → alinham com o Hero e entre si. */
.pain,.transform,.about{padding:var(--box-gap) var(--gutter)}
.pain .wrap,.transform .wrap,.about .wrap{
  max-width:var(--col);margin:0 auto;
  background:var(--paper);border-radius:var(--box-radius);padding:var(--box-pad);
  box-shadow:var(--box-shadow)}
.pain__item{box-shadow:none}  /* pontos em creme dentro do painel branco */

/* PAINÉIS ESCUROS (acompanhamento, CTA) — mesma coluna, mesma borda lateral */
.wrap--panel{max-width:1180px;margin:0 auto;padding:var(--box-gap) var(--gutter)}

/* ---- Para quem é: painel escuro (checkpoint) ---- */
.pqe-a{background:var(--cream)}
.pqe-a .wrap{max-width:1180px;margin:0 auto;padding:var(--box-gap) var(--gutter)}
.pqeA-panel{position:relative;background:var(--green-deep);border-radius:36px;padding:64px 60px;overflow:hidden}
.pqeA-ring{position:absolute}
.pqeA-head{position:relative;text-align:center;max-width:640px;margin:0 auto 46px}
.pqeA-head .eyebrow{color:var(--sage);justify-content:center;display:inline-flex}
.pqeA-head h2{margin:14px 0 12px;font:500 40px/1.12 var(--serif);color:var(--on-deep)}
.pqeA-head p{margin:0;font:400 16px/1.6 var(--sans);color:var(--on-deep-soft)}
.pqeA-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* cada lado é um cartão com contorno próprio: o "sim" segue no verde,
   o "não" sai pro creme — o contraste separa os dois territórios */
.pqeA-col{padding:0;border-radius:24px;overflow:hidden;border:1px solid transparent}
.pqeA-col--yes{background:rgba(255,255,255,.09);border-color:rgba(124,183,173,.45)}
.pqeA-col--no{background:#efe9dd;border-color:rgba(46,42,36,.10)}
.pqeA-corpo{padding:32px 34px 34px}
/* o ícone do título tem a mesma largura e o mesmo respiro dos ícones da
   lista (18px + 13px), então o texto do título e o dos itens caem no
   mesmo eixo vertical */
.pqeA-col h3{display:grid;grid-template-columns:18px 1fr;gap:13px;align-items:center;
  margin:0 0 20px;font:500 24px/1.2 var(--serif)}
.pqeA-col h3 svg{width:18px;height:18px}
.pqeA-col--yes h3{color:#fff}
.pqeA-col--no h3{color:var(--ink)}
/* filete que atravessa o cartão inteiro, separando título e lista */
.pqeA-regua{height:1px;margin:0 0 24px}
.pqeA-col--yes .pqeA-regua{background:rgba(124,183,173,.55)}
.pqeA-col--no .pqeA-regua{background:rgba(46,42,36,.15)}
/* quem não se encaixa não fica em beco sem saída: vai pro app de práticas */
.pqeA-saida{margin-top:22px;padding-top:20px;border-top:1px solid rgba(46,42,36,.12);
  font:400 14px/1.6 var(--sans);color:var(--muted)}
.pqeA-saida a{color:var(--green);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(62,113,104,.35)}
@media (hover:hover){.pqeA-saida a:hover{border-bottom-color:var(--green)}}

/* convite pro WhatsApp embaixo do painel, com o rosto de quem responde */
.pqeA-duv-fora{display:flex;align-items:center;justify-content:center;gap:14px;
  max-width:700px;margin:28px auto 0}
.pqeA-duv-fora img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 2px 10px rgba(46,42,36,.14)}
.pqeA-duv-fora p{margin:0;max-width:520px;text-align:left;
  font:400 14.5px/1.6 var(--sans);color:var(--muted)}
.pqeA-duv-fora a{color:var(--green);font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(62,113,104,.35)}
@media (hover:hover){.pqeA-duv-fora a:hover{border-bottom-color:var(--green)}}
@media(max-width:900px){
  /* no celular a foto sobe e o texto centraliza embaixo */
  .pqeA-duv-fora{flex-direction:column;gap:12px}
  .pqeA-duv-fora p{text-align:center}
}

.pqeA-list{display:flex;flex-direction:column;gap:17px}
.pqeA-list>div{display:flex;gap:13px}
.pqeA-list svg{flex:none;margin-top:3px}
.pqeA-list p{margin:0;font:400 16px/1.5 var(--sans)}
.pqeA-col--yes .pqeA-list p{color:#e7eeec}
.pqeA-col--no .pqeA-list p{color:var(--muted)}
/* a cor dos ícones vem daqui, não do atributo stroke= no SVG:
   o mesmo desenho serve pro cartão escuro e pro claro */
.pqeA-col--yes h3 svg,.pqeA-col--yes .pqeA-list svg{stroke:var(--sage)}
.pqeA-col--no h3 svg,.pqeA-col--no .pqeA-list svg{stroke:#a2957f}

/* --- entrada: cabeçalho, cartões e itens em cascata --- */
.pqeA-panel .pqeA-head{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1)}
.pqeA-panel.is-in .pqeA-head{opacity:1;transform:none}
.pqeA-panel .pqeA-col{opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1)}
.pqeA-panel.is-in .pqeA-col{opacity:1;transform:none}
.pqeA-panel.is-in .pqeA-col--yes{transition-delay:.20s}
.pqeA-panel.is-in .pqeA-col--no{transition-delay:.34s}
.pqeA-regua{transform:scaleX(0);transform-origin:left center;
  transition:transform .8s cubic-bezier(.4,0,.2,1) .35s}
.pqeA-panel.is-in .pqeA-regua{transform:scaleX(1)}
.pqeA-list>div{opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease}
.pqeA-panel.is-in .pqeA-list>div{opacity:1;transform:none}
.pqeA-panel.is-in .pqeA-col--yes .pqeA-list>div:nth-child(1){transition-delay:.46s}
.pqeA-panel.is-in .pqeA-col--yes .pqeA-list>div:nth-child(2){transition-delay:.56s}
.pqeA-panel.is-in .pqeA-col--yes .pqeA-list>div:nth-child(3){transition-delay:.66s}
.pqeA-panel.is-in .pqeA-col--yes .pqeA-list>div:nth-child(4){transition-delay:.76s}
.pqeA-panel.is-in .pqeA-col--no .pqeA-list>div:nth-child(1){transition-delay:.60s}
.pqeA-panel.is-in .pqeA-col--no .pqeA-list>div:nth-child(2){transition-delay:.70s}
.pqeA-panel.is-in .pqeA-col--no .pqeA-list>div:nth-child(3){transition-delay:.80s}
/* o "check" se desenha, como os ícones do método */
.pqeA-list svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .5s ease}
.pqeA-panel.is-in .pqeA-list svg [pathLength]{stroke-dashoffset:0}
.pqeA-panel.is-in .pqeA-col--yes .pqeA-list>div:nth-child(1) svg [pathLength]{transition-delay:.60s}
.pqeA-panel.is-in .pqeA-col--yes .pqeA-list>div:nth-child(2) svg [pathLength]{transition-delay:.70s}
.pqeA-panel.is-in .pqeA-col--yes .pqeA-list>div:nth-child(3) svg [pathLength]{transition-delay:.80s}
.pqeA-panel.is-in .pqeA-col--yes .pqeA-list>div:nth-child(4) svg [pathLength]{transition-delay:.90s}
@media (prefers-reduced-motion:reduce){
  .pqeA-panel .pqeA-head,.pqeA-panel .pqeA-col,.pqeA-regua,.pqeA-list>div{
    opacity:1!important;transform:none!important;transition:none!important}
  .pqeA-list svg [pathLength]{stroke-dashoffset:0!important;transition:none!important}
}

@media (max-width:900px){
  .pqeA-grid{grid-template-columns:1fr}
  /* os cartões já têm contorno e respiro próprios — empilham direto */
  .pqeA-corpo{padding:28px 24px 30px}
}

/* ---- Acompanhamento: trilha do ano (horizontal no desktop, vertical no mobile) ---- */
.ac1{background:var(--cream)}
.ac1-panel{position:relative;background:var(--green-deep);border-radius:40px;padding:70px 64px;overflow:hidden;color:var(--on-deep)}
.ac1-ring{position:absolute}
.ac1-head{position:relative;max-width:640px}
.ac1-head .eyebrow{color:var(--sage)}
.ac1-head h2{margin:14px 0 20px;font:500 40px/1.12 var(--serif);color:var(--on-deep)}
.ac1-head p{margin:0;font:400 16px/1.7 var(--sans);color:var(--on-deep-soft)}
.ac1-trail{position:relative;margin-top:56px}
.ac1-heads{display:flex;margin-bottom:20px}
.ac1-h--a{flex:3}.ac1-h--b{flex:9}
.ac1-h .dur{font:500 30px/1 var(--serif);color:var(--sage)}
.ac1-h .name{margin-top:9px;font:400 15px/1.35 var(--sans);color:var(--on-deep-soft)}
.ac1-track{position:relative;display:flex;height:10px;background:rgba(124,183,173,.16);border-radius:100px}
.ac1-seg-a{flex:3;background:var(--sage);border-radius:100px 0 0 100px}
.ac1-seg-b{flex:9;background:rgba(124,183,173,.4);border-radius:0 100px 100px 0}
.ac1-node{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 4px var(--green-deep);z-index:2}
.ac1-node--1{left:0}.ac1-node--2{left:25%}.ac1-node--3{left:100%}
.ac1-sum{margin-top:30px;display:flex;align-items:center;gap:14px}
.ac1-sum .line{flex:1;height:1px;background:rgba(124,183,173,.4)}
.ac1-sum span{font:500 13px/1 var(--sans);letter-spacing:.06em;color:var(--on-deep)}
.ac1-vert{display:none}
.ac1-vitem{position:relative;display:flex;gap:16px;padding-bottom:28px}
.ac1-vitem::before{content:"";position:absolute;left:7px;top:22px;bottom:0;width:2px;background:rgba(124,183,173,.4)}
.ac1-vitem:last-of-type::before{display:none}
.ac1-vdot{flex:none;width:16px;height:16px;border-radius:50%;background:var(--sage);margin-top:4px;box-shadow:0 0 0 4px rgba(124,183,173,.15)}
.ac1-vitem .dur{font:500 28px/1 var(--serif);color:var(--sage)}
.ac1-vitem .name{margin-top:8px;font:400 15px/1.35 var(--sans);color:var(--on-deep-soft)}
.ac1-vsum{font:500 13px/1.4 var(--sans);letter-spacing:.04em;color:var(--on-deep)}
@media(max-width:900px){
  .ac1-panel{padding:48px 30px}
  .ac1-head h2{font-size:31px}
  .ac1-horiz{display:none}
  .ac1-vert{display:block}
}

/* ---- "O acompanhamento": a trilha se preenche na ordem do tempo ----
   Primeiro os 3 meses de curso, depois os 9 de acompanhamento, com os nós
   estourando conforme o preenchimento chega neles. No fim, um brilho passa
   a percorrer só o trecho de 9 meses, em loop: o curso acaba, o
   acompanhamento continua.
   ATENÇÃO: a classe .is-in entra no .ac1-panel — todos os seletores abaixo
   precisam partir dele, não da <section>. */
.ac1-panel .ac1-head{opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1)}
.ac1-panel.is-in .ac1-head{opacity:1;transform:none}
/* rótulos de cada trecho, entrando junto com o segmento a que pertencem */
.ac1-panel .ac1-h{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease}
.ac1-panel.is-in .ac1-h{opacity:1;transform:none}
.ac1-panel.is-in .ac1-h--a{transition-delay:.30s}
.ac1-panel.is-in .ac1-h--b{transition-delay:1.05s}
/* os dois segmentos crescem da esquerda; o fundo cinza da trilha fica à
   mostra enquanto isso, porque transform não altera o espaço ocupado */
.ac1-panel .ac1-seg-a,.ac1-panel .ac1-seg-b{transform:scaleX(0);transform-origin:left center}
.ac1-panel .ac1-seg-a{transition:transform .7s cubic-bezier(.4,0,.2,1) .30s}
.ac1-panel .ac1-seg-b{transition:transform 1.1s cubic-bezier(.4,0,.2,1) 1.05s}
.ac1-panel.is-in .ac1-seg-a,.ac1-panel.is-in .ac1-seg-b{transform:scaleX(1)}
.ac1-panel .ac1-node{transform:translate(-50%,-50%) scale(0);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.ac1-panel.is-in .ac1-node{transform:translate(-50%,-50%) scale(1)}
.ac1-panel.is-in .ac1-node--1{transition-delay:.30s}
.ac1-panel.is-in .ac1-node--2{transition-delay:.95s}
.ac1-panel.is-in .ac1-node--3{transition-delay:2.05s}
/* fecho: as duas linhas se abrem do centro pra fora */
.ac1-panel .ac1-sum span{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease}
.ac1-panel .ac1-sum .line{transform:scaleX(0);transition:transform .7s cubic-bezier(.4,0,.2,1)}
.ac1-panel .ac1-sum .line:first-child{transform-origin:right center}
.ac1-panel .ac1-sum .line:last-child{transform-origin:left center}
.ac1-panel.is-in .ac1-sum span{opacity:1;transform:none;transition-delay:2.25s}
.ac1-panel.is-in .ac1-sum .line{transform:scaleX(1);transition-delay:2.35s}
/* o brilho contínuo, só no trecho de 9 meses */
.ac1-seg-b{position:relative;overflow:hidden}
.ac1-brilho{position:absolute;top:0;left:0;width:34%;height:100%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent)}
.ac1-panel.is-in .ac1-brilho{opacity:1;transition:opacity .4s ease 2.3s;
  animation:ac1-passa 3.2s cubic-bezier(.5,0,.5,1) 2.3s infinite}
@keyframes ac1-passa{0%{transform:translateX(-110%)}
  62%{transform:translateX(300%)}100%{transform:translateX(300%)}}
/* versão vertical (mobile): itens e fecho em cascata */
.ac1-panel .ac1-vitem,.ac1-panel .ac1-vsum{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease}
.ac1-panel.is-in .ac1-vitem,.ac1-panel.is-in .ac1-vsum{opacity:1;transform:none}
.ac1-panel.is-in .ac1-vitem:nth-of-type(1){transition-delay:.25s}
.ac1-panel.is-in .ac1-vitem:nth-of-type(2){transition-delay:.55s}
.ac1-panel.is-in .ac1-vsum{transition-delay:.85s}
/* quem pediu menos movimento vê a trilha cheia e parada */
@media (prefers-reduced-motion:reduce){
  .ac1-panel .ac1-head,.ac1-panel .ac1-h,.ac1-panel .ac1-seg-a,.ac1-panel .ac1-seg-b,
  .ac1-panel .ac1-sum span,.ac1-panel .ac1-sum .line,
  .ac1-panel .ac1-vitem,.ac1-panel .ac1-vsum{
    opacity:1!important;transform:none!important;transition:none!important}
  .ac1-panel .ac1-node{transform:translate(-50%,-50%)!important;transition:none!important}
  .ac1-brilho{display:none}
}

/* ---- Diagnóstico + Virada: dois tempos (claro → escuro) + linha do tempo ---- */
.dvB{background:var(--cream)}
.dvB .wrap{max-width:1180px;margin:0 auto;padding:82px 64px}
.dvB-diag{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;max-width:1052px;margin:0 auto 46px}
.dvB-diag .eyebrow{color:var(--sage)}
.dvB-diag h2{margin:14px 0 18px;font:500 38px/1.14 var(--serif);color:var(--ink)}
.dvB-diag p{margin:0 0 14px;font:400 16px/1.7 var(--sans);color:var(--muted)}
.dvB-diag p.soft{margin-bottom:0;color:var(--muted-2)}
.dvB-quote{background:var(--paper);border-radius:26px;padding:40px 42px;border:1px solid rgba(124,183,173,.3);box-shadow:0 10px 30px rgba(46,42,36,.05)}
.dvB-quote .mark{display:block;font:500 60px/.4 var(--serif);color:var(--sage);margin:8px 0 14px}
.dvB-quote blockquote{margin:0;font:500 italic 23px/1.44 var(--serif);color:var(--ink)}
.dvB-quote cite{display:block;margin-top:18px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sage);font-style:normal}
/* assinatura da citação: rosto + nome, no lugar do antigo <cite> */
.assina{display:flex;align-items:center;gap:12px;margin-top:22px}
.assina img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 2px 8px rgba(46,42,36,.12)}
.assina__nome{font:500 13px/1.3 var(--sans);color:var(--ink-soft)}
.assina__papel{font:400 12px/1.3 var(--sans);color:var(--muted-2)}
/* saída do painel escuro da virada pro método */
.saida{position:relative;display:inline-flex;align-items:center;gap:9px;margin-top:44px;
  font:500 14px/1 var(--sans);color:var(--sage);text-decoration:none;
  border-bottom:1px solid rgba(124,183,173,.4);padding-bottom:4px}
.saida svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;
  transition:transform .25s ease}
@media (hover:hover){
  .saida:hover{border-bottom-color:var(--sage)}
  .saida:hover svg{transform:translateY(2px)}
}
@media (prefers-reduced-motion:reduce){.saida svg{transition:none}}
@media(max-width:900px){
  .saida{margin-top:32px;font-size:13.5px}
  /* no celular a citação é uma coluna estreita: a assinatura respira menos */
  .assina{margin-top:18px}
}
.dvB-arrow{display:flex;justify-content:center;color:var(--sage);margin:14px 0 50px}
.dvB-shift{position:relative;background:var(--green-deep);border-radius:40px;padding:66px 58px;overflow:hidden;color:var(--on-deep);text-align:center;max-width:1052px;margin:0 auto}
.dvB-ring{position:absolute}
.dvB-shift .eyebrow{color:var(--sage);justify-content:center;display:inline-flex;position:relative}
.dvB-q{position:relative;margin:16px auto 0;max-width:760px;font:400 42px/1.16 var(--serif);color:var(--sage)}
.dvB-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:58px auto 0;max-width:820px}
.dvB-steps::before{content:"";position:absolute;top:19px;left:16%;right:16%;height:1px;background:rgba(124,183,173,.45)}
.dvB-step{text-align:center;padding:0 20px}
.dvB-step .dot{width:38px;height:38px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font:500 15px/1 var(--sans);margin:0 auto 20px;position:relative;z-index:1;box-shadow:0 0 0 7px var(--green-deep)}
.dvB-step--accent .dot{background:#fff;color:var(--green-deep)}
.dvB-step h4{margin:0 0 7px;font:400 20px/1.2 var(--serif);color:var(--on-deep)}
.dvB-step--accent h4{color:var(--sage)}
.dvB-step p{margin:0;font:400 14px/1.55 var(--sans);color:var(--on-deep-soft)}
@media(max-width:900px){.dvB .wrap{padding:60px 24px}.dvB-diag{grid-template-columns:1fr;gap:30px}.dvB-shift{padding:46px 28px}.dvB-q{font-size:31px}.dvB-steps{grid-template-columns:1fr;gap:32px;max-width:none}.dvB-steps::before{display:none}}

/* ---- "A virada": animação da linha do tempo ----
   Sequência: a linha se desenha da esquerda pra direita, os nós acendem
   em cadeia (1 → 2 → 3) e o texto sobe atrás. Aos 2,1s, quando a entrada
   termina, um brilho começa a percorrer a linha em loop.
   Dispara uma vez, quando a seção entra na tela (.is-in, via JS no rodapé). */
.dvB-shift .dvB-steps::before{transform:scaleX(0);transform-origin:left center;
  transition:transform 1.5s cubic-bezier(.4,0,.2,1)}
.dvB-shift.is-in .dvB-steps::before{transform:scaleX(1)}
.dvB-shift .dvB-step .dot{transform:scale(.4);opacity:0;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
.dvB-shift .dvB-step h4,.dvB-shift .dvB-step p{opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease}
.dvB-shift.is-in .dvB-step .dot{transform:scale(1);opacity:1}
.dvB-shift.is-in .dvB-step h4,.dvB-shift.is-in .dvB-step p{opacity:1;transform:none}
/* nth-of-type, não nth-child: o <span class="dvB-spark"> também é filho
   de .dvB-steps e desalinharia a contagem dos passos. */
.dvB-shift.is-in .dvB-step:nth-of-type(1) .dot{transition-delay:.15s}
.dvB-shift.is-in .dvB-step:nth-of-type(2) .dot{transition-delay:.75s}
.dvB-shift.is-in .dvB-step:nth-of-type(3) .dot{transition-delay:1.35s}
.dvB-shift.is-in .dvB-step:nth-of-type(1) h4,.dvB-shift.is-in .dvB-step:nth-of-type(1) p{transition-delay:.3s}
.dvB-shift.is-in .dvB-step:nth-of-type(2) h4,.dvB-shift.is-in .dvB-step:nth-of-type(2) p{transition-delay:.9s}
.dvB-shift.is-in .dvB-step:nth-of-type(3) h4,.dvB-shift.is-in .dvB-step:nth-of-type(3) p{transition-delay:1.5s}
/* o brilho: existe desde o início, mas invisível e parado até a linha existir */
.dvB-spark{position:absolute;top:17px;left:16%;width:68%;height:5px;
  overflow:hidden;pointer-events:none;z-index:0;opacity:0}
.dvB-spark i{position:absolute;top:0;left:0;width:38%;height:100%;
  background:radial-gradient(ellipse 50% 100% at 50% 50%,rgba(255,255,255,.95),rgba(255,255,255,.35) 45%,transparent 72%);
  filter:blur(.5px);transform:translateX(-110%)}
.dvB-shift.is-in .dvB-spark{opacity:1;transition:opacity .3s ease 2.1s}
.dvB-shift.is-in .dvB-spark i{animation:dvB-travel 3.4s cubic-bezier(.5,0,.5,1) 2.1s infinite}
@keyframes dvB-travel{0%{transform:translateX(-110%)}60%{transform:translateX(290%)}100%{transform:translateX(290%)}}
/* no mobile a linha não existe (os passos viram coluna) — só a entrada fica */
@media(max-width:900px){.dvB-spark{display:none}}
/* quem pediu menos movimento vê tudo estático e completo */
@media (prefers-reduced-motion:reduce){
  .dvB-shift .dvB-steps::before,.dvB-shift .dvB-step .dot,
  .dvB-shift .dvB-step h4,.dvB-shift .dvB-step p{
    transform:none!important;opacity:1!important;transition:none!important}
  .dvB-spark{display:none}
}

/* ---- CTA final: full-bleed, mandala de fundo bem transparente (sem ponto central) ---- */
.ctaf{position:relative;background:var(--green-deep);overflow:hidden;color:var(--on-deep)}
.ctaf-mand{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:860px;height:860px;max-width:172vw;pointer-events:none}
.ctaf-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:134px 24px 140px;text-align:center}
.ctaf-lead{margin:0 auto 30px;max-width:460px;font:400 16px/1.65 var(--sans);color:var(--on-deep-soft)}
.ctaf-big{margin:0 auto 42px;max-width:640px;font:500 54px/1.16 var(--serif);color:var(--on-deep)}
.ctaf-big em{font-style:italic;color:var(--sage)}
.ctaf-fine{margin-top:20px;font:400 14px/1.4 var(--sans);color:var(--on-deep-note)}
.ctaf-fine a{color:var(--on-deep);text-decoration:underline}
@media(max-width:900px){.ctaf-inner{padding:92px 24px}.ctaf-big{font-size:34px}.ctaf-mand{width:620px;height:620px}}

/* ---- CTA final: ondas concêntricas na mandala de fundo ----
   Cada anel nasce pequeno no centro, cresce até passar da borda e some,
   um depois do outro, em loop contínuo. Roda sozinho, sem JS.
   transform-origin no centro do viewBox é obrigatório: em SVG o padrão é
   o canto superior esquerdo, e sem isso os anéis escorregariam pra fora
   em vez de crescer a partir do meio. */
.ctaf-mand circle{
  transform-box:view-box;transform-origin:60px 60px;
  animation:ctaf-onda 7s cubic-bezier(.25,.6,.4,1) infinite;
}
@keyframes ctaf-onda{
  0%{transform:scale(.12);opacity:0}
  12%{opacity:.2}
  70%{opacity:.05}
  100%{transform:scale(1.9);opacity:0}
}
.ctaf-mand circle:nth-child(1){animation-delay:0s}
.ctaf-mand circle:nth-child(2){animation-delay:1.16s}
.ctaf-mand circle:nth-child(3){animation-delay:2.32s}
.ctaf-mand circle:nth-child(4){animation-delay:3.48s}
.ctaf-mand circle:nth-child(5){animation-delay:4.64s}
.ctaf-mand circle:nth-child(6){animation-delay:5.80s}
/* sem movimento: os anéis voltam a ser a mandala estática, com as
   opacidades que já vêm no atributo de cada círculo */
@media (prefers-reduced-motion:reduce){
  .ctaf-mand circle{animation:none}
}

/* ---- Rodapé: verde escuro contínuo (fecha na cor da marca) ---- */
.ftA{position:relative;background:var(--green-deep);color:var(--on-deep-soft);border-top:1px solid rgba(124,183,173,.2)}
.ftA-wrap{max-width:1180px;margin:0 auto;padding:56px 64px 44px}
/* topo: só dois blocos — contato e os outros produtos, afastados nas pontas */
.ftA-top{display:flex;justify-content:space-between;gap:56px;flex-wrap:wrap;align-items:flex-start}
.ftA-col{display:flex;flex-direction:column;align-items:flex-start}
.ftA-h{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);margin-bottom:16px}
.ftA-col a{display:flex;align-items:center;gap:8px;margin-bottom:11px;
  font:400 15px/1.4 var(--sans);color:var(--on-deep-soft);text-decoration:none;
  transition:color .25s ease}
.ftA-col a:hover{color:#fff}
.ftA-seta{width:15px;height:15px;stroke:currentColor;flex:none;opacity:.5;
  transition:transform .25s ease,opacity .25s ease}
.ftA-col a:hover .ftA-seta{transform:translateX(3px);opacity:1}
/* botão do WhatsApp: deliberadamente mais discreto que o botão do CTA
   logo acima, pra não competir com ele */
.ftA-zap{border-radius:100px;padding:13px 22px;background:rgba(255,255,255,.08);
  border:1px solid rgba(124,183,173,.3);color:var(--on-deep)!important;
  font:500 14px/1 var(--sans);margin-bottom:0!important;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),
             background .25s ease,border-color .25s ease}
.ftA-zap svg{width:18px;height:18px;stroke:var(--sage);flex:none}
@media (hover:hover){
  .ftA-zap:hover{transform:translateY(-2px);background:rgba(255,255,255,.14);
    border-color:rgba(124,183,173,.55)}
}
@media (prefers-reduced-motion:reduce){.ftA-zap{transition:none}.ftA-zap:hover{transform:none}}
/* Instagram: mesma pílula do WhatsApp, logo abaixo dele. O botão do zap zera
   a própria margem de baixo, então o respiro entre os dois vem daqui. */
.ftA-ig{display:inline-flex;align-items:center;gap:9px;
  border-radius:100px;padding:13px 22px;background:rgba(255,255,255,.08);
  border:1px solid rgba(124,183,173,.3);color:var(--on-deep)!important;
  font:500 14px/1 var(--sans);text-decoration:none;
  margin:12px 0 0!important;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),
             background .25s ease,border-color .25s ease}
.ftA-ig svg{flex:none;width:18px;height:18px;stroke:var(--sage);fill:none;stroke-width:1.6}
@media (hover:hover){
  .ftA-ig:hover{transform:translateY(-2px);background:rgba(255,255,255,.14);
    border-color:rgba(124,183,173,.55)}
}
@media (prefers-reduced-motion:reduce){.ftA-ig{transition:none}.ftA-ig:hover{transform:none}}
/* faixa legal: aviso em largura total, e no pé a identificação da
   empresa de um lado e o copyright do outro */
.ftA-base{margin-top:44px;padding-top:26px;border-top:1px solid rgba(124,183,173,.18)}
.ftA-legal{margin:0;font:400 12px/1.7 var(--sans);color:var(--on-deep-mute)}
.ftA-fim{margin-top:20px;padding-top:16px;display:flex;justify-content:space-between;
  align-items:baseline;gap:24px;flex-wrap:wrap;
  border-top:1px solid rgba(124,183,173,.10)}
.ftA-biz{font:400 12px/1.6 var(--sans);color:var(--on-deep-mute)}
.ftA-biz .pt{display:inline-block;margin:0 10px;opacity:.5}
.ftA-copy{font:400 12px/1.6 var(--sans);color:var(--on-deep-mute);flex:none}
/* entre 820 e 1000px o rodapé ainda é de três colunas, mas o gap de 56px
   deixa a coluna dos botões estreita demais pra pílula do WhatsApp */
@media(max-width:1000px){.ftA-top{gap:36px}}
@media(max-width:820px){
  .ftA-wrap{padding:44px 24px 36px}
  .ftA-top{flex-direction:column;gap:30px}
  .ftA-fim{flex-direction:column;gap:12px}
  .ftA-biz .pt{display:none}
  .ftA-biz{display:flex;flex-direction:column;gap:3px}
}

/* ---- Oferta: card refinado (header + preço em destaque) + garantia em faixa dourada ---- */
.og{background:var(--cream)}
.og .wrap{max-width:1180px;margin:0 auto;padding:82px 64px}
.og-wrap{position:relative;max-width:600px;margin:0 auto}
.og-card{background:var(--paper);border-radius:28px;overflow:hidden;box-shadow:0 22px 54px rgba(46,42,36,.13);border:1px solid rgba(124,183,173,.35)}
.og-top{background:#eef4f2;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(124,183,173,.3)}
.og-top .k{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.og-top .v{font:400 12px/1 var(--sans);color:var(--muted-2)}
.og-body{padding:38px 40px 34px}
.og-list{display:flex;flex-direction:column;gap:15px;margin-bottom:30px}
.og-list>div{display:flex;gap:13px;align-items:flex-start}
.og-list .tick{flex:none;width:22px;height:22px;border-radius:50%;background:#eef4f2;display:flex;align-items:center;justify-content:center;margin-top:1px}
.og-list p{margin:0;font:400 15px/1.45 var(--sans);color:var(--ink-soft)}
.og-price{background:#f6f2ec;border:1px solid rgba(46,42,36,.06);border-radius:20px;padding:26px 28px;text-align:center}
.og-cap{margin:0 0 8px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.og-old{font:400 17px/1 var(--sans);color:#b0a48f;text-decoration:line-through}
.og-new{display:block;margin:7px 0 0;font:500 54px/1 var(--serif);color:var(--ink)}
.og-inst{margin:9px 0 0;font:400 13px/1.4 var(--sans);color:var(--muted)}
/* parcelamento: menor que o preço cheio, mas o olho para nele */
.og-parc{display:block;margin:9px 0 0;font:500 15px/1.35 var(--sans);color:var(--green)}
.og-parc b{font:500 22px/1 var(--serif);color:var(--ink)}
/* pagamento seguro, logo abaixo do preço */
.og-seg{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;
  font:400 12.5px/1.4 var(--sans);color:var(--muted-2)}
.og-seg svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--muted-2);stroke-width:1.6}
@media(max-width:560px){
  /* a caixa de preço é o ponto mais estreito da página: 26+28px de recuo de
     cada lado sobrava pouco espaço pro preço e pro parcelamento. */
  .og-price{padding:22px 18px}
  .og-parc b{font-size:20px}
  .og-seg{flex-wrap:wrap;font-size:12px}
}
@media(max-width:400px){.og-new{font-size:44px}}
.og .btn{margin-top:22px;width:100%}
.og-fine{margin:12px 0 0;font:400 12px/1.4 var(--sans);color:var(--muted-2);text-align:center}
.barG{margin:26px -40px -34px;background:linear-gradient(90deg,#e7c979,#d9a441);padding:20px 40px;display:flex;align-items:center;gap:16px}
.barG svg{flex:none;filter:drop-shadow(0 3px 8px rgba(63,44,10,.25))}
.barG b{font:600 16px/1.2 var(--sans);color:#3f2c0a}
.barG span{display:block;margin-top:3px;font:400 13px/1.3 var(--sans);color:#6b501c}
@media(max-width:900px){.og .wrap{padding:60px 24px}.og-body{padding:32px 26px}.og-top{padding:16px 26px}.barG{margin:24px -26px -32px;padding:18px 26px}}

/* ---- "A oferta": o card chega em camadas ----
   Cabeçalho → os cinco itens em cascata com os checks se desenhando →
   bloco de preço → o traço corta o valor cheio → o valor novo cresce →
   o selo dourado entra girando → um brilho passa pela faixa, em loop.
   A classe .is-in entra no .og-card (via JS no rodapé). */
.og-card{opacity:0;transform:translateY(26px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.4,0,.2,1)}
.og-card.is-in{opacity:1;transform:none}
.og-card .og-top{opacity:0;transition:opacity .5s ease .15s}
.og-card.is-in .og-top{opacity:1}
.og-card .og-list>div{opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s ease}
.og-card.is-in .og-list>div{opacity:1;transform:none}
.og-card.is-in .og-list>div:nth-child(1){transition-delay:.25s}
.og-card.is-in .og-list>div:nth-child(2){transition-delay:.34s}
.og-card.is-in .og-list>div:nth-child(3){transition-delay:.43s}
.og-card.is-in .og-list>div:nth-child(4){transition-delay:.52s}
.og-card.is-in .og-list>div:nth-child(5){transition-delay:.61s}
.og-list .tick svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .4s ease}
.og-card.is-in .tick svg [pathLength]{stroke-dashoffset:0}
.og-card.is-in .og-list>div:nth-child(1) svg [pathLength]{transition-delay:.33s}
.og-card.is-in .og-list>div:nth-child(2) svg [pathLength]{transition-delay:.42s}
.og-card.is-in .og-list>div:nth-child(3) svg [pathLength]{transition-delay:.51s}
.og-card.is-in .og-list>div:nth-child(4) svg [pathLength]{transition-delay:.60s}
.og-card.is-in .og-list>div:nth-child(5) svg [pathLength]{transition-delay:.69s}
.og-card .og-price{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease .78s,transform .55s cubic-bezier(.4,0,.2,1) .78s}
.og-card.is-in .og-price{opacity:1;transform:none}
/* text-decoration não é animável: o traço vira um pseudo-elemento que
   cresce da esquerda pra direita */
.og-old{text-decoration:none;position:relative;display:inline-block}
.og-old::after{content:"";position:absolute;left:0;right:0;top:52%;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.4,0,.2,1) 1.25s}
.og-card.is-in .og-old::after{transform:scaleX(1)}
.og-new{opacity:0;transform:scale(.82);
  transition:opacity .5s ease 1.55s,transform .6s cubic-bezier(.34,1.56,.64,1) 1.55s}
.og-card.is-in .og-new{opacity:1;transform:none}
.og-card .barG{opacity:0;transform:translateY(26px);
  transition:opacity .55s ease 1.05s,transform .55s cubic-bezier(.4,0,.2,1) 1.05s}
.og-card.is-in .barG{opacity:1;transform:none}
.og-selo{transform:rotate(-38deg) scale(.6);opacity:0;
  transition:transform .8s cubic-bezier(.34,1.4,.64,1) 1.25s,opacity .5s ease 1.25s}
.og-card.is-in .og-selo{transform:none;opacity:1}
/* brilho que atravessa a faixa dourada, em loop */
.barG{position:relative;overflow:hidden}
.barG::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent)}
.og-card.is-in .barG::after{animation:og-brilho 4.5s cubic-bezier(.5,0,.5,1) 2.2s infinite}
@keyframes og-brilho{0%{transform:translateX(-120%)}
  45%{transform:translateX(320%)}100%{transform:translateX(320%)}}
/* quem pediu menos movimento vê o card pronto e parado */
@media (prefers-reduced-motion:reduce){
  .og-card,.og-card .og-top,.og-card .og-list>div,.og-card .og-price,
  .og-card .barG,.og-new,.og-selo{
    opacity:1!important;transform:none!important;transition:none!important}
  .og-old::after{transform:scaleX(1)!important;transition:none!important}
  .og-list .tick svg [pathLength]{stroke-dashoffset:0!important;transition:none!important}
  .barG::after{display:none}
}

/* ---- Fotos reais nos círculos (hero e mentora) ---- */
img.photo--hero,img.photo--about,img.photo--arco{object-fit:cover}

/* =========================================================
   9. CELULAR — padronização e refinos
   ========================================================= */

/* --- Largura dos painéis ---
   Referência: "O método" (.wrap--tall), cujo card fica a 24px das bordas.
   Os painéis (dor, para quem é, transformação, conheça a Ju) usavam 64px
   de recuo externo + 60px interno → estreitos demais no celular. Aqui o
   externo (--gutter) cai pra 24px, alinhando com o método, e o interno
   (--box-pad e o painel escuro) pra um valor confortável. */
@media(max-width:900px){
  :root{--gutter:24px; --box-pad:44px 34px}
  .pqeA-panel{padding:48px 34px}
}
@media(max-width:560px){
  :root{--box-pad:34px 24px}
  .pqeA-panel{padding:38px 24px}
}

/* --- Hero no celular ---
   O anel decorativo tem tamanho fixo (410px) e ficava gigante em volta da
   foto encolhida (280px). CSS vence o width/height do atributo SVG, então
   redimensiono o anel junto da foto. Também encosto a foto mais no topo. */
@media(max-width:900px){
  /* no celular a foto vira o primeiro elemento (order:-1 no grid),
     porque é o que mais chama e a pessoa acessa pelo telefone */
  .hero__media{order:-1;margin-top:0;margin-bottom:20px}
}
@media(max-width:560px){
  .hero .ring{width:min(366px,86vw);height:min(366px,86vw);top:-12px}
}
/* equação (12 + 9 = 1): não deixa estourar em telas bem estreitas */
@media(max-width:400px){
  .hero-eq{gap:8px}
  .hero-eq__item b{font-size:32px}
  .hero-eq__item i{font-size:10px}
  .hero-eq__op{font-size:18px;margin-top:8px}
}

/* --- Diagnóstico: o box da citação no mesmo padrão das seções ---
   o padding interno de 42px deixava o texto mais estreito que os painéis;
   reduzo pra alinhar com o box-pad das outras seções no celular */
@media(max-width:560px){
  .dvB-quote{padding:30px 24px}
}

/* --- Conheça a Ju: os 3 números no celular ---
   com flex-wrap os itens quebravam e o 3º ("alunas") sumia/ficava torto.
   Mantenho os três lado a lado, menores, encolhendo por igual. */
@media(max-width:560px){
  .stats{flex-wrap:nowrap;gap:0;margin-top:26px}
  .stats>div{flex:1;min-width:0;padding-left:16px}
  .stats>div:first-child{padding-left:0}
  .stats .num-big{font-size:27px}
  .stats .lbl{margin-top:4px;font-size:11px;line-height:1.3}
}

/* --- Foto da Ju no celular ---
   o anel é ancorado à direita (right:8px); com a coluna cheia ele parava na
   borda da tela, longe da foto centralizada. Encolho o container ao tamanho
   da foto e centralizo, pra o anel voltar pro canto dela. */
@media(max-width:900px){
  .about__media{width:fit-content;margin-left:auto;margin-right:auto}
}
@media(max-width:560px){
  .photo--about{width:min(300px,66vw);height:min(300px,66vw)}
  .about .ring{width:min(276px,60vw);height:min(276px,60vw)}
}

/* =========================================================
   10. BARRA FIXA DE OFERTA (celular + desktop)
      Aparece depois do hero e some quando a oferta, o CTA final ou o rodapé
      estão na tela — nunca cobre um botão de compra já visível. O botão rola
      até o card da oferta (#inscricao), pra a pessoa passar pela informação
      antes de comprar. Estado controlado pelo observer no rodapé do HTML
      (classe .is-on).
   ========================================================= */
.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(243,236,224,.9);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);
  border-top:1px solid rgba(46,42,36,.1);
  box-shadow:0 -8px 26px rgba(46,42,36,.09);
  transform:translateY(120%);transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.barra-fixa.is-on{transform:none}
.barra-fixa__in{
  max-width:var(--maxw);margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 64px calc(14px + env(safe-area-inset-bottom));
}
.barra-fixa__txt{min-width:0;font:400 12.5px/1.3 var(--sans);color:var(--muted)}
.barra-fixa__txt b{display:block;font:600 15px/1.2 var(--sans);color:var(--ink)}
.barra-fixa__txt--mob{display:none}
.barra-fixa .btn{flex:none;white-space:nowrap;padding:15px 34px;font-size:15px;
  box-shadow:0 8px 20px rgba(124,183,173,.4)}
@media(max-width:700px){
  .barra-fixa__in{padding:11px 18px calc(11px + env(safe-area-inset-bottom));gap:14px}
  .barra-fixa__txt--desk{display:none}
  .barra-fixa__txt--mob{display:block;font-size:11.5px}
  .barra-fixa__txt--mob b{font-size:14px}
  .barra-fixa__so-desk{display:none}
  .barra-fixa .btn{padding:13px 24px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.barra-fixa{transition:none}}