/* =========================================================
   FREITAS PERÍCIAS — Landing Page
   Direção: científico-técnico / bicromia de polaridade
   Mobile First · CSS construído do menor breakpoint pro maior
   DNS3 Creative · 2026-07-20
   ========================================================= */

/* ---------- FONTES (locais — ver CHECKLIST-PRE-DEPLOY item 6) ---------- */
@font-face{
  font-family:'Archivo';src:url('fonts/archivo-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';src:url('fonts/archivo-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';src:url('fonts/inter-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';src:url('fonts/inter-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';src:url('fonts/jetbrains-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

/* ---------- TOKENS ---------- */
:root{
  --carvao:#0F2238;
  --carvao-2:#16304A;
  --claro:#F4F6F6;
  --claro-2:#E7EBEB;
  --petroleo:#1B3A5B;
  --petroleo-cl:#6E93B8;
  --ambar:#C7A249;
  --grafite:#5A6468;
  --grafite-cl:#98A2A6;

  --ff-d:'Archivo','Archivo Narrow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-b:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ff-m:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1180px;
  --pad:1.25rem;
  --eixo:1px;

  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* polaridade — sobrescrita por .sec--dark / .sec--light */
  --bg:var(--claro);
  --fg:var(--carvao);
  --mut:var(--grafite);
  --ac:var(--petroleo);
  --ln:rgba(16,19,21,.14);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--claro);color:var(--carvao);
  font-family:var(--ff-b);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--ff-d);font-weight:700;line-height:1.1;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ambar);color:var(--carvao);padding:.75rem 1.25rem;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:760px}

.sec{position:relative;padding:4rem 0;background:var(--bg);color:var(--fg);overflow:hidden}
.sec--tight{padding:3.25rem 0}

.sec--dark{
  --bg:var(--carvao);--fg:var(--claro);--mut:var(--grafite-cl);
  --ac:var(--petroleo-cl);--ln:rgba(244,246,246,.16);
}
.sec--light{
  --bg:var(--claro);--fg:var(--carvao);--mut:var(--grafite);
  --ac:var(--petroleo);--ln:rgba(16,19,21,.14);
}

/* O EIXO — régua que percorre a página (assinatura visual) */
.sec::before{
  content:"";position:absolute;top:0;bottom:0;left:var(--pad);
  width:var(--eixo);background:var(--ln);pointer-events:none;
}
.sec > .wrap{position:relative}

/* ---------- TIPOGRAFIA ---------- */
.eyebrow{
  display:flex;align-items:center;gap:.65rem;margin-bottom:1.15rem;
  font-family:var(--ff-m);font-size:.7rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mut);
}
.eyebrow .num{
  color:var(--ambar);
}
/* traço decorativo do rótulo removido a pedido do cliente (2026-07-20) */
.h2{font-size:clamp(1.65rem,6.2vw,2.6rem);margin-bottom:1.15rem;max-width:20ch}
.h2--final{max-width:none}
.lead{font-size:1.03rem;color:var(--mut);max-width:52ch;margin-bottom:2.25rem}
.lead--wide{max-width:66ch}
.lead b{color:var(--fg);font-weight:600}
.note{
  font-family:var(--ff-m);font-size:.78rem;letter-spacing:.03em;
  color:var(--mut);margin-top:1.75rem;padding-left:1rem;border-left:2px solid var(--ln);
}
/* Ênfase: sublinhado âmbar em vez de texto âmbar.
   Motivo v2: a mesma frase é renderizada nas duas polaridades (hero espelhado).
   Texto âmbar não tem contraste suficiente sobre o branco clínico; o sublinhado tem. */
.hl{
  color:inherit;
  background-image:linear-gradient(var(--ambar),var(--ambar));
  background-repeat:no-repeat;
  background-size:100% .09em;
  background-position:0 92%;
}

/* citação de destaque */
.pull{
  margin-top:2.5rem;padding:1.5rem 0 1.5rem 1.35rem;
  border-left:2px solid var(--ambar);
  font-family:var(--ff-d);font-size:clamp(1.12rem,4.4vw,1.5rem);
  font-weight:600;line-height:1.3;letter-spacing:-.015em;max-width:34ch;
}
.pull span{display:block;margin-top:.6rem;color:var(--mut);font-weight:400;font-size:.86em}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--ambar);color:var(--carvao);
  font-family:var(--ff-b);font-weight:600;font-size:.94rem;letter-spacing:.005em;
  padding:.95rem 1.5rem;border-radius:var(--r);text-align:center;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
  will-change:transform;
}
.btn:hover{background:#DDA047;transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(201,138,46,.7)}
.btn:active{transform:translateY(0)}
.btn--lg{width:100%;padding:1.12rem 1.5rem;font-size:1rem}
.btn--sm{padding:.6rem 1rem;font-size:.85rem}
.btn--full{width:100%}
.btn--dark{background:var(--carvao);color:var(--claro)}
.btn--dark:hover{background:#20262A;box-shadow:0 10px 26px -12px rgba(16,19,21,.6)}
/* CTA WhatsApp — cor + ícone da marca (reconhecimento/conversão) */
.btn--wa{background:#25D366;color:#0a2e1a}
.btn--wa:hover{background:#1Fc75E;box-shadow:0 10px 26px -10px rgba(37,211,102,.55)}
.wa-ico{width:1.2em;height:1.2em;flex:none}
.btn--ghost{background:transparent;color:var(--claro);border:1px solid rgba(244,246,246,.3)}
.btn--ghost:hover{background:rgba(244,246,246,.08);box-shadow:none}

.ctarow{margin-top:2.5rem}
.micro{margin-top:.9rem;font-size:.82rem;line-height:1.5;color:var(--mut);max-width:44ch}

/* ---------- HEADER ---------- */
.hdr{
  position:sticky;top:0;z-index:90;background:rgba(244,246,246,.92);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(16,19,21,.1);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.hdr.is-dark{background:rgba(16,19,21,.92);border-bottom-color:rgba(244,246,246,.14);color:var(--claro)}
.hdr__in{display:flex;align-items:center;gap:1rem;height:60px}

.brand{display:flex;align-items:center;gap:.6rem;margin-right:auto}
.brand__logo{display:block;height:34px;width:auto}
/* logo adaptativo: navy no header claro, branco no header escuro */
.brand__logo--white{display:none}
.hdr.is-dark .brand__logo--navy{display:none}
.hdr.is-dark .brand__logo--white{display:block}
.ft__logo{height:44px;margin-bottom:1rem}

.nav{
  position:fixed;inset:60px 0 auto 0;z-index:80;
  display:grid;background:var(--carvao);
  max-height:0;overflow:hidden;transition:max-height .34s var(--ease);
}
.nav.is-open{max-height:70vh;border-bottom:1px solid rgba(244,246,246,.14)}
.nav__l{
  padding:1.05rem var(--pad);color:var(--claro);font-weight:600;font-size:.98rem;
  border-bottom:1px solid rgba(244,246,246,.08);
}
.nav__l.is-active{color:var(--ambar)}

.hdr__cta{display:none}

.burger{width:34px;height:34px;position:relative;flex:none}
.burger span{
  position:absolute;left:6px;right:6px;height:2px;background:currentColor;
  transition:transform .28s var(--ease),opacity .2s;
}
.burger span:first-child{top:12px}
.burger span:last-child{bottom:12px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-5px) rotate(-45deg)}

/* barra de progresso de leitura */
.hdr__prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--ambar);transition:width .1s linear;
}

/* ---------- 1 · HERO (foto do cliente) ---------- */
.hero{padding:0;background:var(--carvao)}
.hero__stage{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;min-height:min(88svh,720px);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:52% 8%;display:block}
/* véu de legibilidade — mobile: escurece o rodapé onde mora o texto */
.hero__stage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(15,34,56,.35) 0%, rgba(15,34,56,.10) 28%,
    rgba(15,34,56,.78) 64%, rgba(15,34,56,.97) 88%, var(--carvao) 100%);
}
.hero__in{
  position:relative;z-index:2;width:100%;align-self:flex-end;
  padding-top:13rem;padding-bottom:2.75rem;
}
/* entrada só de deslize — NUNCA mexe em opacity: o texto está sempre visível,
   mesmo sem JS, em aba oculta ou se a animação não rodar (LCP-safe de verdade) */
