/* ============================================================
   LAMS COMPANY — Sistema visual
   Percepção → Identidade → Presença → Autoridade → Crescimento
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Base */
  --void:#08090A;
  --black:#0B0C0E;
  --panel:#101216;
  --panel-2:#15181C;
  --paper:#F1F0EB;
  --paper-2:#E7E5DE;
  --paper-ink:#111316;

  /* Tinta */
  --white:#F7F6F3;
  --warm:#8E8D86;
  --dim:rgba(247,246,243,.52);
  --dimmer:rgba(247,246,243,.54);
  --faint:rgba(247,246,243,.16);

  /* Linhas */
  --line:rgba(247,246,243,.09);
  --line-2:rgba(247,246,243,.16);
  --line-dark:rgba(17,19,22,.12);

  /* Acento — platina */
  --platinum:linear-gradient(115deg,#FFFFFF 0%,#D3D7DB 18%,#8E959D 34%,#F4F5F6 50%,#A9AFB6 68%,#E8EAEC 84%,#FFFFFF 100%);
  --accent:#C6CBD1;

  /* Tipografia */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",'Times New Roman',Times,serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;

  /* Ritmo */
  --gutter:clamp(20px,5vw,72px);
  --maxw:1480px;
  --measure:56ch;

  /* Movimento */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --overpull:44px;
  --slow:1100ms;
  --med:640ms;
  --fast:300ms;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--void);
  color:var(--white);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100vh;height:100dvh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
::selection{background:rgba(247,246,243,.16);color:#fff}

/* ---------- 3. Tipografia ---------- */
.display{
  font-weight:300;
  font-size:clamp(2.5rem,6.2vw,5.6rem);
  /* tamanhos pequenos precisam de mais ar; o valor grande fecha no breakpoint */
  line-height:1.03;
  letter-spacing:-.028em;
  font-optical-sizing:auto;
  text-wrap:balance;
}
@media (min-width:861px){
  .display{line-height:.94;letter-spacing:-.042em}
}
.h1{
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.032em;
  font-size:clamp(2.1rem,5.4vw,4.9rem);
}
.h2{
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.028em;
  font-size:clamp(1.75rem,3.9vw,3.4rem);
}
.h3{
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.022em;
  font-size:clamp(1.32rem,2.3vw,2rem);
}
.lead{
  font-weight:300;
  font-size:clamp(1.02rem,1.42vw,1.32rem);
  line-height:1.55;
  letter-spacing:-.014em;
  color:var(--dim);
  max-width:var(--measure);
}
.body{
  font-size:clamp(.97rem,1.15vw,1.09rem);
  line-height:1.62;
  letter-spacing:-.01em;
  color:var(--dim);
  max-width:var(--measure);
}
.em{color:var(--white)}
.serif{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.012em}

/* Micro-caps — HUD */
.micro{
  font-size:10px;
  font-weight:400;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--dimmer);
  line-height:1;
}
.micro-2{
  font-size:clamp(12px,1.05vw,13.5px);
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--warm);
  line-height:1.4;
}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:clamp(96px,15vh,190px)}
.sec--tight{padding-block:clamp(72px,10vh,128px)}
.paper{background:var(--paper);color:var(--paper-ink)}
.paper .lead,.paper .body{color:rgba(17,19,22,.62)}
.paper .em{color:var(--paper-ink)}
.paper .micro{color:rgba(17,19,22,.62)}
.paper .micro-2{color:rgba(17,19,22,.62)}
.paper .rule{background:var(--line-dark)}
.rule{height:1px;width:100%;background:var(--line);border:0}

/* ---------- 6. Preloader ---------- */
.pre{
  position:fixed;inset:0;z-index:9999;background:var(--void);
  display:grid;place-items:center;
  transition:opacity 420ms var(--ease),visibility 420ms;
}
.pre.done{opacity:0;visibility:hidden}
.pre__mark{position:relative;width:clamp(200px,26vw,330px)}
@keyframes preIn{to{opacity:1;transform:scale(1)}}
.pre__bar{
  position:absolute;left:0;right:0;bottom:-42px;
  height:1px;background:var(--line);overflow:hidden;
}
.pre__bar i{display:block;height:100%;width:100%;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform 560ms var(--ease-io)}
.pre.load .pre__bar i{transform:scaleX(1)}
.pre__pct{
  position:absolute;left:50%;bottom:-72px;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dimmer);
}

/* ---------- 7. Ticker ---------- */
.ticker{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:30px;display:flex;align-items:center;overflow:hidden;
  background:rgba(8,9,10,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.ticker__track{display:flex;gap:0;white-space:nowrap;animation:tick 46s linear infinite;will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{
  display:inline-flex;align-items:center;gap:34px;padding-right:34px;
  font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--dimmer);
}
.ticker__track span::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--faint)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- 8. Navegação ---------- */
.nav{
  position:fixed;top:30px;left:0;right:0;z-index:890;
  transition:transform 560ms var(--ease),background 400ms linear,border-color 400ms linear;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(8,9,10,.6);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border-bottom-color:var(--line);
}
.nav.hide{transform:translateY(calc(-100% - 30px))}
.nav__in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:64px;
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
}
.brand{display:flex;align-items:center;gap:10px}
.nav__links{display:flex;align-items:center;gap:6px}
.nav__links a{
  position:relative;padding:13px 15px;border-radius:999px;
  font-size:12.5px;letter-spacing:-.005em;color:var(--dim);
  transition:color 320ms var(--ease);
}
.nav__links a::before{
  content:"";position:absolute;inset:0;border-radius:999px;
  background:rgba(247,246,243,.07);
  transform:scale(.9);opacity:0;
  transition:transform 420ms var(--ease),opacity 320ms var(--ease);
}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::before{transform:scale(1);opacity:1}
.nav__links a span{position:relative}

