/* ============================================================
   AUTO ESCOLA SIM — Baixo Guandu / ES
   Paleta amostrada da marca real: verde escuro #001800,
   limão #D6F000 e o amarelo da faixa do veículo #F0C31E.
   ============================================================ */

:root{
  /* cor */
  --ink:#0D1310;
  --ink-2:#1A231D;
  --muted:#5E6C62;
  --line:#E5EAE3;
  --paper:#FFFFFF;
  --paper-2:#F6F8F4;

  --green:#5EC61B;          /* destaque vibrante — só com texto escuro por cima */
  --green-d:#2E7A14;        /* verde legível sobre branco (AA) */
  --green-900:#0B2E10;      /* verde escuro do logo */
  --green-950:#061A08;
  --lime:#D6F000;
  --amber:#F0C31E;

  /* medidas */
  --shell:1240px;
  --gut:clamp(20px,5vw,48px);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --header-h:88px;

  /* sombra */
  --sh-1:0 1px 2px rgba(13,19,16,.05), 0 4px 14px rgba(13,19,16,.05);
  --sh-2:0 2px 6px rgba(13,19,16,.05), 0 18px 44px rgba(13,19,16,.09);
  --sh-3:0 30px 80px rgba(13,19,16,.16);

  /* movimento */
  --ease:cubic-bezier(.16,1,.3,1);
  --t:.55s var(--ease);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
/* o menu off-canvas fica em translateX(102%) e esticava a largura do
   documento: o header fixo herdava essa largura e saía da tela no celular.
   'clip' corta sem criar contexto de rolagem (o sticky da hero continua). */
html{overflow-x:clip}

body{
  margin:0;
  /* --pagina segue a direção visual escolhida (ver bloco DIREÇÃO VISUAL).
     Os cards continuam em --paper: é isso que os faz "pousar" sobre o fundo. */
  background:var(--pagina,var(--paper));
  color:var(--ink);
  /* Barlow tem x-height alta e apertos curtos: segura texto pequeno em tela
     de celular, que é onde a maior parte das visitas acontece. */
  font:400 clamp(15px,.55vw + 13.4px,17px)/1.62 Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  /* 'hidden' criaria um scroll container e mataria o position:sticky da hero.
     'clip' corta o excesso sem virar contexto de rolagem. */
  overflow-x:hidden;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}

img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}

::selection{background:var(--green);color:var(--ink)}

:focus-visible{
  outline:3px solid var(--green-d);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:fixed;top:10px;left:10px;z-index:999;
  transform:translateY(-200%);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-sm);
  transition:transform .25s var(--ease);
}
.skip-link:focus{transform:none}

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

/* ---------- tipografia ---------- */
.h2{
  font-family:"Space Grotesk",Barlow,sans-serif;
  font-weight:700;
  font-size:clamp(30px,3.4vw,50px);
  line-height:1.08;
  letter-spacing:-.025em;
}
.h2 em{font-style:normal;color:var(--green-d)}
.h2--light{color:#fff}
.h2--light em{color:var(--green)}

.lead{font-size:clamp(16px,1.1vw + 13px,19px);color:var(--muted);line-height:1.62}
.lead--light{color:rgba(255,255,255,.74)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-d);
}
.eyebrow--light{color:var(--green)}
.eyebrow__dot{
  width:22px;height:2px;background:currentColor;border-radius:2px;flex:none;
}

.secthead{max-width:660px;margin-bottom:clamp(38px,4.5vw,60px)}
.secthead .h2{margin-top:14px}
.secthead__sub{margin-top:18px;color:var(--muted);font-size:clamp(15px,.9vw + 12px,17px)}
.secthead--split{
  display:grid;grid-template-columns:1fr;gap:22px;max-width:none;
  align-items:end;
}
@media (min-width:900px){
  .secthead--split{grid-template-columns:1.05fr .95fr;gap:56px}
  .secthead--split .secthead__sub{margin-top:0;padding-bottom:6px}
}

/* ============================================================
   DIREÇÃO VISUAL
   ------------------------------------------------------------
   PARA TROCAR DE DIREÇÃO: mude o atributo no <html> do index.

     <html lang="pt-BR" data-direcao="patio">   → O Pátio ao meio-dia
     <html lang="pt-BR">                        → A Faixa

   As duas direções vivem aqui em paralelo. Nenhum outro arquivo
   precisa mudar, e voltar atrás é apagar uma palavra.
   ============================================================ */

/* ---- Direção 1 — A FAIXA (padrão) -------------------------
   A demarcação viária: a marca pintada que transforma asfalto
   em caminho legível. É a faixa amarela dos veículos da SIM. */
:root{
  --grao-op:.05;
  --faixa-cor-esc:rgba(214,240,0,.05);   /* marcação sobre superfície escura */
  --faixa-ang:116deg;                    /* o eixo — constante no site inteiro */

  --pagina:var(--paper);
  --pagina-2:var(--paper-2);

  --geo-camada:repeating-linear-gradient(var(--faixa-ang),
      transparent 0 190px, rgba(13,19,16,.030) 190px 216px);
  --geo-tam:auto;
  --luz-camada:radial-gradient(58% 46% at 88% 2%, rgba(94,198,27,.10), transparent 62%);
  --geo-mascara:linear-gradient(200deg,#000 4%,rgba(0,0,0,.32) 54%,transparent 88%);
}

/* ---- Direção 2 — O PÁTIO AO MEIO-DIA ----------------------
   O pátio de treino sob luz alta e chapada: concreto claro,
   linhas pintadas, baliza demarcada. Responde ao medo do aluno
   com método, não com drama. */
:root[data-direcao="patio"]{
  --grao-op:.038;                        /* concreto tem dente, mas luz alta achata */
  --faixa-cor-esc:rgba(255,255,255,.03);

  --pagina:#F2F3EF;                      /* concreto */
  --pagina-2:#E9ECE3;                    /* concreto mais fechado */
  --line:#DDE2D6;                        /* borda precisa fechar mais sobre concreto */
  /* o cinza original (#5E6C62) caía para 4,4:1 sobre o concreto tonalizado.
     Este é o menor escurecimento que devolve folga sobre os três fundos. */
  --muted:#586558;

  /* grade da baliza: linha fina de 96px e marcação forte a cada 480px */
  --geo-camada:
    linear-gradient(rgba(13,19,16,.055) 2px, transparent 2px),
    linear-gradient(90deg, rgba(13,19,16,.055) 2px, transparent 2px),
    linear-gradient(rgba(13,19,16,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,19,16,.028) 1px, transparent 1px);
  --geo-tam:480px 480px, 480px 480px, 96px 96px, 96px 96px;
  /* sol a pino: luz de cima, sem cor, sem direção lateral */
  --luz-camada:radial-gradient(130% 68% at 50% -14%, rgba(255,255,255,.92), transparent 64%);
  --geo-mascara:radial-gradient(ellipse 88% 66% at 50% 40%, #000 32%, transparent 100%);
}

/* grão global: uma folha só, fixa, sobre a página inteira */
body::after{
  content:"";position:fixed;inset:0;z-index:3;pointer-events:none;
  opacity:var(--grao-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
}

.section{padding:clamp(72px,8vw,124px) 0;position:relative;isolation:isolate}
/* geometria + luz. z-index -1 fica acima do fundo da seção e abaixo do conteúdo */
.section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--luz-camada), var(--geo-camada);
  background-size:auto, var(--geo-tam);
  -webkit-mask-image:var(--geo-mascara);
          mask-image:var(--geo-mascara);
}
/* A seção PCD e a de números já tinham a marcação própria delas.
   Não duplico a camada ali — só alinho o eixo ao mesmo ângulo do site. */

/* mobile: menos densidade, como manda a regra de textura em tela pequena */
@media (max-width:640px){
  :root{--grao-op:.035}
  :root[data-direcao="patio"]{--grao-op:.028;--geo-tam:300px 300px, 300px 300px, 60px 60px, 60px 60px}
}

.section--tint{background:var(--pagina-2)}

/* ---------- ícones ---------- */
.ico,.card__ico svg,.contact__ico svg,.pcd__ico svg,.footer__social svg,.fab svg{
  width:22px;height:22px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.btn--wa .ico,.fab svg,.sign--accent .ico,.footer__social svg path:first-child{fill:currentColor;stroke:none}
.ico--arrow{transition:transform .35s var(--ease)}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  --pad:15px 26px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--pad);border:0;border-radius:100px;
  font-family:"Space Grotesk",Barlow,sans-serif;
  font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn--sm{--pad:12px 20px;font-size:14px}
.btn--block{width:100%}

.btn--primary{background:var(--green);color:var(--ink);box-shadow:0 10px 26px rgba(94,198,27,.34)}
.btn--primary:hover{background:#6ad81f;transform:translateY(-2px);box-shadow:0 16px 34px rgba(94,198,27,.42)}
.btn--primary:hover .ico--arrow{transform:translateX(4px)}
.btn--primary:active{transform:translateY(0)}

.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}

.btn--wa{background:var(--green-900);color:#fff}
.btn--wa:hover{background:var(--ink);transform:translateY(-2px)}

.pcd .btn--ghost,.contact .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.pcd .btn--ghost:hover,.contact .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s;
}
.header__inner{
  display:flex;align-items:center;gap:clamp(16px,2.5vw,40px);
  height:var(--header-h);
  transition:height .4s var(--ease);
}
.header.is-stuck{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  box-shadow:0 1px 0 rgba(13,19,16,.07),0 10px 30px rgba(13,19,16,.06);
}
.header.is-stuck .header__inner{height:70px}

.brand{flex:none;display:block}
.brand img{
  width:auto;height:clamp(38px,4vw,50px);
  transition:height .4s var(--ease);
}
.header.is-stuck .brand img{height:38px}

.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.nav__list a{
  position:relative;display:block;padding:8px 2px;
  font-size:14px;font-weight:500;color:var(--ink-2);
  transition:color .25s;
}
.nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--green);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav__list a:hover,.nav__list a.is-active{color:var(--ink)}
.nav__list a:hover::after,.nav__list a.is-active::after{transform:scaleX(1)}

