/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* Paleta — extraída do logo e das telas aprovadas */
  --abyss:   #061726;   /* navy profundo — base escura   */
  --deep:    #0A2B3C;   /* teal-navy — blocos institucionais */
  --current: #1478FF;   /* azul elétrico Level — ação    */
  --signal:  #4FD1FF;   /* ciano — dados e destaques     */
  --pulse:   #7B5BFF;   /* violeta do logo — só gradiente */
  --paper:   #F2F5F9;   /* cinza-claro — seções claras   */
  --white:   #FFFFFF;

  --ink:     #0A1B26;
  /* Azul de marca escurecido para texto pequeno sobre fundo claro:
     o --current puro dá 4.07:1 em 11px e reprova no WCAG AA. */
  --current-ink: #0B5FD6;
  --muted:   #5D7284;
  --danger:  #B3261E;
  --muted-d: rgba(255,255,255,.62);
  --line:    rgba(10,43,60,.10);
  --line-d:  rgba(255,255,255,.12);

  --grad-brand: linear-gradient(100deg, var(--current) 0%, var(--signal) 55%, var(--pulse) 100%);
  --grad-deep:  linear-gradient(150deg, #0B5BD3 0%, #0A2B3C 62%, #061726 100%);

  /* Tipografia */
  --display: "Outfit", ui-rounded, system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --t-hero:  clamp(2.9rem, 7.4vw, 6.6rem);
  --t-h2:    clamp(2rem, 4.4vw, 3.9rem);
  --t-h3:    clamp(1.35rem, 2vw, 1.85rem);
  --t-lead:  clamp(1.05rem, 1.35vw, 1.28rem);
  --t-body:  clamp(.98rem, 1.05vw, 1.05rem);
  --t-mono:  .715rem;

  /* Ritmo */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1320px;
  --sec: clamp(5.5rem, 11vw, 10.5rem);
  --r:   22px;
  --r-lg: 30px;

  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --nav-h: 78px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--body); font-size:var(--t-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;   /* fallback */
  overflow-x:clip;     /* não cria contexto de rolagem — preserva position:sticky */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--current); color:#fff; }

:focus-visible{
  outline:2px solid var(--signal); outline-offset:4px; border-radius:6px;
}

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--white); color:var(--ink); padding:.85rem 1.25rem; border-radius:0 0 12px 0;
}
.skip:focus{ left:0; }