/* Botão pílula */
.pill{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:11px 12px 11px 22px;border-radius:999px;
  background:var(--white);color:#0B0C0E;
  font-size:12.5px;font-weight:400;letter-spacing:-.008em;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  transition:transform 420ms var(--ease),box-shadow 420ms var(--ease);
  box-shadow:0 0 0 0 rgba(255,255,255,0);
}
.pill::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
  background:var(--platinum);background-size:200% 100%;
  opacity:0;transition:opacity 460ms var(--ease);
}
.pill:hover{box-shadow:0 10px 34px -12px rgba(255,255,255,.36)}
.pill:hover::before{opacity:1}
.pill:active{transform:scale(.975);transition-duration:110ms}
.pill__ico{
  width:26px;height:26px;border-radius:50%;background:rgba(11,12,14,.1);
  display:grid;place-items:center;overflow:hidden;
}
.pill__ico svg{width:11px;height:11px;transition:transform 480ms var(--ease)}
.pill:hover .pill__ico svg{transform:translate(15px,-15px)}
.pill__ico svg:last-child{position:absolute;transform:translate(-15px,15px)}
.pill:hover .pill__ico svg:last-child{transform:translate(0,0)}

/* Botão fantasma */
.ghost{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:13px 24px;border-radius:999px;
  border:1px solid var(--line-2);
  font-size:13px;letter-spacing:-.006em;color:var(--white);
  overflow:hidden;isolation:isolate;
  transition:border-color 420ms var(--ease),color 420ms var(--ease),transform 420ms var(--ease);
}
.ghost::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
  background:var(--white);
  transform:translateY(101%);
  transition:transform 620ms var(--ease);
}
.ghost:hover{color:#0B0C0E;border-color:transparent}
.ghost:hover::before{transform:translateY(0)}
.ghost:active{transform:scale(.98);transition-duration:110ms}
.ghost .ar{transition:transform 480ms var(--ease)}
.ghost:hover .ar{transform:translateX(4px)}
.paper .ghost{color:var(--paper-ink);border-color:var(--line-dark)}
.paper .ghost::before{background:var(--paper-ink)}
.paper .ghost:hover{color:var(--paper)}

/* Menu mobile */
.burger{display:none;width:44px;height:44px;place-items:center;border-radius:999px;border:1px solid var(--line-2)}
.burger i{display:block;width:15px;height:1px;background:var(--white);transition:transform 420ms var(--ease),opacity 240ms}
.burger i+i{margin-top:4px}
.burger.on i:first-child{transform:translateY(2.5px) rotate(45deg)}
.burger.on i:last-child{transform:translateY(-2.5px) rotate(-45deg)}
.sheet{
  position:fixed;inset:0;z-index:880;background:rgba(8,9,10,.94);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:var(--gutter);
  opacity:0;visibility:hidden;
  transition:opacity 460ms var(--ease),visibility 460ms;
}
.sheet.on{opacity:1;visibility:visible}
.sheet a{
  font-size:clamp(1.9rem,7vw,2.7rem);font-weight:300;letter-spacing:-.03em;
  padding-block:10px;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(18px);
  transition:opacity 620ms var(--ease),transform 620ms var(--ease);
}
.sheet.on a{opacity:1;transform:none}
.sheet.on a:nth-child(1){transition-delay:80ms}
.sheet.on a:nth-child(2){transition-delay:140ms}
.sheet.on a:nth-child(3){transition-delay:200ms}
.sheet.on a:nth-child(4){transition-delay:260ms}
.sheet.on a:nth-child(5){transition-delay:320ms}

/* ---------- 9. HUD ---------- */
.hud{position:absolute;z-index:5;pointer-events:none}
.hud--tl{top:calc(30px + 78px);left:var(--gutter)}
.hud--tr{top:calc(30px + 78px);right:var(--gutter);text-align:right}
.hud--bl{bottom:34px;left:var(--gutter)}
.hud--br{bottom:34px;right:var(--gutter);text-align:right}

/* ---------- 10. Hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding-block:clamp(96px,12vh,132px)
               calc(var(--marca-h,160px) + clamp(58px,7vh,92px));
  text-align:center;overflow:hidden;
}
.hero__in{position:relative;z-index:4;margin-top:auto;width:100%;max-width:1300px;padding-inline:var(--gutter);margin-inline:auto}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 12px;border-radius:999px;
  border:1px solid var(--line-2);
  background:rgba(247,246,243,.03);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  margin-bottom:clamp(22px,3.4vh,34px);
}
/* A tinta do ASSETS_07 é rgb(52,52,52) — some no preto do hero.
   brightness(0) zera a cor preservando o alfa, invert(1) leva a
   branco puro: fica branco independente da cor de origem. */
.hero__badge img{width:14px;height:14px;opacity:.9;filter:brightness(0) invert(1)}
.hero__badge span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.hero h1{margin-bottom:clamp(24px,3.4vh,34px)}
.hero .lead{margin-inline:auto;margin-bottom:clamp(28px,4vh,42px);max-width:46ch}

.hero__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(rgba(8,9,10,.5),rgba(8,9,10,.5)),
    radial-gradient(76% 60% at 50% 46%,rgba(8,9,10,.34) 0%,rgba(8,9,10,.72) 62%,var(--void) 100%),
    /* bandas de topo e base: é onde vivem os rótulos de canto e o
       indicador, fora do alcance do scrim local do texto */
    linear-gradient(to bottom,
      var(--void) 0%, rgba(8,9,10,.52) 20%,
      transparent 34%, transparent 66%,
      rgba(8,9,10,.52) 82%, var(--void) 100%);
}