/* enquanto está sobre o vídeo da hero, o header inverte para leitura em fundo escuro */
.header:not(.is-stuck) .nav__list a{color:rgba(255,255,255,.86)}
.header:not(.is-stuck) .nav__list a:hover,
.header:not(.is-stuck) .nav__list a.is-active{color:#fff}
.header:not(.is-stuck) .btn--wa{background:var(--green);color:var(--ink)}
.header:not(.is-stuck) .btn--wa:hover{background:#6ad81f}
.header:not(.is-stuck) .burger{border-color:rgba(255,255,255,.3)}
.header:not(.is-stuck) .burger span{background:#fff}
@media (max-width:1080px){
  /* com o menu off-canvas aberto (fundo claro), volta ao tema escuro de texto */
  .header:not(.is-stuck) .nav.is-open .nav__list a{color:var(--ink-2)}
}

.header__actions{display:flex;align-items:center;gap:12px;flex:none}

.header__progress{
  height:2px;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--green),var(--lime));
  opacity:0;transition:opacity .3s;
}
.header.is-stuck .header__progress{opacity:1}

/* hambúrguer */
.burger{
  display:none;width:44px;height:44px;padding:0;
  background:transparent;border:1.5px solid var(--line);border-radius:12px;
  cursor:pointer;position:relative;
  transition:border-color .25s,background .25s;
}
.burger span{
  position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .4s var(--ease),opacity .25s;
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:#070D09;color:#fff}
/* o palco tem min-height 660px; sem este min-height a trilha poderia ficar
   MENOR que o palco em viewports baixos e o scrub saturaria de imediato. */
.hero__track{height:230vh;min-height:calc(660px + 130vh)}
.hero__stage{
  position:sticky;top:0;height:100vh;min-height:660px;
  display:flex;flex-direction:column;
  padding-top:var(--header-h);
  overflow:hidden;
}

/* ---------- plano de fundo em vídeo ---------- */
.herobg{position:absolute;inset:0;overflow:hidden;background:#070D09}
.herobg__poster,.herobg__video{
  position:absolute;inset:0;width:100%;height:100%;
  /* o carro vem centrado no material bruto; o recorte do cover é tomado
     pela esquerda para empurrá-lo à direita e liberar espaço para o texto.
     sem scale extra: qualquer zoom a mais corta o teto e a traseira. */
  object-fit:cover;object-position:100% center;
}
.herobg__video{opacity:0;transition:opacity .7s var(--ease)}
.herobg.video-ready .herobg__video{opacity:1}
.herobg.video-ready .herobg__poster{opacity:0;transition:opacity .7s var(--ease)}
.herobg__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(5,11,7,.90) 0%,rgba(5,11,7,.80) 17%,rgba(5,11,7,.50) 32%,rgba(5,11,7,.20) 47%,rgba(5,11,7,.03) 63%,rgba(5,11,7,.26) 100%),
    linear-gradient(to bottom,rgba(5,11,7,.58) 0%,transparent 20%),
    linear-gradient(to top,rgba(5,11,7,.76) 0%,transparent 32%);
}

.hero__grid{
  flex:1;display:grid;grid-template-columns:1fr;align-items:center;
  gap:24px;position:relative;z-index:2;min-height:0;
}

.hero__copy{max-width:min(600px,52%)}
@media (max-width:1100px){.hero__copy{max-width:640px}}
.hero__title{
  font-family:"Space Grotesk",Barlow,sans-serif;
  font-weight:700;
  font-size:clamp(40px,6.2vw,80px);
  line-height:.98;letter-spacing:-.035em;
  margin:16px 0 20px;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title em{font-style:normal;color:var(--green)}
.hero__sub{color:rgba(255,255,255,.76);font-size:clamp(15px,.85vw + 12.6px,18px);max-width:47ch}
.hero__sub strong{color:#fff;font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .eyebrow{color:var(--green)}
.hero .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.hero .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.07)}
/* sombra no texto permite aliviar o scrim sem perder legibilidade sobre o vídeo */
.hero__title,.hero__sub{text-shadow:0 2px 24px rgba(3,8,5,.55)}
.hero__carmob{display:none}

/* campanhas rotativas */
.campaign{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:16px;padding:6px 16px 6px 6px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:100px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:13.5px;color:rgba(255,255,255,.9);
  max-width:100%;
}
.campaign__tag{
  flex:none;padding:5px 11px;border-radius:100px;
  background:var(--green);color:var(--ink);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}
.campaign__text{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  /* sem min-width:0 o nowrap trava a largura mínima da pílula em ~370px e
     empurra a coluna inteira da hero para fora da tela no celular */
  min-width:0;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.campaign{max-width:100%}
.campaign__text.is-out{opacity:0;transform:translateY(-6px)}

/* avaliação google */
.rating{display:flex;align-items:center;gap:14px;margin-top:30px}
.rating__stars{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:100px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.rating__stars svg{width:19px;height:19px;fill:var(--amber);stroke:none}
.rating__value{font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;color:#fff}
.rating__label{font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.62)}
.rating__label strong{color:#fff;font-weight:600}
.rating__label span{display:block;font-size:12.5px;opacity:.85}

/* placas de informação rápida */
.signs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;position:relative;z-index:2;
  padding-bottom:clamp(20px,3vh,34px);
}
.sign{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:rgba(10,18,12,.46);
  border:1px solid rgba(255,255,255,.13);border-left:3px solid var(--green);
  border-radius:4px 14px 14px 4px;
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s;
}
.sign:hover{transform:translateY(-3px);background:rgba(10,18,12,.62)}
.sign .ico{color:var(--green)}
.sign strong{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:#fff}
.sign span{display:block;font-size:12.5px;color:rgba(255,255,255,.58);line-height:1.3;margin-top:2px}
.sign--accent{background:var(--green);border-color:var(--green);border-left-color:var(--ink)}
.sign--accent .ico{color:var(--ink)}
.sign--accent strong{color:var(--ink)}
.sign--accent span{color:rgba(13,19,16,.7)}
.sign--accent:hover{background:#6ad81f}

.scrollhint{
  position:absolute;right:16px;bottom:130px;z-index:2;
  writing-mode:vertical-rl;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);
  padding-bottom:44px;
}
.scrollhint::after{
  content:"";position:absolute;left:50%;bottom:0;width:1px;height:36px;
  background:linear-gradient(rgba(255,255,255,.62),transparent);
  animation:hintdrop 2.1s var(--ease) infinite;
}
@keyframes hintdrop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:1200px){.scrollhint{display:none}}

/* ============================================================
   NÚMEROS
   ============================================================ */
.stats{background:var(--green-900);color:#fff;position:relative;overflow:hidden}
.stats::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 118px,rgba(255,255,255,.05) 118px 120px),
    radial-gradient(80% 140% at 90% 0%,rgba(94,198,27,.22),transparent 60%);
  pointer-events:none;
}
.stats__grid{
  position:relative;display:grid;gap:2px;
  grid-template-columns:repeat(2,1fr);
  padding:clamp(38px,4.5vw,58px) 0;
}
@media (min-width:820px){.stats__grid{grid-template-columns:repeat(4,1fr)}}
.stat{padding:14px clamp(10px,2vw,26px);position:relative}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.14);
}
@media (max-width:819px){.stat:nth-child(3)::before{display:none}}
.stat__num{
  display:block;font-family:"Space Grotesk",Barlow,sans-serif;
  font-weight:700;font-size:clamp(34px,4.6vw,58px);line-height:1;
  letter-spacing:-.035em;color:var(--green);
  font-variant-numeric:tabular-nums;
}
.stat__label{display:block;margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.66)}