/* ============================================================
   2. TIPOGRAFIA E UTILITÁRIOS
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:500;
  line-height:1.02; letter-spacing:-.03em; margin:0;
}
h1{ font-size:var(--t-hero); font-weight:400; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.02em; line-height:1.18; }
p{ margin:0; }

.eyebrow{
  font-family:var(--mono); font-size:var(--t-mono); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--current-ink);
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:7px; border-radius:2px;
  background:var(--grad-brand); flex:none;
}
.eyebrow--light{ color:var(--signal); }

.lead{ font-size:var(--t-lead); line-height:1.55; color:var(--muted); max-width:52ch; }
.lead--light{ color:var(--muted-d); }

.grad{
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Botões ---------------------------------------------------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.65rem;
  padding:1.05rem 1.9rem; border-radius:999px;
  background:var(--bg); color:var(--fg);
  font-family:var(--display); font-weight:500; font-size:.98rem; letter-spacing:-.01em;
  overflow:hidden; isolation:isolate; will-change:transform;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--grad-brand); opacity:0;
  transform:translateY(64%) scale(1.25);
  transition:transform .68s var(--ease), opacity .4s linear;
}
.btn:hover::after,.btn:focus-visible::after{ transform:none; opacity:1; }
.btn:hover{ box-shadow:0 14px 40px -14px rgba(20,120,255,.75); }
.btn .btn__arrow{ transition:transform .5s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn--light{ --bg:#fff; --fg:var(--ink); }
.btn--light:hover{ color:#fff; }
.btn--ghost{
  --bg:transparent; --fg:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.btn--blue{ --bg:var(--current); --fg:#fff; }

/* Botão flutuante do WhatsApp, fixo em todas as páginas ------ */
.fab{
  position:fixed; right:clamp(1.1rem,3vw,2rem); bottom:clamp(1.1rem,3vw,2rem); z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.4rem; border-radius:999px;
  background:var(--current); color:#fff;
  font-family:var(--display); font-weight:500; font-size:.92rem; letter-spacing:-.01em;
  box-shadow:0 16px 40px -14px rgba(20,120,255,.65);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.fab svg{ width:20px; height:20px; flex:none; }
.fab:hover{ transform:translateY(-3px); box-shadow:0 20px 48px -16px rgba(20,120,255,.8); }
@media (max-width:480px){
  .fab span{ display:none; }
  .fab{ padding:.95rem; }
}

/* Régua de três barras — assinatura tirada do "E" do logo ---- */
.rule{ display:flex; flex-direction:column; gap:5px; width:64px; }
.rule i{ height:5px; border-radius:2px; background:var(--grad-brand); display:block; transform-origin:left; }
.rule i:nth-child(1){ width:100%; }
.rule i:nth-child(2){ width:62%; opacity:.75; }
.rule i:nth-child(3){ width:84%; opacity:.5; }

/* ============================================================
   3. REVEAL / SPLIT — motor de animação
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translate3d(0,34px,0); filter:blur(7px);
  transition:opacity .95s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; filter:none; }

[data-reveal="mask"]{
  opacity:1; filter:none; transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--ease); transition-delay:var(--d,0ms);
}
[data-reveal="mask"].is-in{ clip-path:inset(0 0 0 0); }

.split .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em;
}
/* Seletor universal, não `> i`: o split preserva a tag original de
   trechos marcados (<em>, <strong>) para não perder o estilo que o
   CSS aplica a eles. Só texto puro vira <i>. */
.split .w > *{
  display:inline-block; font-style:normal; transform:translateY(115%);
  transition:transform 1s var(--ease); transition-delay:calc(var(--i,0) * 44ms);
  will-change:transform;
}
.split.is-in .w > *{ transform:none; }

/* ============================================================
   4. NAVEGAÇÃO
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:transform .6s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.is-solid{
  background:rgba(6,23,38,.72); backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.nav.is-hidden{ transform:translateY(-102%); }
.nav__in{
  width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav__links{ display:flex; align-items:center; gap:clamp(1.1rem,2.3vw,2.4rem); }
.nav__link{
  position:relative; font-family:var(--display); font-weight:400;
  font-size:.95rem; color:rgba(255,255,255,.86); padding:.35rem 0;
  transition:color .35s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:3px; width:100%;
  border-radius:2px; background:var(--grad-brand);
  transform:scaleX(0); transform-origin:right; transition:transform .55s var(--ease);
}
.nav__link:hover{ color:#fff; }
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
/* Página atual: régua acesa em repouso */
.nav__link[aria-current="page"]{ color:#fff; }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

/* Wordmark: logo em arquivo (assets/logo.svg), sempre sobre fundo
   escuro (nav e footer usam --deep/--abyss) — por isso um único
   SVG claro serve nos dois lugares, sem precisar de variante escura. */
.logo{ display:flex; align-items:center; }
.logo img{ display:block; height:20px; width:auto; }

.nav__cta{ padding:.72rem 1.35rem; font-size:.92rem; }

.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.burger span{ display:block; width:22px; height:2px; background:#fff; position:relative; transition:background .3s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#fff;
  transition:transform .45s var(--ease);
}
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.is-open .burger span{ background:transparent; }
.is-open .burger span::before{ transform:translateY(7px) rotate(45deg); }
.is-open .burger span::after{ transform:translateY(-7px) rotate(-45deg); }

/* Progresso de leitura — três barras */
.progress{ position:fixed; left:0; top:0; z-index:120; width:100%; height:3px; pointer-events:none; }
.progress i{
  display:block; height:100%; width:100%; background:var(--grad-brand);
  transform:scaleX(0); transform-origin:left; will-change:transform;
}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{
  /* clamp e não 100svh puro: em telas muito altas sobrava vazio
     embaixo da foto, e em telas muito baixas 100svh podia cortar o
     conteúdo. 730px é o teto (~o que ficou bom testando), 560px o
     piso pra telas baixas, 88svh escala entre os dois. */
  position:relative; min-height:clamp(560px,88svh,730px); display:flex; align-items:stretch;
  padding:calc(var(--nav-h) + clamp(1.5rem,4vh,3rem)) 0 clamp(2.5rem,8vh,5rem);
  overflow:hidden; isolation:isolate;
  background:var(--abyss); color:#fff;
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__photo{
  position:absolute; inset:0;
  /* Foto de topo. Cada página passa a sua em --photo; sem arquivo,
     o gradiente de marca assume e nada quebra.
     Caminhos relativos ao CSS (/css), por isso o ../
     A folga do parallax vem do scale, não de inset negativo:
     assim o enquadramento não fecha demais na pessoa. */
  background-image:var(--photo, url('../assets/bg-home.png')), var(--grad-deep);
  background-size:cover; background-position:50% 42%;
  transform:scale(1.02); will-change:transform;
}

/* Véu leve: só o necessário para o texto branco ficar legível
   sobre o azul claro da foto — a cena continua clara. */
.hero__wash{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,23,38,.38) 0%, rgba(6,23,38,.1) 9%, rgba(6,23,38,0) 16%),
    linear-gradient(96deg, rgba(6,23,38,.46) 0%, rgba(6,23,38,.22) 28%, rgba(6,23,38,0) 56%),
    linear-gradient(0deg, rgba(6,23,38,.5) 0%, rgba(6,23,38,.08) 38%, rgba(6,23,38,0) 62%);
}

/* Barras de luz — o motivo do logo virando atmosfera */
.beam{
  position:absolute; border-radius:999px; filter:blur(30px); opacity:.55;
  background:linear-gradient(90deg, transparent, var(--current), transparent);
  will-change:transform;
}
.beam--1{ top:24%; right:-6%; width:52%; height:78px; }
.beam--3{ top:57%; right:-2%; width:44%; height:64px; background:linear-gradient(90deg,transparent,var(--pulse),transparent); opacity:.3; }

.hero__in{ position:relative; z-index:2; width:100%; display:flex; }
.hero__grid{
  flex:1; display:grid;
  grid-template-columns:minmax(0,.54fr) minmax(0,.46fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
  will-change:transform, opacity;
}
.hero__lead{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(1.6rem,3.2vw,2.6rem); }
.hero__title{
  font-size:clamp(2.6rem,5.4vw,5.4rem); font-weight:300;
  line-height:1.03; margin:0;
  /* Bloco de largura fixa em em: as linhas curtas alinham à direita
     e formam a escada da referência. */
  width:min(100%,5.4em); text-align:right;
  text-shadow:0 14px 60px rgba(6,23,38,.45);
}
.hero__title em,
.hero__title .is-strong{ font-style:normal; font-weight:700; }

/* Camadas do parallax — o wrapper recebe o deslocamento,
   o filho continua livre para animar a entrada. */
.hero__layer{ will-change:transform; }

/* Subtítulo "Pessoas são a nossa prioridade." */
.chip{
  color:rgba(255,255,255,.86);
  font-family:var(--display); font-weight:300; font-size:clamp(1.1rem,2vw,1.5rem);
  letter-spacing:-.005em; line-height:1.3;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:.7rem; }

.hero__noteWrap{ grid-column:2; align-self:end; justify-self:start; }
.hero__note{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.1rem,1.75vw,1.58rem); line-height:1.5;
  color:#fff; max-width:25ch;
  text-shadow:0 10px 40px rgba(6,23,38,.5);
}

/* ============================================================
   6. TICKER
   ============================================================ */
.ticker{ background:var(--abyss); color:#fff; padding:1.5rem 0; overflow:hidden; border-top:1px solid var(--line-d); }
.ticker__row{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.ticker:hover .ticker__row{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%) } }
.ticker__item{
  display:flex; align-items:center; gap:1.1rem; padding-inline:1.6rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.5); white-space:nowrap;
}
.ticker__item b{ color:#fff; font-weight:500; }
.ticker__item::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--current); }

