/* ═══════════════════════════════════════════════════════════════════════
   SECTIONS — LP Advocacia no Agronegócio

   Só tokens. Nenhum valor cru de cor, fonte ou espaçamento.

   Ritmo: a página tem 12 seções por decisão do cliente. O controle de
   fadiga é feito por DENSIDADE ALTERNADA, nunca duas seções seguidas com
   a mesma composição. Ver DIRECAO.md seção 1.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Primitivos ──────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gx)}
.wrap--read{max-width:calc(var(--tw-center) + var(--gx)*2)}
.center{text-align:center}

.label{
  font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--muted);margin:0 0 1rem;font-weight:500
}
.label--gold{color:var(--accent)}

.lede{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:var(--ink-1);line-height:1.6}

h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--ink-0);line-height:1.12;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.3}
h1 b,h2 b,h3 b{font-weight:400;color:var(--accent)}

p{color:var(--ink-1);line-height:var(--lh-body)}
p b{color:var(--ink-0);font-weight:500}

.pull{
  color:var(--ink-0);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  border-left:2px solid var(--accent);padding-left:1.25rem;margin-top:2rem
}

/* ── Botão: gradiente dourado EXCLUSIVO do CTA primário (Von Restorff) ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;padding:1.15rem 2rem;border-radius:var(--radius-pill);
  background:var(--grad-cta);color:var(--accent-ink);
  font-family:var(--font-body);font-size:1rem;font-weight:600;text-decoration:none;
  transition:background var(--dur) var(--ease),transform .25s var(--ease);
  will-change:transform
}
.btn:hover{background:var(--grad-cta-hover);transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.btn svg{flex:none}
.btn--lg{padding:1.35rem 2.5rem;font-size:1.0625rem}
.btn--center{display:flex;width:fit-content;margin-inline:auto;margin-top:3rem}

/* ═══ S1 HERO — densidade ALTA, 2 colunas ═══ */
/* padding-bottom em --gy (não --gy-lg): a S2 já abre com --gy-lg, e somar os
   dois criava um vão morto de ~410px entre o CTA do hero e a declaração */
.s-hero{background:var(--bg-0);padding-block:clamp(2.5rem,6vh,4.5rem) var(--gy);overflow:hidden}
.s-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.s-hero__logo{width:clamp(13rem,26vw,22rem);height:auto;margin-bottom:clamp(1.75rem,4vh,2.75rem)}
.s-hero__h1{margin:0 0 1.5rem;max-width:14ch;font-size:clamp(2.35rem,1.5rem + 2.9vw,3.5rem)}
.s-hero__info .lede{margin:0 0 1.5rem;max-width:var(--tw-col)}
.s-hero__kicker{color:var(--ink-0);font-weight:500;margin:0 0 1.5rem}
.s-hero__info .btn{margin-top:2rem}
.s-hero__figure{position:relative;justify-self:end}
.s-hero__figure img{
  width:100%;height:auto;max-width:var(--tw-col);display:block;
  filter:drop-shadow(0 2.5rem 4rem rgba(0,0,0,.45))
}

/* ═══ S2 — densidade BAIXA: declaração com respiro máximo ═══ */
.s-declara{background:var(--bg-0);padding-block:var(--gy-lg);text-align:center}
.s-declara__h{font-size:clamp(2rem,1.2rem + 3.4vw,3.4rem);margin:0 0 2.5rem}
.s-declara p{margin:0 auto 1.25rem;max-width:var(--tw-center)}

/* ═══ S3 — densidade ALTA: grade 4 colunas ═══ */
.s-duvidas{background:var(--bg-1);padding-block:var(--gy);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.s-duvidas .label,.s-duvidas__h{text-align:center}
.s-duvidas__h{margin:0 0 3rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;list-style:none;margin:0;padding:0}
/* o card não tem padding próprio: a foto sangra até a borda e o respiro vive
   no .q__body. Antes havia um padding aqui, anulado mais abaixo no arquivo. */
.q{
  padding:0;overflow:hidden;gap:0;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:rgba(0,0,0,.16);display:flex;flex-direction:column
}
.q__ico{
  width:2.25rem;height:2.25rem;border-radius:.7rem;background:var(--veil);
  display:grid;place-items:center;flex:none
}
.q__t{margin:0;font-size:1.0625rem;line-height:1.35;color:var(--ink-0)}
.s-duvidas__fecho{text-align:center;margin:3rem auto 0;max-width:var(--tw-center)}

/* ═══ S4 — densidade MÉDIA: split com objeto ═══ */
.s-mecanismo{background:var(--bg-1);padding-block:var(--gy)}
.s-mecanismo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.s-mecanismo__txt h2{margin:0 0 1.5rem}
.s-mecanismo__txt p{margin:0 0 1.15rem;max-width:var(--tw-col)}
.s-mecanismo__fig{margin:0}
.s-mecanismo__fig img{width:100%;height:auto;display:block;border-radius:var(--radius);filter:drop-shadow(0 2rem 3.5rem rgba(0,0,0,.5))}

/* ═══ S5 — densidade ALTA: lista editorial numerada ═══ */
.s-conteudo{background:var(--bg-0);padding-block:var(--gy)}
.s-conteudo h2{margin:0 0 3.5rem}
.item{position:relative;padding-block:2.5rem;border-top:1px solid var(--rule)}
.item:first-of-type{border-top:0;padding-top:0}
.item__n{
  font-family:var(--font-display);font-size:clamp(3rem,6vw,4.5rem);
  color:var(--accent);opacity:.14;line-height:1;margin:0 0 .5rem
}
.item__t{margin:0 0 1rem}
.item p{margin:0 0 1rem;max-width:var(--tw-block)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0 0 1.75rem;padding:0}
.chips li{
  padding:.55rem 1rem;border-radius:var(--radius-pill);
  border:1px solid rgba(220,198,141,.3);color:var(--ink-0);font-size:.9375rem
}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:1.75rem;color:var(--ink-1);line-height:1.55}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;
  border-radius:50%;background:var(--accent)
}

