/* ==========================================================================
   O Caminho da Mente Serena — v6
   Linhagem: editorial sobre grade suíça. Escala tipográfica modular 1.333.
   Paleta única: navy #020617, papel #f9fafb, areia #f4efe6, laranja #f97316.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* cor */
  --ink:#020617;
  --ink-2:#0a1226;
  --ink-3:#16223d;
  --paper:#f9fafb;
  --sand:#ece5d8;
  --sand-rgb:236 229 216;
  --accent:#f97316;         /* ação: superfície */
  --accent-hover:#ea580c;
  --accent-light:#fdba74;   /* laranja de TEXTO sobre fundo escuro */
  --on-light:#33415c;
  --on-dark:#cfd8e6;
  --rule-light:rgba(2,6,23,.14);
  --rule-dark:rgba(255,255,255,.18);

  /* escala modular 1.333 (quarta justa), base 17px */
  --step--1:clamp(0.78rem, 0.75rem + 0.14vw, 0.8rem);
  --step-0:1.0625rem;                                  /* piso duro de 17px, em toda largura */
  --step-1:clamp(1.12rem, 1.008rem + 0.458vw, 1.416rem);
  --step-2:clamp(1.34rem, 1.133rem + 0.848vw, 1.888rem);
  --step-3:clamp(1.62rem, 1.28rem + 1.45vw, 2.517rem);
  --step-4:clamp(1.95rem, 1.38rem + 2.45vw, 3.355rem);
  --step-5:clamp(2.35rem, 1.44rem + 3.9vw, 4.473rem);
  --step-6:clamp(3.1rem, 1.55rem + 6.6vw, 5.963rem);

  /* medida */
  --shell:clamp(1120px, 68vw, 1280px);
  --gutter:clamp(20px, 4vw, 56px);
  --band:clamp(64px, 7vw, 132px);
  --radius:14px;

  --font-display:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:"Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:cubic-bezier(.22,.8,.3,1);
}

/* --- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--step-0);
  line-height:1.6;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0;line-height:1.08;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.shell{width:min(100% - var(--gutter)*2, var(--shell));margin-inline:auto}
.band{padding-block:var(--band)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:fixed;top:10px;left:10px;z-index:200;
  background:var(--accent);color:var(--ink);
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  padding:12px 18px;border-radius:10px;text-decoration:none;
  transform:translateY(-160%);transition:transform .18s var(--ease);
}
.skip-link:focus-visible{transform:translateY(0)}

:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
.on-dark :where(a,button,summary):focus-visible{outline-color:var(--accent-light)}

/* --- 3. Superfícies ------------------------------------------------------ */
.s-paper{background:var(--paper);color:var(--ink);border-top:1px solid var(--rule-light)}
.s-sand{background:var(--sand);color:var(--ink)}
.s-ink{background:var(--ink);color:#fff}
.s-ink p,.s-sand p,.s-paper p{color:inherit}
.s-ink .body,.s-ink li{color:var(--on-dark)}
.s-paper .body,.s-sand .body,.s-paper li,.s-sand li{color:var(--on-light)}

/* --- 4. Tipografia utilitária -------------------------------------------- */
.eyebrow{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);
  display:flex;align-items:center;gap:14px;
}
.s-ink .eyebrow{color:var(--accent-light)}
.eyebrow::before{content:"";flex:0 0 34px;height:2px;background:var(--accent)}
.eyebrow.is-plain::before{display:none}
.t-h2{font-size:var(--step-3);line-height:1.1}
.t-h3{font-size:var(--step-2);line-height:1.18}
.t-lead{font-family:var(--font-text);font-size:var(--step-1);line-height:1.45;font-weight:400}
.t-body{font-size:var(--step-0);line-height:1.62}

.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,4.5vw,64px)}
.section-head .t-h2{max-width:30ch}
.rule{height:1px;background:var(--rule-light);border:0;margin:0}
.s-ink .rule{background:var(--rule-dark)}

/* --- 5. Botões ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:15px 30px;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.95rem,.9rem + .2vw,1.06rem);
  line-height:1.2;letter-spacing:-.01em;text-align:center;text-decoration:none;
  border:0;border-radius:999px;cursor:pointer;
  transition:transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-primary{background:var(--accent);color:var(--ink);box-shadow:0 10px 26px -14px rgba(249,115,22,.9)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(234,88,12,.95)}
.btn-primary:active{transform:translateY(0)}
.btn-block{display:flex;width:100%}
.btn-sm{min-height:46px;padding:11px 22px;font-size:.92rem}

/* --- 6. Cabeçalho -------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:rgba(249,250,251,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--rule-light);
  transition:padding .25s var(--ease), background-color .25s var(--ease);
}
.site-header .shell{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.site-header.is-compact .shell{padding-block:8px}
.brand{
  font-family:var(--font-display);font-weight:600;font-size:clamp(.94rem,.86rem + .3vw,1.12rem);
  letter-spacing:-.015em;text-decoration:none;color:var(--ink);
  display:inline-flex;align-items:center;min-height:44px;
}
.brand strong{font-weight:700}
.brand span{color:var(--ink)}
@media (max-width:560px){
  .brand{font-size:1rem}
}

/* barra de progresso de leitura */
.progress{
  position:fixed;top:0;left:0;z-index:95;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--accent);
}

/* --- 7. Herói ------------------------------------------------------------ */
.hero{
  position:relative;
  isolation:isolate;
  background:var(--sand);
  padding-top:clamp(104px,11vw,150px);
  overflow:hidden;
  min-height:clamp(600px, 84svh, 940px);
  display:flex;flex-direction:column;justify-content:center;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;z-index:1;
  height:clamp(110px, 11vh, 190px);
  background:linear-gradient(to bottom,
    rgb(var(--sand-rgb) / 0) 0%,
    rgb(var(--sand-rgb) / .62) 14%,
    var(--sand) 26%,
    var(--sand) 100%);
  pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;gap:clamp(28px,4vw,72px);
  padding-bottom:clamp(56px,6vw,96px);
}
.hero-copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);
  max-width:min(100%, 34rem);
}
.hero h1{
  font-size:var(--step-5);line-height:.98;letter-spacing:-.035em;
  max-width:13ch;font-weight:600;
}
/* "Mente Serena" sem marrom: tinta navy (17,6 sobre areia), peso 700 contra 600
   da primeira linha, e o laranja da marca reduzido a preenchimento, como régua
   sob o texto. width:fit-content faz a régua medir a palavra, não a coluna. */
.hero h1 em{
  font-style:normal;display:block;width:fit-content;max-width:100%;
  color:var(--ink);font-weight:700;letter-spacing:-.042em;
  background:linear-gradient(to top, var(--accent) 0 .1em, transparent .1em);
  padding-bottom:.1em;
}
.hero-lead{font-size:var(--step-1);line-height:1.38;font-weight:700;max-width:30ch;color:var(--ink)}
.hero-pain{font-size:var(--step-0);line-height:1.6;max-width:44ch;color:var(--on-light)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:6px}

/* sangria total: a figura sai do fluxo da grade e vira o fundo da dobra.
   inset:0 resolve contra .hero, porque nem .shell nem .hero-grid posicionam. */
.hero-figure{
  position:absolute;inset:0;z-index:0;margin:0;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
  aspect-ratio:auto;
}
.hero-figure img{width:100%;height:100%;object-fit:cover;object-position:74% 38%}
.hero-figure::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,
      rgb(var(--sand-rgb) / .88) 0%,
      rgb(var(--sand-rgb) / .84) 34%,
      rgb(var(--sand-rgb) / .80) 50%,
      rgb(var(--sand-rgb) / .42) 62%,
      rgb(var(--sand-rgb) / .12) 74%,
      rgb(var(--sand-rgb) / 0)   86%),
    linear-gradient(180deg,
      rgb(var(--sand-rgb) / .52) 0%,
      rgb(var(--sand-rgb) / 0)   20%,
      rgb(var(--sand-rgb) / 0)   64%,
      rgb(var(--sand-rgb) / .80) 100%);
}
@media (min-width:901px) and (max-width:1365px){
  .hero-figure::after{
    background:
      linear-gradient(96deg,
        rgb(var(--sand-rgb) / .90) 0%,
        rgb(var(--sand-rgb) / .88) 40%,
        rgb(var(--sand-rgb) / .86) 60%,
        rgb(var(--sand-rgb) / .44) 72%,
        rgb(var(--sand-rgb) / .12) 84%,
        rgb(var(--sand-rgb) / 0)   94%),
      linear-gradient(180deg,
        rgb(var(--sand-rgb) / .52) 0%,
        rgb(var(--sand-rgb) / 0)   20%,
        rgb(var(--sand-rgb) / 0)   64%,
        rgb(var(--sand-rgb) / .80) 100%);
  }
}
@media (max-width:900px){
  .hero{padding-top:clamp(200px, 30svh, 330px);min-height:0}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero h1{max-width:16ch}
  .hero-figure img{object-position:70% 26%}
  .hero-figure::after{
    background:linear-gradient(180deg,
      rgb(var(--sand-rgb) / .34) 0%,
      rgb(var(--sand-rgb) / .10) 14%,
      rgb(var(--sand-rgb) / .20) 22%,
      rgb(var(--sand-rgb) / .94) 32%,
      rgb(var(--sand-rgb) / .99) 42%,
      rgb(var(--sand-rgb) / 1)   100%);
  }
}

/* --- 8. Pensamentos (forma própria 1) ------------------------------------ */
.thoughts{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.thoughts-media{position:absolute;inset:0;z-index:0}
.thoughts-media img{width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.thoughts-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(2,6,23,.92) 0%, rgba(2,6,23,.86) 34%, rgba(2,6,23,.66) 56%, rgba(2,6,23,.34) 78%, rgba(2,6,23,.24) 100%),
    linear-gradient(180deg, rgba(2,6,23,.55) 0%, rgba(2,6,23,0) 26%, rgba(2,6,23,.55) 100%);
}
.thoughts .shell{position:relative;z-index:1}
.thoughts-inner{max-width:min(100%, 40rem);display:flex;flex-direction:column;gap:clamp(26px,3vw,40px)}
.thoughts h2{font-size:var(--step-3);max-width:19ch}
.thought-list{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);border-left:2px solid rgba(249,115,22,.4);padding-left:clamp(18px,2.2vw,30px)}
.thought{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--step-2);line-height:1.22;letter-spacing:-.02em;
  color:#fff;position:relative;
}
.thought::before{
  content:"";position:absolute;left:calc(-1 * clamp(18px,2.2vw,30px) - 2px);top:.58em;
  width:clamp(10px,1.4vw,18px);height:2px;background:var(--accent);
}
.thought:nth-child(2n){margin-left:clamp(0px,2.4vw,44px)}
.thought:nth-child(3n){margin-left:clamp(0px,1.2vw,22px)}
.thoughts-close{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--rule-dark);padding-top:clamp(20px,2.4vw,30px)}
.thoughts-close p{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);line-height:1.3;max-width:34ch}
.thoughts-close p:first-child{color:var(--accent-light)}
@media (max-width:860px){
  .thoughts{background:var(--ink)}
  .thoughts-media{position:relative;inset:auto;height:clamp(230px,52vw,340px)}
  .thoughts-media::after{background:linear-gradient(180deg, rgba(2,6,23,.3) 0%, rgba(2,6,23,.15) 45%, rgba(2,6,23,.98) 100%)}
  .thoughts .band{padding-top:clamp(36px,7vw,56px)}
  .thought:nth-child(n){margin-left:0}
}

