/* Pais com Clareza — production stylesheet
   Hero values are ported 1:1 from the approved canvas export.
   Sections 2 & 3 are provisional and refined here. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);font-family:var(--font-sans);color:var(--text-primary)}
img{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}

/* rolagem suave para os âncoras do cabeçalho. Nativa de propósito: o
   navegador já faz a curva certa e não há JS para manter. Vem dentro de
   no-preference porque, com motion reduzido, o salto instantâneo é o
   comportamento pedido — e porque `scroll-behavior` também governa
   window.scrollTo() e scrollIntoView({behavior:'auto'}), então deixá-la
   global tornaria "instantâneo" impossível de pedir no JS. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

.content-max{max-width:var(--content-max);margin:0 auto}

/* ---------- shared bits ---------- */

.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-5);font-weight:700;font-size:var(--eyebrow);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--action-primary)}
.eyebrow-on-dark{color:var(--green-300)}
.eyebrow-center{justify-content:center}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--green-500);flex-shrink:0}

.section-title{font-weight:800;line-height:var(--lh-tight);letter-spacing:-0.02em;color:var(--ink-800);margin:0 0 var(--space-5) 0}
.section-body{font-weight:400;font-size:var(--body-lg);line-height:var(--lh-relaxed);color:var(--ink-600);margin:0 0 var(--space-5) 0}

/* ---------- hero ---------- */

/* min-height uses the full viewport (100vh, refined to 100svh where the
   browser supports it) so the hero always fills the first screen exactly —
   no strip of the next section peeking in at load. the previous
   clamp(720px,94vh,920px) capped out below viewport height on common
   desktop sizes (1440x900, 1920x1080), which is what let the video section
   show through at scroll position 0. mobile keeps the old clamp (see the
   max-width:640px override below) since its composition was tuned against it. */
/* transform:translateZ(0) promotes the whole hero to its own compositing
   layer, isolating the backdrop-filter blurs inside (.nav/.hero-card/
   .hero-stats — they sample .hero-bg, itself a filtered + transformed layer)
   from unrelated repaints. this is a mitigation, not a full fix: Chromium on
   Windows has a long-standing unresolved bug where backdrop-filter can
   glitch for one frame on ANY window-level repaint, including hovering
   browser chrome outside the page (extension icons, tab tooltips) — that
   trigger is outside what page CSS/JS can control. accepted as a known,
   cosmetic, browser-level issue rather than removing the blur design. */
.hero{position:relative;min-height:clamp(720px,94vh,920px);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;font-family:var(--font-sans);isolation:isolate;transform:translateZ(0);padding-top:var(--header-h)}

/* --par (scroll parallax) and --enter-s (entrance settle) are composed into
   the existing transform; both default to a no-op, so the rendered result is
   identical to before when no motion is running. will-change:transform keeps
   this large, filtered, 1.4x-scaled image on its own permanent GPU layer:
   without it, rewriting --par every scroll frame (see hero motion script)
   made Chromium occasionally fail to re-rasterize the layer in time, leaving
   a blank strip of the section background unpainted mid-scroll. */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:translateY(var(--par,0px)) scale(calc(1.4 * var(--enter-s,1))) translateX(10%);transform-origin:center;filter:saturate(0.94) contrast(1.03);will-change:transform;z-index:0}

/* SEM mix-blend-mode, de propósito. Esta camada é full-bleed e fica DENTRO
   do backdrop que .hero-card e .hero-stats amostram com backdrop-filter: um
   blend mode obriga o Chromium a ler o destino de volta e a compor a tint
   sobre a foto ANTES de qualquer desfoque poder amostrar, serializando
   raster da foto → blend → scrim → desfoque. Sem ele a tint é uma camada
   source-over trivial.
   A cor foi reajustada para render o mesmo resultado: multiply de #0A2E3B a
   7% equivale a escurecer por fatores R 0,933 / G 0,943 / B 0,946; uma
   camada normal a 6% dá 0,942 / 0,945 / 0,948. A diferença máxima é de ~2,5
   níveis em 255, nos realces mais claros — abaixo do ruído de quantização
   de 8 bits. Não devolver o blend sem refazer essa conta. */
.hero-overlay-tint{position:absolute;inset:0;z-index:1;background:var(--teal-900);opacity:0.06}

.hero-overlay-scrim{position:absolute;inset:0;z-index:1;background:
  radial-gradient(72% 88% at 4% 34%, rgba(10,46,59,0.92) 0%, rgba(10,46,59,0.84) 30%, rgba(10,46,59,0.66) 48%, rgba(10,46,59,0.42) 62%, rgba(10,46,59,0.22) 74%, rgba(10,46,59,0.08) 86%, rgba(10,46,59,0) 95%),
  radial-gradient(48% 62% at 4% 80%, rgba(10,46,59,0.46) 0%, rgba(10,46,59,0.18) 45%, rgba(10,46,59,0) 78%),
  radial-gradient(34% 50% at 100% 62%, rgba(10,46,59,0.2) 0%, rgba(10,46,59,0) 72%),
  linear-gradient(to bottom, rgba(10,46,59,0.28) 0%, rgba(10,46,59,0) 22%, rgba(10,46,59,0) 60%, rgba(10,46,59,0.5) 82%, rgba(10,46,59,0.78) 100%)}

/* altura do cabeçalho em repouso e preso. Vivem no :root porque não é só o
   header que as usa: o hero devolve com padding-top o espaço que o header
   deixou de ocupar no fluxo, e as âncoras usam a altura do estado preso no
   scroll-margin-top. Nenhum dos dois é descendente do <header>. */
:root{--header-h:126px;--header-h-stuck:70px}
@media (max-width:640px){:root{--header-h:70px;--header-h-stuck:56px}}
@media (max-width:640px) and (max-height:700px){:root{--header-h:64px;--header-h-stuck:52px}}

/* toda seção que é destino de âncora precisa parar ABAIXO do cabeçalho
   preso; sem isto elas aterrissam por baixo dele. Vale em especial para
   #mensagem, cujo CTA do hero rola até lá e dá play no vídeo — chegar
   coberto pela metade estragaria justamente esse gesto. */
#topo,#mensagem,#metodo,#jornadas,#por-tras,#depoimentos,#planos,#duvidas{scroll-margin-top:calc(var(--header-h-stuck) + 12px)}

/* ---- cabeçalho fixo ----
   `fixed` desde o primeiro paint, não a partir de um gatilho: entrar em
   fixed no meio da rolagem tira a altura do fluxo de uma vez e a página
   salta. Em repouso ele flutua transparente sobre a foto do hero, como
   sempre foi; o hero devolve o espaço com padding-top (abaixo).

   Ele só existe fora do hero porque precisa: `.hero` tem
   transform:translateZ(0) (§9) e um fixed descendente de um ancestral com
   transform se posiciona em relação a esse ancestral, não à viewport.

   z-index 9 — acima de tudo que a página usa (o teto era 8, da barra de
   cookies). O <dialog> de soluções é top layer e não é afetado. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:9;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:30px clamp(28px,5vw,72px);transition:padding var(--duration-base) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}

/* preso: o hero saiu de trás dele. Fundo SÓLIDO em Deep Teal — a mesma cor
   do hero, de #planos e do rodapé —, o que resolve o contraste sobre as
   seções marfim sem precisar inverter as cores do nav: a pílula branca
   translúcida continua legível sobre teal. */
.site-header.is-stuck{padding:10px clamp(28px,5vw,72px);background-color:var(--teal-900);box-shadow:0 1px 0 rgba(155,198,216,0.16),0 10px 28px -20px rgba(4,18,24,0.8)}

/* a marca encolhe para o cabeçalho preso caber em ~68px: sai o que é
   identidade de abertura (tagline e credenciais, que o §4 já repete no
   rodapé e na seção de origem) e fica o wordmark. */
.site-header.is-stuck .brand-tagline,
.site-header.is-stuck .brand-credentials{display:none}
.site-header.is-stuck .brand-mark{width:34px;height:34px}
.site-header.is-stuck .brand-name{font-size:21px}

/* SEM backdrop-filter quando preso. Num elemento fixo o desfoque é refeito
   a cada frame de rolagem — a causa já documentada da lentidão da
   .sm-buybar (§11.1) — e ainda alimenta o bug de flicker do Chromium no
   Windows (§9). Com fundo opaco atrás, não há o que desfocar: é só custo.
   A opacidade do fundo da pílula sobe um pouco para compensar o vidro que
   deixou de existir. */
.site-header.is-stuck .nav,
.site-header.is-stuck .nav-toggle{-webkit-backdrop-filter:none;backdrop-filter:none}
/* só acima de 640px, onde .nav é a pílula. Abaixo disso o MESMO elemento é
   o painel dropdown, com fundo teal sólido a 0,95 — e esta regra, mais
   específica, o apagava: com o cabeçalho preso o menu virava vidro branco
   sem blur, links brancos sobre marfim. */
@media (min-width:641px){
  .site-header.is-stuck .nav{background:rgba(255,255,255,0.1)}
}
.site-header.is-stuck .nav-toggle{background:rgba(255,255,255,0.12)}

.brand{display:flex;align-items:center;gap:13px;cursor:pointer}
.brand:focus-visible{outline:2px solid var(--green-300);outline-offset:6px;border-radius:var(--radius-md)}
.brand-mark{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,0.22)}
/* giro de "voltar ao início" no clique — ver a IIFE logo depois do menu
   mobile em index.html. Curva simétrica de aceleração/desaceleração e
   900ms de propósito: rápido o bastante para não atrasar a rolagem que
   acontece junto, lento o bastante para ler como gesto, não como piscada.
   Só a marca gira — o wordmark ao lado fica parado, então o nome nunca
   fica ilegível no meio do giro. */
@keyframes brand-mark-spin{to{transform:rotate(360deg)}}
.brand-mark.is-spinning{animation:brand-mark-spin 900ms cubic-bezier(.65,0,.35,1)}
@media (prefers-reduced-motion:reduce){
  .brand-mark.is-spinning{animation:none}
}
.brand-text{display:flex;flex-direction:column;gap:3px}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:26px;color:var(--white);letter-spacing:-0.02em}
.brand-tagline{font-weight:600;font-size:11px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:rgba(247,245,239,0.78)}
/* registro profissional — discreto por natureza: mais leve e menor que a
   tagline, para nunca competir com o nome da marca. */
.brand-credentials{font-weight:500;font-size:9.5px;letter-spacing:0.03em;color:rgba(247,245,239,0.5)}

/* transform:translateZ(0) forces a real, persistent GPU layer — will-change
   alone is only a hint and Chromium can drop it, which is why the nav-link
   hover was still repainting this blur (and the hero-card/hero-stats blurs,
   all sampling the same hero-bg backing) in the same shared layer. */
.nav{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-pill);padding:6px 6px 6px 22px;backdrop-filter:blur(10px);transform:translateZ(0)}
.nav-link{font-weight:600;font-size:14px;color:rgba(247,245,239,0.9);padding:8px 16px;transition:color var(--duration-fast) var(--ease-standard)}
.nav-link:hover{color:var(--green-300)}
.nav-cta{font-weight:700;font-size:13px;color:var(--teal-700);background:var(--white);padding:9px 20px;border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-standard)}
.nav-cta:hover{background:var(--green-300);color:var(--teal-700)}

/* mobile menu trigger — hidden on desktop, where the nav pill is the
   navigation. borrows the pill's own translucent-on-photo treatment so it
   reads as part of the same header, not a bolted-on control. */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;padding:0;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:var(--radius-md);backdrop-filter:blur(10px);will-change:transform;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.32)}
.nav-toggle:focus-visible{outline:2px solid var(--green-300);outline-offset:3px}
.nav-toggle-bars{position:relative;display:block;width:18px;height:12px}
.nav-toggle-bars span{position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;background:var(--ivory-50);transition:transform var(--duration-base) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard)}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){top:5.25px}
.nav-toggle-bars span:nth-child(3){bottom:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

/* capped so the header→copy gap can't grow past its original proportion on
   tall desktop viewports now that .hero fills the full 100svh (previously
   the hero itself topped out around 920px, so this gap never got large
   enough to need a cap). any extra room the 100vh fix adds beyond the cap
   is left as hero background below the stats bar instead of stacking up
   here, which is what keeps the copy block from drifting toward vertical
   center on very tall screens. */
.hero-spacer{position:relative;z-index:2;flex:1;max-height:60px}

.hero-content-row{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding:0 clamp(28px,5vw,72px);margin-bottom:var(--space-8)}

.hero-copy{max-width:min(40vw,440px)}
.hero-title{font-family:var(--font-display);font-weight:600;font-size:clamp(2.55rem,1.95rem + 2.5vw,4.1rem);line-height:var(--lh-tight);letter-spacing:-0.02em;color:var(--white);margin:0 0 var(--space-5) 0;max-width:14.5ch}
.hero-lead{font-weight:400;font-size:var(--body-lg);line-height:var(--lh-relaxed);color:rgba(247,245,239,0.86);margin:0 0 var(--space-7) 0;max-width:440px}
.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:var(--radius-lg);font-family:var(--font-sans);font-weight:600;font-size:15px;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.btn-outline-light{gap:11px;padding:0 22px;border:1px solid rgba(255,255,255,0.38);background:rgba(255,255,255,0.06);color:var(--white)}
.btn-outline-light:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.55);color:var(--white)}
.icon-circle{width:24px;height:24px;flex-shrink:0;border-radius:50%;border:1px solid rgba(255,255,255,0.6);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.icon-circle-arrow{width:13px;height:13px;color:var(--white);transition:transform var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.btn-outline-light:hover .icon-circle{background:var(--green-500);border-color:var(--green-500);transform:scale(1.08)}
.btn-outline-light:hover .icon-circle-arrow{transform:translateX(2px);color:var(--teal-900)}

/* hero primary CTA — gradient button, "Pais com Clareza" palette only.
   layered pseudo-surfaces inside the anchor: a slow idle sage-to-leaf radial
   shimmer, a second (initially transparent) deeper teal/blue radial that
   crossfades in on hover, a soft vignette behind the label guaranteeing WCAG
   contrast in both states regardless of the shimmer's animated phase, and a
   hairline animated gradient ring. plain CSS/keyframes — no framework,
   matching this static site's stack.
   contrast was verified numerically (WCAG relative-luminance formula) against
   the worst-case gradient stop in each state, not just eyeballed: the idle
   vignette keeps teal-700 text >=4.9:1 even over pure leaf-green, and the
   hover vignette keeps white text >=5.6:1 even over the lightest sage stop. */
.btn-gradient{position:relative;isolation:isolate;overflow:hidden;background:var(--ivory-50);color:var(--teal-700);box-shadow:0 12px 26px -12px rgba(9,75,95,0.32),0 2px 8px -2px rgba(139,179,60,0.22);transition:box-shadow 500ms var(--ease-standard),color 500ms var(--ease-standard)}

.btn-gradient-bg{position:absolute;inset:0;z-index:0;border-radius:inherit;background:radial-gradient(135% 160% at 18% -20%, var(--g1) 0%, var(--g2) 30%, var(--g3) 55%, var(--g4) 78%, var(--g5) 100%);background-size:220% 220%;background-position:0% 30%;animation:btn-gradient-drift 9s ease-in-out infinite;--g1:#F7F5EF;--g2:#EAF0E1;--g3:#D7E8B9;--g4:#B5D474;--g5:#8BB33C}

.btn-gradient-bg--hover{opacity:0;transition:opacity 500ms var(--ease-standard);animation-duration:6s;--g1:#EAF0E1;--g2:#CFE3A2;--g3:#8BB33C;--g4:#61A4BF;--g5:#094B5F}

.btn-gradient-scrim{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 130% at 50% 50%, rgba(247,245,239,0.34) 0%, rgba(247,245,239,0.16) 45%, rgba(247,245,239,0) 78%)}

.btn-gradient-scrim--hover{opacity:0;transition:opacity 500ms var(--ease-standard);background:radial-gradient(60% 130% at 50% 50%, rgba(9,75,95,0.82) 0%, rgba(9,75,95,0.5) 45%, rgba(9,75,95,0) 80%)}

.btn-gradient-border{position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(115deg, rgba(139,179,60,0.55) 0%, rgba(97,164,191,0.5) 45%, rgba(9,75,95,0.4) 70%, rgba(139,179,60,0.55) 100%);background-size:260% 260%;background-position:0% 50%;-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:btn-gradient-drift 9s ease-in-out infinite reverse;opacity:0.9}

.btn-gradient-label{position:relative;z-index:3;transition:color 500ms var(--ease-standard)}

.btn-gradient:hover,.btn-gradient:focus-visible{box-shadow:0 18px 34px -14px rgba(9,75,95,0.4),0 4px 14px -4px rgba(9,75,95,0.28)}
.btn-gradient:hover .btn-gradient-bg--hover,.btn-gradient:focus-visible .btn-gradient-bg--hover{opacity:1}
.btn-gradient:hover .btn-gradient-scrim--hover,.btn-gradient:focus-visible .btn-gradient-scrim--hover{opacity:1}
.btn-gradient:hover .btn-gradient-label,.btn-gradient:focus-visible .btn-gradient-label{color:var(--white)}

.btn-gradient:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ivory-50),0 0 0 5px var(--teal-700)}

@keyframes btn-gradient-drift{
  0%,100%{background-position:0% 30%}
  50%{background-position:100% 70%}
}

@media (prefers-reduced-motion:reduce){
  .btn-gradient-bg,.btn-gradient-bg--hover,.btn-gradient-border{animation:none}
  .nav,.nav-toggle-bars span{transition:none}
}

.hero-card{background:linear-gradient(160deg,rgba(10,46,59,0.62) 0%,rgba(10,46,59,0.48) 100%);border:1px solid rgba(255,255,255,0.42);border-radius:var(--radius-lg);backdrop-filter:blur(14px);will-change:transform;box-shadow:0 20px 40px -16px rgba(4,18,24,0.55);padding:20px 24px;max-width:246px;margin:0 clamp(0px,5vw,88px) clamp(40px,9vw,104px) 0}
.hero-card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hero-card-dot{width:6px;height:6px;border-radius:50%;background:var(--green-500)}
.hero-card-name{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-0.01em;color:var(--white)}
/* credencial — lida como registro profissional (versalete, letterspacing),
   não como um destaque de marketing: por isso mais discreta que as linhas
   de especialidade abaixo, não mais chamativa. */
.hero-card-credential{display:block;font-weight:700;font-size:10px;letter-spacing:0.05em;text-transform:uppercase;color:rgba(247,245,239,0.56);margin-bottom:7px}
.hero-card-line{display:block;font-weight:500;font-size:12px;color:rgba(247,245,239,0.92);line-height:1.44}
.hero-card-line-last{margin-bottom:12px}
.hero-card-divider{height:1px;background:rgba(255,255,255,0.28);margin-bottom:12px}
.hero-card-quote{display:block;font-weight:700;font-size:13.5px;line-height:1.5;color:var(--white)}

.hero-stats-wrap{position:relative;z-index:2;padding:0 clamp(28px,5vw,72px) clamp(30px,4vw,44px)}
.hero-stats{display:inline-flex;align-items:stretch;background:rgba(247,245,239,0.07);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-lg);backdrop-filter:blur(10px);will-change:transform;padding:20px clamp(24px,3.6vw,36px);gap:clamp(28px,4vw,48px);flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.stat-value{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,1vw + 17px,27px);letter-spacing:-0.02em;color:var(--white);white-space:nowrap}
.stat-label{font-weight:500;font-size:12.5px;color:rgba(247,245,239,0.62);white-space:nowrap}
.stat-divider{width:1px;flex-shrink:0;align-self:center;height:34px;background:rgba(139,179,60,0.55)}

@media (max-width:900px){
  .hero-content-row{align-items:flex-start}
  .hero-copy{max-width:min(60vw,440px)}
  .hero-card{margin-right:0}
}

/* ---- hero, mobile ----
   desktop-only values are left untouched above; everything below 640px is an
   override, and the composition here is a different shape from desktop's,
   not a shrunk copy of it.

   reading order, top to bottom: header, eyebrow, headline, paragraph, then
   Dr. Juarez himself as a full-width photo band — face, shoulders and the
   stethoscope, nothing else competing with him — then the two CTAs, then
   the credential card merged with the stats row underneath it. text never
   sits on the photograph and the photograph never sits on text: they are
   separate flex children stacked in sequence, so neither can encroach on
   the other regardless of how the copy wraps or how tall the panel gets.

   getting the CTAs to render AFTER a photo that is written before them in
   the markup (the eyebrow/title/lead/actions block is one HTML unit, kept
   intact so desktop's two-column row — copy on the left, card on the right —
   needs no changes at all) is what the two `display:contents` rules below
   are for: they dissolve `.hero-content-row` and `.hero-copy` as BOXES on
   mobile only, promoting eyebrow/title/lead/actions to be direct flex
   children of `.hero` itself, in the same document positions, just no
   longer grouped in one shared box. `order` then places all eight of the
   hero's flex children (header, eyebrow, title, lead, portrait, actions,
   card, stats) in the sequence above regardless of DOM position. because
   `.hero-copy`'s own padding disappears along with its box, eyebrow/title/
   lead/actions each carry that horizontal inset directly now.

   the portrait itself is not the desktop's full-bleed absolute image
   reframed — it sits between two blocks of real content in the flow rather
   than bleeding under them. `.hero-portrait-frame` is a plain, unpositioned
   box on desktop (so `.hero-bg`'s `position:absolute;inset:0` still
   escalates past it to `.hero`, exactly as before — this is why the frame,
   and now the `<picture>` inside it, can wrap the image in the markup at
   all without touching desktop).

   every prior pass here was solving a problem this one no longer has. the
   original photo was a studio shot on a flat light-grey backdrop — full
   frame, opaque, rectangular — so getting him to feel like part of the hero
   rather than "a photo laid on top of it" meant cropping, masking and
   ever-more-careful vignettes to hide that backdrop's own hard edges
   without also hiding him. a rounded-rectangle mask still read as a
   rectangle away from its corners; a true radial oval fixed that but then
   read as a spotlight cut into the scene, because a clean closed curve of
   light against a flat dark surround always reads as a shape, no matter how
   soft its edge is. every fix was aimed at the same wall: there was a hard
   rectangle of pixels behind him that had to be disguised.
   mobile now uses a *different source image* — `<picture>`'s `<source>`
   swaps to a version with the backdrop removed at the pixel level (alpha
   transparency, not a mask simulating it), while the `<img>`'s own `src`
   stays the original full-bleed photo for anything above 640px, so desktop
   is untouched. there is no backdrop left to hide, which means there is
   nothing left to mask: the image renders at its own natural aspect
   (`width:100%;height:auto`, no absolute positioning, no crop math), and
   wherever there is no man there is simply nothing painted — the frame's
   own soft glow behind it shows straight through, with whatever silhouette
   his hair, shoulders and the stethoscope actually have, not a shape a
   gradient approximated. that silhouette is what makes this read as
   "integrated" rather than "masked": an oval or a rectangle is a shape
   nothing in the scene actually has; the true outline of a person is not,
   and never reads as a cutout the way even a very soft geometric one does. */
@media (max-width:640px){
  .hero{
    /* restore the pre-fix viewport-unit behavior: mobile's sequential
       flex composition (portrait band, CTAs, merged card/stats) was tuned
       against this clamp, not against 100svh. */
    min-height:clamp(720px,94vh,920px);
    background:
      radial-gradient(124% 54% at 6% 0%, #114D62 0%, rgba(17,77,98,0) 66%),
      linear-gradient(180deg, #0C3746 0%, var(--teal-900) 45%, #072530 100%);
  }

  /* dissolve the desktop-only grouping boxes so every text element and the
     actions block can be placed independently by `order` (see the banner
     comment above). this is a rendering-only change — the DOM nodes, and
     every selector that targets them, are untouched. */
  .hero-content-row{display:contents}
  .hero-copy{display:contents}

  .hero-copy .eyebrow{order:2}
  .hero-title{order:3}
  .hero-lead{order:4}
  .hero-portrait-frame{order:5}
  .hero-actions{order:6}
  .hero-card{order:7}
  .hero-stats-wrap{order:8}

  /* unused in this composition — it existed only to reserve room for the
     old bottom-anchored photo. hiding it (rather than leaving it an
     order-less stray) keeps the flex order list above the whole story. */
  .hero-spacer{display:none}
  /* was readability aids for the old full-bleed photo (a scrim to darken
     the studio backdrop under the copy). the cutout has no backdrop to
     darken, so these have nothing left to do. */
  .hero-overlay-tint,.hero-overlay-scrim{display:none}

  /* the frame's own background is a dark hand-off, not a glow — the
     previous version used ivory/soft-blue tones here (0.1-0.2 alpha) to
     warm the hand-off into the CTA, and on a real phone that read as
     exactly what it was: a pale smear sitting low in the photo, "a white
     halo in the PNG". the fix isn't softer white, it's no white: the fade
     is built from --teal-900 itself, so wherever it shows through the
     cutout's edges it reads as the hero's own petrol continuing, not as a
     light source of its own. solid at the very bottom (where his cut-off
     forearms need somewhere to fade into) and gone by 58% up, well clear
     of his face and most of his torso. */
  .hero-portrait-frame{
    position:relative;overflow:hidden;width:100%;
    background:linear-gradient(to top,
      var(--teal-900) 0%,
      rgba(10,46,59,0.65) 16%,
      rgba(10,46,59,0.28) 34%,
      rgba(10,46,59,0) 58%)}

  .hero-portrait-frame picture{display:block;width:100%}

  /* `position:static` is the one property that actually matters here: the
     base (desktop) rule sets `position:absolute;inset:0`, and without an
     explicit override that cascades straight through — an absolutely
     positioned image contributes nothing to the frame's height, and the
     frame's `overflow:hidden` then clips the whole thing to nothing. back
     in normal flow, the cutout renders at its own aspect ratio (full width,
     height auto), so the frame's height is simply whatever that produces;
     short screens shrink it via max-width further down, which scales both
     dimensions together since height is auto.
     the mask is new: the source file itself cuts his forearms off with only
     2-3px of real anti-aliasing (a photographer's crop, not a fade), so
     without help the "recorte" ends as abruptly as the old opaque photo
     did — just on an irregular silhouette instead of a rectangle. fading
     the last 12% of the rendered image to transparent lets the frame's dark
     tail (above) show through as HIM dissolving into the petrol, rather
     than his sleeve stopping dead against it. 12% sits well below the
     stethoscope's chest-piece (~85% of this frame), so nothing that needs
     to stay legible is touched. transform is kept, not for parallax (mobile
     always zeroes --par via JS) but because the entrance animation's
     settle-in scale(--enter-s) still targets this rule. */
  .hero-bg{
    position:static;display:block;width:100%;height:auto;
    /* reserva a altura antes do PNG decodificar. o <img> não pode carregar
       width/height como atributos porque o <source> mobile tem outra
       proporção (1193x1318) que a do src desktop (1536x1024) — os atributos
       valem para os dois e dariam a caixa errada aqui. a proporção do
       arquivo que realmente é usado neste breakpoint entra por CSS. */
    aspect-ratio:1193/1318;
    transform:translateY(var(--par,0px)) scale(var(--enter-s,1));
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%)}

  /* .site-header and the hero content are z-index:2 siblings, so the
     headline (later in the DOM) painted over the dropdown — the nav's own
     z-index is trapped inside the header's stacking context. lifting the
     header above the hero content is what actually puts the panel on top. */
  .site-header{padding:13px clamp(28px,5vw,72px);flex-wrap:nowrap}
  .site-header.is-stuck{padding:6px clamp(28px,5vw,72px)}
  /* at 360px the wordmark plus the 44px trigger overflowed the row and wrapped,
     costing ~60px of header height. */
  .brand{min-width:0}
  .brand-mark{width:40px;height:40px}
  .brand-name{font-size:21px}
  .brand-tagline{font-size:10px}
  /* the full CRM/RQE line now lives, complete, in the authority panel below
     — repeating it here would be the same fact twice on one screen. */
  .brand-credentials{display:none}

  /* each of these carries the horizontal inset `.hero-copy` used to provide
     as a single padding declaration — see the banner comment on why that
     box is gone on mobile. */
  .hero-copy .eyebrow{margin-bottom:10px;padding-left:clamp(28px,5vw,72px);padding-right:clamp(28px,5vw,72px)}
  .hero-title{font-size:1.94rem;line-height:1.1;letter-spacing:-0.022em;margin-bottom:12px;max-width:none;padding-left:clamp(28px,5vw,72px);padding-right:clamp(28px,5vw,72px)}
  /* the gap below is what separates the text block from the photo — a
     deliberate beat, not dead air, since nothing else sits between them. */
  .hero-lead{font-size:15.5px;line-height:1.56;margin-bottom:20px;max-width:none;color:rgba(247,245,239,0.8);padding-left:clamp(28px,5vw,72px);padding-right:clamp(28px,5vw,72px)}

  /* both actions full width and stacked: one predictable touch target each,
     and the gradient CTA stays the dominant one by contrast alone. no
     longer the hero's focal element by size or position — Dr. Juarez, right
     above, is. the gap above went 18px, 6px, 0 — flush read as cramped once
     his own edge started fading into the frame's dark tail rather than
     stopping hard, so there was no longer a seam to close by touching. 14px
     is enough air for the CTA to read as its own element, not stacked
     directly on him. */
  .hero-actions{flex-direction:column;align-items:stretch;gap:11px;margin-top:14px;padding-left:clamp(28px,5vw,72px);padding-right:clamp(28px,5vw,72px)}
  .hero-actions .btn{width:100%;height:52px}

  /* MESMO `order` dos botões, e não um valor novo: itens de ordem igual
     seguem a ordem do DOM entre si, e a legenda já vem depois de
     `.hero-actions` na marcação. Assim ela aterrissa logo abaixo deles sem
     renumerar retrato/CTAs/card/stats (§7.1). Como as outras peças da
     coluna, carrega o recuo lateral da página como padding — a caixa do
     `.hero-copy` não existe mais aqui. */
  .hero-note{order:6;margin-top:11px;max-width:none;text-align:center;font-size:12.5px;padding-left:clamp(28px,5vw,72px);padding-right:clamp(28px,5vw,72px)}

  /* o selo encolhe: a 13px o texto inteiro não cabe numa linha a 375px e a
     pílula quebraria em duas, o que a faria ler como caixa de aviso e não
     como etiqueta. */
  .eyebrow--prelaunch{font-size:10.5px;letter-spacing:0.06em}
  .eyebrow-pill{padding:6px 12px 6px 10px;gap:7px}

  /* authority panel, mobile — one glass card, not two. the identity block
     keeps its own top/side chrome; the stats block below drops its matching
     edge and inherits the identity block's tone, so the seam between them
     reads as a single internal divider rather than a gap between cards. */
  .hero-card{max-width:none;margin:16px clamp(28px,5vw,72px) 0;padding:15px 18px 13px;background:rgba(9,36,46,0.88);border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none}
  .hero-card-header{margin-bottom:6px}
  .hero-card-credential{font-size:9.5px;margin-bottom:5px}
  .hero-card-line{font-size:11.5px;line-height:1.42}
  .hero-card-line-last{margin-bottom:0}
  .hero-card-divider{margin-top:11px;margin-bottom:0}
  /* the quote restates "+30 anos", which the stats row below says again in
     the same glance — redundant once the two panels sit on top of each
     other, so only the panel keeps it. */
  .hero-card-quote{display:none}

  .hero-stats-wrap{padding:0 clamp(28px,5vw,72px) 22px}
  .hero-stats{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:space-between;width:100%;gap:6px;padding:13px 16px 15px;background:rgba(9,36,46,0.88);border:1px solid rgba(255,255,255,0.42);border-top:none;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);box-shadow:0 20px 40px -16px rgba(4,18,24,0.55);backdrop-filter:blur(14px)}
  .stat{flex:1;min-width:0;align-items:center;text-align:center;gap:2px}
  .stat-value{font-size:14px;line-height:1.2;white-space:normal}
  .stat-label{font-size:9px;line-height:1.28;white-space:normal;color:rgba(247,245,239,0.6)}
  .stat-divider{display:block;width:1px;height:auto;align-self:stretch;background:rgba(255,255,255,0.2)}

  /* below ~620px the nav pill cannot share the row with the wordmark. rather
     than wrapping it to a second line (which cost ~80px of header height), the
     same element becomes a dropdown panel anchored under the trigger — one
     set of links, two presentations, so nothing is duplicated in the DOM. */
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;top:calc(100% - 6px);right:clamp(28px,5vw,72px);z-index:6;flex-direction:column;align-items:stretch;gap:2px;min-width:210px;padding:10px;background:rgba(10,46,59,0.95);border:1px solid rgba(255,255,255,0.16);border-radius:var(--radius-lg);box-shadow:0 24px 48px -22px rgba(4,18,24,0.78);opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.97);transform-origin:top right;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 180ms}
  .nav[data-open="true"]{opacity:1;visibility:visible;transform:none}
  .nav-link{padding:12px 14px;border-radius:var(--radius-sm);font-size:15px}
  .nav-link:hover{background:rgba(255,255,255,0.07)}
  .nav-cta{margin-top:6px;padding:13px 14px;text-align:center;font-size:14px}
}

@media (max-width:420px){
  .hero-title{font-size:1.8rem}
  .hero-lead{font-size:15px}
}

/* short phones (an SE, an older 640-tall Android): trims the air between
   parts, never a type size or a touch target, so the composition still
   reads as one sequence instead of forcing everything above a fold that
   doesn't need to fit any of it — see the banner comment upstream on why
   this hero no longer chases the first screen. */