/* ═══ S6 — densidade MÉDIA: faixa de destaque ═══ */
.s-bonus{background:linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 100%);padding-block:var(--gy)}
.s-bonus__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.s-bonus__txt h2{margin:0 0 1.5rem}
.s-bonus__txt p{margin:0 0 1.15rem;max-width:var(--tw-col)}
.s-bonus__fig img{width:100%;height:auto;display:block;border-radius:var(--radius)}

/* ═══ S7 — densidade BAIXA: editorial centrado, sem imagem ═══ */
/* o respiro desta seção vem da largura de leitura estreita, não de padding
   gigante: somado ao --gy da S6 criava vão morto antes da virada do argumento */
.s-porque{background:var(--bg-1);padding-block:var(--gy);text-align:center}
.s-porque h2{margin:0 0 2rem}
.s-porque p{margin:0 auto 1.25rem;max-width:var(--tw-center)}

/* ═══ S8 — densidade ALTA: checkmarks ═══ */
.s-paraquem{background:var(--bg-2);padding-block:var(--gy)}
.s-paraquem h2{margin:0 0 3rem}
/* coluna única: em duas colunas os motivos competiam entre si e o texto tinha
   de encolher para caber. Cada motivo agora ocupa a linha inteira e vira uma
   afirmação de cada vez. */
.checks{display:grid;grid-template-columns:1fr;gap:1rem;list-style:none;margin:0;padding:0}
.checks li{
  position:relative;padding:1.5rem 1.75rem 1.5rem 4.25rem;
  border:1px solid var(--rule);border-radius:var(--radius);
  font-size:clamp(1.0625rem,1rem + .45vw,1.3rem);
  line-height:1.5;color:var(--ink-0);
  background:rgba(0,0,0,.16);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)
}
.checks li::before{
  content:"";position:absolute;left:1.6rem;top:50%;translate:0 -50%;
  width:1.5rem;height:1.5rem;
  border-radius:50%;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat
}

/* ═══ S9 — densidade MÍNIMA: respiro antes da autoridade ═══ */
.s-origem{background:var(--bg-2);padding-block:var(--gy-lg);text-align:center}
.s-origem__h{font-size:clamp(2rem,1.2rem + 3.4vw,3.4rem);margin:0 0 2rem}
.s-origem p{margin:0 auto 1.25rem;max-width:var(--tw-center)}

/* ═══ S10 — densidade MÉDIA: split foto + bio ═══ */
.s-bio{background:var(--bg-2);padding-block:var(--gy)}
.s-bio__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.s-bio__fig{margin:0;overflow:hidden;border-radius:var(--radius-lg)}
.s-bio__fig img{width:100%;height:auto;display:block}
.s-bio__txt h2{margin:0 0 1.5rem;padding-bottom:1.5rem;border-bottom:2px solid var(--accent)}
.s-bio__txt p{margin:0 0 1.15rem}

/* ═══ S11 — FOCO: único bloco claro da página ═══ */
.s-oferta{background:var(--bg-1);padding-block:var(--gy-lg);position:relative;isolation:isolate}
.s-oferta::after{
  content:"";position:absolute;inset:auto 0 0 0;height:60%;z-index:-1;opacity:.35;
  background:linear-gradient(180deg,rgba(130,154,98,0) 0%,var(--sage) 100%)
}
.oferta{
  max-width:48rem;margin-inline:auto;text-align:center;
  padding:clamp(2rem,5vw,3.5rem);border-radius:var(--radius-lg);
  border:1px solid var(--rule-2);background:rgba(22,34,18,.66);
  backdrop-filter:blur(6px)
}
.oferta h2{margin:0 0 1rem}
.oferta__sub{margin:0 auto 2.5rem;max-width:var(--tw-col)}
.entrega{list-style:none;margin:0 0 2.5rem;padding:0;display:grid;gap:1.25rem;text-align:left}
.entrega li{padding:1.5rem;border:1px solid var(--rule);border-radius:var(--radius);background:rgba(0,0,0,.18)}
.entrega h3{margin:0 0 .5rem;font-size:1.125rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.entrega p{margin:0;font-size:.9375rem}
.tag{
  font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.3rem .7rem;border-radius:var(--radius-pill);
  background:var(--accent);color:var(--accent-ink)
}
.price{
  background:var(--bg-paper);border-radius:var(--radius-lg);
  padding:2rem 1.5rem;margin:0 auto 2rem;max-width:22rem
}
.price__from{color:var(--ink-dark);opacity:.65;font-size:.9375rem;margin:0 0 .25rem}
.price__from s{opacity:.8}
.price__now{
  font-family:var(--font-display);color:var(--ink-dark);
  font-size:var(--fs-price);line-height:1;margin:0;font-weight:400
}
.price__cur{font-size:.55em;vertical-align:.5em;margin-right:.1em}
.price__cents{font-size:.42em;vertical-align:.85em}
.price__note{color:var(--ink-dark);opacity:.7;font-size:.875rem;margin:.5rem 0 0}
.oferta__seals{margin:1.25rem 0 0;font-size:.875rem;color:var(--ink-2)}

/* ═══ S12 — densidade MÉDIA: FAQ ═══ */
.s-faq{background:var(--bg-1);padding-block:var(--gy)}
.s-faq h2{margin:0 0 3rem}
.faq{display:grid;gap:.75rem}
.faq__i{border:1px solid var(--rule);border-radius:var(--radius);background:rgba(0,0,0,.14);overflow:hidden}
.faq__i summary{
  cursor:pointer;list-style:none;padding:1.25rem 3rem 1.25rem 1.5rem;position:relative;
  color:var(--ink-0);font-weight:500;min-height:44px;display:flex;align-items:center
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"";position:absolute;right:1.5rem;top:50%;width:.75rem;height:.75rem;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  translate:0 -60%;rotate:45deg;transition:rotate .3s var(--ease)
}
.faq__i[open] summary::after{rotate:225deg;translate:0 -25%}
.faq__i summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.faq__a{padding:0 1.5rem 1.25rem}
.faq__a p{margin:0}

/* ═══ Rodapé ═══ */
.site-foot{background:var(--bg-2);padding-block:1.75rem;border-top:1px solid var(--rule)}
.site-foot__in{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;text-align:center}
.site-foot p{margin:0;font-size:.875rem;color:var(--ink-2)}
.site-foot a{color:var(--ink-2);text-decoration:underline;text-underline-offset:.2em}
.site-foot a:hover{color:var(--ink-0)}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVO — as grades colapsam, a alternância de densidade se mantém
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .s-hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .s-hero__info .lede{max-width:none}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .oferta{padding-inline:1.25rem}
  .site-foot__in{flex-direction:column;text-align:center}
}