/* --- 9. Depoimentos (forma própria 2: colunas editoriais, sem cartão) ---- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.quote{
  padding:clamp(24px,2.6vw,38px) clamp(20px,2.4vw,34px);
  border-left:1px solid var(--rule-light);
  display:flex;flex-direction:column;gap:18px;
}
.quote:first-child{border-left:0;padding-left:0}
.quote:last-child{padding-right:0}
.quote-mark{font-family:var(--font-display);font-weight:700;font-size:var(--step-4);line-height:.7;color:var(--ink);height:.5em}
.quote-text{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);line-height:1.34;letter-spacing:-.015em;color:var(--ink);max-width:44ch}
.quote-who{display:flex;align-items:baseline;gap:10px;font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-display);font-weight:600;color:var(--on-light);margin-top:auto}
.quote-who b{color:var(--ink);letter-spacing:.06em}
@media (max-width:860px){
  .quotes{grid-template-columns:1fr}
  .quote{border-left:0;border-top:1px solid var(--rule-light);padding-inline:0}
  .quote:first-child{border-top:0}
}

/* --- 10. Sistema nervoso (coluna editorial) ------------------------------ */
.nerve{position:relative;overflow:hidden}
.nerve-inner{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,34px);max-width:52ch}
.nerve h2{font-size:var(--step-4);line-height:1.02;letter-spacing:-.03em;max-width:17ch}
.nerve .t-lead{max-width:48ch}
.nerve-callout{
  margin-top:8px;padding:clamp(24px,2.6vw,36px);
  background:var(--ink);color:#fff;border-radius:var(--radius);
  display:flex;flex-direction:column;gap:14px;
  border-left:6px solid var(--accent);
}
.nerve-callout p{font-size:var(--step-1);line-height:1.42;color:var(--on-dark)}
.nerve-callout p strong{color:#fff}
.nerve-mark{
  position:absolute;right:calc(var(--gutter) * -0.2);top:50%;transform:translateY(-50%);
  width:clamp(240px,30vw,460px);opacity:.075;color:var(--ink);pointer-events:none;
}
@media (max-width:900px){.nerve-mark{display:none}}

/* --- 11. Protocolo ------------------------------------------------------- */
.proto-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(32px,4vw,72px);align-items:center}
.proto-copy{display:flex;flex-direction:column;gap:20px}
.pain-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.pain-list li{display:flex;gap:14px;align-items:flex-start;font-size:var(--step-0);line-height:1.5}
.pain-list li::before{content:"";flex:0 0 10px;height:10px;margin-top:.52em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(249,115,22,.16)}
.organize{margin-top:12px;padding-top:24px;border-top:2px solid var(--ink)}
.organize-title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);display:block;margin-bottom:14px}
.check-list{display:flex;flex-direction:column;gap:12px}
.check-list li{display:flex;gap:12px;align-items:center;font-family:var(--font-display);font-weight:600;font-size:var(--step-0);color:var(--ink)}
.check{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center}
.check svg{width:15px;height:15px}
.s-ink .check{background:var(--accent);color:var(--ink)}

.device{
  position:relative;margin:0;padding:clamp(22px,3vw,48px);
  background:var(--ink);border-radius:var(--radius);
  box-shadow:0 44px 90px -56px rgba(2,6,23,.75);
  overflow:hidden;
}
.device::before{
  content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:86%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(249,115,22,.34) 0%, rgba(249,115,22,.08) 45%, rgba(249,115,22,0) 68%);
}
.device img{position:relative;width:100%;filter:saturate(.86) contrast(1.03) brightness(1.02)}
.device figcaption{
  position:relative;margin-top:14px;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-light);
}
@media (max-width:900px){.proto-grid{grid-template-columns:1fr}}

/* --- 12. Inventário (forma própria 3: linhas numeradas, sem cartão) ------ */
.stack{border-top:2px solid var(--ink)}
.stack-row{
  display:grid;grid-template-columns:minmax(72px,.5fr) minmax(0,1.5fr) minmax(0,2fr);
  gap:clamp(16px,2.4vw,40px);align-items:start;
  padding-block:clamp(26px,3vw,40px);
  border-bottom:1px solid var(--rule-light);
}
.stack-num{
  font-family:var(--font-display);font-weight:700;font-size:var(--step-3);line-height:1;
  color:var(--ink);-webkit-text-stroke:0;
  letter-spacing:-.04em;
}
.stack-row h3{font-size:var(--step-2);line-height:1.14;max-width:16ch}
.stack-row p{font-size:var(--step-0);line-height:1.6;color:var(--on-light);max-width:56ch}
@media (max-width:860px){
  .stack-row{grid-template-columns:auto 1fr;gap:12px 18px}
  .stack-row h3{grid-column:2}
  .stack-row p{grid-column:1 / -1}
}

/* --- 13. Especialista ---------------------------------------------------- */
.expert h2{font-size:var(--step-4);line-height:1.04;max-width:18ch}
.expert-sub{font-family:var(--font-display);font-weight:600;font-size:var(--step-2);line-height:1.22;color:var(--accent-light);max-width:26ch;margin-top:18px}
.expert-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,4vw,72px);align-items:start;margin-top:clamp(38px,4vw,60px)}
.expert-figure{position:relative;margin:0 0 26px;border-radius:var(--radius);overflow:hidden;isolation:isolate;aspect-ratio:3/2}
.expert-figure img{width:100%;height:100%;object-fit:cover}
.expert-figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,#0b1a3a,#07142c);
  mix-blend-mode:color;opacity:.72;
}
.expert-figure::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top, rgba(2,6,23,.6), rgba(2,6,23,0) 48%);
}
.credentials{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.credentials li{display:flex;gap:12px;align-items:flex-start;font-size:var(--step-0);line-height:1.45;color:var(--on-dark)}
.credentials li::before{content:"";flex:0 0 8px;height:8px;margin-top:.55em;background:var(--accent);transform:rotate(45deg)}
.results{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule-dark)}
.results-title{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-light);margin-bottom:18px}
.results-list{display:flex;flex-direction:column;gap:16px}
.results-list li{display:flex;gap:14px;align-items:baseline;font-size:var(--step-0);line-height:1.4;color:var(--on-dark)}
.results-hl{font-family:var(--font-display);font-weight:700;font-size:var(--step-2);color:#fff;flex:0 0 auto;letter-spacing:-.02em}
.expert-body{display:flex;flex-direction:column;gap:18px}
.expert-body .t-lead{color:var(--on-dark);max-width:58ch}
.expert-body .t-lead strong{color:#fff}
.expert-kicker{font-family:var(--font-display);font-weight:600;font-size:var(--step-2);line-height:1.22;color:#fff;max-width:28ch}
.expert-kicker.is-accent{color:var(--accent-light)}
@media (max-width:900px){.expert-grid{grid-template-columns:1fr}}

/* --- 14. Benefícios (lista em duas colunas, sem cartão) ------------------ */
.benefits{columns:2;column-gap:clamp(28px,4vw,72px);column-rule:1px solid var(--rule-light)}
.benefits li{break-inside:avoid;display:flex;gap:14px;align-items:flex-start;padding-block:16px;border-bottom:1px solid var(--rule-light)}
.benefits li p{font-size:var(--step-1);line-height:1.34;font-family:var(--font-display);font-weight:600;color:var(--ink)}
@media (max-width:760px){.benefits{columns:1}}

/* --- 15. Oferta ---------------------------------------------------------- */
.offer{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.offer::before{
  content:"";position:absolute;left:50%;top:-10%;transform:translateX(-50%);
  width:min(1200px,120%);aspect-ratio:2/1;
  background:radial-gradient(ellipse at center, rgba(249,115,22,.2) 0%, rgba(249,115,22,0) 62%);
  pointer-events:none;
}
.offer .shell{position:relative;z-index:1}
.offer h2{font-size:var(--step-2);line-height:1.2;max-width:26ch}
.offer h2 small{display:block;font-size:var(--step-0);font-family:var(--font-text);font-weight:400;color:var(--on-dark);margin-top:8px;letter-spacing:0}
.offer-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3vw,52px);margin-bottom:clamp(40px,5vw,72px)}
.ledger{display:flex;flex-direction:column}
.ledger-title{font-family:var(--font-display);font-weight:600;font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-light);margin-bottom:18px}
.ledger-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding-block:14px;border-bottom:1px solid var(--rule-dark);font-size:var(--step-0);color:var(--on-dark)}
.ledger-row .v{font-family:var(--font-display);font-weight:600;color:#fff;white-space:nowrap}
.ledger-row.is-total{border-bottom:0;border-top:2px solid var(--accent);margin-top:6px;padding-top:18px}
.ledger-row.is-total span{font-family:var(--font-display);font-weight:700;color:#fff;font-size:var(--step-1)}
.ledger-note{margin-top:20px;font-size:var(--step-0);line-height:1.55;color:var(--on-dark)}
.ledger-note strong{color:#fff}
.ledger-amount{font-family:var(--font-display);font-weight:700;font-size:var(--step-2);color:var(--accent-light);display:block;margin-bottom:8px;letter-spacing:-.02em}
@media (max-width:860px){.offer-columns{grid-template-columns:1fr}}

.pricecard{
  background:linear-gradient(170deg, #0d1834 0%, #060d1f 100%);
  border:1px solid rgba(249,115,22,.34);
  border-radius:calc(var(--radius) + 6px);
  padding:clamp(28px,4vw,56px);
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
  box-shadow:0 50px 110px -60px rgba(249,115,22,.5);
}
.price-line{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);color:var(--on-dark);line-height:1.3}
.price-strike{text-decoration:line-through;text-decoration-thickness:2px;color:#94a3b8;font-size:var(--step-0);white-space:nowrap}
.price-big{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--step-6);line-height:.9;letter-spacing:-.045em;color:var(--accent);
  display:block;
}
.installments{font-size:var(--step--1);color:var(--on-dark)}
.installments strong{color:#fff;font-family:var(--font-display)}
.offer-features{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:2px}
.offer-features span{display:inline-flex;align-items:center;gap:8px;font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-display);font-weight:600;color:var(--on-dark)}
.offer-features svg{width:14px;height:14px;color:var(--accent)}
.pricecard .btn{margin-top:10px;max-width:520px}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-top:6px}
.badges span{display:inline-flex;align-items:center;gap:8px;font-size:var(--step--1);color:var(--on-dark)}
.badges svg{width:16px;height:16px;color:var(--accent-light)}

/* --- 16. Passos (forma própria 4: trilha horizontal) --------------------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,46px);position:relative}
.steps::before{
  content:"";position:absolute;left:0;right:0;top:27px;height:2px;
  background:repeating-linear-gradient(to right, var(--accent) 0 12px, transparent 12px 22px);
  opacity:.7;
}
.step{position:relative;display:flex;flex-direction:column;gap:18px;background:transparent}
.step-num{
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:var(--ink);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:var(--step-1);
  position:relative;z-index:1;box-shadow:0 0 0 10px var(--sand);
}
.step p{font-size:var(--step-1);line-height:1.38;font-family:var(--font-display);font-weight:600;max-width:26ch}
@media (max-width:760px){
  .steps{grid-template-columns:1fr;gap:26px}
  .steps::before{left:27px;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(to bottom, var(--accent) 0 12px, transparent 12px 22px)}
  .step{flex-direction:row;align-items:flex-start;gap:20px}
  .step-num{flex:0 0 56px}
}

/* --- 17. Escolha (duas colunas contrastadas) ----------------------------- */
.choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.choice-col{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:22px}
.choice-col.is-bad{background:#eef0f4;border-radius:var(--radius) 0 0 var(--radius)}
.choice-col.is-good{background:var(--ink);color:#fff;border-radius:0 var(--radius) var(--radius) 0}
.choice-col h3{font-size:var(--step-2);line-height:1.18;max-width:18ch}
.choice-col.is-bad h3{color:#5b6779}
.choice-list{display:flex;flex-direction:column;gap:16px}
.choice-list li{display:flex;gap:14px;align-items:flex-start;font-size:var(--step-0);line-height:1.5}
.choice-col.is-bad li{color:#5b6779}
.choice-col.is-good li{color:var(--on-dark)}
.ci{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-top:.1em}
.ci svg{width:14px;height:14px}
.is-bad .ci{background:#dadee6;color:#6b7686}
.is-good .ci{background:var(--accent);color:var(--ink)}
.choice-cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,52px)}
@media (max-width:760px){
  .choice{grid-template-columns:1fr}
  .choice-col.is-bad{border-radius:var(--radius) var(--radius) 0 0}
  .choice-col.is-good{border-radius:0 0 var(--radius) var(--radius)}
}

/* --- 18. FAQ (hairlines, sem cartão) ------------------------------------- */
.faq{border-top:2px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--rule-light)}
.faq-summary{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding-block:22px;min-height:44px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:var(--step-1);line-height:1.3;
  color:var(--ink);
}
.faq-summary::-webkit-details-marker{display:none}
.faq-chev{flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);color:var(--ink);display:grid;place-items:center;transition:transform .25s var(--ease), background-color .25s var(--ease)}
.faq-chev svg{width:16px;height:16px}
.faq-item[open] .faq-chev{transform:rotate(180deg);background:var(--accent);border-color:var(--accent);color:var(--ink)}
.faq-content{padding-bottom:26px;font-size:var(--step-0);line-height:1.62;color:var(--on-light);max-width:70ch}

/* --- 19. Aviso + rodapé -------------------------------------------------- */
.legalband{background:var(--ink);color:#fff}
.notice{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1.6fr);gap:clamp(16px,3vw,48px);align-items:start}
.notice h2{font-size:var(--step-2);color:var(--accent-light);max-width:12ch}
.notice p{font-size:var(--step-0);line-height:1.65;color:var(--on-dark);max-width:76ch}
@media (max-width:760px){.notice{grid-template-columns:1fr;gap:14px}}

.site-footer{background:var(--ink);color:var(--on-dark);border-top:1px solid var(--rule-dark)}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px;padding-block:28px;font-size:var(--step--1);letter-spacing:.04em}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;color:#fff;text-decoration:none;border-bottom:1px solid transparent}
.footer-links a:hover{border-bottom-color:var(--accent)}

/* --- 20. Barra móvel de CTA --------------------------------------------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:92;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(2,6,23,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--rule-dark);
  display:none;
}
.mobile-cta .btn{min-height:52px;width:100%}
@media (max-width:760px){
  .mobile-cta{display:block;transform:translateY(110%);transition:transform .3s var(--ease)}
  .mobile-cta.is-on{transform:translateY(0)}
  body{padding-bottom:0}
}

/* --- 21. Páginas legais -------------------------------------------------- */
.legal-hero{background:var(--ink);color:#fff;padding-top:clamp(110px,12vw,150px);padding-bottom:clamp(44px,5vw,72px)}
.legal-hero h1{font-size:var(--step-4);margin-top:16px}
.legal-body{padding-block:clamp(48px,6vw,88px)}
.legal-body p{margin-bottom:22px;font-size:var(--step-0);line-height:1.68;color:var(--on-light)}
.legal-body p b{color:var(--ink)}
.legal-back{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:20px;
  font-family:var(--font-display);font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;
}
.legal-back svg{width:20px;height:20px}
.legal-back:hover{text-decoration:underline;text-underline-offset:4px}
#loading-msg-novo{display:none;margin-top:12px;font-size:.9rem;color:var(--on-light)}

/* --- 23. Movimento ------------------------------------------------------- */
/* Sem JS a página nasce inteira visível; o estado escondido só existe com .js */
.js .reveal{opacity:0;transform:translateY(18px);animation:reveal-net 0s 4.5s forwards}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .68s var(--ease), transform .68s var(--ease)}
.js .stagger>*{opacity:0;transform:translateY(16px);animation:reveal-net 0s 4.5s forwards}
.js .stagger.is-in>*{opacity:1;transform:none;transition:opacity .6s var(--ease), transform .6s var(--ease);transition-delay:calc(var(--i, 0) * 90ms)}
@keyframes reveal-net{to{opacity:1;transform:none}}

.js .thoughts-media img{will-change:transform}

@media print{
  .js .reveal,.js .stagger>*,.reveal,.stagger>*{opacity:1!important;transform:none!important;animation:none!important}
  .site-header,.mobile-cta,.progress{display:none!important}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .stagger>*{opacity:1!important;transform:none!important}
  .btn-primary:hover{transform:none}
  .mobile-cta{transform:translateY(0)}
  .progress{display:none}
}

.legal-body h2{font-size:var(--step-2);margin:40px 0 16px;letter-spacing:-.02em}
.legal-body{max-width:none}

/* marca de abertura de seção: régua gráfica, sem texto */
.eyebrow-rule{width:64px;height:3px;border:0;margin:0;background:var(--accent);border-radius:2px}
.s-ink .eyebrow-rule,.offer .eyebrow-rule,.on-dark .eyebrow-rule{background:var(--accent)}
.section-head>.eyebrow-rule+*{margin-top:-4px}

/* correções de leitura medidas no renderizado */
.brand span{display:inline}
.brand b{color:var(--ink);font-weight:700;box-shadow:inset 0 -.14em 0 var(--accent)}
.eyebrow{align-items:flex-start;line-height:1.5}
.eyebrow::before{margin-top:.62em}
@media (max-width:640px){
  .eyebrow::before{display:none}
  .eyebrow{gap:0}
}

/* ==========================================================================
   Ajustes de composição medidos no renderizado (rodada 1)
   ========================================================================== */

/* Manchete de seção como elemento gráfico, não rótulo tímido no canto */
.t-h2{font-size:var(--step-4);line-height:1.04;letter-spacing:-.03em}
.section-head .t-h2{max-width:32ch}
.section-head{gap:22px}

/* Sistema nervoso: duas colunas, o argumento à esquerda e a virada à direita */
.nerve-inner{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,4vw,72px);align-items:start}
.nerve-head{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px)}
.nerve h2{font-size:var(--step-4);max-width:15ch}
.nerve .t-lead{max-width:40ch}
.nerve-callout{margin-top:0;align-self:stretch;justify-content:center}
.nerve-mark{right:calc(var(--gutter) * -0.6);top:auto;bottom:-6%;transform:none;width:clamp(200px,20vw,320px);opacity:.05}
@media (max-width:900px){
  .nerve-inner{grid-template-columns:1fr;gap:30px}
  .nerve h2{max-width:18ch}
}