@media (max-width:640px) and (max-height:700px){
  .site-header{padding:10px clamp(28px,5vw,72px)}
  .site-header.is-stuck{padding:4px clamp(28px,5vw,72px)}
  .hero-title{margin-bottom:10px}
  .hero-lead{margin-bottom:16px}
  /* shrinks both dimensions together (height is auto, tied to width) rather
     than a separate height variable — margin:auto re-centers what's now
     narrower than the frame. */
  .hero-bg{max-width:80%;margin:0 auto}
  .hero-actions{margin-top:10px;gap:10px}
  .hero-actions .btn{height:50px}
  .hero-card{margin-top:14px}
}

/* ---- hero, mobile — ambient background ----
   structure, portrait and copy above are untouched. this has been through
   two prior passes: thin brand-mark squiggles (read as linework clutter),
   then small, quiet corner blobs (correctly quiet, but too quiet — the
   surround still read as flat and dead, which is exactly what made the
   portrait's own soft edges look like a spotlight rather than a person in a
   scene: a closed curve of light against a flat field always reads as a cut,
   no matter how soft its edge is), then a pair of thin brand-circle rings —
   which turned out to read as exactly what they are, an empty outline, not
   a brand cue. what replaces the rings here is the mark's actual colour
   idea rather than its silhouette: the logo is two soft-edged fields, deep
   teal upper-left and leaf green lower-right, overlapping on a diagonal.
   two overlapping radial gradients inside the same corner footprint (teal
   at roughly one-third in, green at two-thirds) reproduce that same
   diagonal relationship as ambient colour, with no ring, no outline, no
   shape a viewer could trace — it reads as "this brand's light", not as a
   drawn icon.

   two pseudo-elements, no new markup: `::before` covers the zone above and
   around the portrait, `::after` the zone below it. both span the hero's
   full box so nothing has to be measured, and every shape is a fixed,
   no-repeat background layer pinned to a corner, blobs bleeding off-canvas
   via a negative position offset. `z-index:-1` keeps all of it strictly
   behind every real child of `.hero`, including the ones that are
   themselves positioned (the header, the portrait frame) — negative
   stacking levels always paint before the positioned-auto/0 level those
   sit at, regardless of DOM or flex order — so nothing here ever competes
   with text, buttons, or the card; where a shape's corner happens to fall
   behind one of those, the element's own background simply covers it, same
   as it always did. the three small dots this section briefly had (a
   literal echo of the reference) are gone — a separate, deliberate removal,
   asked for on its own terms rather than a side effect of the seam fix. */
@media (max-width:640px){
  .hero::before,.hero::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}

  /* the actual top-right seam bug, finally: layers 2 and 3 here were
     `radial-gradient(circle at 32% 30%, ...)` with NO size keyword, which
     defaults to `farthest-corner` — for a circle centred near a box's own
     top-left, that corner is the FAR side, so the radius is huge (over
     300px in a 320px tile) and the 64% stop (≈200px) lands well past the
     tile's own near edges (96px to the top, 102px to the left). those edges
     were still inside the gradient's fading zone, not yet at zero — a real,
     literal rectangle of residual colour sitting at the tile's own top/left
     boundary, which is what was cutting across the hero's top-right corner.
     the earlier portrait-frame investigation blamed the wrong layer entirely
     — this one was never touched by that fix. `closest-side` is the size
     that actually matters here: it sets the radius to the NEAREST edge
     (96px for this centre), so that edge sits exactly at the gradient's own
     100%, past the 64% stop where it's already long transparent — the same
     safe construction the first (outer) blob layer already used correctly. */
  .hero::before{
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-image:
      radial-gradient(closest-side,rgba(139,179,60,0.24) 0%,rgba(139,179,60,0.11) 48%,rgba(139,179,60,0) 100%),
      radial-gradient(closest-side circle at 32% 30%,rgba(15,100,128,0.3) 0%,rgba(15,100,128,0.14) 48%,rgba(15,100,128,0) 100%),
      radial-gradient(closest-side circle at 68% 68%,rgba(139,179,60,0.26) 0%,rgba(139,179,60,0.12) 48%,rgba(139,179,60,0) 100%);
    background-position:
      top -130px left -130px,
      top 30px right -110px,
      top 30px right -110px;
    background-size:
      380px 380px,
      320px 320px,
      320px 320px}

  .hero::after{
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-image:
      radial-gradient(closest-side,rgba(139,179,60,0.2) 0%,rgba(139,179,60,0.09) 50%,rgba(139,179,60,0) 100%),
      radial-gradient(closest-side circle at 30% 32%,rgba(15,100,128,0.26) 0%,rgba(15,100,128,0.12) 48%,rgba(15,100,128,0) 100%),
      radial-gradient(closest-side circle at 66% 66%,rgba(139,179,60,0.22) 0%,rgba(139,179,60,0.1) 48%,rgba(139,179,60,0) 100%);
    background-position:
      bottom -140px left -130px,
      bottom -110px right -110px,
      bottom -110px right -110px;
    background-size:
      380px 380px,
      340px 340px,
      340px 340px}
}

/* ---------- ponte editorial: vídeo de introdução (hero → seção 2) ----------
   compacta de propósito (~430-500px), não uma seção de conteúdo cheia. usa
   .section-transition (já definido abaixo, para a seção 2) para o mesmo
   hand-off do teal-900 do hero. */
.section-video-intro{position:relative;background:linear-gradient(165deg,var(--blue-100) 0%,var(--ivory-50) 55%,var(--sage-100) 100%);font-family:var(--font-sans);padding:clamp(52px,6.5vw,72px) clamp(28px,5vw,72px);overflow:hidden}

.video-intro-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(60% 70% at 88% 8%,rgba(247,245,239,0.9) 0%,rgba(247,245,239,0) 60%);pointer-events:none}
.video-intro-waves{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.video-intro-waves .wave-desktop{display:none}

.section-video-intro .content-max{position:relative;z-index:1}

.video-intro-grid{display:grid;grid-template-columns:1.12fr 1fr;grid-template-areas:"media head" "media foot";align-items:center;gap:clamp(40px,5vw,72px)}

.video-intro-media{grid-area:media}

.video-poster{position:relative;aspect-ratio:16/10;border-radius:24px;overflow:hidden;box-shadow:0 28px 56px -24px rgba(10,46,59,0.38),0 4px 14px -6px rgba(10,46,59,0.16)}
.video-poster img,.video-el{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;background:var(--teal-900)}
.video-poster-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,46,59,0.06) 0%,rgba(10,46,59,0) 32%,rgba(10,46,59,0.1) 78%,rgba(10,46,59,0.34) 100%);transition:opacity var(--duration-base) var(--ease-standard)}
/* uma vez em reprodução, o navegador assume os controles nativos (play/pause,
   volume, progresso) — nossa scrim, botão e badge somem para não competir
   com eles. */
.video-poster.is-playing .video-poster-scrim,
.video-poster.is-playing .video-play-btn,
.video-poster.is-playing .video-duration-badge{opacity:0;pointer-events:none}

.video-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;display:flex;align-items:center;justify-content:center;padding:0 0 0 3px;background:var(--teal-700);color:var(--ivory-50);border:none;border-radius:50%;box-shadow:0 14px 30px -10px rgba(4,18,24,0.5),0 0 0 6px rgba(247,245,239,0.16);cursor:pointer;transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard),opacity var(--duration-base) var(--ease-standard)}
.video-play-btn::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--green-500);opacity:0;transform:scale(0.85);transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.video-play-btn:hover,.video-play-btn:focus-visible{transform:translate(-50%,-50%) scale(1.06);background:var(--teal-600)}
.video-play-btn:hover::after,.video-play-btn:focus-visible::after{opacity:1;transform:scale(1)}
.video-play-btn:focus-visible{outline:2px solid var(--green-300);outline-offset:4px}
.video-play-btn:active{transform:translate(-50%,-50%) scale(0.98)}

.video-duration-badge{position:absolute;right:16px;bottom:16px;font-weight:700;font-size:11.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--white);background:rgba(10,46,59,0.56);backdrop-filter:blur(6px);border-radius:var(--radius-pill);padding:6px 13px;transition:opacity var(--duration-base) var(--ease-standard)}

.video-intro-copy{display:contents}
.video-intro-head{grid-area:head}
.video-intro-foot{grid-area:foot;padding-top:clamp(18px,2vw,24px)}

.video-intro-title{font-size:clamp(1.65rem,1.3rem + 1.6vw,2.35rem);line-height:1.16;letter-spacing:var(--ls-tight);color:var(--teal-900);margin:0}
.video-intro-body{font-size:var(--body-md);line-height:var(--lh-relaxed);color:var(--ink-600);max-width:42ch;margin:0 0 var(--space-4)}
.video-intro-meta{display:flex;align-items:center;gap:9px;font-weight:700;font-size:12.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--teal-700)}
.video-intro-meta-dot{width:4px;height:4px;border-radius:50%;background:var(--green-500);flex-shrink:0}

@media (max-width:900px){
  .video-intro-grid{grid-template-columns:1fr;grid-template-areas:"head" "media" "foot";gap:clamp(24px,4vw,32px)}
  .video-poster{aspect-ratio:16/11}
  .video-intro-foot{padding-top:0}
}

/* desktop-only compaction: everything here is scoped to min-width:901px so
   the approved mobile/tablet composition above (≤900px) is untouched. the
   bridge was reading as a near full-size section — this tightens padding,
   narrows the video to ~45% of the row so it stops competing with the hero
   and section 2, and trims type/row-gap so the whole thing lands in the
   ~380-460px band instead of ~550px. */
@media (min-width:901px){
  .section-video-intro{padding:clamp(42px,5vw,60px) clamp(28px,5vw,72px)}

  /* fundo premium só de desktop: segunda tentativa. a v1 introduzia tons
     (#1F5661/#2B6670) perceptíveis como "um azul diferente" logo abaixo do
     hero, e dissolvia cedo demais (a partir de 80%) num degradê nebuloso
     longo — a seção lia como neblina, não como um bloco sólido, e a seção 2
     perdia contraste na largada. agora: segura teal-900 (idêntico ao hero)
     por quase metade da seção — sem mudança de matiz logo na emenda —,
     aprofunda para teal-700 (mesma família, só mais rico) até 88%, e só then
     dissolve pro ivory-50 num trecho curto e controlado (~12% da altura,
     mesma escala do .section-transition padrão do site) em vez de um fade
     nebuloso longo. resultado: base sólida e escura na maior parte da seção,
     borda de saída limpa e intencional. mobile/tablet acima fica intocado. */
  .section-video-intro{background:linear-gradient(180deg,
    var(--teal-900) 0%,
    var(--teal-900) 46%,
    var(--teal-700) 74%,
    var(--teal-700) 88%,
    var(--ivory-50) 100%)}
  /* uma única forma orgânica (glow assimétrico, sem linhas) lembrando uma
     onda suave — retintada pra dentro da própria família teal (antes usava
     blue-500, que lia como "um azul à parte"); opacidade reduzida pra não
     competir com o fundo sólido. */
  .video-intro-bg{background:radial-gradient(65% 55% at 22% 18%,rgba(15,100,128,0.12) 0%,rgba(15,100,128,0) 68%)}

  /* transição vinda do hero: mais alta e com decaimento em vários estágios
     (em vez de um degradê linear só) pra ler como neblina se dissolvendo,
     não como uma faixa dura. escopada só à instância desta seção — a da
     seção 2 (que usa a mesma classe) fica com a regra original dela. */
  .section-video-intro .section-transition{height:clamp(90px,10vw,140px);background:linear-gradient(to bottom,var(--teal-900) 0%,rgba(10,46,59,0.55) 32%,rgba(10,46,59,0.2) 60%,rgba(10,46,59,0) 100%)}
  /* transição de saída: a própria seção 2 pinta uma faixa teal→ivory no seu
     próprio topo (pensada pra quando ela vinha logo depois do hero escuro).
     com esta ponte clara no meio, aquela faixa passou a aparecer como um
     risco escuro solto entre duas seções claras — ela some aqui porque essa
     função (hero escuro → claro) já é resolvida acima, na transição desta
     seção. o resto da seção 2 (cor, conteúdo, layout) não muda em nada. */
  .section-video-intro + .section-challenge .section-transition{opacity:0}

  /* linhas finas removidas no desktop: o fundo teal já carrega sua própria
     forma orgânica única via .video-intro-bg acima — duas linhas soltas em
     cima disso lia como ruído aleatório. */
  .video-intro-waves{display:none}

  .video-intro-grid{grid-template-columns:0.82fr 1fr;gap:clamp(16px,1.8vw,22px) clamp(36px,4.5vw,56px)}

  /* player: sobre o teal médio, a antiga borda/sombra escura-sobre-escura
     ficava invisível. troca por uma borda em fio de luz (ivory bem translúcido)
     que desenha o contorno do card, e uma sombra mais funda/fria (quase preta)
     para o vídeo se destacar do fundo por contraste de profundidade, não de
     cor — mesmo raio, mesmo tamanho, só o acabamento muda. o mesmo pequeno
     traço verde no canto segue como único acento colorido do player. */
  .video-poster{aspect-ratio:16/9;max-width:480px;border:1px solid rgba(247,245,239,0.18);box-shadow:0 26px 52px -20px rgba(3,14,19,0.6),0 8px 20px -8px rgba(3,14,19,0.4)}
  .video-poster::after{content:'';position:absolute;left:18px;bottom:15px;width:22px;height:3px;border-radius:2px;background:var(--green-500);z-index:2;pointer-events:none}
  .video-play-btn{width:60px;height:60px}
  .video-play-btn svg{width:18px;height:18px}

  /* acento de marca junto do título — mesma linguagem do .callout /
     .accent-line já usada na seção 2, mas mais discreto (verde com opacidade
     em vez de sólido) pra não competir com o título. */
  .video-intro-head{padding-left:18px;border-left:2px solid rgba(139,179,60,0.55)}

  /* fundo passou de claro para teal médio: texto migra para ivory/soft-white
     quente (não o azul frio de --text-on-dark-muted usado nas outras seções
     escuras) para manter a leitura calma e legível pedida aqui; o verde
     segue só como acento pontual (eyebrow, dot, traço do player). */
  .section-video-intro .eyebrow{color:var(--green-300)}
  .video-intro-title{font-size:clamp(1.5rem,1.15rem + 1.1vw,1.95rem);line-height:1.2;color:var(--text-on-dark)}
  .video-intro-body{font-size:0.95rem;max-width:38ch;margin-bottom:var(--space-3);color:rgba(247,245,239,0.82)}
  .video-intro-meta{color:rgba(247,245,239,0.85)}
  .video-intro-foot{padding-top:0}
}

@media (max-width:640px){
  .section-video-intro{padding:44px clamp(20px,6vw,28px) 48px}
  .video-play-btn{width:60px;height:60px}
  .video-duration-badge{font-size:10.5px;padding:5px 11px}
}

.js-anim .video-intro-media[data-reveal],
.js-anim .video-intro-head[data-reveal],
.js-anim .video-intro-foot[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
.js-anim .video-intro-head[data-reveal]{transition-delay:80ms}
.js-anim .video-intro-foot[data-reveal]{transition-delay:200ms}
.js-anim .video-intro-media[data-reveal].is-in,
.js-anim .video-intro-head[data-reveal].is-in,
.js-anim .video-intro-foot[data-reveal].is-in{opacity:1;transform:none}

/* ---------- section 2 — o desafio dos pais ---------- */

.section-challenge{position:relative;background:var(--ivory-50);font-family:var(--font-sans);padding:0 clamp(28px,5vw,72px) clamp(96px,9vw,132px);overflow:hidden}

/* short, subtle hand-off from the hero dark teal into the ivory page —
   deliberately brief so it reads as a natural continuation, not a seam. */
.section-transition{position:absolute;top:0;left:0;width:100%;height:clamp(28px,3.2vw,46px);background:linear-gradient(to bottom, var(--teal-900) 0%, var(--ivory-50) 100%);z-index:0;pointer-events:none}

/* Jade Sky — background recipe reproduced exactly (21st.dev), unmodified.
   Outer layer clips + fades the recipe into the section's top/bottom edges;
   the inner layer carries the untouched gradient recipe only. */
.jade-sky-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;container-type:size;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 90%,transparent 100%)}
.jade-sky-bg-inner{position:absolute;inset:-0.8cqmin;filter:blur(0.4cqmin);background-color:#CFE9F0;background-image:radial-gradient(circle at 65.34% 44.62%, rgba(238, 246, 227, 1) 0%, rgba(238, 246, 227, 0) 34.1%), radial-gradient(circle at 28.07% 74.48%, rgba(183, 217, 142, 1) 0%, rgba(183, 217, 142, 0) 45.65%), radial-gradient(circle at 52.42% 19.94%, rgba(127, 191, 154, 1) 0%, rgba(127, 191, 154, 0) 57.55%), radial-gradient(circle at 80.31% 84.47%, rgba(207, 233, 240, 1) 0%, rgba(207, 233, 240, 0) 69.1%)}

/* softens Jade Sky for legibility without touching its recipe above. */
.jade-sky-overlay{position:absolute;inset:0;z-index:0;background:rgba(247,245,239,0.42);pointer-events:none}

/* brand watermark — the circular mark alone, bled off the section's
   bottom-right corner. an identity cue for a second glance, not a logo
   placement. static — no animation. */
.section-brand-mark{position:absolute;z-index:0;right:clamp(-70px,-5vw,-30px);bottom:clamp(-60px,-4.5vw,-20px);width:clamp(350px,30vw,500px);height:clamp(350px,30vw,500px);border-radius:50%;opacity:0.16;pointer-events:none;user-select:none}

.section-challenge .content-max{position:relative;z-index:1}

.challenge-grid{display:grid;grid-template-columns:0.88fr 1.12fr;gap:clamp(56px,6vw,88px);align-items:center;padding-top:clamp(72px,8vw,112px)}

.challenge-copy{display:flex;flex-direction:column}
.challenge-copy .eyebrow{margin-bottom:var(--space-5)}
.challenge-copy .section-title{font-size:clamp(2.1rem,1.5rem + 2.1vw,3.05rem);line-height:1.06;margin-bottom:var(--space-5)}
.accent-line{display:block;width:64px;height:2px;background:var(--green-500);margin-bottom:var(--space-6)}
.challenge-copy .section-body{max-width:46ch;margin-bottom:clamp(48px,5vw,68px)}

/* editorial index — one panel, not two lists. the seven themes used to run
   in column order (01-04 left, 05-07 right), which read as two disconnected
   stacks; they now flow row by row inside a single bordered surface, with the
   label as the panel's own head. quiet number, hairline, name — no pills, no
   fills, no seven separate cards. */
.themes-index{background:var(--ivory-50);border:1px solid rgba(10,46,59,0.09);border-radius:var(--radius-lg);box-shadow:0 6px 18px -14px rgba(10,46,59,0.26);padding:clamp(18px,1.8vw,22px) clamp(20px,2.2vw,28px) clamp(4px,0.6vw,8px);margin-bottom:clamp(48px,5vw,68px)}
.themes-index-label{display:block;font-weight:700;font-size:11.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-600);padding-bottom:clamp(14px,1.4vw,17px);border-bottom:1px solid var(--border-subtle)}
/* row-major so the sequence reads 01→02→03… across, and a single hairline
   grid: the row rules meet in the middle because the columns are gapless,
   divided instead by one vertical hairline. */
.themes-index-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-flow:row;column-gap:0}
.themes-index-list li{display:flex;align-items:baseline;gap:14px;padding:13px 0 12px;border-bottom:1px solid var(--border-subtle);transition:border-color var(--duration-base) var(--ease-standard)}
.themes-index-list li:nth-child(even){border-left:1px solid var(--border-subtle);padding-left:clamp(18px,2vw,28px)}
.themes-index-list li:last-child{border-bottom:none}
.themes-index-list li:hover{border-bottom-color:var(--green-300)}
.themes-index-num{flex-shrink:0;width:19px;font-variant-numeric:tabular-nums;font-weight:700;font-size:10.5px;letter-spacing:0.06em;line-height:1;color:var(--green-700)}
.themes-index-name{font-weight:700;font-size:15.5px;line-height:1;letter-spacing:-0.005em;color:var(--teal-900);transition:color var(--duration-base) var(--ease-standard)}
.themes-index-list li:hover .themes-index-name{color:var(--green-700)}

/* editorial pull-quote — a rule and type, not a filled card. */
.callout{align-self:flex-start;max-width:42ch;padding:4px 0 4px clamp(22px,2.2vw,30px);border-left:2px solid var(--green-500)}
.callout p{font-weight:700;font-size:clamp(1.1rem,1rem + 0.4vw,1.35rem);line-height:1.42;letter-spacing:-0.008em;color:var(--teal-700);margin:0}

.challenge-media-wrap{position:relative;padding-top:clamp(4px,0.8vw,10px)}
.challenge-media-backdrop{position:absolute;inset:0;transform:translate(22px,22px);background:var(--surface-mist);border-radius:var(--radius-xl);z-index:0;opacity:0.85}
.challenge-media{position:relative;z-index:1;height:clamp(440px,40vw,580px);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md)}
.challenge-media img{width:100%;height:100%;object-fit:cover;object-position:44% 34%}

.doubts-card{position:absolute;right:clamp(10px,1.6vw,18px);bottom:clamp(18px,2.6vw,30px);max-width:min(60%,264px);display:flex;flex-direction:column;background:rgba(247,245,239,0.97);border:1px solid rgba(10,46,59,0.07);border-radius:var(--radius-lg);padding:17px 20px 18px;box-shadow:0 10px 26px -14px rgba(10,46,59,0.32)}
.doubts-title{display:block;font-weight:700;font-size:10.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;line-height:1.5;color:var(--ink-600);padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--green-300)}
.doubts-title::before{content:'';display:inline-block;width:6px;height:6px;margin-right:9px;margin-bottom:1px;border-radius:50%;background:var(--green-300);vertical-align:middle}
.doubts-question{display:block;font-weight:700;font-size:14.5px;line-height:1.35;letter-spacing:-0.008em;color:var(--teal-700)}
.doubts-question + .doubts-question{margin-top:8px}

@media (max-width:1024px){
  .challenge-grid{grid-template-columns:1fr 1fr;gap:clamp(36px,4.5vw,56px)}
  .challenge-media{height:clamp(400px,46vw,500px)}
}

/* ---- section 2, mobile ----
   the copy column read as a stack of islands: 48px between the paragraph and
   the theme list, 48px again before the pull-quote, 40px before the
   photograph. tightened to a 24-28px rhythm between blocks so the section
   reads as one continuous thought. */
@media (max-width:680px){
  .section-challenge{padding-bottom:56px}
  .challenge-grid{grid-template-columns:1fr;gap:28px;padding-top:40px}
  .challenge-copy{order:1}
  .challenge-media-wrap{order:2;padding-top:0}

  .challenge-copy .eyebrow{margin-bottom:16px}
  .challenge-copy .section-title{font-size:2.05rem;line-height:1.08;margin-bottom:18px}
  .accent-line{margin-bottom:20px}
  .challenge-copy .section-body{font-size:16.5px;line-height:1.6;margin-bottom:28px;max-width:none}

  .themes-index{margin-bottom:26px;padding:16px 18px 4px}
  .themes-index-label{padding-bottom:13px}
  .themes-index-list{grid-template-columns:1fr}
  .themes-index-list li{padding:11px 0 10px;gap:14px}
  .themes-index-list li:nth-child(even){border-left:none;padding-left:0}
  .themes-index-name{font-size:15.5px}

  .callout{padding:2px 0 2px 18px;max-width:none}
  .callout p{font-size:1.08rem;line-height:1.4}

  /* the overlay card cannot work at this width. the photograph is 4:3 and the
     container is narrower than it is tall, so object-fit always shows the full
     height of the frame — which puts the baby in the lower middle, exactly
     where a bottom-anchored card lands. so the card drops below the image with
     a small negative overlap instead, and the image runs at its native 4:3
     with no crop at all: the whole family is in frame. */
  .challenge-media{height:auto;overflow:visible;box-shadow:none;border-radius:0}
  .challenge-media img{height:auto;aspect-ratio:4/3;border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}
  .challenge-media-backdrop{display:none}
  .doubts-card{position:relative;left:auto;right:auto;bottom:auto;max-width:none;margin:-34px 14px 0;padding:15px 17px 16px;box-shadow:0 12px 26px -16px rgba(10,46,59,0.4)}
  .doubts-question{font-size:14.5px}

  .jade-sky-overlay{background:rgba(247,245,239,0.5)}
  .section-brand-mark{display:none}
}

@media (max-width:420px){
  .doubts-title{padding-bottom:10px;margin-bottom:11px}
  .doubts-question{font-size:14px}
  .doubts-question + .doubts-question{margin-top:7px}
  .challenge-copy .section-title{font-size:1.95rem}
}

/* ---------- entrada em scroll (seção 2) ----------
   duas cascatas internas — uma por coluna — no mesmo contrato .js-anim/
   data-reveal das outras seções: só .challenge-copy e .challenge-media-wrap
   são observados: cada um libera, via um único .is-in, uma sequência de
   delays nos próprios filhos (mesma técnica do .origin-narrative e do
   .hero-stats). sem JS, ou com prefers-reduced-motion, tudo nasce no estado
   final — .js-anim nunca é setado nesse caso. */
.js-anim .section-challenge [data-reveal]{opacity:1}

.js-anim .challenge-copy .eyebrow{opacity:0;transform:translateX(-10px);transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out)}
.js-anim .challenge-copy .eyebrow-dot{opacity:0;transform:scale(0.4);transition:opacity 360ms var(--ease-out) 160ms,transform 420ms var(--ease-out) 160ms}
.js-anim .challenge-copy .section-title{opacity:0;transform:translateY(16px);transition:opacity 620ms var(--ease-out) 90ms,transform 620ms var(--ease-out) 90ms}
.js-anim .challenge-copy .accent-line{transform:scaleX(0);transform-origin:left center;transition:transform 460ms var(--ease-out) 300ms}
.js-anim .challenge-copy .section-body{opacity:0;transform:translateY(14px);transition:opacity 560ms var(--ease-out) 340ms,transform 560ms var(--ease-out) 340ms}
.js-anim .challenge-copy .themes-index{opacity:0;transform:translateY(18px);transition:opacity 560ms var(--ease-out) 420ms,transform 560ms var(--ease-out) 420ms}
.js-anim .challenge-copy .themes-index-list li{opacity:0;transform:translateX(-10px);transition:opacity 440ms var(--ease-out),transform 440ms var(--ease-out)}
.js-anim .challenge-copy .callout{opacity:0;transform:translateY(12px);transition:opacity 520ms var(--ease-out) 900ms,transform 520ms var(--ease-out) 900ms}

/* O CTA contextual é o seu próprio [data-reveal] (não está dentro de
   .challenge-copy), então entra por conta própria quando entra na tela.
   O seletor precisa do [data-reveal] para empatar em especificidade com
   `.js-anim .section-challenge [data-reveal]{opacity:1}` acima e vencer por
   ordem — só `.js-anim .challenge-cta` perderia e ele nasceria visível. */