/* Respeita quem pediu menos movimento: nada some, nada depende de animação */
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA CLARO — alternância de luz entre seções
   O ritmo deixa de depender só de densidade e passa a ter também troca de
   luminosidade, que é o contraste que o olho percebe primeiro ao rolar.
   Ordem: escuro, escuro, CLARO, escuro, CLARO, escuro, CLARO, escuro,
   escuro, escuro, CLARO, escuro.
   ═══════════════════════════════════════════════════════════════════════ */
.is-light{background:var(--bg-paper)}
.is-light h1,.is-light h2,.is-light h3{color:var(--ink-on-paper)}
.is-light h1 b,.is-light h2 b,.is-light h3 b{color:var(--accent-on-paper)}
.is-light p{color:var(--ink-on-paper-1)}
.is-light p b{color:var(--ink-on-paper)}
.is-light .label{color:var(--accent-on-paper)}
.is-light .lede{color:var(--ink-on-paper-1)}
.is-light .pull{color:var(--ink-on-paper);border-left-color:var(--accent-on-paper)}
.is-light .ticks li{color:var(--ink-on-paper-1)}
.is-light .ticks li::before{background:var(--accent-on-paper)}
.is-light .chips li{border-color:rgba(29,42,25,.22);color:var(--ink-on-paper)}
.is-light .item{border-top-color:var(--rule-on-paper)}
.is-light .item__n{color:var(--accent-on-paper);opacity:.2}
.is-light .q{background:var(--bg-paper-2);border-color:var(--rule-on-paper)}
.is-light .q__t{color:var(--ink-on-paper)}
.is-light .q__ico{background:rgba(131,102,60,.12)}
.is-light .q__ico img{filter:brightness(.55) saturate(1.4)}
.is-light .faq__i{background:var(--bg-paper-2);border-color:var(--rule-on-paper)}
.is-light .faq__i summary{color:var(--ink-on-paper)}
.is-light .faq__i summary::after{border-color:var(--accent-on-paper)}

/* transição de luz: corte limpo. O degradê esfumaçado sujava a emenda, então
   a seção clara sobe sobre a escura com borda arredondada. A troca fica nítida
   e lida como camada, não como borrão. */
.is-light{position:relative;border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-top:-1px}

/* a seção escura seguinte também fecha o bloco claro com a mesma curva */
.is-light + section:not(.is-light){
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin-top:-1px;position:relative
}

/* ═══ S3: cards com fotografia real do agro ═══════════════════════════ */
.q__fig{margin:0;overflow:hidden;aspect-ratio:4/3;position:relative}
.q__fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(22,34,18,.55))
}
.is-light .q__fig::after{background:linear-gradient(180deg,transparent 55%,rgba(29,42,25,.22))}
.q__fig img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);will-change:transform
}
.q:hover .q__fig img{transform:scale(1.07)}
.q__body{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}

/* tilt sutil: o card inclina na direção do ponteiro. Aponta para o card que
   está sob o olhar, não para si mesmo. Só em ponteiro fino. */
@media (hover:hover) and (pointer:fine){
  [data-tilt]{transform-style:preserve-3d;transition:transform .4s var(--ease)}
}

/* ═══ S4: o mockup do material ganha respiro e flutuação ═══════════════ */
.s-mecanismo__fig img{filter:drop-shadow(0 3rem 5rem rgba(0,0,0,.6))}
@media (prefers-reduced-motion:no-preference){
  .s-mecanismo__fig{animation:float 7s ease-in-out infinite}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ═══ S11: oferta clara precisa reencaixar o card ═════════════════════ */
.is-light.s-oferta::after{opacity:.14}
.is-light .oferta{
  background:rgba(255,255,255,.55);border-color:var(--rule-on-paper);
  box-shadow:0 2rem 4rem rgba(29,42,25,.1)
}
.is-light .oferta__sub{color:var(--ink-on-paper-1)}
.is-light .entrega li{background:rgba(255,255,255,.6);border-color:var(--rule-on-paper)}
.is-light .entrega p{color:var(--ink-on-paper-2)}
.is-light .tag{background:var(--accent-on-paper);color:var(--bg-paper)}
.is-light .oferta__seals{color:var(--ink-on-paper-2)}
.is-light .price{background:var(--bg-0)}
.is-light .price__from,.is-light .price__now,.is-light .price__note{color:var(--ink-0)}
.is-light .price__now{color:var(--ink-dark)}

@media (max-width:560px){
  .q__body{padding:1.15rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO: foto ancorada na base + divisor de fim de seção

   A foto estava com align-items:center e sobrava vão embaixo, fazendo a
   Bárbara parecer recortada no ar. Agora ela encosta na base da seção: o
   respiro vertical passa a viver no bloco de texto, não na seção inteira.
   ═══════════════════════════════════════════════════════════════════════ */
.s-hero{padding-bottom:0;position:relative}
.s-hero__grid{align-items:end}
.s-hero__info{padding-bottom:var(--gy)}
.s-hero__figure{align-self:end;justify-self:end}
.s-hero__figure img{
  margin-bottom:0;vertical-align:bottom;
  /* a sombra projetada para baixo denunciava o corte: agora só lateral/topo */
  filter:drop-shadow(-1.5rem 0 3.5rem rgba(0,0,0,.45))
}

/* divisor: fecha o hero e anuncia a próxima seção sem cortar a leitura */
.s-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--rule) 18%,
    rgba(196,175,150,.55) 50%,
    var(--rule) 82%,
    transparent 100%)
}

