@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/archivo-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fontes/archivo-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/fontes/archivo-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fontes/ibm-plex-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fontes/ibm-plex-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--breu:#0A0A0B;--fundo:#060607;--carvao:#131315;--giz:#F2F2F0;--fumaca:#9A9A98;--risco:#1F1F21;--ferro:#3A3A3D;--marca:#ED1C24}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--breu);color:var(--giz);font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--giz);text-decoration:none}a:hover{color:var(--marca)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.env{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{letter-spacing:-.03em;line-height:1.05;margin:0}
h1{font-size:clamp(36px,4.4vw,64px);font-weight:800}
h2{font-size:clamp(28px,3.6vw,40px);font-weight:800}
h3{font-size:22px;font-weight:800;letter-spacing:-.02em}
p{margin:0 0 14px;text-wrap:pretty}
.fumaca{color:var(--fumaca)}
.topo{border-bottom:1px solid var(--risco);position:sticky;top:0;background:var(--breu);z-index:9}
.topo .env{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.topo img{height:26px;width:auto}
.nav{display:flex;gap:22px;align-items:center}
.nav a{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fumaca)}
.nav a:hover{color:var(--marca)}
.fone{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;border:1px solid var(--ferro);padding:9px 14px;border-radius:2px;white-space:nowrap}
@media(max-width:900px){.nav{display:none}}
.btn{display:inline-block;border:1px solid var(--giz);padding:15px 26px;border-radius:2px;font-weight:600;font-size:16px;transition:background .12s,color .12s}
.btn:hover{background:var(--giz);color:var(--breu)}
.btn-bloco{display:block;text-align:center}
.tab{width:100%;border-collapse:collapse;margin:22px 0;font-size:16px}
.tab th,.tab td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--risco);vertical-align:top}
.tab thead th{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fumaca)}
.tab tbody th{font-weight:600;color:var(--giz)}
.rolagem{overflow-x:auto}
.hero{padding:64px 0 0}
.hero .env{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
@media(max-width:980px){.hero .env{grid-template-columns:1fr;gap:32px}}
/* espaco da foto: fica marcado ate a foto do Vitor chegar */
.vaga{border:1px dashed var(--ferro);border-radius:2px;background:var(--fundo);
  aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:28px}
.vaga b{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--marca);font-weight:500}
.vaga span{font-size:15px;color:var(--fumaca);max-width:34ch;line-height:1.5}
.selo{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.selo i{width:26px;height:1px;background:var(--marca);display:block}
.selo span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--marca);font-style:normal}
.ticker{border-top:1px solid var(--risco);border-bottom:1px solid var(--risco);padding:15px 0;overflow:hidden;margin-top:60px}
.fita{display:flex;gap:44px;width:max-content;animation:desliza 26s linear infinite}
.fita span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fumaca);white-space:nowrap}
.fita b{color:var(--marca)}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Quem pediu menos movimento no sistema (Windows: "efeitos de animacao" desligado) recebe a
   fita PARADA — e parada ela ficava cortada na borda, com cara de quebrada. Entao para esse
   visitante ela vira uma faixa que se ARRASTA, e a copia duplicada (que so existe para o
   loop da animacao) some, senao ele leria a lista duas vezes. */
/* 🔴 A fita anda SEMPRE, inclusive para quem pediu menos movimento no sistema — decidido pelo
   Nelson em 28/08/2026, depois de ver as duas alternativas (parada quebrando em linhas ficou
   "pior"). Ele tem "efeitos de animacao" desligado no Windows, entao com o
   @media(prefers-reduced-motion) ele nunca a veria em movimento.
   O que se mantem da recomendacao de acessibilidade (WCAG 2.2.2, movimento automatico acima de
   5s precisa poder parar): ela PAUSA ao passar o mouse ou ao receber foco de teclado. */
.ticker:hover .fita,.ticker:focus-within .fita{animation-play-state:paused}

/* "Por que a gente": lista numerada + uma foto que acompanha a rolagem. Era uma grade de 4
   caixas iguais, sem hierarquia nenhuma. */
.porques{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:52px;align-items:start}
.porques ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--risco)}
.porques li{border-bottom:1px solid var(--risco);padding:26px 2px;display:grid;
  grid-template-columns:50px minmax(0,1fr);gap:16px;transition:background-color .12s}
.porques li:hover{background:var(--breu)}
.porques li .n{font-family:'IBM Plex Mono',monospace;font-size:15px;letter-spacing:.06em;
  color:var(--marca);padding-top:3px;font-weight:500}
.porques h3{margin:0 0 8px}
.porques p{font-size:15px;color:var(--fumaca);margin:0}
.porques figure{margin:0;position:sticky;top:88px}
/* A foto foi RECORTADA no arquivo (600x600, do original 900x600) para mostrar o rosto do Vitor
   em vez de o CSS cortar por cima: aspect-ratio 1/1 = a proporcao do arquivo, entao aqui nao se
   corta nada. Sem legenda — a que estava ali ("um carro de cada vez") repetia o item 01. */