.js-anim .challenge-cta[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.js-anim .challenge-cta[data-reveal].is-in{opacity:1;transform:none}

.js-anim .challenge-copy.is-in .eyebrow,
.js-anim .challenge-copy.is-in .section-title,
.js-anim .challenge-copy.is-in .section-body,
.js-anim .challenge-copy.is-in .themes-index,
.js-anim .challenge-copy.is-in .callout{opacity:1;transform:none}
.js-anim .challenge-copy.is-in .eyebrow-dot{opacity:1;transform:none}
.js-anim .challenge-copy.is-in .accent-line{transform:scaleX(1)}
.js-anim .challenge-copy.is-in .themes-index-list li{opacity:1;transform:none}
.js-anim .challenge-copy.is-in .themes-index-list li:nth-child(1){transition-delay:520ms}
.js-anim .challenge-copy.is-in .themes-index-list li:nth-child(2){transition-delay:565ms}
.js-anim .challenge-copy.is-in .themes-index-list li:nth-child(3){transition-delay:610ms}
.js-anim .challenge-copy.is-in .themes-index-list li:nth-child(4){transition-delay:655ms}
.js-anim .challenge-copy.is-in .themes-index-list li:nth-child(5){transition-delay:700ms}
.js-anim .challenge-copy.is-in .themes-index-list li:nth-child(6){transition-delay:745ms}
.js-anim .challenge-copy.is-in .themes-index-list li:nth-child(7){transition-delay:790ms}

.js-anim .challenge-media-backdrop{opacity:0;transform:translate(38px,38px);transition:opacity 620ms var(--ease-out) 60ms,transform 700ms var(--ease-out) 60ms}
.js-anim .challenge-media{opacity:0;transform:scale(0.95) translateY(16px);transition:opacity 660ms var(--ease-out) 150ms,transform 660ms var(--ease-out) 150ms}
.js-anim .doubts-card{opacity:0;transform:translateY(16px) scale(0.97);transition:opacity 520ms var(--ease-out) 520ms,transform 520ms var(--ease-out) 520ms}

.js-anim .challenge-media-wrap.is-in .challenge-media-backdrop{opacity:0.85;transform:translate(22px,22px)}
.js-anim .challenge-media-wrap.is-in .challenge-media{opacity:1;transform:none}
.js-anim .challenge-media-wrap.is-in .doubts-card{opacity:1;transform:none}

/* ---------- section 3 — o pais com clareza ---------- */

/* mist-blue surface, plus a short vertical fade at the very top that carries
   the ivory of section 2 into it. the fade starts from #F0F2E7 — the colour
   section 2 actually ends on (its sage baseline wash over ivory), not pure
   ivory — so the two surfaces meet with no visible step. 52px, no wave, no
   shadow: it should read as one colour settling into another. */
/* darkened to the brand's deep blue-petrol register (same --teal-900/700/600
   family as the hero) instead of the light mist-blue tone — a soft diagonal
   gradient, not a flat fill, so the section reads as its own moment. */
.section-about{--about-surface:var(--teal-600);position:relative;overflow:hidden;background:linear-gradient(158deg,var(--teal-900) 0%,#0C3D4D 45%,var(--teal-700) 78%,var(--teal-600) 100%);font-family:var(--font-sans);padding:clamp(80px,7.5vw,112px) clamp(28px,5vw,72px) clamp(88px,8vw,120px)}

/* Jade Sky — same recipe/masking used in section 2, recolored into the
   petrol family (was a light mint/jade wash tuned for a light background). */
.about-jade-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;container-type:size;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 7%,black 90%,transparent 100%)}
.about-jade-bg-inner{position:absolute;inset:-0.8cqmin;filter:blur(0.4cqmin);background-color:#0A2E3B;background-image:radial-gradient(circle at 65.34% 44.62%, rgba(97,164,191,0.5) 0%, rgba(97,164,191,0) 34.1%), radial-gradient(circle at 28.07% 74.48%, rgba(15,100,128,0.55) 0%, rgba(15,100,128,0) 45.65%), radial-gradient(circle at 52.42% 19.94%, rgba(61,125,147,0.45) 0%, rgba(61,125,147,0) 57.55%), radial-gradient(circle at 80.31% 84.47%, rgba(155,198,216,0.3) 0%, rgba(155,198,216,0) 69.1%)}

/* softens Jade Sky for legibility — dark wash, was a light ivory one. */
.about-jade-overlay{position:absolute;inset:0;z-index:0;background:rgba(10,32,42,0.3);pointer-events:none}

/* organic wave layers — flowing bezier bands in the same blue-petrol family,
   low-opacity and slightly blurred so they read as background atmosphere,
   not an illustration. */
.about-waves{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;filter:blur(1.5px)}

/* hand-off strips: fades the incoming ivory of section 2 in at the top, and
   fades the outgoing mist-blue that section 4 expects back out at the
   bottom, so the dark gradient in between reads as one settled moment. */
.section-about::before{content:'';position:absolute;z-index:0;top:0;left:0;right:0;height:clamp(40px,4.5vw,64px);background:linear-gradient(to bottom,#F0F2E7 0%,rgba(240,242,231,0) 100%);pointer-events:none}
.section-about::after{content:'';position:absolute;z-index:0;left:0;right:0;bottom:0;height:clamp(120px,13vw,200px);background:linear-gradient(to top,#CBE2EA 0%,rgba(203,226,234,0) 100%);pointer-events:none}

.section-about .content-max{position:relative;z-index:1}

/* copy sat directly on the light mist-blue background before; now it sits on
   a dark one, so eyebrow/heading/body/lede need the on-dark treatment
   already established elsewhere (hero, .eyebrow-on-dark, --text-on-dark
   tokens). the feature cards keep their own opaque ivory surfaces, so they
   read as light panels floating on the dark ground and need no color
   changes of their own. */
.section-about .eyebrow{color:var(--green-300)}
.section-about .section-title{color:var(--text-on-dark)}
.section-about .section-body{color:var(--text-on-dark-muted)}

.about-intro{max-width:660px;margin:0 auto clamp(52px,5.5vw,72px);text-align:center}
.about-intro .section-title{font-size:clamp(2rem,1.5rem + 1.9vw,2.9rem);line-height:1.08;margin-bottom:var(--space-5)}
.about-intro .section-body{margin-bottom:0}
/* frase de ligação — mais presente que o corpo, bem abaixo do título: uma
   linha editorial entre a introdução e os três pilares, não um novo bloco. */
.about-lede{margin:var(--space-6) 0 0;font-weight:600;font-size:var(--heading-md);line-height:var(--lh-snug);letter-spacing:-0.005em;color:var(--text-on-dark)}
.about-lede-accent{color:var(--green-300)}

/* shared line-icon language: deep teal stroke with one small leaf-green
   accent. single weight, single cap style, single 24-unit grid section-wide. */
.ico{display:block;width:100%;height:100%;fill:none;stroke:var(--teal-700);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico .ico-accent{stroke:var(--green-500)}



.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,28px);align-items:stretch}

.feature-card{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--ivory-50);border:1px solid rgba(10,46,59,0.08);border-radius:var(--radius-lg);box-shadow:0 6px 18px -12px rgba(10,46,59,0.28);padding:clamp(30px,3.1vw,38px) clamp(28px,3vw,36px) clamp(32px,3.3vw,40px);transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(10,46,59,0.34);border-color:rgba(10,46,59,0.14)}

/* identity cue — two concentric hairline arcs bled off the top-right corner,
   echoing the interlocking circles of the brand mark. barely there by design;
   it should register on a second glance, never compete with the content. */
.feature-arc{position:absolute;top:-88px;right:-88px;width:172px;height:172px;border-radius:50%;border:1px solid rgba(9,75,95,0.12);pointer-events:none;transition:border-color var(--duration-base) var(--ease-standard)}
.feature-arc::after{content:'';position:absolute;top:28px;left:28px;right:28px;bottom:28px;border-radius:50%;border:1px solid rgba(139,179,60,0.26)}
.feature-card:hover .feature-arc{border-color:rgba(9,75,95,0.2)}

/* icon and editorial number share one baseline row, so the card opens with a
   single line of hierarchy instead of three stacked fragments. */
.feature-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:clamp(22px,2.2vw,28px)}
.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;padding:13px;background:color-mix(in srgb,var(--sage-100) 72%,var(--ivory-50) 28%);border:1px solid rgba(139,179,60,0.22);border-radius:var(--radius-md);flex-shrink:0}
.feature-icon .ico{stroke-width:1.45}
/* editorial number, not a badge: light, tabular, riding the top of the row */
.feature-number{display:block;align-self:flex-start;font-variant-numeric:tabular-nums;font-weight:500;font-size:13px;letter-spacing:0.1em;line-height:1;color:var(--green-500);opacity:0.85;margin-top:2px}
.feature-title{font-weight:700;font-size:19.5px;line-height:1.25;letter-spacing:-0.012em;color:var(--teal-900);margin:0 0 10px 0}
.feature-desc{font-weight:400;font-size:15px;line-height:var(--lh-relaxed);color:var(--ink-600);margin:0;max-width:34ch}

@media (max-width:900px){
  .features-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .feature-desc{max-width:none}
  /* the arc keeps the same weight but a smaller footprint on a single-column
     card, so it stays a corner cue instead of a background graphic. */
  .feature-arc{top:-84px;right:-84px;width:148px;height:148px}
  .feature-arc::after{top:24px;left:24px;right:24px;bottom:24px}
}


/* leaf-green point riding the hairline, ringed in the surface colour so the
   line reads as passing behind it rather than butting into it. */

/* narrow screens: a single centered vertical progression — icon, label
   directly beneath it, then the next stage — rather than the desktop's
   three-across row or a left-packed icon+label pair. the step keeps the
   same flex column it already uses on desktop (icon above, label below,
   both centered on their own width), just stacked instead of side by side,
   so the icon and its label share one visual axis and the connecting
   hairline down the middle passes cleanly behind both. */

/* entrance: the hairline grows in first (scaleX from its own centre), then
   each step fades up as one unit — icon, dot and label together, never
   split apart. same .js-anim / data-reveal contract as the hero and origin
   sections: no JS, or prefers-reduced-motion, and everything is already in
   its final state. */



/* ---------- section 4 — jornadas por fase ---------- */

/* the rhythm changes here: back to warm ivory after the mist blue of section
   3, and this is where the visitor enters the "product" half of the page.
   two quiet grounds carry the section so it reads as one dense block rather
   than three cards floating in white: the 52px mist→ivory fade that repeats
   the 2→3 seam, and a low sage wash rising off the baseline behind the cards
   (the same device section 2 closes with). */
.section-journeys{--from-mist:#CBE2EA;--journeys-ivory:#F2EFE4;position:relative;overflow:hidden;background-color:var(--journeys-ivory);background-image:linear-gradient(to bottom,var(--from-mist) 0%,rgba(203,226,234,0) 100%),radial-gradient(1020px 620px at 12% 4%,rgba(219,231,201,0.5) 0%,rgba(219,231,201,0) 66%),radial-gradient(1150px 720px at 50% 66%,rgba(255,253,246,0.55) 0%,rgba(255,253,246,0) 72%),radial-gradient(1450px 1000px at 92% 0%,rgba(204,231,235,0.94) 0%,rgba(204,231,235,0) 60%),radial-gradient(1650px 1150px at 0% 100%,rgba(211,226,188,0.95) 0%,rgba(211,226,188,0) 63%),radial-gradient(1600px 1200px at 55% 45%,rgba(139,179,60,0.06) 0%,rgba(139,179,60,0) 55%);background-repeat:no-repeat;background-size:100% 52px,auto,auto,auto,auto,auto;background-position:top,left top,center,top right,bottom left,center;font-family:var(--font-sans);padding:clamp(64px,5.6vw,88px) clamp(28px,5vw,72px) clamp(76px,6.6vw,104px)}
.section-journeys::after{content:'';position:absolute;z-index:0;left:0;right:0;bottom:0;height:clamp(200px,20vw,300px);background:linear-gradient(to top,var(--sage-100) 0%,rgba(234,240,225,0) 100%);opacity:0.5;pointer-events:none}
/* lower-left counterweight to the right-side arc: a single hairline circle
   with a faint sage glow, echoing the brand's circular mark without
   illustrating it — balances the composition the cards otherwise weigh
   toward the centre. hidden on mobile, where there is no room for it to
   breathe. */
.section-journeys::before{content:'';position:absolute;z-index:0;left:clamp(-200px,-13vw,-120px);bottom:clamp(-180px,-11vw,-90px);width:clamp(300px,26vw,420px);height:clamp(300px,26vw,420px);border-radius:50%;border:1px solid rgba(139,179,60,0.14);background:radial-gradient(circle at 60% 65%,rgba(139,179,60,0.07) 0%,rgba(139,179,60,0) 70%);pointer-events:none}
.section-journeys .content-max{position:relative;z-index:1}

/* the one brand cue: concentric hairline arcs echoing the circular mark, bled
   off the right edge at section scale — a single quiet gesture behind the
   grid, not a motif repeated on every card. a faint internal wash keeps it
   from reading as an empty outline; a small offset third ring nods to the
   multi-circle brand symbol without illustrating it. */
.journeys-arc{position:absolute;z-index:0;right:clamp(-260px,-14vw,-160px);top:clamp(180px,18vw,280px);width:clamp(380px,34vw,520px);height:clamp(380px,34vw,520px);border-radius:50%;border:1px solid rgba(97,164,191,0.12);background:radial-gradient(circle at 38% 32%,rgba(139,179,60,0.05) 0%,rgba(139,179,60,0) 68%);pointer-events:none}
.journeys-arc::after{content:'';position:absolute;inset:clamp(52px,5vw,78px);border-radius:50%;border:1px solid rgba(139,179,60,0.18)}
.journeys-arc::before{content:'';position:absolute;left:10%;top:58%;width:34%;height:34%;border-radius:50%;border:1px solid rgba(139,179,60,0.15)}

/* compact editorial header — headline left, support text right on its
   baseline, so the grid starts high in the viewport. an open arc bled off
   the top-left corner gives the header its own quiet identity cue, echoing
   the right-side arc without repeating it — sits behind the text via
   negative z-index, never competing with it. */
.journeys-intro{position:relative;display:grid;grid-template-columns:1.05fr 0.95fr;align-items:end;column-gap:clamp(40px,5vw,80px);margin-bottom:clamp(34px,3.4vw,46px)}
.journeys-intro::before{content:'';position:absolute;z-index:-1;left:clamp(-70px,-4.6vw,-26px);top:clamp(-52px,-3.8vw,-18px);width:clamp(160px,13.4vw,210px);height:clamp(160px,13.4vw,210px);border-radius:50%;border:1px solid rgba(139,179,60,0.18);border-right-color:transparent;border-bottom-color:transparent;transform:rotate(-20deg);pointer-events:none}
.journeys-intro .section-title{font-size:clamp(1.9rem,1.45rem + 1.7vw,2.7rem);line-height:1.08;margin:0;max-width:16ch}
.journeys-intro-support{font-weight:400;font-size:var(--body-md);line-height:1.6;color:var(--ink-600);margin:0;max-width:46ch;padding-bottom:4px}

/* ---- the three journeys: one grid, one card structure, equal in every
   dimension. the phase is told by the photograph and the ordinal, never by
   giving one card more weight than another. ---- */
.journeys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,28px);align-items:stretch}
/* o carrossel é só do mobile: acima de 680px as três colunas continuam
   como estão e os controles nem existem. */
.journeys-nav{display:none}

.journey-card{--jc-wash:none;--jc-border:rgba(10,46,59,0.15);display:flex;flex-direction:column;background-color:#F7F3E7;background-image:var(--jc-wash);background-repeat:no-repeat;border:1px solid var(--jc-border);border-radius:var(--radius-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,0.55),0 10px 22px -16px rgba(10,46,59,0.24),0 2px 8px -4px rgba(10,46,59,0.08);padding:clamp(16px,1.6vw,20px);transition:transform var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.journey-card:hover{transform:translateY(-4px);border-color:rgba(10,46,59,0.22);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 18px 30px -18px rgba(10,46,59,0.3),0 4px 10px -4px rgba(10,46,59,0.12)}
/* one stage-specific wash and border tint each — faint enough that the
   photograph stays the strongest color in the card, never a tinted panel. */
.journeys-grid .journey-card:nth-child(1){--jc-wash:radial-gradient(380px 240px at 6% 0%,rgba(234,240,225,0.7) 0%,rgba(234,240,225,0) 74%);--jc-border:rgba(110,143,46,0.19)}
.journeys-grid .journey-card:nth-child(2){--jc-wash:radial-gradient(380px 240px at 4% 0%,rgba(234,240,225,0.5) 0%,rgba(234,240,225,0) 62%),radial-gradient(380px 240px at 100% 0%,rgba(238,246,247,0.75) 0%,rgba(238,246,247,0) 70%);--jc-border:rgba(61,125,147,0.19)}
.journeys-grid .journey-card:nth-child(3){--jc-wash:radial-gradient(420px 260px at 100% 0%,rgba(238,246,247,0.5) 0%,rgba(238,246,247,0) 67%),radial-gradient(380px 240px at 0% 100%,rgba(234,240,225,0.4) 0%,rgba(234,240,225,0) 67%);--jc-border:rgba(10,46,59,0.15)}

.jc-media{position:relative;overflow:hidden;border-radius:var(--radius-lg);aspect-ratio:4/3;background:var(--sage-100)}
.jc-media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transition:transform var(--duration-slow) var(--ease-standard)}
.journey-card:hover .jc-media img{transform:scale(1.02)}
/* "primeira infância" photo only: at the default 38% crop the flower hair
   clip clipped right at the top edge on the shorter mobile aspect ratio
   below. a few points less crop from the top keeps it fully in frame
   without changing the framing style used by the other two cards. */
.journeys-grid .journey-card:nth-child(3) .jc-media img{object-position:50% 32%}

.jc-body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.2vw,26px) clamp(8px,1vw,12px) clamp(6px,0.8vw,10px)}
/* leaf green, but the darker tone of it: #8BB33C sits at 2.2:1 on ivory,
   which is not legible for type this small. green-700 keeps the same accent
   family at 3.4:1. */
.jc-num{display:inline-flex;align-items:center;font-variant-numeric:tabular-nums;font-weight:600;font-size:11.5px;letter-spacing:0.09em;line-height:1;color:var(--accent-brand-strong);background:rgba(139,179,60,0.1);border:1px solid rgba(139,179,60,0.2);border-radius:var(--radius-pill);padding:5px 11px;margin-bottom:14px}
.jc-title{font-weight:800;font-size:clamp(1.3rem,1.15rem + 0.5vw,1.5rem);line-height:1.15;letter-spacing:-0.018em;color:var(--teal-900);margin:0 0 8px}
/* two lines reserved so the label, the list and the CTA sit on the same
   horizontal lines across all three cards regardless of copy length. */
.jc-sub{font-weight:400;font-size:14.5px;line-height:1.5;color:var(--ink-600);margin:0 0 20px;min-height:calc(2 * 1.5 * 14.5px)}
.jc-topics-label{display:block;font-weight:700;font-size:10.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-600);margin-bottom:10px}

/* editorial list: a leaf-green point and a name. no pills, no chips. */
.jc-topics{list-style:none;margin:0 0 clamp(20px,2vw,26px);padding:0}
.jc-topics li{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14.5px;line-height:1.4;color:var(--teal-900);padding:5px 0}
.jc-dot{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 3px rgba(139,179,60,0.14)}

/* secondary action — a line of type and an arrow, never a sales button.
   margin-top:auto pins all three to the same baseline. */
/* ---- CTA único da seção ---- */
/* Dois usos do mesmo wrapper: o CTA único das Jornadas e o CTA contextual
   que fecha a seção do desafio. Mesma regra de propósito — é um componente
   só, em dois pontos do fluxo. */
.journeys-cta,.challenge-cta{display:flex;justify-content:center;margin-top:clamp(28px,3vw,40px)}
/* pílula Deep Teal, não link de texto: sozinho embaixo de três cartões
   grandes, um link de 14px não segurava o fim da seção. Teal e não leaf
   green de propósito — verde sólido é o botão de compra (§5), e este aqui
   é navegação para a seção de planos, não a compra em si. Anima só
   `background` e `transform`; sombra estática (§11.1). */
.journeys-cta-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--radius-pill);background:var(--teal-700);color:var(--ivory-50);font-family:inherit;font-weight:700;font-size:15px;letter-spacing:-0.005em;box-shadow:0 14px 28px -16px rgba(9,75,95,0.7);transition:background var(--duration-base) var(--ease-standard),transform 200ms var(--ease-out)}
.journeys-cta-btn:hover{background:var(--teal-900);transform:translateY(-2px)}
.journeys-cta-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.journeys-cta-btn .jc-arrow{width:16px;height:16px;flex-shrink:0;transition:transform var(--duration-fast) var(--ease-out)}
.journeys-cta-btn:hover .jc-arrow{transform:translateX(4px)}

/* tablet: two columns, the third card centred on its own row rather than
   left-hanging — it stays a balanced composition, not an orphan. */
@media (max-width:980px){
  .journeys-intro{grid-template-columns:1fr;row-gap:var(--space-4);align-items:start;margin-bottom:clamp(30px,4vw,40px)}
  .journeys-intro .section-title{max-width:20ch}
  .journeys-intro-support{max-width:62ch;padding-bottom:0}
  .journeys-grid{grid-template-columns:repeat(2,1fr)}
  .journey-card:last-child{grid-column:1 / -1;max-width:calc(50% - clamp(10px,1.1vw,14px));justify-self:center}
  .journeys-arc{top:auto;bottom:clamp(60px,8vw,120px)}
  .section-journeys::before{display:none}
  .journeys-intro::before{display:none}
}

/* mobile: single column, unchanged in behaviour from the stacked layout that
   was already approved — image, ordinal, title, topics, action. */
@media (max-width:680px){
  /* ---- mobile: as três jornadas viram um carrossel ----
     Empilhadas, elas somavam ~1750px de rolagem para dizer "existem três
     fases". Aqui é um cartão por vez, com uma fatia do próximo sempre à
     vista — a pista de que há mais é a própria composição, não um texto
     pedindo para deslizar.

     A conta do espiar: o cartão ocupa 100% da caixa de conteúdo do
     scroller, e é o padding-right que decide quanto do próximo aparece.
     `calc((10% + 14px) / 1.1)` mantém ~9% do cartão seguinte visível em
     qualquer largura de 320 a 680 — e, por construção, faz o terceiro
     cartão encostar exatamente no fim do scroll, sem sobra estranha. */
  .section-journeys{--jn-gutter:clamp(28px,5vw,72px);--jn-gap:14px}
  .journeys-grid{
    display:flex;align-items:stretch;
    max-width:none;gap:var(--jn-gap);
    margin-inline:calc(-1 * var(--jn-gutter));
    padding:6px var(--jn-gutter) 18px;
    padding-right:calc((10% + var(--jn-gap)) / 1.1);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--jn-gutter);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .journeys-grid::-webkit-scrollbar{display:none}
  .journey-card{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
  .journey-card:last-child{grid-column:auto;max-width:none;justify-self:auto}
  /* o vizinho recua um passo — o suficiente para ler como "próximo", não
     como um segundo cartão disputando atenção. */
  .journeys-grid.is-carousel .journey-card{opacity:0.82;transition:opacity 260ms var(--ease-out)}
  .journeys-grid.is-carousel .journey-card.is-current{opacity:1}

  /* altura pela imagem e pelo espaçamento, não pela tipografia. */
  .jc-media{aspect-ratio:auto;height:clamp(150px,44vw,175px)}
  .jc-body{padding:18px clamp(8px,2vw,12px) 6px}
  .jc-sub{font-size:15px;line-height:1.45;min-height:0;margin-bottom:16px}
  .jc-topics{margin-bottom:18px}
  .jc-topics li{font-size:15px;padding:4px 0}

  /* ---- controles ---- */
  .journeys-nav{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px}
  /* aqui o CTA segue a dica do carrossel, e não a grade: margem menor */
  .journeys-cta{margin-top:24px}
  .jn-controls{display:flex;align-items:center;gap:16px}
  .jn-step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;padding:0;color:var(--teal-700);background:rgba(255,255,255,0.7);border:1px solid rgba(10,46,59,0.18);border-radius:var(--radius-pill);cursor:pointer;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),opacity var(--duration-base) var(--ease-standard)}
  .jn-step svg{width:20px;height:20px}
  .jn-step:hover:not(:disabled){background:#fff;border-color:rgba(10,46,59,0.3)}
  .jn-step:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
  .jn-step:disabled{opacity:0.32;cursor:default}
  .jn-counter{display:flex;align-items:baseline;gap:6px;margin:0;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;letter-spacing:0.06em;color:var(--teal-900)}
  .jn-sep,.jn-total{color:var(--ink-400);font-weight:600}
  .jn-dots{display:flex;align-items:center;gap:7px}
  .jn-dot{width:6px;height:6px;border-radius:50%;background:rgba(10,46,59,0.2);transition:background var(--duration-base) var(--ease-standard),width var(--duration-base) var(--ease-out)}
  .jn-dot.is-active{width:20px;border-radius:var(--radius-pill);background:var(--green-500)}
  .jn-hint{display:flex;align-items:center;gap:7px;margin:0;font-weight:500;font-size:12px;line-height:1.3;color:var(--ink-400)}
  .jn-hint-icon{width:16px;height:16px;flex:none}
  .journeys-arc{display:none}
}

@media (prefers-reduced-motion:reduce){
  .jc-media img,.journey-card,.journeys-cta-btn{transition:none}
  /* escopado de propósito: `.jc-arrow` sozinho (0,1,0) perde para
     `.journeys-cta-btn .jc-arrow` (0,2,0) e a seta continuaria animando. */
  .journeys-cta-btn .jc-arrow{transition:none}
  .journey-card:hover .jc-media img{transform:none}
  .journeys-cta-btn:hover{transform:none}
  .journey-card:hover{transform:none}
  .jn-dot,.jn-step{transition:none}
  /* sem motion: o carrossel continua funcionando, só sem rolagem animada
     (o script também não dá o empurrãozinho inicial). */
  .journeys-grid{scroll-behavior:auto}
  .journeys-cta-btn:hover .jc-arrow{transform:none}
}

/* ================================================================
   hero motion — entrance, micro-interactions, scroll
   Every rule here is scoped to .js-anim (set before first paint, and only
   when the visitor has not asked for reduced motion) or to :hover/:active,
   so the hero's static rendering is untouched.
   ================================================================ */

/* ---------- entrance: initial states ---------- */

.js-anim .hero-bg{--enter-s:1.03;opacity:0.85}
.js-anim .hero.is-in .hero-bg{--enter-s:1;opacity:1;transition:transform 1250ms var(--ease-out),opacity 1150ms var(--ease-out)}

.js-anim .brand,
.js-anim .nav-toggle,
.js-anim .hero .eyebrow,
.js-anim .hero-lead,
.js-anim .hero-actions .btn,
.js-anim .hero-note,
.js-anim .hero-card,
.js-anim .hero-stats{opacity:0;will-change:transform,opacity}

.js-anim .brand{transform:translateY(8px)}
.js-anim .nav-toggle{transform:translateY(8px)}
.js-anim .hero .eyebrow{transform:translateX(-8px)}
.js-anim .hero .eyebrow-dot{opacity:0;transform:scale(0.4)}
.js-anim .hero-lead{transform:translateY(14px)}
.js-anim .hero-actions .btn{transform:translateY(12px)}
.js-anim .hero-note{transform:translateY(10px)}
.js-anim .hero-card{transform:translate(18px,6px) translateZ(0)}
.js-anim .hero-stats{transform:translateY(18px) translateZ(0)}
.js-anim .hero-stats .stat{opacity:0;transform:translateY(10px)}
.js-anim .hero-stats .stat-divider{transform:scaleY(0);transform-origin:center}

/* ---------- entrance: resting states + timing ----------
   DESKTOP, ~1,5s: foto 0 / marca 100 / nav 180 / eyebrow 300 /
   título 350 + 90 por linha / lead 650 / CTAs 780 / card 880 / stats 1000.
   A foto abre a cena porque ali ela é o fundo full-bleed — o palco, não um
   elemento da sequência.

   MOBILE, ~1,7s (overrides no bloco max-width:640px mais abaixo): marca 100
   / toggle 180 / eyebrow 300 / título 350 + 90 por linha / lead 650 /
   RETRATO 730 / CTAs 900 / painel 1060. Ali a foto não é fundo: é o 4º item
   de uma coluna, e entra na posição em que é lida. */

/* marca, nav e toggle não são mais descendentes de .hero (o cabeçalho é
   fixo e vive fora do <main>), então o gate destes não pode ser
   `.hero.is-in`: o script espelha o mesmo estado em <html> como .hero-in /
   .hero-settled. Sem isso estes três ficam em opacity:0 para sempre. */
.js-anim.hero-in .brand,
.js-anim.hero-in .nav-toggle,
.js-anim .hero.is-in .eyebrow,
.js-anim .hero.is-in .hero-lead,
.js-anim .hero.is-in .hero-actions .btn,
.js-anim .hero.is-in .hero-note,
.js-anim .hero.is-in .hero-stats .stat{opacity:1;transform:none}
/* these two keep translateZ(0) instead of settling to transform:none: it's
   the only thing keeping their backdrop-filter blur on its own GPU layer
   (will-change gets stripped below on .is-settled), so losing it here is
   what let hovering the nav re-trigger the shared-layer flicker. */
.js-anim .hero.is-in .hero-card,
.js-anim .hero.is-in .hero-stats{opacity:1;transform:translateZ(0)}

.js-anim.hero-in .brand{transition:opacity 560ms var(--ease-out) 100ms,transform 560ms var(--ease-out) 100ms}
.js-anim.hero-in .nav-toggle{transition:opacity 520ms var(--ease-out) 180ms,transform 520ms var(--ease-out) 180ms}
.js-anim .hero.is-in .eyebrow{transition:opacity 520ms var(--ease-out) 300ms,transform 520ms var(--ease-out) 300ms}
/* the dot lands a beat before the words it introduces */
.js-anim .hero.is-in .eyebrow-dot{opacity:1;transform:none;transition:opacity 360ms var(--ease-out) 260ms,transform 420ms var(--ease-out) 260ms}
.js-anim .hero.is-in .hero-lead{transition:opacity 600ms var(--ease-out) 650ms,transform 600ms var(--ease-out) 650ms}
.js-anim .hero.is-in .hero-actions .btn:nth-child(1){transition:opacity 560ms var(--ease-out) 780ms,transform 560ms var(--ease-out) 780ms}
.js-anim .hero.is-in .hero-actions .btn:nth-child(2){transition:opacity 560ms var(--ease-out) 850ms,transform 560ms var(--ease-out) 850ms}
/* a legenda entra depois dos dois botões que ela explica — e antes do card,
   para não abrir buraco entre a coluna de copy e o painel de credenciais. */
.js-anim .hero.is-in .hero-note{transition:opacity 520ms var(--ease-out) 910ms,transform 520ms var(--ease-out) 910ms}
.js-anim .hero.is-in .hero-card{transition:opacity 620ms var(--ease-out) 880ms,transform 620ms var(--ease-out) 880ms}
.js-anim .hero.is-in .hero-stats{transition:opacity 560ms var(--ease-out) 960ms,transform 560ms var(--ease-out) 960ms}
.js-anim .hero.is-in .hero-stats .stat:nth-of-type(1){transition:opacity 440ms var(--ease-out) 1040ms,transform 440ms var(--ease-out) 1040ms}
.js-anim .hero.is-in .hero-stats .stat:nth-of-type(2){transition:opacity 440ms var(--ease-out) 1095ms,transform 440ms var(--ease-out) 1095ms}
.js-anim .hero.is-in .hero-stats .stat:nth-of-type(3){transition:opacity 440ms var(--ease-out) 1150ms,transform 440ms var(--ease-out) 1150ms}
.js-anim .hero.is-in .hero-stats .stat-divider{transform:scaleY(1);transition:transform 460ms var(--ease-out) 1100ms}

/* merged panel entrance, mobile: card + stats now read as one seamless
   glass block (see the authority-panel consolidation), so they must animate
   as one motion — same displacement, same delay — instead of the desktop's
   two-piece reveal (card, then the stats bar, then each stat staggered in
   turn), which read as the block assembling itself instead of arriving as a
   whole. the stats row and everything inside it simply inherit the identity
   block's opacity/transform rather than running their own transition. */
@media (max-width:640px){
  .js-anim .hero-stats{transform:translate(18px,6px)}
  .js-anim .hero-stats .stat,.js-anim .hero-stats .stat-divider{opacity:1;transform:none}
  .js-anim .hero.is-in .hero-stats .stat,
  .js-anim .hero.is-in .hero-stats .stat-divider,
  .js-anim .hero.is-in .hero-stats .stat:nth-of-type(1),
  .js-anim .hero.is-in .hero-stats .stat:nth-of-type(2),
  .js-anim .hero.is-in .hero-stats .stat:nth-of-type(3){transition:none}

  /* ---------- o retrato entra no LUGAR dele na coluna ----------
     No mobile o hero é uma sequência vertical: eyebrow (order 2) → título
     (3) → lead (4) → retrato (5) → CTAs (6) → painel (7/8). A entrada
     precisa seguir essa mesma ordem, e não seguia: a regra base dá ao
     `.hero-bg` `opacity:0.85` SEM atraso nenhum, o que no desktop é
     correto (ali a foto é o fundo full-bleed, que já deve estar lá) mas no
     mobile fazia o Dr. Juarez ser a primeira coisa a existir na tela — e
     quase opaco de saída, então nem chegava a entrar: o texto é que se
     materializava em volta de uma foto já pronta. Era isso que lia como
     artificial.

     Agora a opacidade e a subida ficam no `.hero-portrait-frame` (a faixa
     inteira, com o degradê que assenta os antebraços cortados, entra como
     uma coisa só) e a <img> guarda apenas o assentamento de escala. A
     divisão não é estética: o `transform` da <img> já carrega `--par`, e
     empilhar ali um translateY de entrada faria os dois brigarem pelo
     mesmo slot. */
  .js-anim .hero-bg{--enter-s:1.06;opacity:1}
  .js-anim .hero-portrait-frame{opacity:0;transform:translateY(22px);will-change:transform,opacity}
  .js-anim .hero.is-in .hero-portrait-frame{opacity:1;transform:none;transition:opacity 660ms var(--ease-out) 730ms,transform 660ms var(--ease-out) 730ms}
  .js-anim .hero.is-in .hero-bg{--enter-s:1;transition:transform 1000ms var(--ease-out) 730ms}
  .js-anim .hero.is-settled .hero-portrait-frame{will-change:auto}

  /* tudo que vinha depois do retrato na coluna anda junto, para a ordem
     lida e a ordem vista continuarem sendo a mesma. */
  .js-anim .hero.is-in .hero-actions .btn:nth-child(1){transition-delay:900ms}
  .js-anim .hero.is-in .hero-actions .btn:nth-child(2){transition-delay:965ms}
  .js-anim .hero.is-in .hero-note{transition-delay:1020ms}
  .js-anim .hero.is-in .hero-card,
  .js-anim .hero.is-in .hero-stats{transition:opacity 620ms var(--ease-out) 1060ms,transform 620ms var(--ease-out) 1060ms}
}

/* desktop nav enters as a group, links stagger inside it. on mobile .nav is
   the dropdown panel and owns its own open/close transition, so it is left
   entirely alone here. */
@media (min-width:641px){
  .js-anim .nav{opacity:0;transform:translateY(8px) translateZ(0);will-change:transform,opacity}
  /* transform stays translateZ(0), not none: it's what keeps this pill's
     backdrop-filter on its own GPU layer once .is-settled drops will-change
     below — losing it here let hovering a nav-link re-trigger the shared-
     layer flicker across the pill and the hero-card/hero-stats blurs. */
  .js-anim.hero-in .nav{opacity:1;transform:translateZ(0);transition:opacity 520ms var(--ease-out) 180ms,transform 520ms var(--ease-out) 180ms}
  .js-anim .nav-link,.js-anim .nav-cta{opacity:0}
  .js-anim.hero-in .nav-link,.js-anim.hero-in .nav-cta{opacity:1;transition:opacity 380ms var(--ease-out)}
  .js-anim.hero-in .nav-link:nth-child(1){transition-delay:250ms}
  .js-anim.hero-in .nav-link:nth-child(2){transition-delay:300ms}
  .js-anim.hero-in .nav-link:nth-child(3){transition-delay:350ms}
  .js-anim.hero-in .nav-cta{transition-delay:400ms}
}

/* ---------- headline: line reveal ----------
   JS groups the words into their rendered lines and wraps each one; the
   padding/margin pair keeps descenders and accents from being clipped by the
   mask. the markup is handed back to plain text once the reveal finishes. */
.hero-title .ln{display:block;overflow:hidden;padding-bottom:0.14em;margin-bottom:-0.14em}
.js-anim .hero-title .ln > span{display:block;transform:translateY(105%)}
.hero-title .ln > span{display:block}
.js-anim .hero.is-in .hero-title .ln > span{transform:none;transition:transform 780ms cubic-bezier(.22,.61,.36,1) 350ms}
.hero-title .wd{display:inline-block}

/* drop the compositing hints once nothing is animating */
.js-anim.hero-settled .brand,
.js-anim.hero-settled .nav,
.js-anim.hero-settled .nav-toggle,
.js-anim .hero.is-settled .eyebrow,
.js-anim .hero.is-settled .hero-lead,
.js-anim .hero.is-settled .hero-actions .btn,
.js-anim .hero.is-settled .hero-card,
.js-anim .hero.is-settled .hero-stats{will-change:auto}
/* parallax rewrites --par every frame; a 1.25s transition on it would smear */
.js-anim .hero.is-settled .hero-bg{transition:none}

/* ---------- micro-interactions ---------- */

/* nav link: a hairline that grows from the left */
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;left:16px;right:16px;bottom:4px;height:1px;background:var(--green-300);transform:scaleX(0);transform-origin:left center;transition:transform 220ms var(--ease-out)}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}

/* Entre 641px e 1024px o cabeçalho ainda usa a barra horizontal, e cinco
   itens não cabiam ao lado da marca: a linha quebrava em duas e o header
   crescia ~120px justamente no topo do hero. O aperto abaixo devolve a
   barra para uma linha só sem mexer no menu de toque (≤640px, onde a nav
   já é dropdown) nem na versão larga. */
@media (min-width:641px) and (max-width:1024px){
  .nav{gap:0;padding:6px 5px 6px 12px}
  .nav-link{padding:8px 10px}
  .nav-link::after{left:10px;right:10px}
  .nav-cta{padding:9px 16px}
}

/* primary CTA: the existing gradient drift is kept, but slowed to the edge of
   perception at rest and quickened on hover, rather than running hot always. */
.btn-gradient-bg{animation-duration:14s}
.btn-gradient-border{animation-duration:14s}
.btn-gradient:hover .btn-gradient-bg,.btn-gradient:focus-visible .btn-gradient-bg{animation-duration:6s}
.btn-gradient:hover .btn-gradient-border,.btn-gradient:focus-visible .btn-gradient-border{animation-duration:6s}
.btn-gradient{transition:box-shadow 500ms var(--ease-standard),color 500ms var(--ease-standard),transform 220ms var(--ease-out)}
.btn-gradient:hover,.btn-gradient:focus-visible{transform:translateY(-2px)}
.btn-gradient:active{transform:scale(0.98)}

.btn-outline-light{transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform 220ms var(--ease-out)}
.btn-outline-light:active{transform:scale(0.98)}

/* authority card */
.hero-card{transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out),border-color 260ms var(--ease-out)}
.hero-card:hover{transform:translateY(-2px);box-shadow:0 26px 48px -18px rgba(4,18,24,0.62);border-color:rgba(255,255,255,0.55)}