.hero__in > *{animation:heroUp .7s var(--ease) both}
.hero__in .tag{animation-delay:.04s}
.hero__in .hero__h1{animation-delay:.10s}
.hero__in .hero__sub{animation-delay:.18s}
.hero__in .hero__act{animation-delay:.26s}
@keyframes heroUp{from{transform:translateY(14px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero__in > *{opacity:1;animation:none}
}

.tag{
  font-family:var(--ff-m);font-size:.68rem;font-weight:500;line-height:1.9;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grafite-cl);
  max-width:42ch;margin-bottom:1.75rem;padding-left:1rem;
  border-left:2px solid var(--petroleo-cl);
}
.tag i{font-style:normal;color:var(--ambar);margin:0 .2rem}

.hero__h1{
  font-size:clamp(2.05rem,8.6vw,4.15rem);line-height:1.04;letter-spacing:-.035em;
  max-width:16ch;margin-bottom:1.5rem;
}
.hero__sub{font-size:1rem;line-height:1.62;color:var(--grafite-cl);max-width:56ch;margin-bottom:2.25rem}
.hero__act{max-width:26rem}

/* retrato do diretor técnico (Quem somos) */
.retrato{margin:2rem 0 2.25rem;max-width:320px}
.retrato img{
  width:100%;height:auto;display:block;border-radius:var(--r);
  border-bottom:3px solid var(--ambar);box-shadow:0 18px 40px -22px rgba(15,34,56,.55);
}
.retrato figcaption{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mut);margin-top:.7rem;padding-left:.1rem;
}
@media (min-width:56.25em){
  .retrato{float:right;margin:.25rem 0 1.25rem 2.75rem;max-width:300px}
}