/* Indicador de rolagem */
.scroll-cue{
  position:absolute;bottom:34px;right:var(--gutter);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.scroll-cue .micro{writing-mode:vertical-rl;letter-spacing:.24em;font-size:9px}
.scroll-cue .track{width:1px;height:52px;background:var(--line-2);overflow:hidden;position:relative}
.scroll-cue .track i{
  position:absolute;top:0;left:0;width:100%;height:38%;background:var(--white);
  animation:cueRun 2.6s var(--ease-io) infinite;
}
@keyframes cueRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(270%)}}

/* ---------- 11. Revelações ---------- */
/* Gated em .js-anim: sem JS (ou se ele falhar antes de marcar o html),
   nada fica preso em opacity:0 e a página inteira continua legível. */
.js-anim [data-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
  transition-delay:var(--d,0ms);
}
.js-anim [data-reveal].is-in{opacity:1;transform:none}
.js-anim [data-reveal="fade"]{transform:none}
.js-anim [data-reveal="scale"]{transform:translateY(30px) scale(.985)}
.js-anim [data-reveal="scale"].is-in{transform:none}

/* Linhas mascaradas */
.ln{display:block;overflow:hidden;padding-block:.06em}
.ln>i{
  display:block;font-style:normal;
  transform:translateY(105%);
  transition:transform 1050ms var(--ease);
  transition-delay:calc(var(--i,0)*62ms + var(--d,0ms));
  will-change:transform;
}
.is-in .ln>i{transform:none}

/* Palavras */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.04em}
.wd>i{
  display:inline-block;font-style:normal;
  transform:translateY(105%);
  transition:transform 1050ms var(--ease);
  transition-delay:calc(var(--i,0)*46ms + var(--d,0ms));
}
.is-in .wd>i{transform:none}

/* ---------- 13. Perguntas (sequência fixada) ---------- */
.ask{position:relative;background:var(--black)}
.ask__rail{height:440vh}
.ask__stick{
  position:sticky;top:0;height:100svh;
  display:grid;place-items:center;overflow:hidden;
}
.ask__bg{
  position:absolute;top:50%;left:50%;width:min(78vh,86vw);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(198,203,209,.1) 0%,transparent 62%);
  filter:blur(50px);
  transition:opacity 900ms var(--ease);
}
.ask__q{
  position:absolute;inset:0;display:grid;place-items:center;
  padding-inline:var(--gutter);text-align:center;
  opacity:0;pointer-events:none;
}
.ask__q p{
  max-width:19ch;
  font-weight:300;line-height:1.06;letter-spacing:-.032em;
  font-size:clamp(1.9rem,5.2vw,4.4rem);
  transform:translateY(28px) scale(.99);
  transition:transform 1000ms var(--ease),opacity 800ms var(--ease);
}
.ask__q.on{opacity:1}
.ask__q.on p{transform:none}
.ask__q .n{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--dimmer);margin-bottom:26px;
}
.ask__prog{
  position:absolute;bottom:clamp(48px,8vh,84px);left:50%;transform:translateX(-50%);
  display:flex;gap:8px;
}
.ask__prog i{
  display:block;width:30px;height:1px;background:var(--line-2);position:relative;overflow:hidden;
}
.ask__prog i::after{
  content:"";position:absolute;inset:0;background:var(--white);
  transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--ease);
}
.ask__prog i.on::after{transform:scaleX(1)}

/* ---------- 14. Constelação ---------- */
.web__head{max-width:22ch;margin-bottom:clamp(20px,3vh,34px)}
.web__lead{margin-bottom:clamp(56px,8vh,96px)}
.web{
  position:relative;width:100%;aspect-ratio:16/9;min-height:440px;
  border:1px solid var(--line);border-radius:6px;
  background:
    radial-gradient(70% 60% at 50% 50%,rgba(198,203,209,.05),transparent 70%),
    var(--panel);
  overflow:hidden;
}
.web__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:
    repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 84px);
  mask-image:radial-gradient(72% 72% at 50% 50%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(72% 72% at 50% 50%,#000 0%,transparent 78%);
}
.web__svg{position:absolute;inset:0;width:100%;height:100%}
.web__svg path{
  fill:none;stroke:rgba(247,246,243,.2);stroke-width:1;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1500ms var(--ease),stroke 460ms var(--ease),opacity 460ms var(--ease);
  transition-delay:calc(var(--i)*110ms),0ms,0ms;
}
.web.is-in .web__svg path{stroke-dashoffset:0}
.web__svg path.lit{stroke:rgba(247,246,243,.78)}
.web.dim .web__svg path:not(.lit){opacity:.3}
.web__core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(76px,9vw,108px);aspect-ratio:1;border-radius:50%;
  background:#0B0C0E;border:1px solid var(--line-2);
  display:grid;place-items:center;
  box-shadow:0 0 70px -14px rgba(198,203,209,.3);
}
.web__core .mono{width:64%;aspect-ratio:1}
.web__core::after{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid var(--line);
}
.node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:12px 16px;border-radius:4px;
  cursor:default;
}
.node__dot{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--dimmer);
  transition:background 400ms var(--ease),box-shadow 400ms var(--ease),transform 400ms var(--ease);
}
.node__k{
  font-size:clamp(.98rem,1.5vw,1.24rem);font-weight:300;letter-spacing:-.02em;
  color:var(--dim);transition:color 400ms var(--ease);
}
.node__v{
  display:flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);
  opacity:0;transform:translateY(-5px);
  transition:opacity 460ms var(--ease),transform 460ms var(--ease),color 400ms var(--ease);
}
.node.on .node__dot{background:var(--white);box-shadow:0 0 0 4px rgba(247,246,243,.1);transform:translate(-50%,-50%) scale(1.15)}
.node.on .node__k{color:var(--white)}
.node.on .node__v{opacity:1;transform:none;color:var(--warm)}
.web__note{
  position:absolute;left:22px;bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.web__ring{width:26px;height:26px;opacity:.36}

/* ---------- 15. Declarações editoriais ---------- */
.stmt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:start}
.stmt__l{position:sticky;top:calc(30px + 92px)}
.stmt__r{display:flex;flex-direction:column;gap:clamp(22px,3.4vh,38px);padding-top:.4em}
.stmt__r p{font-size:clamp(1.06rem,1.62vw,1.42rem);line-height:1.48;letter-spacing:-.018em;color:var(--dim)}
.stmt__r p.hi{color:var(--white)}
.paper .stmt__r p{color:rgba(17,19,22,.6)}
.paper .stmt__r p.hi{color:var(--paper-ink)}