/* Protocolo: o produto ganha o peso que a promessa pede */
.proto-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.26fr)}
.device{padding:clamp(16px,2vw,30px)}
.device::before{width:96%;top:46%}

/* Inventário: o número é marcador de leitura, não enfeite miúdo */
.stack-row{grid-template-columns:minmax(52px,.3fr) minmax(0,1.35fr) minmax(0,2.15fr)}
.stack-num{font-size:var(--step-4);-webkit-text-stroke-width:2px}

/* Especialista: a luz roxa do estúdio entra na paleta da página */
.expert-figure{aspect-ratio:4/3}
.expert-figure img{object-position:52% 28%;filter:saturate(.72) contrast(1.04)}
.expert-figure::after{background:linear-gradient(155deg,#12224a,#050f24);mix-blend-mode:color;opacity:.9}
.expert-sub{color:var(--accent-light)}

/* FAQ: a resposta aberta respira */
.faq-item[open] .faq-summary{padding-bottom:14px}
.faq-content{padding-bottom:30px}

/* ==========================================================================
   Ajustes de composição medidos no renderizado (rodada 2)
   ========================================================================== */

/* o marcador 01–04 perdia de .stack-row p por especificidade */
.stack-row p.stack-num{
  font-size:var(--step-4);line-height:1;max-width:none;
  color:var(--ink);-webkit-text-stroke:0;
  letter-spacing:-.04em;
}

/* manchete que divide a linha com uma imagem fica um degrau abaixo da que
   abre a seção sozinha: a imagem é a outra metade da hierarquia */
.proto-copy .t-h2{font-size:var(--step-3);max-width:20ch}

/* frase inteira não vira caixa-alta rastreada */
.ledger-title,.results-title{
  text-transform:none;letter-spacing:0;font-size:var(--step-0);line-height:1.45;
  font-weight:600;max-width:46ch;
}
.ledger-title{min-height:3.2em}
@media (max-width:860px){.ledger-title{min-height:0}}

/* ==========================================================================
   Correções do que a medição pegou (rodada 3)
   ========================================================================== */

/* 01–04: número vazado media contraste 1:1 no pixel. Vira tinta cheia. */
.stack-row p.stack-num{color:var(--ink);-webkit-text-stroke:0}

/* a marca de cérebro cruzava a borda da viewport (ficava clipada, mas cruzava) */
.nerve-mark{right:0}

/* a foto dos pensamentos ganha folga vertical em vez de escala horizontal:
   o parallax passa a caber dentro da viewport em toda largura */
.thoughts-media{overflow:hidden}
.thoughts-media img{position:absolute;left:0;top:-7%;width:100%;height:114%}
@media (max-width:860px){
  .thoughts-media img{position:relative;top:0;height:100%}
}

/* olho de seção sobre fundo escuro usa o laranja claro */
.on-dark .eyebrow,.legal-hero .eyebrow,.offer .eyebrow{color:var(--accent-light)}

/* ==========================================================================
   Rodada 4: as regras acrescentadas acima venciam por ordem de cascata as
   media queries originais. Os empilhamentos móveis são redeclarados aqui,
   depois de tudo, para que a coluna única volte a valer.
   ========================================================================== */
@media (max-width:900px){
  .proto-grid{grid-template-columns:1fr}
  .nerve-inner{grid-template-columns:1fr}
  .expert-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .stack-row{grid-template-columns:auto 1fr;gap:12px 18px}
  .stack-row h3{grid-column:2}
  .stack-row p{grid-column:1 / -1}
  .stack-row p.stack-num{grid-column:1;font-size:var(--step-2)}
  .quotes{grid-template-columns:1fr}
}
@media (max-width:760px){
  .steps{grid-template-columns:1fr}
  .choice{grid-template-columns:1fr}
  .benefits{columns:1}
}

/* o retrato do especialista corta 3:2 em 4:3; o sizes abaixo já compensa */

/* ==========================================================================
   Rodada 5: diagramação do especialista e da oferta.
   Especialista: duas faixas em vez de duas colunas, a sobra vertical vira
   respiro tipográfico dentro da biografia, e os três números de prova viram
   faixa de fechamento em largura inteira.
   Oferta: escada de três degraus na ancoragem, e o laranja fica reservado
   ao número que a pessoa paga.
   ========================================================================== */

/* --- 5.1 Cabeçalho do especialista na mesma grade do corpo --------------- */
@media (min-width:901px){
  .expert > .shell > .reveal:first-child{
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    column-gap:clamp(30px,4vw,72px);
    align-items:end;
  }
  .expert > .shell > .reveal > .eyebrow-rule{grid-column:1 / -1}
  .expert > .shell > .reveal > h2{grid-column:1;margin-top:18px}
  .expert-sub{grid-column:2;margin-top:0;max-width:34ch;align-self:end}
}

/* --- 5.2 A biografia estica e absorve a sobra ---------------------------- */
@media (min-width:901px){
  .expert-grid{
    column-gap:clamp(30px,4vw,72px);
    row-gap:clamp(44px,5vw,80px);
  }
  .expert-body{
    grid-column:2;grid-row:1;
    align-self:stretch;
    justify-content:space-between;
    gap:clamp(22px,2.2vw,34px);
  }
  .expert-body .t-lead{max-width:62ch}
  .expert-body > .t-lead:first-of-type{color:#fff}
}

/* --- 5.3 Retrato ---------------------------------------------------------
   O véu do retrato fica em .72, medido: baixá-lo para .5 devolve 31,9% de
   pixel violeta ao quadro, contra 1% em .72. O roxo da luz do estúdio é a
   paleta estranha que a reconstrução eliminou, e ele volta junto com a foto.
   O que muda aqui é só a régua laranja, eco da régua sob "Mente Serena". */
.expert-figure img{filter:saturate(.92) contrast(1.05)}
.expert-figure{border-bottom:4px solid var(--accent)}

/* --- 5.4 Faixa de prova em largura inteira ------------------------------- */
@media (min-width:901px){
  .results{grid-column:1 / -1;grid-row:2}
}
.results{margin-top:0;padding-top:clamp(28px,3vw,42px)}
.results-title{margin-bottom:clamp(22px,2.4vw,32px)}
.results-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,56px);
}
.results-list li{flex-direction:column;align-items:flex-start;gap:12px}
.results-list li + li{
  border-left:1px solid var(--rule-dark);
  padding-left:clamp(20px,2vw,32px);
}
.results-hl{font-size:var(--step-4);line-height:1}
.results-list li > span:last-child{max-width:30ch}
.results-icon{display:block}
.results-icon svg{width:30px;height:30px;color:var(--accent-light)}

/* --- 5.5 Oferta: o título recupera a patente que tem --------------------- */
.offer h2{
  font-size:var(--step-3);
  line-height:1.06;
  letter-spacing:-.03em;
  max-width:20ch;
}
.offer h2 small{font-size:var(--step-1);margin-top:12px}

/* --- 5.6 As duas ancoragens viram comparação ----------------------------- */
.offer-columns{
  gap:clamp(36px,5vw,80px);
  margin-bottom:clamp(44px,5vw,76px);
}
@media (min-width:861px){
  .ledger + .ledger{position:relative}
  .ledger + .ledger::before{
    content:"";position:absolute;
    left:calc(clamp(36px,5vw,80px) / -2);
    top:0;bottom:0;width:1px;background:var(--rule-dark);
  }
}

/* --- 5.7 Degrau 1: o total do pacote ------------------------------------- */
.ledger-row.is-total{border-top:3px solid var(--accent);margin-top:10px;padding-top:22px}
.ledger-row.is-total span{font-size:var(--step-1)}

/* --- 5.8 Degrau 2: o custo da alternativa, em cinza-claro ---------------- */
.ledger-note{
  margin-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--rule-dark);
  padding-top:22px;
}
.ledger-amount{
  font-size:var(--step-3);
  color:var(--on-dark);
  line-height:1.12;
  margin-bottom:12px;
}