/* barra de credibilidade */
.cred{border-top:1px solid rgba(244,246,246,.16);background:rgba(244,246,246,.03)}
.cred__l{
  display:flex;gap:1.5rem;overflow-x:auto;padding:1rem 0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cred__l::-webkit-scrollbar{display:none}
.cred__l li{
  flex:none;font-family:var(--ff-m);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--grafite-cl);white-space:nowrap;
  padding-right:1.5rem;border-right:1px solid rgba(244,246,246,.14);
}
.cred__l li:last-child{border-right:0;padding-right:var(--pad)}
.cred__l b{color:var(--ambar);font-weight:500}

/* ---------- 2 · PROBLEMA ---------- */
.prob{display:grid;gap:1.75rem}
.prob li{padding-left:1.35rem;border-left:2px solid var(--ln);transition:border-color .3s var(--ease)}
.prob li:hover{border-left-color:var(--ambar)}
.prob h3{font-size:1.06rem;line-height:1.3;margin-bottom:.4rem}
.prob p{color:var(--mut);font-size:.95rem}

/* faixa de imagem */
.band{margin:0;background:var(--carvao);overflow:hidden;height:180px}
.band--tall{height:220px}
/* SVGs já nascem na paleta — nada de grayscale, que apagaria o âmbar e o petróleo.
   Ao trocar por FOTO (jpg/webp), aplicar .band--foto para uniformizar o tratamento. */
.band img{width:100%;height:100%;object-fit:cover}
.band--foto img{filter:grayscale(1) contrast(1.06) brightness(.85)}

/* ---------- 3 · SITUAÇÕES ---------- */
.sit{display:grid;gap:1px;background:var(--ln);border-block:1px solid var(--ln)}
.sit__c{background:var(--bg);padding:1.85rem 0 1.85rem 0;position:relative}
.sit__n{
  display:block;font-family:var(--ff-m);font-size:.72rem;font-weight:500;
  color:var(--ambar);letter-spacing:.16em;margin-bottom:.85rem;
}
.sit__n::after{content:"";display:inline-block;width:1.5rem;height:1px;background:var(--ln);margin-left:.65rem;vertical-align:middle}
.sit__c h3{font-size:1.2rem;margin-bottom:.65rem;max-width:18ch}
.sit__c p{color:var(--mut);font-size:.94rem}

/* linha do tempo */
.tl{display:grid;gap:1.25rem;margin-top:2.5rem}
.tl__i{padding-top:.9rem;border-top:2px solid var(--petroleo-cl)}
.tl__i span{
  display:block;font-family:var(--ff-m);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ambar);margin-bottom:.35rem;
}
.tl__i p{font-size:.9rem;color:var(--mut)}

/* ---------- 4 · ÁREAS ---------- */
.area{display:grid;gap:1px;background:var(--ln);border:1px solid var(--ln)}
.area__c{
  background:var(--bg);padding:1.6rem 1.35rem;position:relative;
  transition:background .3s var(--ease);
}
.area__c::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--petroleo);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);
}
.area__c:hover::before{transform:scaleY(1)}
.area__c h3{font-size:1.08rem;margin-bottom:.5rem}
.area__c p{color:var(--mut);font-size:.92rem}