/* ============================================================
   SOBRE
   ============================================================ */
.about{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:940px){
  .about{grid-template-columns:1fr 1fr}
  /* o carro é fotografado apontando para a esquerda e não pode ser espelhado
     (inverteria "FIAT", "MOBI" e o logo SIM da lateral). Colocando a imagem à
     direita, ele passa a apontar para dentro, na direção do texto. */
  .about__media{order:2}
  .about__copy{order:1}
}

.about__media{position:relative}
.about__frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(150deg,var(--paper-2),#EAF3E4);
  box-shadow:var(--sh-2);
  aspect-ratio:7/5;display:grid;place-items:center;padding:4.5%;
}
.about__frame::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 26px,transparent 26px 52px);
  opacity:.14;
}
.about__frame img{width:100%;object-fit:contain}

/* ---------- faróis ---------- */
.about__car{position:relative;width:100%;aspect-ratio:1425/809}
.about__car img{display:block;width:100%;height:100%;object-fit:contain}

.beam{
  position:absolute;border-radius:50%;pointer-events:none;opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(closest-side,
    rgba(255,252,232,.98) 0%,rgba(255,246,198,.85) 26%,
    rgba(255,238,160,.42) 52%,rgba(255,232,140,0) 78%);
}
/* posições medidas sobre a arte: farol grande e o farol do lado oposto */
.beam--near{left:32.5%;top:45%;width:16%;height:18%}
.beam--far{left:5.5%;top:46%;width:9.5%;height:14%}
.beam__wash{
  position:absolute;left:-14%;top:40%;width:34%;height:26%;
  pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse at right center,
    rgba(255,246,205,.5) 0%,rgba(255,240,180,.18) 45%,rgba(255,240,180,0) 75%);
  filter:blur(6px);
}

@keyframes farolPisca{
  0%{opacity:0}   7%{opacity:1}   20%{opacity:1}   27%{opacity:0}
  42%{opacity:0}  49%{opacity:1}  64%{opacity:1}   72%{opacity:0}
  100%{opacity:0}
}
.about.is-on .beam{animation:farolPisca 1.9s var(--ease) .85s 1 both}
.about.is-on .beam__wash{animation:farolPisca 1.9s var(--ease) .85s 1 both;animation-timing-function:ease-out}

/* ---------- título em linhas mascaradas ---------- */
.h2--split{margin:14px 0 20px}
.h2--split .ln{display:block;overflow:hidden}
.h2--split .ln > span{display:block}
/* sem JS o título não pode ficar escondido esperando um gatilho que não vem */
.js .h2--split .ln > span{
  transform:translateY(104%);
  transition:transform .95s var(--ease);
}
.about.is-on .h2--split .ln > span{transform:none}
.h2--split .ln:nth-child(2) > span{transition-delay:.11s}
.h2--split .ln:nth-child(3) > span{transition-delay:.22s}

/* o traço verde é desenhado depois que a linha assenta */
.h2--split em{position:relative;font-style:normal;color:var(--green-d)}
.h2--split em::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:.085em;
  background:var(--green);border-radius:3px;
  transform-origin:left;
  transition:transform .85s var(--ease);
}
.js .h2--split em::after{transform:scaleX(0)}
.about.is-on .h2--split em::after{transition-delay:.62s;transform:scaleX(1)}
.about.is-on .h2--split .ln:nth-child(3) em::after{transition-delay:.76s}

/* ---------- entrada escalonada do restante ---------- */
.js .about__fx{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(.45s + var(--fx,0) * .07s);
}
.about.is-on .about__fx{opacity:1;transform:none}

.js .about__badge{
  opacity:0;transform:translateY(14px) scale(.94);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:.5s;
}
.about.is-on .about__badge{opacity:1;transform:none}
.about__badge{
  position:absolute;right:-6px;bottom:-18px;
  display:flex;align-items:center;gap:12px;
  padding:16px 22px;border-radius:var(--r-md);
  background:var(--ink);color:#fff;box-shadow:var(--sh-2);
}
.about__badge strong{
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;
  font-size:34px;line-height:1;letter-spacing:-.04em;color:var(--green);
}
.about__badge span{font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.72)}

.about__copy .h2{margin:14px 0 20px}
.about__copy .lead{margin-bottom:14px}
.about__copy p{color:var(--muted)}
.ticks{display:grid;gap:11px;margin:26px 0 30px}
.ticks li{position:relative;padding-left:30px;font-size:15px;font-weight:500}
.ticks li::before{
  content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;
  background:var(--green);
}
.ticks li::after{
  content:"";position:absolute;left:6px;top:.5em;width:8px;height:4px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}

/* ============================================================
   CARDS (diferenciais)
   ============================================================ */