/* --- 5.9 Degrau 3: o cartão deixa de ser uma caixa de correio ------------ */
@media (min-width:941px){
  .pricecard{max-width:min(100%,880px);margin-inline:auto}
}
.pricecard{border:1.5px solid rgba(249,115,22,.55);gap:16px}
.pricecard .btn{max-width:560px}
.price-strike{font-size:var(--step-1)}

/* --- 5.10 Os três selos deixam de ser legenda ---------------------------- */
.offer-features{
  width:100%;
  justify-content:space-around;
  gap:12px 18px;
  margin-top:6px;
  border-block:1px solid var(--rule-dark);
  padding-block:18px;
}
.offer-features span{
  font-size:var(--step-0);
  text-transform:none;
  letter-spacing:0;
  color:#fff;
}
.offer-features svg{width:18px;height:18px}

/* --- 5.11 Móvel: a faixa e a escada se reorganizam ----------------------- */
@media (max-width:900px){
  .expert-body{align-self:auto;justify-content:flex-start}
  .results{grid-column:auto;grid-row:auto}
}
@media (max-width:760px){
  .results-list{grid-template-columns:1fr;gap:24px}
  .results-list li + li{
    border-left:0;padding-left:0;
    border-top:1px solid var(--rule-dark);padding-top:24px;
  }
}
/* na faixa intermediaria a curva do clamp aproxima os degraus 1 e 2 ate o
   empate (1,29x medido em 768). O degrau 2 sobe um passo enquanto as colunas
   ainda estao empilhadas, e a escada volta a subir. */
@media (max-width:900px){
  .ledger-amount{font-size:var(--step-4)}
}
@media (max-width:560px){
  /* o clamp que ficava aqui saiu na rodada 7: a funcao continua do
     .price-big cobre a faixa inteira sem degrau na fronteira de 560. */
  .offer-features{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px}
}

/* ==========================================================================
   Rodada 6: comportamento dos elementos.
   Diagnóstico que motivou este bloco: a página inteira tinha 4 regras de
   :hover, e duas delas nas páginas legais. Nada respondia ao cursor, e por
   isso a leitura parecia inerte mesmo com a revelação na rolagem ligada.
   Princípio: é uma página sobre respiração. O movimento é lento e curto,
   nunca elástico. Amplitude máxima de 6px, duração entre .3s e .8s.
   Tudo aqui é acréscimo: sem JS a página continua completa e legível, e
   com prefers-reduced-motion tudo isto é desligado no fim do arquivo.
   ========================================================================== */

/* --- 6.1 A régua laranja se desenha quando a seção entra ----------------- */
.js .reveal .eyebrow-rule,
.js .stagger .eyebrow-rule{transform:scaleX(0);transform-origin:0 50%}
.js .reveal.is-in .eyebrow-rule,
.js .stagger.is-in .eyebrow-rule{
  transform:scaleX(1);
  transition:transform .74s .12s var(--ease);
}

/* --- 6.2 Entrada com direção, em vez de tudo subindo igual ---------------
   A uniformidade era o que fazia 22 revelações parecerem uma só. Cada
   família de conteúdo entra pelo lado que corresponde ao papel dela. */
@media (min-width:901px){
  .js .expert-grid > aside{transform:translateY(18px) translateX(-16px)}
  .js .expert-grid > aside.is-in{transform:none}
  .js .expert-body{transform:translateY(18px) translateX(16px)}
  .js .expert-body.is-in{transform:none}
  .js .thought-list.stagger > *{transform:translateY(14px) translateX(-18px)}
  .js .thought-list.stagger.is-in > *{transform:none}
  .js .nerve-callout{transform:translateY(22px) scale(.985)}
  .js .nerve-callout.is-in{transform:none}
}
.js .pricecard{transform:translateY(22px) scale(.982)}
.js .pricecard.is-in{transform:none;transition:opacity .8s var(--ease), transform .8s var(--ease)}

/* --- 6.3 Resposta ao cursor -----------------------------------------------
   Guardado em (hover:hover) para que o toque no celular não deixe estado
   preso depois do dedo sair. */