/* ---------- 5 · COMO FUNCIONA ---------- */
.step{display:grid;gap:0}
.step li{
  position:relative;padding:1.6rem 0 1.6rem 3.25rem;
  border-bottom:1px solid var(--ln);
}
.step li:last-child{border-bottom:0}
.step__n{
  position:absolute;left:0;top:1.65rem;
  font-family:var(--ff-m);font-size:.82rem;font-weight:500;color:var(--ambar);
}
.step li::before{
  content:"";position:absolute;left:.62rem;top:2.9rem;bottom:-.3rem;width:1px;background:var(--ln);
}
.step li:last-child::before{display:none}
.step h3{font-size:1.14rem;margin-bottom:.45rem}
.step p{color:var(--mut);font-size:.94rem}
.step b{color:var(--fg);font-weight:600}

/* ---------- 6 · DIREÇÃO TÉCNICA ---------- */
.dir{display:grid;gap:2rem}
.dir__id{padding-left:1.35rem;border-left:3px solid var(--ambar)}
.dir__name{font-family:var(--ff-d);font-weight:700;font-size:1.5rem;letter-spacing:-.025em;line-height:1.15}
.dir__role{color:var(--mut);font-size:.95rem;margin-top:.2rem}
.dir__reg{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.dir__reg span{
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.06em;
  padding:.35rem .65rem;border:1px solid var(--ln);color:var(--mut);
}
.dir__cv{display:grid;gap:.85rem}
.dir__cv li{
  position:relative;padding-left:1.35rem;font-size:.94rem;color:var(--mut);line-height:1.5;
}
.dir__cv li::before{
  content:"";position:absolute;left:0;top:.62rem;width:.5rem;height:1px;background:var(--ambar);
}
.dir__cv b{color:var(--fg);font-weight:600}

.quote{
  margin:2.5rem 0 0;padding:1.75rem 0 0;border-top:1px solid var(--ln);
}
.quote p{
  font-family:var(--ff-d);font-weight:600;font-size:clamp(1.1rem,4.2vw,1.4rem);
  line-height:1.35;letter-spacing:-.015em;max-width:38ch;
}
.quote p::before{content:"“";color:var(--ambar)}
.quote p::after{content:"”";color:var(--ambar)}
.quote cite{
  display:block;margin-top:1rem;font-style:normal;
  font-family:var(--ff-m);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);
}

/* ---------- 7 · MÉTODO ---------- */
.met{display:grid;gap:1px;background:var(--ln)}
.met__c{background:var(--bg);padding:1.75rem 0}
.met__c h3{font-size:1.12rem;margin-bottom:.55rem;color:var(--ambar)}
.met__c p{color:var(--mut);font-size:.94rem}

/* ---------- 8 · LIMITES ---------- */
.lim{display:grid;gap:1.6rem}
.lim li{padding-left:1.35rem;border-left:2px solid var(--ln)}
.lim h3{font-size:1.02rem;line-height:1.35;margin-bottom:.4rem}
.lim p{color:var(--mut);font-size:.93rem}

/* ---------- 9 · FAQ ---------- */
.faq{border-top:1px solid var(--ln)}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:1.15rem 0;cursor:pointer;list-style:none;
  font-family:var(--ff-d);font-weight:600;font-size:1rem;line-height:1.35;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;flex:none;
  font-family:var(--ff-m);font-size:1.15rem;color:var(--ambar);line-height:1;
  transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{
  overflow:hidden;
  animation:faqIn .3s var(--ease);
}
.faq details > div p{padding:0 0 1.25rem;color:var(--mut);font-size:.94rem;max-width:62ch}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 10 · CTA FINAL ---------- */
.final{padding-block:4.5rem}
.final .h2{font-size:clamp(1.6rem,6vw,2.5rem);max-width:24ch}
.final .ctarow{max-width:26rem}