@media (max-width:900px){
  /* no mobile a foto vem primeiro e o texto embaixo: ancorar na base aqui
     deixaria a imagem colada no texto, então volta ao fluxo normal */
  .s-hero{padding-bottom:var(--gy)}
  .s-hero__grid{align-items:center}
  .s-hero__info{padding-bottom:0}
  .s-hero__figure{justify-self:center}
  .s-hero__figure img{filter:drop-shadow(0 1.5rem 3rem rgba(0,0,0,.45))}
}

/* mockup do material: agora são dois aparelhos numa peça quase quadrada e com
   transparência, então a coluna precisa ser mais larga e a sombra vem do PNG */
.s-mecanismo__grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
.s-mecanismo__fig img{border-radius:0;filter:none}

/* bônus: o mockup do iMac é horizontal e com transparência própria, então a
   coluna da imagem cresce e o recorte/arredondamento antigos saem de cena */
.s-bonus__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.s-bonus__fig img{border-radius:0}
@media (max-width:900px){
  .s-bonus__fig{max-width:none;margin-inline:0}
}

/* a S8 usa a mesma fórmula de largura do .wrap--read: pedir --tw-center puro
   aqui entregava 784px em vez de 896, porque o .wrap desconta a goteira por
   dentro, e a seção estreitava sem motivo em relação às vizinhas */
.s-paraquem .wrap{max-width:calc(var(--tw-center) + var(--gx)*2)}