@media (hover:hover) and (pointer:fine){

  /* as seis frases de dor: o traço cresce e a frase avança um passo */
  .thought{transition:transform .34s var(--ease), color .34s var(--ease)}
  .thought::before{transition:width .34s var(--ease), background-color .34s var(--ease)}
  .thought:hover{transform:translateX(6px)}
  .thought:hover::before{width:clamp(18px,2.6vw,30px);background:var(--accent-light)}

  /* depoimentos: a coluna ganha fundo e as aspas acendem */
  .quote{transition:background-color .38s var(--ease), transform .38s var(--ease)}
  .quote-mark{transition:color .38s var(--ease)}
  .quote:hover{transform:translateY(-3px)}

  /* inventário numerado: o número acende */
  .stack-row{transition:background-color .34s var(--ease)}
  .stack-num{transition:color .34s var(--ease), transform .34s var(--ease)}
  .stack-row:hover{background:rgba(249,115,22,.05)}
  .stack-row:hover .stack-num{color:var(--accent);transform:translateX(4px)}

  /* benefícios: o visto cresce e a linha avança */
  .benefits li{transition:transform .3s var(--ease), border-color .3s var(--ease)}
  .benefits li .check{transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
  .benefits li:hover{transform:translateX(5px);border-bottom-color:var(--accent)}
  .benefits li:hover .check{transform:scale(1.14);box-shadow:0 0 0 6px rgba(249,115,22,.16)}

  /* os três passos: o disco cresce */
  .step-num{transition:transform .34s var(--ease), box-shadow .34s var(--ease)}
  .step:hover .step-num{transform:scale(1.08);box-shadow:0 0 0 10px var(--sand), 0 14px 30px -14px rgba(249,115,22,.9)}

  /* a coluna boa da escolha */
  .choice-col.is-good .choice-list li{transition:transform .3s var(--ease)}
  .choice-col.is-good .choice-list li:hover{transform:translateX(5px)}
  .is-good .ci{transition:transform .3s var(--ease)}
  .choice-col.is-good .choice-list li:hover .ci{transform:scale(1.12)}

  /* FAQ: a pergunta e a seta reagem antes do clique */
  .faq-summary{transition:color .26s var(--ease), padding-left .26s var(--ease)}
  .faq-summary:hover{color:var(--accent-hover);padding-left:6px}
  .faq-summary:hover .faq-chev{background:rgba(249,115,22,.14)}

  /* as linhas de preço da ancoragem */
  .ledger-row{transition:background-color .3s var(--ease)}
  .ledger-row:hover{background:rgba(255,255,255,.04)}
  .ledger-row .v{transition:color .3s var(--ease)}
  .ledger-row:hover .v{color:var(--accent-light)}

  /* os três números de prova */
  .results-list li{transition:transform .34s var(--ease)}
  .results-icon svg{transition:transform .34s var(--ease), color .34s var(--ease)}
  .results-list li:hover{transform:translateY(-4px)}
  .results-list li:hover .results-icon svg{transform:scale(1.12);color:var(--accent)}

  /* credenciais */
  .credentials li{transition:transform .3s var(--ease), color .3s var(--ease)}
  .credentials li::before{transition:transform .3s var(--ease)}
  .credentials li:hover{transform:translateX(5px);color:#fff}
  .credentials li:hover::before{transform:rotate(135deg)}

  /* o mockup do produto */
  .device{transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
  .device:hover{transform:translateY(-6px);box-shadow:0 60px 110px -56px rgba(2,6,23,.85)}

  /* o cartão de preço respira quando a pessoa chega perto */
  .pricecard{transition:box-shadow .5s var(--ease), border-color .5s var(--ease),
                        opacity .8s var(--ease), transform .8s var(--ease)}
  .pricecard:hover{
    border-color:rgba(249,115,22,.8);
    box-shadow:0 60px 130px -58px rgba(249,115,22,.72);
  }

  /* o retrato do especialista */
  .expert-figure img{transition:transform .6s var(--ease)}
  .expert-figure:hover img{transform:scale(1.03)}
}

/* --- 6.4 Foco visível: a mesma resposta, pelo teclado -------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.on-dark a:focus-visible,.offer a:focus-visible,.legalband a:focus-visible{outline-color:var(--accent-light)}

/* --- 6.5 A contagem dos três números ------------------------------------
   Enquanto o número corre, a largura mudaria e a linha dançaria. As três
   colunas da faixa já são de largura fixa, então travo só a altura. */
.results-hl{font-variant-numeric:tabular-nums;min-height:1em}

/* --- 6.6 Respiração do sinal de rolagem ---------------------------------
   Único elemento com movimento contínuo da página inteira, de propósito:
   4s por ciclo é ritmo de respiração lenta, e é o que o produto vende. */
@media (prefers-reduced-motion: no-preference){
}
@keyframes respira{
  0%,100%{transform:translateY(0);opacity:.75}
  50%{transform:translateY(5px);opacity:1}
}

/* --- 6.7 Desligamento: nada disto vale para quem pediu menos movimento --- */
@media (prefers-reduced-motion: reduce){
  .js .reveal .eyebrow-rule,.js .stagger .eyebrow-rule{transform:none!important}
  .js .expert-grid > aside,.js .expert-body,.js .thought-list.stagger > *,
  .js .nerve-callout,.js .pricecard{transform:none!important}
  .thought:hover,.quote:hover,.stack-row:hover .stack-num,.benefits li:hover,
  .step:hover .step-num,.choice-col.is-good .choice-list li:hover,
  .results-list li:hover,.credentials li:hover,.device:hover,
  .expert-figure:hover img,.faq-summary:hover{transform:none!important}
}

/* --- 6.8 Correção de cascata, medida ------------------------------------
   Achado real: `.js .reveal.is-in{transform:none}` e
   `.js .stagger.is-in > *{transform:none}` têm especificidade maior que
   qualquer `:hover{transform:…}`, então todo elemento que também é alvo de
   revelação tinha o hover de transformação anulado em silêncio. Medido
   inerte em `.thought`, `.quote` e `.device`. Os três abaixo recuperam a
   especificidade necessária; os demais estados de cursor não precisam
   porque agem sobre filhos, que não são alvo de revelação. */
@media (hover:hover) and (pointer:fine){
  .js .thought-list.stagger.is-in > .thought:hover{transform:translateX(6px)}
  .js .quotes.stagger.is-in > .quote:hover{transform:translateY(-3px)}
  .js .device.reveal.is-in:hover{transform:translateY(-6px)}
}
@media (prefers-reduced-motion: reduce){
  .js .thought-list.stagger.is-in > .thought:hover,
  .js .quotes.stagger.is-in > .quote:hover,
  .js .device.reveal.is-in:hover{transform:none!important}
}

/* ==========================================================================
   Rodada 7: a chapa do preço.
   O pedido era "aumentar o box com o valor". Medido, alargar a moldura
   sozinha faz o oposto: a --step-6 satura em 95,41px a partir de ~1069px de
   viewport, então a 1320 de largura o "R$ 67" cairia de 26,8% para 23,8% da
   largura do cartão. Quem cresce aqui é o número, de 95,41 para 127,2px, e
   uma chapa fechada que dá endereço ao preço dentro do cartão. A moldura
   cresce 80px, de 880 para 960.
   ========================================================================== */

.price-plate{
  width:100%;
  display:grid;
  row-gap:6px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(249,115,22,.28);
  border-radius:10px;          /* metade do raio do cartão, para não virar um segundo cartão */
  padding:32px 34px;
}

.price-big{
  /* função contínua, sem media query: some o degrau que existia em 560 */
  font-size:clamp(4.3rem, 1.6rem + 9.6vw, 7.95rem);
  line-height:.86;
  letter-spacing:-.05em;
}
.price-line{margin-bottom:4px}
.price-strike{color:var(--on-dark)}
/* [v5] o parcelamento empatava em corpo com o R$ 590 riscado, ou seja,
   o valor cancelado e o valor a pagar liam com o mesmo peso. Um degrau abaixo. */
.installments{font-size:var(--step-0)}
.badges{margin-top:10px}
.pricecard{gap:22px}

/* o preço e as parcelas dividem a linha, com as bases alinhadas */
@media (min-width:941px){
  .price-plate{
    grid-template-columns:auto auto;
    justify-content:center;
    column-gap:28px;
    align-items:end;
  }
  .price-line{grid-column:1 / -1}
  .price-big{justify-self:end}
  .installments{max-width:11em;text-align:left;align-self:end;padding-bottom:6px}
}

@media (min-width:1180px){
  .pricecard{max-width:min(100%,960px)}
}

@media (max-width:560px){
  .price-plate{padding:20px 18px;grid-template-columns:1fr;justify-items:center;row-gap:10px}
  .installments{max-width:none;text-align:center;align-self:auto;padding-bottom:0}
}

/* a quebra natural partia o valor ao meio ("9x de R$" / "8,80"). O valor é
   uma unidade e não se quebra; a linha passa a partir depois de "até". */
.installments strong{white-space:nowrap}
@media (min-width:941px){
  .installments{max-width:12em}
}

/* ==========================================================================
   Rodada 8: correção dos achados da auditoria de render.
   ========================================================================== */

/* --- 8.1 CRÍTICO: a barra fixa cobria os links legais -------------------
   Medido a 320 e 390: barra de 87px começando em y=757, links de 44px indo
   até y=816. Cobertura de 59px sobre um alvo de 44, ou seja 134% dele, e a
   página já acabou: não há mais rolagem e a barra não tem como fechar. A
   causa era body{padding-bottom:0}, que não reservava altura nenhuma para
   uma barra fixa. Reincidência: a v3 já tinha fechado este mesmo defeito. */
@media (max-width:760px){
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
}

/* --- 8.2 ALTO: o cartão do sistema nervoso ficava preso na entrada ------
   Regressão minha, da rodada 6. Escrevi a entrada em `.js .nerve-callout` e
   a saída em `.nerve-callout.is-in`, mas o elemento não é alvo de revelação:
   o observador só distribui `is-in` para `.reveal` e `.stagger`. A classe
   nunca chegava e o transform nunca saía, deixando o cartão 25,7px abaixo do
   eixo da coluna irmã em toda tela de 901px para cima. Quem recebe `is-in` é
   o ancestral `.nerve-inner`, e é nele que a saída passa a mirar. */
@media (min-width:901px){
  .js .nerve-inner.is-in .nerve-callout{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .js .nerve-inner .nerve-callout{transform:none!important}
}

/* --- 8.3 ALTO: a escala do herói congelava nas telas muito largas -------
   A --step-5 satura em 71,57px a partir de ~1244px e a coluna do herói
   trava em 544px desde 768px, enquanto o --shell continua crescendo até
   1500px. A 2560 a manchete caía para 2,8% da tela e a coluna para 21,2%.
   O conserto é uma função contínua que só ultrapassa a escala ACIMA de
   2118px, para não alterar nada do herói já aprovado: a 1440 e a 2118 os
   dois valores continuam idênticos aos medidos hoje, 71,57px e 544px. */
.hero h1{font-size:max(var(--step-5), calc(0.5rem + 3vw))}
.hero-copy{max-width:min(100%, max(34rem, 25vw))}

/* --- 8.4 MÉDIO: a coluna do especialista fechava acima da irmã ----------
   Entre 901 e 1180 a coluna do retrato terminava até 120,8px acima da
   biografia, porque só a direita recebia `stretch`. De 1366 em diante o
   retrato passa a ser o mais alto e o desnível some sozinho, então aqui a
   esquerda ganha o mesmo tratamento que a direita já tinha. */
@media (min-width:901px) and (max-width:1365px){
  .expert-grid > aside{align-self:stretch;display:flex;flex-direction:column}
  .expert-grid > aside .credentials{margin-top:auto;padding-top:16px}
}

/* ==========================================================================
   Rodada 9: revisão geral de diagramação.
   Três dos itens abaixo são regressões que EU introduzi na rodada 6, e as
   três violam a mesma regra que este projeto documenta: sobre fundo claro o
   laranja é preenchimento, nunca letra. Medido: 3,11 / 2,34 / 2,45, os três
   reprovando em AA. A rodada 3 já havia fechado esse defeito uma vez.
   ========================================================================== */

/* --- 9.1 O laranja sai de toda letra sobre claro ------------------------- */
@media (hover:hover) and (pointer:fine){
  /* FAQ: o sinal migra do texto para a seta, que é preenchimento */
  .faq-summary:hover{color:var(--ink)}
  .faq-summary:hover .faq-chev{background:var(--accent);border-color:var(--accent);color:var(--ink)}
  /* inventário: o número continua tinta cheia, o sinal fica no fundo da linha */
  .stack-row:hover .stack-num{color:var(--ink)}
  /* depoimento: aspas em laranja mediam 2,45. O sinal vira filete lateral */
  /* [v5] hover do depoimento reescrito no bloco da Rodada 10 */
}

/* --- 9.2 O eixo régua->título: 18 / 20 / 28 vira 18 em toda parte --------
   Dez pixels de diferença entre o sistema nervoso e as oito seções vizinhas,
   na distância logo abaixo da régua laranja, que é o ponto de partida do
   olho. É o defeito de "cada seção inventou a sua grade". */
:root{
  --head-gap:clamp(18px, 2.2vw, 28px);
  --rule-gap:18px;
}
.section-head{gap:var(--head-gap)}
.nerve-head{gap:var(--head-gap)}
.proto-copy{gap:var(--head-gap)}
:is(.section-head,.nerve-head,.proto-copy) > .eyebrow-rule{
  margin-bottom:calc(var(--rule-gap) - var(--head-gap));
}
.section-head>.eyebrow-rule+*{margin-top:0}
/* o cabeçalho do especialista entra no mesmo eixo das outras oito */
.expert-grid{margin-top:clamp(36px,4.5vw,64px)}

/* --- 9.3 Fio de junta em toda emenda claro contra claro ------------------
   Havia 5 emendas claro-claro e só 2 tinham fio, e as duas estavam sempre
   no mesmo sentido (areia para papel), nunca no inverso. */
.s-sand{border-top:1px solid var(--rule-light)}
.thoughts,.s-ink,.offer,.legalband{border-top:0}

/* --- 9.4 Acabamento ------------------------------------------------------ */
/* a marca de abertura do herói existia em 34x2 e as outras doze em 64x3 */
.eyebrow::before{flex:0 0 64px;height:3px}

/* o filete de coluna dos benefícios descia 62px abaixo do último item da
   coluna curta, porque 7 itens em 2 colunas balanceiam em 4 e 3 */
.benefits{column-rule:0}

/* a coluna "Se nada mudar" usava dois cinzas fora da paleta declarada,
   com o pior par plano da página em 5,03 */
.choice-col.is-bad{background:var(--on-dark)}
.choice-col.is-bad h3,.choice-col.is-bad li{color:var(--on-light)}
.is-bad .ci{background:rgba(2,6,23,.10);color:var(--on-light)}

/* --- 9.5 Herói no celular: arquivo retrato, cortado do original ----------
   Medido: a 390 com DPR 3, que é o aparelho de boa parte do tráfego pago,
   o navegador baixava imagem-bloco-1-3840w.jpg, 1.046 KB, para uma caixa de
   390px. É o maior elemento de pintura da página, marcado como prioritário
   e síncrono, ou seja, era o gargalo do primeiro quadro de quem acabou de
   clicar num anúncio. O recorte 16:9 num quadro retrato obrigava a escolher
   entre nitidez e peso; um arquivo já cortado em retrato resolve os dois:
   217 KB com mais resolução aproveitada. O corte reproduz a janela que o
   object-position de 70% 26% já mostrava, então o enquadramento não muda. */
/* [v5] O intervalo foi dividido: a medicao de 9.5 vale para o celular
   estreito, onde a escala e ~1,03 e a altura cabe inteira. Entre 561 e
   900 (tablet) a mesma regra cortava 399,6px na vertical, sem testa nem
   queixo. Ali o enquadramento sobe para a janela que o 70% 26% original
   ja mostrava. */
@media (max-width:560px){
  .hero-figure img{object-position:50% 50%}
}
@media (min-width:561px) and (max-width:900px){
  .hero-figure img{object-position:50% 26%}
}
@media (hover:hover) and (pointer:fine){
}

/* o alvo da âncora de compra fica abaixo do cabeçalho fixo */
#pagar{scroll-margin-top:clamp(96px,12vh,140px)}
#titulo-espelho{scroll-margin-top:clamp(84px,10vh,120px)}

/* o aviso legal tinha o único atributo style inline do documento */
.legalband{padding-block:clamp(44px,5vw,72px)}

/* ==========================================================================
   Rodada 9b: ritmo. O respiro entre seções media exatamente 100,8px em
   11 das 13, e a altura ficava entre 0,8 e 1,1 tela em 8 das 13. Dois
   canais mudos: nem o espaçamento nem a altura diziam o que pesa mais.
   Escada geométrica de razão 1,4, e escada de manchete que anda junto.
   ========================================================================== */
:root{
  --band-s:clamp(48px, 5vw, 88px);      /* apoio e respiração */
  --band-l:clamp(88px, 9.8vw, 180px);   /* mudança de registro */
}

/* --- 9b.1 Alocação por seção, endereçada pelo aria-labelledby ------------ */
.thoughts .band{padding-top:var(--band-l)}                 /* 1ª troca de registro */
[aria-labelledby="titulo-depoimentos"]{padding-block:var(--band-s)}
[aria-labelledby="titulo-sistema-nervoso"]{padding-bottom:var(--band-s)}
[aria-labelledby="titulo-protocolo"]{padding-top:var(--band-s)}
[aria-labelledby="titulo-especialista"]{padding-block:var(--band-l)}  /* outra voz entra */
[aria-labelledby="titulo-beneficios"]{padding-block:var(--band-s)}
[aria-labelledby="titulo-oferta"]{padding-top:var(--band-l)}          /* a decisão */
[aria-labelledby="titulo-passos"]{padding-block:var(--band-s)}
[aria-labelledby="titulo-escolha"]{padding-top:var(--band-s)}
[aria-labelledby="titulo-faq"]{padding-block:var(--band-s)}

/* --- 9b.2 Escada de manchete ---------------------------------------------
   Eram oito manchetes em step-4 e duas em step-3 por acidente de cascata.
   Ficam em step-4 só as quatro que sustentam o argumento. */
:is([aria-labelledby="titulo-depoimentos"],
    [aria-labelledby="titulo-beneficios"],
    [aria-labelledby="titulo-passos"],
    [aria-labelledby="titulo-escolha"],
    [aria-labelledby="titulo-faq"]) .t-h2{font-size:var(--step-3)}
:is([aria-labelledby="titulo-depoimentos"],
    [aria-labelledby="titulo-beneficios"],
    [aria-labelledby="titulo-passos"],
    [aria-labelledby="titulo-escolha"],
    [aria-labelledby="titulo-faq"]) .section-head{margin-bottom:clamp(28px,3vw,44px)}

/* --- 9b.3 A segunda medida ------------------------------------------------
   O shell tem 1320px, mas a medida confortável de leitura é metade disso.
   A pergunta do FAQ atravessava 1320 e a resposta parava em 595: o par
   pergunta-resposta encostado um no outro com eixos diferentes é a maior
   incoerência de alinhamento da página. Os blocos ficam encostados à
   ESQUERDA, nunca centrados, porque o eixo x=60 é o único alinhamento que
   as 13 seções acertam sem exceção. */
:root{--shell-text:min(100%, 1060px)}
.stack,.faq,.notice{max-width:var(--shell-text)}
.faq-content{max-width:64ch}

/* ==========================================================================
   Rodada 10 (v5): a régua laranja volta a significar alguma coisa
   --------------------------------------------------------------------------
   Medido na v4: a régua de 64x3 abria NOVE seções, sempre igual. Sinal que
   aparece em toda seção deixa de ser sinal e vira moldura. Ela fica nas
   quatro que sustentam o argumento (protocolo, inventário, especialista e
   oferta) e sai das cinco de apoio, que passam a abrir só pela sobrancelha.
   O -4px de compensação some junto, porque existia para descontar a altura
   da régua que agora não ocupa espaço nessas seções.
   ========================================================================== */
:is([aria-labelledby="titulo-depoimentos"],
    [aria-labelledby="titulo-beneficios"],
    [aria-labelledby="titulo-passos"],
    [aria-labelledby="titulo-escolha"],
    [aria-labelledby="titulo-faq"]) .eyebrow-rule{display:none}

:is([aria-labelledby="titulo-depoimentos"],
    [aria-labelledby="titulo-beneficios"],
    [aria-labelledby="titulo-passos"],
    [aria-labelledby="titulo-escolha"],
    [aria-labelledby="titulo-faq"]) .section-head>.eyebrow-rule+*{margin-top:0}

/* ==========================================================================
   Rodada 10b (v5): depoimentos deixam de ser três colunas de texto solto
   --------------------------------------------------------------------------
   Dois defeitos medidos na v5 inicial:
   1) A aspa tinha font-size 53,68px dentro de line-height 37,58px e
      height .5em. O glifo era cortado no topo e no pé, sobrava um par de
      riscos grossos a 18px do texto, e lia como traço perdido, não como
      aspa. Agora tem line-height 1, caixa própria e respiro declarado.
   2) A prova social da página era a seção com menos presença de todas:
      texto corrido separado por fio de 1px. Vira painel de areia sobre
      papel, com a pessoa identificada por disco de inicial. É também uma
      das formas próprias que faltavam (77% das seções abriam iguais).
   ========================================================================== */
.quotes{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.6vw,24px);
  align-items:stretch;
}
.quote{
  position:relative;
  background:var(--sand);
  border:0;
  border-radius:clamp(14px,1.4vw,20px);
  padding:clamp(30px,3vw,44px) clamp(24px,2.4vw,34px) clamp(26px,2.4vw,34px);
  gap:clamp(18px,1.8vw,24px);
  overflow:hidden;
}
/* a faixa de acento é a costura de moldura, e some o fio vertical antigo */
.quote::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent) 0%,rgba(249,115,22,.25) 100%);
}
.quote:first-child,.quote:last-child{padding-inline:clamp(24px,2.4vw,34px)}