/* ---------- RODAPÉ ---------- */
.ft{background:var(--carvao);color:var(--grafite-cl);padding-top:3rem;font-size:.9rem}
.ft__in{display:grid;gap:2rem;padding-bottom:2.5rem}
.ft__brand .brand__mark{margin-bottom:.85rem}
.ft__name{
  font-family:var(--ff-d);font-weight:700;font-size:1.15rem;color:var(--claro);
  letter-spacing:-.025em;margin-bottom:.5rem;
}
.ft__legal{font-size:.8rem;line-height:1.6}
.ft__t{
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ambar);margin-bottom:.6rem;
}
.ft__col p{line-height:1.65}
.ft__col a:hover{color:var(--claro);text-decoration:underline}
.lnk{
  text-align:left;color:inherit;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(152,162,166,.4);
}
.lnk:hover{color:var(--claro);text-decoration-color:var(--ambar)}

.ft__base{
  display:grid;gap:.5rem;padding-block:1.35rem;
  border-top:1px solid rgba(244,246,246,.1);
  font-size:.76rem;line-height:1.6;
}

/* ---------- CTA FIXO MOBILE ---------- */
.fixcta{
  position:fixed;left:0;right:0;bottom:0;z-index:85;
  padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(16,19,21,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(244,246,246,.14);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.fixcta.is-on{transform:none}

/* ---------- COOKIES ---------- */
.cbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--carvao-2);color:var(--claro);
  border-top:2px solid var(--ambar);
  padding:1.1rem 0 calc(1.1rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .4s var(--ease);
}
.cbar.is-on{transform:none}
.cbar__in{display:grid;gap:1rem}
.cbar p{font-size:.85rem;line-height:1.55;color:var(--grafite-cl)}
.cbar .lnk{color:var(--claro)}
.cbar__act{display:flex;gap:.65rem}
.cbar__act .btn{flex:1}

/* ---------- MODAIS ---------- */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.modal__bg{position:absolute;inset:0;background:rgba(16,19,21,.75);animation:fade .25s var(--ease)}
.modal__box{
  position:relative;width:100%;max-width:720px;max-height:88vh;overflow-y:auto;
  background:var(--claro);color:var(--carvao);
  padding:2.25rem 1.35rem 2.5rem;
  border-top:3px solid var(--ambar);
  animation:up .32s var(--ease);-webkit-overflow-scrolling:touch;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.modal__x{
  position:absolute;top:.75rem;right:1rem;
  width:2.25rem;height:2.25rem;font-size:1.6rem;line-height:1;color:var(--grafite);
}
.modal__x:hover{color:var(--carvao)}
.modal__box h2{font-size:1.5rem;margin-bottom:1.35rem;padding-right:2rem}
.modal__body h3{
  font-family:var(--ff-b);font-size:.95rem;font-weight:600;
  margin:1.5rem 0 .4rem;color:var(--petroleo);letter-spacing:0;
}
.modal__body p{font-size:.9rem;line-height:1.65;color:var(--grafite);margin-bottom:.7rem}
.modal__body b{color:var(--carvao);font-weight:600}
.modal__body a{color:var(--petroleo);text-decoration:underline;text-underline-offset:2px}

/* ---------- REVEAL (assinatura de movimento) ---------- */
[data-rev]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-rev].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-rev]{opacity:1!important;transform:none!important;transition:none!important}
  .btn,.area__c::before,.faq summary::after,.fixcta,.cbar,.nav{transition:none!important}
  .modal__bg,.modal__box,.faq details > div{animation:none!important}
}

/* =========================================================
   BREAKPOINTS — mobile first, do menor pro maior
   ========================================================= */

/* ---------- >= 560px ---------- */
@media (min-width:35em){
  :root{--pad:2rem}
  .sec{padding:5rem 0}
  .btn--lg{width:auto;min-width:20rem}
  .cbar__in{grid-template-columns:1fr auto;align-items:center;gap:1.5rem}
  .cbar__act{flex:none}
  .cbar__act .btn{flex:none;min-width:7rem}
  .ft__base{grid-template-columns:1fr auto;gap:1.5rem}
  .band{height:230px}
  .band--tall{height:300px}
  .sit{grid-template-columns:1fr 1fr}
  .sit__c{padding:1.85rem 1.5rem}
  .tl{grid-template-columns:repeat(3,1fr)}
  .area{grid-template-columns:1fr 1fr}
  .met{grid-template-columns:repeat(3,1fr)}
  .met__c{padding:1.75rem 1.4rem}
  .modal{align-items:center}
  .modal__box{border:1px solid rgba(16,19,21,.12);border-top:3px solid var(--ambar);padding:2.5rem 2.25rem 2.75rem}
}