/* ============================================================
   7. MANIFESTO
   ============================================================ */
.manifesto{ padding:var(--sec) 0; background:var(--white); }
.manifesto__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); align-items:end; }
.manifesto h2{ font-size:clamp(2.2rem,5.4vw,4.6rem); font-weight:300; letter-spacing:-.035em; }
.manifesto h2 em{ font-style:normal; font-weight:500; }
.manifesto__aside{ display:flex; flex-direction:column; gap:1.6rem; padding-bottom:.5rem; }
.manifesto__sig{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   8. CONHEÇA A LEVEL (dois cards)
   ============================================================ */
.about{ padding:0 0 var(--sec); background:var(--white); }
.about__grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(1rem,1.6vw,1.5rem); }

.card{ position:relative; border-radius:var(--r-lg); overflow:hidden; }

.card--dark{
  background:url('../assets/bg-box-about.png') center/cover, var(--grad-deep); color:#fff;
  padding:clamp(2.2rem,3.6vw,3.4rem); min-height:clamp(420px,46vw,560px);
  display:flex; flex-direction:column; justify-content:flex-end; gap:1.5rem;
}
.card--dark::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-brand); z-index:3;
}
.card__glow{
  position:absolute; width:70%; height:180px; right:-10%; top:18%;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);
  filter:blur(48px); opacity:.35;
}
.card__mark{
  position:absolute; left:clamp(2.2rem,3.6vw,3.4rem); bottom:-.5rem; right:0;
  display:flex; align-items:center; gap:10px;
  transform:scale(3.4); transform-origin:left bottom; pointer-events:none; filter:blur(.5px);
}
.card__mark img{ opacity:.16; }
.card--dark .card__body{ position:relative; z-index:2; display:flex; flex-direction:column; gap:1.3rem; align-items:flex-start; }