/* Aqui havia `.hero-content-row,.hero-stats-wrap{transition:opacity 120ms
   linear;will-change:opacity}`, e era a causa do travamento da rolagem do
   hero no desktop. Não reintroduzir — nem a transição, nem o will-change.

   Esses dois wrappers são os pais DIRETOS de .hero-card e .hero-stats, que
   são os únicos elementos da página com backdrop-filter ativo durante a
   rolagem (a .nav perde o dela em .is-stuck, logo no primeiro gesto). Um
   grupo de opacidade que contém backdrop-filter não pode ser cacheado como
   textura e recomposto com alfa novo: o backdrop tem de ser lido e
   desfocado de novo a cada mudança do grupo, na thread principal.

   Duas armadilhas, e as duas custaram uma tentativa de correção:
   1. A TRANSIÇÃO ANULAVA A QUANTIZAÇÃO. O handler já arredondava a
      opacidade para 1% justamente para escrever menos vezes (~35 degraus no
      hero inteiro, ~1 a cada 28px). Mas numa rolagem de roda comum os
      degraus chegam mais rápido que 120ms, então cada um reiniciava a
      transição do valor corrente e a opacidade acabava com valor novo em
      TODO frame — exatamente o que a quantização existia para evitar.
   2. `will-change:opacity` num ancestral de backdrop-filter forma um
      backdrop root (Filter Effects 2): o desfoque passa a amostrar só o que
      é pintado dentro do grupo, não a foto. Ou seja, além de caro, podia
      estar desfocando o nada.

   O fade de saída do hero foi removido junto (ver o script em index.html),
   então não existe mais escrita de opacidade aqui para amaciar. */

/* ---------- mobile ---------- */

@media (max-width:640px){
  /* the photo sits behind the copy in a masked band; a 3% settle would read
     as a zoom on his face, so it is halved here. */
  .js-anim .hero-bg{--enter-s:1.015}
  /* no hover on touch: the underline indicator would never resolve */
  .nav-link::after{display:none}
  /* dropdown items arrive with a short vertical stagger */
  .nav-link,.nav-cta{opacity:0;transform:translateY(-6px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
  .nav[data-open="true"] .nav-link,.nav[data-open="true"] .nav-cta{opacity:1;transform:none}
  .nav[data-open="true"] .nav-link:nth-child(1){transition-delay:40ms}
  .nav[data-open="true"] .nav-link:nth-child(2){transition-delay:80ms}
  .nav[data-open="true"] .nav-link:nth-child(3){transition-delay:120ms}
  .nav[data-open="true"] .nav-cta{transition-delay:160ms}
  /* tap feedback, since hover states never fire */
  .hero-card:active{transform:translateY(-1px)}
}

/* ---------- reduced motion ----------
   .js-anim is never set in this mode, so no entrance rule can match and every
   element renders in its resting state. these rules cover the interaction and
   idle animations that live outside that class. */
@media (prefers-reduced-motion:reduce){
  .hero-bg{--par:0px!important;--enter-s:1!important;transition:none!important;animation:none!important}
  .hero-title .ln > span{transform:none!important}
  .nav-link::after{transition:none}
  /* the mobile menu still opens and closes, it just does so without motion */
  .nav{transition:none!important}
  .nav-link,.nav-cta{transform:none!important;transition:none!important}
  .btn-gradient:hover,.btn-gradient:focus-visible,.btn-gradient:active,
  .btn-outline-light:active,.hero-card:hover{transform:none}
  .hero-card,.btn-gradient,.btn-outline-light{transition:none}
}

/* ---------- section 6 — por trás do Pais com Clareza ----------
   três momentos declarados, com pesos visuais diferentes: A. origem
   (eyebrow + título + declaração secundária menor), B. história (fotografia
   + narrativa curta + frase-assinatura) e C. confiança (uma única faixa
   Deep Teal de identidade profissional, sem métricas — elas já vivem na
   hero). o fundo é ivory quente com lavagens sage e mist visíveis: a seção
   tem atmosfera de marca própria e nunca é lida como uma segunda hero. */

/* --from-sage é a cor com que a seção anterior termina; a mesma técnica de
   hand-off curto que as seções 3 e 4 já usam, para não abrir uma costura. */
.section-origin{
  --origin-ivory:#F1EEE4;
  --from-sage:#EEEFE3;
  position:relative;overflow:hidden;font-family:var(--font-sans);
  background-color:var(--origin-ivory);
  background-image:
    linear-gradient(to bottom,var(--from-sage) 0%,rgba(241,238,228,0) 100%),
    radial-gradient(1500px 980px at 92% -6%,rgba(190,222,232,0.9) 0%,rgba(190,222,232,0) 62%),
    radial-gradient(1280px 940px at -4% 92%,rgba(214,229,197,0.95) 0%,rgba(214,229,197,0) 64%),
    radial-gradient(980px 760px at 38% 112%,rgba(139,179,60,0.09) 0%,rgba(139,179,60,0) 62%),
    radial-gradient(1100px 820px at 52% 34%,rgba(255,253,246,0.5) 0%,rgba(255,253,246,0) 70%);
  background-repeat:no-repeat;
  background-size:100% 60px,auto,auto,auto,auto;
  background-position:top,top right,bottom left,bottom center,center;
  padding:clamp(84px,7.4vw,124px) clamp(28px,5vw,72px) clamp(88px,7.8vw,132px);
}

/* lavagem mist alta à direita, dissolvida nas duas pontas — nota de fundo
   que dá profundidade ao canto onde a narrativa começa. */
.origin-field{position:absolute;z-index:0;top:0;right:calc(-1 * clamp(28px,5vw,72px));width:min(780px,64%);height:clamp(440px,46vw,680px);background:linear-gradient(-118deg,rgba(204,231,235,0.85) 26%,rgba(238,246,247,0) 88%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 22%,black 62%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 22%,black 62%,transparent 100%);pointer-events:none}

/* elemento decorativo 1 — dois contornos concêntricos finos, cortados por
   máscara para virarem arco: o gesto circular da marca, não uma ilustração. */
.origin-arc{position:absolute;z-index:0;left:clamp(-380px,-23vw,-210px);top:clamp(140px,15vw,260px);width:clamp(520px,46vw,780px);height:clamp(520px,46vw,780px);border-radius:50%;border:1px solid rgba(15,100,128,0.17);-webkit-mask-image:linear-gradient(118deg,transparent 10%,#000 40%,#000 66%,transparent 92%);mask-image:linear-gradient(118deg,transparent 10%,#000 40%,#000 66%,transparent 92%);pointer-events:none}
.origin-arc::after{content:'';position:absolute;inset:clamp(28px,2.8vw,44px);border-radius:50%;border:1px solid rgba(139,179,60,0.2)}

/* elemento decorativo 2 — o símbolo da marca como marca de água, largo e
   quase ausente: reforça o pertencimento sem repetir o logotipo. */
.origin-watermark{position:absolute;z-index:0;right:clamp(-150px,-9vw,-70px);bottom:clamp(-130px,-8vw,-60px);width:clamp(360px,32vw,560px);height:clamp(360px,32vw,560px);border-radius:50%;opacity:0.06;pointer-events:none;user-select:none}

.section-origin .content-max{position:relative;z-index:1}

/* A. ORIGEM — o título carrega o peso; a declaração secundária vem depois,
   claramente menor, para não competir como uma segunda linha de hero. */
.origin-head{max-width:min(880px,88%)}
.origin-title{font-size:clamp(1.95rem,1.42rem + 1.85vw,2.8rem);line-height:1.08;margin:0}
.origin-lede{margin:clamp(14px,1.4vw,20px) 0 0;font-weight:500;font-size:clamp(1.08rem,0.98rem + 0.5vw,1.4rem);line-height:1.42;letter-spacing:-0.005em;color:var(--teal-600);max-width:34ch}

/* B. HISTÓRIA — fotografia à esquerda, narrativa à direita. duas colunas,
   uma linha só: a faixa de autoridade saiu da grade e virou o terceiro
   momento, abaixo. */
.origin-grid{display:grid;grid-template-columns:0.92fr 1.08fr;column-gap:clamp(44px,4.8vw,76px);align-items:center;margin-top:clamp(50px,5.2vw,78px)}

/* a foto não tem mais overflow:hidden — o raio vive na própria imagem, o que
   libera a forma sage deslocada para respirar fora do quadro. */
.origin-photo{position:relative;z-index:1;grid-column:1;margin:0;aspect-ratio:1/1.06}
.origin-photo::before{content:'';position:absolute;z-index:-1;left:clamp(-30px,-2.4vw,-16px);bottom:clamp(-30px,-2.4vw,-16px);width:64%;height:56%;border-radius:var(--radius-xl);background:linear-gradient(142deg,var(--sage-200) 0%,rgba(220,231,206,0.32) 100%)}
.origin-photo img{width:100%;height:100%;object-fit:cover;object-position:44% 24%;border-radius:var(--radius-xl);background:var(--sage-100);box-shadow:0 28px 54px -30px rgba(12,40,50,0.42),0 2px 6px rgba(12,40,50,0.06)}

.origin-narrative{grid-column:2;padding-top:clamp(2px,0.6vw,10px)}
.origin-narrative .section-body{max-width:52ch;margin-bottom:var(--space-5)}
.origin-narrative .section-body:last-of-type{margin-bottom:0}

/* a frase-assinatura: filete Leaf Green, tipo Deep Teal e muito ar em volta.
   sem card, sem sombra e sem aspas decorativas — é uma filosofia de cuidado,
   não um slogan. */
.origin-quote{margin:clamp(38px,3.8vw,52px) 0 0;padding:clamp(4px,0.6vw,8px) 0 clamp(4px,0.6vw,8px) clamp(24px,2.4vw,34px);border-left:2px solid var(--green-500)}
.origin-quote p{margin:0;font-weight:700;font-size:clamp(1.16rem,1.02rem + 0.62vw,1.55rem);line-height:1.36;letter-spacing:-0.012em;color:var(--teal-700);max-width:26ch}

/* assinatura — um detalhe autoral discreto, um sign-off silencioso sob a
   frase, nunca um elemento visual principal. o PNG vira uma máscara: a cor
   e a opacidade são nossas (ink, ~28%), não as do arquivo. o traço tem
   textura de scan, não é um path vetorial — por isso o "efeito
   caligráfico" é um wipe em clip-path da esquerda para a direita, não um
   stroke-dasharray. */
.origin-signature{
  width:clamp(140px,12vw,190px);
  aspect-ratio:1695/748;
  margin:clamp(10px,1.2vw,16px) 0 0 clamp(24px,2.4vw,34px);
  background-color:var(--ink-900);
  opacity:0.52;
  -webkit-mask-image:url('../assets/img/juarez-assinatura.png');
  mask-image:url('../assets/img/juarez-assinatura.png');
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:contain;mask-size:contain;
  pointer-events:none;
}

/* C. CONFIANÇA — faixa única Deep Teal: quem é, e como o consultório vira o
   Pais com Clareza. sem números repetidos e sem novos cards. */
.origin-authority{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:clamp(26px,3vw,48px);margin-top:clamp(52px,5.4vw,84px);padding:clamp(26px,2.6vw,34px) clamp(28px,3vw,44px);background:var(--teal-900);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);color:var(--text-on-dark)}

.origin-identity{display:flex;align-items:center;gap:clamp(16px,1.7vw,21px)}
/* retrato formal apenas como reforço de autoridade — pequeno, secundário */
.origin-portrait{flex:none;width:clamp(62px,5.6vw,76px);height:clamp(62px,5.6vw,76px);border-radius:50%;object-fit:cover;object-position:50% 16%;box-shadow:0 0 0 1px rgba(155,198,216,0.3)}
.origin-name{margin:0;font-weight:700;font-size:clamp(1.08rem,1rem + 0.36vw,1.26rem);letter-spacing:-0.012em;color:var(--ivory-50)}
.origin-creds{margin:7px 0 0;font-weight:600;font-size:13.5px;letter-spacing:0.02em;color:var(--green-300)}
.origin-sep{padding:0 4px;color:rgba(185,214,138,0.6)}
.origin-creds-sub{margin:5px 0 0;font-weight:400;font-size:13.5px;line-height:1.45;color:var(--blue-300)}

/* a progressão: consultório → experiência → educação para pais. horizontal,
   em versalete, com a última etapa em Leaf Green porque é onde a trajetória
   desemboca no projeto. */
.origin-path{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px);margin:0;padding:0}
.origin-path li{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);font-weight:700;font-size:12px;line-height:1.2;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue-300);white-space:nowrap}
.origin-path li::before{content:'\2192';font-weight:400;font-size:14px;letter-spacing:0;color:rgba(155,198,216,0.5)}
.origin-path li:first-child::before{content:none}
.origin-path li:last-child{color:var(--green-300)}

/* entrada: fade + translateY curto, em cascata pelos três momentos. as
   regras só existem sob .js-anim — sem JS, ou com prefers-reduced-motion,
   tudo nasce no estado final. */
.js-anim .section-origin [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 640ms var(--ease-out),transform 640ms var(--ease-out)}
.js-anim .section-origin .origin-photo[data-reveal]{transform:translateY(20px)}
.js-anim .section-origin .origin-narrative[data-reveal]{transition-delay:110ms}
.js-anim .section-origin [data-reveal].is-in{opacity:1;transform:none}

