/* ══════════════════════════════════════════════════════════════
   BHP Palmas 2026  ·  Febracis Tocantins
   Sistema visual: azul-marinho profundo + azul elétrico BHP,
   com dourado Febracis racionado (só onde a autoridade Febracis
   é invocada: mentor, prova social e rodapé).
   ══════════════════════════════════════════════════════════════ */

:root{
  /* superfícies */
  --ink:        #030814;
  --ink-2:      #060E22;
  --ink-3:      #08132C;
  --surface:    #0A1730;
  --surface-2:  #0D1E3D;
  --line:       rgba(132,184,254,.14);
  --line-2:     rgba(132,184,254,.26);

  /* acentos */
  --blue:       #1E7BFF;
  --blue-hi:    #55A6FF;
  --blue-soft:  #84B8FE;
  --gold:       #D4A64A;
  --gold-hi:    #F0D08A;

  /* texto */
  --tx:         #EAF1FF;
  --tx-2:       #A8B9D6;
  --tx-3:       #6C7F9E;

  /* medidas */
  --shell:      1200px;
  --r:          16px;
  --r-lg:       22px;
  --pad:        clamp(20px, 5vw, 40px);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp: "Sora", "Inter", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--ink);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden }

img{ max-width:100%; height:auto; display:block }
button{ font:inherit; color:inherit }

/* .btn é inline-flex e venceria o display:none do agente de usuário */
[hidden]{ display:none !important }

::selection{ background:var(--blue); color:#fff }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--blue); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0 }

:focus-visible{
  outline:2px solid var(--blue-hi);
  outline-offset:3px;
  border-radius:6px;
}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.shell.narrow{ max-width:860px }
.center{ text-align:center }

/* ───────────── tipografia ───────────── */

.h1{
  font-family:var(--disp);
  font-weight:800;
  font-size:clamp(2.05rem, 4.9vw, 3.55rem);
  line-height:1.06;
  letter-spacing:-.035em;
  margin:0 0 22px;
}
.h1 em{ font-style:normal; color:var(--blue-hi) }

.h1--final{ font-size:clamp(1.9rem, 4.4vw, 3.2rem); margin-bottom:20px }

.h2{
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(1.65rem, 3.4vw, 2.7rem);
  line-height:1.12;
  letter-spacing:-.03em;
  margin:0 0 18px;
}
.h2 em{ font-style:normal; color:var(--blue-hi) }

h3{ font-family:var(--disp); font-weight:600; letter-spacing:-.015em }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--disp);
  font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-soft);
  background:linear-gradient(180deg, rgba(30,123,255,.16), rgba(30,123,255,.05));
  border:1px solid var(--line-2);
  border-radius:100px;
  padding:8px 18px;
  margin:0 0 22px;
}
.eyebrow--gold{
  color:var(--gold-hi);
  background:linear-gradient(180deg, rgba(212,166,74,.16), rgba(212,166,74,.04));
  border-color:rgba(212,166,74,.3);
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--blue-hi);
  box-shadow:0 0 0 0 rgba(85,166,255,.65);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(85,166,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(85,166,255,0) }
}

.lede{ font-size:clamp(1rem, 1.55vw, 1.16rem); color:var(--tx-2); max-width:56ch; margin:0 0 32px }
.body-lg{ font-size:clamp(1rem, 1.5vw, 1.12rem); color:var(--tx-2); margin:0 0 8px }
.body-lg--tight{ max-width:66ch; margin-inline:auto }
.body{ color:var(--tx-2); margin:0 }
.micro{ font-size:.83rem; color:var(--tx-3); max-width:48ch; margin:16px 0 0 }
.center .micro{ margin-inline:auto }

.linkish{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--blue-soft); text-decoration:underline; text-underline-offset:3px;
  font-size:inherit; font-family:inherit;
}
.linkish:hover{ color:var(--blue-hi) }

/* ───────────── botões ───────────── */