.card--light{
  background:linear-gradient(180deg,#EAF4FB 0%, #C9E4F5 100%);
  padding:clamp(2.2rem,3.6vw,3.4rem); min-height:clamp(420px,46vw,560px);
  display:flex; flex-direction:column; justify-content:flex-start; gap:1.5rem;
}
.card--light h2{ color:var(--deep); max-width:14ch; }

/* Grade de canais dentro do card claro. Fica no fluxo normal (não
   position:absolute) — com o texto ancorado embaixo por
   justify-content:flex-end, uma grade sobreposta dependia de o card
   ser alto o bastante pra sobrar respiro acima do texto, e isso
   variava por largura de tela e sempre acabava se sobrepondo em
   algum breakpoint. No fluxo normal a sobreposição é impossível. */
.channels{
  position:relative; margin:-2% -4% 0;
  /* minmax(0,1fr) e não 1fr: célula com aspect-ratio tem mínimo
     implícito de min-content, então a coluna se recusava a encolher
     abaixo disso e a grade "estourava" mais larga que a coluna. */
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(.6rem,1vw,1rem);
  transform:rotate(-1.5deg);
}
.channels__cell{
  aspect-ratio:1/1; border-radius:20px; background:rgba(255,255,255,.72);
  display:flex; align-items:center; justify-content:center; color:var(--current);
  box-shadow:0 12px 30px -20px rgba(10,43,60,.5);
  transition:transform .6s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.channels__cell svg{ width:38%; height:38%; }
.channels__cell:hover{ transform:translateY(-8px) scale(1.05); background:#fff; color:var(--pulse); }
.channels__cell--off{ opacity:.45; }
.card--light .card__body{ position:relative; z-index:2; display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }

/* ============================================================
   9. INDICADORES
   ============================================================ */
.kpi{ background:var(--paper); padding:var(--sec) 0; }
.kpi__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.kpi__head h2{ max-width:16ch; }
.kpi__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); }
.kpi__item{ background:var(--paper); padding:clamp(1.6rem,2.6vw,2.4rem) clamp(1.2rem,2vw,1.8rem); display:flex; flex-direction:column; gap:1rem; }
.kpi__num{
  font-family:var(--display); font-weight:300; letter-spacing:-.045em; line-height:1;
  font-size:clamp(2.8rem,5.2vw,4.4rem); color:var(--deep); font-variant-numeric:tabular-nums;
}
.kpi__num sup{ font-size:.42em; vertical-align:top; top:.5em; position:relative; color:var(--current); font-weight:500; }
.kpi__label{ font-size:.95rem; color:var(--muted); max-width:22ch; line-height:1.45; }
.kpi__bar{ height:5px; border-radius:3px; background:rgba(10,43,60,.1); overflow:hidden; margin-top:auto; }
.kpi__bar i{ display:block; height:100%; background:var(--grad-brand); transform:scaleX(0); transform-origin:left; transition:transform 1.5s var(--ease); transition-delay:var(--d,0ms); }
.kpi__item.is-in .kpi__bar i{ transform:scaleX(var(--fill,.6)); }

/* ============================================================
   10. PRODUTOS
   ============================================================ */
.products{ padding:var(--sec) 0; background:var(--white); }
.products__head{ max-width:60ch; display:flex; flex-direction:column; gap:1.4rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.products__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.4vw,1.25rem); }
.prod{
  position:relative; border-radius:var(--r); padding:clamp(1.7rem,2.4vw,2.2rem);
  background:var(--paper); overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; gap:1rem; min-height:270px;
  transition:transform .7s var(--ease), box-shadow .7s var(--ease), color .5s var(--ease);
  will-change:transform;
}
.prod::before{
  content:""; position:absolute; inset:0; z-index:-2; background:var(--grad-deep);
  opacity:0; transition:opacity .6s var(--ease);
}
.prod::after{
  content:""; position:absolute; z-index:-1; width:320px; height:320px; border-radius:50%;
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(79,209,255,.22), transparent 62%);
  opacity:0; transition:opacity .5s linear;
}
.prod:hover{ transform:translateY(-6px); color:#fff; box-shadow:0 34px 70px -40px rgba(6,23,38,.9); }
.prod:hover::before,.prod:hover::after{ opacity:1; }
.prod__n{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.2em; color:var(--current-ink); }
.prod:hover .prod__n{ color:var(--signal); }
.prod h3{ margin-top:.2rem; }
.prod p{ color:var(--muted); font-size:.98rem; margin-top:auto; }
.prod:hover p{ color:rgba(255,255,255,.75); }
.prod__ico{ position:absolute; right:1.4rem; top:1.4rem; width:34px; height:34px; color:var(--current); opacity:.5; transition:opacity .5s, transform .6s var(--ease); }
.prod:hover .prod__ico{ opacity:1; color:var(--signal); transform:rotate(-8deg) scale(1.08); }

/* ============================================================
   11. PROCESSO (scroll horizontal fixado)
   ============================================================ */
/* padding-top de base na própria section: garante respiro acima do
   título mesmo se, por qualquer motivo (navegador, zoom, timing do
   sticky), o padding-block do .process__sticky não estiver valendo
   no momento em que a seção entra na tela. */
.process{ background:var(--abyss); color:#fff; position:relative; padding-top:clamp(2rem,5vh,3.5rem); }
.process__sticky{
  /* top:var(--nav-h) e não 0: com 0 a seção gruda embaixo da própria
     viewport, por baixo do nav fixo (que tem z-index maior), e o
     título nasce parcialmente escondido atrás do blur do menu. */
  position:sticky; top:var(--nav-h); height:calc(100svh - var(--nav-h));
  display:flex; flex-direction:column;
  /* flex-start e não center: quando cabeçalho + cards passam da
     altura disponível, o centro empurra o topo pra fora e o
     overflow:hidden corta o respiro acima do título. Com flex-start
     o padding-top nunca some, mesmo se o conteúdo transbordar embaixo. */
  justify-content:flex-start; gap:clamp(2rem,4vw,3.5rem); overflow:hidden;
  padding-block:clamp(4rem,8vh,6rem);
}
.process__head{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-end; justify-content:space-between; }
.process__head h2{ max-width:16ch; }
.process__nav{ display:flex; gap:.7rem; }
.process__arrow{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:999px; flex:none;
  background:rgba(255,255,255,.06); color:#fff;
  border:1px solid rgba(255,255,255,.22);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.process__arrow:hover{ background:var(--current); border-color:var(--current); transform:translateY(-2px); }
.process__arrow:disabled{ opacity:.35; pointer-events:none; }
.process__track{ display:flex; gap:clamp(1rem,1.6vw,1.5rem); padding-inline:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))); will-change:transform; }
.step{
  flex:none; width:min(390px,78vw); min-height:clamp(300px,40vh,400px);
  border-radius:var(--r-lg); padding:clamp(1.8rem,2.6vw,2.4rem);
  background:rgba(255,255,255,.045); border:1px solid var(--line-d);
  backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:1rem;
  transition:background .6s var(--ease), border-color .6s var(--ease), transform .6s var(--ease);
}
.step.is-active{ background:rgba(20,120,255,.14); border-color:rgba(79,209,255,.4); }
.step__n{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.22em; color:var(--signal); }
.step h3{ color:#fff; max-width:16ch; }
.step p{ color:var(--muted-d); font-size:.98rem; margin-top:auto; }
.step__rule{ display:flex; gap:4px; }
.step__rule i{ width:22px; height:4px; border-radius:2px; background:rgba(255,255,255,.18); }
.step.is-active .step__rule i:first-child{ background:var(--grad-brand); }

.process__rail{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.process__rail span{ display:block; height:3px; background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden; }
.process__rail i{ display:block; height:100%; background:var(--grad-brand); transform:scaleX(0); transform-origin:left; }

/* ============================================================
   12. GOVERNANÇA
   ============================================================ */
.gov{ background:var(--deep); color:#fff; padding:var(--sec) 0; position:relative; overflow:hidden; }
.gov__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; position:relative; z-index:2; }
.gov__copy{ display:flex; flex-direction:column; gap:1.6rem; align-items:flex-start; }
.gov__list{ display:flex; flex-direction:column; }
.gov__row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.2rem;
  padding:1.25rem 0; border-top:1px solid var(--line-d);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:rgba(255,255,255,.85);
  transition:padding-left .5s var(--ease), color .4s;
}
.gov__row:last-child{ border-bottom:1px solid var(--line-d); }
.gov__row:hover{ padding-left:.8rem; color:#fff; }
.gov__row b{ color:var(--signal); font-weight:500; }
/* .62 e não .45: a .45 dava 4,1:1 sobre o --deep e reprovava no
   WCAG AA — e é justamente a coluna que cita a lei. */
.gov__row span:last-child{ color:rgba(255,255,255,.62); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }

/* ============================================================
   13. FAÇA PARTE
   ============================================================ */
.team{ background:var(--abyss); padding:0 0 var(--sec); }
.team__card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; color:#fff;
  min-height:clamp(480px,58vw,620px); display:flex; align-items:flex-end;
  padding:clamp(2rem,4vw,3.5rem);
}
.team__photo{
  position:absolute; inset:-10% 0; z-index:0;
  /* Foto definitiva: /assets/team.jpg (a atendente com headset).
     Enquanto o arquivo não chega, usa a institucional — o antigo
     apontamento direto para team.jpg devolvia 404 no console.
     Ao subir a foto, troque a url abaixo por ../assets/team.jpg */
  background-image:url('../assets/institucional.jpg'), var(--grad-deep);
  background-size:cover; background-position:center; will-change:transform;
}
.team__veil{ position:absolute; inset:0; background:linear-gradient(75deg, rgba(6,23,38,.94) 8%, rgba(6,23,38,.55) 48%, rgba(6,23,38,.15) 78%); }
.team__body{ position:relative; z-index:2; display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start; max-width:46ch; }
/* margin/padding:0 — <ul> vem com padding-left do user-agent, que
   empurrava a lista inteira pra direita do título/texto acima dela. */
.values{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:0; padding:0; }
.values li{
  list-style:none; padding:.55rem 1.15rem; border-radius:999px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
  font-size:.86rem; line-height:1.2; color:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  transition:background .4s var(--ease), transform .5s var(--ease), border-color .4s;
}
.values li:hover{ background:rgba(255,255,255,.16); border-color:var(--signal); transform:translateY(-3px); }

/* ============================================================
   14. CONTATO
   ============================================================ */
.contact{ background:var(--white); padding:var(--sec) 0; }
.contact__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.contact h2{ max-width:13ch; }
.contact__copy{ display:flex; flex-direction:column; gap:1.6rem; align-items:flex-start; }
.contact__list{ display:flex; flex-direction:column; gap:0; }
.contact__row{
  display:flex; flex-direction:column; gap:.3rem; padding:1.5rem 0; border-top:1px solid var(--line);
  transition:padding-left .5s var(--ease);
}
.contact__row:last-child{ border-bottom:1px solid var(--line); }
.contact__row:hover{ padding-left:.7rem; }
.contact__k{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.contact__v{ font-family:var(--display); font-size:clamp(1.15rem,2vw,1.6rem); font-weight:400; letter-spacing:-.02em; color:var(--ink); transition:color .35s; }
.contact__row:hover .contact__v{ color:var(--current); }

.pledge{
  position:relative; align-self:stretch; border-radius:var(--r); overflow:hidden;
  background:var(--deep); color:#fff; padding:clamp(1.8rem,3vw,2.6rem);
  display:flex; flex-direction:column; gap:1rem; margin-top:2rem;
}
.pledge::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-brand); }
.pledge p{ font-family:var(--display); font-size:clamp(1.15rem,1.8vw,1.5rem); font-weight:300; line-height:1.3; }
.pledge small{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); }