/* ---------- >= 768px ---------- */
@media (min-width:48em){
  .sec{padding:6rem 0}
  .sec--tight{padding:4.5rem 0}
  .prob{grid-template-columns:1fr 1fr;gap:2.25rem 2.5rem}
  .lim{grid-template-columns:1fr 1fr;gap:2rem 2.5rem}
  .dir{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3rem;align-items:start}
  .ft__in{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
  .step li{padding-left:4rem}
  .band{height:280px}
  .band--tall{height:360px}
}

/* ---------- >= 900px — nav vira horizontal ---------- */
@media (min-width:56.25em){
  .hdr__in{height:72px;gap:2rem}
  .burger{display:none}
  .hdr__cta{display:inline-flex}
  .nav{
    position:static;inset:auto;display:flex;gap:1.85rem;
    background:none;max-height:none;overflow:visible;
  }
  .nav__l{
    padding:0;border:0;color:inherit;font-size:.9rem;font-weight:500;
    position:relative;opacity:.72;transition:opacity .25s var(--ease);
  }
  .nav__l::after{
    content:"";position:absolute;left:0;right:0;bottom:-.4rem;height:1px;
    background:var(--ambar);transform:scaleX(0);transform-origin:left;
    transition:transform .28s var(--ease);
  }
  .nav__l:hover{opacity:1}
  .nav__l:hover::after,.nav__l.is-active::after{transform:scaleX(1)}
  .nav__l.is-active{opacity:1;color:inherit}

  .fixcta{display:none}

  /* desktop: doutor à direita da foto, texto na faixa azul à esquerda */
  .hero__stage{min-height:min(82vh,640px)}
  .hero__bg img{object-position:78% 26%}
  .hero__stage::after{
    background:linear-gradient(90deg,
      var(--carvao) 0%, rgba(15,34,56,.94) 30%,
      rgba(15,34,56,.55) 52%, rgba(15,34,56,.08) 72%, rgba(15,34,56,0) 84%);
  }
  .hero__in{align-self:center;padding-top:2.5rem;padding-bottom:2.5rem}
  .hero .tag{max-width:40ch}
  .hero__h1{font-size:clamp(3rem,5.4vw,4.15rem);max-width:15ch}
  .hero__sub{max-width:46ch}
  .sit{grid-template-columns:repeat(4,1fr)}
  .sit__c h3{font-size:1.12rem}
  .area{grid-template-columns:repeat(3,1fr)}
  .step{grid-template-columns:1fr 1fr;gap:0 3rem}
  .step li{border-bottom:1px solid var(--ln)}
  .step li:nth-last-child(-n+2){border-bottom:0}
  .step li::before{display:none}
  .faq summary{font-size:1.06rem}
}

/* ---------- >= 1120px ---------- */
@media (min-width:70em){
  :root{--pad:2.5rem}
  .sec{padding:7rem 0}
  .h2{font-size:2.9rem}
  .hero__sub{font-size:1.06rem}
  .band{height:340px}
  .band--tall{height:420px}
}

/* ---------- impressão ---------- */
@media print{
  .hdr,.fixcta,.cbar,.modal,.band,.axis,.hero__mirror,.hero__band,.hero__edge{display:none!important}
  .sec{padding:1.5rem 0;background:#fff!important;color:#000!important}
  [data-rev]{opacity:1!important;transform:none!important}
}

/* =========================================================
   ========== V2 · CAMADA NOVA (2026-07-22) ================
   Hero de polaridade · eixo com scrub · ficha técnica
   Tudo aqui degrada: sem JS, a página volta a ser a v1 sólida.
   ========================================================= */

/* ---------- O EIXO (assinatura de movimento · GSAP scrub) ---------- */
main{position:relative}
.axis{
  position:absolute;top:0;bottom:0;left:var(--pad);
  width:2px;z-index:3;pointer-events:none;
}
.axis__fill{
  display:block;width:100%;height:100%;
  background:linear-gradient(180deg,var(--ambar) 0%,rgba(201,138,46,.45) 65%,rgba(201,138,46,.12) 100%);
  transform:scaleY(0);transform-origin:top center;
}
/* sem JS/GSAP o eixo simplesmente não aparece — o fio estático do .sec::before continua lá */
.no-axis .axis{display:none}

/* pontos do eixo: a numeração das 4 situações acende na passagem */
.sit__n{transition:color .45s var(--ease),text-shadow .45s var(--ease)}
.sit__n.is-lit{color:var(--ambar);text-shadow:0 0 18px rgba(201,138,46,.55)}

/* O respiro do hero mora no palco, não na seção: assim a faixa clara encosta no
   header em todo breakpoint (as media queries do .sec reintroduziam o padding
   e abriam uma tarja escura só no desktop). */
.sec.hero{padding-block:0}

/* ---------- HERO · A LINHA DE POLARIDADE ----------
   O eixo divide o hero: carvão de um lado, branco clínico do outro.
   O H1 atravessa a linha e inverte de cor ao cruzar.
   Só liga quando o JS clona a camada espelhada (.is-split). */
.hero__band,.hero__edge,.hero__mirror{display:none}

.hero__stage.is-split .hero__band{
  display:block;position:absolute;top:0;bottom:0;
  left:0;width:var(--split,42%);background:var(--claro);z-index:0;
}
.hero__stage.is-split .hero__edge{
  display:block;position:absolute;top:0;bottom:0;
  left:var(--split,58%);width:2px;background:var(--ambar);z-index:3;
}
.hero__stage.is-split .hero__mirror{
  display:block;position:absolute;inset:0;z-index:2;
  /* herda o padding do palco: sem isto a camada espelhada sobe e desalinha do texto base */
  padding-top:inherit;
  /* recorta tudo à direita da linha: sobra só o pedaço que cai sobre o branco clínico */
  clip-path:inset(0 calc(100% - var(--split,42%)) 0 0);
  pointer-events:none;color:var(--carvao);
}
/* a camada espelhada lê o fundo claro */
.hero__mirror .hero__h1{color:var(--carvao)}
.hero__mirror .hero__sub,.hero__mirror .micro{color:var(--grafite)}
.hero__mirror .tag{color:var(--grafite);border-left-color:var(--petroleo)}
.hero__mirror .tag i{color:var(--petroleo)}

/* navegador sem clip-path: fica o hero escuro da v1, sem quebra */
@supports not (clip-path:inset(0 0 0 50%)){
  .hero__stage.is-split .hero__band,
  .hero__stage.is-split .hero__edge,
  .hero__stage.is-split .hero__mirror{display:none}
}

/* ---------- 6 · FICHA TÉCNICA (seção nova da copy) ---------- */
.ficha{
  display:grid;gap:1.75rem;margin-top:2.5rem;
  padding:1.75rem 0 0;border-top:2px solid var(--ambar);
}
.ficha__t{
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ambar);margin-bottom:.65rem;
}
.ficha__name{
  font-family:var(--ff-d);font-weight:700;font-size:clamp(1.35rem,5vw,1.75rem);
  letter-spacing:-.025em;line-height:1.12;
}
.ficha__role{color:var(--mut);font-size:.95rem;margin-top:.35rem}

.ficha__d{display:grid;gap:1.1rem;margin:0}
.ficha__d > div{padding-left:1.1rem;border-left:1px solid var(--ln)}
.ficha__d dt{
  font-family:var(--ff-m);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-bottom:.25rem;
}
.ficha__d dd{margin:0;font-size:.98rem;line-height:1.45;color:var(--fg);font-weight:600}
.ficha__nota{margin-top:2rem}

/* ---------- REVEAL v2 (Motion.dev assume; isto é o estado inicial) ----------
   Com o motion layer ativo, quem anima é o Motion (WAAPI). A transição CSS sai
   de cena pra não brigar com ele — mas o estado inicial (invisível) continua,
   e a rede de segurança do script.js usa a classe .is-in. */
[data-motion="on"] [data-rev]{transition:none}
[data-motion="on"] [data-rev].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .axis__fill{transform:scaleY(1)!important}
  .sit__n{transition:none!important}
}

/* ---------- BREAKPOINTS DA CAMADA V2 ---------- */
@media (min-width:48em){
  .ficha{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.5rem;align-items:start}
  .ficha__d{gap:1.35rem}
}
@media (min-width:56.25em){
  .axis{width:2px}

  /* A barra de credibilidade da v2 tem itens longos (frases, não selos).
     No mobile ela continua sendo um scroller; no desktop passa a quebrar linha,
     senão o último item ("avaliação preliminar") fica cortado fora da tela. */
  .cred__l{flex-wrap:wrap;overflow-x:visible;row-gap:.4rem}
  .cred__l li{border-right:1px solid rgba(244,246,246,.14)}
  .cred__l li:last-child{padding-right:0}
}