.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:15px 22px 15px 28px;
  border:0; border-radius:100px;
  background:linear-gradient(135deg, var(--blue) 0%, #3D93FF 55%, var(--blue-hi) 100%);
  color:#fff;
  font-family:var(--disp); font-weight:600; font-size:.95rem;
  letter-spacing:-.005em;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 0 0 6px rgba(30,123,255,.08), 0 14px 34px -12px rgba(30,123,255,.65);
  transition:transform .18s ease, box-shadow .25s ease, filter .2s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 8px rgba(30,123,255,.12), 0 20px 44px -12px rgba(30,123,255,.8);
  filter:saturate(1.1);
}
.btn:active{ transform:translateY(0) }
.btn svg{
  width:19px; height:19px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s ease;
}
.btn:hover svg{ transform:translateX(4px) }
.btn--sm{ padding:11px 18px 11px 22px; font-size:.85rem }
.btn--lg{ padding:19px 26px 19px 34px; font-size:1.03rem }
.btn--full{ width:100%; justify-content:center }
.btn--ghost{
  background:transparent;
  border:1px solid var(--line-2);
  color:var(--tx-2);
  box-shadow:none;
}
.btn--ghost:hover{ background:rgba(132,184,254,.07); box-shadow:none; color:var(--tx) }
.btn--gold{
  background:linear-gradient(135deg, #C08F2E 0%, var(--gold) 50%, var(--gold-hi) 100%);
  color:#20160A;
  box-shadow:0 0 0 6px rgba(212,166,74,.1), 0 14px 34px -12px rgba(212,166,74,.6);
}
.btn--gold:hover{ box-shadow:0 0 0 8px rgba(212,166,74,.15), 0 20px 44px -12px rgba(212,166,74,.75) }
.btn[disabled]{ opacity:.55; pointer-events:none }

/* ───────────── barra fixa ───────────── */

.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(3,8,20,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.topbar.is-stuck{
  background:rgba(3,8,20,.94);
  border-bottom-color:var(--line);
}
.topbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:72px;
}
.topbar__logo img{ height:34px; width:auto }

.countdown{ display:flex; align-items:center; gap:14px }
.countdown__label{
  font-family:var(--disp); font-size:.66rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--tx-3);
}
.countdown__grid{ display:flex; gap:7px }
.cd{
  display:flex; flex-direction:column; align-items:center;
  min-width:46px; padding:5px 6px 4px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:9px;
}
.cd b{
  font-family:var(--disp); font-weight:700; font-size:1rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
.cd i{
  font-style:normal; font-size:.55rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx-3); margin-top:2px;
}

/* ───────────── campo de setas (motivo gráfico BHP) ───────────── */

.arrowfield{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='240' viewBox='0 0 120 240'%3E%3Cg fill='none' stroke='%231E7BFF' stroke-width='1.6' opacity='.5'%3E%3Cpath d='M30 240V70l-14 16M30 70l14 16'/%3E%3Cpath d='M84 240V126l-11 13M84 126l11 13'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:bottom center;
  mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.35) 45%, transparent 78%);
}
.arrowfield--soft{ opacity:.32 }

/* ───────────── hero ───────────── */

/* A foto do mentor já vem com o fundo escuro e a plateia desfocada, e o
   enquadramento deixa a área negativa à esquerda, que é onde a headline
   entra. Por isso ela é o fundo da seção e não uma figura em coluna:
   nenhum gradiente decorativo disputa com a foto.
   Ancorada embaixo, para os pés nunca flutuarem no corte. */
.hero{
  position:relative;
  padding:calc(72px + clamp(56px, 9vw, 108px)) 0 clamp(60px, 8vw, 110px);
  min-height:clamp(600px, 82vh, 860px);
  display:flex; align-items:center;
  background:
    linear-gradient(92deg,
      rgba(3,8,20,.97) 0%,
      rgba(3,8,20,.93) 30%,
      rgba(3,8,20,.62) 48%,
      rgba(3,8,20,.14) 66%,
      rgba(3,8,20,0) 80%),
    linear-gradient(180deg, rgba(3,8,20,.7) 0%, rgba(3,8,20,0) 26%),
    linear-gradient(0deg, rgba(3,8,20,.85) 0%, rgba(3,8,20,0) 22%),
    url("../img/hero-newton.jpg") right bottom / cover no-repeat,
    var(--ink);
  overflow:hidden;
}
.hero__in{
  position:relative; z-index:2;
  width:100%;
}
.hero__copy{ max-width:min(560px, 52%) }