/* stagger interno: título → declaração; parágrafos → frase-assinatura. */
.js-anim .section-origin .origin-head .origin-title,
.js-anim .section-origin .origin-head .origin-lede,
.js-anim .section-origin .origin-narrative .section-body,
.js-anim .section-origin .origin-quote{opacity:0;transform:translateY(10px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.js-anim .section-origin .origin-head.is-in .origin-title,
.js-anim .section-origin .origin-head.is-in .origin-lede,
.js-anim .section-origin .origin-narrative.is-in .section-body,
.js-anim .section-origin .origin-narrative.is-in .origin-quote{opacity:1;transform:none}
.js-anim .section-origin .origin-head.is-in .origin-title{transition-delay:90ms}
.js-anim .section-origin .origin-head.is-in .origin-lede{transition-delay:200ms}
.js-anim .section-origin .origin-narrative.is-in .section-body:nth-of-type(1){transition-delay:60ms}
.js-anim .section-origin .origin-narrative.is-in .section-body:nth-of-type(2){transition-delay:150ms}
.js-anim .section-origin .origin-narrative.is-in .origin-quote{transition-delay:330ms}

/* o wipe da assinatura: começa depois da frase ter aparecido (330ms) e some
   sozinho, uma vez só — dispara no mesmo .is-in do resto da narrativa, sem
   observer próprio. sem .js-anim ela já nasce revelada. */
.js-anim .section-origin .origin-signature{clip-path:inset(0 100% 0 0)}
.js-anim .section-origin .origin-narrative.is-in .origin-signature{
  animation:origin-signature-reveal 1.5s var(--ease-out) 480ms forwards;
}
@keyframes origin-signature-reveal{to{clip-path:inset(0 0 0 0)}}

@media (prefers-reduced-motion:reduce){
  .js-anim .section-origin [data-reveal],
  .js-anim .section-origin .origin-head .origin-title,
  .js-anim .section-origin .origin-head .origin-lede,
  .js-anim .section-origin .origin-narrative .section-body,
  .js-anim .section-origin .origin-quote{opacity:1;transform:none;transition:none}
  .js-anim .section-origin .origin-signature{clip-path:none;animation:none}
}

@media (max-width:1024px){
  .origin-grid{grid-template-columns:0.94fr 1.06fr;column-gap:clamp(32px,3.8vw,52px)}
  .origin-photo{aspect-ratio:1/1.1}
  .origin-head{max-width:none}
  .origin-quote p{max-width:none}
  /* abaixo de ~1024 a identidade e a progressão não cabem lado a lado sem
     apertar: a faixa empilha e a progressão ganha um filete de separação. */
  .origin-authority{flex-direction:column;align-items:flex-start;gap:clamp(20px,2.6vw,26px);padding-left:clamp(24px,2.6vw,34px);padding-right:clamp(24px,2.6vw,34px)}
  .origin-path{width:100%;padding-top:clamp(16px,2.2vw,20px);border-top:1px solid rgba(247,245,239,0.16)}
}

/* ---- seção 6, mobile ----
   recomposta, não apenas reduzida: a ordem já é a do DOM (eyebrow, título,
   declaração, foto, história, frase, faixa), a foto volta ao enquadramento
   natural 4:3 e a faixa de autoridade empilha identidade sobre progressão.
   o espaçamento continua generoso — a seção encolhe sem ficar apertada. */
@media (max-width:820px){
  .origin-grid{grid-template-columns:1fr;row-gap:clamp(30px,4.6vw,40px);margin-top:clamp(36px,5vw,48px)}
  .origin-photo{grid-column:1;aspect-ratio:4/3}
  .origin-photo img{object-position:44% 22%}
  .origin-photo::before{left:-14px;bottom:-14px;width:52%;height:52%}
  .origin-narrative{grid-column:1;padding-top:0}
  .origin-authority{gap:clamp(22px,3.4vw,28px);margin-top:clamp(40px,5.2vw,56px);padding:clamp(26px,4.4vw,34px) clamp(24px,4.4vw,32px)}
  .origin-path{padding-top:clamp(18px,3vw,22px)}
  .origin-arc{left:-42vw;top:clamp(200px,40vw,320px);width:78vw;height:78vw}
}

@media (max-width:680px){
  .section-origin{padding-top:clamp(60px,9vw,78px);padding-bottom:clamp(64px,9.5vw,84px)}
  .origin-title{font-size:2rem;line-height:1.12}
  .origin-lede{font-size:1.14rem;line-height:1.4;max-width:none;margin-top:14px}
  .origin-narrative .section-body{font-size:16.5px;line-height:1.62;max-width:none;margin-bottom:18px}
  .origin-quote{margin-top:30px;padding-left:19px}
  .origin-quote p{font-size:1.16rem;line-height:1.38}
  .origin-signature{width:clamp(110px,29vw,140px);margin-left:19px}
  .origin-field{width:82%;height:clamp(300px,58vw,420px)}
  .origin-watermark{width:clamp(280px,58vw,360px);height:clamp(280px,58vw,360px);right:-24vw;bottom:-16vw;opacity:0.05}
  .origin-path{gap:9px}
  .origin-path li{gap:9px;font-size:11px;letter-spacing:0.1em;white-space:normal}
}

@media (max-width:420px){
  .origin-title{font-size:1.86rem}
  .origin-lede{font-size:1.08rem}
  .origin-identity{gap:15px}
  .origin-portrait{width:58px;height:58px}
  .origin-arc{display:none}
}

/* ================================================================
   Seção 8 — depoimentos (.section-testimonials)

   Relatos de atendimento com o Dr. Juarez, não avaliações do produto: o
   argumento é de precedência ("o Pais com Clareza é novo, a confiança não").
   Uma composição única — retrato + palco editorial, uma voz por vez — em vez
   de uma grade de cartões: cinco superfícies coloridas independentes
   fragmentavam a leitura e liam como widget de avaliações.

   Paleta: uma só. Marfim quente no painel, Deep Teal no retrato e no texto,
   leaf green apenas como acento do seletor, da categoria e da assinatura.
   O painel precisa ser perceptível de imediato em monitor claro — tom
   próprio, borda de 1px real e sombra —, nunca branco sobre quase-branco.
   ================================================================ */

.section-testimonials{
  --tst-ivory:#F1EEE3;
  --tst-panel:#FCFAF3;
  --tst-panel-border:rgba(9,75,95,0.16);
  position:relative;overflow:hidden;font-family:var(--font-sans);
  background-color:var(--tst-ivory);
  background-image:
    radial-gradient(1200px 820px at -8% 12%,rgba(216,230,199,0.5) 0%,rgba(216,230,199,0) 62%),
    radial-gradient(1300px 880px at 106% 4%,rgba(203,228,233,0.46) 0%,rgba(203,228,233,0) 60%),
    radial-gradient(900px 640px at 50% 62%,rgba(255,253,246,0.5) 0%,rgba(255,253,246,0) 70%);
  background-repeat:no-repeat;
  padding:clamp(68px,6.2vw,102px) clamp(28px,5vw,72px) clamp(76px,6.6vw,110px);
}

/* o único elemento de marca da seção: uma curva larga atravessando o fundo,
   preenchida por um degradê sage→mist quase ausente e fechada por uma
   hairline. o gesto de movimento da identidade em escala de seção — não
   arcos repetidos, não uma marca de agua do logotipo. */
.tst-curve{position:absolute;z-index:0;left:0;bottom:0;width:100%;height:clamp(340px,42vw,600px);pointer-events:none}
.section-testimonials .content-max{position:relative;z-index:1}

/* ---- intro editorial em duas colunas, alinhada à base ---- */
.tst-intro{display:grid;grid-template-columns:1.05fr 0.95fr;align-items:end;column-gap:clamp(40px,5vw,80px);margin-bottom:clamp(30px,3vw,44px)}
.tst-title{font-size:clamp(1.9rem,1.45rem + 1.7vw,2.7rem);line-height:1.08;margin:0;max-width:18ch}
.tst-intro-support{padding-bottom:4px}
.tst-support-text{font-weight:400;font-size:var(--body-md);line-height:1.6;color:var(--ink-600);margin:0 0 var(--space-4);max-width:48ch}
.tst-support-note{font-weight:600;font-size:var(--caption);line-height:1.4;color:var(--ink-400);margin:0}

/* ---- painel: retrato (~32%) + palco. uma superfície só, um raio só. ---- */
.tst-panel{display:grid;grid-template-columns:minmax(0,0.345fr) minmax(0,0.655fr);gap:clamp(26px,2.8vw,44px);align-items:stretch;background:var(--tst-panel);border:1px solid var(--tst-panel-border);border-radius:var(--radius-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 18px 40px -22px rgba(10,46,59,0.34),0 3px 10px -4px rgba(10,46,59,0.12);padding:clamp(20px,2vw,26px)}

/* o retrato encostado num bloco Deep Teal: a moldura integra a fotografia de
   estúdio (fundo cinza neutro) à identidade sem recortar a silhueta nem
   pintar a foto. a faixa de identificação nasce da própria moldura. o
   enquadramento privilegia rosto e mão aberta — e não se move nunca, é o
   ponto fixo enquanto as vozes passam. */
.tst-portrait{position:relative;display:flex;flex-direction:column;margin:0;overflow:hidden;border-radius:var(--radius-lg);background:var(--teal-900)}
.tst-portrait picture{display:block;flex:1;min-height:0}
/* o box do retrato mantém proporção 3:4 (0.75) em qualquer largura — a foto
   precisa vir já enquadrada nesse formato, cabeça+tronco centralizados,
   pra exibir sem corte nenhum. Ver especificação no fim deste arquivo/PR. */
.tst-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.tst-portrait-id{display:flex;flex-direction:column;gap:2px;padding:clamp(12px,1.2vw,16px) clamp(14px,1.4vw,18px) clamp(14px,1.4vw,18px)}
.tst-portrait-name{font-weight:700;font-size:14.5px;line-height:1.25;letter-spacing:-0.01em;color:var(--text-on-dark)}
.tst-portrait-creds{font-weight:500;font-size:12px;line-height:1.35;color:var(--blue-300)}

/* ---- palco: uma voz por vez, centrada verticalmente no espaço livre ---- */
.tst-stage{display:flex;flex-direction:column;min-width:0;padding:clamp(14px,1.6vw,22px) clamp(12px,1.8vw,26px) clamp(6px,0.8vw,10px)}

/* sem JS os oito relatos ficam empilhados e legíveis; .tst-live (posta pelo
   script) é o que os sobrepõe numa célula só e liga a navegação. */
.tst-slides{display:flex;flex-direction:column;min-width:0;gap:clamp(24px,2.6vw,34px)}
.tst-live .tst-slides{display:grid;flex:1;align-content:center}
.tst-live .tst-slide{grid-area:1 / 1;visibility:hidden;opacity:0}
.tst-live .tst-slide.is-active{visibility:visible;opacity:1}

.tst-slide{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.tst-slide:focus-visible{outline:2px solid var(--focus-ring);outline-offset:8px;border-radius:var(--radius-sm)}

/* categoria: linha de tipo com um traço leaf green — sem pílula, sem chip. */
.tst-category{font-weight:700;font-size:11px;letter-spacing:var(--ls-wide);text-transform:uppercase;line-height:1;color:var(--accent-brand-strong);padding-bottom:11px;border-bottom:2px solid var(--green-500);margin-bottom:clamp(18px,1.8vw,24px)}

/* o relato é a voz principal da seção: corpo editorial, não body copy. */
.tst-text{margin:0;font-weight:500;font-size:clamp(1.22rem,0.98rem + 0.9vw,1.7rem);line-height:1.42;letter-spacing:-0.014em;color:var(--teal-900);max-width:38ch;text-wrap:pretty}
.tst-attrib{margin-top:clamp(20px,2.2vw,30px);padding-left:16px;border-left:2px solid var(--green-500);display:flex;flex-direction:column;gap:3px}
.tst-name{font-style:normal;font-weight:700;font-size:16px;line-height:1.3;color:var(--teal-900)}
/* origem do relato: informação de procedência, não selo. peso de legenda —
   uma linha abaixo do nome, no cinza de apoio, sem caixa, sem ícone e sem
   cor de acento, para nunca competir com a frase nem parecer um "verificado". */
.tst-source{font-weight:500;font-size:12.5px;line-height:1.35;color:var(--ink-400)}

/* ---- navegação: os nomes das famílias, não dots ---- */
.tst-nav{display:none;min-width:0;align-items:center;justify-content:space-between;gap:var(--space-5);margin-top:clamp(24px,2.6vw,36px);padding-top:clamp(16px,1.6vw,20px);border-top:1px solid rgba(10,46,59,0.12)}
.tst-live .tst-nav{display:flex}
/* oito nomes numa linha só ficariam apertados: duas linhas de quatro leem
   como um índice de vozes e mantêm cada alvo confortável. */
.tst-tabs{display:grid;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px clamp(4px,1vw,12px);flex:1}
.tst-tab{position:relative;justify-self:start;max-width:100%;font-family:inherit;font-weight:600;font-size:14px;line-height:1.2;letter-spacing:-0.005em;text-align:left;color:var(--ink-400);background:none;border:0;border-radius:var(--radius-sm);padding:9px 6px 11px;cursor:pointer;transition:color var(--duration-base) var(--ease-standard)}
.tst-tab::after{content:'';position:absolute;left:6px;right:6px;bottom:4px;height:2px;border-radius:2px;background:var(--green-500);transform:scaleX(0);transform-origin:left center;transition:transform var(--duration-base) var(--ease-out)}
.tst-tab:hover{color:var(--teal-700)}
.tst-tab.is-active{color:var(--teal-900);font-weight:700}
.tst-tab.is-active::after{transform:scaleX(1)}
.tst-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* anterior / próximo: só no mobile, onde a lista de nomes seria poluição. */
.tst-steps{display:none;gap:8px}
.tst-step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--teal-700);background:rgba(9,75,95,0.05);border:1px solid rgba(9,75,95,0.18);border-radius:var(--radius-pill);cursor:pointer;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.tst-step svg{width:20px;height:20px}
.tst-step:hover{background:rgba(9,75,95,0.09);border-color:rgba(9,75,95,0.3)}
.tst-step:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.tst-counter{flex-shrink:0;margin:0;font-variant-numeric:tabular-nums;font-weight:700;font-size:11.5px;letter-spacing:0.1em;color:var(--ink-400)}
.tst-counter span{color:var(--teal-700)}

/* ---- tablet: o retrato deita numa faixa de identidade compacta acima do
   relato, mantendo o rosto visível sem roubar largura do texto. ---- */
@media (max-width:900px){
  .tst-intro{grid-template-columns:1fr;row-gap:var(--space-4);align-items:start;margin-bottom:clamp(26px,3.6vw,36px)}
  .tst-title{max-width:24ch}
  .tst-support-text{max-width:64ch}
  .tst-panel{grid-template-columns:1fr;gap:var(--space-5)}
  /* em largura total, uma foto alta como o texto ao lado evita o retângulo
     de teal vazio que sobra ao esticá-la. margin-inline:auto centraliza o
     selo retrato+nome na largura do painel — sem isso ele nasce colado à
     esquerda (width:max-content vira item de grid alinhado ao início). */
  .tst-portrait{flex-direction:row;align-items:center;gap:clamp(14px,2vw,20px);padding:clamp(12px,1.6vw,16px);width:max-content;max-width:100%;margin-inline:auto}
  .tst-portrait picture{flex:0 0 clamp(104px,15vw,132px);height:clamp(104px,15vw,132px);align-self:auto;border-radius:var(--radius-md);overflow:hidden}
  .tst-portrait img{object-position:24% 18%}
  .tst-portrait-id{padding:0}
  .tst-portrait-name{font-size:15.5px}
  .tst-stage{padding:0 clamp(4px,1.4vw,14px) 4px}
  .tst-text{max-width:52ch}
  .tst-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---- mobile: um cartão-história. o retrato vira selo de identidade, o
   relato é o conteúdo e a navegação se reduz a anterior / próximo mais o
   contador — nada de oito nomes, dots ou setas grandes. ---- */
@media (max-width:720px){
  .section-testimonials{padding-bottom:clamp(60px,8vw,80px)}
  .tst-panel{padding:clamp(16px,4vw,20px);gap:var(--space-4)}
  /* width:100% (not the tablet rule's width:max-content) is the fix here:
     max-content sizes this row to its text's natural width with nothing to
     stop it — a longer name/credential string (or a fallback font before
     Cabin loads) pushes the banner past the card's right edge instead of
     wrapping. min-width:0 on the text column is what lets it actually
     shrink and wrap inside that fixed width rather than forcing the row
     wider regardless. */
  .tst-portrait{width:100%;max-width:100%;margin-inline:0;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:var(--radius-lg)}
  .tst-portrait picture{flex:0 0 60px;height:60px;border-radius:var(--radius-md)}
  .tst-portrait img{object-position:24% 18%}
  .tst-portrait-id{min-width:0;flex:1}
  .tst-portrait-name{font-size:14.5px;overflow-wrap:break-word}
  .tst-portrait-creds{font-size:11.5px;overflow-wrap:break-word}

  .tst-stage{padding:clamp(6px,2vw,10px) 4px 0}
  /* aqui o empilhamento sai de cena: só o relato ativo é renderizado, para
     que uma fala curta não deixe um cartão alto e vazio. */
  .tst-live .tst-slides{display:block}
  .tst-live .tst-slide{display:none;visibility:visible;opacity:1}
  .tst-live .tst-slide.is-active{display:flex}
  .tst-text{font-size:1.16rem;line-height:1.5;max-width:none}
  .tst-attrib{margin-top:20px}

  .tst-source{font-size:12px}

  /* os nomes não saem de cena no telefone: sem eles o visitante perde a
     única forma de ir direto a um relato, e oito toques em "próximo" não são
     navegação. a grade de quatro colunas vira um trilho que rola na
     horizontal DENTRO do painel — overflow próprio, nunca da página — com
     scroll-snap e sem barra visível. flex-basis:100% põe o trilho numa linha
     só e joga setas e contador para a linha de baixo; o -4px de margem
     compensa o padding que dá respiro ao anel de foco nas pontas. */
  .tst-nav{flex-wrap:wrap;gap:10px var(--space-4);margin-top:22px;padding-top:16px}
  .tst-tabs{display:flex;flex:1 0 100%;gap:0 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
  .tst-tabs::-webkit-scrollbar{display:none}
  .tst-tab{flex:0 0 auto;scroll-snap-align:center;white-space:nowrap;font-size:13.5px;padding:11px 8px 13px}
  .tst-steps{display:flex}
  .tst-counter{margin-left:auto}
}

/* ---- movimento: as vozes trocam, o retrato nunca. dois tempos — quem sai
   cede o lugar depressa, quem entra sobe em cascata curta (categoria →
   frase → assinatura). A cascata é o que torna a troca perceptível sem
   alongar nada: o olho pega o movimento nas três linhas, não num bloco só
   piscando. Fim a fim ~490ms, com a frase — que é o que se lê — pronta aos
   ~440ms; a rotação automática é de 4200ms, então sobra folga de sobra.

   **A entrada é `animation`, não `transition`, e isso não é estilístico.**
   No mobile (≤720px) o slide ativo entra por troca de `display` (none →
   flex) para o cartão acompanhar a altura da fala — e transição nenhuma
   dispara quando um elemento passa a ser renderizado. Era por isso que no
   telefone não existia animação nenhuma, só um corte seco. Keyframes
   disparam nesse caso, então o mesmo bloco serve às duas larguras: não
   trocar por `transition` aqui. Só `transform` e `opacity` animam. */
/* A entrada desliza no SENTIDO DA NAVEGAÇÃO, não de baixo para cima.
   Subir 12px é o gesto de "conteúdo chegando" e serve para um bloco que
   aparece uma vez; aqui o que precisa ser comunicado é "trocou, e foi para
   frente" — o mesmo eixo das setas, do contador e do swipe. O deslocamento
   entra por variável porque o sentido vem do [data-dir] do painel, e o
   fallback cobre a primeira montagem, quando ainda não há direção. */
@keyframes tstVoiceIn{
  from{opacity:0;transform:translate3d(var(--tst-in,15px),0,0)}
  to{opacity:1;transform:none}
}

/* quem sai não pede leitura: some em 170ms com um deslize curto no sentido
   da navegação. só o desktop tem saída — no mobile o slide antigo volta a
   `display:none` no mesmo instante e não há o que animar. */
.tst-live .tst-slide{transform-origin:0% 50%}
.tst-live .tst-slide:not(.is-active){transform:none}
.tst-live .tst-slide.is-leaving{visibility:visible;opacity:0;transition:opacity 130ms var(--ease-standard),transform 130ms var(--ease-standard)}
.tst-live[data-dir="1"] .tst-slide.is-leaving{transform:translate3d(-16px,0,0)}
.tst-live[data-dir="-1"] .tst-slide.is-leaving{transform:translate3d(16px,0,0)}

/* o .is-entering segura o painel por um frame antes da cascata começar —
   garantia contra um lampejo do relato novo já montado por cima do que
   ainda está saindo (é esse estado que o reflow do script fixa). */
.tst-live .tst-slide.is-entering{opacity:0}

/* A cascata. `both` faz cada linha esperar no estado inicial durante o
   próprio atraso, em vez de aparecer e só depois animar.

   A PRIMEIRA LINHA NÃO TEM ATRASO, e isso é o ponto. Antes ela começava em
   110ms, e como o relato que sai já está em opacity 0 no primeiro frame,
   sobravam ~110ms de painel literalmente vazio antes de qualquer coisa
   aparecer — buraco seguido de desvanecimento, que lê como "o texto
   recarregou" e não como troca. Com a categoria saindo em 0 a troca começa
   no mesmo frame em que a anterior sai, e é isso que dá a leitura de
   substituição.

   Fim a fim: 90 + 240 = 330ms (antes 490ms). O passo de 45ms mantém as três
   linhas como um gesto só, com hierarquia, sem virar fila. Encurtar mais
   apaga a cascata; alongar devolve a sensação de lentidão. */
.tst-live .tst-slide.is-active > *{animation:tstVoiceIn 240ms var(--ease-out) both}
.tst-live .tst-slide.is-active .tst-category{animation-delay:0ms}
.tst-live .tst-slide.is-active .tst-text{animation-delay:45ms}
.tst-live .tst-slide.is-active .tst-attrib{animation-delay:90ms}

/* o sentido do deslize acompanha a navegação: indo para frente, o relato
   novo vem da direita (o que sai vai para a esquerda, regra acima). */
.tst-live[data-dir="1"] .tst-slide.is-active > *{--tst-in:15px}
.tst-live[data-dir="-1"] .tst-slide.is-active > *{--tst-in:-15px}

.js-anim .section-testimonials [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
.js-anim .section-testimonials [data-reveal].is-in{opacity:1;transform:none}
.js-anim .section-testimonials .tst-panel[data-reveal]{transition-delay:90ms}

/* motion reduzido: sem deslize e sem rotação automática (o script lê a mesma
   media query e não agenda nada) — a troca acontece só a pedido. */
@media (prefers-reduced-motion:reduce){
  .tst-live .tst-slide,.tst-slide.is-leaving,.tst-tab,.tst-tab::after,.tst-step{transition:none}
  .tst-live .tst-slide.is-active > *{animation:none}
  .tst-live .tst-slide.is-leaving,.tst-live .tst-slide.is-entering{transform:none}
  .js-anim .section-testimonials [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ================================================================
   Seção 9 — planos (.section-pricing)

   Vem depois dos depoimentos (marfim) e volta ao Deep Teal do hero: a
   mudança de fundo é o que separa "confiança" de "como eu
   entro". Fundo é uma variação tonal do próprio teal — nada de azul
   elétrico, glow radial ou gradiente de SaaS — com uma única curva
   orgânica no rodapé, o mesmo gesto de movimento da .tst-curve.

   Dois cartões, nunca três: são duas portas de acesso (uma solução
   específica avulsa ou a assinatura completa), e Mensal/Anual são
   períodos de cobrança de uma delas — por isso o seletor vive dentro do
   cartão do Completo, não acima da grade. Ambos os cartões pertencem ao
   mesmo sistema visual (marfim, tipografia Deep Teal, mesmo raio, mesma
   métrica); o Completo se distingue por lavagem mist, borda leaf green e
   CTA sólido — não por uma cor nova.
   ================================================================ */

.section-pricing{
  --pr-ivory:#F7F5EF;
  --pr-card-border:rgba(10,46,59,0.10);
  position:relative;overflow:hidden;font-family:var(--font-sans);
  background-color:var(--teal-900);
  background-image:
    radial-gradient(1180px 780px at 12% 0%,rgba(15,100,128,0.42) 0%,rgba(15,100,128,0) 62%),
    radial-gradient(1040px 760px at 96% 92%,rgba(9,75,95,0.55) 0%,rgba(9,75,95,0) 60%),
    /* variação tonal muito leve atrás do lado direito da grade, onde o
       Completo fica no desktop — profundidade, não decoração. */
    radial-gradient(760px 560px at 68% 58%,rgba(139,179,60,0.09) 0%,rgba(139,179,60,0) 66%),
    radial-gradient(1100px 700px at 52% 44%,rgba(139,179,60,0.05) 0%,rgba(139,179,60,0) 62%);
  background-repeat:no-repeat;
  padding:clamp(76px,7vw,112px) clamp(28px,5vw,72px) clamp(84px,7.4vw,116px);
}

/* costura com o marfim dos depoimentos — o mesmo degradê das outras
   emendas do site, invertido (claro -> teal) porque aqui o escuro é o
   que começa. */
.pricing-seam{position:absolute;top:0;left:0;width:100%;height:clamp(24px,2.6vw,38px);background:linear-gradient(to bottom,#F1EEE3 0%,var(--teal-900) 100%);z-index:0;pointer-events:none}

.pricing-wave{position:absolute;z-index:0;left:0;bottom:0;width:100%;height:clamp(300px,36vw,520px);pointer-events:none}
.section-pricing .content-max{position:relative;z-index:1}

/* ---- cabeçalho ---- */
.pricing-intro{max-width:660px;margin:0 auto clamp(28px,3.2vw,42px);text-align:center}
.pricing-title{font-weight:800;font-size:clamp(1.9rem,1.45rem + 1.7vw,2.7rem);line-height:1.08;letter-spacing:-0.02em;color:var(--text-on-dark);margin:0 0 var(--space-4)}
.pricing-support{font-weight:400;font-size:var(--body-md);line-height:1.62;color:rgba(238,246,247,0.76);margin:0 auto;max-width:52ch;text-wrap:pretty}

/* ---- o que você recebe ----
   Fecho da seção, logo abaixo da grade e colado ao strip de acesso: os dois
   formam um bloco só. Estava acima dos cartões e criava uma segunda
   introdução empilhada na primeira — 550px de texto no mobile antes de o
   leitor ver a primeira porta, que é exatamente o que fazia a seção ler
   como poluída.

   O respiro é assimétrico de propósito: mais espaço entre a grade e esta
   faixa (separa dois assuntos) e menos entre ela e o strip (une os dois num
   fecho). Espaçamento igual nos dois lados devolveria a leitura de três
   blocos soltos.

   Deliberadamente SEM superfície de cartão. Os dois cartões de plano são o
   objeto da seção e a hierarquia entre eles é construída com anel, halo e
   luz (§8); um terceiro bloco com fundo próprio competiria com isso. Só
   ícone, título e uma linha. */
.pricing-includes{max-width:1020px;margin:clamp(36px,4.2vw,54px) auto 0;text-align:center}
.pricing-includes-label{display:block;font-weight:700;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(185,214,138,0.82);margin-bottom:clamp(14px,1.6vw,20px)}
.pricing-includes-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,30px);margin:0;padding:0;list-style:none;text-align:left}
.pinc{display:flex;align-items:flex-start;gap:12px;min-width:0}
.pinc-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(139,179,60,0.3);background:rgba(139,179,60,0.1);color:var(--green-300)}
.pinc-icon svg{width:18px;height:18px}
.pinc-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.pinc-title{font-weight:700;font-size:var(--body-sm);line-height:1.3;color:var(--text-on-dark)}
.pinc-desc{font-weight:400;font-size:var(--caption);line-height:1.5;color:rgba(238,246,247,0.68);text-wrap:pretty}

/* ---- seletor de período ----
   Vive dentro do cartão do Completo (a única oferta recorrente), sobre a
   lavagem clara dele. A posição/largura do polegar é medida pelo script
   (as duas opções têm larguras diferentes por causa do selo "Economize"),
   então sem JS ele fica com largura 0 e quem marca a opção ativa é o
   próprio fundo do botão — a classe .is-live no trilho é o interruptor
   entre os dois modos, mesmo contrato do .tst-live dos depoimentos. */
.billing-switch{position:relative;display:inline-flex;align-items:center;gap:2px;padding:5px;border-radius:var(--radius-pill);background:var(--pr-ivory);border:1px solid rgba(10,46,59,0.10);box-shadow:0 14px 30px -18px rgba(4,20,26,0.9),inset 0 1px 0 rgba(255,255,255,0.6)}
.billing-thumb{position:absolute;left:0;top:5px;bottom:5px;width:0;border-radius:var(--radius-pill);background:var(--teal-700);box-shadow:0 4px 10px -4px rgba(9,75,95,0.55);pointer-events:none;transition:transform 380ms cubic-bezier(.32,.72,0,1),width 380ms cubic-bezier(.32,.72,0,1)}
.billing-opt{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 22px;border:0;border-radius:var(--radius-pill);background:none;font-family:inherit;font-weight:700;font-size:14.5px;letter-spacing:-0.005em;color:rgba(9,75,95,0.82);cursor:pointer;transition:color var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard)}
.billing-opt:hover{color:var(--teal-700)}
/* a opção em repouso também precisa parecer alvo: no sulco, passar o mouse
   levanta uma pastilha clara, que é o mesmo lugar onde o polegar vai parar
   se a pessoa clicar. Só na inativa — a ativa já tem o polegar. */
.billing-switch--compact .billing-opt:not(.is-active):hover{background:rgba(255,255,255,0.72)}
.billing-opt.is-active{color:var(--ivory-50);background:var(--teal-700)}
.billing-switch.is-live .billing-opt.is-active{background:none}
.billing-opt:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* o selo volta para dentro da pílula, encostado no rótulo "Anual": solto
   acima do controle ele lia como um balão à parte, apontando para a opção
   em vez de qualificá-la. Aqui ele é a própria opção — e o preenchimento
   leaf green sólido mantém a presença que a versão flutuante tinha, sem
   precisar de rabicho. Continua sendo filho do <button>, então soma ao nome
   acessível ("Anual, Economize") e ao alvo de clique. */
.billing-save{flex:none;font-weight:800;font-size:10px;letter-spacing:0.09em;text-transform:uppercase;line-height:1;padding:6px 10px;border-radius:var(--radius-pill);background:var(--green-500);color:var(--teal-900);transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
/* sobre o polegar Deep Teal o verde sólido fica pesado: ali o selo vira uma
   pastilha de contorno, ainda leaf green, sem competir com o rótulo claro
   ao lado. */
.billing-opt.is-active .billing-save{background:rgba(139,179,60,0.2);color:var(--green-300);box-shadow:inset 0 0 0 1px rgba(139,179,60,0.55)}

/* ---- os dois cartões ---- */
/* colunas desiguais: o Completo é ~9% mais largo que a Solução. É o sinal de
   hierarquia mais barato que existe — não precisa de selo, de cor nova nem de
   deslocamento vertical, e continua valendo com o mouse parado. `align-items:
   stretch` mantém os dois com a mesma altura, então os topos seguem alinhados
   e a comparação de preço lado a lado (o que a seção tem de entregar em dois
   segundos) não se perde. */
.pricing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.09fr);gap:clamp(18px,2vw,26px);align-items:stretch;max-width:1020px;margin:0 auto}

.plan-card{display:flex;flex-direction:column;min-width:0;border-radius:var(--radius-xl);padding:clamp(26px,2.6vw,36px);transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),opacity 200ms var(--ease-out)}
/* o secundário recua em repouso: mesma ivory (precisa continuar legível e
   claramente clicável — é uma das duas portas comerciais, não um cartão
   desativado), só que assentado, com menos profundidade. O contraste entre os
   dois é que carrega a hierarquia; subir só o Completo não bastava. */
.plan-card--solucao{background:var(--pr-ivory);border:1px solid var(--pr-card-border);box-shadow:0 12px 26px -20px rgba(4,20,26,0.6),0 2px 6px -3px rgba(4,20,26,0.26)}
/* mais forte, não mais barulhento: lavagem mist, hairline leaf green e um
   segundo anel de 1px — nenhuma cor fora da paleta, nenhuma sombra grande. */
/* mais forte, não mais barulhento: a diferença vem de borda, anel e
   profundidade de sombra — mais um halo sage muito aberto que separa o
   cartão do teal ao redor sem virar glow. Os topos dos dois cartões
   continuam alinhados de propósito: deslocar o Completo verticalmente
   quebraria a comparação de preço lado a lado, que é o que a seção precisa
   entregar em dois segundos. */
/* o halo sage tinha -24px de espalhamento e simplesmente não chegava a
   aparecer sobre o Deep Teal: o cartão ficava só "um pouco mais verde" que o
   vizinho. Aqui ele abre de verdade (-16px) e ganha alfa, o anel interno
   dobra e a borda leaf green fecha o contorno. Nada disso depende de :hover —
   é o estado de repouso, que é o que a pessoa vê 95% do tempo. */
.plan-card--completo{position:relative;overflow:hidden;background:linear-gradient(168deg,#FEFDFA 0%,#E9F3F2 100%);border:1px solid rgba(110,143,46,0.68);box-shadow:0 0 0 2px rgba(139,179,60,0.3),0 0 96px -16px rgba(139,179,60,0.42),0 34px 66px -26px rgba(4,20,26,0.84),0 5px 14px -4px rgba(4,20,26,0.4)}
/* fio leaf green no topo: no mobile é ele que anuncia a mudança de nível
   assim que o cartão entra na tela. */
.plan-card--completo::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green-700) 0%,var(--green-500) 46%,var(--blue-500) 100%)}
/* O hover NÃO é mais comparativo. A versão anterior apagava o irmão
   (`:not(:hover)` com opacity 0.88 + 2px para baixo), e o efeito colateral era
   o contrário do pretendido: em repouso os dois cartões liam igual, e o
   Completo só "acendia" quando o mouse passava sobre a Solução. O destaque
   ficava dependendo do cursor — e no telefone, onde `hover:hover` não vale,
   não existia nunca. Agora a hierarquia mora no repouso (largura, halo, anel,
   fio do topo) e o hover só confirma o cartão sob o cursor. Não reintroduzir
   o dimming do irmão.

   Só onde existe cursor: em toque o :hover gruda depois do tap. */
@media (hover:hover){
  /* seletores longos de propósito: os cartões carregam data-reveal, e a
     regra de entrada `.js-anim .section-pricing [data-reveal].is-in`
     declara transform:none / opacity:1. Um `.plan-card:hover` simples
     perde para ela e só a sombra mudaria. Estes precisam pesar mais. */
  .section-pricing .pricing-grid .plan-card[data-reveal]:hover{transform:translateY(-6px)}
  .plan-card--solucao:hover{box-shadow:0 24px 50px -24px rgba(4,20,26,0.8),0 4px 12px -4px rgba(4,20,26,0.38)}
  /* o principal sobe A PARTIR de um repouso que já é forte: halo mais aberto
     ainda, anel mais presente e sombra mais funda. */
  .plan-card--completo:hover{box-shadow:0 0 0 2px rgba(139,179,60,0.42),0 0 116px -12px rgba(139,179,60,0.52),0 46px 82px -26px rgba(4,20,26,0.88),0 7px 18px -5px rgba(4,20,26,0.46)}
}

/* mesma caixa nos dois cartões (só o preenchimento muda), para que os
   títulos abaixo fiquem na mesma linha de base. */
.plan-eyebrow{display:inline-flex;align-items:center;align-self:flex-start;height:26px;padding:0 12px;border-radius:var(--radius-pill);font-weight:700;font-size:10.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--teal-500);border:1px solid rgba(9,75,95,0.2);background:none}
.plan-eyebrow--badge{height:auto;min-height:26px;padding:5px 12px;letter-spacing:0.06em;text-align:left;color:var(--green-700);border-color:rgba(110,143,46,0.32);background:var(--sage-200)}

.plan-name{font-family:var(--font-sans);font-weight:800;font-size:clamp(1.35rem,1.1rem + 0.7vw,1.65rem);line-height:1.18;letter-spacing:-0.022em;color:var(--teal-900);margin:16px 0 8px}
.plan-desc{font-weight:400;font-size:var(--body-sm);line-height:1.58;color:var(--ink-600);margin:0;max-width:36ch;text-wrap:pretty}

/* ---- temas disponíveis (cartão da solução) ----
   Ocupa no cartão da esquerda o lugar que o preço ocupa no da direita, com
   a mesma margem superior. Chips de contorno, não pastilhas verdes cheias
   — são conteúdo disponível, não selos de destaque, e um bloco de cor aqui
   roubaria o acento do cartão vizinho. */
.plan-topics{margin:clamp(20px,2.2vw,28px) 0 0}
.plan-topics-label{display:block;margin-bottom:10px;font-weight:700;font-size:10.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--teal-500)}
.plan-topics-row{display:flex;flex-wrap:wrap;gap:8px}
.plan-topic{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid rgba(9,75,95,0.18);background:rgba(255,255,255,0.6);font-weight:700;font-size:14px;letter-spacing:-0.005em;color:var(--teal-700)}
/* o ponto leaf green é o mesmo sinal usado nos eyebrows da página: dá
   "disponível" sem precisar de uma palavra a mais. */
.plan-topic::before{content:'';width:6px;height:6px;margin-right:9px;border-radius:50%;background:var(--green-500);flex:none}

/* ---- seletor de período dentro do cartão do Completo ----
   Antes do preço porque é ele que governa o número que vem abaixo: a
   leitura é "escolho o período, vejo o valor". Sobre a lavagem clara do
   cartão o trilho fica branco, um degrau acima do fundo. */
.plan-billing{margin:clamp(20px,2.2vw,28px) 0 0}
/* ---- a trilha precisa ser um SULCO, não uma placa ----
   A versão anterior tinha `background:var(--white)` dentro de um cartão que
   começa em #FEFDFA: branco sobre quase-branco, com borda a 0,14 de alfa. A
   trilha sumia, e o que sobrava na tela era um comprimido escuro escrito
   "Mensal" e a palavra "Anual" solta no fundo do cartão — nada dizia que ali
   havia duas posições e que a segunda era clicável.

   A correção é inverter a profundidade: a trilha desce ABAIXO da superfície
   do cartão (lavagem teal + sombra interna) em vez de tentar subir acima
   dela. Aí o polegar escuro lê como "a posição escolhida dentro de um trilho
   com duas casas" — é o recesso que faz o controle existir, não a borda.
   Não devolver a trilha para branco: não existe branco mais claro que o
   cartão para diferenciá-la. */
.billing-switch--compact{padding:4px;background:rgba(9,75,95,0.09);border-color:rgba(10,46,59,0.16);box-shadow:inset 0 1px 3px rgba(4,20,26,0.13),inset 0 -1px 0 rgba(255,255,255,0.5)}
.billing-switch--compact .billing-thumb{top:4px;bottom:4px}
.billing-switch--compact .billing-opt{height:34px;padding:0 16px;font-size:13.5px;gap:8px}
.billing-switch--compact .billing-save{font-size:9.5px;padding:5px 9px}

/* ---- preço ----
   o número rola verticalmente e a caixa acompanha a largura do valor que
   entra (59,90 -> 599 muda a contagem de caracteres): equivalente nativo
   do NumberFlow, sem dependência. tabular-nums evita o pulo de largura
   entre dígitos. */
.plan-price{margin:clamp(20px,2.2vw,28px) 0 0}
/* logo abaixo do seletor o respiro é menor: os dois formam um bloco só. */
.plan-billing + .plan-price{margin-top:16px}
.plan-price-row{display:flex;align-items:flex-end;gap:7px}
.plan-currency{font-weight:700;font-size:1.05rem;line-height:1;color:var(--teal-700);padding-bottom:0.5em}
.plan-amount{position:relative;display:inline-block;overflow:hidden;font-weight:800;font-size:clamp(2.25rem,1.85rem + 1.4vw,2.95rem);line-height:1;letter-spacing:-0.032em;color:var(--teal-900);font-variant-numeric:tabular-nums}
.plan-amount.is-rolling{transition:width 420ms var(--ease-out)}
.pr-val{display:inline-block;vertical-align:top;line-height:1;white-space:nowrap;transition:transform 420ms var(--ease-out),opacity 300ms var(--ease-out)}
.pr-val.pr-ghost{position:absolute;left:0;top:0}
.pr-val.pr-up{transform:translateY(-100%);opacity:0}
.pr-val.pr-down{transform:translateY(100%);opacity:0}
.plan-period{font-weight:600;font-size:var(--body-sm);line-height:1;color:var(--ink-400);padding-bottom:0.55em;transition:opacity var(--duration-base) var(--ease-standard)}
.plan-period.is-swapping{opacity:0}
.plan-equiv{display:block;margin-top:8px;font-weight:500;font-size:var(--caption);line-height:1.4;color:var(--ink-400);transition:opacity var(--duration-base) var(--ease-standard)}
.plan-equiv[hidden]{display:none}

/* texto só para leitores de tela: o preço animado é aria-hidden (a rolagem
   dos dígitos vira ruído), então a leitura correta vem daqui. */
.pr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- lista de entregas: um check desenhado em CSS, sem biblioteca de
   ícones e sem um ícone diferente por linha (a hierarquia é do texto). ---- */
.plan-features{list-style:none;margin:clamp(18px,2vw,24px) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
/* contraste um passo acima do body copy: a lista é argumento, não legenda. */
.plan-features li{position:relative;padding-left:28px;font-weight:500;font-size:var(--body-sm);line-height:1.45;color:var(--ink-800)}
.plan-features li::before{content:'';position:absolute;left:3px;top:0.3em;width:11px;height:6px;border-left:2.2px solid var(--green-700);border-bottom:2.2px solid var(--green-700);border-radius:1px;transform:rotate(-45deg)}

/* o fio leaf green que antes vinha da linha "Tudo do Plano Jornada":
   separa o preço da lista sem gastar uma linha de texto para isso. */
.plan-features--exclusive{margin-top:clamp(18px,2vw,24px);padding-top:clamp(18px,2vw,24px);border-top:1px solid rgba(110,143,46,0.28);gap:13px}
.plan-features--exclusive li{font-weight:600;font-size:var(--body-md);line-height:1.4;letter-spacing:-0.008em;color:var(--teal-900)}
.plan-features--exclusive li::before{top:0.36em}

/* a linha dos encontros ao vivo: única superfície tingida da lista, e o
   selo "ao vivo" carrega a palavra que saiu do texto. Sem cartão dentro do
   cartão — é a mesma linha, só apoiada. */
.plan-features--exclusive li.plan-feature-live{display:flex;align-items:center;gap:10px;margin:2px -12px -4px;padding:11px 12px 11px 40px;border-radius:var(--radius-md);background:linear-gradient(100deg,rgba(139,179,60,0.16) 0%,rgba(139,179,60,0.06) 100%)}
.plan-features--exclusive li.plan-feature-live::before{left:15px;top:calc(11px + 0.36em)}
.plan-live-badge{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:auto;padding:5px 10px;border-radius:var(--radius-pill);background:var(--white);border:1px solid rgba(110,143,46,0.4);font-weight:800;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--green-700)}
.plan-live-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 3px rgba(139,179,60,0.22)}

/* por que o Completo existe, em uma linha. Secundária de propósito: explica,
   não vende. */
.plan-bridge{margin:clamp(18px,2vw,22px) 0 0;font-weight:400;font-size:var(--caption);line-height:1.5;color:var(--ink-600);text-wrap:pretty}

/* ---- ações ---- */
.plan-actions{margin-top:auto;padding-top:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;align-items:stretch;gap:14px}
/* reversão de risco logo abaixo do CTA: a informação que responde "e se eu
   me arrepender?" no exato ponto em que a pergunta aparece. Peso de
   legenda, centralizada sob o botão — tranquiliza sem virar selo de
   garantia, que é gramática de infoproduto (§2). O `gap:14px` do flex já
   dá o respiro; a margem fica zerada para não somar duas vezes. */
.plan-reassure{margin:0;font-weight:400;font-size:12.5px;line-height:1.45;text-align:center;color:var(--ink-400);text-wrap:pretty}
.plan-cta{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 22px;border-radius:var(--radius-lg);font-family:inherit;font-weight:700;font-size:15px;letter-spacing:-0.005em;text-align:center;cursor:pointer;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),transform 220ms var(--ease-out)}
.plan-cta--outline{border:1px solid rgba(9,75,95,0.26);background:transparent;color:var(--teal-700)}
.plan-cta--outline:hover,.plan-cta--outline:focus-visible{background:var(--teal-700);border-color:var(--teal-700);color:var(--ivory-50)}
.plan-cta--solid{height:56px;font-size:15.5px;border:1px solid var(--green-700);background:var(--green-500);color:var(--teal-900);box-shadow:0 12px 26px -12px rgba(110,143,46,0.8),inset 0 1px 0 rgba(255,255,255,0.3)}
.plan-cta--solid:hover,.plan-cta--solid:focus-visible{background:var(--green-700);border-color:var(--green-700);color:var(--white);box-shadow:0 14px 26px -12px rgba(110,143,46,0.6)}
.plan-cta:hover{transform:translateY(-2px)}
.plan-cta:active{transform:translateY(0)}
.plan-cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ---- estado "abrindo checkout" ----
   O destino é a Kiwify, em outro domínio: entre o clique e a primeira
   pintura da página deles passam segundos em que NADA muda na tela, e quem
   está comprando conclui que o botão não funcionou e clica de novo. Este
   estado é o único sinal possível: a navegação é do navegador, não nossa, e
   não existe evento de "o destino respondeu".

   Nada de pointer-events:none aqui: a classe entra durante o despacho do
   próprio clique, e mexer na interatividade do link nesse instante é
   arriscar a navegação que ele acabou de iniciar. O clique repetido é
   barrado no JS, que sabe qual botão está pendente. */
.plan-cta.is-loading,.sm-cta.is-loading{gap:10px;cursor:progress}
.cta-spinner{flex:none;width:17px;height:17px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:0.8;animation:cta-spin 620ms linear infinite}
@keyframes cta-spin{to{transform:rotate(360deg)}}


/* ---- faixa de conveniência ---- */
.pricing-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin:clamp(18px,2vw,24px) auto 0;padding:14px 26px;width:fit-content;max-width:100%;border-radius:var(--radius-pill);border:1px solid rgba(155,198,216,0.18);background:rgba(6,32,42,0.34);font-weight:500;font-size:var(--caption);letter-spacing:0.01em;color:rgba(238,246,247,0.78)}
.pricing-strip-dot{width:4px;height:4px;border-radius:50%;background:rgba(139,179,60,0.6)}

/* ================================================================
   Soluções (.sm) — <dialog> nativo, duas etapas no mesmo painel

   Etapa 1 escolhe o tema, etapa 2 mostra o tema escolhido. As duas
   dividem o mesmo cabeçalho e o mesmo painel rolável: trocar de etapa é
   trocar qual contêiner está visível, não montar outra tela — é o que
   permite que a segunda etapa exista sem tirar o usuário da landing.

   O <dialog> modal entrega trap de foco, Escape, inércia do fundo e
   devolução do foco sem reimplementação; no mobile o mesmo painel encosta
   na borda inferior e vira bottom sheet (margem, raio e alça — nada de
   segunda árvore de markup).
   ================================================================ */
/* ---- três níveis de superfície ----
   O modal inteiro era marfim (#F7F5EF) com cartões de branco translúcido
   por cima: o degrau ficava em 1,04–1,06 de razão de contraste, ou seja,
   invisível em monitor claro — as bordas existiam, mas o olho lia uma
   chapa só. Aqui o fundo desce para um marfim pigmentado e os cartões
   sobem para branco quente, repondo o degrau de ~1,17 (a seção de FAQ já
   usa exatamente essa régua, ver §8 do CLAUDE.md).

   Nível 1 `--sm-surface`  fundo do painel (marfim quente)
   Nível 2 `--sm-card`     cartões informativos (branco quente)
           `--sm-card-hi`  cartões clicáveis (branco puro, um passo acima)
   Nível 3 `--sm-tint`     cartão de compra e estado selecionado (verde pálido)

   As bordas ficam em 0,18 de alfa: 1,38 contra o cartão e 1,18 contra o
   fundo, portanto visíveis dos dois lados sem virar traço escuro. */
.sm{
  --sm-surface:#EFEADB;
  --sm-card:#FDFCF7;
  --sm-card-hi:var(--white);
  --sm-tint:#F3F7E9;
  --sm-border:rgba(10,67,82,0.18);
  --sm-border-hover:rgba(10,67,82,0.30);
  --sm-border-green:rgba(110,143,46,0.45);
  --sm-border-green-strong:rgba(110,143,46,0.58);
  --sm-card-shadow:0 2px 6px -2px rgba(20,40,46,0.10),0 1px 2px rgba(20,40,46,0.05);
  --sm-max:880px;width:min(var(--sm-max),calc(100vw - 48px));max-height:min(90vh,900px);padding:0;border:0;border-radius:var(--radius-xl);background:var(--sm-surface);color:var(--text-primary);font-family:var(--font-sans);box-shadow:0 44px 84px -32px rgba(4,20,26,0.72),0 6px 20px -8px rgba(4,20,26,0.4);overflow:hidden}
.sm.is-wide{--sm-max:1080px}
/* A landing precisa virar textura atrás do painel — mas isso era feito com
   `backdrop-filter:blur(3px)` sobre o ::backdrop, ou seja, sobre a viewport
   inteira. Custo: o Chromium tinha de rasterizar a página toda numa render
   surface e desfocá-la, e a página que ficava atrás é a mais cara do site
   (duas camadas `filter:blur()` do jade-sky, as ondas borradas, o retrato
   full-bleed e mais três elementos com backdrop-filter no hero). Some a isso
   o bug de Windows já documentado no §9 do CLAUDE.md — qualquer repintura na
   janela reavalia o backdrop-filter — e a abertura do modal (260ms animando
   opacity no ::backdrop e transform no painel) refazia esse desfoque a cada
   frame. É daí que vinha o "abre picotado e pixelado": durante a animação o
   Chromium ainda rebaixa a resolução do backdrop-filter.

   O mesmo recuo é obtido só com o scrim, que é uma cor chapada e não custa
   nada: 0,62 -> 0,74 devolve ao fundo o mesmo peso que ele tinha desfocado
   (comparado lado a lado contra a versão anterior). Não reintroduzir o blur
   aqui sem medir de novo. */
.sm::backdrop{background:rgba(6,26,34,0.74)}
/* `overscroll-behavior:contain` fecha a rolagem no painel: chegando ao fim
   da folha, a roda/o gesto não passam para a landing atrás. A trava
   `.has-modal` continua sendo a principal, mas ela é `overflow:hidden` no
   <html> — que o iOS ignora em parte. As duas juntas é que dão o
   comportamento correto sem inventar um segundo scroller. */
.sm-panel{position:relative;display:flex;flex-direction:column;max-height:inherit;overflow-y:auto;overscroll-behavior:contain;padding:clamp(24px,3vw,38px);-webkit-overflow-scrolling:touch}

/* trava de rolagem do fundo enquanto o modal está aberto (a compensação de
   largura da barra é feita no script, para não haver pulo horizontal). */
.has-modal{overflow:hidden}

.sm-grip{display:none;width:40px;height:4px;border-radius:999px;background:rgba(10,46,59,0.18);margin:0 auto 16px}
.sm-close{position:absolute;top:clamp(14px,1.6vw,18px);right:clamp(14px,1.6vw,18px);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(9,75,95,0.14);border-radius:var(--radius-pill);background:rgba(247,245,239,0.9);color:var(--teal-700);cursor:pointer;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.sm-close svg{width:18px;height:18px}
.sm-close:hover{background:rgba(9,75,95,0.1);border-color:rgba(9,75,95,0.28)}
.sm-close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- cabeçalho compartilhado pelas duas etapas ---- */
.sm-head{margin-bottom:clamp(18px,2vw,24px)}
/* a volta é um link de texto com seta, não um segundo botão: ela compete
   com o CTA de compra se ganhar peso de botão. */
.sm-back{display:inline-flex;align-items:center;gap:6px;height:32px;margin:0 0 12px -8px;padding:0 10px;border:0;border-radius:var(--radius-pill);background:none;font-family:inherit;font-weight:700;font-size:12.5px;letter-spacing:-0.005em;color:var(--teal-500);cursor:pointer;transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.sm-back svg{width:15px;height:15px}
.sm-back:hover{background:rgba(9,75,95,0.06);color:var(--teal-700)}
.sm-back:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sm-back[hidden]{display:none}
.sm-title{font-weight:800;font-size:clamp(1.3rem,1.1rem + 0.6vw,1.55rem);line-height:1.2;letter-spacing:-0.022em;color:var(--teal-900);margin:0 46px 8px 0}
.sm-sub{font-weight:400;font-size:var(--body-sm);line-height:1.55;color:var(--ink-600);margin:0;max-width:46ch;text-wrap:pretty}

/* ---- etapa 1: lista de temas ----
   Cartão com foto, nome, descrição e preço. O indicador continua sendo uma
   seta, não um rádio: escolher aqui navega para o detalhe — prometer
   "selecionado" seria mentir sobre o que o clique faz.

   A foto entrou porque esta era a única etapa do modal sem nenhum elemento
   visual — dois blocos de texto sobre marfim, enquanto a foto do tema só
   aparecia na etapa seguinte. O preço entrou pelo motivo oposto: ele só
   existia no fim da folha de detalhe, e quem escolhia o tema aqui não sabia
   quanto custava. Os dois saem de SOLUTIONS, sem campo novo. */
/* dois cartões lado a lado no desktop; abaixo de 760px a grade vira uma
   coluna (regra no bloco responsivo). Grade e não flex: as duas colunas
   ficam com a mesma altura sem nenhum cálculo. */
.sm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sm-list[hidden]{display:none}
/* o recheio é padding dos filhos, não do botão: é isso que deixa a foto
   sangrar até a borda do cartão. O `overflow:hidden` fica na mídia e NÃO
   aqui — no cartão ele recortaria a sombra de hover, que é pintada por um
   ::after filho. */
.sm-opt{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%;padding:0;text-align:left;font-family:inherit;border:1px solid var(--sm-border);border-radius:var(--radius-lg);background:var(--sm-card-hi);box-shadow:var(--sm-card-shadow);cursor:pointer;transition:border-color var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard),transform 200ms var(--ease-out)}
/* ---- sombra de hover em camada própria ----
   `box-shadow` estava na lista de transições: como não é propriedade
   composta, cada frame do hover repintava o cartão E a mancha de 28px de
   desfoque em volta dele — dentro de um <dialog> que ainda por cima tinha
   backdrop-filter atrás. Era esse o travamento ao passar o mouse.

   A sombra de hover agora mora num ::after que só varia `opacity`, que o
   compositor resolve sozinho. O desenho final é idêntico: mesma sombra,
   mesma duração, mesmo translateY. A sombra de repouso continua no próprio
   elemento porque nunca anima. */
.sm-opt::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 12px 28px -18px rgba(4,20,26,0.55);opacity:0;transition:opacity var(--duration-base) var(--ease-standard)}
.sm-opt:hover{border-color:var(--sm-border-green);transform:translateY(-2px)}
.sm-opt:hover::after{opacity:1}
.sm-opt:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* estado selecionado: precisa ser óbvio de relance, não um fio verde de
   1px. São três sinais somados — lavagem verde (nível 3), borda verde forte
   e um anel interno — mantendo a mesma família sage dos estados ativos do
   site, sem virar um segundo botão. */