.cards{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{
  position:relative;padding:30px 26px 28px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--green),var(--lime));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card__ico{
  display:grid;place-items:center;width:50px;height:50px;margin-bottom:18px;
  border-radius:14px;background:var(--paper-2);color:var(--green-d);
  transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease);
}
.card__ico svg{width:24px;height:24px}
.card:hover .card__ico{background:var(--green);color:var(--ink);transform:rotate(-6deg) scale(1.05)}
.card h3{font-family:"Space Grotesk",Barlow,sans-serif;font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ============================================================
   CATEGORIAS — estética de placa
   ============================================================ */
.plates{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.plate{
  position:relative;display:flex;flex-direction:column;
  padding:28px 26px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.plate::after{
  content:"";position:absolute;inset:8px;border-radius:11px;
  border:1px dashed rgba(13,19,16,.10);pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);
}
.plate:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent}
.plate:hover::after{opacity:1}

.plate__code{
  display:grid;place-items:center;
  width:64px;height:64px;margin-bottom:18px;
  border-radius:50%;
  background:var(--green-900);color:var(--lime);
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;
  font-size:26px;letter-spacing:-.03em;
  box-shadow:inset 0 0 0 3px rgba(214,240,0,.28);
  transition:transform .5s var(--ease),background .4s,color .4s;
}
.plate__code--word{font-size:24px}
.plate:hover .plate__code{transform:scale(1.06) rotate(-4deg);background:var(--green);color:var(--ink);box-shadow:inset 0 0 0 3px rgba(13,19,16,.16)}

.plate h3{font-family:"Space Grotesk",Barlow,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:9px}
.plate p{font-size:14.5px;color:var(--muted);line-height:1.6;flex:1}
.plate__cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:14px;font-weight:600;color:var(--green-d);
  transition:gap .35s var(--ease),color .25s;
}
.plate__cta::after{
  content:"";width:16px;height:8px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h14M11 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 4h14M11 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.plate__cta:hover{gap:13px;color:var(--ink)}

/* ============================================================
   PCD
   ============================================================ */
.pcd{
  position:relative;overflow:hidden;
  padding:clamp(72px,8vw,120px) 0;
  background:
    radial-gradient(110% 90% at 88% 12%,rgba(94,198,27,.26),transparent 58%),
    linear-gradient(155deg,var(--green-950),var(--green-900) 55%,#0A2410);
  color:#fff;
}
.pcd::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(var(--faixa-ang),transparent 0 46px,var(--faixa-cor-esc) 46px 92px);
}
.pcd__inner{position:relative;display:grid;gap:clamp(40px,5vw,64px);align-items:center}
@media (min-width:960px){.pcd__inner{grid-template-columns:1.1fr .9fr}}
.pcd__copy .h2{margin:14px 0 20px}
.pcd__list{display:grid;gap:18px;margin:32px 0 34px}
.pcd__list li{display:flex;gap:14px;align-items:flex-start}
.pcd__ico{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;border-radius:50%;
  background:rgba(94,198,27,.16);color:var(--green);
}
.pcd__ico svg{width:17px;height:17px;stroke-width:2.2}
.pcd__list strong{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.pcd__list span{display:block;font-size:14px;color:rgba(255,255,255,.62);margin-top:3px;line-height:1.5}
.pcd__note{margin-top:20px;font-size:13px;color:rgba(255,255,255,.5);max-width:56ch}

.pcd__art{display:flex;justify-content:center}
.pcd__symbol{width:min(100%,380px);height:auto}
.pcd__ring{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.5}
.pcd__ring--2{stroke:rgba(94,198,27,.28);stroke-dasharray:5 12;animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg);transform-origin:160px 160px}}
.pcd__glyph{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.pcd__glyph circle:first-child{fill:var(--green);stroke:none}
.pcd__wheel{stroke:rgba(255,255,255,.9);stroke-width:7;stroke-dasharray:250 115;stroke-linecap:round}

/* ============================================================
   PROCESSO — rota
   ============================================================ */
.route{position:relative;padding-left:6px}
.route__line{
  position:absolute;left:0;top:12px;bottom:60px;width:40px;height:auto;
  overflow:visible;
}
@media (min-width:760px){.route__line{left:50%;transform:translateX(-50%)}}
.route__bed{stroke:var(--line);stroke-width:2}
.route__dash{
  stroke:var(--green);stroke-width:3;stroke-dasharray:14 12;
  stroke-dashoffset:0;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .12s linear;
}

.route__steps{display:grid;gap:clamp(22px,3vw,34px)}
.step{
  position:relative;display:flex;gap:18px;align-items:flex-start;
  padding-left:56px;
}
.step__n{
  position:absolute;left:0;top:0;
  display:grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:50%;background:var(--paper);border:2px solid var(--line);
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;font-size:14px;
  color:var(--muted);letter-spacing:-.02em;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.step.in .step__n{background:var(--green);border-color:var(--green);color:var(--ink);transform:scale(1.06)}
.step.step--final.in .step__n{background:var(--green-900);border-color:var(--green-900);color:var(--lime)}
.step h3{font-family:"Space Grotesk",Barlow,sans-serif;font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:46ch}

@media (min-width:760px){
  .route__steps{gap:clamp(26px,3vw,40px)}
  .step{width:50%;padding-left:0;padding-right:64px;text-align:right;justify-content:flex-end}
  .step .step__n{left:auto;right:-22px}
  .step:nth-child(even){margin-left:50%;padding-right:0;padding-left:64px;text-align:left}
  .step:nth-child(even) .step__n{right:auto;left:-22px}
  .step p{max-width:none}
}

.route__cta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
  margin-top:clamp(38px,4.5vw,58px);
}
@media (max-width:560px){.route__cta .btn{width:100%}}

/* ============================================================
   BANNER PARALLAX
   ============================================================ */
.banner{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(88px,11vw,160px) 0;
  background:var(--ink);
}
.banner__bg{
  position:absolute;inset:-14% 0;z-index:-2;
  will-change:transform;
}
.banner__bg picture,.banner__bg img{position:absolute;inset:0;width:100%;height:100%}
.banner__bg img{object-fit:cover;object-position:center 42%}
/* o scrim segura o texto legível sobre o céu claro do entardecer */
.banner__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(6,16,8,.92) 0%,rgba(6,16,8,.74) 46%,rgba(6,16,8,.34) 78%,rgba(6,16,8,.5) 100%),
    radial-gradient(80% 120% at 12% 50%,rgba(94,198,27,.20),transparent 60%);
}
@media (max-width:860px){
  .banner__scrim{background:linear-gradient(180deg,rgba(6,16,8,.82),rgba(6,16,8,.62) 40%,rgba(6,16,8,.9))}
  .banner__bg img{object-position:center 46%}
}
.banner__inner{position:relative;max-width:720px}
.banner__title{
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;
  font-size:clamp(28px,4vw,54px);line-height:1.06;letter-spacing:-.03em;
  color:#fff;margin:16px 0 30px;
}
.banner__title em{font-style:normal;color:var(--green)}

/* ============================================================
   EQUIPE
   ============================================================ */