.hero__facts{
  list-style:none; margin:34px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 26px;
  font-size:.87rem; color:var(--tx-2);
}
.hero__facts li{ display:flex; align-items:center; gap:9px }
.hero__facts svg{
  width:17px; height:17px; flex:none;
  fill:none; stroke:var(--blue-soft); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ───────────── faixas ───────────── */

.band{ position:relative; padding:clamp(64px, 9vw, 128px) 0 }
.band--thesis{ background:var(--ink-2); border-block:1px solid var(--line) }
.band--diag{ background:var(--ink) }
.band--rail{ background:linear-gradient(180deg, var(--ink) 0%, var(--ink-3) 50%, var(--ink) 100%) }
.band--tools{ background:var(--ink-2); border-block:1px solid var(--line) }
.band--who{ background:var(--ink) }
.band--mentor{
  background:
    radial-gradient(80% 90% at 20% 40%, rgba(212,166,74,.09) 0%, transparent 60%),
    var(--ink-2);
  border-block:1px solid var(--line);
}
.band--proof{ background:var(--ink) }
.band--faq{ background:var(--ink-2); border-block:1px solid var(--line) }
.band--final{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 80% at 50% 100%, rgba(30,123,255,.26) 0%, transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, #071433 100%);
}

.sec-head{ margin-bottom:clamp(34px, 5vw, 58px) }
.sec-head.center{ max-width:820px; margin-inline:auto }

/* ───────────── pilares ───────────── */

.pillars{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  margin-top:clamp(38px, 5vw, 58px); text-align:left;
}
.pillar{
  padding:26px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  position:relative;
  overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.pillar::before{
  content:""; position:absolute; inset:0 auto auto 0;
  width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--blue-hi), transparent);
  opacity:.55;
}
.pillar:hover{ border-color:var(--line-2); transform:translateY(-3px) }
.pillar__ico{ display:block; margin-bottom:16px }
.pillar__ico svg{
  width:26px; height:26px;
  fill:none; stroke:var(--blue-hi); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.pillar h3{ font-size:1rem; margin:0 0 8px }
.pillar p{ font-size:.9rem; color:var(--tx-2); margin:0 }

/* ───────────── diagnóstico ───────────── */

.diag{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px, 4vw, 52px); align-items:start }
.diag__list{ display:grid; gap:14px }

.symptom{
  display:flex; gap:20px;
  padding:24px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .25s ease, background .25s ease;
}
.symptom:hover{ border-color:var(--line-2); background:var(--surface-2) }
.symptom__n{
  font-family:var(--disp); font-weight:700; font-size:.85rem;
  color:var(--blue-hi); letter-spacing:.04em;
  padding-top:3px; flex:none;
}
.symptom h3{ font-size:1.06rem; margin:0 0 7px }
.symptom p{ font-size:.93rem; color:var(--tx-2); margin:0 }

.diag__aside{ display:grid; gap:18px; position:sticky; top:96px }
.callout{
  padding:26px;
  background:linear-gradient(160deg, rgba(30,123,255,.15), rgba(10,23,48,.6));
  border:1px solid var(--line-2);
  border-radius:var(--r);
}
.callout p{ margin:0 0 20px; font-size:.97rem; color:var(--tx) }

/* ───────────── régua dos 4 dias (assinatura) ───────────── */

.rail{ position:relative; margin-top:clamp(30px, 4vw, 48px) }
.rail__track{
  position:absolute; left:0; right:0; top:19px; height:2px;
  background:var(--line);
  border-radius:2px;
}
.rail__fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--blue), var(--blue-hi));
  border-radius:2px;
  box-shadow:0 0 18px rgba(85,166,255,.75);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.rail__days{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
}
.day{ padding-top:52px; position:relative }
.day__mark{
  position:absolute; top:12px; left:0;
  width:16px; height:16px; border-radius:50%;
  background:var(--ink); border:2px solid var(--line-2);
  transition:border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.day.is-on .day__mark{
  background:var(--blue-hi);
  border-color:var(--blue-hi);
  box-shadow:0 0 0 5px rgba(85,166,255,.16), 0 0 20px rgba(85,166,255,.8);
}
.day__date{
  font-family:var(--disp); font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue-soft); margin:0 0 9px;
}
.day h3{ font-size:1.1rem; margin:0 0 10px; letter-spacing:-.02em }
.day p{ font-size:.92rem; color:var(--tx-2); margin:0 }