.sm-opt.is-selected{border-color:var(--sm-border-green-strong);background:var(--sm-tint);box-shadow:inset 0 0 0 1px rgba(139,179,60,0.28),0 6px 16px -10px rgba(110,143,46,0.5)}
/* o cartão selecionado já tinha sombra própria e vencia a de hover (mesma
   especificidade, regra posterior). A camada fica desligada nele para o
   estado continuar sendo exatamente o mesmo. */
.sm-opt.is-selected::after{opacity:0}
/* a foto ocupa o topo do cartão. `aspect-ratio` e o mesmo placeholder do
   mini-hero para o cartão não colapsar enquanto ela carrega; o raio desconta
   1px da borda do botão, senão sobra um fio de fundo nos cantos de cima. */
.sm-opt-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:15px 15px 0 0;background:rgba(9,75,95,0.06)}
.sm-opt-media picture{display:block;height:100%}
.sm-opt-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* o número virou selo sobre a foto: continua identificando o tema sem
   gastar uma linha inteira acima do nome. Fundo escuro transluído porque o
   que está atrás é uma foto, e ela muda a cada tema. */
.sm-opt-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 8px;border-radius:var(--radius-pill);background:rgba(6,40,50,0.62);font-weight:800;font-size:11px;letter-spacing:0.06em;color:var(--white);transition:background var(--duration-base) var(--ease-standard)}
.sm-opt:hover .sm-opt-badge,.sm-opt.is-selected .sm-opt-badge{background:var(--green-700)}
.sm-opt-body{display:flex;flex-direction:column;gap:5px;min-width:0;width:100%;padding:16px 18px 0}
.sm-opt-name{font-weight:700;font-size:17px;line-height:1.25;letter-spacing:-0.012em;color:var(--teal-900)}
.sm-opt-desc{font-weight:400;font-size:13.5px;line-height:1.55;color:var(--ink-600);text-wrap:pretty}
/* rodapé: preço à esquerda, seta à direita. O `margin-top:auto` mora aqui
   (antes estava na seta) — com descrições de alturas diferentes, é ele que
   mantém os dois cartões parecendo um par. */
.sm-opt-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding:14px 18px 16px}
.sm-opt-price{display:flex;flex-direction:column;gap:1px;font-weight:800;font-size:1.12rem;line-height:1.1;letter-spacing:-0.02em;color:var(--teal-900);font-variant-numeric:tabular-nums}
.sm-opt-price-note{font-weight:500;font-size:11.5px;line-height:1.3;letter-spacing:0;color:var(--ink-400)}
.sm-opt-arrow{position:relative;flex:none;width:18px;height:18px;margin-bottom:2px;transition:transform var(--duration-base) var(--ease-out)}
.sm-opt-arrow::after{content:'';position:absolute;left:2px;top:2px;width:8px;height:8px;border-top:2px solid var(--teal-500);border-right:2px solid var(--teal-500);border-radius:1px;transform:rotate(45deg)}
.sm-opt:hover .sm-opt-arrow{transform:translateX(4px)}
.sm-opt:hover .sm-opt-arrow::after,.sm-opt.is-selected .sm-opt-arrow::after{border-color:var(--green-700)}

/* ================================================================
   Etapa 2: detalhe do tema

   Não é um documento dentro do modal: é uma composição de blocos com
   pesos diferentes — mini-hero com foto, identificação em três itens,
   o que se aprende em quatro cartões, materiais como recursos e o
   cartão de compra. A hierarquia é o que faz a leitura acontecer em
   segundos; nada aqui é decoração.

   A ordem do DOM é a do mobile (foto primeiro). O desktop só
   reposiciona pela grade.
   ================================================================ */
.sm-detail[hidden]{display:none}
/* o respiro entre seções é o primeiro nível de hierarquia: antes de
   qualquer borda, é o espaço que diz "acabou um assunto, começou outro". */
.sm-detail{display:flex;flex-direction:column;gap:clamp(30px,3.4vw,42px)}

/* ---- mini-hero ---- */
/* um fio só embaixo do hero separa a apresentação do resto sem precisar de
   mais uma caixa em volta dele. */
.sm-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:clamp(20px,2.4vw,30px);align-items:center;padding-bottom:clamp(24px,2.8vw,32px);border-bottom:1px solid rgba(10,67,82,0.12)}
.sm-hero-copy{min-width:0;order:-1}
.sm-hero-media{min-width:0;border-radius:var(--radius-lg);overflow:hidden;background:rgba(9,75,95,0.06);box-shadow:0 18px 40px -26px rgba(4,20,26,0.7)}
.sm-hero-media picture{display:block;height:100%}
/* a foto preenche a coluna e é recortada pelo object-position que vem da
   configuração da solução — foto nova entra sem CSS novo. */
.sm-hero-media img{display:block;width:100%;height:100%;min-height:210px;max-height:290px;object-fit:cover;object-position:50% 50%}
.sm-hero-eyebrow{margin:0 0 8px;font-weight:700;font-size:10.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--green-700)}
.sm-hero-title{margin:0 0 10px;font-weight:800;font-size:clamp(1.45rem,1.2rem + 0.8vw,1.9rem);line-height:1.12;letter-spacing:-0.025em;color:var(--teal-900)}
/* a chamada é a frase que vende a clareza: peso acima do corpo, abaixo do
   título. */
.sm-hero-headline{margin:0 0 14px;font-weight:600;font-size:clamp(1rem,0.95rem + 0.2vw,1.1rem);line-height:1.4;letter-spacing:-0.012em;color:var(--teal-700);text-wrap:pretty}
.sm-hero-desc{margin:14px 0 0;font-weight:400;font-size:var(--body-sm);line-height:1.6;color:var(--ink-600);text-wrap:pretty}

.sm-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.sm-chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--sm-border);background:var(--sm-card-hi);font-weight:600;font-size:12.5px;letter-spacing:-0.005em;color:var(--teal-700)}
.sm-chip::before{content:'';width:5px;height:5px;margin-right:8px;border-radius:50%;background:var(--green-500);flex:none}

/* ---- faixa de oferta: existe só no telefone ----
   Quem mostra preço e compra no desktop é o cartão sticky da coluna da
   direita, que já nasce visível logo abaixo do hero — uma segunda oferta na
   mesma tela seria repetição. Quem liga esta faixa é o bloco de 640px, onde
   o cartão desceu para o fim da folha. */
.sm-offer{display:none}

/* ---- seções internas ----
   Título um passo mais forte e mais afastado do conteúdo: é ele que marca
   o começo de cada bloco agora que os cartões têm peso próprio. */
.sm-sec-title{margin:0 0 16px;font-weight:800;font-size:clamp(1.08rem,1rem + 0.28vw,1.25rem);line-height:1.25;letter-spacing:-0.02em;color:var(--teal-900)}

/* ---- identificação: isso faz sentido para sua família? ----
   Três itens curtos, com ícone de linha. É o bloco que responde "isto é
   sobre mim?" antes de qualquer lista de conteúdo. */
.sm-fit-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
.sm-fit-item{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--radius-lg);border:1px solid var(--sm-border);background:var(--sm-card);box-shadow:var(--sm-card-shadow);transition:border-color var(--duration-base) var(--ease-standard),transform 200ms var(--ease-out)}
/* mesma camada de sombra do .sm-opt, pelo mesmo motivo */
.sm-fit-item::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 10px 22px -14px rgba(20,40,46,0.3);opacity:0;transition:opacity var(--duration-base) var(--ease-standard)}
/* flex:none é obrigatório: no layout em linha do mobile o ícone encolhia
   quando o texto era mais longo, e os três cartões apareciam com círculos
   de tamanhos diferentes. */
.sm-fit-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:rgba(139,179,60,0.18);color:var(--green-700)}
.sm-fit-icon svg{width:19px;height:19px}
.sm-fit-num{position:absolute;top:14px;right:16px;font-weight:800;font-size:11px;letter-spacing:0.06em;color:var(--teal-500)}
.sm-fit-text{font-weight:600;font-size:14px;line-height:1.4;letter-spacing:-0.008em;color:var(--teal-900);text-wrap:pretty}

/* ---- parte de baixo: aprendizado + materiais | compra ---- */
.sm-lower{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:clamp(20px,2.4vw,30px);align-items:start}
.sm-lower-main{min-width:0;display:flex;flex-direction:column;gap:clamp(22px,2.6vw,30px)}
/* gruda enquanto a coluna da esquerda rola: em temas com mais conteúdo o
   CTA sairia da tela justamente na hora de decidir. */
.sm-detail-aside{position:sticky;top:0;min-width:0}

/* ---- o que você vai aprender: 2x2 ---- */
.sm-learn-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0}
.sm-learn-item{padding:16px;border-radius:var(--radius-lg);border:1px solid var(--sm-border);background:var(--sm-card);box-shadow:var(--sm-card-shadow)}
/* o número ganha uma pastilha e o verbo fica sozinho em verde: antes os
   dois eram texto pequeno do mesmo peso e a linha lia como uma coisa só. */
.sm-learn-head{display:flex;align-items:center;gap:9px;margin:0 0 8px}
.sm-learn-num{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:rgba(9,75,95,0.09);font-weight:800;font-size:10.5px;letter-spacing:0.05em;color:var(--teal-700)}
.sm-learn-verb{font-weight:800;font-size:11px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--green-700)}
.sm-learn-text{margin:0;font-weight:500;font-size:13.5px;line-height:1.5;color:var(--ink-800);text-wrap:pretty}

/* ---- materiais: recursos que a pessoa recebe ---- */
.sm-res-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0}
.sm-res-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-lg);border:1px solid var(--sm-border);background:var(--sm-card);box-shadow:var(--sm-card-shadow)}
/* o ícone ganha superfície e contorno próprios: é o que faz o item parecer
   um material que se recebe, e não duas linhas de texto soltas. */
.sm-res-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-md);border:1px solid rgba(10,67,82,0.12);background:var(--blue-100);color:var(--teal-700)}
.sm-res-icon svg{width:18px;height:18px}
.sm-res-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.sm-res-title{font-weight:700;font-size:14.5px;line-height:1.3;letter-spacing:-0.01em;color:var(--teal-900)}
.sm-res-note{font-weight:400;font-size:12.5px;line-height:1.4;color:var(--ink-400);text-wrap:pretty}

/* bloco de compra: o único lugar do modal com superfície própria — é onde
   a decisão acontece e precisa se destacar da leitura ao lado. Mesma receita
   do cartão do Completo (lavagem mist + hairline leaf green), para as duas
   superfícies de decisão da página pertencerem ao mesmo sistema. */
/* nível 3: a superfície mais distinta do painel depois do hero. Verde
   pálido + borda verde forte + sombra — nunca verde saturado, que roubaria
   o CTA. É o que separa "onde se decide" de "onde se lê". */
.sm-buy{padding:24px;border-radius:var(--radius-lg);border:1px solid var(--sm-border-green);background:var(--sm-tint);box-shadow:0 10px 26px -16px rgba(20,40,46,0.34),inset 0 1px 0 rgba(255,255,255,0.6)}
.sm-perks{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid rgba(110,143,46,0.3)}
/* mesmo check desenhado em CSS das listas da seção de planos. */
.sm-perks li{position:relative;padding-left:24px;font-weight:500;font-size:13px;line-height:1.4;color:var(--ink-800)}
.sm-perks li::before{content:'';position:absolute;left:2px;top:0.3em;width:9px;height:5px;border-left:2.2px solid var(--green-700);border-bottom:2.2px solid var(--green-700);border-radius:1px;transform:rotate(-45deg)}
.sm-price{display:flex;flex-direction:column;gap:3px;margin:0 0 16px}
.sm-price-row{display:flex;align-items:flex-end;gap:5px}
.sm-price-currency{font-weight:700;font-size:0.95rem;line-height:1;color:var(--teal-700);padding-bottom:0.35em}
.sm-price-amount{font-weight:800;font-size:2.1rem;line-height:1;letter-spacing:-0.03em;color:var(--teal-900);font-variant-numeric:tabular-nums}
.sm-price-note{font-weight:500;font-size:var(--caption);line-height:1.3;color:var(--ink-400)}
.sm-cta{width:100%;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:8px 18px;border:1px solid var(--green-700);border-radius:var(--radius-lg);background:var(--green-500);color:var(--teal-900);font-family:inherit;font-weight:700;font-size:15px;line-height:1.25;letter-spacing:-0.005em;text-align:center;cursor:pointer;box-shadow:0 10px 22px -12px rgba(110,143,46,0.72);transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),transform 220ms var(--ease-out)}
.sm-cta:hover{background:var(--green-700);color:var(--white);transform:translateY(-2px)}
.sm-cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* a ponte para o Completo: informa que o tema já está incluído lá dentro.
   Tem superfície e seta próprias (é uma saída de verdade, não uma nota de
   rodapé), mas continua sendo contorno sobre fundo claro — nunca um segundo
   botão verde competindo com a compra logo acima. */
.sm-included{margin:16px 0 0;padding-top:16px;border-top:1px solid rgba(110,143,46,0.3)}
.sm-included-text{margin:0 0 10px;font-weight:400;font-size:12.5px;line-height:1.45;color:var(--ink-600);text-wrap:pretty}
.sm-included-link{display:inline-flex;align-items:center;gap:7px;width:100%;justify-content:center;min-height:40px;padding:6px 14px;border:1px solid rgba(9,75,95,0.26);border-radius:var(--radius-md);background:var(--sm-card-hi);font-family:inherit;font-weight:700;font-size:13px;line-height:1.3;letter-spacing:-0.005em;color:var(--teal-700);cursor:pointer;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.sm-included-link:hover{background:var(--teal-700);border-color:var(--teal-700);color:var(--ivory-50)}
.sm-included-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sm-included-arrow{transition:transform var(--duration-base) var(--ease-out)}
.sm-included-link:hover .sm-included-arrow{transform:translateX(3px)}

/* no detalhe o cabeçalho vira só a barra de navegação: nome e chamada do
   tema passam para o mini-hero. O #smTitle continua no DOM porque é o nome
   acessível do diálogo — fica escondido visualmente, não removido. */
.sm-head.is-detail{margin-bottom:clamp(16px,1.8vw,20px)}
.sm-head.is-detail .sm-title,
.sm-head.is-detail .sm-sub{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sm-head.is-detail .sm-back{margin-bottom:0}

/* barra de compra do mobile: sticky dentro do painel (não fixed na
   viewport), então rola junto com o conteúdo e nunca cobre o X nem briga
   com a barra do navegador. Escondida no desktop. */
.sm-buybar{display:none}

/* elevação no hover só onde há mouse: no toque ela nunca é vista e o
   sticky :hover do mobile deixaria o cartão preso levantado. */
@media (hover:hover){
  .sm-fit-item:hover{border-color:var(--sm-border-hover);transform:translateY(-2px)}
  .sm-fit-item:hover::after{opacity:1}
}

.sm[open]{animation:sm-in 260ms var(--ease-out)}
.sm[open]::backdrop{animation:sm-backdrop 260ms var(--ease-out)}
@keyframes sm-in{from{opacity:0;transform:translateY(14px) scale(0.985)}to{opacity:1;transform:none}}
@keyframes sm-backdrop{from{opacity:0}to{opacity:1}}

/* ---- tablet (≤980px): o cartão de compra desce para baixo da leitura.
   Espremido ao lado, ele ficaria com ~240px e o CTA quebraria em três
   linhas — abaixo, ganha a largura toda e o texto respira. O mini-hero
   continua dividido: a foto ainda cabe. ---- */
@media (max-width:980px){
  /* o .is-wide do detalhe também é neutralizado aqui: abaixo deste ponto
     não há espaço para as duas colunas que justificavam a largura extra. */
  .sm,.sm.is-wide{--sm-max:760px;width:min(var(--sm-max),calc(100vw - 40px))}
  .sm-lower{grid-template-columns:1fr}
  .sm-detail-aside{position:static}
  .sm-buy{max-width:none}
}

/* ---- ≤760px: tudo em uma coluna. A aside já desceu; aqui caem o hero
   dividido e as grades de dois. ---- */
@media (max-width:760px){
  .sm,.sm.is-wide{--sm-max:560px;width:min(var(--sm-max),calc(100vw - 32px))}
  .sm-list{grid-template-columns:1fr}
  /* a foto passa a vir primeiro (o order:-1 da copy sai de cena) */
  .sm-hero{grid-template-columns:1fr;gap:18px}
  .sm-hero-copy{order:0}
  .sm-hero-media img{min-height:0;max-height:none;aspect-ratio:16/9}
  .sm-fit-grid{grid-template-columns:1fr}
  .sm-fit-item{flex-direction:row;align-items:center;gap:12px;padding:14px}
  .sm-fit-icon{width:34px;height:34px}
  /* sem margin-left:auto: com ela o número era empurrado para a direita
     quando o texto cabia numa linha e ficava colado nele quando o texto
     quebrava — a mesma lista aparecia com dois alinhamentos diferentes.
     Aqui ele é sempre o rótulo que abre a frase, centrado com o bloco de
     texto inteiro — preso ao topo ele descolava do texto de duas linhas. */
  .sm-fit-num{position:static;align-self:center;margin-top:0}
  .sm-res-grid{grid-template-columns:1fr}
}

/* ---- tablet: empilha em 1024px e não em 900. Entre 900 e 1024 as duas
   colunas espremem "Pais com Clareza Completo" contra a borda do cartão —
   o nome do plano cabe na linha por 1 ou 2 pixels, o que qualquer fallback
   de fonte quebra. ---- */
@media (max-width:1024px){
  /* empilhado, a largura deixa de diferenciar os cartões — e como
     `hover:hover` não vale no telefone, aqui NUNCA houve destaque nenhum: os
     dois liam como a mesma caixa ivory, só que uma com um fio verde no topo.
     Todo o peso do principal passa a vir do repouso.

     O respiro sobe de 16 para 22px porque o halo sage precisa de espaço: com
     16px ele encostava no cartão de cima e lia como mancha, não como luz. */
  .pricing-grid{max-width:640px;grid-template-columns:1fr;gap:22px}
  .plan-desc{max-width:none}

  /* as três entregas acompanham a grade: numa coluna, três colunas de texto
     ficariam com 2–3 palavras por linha. Vira lista, alinhada com os
     cartões abaixo. */
  .pricing-includes{max-width:640px;margin-top:clamp(30px,4vw,40px)}
  .pricing-includes-list{grid-template-columns:1fr;gap:14px}

  /* o secundário assenta mais ainda: empilhados, um atrás do outro, a
     diferença de profundidade é lida na sequência e não na comparação. */
  .plan-card--solucao{box-shadow:0 8px 20px -18px rgba(4,20,26,0.55),0 1px 4px -2px rgba(4,20,26,0.22)}

  /* halo mais curto que no desktop (64 e não 96): numa coluna estreita um
     halo muito aberto vira névoa em volta do cartão em vez de contorno de
     luz. O anel e a borda compensam o que o halo perde. */
  .plan-card--completo{box-shadow:0 0 0 2px rgba(139,179,60,0.34),0 0 64px -14px rgba(139,179,60,0.4),0 26px 52px -24px rgba(4,20,26,0.82),0 4px 12px -4px rgba(4,20,26,0.4)}
  .plan-card--completo::before{height:5px}
}

/* ---- mobile: cartões empilhados em largura útil cheia, preço legível
   sem tipografia gigante, lista compacta. A solução vem primeiro (é a
   entrada mais leve) e o Completo depois — a ordem do HTML já é essa. O
   modal encosta embaixo e vira bottom sheet. ---- */
@media (max-width:640px){
  .section-pricing{padding:clamp(64px,14vw,84px) var(--gutter) clamp(72px,15vw,92px)}
  .pricing-intro{margin-bottom:26px}
  .pricing-title{font-size:1.72rem;line-height:1.14}
  .pricing-support{font-size:var(--body-sm);line-height:1.6}

  /* o seletor ocupa a largura do cartão: as duas opções ficam com o mesmo
     alvo de toque e o polegar não precisa de precisão de dedo. */
  .billing-switch{width:100%}
  .billing-opt{flex:1;justify-content:center;padding:0 12px;gap:7px;font-size:14px}
  .billing-switch--compact .billing-opt{padding:0 10px;font-size:13.5px}
  .billing-save{font-size:9.5px;padding:5px 8px}

  /* mobile: a solução encolhe (é a porta de entrada, precisa ser rápida de
     ler) e o Completo mantém o peso — a diferença entre os dois é o que
     torna a comparação possível numa tela de 375px, onde eles nunca
     aparecem lado a lado. */
  /* 20 e não 16: o halo sage do Completo precisa de folga para ler como luz
     em vez de mancha encostada no cartão de cima (mesma razão do bloco de
     1024px, só um pouco mais apertado porque a tela é menor). */
  .pricing-grid{gap:20px}
  .plan-card{padding:20px 18px;border-radius:var(--radius-lg)}
  .plan-eyebrow{height:24px;font-size:10px}
  .plan-eyebrow--badge{min-height:24px;padding:5px 11px}
  .plan-name{font-size:1.28rem;margin:12px 0 6px}
  .plan-desc{font-size:14px;line-height:1.5}
  .plan-topics{margin-top:16px}
  .plan-topic{height:34px;padding:0 14px;font-size:13.5px}
  .plan-billing{margin-top:16px}
  .plan-price{margin-top:15px}
  .plan-billing + .plan-price{margin-top:14px}
  .plan-amount{font-size:2.3rem}
  .plan-features{margin-top:15px;gap:10px}
  .plan-features li{font-size:14.5px;padding-left:26px}

  .plan-card--completo{padding-top:24px}
  .plan-features--exclusive{margin-top:16px;padding-top:16px;gap:12px}
  .plan-features--exclusive li{font-size:15.5px;line-height:1.35}
  /* o selo "ao vivo" desce para a linha de baixo em vez de espremer o
     texto: numa coluna de ~287px eles não cabem lado a lado. */
  .plan-features--exclusive li.plan-feature-live{flex-wrap:wrap;gap:8px;margin:2px -10px -2px;padding:10px 10px 10px 36px}
  .plan-features--exclusive li.plan-feature-live::before{left:13px;top:calc(10px + 0.36em)}
  .plan-live-badge{margin-left:0}
  .plan-bridge{margin-top:16px;font-size:12.5px}

  .plan-actions{padding-top:20px;gap:12px}
  .plan-cta{height:50px}
  .plan-cta--solid{height:54px}

  .pricing-strip{padding:13px 18px;border-radius:var(--radius-lg)}

  /* sem os separadores: a faixa quebra em duas linhas nesta largura e um
     ponto sobrando no fim da primeira linha lê como erro. */
  .pricing-strip{gap:8px 18px;margin-top:26px}
  .pricing-strip-dot{display:none}

  /* bottom sheet: encosta embaixo, ganha alça e respeita a área segura.
     A altura máxima deixa uma faixa do fundo visível de propósito — é o
     que diz "a landing continua aí atrás" para quem chegou por campanha. */
  /* `.sm.is-wide` também aqui: sem ele a classe do detalhe (0,2,0) venceria
     esta regra (0,1,0) e a folha do detalhe nasceria estreita, com sobra dos
     dois lados, enquanto a da escolha continuaria de borda a borda. */
  .sm,.sm.is-wide{width:100%;max-width:none;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:90vh}
  .sm-panel{padding:16px 20px calc(22px + env(safe-area-inset-bottom,0px))}
  .sm-grip{display:block}
  .sm-close{top:10px;right:12px;width:34px;height:34px}
  .sm-head{margin-bottom:18px}
  .sm-title{margin-right:40px;font-size:1.32rem}
  .sm-list{gap:12px}
  /* a foto fica mais baixa que no desktop: empilhados, os dois cartões
     precisam caber na mesma tela do bottom sheet, e 16:9 numa largura de
     ~335px sozinha já comeria 188px de cada um. */
  .sm-opt-media{aspect-ratio:2/1;border-radius:15px 15px 0 0}
  .sm-opt-body{padding:14px 16px 0}
  .sm-opt-name{font-size:16px}
  .sm-opt-desc{font-size:13px}
  .sm-opt-foot{padding:12px 16px 14px}

  /* ---- detalhe no telefone ----
     A foto abre a tela, o texto vem curto e os blocos viram cartões: a
     tipografia NÃO encolhe (o problema da versão anterior era parágrafo
     longo, não fonte grande). */
  /* no telefone a hierarquia é a mesma, mas o respiro encolhe: cartão com
     peso próprio já separa, e espaçamento grande aqui só faria a folha
     ficar mais longa do que a versão anterior. */
  .sm-detail{gap:26px}
  .sm-hero{gap:16px;padding-bottom:20px}
  /* a foto sangra de borda a borda, cancelando os 20px de padding do painel
     (mesma técnica da .sm-buybar mais abaixo). É o elemento que faz a folha
     ler como página de produto em vez de cartão de texto, e o único bloco
     daqui que ganha altura em vez de perder. */
  .sm-hero-media{margin-inline:-20px;border-radius:0;box-shadow:none}
  .sm-hero-title{font-size:1.5rem}
  .sm-hero-headline{font-size:1rem}
  /* a descrição sai no telefone: ela parafraseia a chamada logo acima em
     ~6 linhas, e essas linhas eram 153px empurrando o preço tela abaixo.
     Nada se perde — `headline` diz a mesma coisa numa frase só. No desktop
     ela continua inteira. */
  .sm-hero-desc{display:none}
  .sm-chip{height:29px;font-size:12px;padding:0 11px}

  /* ---- faixa de oferta ----
     Preço e compra logo depois da apresentação. O cartão de compra continua
     fechando a folha, mas aqui ele estava a ~1770px do topo do painel — duas
     telas cheias de rolagem — e quem não chegava até lá nunca via o preço.
     Mesma receita de superfície do .sm-buy (lavagem verde + hairline leaf
     green), mais baixa: ela anuncia, o cartão conclui. */
  .sm-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:14px 16px;border-radius:var(--radius-lg);border:1px solid var(--sm-border-green);background:var(--sm-tint);box-shadow:0 8px 20px -14px rgba(20,40,46,0.34),inset 0 1px 0 rgba(255,255,255,0.6)}
  .sm-offer-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;margin:0}
  .sm-offer-currency{font-weight:700;font-size:0.9rem;line-height:1;color:var(--teal-700)}
  .sm-offer-amount{font-weight:800;font-size:1.95rem;line-height:1;letter-spacing:-0.03em;color:var(--teal-900);font-variant-numeric:tabular-nums}
  /* a legenda é quem dita a largura da coluna do preço (é o texto mais
     longo dos dois): a 13px ela empurrava o CTA para duas linhas numa tela
     de 375px. */
  .sm-offer-note{flex-basis:100%;margin-top:3px;font-weight:500;font-size:11.5px;line-height:1.3;color:var(--ink-400)}
  /* o CTA da faixa é o mesmo componente do cartão (precisa da classe .sm-cta
     para o estado "Abrindo checkout…" e para a medição), só que ao lado do
     preço em vez de ocupar a linha inteira. */
  .sm-cta--inline{width:auto;min-height:46px;padding:8px 16px;border-radius:var(--radius-md);font-size:14.5px;white-space:nowrap}
  .sm-offer-perks{grid-column:1/-1;margin:0;padding-top:10px;border-top:1px solid rgba(110,143,46,0.3);font-weight:500;font-size:12.5px;line-height:1.4;color:var(--ink-600)}
  .sm-sec-title{font-size:1.05rem;margin-bottom:12px}
  /* "o que você vai aprender" deixa de ser quatro cartões e vira quatro
     linhas: borda, fundo e sombra por item somavam ~455px para quatro frases
     curtas, e o bloco nem é o que decide a compra. O hairline separa igual,
     por menos da metade da altura. */
  .sm-learn-grid{grid-template-columns:1fr;gap:0}
  .sm-learn-item{padding:12px 0 0;border:0;border-top:1px solid rgba(10,67,82,0.12);border-radius:0;background:none;box-shadow:none}
  .sm-learn-item:first-child{padding-top:0;border-top:0}
  .sm-learn-head{margin-bottom:5px}
  .sm-learn-text{font-size:14px}
  .sm-fit-text{font-size:14.5px}
  .sm-res-title{font-size:14.5px}
  .sm-buy{padding:18px}
  /* os três reforços já foram entregues pela faixa de oferta lá em cima:
     repeti-los no cartão do fim custava ~100px sem dizer nada novo. */
  .sm-buy .sm-perks{display:none}

  /* atalho de compra: sticky no fim do painel, com folga para a área
     segura do aparelho. Mostrado/escondido pelo script. */
  /* margens negativas cancelam exatamente o padding do painel (20px nos
     lados, 22px + área segura embaixo) para a barra sangrar de borda a
     borda e encostar no fim da folha. */
  /* `bottom` negativo (e não 0) porque o sticky ancora na caixa de conteúdo
     do painel, ou seja, ACIMA do padding inferior — com bottom:0 a barra
     flutuaria 22px do fim da folha, deixando uma faixa de fundo embaixo. O
     deslocamento cancela esse padding e ela encosta na borda. As margens
     negativas fazem o mesmo no eixo horizontal (sangria de borda a borda). */
  /* fundo opaco, não translúcido com blur. A barra é `sticky`, então um
     `backdrop-filter` nela reavalia o desfoque a CADA frame de rolagem — era
     a causa principal da rolagem picotada no telefone. E o que ela desfocava
     era o próprio `--sm-surface` do painel passando por baixo: a 0,95 de
     alfa o ganho visual era um fantasma de 5% do texto que passa atrás.
     Opaco na mesma cor: mesma barra, sem custo por frame. */
  .sm-buybar{position:sticky;bottom:calc(-22px - env(safe-area-inset-bottom,0px));z-index:2;display:flex;align-items:center;gap:12px;margin:0 -20px calc(-22px - env(safe-area-inset-bottom,0px));padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(10,67,82,0.16);background:var(--sm-surface);box-shadow:0 -10px 24px -20px rgba(4,20,26,0.7)}
  .sm-buybar[hidden]{display:none}
  .sm-buybar-price{font-weight:800;font-size:1.15rem;line-height:1;letter-spacing:-0.02em;color:var(--teal-900);font-variant-numeric:tabular-nums}
  .sm-buybar-cta{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:6px 16px;border:1px solid var(--green-700);border-radius:var(--radius-md);background:var(--green-500);color:var(--teal-900);font-family:inherit;font-weight:700;font-size:14.5px;letter-spacing:-0.005em;cursor:pointer}
  .sm-buybar-cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

  .sm[open]{animation:sm-sheet-in 300ms var(--ease-out)}
}
/* telefone baixo (SE, Androids antigos): a folha inteira tem ~600px de
   altura útil, então cada bloco do topo custa caro. Foto mais curta nas duas
   etapas — o recorte continua vindo do object-position da solução. */
@media (max-width:640px) and (max-height:700px){
  .sm-opt-media{aspect-ratio:2.4/1}
  .sm-hero-media img{aspect-ratio:2/1}
  .sm-offer-amount{font-size:1.8rem}
}

@keyframes sm-sheet-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

@media (max-width:420px){
  .plan-amount{font-size:2.1rem}
  .billing-opt{padding:0 8px}
  .billing-switch--compact .billing-opt{padding:0 6px;font-size:13px}
  .sm-price-amount{font-size:1.85rem}
  .sm-offer-amount{font-size:1.75rem}
  .sm-cta--inline{padding:8px 12px;font-size:14px}
}

/* ---- entrada por scroll: opacidade + deslocamento curto, escalonamento
   de ~110ms entre os blocos principais (eyebrow -> título -> apoio ->
   solução -> Completo). No mobile os cartões entram por conta própria,
   com o observer já espaçando-os: manter o atraso ali só somaria espera. */
.js-anim .section-pricing [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.js-anim .section-pricing [data-reveal].is-in{opacity:1;transform:none}
.js-anim .section-pricing .pricing-title[data-reveal]{transition-delay:90ms}
.js-anim .section-pricing .pricing-support[data-reveal]{transition-delay:180ms}
.js-anim .section-pricing .plan-card--solucao[data-reveal]{transition-delay:290ms}
.js-anim .section-pricing .plan-card--completo[data-reveal]{transition-delay:400ms}
.js-anim .section-pricing .pricing-strip[data-reveal]{transition-delay:490ms}

/* os dois cartões carregam data-reveal, então a regra de entrada acima
   também é quem define a transição deles — e ela só declara opacity e
   transform, em 560ms. Sem isto o hover herdaria essa duração (lento) e a
   sombra nem transicionaria. Depois de entrar (.is-in), a transição volta
   a ser a do hover; o atraso escalonado fica só na entrada. */
.js-anim .section-pricing .plan-card[data-reveal].is-in{transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),opacity 200ms var(--ease-out);transition-delay:0s}