/* o item sob o ponteiro se destaca do restante da lista */
@media (hover:hover) and (pointer:fine){
  .checks li:hover{
    border-color:rgba(196,175,150,.45);
    background:rgba(0,0,0,.28);
    transform:translateX(6px)
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Blocos centrados de respiro (S2, S7, S9): área de texto mais larga

   O contraste entre a headline quase full-width e um parágrafo de 38rem
   fazia o texto parecer espremido. Passa para 48rem, que é o limite útil:
   acima de ~80 caracteres por linha o olho perde o início da linha seguinte
   e a fluência de leitura cai.
   ═══════════════════════════════════════════════════════════════════════ */
.s-declara .wrap--read,
.s-porque  .wrap--read,
.s-origem  .wrap--read{max-width:calc(var(--tw-center) + var(--gx)*2)}

.s-declara p,
.s-porque p,
.s-origem p{max-width:var(--tw-center);font-size:clamp(1.0625rem,1rem + .4vw,1.25rem)}

/* a headline desses blocos pode ir um pouco além do texto, mantendo a
   hierarquia sem que o parágrafo pareça uma coluna estreita ao lado dela */
.s-declara__h,.s-origem__h{max-width:26ch;margin-inline:auto}

/* ═══════════════════════════════════════════════════════════════════════
   S10 BIO — foto inteira, ancorada na base

   A foto é um recorte com fundo transparente. Colocá-la numa moldura com
   overflow:hidden mais parallax (scale 1.16) cortava a Bárbara em cima e
   embaixo e ainda a deixava flutuando no meio da seção. Agora ela aparece
   inteira e encosta na base, como no hero.
   ═══════════════════════════════════════════════════════════════════════ */
.s-bio{padding-bottom:0;overflow:hidden}
.s-bio__grid{align-items:end}
.s-bio__fig{
  overflow:visible;border-radius:0;margin:0;
  align-self:end;max-width:none
}
.s-bio__fig img{
  width:100%;height:auto;display:block;
  vertical-align:bottom;margin-bottom:0;
  filter:drop-shadow(-1.25rem 0 3rem rgba(0,0,0,.4))
}
.s-bio__txt{padding-bottom:var(--gy)}


/* ═══════════════════════════════════════════════════════════════════════
   S11 OFERTA — card verde sobre fundo claro

   Inverte a relação: a página continua clara e o card volta ao verde da
   marca. O bloco de decisão passa a ser a única área escura da seção, o
   que o isola do resto (Von Restorff) em vez de diluí-lo no papel.
   ═══════════════════════════════════════════════════════════════════════ */
.is-light .oferta{
  background:var(--bg-0);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 2.5rem 5rem rgba(29,42,25,.22)
}
.is-light .oferta h2{color:var(--ink-0)}
.is-light .oferta h3{color:var(--ink-0)}
.is-light .oferta .label{color:var(--accent)}
.is-light .oferta__sub{color:var(--ink-1)}
.is-light .entrega li{
  background:rgba(255,255,255,.05);
  border-color:var(--rule)
}
.is-light .entrega p{color:var(--ink-2)}
.is-light .tag{background:var(--accent);color:var(--accent-ink)}
.is-light .oferta__seals{color:var(--ink-2)}
/* o cartão de preço volta a ser o papel: único ponto claro dentro do card */
.is-light .price{background:var(--bg-paper)}
.is-light .price__from,.is-light .price__note{color:var(--ink-dark)}
.is-light .price__now{color:var(--ink-dark)}

/* corpo maior nos blocos de texto, acompanhando a largura nova */
.s-mecanismo__txt p,.s-bonus__txt p,.s-bio__txt p,.item p{
  font-size:clamp(1.0625rem,1rem + .35vw,1.2rem)
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO em 1440x900

   Medido antes: 934px de altura, 34px acima do alvo. A headline estava
   limitada a 14ch e quebrava em 5 linhas; alargar para 20ch derruba para 4
   e resolve a maior parte da sobra. O resto vem de marca e respiros menores.
   ═══════════════════════════════════════════════════════════════════════ */
.s-hero{padding-top:clamp(1.75rem,4.5vh,3rem)}
.s-hero__logo{
  width:clamp(11rem,20vw,17.5rem);
  margin-bottom:clamp(1rem,2.6vh,1.75rem)
}
.s-hero__h1{
  max-width:20ch;
  font-size:clamp(2.25rem,1.4rem + 2.6vw,3.25rem);
  margin-bottom:clamp(.85rem,1.8vh,1.25rem)
}
.s-hero__info .lede{
  margin-bottom:clamp(.85rem,1.8vh,1.25rem);
  max-width:var(--tw-col)
}
.s-hero__kicker{margin-bottom:clamp(.85rem,1.8vh,1.25rem)}
.s-hero__info .btn{margin-top:clamp(1rem,2.4vh,1.75rem)}
.s-hero__info{padding-bottom:clamp(2.5rem,6vh,5rem)}

/* sem max-height: truncar com overflow:hidden esconderia o CTA em telas
   baixas. O encaixe vem dos respiros em vh, que encolhem junto com a tela. */

/* ═══════════════════════════════════════════════════════════════════════
   Marca: o PNG tinha 17px de ar no topo e 80px na base, num canvas de 440.
   Esse vazio era renderizado como parte da imagem e criava o "espaçamento
   no topo do logo". Depois do crop a proporção mudou de 2.50 para 2.20, e
   a largura de exibição cai na mesma medida para o texto manter o tamanho.
   ═══════════════════════════════════════════════════════════════════════ */
.s-hero__logo{
  width:clamp(8rem,15vw,12.5rem);
  margin-bottom:clamp(.9rem,2.2vh,1.5rem)
}

/* aperto final do hero para caber em viewport útil de ~790px */
.s-hero{padding-top:clamp(1.25rem,3vh,2rem)}
.s-hero__h1{font-size:clamp(2.15rem,1.3rem + 2.5vw,2.95rem);margin-bottom:clamp(.7rem,1.5vh,1rem)}
.s-hero__info .lede{margin-bottom:clamp(.7rem,1.5vh,1rem)}
.s-hero__kicker{margin-bottom:clamp(.7rem,1.5vh,1rem);font-size:.9375rem}
.s-hero__info .btn{margin-top:clamp(.9rem,2vh,1.4rem)}
.s-hero__info{padding-bottom:clamp(2rem,4.5vh,3.5rem)}

/* ═══════════════════════════════════════════════════════════════════════
   A foto era o gargalo real da altura do hero

   Com max-width:34rem (544px) e proporção 1000x1656, a imagem resolvia
   para 901px de altura e puxava o grid inteiro com ela. Apertar o texto
   não resolvia nada. Agora o limite é a ALTURA, em vh, e a largura passa a
   ser consequência: em tela baixa a Bárbara encolhe junto.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  .s-hero__figure{display:flex;justify-content:flex-end;align-items:flex-end}
  .s-hero__figure img{
    max-width:100%;
    width:auto;
    max-height:min(78vh,40rem);
    height:auto
  }
}

/* headline do hero em 3 linhas: a caixa cresce e a coluna de texto ganha
   proporção no grid, senão 26ch não caberia e a quebra voltaria para 4 */
@media (min-width:901px){
  .s-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
}
.s-hero__h1{max-width:26ch}

/* ═══════════════════════════════════════════════════════════════════════
   Números 01/02: estavam em 14% no escuro e 20% no claro, o que dava
   contraste de 1.31 e 1.29 sobre os respectivos fundos. Invisíveis.
   Agora ficam legíveis (4.80 no claro, 4.3 no escuro) e ganham um filete
   ao lado, que os transforma em marcador editorial em vez de marca d'água.
   ═══════════════════════════════════════════════════════════════════════ */
.item__n{
  opacity:.75;
  font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  letter-spacing:.04em;
  display:flex;align-items:center;gap:1rem;
  margin-bottom:1rem
}
.item__n::after{
  content:"";height:1px;flex:1;max-width:5rem;
  background:currentColor;opacity:.45
}
.is-light .item__n{color:var(--accent-on-paper);opacity:1}

/* ═══════════════════════════════════════════════════════════════════════
   S10 BIO: a foto era limitada pela largura da coluna e resolvia para mais
   de 900px de altura, dominando a seção. Mesmo caso do hero: o limite passa
   a ser a ALTURA, em vh, e a coluna de texto ganha proporção no grid.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  .s-bio__grid{grid-template-columns:minmax(0,.60fr) minmax(0,1fr)}
  .s-bio__fig{display:flex;justify-content:flex-start;align-items:flex-end}
  .s-bio__fig img{
    max-width:100%;
    width:auto;
    max-height:min(78vh,40rem);
    height:auto
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO com altura total da janela

   svh em vez de vh: no mobile, 100vh conta a barra de endereço que some ao
   rolar, então a seção fica maior que a tela e o CTA cai para fora. svh usa
   a altura mínima estável da viewport e não sofre esse salto.

   align-content:end mantém a Bárbara ancorada na base enquanto a seção
   cresce até preencher a janela.
   ═══════════════════════════════════════════════════════════════════════ */
.s-hero{
  min-height:100svh;
  display:grid;
  align-content:end;
}
@media (min-width:901px){
  .s-hero__figure img{max-height:calc(100svh - 7rem)}
}
@supports not (height:100svh){
  .s-hero{min-height:100vh}
}

/* ═══════════════════════════════════════════════════════════════════════
   Correção: o figure do hero transbordava a célula do grid em 22px e a
   foto era cortada pelo overflow:hidden da seção. A causa era o figure
   dimensionar pelo próprio conteúdo em vez de acompanhar a linha.
   Com align-self:stretch ele passa a ocupar a célula, e a imagem se limita
   a 100% dessa altura, encostando na base sem ultrapassar.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  .s-hero__figure{
    align-self:stretch;
    display:flex;align-items:flex-end;justify-content:flex-end;
    min-height:0
  }
  .s-hero__figure img{max-height:100%;width:auto;object-fit:contain;object-position:bottom}
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO: a foto sai do fluxo do grid

   Tentativas anteriores (limitar por vh, align-self:stretch, object-fit)
   falharam porque a imagem continuava participando do cálculo de altura da
   linha: ora transbordava 22px, ora empurrava a seção além da janela em
   telas baixas.

   Solução: a figura é posicionada em absoluto, ancorada na base à direita,
   com altura em % da seção. Assim ela NUNCA influencia a altura do hero,
   que passa a ser governado só por 100svh e pelo bloco de texto.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  .s-hero{position:relative;overflow:hidden}
  .s-hero__grid{grid-template-columns:1fr;align-items:end}
  .s-hero__info{max-width:min(58%,42rem);position:relative;z-index:2}
  .s-hero__figure{
    position:absolute;right:var(--gx);bottom:0;top:auto;
    height:min(94%,46rem);width:auto;
    align-self:auto;margin:0;z-index:1;
    display:block
  }
  .s-hero__figure img{
    height:100%;width:auto;max-width:none;max-height:none;
    display:block;object-fit:contain;object-position:bottom
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO: diagramação

   Problema: align-content:end jogava marca, título, subtítulo e CTA todos
   para o terço inferior, com um vazio grande no topo e nenhum respiro entre
   os blocos. A leitura ficava comprimida e a foto dominava a composição.

   Agora a coluna de texto ocupa a altura toda e se organiza em três tempos:
   marca ancorada no topo, bloco de mensagem centralizado verticalmente,
   e folga simétrica embaixo. Os dois `margin:auto` fazem a centralização.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  .s-hero{
    align-content:stretch;
    padding-block:clamp(1.75rem,4vh,3rem) 0
  }
  .s-hero__grid{align-content:stretch;height:100%}

  .s-hero__info{
    display:flex;flex-direction:column;
    height:100%;
    padding-bottom:clamp(2.5rem,6vh,4.5rem);
    max-width:min(56%,40rem)
  }
  /* marca no topo, mensagem no centro óptico */
  .s-hero__logo{margin-bottom:auto}
  .s-hero__info .btn{margin-bottom:auto;align-self:flex-start}

  /* respiro real entre os blocos da mensagem */
  .s-hero__h1{margin-block:0 clamp(1.1rem,2.4vh,1.75rem)}
  .s-hero__info .lede{margin-block:0 clamp(1rem,2.2vh,1.5rem)}
  .s-hero__kicker{margin-block:0 clamp(1.5rem,3.2vh,2.25rem)}
  .s-hero__info .btn{margin-top:0}

  /* foto: presença sem dominar */
  .s-hero__figure{height:min(88%,42rem)}
}

/* ajuste fino da diagramação: o bloco de mensagem vai para o centro óptico,
   levemente abaixo do centro geométrico, que é onde o olho espera encontrar
   o conteúdo principal. A folga inferior encolhe e a foto ganha a base. */
@media (min-width:901px){
  .s-hero__info{padding-bottom:clamp(1.5rem,3.5vh,2.5rem)}
  .s-hero__logo{margin-bottom:clamp(3rem,9vh,7rem)}
  .s-hero__info .btn{margin-bottom:auto}
  .s-hero__figure{height:min(96%,47rem)}
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO: coluna esquerda como bloco único, centralizado na tela

   Marca, título, subtítulo e CTA formam um só conjunto, alinhado ao centro
   vertical da janela. Sem os margin:auto que antes separavam a marca do
   resto e empurravam o conteúdo para as extremidades.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  .s-hero__info{
    justify-content:center;
    padding-block:clamp(2rem,5vh,3.5rem);
    height:100%
  }
  .s-hero__logo{margin-bottom:clamp(1.75rem,4vh,2.75rem)}
  .s-hero__info .btn{margin-bottom:0;margin-top:0}
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — HERO

   Estava com a foto em order:-1, ou seja, antes do texto. Resultado: a
   Bárbara tomava a primeira tela inteira e a headline, o subtítulo e o CTA
   caíam abaixo da dobra. Quem chega de anúncio via só uma foto.

   Agora: mensagem primeiro, foto ocupa o espaço que sobra até a base.
   A ordem de leitura passa a ser promessa → prova → ação.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .s-hero{
    min-height:100svh;
    padding-block:clamp(1.25rem,3.5svh,2rem) 0;
    display:block;overflow:hidden
  }
  .s-hero__grid{
    display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;
    gap:0;min-height:calc(100svh - clamp(1.25rem,3.5svh,2rem));
    align-items:start
  }

  /* texto primeiro */
  .s-hero__info{
    order:0;max-width:none;padding-bottom:0;
    display:block;height:auto
  }
  .s-hero__logo{width:clamp(9rem,34vw,12rem);margin-bottom:clamp(1rem,2.5svh,1.5rem)}
  .s-hero__h1{
    max-width:none;
    font-size:clamp(1.9rem,7.2vw,2.6rem);
    margin-bottom:clamp(.75rem,2svh,1.1rem)
  }
  .s-hero__info .lede{font-size:1rem;margin-bottom:clamp(.7rem,1.8svh,1rem)}
  .s-hero__kicker{font-size:.9rem;margin-bottom:clamp(1rem,2.5svh,1.4rem)}
  .s-hero__info .btn{margin:0;width:100%;max-width:22rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — sem foto no hero, leitura centralizada

   Decisão do cliente: no celular a foto da Bárbara sai do hero e todo o
   texto da página passa a ser centralizado.

   Duas consequências que precisam de tratamento explícito:

   1. Sem a foto, o hero deixa de ter um bloco que ocupa a tela. O texto
      passa a ser centralizado verticalmente em 100svh, o que mantém a
      primeira tela inteira dedicada à promessa e ao CTA.

   2. Marcadores ancorados à esquerda (bolinha da .ticks, check da .checks,
      filete do .item__n, borda do .pull) ficariam órfãos com o texto no
      centro. Cada um vira uma peça centrada: o marcador sobe para cima do
      texto ou é espelhado dos dois lados.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ── Hero sem foto ───────────────────────────────────────────────────── */
  .s-hero__figure{display:none}
  .s-hero__grid{
    grid-template-rows:auto;
    align-items:center;align-content:center;
    min-height:calc(100svh - clamp(1.25rem,3.5svh,2rem)*2)
  }
  .s-hero{padding-block:clamp(1.25rem,3.5svh,2rem)}
  .s-hero__logo{display:block;margin-inline:auto}
  .s-hero__info .btn{margin-inline:auto}

  /* ── Texto centralizado em toda a página ─────────────────────────────── */
  .s-hero__info,
  .s-mecanismo__txt,
  .s-bonus__txt,
  .s-bio__txt,
  .item,
  .q__body,
  .entrega,
  .entrega li,
  .faq__i summary,
  .faq__a{text-align:center}

  /* blocos com largura de leitura própria voltam ao eixo */
  .s-hero__info .lede,
  .s-mecanismo__txt p,
  .s-bonus__txt p,
  .s-bio__txt p,
  .item p,
  .s-duvidas__fecho{margin-inline:auto}

  /* ── Marcadores reposicionados ───────────────────────────────────────── */

  /* citação: a barra lateral vira filete superior */
  .pull{
    border-left:0;border-top:2px solid var(--accent);
    padding-left:0;padding-top:1.25rem;
    max-width:var(--tw-col);margin-inline:auto
  }

  /* número editorial entre dois filetes, em vez de um filete só à direita */
  .item__n{justify-content:center}
  .item__n::before{
    content:"";height:1px;flex:1;max-width:5rem;
    background:currentColor;opacity:.45
  }

  .chips{justify-content:center}

  /* bolinha da lista deixa de ser absoluta e passa a preceder o texto */
  .ticks li{padding-left:0;max-width:34rem;margin-inline:auto}
  .ticks li::before{
    position:static;display:inline-block;
    margin-right:.55rem;vertical-align:middle;top:auto;left:auto
  }

  /* check sobe para cima da afirmação */
  .checks li{padding:1.5rem 1.25rem}
  .checks li::before{
    position:static;translate:none;left:auto;top:auto;
    display:block;margin:0 auto .85rem;
    width:1.5rem;height:1.5rem
  }

  /* cartão de dúvida: imagem em cima, ícone e título centrados embaixo */
  .q{flex-direction:column;align-items:stretch}
  .q__body{align-items:center}

  .entrega h3{justify-content:center}

  /* FAQ: respiro simétrico para o texto caber centrado sem bater na seta */
  .faq__i summary{padding-inline:2.75rem;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — grades que tinham voltado a duas colunas

   .s-mecanismo__grid e .s-bonus__grid receberam proporções novas em regras
   escritas DEPOIS do @media (max-width:900px) que as colapsava. Mesma
   especificidade, ordem maior: o colapso perdia a cascata e as duas seções
   ficavam com duas colunas espremidas no celular, com o texto quebrando em
   uma palavra por linha. Aqui elas voltam a ser uma coluna, agora no fim do
   arquivo, onde nada mais as sobrescreve.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .s-mecanismo__grid,
  .s-bonus__grid,
  .s-bio__grid{grid-template-columns:1fr;gap:2.5rem}

  .s-mecanismo__fig,
  .s-bonus__fig{max-width:26rem;margin-inline:auto}
}

/* .checks li ficou com o check centralizado em cima e o texto ainda à
   esquerda: a li não estava na lista de blocos centralizados */
@media (max-width:900px){
  .checks li{text-align:center}
}

/* o <picture> do hero é só um seletor de fonte: precisa ser transparente na
   caixa, senão o height:100% da imagem passa a resolver contra ele e falha */
.s-hero__figure picture{display:block;height:100%;width:auto}

/* ═══════════════════════════════════════════════════════════════════════
   CTA da oferta: largura por faixa

   O rótulo é longo e quebrava em três linhas dentro da pílula no celular
   estreito, então a regra de largura total foi escrita para resolver isso.
   Escopada em 900px, porém, ela pegava também o tablet, onde o botão virava
   uma pílula de 628px com o texto boiando no meio, o dobro do CTA idêntico
   da seção seguinte. Agora a largura total vale só onde o problema existe.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  .oferta .btn{width:100%;padding-inline:1.25rem}
}
@media (min-width:561px) and (max-width:900px){
  .oferta .btn{width:100%;max-width:26rem;margin-inline:auto}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — S10: a foto da Bárbara volta, ancorada na base

   A foto é um recorte com fundo transparente. Solta no meio da seção ela
   parece colada, flutuando sobre o verde. A solução é a mesma do desktop:
   o texto vem primeiro, a foto vai para o fim e encosta na base da seção,
   que perde o padding inferior. Ela passa a se apoiar na linha que divide
   a S10 da S11, em vez de pairar no meio do fundo.

   A altura é limitada em svh: antes a foto resolvia por largura e chegava a
   mais de 800px, quase duas telas. A sombra é um halo lateral, sem deslocamento
   vertical: sombra projetada para baixo é justamente o que denuncia levitação.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .s-bio{padding-bottom:0}
  .s-bio__grid{
    grid-template-columns:1fr;
    gap:clamp(2rem,5svh,3rem);
    align-items:end
  }
  .s-bio__txt{order:0;padding-bottom:0}

  .s-bio__fig{
    display:block;order:1;
    margin:0 auto;max-width:none;width:auto;
    align-self:end
  }
  .s-bio__fig img{
    width:auto;max-width:100%;height:auto;
    max-height:min(52svh,26rem);
    margin:0 auto;display:block;
    vertical-align:bottom;
    filter:drop-shadow(0 0 3rem rgba(0,0,0,.45))
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BARRA DE DECISÃO — fixa a partir do fim do hero

   Estado inicial: fora de cena, sem opacidade e inerte. É o JS que adiciona
   .is-on quando o hero sai do campo de visão. Escrito nesta ordem de
   propósito: sem JavaScript a barra nunca aparece, e a página continua
   íntegra com os três CTAs no fluxo.

   A barra é CHROME, não conteúdo: fica sobre seções claras e escuras, então
   precisa do próprio fundo. Verde da base com desfoque e filete no topo, o
   mesmo vocabulário do rodapé.

   O gradiente dourado continua exclusivo do CTA primário: esta barra usa o
   mesmo botão .btn, não um botão novo. É a mesma ação, em outro lugar.
   ═══════════════════════════════════════════════════════════════════════ */
.cta-bar{
  position:fixed;inset:auto 0 0 0;z-index:var(--z-chrome);
  min-height:var(--cta-bar-h);
  display:flex;align-items:center;
  background:rgba(22,34,18,.94);
  border-top:1px solid var(--rule-2);
  box-shadow:0 -1rem 2.5rem rgba(0,0,0,.35);
  padding-block:.75rem;
  padding-bottom:max(.75rem,env(safe-area-inset-bottom));

  /* estado escondido */
  transform:translateY(110%);
  opacity:0;visibility:hidden;
  transition:transform .5s var(--ease),opacity .35s var(--ease),visibility 0s .5s
}
@supports (backdrop-filter:blur(10px)){
  .cta-bar{background:rgba(22,34,18,.82);backdrop-filter:blur(12px)}
}
.cta-bar.is-on{
  transform:none;opacity:1;visibility:visible;
  transition:transform .5s var(--ease),opacity .35s var(--ease),visibility 0s
}

.cta-bar__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gx);
  display:flex;align-items:center;justify-content:space-between;gap:1rem
}

.cta-bar__price{
  margin:0;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  line-height:1.2
}
.cta-bar__price s{color:var(--ink-2);font-size:.875rem}
.cta-bar__price strong{
  font-family:var(--font-display);font-weight:400;
  color:var(--ink-0);font-size:1.5rem;letter-spacing:.01em
}
.cta-bar__price span{color:var(--ink-2);font-size:.8125rem}

.cta-bar__btn{flex:none;padding:1rem 1.5rem;font-size:.9375rem}

/* ═══ Reserva no rodapé ═══
   A última linha do rodapé não pode ficar sob a barra. Reservado de forma
   estática, e só quando há JS: mudar o padding no instante em que a barra
   aparece provocaria um salto de layout no meio da rolagem.

   O valor sai do MESMO token que dimensiona a barra, mais a safe area do
   aparelho. Antes era a constante 4,5rem repetida à mão, que subestimava a
   altura real e ignorava a safe area: num iPhone a barra vai a 100,5px e a
   folga virava negativa, ou seja, o copyright ficava coberto justamente no
   aparelho que traz a maior parte do tráfego. */
.js .site-foot{
  padding-bottom:calc(1.75rem + var(--cta-bar-h) + env(safe-area-inset-bottom,0px))
}

@media (max-width:560px){
  .cta-bar__in{gap:.75rem}
  /* a linha "pagamento único" sai: no celular o espaço vale mais para o botão */
  .cta-bar__price span{display:none}
  .cta-bar__price{gap:.4rem}
  .cta-bar__price strong{font-size:1.375rem}
  .cta-bar__btn{flex:1 1 auto;max-width:13.5rem;padding-inline:1rem}
}

/* quem pediu menos movimento recebe a barra sem deslizar, só aparecendo */
@media (prefers-reduced-motion:reduce){
  .cta-bar{transform:none;transition:opacity .2s linear,visibility 0s .2s}
  .cta-bar.is-on{transition:opacity .2s linear,visibility 0s}
}

/* ═══════════════════════════════════════════════════════════════════════
   CORREÇÕES DA AUDITORIA DE ESPAÇAMENTO
   Relatório completo em AUDITORIA-ESPACAMENTO.md, com as medições.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── C3: o respiro de fim de seção é do padding da seção, não da margem do
   último bloco ────────────────────────────────────────────────────────────
   A escala estava sendo respeitada nos seletores e mesmo assim o mesmo par de
   tokens rendia de 147,7 a 206,9px na tela, variação de 39%. A sobra vinha da
   margem inferior do último parágrafo de cada seção, que se somava ao padding.
   Quem lia o CSS acreditava que duas transições tinham o mesmo peso quando uma
   era 37% maior, e mexer no token não produzia o efeito previsto. */
main > section :is(p,ul,ol,figure):last-child{margin-bottom:0}
.item:last-of-type{padding-bottom:0}

/* ── C4: S8, S9 e S10 dividem o mesmo fundo ───────────────────────────────
   É o único trecho da página sem troca de luz entre seções vizinhas, e o
   mecanismo de ritmo descrito no topo deste arquivo depende justamente dela.
   Sem pista visual, 194 e 214px de verde liso não leem como "nova seção",
   leem como "acabou a página". O filete é o mesmo do fim do hero.
   A densidade das três seções NÃO muda: ela está correta e documentada em
   DIRECAO.md seção 1. O que faltava era a fronteira, não menos espaço. */
.s-paraquem,.s-origem{position:relative}
.s-paraquem::after,.s-origem::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,var(--rule) 18%,rgba(196,175,150,.55) 50%,var(--rule) 82%,transparent 100%)
}

