/* fontes hospedadas no próprio site (antes vinham do Google Fonts): só o subconjunto latin, que cobre o português. Cada arquivo só é baixado se algum texto usar aquele peso */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-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:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-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}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-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:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700.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:'Barlow Condensed';font-style:italic;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-800i.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:'Barlow Condensed';font-style:italic;font-weight:900;font-display:swap;src:url(../fonts/barlow-condensed-900i.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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.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:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-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}
:root{
  --red:#E81820; --red-d:#b80f16; --yellow:#FFC400; --ink:#111; --ink2:#1c1c1c; --paper:#fff; --grey:#f1f0ec; --mut:#5b5b57;
  --r:6px;
  --f-t:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --f-b:'Barlow',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%} /* rolagem suave feita em js/main.js (roda do mouse + âncoras) */
html,body{overflow-x:clip}
/* barra de rolagem da marca: sem trilho (transparente), só o thumb vermelho; some quando parada (classe .is-scrolling via main.js) */
/* a barra nativa é escondida (ela ocupa espaço e cria um vão ao lado da página); a barra da marca é desenhada por js/main.js sobreposta ao conteúdo */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
.sb{position:fixed;top:0;right:0;bottom:0;width:12px;z-index:9999;background:transparent;opacity:0;pointer-events:none;transition:opacity .4s ease;touch-action:none}
html.is-scrolling .sb{opacity:1;pointer-events:auto}
.sb-t{position:absolute;left:2px;right:2px;top:0;min-height:40px;background:var(--red);border-radius:10px;cursor:grab;transition:background-color .2s ease}
.sb-t:hover,.sb.drag .sb-t{background:#fff}
.sb.drag .sb-t{cursor:grabbing}
@media (hover:none){.sb{display:none}}
body{margin:0;font-family:var(--f-b);font-size:17px;line-height:1.5;color:var(--ink);background:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,blockquote{margin:0}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 20px}
.ic{width:1.25em;height:1.25em;flex:none}

/* logo */
.wm-tag{background:#fff;padding:4px 12px;transform:skewX(-10deg);display:inline-flex;text-decoration:none;border-radius:3px}
.wm-logo{display:block;height:38px;width:auto;transform:skewX(10deg)}

/* header: fixa, translúcida, some ao rolar para baixo e volta ao rolar para cima (js/main.js).
   data-theme (dark/light) acompanha a cor do fundo que está atrás dela */
.top{--nav-bg:rgba(17,17,17,.9);--nav-fg:#fff;--nav-line:rgba(255,255,255,.1);
  position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;
  background:var(--nav-bg);color:var(--nav-fg);box-shadow:inset 0 -1px 0 var(--nav-line);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s ease,color .3s ease,box-shadow .3s ease}
.top[data-theme="light"]{--nav-bg:rgba(255,255,255,.9);--nav-fg:var(--ink);--nav-line:rgba(17,17,17,.1)}
.top.is-hidden{transform:translateY(-100%)}
.top[data-theme="light"] .btn-y{--bc:var(--ink);--bf:var(--red);--bt:#fff;--ba:var(--red-d)}
.top-nav{display:none;gap:22px;font-family:var(--f-t);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.04em}
.top-nav a{color:var(--nav-fg);text-decoration:none;opacity:.85;transition:opacity .2s ease,color .2s ease}
.top-nav a:hover{opacity:1;color:var(--red)}

/* buttons */
/* contorno com duas aberturas na diagonal (::before, recortado por máscara) + faixa (::after) que gira e preenche o botão no hover.
   --bc: cor do contorno e do texto · --bf: cor do preenchimento · --bt: texto no hover · --ba: preenchimento ao clicar */
.btn{--bc:#fff;--bf:#fff;--bt:var(--ink);--ba:#d9d9d9;
  position:relative;isolation:isolate;overflow:hidden;user-select:none;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:15px 29px;font-family:var(--f-t);font-weight:800;font-size:21px;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;
  background:transparent;color:var(--bc);border:0;border-radius:999px;
  transition:transform .18s ease,color .3s ease;cursor:pointer;line-height:1}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border:3px solid var(--bc);border-radius:inherit;
  -webkit-mask-image:linear-gradient(30deg,#000 calc(50% - 6px),transparent calc(50% - 6px),transparent calc(50% + 6px),#000 calc(50% + 6px));
  mask-image:linear-gradient(30deg,#000 calc(50% - 6px),transparent calc(50% - 6px),transparent calc(50% + 6px),#000 calc(50% + 6px))}
.btn::after{content:"";position:absolute;z-index:-1;top:50%;left:50%;width:8%;height:1500%;background:transparent;
  transform:translate(-50%,-50%) rotate(-60deg);transition:all .3s}
.btn:hover{transform:translateY(-2px);color:var(--bt)}
.btn:hover::after{width:100%;background:var(--bf);transform:translate(-50%,-50%) rotate(-90deg)}
.btn:active::after{background:var(--ba)}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.btn-sm{min-height:42px;padding:11px 21px;font-size:18px}
.btn-y{--bc:#fff;--bf:#fff;--bt:var(--ink);--ba:#d9d9d9}
.btn-o{--bc:#fff;--bf:#fff;--bt:var(--ink);--ba:#d9d9d9}
.btn-r{--bc:var(--red);--bf:var(--red);--bt:#fff;--ba:var(--red-d)}
.btn-k{--bc:var(--ink);--bf:var(--ink);--bt:#fff;--ba:#000}
.btn-line{--bc:var(--ink);--bf:var(--red);--bt:#fff;--ba:var(--red-d)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* chips */
.chip{display:inline-block;padding:3px 9px;font-family:var(--f-b);font-size:12.5px;font-weight:700;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;border:1.5px dashed currentColor;border-radius:3px;color:var(--mut);background:transparent;vertical-align:baseline}
.chip-ok{color:#2c6b2f;border-style:solid}
.chip-d{color:#c9c9c4}
.chip-on-red{color:#fff}

/* HERO */
/* a header é fixa, então o hero começa em y=0 e reserva o espaço dela no padding-top */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:calc(14px + var(--nav-h,66px)) 0 0;min-height:calc(100vh - 30vh - 130px);min-height:calc(100svh - 30vh - 130px);display:flex;flex-direction:column;justify-content:center}
.hero-pic .pic-clip,.hero-pic .speed{z-index:1}
.hero-grid{position:relative;z-index:1;display:grid;gap:26px}
/* frota nas laterais: no celular vira uma fileira abaixo do texto; no desktop ocupa as laterais vazias.
   Esquerda aponta para a direita e direita aponta para a esquerda (só espelhados, sem rotação extra) */
.hero-side{--vs:min(27vw,17svh);order:1;display:flex;justify-content:center;align-items:center;margin-top:6px;padding:0 16px;pointer-events:none}
.hero-side-r{--vs:min(33vw,20svh)}
.hero-side .v{display:block;width:var(--vs);height:auto;margin:0 calc(var(--vs)*-.09);filter:drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.hero-side-l .v-man,.hero-side-r .v-bus{transform:scaleX(-1)}
@media (min-width:760px){
  /* z-index acima do texto: os veículos avançam um pouco sobre o centro (pointer-events:none mantém o botão clicável) */
  .hero-side{position:absolute;z-index:2;top:calc(12px + var(--nav-h,66px));bottom:44px;width:37vw;display:block;margin:0;padding:0}
  .hero-side-l{left:1vw}
  .hero-side-r{right:1vw}
  .hero-side .v{position:absolute;margin:0}
  /* esquerda: elétrico ao fundo, manual na frente dele, motos na frente de todos (semiautomática atrás da manual) */
  .hero-side-l .v-ele{right:0;top:0;width:54%;z-index:1}
  .hero-side-l .v-man{left:0;top:10%;width:56%;z-index:2}
  .hero-side-l .v-sem{left:6%;bottom:0;width:38%;z-index:3}
  .hero-side-l .v-mot{left:42%;bottom:0;width:48%;z-index:4}
  /* direita: ônibus ao fundo, carreta na frente dele */
  .hero-side-r .v-bus{left:0;bottom:0;width:60%;z-index:1}
  .hero-side-r .v-car{right:0;top:0;width:60%;z-index:2}
}
@media (min-width:1100px) and (max-width:1500px){
  .hero-side{width:34vw}
}
.plate-tag{display:inline-block;background:#fff;color:var(--ink);font-family:var(--f-t);font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:3px;border:2px solid var(--ink);box-shadow:0 0 0 2px #fff}
.hero-txt{text-align:center}
.hero-txt .cta-row{justify-content:center}
.h1{font-family:var(--f-t);font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,min(12.8vw,7.2svh),4.4rem);line-height:.9;letter-spacing:-.01em;margin:8px 0 20px}
.h1 .ln{display:block;white-space:nowrap;transform-origin:center bottom}
.h1 .ln + .ln{margin-top:6px}
.h1 em{font-style:italic;color:var(--red)}
/* linha de contexto acima do título (cidade + serviço) e frase de apoio abaixo dele */
.h1 .h1-kick{display:block;font-size:max(15px,.3em);font-weight:800;font-style:normal;letter-spacing:.12em;line-height:1.1;color:var(--yellow);margin-bottom:.5em}
.hero-lead{max-width:34em;margin:-6px auto 22px;padding:0 16px;font-size:16px;line-height:1.45;color:#e8e8e4;text-align:center}
/* no tablet e no desktop a frase cabe na coluna central, entre os veículos das laterais */
@media (min-width:760px){.hero-lead{margin:-22px auto 28px;font-size:17px;max-width:min(400px,38vw);padding:0}}
.lead{font-size:19px;max-width:30em;color:#e8e8e4;margin-bottom:22px}
.hero-pic{position:relative}
.pic-clip{clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);background:#222}
.pic-clip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.speed{position:absolute;right:2px;bottom:-14px;width:112px;height:112px;border-radius:50%;background:#fff;border:9px solid var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.speed-n{font-family:var(--f-t);font-weight:900;font-size:50px;line-height:.85}
.speed-l{font-family:var(--f-t);font-weight:800;font-size:17px;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.hero-note{position:relative;margin-top:12px;font-size:13px;color:#bdbdb8}
/* selo "mais de 20 anos": texto girando em volta do número */
/* celular: o selo cabe no espaço à direita do título "Alunos aprovados" (acompanha a largura da tela); a partir de 760px volta ao tamanho grande */
.seal{--sz:clamp(80px,23vw,96px);position:absolute;right:10px;bottom:calc(var(--sz)*-.48);width:var(--sz);height:var(--sz);border-radius:50%;background:var(--red);color:#fff;display:grid;place-content:center;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:seal-rot 12s linear infinite}
.seal-ring text{fill:currentColor;font-family:var(--f-t);font-weight:800;font-size:14px;letter-spacing:.04em}
.seal-core{position:relative;width:calc(var(--sz)*.48);height:calc(var(--sz)*.48);border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center}
.seal-medal{width:68%;height:68%}
@keyframes seal-rot{to{transform:rotate(360deg)}}
/* celulares muito estreitos: o título "Alunos aprovados" ocupa a linha toda, então o selo desce para ficar só sobre o carrossel */
@media (max-width:350px),(min-width:500px) and (max-width:640px){.seal{bottom:calc(var(--sz)*-1)}}

/* APROVADOS: carrossel infinito; metade sobre o preto do hero, metade sobre o branco da seção seguinte */
.wall{position:relative;z-index:3;background:var(--ink);color:#fff}
.wall-head{position:relative;z-index:2;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding-bottom:8px}
.wall .wall-head{max-width:none;margin:0;padding-left:clamp(20px,4.2vw,80px)}
.wall-head .kicker{margin:0}
.wall-head .wall-sub{padding:4px 12px;background:linear-gradient(var(--red),var(--red)) no-repeat left center/0% 100%;animation:markerIn .7s cubic-bezier(.77,0,.18,1) 1.5s forwards}
@keyframes markerIn{to{background-size:100% 100%}}
@media (prefers-reduced-motion: reduce){.wall-head .wall-sub{animation:none;background-size:100% 100%}}
.wall-sub{font-family:var(--f-t);font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.3rem;line-height:1}
.wall-stage{position:relative;background:linear-gradient(to bottom,var(--ink) 50%,var(--paper) 50%)}
/* triângulo vermelho de cabeça para baixo: nasce na divisa preto/branco, no canto direito, passa por trás dos cards e desce até a seção de categorias */
.wall-stage::before{content:"";position:absolute;z-index:0;top:50%;right:0;width:clamp(200px,28vw,520px);aspect-ratio:1/.488;background:var(--red);clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none}
.wall-vp{position:relative;z-index:1;overflow:hidden;padding:26px 0 30px;margin-top:-20px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wall-vp{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wall-vp.is-drag{cursor:grabbing}
.wall-vp img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.wall-track{display:flex;gap:20px;width:max-content;will-change:transform;padding:0 10px}
/* --dy: desnível de cada card; o JS grava o valor inline nos originais e nos clones para o padrão não mudar na emenda do loop */
.win{--h:clamp(170px,27svh,270px);--dy:0px;position:relative;flex:none;width:calc(var(--h)*.76);height:var(--h);transform:translateY(var(--dy));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.win:nth-child(even){--dy:20px}
.win:nth-child(3n){--dy:8px}
.win:hover{transform:translateY(-8px) scale(1.04);z-index:2}
.win-in{position:absolute;inset:0;background:#222;border-radius:12px;overflow:hidden;transform:skewX(-4deg)}
.win-in img{position:absolute;top:0;left:-14px;width:calc(100% + 28px);height:100%;object-fit:cover;object-position:50% 32%;max-width:none;transform:skewX(4deg)}
.win-stamp{position:absolute;left:-8px;top:14px;z-index:1;background:var(--red);color:#fff;border:2px solid #fff;border-radius:3px;padding:3px 9px;font-family:var(--f-t);font-weight:900;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;line-height:1;transform:rotate(-8deg);box-shadow:0 3px 0 rgba(0,0,0,.3)}
@media (prefers-reduced-motion: reduce){
  .wall-vp{overflow-x:auto;-webkit-mask-image:none;mask-image:none;touch-action:auto;cursor:auto}
  .win,.win:hover{transition:none}
}
@media (min-width:760px){
  .wall-sub{font-size:1.9rem}
  .wall-head{padding-bottom:18px}
  .win{--h:clamp(250px,30vh,380px)}
  .win-stamp{font-size:1.25rem;padding:4px 11px;top:18px}
  .wall-track{gap:24px}
}

.hazard{height:20px;background:repeating-linear-gradient(-45deg,var(--red) 0 16px,var(--ink) 16px 32px)}
.hazard-rev{background:repeating-linear-gradient(45deg,var(--red) 0 16px,var(--ink) 16px 32px)}

/* sections */
.sec{padding:64px 0;overflow:hidden}
.sec-light{background:var(--paper)}
.sec-ink{background:var(--ink);color:#fff}
.kicker{display:inline-block;font-family:var(--f-t);font-weight:800;font-size:19px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.k-y{color:#fff}
.h2{font-family:var(--f-t);font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(2.3rem,9vw,4rem);line-height:.95;margin-bottom:14px}
.on-dark{color:#fff}
.sub{max-width:40em;color:var(--mut);margin-bottom:30px}
.sub.on-dark{color:#d0d0cb}

/* plates */
.plates{--cols:2;--gap:14px;display:grid;grid-template-columns:1fr 1fr;gap:78px var(--gap);margin-top:78px}
/* card liso, sem contorno: faixa de cor (vermelho, preto, amarelo) atrás do veículo e o resto branco. Cada card mistura as cores do seu jeito. */
.plate{--ov:46px;--lift:64px;--panel:var(--red);--tag:var(--red);--tag-t:#fff;
  background:#fff;border-radius:18px;padding:18px 14px 26px;position:relative;box-shadow:0 14px 34px -14px rgba(17,17,17,.22);display:flex;flex-direction:column;gap:8px;min-width:0}
.plate:nth-child(1){--panel:linear-gradient(112deg,transparent 0 58%,var(--yellow) 58% 72%,var(--ink) 72%),var(--red)}
.plate:nth-child(2){--panel:linear-gradient(68deg,var(--red) 0 14%,var(--yellow) 14% 21%,transparent 21%),var(--ink);--tag:var(--yellow);--tag-t:var(--ink)}
.plate:nth-child(3){--panel:linear-gradient(75deg,var(--ink) 0 38%,var(--yellow) 38% 44%,var(--red) 44%)}
.plate:nth-child(4){--panel:linear-gradient(250deg,var(--ink) 0 18%,var(--red) 18% 27%,transparent 27%),var(--yellow)}
.plate:nth-child(5){--panel:linear-gradient(120deg,var(--red) 0 42%,var(--yellow) 42% 48%,var(--ink) 48%);--tag:var(--yellow);--tag-t:var(--ink)}
/* mesmo tamanho para todos; enquanto não cabem 5 por linha, o último fica sozinho e centralizado na última linha */
.plate:last-child{grid-column:1/-1;justify-self:center;width:calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols))}
.plate-img{position:relative;z-index:2;width:calc(100% + 28px);aspect-ratio:3/2;margin:calc(var(--lift)*-1) -14px 0}
.plate-img::before{content:"";position:absolute;z-index:-1;inset:var(--ov) 0 0;background:var(--panel);border-radius:18px 18px 0 0;clip-path:polygon(0 0,100% 0,100% 100%,0 88%)}
.plate-img img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.25));transform-origin:50% 85%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.plate:hover .plate-img img{transform:scale(1.07)}}
.plate:focus-within .plate-img img{transform:scale(1.07)}
.plate-img-duo img{position:absolute;height:auto;width:72%}
.plate-img-duo .p-man{left:0;bottom:0;z-index:2}
.plate-img-duo .p-ele{right:0;top:0;z-index:1}
.plate-cat{align-self:center;display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:4px 5px 4px 14px;background:var(--ink);color:#fff;border-radius:5px;font-family:var(--f-t);font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.plate-cat b{display:grid;place-items:center;min-width:34px;height:34px;background:var(--tag);color:var(--tag-t);border-radius:4px;font-weight:900;font-style:italic;font-size:27px;letter-spacing:0;padding:0 5px}
.plate-note{align-self:center;margin-top:2px;font-size:13px;line-height:1.35;text-align:center;color:var(--ink);opacity:.7}
.plate-cta{align-self:center;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:4px 2px;font-family:var(--f-t);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.plate-cta::after{content:"→";color:var(--red);transition:transform .2s}
/* link esticado: o ::before cobre o card todo (inclusive o veículo que sobra por cima), então o card inteiro é clicável */
.plate-cta::before{content:"";position:absolute;z-index:3;inset:calc(var(--lift)*-1) 0 0;border-radius:18px}
.plate-cta:focus-visible{outline:none}
.plate-cta:focus-visible::before{outline:3px solid var(--red);outline-offset:3px}
.plate:hover .plate-cta,.plate-cta:focus-visible{color:var(--red);border-color:var(--red)}
.plate:hover .plate-cta::after,.plate-cta:focus-visible::after{transform:translateX(4px)}
.plate:hover{cursor:pointer}
.plate h3{font-family:var(--f-t);font-weight:900;font-style:italic;font-size:2.3rem;text-transform:uppercase;line-height:1;text-align:center}
.banner{margin-top:28px;color:#fff;border-radius:var(--r);padding:24px 22px;display:grid;gap:18px;transform-origin:left center}
.banner{position:relative}
.banner::before{content:"";position:absolute;z-index:1;inset:0;background:var(--ink);border-radius:var(--r);pointer-events:none}
.banner>*{position:relative;z-index:2}
/* botão do banner: preenchido de branco, contorno vermelho e texto preto; no hover enche de vermelho */
.banner .btn{--bc:var(--red);--bf:var(--red);--bt:#fff;--ba:var(--red-d);background:#fff;color:var(--ink);white-space:nowrap;font-size:clamp(15px,5vw,21px);padding-inline:clamp(14px,5vw,29px);gap:clamp(6px,2vw,10px)}
.banner .btn:hover{color:#fff}
.banner h3{font-family:var(--f-t);font-weight:900;font-style:italic;text-transform:uppercase;font-size:2.1rem;line-height:1;margin-bottom:6px}
.banner p{max-width:40em}


/* foto do mural (Onde estamos) */
.fl-img{clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);background:#ddd}
.fl-img img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 60%}
@media (min-width:700px){.fl-img img{aspect-ratio:16/9}}
.where-pic figcaption{font-size:14px;color:var(--mut);margin-top:8px}

/* TRILHA, modo lista: sem JS ou com movimento reduzido */
/* cena de dia: o céu sai do branco da seção da frota (acima) e desce para o azul, sem corte entre as duas */
.trip{--sky:linear-gradient(180deg,#fff 0,#eef6fc 16%,#cfe6f7 42%,#a9d3f0 66%,#cbe6f6 84%);position:relative;background:#fff var(--sky);color:var(--ink)}
.trip-pin{padding:64px 0}
.trip-svg,.trip-dots{display:none}
.trip-steps{display:grid;gap:14px;margin-top:10px}
.trip-step{background:#fff;border-left:6px solid var(--red);border-radius:0 var(--r) var(--r) 0;padding:14px 16px;min-width:0;box-shadow:0 10px 30px rgba(17,17,17,.1)}
.trip-step h3{font-family:var(--f-t);font-weight:800;font-size:1.7rem;text-transform:uppercase;line-height:1;margin:2px 0 6px}
.trip-step p{color:#3d3d3a;font-size:16px}

/* TRILHA fixa (.trip-on, js/main.js): a seção é alta e o .trip-pin fica preso na tela enquanto ela passa.
   O SVG ocupa a parte de baixo; no desktop o texto fica à esquerda e o carro para à direita dele */
.trip-on{height:800vh;height:800svh}
.trip-on .trip-pin{position:sticky;top:0;height:100vh;height:100svh;height:100dvh;overflow:hidden;padding:0;
  background:#fff var(--sky)}
.trip-on .trip-svg{display:block;position:absolute;left:0;bottom:0;width:100%;height:58%}
.trip-on .trip-hud{position:relative;z-index:2;padding-top:calc(var(--nav-h,66px) + 6px)}
.trip-on .h2{font-size:clamp(1.9rem,8.4vw,2.6rem);margin-bottom:10px}
.trip-on .trip-sub{display:none}
.trip-on .trip-steps{position:relative;margin-top:0;max-width:460px}
.trip-on .trip-step{grid-area:1/1;background:rgba(255,255,255,.95);opacity:0;transform:translateX(50px) skewX(8deg);transition:opacity .2s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.trip-on .trip-step.is-past{transform:translateX(-50px) skewX(-8deg)}
.trip-on .trip-step.is-active{opacity:1;transform:none;transition:opacity .35s ease .15s,transform .55s cubic-bezier(.2,.8,.2,1) .1s}
.trip-on .trip-step h3{font-size:1.5rem}
.trip-on .trip-step p{font-size:15px}
.trip-on .trip-dots{display:flex;align-items:center;gap:6px;max-width:460px;margin-top:8px}
.trip-dot{flex:1;position:relative;height:28px;padding:0;border:0;background:none;cursor:pointer}
.trip-dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:rgba(17,17,17,.15);transition:background-color .3s ease,transform .3s ease}
.trip-dot:hover::before{background:rgba(17,17,17,.35)}
.trip-dot.is-done::before{background:var(--ink)}
.trip-dot.is-active::before{background:var(--red);transform:scaleY(1.6)}
.trip-dot:focus-visible{outline:3px solid var(--red);outline-offset:2px}
@media (min-width:760px) and (min-aspect-ratio:21/20){
  .trip-on .trip-svg{height:74%}
  /* névoa clara atrás do texto (a cena anterior sai pela esquerda); some antes da pista para não lavar o asfalto */
  .trip-on .trip-pin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.85) 0,rgba(255,255,255,.55) 26%,rgba(255,255,255,0) 44%);
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 78%);mask-image:linear-gradient(180deg,#000 55%,transparent 78%)}
  .trip-on .trip-hud{padding-top:calc(var(--nav-h,66px) + 22px)}
  .trip-on .h2{font-size:clamp(2.4rem,4.4vw,4rem)}
  .trip-on .trip-sub{display:block;max-width:460px;margin-bottom:18px;font-size:16px}
  .trip-on .trip-step{padding:18px 20px}
  .trip-on .trip-step h3{font-size:2rem}
  .trip-on .trip-step p{font-size:16px}
}
@media (max-height:560px){
  .trip-on .trip-hud .kicker,.trip-on .trip-hud .trip-sub{display:none}
  .trip-on .trip-hud .h2{font-size:1.8rem}
}

/* cenário (unidades do SVG: chão em y=436, pista de y=458 a 600) */
.trip-svg text{font-family:var(--f-t);font-weight:800;text-anchor:middle}
.trip-svg .tl{text-anchor:start}
.t-clouds use{fill:#fff}
.t-sun circle{fill:var(--yellow)}
.t-sun .t-halo{fill:url(#t-halo)}
.t-sun path{fill:none;stroke:var(--yellow);stroke-width:5;stroke-linecap:round;opacity:.7}
.t-sun g{transform-box:fill-box;transform-origin:50% 50%;animation:t-rot 40s linear infinite}
.t-win{fill:#eef7fd;opacity:.75}
.t-dash{stroke:rgba(255,255,255,.7);stroke-width:4;stroke-dasharray:34 26}
.t-pole{fill:none;stroke:#4a4a4a;stroke-width:6}
.t-head{fill:#d9d9d4}
.t-mk-p{fill:#4a4a4a}
.t-mk-b{fill:#fff;stroke:var(--ink);stroke-width:3}
.t-mk-s{font-size:10px;letter-spacing:.08em;fill:var(--ink)}
.trip-svg .t-mk-n{font-size:28px;font-weight:900;fill:var(--ink)}
/* carro: fumaça quando anda, linhas de velocidade quando acelera, luz de ré branca quando volta */
.t-tail{fill:var(--red);transition:fill .2s}
.is-rev .t-tail{fill:#fff}
.t-smoke circle{fill:#8a8a85;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.is-moving .t-smoke circle{animation:t-puff .7s linear infinite}
.is-moving .t-smoke circle:nth-child(2){animation-delay:.23s}
.is-moving .t-smoke circle:nth-child(3){animation-delay:.46s}
.t-speed{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-dasharray:30 18;opacity:0;transition:opacity .25s}
.is-fast .t-speed{opacity:.35;animation:t-zip .3s linear infinite}
@keyframes t-puff{0%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:translate(-46px,-14px) scale(2)}}
@keyframes t-zip{to{stroke-dashoffset:-48}}

/* cenas: .sc ganha .is-on quando o carro chega na etapa; .pop surge, .t-trace desenha o traço (atraso em --d) */
.trip-svg .pop,.trip-svg .an{transform-box:fill-box;transform-origin:50% 100%}
.trip-svg .pop{opacity:0;transform:scale(.2);transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}
.sc.is-on .pop{opacity:1;transform:none;transition-delay:var(--d,0ms)}
.t-trace{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .4s ease}
.sc.is-on .t-trace{stroke-dashoffset:0;transition-delay:var(--d,0ms)}
.t-l{fill:#333}
/* 1. primeiro contato */
.s1-name{font-size:15px;fill:#fff}
.trip-svg .s1-t{font-family:var(--f-b);font-weight:600;font-size:12px;fill:var(--ink)}
.trip-svg .s1-tw{fill:#fff}
.s1-dots circle{fill:#fff}
.sc.is-on .s1-dots circle{animation:t-dot .9s ease-in-out infinite}
.s1-dots circle:nth-of-type(2){animation-delay:.15s}
.s1-dots circle:nth-of-type(3){animation-delay:.3s}
.s1-ring path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;opacity:0}
.sc.is-on .s1-ring path{animation:t-ring 1.4s ease-out infinite}
.sc.is-on .s1-ring path+path{animation-delay:.25s}
.sc.is-on .s1-phone{animation:t-buzz .1s linear 8}
@keyframes t-dot{50%{transform:translateY(-4px)}}
@keyframes t-ring{30%{opacity:1}100%{opacity:0}}
@keyframes t-buzz{25%{transform:rotate(1.6deg)}75%{transform:rotate(-1.6deg)}}
/* 2. documentos e matrícula */
.s2-sign{font-size:17px;letter-spacing:.06em;fill:#fff}
.s2-win{fill:#2b2b2b;transition:fill .3s ease}
.sc.is-on .s2-win{fill:var(--yellow);transition-delay:var(--d,0ms)}
.s2-doc rect:first-child{fill:#fff;stroke:var(--ink);stroke-width:3}
.s2-doc path{stroke:#c9c9c4;stroke-width:5;stroke-linecap:round}
.s2-ph{fill:#d0d0cb}
.trip-svg .s2-doc{transform-origin:50% 50%;transform:translateY(240px) scale(.2) rotate(40deg)}
.sc.is-on .s2-d1{transform:rotate(-12deg)}
.sc.is-on .s2-d3{transform:rotate(12deg)}
.s2-stamp circle{fill:rgba(232,24,32,.14);stroke:var(--red);stroke-width:4}
.trip-svg .s2-stamp text{font-size:12px;letter-spacing:.06em;fill:var(--red)}
.s2-stamp path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.trip-svg .s2-stamp{transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:scale(2.6) rotate(-30deg);transition:transform .3s cubic-bezier(.6,0,.9,.4),opacity .15s}
.sc.is-on .s2-stamp{opacity:1;transform:rotate(-14deg);transition-delay:1.2s}
/* 3. teoria */
.s3-t{font-size:20px;letter-spacing:.08em;fill:#fff}
.s3-pare{font-size:13px;fill:#fff}
.s3-km{font-size:22px;fill:var(--ink)}
.trip-svg .s3-s{transform-origin:50% 50%;transform:scale(0,.6)}
.s3-ck{stroke:var(--yellow)}
.s3-bulb circle{fill:#3a3a3a;transition:fill .3s}
.s3-bulb path{fill:none;stroke:var(--yellow);stroke-width:4;stroke-linecap:round;opacity:0}
.sc.is-on .s3-bulb circle{fill:var(--yellow);transition-delay:1.6s}
.sc.is-on .s3-bulb path{animation:t-blink 1.2s ease-in-out 1.6s infinite}
@keyframes t-blink{0%,100%{opacity:1}50%{opacity:.3}}
/* 4. aulas práticas: o semáforo fica sempre em ciclo */
.s4-r{animation:t-lr 4.5s steps(1) infinite}
.s4-y{animation:t-ly 4.5s steps(1) infinite}
.s4-g{animation:t-lg 4.5s steps(1) infinite}
@keyframes t-lr{0%{fill:#E81820}40%,100%{fill:#333}}
@keyframes t-lg{0%{fill:#333}40%{fill:#2bd46b}85%,100%{fill:#333}}
@keyframes t-ly{0%{fill:#333}85%{fill:#FFC400}}
.s4-box{fill:none;stroke:var(--yellow);stroke-width:4;stroke-dasharray:16 10;opacity:0;transition:opacity .4s}
.sc.is-on .s4-box{opacity:1;animation:t-march 1s linear infinite}
@keyframes t-march{to{stroke-dashoffset:-26}}
.s4-say rect,.s4-say path{fill:#fff}
.s4-say{filter:drop-shadow(0 4px 8px rgba(17,17,17,.2))}
.s4-t{font-size:15px;fill:var(--ink)}
/* 5. exame: vermelho, pisca o amarelo e abre o verde */
.s5-b{font-size:15px;letter-spacing:.1em;fill:#fff}
.s5-h{font-size:14px;letter-spacing:.06em;fill:var(--ink)}
.s5-i{font-size:16px;fill:var(--ink)}
.s5-bx{fill:none;stroke:var(--ink);stroke-width:2.5}
.s5-ck{stroke:var(--red)}
.s5-r{fill:#E81820;transition:fill .15s}
.s5-g{transition:fill .15s}
.sc.is-on .s5-r{fill:#333;transition-delay:2.3s}
.sc.is-on .s5-y{animation:t-y5 .5s steps(1) 1.8s}
.sc.is-on .s5-g{fill:#2bd46b;transition-delay:2.3s}
.sc.is-on .s5-clip{animation:t-nod .6s ease-in-out .3s 3}
@keyframes t-y5{0%,100%{fill:#FFC400}}
@keyframes t-nod{50%{transform:rotate(-3deg)}}
/* 6. chegada */
.s6-t{font-size:18px;letter-spacing:.1em;fill:#fff}
.trip-svg .s6-cnh{font-size:26px;font-weight:900;font-style:italic;fill:#fff}
.trip-svg .s6-hab{font-size:13px;letter-spacing:.08em;fill:#fff;text-anchor:end}
.trip-svg .s6-card{transform-origin:50% 50%;transform:translateY(170px) scale(.4) rotate(-24deg)}
.sc.is-on .s6-card{transform:rotate(-4deg);animation:t-float 3s ease-in-out 1s infinite}
@keyframes t-float{0%,100%{transform:rotate(-4deg)}50%{transform:translateY(-8px) rotate(-2deg)}}
.s6-rays{opacity:0;transition:opacity .5s}
.sc.is-on .s6-rays{opacity:1;transition-delay:.5s}
.s6-rays g{transform-box:fill-box;transform-origin:50% 50%;animation:t-rot 16s linear infinite}
.s6-rays path{fill:var(--yellow);opacity:.3}
@keyframes t-rot{to{transform:rotate(360deg)}}
.s6-cf rect{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.sc.is-on .s6-cf rect{animation:t-cf 2.4s cubic-bezier(.2,.7,.4,1) var(--d) infinite}
@keyframes t-cf{0%{opacity:0;transform:none}8%{opacity:1}45%{transform:translate(var(--x),var(--y)) rotate(calc(var(--r) / 2))}100%{opacity:0;transform:translate(calc(var(--x) * 1.3),calc(var(--y) + 240px)) rotate(var(--r))}}
/* fora da tela (.is-off, js/main.js): as animações em loop do cenário (semáforos, confete, raios, sol) ficam pausadas e continuam de onde pararam ao voltar */
.trip-on.is-off .trip-svg *{animation-play-state:paused}

/* fleet: destaque (4 automáticos + 1 manual) e foto única que alterna sozinha */
.fleet-pick{display:grid;gap:12px;margin-bottom:34px}
.fp{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--r);background:var(--ink);color:#fff;border-left:8px solid var(--red)}
.fp-man{border-left-color:var(--yellow)}
.fp-n{font-family:var(--f-t);font-weight:900;font-style:italic;font-size:4.2rem;line-height:.85;color:var(--red)}
.fp-man .fp-n{color:var(--yellow)}
.fp-t{display:grid;gap:2px;font-size:15px;line-height:1.3;color:#d0d0cb}
.fp-t strong{font-family:var(--f-t);font-weight:800;font-size:1.7rem;letter-spacing:.02em;text-transform:uppercase;line-height:1;color:#fff}
.fleet-grid{display:grid;gap:34px}
.fleet-copy{min-width:0}
/* foto única: as 3 imagens ficam empilhadas e se alternam com fade + zoom leve (3 s cada, ciclo de 9 s; o -0.6s já começa com a 1ª visível; só roda depois que a foto entra na tela, quando o .rv ganha .in) */
.fleet-photo{position:relative;width:min(100%,440px);margin:0 auto}
.fleet-photo::before{content:"";position:absolute;inset:14px -14px -14px 14px;background:var(--red);clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)}
.fleet-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#e4e3df;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)}
.fslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 78%;opacity:0;animation:fleetFade 9s linear infinite;will-change:opacity,transform}
.fleet-photo:not(.in) .fslide{animation-play-state:paused}
.reveal-all .fleet-photo .fslide{animation-play-state:running}
.fslide:nth-child(1){animation-delay:-.6s}
.fslide:nth-child(2){animation-delay:2.4s}
.fslide:nth-child(3){animation-delay:5.4s}
@keyframes fleetFade{0%{opacity:0;transform:scale(1)}6.67%{opacity:1}33.33%{opacity:1}40%{opacity:0;transform:scale(1.07)}100%{opacity:0;transform:scale(1.07)}}
@media (prefers-reduced-motion: reduce){.fslide{animation:none}.fslide:nth-child(1){opacity:1}}
/* motos: 5 fotos, 2,4 s cada (ciclo de 12 s); a 1ª já começa visível (-0.48s) e o crossfade dura 0,48 s */
.fleet-grid-motos{margin-top:72px}
.fleet-photo-motos::before{background:var(--yellow);inset:14px 14px -14px -14px}
.fleet-photo-motos .fslide{animation-name:fleetFade5;animation-duration:12s;object-position:50% 55%}
.fleet-photo-motos .fslide:nth-child(1){animation-delay:-.48s}
.fleet-photo-motos .fslide:nth-child(2){animation-delay:1.92s}
.fleet-photo-motos .fslide:nth-child(3){animation-delay:4.32s}
.fleet-photo-motos .fslide:nth-child(4){animation-delay:6.72s}
.fleet-photo-motos .fslide:nth-child(5){animation-delay:9.12s}
@keyframes fleetFade5{0%{opacity:0;transform:scale(1)}4%{opacity:1}20%{opacity:1}24%{opacity:0;transform:scale(1.07)}100%{opacity:0;transform:scale(1.07)}}
@media (prefers-reduced-motion: reduce){.fleet-photo-motos .fslide{animation:none}.fleet-photo-motos .fslide:nth-child(1){opacity:1}}

/* veículos pesados: cards escuros lado a lado (quebra o padrão das fotos grandes), no mesmo fundo da seção.
   Ônibus e carreta: 1 foto fixa cada. */
.fleet-heavy{margin-top:80px}
.fleet-heavy .h2{margin-bottom:26px}
.hv-grid{display:grid;gap:22px}
.hv{display:grid;background:var(--ink);color:#fff;border-radius:var(--r);overflow:hidden;border-bottom:6px solid var(--red);box-shadow:0 14px 30px -16px rgba(17,17,17,.5)}
.hv-pic{position:relative;aspect-ratio:1/1;background:#e4e3df;overflow:hidden}
.hv-pic:not(.in) .fslide{animation-play-state:paused}
.reveal-all .hv-pic .fslide{animation-play-state:running}
.hv-pic .fslide{object-position:50% 50%}
.hv-single .fslide{animation:none;opacity:1}
.hv-info{display:grid;align-content:center;justify-items:start;gap:6px;padding:20px 22px 22px}
.hv-count{font-family:var(--f-t);font-weight:800;font-size:1.25rem;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);line-height:1}
.hv-count b{font-weight:900;font-style:italic;font-size:2.4rem;letter-spacing:0;margin-right:4px;vertical-align:-.12em}
.hv h3{font-family:var(--f-t);font-weight:900;font-style:italic;font-size:2.4rem;line-height:.95;text-transform:uppercase}
.hv-model{font-family:var(--f-t);font-weight:700;font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase;color:#d0d0cb}
.hv-txt{font-size:15px;line-height:1.4;color:#d0d0cb}

/* rate */
/* margin-top negativo + z-index: a seção sobe 2px sobre o fim da trilha (cujo .trip-pin é sticky e fica por cima) para não aparecer uma linha clara na emenda
   entre o asfalto e o fundo preto; o padding-top maior mantém o conteúdo no mesmo lugar */
#avaliacoes{position:relative;z-index:1;margin-top:-2px;padding-top:66px;padding-bottom:48px}
.rate-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 28px;margin-bottom:8px}
.rate-title .h2{margin-bottom:0}
.rate-score{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;gap:6px 10px;padding-bottom:6px}
.score{font-family:var(--f-t);font-weight:900;font-style:italic;font-size:2.4rem;line-height:1;color:var(--red)}
/* 5 estrelas; o preenchimento amarelo vai até 96% (4,8 de 5) */
.stars{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cg id='s'%3E%3Cpolygon points='10,1 12.9,7.1 19.5,7.9 14.6,12.4 15.9,19 10,15.7 4.1,19 5.4,12.4 0.5,7.9 7.1,7.1'/%3E%3C/g%3E%3Cuse href='%23s' x='20'/%3E%3Cuse href='%23s' x='40'/%3E%3Cuse href='%23s' x='60'/%3E%3Cuse href='%23s' x='80'/%3E%3C/svg%3E");
  grid-column:1 / -1;justify-self:start;width:110px;height:22px;background:linear-gradient(90deg,var(--yellow) 96%,#3d3d3a 96%);-webkit-mask:var(--star) center/100% 100% no-repeat;mask:var(--star) center/100% 100% no-repeat}
.score-sub{font-size:14px;color:#a8a8a3}
.rev-vp{margin-top:0;padding:14px 0 20px}
.rev-vp .wall-track{align-items:stretch}
.quote{flex:none;width:min(78vw,320px);display:flex;flex-direction:column;justify-content:space-between;gap:16px;background:#fff;color:var(--ink);border-radius:var(--r);padding:20px 20px 16px;border-top:8px solid var(--red)}
.quote blockquote{font-family:var(--f-t);font-weight:700;font-size:1.55rem;line-height:1.15}
.quote-by{font-weight:700;font-size:15px}
.rate-sub{margin-top:28px}
.rate-sub .wall-sub{display:inline-block;padding:4px 12px;background:var(--red)}
.rev-vp-pics{padding-top:30px}

/* faq: fundo preto como as avaliações. No celular: título, palco com o veículo, perguntas e botão (o .faq-side some com display:contents);
   no desktop: coluna esquerda fixa (título + palco + botão) e perguntas à direita */
.faq{overflow:clip;padding:72px 0 80px}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 0}
.faq-side{display:contents}
.faq-head{order:1}
.faq-stage{order:2}
.faq-list{order:3;display:grid;gap:12px;margin-top:14px}
.faq-cta{order:4;margin-top:26px}
.faq-head .sub{margin-bottom:0}

/* palco: faixa diagonal vermelha/amarela atrás do veículo, que "chega" pela esquerda e sai pela direita a cada troca */
.faq-stage{position:relative;width:min(100%,540px);aspect-ratio:3/2;margin:34px auto 0}
.faq-stage::before{content:"";position:absolute;inset:26% 0 8%;border-radius:16px;background:linear-gradient(106deg,var(--red) 0 60%,var(--yellow) 60% 67%,var(--ink2) 67%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.faq-car{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;opacity:0;visibility:hidden;filter:drop-shadow(0 14px 12px rgba(0,0,0,.5));pointer-events:none;will-change:transform,opacity}
.faq-car.is-on{opacity:1;visibility:visible}
.faq-car.is-out{visibility:visible;animation:faqCarOut .26s cubic-bezier(.4,0,1,1) both}
.js .faq-car.is-on{animation:faqCarIn .42s cubic-bezier(.16,1,.3,1) both}
.js:not(.reveal-all) .faq-stage:not(.in) .faq-car.is-on{animation:none;opacity:0}
.js .faq-stage:not(.swapped) .faq-car.is-on{animation-delay:.45s}
@keyframes faqCarIn{0%{opacity:0;transform:translateX(-9%) skewX(-4deg)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes faqCarOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(7%) skewX(3deg)}}

/* acordeão: a altura da resposta anima pelo grid (0fr → 1fr), então não precisa medir nada em JS */
.faq-card{position:relative;overflow:hidden;background:var(--ink2);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background-color .4s ease,box-shadow .4s ease}
.faq-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--red);transform:scaleY(0);transform-origin:50% 0;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.faq-item.is-open .faq-card{background:#242424;box-shadow:inset 0 0 0 1px rgba(232,24,32,.5)}
.faq-item.is-open .faq-card::before{transform:scaleY(1)}
.faq-h{font:inherit}
.faq-q{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:18px 16px 18px 22px;background:none;border:0;color:#fff;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq-q:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.faq-t{flex:1;min-width:0;font-family:var(--f-t);font-weight:800;font-size:1.4rem;line-height:1.1;text-transform:uppercase;letter-spacing:.01em}
.faq-i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.28);transition:background-color .35s ease,border-color .35s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.faq-i::before,.faq-i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:#fff;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.faq-i::after{transform:rotate(90deg)}
.faq-item.is-open .faq-i{background:var(--red);border-color:var(--red);transform:rotate(180deg)}
.faq-item.is-open .faq-i::after{transform:rotate(0)}
@media (hover:hover){
  .faq-q:hover .faq-i{border-color:#fff}
  .faq-item:not(.is-open) .faq-card:hover{background:#202020}
}
.faq-a{display:grid;grid-template-rows:1fr}
.faq-a-in{min-height:0;overflow:hidden}
.faq-a-body{padding:0 22px 22px;font-size:16px;line-height:1.55;color:#d0d0cb}
.faq-link{color:var(--yellow);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.faq-link:hover{color:#fff}
.faq-link:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.js .faq-a{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .6s cubic-bezier(.2,.8,.2,1),visibility 0s .6s}
.js .faq-item.is-open .faq-a{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.js .faq-a-body{opacity:0;transform:translateY(-10px);transition:opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.js .faq-item.is-open .faq-a-body{opacity:1;transform:none;transition:opacity .45s ease .15s,transform .6s cubic-bezier(.2,.8,.2,1) .15s}
@media (min-width:760px){
  .faq{padding:96px 0 104px}
  .faq-q{gap:16px;padding:22px 22px 22px 26px}
  .faq-t{font-size:1.65rem}
  .faq-a-body{padding:0 26px 26px;font-size:17px}
}
@media (min-width:1000px){
  .faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 clamp(40px,5vw,84px);align-items:start}
  .faq-side{display:block;position:sticky;top:calc(var(--nav-h,66px) + 28px)}
  .faq-list{margin-top:0}
  .faq-stage{margin:36px 0 0 -6px}
  .faq-cta{margin-top:30px}
}
@media (prefers-reduced-motion: reduce){
  .faq-car,.faq-car.is-out{animation:none!important}
  .faq-card,.faq-card::before,.faq-i,.faq-i::before,.faq-i::after,.js .faq-a,.js .faq-a-body,.js .faq-item.is-open .faq-a-body{transition:none!important}
}

/* where */
#onde{position:relative}
/* triângulos vermelhos nos cantos (mesma forma do .wall-stage::before): topo direito e base esquerda, atrás do conteúdo */
#onde::before,#onde::after{content:"";position:absolute;z-index:0;width:clamp(110px,20vw,380px);aspect-ratio:1/.488;background:var(--red);pointer-events:none}
#onde::before{top:0;right:0;clip-path:polygon(0 0,100% 0,100% 100%)}
#onde::after{bottom:0;left:0;clip-path:polygon(0 0,0 100%,100% 100%)}
#onde .where{position:relative;z-index:1}
/* carros decorativos nas laterais (só onde sobra espaço ao lado da foto de 980px); espelhados para olhar para o conteúdo */
.onde-car{display:none;position:absolute;z-index:2;height:auto;max-width:none;pointer-events:none;transform:scaleX(-1);filter:drop-shadow(0 10px 12px rgba(0,0,0,.28))}
@media (min-width:1200px){
  /* a foto central tem 980px: cada carro avança ~110px sobre a borda dela (490px do centro) */
  .onde-car{display:block;width:min(22vw,calc(50% - 404px))}
  .onde-car-l{top:56px;right:calc(50% + 380px)}
  .onde-car-r{top:56%;left:calc(50% + 330px)}
}
@media (min-width:1200px) and (max-width:1699px){
  .onde-car-l{top:130px}
}
.where{display:grid;gap:26px;justify-items:center;text-align:center}
.where-head .h2{margin-bottom:0}
.where-pic{width:100%;max-width:980px}
.where-txt{display:flex;flex-direction:column;align-items:center}
.where-txt .cta-row{justify-content:center}
.where-txt address{font-style:normal}
.info{display:grid;gap:12px;margin:6px 0 16px;justify-items:start}
@media (max-width:759px){.where-txt,.where-txt address,.info{width:100%}}
.info li{display:flex;gap:12px;align-items:flex-start;text-align:left}
.info .ic{color:var(--red);margin-top:3px}
.hours{margin-top:22px}

/* footer */
.foot{background:#000;color:#d6d6d1;padding:48px 0 96px}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;justify-items:center}
/* a logo tem texto preto, então vai inteira sobre um cartão branco */
.foot-logo{display:block;width:min(86vw,440px);background:#fff;border-radius:14px;padding:14px 20px;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.foot-logo img{display:block;width:100%;height:auto}
.foot-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;width:100%;max-width:1040px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.foot-col{min-width:0}
.foot-h{font-family:var(--f-t);font-weight:800;font-size:1.35rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.foot-h::after{content:"";display:block;width:34px;height:3px;margin-top:6px;background:var(--red)}
.foot-col ul{display:grid;gap:10px}
.foot-col li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.4}
.foot-col .ic{color:var(--yellow);margin-top:2px}
.foot-col a{color:#d6d6d1;text-decoration:none}
.foot-col a:hover{color:#fff;text-decoration:underline}
.foot a:focus-visible{outline-color:var(--yellow)}
.foot-hours{padding-left:calc(1.25em + 10px);color:#a8a8a3}
.foot-bottom{display:grid;gap:8px;width:100%;max-width:1040px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);text-align:center}
.foot-copy{font-size:14px;color:#fff}
@media (min-width:760px){
  .foot{padding:60px 0 14px}
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
}

/* floating whatsapp (mobile) */
/* verde, discreto e sem animação própria: com JS ele nasce escondido e entra com fade suave quando a página é rolada (.is-on, js/main.js) */
.fab{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:20;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:#1fa855;color:#fff;border:0;border-radius:50%;padding:0;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.28);-webkit-tap-highlight-color:transparent;transition:background-color .2s ease}
.fab:hover,.fab:active{background:#178a45}
.fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.fab .ic{width:26px;height:26px}
.js .fab{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s,background-color .2s ease}
.js .fab.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
@media (prefers-reduced-motion: reduce){.js .fab,.js .fab.is-on{transition:none}}

/* ===== MOTION: skew + slide lateral (sob .js) ===== */
.js .rv{opacity:0;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*90ms);will-change:transform,opacity}
.js .rv[data-from="l"]{transform:translateX(-56px) skewX(-10deg)}
.js .rv[data-from="r"]{transform:translateX(56px) skewX(10deg)}
.js .rv.in{opacity:1;transform:none}
/* depois que a entrada termina (.rv-done, js/main.js) o elemento deixa de ocupar uma camada própria da GPU */
.js .rv.rv-done{will-change:auto}
/* hero na carga */
.js .h-in{opacity:0;animation:slideSkew .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
/* o fundo preto/branco do .wall-stage fica fixo; só o carrossel entra animado (senão o branco aparece cinza/preto e o palco inclinado durante a entrada) */
.js .wall-stage.h-in{opacity:1;animation:none}
.js .wall-stage.h-in .wall-vp{opacity:0;animation:slideSkew .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.js .h-pic{animation:none}
.js .h-pic .pic-clip{animation:wipe 1s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes slideSkew{from{opacity:0;transform:translateX(-70px) skewX(-14deg)}to{opacity:1;transform:none}}
@keyframes wipe{from{opacity:0;clip-path:polygon(7% 0,7% 0,0 100%,0 100%);transform:translateX(40px)}to{opacity:1;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);transform:none}}
.js .h-pic .speed.h-in,.js .hero-side-r.h-in{animation-name:slideSkewR}
@keyframes slideSkewR{from{opacity:0;transform:translateX(70px) skewX(14deg)}to{opacity:1;transform:none}}
@keyframes bandIn{from{opacity:0;transform:translateX(-120px) rotate(-7deg)}to{opacity:.95;transform:rotate(-7deg)}}
/* segurança: revela tudo se o observer falhar */
.js.reveal-all .rv{opacity:1!important;transform:none!important;transition:none!important}

/* pre-loader: vídeo da logo (2 s) sobre fundo branco; o multiply funde o branco do vídeo com o da tela.
   Ao terminar, a cortina sobe e revela o site; a faixa vermelha na borda de baixo acompanha a subida */
.pre{position:fixed;inset:0;z-index:10000;background:#fff;display:flex;align-items:center;justify-content:center;will-change:transform}
.pre::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;background:var(--red);box-shadow:0 6px 0 var(--ink)}
.pre.done{transform:translateY(calc(-100% - 20px));visibility:hidden;transition:transform .9s cubic-bezier(.77,0,.18,1),visibility 0s .9s}
.pre-v{display:block;width:min(92vw,680px);height:auto;mix-blend-mode:multiply}
.preloading,.preloading body{overflow:hidden}
.preloading *{animation-play-state:paused!important}

@media (prefers-reduced-motion: reduce){
  .pre{display:none}
  .plate-img img{transition:none}
  .js .rv,.js .h-in,.js .wall-stage.h-in .wall-vp,.js .h-pic .pic-clip{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .js .h-pic .pic-clip{clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)!important}
  .btn,.btn::after{transition:none}
  .top,.top-nav a{transition:none}
  .seal-ring{animation:none}
}

/* ===== tablet / desktop ===== */
@media (min-width:760px){
  body{font-size:18px}
  .top{padding:10px 32px}
  .wrap{padding:0 32px}
  .hero{padding:calc(16px + var(--nav-h,66px)) 0 0}
  .hero-grid{grid-template-columns:1fr;align-items:center;gap:40px}
  .h1{font-size:clamp(3.4rem,min(6.3vw,8.4vh),5.4rem)}
  .h1 .ln{white-space:nowrap}
  .seal{--sz:clamp(104px,14vw,124px);right:clamp(20px,4.2vw,80px);bottom:-58px}
  .speed{width:140px;height:140px;right:-6px;bottom:-22px}
  .speed-n{font-size:64px}
  .plates{--cols:4;--gap:18px;grid-template-columns:repeat(4,1fr);gap:18px}
  .plate{--ov:62px;--lift:84px;padding:22px 18px 32px;gap:10px}
  .plate-img{width:calc(100% + 36px);margin:calc(var(--lift)*-1) -18px 0}
  .plate h3{font-size:3.2rem}
  .plate-cat{font-size:17px;padding:5px 6px 5px 16px}
  .plate-cat b{min-width:40px;height:40px;font-size:32px}
  .banner{grid-template-columns:1fr auto;align-items:center;padding:28px 32px}
  .fleet-pick{grid-template-columns:repeat(2,minmax(0,max-content));gap:18px}
  .fp{padding:16px 26px 16px 20px}
  .fleet-grid{grid-template-columns:minmax(0,1fr) minmax(320px,440px);align-items:center;gap:64px}
  .fleet-photo{margin:0 14px 0 auto}
  .fleet-grid-motos{grid-template-columns:minmax(320px,440px) minmax(0,1fr);margin-top:96px}
  .fleet-grid-motos .fleet-photo{order:-1;margin:0 auto 0 14px}
  .hv-grid{grid-template-columns:1fr 1fr;gap:26px}
  .hv-info{padding:24px 26px 26px}
  .quote{width:380px;padding:24px 24px 20px}
  .quote blockquote{font-size:1.7rem}
  .fab{display:none}
}
/* navbar: só logo e botão no celular e no tablet; os links de seção entram quando há espaço (a partir de 1000px) */
@media (min-width:1000px){
  .top-nav{display:flex}
}
/* celular (abaixo de 760px, sem espaço para as laterais): carros e motos ficam acima do título, o título fica centralizado, ônibus e
   carreta vêm abaixo dele e só depois o botão. .hero-grid e .hero-txt somem do layout (display:contents) para o título e o botão
   virarem itens da coluna do hero e poderem ser ordenados entre as duas fileiras de veículos.
   Os veículos têm tamanho limitado também pela altura, para a divisa branca e o carrossel de aprovados aparecerem na primeira tela */
@media (max-width:759px){
  .hero{padding-bottom:18px}
  .hero-grid,.hero-txt{display:contents}
  .hero-side-l{order:1}
  .h1{order:2;margin:8px 0 10px;padding:0 12px}
  .hero-side-r{order:3;margin-top:0}
  .hero-lead{order:4;margin:10px auto 0}
  .hero-txt .cta-row{order:5;margin-top:14px;padding:0 20px}
}
/* tablet e acima: mesmo arranjo do desktop (frota nas laterais, título e botão no centro) */
@media (min-width:760px){
  .h1{margin:18px 0 40px}
  .h1 .ln + .ln{margin-top:14px}
}
/* tablet: laterais e título mais estreitos para não se sobreporem, e a altura do hero acompanha a largura (não a altura da tela),
   senão no tablet em pé os veículos ficariam muito afastados um do outro */
@media (min-width:760px) and (max-width:1099px){
  .hero{min-height:min(calc(100svh - 30vh - 130px),38vw);padding-bottom:26px}
  .hero-side{width:30vw}
  .h1{font-size:clamp(2.6rem,min(5.6vw,8.4vh),5.4rem)}
}
/* 5 cards na mesma linha; o container da seção cresce para cada card manter os ~330px de antes (5 × 330 + 4 × 18 + 64 de respiro) */
@media (min-width:1280px){
  #categorias .wrap{max-width:1796px}
  .plates{--cols:5;grid-template-columns:repeat(5,1fr)}
  .plate:last-child{grid-column:auto;justify-self:stretch;width:auto}
}
/* cards de ônibus e carreta: foto ao lado do texto quando cada card tem ~500px ou mais */
@media (min-width:1100px){
  .hv{grid-template-columns:minmax(170px,40%) 1fr}
  .hv-pic{aspect-ratio:auto;min-height:320px;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
}

/* modelos da frota: 1 card por modelo; o clique abre as fotos num carrossel (<dialog class="gal">) */
.fleet-models{margin-top:80px}
.mc-grid{display:grid;gap:22px;margin-top:6px}
.mc{--accent:var(--red);--accent-t:#fff;position:relative;display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px -14px rgba(17,17,17,.28);border-top:8px solid var(--accent);min-width:0}
.mc-yel{--accent:var(--yellow);--accent-t:var(--ink)}
.mc-ink{--accent:var(--ink)}
.mc-pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e4e3df;clip-path:polygon(0 0,100% 0,100% 90%,0 100%)}
.mc-pic img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.mc:hover .mc-pic img{transform:scale(1.06)}}

/* card com recorte (img/*.webp sem fundo): o veículo sai um pouco para cima do card e o card fica mais compacto */
.mc-grid:has(.mc-cut){row-gap:72px;margin-top:64px}
.mc:not(.mc-cut){overflow:hidden}
.mc-grid:has(.mc-cut) .mc{width:100%;max-width:370px;justify-self:center}
.mc-cut{overflow:visible}
.mc-cut .mc-pic{aspect-ratio:16/9;overflow:visible;background:none;clip-path:none}
.mc-cut .mc-pic::before{content:"";position:absolute;inset:0;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#f4f3ef,#e4e3df);clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
.mc-cut .mc-pic img{position:absolute;left:0;bottom:4px;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(17,17,17,.3));transform-origin:50% 100%}
.mc-cut .mc-body{padding:4px 18px 18px}
.mc-cut h3{font-size:2.2rem}
@media (hover:hover){.mc-cut:hover .mc-pic img{transform:translateY(-6px) scale(1.04)}}
.mc-body{display:grid;justify-items:start;gap:8px;padding:6px 22px 22px}
.mc-kind{display:inline-block;padding:4px 10px;background:var(--accent);color:var(--accent-t);border-radius:3px;font-family:var(--f-t);font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.mc h3{font-family:var(--f-t);font-weight:900;font-style:italic;font-size:2.6rem;line-height:.95;text-transform:uppercase}
.mc-open{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:4px 2px;font-family:var(--f-t);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;transition:color .2s,border-color .2s}
.mc-open::after{content:"+";display:grid;place-items:center;width:22px;height:22px;background:var(--red);color:#fff;border-radius:50%;font-size:18px;line-height:1;transition:transform .2s}
/* link esticado: o card inteiro abre as fotos */
.mc-open::before{content:"";position:absolute;z-index:2;inset:0;border-radius:18px}
.mc-open:focus-visible{outline:none}
.mc-open:focus-visible::before{outline:3px solid var(--red);outline-offset:-3px}
.mc:hover .mc-open,.mc-open:focus-visible{color:var(--red);border-color:var(--red)}
.mc:hover .mc-open::after{transform:rotate(90deg)}
.mc{cursor:pointer}
@media (min-width:640px){.mc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
@media (min-width:1100px){.mc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* janela de fotos */
html.gal-open{overflow:hidden}
.gal{padding:0;border:0;background:transparent;color:#fff;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden}
.gal[open]{display:grid;place-items:center}
.gal::backdrop{background:rgba(17,17,17,.88)}
.gal-box{--h:min(68vh,680px);width:min(94vw,calc(var(--h)*1.5));max-height:96vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--ink);border-radius:14px;overflow:hidden;border-top:6px solid var(--red);animation:galIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes galIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.gal-box{animation:none}}
.gal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px 10px 18px}
.gal-title{font-family:var(--f-t);font-weight:900;font-style:italic;font-size:1.7rem;line-height:1;text-transform:uppercase}
.gal-x{flex:none;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:#fff;font-size:32px;line-height:1;cursor:pointer}
.gal-x:hover,.gal-x:focus-visible{background:var(--red);outline:none}
.gal-stage{position:relative;min-height:0}
.gal-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-track:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.gal-track li{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;background:#000}
.gal-track img{width:100%;height:var(--h);object-fit:contain;user-select:none;-webkit-user-drag:none}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;display:grid;place-items:center;padding:0 0 4px;background:rgba(17,17,17,.7);color:#fff;border:2px solid #fff;border-radius:50%;font-size:30px;line-height:1;cursor:pointer;transition:background .2s}
.gal-nav:hover,.gal-nav:focus-visible{background:var(--red);outline:none}
.gal-prev{left:10px}
.gal-next{right:10px}
.gal-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px 14px}
.gal-n{font-family:var(--f-t);font-weight:800;font-size:17px;letter-spacing:.1em;text-transform:uppercase;color:#d0d0cb}
.gal-dots{display:flex;gap:8px}
.gal-dots i{width:9px;height:9px;border-radius:50%;background:#555;transition:background .2s,transform .2s}
.gal-dots i.on{background:var(--yellow);transform:scale(1.25)}
.gal.is-single .gal-nav,.gal.is-single .gal-dots,.gal.is-single .gal-n{display:none}
@media (max-width:480px){.gal-nav{width:40px;height:40px;font-size:26px}}

/* frota no celular: faixas e fotos menores, ônibus e carreta lado a lado e modelos em 2 colunas, para a seção ficar bem mais curta */
@media (max-width:759px){
  #frota{padding:44px 0 52px}
  #frota .sub{margin-bottom:16px}
  .fleet-pick{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:20px}
  .fp{gap:8px;padding:10px 10px;border-left-width:5px}
  .fp-n{font-size:2.4rem}
  .fp-t{font-size:12.5px;line-height:1.25}
  .fp-t strong{font-size:1.15rem}
  .fleet-grid{gap:18px}
  .fleet-photo{width:min(74%,300px)}
  .fleet-photo::before{inset:10px -10px -10px 10px}
  .fleet-photo-motos::before{inset:10px 10px -10px -10px}
  .fleet-frame{aspect-ratio:1/1}
  .fleet-grid-motos{margin-top:40px}
  .fleet-heavy{margin-top:44px}
  .fleet-heavy .h2{margin-bottom:16px}
  .hv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hv-pic{aspect-ratio:4/5}
  .hv-info{align-content:start;padding:12px 12px 14px;gap:4px}
  .hv-count{font-size:1rem}
  .hv-count b{font-size:1.8rem}
  .hv h3{font-size:1.6rem}
  .hv-model{font-size:1.05rem}
  .hv-txt{font-size:13px}
  .fleet-models{margin-top:44px}
  .mc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .mc-grid:has(.mc-cut){row-gap:34px;column-gap:12px;margin-top:32px}
  .mc{border-radius:14px;border-top-width:6px}
  .mc-cut .mc-body{padding:2px 12px 14px;gap:6px}
  .mc-cut h3{font-size:1.5rem}
  .mc-kind{font-size:12px;padding:3px 7px;line-height:1.15}
  .mc-open{font-size:13px;margin-top:2px}
  .mc-open::after{width:20px;height:20px;font-size:16px}
  .mc-open::before{border-radius:14px}
}

/* modelos da frota: carrossel infinito em celular e tablet (<1100px). js/main.js adiciona .is-car e posiciona cada card por transform:
   o do meio fica maior e elevado, os vizinhos aparecem só em parte, menores e mais apagados. Sem JS, continua a grade de cards */
.fleet-models .mc-grid.is-car{--mcw:clamp(190px,52vw,300px);position:relative;display:block;margin:0 -20px;padding:64px 0 34px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.fleet-models .mc-grid.is-car.is-drag{cursor:grabbing}
@media (min-width:760px){.fleet-models .mc-grid.is-car{margin-inline:-32px}}
.fleet-models .mc-grid.is-car .mc{position:absolute;left:50%;top:64px;width:var(--mcw);max-width:none;margin-left:calc(var(--mcw)*-.5);transform-origin:50% 100%;will-change:transform,opacity;transition:none}
.fleet-models .mc-grid.is-car img{-webkit-user-drag:none}
.fleet-models .mc-grid.is-car .mc-cut h3{font-size:2rem}
.fleet-models .mc-grid.is-car .mc-kind{font-size:14px;padding:4px 9px}
.fleet-models .mc-grid.is-car .mc-cut .mc-body{padding:4px 16px 18px;gap:8px}
.fleet-models .mc-grid.is-car .mc-open{font-size:14px}
/* bolinhas do carrossel dos modelos: a ativa vira uma pílula vermelha (js/main.js) */
.mc-dots{display:flex;justify-content:center;align-items:center;margin-top:-10px}
.mc-dots[hidden]{display:none}
.mc-dots button{position:relative;width:22px;height:30px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mc-dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:4px;background:#c9c9c4;transition:width .3s ease,margin .3s ease,background-color .3s ease}
.mc-dots button.is-on::before{width:22px;margin-left:-11px;background:var(--red)}
.mc-dots button:focus-visible{outline:3px solid var(--red);outline-offset:-4px;border-radius:6px}
@media (prefers-reduced-motion: reduce){.mc-dots button::before{transition:none}}

/* faixas "4 automático / 1 manual" lado a lado: quebra de palavra de segurança e ajuste para celulares muito estreitos */
.fp-t{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
@media (max-width:350px){
  .fp{gap:6px;padding:8px}
  .fp-n{font-size:2rem}
  .fp-t{font-size:12px}
  .fp-t strong{font-size:1rem;letter-spacing:0}
}
/* tablet: a foto fica mais estreita para a coluna do texto comportar as duas faixas lado a lado */
@media (min-width:760px) and (max-width:1099px){
  .fleet-grid{grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:36px}
  .fleet-grid-motos{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}
  .fleet-pick{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fp{gap:8px;padding:10px;border-left-width:5px}
  .fp-n{font-size:2.4rem}
  .fp-t{font-size:12.5px;line-height:1.25}
  .fp-t strong{font-size:1.15rem}
}

/* "Onde fica" no celular: os 3 botões lado a lado, cada um com o ícone em cima do texto para caber na largura da tela */
@media (max-width:639px){
  .where-txt .cta-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
  .where-txt .cta-row .btn{flex-direction:column;gap:6px;min-height:0;padding:12px 6px;border-radius:22px;font-size:15px;line-height:1.05;text-align:center}
  .where-txt .cta-row .btn .ic{width:24px;height:24px}
}

/* rodapé no celular: Navegação e Redes sociais lado a lado, Contato embaixo em largura total, tudo centralizado */
@media (max-width:759px){
  .foot-cols{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px 12px;text-align:center}
  .foot-col:nth-child(2){grid-column:1/-1;order:3}
  .foot-h::after{margin-left:auto;margin-right:auto}
  .foot-col li{justify-content:center;text-align:center}
  .foot-col a{overflow-wrap:anywhere}
  .foot-col:nth-child(3) li{gap:8px;font-size:14px}
  .foot-hours{padding-left:0}
}
@media (max-width:350px){.foot-col:nth-child(3) li{gap:6px;font-size:12px}}

/* categorias no tablet: o veículo de cada card sobe ~84px acima dele, então as fileiras precisam de mais espaço entre si (senão o 5º card
   invade a fileira de cima). Até 1099px viram 3 colunas (3 cards em cima e 2 centralizados embaixo); de 1100 a 1279px ficam 4 + 1 */
@media (min-width:760px) and (max-width:1279px){
  .plates{row-gap:112px}
}
@media (min-width:760px) and (max-width:1099px){
  .plates{--cols:3;grid-template-columns:repeat(6,minmax(0,1fr))}
  .plate{grid-column:span 2}
  .plate:nth-child(4){grid-column:2/span 2}
  .plate:nth-child(5){grid-column:4/span 2}
  .plate:last-child{width:auto;justify-self:stretch}
  .plate h3{font-size:2.8rem}
}

/* frota no tablet: a coluna de texto ao lado da foto é estreita, então o título dos blocos de carros e motos diminui junto com a tela */
@media (min-width:760px) and (max-width:1099px){
  .fleet-copy .h2{font-size:clamp(2.1rem,5vw,3rem)}
}