/* ============================================================
   15. RODAPÉ
   ============================================================ */
.footer{ background:var(--abyss); color:#fff; padding:clamp(1.5rem,3vw,2.5rem) 0 2.5rem; }
.footer__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; padding-bottom:clamp(2rem,4vw,3rem); }
.social{ display:flex; gap:.7rem; }
.social a{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-d); color:#fff;
  transition:background .45s var(--ease), transform .45s var(--ease), border-color .45s;
}
.social a:hover{ background:var(--current); border-color:var(--current); transform:translateY(-4px); }
.social svg{ width:18px; height:18px; }
.footer__mid{ display:flex; flex-wrap:wrap; gap:2rem 2.4rem; padding:2rem 0; border-top:1px solid var(--line-d); }
.footer__mid a{ color:rgba(255,255,255,.7); font-family:var(--display); transition:color .35s; }
.footer__mid a:hover{ color:#fff; }
/* .62 e não .42: aqui moram razão social e CNPJ — a identificação
   legal da empresa não pode ficar abaixo do contraste mínimo. */
/* flex-start, não space-between: com só copyright + crédito
   sobrando, space-between jogava o crédito pro canto direito, bem
   embaixo do .fab flutuante. */
.footer__bot{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; padding-top:2rem; border-top:1px solid var(--line-d); font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em; color:rgba(255,255,255,.62); text-transform:uppercase; }
.footer__bot a{ color:inherit; transition:color .35s; }
.footer__bot a:hover{ color:#fff; }

/* ============================================================
   16. RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  /* Empilhado: título centrado no corpo do quadro,
     nota ancorada na base — mesma leitura da referência. */
  .hero__grid{ grid-template-columns:1fr; grid-template-rows:1fr auto; gap:clamp(2rem,6vh,3.2rem); }
  .hero__lead{ align-self:center; }
  .hero__title{ text-align:left; width:auto; max-width:13ch; }
  .hero__noteWrap{ grid-column:1; align-self:end; }
  .hero__note{ max-width:36ch; }
  .about__grid,.manifesto__grid,.gov__grid,.contact__grid{ grid-template-columns:1fr; }
  .products__grid{ grid-template-columns:repeat(2,1fr); }
  .kpi__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  :root{ --nav-h:66px; }
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .products__grid{ grid-template-columns:1fr; }
  .kpi__grid{ grid-template-columns:1fr; }
  .card--dark{ min-height:380px; }
  .hero__title{ max-width:11ch; }
  .hero__wash{
    background:
      linear-gradient(96deg, rgba(6,23,38,.58) 0%, rgba(6,23,38,.34) 45%, rgba(6,23,38,.14) 100%),
      linear-gradient(0deg, rgba(6,23,38,.55) 0%, rgba(6,23,38,.1) 45%, rgba(6,23,38,0) 70%);
  }
  /* Sem pin: o padding-block gigante era pra centralizar dentro de
     100svh. Em fluxo normal ele só empilha com o padding de .process
     e sobra navy vazio embaixo dos cards — zera aqui. */
  .process__sticky{ position:static; height:auto; padding-block:0; }
  .process__track{
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .process__track::-webkit-scrollbar{ display:none; }
  .step{ scroll-snap-align:center; }
  .process{ padding-block:var(--sec); }
  .process__rail{ display:none; }
}

/* Menu mobile */
.menu{
  position:fixed; inset:0; z-index:95; background:var(--abyss);
  display:flex; flex-direction:column; justify-content:center; gap:.5rem;
  padding:var(--gut); clip-path:circle(0% at calc(100% - 46px) 40px);
  transition:clip-path .8s var(--ease); pointer-events:none;
}
.is-open .menu{ clip-path:circle(150% at calc(100% - 46px) 40px); pointer-events:auto; }
/* Painel aberto = página travada. Sem isso o fundo rola por baixo
   do menu e o usuário volta perdido no meio da página. */
body.is-open{ overflow:hidden; }
.menu a{
  font-family:var(--display); font-size:clamp(2rem,9vw,3rem); font-weight:300;
  color:#fff; letter-spacing:-.03em; padding:.35rem 0; opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i) * 60ms + .15s);
}
.is-open .menu a{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  /* Pedido do usuário: títulos e conteúdo continuam animando
     (opacidade + posição) ao entrar na tela mesmo com "reduzir
     movimento" ligado no sistema — repõe a transição real desses
     seletores por cima do corte geral acima. O resto do site
     (hovers, nav, etc.) continua instantâneo. */
  [data-reveal]{ transition:opacity .95s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease) !important; transition-delay:var(--d,0ms) !important; }
  [data-reveal="mask"]{ transition:clip-path 1.25s var(--ease) !important; transition-delay:var(--d,0ms) !important; }
  .split .w > *{ transition:transform 1s var(--ease) !important; transition-delay:calc(var(--i,0) * 44ms) !important; }
  /* Ticker de segmentos: pedido do usuário pra continuar deslizando
     infinito mesmo com "reduzir movimento" ligado. */
  .ticker__row{ animation:slide 42s linear infinite !important; }
  /* Sem pin: fluxo normal, então quem repõe o respiro no topo/base
     é o padding-block da .process (a .process__sticky não empilha
     mais dentro de 100svh, então o padding dela deixa de fazer
     sentido e zera). Sem isso o título nascia colado no nav. */
  .process__sticky{ position:static; height:auto; padding-block:0; }
  .process{ padding-block:var(--sec); }
  .process__track{ overflow-x:auto; scrollbar-width:none; }
  .process__track::-webkit-scrollbar{ display:none; }
}

/* ============================================================
   17. PÁGINA INTERNA — TOPO E BLOCOS DE TEXTO
   Mesmo motor do hero da home: .hero__bg / .hero__photo /
   .hero__wash e os mesmos data-attributes de animação.
   ============================================================ */
.hero--page{
  min-height:clamp(460px,66svh,720px);
  align-items:end;
  padding-bottom:clamp(3rem,13vh,7.5rem);
}
.hero--page .hero__wash{
  background:
    linear-gradient(180deg, rgba(6,23,38,.55) 0%, rgba(6,23,38,.12) 14%, rgba(6,23,38,0) 24%),
    linear-gradient(90deg, rgba(6,23,38,.9) 0%, rgba(6,23,38,.7) 24%, rgba(6,23,38,.3) 50%, rgba(6,23,38,.08) 100%);
}
.hero--page .hero__in{ align-items:flex-end; }

/* Foto por página. Fica no CSS (e não em style inline) porque o
   Chrome resolve url() dentro de custom property em relação ao
   arquivo .css, não ao HTML — inline apontaria para /css/assets. */
.hero__photo--institucional{
  background-image:url('../assets/bg-people.png'), var(--grad-deep);
  background-position:50% 34%;
}
@media (max-width:760px){
  .hero__photo--institucional{ background-image:url('../assets/bg-people-mobile.png'), var(--grad-deep); }
}
.hero__photo--empresas{
  background-image:url('../assets/bg-branding.png'), var(--grad-deep);
  background-position:50% 34%;
}
.hero__photo--negocie{
  background-image:url('../assets/bg-negocie.png'), var(--grad-deep);
  background-position:50% 34%;
}
.hero__photo--vagas{
  background-image:url('../assets/bg-oportunidades.png'), var(--grad-deep);
  background-position:32% 38%;
}
/* Páginas de texto: sem foto, só a marca. */
.hero__photo--flat{ background-image:var(--grad-deep); }

.pageHead{ display:flex; flex-direction:column; gap:clamp(1rem,1.8vw,1.5rem); max-width:52ch; }
.pageHead h1{
  font-size:clamp(2.4rem,4.2vw,4.4rem); font-weight:700; letter-spacing:-.035em;
  line-height:1.05; text-shadow:0 14px 60px rgba(6,23,38,.5);
}
.pageHead__lead{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.42rem); line-height:1.5;
  color:rgba(255,255,255,.94); max-width:44ch;
  text-shadow:0 10px 40px rgba(6,23,38,.55);
}