/* 240px força 4 colunas no desktop: 8 pessoas fecham 4+4 sem linha órfã */
.team{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media (max-width:560px){.team{grid-template-columns:1fr 1fr}}
.member{text-align:left}
.member__photo{
  position:relative;aspect-ratio:6/7;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(155deg,var(--green-900),#12421A 60%,#0A2E10);
  display:grid;place-items:center;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.member__photo::after{
  content:"";position:absolute;inset:auto 0 0;height:52%;
  background:linear-gradient(transparent,rgba(6,26,8,.55));
}
.member__photo img{width:100%;height:100%;object-fit:cover}
.member__mono{
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;
  font-size:clamp(34px,4vw,46px);letter-spacing:-.04em;
  color:var(--lime);opacity:.92;
  transition:transform .55s var(--ease);
}
.member:hover .member__photo{transform:translateY(-6px);box-shadow:var(--sh-2)}
.member:hover .member__mono{transform:scale(1.08)}
.member h3{font-family:"Space Grotesk",Barlow,sans-serif;font-size:16.5px;font-weight:600;letter-spacing:-.02em;margin:16px 0 3px}
.member p{font-size:13.5px;color:var(--muted)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;gap:clamp(34px,4vw,64px);align-items:start}
@media (min-width:940px){.faq{grid-template-columns:.82fr 1.18fr}}
.faq__aside .h2{margin:14px 0 16px}
.faq__aside p{color:var(--muted);margin-bottom:24px}
@media (min-width:940px){.faq__aside{position:sticky;top:calc(var(--header-h) + 24px)}}

.faq__list{display:grid;gap:10px}
.qa{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;transition:border-color .35s,box-shadow .35s var(--ease);
}
.qa.is-open{border-color:transparent;box-shadow:var(--sh-1)}
.qa__q{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;padding:20px 22px;background:transparent;border:0;cursor:pointer;
  text-align:left;font-family:"Space Grotesk",Barlow,sans-serif;
  font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.4;
  transition:color .25s;
}
.qa__q:hover{color:var(--green-d)}
.qa__q i{
  position:relative;flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--paper-2);transition:background .35s,transform .45s var(--ease);
}
.qa__q i::before,.qa__q i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .3s;
}
.qa__q i::before{width:11px;height:2px}
.qa__q i::after{width:2px;height:11px}
.qa.is-open .qa__q i{background:var(--green);transform:rotate(180deg)}
.qa.is-open .qa__q i::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.qa.is-open .qa__a{grid-template-rows:1fr}
.qa__a > div{overflow:hidden}
.qa__a p{padding:0 22px 22px;font-size:15px;color:var(--muted);line-height:1.68;max-width:64ch}
.qa__a a{color:var(--green-d);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   CONTATO
   ============================================================ */
.contact{
  position:relative;overflow:hidden;
  padding:clamp(72px,8vw,120px) 0;
  background:
    radial-gradient(80% 120% at 10% 10%,rgba(94,198,27,.18),transparent 55%),
    linear-gradient(165deg,#0A120C,#131C16);
  color:#fff;
}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 148px,rgba(255,255,255,.03) 148px 150px);
}
.contact__inner{position:relative;display:grid;gap:clamp(40px,5vw,70px);align-items:start}
@media (min-width:940px){.contact__inner{grid-template-columns:1fr .86fr}}
.contact__info .h2{margin:14px 0 18px}
.contact__list{display:grid;gap:22px;margin-top:36px}
.contact__list li{display:flex;gap:15px;align-items:center}
.contact__ico{
  display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.06);color:var(--green);
  border:1px solid rgba(255,255,255,.09);
}
.contact__list strong{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:5px}
.contact__list span{display:block;font-size:15px;color:rgba(255,255,255,.82);line-height:1.55}
.contact__list a{border-bottom:1px solid rgba(255,255,255,.24);transition:border-color .25s,color .25s}
.contact__list a:hover{color:var(--green);border-color:var(--green)}

.contact__formwrap{
  background:var(--paper);color:var(--ink);
  border-radius:var(--r-lg);padding:clamp(26px,3vw,38px);
  box-shadow:var(--sh-3);
}
.form__title{font-family:"Space Grotesk",Barlow,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.025em}
.form__hint{font-size:14px;color:var(--muted);margin:7px 0 24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field__opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:12px;
  font-size:15px;transition:border-color .25s,background .25s,box-shadow .25s;
  appearance:none;
}
.field textarea{resize:vertical;min-height:88px;font-family:inherit}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235E6C62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
  padding-right:40px;cursor:pointer;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--paper);border-color:var(--green);
  box-shadow:0 0 0 4px rgba(94,198,27,.16);
}
.field.has-error input,.field.has-error select{border-color:#D94A3D;background:#FEF5F4}
.field__err{display:block;min-height:0;font-size:12.5px;color:#C4392C;margin-top:5px}
.form .btn{margin-top:8px}
.form__status{margin-top:14px;font-size:13.5px;color:var(--green-d);text-align:center;min-height:1em}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:rgba(255,255,255,.66);padding-top:clamp(56px,6vw,84px)}
.footer__grid{
  display:grid;gap:clamp(32px,4vw,48px);
  grid-template-columns:1fr;
  padding-bottom:clamp(40px,5vw,64px);
}
@media (min-width:700px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.footer__grid{grid-template-columns:1.5fr .8fr .9fr 1.1fr}}
.footer__brand img{height:52px;width:auto;margin-bottom:20px}
.footer__brand p{font-size:14.5px;line-height:1.65;max-width:38ch}
.footer__social{display:flex;gap:10px;margin-top:22px}
.footer__social a{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#fff;
  transition:background .3s,transform .35s var(--ease),color .3s;
}
.footer__social a:hover{background:var(--green);color:var(--ink);transform:translateY(-3px)}
.footer__social svg{width:19px;height:19px}

.footer__col h3{
  font-family:"Space Grotesk",Barlow,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:18px;
}
.footer__col ul{display:grid;gap:11px}
.footer__col a{font-size:14.5px;transition:color .25s,padding-left .3s var(--ease)}
.footer__col a:hover{color:var(--green);padding-left:5px}
.footer__contact li{font-size:14.5px;line-height:1.6}

.footer__base{
  display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;
  padding-block:24px;border-top:1px solid rgba(255,255,255,.09);
  font-size:13px;color:rgba(255,255,255,.42);
}

/* crédito da agência */
.credit{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;border-radius:100px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  transition:background .3s,border-color .3s,transform .35s var(--ease);
}
.credit:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.credit__by{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.credit__logo{height:22px;width:auto;display:block}
.credit__fallback{
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.02em;color:#fff;
}
.credit__fallback b{color:#ED1B2F;font-weight:700}
.credit__fallback i{font-style:normal;color:#ED1B2F;font-weight:500}
.credit__fallback[hidden]{display:none}

/* ============================================================
   FAB WHATSAPP
   ============================================================ */
.fab{
  position:fixed;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);z-index:90;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:100px;
  background:#25D366;color:#0B2E10;
  font-weight:600;font-size:14.5px;font-family:"Space Grotesk",Barlow,sans-serif;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transform:translateY(140%);opacity:0;
  transition:transform .55s var(--ease),opacity .45s,box-shadow .35s;
}
.fab.is-visible{transform:none;opacity:1}
.fab:hover{box-shadow:0 16px 40px rgba(37,211,102,.5)}
.fab svg{width:22px;height:22px}
@media (max-width:640px){
  .fab{padding:15px;gap:0}
  .fab span{display:none}
}

/* ============================================================
   REVEAL
   ============================================================ */
/* o estado inicial invisível só existe quando o JS está vivo (classe .js no <html>).
   sem JS, o conteúdo aparece normalmente. */
.js .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0ms);
}
.js .reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(360px,86vw);
    background:var(--paper);
    box-shadow:-20px 0 60px rgba(13,19,16,.16);
    padding:calc(var(--header-h) + 20px) 30px 40px;
    transform:translateX(102%);
    /* visibility tira o menu fechado da ordem de tabulação: sem isso o
       teclado entra nos links que estão fora da tela. */
    visibility:hidden;
    transition:transform .5s var(--ease),visibility 0s linear .5s;
    overflow-y:auto;margin-left:0;
  }
  .nav.is-open{transform:none;visibility:visible;transition-delay:0s,0s}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .nav__list a{
    padding:15px 4px;font-size:17px;font-weight:600;
    font-family:"Space Grotesk",Barlow,sans-serif;letter-spacing:-.02em;
    border-bottom:1px solid var(--line);
  }
  .nav__list a::after{display:none}
  .burger{display:block}
  /* com o menu recolhido o cabeçalho fica só com a marca e o hambúrguer.
     O .nav vira position:fixed e sai do fluxo, então nada empurrava as
     ações para a direita — daí o aperto tudo à esquerda. */
  .header__actions{margin-left:auto}
  .header__actions .btn--wa{display:none}
  /* a gaveta é position:fixed e pintava por cima do hambúrguer: sem isto
     o botão de fechar (o X) fica escondido atrás do menu aberto. */
  .header__actions{position:relative;z-index:2}
  /* com a gaveta branca aberta no topo da página, as barras brancas
     do hambúrguer sumiriam no fundo claro. */
  .header:not(.is-stuck) .burger[aria-expanded="true"] span{background:var(--ink)}
  .header:not(.is-stuck) .burger[aria-expanded="true"]{border-color:var(--line)}
  .nav-scrim{
    position:fixed;inset:0;z-index:99;background:rgba(13,19,16,.42);
    opacity:0;pointer-events:none;transition:opacity .4s;
    backdrop-filter:blur(2px);
  }
  .nav-scrim.is-on{opacity:1;pointer-events:auto}
}