.rail__note{
  margin:clamp(34px, 5vw, 52px) 0 0;
  font-size:.85rem; color:var(--tx-3); text-align:center;
}

/* ───────────── ferramentas ───────────── */

.tools{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  margin-bottom:clamp(38px, 5vw, 56px);
}
.tool{
  padding:28px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.tool:hover{ border-color:var(--line-2); background:var(--surface-2); transform:translateY(-3px) }
.tool--wide{
  grid-column:span 4;
  display:grid; grid-template-columns:auto 1fr; column-gap:22px;
  align-items:start;
  background:linear-gradient(120deg, rgba(30,123,255,.13), var(--surface) 55%);
}
.tool--wide h3{ grid-column:2 }
.tool--wide p{ grid-column:2; max-width:70ch }
.tool--wide .tool__ico{ grid-row:span 2; margin-bottom:0 }
.tool__ico{
  display:grid; place-items:center;
  width:46px; height:46px; margin-bottom:18px;
  background:rgba(30,123,255,.14);
  border:1px solid var(--line-2);
  border-radius:12px;
}
.tool__ico svg{
  width:22px; height:22px;
  fill:none; stroke:var(--blue-hi); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.tool h3{ font-size:1.02rem; margin:0 0 9px }
.tool p{ font-size:.91rem; color:var(--tx-2); margin:0 }

/* ───────────── para quem ───────────── */

.who{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px }
.who__card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .25s ease;
}
.who__card:hover{ border-color:var(--line-2); transform:translateY(-3px) }
.who__card h3{ font-size:1rem; margin:20px 22px 7px }
.who__card p{ font-size:.89rem; color:var(--tx-2); margin:0 22px 24px }

.notfor{
  margin-top:clamp(28px, 4vw, 44px);
  padding:28px 30px;
  background:rgba(212,166,74,.05);
  border:1px solid rgba(212,166,74,.22);
  border-radius:var(--r);
}
.notfor h3{ font-size:1rem; margin:0 0 12px; color:var(--gold-hi) }
.notfor ul{ margin:0; padding-left:20px; color:var(--tx-2); font-size:.94rem }
.notfor li{ margin-bottom:7px }
.notfor li:last-child{ margin-bottom:0 }

/* ───────────── mentor ───────────── */

.mentor{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px, 5vw, 64px); align-items:center }
.mentor__photo{ position:relative }
.mentor__photo::after{
  content:""; position:absolute; inset:auto -6% -6% -6%; height:60%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(212,166,74,.2), transparent 70%);
  pointer-events:none; z-index:-1;
}
.mentor__photo img{
  border-radius:var(--r-lg);
  border:1px solid rgba(212,166,74,.24);
}
.creds{
  list-style:none; margin:26px 0 26px; padding:0;
  display:grid; gap:11px;
}
.creds li{
  position:relative; padding-left:30px;
  font-size:.94rem; color:var(--tx-2);
}
.creds li::before{
  content:""; position:absolute; left:3px; top:.62em;
  width:8px; height:8px; border-radius:2px;
  background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  transform:rotate(45deg);
}

/* ───────────── prova ───────────── */