/* Blocos "Sobre nós" / "Nosso propósito" ------------------- */
.pillars{ background:var(--white); padding:clamp(4rem,9vw,8rem) 0 clamp(4.5rem,10vw,9rem); }
.pillar + .pillar{ margin-top:clamp(3rem,6vw,5.5rem); }
.pillar__grid{
  display:grid; grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:start;
}
.pillar h2{
  font-size:clamp(2rem,4.2vw,4.2rem); font-weight:700; letter-spacing:-.035em;
  line-height:1.05; max-width:8ch;
}
.pillar__body{ display:flex; flex-direction:column; gap:clamp(.9rem,1.4vw,1.15rem); max-width:78ch; }
.pillar__body p{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.5rem); line-height:1.5; color:#2A3B47;
}
.pillar__rule{ margin-top:1.6rem; }

/* Visão / Missão / Valores ----------------------------------
   Duas colunas: à esquerda dois cartões empilhados (gradiente +
   foto), à direita um terceiro cartão mais baixo, centralizado
   no vão entre os dois — por isso grid-row:span 2 + align-self:
   center + aspect-ratio, em vez de esticar a coluna inteira. */
.compass{ background:var(--paper); padding:clamp(4.5rem,9vw,8rem) 0; }
/* Full-bleed (sem .container): mesmo truque do .process__track — a
   trilha ocupa a largura toda da viewport, com o padding repondo o
   alinhamento do primeiro card à margem do conteúdo. Se os cards não
   couberem no seu min-width, rola lateral em vez de espremer. */
.compass__grid{
  display:flex; gap:clamp(1rem,1.6vw,1.5rem);
  overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-inline:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));
  padding-bottom:.5rem;
}
.compass__grid::-webkit-scrollbar{ display:none; }
.compass__card{
  position:relative; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  padding:clamp(1.8rem,2.6vw,2.6rem);
  /* height (não aspect-ratio) + flex-grow:1 — aspect-ratio no eixo
     principal do flex trava a largura no flex-basis e ignora o
     grow, porque o navegador passa a resolver a largura a partir da
     altura (stretch) em vez do contrário. */
  flex:1 0 min(340px,82vw); height:clamp(360px,38vw,460px); scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
}
.compass__card h3{ position:relative; z-index:1; font-size:clamp(1.6rem,2.4vw,2.2rem); font-weight:700; letter-spacing:-.03em; }
/* Só o título fica visível de cara — a descrição nasce recolhida
   (altura e opacidade zeradas) e só aparece no hover/foco, junto
   com o desfoque do fundo logo abaixo. */