@media (max-width:999px){
  /* sem scrub em telas menores: hero vira um bloco normal, poster de fundo */
  .hero__track{height:auto;min-height:0}
  .hero__stage{position:static;height:auto;min-height:0;padding-bottom:8px}
  .hero__grid{padding-top:clamp(28px,6vw,48px);padding-bottom:12px}
  /* min-width:0 desarma o min-width:auto do item de grid: sem isso a
     coluna não encolhe abaixo do conteúdo mais largo e vaza da tela */
  .hero__copy{max-width:none;min-width:0}
  .signs{padding-bottom:clamp(34px,6vw,52px)}

  /* em retrato o 16:9 só mostraria um pedaço do carro: o poster vira
     atmosfera desfocada e o veículo recortado assume o primeiro plano */
  .herobg__poster,.herobg__video{
    object-position:center;transform:scale(1.08);
    filter:blur(4px) brightness(.42) saturate(.85);
  }
  .herobg__scrim{
    background:
      linear-gradient(to bottom,rgba(5,11,7,.72) 0%,rgba(5,11,7,.42) 34%,rgba(5,11,7,.55) 70%,rgba(5,11,7,.86) 100%);
  }
  .hero__carmob{
    display:block;width:min(100%,560px);height:auto;margin:6px auto 0;
    filter:drop-shadow(0 26px 34px rgba(0,0,0,.5));
  }
}

@media (max-width:560px){
  :root{--header-h:74px}
  .hero__cta .btn{flex:1 1 100%}
  .rating{flex-wrap:wrap}
  .signs{grid-template-columns:1fr}
  .about__badge{right:auto;left:0;bottom:-22px;padding:13px 18px}
  .about__badge strong{font-size:28px}
  .footer__base{flex-direction:column}
}

/* ============================================================
   MISSÃO, VISÃO E VALORES
   Cada bloco leva o formato de placa que corresponde ao seu papel:
   círculo (regulamentação) para a missão, losango (advertência)
   para a visão, escudo para os valores.
   ============================================================ */
.mvv__grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.mvv__card{padding:32px 28px 30px;display:flex;flex-direction:column}
.mvv__sign{
  display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;
  transition:transform .55s var(--ease);
}
.mvv__sign svg{width:100%;height:100%;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mvv__sign svg > :first-child{stroke:currentColor;fill:color-mix(in srgb,currentColor 10%,transparent)}
.mvv__sign .glyph{stroke:currentColor;stroke-width:3}
.mvv__card--mission .mvv__sign{color:var(--green-d)}
.mvv__card--vision  .mvv__sign{color:#B58A00}
.mvv__card--values  .mvv__sign{color:var(--green-900)}
.mvv__card:hover .mvv__sign{transform:rotate(-5deg) scale(1.06)}
.mvv__k{
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green-d);margin-bottom:9px;
}
.mvv__card h3{font-size:20px;line-height:1.25;margin-bottom:12px}
.mvv__t{font-size:14.5px;color:var(--muted);line-height:1.65}
.mvv__list{margin-top:2px;display:grid;gap:9px}
.mvv__list li{font-size:14.5px;color:var(--muted);line-height:1.55}
.mvv__list strong{color:var(--ink);font-weight:600}

/* ============================================================
   MAPA — fachada leve, iframe sob demanda
   ============================================================ */
.mapa{
  margin-top:clamp(38px,4.5vw,64px);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:var(--green-950);
}
.mapa__face{position:relative;min-height:clamp(300px,34vw,400px);display:flex;align-items:flex-end}
.mapa__art{position:absolute;inset:0;width:100%;height:100%;fill:none}
.mapa__st{stroke:rgba(255,255,255,.07);stroke-width:1.5}
.mapa__road{stroke:rgba(255,255,255,.14);stroke-width:22;stroke-linecap:round}
.mapa__dash{
  stroke:var(--lime);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:12 16;
  animation:mapaFlow 2.6s linear infinite;
}
@keyframes mapaFlow{to{stroke-dashoffset:-56}}
.mapa__pin{
  position:absolute;left:50%;top:50%;width:44px;height:44px;
  margin:-52px 0 0 -22px;color:var(--green);
  animation:mapaPin 2.4s var(--ease) infinite;
}
.mapa__pin svg{width:100%;height:100%;fill:var(--green-950);stroke:currentColor;stroke-width:1.6}
@keyframes mapaPin{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mapa__card{
  position:relative;margin:clamp(18px,2.4vw,28px);padding:clamp(20px,2.4vw,26px);
  background:rgba(6,26,8,.86);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
  max-width:400px;color:#fff;
}
.mapa__k{
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:8px;
}
.mapa__addr{font-size:16px;line-height:1.5;color:rgba(255,255,255,.92)}
.mapa__acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.mapa__note{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.6)}
.mapa iframe{display:block;width:100%;height:clamp(300px,34vw,400px);border:0}

/* ============================================================
   SIMULADO — as placas são SVG, não imagem
   ============================================================ */
.simul__box{
  margin-top:clamp(10px,2vw,20px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);box-shadow:var(--sh-1);overflow:hidden;
}
.simul__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(18px,2.4vw,28px);border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.simul__dots{display:flex;gap:7px}
.simul__dots i{
  width:26px;height:5px;border-radius:3px;background:var(--line);
  transition:background .45s var(--ease);
}
.simul__dots i.is-now{background:var(--green-d)}
.simul__dots i.is-hit{background:var(--green)}
.simul__dots i.is-miss{background:#E4572E}
.simul__count{
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;
}
.simul__stage{padding:clamp(22px,3vw,36px) clamp(18px,2.4vw,28px)}
.simul__live{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.q{display:grid;gap:clamp(20px,3vw,34px);grid-template-columns:1fr;align-items:start}
@media (min-width:760px){.q{grid-template-columns:190px 1fr}}
.q--enter{animation:qIn .5s var(--ease) both}
@keyframes qIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.q__sign{display:grid;place-items:center}
.q__sign svg{width:min(170px,52vw);height:auto;overflow:visible}
.q__sign .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:signDraw .9s var(--ease) .1s forwards}
@keyframes signDraw{to{stroke-dashoffset:0}}

.q__ask{
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:clamp(19px,1.5vw,23px);
  font-weight:600;letter-spacing:-.02em;line-height:1.3;margin-bottom:18px;
}
.q__opts{display:grid;gap:10px}
.q__opt{
  width:100%;display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;
  padding:15px 17px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);font-size:15.5px;line-height:1.4;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.q__opt:hover:not(:disabled){border-color:var(--green-d);transform:translateX(4px)}
.q__opt:disabled{cursor:default}
.q__opt .key{
  flex:none;display:grid;place-items:center;width:27px;height:27px;border-radius:8px;
  background:var(--paper-2);color:var(--muted);
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;font-size:13px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.q__opt.is-right{border-color:var(--green-d);background:rgba(94,198,27,.10)}
.q__opt.is-right .key{background:var(--green-d);color:#fff}
.q__opt.is-wrong{border-color:#E4572E;background:rgba(228,87,46,.08)}
.q__opt.is-wrong .key{background:#E4572E;color:#fff}
.q__fb{
  margin-top:16px;font-size:14.5px;line-height:1.6;color:var(--muted);
  border-left:3px solid var(--green);padding-left:14px;
  animation:qIn .4s var(--ease) both;
}
.q__fb b{color:var(--ink);font-weight:600}
.q__next{margin-top:20px}

.res{text-align:center;max-width:520px;margin-inline:auto;padding:clamp(6px,2vw,18px) 0}
.res__badge{
  width:124px;height:124px;margin:0 auto 22px;
  display:flex;align-items:baseline;justify-content:center;gap:1px;
  border-radius:50%;border:4px solid var(--green-d);color:var(--green-900);
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;font-size:46px;
  letter-spacing:-.03em;line-height:124px;
  animation:resPop .6s var(--ease) both;
}
.res__badge span{font-size:20px;color:var(--muted);font-weight:600}
@keyframes resPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.res h3{font-family:"Space Grotesk",Barlow,sans-serif;font-size:clamp(21px,2vw,27px);font-weight:700;letter-spacing:-.025em}
.res p{margin-top:12px;color:var(--muted);font-size:15.5px;line-height:1.65}
.res__acts{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FROTA
   ============================================================ */
/* colunas explícitas: com auto-fit o quarto card sobrava sozinho na
   segunda linha nas larguras intermediárias */
.frota__grid{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:1fr}
@media (min-width:600px){.frota__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.frota__grid{grid-template-columns:repeat(4,1fr)}}
.frota__card{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--paper);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.frota__card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:transparent}
.frota__img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--green-950)}
.frota__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.frota__card:hover .frota__img img{transform:scale(1.05)}
.frota__meta{padding:22px 24px 26px}
.frota__cat{
  display:inline-block;margin-bottom:10px;padding:5px 11px;border-radius:999px;
  background:var(--green-900);color:var(--lime);
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.frota__meta h3{font-family:"Space Grotesk",Barlow,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.02em}
.frota__meta p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.6}

/* ============================================================
   MURAL DOS APROVADOS
   ============================================================ */
/* foto de abertura, largura inteira */
.mural__hero{margin-bottom:clamp(10px,1.2vw,16px)}
.mural__hero .mural__btn{aspect-ratio:21/9}
@media (max-width:700px){.mural__hero .mural__btn{aspect-ratio:16/10}}
.mural__hero .mural__cap{padding:20px 22px;font-size:15px}
.mural__hero .mural__cap b{font-size:11.5px}

/* colunas em cascata: cada foto guarda a proporção original,
   sem corte e sem buraco no encaixe */
.mural{
  column-count:3;
  column-gap:clamp(8px,1vw,14px);
}
@media (max-width:900px){.mural{column-count:2}}
@media (max-width:520px){.mural{column-count:1}}
.mural__item{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:clamp(8px,1vw,14px);
}

.mural__btn{
  position:relative;display:block;width:100%;padding:0;cursor:pointer;
  border:0;border-radius:var(--r-sm);overflow:hidden;background:var(--green-950);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.mural__btn picture{display:block}
.mural__btn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease),filter .6s var(--ease)}
.mural__hero .mural__btn img{position:absolute;inset:0}
.mural__btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,16,8,.86) 0%,rgba(6,16,8,.25) 42%,transparent 68%);
  opacity:.55;transition:opacity .5s var(--ease);
}
.mural__btn:hover{transform:translateY(-4px);box-shadow:var(--sh-2);z-index:2}
.mural__btn:hover img{transform:scale(1.07)}
.mural__btn:hover::after{opacity:1}
.mural__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 15px;text-align:left;color:#fff;
  font-size:13px;line-height:1.35;
  transform:translateY(8px);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.mural__cap b{
  display:block;font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-top:3px;
}
.mural__btn:hover .mural__cap,.mural__btn:focus-visible .mural__cap{transform:none;opacity:1}
/* sem hover (toque) a legenda fica sempre visível */
@media (hover:none){
  .mural__cap{transform:none;opacity:1}
  .mural__btn::after{opacity:1}
}