.proof{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  margin-bottom:clamp(30px, 4vw, 46px);
}
.proof__stat{
  padding:32px 26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  text-align:center;
}
.proof__stat b{
  display:block;
  font-family:var(--disp); font-weight:800;
  font-size:clamp(2rem, 4vw, 2.9rem); line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(120deg, var(--gold-hi), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:12px;
}
.proof__stat span{ font-size:.9rem; color:var(--tx-2) }

/* ───────────── perguntas ───────────── */

.faq{ display:grid; gap:12px }
.qa{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .25s ease;
}
.qa[open]{ border-color:var(--line-2) }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 24px;
  cursor:pointer; list-style:none;
  font-family:var(--disp); font-weight:600; font-size:1rem;
  letter-spacing:-.015em;
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary i{
  position:relative; flex:none; width:18px; height:18px;
}
.qa summary i::before,
.qa summary i::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--blue-hi); border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .25s ease;
}
.qa summary i::before{ width:16px; height:2px }
.qa summary i::after{ width:2px; height:16px }
.qa[open] summary i::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0 }
.qa__body{ padding:0 24px 22px }
.qa__body p{ margin:0; color:var(--tx-2); font-size:.95rem }

/* ───────────── cta final ───────────── */

.final{ position:relative; z-index:2 }
.final .btn{ margin-top:10px }

/* ───────────── placeholders de imagem ───────────── */

.ph{
  position:relative;
  margin:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:9px;
  padding:24px 22px;
  min-height:210px;
  background:
    repeating-linear-gradient(135deg, rgba(30,123,255,.05) 0 12px, transparent 12px 24px),
    var(--ink-3);
  border:1.5px dashed var(--line-2);
  border-radius:var(--r);
  text-align:left;
}
.ph--tall{ min-height:440px }
.ph--pano{ min-height:260px; align-items:center; text-align:center }
.ph__tag{
  align-self:flex-start;
  font-family:var(--disp); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:#061029; background:var(--blue-soft);
  padding:4px 10px; border-radius:100px;
}
.ph--pano .ph__tag{ align-self:center }
.ph__desc{ margin:0; font-size:.85rem; color:var(--tx-2); line-height:1.55 }
.ph__spec{
  font-family:var(--disp); font-size:.7rem; color:var(--blue-soft);
  letter-spacing:.02em;
}
.who__card .ph{ border:0; border-bottom:1.5px dashed var(--line-2); border-radius:0; min-height:230px }

/* ───────────── rodapé ───────────── */

.foot{
  background:#020610;
  border-top:1px solid var(--line);
  padding:clamp(46px, 6vw, 72px) 0 34px;
  font-size:.86rem; color:var(--tx-3);
}
.foot__brands{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px, 5vw, 56px); flex-wrap:wrap;
  padding-bottom:36px; margin-bottom:32px;
  border-bottom:1px solid var(--line);
}
.foot__brand{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center }
.foot__brand img{ height:44px; width:auto }
.foot__brand--fbc img{ height:76px; filter:brightness(1.12) }
.foot__brand span{ font-size:.75rem; color:var(--tx-3); letter-spacing:.02em }
.foot__x{ width:1px; height:56px; background:var(--line) }

.foot__legal{ max-width:78ch; margin:0 auto 28px; display:grid; gap:14px }
.foot__legal p{ margin:0; line-height:1.7 }
.foot__lgpd b{ color:var(--tx-2); font-weight:600 }
.foot__lgpd a{ color:var(--blue-soft) }