/* ---------- 17. Processo ---------- */
.proc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,6vw,110px);align-items:start}
.proc__l{position:sticky;top:calc(30px + 100px)}
.proc__count{
  display:flex;align-items:baseline;gap:8px;margin-top:clamp(30px,4.6vh,48px);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dimmer);
}
.proc__count b{
  font-family:var(--sans);font-weight:300;font-size:clamp(3rem,6vw,5rem);
  letter-spacing:-.04em;color:var(--white);line-height:.86;
  display:inline-block;min-width:1.7ch;
}
.proc__steps{display:flex;flex-direction:column}
.step{
  padding-block:clamp(30px,4.6vh,48px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,42px);
  transition:opacity 700ms var(--ease);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dimmer);padding-top:.5em}
.step__t{font-size:clamp(1.32rem,2.5vw,2.05rem);font-weight:300;letter-spacing:-.03em;line-height:1.06;margin-bottom:14px}
.step__d{font-size:clamp(.97rem,1.24vw,1.1rem);line-height:1.56;letter-spacing:-.012em;color:var(--dim);max-width:42ch}
.step__ico{width:22px;height:22px;opacity:.3;margin-top:14px;transition:opacity 600ms var(--ease)}
.step.on .step__ico{opacity:.72}

/* ---------- 18. Para quem ---------- */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.who__c{
  background:var(--void);padding:clamp(30px,4.4vw,54px) clamp(22px,2.6vw,38px);
  display:flex;flex-direction:column;gap:16px;
  transition:background 620ms var(--ease);
}
.who__c:hover{background:var(--panel)}
.who__n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dimmer)}
.who__t{font-size:clamp(1.05rem,1.5vw,1.28rem);font-weight:300;line-height:1.35;letter-spacing:-.022em;color:var(--white)}
.who__d{font-size:.95rem;line-height:1.55;letter-spacing:-.01em;color:var(--dim)}

/* ---------- 20. CTA final ---------- */
.end{position:relative;text-align:center;overflow:hidden}
.end__glow{
  position:absolute;top:16%;left:50%;width:min(88vh,96vw);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(198,203,209,.11) 0%,transparent 62%);
  filter:blur(40px);
}
.end__in{position:relative;z-index:2}
.end h2{max-width:17ch;margin-inline:auto}
.end .lead{margin:clamp(28px,4.4vh,44px) auto 0;max-width:50ch}
.end__lock{
  width:clamp(180px,24vw,300px);margin:clamp(56px,8vh,92px) auto clamp(30px,4.4vh,44px);
  opacity:.9;
}
.end__tag{margin-bottom:clamp(40px,6vh,64px)}
.end__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- 21. Rodapé ---------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(48px,7vh,72px) 30px}
.foot__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:clamp(26px,4vw,56px);
  align-items:start;padding-bottom:clamp(40px,6vh,64px);
}
.foot__brand p{margin-top:16px;font-size:.95rem;line-height:1.5;letter-spacing:-.012em;color:var(--dim);max-width:30ch}
.foot__col h3{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);margin-bottom:16px;font-weight:400}
.foot__col a,.foot__col p{display:block;font-size:.95rem;letter-spacing:-.012em;color:var(--dim);padding-block:11px;transition:color 320ms var(--ease)}
.foot__col a:hover{color:var(--white)}
.foot__br{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.foot__br img{width:52px;opacity:.6}
.foot__bot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line);
}

/* ---------- 23. Progresso de leitura ---------- */
.prog{position:fixed;top:0;left:0;right:0;height:1px;z-index:995;background:transparent}
.prog i{display:block;height:100%;width:100%;background:var(--white);transform:scaleX(0);transform-origin:left;opacity:.6}