.compass__card p{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:300; line-height:1.5;
  font-size:clamp(1rem,1.25vw,1.15rem); color:rgba(255,255,255,.92); max-width:36ch;
  max-height:0; margin-top:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), margin-top .5s var(--ease), opacity .35s var(--ease);
}
.compass__card:hover p, .compass__card:focus-within p{ max-height:220px; margin-top:.9rem; opacity:1; }

.compass__card--photo::before{
  content:""; position:absolute; inset:-14px; z-index:0;
  background-image:linear-gradient(0deg, rgba(6,23,38,.86) 0%, rgba(6,23,38,.35) 55%, rgba(6,23,38,.05) 100%), var(--card-photo);
  background-size:cover; background-position:center;
}
.compass__card--mission{ --card-photo:url('../assets/bg-missao.png'); }
.compass__card--vision{ --card-photo:url('../assets/bg-visao.png'); }
.compass__card--values{ --card-photo:url('../assets/bg-valores.png'); }

/* Desktop: grade fixa de 3 colunas iguais (33,33% cada), ocupando a
   largura toda da tela — sem o comportamento de scroll lateral, que
   fica reservado pra quando os cards não cabem (telas menores). */
@media (min-width:901px){
  .compass{ padding:30px; }
  .compass__grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
    overflow:visible; padding:0;
  }
  .compass__card{ flex:none; height:clamp(420px,30vw,560px); }
}

@media (max-width:900px){
  .pillar__grid{ grid-template-columns:1fr; gap:1.2rem; }
  .pillar h2{ max-width:none; }
  .hero--page{ min-height:clamp(440px,72svh,640px); }
}

/* ============================================================
   18. NOSCRIPT — o motor de reveal esconde 42 de 45 blocos até o
   JS rodar. Sem script, a página precisa nascer visível.
   ============================================================ */
.noscript{
  background:var(--current); color:#fff; text-align:center;
  padding:calc(var(--nav-h) + 1rem) var(--gut) 1rem; font-size:.95rem;
}
.noscript a{ text-decoration:underline; }

/* ============================================================
   19. FORMULÁRIO
   ============================================================ */
.form{ display:flex; flex-direction:column; gap:1.1rem; width:100%; }
.form__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.field--wide{ grid-column:1 / -1; }
.field label{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.field input,
.field select,
.field textarea{
  font:inherit; color:var(--ink); width:100%;
  background:var(--white); border:1px solid rgba(10,43,60,.2); border-radius:14px;
  padding:.95rem 1.1rem; transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
  appearance:none;
}
.field textarea{ min-height:120px; resize:vertical; }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size:6px 6px; background-repeat:no-repeat; padding-right:2.8rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--current);
  box-shadow:0 0 0 3px rgba(20,120,255,.18);
}
.field__hint{ font-size:.82rem; color:var(--muted); }
/* O erro só aparece depois da primeira tentativa de envio:
   validar enquanto a pessoa ainda digita é hostil. */
.field__error{ font-size:.82rem; color:var(--danger); display:none; }
.form.is-checked .field input:invalid,
.form.is-checked .field select:invalid,
.form.is-checked .field textarea:invalid{ border-color:var(--danger); }
.form.is-checked .field input:invalid ~ .field__error,
.form.is-checked .field select:invalid ~ .field__error,
.form.is-checked .field textarea:invalid ~ .field__error{ display:block; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; }
.form__status{ font-size:.88rem; color:var(--muted); min-height:1.3em; }
.form__status[data-tone="error"]{ color:var(--danger); }
.form__status[data-tone="ok"]{ color:var(--current-ink); }
.form__legal{ font-size:.82rem; color:var(--muted); max-width:56ch; }
.form__legal a{ color:var(--current-ink); text-decoration:underline; }

/* Formulário sobre fundo escuro */
.form--dark .field label{ color:rgba(255,255,255,.62); }
.form--dark .field input,
.form--dark .field select,
.form--dark .field textarea{
  background:rgba(255,255,255,.06); border-color:var(--line-d); color:#fff;
}
.form--dark .field input::placeholder,
.form--dark .field textarea::placeholder{ color:rgba(255,255,255,.4); }
.form--dark .field select{ background-image:none; }
.form--dark .field select option{ color:var(--ink); }
.form--dark .field__hint,
.form--dark .form__status,
.form--dark .form__legal{ color:rgba(255,255,255,.62); }
.form--dark .form__legal a{ color:var(--signal); }

/* ============================================================
   20. FAIXA DE CHAMADA (fecho de página)
   ============================================================ */