.foot__nav{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:12px 28px; padding-bottom:24px;
}
.foot__copy{ text-align:center; margin:0; font-size:.78rem; color:#3F506B }

/* ───────────── barra fixa mobile ───────────── */

.stickybar{
  position:fixed; inset:auto 0 0 0; z-index:55;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(4,11,26,.95);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
  transform:translateY(110%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.stickybar.is-on{ transform:translateY(0) }
.stickybar__info{ display:flex; flex-direction:column; line-height:1.3 }
.stickybar__info b{ font-family:var(--disp); font-size:.88rem }
.stickybar__info span{ font-size:.72rem; color:var(--tx-3) }

/* ───────────── modal ───────────── */

.modal{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:20px;
}
.modal[hidden]{ display:none }
.modal__scrim{
  position:absolute; inset:0;
  background:rgba(2,6,16,.86);
  backdrop-filter:blur(6px);
  animation:fade .25s ease;
}
@keyframes fade{ from{ opacity:0 } }

.modal__box{
  position:relative;
  width:100%; max-width:470px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:32px;
  background:linear-gradient(165deg, #0B1B3C 0%, #071229 65%);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:0 40px 90px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(132,184,254,.06);
  animation:pop .3s cubic-bezier(.34,1.4,.64,1);
}
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.97) } }
.modal__box--doc{ max-width:720px; padding:34px 34px 30px }

.modal__x{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px;
  display:grid; place-items:center;
  background:rgba(132,184,254,.08);
  border:1px solid var(--line);
  border-radius:50%;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.modal__x:hover{ background:rgba(132,184,254,.18); transform:rotate(90deg) }
.modal__x svg{
  width:16px; height:16px;
  fill:none; stroke:var(--tx-2); stroke-width:2; stroke-linecap:round;
}

.modal__head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.modal__head img{ height:28px; width:auto }
.modal__when{
  margin:0; font-family:var(--disp); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue-soft);
}

.steps{ display:flex; align-items:center; gap:12px; margin-bottom:22px }
.steps__bar{
  flex:1; height:3px; border-radius:3px;
  background:rgba(132,184,254,.16);
  overflow:hidden;
}
.steps__bar i{
  display:block; height:100%; width:50%;
  background:linear-gradient(90deg, var(--blue), var(--blue-hi));
  border-radius:3px;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.steps__txt{
  font-family:var(--disp); font-size:.66rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tx-3);
  white-space:nowrap;
}

.modal__t{
  font-family:var(--disp); font-weight:700;
  font-size:1.5rem; letter-spacing:-.03em; line-height:1.15;
  margin:0 0 8px;
}
.modal__sub{ margin:0 0 22px; font-size:.9rem; color:var(--tx-2) }

.step{ border:0; padding:0; margin:0; display:none }
.step.is-on{ display:block; animation:slide .3s ease }
@keyframes slide{ from{ opacity:0; transform:translateX(12px) } }
.step--ok{ text-align:center }

.ok__ico{
  display:grid; place-items:center;
  width:64px; height:64px; margin:6px auto 20px;
  border-radius:50%;
  background:rgba(30,123,255,.14);
  border:1px solid var(--line-2);
}
.ok__ico svg{
  width:28px; height:28px;
  fill:none; stroke:var(--blue-hi); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.step--ok .btn{ margin-top:10px }

.field{ display:block; margin-bottom:16px }
.field__lb{
  display:block; margin-bottom:7px;
  font-family:var(--disp); font-size:.76rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tx-2);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  background:rgba(3,8,20,.6);
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--tx);
  font-family:var(--sans); font-size:.97rem;
  transition:border-color .2s ease, background .2s ease;
}
.field textarea{ resize:vertical; min-height:88px; line-height:1.55 }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384B8FE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  padding-right:44px;
  cursor:pointer;
}
.field select option{ background:#0B1B3C; color:var(--tx) }
.field input::placeholder,
.field textarea::placeholder{ color:#4E607E }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--blue);
  background:rgba(30,123,255,.06);
  box-shadow:0 0 0 3px rgba(30,123,255,.16);
}
.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea{ border-color:#FF6B6B; background:rgba(255,107,107,.05) }

.field__hint{ display:block; margin-top:6px; font-size:.74rem; color:var(--tx-3) }
.field__err{
  display:none; margin-top:6px;
  font-style:normal; font-size:.78rem; color:#FF8A8A;
}
.field.is-bad .field__err,
.check.is-bad .field__err{ display:block }

.check{
  display:grid; grid-template-columns:auto 1fr; gap:11px;
  margin:6px 0 22px;
  font-size:.82rem; color:var(--tx-2); line-height:1.55;
}
.check input{
  width:19px; height:19px; margin-top:2px;
  accent-color:var(--blue);
  cursor:pointer;
}
.check .field__err{ grid-column:2 }
.check .linkish{ font-size:.82rem }

.modal__actions{ display:grid; grid-template-columns:auto 1fr; gap:10px }
.modal__err{
  margin:14px 0 0; padding:12px 14px;
  background:rgba(255,107,107,.1);
  border:1px solid rgba(255,107,107,.3);
  border-radius:10px;
  font-size:.85rem; color:#FFB3B3;
}
.modal__err[hidden]{ display:none }

.hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; opacity:0;
}

/* documento legal dentro do modal */
.doc{
  max-height:min(62vh, 560px);
  overflow-y:auto;
  padding-right:14px;
  margin-top:18px;
  font-size:.88rem; color:var(--tx-2); line-height:1.75;
}
.doc h3{
  font-size:.95rem; color:var(--tx);
  margin:26px 0 8px; letter-spacing:-.01em;
}
.doc h3:first-child{ margin-top:0 }
.doc p{ margin:0 0 12px }
.doc ul{ margin:0 0 14px; padding-left:20px }
.doc li{ margin-bottom:6px }
.doc a{ color:var(--blue-soft) }
.doc strong{ color:var(--tx); font-weight:600 }
.doc::-webkit-scrollbar{ width:6px }
.doc::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:6px }