/* ---------- 24. Utilidades ---------- */
.mono-ico{width:100%;height:100%;object-fit:contain}
.ar{display:inline-block;width:11px;height:11px;flex:none}
.center{text-align:center}
.mt-s{margin-top:clamp(22px,3vh,34px)}
.mt-m{margin-top:clamp(34px,5vh,56px)}
.mt-l{margin-top:clamp(48px,7vh,84px)}
.inv{filter:invert(1)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 25. Responsivo ---------- */
@media (max-width:1080px){
  .stmt,.proc{grid-template-columns:1fr;gap:clamp(28px,5vh,48px)}
  .stmt__l,.proc__l{position:static}
    .who{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1fr;row-gap:38px}
  .foot__br{grid-column:1/-1;align-items:flex-start;flex-direction:row;justify-content:space-between;width:100%}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav .pill{display:none}
  .burger{display:grid}
  .web{aspect-ratio:auto;min-height:0;border:0;background:none;overflow:visible}
  .web__grid,.web__svg,.web__core,.web__note{display:none}
  .node{position:static !important;transform:none !important;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
    padding:20px 0;border-bottom:1px solid var(--line);width:100%}
  .node__dot{position:static;transform:none}
  .node__v{opacity:1;transform:none;justify-self:end}
}
@media (max-width:600px){
  .hud--tl,.hud--tr{display:none}
  .foot__top{grid-template-columns:1fr}
  .ask__rail{height:400vh}
  }

/* ---------- 26. Preferências ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.16s !important;
  }
  .js-anim [data-reveal]{opacity:1 !important;transform:none !important}
  .ln>i,.wd>i{transform:none !important}

  .scroll-cue .track i{animation:none;transform:translateY(30%)}
  .ticker__track{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .ticker,.nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--void)}
  .sheet{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--void)}
}
@media (prefers-contrast:more){
  :root{--dim:rgba(247,246,243,.82);--dimmer:rgba(247,246,243,.66);--line:rgba(247,246,243,.3);--line-2:rgba(247,246,243,.45)}
}
:focus-visible{outline:2px solid var(--white);outline-offset:4px;border-radius:3px}

/* ---------- 27. Monograma (recorte do asset da marca) ---------- */
.mono{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:50%}
.mono img{position:absolute;width:513.253%;max-width:none;left:-246.988%;top:-32.530%}
.mono--flat{border-radius:0}

/* ---------- 28. Cromo adaptativo sobre seções claras ---------- */
.ticker,.ticker__track span,.ticker__track span::after,
.nav__links a,
.pill,.burger,.burger i,.prog i{
  transition:background-color 420ms linear,color 420ms linear,border-color 420ms linear,fill 420ms linear;
}
.ticker.on-light{background:rgba(241,240,235,.74);border-bottom-color:rgba(17,19,22,.1)}
.ticker.on-light .ticker__track span{color:rgba(17,19,22,.62)}
.ticker.on-light .ticker__track span::after{background:rgba(17,19,22,.18)}

.nav.on-light.solid{background:rgba(241,240,235,.66);border-bottom-color:rgba(17,19,22,.1)}
.nav.on-light .nav__links a{color:rgba(17,19,22,.6)}
.nav.on-light .nav__links a:hover{color:var(--paper-ink)}
.nav.on-light .nav__links a::before{background:rgba(17,19,22,.06)}
.nav.on-light .pill{background:var(--paper-ink);color:var(--paper)}
.nav.on-light .pill::before{background:#2A2E33;opacity:0}
.nav.on-light .pill:hover::before{opacity:1}
.nav.on-light .pill:hover{box-shadow:0 10px 30px -14px rgba(17,19,22,.5)}
.nav.on-light .pill__ico{background:rgba(241,240,235,.16)}
.nav.on-light .burger{border-color:rgba(17,19,22,.22)}
.nav.on-light .burger i{background:var(--paper-ink)}
.prog.on-light i{background:var(--paper-ink);opacity:.4}


/* ---------- 29. Resposta ao toque (§1: feedback no pointer-down) ---------- */
.burger{transition:transform 320ms var(--ease),border-color 320ms var(--ease)}
.burger:active{transform:scale(.94);transition-duration:100ms}

.nav__links a:active,.sheet a:active{opacity:.55;transition-duration:90ms}

/* ---------- 30. Onde estou (§16: wayfinding) ---------- */
.nav__links a{overflow:visible}
.nav__links a .dot{
  position:absolute;left:50%;bottom:1px;
  width:3px;height:3px;border-radius:50%;background:currentColor;
  transform:translate(-50%,4px) scale(.4);opacity:0;
  transition:transform 520ms var(--ease),opacity 380ms var(--ease);
}
.nav__links a[aria-current] .dot{transform:translate(-50%,0) scale(1);opacity:.9}
.nav__links a[aria-current]{color:var(--white)}
.nav.on-light .nav__links a[aria-current]{color:var(--paper-ink)}

/* ============================================================
   31. Recortes da folha de marca (ASSETS.png · 340×440)
   Cada elemento é isolado por posicionamento, sem gerar arquivo novo.
   ============================================================ */
.crop{position:relative;display:block;overflow:hidden}
.crop>img{position:absolute;max-width:none;width:var(--w);left:var(--x);top:var(--y)}

.crop--br     {aspect-ratio:106/103; --w:320.755%; --x:-110.377%; --y:0}
.crop--globe  {aspect-ratio:60/45;   --w:566.667%; --x:-85%;      --y:-671.111%}
.crop--a      {aspect-ratio:78/42;   --w:435.897%; --x:-184.615%; --y:-719.048%}
.crop--r      {aspect-ratio:47/46;   --w:723.404%; --x:-514.894%; --y:-658.696%}
.crop--pill   {aspect-ratio:289/56;  --w:117.647%; --x:-8.997%;   --y:-685.714%}
.crop--word   {aspect-ratio:340/101; --w:100%;     --x:0;         --y:-153.465%}

/* ============================================================
   34. Carrossel coverflow dos médicos
   A largura da carta governa passo, recuo e perspectiva — é a
   única medida que o motor lê.
   ============================================================ */
.cf{--cf-carta:clamp(150px,24vw,268px);width:100%}
.cf__frame{
  position:relative;overflow:hidden;
  padding-block:clamp(28px,5vh,52px);
  perspective:calc(var(--cf-carta) * 3);
  touch-action:pan-y;                 /* o horizontal é nosso; o vertical é da página */
  cursor:grab;outline:none;
}
.cf--arrastando .cf__frame{cursor:grabbing}
.cf__frame:focus-visible{outline:2px solid var(--white);outline-offset:4px;border-radius:12px}

.cf__palco{
  position:relative;
  height:calc(var(--cf-carta) * 1.5);  /* os retratos são 2:3 */
  transform-style:preserve-3d;
  user-select:none;
}
.cf__carta{
  position:absolute;left:50%;top:0;
  width:var(--cf-carta);aspect-ratio:2/3;
  overflow:hidden;border-radius:16px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  will-change:transform,opacity;
}
.cf__carta img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) contrast(1.02);
  user-select:none;-webkit-user-drag:none;
}