.aprov__cta{
  margin-top:clamp(28px,3.6vw,46px);
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;
}
.aprov__cta p{
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:clamp(18px,2vw,24px);
  font-weight:700;letter-spacing:-.025em;
}

/* ============================================================
   VISOR DAS FOTOS
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:200;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(6px,2vw,20px);
  padding:clamp(14px,3vw,40px);
  background:rgba(4,10,5,.94);backdrop-filter:blur(6px);
  animation:lbIn .32s var(--ease) both;
}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.lightbox__fig img{
  max-width:100%;max-height:76vh;width:auto;height:auto;
  border-radius:var(--r-md);box-shadow:0 40px 90px rgba(0,0,0,.6);
  animation:lbZoom .4s var(--ease) both;
}
@keyframes lbZoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lightbox__fig figcaption{
  color:rgba(255,255,255,.82);font-size:14.5px;text-align:center;max-width:56ch;
}
.lightbox__close,.lightbox__nav{
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;border-radius:50%;
  display:grid;place-items:center;
  transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s;
}
.lightbox__nav{width:clamp(40px,5vw,54px);height:clamp(40px,5vw,54px);font-size:26px;line-height:1;flex:none}
.lightbox__close{position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);width:44px;height:44px;font-size:26px;line-height:1}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--green);color:var(--ink);border-color:var(--green);transform:scale(1.06)}
@media (max-width:560px){
  .lightbox{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lightbox__nav{position:static}
  .lightbox__fig{grid-row:1}
  .lightbox__nav--prev{grid-column:1;justify-self:start;grid-row:2}
  .lightbox__nav--next{grid-column:1;justify-self:end;grid-row:2;margin-top:-54px}
}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.depo__score{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.depo__num{
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:44px;font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--green-900);
}
.depo__stars{display:flex;gap:2px}
.depo__stars svg{width:19px;height:19px;fill:var(--amber)}
.depo__stars svg:last-child{fill:none;stroke:var(--amber);stroke-width:1.6}
.depo__from{font-size:13.5px;color:var(--muted);flex-basis:100%}

.depo__grid{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.depo__card{
  position:relative;padding:30px 26px 24px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.depo__card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.depo__quote{
  position:absolute;top:6px;right:20px;
  font-family:Georgia,"Times New Roman",serif;font-size:74px;line-height:1;
  color:var(--green);opacity:.16;
}
.depo__text{font-size:15px;line-height:1.68;color:var(--ink-2);flex:1}
.depo__text--big{
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:21px;font-weight:600;
  letter-spacing:-.02em;line-height:1.3;color:var(--ink);
}
.depo__who{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.depo__av{
  flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-900);color:var(--lime);
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;
}
.depo__who strong{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.depo__who span{font-size:12.5px;color:var(--muted)}

.depo__more{
  margin-top:clamp(26px,3.4vw,42px);padding:clamp(22px,3vw,32px);
  border:1px dashed var(--line);border-radius:var(--r-md);background:var(--paper-2);
  text-align:center;
}
.depo__more-k{font-size:14px;color:var(--muted)}
.depo__names{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 22px;
}
.depo__names li{
  padding:7px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);
}
.depo__names li::before{content:"★ ";color:var(--amber)}

/* ============================================================
   FICHA RÁPIDA
   ============================================================ */
.ficha__grid{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:640px){.ficha__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.ficha__grid{grid-template-columns:repeat(3,1fr)}}
.ficha__item{
  background:var(--paper);padding:22px 24px;
  transition:background .35s var(--ease);
}
.ficha__item:hover{background:var(--paper-2)}
.ficha__item dt{
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-d);margin-bottom:8px;
}
.ficha__item dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.ficha__item dd strong{font-weight:600;color:var(--ink)}
.ficha__nota{
  margin-top:20px;font-size:13.5px;color:var(--muted);max-width:70ch;
}