/* ───────────── revelação no scroll ───────────── */

.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1) }
.rv.is-in{ opacity:1; transform:none }

/* ══════════════ responsivo ══════════════ */

@media (max-width:1080px){
  .pillars{ grid-template-columns:repeat(2,1fr) }
  .tools{ grid-template-columns:repeat(2,1fr) }
  .tool--wide{ grid-column:span 2 }
  .who{ grid-template-columns:repeat(2,1fr) }
  .rail__days{ grid-template-columns:repeat(2,1fr); gap:34px 22px }
  .rail__track{ display:none }
}

@media (max-width:900px){
  /* Sem largura para a área negativa lateral, a foto desce para uma
     faixa própria abaixo do texto. Deixá-la atrás da headline faz o
     rosto aparecer como fantasma no meio das letras. Aqui ele aparece
     inteiro, em escala natural, e o véu só cobre a parte de cima. */
  .hero{
    min-height:0;
    align-items:flex-start;
    padding-bottom:clamp(340px, 50vw, 420px);
    background:linear-gradient(180deg, #050E22 0%, var(--ink) 58%);
  }
  /* Faixa própria para a foto, com altura fixa: velar o fundo da seção
     por porcentagem depende da altura do texto e cortava a cabeça dele
     quando a headline quebrava em quatro linhas em vez de três.
     cover evita borda visível quando a tela fica mais larga que a foto,
     e a âncora vertical em 14% mantém o rosto fora de qualquer corte. */
  .hero::after{
    content:"";
    position:absolute; inset:auto 0 0 0;
    height:clamp(360px, 52vw, 440px);
    background:url("../img/hero-newton.jpg") 72% 14% / cover no-repeat;
    mask-image:linear-gradient(180deg, transparent 0, #000 18%);
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 18%);
    pointer-events:none;
  }
  .hero__copy{ max-width:none }
  .diag{ grid-template-columns:1fr }
  .diag__aside{ position:static }
  .mentor{ grid-template-columns:1fr; gap:30px }
  .mentor__photo{ max-width:340px }
  .proof{ grid-template-columns:1fr }
  .countdown{ display:none }
}

@media (max-width:680px){
  body{ font-size:15.5px }
  .topbar__in{ height:64px }
  .topbar__logo img{ height:28px }
  .hero{ padding-top:calc(64px + 40px) }
  .pillars,
  .tools,
  .who,
  .rail__days{ grid-template-columns:1fr }
  .tool--wide{ grid-column:span 1; grid-template-columns:1fr }
  .tool--wide h3,
  .tool--wide p{ grid-column:1 }
  .tool--wide .tool__ico{ grid-row:auto; margin-bottom:18px }
  .symptom{ flex-direction:column; gap:10px; padding:22px }
  .stickybar{ display:flex }
  .foot__x{ display:none }
  .modal{ padding:0; place-items:end center }
  .modal__box{
    max-width:none; max-height:94vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:28px 22px calc(28px + env(safe-area-inset-bottom));
  }
  .modal__box--doc{ padding:28px 22px }
  @keyframes pop{ from{ opacity:0; transform:translateY(40px) } }
  .modal__actions{ grid-template-columns:1fr; gap:8px }
  .modal__actions .btn--ghost{ order:2 }
  main{ padding-bottom:0 }
  body{ padding-bottom:0 }
  .foot{ padding-bottom:96px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rv{ opacity:1; transform:none }
}