.cta{ background:var(--abyss); color:#fff; padding:var(--sec) 0; position:relative; overflow:hidden; }
.cta__in{
  position:relative; z-index:2; display:flex; flex-wrap:wrap;
  align-items:flex-end; justify-content:space-between; gap:2rem;
}
.cta__copy{ display:flex; flex-direction:column; gap:1.2rem; max-width:clamp(24ch,50vw,52ch); }
.cta h2{ color:#fff; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* ============================================================
   21. PÁGINA DE DOCUMENTO (política, termos)
   ============================================================ */
.doc{ padding:var(--sec) 0; background:var(--white); }
.doc__grid{ display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.doc__toc{ position:sticky; top:calc(var(--nav-h) + 1.5rem); display:flex; flex-direction:column; gap:.6rem; }
.doc__toc p{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.4rem;
}
.doc__toc a{ color:var(--muted); font-size:.95rem; padding:.2rem 0; transition:color .35s; }
.doc__toc a:hover{ color:var(--current-ink); }
.doc__body{ display:flex; flex-direction:column; gap:clamp(2rem,4vw,3rem); max-width:68ch; }
.doc__body section{ display:flex; flex-direction:column; gap:.9rem; scroll-margin-top:calc(var(--nav-h) + 2rem); }
.doc__body h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.doc__body h3{ font-size:1.1rem; margin-top:.6rem; }
.doc__body p,
.doc__body li{ color:var(--muted); font-size:1rem; line-height:1.7; }
.doc__body ul{ margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.doc__body strong{ color:var(--ink); font-weight:600; }
.doc__body a{ color:var(--current-ink); text-decoration:underline; }
.doc__meta{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  padding-top:1.5rem; border-top:1px solid var(--line);
}

/* Aviso destacado dentro do texto */
.notice{
  border-radius:var(--r); padding:clamp(1.4rem,2.4vw,2rem);
  background:var(--paper); border-left:4px solid var(--current);
  display:flex; flex-direction:column; gap:.6rem;
}
.notice b{ font-family:var(--display); font-size:1.1rem; font-weight:500; color:var(--ink); }
.notice p{ color:var(--muted); font-size:.98rem; }

/* ============================================================
   22. FAQ (accordion nativo)
   ============================================================ */
.faq{ display:flex; flex-direction:column; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.3rem); font-weight:400;
  letter-spacing:-.02em; color:var(--ink); transition:color .35s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--current-ink); }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:14px; height:2px;
  background:var(--current); border-radius:2px; transform:translateY(-50%);
}
.faq summary::before{
  content:""; position:absolute; right:.4rem; top:50%; width:14px; height:2px;
  background:var(--current); border-radius:2px;
  transform:translateY(-50%) rotate(90deg); transition:transform .4s var(--ease);
}
.faq details[open] summary::before{ transform:translateY(-50%) rotate(0deg); }
.faq details p{ color:var(--muted); padding:0 3rem 1.6rem 0; max-width:64ch; }
.faq details p + p{ padding-top:.8rem; }

/* ============================================================
   23. CAMINHOS / CANAIS (área do consumidor)
   ============================================================ */
.paths{ padding:var(--sec) 0; background:var(--paper); }
.paths__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.4vw,1.25rem); margin-top:clamp(2.5rem,5vw,4rem); }
.path{
  background:var(--white); border-radius:var(--r); padding:clamp(1.7rem,2.4vw,2.2rem);
  display:flex; flex-direction:column; gap:.9rem; align-items:flex-start;
  border:1px solid var(--line);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s;
}
.path:hover{ transform:translateY(-5px); border-color:rgba(20,120,255,.35); box-shadow:0 30px 60px -42px rgba(6,23,38,.7); }
.path__ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--paper); color:var(--current-ink); }
.path__ico svg{ width:22px; height:22px; }
.path h3{ font-size:1.25rem; }
.path p{ color:var(--muted); font-size:.98rem; }
.path__go{
  margin-top:auto; padding-top:.6rem; display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-weight:500; color:var(--current-ink);
}
.path__go svg{ transition:transform .45s var(--ease); }
.path:hover .path__go svg{ transform:translateX(4px); }

/* Lista numerada "o que ter em mãos" */
.checklist{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.checklist li{ list-style:none; background:var(--white); padding:1.4rem 1.5rem; display:flex; gap:1rem; align-items:flex-start; }
.checklist b{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.2em; color:var(--current-ink); padding-top:.3rem; }
.checklist span{ color:var(--muted); font-size:.98rem; }

/* ============================================================
   24. VAGAS
   ============================================================ */
.jobs{ padding:var(--sec) 0; background:var(--white); }
.jobs__list{ display:flex; flex-direction:column; margin-top:clamp(2.5rem,5vw,4rem); }
.job{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem 2rem;
  align-items:center; padding:1.9rem 0; border-top:1px solid var(--line);
  transition:padding-left .5s var(--ease);
}
.job:last-child{ border-bottom:1px solid var(--line); }
.job:hover{ padding-left:.8rem; }
.job__head{ display:flex; flex-direction:column; gap:.6rem; }
.job h3{ font-size:clamp(1.2rem,2vw,1.6rem); }
.job__tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.job__tags span{
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem;
}
.job p{ color:var(--muted); font-size:.98rem; max-width:62ch; }
.jobs__empty{
  margin-top:2rem; padding:clamp(1.8rem,3.4vw,2.8rem); border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--line); color:var(--muted);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:1.4rem 1.8rem;
  box-shadow:0 30px 60px -48px rgba(6,23,38,.6);
}
.jobs__empty .path__ico{ width:52px; height:52px; border-radius:16px; background:var(--paper); }
.jobs__empty .path__ico svg{ width:26px; height:26px; }
.jobs__empty p{ max-width:56ch; }
@media (max-width:860px){
  .jobs__empty{ grid-template-columns:1fr; justify-items:flex-start; }
}

/* ============================================================
   25. ERRO 404
   ============================================================ */
.err{ min-height:100svh; background:var(--abyss); color:#fff; display:flex; align-items:center; position:relative; overflow:hidden; }
/* .container é item flex de .err: sem flex:1 ele encolhe para o
   conteúdo e as margens auto jogam tudo para o meio. */
.err > .container{ flex:1 1 auto; }
.err__in{ position:relative; z-index:2; display:flex; flex-direction:column; gap:1.6rem; align-items:flex-start; padding-block:calc(var(--nav-h) + 3rem); }
.err h1{ max-width:20ch; font-size:clamp(1.8rem,4vw,3rem); font-weight:400; }
.err .lead{ max-width:46ch; }
.err__code{
  font-family:var(--display); font-size:clamp(5rem,18vw,12rem); font-weight:200;
  line-height:.9; letter-spacing:-.06em;
}
.err__links{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.6rem; }

/* ============================================================
   26. RESPONSIVO DAS PEÇAS NOVAS
   ============================================================ */
@media (max-width:1080px){
  .doc__grid{ grid-template-columns:1fr; }
  .doc__toc{ position:static; flex-direction:row; flex-wrap:wrap; gap:.4rem 1.4rem; }
  .paths__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .form__grid{ grid-template-columns:1fr; }
  .paths__grid{ grid-template-columns:1fr; }
  .checklist{ grid-template-columns:1fr; }
  .job{ grid-template-columns:1fr; align-items:flex-start; }
  .cta__in{ flex-direction:column; align-items:flex-start; }
  .cta__copy{ max-width:none; }
}