/* ============================================================
   DIFERENCIAIS — painel navegável
   Oito cards iguais não criavam hierarquia nenhuma. Aqui um item
   é grande e oito são pequenos, e cada um carrega um fato.
   ============================================================ */
.diffs{--dif-dur:5.2s;display:grid;gap:clamp(20px,2.6vw,44px);grid-template-columns:1fr}
@media (min-width:960px){.diffs{grid-template-columns:minmax(280px,370px) 1fr;align-items:start}}

/* ---- a trilha (os oito) ---- */
.diffs__trilha{display:grid;gap:2px;border-left:2px solid var(--line)}
.dif{
  position:relative;display:flex;align-items:baseline;gap:14px;
  width:100%;text-align:left;cursor:pointer;
  padding:15px 16px;border:0;background:none;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  transition:background .4s var(--ease),transform .4s var(--ease),color .3s;
}
.dif::before{
  content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;
  background:var(--green-d);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .45s var(--ease);
}
.dif:hover{background:var(--paper-2);transform:translateX(4px)}
.dif.is-on{background:var(--paper-2);transform:translateX(4px)}
.dif.is-on::before{transform:scaleY(1)}
.dif__n{
  flex:none;font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
.dif.is-on .dif__n{color:var(--green-d)}
.dif__t{
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:600;font-size:16px;
  letter-spacing:-.02em;color:var(--ink-2);line-height:1.25;
}
.dif.is-on .dif__t{color:var(--ink)}
/* barra de avanço do modo automático */
.dif__prog{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:0 50%;
}
.dif.is-on .dif__prog{animation:difProg var(--dif-dur) linear forwards}
.diffs.is-pausado .dif.is-on .dif__prog{animation-play-state:paused}
.diffs.is-manual .dif__prog{display:none}
@keyframes difProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- o palco (o um) ---- */
.diffs__palco{position:relative}
.palco{
  position:relative;overflow:hidden;
  padding:clamp(28px,3.4vw,46px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.js .palco[hidden]{display:none}
.palco.is-on{animation:palcoEntra .55s var(--ease) both}
@keyframes palcoEntra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* numeral gigante vazado: o mesmo idioma do mural e do processo */
.palco__n{
  position:absolute;top:-.14em;right:.06em;
  font-family:"Space Grotesk",Barlow,sans-serif;font-weight:700;
  font-size:clamp(120px,15vw,210px);line-height:1;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:2px rgba(94,198,27,.20);
  pointer-events:none;user-select:none;
}
.palco__ico{
  position:relative;display:grid;place-items:center;width:56px;height:56px;
  border-radius:16px;background:var(--green-900);color:var(--lime);margin-bottom:22px;
}
.palco__ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.palco h3{
  position:relative;font-family:"Space Grotesk",Barlow,sans-serif;
  font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.12;
}
.palco > p{position:relative;margin-top:14px;font-size:clamp(15px,1.1vw,17px);color:var(--muted);line-height:1.68;max-width:52ch}
.palco__prova{
  position:relative;margin-top:26px;padding:18px 20px;
  background:var(--paper-2);border-left:3px solid var(--green);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:15px;line-height:1.62;color:var(--ink-2);max-width:56ch;
}
.palco__prova b{
  display:block;font-family:"Space Grotesk",Barlow,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green-d);margin-bottom:7px;
}

/* ---- celular: a trilha vira trilho horizontal, não lista espremida ---- */
@media (max-width:959px){
  .diffs__trilha{
    display:flex;gap:8px;border-left:0;overflow-x:auto;
    padding-bottom:6px;scroll-snap-type:x mandatory;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .diffs__trilha::-webkit-scrollbar{display:none}
  .dif{
    /* width:auto é obrigatório: o width:100% da regra base vence o
       flex-basis e faria cada chip ocupar o trilho inteiro. */
    flex:0 0 auto;width:auto;scroll-snap-align:start;
    padding:11px 15px;border-radius:100px;border:1px solid var(--line);
  }
  .dif::before{display:none}
  .dif:hover,.dif.is-on{transform:none}
  .dif.is-on{background:var(--green-900);border-color:var(--green-900)}
  .dif.is-on .dif__n,.dif.is-on .dif__t{color:#fff}
  .dif__t{font-size:14.5px;white-space:nowrap}
  .dif__prog{border-radius:0 0 100px 100px}
}

/* ============================================================
   CATEGORIAS — filtro de roteamento
   A pessoa chega perguntando "qual é a minha?". O filtro responde
   sem esconder nada de quem prefere ver tudo.
   ============================================================ */
.filtros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.filtro{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:10px 16px;border-radius:100px;
  border:1.5px solid var(--line);background:var(--paper);
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s,transform .3s var(--ease);
}
.filtro span{
  font-family:"Space Grotesk",Barlow,sans-serif;font-size:11.5px;font-weight:700;
  color:var(--muted);font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
.filtro:hover{border-color:var(--green-d);transform:translateY(-2px)}
.filtro.is-on{background:var(--green-900);border-color:var(--green-900);color:#fff;font-weight:600}
.filtro.is-on span{color:var(--lime)}
.filtros__status{
  margin-bottom:clamp(20px,2.4vw,30px);font-size:13.5px;color:var(--muted);min-height:1.3em;
}

.plate[hidden]{display:none}
.plate.entra{animation:plateEntra .45s var(--ease) both}
@keyframes plateEntra{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* linha de fato: qual veículo, o que inclui, quando fazer */
.plate__meta{
  flex:none !important;margin-top:16px;padding:12px 14px;
  background:var(--paper-2);border-left:3px solid var(--green);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:13.5px !important;line-height:1.5;color:var(--ink-2) !important;
}
.plate__meta b{
  display:block;font-family:"Space Grotesk",Barlow,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-d);margin-bottom:4px;
}

/* a primeira habilitação é a porta de entrada da maioria: ela lidera */
.plate--destaque{background:var(--green-900);border-color:transparent}
.plate--destaque h3{color:#fff}
.plate--destaque > p{color:rgba(255,255,255,.74)}
.plate--destaque::after{border-color:rgba(255,255,255,.16)}
.plate--destaque .plate__code{background:var(--lime);color:var(--green-900);box-shadow:inset 0 0 0 3px rgba(11,46,16,.22)}
.plate--destaque:hover .plate__code{background:#fff;color:var(--green-900)}
.plate--destaque .plate__meta{
  background:rgba(255,255,255,.07);border-left-color:var(--lime);color:rgba(255,255,255,.88) !important;
}
.plate--destaque .plate__meta b{color:var(--lime)}
.plate--destaque .plate__cta{color:var(--lime)}
.plate--destaque .plate__cta:hover{color:#fff}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .palco.is-on,.dif.is-on .dif__prog,.plate.entra{animation:none}
  .mapa__dash,.mapa__pin{animation:none !important}
  .lightbox,.lightbox__fig img{animation:none}
  .mural__cap{transform:none;opacity:1}
  .q__sign .draw{stroke-dashoffset:0;animation:none}
  .q--enter,.q__fb,.res__badge{animation:none}
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .js .about__fx,.js .about__badge{opacity:1;transform:none}
  .h2--split .ln > span{transform:none}
  .h2--split em::after{transform:scaleX(1)}
  .beam,.beam__wash{animation:none !important;opacity:0}
  .hero__track{height:auto;min-height:0}
  .hero__stage{position:static;height:auto;min-height:0}
  .route__dash{clip-path:none}
  .banner__bg,.banner__car{transform:none !important}
  .scrollhint{display:none}
}