@media (max-width:1024px){
  .js-anim .section-pricing .plan-card--solucao[data-reveal],
  .js-anim .section-pricing .plan-card--completo[data-reveal],
  .js-anim .section-pricing .pricing-strip[data-reveal]{transition-delay:0ms}
}

@media (prefers-reduced-motion:reduce){
  .js-anim .section-pricing [data-reveal]{opacity:1;transform:none;transition:none}
  .billing-thumb,.billing-save,.pr-val,.plan-amount.is-rolling,.plan-period,.plan-equiv,
  .plan-card,.plan-cta,.sm-opt,.sm-opt-arrow,.sm-opt-badge,.sm-cta,.sm-close,
  .sm-back,.sm-included-link,.sm-included-arrow,
  .sm-opt::after,.sm-fit-item::after{transition:none}
  .plan-cta:hover,.sm-cta:hover{transform:none}
  /* sem spinner: o rótulo "Abrindo checkout…" já é o sinal, e é o único
     que não depende de movimento. */
  .cta-spinner{display:none}
  .sm-opt:hover{transform:none}
  .sm-opt:hover .sm-opt-arrow{transform:none}
  .sm-included-link:hover .sm-included-arrow{transform:none}
  .section-pricing .pricing-grid .plan-card[data-reveal]:hover{transform:none}
  .sm[open],.sm[open]::backdrop{animation:none}
}

/* ================================================================
   Seção 11 — dúvidas frequentes (.section-faq)

   Depois da faixa Deep Teal dos planos, o marfim volta: é a seção de
   ler, não de decidir, e o alívio de contraste é o que faz o usuário
   desacelerar. Mesma receita de fundo dos depoimentos (marfim quente +
   lavagens sage/mist muito abertas + uma curva orgânica atravessando),
   para que as duas seções claras da página pertençam à mesma família.

   Um grupo só, cinco perguntas, nenhuma aba. Verde leaf só em detalhe:
   o ponto do eyebrow, o ícone quando aberto e o fio do item ativo.
   ================================================================ */

.section-faq{
  --faq-ivory:#EBE7D9;
  --faq-card:#FDFCF7;
  --faq-card-border:rgba(9,75,95,0.2);
  position:relative;overflow:hidden;font-family:var(--font-sans);
  background-color:var(--faq-ivory);
  background-image:
    radial-gradient(1080px 740px at -6% 6%,rgba(198,218,172,0.62) 0%,rgba(198,218,172,0) 62%),
    radial-gradient(1180px 800px at 104% 2%,rgba(180,212,222,0.56) 0%,rgba(180,212,222,0) 60%),
    radial-gradient(980px 680px at 50% 102%,rgba(252,250,242,0.5) 0%,rgba(252,250,242,0) 70%);
  background-repeat:no-repeat;
  padding:clamp(64px,6vw,98px) clamp(28px,5vw,72px) clamp(76px,6.6vw,110px);
}
/* a seção de planos termina em Deep Teal imediatamente acima: mesmo
   degradê de costura já usado depois do hero e da assinatura. */
.faq-transition{height:clamp(26px,2.8vw,40px);background:linear-gradient(to bottom,var(--teal-900) 0%,var(--faq-ivory) 100%)}
.faq-curve{position:absolute;z-index:0;left:0;top:0;width:100%;height:clamp(420px,52vw,760px);pointer-events:none}
.section-faq .content-max{position:relative;z-index:1;max-width:1120px}

/* ---- cabeçalho centrado, largura de leitura curta ---- */
.faq-intro{max-width:660px;margin:0 auto clamp(30px,3.4vw,46px);text-align:center}
.faq-title{font-weight:800;font-size:clamp(1.85rem,1.4rem + 1.6vw,2.6rem);line-height:1.1;letter-spacing:-0.022em;color:var(--teal-900);margin:0 0 var(--space-4);text-wrap:balance}
.faq-support{font-weight:400;font-size:var(--body-md);line-height:1.62;color:#33484F;margin:0 auto;max-width:52ch;text-wrap:pretty}

/* ---- lista ---- */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:0 auto}

.faq-item{position:relative;overflow:hidden;background:var(--faq-card);border:1px solid var(--faq-card-border);border-radius:var(--radius-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 12px 26px -16px rgba(10,46,59,0.42),0 2px 6px -2px rgba(10,46,59,0.12);transition:border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard)}
.faq-item:hover{border-color:rgba(9,75,95,0.34)}
/* item aberto: borda leaf green e um fio vertical na lateral — o mesmo
   gesto de "isto está ativo" usado no seletor dos depoimentos. */
.faq-item.is-open{background:linear-gradient(180deg,#FCFDF6 0%,#EFF6E1 100%);border-color:rgba(110,143,46,0.55);box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 0 0 1px rgba(139,179,60,0.22),0 18px 38px -18px rgba(10,46,59,0.44),0 3px 8px -3px rgba(10,46,59,0.14)}
.faq-item.is-open::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--green-500) 0%,var(--green-700) 100%)}

.faq-q{margin:0;font-size:inherit;font-weight:inherit}
.faq-trigger{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,28px);width:100%;padding:clamp(18px,1.9vw,23px) clamp(20px,2.2vw,28px);text-align:left;font-family:inherit;background:none;border:0;border-radius:var(--radius-xl);cursor:pointer}
.faq-trigger:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-3px}
.faq-q-text{font-weight:700;font-size:clamp(1rem,0.95rem + 0.25vw,1.12rem);line-height:1.38;letter-spacing:-0.012em;color:var(--teal-900);text-wrap:pretty;transition:color var(--duration-base) var(--ease-standard)}
.faq-trigger:hover .faq-q-text{color:var(--teal-700)}

/* ícone: + que vira − girando meia volta. Duas barras em vez de um SVG
   porque a transformação é do próprio traço, não de um arquivo. */
.faq-icon{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(9,75,95,0.28);background:var(--blue-100);transition:transform 300ms var(--ease-out),background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.faq-icon-bar{position:absolute;width:13px;height:1.8px;border-radius:2px;background:var(--teal-900);transition:transform 300ms var(--ease-out),opacity 200ms var(--ease-standard),background var(--duration-base) var(--ease-standard)}
.faq-icon-bar--v{transform:rotate(90deg)}
.faq-trigger:hover .faq-icon{background:var(--sage-200);border-color:rgba(110,143,46,0.5);transform:scale(1.06)}
/* empate de especificidade com a regra de aberto (as duas 0,3,0): sem esta
   linha, passar o mouse num item aberto perderia a rotação. */
.faq-item.is-open .faq-trigger:hover .faq-icon{transform:rotate(180deg) scale(1.06)}
.faq-item.is-open .faq-icon{transform:rotate(180deg);background:var(--green-500);border-color:var(--green-700)}
.faq-item.is-open .faq-icon-bar--v{transform:rotate(90deg) scaleX(0);opacity:0}

/* ---- painel ----
   grid-template-rows 0fr -> 1fr é o que permite animar até a altura real
   do conteúdo sem medir nada em JS (height:auto não transiciona). O filho
   precisa de min-height:0 e overflow:hidden para poder ser comprimido. */
.faq-panel{display:grid;grid-template-rows:1fr}
.faq-panel-inner{min-height:0;overflow:hidden}
.faq-panel-inner p{margin:0;padding:0 clamp(20px,2.2vw,28px) clamp(20px,2.1vw,26px);padding-right:clamp(20px,2.2vw,28px);font-weight:400;font-size:var(--body-sm);line-height:1.72;color:var(--ink-600);max-width:66ch;text-wrap:pretty}

/* com JS o acordeão liga: fechado por padrão e uma resposta por vez.

   .faq-anim entra um frame depois de .faq-live, e só ela liga as
   transições. Sem essa separação, o próprio ato de fechar os painéis na
   inicialização vira uma animação: as cinco respostas nascem abertas (o
   estado sem JS) e desabam na cara do usuário no primeiro paint. */
.faq-live .faq-panel{grid-template-rows:0fr}
.faq-live .faq-item.is-open .faq-panel{grid-template-rows:1fr}
.faq-live .faq-panel-inner{opacity:0}
.faq-live .faq-item.is-open .faq-panel-inner{opacity:1}
.faq-anim .faq-panel{transition:grid-template-rows 300ms var(--ease-out)}
.faq-anim .faq-panel-inner{transition:opacity 220ms var(--ease-standard)}
.faq-anim .faq-item.is-open .faq-panel-inner{transition:opacity 260ms var(--ease-standard) 60ms}

/* ---- nota de rodapé: discreta, o fechamento de verdade vem depois ---- */
.faq-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 7px;max-width:640px;margin:clamp(30px,3.2vw,44px) auto 0;text-align:center;font-weight:400;font-size:var(--body-sm);line-height:1.6;color:var(--ink-600)}
.faq-note-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--teal-700);transition:color var(--duration-base) var(--ease-standard)}
.faq-note-link span{padding-bottom:2px;border-bottom:1px solid rgba(9,75,95,0.22);transition:border-color var(--duration-base) var(--ease-standard)}
.faq-note-arrow{width:16px;height:16px;flex:none;transition:transform var(--duration-base) var(--ease-out)}
.faq-note-link:hover,.faq-note-link:focus-visible{color:var(--green-700)}
.faq-note-link:hover span,.faq-note-link:focus-visible span{border-color:var(--green-500)}
.faq-note-link:hover .faq-note-arrow,.faq-note-link:focus-visible .faq-note-arrow{transform:translateX(3px)}
.faq-note-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:2px}

/* ---- mobile ---- */
@media (max-width:640px){
  .section-faq{padding:clamp(52px,12vw,70px) var(--gutter) clamp(60px,13vw,80px)}
  .faq-intro{margin-bottom:24px}
  .faq-title{font-size:1.62rem;line-height:1.16}
  .faq-support{font-size:var(--body-sm);line-height:1.6}
  .faq-list{gap:10px}
  .faq-item{border-radius:var(--radius-lg)}
  .faq-item.is-open::before{top:14px;bottom:14px}
  /* alvo de toque confortável sem inflar o cartão: a altura vem do padding
     da linha inteira, que é clicável de ponta a ponta. */
  .faq-trigger{gap:14px;padding:16px 16px 16px 18px;border-radius:var(--radius-lg)}
  .faq-q-text{font-size:0.99rem;line-height:1.42}
  .faq-icon{width:30px;height:30px}
  .faq-icon-bar{width:11px}
  .faq-panel-inner p{padding:0 18px 18px;font-size:14.5px;line-height:1.68}
  .faq-note{margin-top:26px;font-size:14px}
}

/* ---- entrada por scroll: mesma gramática das outras seções ---- */
.js-anim .section-faq [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.js-anim .section-faq [data-reveal].is-in{opacity:1;transform:none}
.js-anim .section-faq .faq-title[data-reveal]{transition-delay:80ms}
.js-anim .section-faq .faq-support[data-reveal]{transition-delay:160ms}
.js-anim .section-faq .faq-item[data-reveal]:nth-child(1){transition-delay:240ms}
.js-anim .section-faq .faq-item[data-reveal]:nth-child(2){transition-delay:300ms}
.js-anim .section-faq .faq-item[data-reveal]:nth-child(3){transition-delay:360ms}
.js-anim .section-faq .faq-item[data-reveal]:nth-child(4){transition-delay:420ms}
.js-anim .section-faq .faq-item[data-reveal]:nth-child(5){transition-delay:480ms}
.js-anim .section-faq .faq-note[data-reveal]{transition-delay:540ms}

/* no mobile os itens entram por conta própria conforme a rolagem, e o
   escalonamento só somaria espera. */
@media (max-width:640px){
  .js-anim .section-faq .faq-item[data-reveal],
  .js-anim .section-faq .faq-note[data-reveal]{transition-delay:0ms}
}

@media (prefers-reduced-motion:reduce){
  .js-anim .section-faq [data-reveal]{opacity:1;transform:none;transition:none}
  .faq-item,.faq-icon,.faq-icon-bar,.faq-q-text,.faq-note-link,.faq-note-arrow{transition:none}
  /* a abertura continua acontecendo, só sem percurso: o conteúdo aparece
     no estado final em vez de deslizar. */
  .faq-anim .faq-panel,.faq-anim .faq-panel-inner{transition:none}
  .faq-note-link:hover .faq-note-arrow{transform:none}
}


/* ================================================================
   Rodapé — a assinatura final da página (.site-footer)

   Volta ao Deep Teal depois do marfim do FAQ, fechando a página na
   mesma família tonal do hero, da assinatura e dos planos. É o fim do
   percurso: nenhum eyebrow, nenhum título de seção, nenhum CTA em
   tamanho de botão — quem chegou aqui já passou por todas as ofertas.

   O que separa este teal do teal dos planos é a direção da luz: lá os
   radiais são mais abertos e o verde aparece atrás dos cartões; aqui a
   luz vem só do alto e um degradê linear escurece o rodapé até o fim
   da página. É o mesmo material, mais quieto — sensação de fecho, não
   de mais uma faixa de decisão.

   Verde leaf existe em exatamente dois lugares: os micro-títulos das
   colunas (mesmo papel do .eyebrow-on-dark) e o fio que aparece sob o
   link no hover. Nunca como preenchimento.
   ================================================================ */

.site-footer{
  --ft-text:rgba(247,245,239,0.74);
  --ft-strong:var(--ivory-50);
  --ft-quiet:rgba(238,246,247,0.6);
  --ft-faint:rgba(238,246,247,0.44);
  --ft-hairline:rgba(255,255,255,0.1);
  position:relative;overflow:hidden;font-family:var(--font-sans);
  background-color:var(--teal-900);
  background-image:
    radial-gradient(1180px 620px at 8% -14%,rgba(15,100,128,0.38) 0%,rgba(15,100,128,0) 60%),
    radial-gradient(940px 560px at 94% 2%,rgba(97,164,191,0.15) 0%,rgba(97,164,191,0) 58%),
    radial-gradient(820px 520px at 64% 104%,rgba(139,179,60,0.07) 0%,rgba(139,179,60,0) 64%),
    /* o fundo escurece até a última linha: a página fecha, não continua. */
    linear-gradient(180deg,rgba(4,24,32,0) 44%,rgba(4,24,32,0.5) 100%);
  background-repeat:no-repeat;
  padding:clamp(58px,5.6vw,88px) clamp(28px,5vw,72px) clamp(30px,3vw,42px);
}

/* costura com o marfim do FAQ — mesmo degradê das outras emendas do
   site. A cor de partida é a média do marfim do FAQ, que é mais claro
   no centro (lavagem de baixo) do que nas bordas: um degradê chapado
   não tem como acompanhar as duas pontas, e a diferença some nos ~30px
   da emenda. */
.footer-seam{position:absolute;top:0;left:0;width:100%;height:clamp(24px,2.6vw,38px);background:linear-gradient(to bottom,#F0ECDF 0%,var(--teal-900) 100%);z-index:0;pointer-events:none}
.footer-curve{position:absolute;z-index:0;left:0;top:0;width:100%;height:clamp(240px,30vw,420px);pointer-events:none}
.footer-inner{position:relative;z-index:1}

/* ---- grade principal ----
   marca à esquerda com mais respiro, três colunas de links no meio e o
   bloco de desenvolvimento fechando à direita. */
/* marca com mais largura, e os três grupos restantes divididos por igual:
   com a coluna "Acesso" fora, quatro faixas iguais deixariam a marca
   estreita demais para a descrição respirar. */
.footer-main{display:grid;grid-template-columns:minmax(0,1.55fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px);align-items:start}

/* ---- marca ---- */
.footer-brand{max-width:340px}
.footer-lockup{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-mark{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,0.18)}
.footer-brand-text{display:flex;flex-direction:column;gap:3px;min-width:0}
/* Cabin aqui pelo mesmo motivo do cabeçalho: é o wordmark da marca, não
   um heading qualquer (ver CLAUDE.md §6). */
.footer-brand-name{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-0.02em;color:var(--white)}
.footer-brand-tagline{font-weight:600;font-size:10.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:rgba(247,245,239,0.62)}
.footer-brand-desc{margin:0;font-weight:400;font-size:14.5px;line-height:1.68;color:var(--ft-text);text-wrap:pretty}

/* ---- colunas ---- */
.footer-col-title{margin:0 0 15px;font-weight:700;font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(185,214,138,0.82)}

.footer-links{list-style:none;margin:0;padding:0}
.footer-link{display:inline-block;padding:5px 0;font-weight:500;font-size:14.5px;line-height:1.45;color:var(--ft-text);transition:color var(--duration-base) var(--ease-standard)}
/* o fio fica no <span> e nasce transparente: o hover troca só a cor da
   borda, então nada se move — mesmo gesto do .faq-note-link. */
.footer-link span{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color var(--duration-base) var(--ease-standard)}
a.footer-link:hover,a.footer-link:focus-visible{color:var(--ft-strong)}
a.footer-link:hover span,a.footer-link:focus-visible span{border-color:rgba(139,179,60,0.72)}
a.footer-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:3px}
/* item ainda sem destino (páginas institucionais): não é link, e a cor
   diz isso sem precisar de rótulo "em breve". */
.footer-link:not([href]){color:var(--ft-faint);cursor:default}

/* "Preferências de cookies" é o único item do Institucional que age em vez
   de navegar, e por isso é <button>. As regras de hover acima são escopadas
   em `a.` e `:not([href])` pinta o item apagado — as duas coisas precisam de
   equivalente próprio aqui, com especificidade suficiente para vencer
   `.footer-link:not([href])`. */
/* especificidade de propósito: abaixo de 360px o Institucional vira linha
   corrida e `.footer-col--inst .footer-links li` põe `display:inline-flex`,
   que vence o atributo `hidden` (o mesmo tropeço de `.footer-icon-btn`). */
.footer-col .footer-links li[hidden]{display:none}
button.footer-link{border:0;background:none;font-family:inherit;text-align:left}
button.footer-link:not([href]){color:var(--ft-text);cursor:pointer}
button.footer-link:hover,button.footer-link:focus-visible{color:var(--ft-strong)}
button.footer-link:hover span,button.footer-link:focus-visible span{border-color:rgba(139,179,60,0.72)}
button.footer-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:3px}

/* ---- entrada de assinante, dentro do bloco da marca ----
   pílula de contorno, não botão cheio: é uma ação secundária para quem
   já comprou, e um CTA sólido aqui competiria com a seção de planos.
   A seta indica que o link sai do site. */
.footer-member{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:0 17px;height:38px;border:1px solid rgba(255,255,255,0.18);border-radius:var(--radius-pill);font-weight:600;font-size:13px;letter-spacing:-0.005em;color:var(--ft-text);transition:color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard)}
.footer-member-arrow{width:14px;height:14px;flex:none;transition:transform var(--duration-base) var(--ease-out)}
a.footer-member:hover,a.footer-member:focus-visible{color:var(--ft-strong);border-color:rgba(139,179,60,0.6);background:rgba(139,179,60,0.1)}
a.footer-member:hover .footer-member-arrow,a.footer-member:focus-visible .footer-member-arrow{transform:translateX(3px)}
a.footer-member:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ---- redes do Dr. Juarez ----
   botão de ícone compacto: só contorno, sem preenchimento e sem rótulo.
   O verde entra no hover, como em todo o resto do rodapé. */
.footer-social-row{display:flex;align-items:center;gap:10px}
.footer-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(255,255,255,0.16);border-radius:50%;color:var(--ft-quiet);transition:color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard)}
/* o `display` da regra acima vence o `display:none` que o atributo
   `hidden` traz do navegador — sem esta linha, o perfil ainda sem URL
   apareceria como um botão morto. */
.footer-icon-btn[hidden]{display:none}
.footer-icon-btn svg{width:18px;height:18px}
a.footer-icon-btn:hover,a.footer-icon-btn:focus-visible{color:var(--ft-strong);border-color:rgba(139,179,60,0.6);background:rgba(139,179,60,0.1)}
a.footer-icon-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ---- faixa institucional ----
   três degraus de peso, do mais verificável ao miúdo: credenciais,
   aviso educativo e, depois de um segundo fio, a linha de fecho. */
.footer-legal{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:14px clamp(28px,3.4vw,56px);align-items:start;margin-top:clamp(34px,3.6vw,52px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--ft-hairline)}
.footer-credentials{display:flex;flex-direction:column;gap:3px;margin:0}
.footer-credentials-main{font-weight:500;font-size:12.5px;line-height:1.5;color:var(--ft-quiet)}
.footer-credentials-main strong{font-weight:700;color:rgba(247,245,239,0.88)}
.footer-credentials-sub{font-weight:400;font-size:11.5px;line-height:1.5;color:var(--ft-faint)}
.footer-disclaimer{margin:0;font-weight:400;font-size:11.5px;line-height:1.6;color:var(--ft-faint);max-width:70ch;text-wrap:pretty}

.footer-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-top:clamp(16px,1.8vw,22px);padding-top:clamp(14px,1.6vw,18px);border-top:1px solid rgba(255,255,255,0.06)}
.footer-copy{margin:0;font-weight:400;font-size:12px;line-height:1.5;color:var(--ft-faint)}
/* crédito do desenvolvedor: presente, nunca competindo. Mesmo tamanho do
   copyright e um tom abaixo dele até o hover. */
.footer-madeby{margin:0;font-weight:400;font-size:12px;line-height:1.5;color:rgba(238,246,247,0.36)}
.footer-madeby-link{display:inline-flex;align-items:center;gap:6px;color:var(--ft-faint);transition:color var(--duration-base) var(--ease-standard)}
.footer-madeby-icon{width:14px;height:14px;flex:none}
a.footer-madeby-link:hover,a.footer-madeby-link:focus-visible{color:var(--ft-strong)}
a.footer-madeby-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:3px}

/* ---- tablet e mobile: marca na linha inteira, dois grupos ao lado ----
   A colocação é explícita porque Navegação tem seis itens e os outros
   dois grupos têm três e dois ícones: no fluxo automático, Institucional
   ficava sozinho ao lado de Navegação e as redes caíam numa faixa
   própria mais abaixo, com um buraco à direita. Navegação atravessa as
   duas linhas da esquerda e os dois grupos curtos se empilham na
   direita — o vazio some e as colunas fecham quase na mesma altura. */
@media (max-width:1024px){
  .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px clamp(28px,4vw,48px)}
  .footer-brand{grid-column:1/-1;grid-row:1;max-width:520px}
  .footer-col--nav{grid-column:1;grid-row:2 / span 2}
  .footer-col--inst{grid-column:2;grid-row:2}
  .footer-redes{grid-column:2;grid-row:3}
}

/* a linha de RQEs pede ~515px. Dividindo a faixa com o aviso educativo,
   ela deixa de caber por volta de 900px e quebra deixando uma palavra
   sozinha — numa faixa que existe para transmitir seriedade, é
   justamente o detalhe que a desmonta. */
@media (max-width:900px){
  .footer-legal{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* ---- mobile: mesma colocação do tablet, medidas mais apertadas ---- */
@media (max-width:640px){
  .site-footer{padding:clamp(40px,9.5vw,54px) var(--gutter) 22px}
  .footer-main{gap:26px 20px}
  .footer-brand{max-width:none;padding-bottom:24px;border-bottom:1px solid var(--ft-hairline)}
  .footer-member{margin-top:16px;height:36px}

  .footer-lockup{margin-bottom:12px}
  .footer-mark{width:40px;height:40px}
  .footer-brand-name{font-size:19px}
  .footer-brand-desc{font-size:14px;line-height:1.6;max-width:38ch}
  .footer-col-title{margin-bottom:9px;font-size:11px}
  /* 8px em cima e embaixo levam a linha a ~36px, a mesma altura do botão
     de ícone das redes: é o piso de toque confortável do rodapé, e
     apertar mais devolveria altura à custa de errar o link ao lado. */
  .footer-link{padding:8px 0;font-size:13.5px}

  .footer-icon-btn{width:36px;height:36px}
  .footer-legal{margin-top:26px;padding-top:18px}
  .footer-bottom{margin-top:14px;padding-top:12px;gap:6px 16px}
  .footer-credentials-main{font-size:12px}
  .footer-credentials-sub,.footer-disclaimer{font-size:11px}
  .footer-copy,.footer-madeby{font-size:11.5px}
}

/* telas muito estreitas (~320px): "Política de privacidade" não cabe
   numa coluna de ~126px sem quebrar no meio, então os grupos voltam a
   empilhar — a colocação explícita acima precisa ser desfeita junto. */
@media (max-width:359px){
  .footer-main{grid-template-columns:minmax(0,1fr)}
  .footer-brand,.footer-col--nav,.footer-col--inst,.footer-redes{grid-column:1;grid-row:auto}
  /* de volta à largura inteira, os três itens institucionais cabem em
     linha corrida — vertical aqui só devolveria a altura que a pilha já
     custou. */
  .footer-col--inst .footer-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px}
  .footer-col--inst .footer-links li{display:inline-flex;align-items:baseline;gap:9px}
  /* o ponto vem ANTES de cada item, não depois: o último item da lista é o
     de preferências de cookies, que nasce escondido e só aparece com JS —
     com o separador no `::after` do anterior, sem JS sobrava um "·" solto no
     fim da linha. */
  .footer-col--inst .footer-links li:not(:first-child)::before{content:'·';color:rgba(238,246,247,0.3)}
  .footer-col--inst .footer-link{padding:4px 0}
}

/* ---- entrada por scroll: mesma gramática das outras seções ---- */
.js-anim .site-footer [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.js-anim .site-footer [data-reveal].is-in{opacity:1;transform:none}
.js-anim .site-footer .footer-main > [data-reveal]:nth-child(2){transition-delay:70ms}
.js-anim .site-footer .footer-main > [data-reveal]:nth-child(3){transition-delay:130ms}
.js-anim .site-footer .footer-main > [data-reveal]:nth-child(4){transition-delay:190ms}
.js-anim .site-footer .footer-legal[data-reveal]{transition-delay:250ms}

/* no mobile os blocos entram conforme a rolagem: o escalonamento só
   somaria espera. */
@media (max-width:640px){
  .js-anim .site-footer .footer-main > [data-reveal],
  .js-anim .site-footer .footer-legal[data-reveal]{transition-delay:0ms}
}

@media (prefers-reduced-motion:reduce){
  .js-anim .site-footer [data-reveal]{opacity:1;transform:none;transition:none}
  .footer-link,.footer-link span,.footer-icon-btn,.footer-madeby-link,.footer-member{transition:none}
  .footer-member-arrow{transition:none}
  a.footer-member:hover .footer-member-arrow{transform:none}
}

/* ================================================================
   CONSENTIMENTO DE COOKIES
   Barra de decisão do Analytics. Fixa no rodapé da janela, fora do
   <main> e fora de qualquer seção: não pertence ao conteúdo, só
   precisa estar alcançável enquanto não houver resposta.

   Sem backdrop-filter, deliberadamente: o vidro fosco do hero já
   convive com o bug de repintura do Chromium no Windows (ver o
   comentário de .hero), e não há motivo para acrescentar mais uma
   superfície com o mesmo custo numa peça que aparece sobre a página
   inteira.
   ================================================================ */
/* Aqui viviam a `.page-cta-bar` e a classe `.has-cta-bar` que abria espaço
   para ela no rodapé. A barra foi REMOVIDA (ver o comentário no lugar da
   marcação, em index.html): o cabeçalho fixo passou a resolver a navegação
   no mobile, e uma barra permanente em cima dele era espaço ocupado o tempo
   todo para anunciar só a assinatura. Não reintroduzir elemento flutuante
   aqui — as rotas para a oferta vivem no fluxo da página. */

.cookie-bar{position:fixed;z-index:8;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));pointer-events:none}
.cookie-bar[hidden]{display:none}
/* o wrapper não intercepta clique (o rodapé continua clicável ao lado da
   barra); só o cartão recebe ponteiro. */
.cookie-bar-card{pointer-events:auto;display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);width:min(760px,100%);padding:16px 20px;border:1px solid rgba(9,75,95,0.16);border-radius:var(--radius-lg);background:var(--ivory-50);box-shadow:var(--shadow-lg)}
.cookie-bar-copy{flex:1;min-width:0}
.cookie-bar-title{margin:0 0 4px;font-weight:700;font-size:var(--body-sm);letter-spacing:-0.005em;color:var(--teal-900)}
.cookie-bar-text{margin:0;font-size:var(--caption);line-height:1.5;color:var(--ink-600);text-wrap:pretty}
.cookie-bar-actions{flex:none;display:flex;align-items:center;gap:10px}
.cookie-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border-radius:var(--radius-pill);font-family:inherit;font-weight:700;font-size:14.5px;letter-spacing:-0.005em;white-space:nowrap;cursor:pointer;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
/* Deep Teal e não Leaf Green: verde é acento, e um botão cheio de verde
   aqui teria o mesmo peso dos CTAs de compra — um aviso de cookie não
   compete com a oferta. Recusar tem o mesmo tamanho de Aceitar de
   propósito: consentimento só é livre se as duas saídas custarem igual. */
.cookie-btn--ghost{border:1px solid rgba(9,75,95,0.3);background:transparent;color:var(--teal-700)}
.cookie-btn--ghost:hover{background:rgba(9,75,95,0.07)}
.cookie-btn--solid{border:1px solid var(--teal-700);background:var(--teal-700);color:var(--ivory-50)}
.cookie-btn--solid:hover{background:var(--teal-900);border-color:var(--teal-900)}
.cookie-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