/* A aspa: glifo inteiro, nunca cortado, com respiro real até o texto */
.quote-mark{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(46px,4.6vw,66px);
  line-height:1;
  height:auto;
  color:var(--accent);
  opacity:.9;
  margin:0 0 clamp(2px,.4vw,6px);
  letter-spacing:-.04em;
}
.quote-text{
  font-size:var(--step-1);
  line-height:1.42;
  max-width:36ch;
  color:var(--ink);
}
/* Identificação: disco de inicial + nome, separados do depoimento por fio */
.quote-who{
  align-items:center;gap:12px;
  margin-top:auto;
  padding-top:clamp(18px,1.8vw,24px);
  border-top:1px solid rgba(2,6,23,.14);
  text-transform:none;letter-spacing:.01em;
  font-size:var(--step-0);
}
.quote-who b{
  letter-spacing:-.01em;font-weight:700;color:var(--ink);
}
.quote-avatar{
  flex:0 0 auto;
  width:clamp(38px,3.4vw,44px);height:clamp(38px,3.4vw,44px);
  border-radius:50%;
  background:var(--ink);color:#fff;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--step-0);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:0;
}

@media (max-width:860px){
  .quote{border-top:0;padding-inline:clamp(22px,5vw,30px)}
  .quote:first-child{border-top:0}
  .quote-text{max-width:none}
}

@media (hover:hover) and (pointer:fine){
  .quote{transition:transform .38s var(--ease), box-shadow .38s var(--ease)}
  .quote:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(2,6,23,.10)}
  .js .quotes.stagger.is-in > .quote:hover{transform:translateY(-4px)}
}
@media (prefers-reduced-motion: reduce){
  .quote,.quote:hover,.js .quotes.stagger.is-in > .quote:hover{
    transition:none!important;transform:none!important;box-shadow:none!important;
  }
}

/* ==========================================================================
   Rodada 10c (v5): a aspa em cor de acento, com especificidade suficiente
   ========================================================================== */
.quote > .quote-mark{color:var(--accent)}

/* ==========================================================================
   Rodada 10d (v5): HERÓI. Foto ocupa a dobra inteira, sem faixa embaixo
   --------------------------------------------------------------------------
   O que saiu: o `.hero::after`, que pintava uma faixa de areia sólida de até
   190px no pé da dobra, e o véu claro que, no celular, desbotava a foto para
   areia opaca já aos 32% da altura. Os dois existiam para dar contraste ao
   texto escuro, e o preço era matar a foto justamente onde ela é maior.
   O que entrou: véu navy. A foto continua viva de ponta a ponta, o texto
   passa a branco, e o pé escuro emenda com a seção de pensamentos, que já
   é navy. A transição entre as duas dobras deixa de ser um degrau de cor.
   ========================================================================== */
.hero::after{display:none}

.hero{background:var(--ink)}

.hero-figure::after{
  background:
    /* legibilidade da coluna de texto, à esquerda no desktop */
    linear-gradient(96deg,
      rgb(2 6 23 / .90) 0%,
      rgb(2 6 23 / .84) 32%,
      rgb(2 6 23 / .66) 48%,
      rgb(2 6 23 / .34) 62%,
      rgb(2 6 23 / .10) 76%,
      rgb(2 6 23 / 0)   88%),
    /* topo para o cabeçalho respirar, pé para emendar com a seção navy */
    linear-gradient(180deg,
      rgb(2 6 23 / .42) 0%,
      rgb(2 6 23 / .12) 18%,
      rgb(2 6 23 / .20) 58%,
      rgb(2 6 23 / .72) 88%,
      rgb(2 6 23 / .92) 100%);
}