/* Legenda em três degraus — nome · especialidade · @.
   O tracking acompanha o corpo, como manda a tipografia ótica:
   o nome cresceu para 34px e por isso fecha para -.03em; a
   especialidade é pequena e caixa-alta, então abre para .2em. */
.cf__legenda{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1vh,9px);
  margin-top:clamp(22px,3.4vh,36px);text-align:center;
  min-height:clamp(118px,16vh,140px);
}
.cf__nome{
  font-size:clamp(1.5rem,2.5vw,2.15rem);font-weight:300;
  letter-spacing:-.03em;line-height:1.1;color:var(--white);margin:0;
  text-wrap:balance;
}
.cf__esp{
  font-size:clamp(11px,1.02vw,13px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--warm);margin:0;
}
.cf__ig{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(8px,1.4vh,14px);min-height:44px;padding-inline:12px;
  font-size:clamp(13px,1.15vw,15px);letter-spacing:-.006em;color:var(--dim);
  transition:color 340ms var(--ease);
}
.cf__ig:hover{color:var(--white)}
.cf__ig-ico{width:16px;height:16px;flex:none;opacity:.7}
.cf__ig:hover .cf__ig-ico{opacity:1}

/* O ponto continua com 7px de desenho, mas a área de toque tem 44.
   O disco vive num ::before centrado; o botão em si é a caixa invisível. */
.cf__pontos{display:flex;justify-content:center;gap:2px;margin-top:clamp(2px,.8vh,8px)}
.cf__pontos button{
  width:44px;height:44px;padding:0;background:none;border:0;
  display:grid;place-items:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.cf__pontos button::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--dimmer);opacity:.5;
  transition:opacity 300ms var(--ease),transform 300ms var(--ease);
}
.cf__pontos button.on::before{opacity:1;background:var(--white);transform:scale(1.25)}
.cf__pontos button:active::before{transform:scale(.9);transition-duration:110ms}
.cf__pontos button:focus-visible{outline:2px solid var(--white);outline-offset:-8px;border-radius:50%}

@media (max-width:600px){
  .cf{--cf-carta:clamp(160px,46vw,230px)}
  .cf__legenda{min-height:104px}
}
@media (prefers-reduced-motion:reduce){
  /* sem rake 3D: as cartas ficam lado a lado, sem inclinação nem recuo */
  .cf__frame{perspective:none}
  .cf__palco{transform-style:flat}
  .cf__carta{transition:none}
}

/* ============================================================
   35. Resposta ao toque
   O atraso de ~300ms do duplo-toque não serve a nada aqui:
   nenhum alvo depende de duplo-toque.
   ============================================================ */
a,button,summary,label,[role="button"],.doc{touch-action:manipulation}


/* ============================================================
   36. Pular para o conteúdo
   Antes do conteúdo existem o ticker, a marca e quatro links.
   ============================================================ */
.skip{
  position:fixed;top:10px;left:10px;z-index:9997;
  padding:13px 20px;border-radius:999px;
  background:var(--white);color:#0B0C0E;
  font-size:13px;letter-spacing:-.006em;
  transform:translateY(-180%);
  transition:transform 240ms var(--ease);
}
.skip:focus-visible{transform:none;outline-offset:3px}

/* ============================================================
   37. Janelas baixas (celular deitado)
   O hero reservava 100svh + respiro largo: com 375px de altura
   sobrava pouco para o texto e nada para o botão.
   ============================================================ */
@media (max-height:540px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:92px 56px}
  .hero__badge{margin-bottom:14px}
  .hero h1{margin-bottom:16px}
  .hero .lead{margin-bottom:22px}
  .scroll-cue{display:none}
  .hud--tl,.hud--tr{display:none}
  .sec{padding-block:clamp(64px,14vh,110px)}
}


/* ============================================================
   38. Marca oficial
   O arquivo é #222220; sobre o fundo profundo ele é invertido,
   e volta ao original quando a barra passa por seção clara.
   ============================================================ */
.brand{
  display:flex;align-items:center;min-height:44px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.brand__logo{height:21px;width:auto;display:block;filter:invert(1)}
.brand:active{opacity:.6;transition:opacity 90ms var(--ease)}
.nav.on-light .brand__logo{filter:none}

/* O lockup da abertura já é branco sobre transparente: não inverte.
   A largura acompanha a da barra de progresso logo abaixo. */
.pre__logo{
  width:100%;height:auto;display:block;
  opacity:0;transform:scale(.96);
  animation:preIn 420ms var(--ease) 60ms forwards;
}
.end__lock{
  width:clamp(168px,21vw,250px);height:auto;
  margin:clamp(56px,8vh,92px) auto clamp(30px,4.4vh,44px);
  filter:invert(1);
}
.foot__logo{height:26px;width:auto;display:block;filter:invert(1)}

/* ============================================================
   39. Rodapé — BACKGROUND_NAVY
   A arte é escura, mas tem um brilho na base (o ponto mais claro
   mede L=0.39). Um véu escuro na área do conteúdo mantém o texto
   legível sem apagar o brilho, que fica visível abaixo.
   ============================================================ */
.foot{position:relative;overflow:hidden;border-top:0;background:var(--void)}
.foot__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:var(--void) no-repeat center bottom/cover;
  background-image:url(../assets/BACKGROUND_NAVY.png);
}
.foot__bg::before{                      /* véu sobre a faixa do conteúdo */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,10,.56) 0%,rgba(8,9,10,.70) 46%,rgba(8,9,10,.80) 100%);
}
.foot__bg::after{                       /* fio de luz no topo do rodapé */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,246,243,.16) 22%,rgba(247,246,243,.16) 78%,transparent);
}
.foot > .wrap{position:relative;z-index:1}
@media (max-width:860px){
}