.js-anim .cookie-bar-card{opacity:0;transform:translateY(16px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.js-anim .cookie-bar.is-in .cookie-bar-card{opacity:1;transform:none}

@media (max-width:640px){
  .cookie-bar{padding:0 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .cookie-bar-card{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
  .cookie-bar-actions{gap:10px}
  /* as duas saídas dividem a linha em partes iguais: nenhuma fica com o
     alvo de toque maior que a outra. */
  .cookie-btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  .js-anim .cookie-bar-card{opacity:1;transform:none;transition:none}
  .cookie-btn{transition:none}
}

/* ================================================================
   PRÉ-LANÇAMENTO — selo do hero, microcopy do CTA e faixa de fecho
   ================================================================ */

/* ---- selo "Pré-lançamento · Lista de espera aberta" ----
   O `.eyebrow` continua sendo a caixa de layout (é ele que carrega o recuo
   lateral no mobile e o `order:2` da coluna); quem vira pílula é o <span>
   interno. Sem essa separação o contorno sairia de borda a borda no
   telefone, com o recuo da página virando ar dentro da pílula. */
.eyebrow--prelaunch{margin-bottom:var(--space-5)}
.eyebrow-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 13px;border:1px solid rgba(139,179,60,0.42);border-radius:var(--radius-pill);background:rgba(139,179,60,0.12);line-height:1.25;text-wrap:balance}

/* ---- microcopy sob os CTAs do hero ---- */
.hero-note{margin:14px 0 0;max-width:42ch;font-weight:400;font-size:13.5px;line-height:1.5;color:rgba(247,245,239,0.66);text-wrap:pretty}

/* ---- faixa de fecho, entre o FAQ e o rodapé ----
   Marfim contínuo com o FAQ; o que separa as duas é o fio no topo e o
   respiro. Uma troca de fundo aqui faria a página parecer que recomeça a
   dez telas do fim. */
.section-waitlist-close{position:relative;background:var(--faq-ivory,#EBE7D9);border-top:1px solid rgba(9,75,95,0.1);padding:clamp(52px,5vw,78px) clamp(28px,5vw,72px) clamp(58px,5.4vw,86px);font-family:var(--font-sans)}
.wlc-inner{max-width:var(--content-narrow);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.wlc-title{margin:0 0 10px;font-weight:800;font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);line-height:1.18;letter-spacing:-0.026em;color:var(--teal-900);text-wrap:balance}
.wlc-text{margin:0 0 clamp(22px,2.4vw,28px);max-width:46ch;font-weight:400;font-size:var(--body-sm);line-height:1.6;color:var(--ink-600);text-wrap:pretty}
/* Deep Teal e não verde: o botão verde é a gramática de compra dos cartões
   de plano, e repeti-lo aqui poria dois "botões de comprar" na mesma
   rolagem final. Este é o pill de navegação da página (mesma família do
   `.journeys-cta-btn`), que é o que ele de fato faz — abre um formulário. */
.wlc-cta{display:inline-flex;align-items:center;gap:11px;min-height:54px;padding:8px 26px;border:0;border-radius:var(--radius-pill);background:var(--teal-700);color:var(--ivory-50);font-family:inherit;font-weight:700;font-size:15px;letter-spacing:-0.005em;cursor:pointer;box-shadow:0 14px 28px -16px rgba(9,75,95,0.8);transition:background 200ms var(--ease-standard),box-shadow 200ms var(--ease-standard),transform 200ms var(--ease-out)}
.wlc-cta:hover{background:var(--teal-900);transform:translateY(-2px);box-shadow:0 18px 32px -16px rgba(9,75,95,0.7)}
.wlc-cta:active{transform:translateY(0)}
.wlc-cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.wlc-arrow{width:18px;height:18px;transition:transform 220ms var(--ease-out)}
.wlc-cta:hover .wlc-arrow{transform:translateX(4px)}

/* entrada da faixa: mesmo padrão `data-reveal` das demais seções. */
.js-anim .section-waitlist-close [data-reveal]{opacity:0;transform:translateY(16px)}
.js-anim .section-waitlist-close [data-reveal].is-in{opacity:1;transform:none;transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js-anim .section-waitlist-close [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ================================================================
   Lista de espera (dialog#waitlistModal)

   Mesma gramática do modal de soluções, de propósito: os dois são o mesmo
   tipo de objeto na página (painel sobre a landing, bottom sheet no
   telefone), e inventar uma segunda linguagem para o segundo faria a
   captação parecer coisa de outro site. Daí vêm o raio, a sombra, o scrim
   do backdrop, o ::backdrop sem `backdrop-filter` e o grip do mobile.

   As três superfícies são as do §11.1 (fundo marfim pigmentado + cartão
   quente + lavagem verde), com o mesmo degrau de ~1,17-1,20 de razão de
   contraste entre fundo e campo: sem esse degrau os inputs desaparecem em
   monitor claro, que foi o defeito medido no FAQ e no modal de soluções.

   Como lá: dentro deste painel só `transform` e `opacity` animam. Nada de
   `backdrop-filter` (o ::backdrop obrigaria a rasterizar e desfocar a
   viewport inteira, e a página atrás é a mais cara do site) e nada de
   `box-shadow` em lista de transição.
   ================================================================ */
.wl{
  --wl-surface:#EFEADB;
  --wl-card:#FDFCF7;
  --wl-tint:#F3F7E9;
  --wl-border:rgba(10,67,82,0.20);
  --wl-border-hover:rgba(10,67,82,0.34);
  --wl-border-green:rgba(110,143,46,0.52);
  --wl-danger:#9A3324;
  /* 28px e não `--radius-xl` (22px): o painel é a maior superfície flutuante
     do site, e o mesmo raio de um cartão de 300px lê como duro numa caixa
     desse tamanho. Os campos sobem junto (14px), para o raio interno
     acompanhar o externo em vez de brigar com ele. */
  width:min(560px,calc(100vw - 48px));max-height:min(92vh,900px);padding:0;border:0;border-radius:28px;background:var(--wl-surface);color:var(--text-primary);font-family:var(--font-sans);box-shadow:0 32px 64px -28px rgba(4,20,26,0.55),0 4px 14px -6px rgba(4,20,26,0.26);overflow:hidden}
/* scrim mais leve: 0,74 recuava o fundo tanto que o painel passava a flutuar
   no escuro e a landing sumia. 0,62 ainda separa e deixa a página legível
   atrás — é o recuo que o §11.1 descreve, não um apagamento. Continua sem
   `backdrop-filter`, pelo mesmo motivo de sempre. */
.wl::backdrop{background:rgba(6,26,34,0.62)}
.wl-panel{position:relative;display:flex;flex-direction:column;max-height:inherit;overflow-y:auto;overscroll-behavior:contain;padding:clamp(28px,3.2vw,40px);-webkit-overflow-scrolling:touch}

/* entrada e saída: opacity + translate + um scale mínimo. 0.985 na entrada
   e 0.99 na saída — o suficiente para o painel "chegar" e "recuar" sem que
   o movimento chame atenção para si. A saída é mais curta que a entrada de
   propósito: sair devagar parece travamento.

   `WL_OUT` no script tem de valer o mesmo que os 150ms daqui. */
.wl[open]{animation:wl-in 240ms var(--ease-out)}
.wl[open]::backdrop{animation:wl-backdrop 240ms var(--ease-out)}
.wl[open].is-closing{animation:wl-out 150ms var(--ease-standard) forwards}
.wl[open].is-closing::backdrop{animation:wl-backdrop-out 150ms var(--ease-standard) forwards}
@keyframes wl-in{from{opacity:0;transform:translateY(12px) scale(0.985)}to{opacity:1;transform:none}}
@keyframes wl-out{to{opacity:0;transform:translateY(6px) scale(0.99)}}
@keyframes wl-backdrop{from{opacity:0}to{opacity:1}}
@keyframes wl-backdrop-out{to{opacity:0}}

/* `flex:none` não é enfeite: `.wl-panel` é flex em coluna, e quando a folha
   é mais alta que o painel (sempre, no telefone) todo filho encolhível
   encolhe — uma alça de 4px vira 0px e simplesmente não existe. Mesmo motivo
   do `flex:none` na marca da confirmação. */
.wl-grip{display:none;flex:none;width:40px;height:4px;border-radius:999px;background:rgba(10,46,59,0.18);margin:0 auto 16px}
.wl-close{position:absolute;top:clamp(14px,1.6vw,18px);right:clamp(14px,1.6vw,18px);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(9,75,95,0.14);border-radius:var(--radius-pill);background:rgba(247,245,239,0.9);color:var(--teal-700);cursor:pointer;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)}
.wl-close svg{width:18px;height:18px}
.wl-close:hover{background:rgba(9,75,95,0.1);border-color:rgba(9,75,95,0.28)}
.wl-close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.wl-step[hidden]{display:none}

/* hierarquia: título com peso e tracking de display, apoio claramente um
   degrau abaixo em cor e tamanho. Antes os dois estavam a meio degrau um do
   outro e o bloco lia como dois parágrafos, não como cabeçalho. */
.wl-head{margin-bottom:clamp(22px,2.6vw,28px)}
.wl-title{font-weight:800;font-size:clamp(1.42rem,1.16rem + 0.75vw,1.7rem);line-height:1.16;letter-spacing:-0.026em;color:var(--teal-900);margin:0 46px 9px 0;text-wrap:pretty}
.wl-sub{font-weight:400;font-size:14.5px;line-height:1.6;color:var(--ink-600);margin:0;max-width:42ch;text-wrap:pretty}

/* ---- campos ----
   Coluna única em qualquer largura: nome/e-mail/telefone lado a lado
   economizariam altura no desktop e obrigariam a duas regras de quebra no
   telefone, que é onde o formulário é de fato preenchido. */
.wl-form{display:flex;flex-direction:column;gap:20px}
.wl-field{display:flex;flex-direction:column;gap:8px}
/* o rótulo é legenda, não título: sobe em tracking e desce em tamanho, o que
   o afasta do texto que a pessoa digita dentro do campo. */
.wl-label{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:11.5px;letter-spacing:0.055em;text-transform:uppercase;color:var(--teal-700)}
/* "opcional" no rótulo e não num placeholder: placeholder desaparece ao
   digitar, e é justamente quando a pessoa precisa saber que podia pular. */
.wl-optional{font-weight:500;font-size:11px;letter-spacing:0.04em;text-transform:none;color:var(--ink-400)}
/* 16px no input é a regra que impede o Safari do iPhone de dar zoom ao focar
   o campo — abaixo disso ele aumenta a página e o painel sai de
   enquadramento. Vale para todas as larguras, então mora na regra base. */
/* o anel de foco é `box-shadow`, não `outline`: ele acompanha o raio de 14px
   e pode transicionar junto com a borda, o que é o "foco suave" pedido. Um
   outline de 2px salta pronto e com canto próprio.

   Animar box-shadow aqui não contradiz a regra do §11.1 (nada de box-shadow
   em transição dentro de modal): aquela regra existe porque `.sm-opt` repinta
   a mancha de desfoque a cada frame de hover numa GRADE de cartões. Aqui é um
   campo por vez, em foco, uma vez. */
.wl-input{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--wl-border);border-radius:14px;background:var(--wl-card);color:var(--text-primary);font-family:inherit;font-weight:500;font-size:16px;letter-spacing:-0.005em;box-shadow:0 0 0 0 rgba(110,143,46,0);transition:border-color 180ms var(--ease-standard),background 180ms var(--ease-standard),box-shadow 180ms var(--ease-standard)}
.wl-input::placeholder{color:var(--ink-200);font-weight:400}
.wl-input:hover{border-color:var(--wl-border-hover);background:var(--wl-card-hi,var(--white))}
.wl-input:focus{outline:none;border-color:var(--green-700);background:var(--white);box-shadow:0 0 0 3px rgba(139,179,60,0.18)}
.wl-input.is-invalid{border-color:rgba(154,51,36,0.55);background:rgba(154,51,36,0.04)}
.wl-input.is-invalid:focus{border-color:var(--wl-danger);box-shadow:0 0 0 3px rgba(154,51,36,0.15)}
.wl-err{margin:0;font-weight:600;font-size:12.5px;line-height:1.45;color:var(--wl-danger);text-wrap:pretty}
.wl-err[hidden]{display:none}

/* ---- a pergunta de pesquisa ----
   `border:0` no fieldset: a moldura padrão do navegador é a única borda da
   página que não pertence a este sistema de design. */
.wl-fieldset{margin:0;padding:0;border:0;min-width:0}
/* a legenda é uma pergunta, não um rótulo de campo: fica em caixa normal e
   um degrau acima dos rótulos de input, senão ela desaparece no meio deles. */
.wl-legend{padding:0;margin-bottom:13px;font-weight:700;font-size:14px;line-height:1.45;letter-spacing:-0.012em;color:var(--teal-900);text-wrap:pretty}
.wl-chips{display:flex;flex-wrap:wrap;gap:9px}
.wl-chip{display:inline-flex;min-width:0}
/* o radio continua no fluxo e focável (não é `display:none`, que o tiraria
   da navegação por setas dentro do grupo): fica invisível e do tamanho de um
   ponto, atrás da face do chip. O estado vem do seletor irmão `:checked +`,
   que funciona em qualquer navegador — `:has` no rótulo deixaria a seleção
   invisível onde ele não existe, e seleção invisível quebra o controle. */
.wl-chip-input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
/* `font-weight` NÃO muda entre repouso e selecionado: mudar peso muda a
   largura do chip, e com sete deles em flex-wrap isso reflui a grade inteira
   a cada clique — as opções pulavam de linha enquanto a pessoa escolhia. O
   estado vive no marcador, na borda e no fundo, que não mexem em métrica. */
.wl-chip-face{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 15px 8px 13px;border:1px solid var(--wl-border);border-radius:var(--radius-pill);background:var(--wl-card);font-weight:600;font-size:13.5px;line-height:1.3;letter-spacing:-0.005em;color:var(--ink-600);cursor:pointer;text-wrap:pretty;transition:border-color 170ms var(--ease-standard),background 170ms var(--ease-standard),color 170ms var(--ease-standard)}
/* o marcador: anel vazio no repouso, disco verde com miolo claro quando
   escolhido. O miolo é um `box-shadow` interno, não um filho — um elemento a
   mais por chip em sete chips é marcação por enfeite. */
.wl-chip-mark{flex:none;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--wl-border-hover);background:transparent;box-shadow:inset 0 0 0 0 var(--wl-card-hi);transition:border-color 170ms var(--ease-standard),background 170ms var(--ease-standard),box-shadow 190ms var(--ease-out)}
.wl-chip-face:hover{border-color:var(--wl-border-hover);color:var(--teal-900);background:var(--wl-card-hi)}
.wl-chip-face:hover .wl-chip-mark{border-color:var(--green-700)}
/* o clique tem um recuo de 1px: confirma o toque sem animação de escala, que
   nesta densidade leria como pipoca. */
.wl-chip-face:active{transform:translateY(1px)}
.wl-chip-input:checked + .wl-chip-face{border-color:var(--wl-border-green);background:var(--wl-tint);color:var(--teal-900)}
.wl-chip-input:checked + .wl-chip-face .wl-chip-mark{border-color:var(--green-700);background:var(--green-500);box-shadow:inset 0 0 0 3px var(--wl-card-hi)}
.wl-chip-input:focus-visible + .wl-chip-face{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---- opt-in de WhatsApp ----
   A caixa nativa continua sendo o controle (foco, espaço, leitor de tela);
   o que se vê é o `.wl-check-box` ao lado, comandado por seletor de irmão.
   `opacity:0` e não `display:none`: um controle removido da renderização sai
   da ordem de foco e deixa de ser alcançável pelo teclado. */
.wl-check{display:flex;align-items:flex-start;gap:12px;padding:2px 0;cursor:pointer}
.wl-check-input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.wl-check-box{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;border:1.5px solid var(--wl-border-hover);border-radius:7px;background:var(--wl-card);color:var(--white);transition:border-color 170ms var(--ease-standard),background 170ms var(--ease-standard),box-shadow 170ms var(--ease-standard)}
.wl-check-box svg{width:15px;height:15px}
/* o traço nasce totalmente recolhido e é "riscado" ao marcar. 30 é um pouco
   mais que o comprimento real do path — sobra proposital, para o traço sumir
   por inteiro no estado desmarcado em qualquer arredondamento. */
.wl-check-box svg path{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset 200ms var(--ease-out)}
.wl-check:hover .wl-check-box{border-color:var(--green-700);background:var(--wl-card-hi)}
.wl-check-input:checked + .wl-check-box{border-color:var(--green-700);background:var(--green-500)}
.wl-check-input:checked + .wl-check-box svg path{stroke-dashoffset:0}
.wl-check-input:focus-visible + .wl-check-box{box-shadow:0 0 0 3px rgba(97,164,191,0.45)}
.wl-check-text{font-weight:500;font-size:13.5px;line-height:1.5;color:var(--ink-600);text-wrap:pretty}

/* honeypot: fora da tela, nunca `display:none` nem `hidden` — um campo que
   não é renderizado o bot também não preenche, e o laço deixa de existir. */
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.wl-alert{margin:0;padding:11px 14px;border:1px solid rgba(154,51,36,0.32);border-radius:var(--radius-md);background:rgba(154,51,36,0.07);font-weight:500;font-size:13px;line-height:1.5;color:var(--wl-danger);text-wrap:pretty}
.wl-alert[hidden]{display:none}

/* ---- botão ----
   Maiúsculas por CSS e não no HTML: a árvore de acessibilidade e a seleção
   de texto ficam com a frase em caixa normal, e a troca de rótulo do estado
   de envio não precisa repetir a decisão de caixa. */
/* O acabamento é o dos CTAs da landing, um degrau acima do chapado: fundo em
   degradê vertical (claro no topo, o verde forte embaixo), o fio de luz
   interno no topo e a sombra colorida do próprio verde, não cinza. É a mesma
   receita do `.plan-cta--solid`, com o degradê que o `.btn-gradient` do hero
   trouxe para o vocabulário da página.

   `background-image` e não `background`: o `background-color` embaixo fica
   como reserva para o caso do degradê não pintar. */
.wl-submit{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;width:100%;min-height:58px;margin-top:4px;padding:0 20px;border:1px solid var(--green-700);border-radius:16px;background-color:var(--green-500);background-image:linear-gradient(180deg,#9CC24C 0%,var(--green-500) 52%,#7FA632 100%);color:var(--teal-900);font-family:inherit;font-weight:800;font-size:13.5px;letter-spacing:0.075em;text-transform:uppercase;text-align:center;cursor:pointer;box-shadow:0 14px 28px -14px rgba(110,143,46,0.85),0 2px 5px -2px rgba(20,40,46,0.18),inset 0 1px 0 rgba(255,255,255,0.42);transition:background-image 200ms var(--ease-standard),border-color 200ms var(--ease-standard),color 200ms var(--ease-standard),box-shadow 200ms var(--ease-standard),transform 200ms var(--ease-out)}
.wl-submit:hover,.wl-submit:focus-visible{background-image:linear-gradient(180deg,#8FB63F 0%,var(--green-700) 60%,#5F7D28 100%);border-color:var(--green-700);color:var(--white);box-shadow:0 18px 32px -14px rgba(110,143,46,0.7),0 2px 6px -2px rgba(20,40,46,0.2),inset 0 1px 0 rgba(255,255,255,0.3)}
.wl-submit:hover{transform:translateY(-2px)}
.wl-submit:active{transform:translateY(0)}
.wl-submit:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* o spinner nasce fora do fluxo (width:0) e só ocupa lugar durante o envio:
   assim o rótulo fica centrado nos dois estados, sem reservar espaço vazio.

   `animation:none` no repouso não é detalhe: este é o único `.cta-spinner`
   que existe na marcação estática (o do checkout é criado no clique), e a
   regra base o deixa girando `infinite`. Sem este corte ele giraria desde o
   primeiro paint, invisível, pedindo composição a cada frame da página
   inteira — pelo mesmo motivo do §7.4: efeito que custa por frame só pode
   existir enquanto serve para alguma coisa. */
.wl-submit .cta-spinner{width:0;height:17px;border-width:0;opacity:0;transition:none;animation:none}
.wl-submit.is-loading{gap:10px;cursor:progress}
.wl-submit.is-loading .cta-spinner{width:17px;border-width:2px;opacity:0.85;animation:cta-spin 620ms linear infinite}
.wl-submit:disabled{transform:none}
.wl-submit:disabled:hover{transform:none}

.wl-legal{margin:2px 0 0;font-weight:400;font-size:12px;line-height:1.55;color:var(--ink-400);text-align:center;text-wrap:pretty}
.wl-legal a{color:var(--teal-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.wl-legal a:hover{color:var(--green-700)}

/* ---- etapa 2: confirmação ----
   Centralizada e curta: é um fim de percurso, não uma nova tela de leitura.
   O botão é contorno e não sólido porque não pede decisão nenhuma — só
   devolve a pessoa à página (mesma razão do `.footer-member`). */
.wl-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(6px,1.4vw,14px) 0 2px}
.wl-done-mark{display:inline-flex;flex:none;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:18px;border:1px solid var(--wl-border-green);border-radius:var(--radius-pill);background:var(--wl-tint);color:var(--green-700)}
.wl-done-mark svg{width:28px;height:28px}
.wl-done-title{margin:0 0 10px;font-weight:800;font-size:clamp(1.35rem,1.1rem + 0.7vw,1.6rem);line-height:1.2;letter-spacing:-0.022em;color:var(--teal-900)}
.wl-done-text{margin:0 0 clamp(22px,2.6vw,28px);font-weight:400;font-size:var(--body-sm);line-height:1.6;color:var(--ink-600);max-width:38ch;text-wrap:pretty}
.wl-done-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:8px 24px;border:1px solid rgba(9,75,95,0.26);border-radius:var(--radius-lg);background:transparent;color:var(--teal-700);font-family:inherit;font-weight:700;font-size:14.5px;letter-spacing:-0.005em;cursor:pointer;text-wrap:pretty;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.wl-done-cta:hover{background:var(--teal-700);border-color:var(--teal-700);color:var(--ivory-50)}
.wl-done-cta:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ---- telefone: bottom sheet, como o modal de soluções ----
   Colado embaixo e ancorado na borda inferior: é onde o polegar está, e é o
   que evita um painel flutuando no meio da tela com o teclado aberto. */
@media (max-width:640px){
  /* `margin:auto 0 0` é o que encosta o painel embaixo, e não `top`/`bottom`:
     um <dialog> modal é `position:fixed` com `inset:0` e `margin:auto` na
     folha do navegador, então é a margem que o posiciona. Mesma regra do
     `.sm`, pelo mesmo motivo. */
  .wl{width:100%;max-width:none;max-height:90vh;margin:auto 0 0;border-radius:22px 22px 0 0}
  .wl-panel{padding:16px 20px calc(22px + env(safe-area-inset-bottom,0px))}
  .wl-grip{display:block}
  .wl-close{top:10px;right:12px;width:34px;height:34px}
  .wl-title{margin-right:40px}
  .wl-chip-face{font-size:13px;padding:7px 13px}
  .wl[open]{animation:wl-sheet-in 300ms var(--ease-out)}
}
@keyframes wl-sheet-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* telefone baixo (SE, Androids antigos): a folha inteira tem ~600px úteis, e
   com o teclado aberto sobram ~320px. O que encolhe é o respiro, nunca a
   altura de toque dos campos. */
@media (max-width:640px) and (max-height:700px){
  .wl-form{gap:13px}
  .wl-head{margin-bottom:14px}
  .wl-done-mark{width:48px;height:48px;margin-bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  /* a saída animada também é desligada no script (`reduceMotion`), senão o
     diálogo ficaria 150ms parado e invisível antes de fechar. */
  .wl[open],.wl[open]::backdrop,.wl[open].is-closing,.wl[open].is-closing::backdrop{animation:none}
  .wl-submit:hover,.wl-submit:active,.wl-chip-face:active{transform:none}
  .wl-input,.wl-chip-face,.wl-chip-mark,.wl-check-box,.wl-check-box svg path,.wl-submit,.wl-done-cta,.wl-close{transition:none}
  /* sem transição o traço do check tem de nascer inteiro, senão marcar a
     caixa não mostraria nada. */
  .wl-check-input:checked + .wl-check-box svg path{stroke-dashoffset:0}
  .wlc-cta:hover{transform:none}
  .wlc-cta,.wlc-arrow{transition:none}
}

/* ==========================================================================
   Páginas legais (/termos-de-uso/, /politica-de-privacidade/,
   /politica-de-cookies/) — leitura longa, não landing: sem animação de
   entrada, sem data-reveal, nada nasce escondido. Coluna de ~72 caracteres
   sobre o marfim da página; o Deep Teal fica só no cabeçalho e no rodapé.
   ========================================================================== */
.legal-header{background:var(--teal-900);color:var(--ivory-50)}
.legal-header-inner{max-width:var(--content-max);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.legal-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.legal-brand img{width:40px;height:40px;border-radius:50%}
.legal-brand-name{font-family:var(--font-display);font-weight:700;font-size:1.125rem;letter-spacing:-0.01em}
.legal-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid rgba(247,245,239,0.28);border-radius:var(--radius-pill);color:var(--ivory-50);font-weight:600;font-size:var(--body-sm);text-decoration:none;white-space:nowrap;transition:background var(--duration-base) var(--ease-standard)}
.legal-back:hover{background:rgba(247,245,239,0.1)}
.legal-back:focus-visible,.legal-brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

.legal{max-width:calc(72ch + 2 * var(--gutter));margin:0 auto;padding:clamp(40px,7vw,80px) var(--gutter) clamp(56px,8vw,96px);font-size:var(--body-md);line-height:var(--lh-relaxed);color:var(--text-primary)}
.legal-eyebrow{margin:0 0 var(--space-2);font-size:var(--eyebrow);font-weight:700;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--teal-600)}
.legal h1{margin:0 0 var(--space-3);font-size:var(--display-md);line-height:var(--lh-snug);letter-spacing:var(--ls-display);color:var(--teal-900)}
.legal-updated{margin:0 0 var(--space-6);font-size:var(--body-sm);color:var(--text-muted)}
.legal-lead{font-size:var(--body-lg);color:var(--text-secondary)}
.legal-toc{margin:var(--space-6) 0 var(--space-7);padding:var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--sage-100)}
.legal-toc-title{margin:0 0 var(--space-2);font-size:var(--body-sm);font-weight:700;color:var(--teal-900)}
.legal-toc ol{margin:0;padding-left:1.3em;font-size:var(--body-sm);line-height:1.9}
.legal h2{margin:var(--space-7) 0 var(--space-3);font-size:var(--heading-md);line-height:var(--lh-snug);color:var(--teal-900);scroll-margin-top:var(--space-5)}
.legal h3{margin:var(--space-5) 0 var(--space-2);font-size:var(--heading-sm);color:var(--teal-900)}
.legal p,.legal ul{margin:0 0 var(--space-4)}
.legal ul{padding-left:1.3em}
.legal li{margin-bottom:var(--space-2)}
.legal a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(9,75,95,0.35)}
.legal a:hover{color:var(--link-hover)}
.legal a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
.legal strong{color:var(--ink-900)}
.legal-note{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);background:var(--blue-100);border:1px solid rgba(9,75,95,0.12)}
/* dado que ainda precisa ser preenchido antes da publicação: marcado de
   propósito para não passar despercebido numa revisão. */
.legal-todo{padding:1px 6px;border-radius:4px;background:#FFF1B8;color:var(--ink-900);font-weight:600}
.legal-table-wrap{overflow-x:auto;margin:0 0 var(--space-5);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--white)}
.legal table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--body-sm);line-height:var(--lh-normal)}
.legal th,.legal td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-default)}
.legal th{background:var(--sage-100);color:var(--teal-900);font-weight:700}
.legal tr:last-child td{border-bottom:0}
.legal code{font-size:0.9em;padding:1px 5px;border-radius:4px;background:var(--sage-100)}

.legal-footer{background:var(--teal-900);color:var(--blue-300);font-size:var(--body-sm);line-height:var(--lh-normal)}
.legal-footer-inner{max-width:var(--content-max);margin:0 auto;padding:var(--space-7) var(--gutter);display:grid;gap:var(--space-4)}
.legal-footer p{margin:0}
.legal-footer strong{color:var(--ivory-50)}
.legal-footer-nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.legal-footer-nav a{color:var(--ivory-50);text-decoration:none;border-bottom:1px solid transparent}
.legal-footer-nav a:hover,.legal-footer-nav a[aria-current="page"]{border-color:var(--green-500)}
.legal-footer-nav a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

@media (max-width:640px){
  .legal-header-inner{padding:10px 16px}
  .legal-brand img{width:34px;height:34px}
  .legal-brand-name{font-size:1rem}
  .legal-back{min-height:38px;padding:0 12px;font-size:var(--caption)}
  .legal{padding-left:16px;padding-right:16px}
  .legal-toc{padding:var(--space-4)}
  .legal-footer-inner{padding:var(--space-6) 16px}
}
@media (max-width:360px){
  .legal-brand-name{display:none}
}

/* link "Saiba mais" dentro da barra de cookies da landing */
.cookie-bar-text a{color:var(--teal-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cookie-bar-text a:hover{color:var(--green-700)}

/* ============================================================
   PRÉ-LANÇAMENTO — estado "em breve" da seção de planos
   ============================================================

   Todo este bloco é gated por `.pcc-prelaunch` no <html>, que é o
   interruptor único do estado (o JS lê a MESMA classe — ver o comentário
   ao lado de KIWIFY em index.html). Duas consequências práticas:

   - abrir as vendas é tirar aquela classe. Nada aqui precisa ser apagado,
     e a marcação serve aos dois estados;
   - fora do pré-lançamento estas regras não têm efeito nenhum, e os
     elementos novos (`.plan-soon`, `.sm-soon`) nascem `display:none` —
     nunca aparecem por acidente numa página que voltou a vender.

   `display:none` e não `opacity`/`visibility` no que sai de cena: é o que
   também tira o nó da ÁRVORE DE ACESSIBILIDADE. Sem isso o `.pr-sr` (o
   preço falado, que existe porque o número animado é aria-hidden) faria o
   leitor de tela anunciar um valor de mockup que a página não mostra a
   ninguém.

   A régua visual é a da própria seção: nenhuma cor nova, nenhum token
   novo. O selo usa o leaf green como ACENTO (§5 — nunca preenchimento
   grande), e o ritmo vertical repete o `clamp(20px,2.2vw,28px)` que
   `.plan-topics` e `.plan-price` já usam, para o cartão não mudar de
   respiração quando o preço voltar. */

/* fora do pré-lançamento os blocos de estado não existem */
.plan-soon,.sm-soon,.sm-offer-soon{display:none}

/* o que sai de cena: preço, seletor de cobrança, CTA de compra e a linha de
   garantia (ela fala de "após a compra" — sem compra, é promessa sem objeto).
   O CTA continua no DOM porque é ele que `setBillingPeriod` encontra para
   gravar o href quando as vendas abrirem; aqui ele é invisível E sem href.

   O seletor do CTA é `[data-checkout]`, o atributo que identifica um botão
   de COMPRA, e não `.plan-card--completo .plan-cta--solid`, que era o que
   estava aqui. Aquela versão descrevia a aparência do botão, não o papel
   dele: quando o CTA da lista de espera entrou no mesmo cartão com a mesma
   classe de botão sólido, ele nasceu `display:none` junto — o cartão do
   Completo ficava com a legenda "Sem cobrança..." e nenhum botão acima
   dela, sem erro nenhum no console. */
.pcc-prelaunch .plan-billing,
.pcc-prelaunch .plan-price,
.pcc-prelaunch .plan-cta[data-checkout],
.pcc-prelaunch .plan-reassure{display:none}

/* ---- o bloco de estado, no lugar onde o preço estava ---- */
.pcc-prelaunch .plan-soon{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:clamp(20px,2.2vw,28px) 0 0}
/* dentro do cartão da solução ele vem DEPOIS dos chips de tema, que já
   gastaram o respiro de cima: mesmo tratamento do `.plan-billing + .plan-price`. */
.pcc-prelaunch .plan-topics + .plan-soon{margin-top:16px}

.plan-soon-badge{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:var(--radius-pill);border:1px solid rgba(110,143,46,0.42);background:rgba(139,179,60,0.13);font-weight:700;font-size:11.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--green-700)}
/* o ponto é o mesmo vocabulário do `.eyebrow-dot` e do `.plan-live-dot`:
   acento pequeno, sem animação — pulsar aqui seria urgência fabricada (§2). */
.plan-soon-dot{width:6px;height:6px;border-radius:50%;background:var(--green-500)}
.plan-soon-text{font-weight:400;font-size:var(--caption);line-height:1.5;color:var(--ink-600);text-wrap:pretty}

/* ---- a garantia desta fase, uma linha só, embaixo da grade ----
   Vive fora dos cartões porque vale para as DUAS portas: nenhuma cobra
   nada agora. Dentro deles a mesma frase aparecia duas vezes, lado a lado
   (era a nota da lista de espera, impressa em cada slot), mais uma terceira
   no bloco de estado do Completo.

   Peso de legenda, não de parágrafo: é menor e mais apagada que a
   `.pricing-support` do topo, senão viraria uma segunda linha de apoio da
   seção — e ela fecha a grade, não a introduz. Centralizada porque o eixo
   da seção é central (intro, faixa de entregas e strip já são). */
.pricing-note{display:none}
.pcc-prelaunch .pricing-note{display:block;max-width:46ch;margin:clamp(24px,2.2vw,28px) auto 0;font-weight:400;font-size:13.5px;line-height:1.5;text-align:center;color:rgba(238,246,247,0.62);text-wrap:pretty}
/* entra junto dos cartões, logo depois do Completo (400ms): é a legenda
   deles, e chegar antes faria a garantia aparecer sobre um cartão que
   ainda não existe na tela. */
.js-anim .section-pricing .pricing-note[data-reveal]{transition-delay:470ms}

/* ---- slot da lista de espera (etapa 2) ----
   `:empty` é o que faz o slot não custar espaço enquanto a captação não
   existe: sem isso o `gap:14px` do `.plan-actions` abriria um vão sob o
   botão e o cartão pareceria ter perdido um elemento. */
.plan-waitlist{display:flex;flex-direction:column;gap:10px}
.plan-waitlist:empty{display:none}
.plan-cta--waitlist{width:100%}
.plan-waitlist-note{margin:0;font-weight:400;font-size:12.5px;line-height:1.45;text-align:center;color:var(--ink-400);text-wrap:pretty}

/* ============================================================
   PRÉ-LANÇAMENTO — modal de soluções
   ============================================================
   Os temas continuam inteiros (foto, situações, o que se aprende,
   materiais): o que sai é só preço e compra. O modal é hoje a única
   demonstração de profundidade do conteúdo, e esvaziá-lo tiraria da página
   justamente o que ela tem para mostrar antes de vender. */

/* lista de temas: o rodapé do cartão continua existindo (é ele que alinha a
   seta e mantém os dois cartões parecendo um par), com o estado no lugar do
   valor — em peso de legenda, não de preço. */
.sm-opt-price--soon{font-weight:700;font-size:12px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--green-700)}

/* faixa de oferta (só no telefone, logo abaixo do hero): uma coluna só, já
   que não há mais CTA ao lado do preço. O `.sm-offer` base é display:none e
   só vira grid dentro do @media de 640px, por isso a sobrescrita mora lá. */
.pcc-prelaunch .sm-offer-soon{display:flex;flex-direction:column;gap:7px}
.sm-offer-soon-badge{align-self:flex-start;display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--radius-pill);border:1px solid rgba(110,143,46,0.42);background:rgba(139,179,60,0.14);font-weight:700;font-size:10.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--green-700)}
.sm-offer-soon-text{font-weight:400;font-size:13px;line-height:1.5;color:var(--ink-600);text-wrap:pretty}

/* cartão de compra: perde a lavagem verde e o anel leaf green do `.sm-buy`,
   que são a gramática de COMPRA. Sem venda ele é informativo, então volta
   para a superfície e a borda neutras dos outros cartões do painel. */
.pcc-prelaunch .sm-buy--soon{border-color:var(--sm-border);background:var(--sm-card);box-shadow:var(--sm-card-shadow)}
.pcc-prelaunch .sm-soon{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:0 0 16px}
.sm-soon-badge{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--radius-pill);border:1px solid rgba(110,143,46,0.42);background:rgba(139,179,60,0.14);font-weight:700;font-size:10.5px;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--green-700)}
.sm-soon-title{font-weight:700;font-size:15px;line-height:1.35;letter-spacing:-0.01em;color:var(--teal-900);text-wrap:pretty}
.sm-soon-text{font-weight:400;font-size:13px;line-height:1.5;color:var(--ink-600);text-wrap:pretty}

@media (max-width:640px){
  /* a faixa base é grid 1fr/auto para acomodar preço + CTA lado a lado; sem
     CTA ela passa a ter uma coluna só, senão o texto ficaria confinado a
     metade da largura. */
  .pcc-prelaunch .sm-offer--soon{grid-template-columns:minmax(0,1fr)}
}

/* Com o CTA de compra e a linha de garantia fora de cena, o `.plan-actions`
   do Completo fica vazio — e um flex vazio ainda carrega o `padding-top` que
   separava o botão da lista, o que deixa o cartão terminando num vão de 22px
   que não separa nada. Quando a lista de espera entrar (slot preenchido) o
   `:has` deixa de casar e o respiro volta sozinho, sem nada a desfazer aqui.
   Em navegador sem `:has` a regra é ignorada e o vão apenas permanece — o
   pior caso é o estado atual, nunca um layout quebrado. */
.pcc-prelaunch .plan-card--completo .plan-actions:not(:has(.plan-waitlist > *)){padding-top:0}