/* Texto do herói sobre o véu escuro */
.hero-copy{max-width:min(100%, 38rem)}
.hero h1{
  color:#fff;
  font-size:clamp(2.9rem, 1.5rem + 5.6vw, 5.1rem);
  line-height:.96;
  letter-spacing:-.04em;
  max-width:14ch;
  font-weight:600;
}
.hero h1 em{
  color:#fff;font-weight:700;
  background:linear-gradient(to top, var(--accent) 0 .11em, transparent .11em);
  padding-bottom:.11em;
}
.hero-lead{color:#fff;font-weight:700;max-width:32ch}
.hero-pain{color:rgb(255 255 255 / .82);max-width:46ch}
.hero .eyebrow{color:var(--accent-light)}

/* [V6d] As regras de cabeçalho transparente e marca branca que existiam
   aqui foram REMOVIDAS. Elas foram escritas para o cabeçalho flutuar sobre
   a foto escura do herói; depois o cabeçalho saiu do index por completo, e
   as regras passaram a atingir só termos-de-uso e política-de-privacidade,
   que têm fundo claro. Resultado medido: marca branca sobre papel, com o
   texto da página passando por baixo, ilegível a partir da primeira rolagem.
   As páginas legais voltam ao cabeçalho sólido original. */

@media (max-width:900px){
  /* sem faixa, o texto não precisa mais ser empurrado para baixo da foto:
     ele passa a viver SOBRE ela, na metade inferior da dobra. */
  .hero{
    padding-top:0;
    min-height:clamp(620px, 92svh, 900px);
    justify-content:flex-end;
  }
  .hero-grid{padding-bottom:clamp(40px,7vw,64px)}
  .hero h1{max-width:12ch}
  .hero-figure::after{
    background:linear-gradient(180deg,
      rgb(2 6 23 / .40) 0%,
      rgb(2 6 23 / .16) 22%,
      rgb(2 6 23 / .46) 50%,
      rgb(2 6 23 / .82) 72%,
      rgb(2 6 23 / .94) 100%);
  }
}

/* ==========================================================================
   Rodada 10e (v5): contraste do herói no celular, medido e corrigido
   --------------------------------------------------------------------------
   Com a foto viva na dobra inteira, dois elementos caíram abaixo do piso
   sobre o pixel composto em 390px:
     .hero .eyebrow  (laranja claro sobre pele)  1,77 contra 4,5 exigidos
     .site-header .brand (branco sobre céu)      4,24 contra 4,5 exigidos
   O véu vertical sobe no topo e na faixa de texto, e a sobrancelha do herói
   deixa de ser laranja no celular: ali ela vive sobre a foto, não sobre
   superfície plana, e o laranja claro não tem luminância para isso.
   ========================================================================== */
@media (max-width:900px){
  .hero-figure::after{
    background:linear-gradient(180deg,
      rgb(2 6 23 / .62) 0%,
      rgb(2 6 23 / .34) 16%,
      rgb(2 6 23 / .52) 42%,
      rgb(2 6 23 / .78) 64%,
      rgb(2 6 23 / .92) 84%,
      rgb(2 6 23 / .96) 100%);
  }
  .hero .eyebrow{color:#fff}
}

/* ==========================================================================
   Rodada 10f (v5): a aspa vira aspa de verdade
   --------------------------------------------------------------------------
   Duas correções sobre a 10b. Primeira: em Poppins o glifo “ é geométrico e
   lê como dois riscos inclinados, não como aspa. Um serifado devolve a forma
   curva clássica, que é o que faz o bloco parecer citação e não enfeite.
   Segunda: ao consertar o corte, a aspa ficou solta a ~90px do texto, porque
   o glifo ocupa só o terço superior da caixa de 66px. line-height .78 mais
   margem negativa devolvem o acoplamento, sem voltar a cortar o desenho.
   ========================================================================== */
.quote > .quote-mark{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  font-size:clamp(64px,6vw,92px);
  line-height:.78;
  margin:0 0 clamp(-22px,-2vw,-14px);
  letter-spacing:-.02em;
  opacity:1;
}

/* ==========================================================================
   Rodada 10g (v5): CORREÇÃO. A grade de 3 colunas da 10b foi escrita sem
   media query e, por vir depois na cascata, venceu as duas regras de coluna
   única (linhas ~320 e ~745). Em 375px os três painéis ficavam lado a lado,
   com o texto espremido e cortado pelo overflow:hidden do painel.
   A grade de três colunas passa a ser condicional, como sempre deveria.
   ========================================================================== */
@media (max-width:860px){
  .quotes{grid-template-columns:1fr}
}

/* [V6] O bloco da Rodada 11 (animation-timeline nativo) foi REMOVIDO.
   Ele só existia no Chrome e no Edge: em Safari e Firefox a página caía
   na revelação por observador e não tinha movimento nenhum, que é
   exatamente a queixa de 'não há comportamento decente de nada'.
   A V6 troca por um motor em JS que funciona em todo navegador, com
   curva de respiração. Ver o bloco 3 da V6, no fim do arquivo.
   O overflow:clip abaixo fica: recorta igual e é mais barato. */

/* ==========================================================================
   Rodada 11b (v5): CORREÇÃO. overflow:hidden matava a linha do tempo
   --------------------------------------------------------------------------
   `overflow:hidden` cria um contêiner de rolagem. A linha do tempo `view()`
   se mede contra o contêiner de rolagem mais próximo, e não contra a página,
   de modo que dentro dele o elemento está SEMPRE visível e o progresso trava
   em 1. Medido: `frase-entra` ficou com progress=1 em toda a rolagem, ou
   seja, a animação existia e nunca andava.
   `overflow:clip` recorta igual e NÃO cria contêiner de rolagem. Vai só aqui
   dentro, onde há animação de rolagem para consertar; navegador sem suporte
   nunca vê esta regra e segue com o hidden de antes.
   ========================================================================== */
@supports (overflow: clip) {
  .hero,.hero-figure,
  .thoughts,.thoughts-media,
  .nerve,.offer,
  .quote,.device,.expert-figure{overflow:clip}
}

/* ==========================================================================
   V6 · Bloco 1: corpo de leitura no herói e na dobra 2
   --------------------------------------------------------------------------
   Medido na v5, e o diagnóstico bate com a queixa:
     celular   sobrancelha 12,5px · promessa 17,9px · BOTÃO 15,2px
     desktop   sobrancelha 12,8px · dor 17px · botão 17px sob um H1 de 81,6px
   O botão principal com 15,2px é o pior número da página: é o elemento que
   a pessoa precisa achar, e estava menor que o texto corrido. A sobrancelha
   a 12,5px com 0,2em de entreletra é decoração, não leitura.
   Na dobra 2, as frases têm 21px no celular com 14px de respiro entre elas:
   texto grande com espaço de texto pequeno é o que faz parecer amontoado.
   ========================================================================== */

/* --- Botão: o controle mais importante para de ser o menor texto ---------- */
.btn{
  font-size:clamp(1.06rem, 1rem + .28vw, 1.22rem);   /* 17 -> 19,5px */
  min-height:60px;
  padding:17px 34px;
}
.btn-sm{font-size:clamp(1rem,.96rem + .18vw,1.1rem);min-height:50px;padding:13px 24px}

/* --- Sobrancelha: entreletra menor, corpo maior, continua discreta -------- */
.eyebrow{
  font-size:clamp(.82rem, .78rem + .2vw, .94rem);    /* 13,1 -> 15px */
  letter-spacing:.16em;
}

/* --- Herói: a escada de leitura fica legível na mão ----------------------- */
.hero-lead{
  font-size:clamp(1.24rem, 1.06rem + .82vw, 1.66rem); /* 19,8 -> 26,6px */
  line-height:1.34;
}
.hero-pain{
  font-size:clamp(1.09rem, 1.04rem + .24vw, 1.2rem);  /* 17,4 -> 19,2px */
  line-height:1.62;
}
.hero-actions{gap:20px 30px;margin-top:10px}

/* --- Dobra 2: o amontoado vira respiro ------------------------------------ */
.thoughts-inner{
  max-width:min(100%, 44rem);
  gap:clamp(34px,4vw,54px);
}
.thoughts h2{
  font-size:clamp(1.72rem, 1.24rem + 2.1vw, 2.9rem);  /* 27,5 -> 46,4px */
  line-height:1.1;
  max-width:20ch;
}
.thought-list{
  gap:clamp(22px,2.6vw,34px);                          /* era 14 -> 22 */
  padding-left:clamp(22px,2.6vw,36px);
  border-left-width:3px;
  border-left-color:rgba(249,115,22,.55);
}
.thought{
  font-size:clamp(1.24rem, 1.02rem + 1.0vw, 1.88rem);  /* 19,8 -> 30px */
  line-height:1.3;
}
.thoughts-close{
  padding-top:clamp(26px,3vw,38px);
  gap:12px;
}
.thoughts-close p{
  font-size:clamp(1.14rem,1.02rem + .56vw,1.44rem);
  line-height:1.38;
}

/* ==========================================================================
   V6 · Bloco 2: a dobra 2 ganha eixo e hierarquia
   --------------------------------------------------------------------------
   Três defeitos, nenhum de cor (o contraste medido ali é de 12,8 a 20:1,
   muito acima do piso, então o problema nunca foi legibilidade):
   1. As frases tinham recuo alternado por nth-child (44px e 22px). A ideia
      era pensamento espalhado; na tela lê como desalinhamento. Todas passam
      a nascer do mesmo eixo, que é o fio laranja.
   2. Título e frases usavam o mesmo branco, o mesmo peso e a mesma família,
      e por isso se fundiam num bloco só. O título fica em branco puro e as
      frases recuam para 88% de branco: a diferença é pequena de perto e
      decisiva de longe, que é como a dobra é lida.
   3. O texto flutuava direto sobre a foto. Ganha um campo escuro próprio,
      que o separa da imagem sem esconder a pessoa retratada.
   ========================================================================== */
.thought:nth-child(2n),
.thought:nth-child(3n){margin-left:0}

.thoughts h2{color:#fff;font-weight:700}
.thought{color:rgb(255 255 255 / .88);font-weight:600}
.thought::before{
  width:clamp(14px,1.8vw,24px);height:3px;top:.6em;
  background:var(--accent);
}
.thoughts-close p:first-child{color:var(--accent-light)}
.thoughts-close p:last-child{color:rgb(255 255 255 / .88)}
.thoughts-close{border-top-color:rgba(255,255,255,.18)}

/* campo escuro sob a coluna de texto, para o branco não brigar com a foto */
.thoughts .band{position:relative;z-index:1}
.thoughts .band::before{
  content:"";position:absolute;z-index:-1;
  inset:0 auto 0 0;
  width:min(100%, 62rem);
  background:linear-gradient(90deg,
    rgb(2 6 23 / .82) 0%,
    rgb(2 6 23 / .74) 46%,
    rgb(2 6 23 / .40) 74%,
    rgb(2 6 23 / 0)  100%);
  pointer-events:none;
}
@media (max-width:860px){
  .thoughts .band::before{
    width:100%;
    background:linear-gradient(180deg,
      rgb(2 6 23 / .58) 0%,
      rgb(2 6 23 / .78) 24%,
      rgb(2 6 23 / .86) 100%);
  }
}

/* ==========================================================================
   V6 · Bloco 3: respiração. O estado visual é função de --p
   --------------------------------------------------------------------------
   O motor está em main.js e escreve uma única variável por elemento, --p,
   de 0 a 1, conforme a posição dele na tela. Aqui só se descreve o que
   cada valor de --p significa. Duas razões para ser assim:
     · funciona em todo navegador, não só onde animation-timeline existe;
     · a curva de respiração fica num lugar só, no JS, e não espalhada em
       dezenas de animation-range.
   O gesto é o de uma inspiração: o elemento sobe pouco, abre de 0,985 para
   1 e clareia. Sem deslizar de lado, sem quicar, sem passar do ponto.
   ========================================================================== */
.js .reveal,
.js .stagger>*{
  opacity:var(--p, 1);
  transform:translate3d(0, calc((1 - var(--p, 1)) * 30px), 0)
            scale(calc(.985 + var(--p, 1) * .015));
  animation:none;            /* a rede de 4,5s da v5 sai: o motor garante */
  transition:none;
  will-change:opacity, transform;
}
/* Quando o motor termina, a classe is-in entra e o CSS legado assume o
   estado final (régua laranja desenhada, colunas do especialista no eixo,
   cartão de preço assentado). É de propósito que o nome seja is-in e não
   um nome novo: dezenas de regras da v4 e da v5 dependem dela para o
   estado final, e trocar o nome deixaria a régua presa em scaleX(0). */
.js .reveal.is-in,
.js .stagger>*.is-in{
  opacity:1;transform:none;will-change:auto;
}

/* Respiração contínua da foto do herói: 13s por ciclo, 3,5% de amplitude.
   É lenta o bastante para não ser vista, e presente o bastante para a dobra
   não parecer congelada. É o produto se demonstrando. */
@keyframes respira-foto{
  0%,100%{transform:scale(1.000)}
  50%    {transform:scale(1.035)}
}
.js .hero-figure img{
  animation:respira-foto 13s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform;
}

@media (prefers-reduced-motion: reduce){
  .js .reveal,.js .stagger>*{
    opacity:1!important;transform:none!important;will-change:auto!important;
  }
  .js .hero-figure img{animation:none!important}
}

/* ==========================================================================
   V6 · Bloco 4: o cabeçalho sai da página
   --------------------------------------------------------------------------
   Numa página de venda a marca no topo não faz trabalho nenhum: não vende,
   não orienta (a página tem uma seção só, que é rolar até o fim) e ocupava
   a faixa mais valiosa da primeira dobra, justamente sobre a foto. Sai o
   elemento, sai o CSS que só existia para ele, e a margem de âncora encolhe
   porque não há mais nada fixo no topo para compensar.
   ========================================================================== */
#pagar{scroll-margin-top:clamp(20px,3vh,40px)}
#titulo-espelho{scroll-margin-top:clamp(16px,2.4vh,32px)}

/* ==========================================================================
   V6b · Bloco 5: o herói fica com quatro elementos e peso de verdade
   --------------------------------------------------------------------------
   Saíram a sobrancelha e a seta de rolagem. Com a dobra inteira ocupada por
   foto e sem cabeçalho, a página não precisa mais avisar que dá para rolar,
   e a sobrancelha era a quarta linha de texto competindo com a promessa.
   Sobram quatro coisas: nome, promessa, para quem é, e o botão.
   O título passa a 900 (Poppins Black, carregado agora) nas duas linhas.
   Antes eram 600 na primeira e 700 na segunda, e essa diferença de peso
   sem diferença de papel só fazia o conjunto parecer indeciso.
   ========================================================================== */
.hero-copy{
  max-width:min(100%, 44rem);
  gap:clamp(22px,2.4vw,32px);
}
.hero h1{
  font-weight:900;
  font-size:clamp(3.4rem, 1.5rem + 7.6vw, 6.4rem);
  line-height:.92;
  letter-spacing:-.045em;
  max-width:13ch;
}
.hero h1 em{
  font-weight:900;
  letter-spacing:-.045em;
  background:linear-gradient(to top, var(--accent) 0 .085em, transparent .085em);
  padding-bottom:.085em;
}
.hero-lead{
  font-size:clamp(1.42rem, 1.1rem + 1.35vw, 2.05rem);
  line-height:1.3;
  font-weight:700;
  max-width:26ch;
}
.hero-pain{
  font-size:clamp(1.18rem, 1.06rem + .56vw, 1.46rem);
  line-height:1.55;
  color:rgb(255 255 255 / .84);
  max-width:40ch;
}
.btn{
  font-size:clamp(1.14rem, 1.04rem + .42vw, 1.36rem);
  min-height:66px;
  padding:19px 40px;
}
.hero-actions{margin-top:clamp(6px,1.2vw,14px)}

/* ==========================================================================
   V6b · Bloco 6: a dobra 2 deixa de ser lista e vira pensamento
   --------------------------------------------------------------------------
   O diagnóstico é de anatomia, não de estilo: fio vertical + marcador por
   item + alinhamento único + corpo igual é a definição de bullet list, e
   bullet list é a forma do slide. Trocar cor ou espaço não resolve isso.
   Então some o fio, some o marcador, e as frases passam a se comportar
   como pensamento: cada uma com corpo próprio, deslocamento próprio e uma
   inclinação mínima, porque pensamento não chega alinhado nem do mesmo
   tamanho. As mais duras ("Minha mente não para", "Tô esgotada") vêm
   maiores; as de passagem vêm menores e mais apagadas.
   A inclinação é de no máximo 1,4 grau: o bastante para tirar a régua da
   composição, pouco o bastante para ninguém notar que foi de propósito.
   ========================================================================== */
.thought-list{
  border-left:0;
  padding-left:0;
  gap:clamp(20px,2.4vw,34px);
}
.thought::before{display:none}
.thought{
  display:block;
  width:fit-content;
  max-width:100%;
  font-weight:600;
  line-height:1.22;
  text-wrap:balance;
}

/* corpo, deslocamento, inclinação e brilho próprios de cada pensamento */
.thought:nth-child(1){--rot:-1.1deg; --opmax:.95; margin-left:0;    font-size:clamp(1.3rem,1.02rem + 1.25vw,2.05rem)}
.thought:nth-child(2){--rot: .7deg;  --opmax:.80; margin-left:7%;   font-size:clamp(1.12rem,.95rem + .78vw,1.6rem)}
.thought:nth-child(3){--rot:-.5deg;  --opmax:.86; margin-left:2.5%; font-size:clamp(1.2rem,.98rem + 1.0vw,1.78rem)}
.thought:nth-child(4){--rot: 1.2deg; --opmax:.78; margin-left:11%;  font-size:clamp(1.08rem,.93rem + .68vw,1.5rem)}
.thought:nth-child(5){--rot:-1.4deg; --opmax:1;   margin-left:1%;   font-size:clamp(1.42rem,1.06rem + 1.6vw,2.4rem)}
.thought:nth-child(6){--rot: .6deg;  --opmax:.74; margin-left:6%;   font-size:clamp(1.04rem,.9rem + .62vw,1.42rem)}

/* movimento próprio: o pensamento SURGE, desfocado, e vem se definindo */
.js .thought-list.stagger>.thought{
  opacity:calc(var(--p, 1) * var(--opmax, 1));
  transform:translate3d(calc((1 - var(--p, 1)) * -34px), calc((1 - var(--p, 1)) * 22px), 0)
            rotate(var(--rot, 0deg))
            scale(calc(.94 + var(--p, 1) * .06));
  filter:blur(calc((1 - var(--p, 1)) * 8px));
}
/* assentado: guarda a inclinação e o brilho próprios, larga o resto */
.js .thought-list.stagger>.thought.is-in{
  opacity:var(--opmax, 1);
  transform:rotate(var(--rot, 0deg));
  filter:none;
  will-change:auto;
}

@media (max-width:860px){
  /* na tela estreita o deslocamento come a medida de linha: fica só a
     inclinação e a variação de corpo, que já bastam para não virar lista */
  .thought:nth-child(n){margin-left:0}
  .thought{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .js .thought-list.stagger>.thought{
    opacity:var(--opmax,1)!important;
    transform:rotate(var(--rot,0deg))!important;
    filter:none!important;
  }
}

/* ==========================================================================
   V6b · Bloco 7: o movimento geral sobe de intensidade
   --------------------------------------------------------------------------
   Na V6 o gesto era de 30px e 1,5% de escala. Correto no papel e invisível
   na prática: quem rola não percebe 30px numa tela de 900. Sobe para 56px
   e 3,5%, e os blocos grandes ganham um desfoque de 5px que vai limpando,
   que é o que torna a entrada perceptível sem precisar de distância maior.
   O desfoque fica só nos `.reveal` (cabeçalho de seção, blocos inteiros):
   são poucos elementos por tela, e desfoque custa composição.
   A curva de respiração continua a mesma, no motor.
   ========================================================================== */
.js .reveal,
.js .stagger>*{
  transform:translate3d(0, calc((1 - var(--p, 1)) * 56px), 0)
            scale(calc(.965 + var(--p, 1) * .035));
}
.js .reveal{
  filter:blur(calc((1 - var(--p, 1)) * 5px));
}
.js .reveal.is-in{filter:none}

@media (prefers-reduced-motion: reduce){
  .js .reveal{filter:none!important}
}

/* ==========================================================================
   V6c · Bloco 8: diagramação do herói
   --------------------------------------------------------------------------
   Medido em 1440: a promessa quebrava em 4 linhas dentro de 495px, o que a
   fazia ler como parágrafo e não como promessa; os três blocos terminavam
   em 495, 542 e 704px, três bordas direitas diferentes na mesma coluna; e
   o espaçamento era 32px uniforme entre tudo, sem dizer o que pertence a quê.
   Correções: a promessa ganha largura para caber em 3 linhas, a linha de
   dor em 2, as duas passam a compartilhar a mesma borda direita, e o
   espaçamento vira hierarquia: colado no que pertence junto, largo antes
   do botão, que é o único elemento de ação da dobra.
   ========================================================================== */
.hero-copy{
  gap:0;                       /* o ritmo passa a ser por margem, não uniforme */
  max-width:min(100%, 46rem);
}
.hero h1{margin-bottom:clamp(22px,2.4vw,32px)}

/* promessa e dor partilham a mesma medida: uma borda direita só */
.hero-lead{
  max-width:34ch;
  margin-bottom:clamp(14px,1.4vw,20px);
}
.hero-pain{
  max-width:34ch;
  margin-bottom:clamp(30px,3.4vw,46px);   /* respiro antes da ação */
}
.hero-actions{margin-top:0}

@media (max-width:900px){
  .hero-lead,.hero-pain{max-width:30ch}
  .hero h1{margin-bottom:clamp(18px,4vw,26px)}
  .hero-pain{margin-bottom:clamp(26px,5vw,36px)}
}

/* ==========================================================================
   V6c · Bloco 9: o título cabe em duas linhas no celular
   --------------------------------------------------------------------------
   A 390px o H1 em 54,4px quebrava em quatro linhas, com um "da" sozinho
   na segunda. Órfão de uma sílaba num título de peso 900 é o defeito mais
   visível que a dobra pode ter. O piso do clamp desce para caber
   "O Caminho da" e "Mente Serena" em uma linha cada, e o topo não muda.
   ========================================================================== */
.hero h1{
  font-size:clamp(2.62rem, 1.02rem + 6.6vw, 6.4rem);
  text-wrap:pretty;
}

/* ==========================================================================
   V6c · Bloco 10: a dobra 2 recua. Menos variáveis, mesma ideia
   --------------------------------------------------------------------------
   A versão anterior mexia em quatro variáveis ao mesmo tempo, e todas as
   seis frases eram diferentes em todas elas: seis corpos, seis
   deslocamentos, seis opacidades, seis inclinações. Cada uma fazia sentido
   sozinha e juntas viraram ruído.
   Fica UMA variável de composição, o volume: duas frases altas, duas
   médias, duas baixas, com dois corpos apenas. Sai o deslocamento lateral,
   sai a inclinação. O que ainda impede de virar lista continua lá: nenhum
   marcador, nenhum fio, e a entrada desfocada de pensamento que surge.
   ========================================================================== */
.thought:nth-child(n){
  margin-left:0;
  --rot:0deg;
}
/* duas alturas de voz, não seis */
.thought:nth-child(1),
.thought:nth-child(5){                      /* as duas mais duras */
  --opmax:1;
  font-size:clamp(1.42rem, 1.06rem + 1.62vw, 2.34rem);
}
.thought:nth-child(3){                      /* meia-voz */
  --opmax:.82;
  font-size:clamp(1.18rem, .98rem + .92vw, 1.66rem);
}
.thought:nth-child(2),
.thought:nth-child(4),
.thought:nth-child(6){                      /* de passagem */
  --opmax:.72;
  font-size:clamp(1.18rem, .98rem + .92vw, 1.66rem);
}
.thought-list{gap:clamp(22px,2.6vw,36px)}

/* ==========================================================================
   V6d · Bloco 11: a página respira nos dois sentidos
   --------------------------------------------------------------------------
   Até aqui o elemento entrava e TRAVAVA: uma vez assentado, rolar para cima
   não desfazia nada. O motor perdeu a trava, e --p virou função pura da
   posição, então descer traz e subir devolve, quadro a quadro.
   O que impedia isso do lado do CSS era a própria classe is-in, que fixava
   opacity:1 e transform:none com especificidade maior. Ela continua sendo
   aplicada, porque dezenas de regras da v4 e da v5 dependem dela para o
   estado final do que NÃO respira (a régua laranja que se desenha, as
   colunas do especialista, o callout do sistema nervoso). O que muda é que
   ela deixa de mandar na opacidade e no transform do que respira: isso
   volta para --p, aqui embaixo, onde ganha da regra antiga por vir depois.
   ========================================================================== */
.js .reveal.is-in,
.js .stagger>*.is-in{
  opacity:var(--p, 1);
  transform:translate3d(0, calc((1 - var(--p, 1)) * 56px), 0)
            scale(calc(.965 + var(--p, 1) * .035));
  transition:none;
}
.js .reveal.is-in{filter:blur(calc((1 - var(--p, 1)) * 5px))}

/* os pensamentos guardam a regra própria deles, também reversível */
.js .thought-list.stagger>.thought.is-in{
  opacity:calc(var(--p, 1) * var(--opmax, 1));
  transform:translate3d(calc((1 - var(--p, 1)) * -34px), calc((1 - var(--p, 1)) * 22px), 0)
            rotate(var(--rot, 0deg))
            scale(calc(.94 + var(--p, 1) * .06));
  filter:blur(calc((1 - var(--p, 1)) * 8px));
}

@media (prefers-reduced-motion: reduce){
  .js .reveal.is-in,.js .stagger>*.is-in{
    opacity:1!important;transform:none!important;filter:none!important;
  }
  .js .thought-list.stagger>.thought.is-in{
    opacity:var(--opmax,1)!important;transform:none!important;filter:none!important;
  }
}