/* ============================================================
   40. Vídeo do hero
   Trecho 12,8–16,9s do reel: é o único com brilho baixo o
   bastante (L95 máx 0.138) para o texto ficar legível. O véu
   escuro em .hero__veil foi calibrado sobre esse valor.
   ============================================================ */
.hero__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
/* o subtítulo vive sobre o vídeo: precisa de mais presença que o padrão */
.hero .lead{color:rgba(247,246,243,.74)}

/* Em movimento reduzido o vídeo não some: fica no pôster, um quadro
   parado da marca. Esconder por completo tiraria a imagem, não o movimento. */

/* Sobre o vídeo, os rótulos pequenos do hero não alcançam 4.5:1 no
   tom padrão — este é o valor medido contra o quadro mais claro. */
.hero .micro,.hero .micro-2,.scroll-cue .micro{color:rgba(247,246,243,.64)}
/* Branco cheio, não .78: o selo tem 10px e vive sobre o vídeo. Medido
   quadro a quadro na região exata do selo, a cena mais clara chega a
   L=0.84; com o scrim de .601 e o fundo do selo, .78 dava 3,87:1 —
   reprova para 10px. A mediana do vídeo dá 5,98:1, e é por isso que
   passava despercebido: só falha durante a cena clara. Cheio: 5,16:1. */
.hero__badge span{color:var(--white)}

/* ============================================================
   41. Faixa navy — do método ao rodapé
   Uma superfície contínua para o trecho final. A arte é
   esticada além da altura da faixa para que só a parte escura
   apareça aqui: o brilho da base fica reservado ao rodapé,
   que fecha o degradê.
   ============================================================ */
.navy{
  position:relative;
  background:var(--void) no-repeat center top;
  background-image:url(../assets/BACKGROUND_NAVY.png);
  background-size:100% 165%;
}
.navy::before{                     /* véu de leitura + entrada suave a partir do preto */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    var(--void) 0%,
    rgba(8,9,10,.72) 5%,
    rgba(8,9,10,.42) 16%,
    rgba(8,9,10,.58) 62%,
    rgba(8,9,10,.72) 100%);
}
.navy > .sec{position:relative;z-index:1}


/* ============================================================
   42. Wordmark de fecho do hero
   Ancorado na base, largo. Fica atrás do conteúdo na ordem de
   leitura e não disputa com o título.
   ============================================================ */
.hero__mark{
  position:absolute;left:0;right:0;margin-inline:auto;
  bottom:clamp(18px,3vh,34px);
  width:min(var(--marca-w,min(64vw,760px)),calc(100% - var(--gutter) * 2));height:auto;
  z-index:3;opacity:.94;pointer-events:none;
}
@media (max-width:860px){
  .hero__mark{bottom:clamp(30px,5vh,56px)}
  /* no celular o wordmark é baixo: a faixa reservada encolhe junto,
     senão sobra um vazio grande entre o subtítulo e ele */
  .hero{padding-block:clamp(92px,12vh,118px) calc(var(--marca-h,110px) + clamp(54px,7.4vh,84px))}
  /* no celular o wordmark ocupa a base; o indicador colidiria com ele */
  .scroll-cue{display:none}
}
@media (max-height:540px) and (orientation:landscape){
  .hero__mark{width:var(--marca-w,min(58vw,420px));bottom:12px}
}


/* ============================================================
   43. Vídeo sem controle nenhum
   O WebKit injeta um botão de play próprio quando o autoplay
   não parte sozinho — este seletor é justamente ele.
   ============================================================ */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-play-button,
.hero__video::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance:none;
  appearance:none;
  opacity:0;
}
.hero__video{pointer-events:none}

/* ============================================================
   44. Scrim de leitura do hero
   O vídeo agora roda inteiro, e uma das cenas é quase branca
   (L=0.92 na área do texto). Escurecer o vídeo todo o suficiente
   o apagaria; então a proteção fica só atrás do texto, medida
   contra esse quadro: subtítulo 6,9:1, título 11,2:1.
   ============================================================ */
.hero__in::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1240px,124%);height:164%;
  background:radial-gradient(closest-side ellipse at 50% 50%,
    rgba(8,9,10,.62) 0%,
    rgba(8,9,10,.60) 52%,
    rgba(8,9,10,.34) 76%,
    rgba(8,9,10,0) 100%);
}


/* ============================================================
   45. Baralho — Branding · Posicionamento · Performance
   O fundo da seção é um degradê que vai de prata no topo a quase
   preto na base (L 0.67 → 0.01). Por isso a barra fixa continua
   lendo a seção como clara (ela passa pelo topo) e as marcas de
   progresso, que ficam na zona escura, são claras.
   ============================================================ */
.deck{position:relative}
.deck__rail{height:280vh}
.deck__stick{
  position:sticky;top:0;height:100svh;
  display:grid;place-items:center;overflow:hidden;
  background:var(--paper) no-repeat center/cover;
  background-image:url(../img/bg/deck-1600.jpg);
  background-image:image-set(url(../img/bg/deck-1600.webp) type("image/webp") 1x,
                             url(../img/bg/deck-2400.webp) type("image/webp") 2x);
}
.deck__palco{position:relative;width:100%}