/* ── C6: o cartão de dúvida era o único com folga interna própria ─────────
   18,4px contra os 24px de todos os outros cartões da página. Num scroll
   contínuo o olho compara caixa com caixa, e 23% de diferença aparece. */
@media (max-width:560px){
  .q__body{padding:1.25rem}
}

/* ── C7: no FAQ mobile a resposta era 40px mais larga que a pergunta ──────
   Os dois textos são centralizados, então a caixa de leitura mudava de
   tamanho quando o acordeão abria. Os 2,75rem são o mínimo simétrico que a
   seta exige à direita. */
@media (max-width:900px){
  .faq__a{padding-inline:2.75rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   C2 — o vão morto entre o CTA do hero e a S2 no celular

   Medido: 282,9px no celular e 420,2px no tablet, 41% de uma tela de verde
   vazio entre a promessa e o próximo argumento, no ponto de maior risco de
   abandono. É o mesmo defeito documentado no topo deste arquivo, que voltou
   quando a foto saiu do mobile: ela é que preenchia essa faixa.

   S1 e S2 têm o MESMO fundo, então a sobra do hero e a abertura da S2 leem
   como um vão só. Duas medidas, somando cerca de 90px:

   1. o bloco de mensagem desce: o hero abre com mais ar no topo e fecha sem
      padding inferior, então a sobra migra para cima do logo, onde lê como
      respiro de marca em vez de buraco;
   2. a S2 abre com --gy em vez de --gy-lg, já que a faixa antes da headline
      dela não começa no zero, começa depois da sobra do hero.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .s-hero{padding-block:clamp(4rem,10svh,6rem) 0}
  .s-hero__grid{min-height:calc(100svh - clamp(4rem,10svh,6rem))}
  .s-declara{padding-top:var(--gy)}
}