.porques img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;border:1px solid var(--risco)}
/* No celular a foto vinha primeiro em 4/5 ocupando quase a tela inteira e empurrando os 4
   porques para fora da dobra. Vira faixa 3/2 e vai DEPOIS da lista: quem chega le o motivo,
   e a foto fecha a secao. */
@media(max-width:900px){
  .porques{grid-template-columns:1fr;gap:26px}
  .porques figure{position:static;order:1}   /* a lista primeiro, a foto fecha a secao */
}

/* card de guia: numero e chamada para ler, para nao parecer um bloco de texto morto */
.card .seta{display:inline-block;margin-top:16px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.08em;color:var(--marca);transition:transform .12s}
.card:hover .seta{transform:translateX(4px)}
/* faixa de 3 fotos: pessoa, lugar e processo */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tres.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 🔴 O seletor .tres.duas (duas classes) tem especificidade MAIOR que o .tres do media query e
   ANULAVA a quebra para 1 coluna: no celular as 2 fotos ficavam lado a lado, minusculas.
   Mesmo defeito do style= inline vencendo o @media — aqui por especificidade de classe.
   Por isso o seletor do media query precisa repetir as duas classes.
   (E nada de backtick em comentario daqui: este CSS mora dentro de um template literal.) */
@media(max-width:860px){.tres,.tres.duas{grid-template-columns:1fr}}
.tres figure{margin:0}
.tres img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;border:1px solid var(--risco)}
.tres figcaption{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fumaca);margin-top:9px}
/* antes/depois arrastavel — o bloco que mais vende no ramo */
.ad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media(max-width:760px){.ad{grid-template-columns:1fr}}
.cmp{position:relative;overflow:hidden;border:1px solid var(--risco);border-radius:2px;
  aspect-ratio:4/3;touch-action:pan-y;cursor:ew-resize;user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}
.cmp .antes{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.cmp .puxador{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--marca);
  transform:translateX(-1px);pointer-events:none}
.cmp .puxador::after{content:'';position:absolute;top:50%;left:50%;width:40px;height:40px;
  transform:translate(-50%,-50%);border:2px solid var(--marca);border-radius:2px;background:var(--breu)}
.cmp .rot{position:absolute;top:12px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--giz);background:var(--breu);
  border:1px solid var(--risco);border-radius:2px;padding:5px 9px;pointer-events:none}
.cmp .rot.e{left:12px}.cmp .rot.d{right:12px}
.ad figcaption{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fumaca);margin-top:10px}
.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--risco);border:1px solid var(--risco);border-radius:2px}
.grade-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.grade,.grade-2{grid-template-columns:1fr}}
.card{background:var(--breu);padding:30px 26px;border:1px solid transparent;transition:border-color .12s;display:block}
.card:hover{border-color:var(--marca)}
.card .n{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--marca)}
.card h3{margin:12px 0 10px}
.card p{font-size:15px;color:var(--fumaca);margin:0}
.sec{padding:76px 0}
.sec-escura{background:var(--fundo);border-top:1px solid var(--risco);border-bottom:1px solid var(--risco)}
.cab{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.cab .mono{font-size:11px;color:var(--fumaca)}
.prova{display:flex;gap:64px;align-items:flex-start;flex-wrap:wrap}
.nota{font-size:84px;font-weight:800;letter-spacing:-.04em;line-height:1}
.estrelas{display:flex;gap:4px;margin:12px 0 10px}
.depos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;flex:1;min-width:280px}
@media(max-width:760px){.depos{grid-template-columns:1fr}.prova{gap:36px}}
.depo p{font-size:16px;margin:0 0 10px}
.depo cite{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fumaca);font-style:normal}
.serv{display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:start;padding-top:56px}
@media(max-width:980px){.serv{grid-template-columns:1fr;gap:34px}}
.lateral{border:1px solid var(--risco);border-radius:2px;padding:26px;position:sticky;top:80px}
@media(max-width:980px){.lateral{position:static}}
.migalha{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fumaca);margin-bottom:20px}
.migalha b{color:var(--marca);font-weight:400}
.bloco{border-top:1px solid var(--risco);padding-top:30px;margin-top:36px}
.bloco h2{margin-bottom:16px;font-size:27px}
.bloco p{color:var(--fumaca);max-width:68ch}
.faq{display:flex;flex-direction:column;gap:1px;background:var(--risco);border:1px solid var(--risco);border-radius:2px}
.faq>div{background:var(--fundo);padding:24px 26px}
.faq h3{font-size:18px;font-weight:600;margin-bottom:8px}
.faq p{font-size:16px;color:var(--fumaca);margin:0;max-width:86ch}
.rod{border-top:1px solid var(--risco);padding:48px 0 36px}
.rod-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
@media(max-width:900px){.rod-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
.rot{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fumaca);margin-bottom:10px}
.rod p{font-size:15px;margin:0;line-height:1.6}
.previa{background:var(--marca);color:#fff;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em}
.previa a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.previa a:hover{color:#fff;opacity:.8}