.deck__cartas{
  list-style:none;margin:0;padding:0;
  position:relative;height:clamp(350px,56vh,480px);
}
.deck__carta{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(10px,1.6vh,16px);
  padding:clamp(30px,4.6vh,58px) clamp(30px,5vw,64px);
  border-radius:20px;overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line-dark);
  box-shadow:0 -24px 64px -34px rgba(8,9,10,.5);
  /* --enter: quanto já subiu · --behind: quanto já foi coberta */
  transform:
    translateY(calc((1 - var(--enter,0)) * 108% + var(--behind,0) * -22px))
    scale(calc(1 - var(--behind,0) * .055));
  will-change:transform;
}
.deck__carta::after{                 /* escurece a que já foi coberta */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(8,9,10,.55);
  opacity:calc(var(--behind,0) * .38);
}
/* Hierarquia em três degraus — etiqueta · afirmação · corpo.
   A distância entre eles vem de tamanho, caixa, tracking e peso,
   não de uma quarta família: o serif segue reservado para ênfase
   dentro de texto corrido, como no resto do site.
   A cor da etiqueta para em .62 — abaixo disso ela reprova no
   contraste sobre o papel (.56 dá 3,98:1 para um corpo de 13px). */
.deck__n{
  font-family:var(--mono);font-size:clamp(12px,1.1vw,14px);
  text-transform:uppercase;letter-spacing:.2em;
  color:rgba(17,19,22,.62);
}
.deck__n i{font-style:normal;opacity:.5;margin-inline:.1em}
.deck__rot{
  font-size:clamp(2.15rem,4.6vw,3.6rem);font-weight:300;
  letter-spacing:-.032em;line-height:1.02;color:var(--paper-ink);margin:0;
  text-wrap:balance;
}
.deck__t{
  display:flex;flex-direction:column;gap:.55em;
  margin:clamp(4px,.8vh,10px) 0 0;
  font-size:clamp(1.12rem,1.78vw,1.56rem);line-height:1.5;letter-spacing:-.014em;
  color:rgba(17,19,22,.72);max-width:34ch;
}
.deck__t p{margin:0}

/* Card 01 — a capa da marca entra aqui.
   Sem o arquivo, o card fica no tom escuro de base: nada quebra. */
.deck__carta--capa{
  background:#14171A no-repeat 0% 50%/cover;
  background-image:url(../img/marcas/branding-1600.jpg);
  background-image:image-set(url(../img/marcas/branding-1600.webp) type("image/webp") 1x,
                             url(../img/marcas/branding-2400.webp) type("image/webp") 2x);
  border-color:rgba(247,246,243,.14);
}
.deck__carta--capa::before{          /* scrim: garante o texto sobre qualquer imagem */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.08) 0%,rgba(8,9,10,.18) 34%,rgba(8,9,10,.42) 62%,rgba(8,9,10,.58) 100%);
}
.deck__carta--capa > *{position:relative;z-index:1}
/* .88 e não .80: a etiqueta subiu para ~43% do card, onde o scrim
   vale .64 — a .80 ela dava 4,32:1 sobre uma imagem branca. Subir o
   texto custa nada; escurecer mais o scrim custaria a foto. */
.deck__carta--capa .deck__n{color:rgba(247,246,243,.88)}
.deck__carta--capa .deck__rot{color:var(--white)}
.deck__carta--capa .deck__t{color:rgba(247,246,243,.90)}

.deck__prog{
  position:absolute;left:0;right:0;bottom:clamp(-52px,-6vh,-34px);
  display:flex;gap:8px;justify-content:center;
}
.deck__prog i{
  display:block;width:30px;height:2px;border-radius:2px;
  background:rgba(247,246,243,.22);overflow:hidden;position:relative;
}
.deck__prog i::after{
  content:"";position:absolute;inset:0;background:var(--white);
  transform:scaleX(var(--on,0));transform-origin:left;
  transition:transform 420ms var(--ease);
}

@media (max-width:860px){
  .deck__rail{height:250vh}
  .deck__cartas{height:clamp(340px,62vh,450px)}
  .deck__t{max-width:none}
  .deck__carta--capa{background-position:80% 50%}
}

@media (prefers-reduced-motion:reduce){
  .deck__rail{height:auto}
  .deck__stick{position:static;height:auto;display:block;padding-block:clamp(96px,15vh,190px)}
  .deck__cartas{height:auto;display:flex;flex-direction:column;gap:18px}
  .deck__carta{position:static;transform:none !important;min-height:300px}
  .deck__carta::after{display:none}
  .deck__prog{display:none}
}


/* ============================================================
   46. Hierarquia tipográfica do hero
   Três degraus claros — marca, título, subtítulo — com o
   espaçamento em `em`, de modo a acompanhar o corpo do texto
   se a pessoa aumentar a fonte do sistema.
   ============================================================ */
.hero__badge{margin-bottom:1.9em}
.hero h1{margin-bottom:.34em}                 /* relativo ao próprio display */
.hero__sub{
  font-size:clamp(1.06rem,1.56vw,1.44rem);
  line-height:1.48;
  letter-spacing:-.008em;                     /* corpo fica perto de zero */
  color:rgba(247,246,243,.78);
  max-width:34ch;
  margin-inline:auto;
  margin-bottom:0;
}
@media (max-width:860px){
  .hero__badge{margin-bottom:1.5em}
  .hero h1{margin-bottom:.4em}
  .hero__sub{max-width:26ch}
}