/* GTMOB: conteúdo claro, navegação e rodapé pretos.
   Carregado depois dos estilos locais para preservar estrutura e interações. */
/* Informações legais e canais secundários, sem competir com os produtos. */
.footer-service-links{max-width:1240px;margin:1.8rem auto 0;border-top:1px solid rgba(255,255,255,.15);padding-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-legal-links,.footer-external-links{display:flex;gap:.25rem 1.25rem;align-items:center;flex-wrap:wrap}
.footer-service-links a,.footer-service-links button{color:#C2C4C9;font:inherit;font-size:.875rem;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.footer-service-links button{background:none;border:0;padding:0;cursor:pointer}
.footer-service-links a:hover,.footer-service-links button:hover{color:#FFF;text-decoration:underline;text-underline-offset:4px}
.portal-footer{padding:2rem var(--px,24px)}
.legal-page{max-width:1240px;margin:auto;padding:clamp(2.5rem,6vw,5rem) var(--px)}
.legal-page h1{font-size:clamp(2.3rem,5vw,3.6rem);margin:.8rem 0 1rem}
.legal-date{font-size:.875rem;color:var(--ink3)}
.legal-intro{font-size:1.125rem;max-width:55ch;color:var(--ink2)}
.legal-draft{display:inline-block;background:#FFF2E9;color:#793410;padding:.65rem 1rem;border-radius:8px;font-size:.875rem;margin-top:1.5rem}
.legal-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(2rem,5vw,5rem);margin-top:3rem}
.legal-layout aside{align-self:start;position:sticky;top:100px}
.legal-layout aside h2{font-size:1rem;margin-bottom:.8rem}
.legal-layout aside a{display:block;padding:.65rem 0;text-decoration:none;font-size:.9375rem}
.legal-layout article{max-width:75ch}
.legal-layout article section{padding-bottom:2.5rem;scroll-margin-top:100px}
.legal-layout article h2{font-size:1.5rem;margin-bottom:1rem}
.legal-layout article p,.legal-layout article li{font-size:1rem;line-height:1.8;margin-bottom:.85rem}
.legal-layout article ol{padding-left:1.4rem}
.legal-layout article a,.legal-link-button{color:#A8370A;text-underline-offset:3px}
.legal-link-button{font:inherit;background:none;border:0;text-decoration:underline;cursor:pointer;min-height:44px}
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:500;background:#FFF;color:#17191D;border:1px solid #D1D4D9;box-shadow:0 8px 40px #0003;border-radius:14px;padding:1.25rem;display:flex;gap:1.5rem;align-items:center;max-width:1180px;margin:auto}
.cookie-banner[hidden]{display:none}
.cookie-banner h2{font-size:1.125rem;margin:0 0 .4rem}
.cookie-banner p{font-size:.875rem;line-height:1.6;margin:0;max-width:65ch}
.cookie-banner a{color:#A8370A}
.cookie-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.cookie-actions button{font:inherit;font-size:.875rem;font-weight:600;padding:.65rem .9rem;min-height:44px;border:1px solid #73777E;background:#FFF;color:#17191D;border-radius:8px;cursor:pointer;white-space:normal}
.cookie-actions button:hover{background:#F1F2F3}
.cookie-settings{color:#17191D;background:#FFF;border:1px solid #D1D4D9;border-radius:16px;padding:1.75rem;width:min(560px,calc(100% - 2rem));max-height:85dvh;overflow:auto;margin:auto}
.cookie-settings::backdrop{background:#0009}
.cookie-settings h2{font-size:1.5rem;margin-bottom:1rem}
.cookie-settings p{font-size:1rem;margin-bottom:1rem}
.cookie-settings label{display:flex;gap:.75rem;align-items:center;font-weight:600;min-height:44px}
.cookie-settings input[type=checkbox]{width:20px;height:20px;margin:0;flex-shrink:0}
.map-placeholder{min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:1rem;background:#F0F1F3}
.form-note a{color:#A8370A}
@media(max-width:860px){.legal-layout{grid-template-columns:1fr;gap:2rem}.legal-layout aside{position:static;border-bottom:1px solid var(--line);padding-bottom:1.5rem}.cookie-banner{flex-direction:column;align-items:stretch;gap:1rem;max-height:65dvh;overflow:auto}.cookie-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.footer-service-links{flex-direction:column}.map-placeholder{min-height:340px}}
@media(max-width:420px){.cookie-banner{left:.5rem;right:.5rem;bottom:.5rem;padding:1rem}.cookie-actions{grid-template-columns:1fr}.cookie-settings{padding:1.25rem}}
:root{
  color-scheme:light;
  --bg:#FFFFFF;--card:#FFFFFF;--soft:#F5F5F3;
  --ink:#17191D;--ink2:#51545B;--ink3:#656870;
  --o:#FF5A16;--dark:#08090B;--graphite:#26282D;
  --line:rgba(23,25,29,.16);--line2:rgba(23,25,29,.10);
  --line-btn:rgba(23,25,29,.38);
  --sh:0 3px 18px rgba(23,25,29,.045);
  --sh2:0 18px 48px rgba(23,25,29,.09);
  --ok:#14734F;--warn:#865500;--bee:#AD2940;
}
body{background:var(--bg);color:var(--ink)}
/* Navegação compacta, sem reduzir os alvos de toque. */
body nav .wm{flex-shrink:0;display:inline-flex;align-items:center;min-height:44px}
body nav .wm img{height:26px!important;width:auto;max-width:155px}
body nav .np{display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.2rem}
body .eyebrow.dot::before,body .dotmark{display:none}
/* Banner principal: imagem inteira e contraste neutro para a GT09 preta. */
body .home-banner{max-width:1240px;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);padding:clamp(2rem,5vw,4rem) var(--px);gap:clamp(1.5rem,4vw,4rem)}
body .home-banner .hero-h{font-size:clamp(2.5rem,4.6vw,4.4rem);max-width:12ch;margin:0;line-height:1.12}
body .home-banner .hero-sub{font-size:1.0625rem;max-width:37ch}
body .home-banner .hero-cta{gap:.5rem;margin-top:1.8rem}
body .home-banner .hero-cta .btn{padding:.85rem 1.2rem}
body .home-banner .banner-product{display:flex;flex-direction:column;align-self:stretch;justify-content:center;min-height:460px;padding:2rem 1.25rem 1rem;background:#F1F2F3;border:1px solid #E4E5E7;border-radius:18px;overflow:hidden}
body .home-banner .banner-product::before{display:none}
body .home-banner .hs-solo{width:100%;height:auto;max-height:440px;object-fit:contain;animation:none;filter:drop-shadow(0 14px 14px rgba(0,0,0,.10));margin:auto}
body .banner-caption{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:1rem .4rem .3rem;border-top:1px solid #D9DCDF;text-decoration:none;font-size:.875rem;position:relative;z-index:2;min-height:48px}
body .banner-caption strong{font-size:1.15rem;margin-left:.35rem}
body .banner-caption:hover{color:#B53708}
body .hero .rv{opacity:1;transform:none}
body .types,body .teaser,body .hub-in,body .depo-in{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
body .hub-in{grid-template-columns:1fr;max-width:900px}
body .type-card p,body .fcard>p{font-size:1rem}
body .type-card .tgo{color:#B53708}
body .type-card{box-shadow:none}
body .life-stage img{width:100%;height:360px;max-height:none;object-fit:contain}
body .life-in{gap:2rem}
body .depo-in p{margin-top:1rem;max-width:55ch}
/* Contato prioriza canais de atendimento; test ride tem sua própria página. */
body.page-contact .phead{padding-bottom:1.5rem}
body.page-contact .cg{align-items:start;padding-top:1rem}
body.page-contact .ci h2{font-size:1.5rem;margin-bottom:1rem}
body.page-contact .ci-list{margin:1.5rem 0 0;gap:0;border-top:1px solid var(--line)}
body.page-contact .ci-row{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:1.4rem 0;background:transparent}
body.page-contact .ci-lb{font-size:.875rem;letter-spacing:0;text-transform:none}
body.page-contact .ci-vl{font-size:1rem}
body.page-contact .fcard{background:#F7F8F9;box-shadow:none}
body.page-contact .fcard input,body.page-contact .fcard select,body.page-contact .fcard textarea{background:#FFF}
body.page-contact .mapa{min-height:440px;box-shadow:none}
body.page-contact .mapa iframe{min-height:440px}
body.page-contact .mchip{line-height:1.8}
body.page-contact .qs[hidden]{display:none}
body .test-layout{max-width:1240px;margin:0 auto;padding:clamp(2rem,5vw,4rem) var(--px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
body .test-intro h1{font-size:clamp(2.3rem,4vw,3.6rem);max-width:13ch;margin:1rem 0 1.5rem}
body .test-intro>p{font-size:1.0625rem;max-width:40ch;color:var(--ink2)}
body .test-location{margin-top:2rem;border-top:1px solid var(--line);padding-top:1.8rem}
body .test-location h2{font-size:1.2rem}
body .test-location p{margin:1rem 0;color:var(--ink2)}
body .test-location a{display:inline-flex;align-items:center;min-height:44px;color:#B53708;text-underline-offset:4px}
body .form-note{font-size:.875rem;color:var(--ink2);margin-top:1rem}
body .fg3 label{font-size:.875rem}
body .fcard select:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:860px){
  body nav .np{display:none}
  body .home-banner{grid-template-columns:1fr;text-align:left;gap:1.6rem}
  body .home-banner .hero-h{max-width:16ch;font-size:clamp(2.4rem,7vw,3.8rem)}
  body .home-banner .hero-sub{margin-left:0;max-width:42ch}
  body .home-banner .hero-cta{justify-content:flex-start}
  body .home-banner .banner-product{order:0;min-height:0;padding:1rem;gap:1rem}
  body .home-banner .hs-solo{max-height:350px!important;width:100%;height:300px}
  body .test-layout{grid-template-columns:1fr;gap:2rem}
  body .test-intro h1{max-width:20ch}
  body .test-location{margin-top:1.5rem}
  body .fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body .fg .fb{grid-column:1/-1}
}
@media(max-width:520px){
  body nav .ni{padding-top:.5rem;padding-bottom:.5rem}
  body .home-banner{padding-top:2rem;padding-bottom:2rem}
  body .home-banner .hs-solo{height:245px;max-height:245px!important}
  body .home-banner .banner-caption{font-size:.8125rem;padding-left:0;padding-right:0}
  body .home-banner .hero-cta .btn{font-size:.875rem}
  body .life-stage img{height:260px}
  body .life-in{grid-template-columns:1fr}
  body.page-contact .mapa,body.page-contact .mapa iframe{min-height:340px}
  body .test-layout .fcard{padding:1.25rem}
}
body nav,body footer{
  --bg:#08090B;--card:#181A1F;--soft:#26282D;
  --ink:#FFFFFF;--ink2:#D5D6DA;--ink3:#B2B4BA;
  --line:rgba(255,255,255,.18);--line2:rgba(255,255,255,.12);
  --line-btn:rgba(255,255,255,.45);
  color:var(--ink);background:#08090B;
}
body nav{z-index:300;border-bottom:1px solid rgba(255,255,255,.16)}
body nav::before,body nav.sc::before{background:#08090B;backdrop-filter:none}
body nav .hb{position:relative;z-index:280}
body nav .nlinks{color:#FFF}
body footer .fbt{color:#B2B4BA}
body footer .fb p,body footer .fcol h4,body footer .fcol a{color:#C2C4C9}
body footer a:hover{color:var(--o)}
body .b-o,body .fsb{
  background:var(--o);color:#17191D;border-color:var(--o);
}
body .b-o:hover,body .fsb:hover{background:#E94B0B;color:#111;border-color:#E94B0B}
body .b-g:hover{background:rgba(23,25,29,.04)}
body nav .b-g:hover{background:rgba(255,255,255,.08)}
body .beauty,body .life,body .cta{background:var(--soft);color:var(--ink)}
body .beauty h2,body .cta h2{color:var(--ink)}
body .beauty p,body .cta p,body .beauty .eyebrow{color:var(--ink2)}
body .cta .eyebrow{color:var(--ink2)!important}
body .bglow,body .life-glow,body .login-glow{opacity:.25}
/* O halo laranja atras do produto saiu a pedido do Igor (19/09/2026).
   O fundo do palco fica limpo; o que separa o produto do fundo passa a
   ser so a sombra projetada, que ja existia. */
body .hstage::before,body .pstage::before{display:none}
body .hstage .hs-solo,body .pstage img,body .life-stage img{
  filter:drop-shadow(0 18px 22px rgba(23,25,29,.14));
}
body .hs-shadow,body .pstage-shadow{opacity:.3}
body .spin-arrow,body .spin-badge{
  background:rgba(255,255,255,.96);color:var(--ink);border-color:var(--line);
}
body .spin-arrow:hover{background:var(--o);color:#17191D}
body .csw.on{border-color:var(--ink);box-shadow:0 0 0 2px #FFF,0 0 0 4px var(--o)}
body .gal img.on{border-color:var(--o)}
body .buybar{background:rgba(255,255,255,.98);color:var(--ink);border-color:var(--line)}
body .mapa{filter:none}
/* Galeria local com acesso ao Instagram, sem scripts sociais. */
body .instagram-section{max-width:1240px;margin:auto;padding:clamp(3rem,6vw,5rem) var(--px)}
body .instagram-head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:2rem}
body .instagram-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.15;letter-spacing:-.035em;margin-bottom:.7rem}
body .instagram-head p{color:#555B63;line-height:1.6}
body .instagram-head .btn{flex-shrink:0}
body .instagram-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
body .instagram-card{display:block;min-width:0;color:#17191D;text-decoration:none}
body .instagram-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:#F2F3F4;border-radius:12px}
body .instagram-card>span{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;font-size:.95rem;font-weight:600}
body .instagram-card:hover>span{color:#B53708}
body .terms-confirm{display:flex;gap:.75rem;align-items:flex-start;min-height:44px;margin:1rem 0 .5rem;font-size:.9rem;line-height:1.6;cursor:pointer}
body .terms-confirm input{flex:0 0 20px;width:20px;height:20px;margin:.2rem 0 0}
body .terms-confirm a{color:#B53708;text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){
  body .instagram-head{align-items:flex-start;flex-direction:column}
  body .instagram-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
}
@media(max-width:420px){
  body .instagram-grid{grid-template-columns:minmax(0,1fr)}
  body .instagram-card img{aspect-ratio:4/3}
}
/* Layout fluido e controles confortáveis em telas pequenas. */
body .pcard-img{aspect-ratio:4/3;padding:3.2rem 1.25rem 1.25rem}
body .pcard-img>img{width:100%;height:100%;object-fit:contain}
body .pstage,body .hstage,body .life-stage{min-width:0}
body .pcard,body .frow>*,body .ci-row>div,body .minfo{min-width:0}
body p,body .ci-vl,body .frow .v{overflow-wrap:break-word}
body button,body .btn,body .filter-opt,body summary{touch-action:manipulation}
body .btn,body .fsb,body .login-tab,body .tab,body summary{min-height:44px}
body input:not([type=checkbox]):not([type=radio]),body select,body textarea{font-size:16px;max-width:100%}
body .autonomia-nota{max-width:85ch}
body .mapa iframe{display:block;min-height:360px}
body.menu-open{overflow:hidden}
@media(max-width:860px){
  body nav .nlinks{overflow-y:auto;overscroll-behavior:contain;padding:90px 24px 32px;min-height:100dvh}
  body .frow{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1rem}
  body .fg{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .fg .fb{grid-column:1/-1}
  body .pstage img{max-height:38vh;max-height:38svh;max-width:100%;object-fit:contain}
  body .buybar{padding-bottom:calc(.8rem + env(safe-area-inset-bottom))}
  body:has(.buybar){padding-bottom:90px}
  body .fbt{gap:1.5rem}
}
@media(max-width:520px){
  :root{--px:20px;--t-hero:clamp(2.3rem,10vw,3rem)}
  body .pgrid,body .tgrid,body .fr,body .b2b-grid3,body .subgrid{grid-template-columns:minmax(0,1fr)}
  body .phead{padding-top:2rem}
  body .phero{gap:1.5rem}
  body .phero h1{font-size:2.5rem}
  body .phero-sub{font-size:1rem}
  body .hstage,body .pstage{min-height:240px}
  body .fcard,body .login-card,body .sec{padding:1.25rem}
  body .row{flex-wrap:wrap;gap:1rem}
  body .row .info{flex-basis:100%;min-width:0}
  body .mapa{min-height:340px}
  body .filters{padding:1.1rem}
  body .filter-opt{padding:.75rem 0}
  body .phero-ctas,body .hero-ctas{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  body .float,body .float2{animation:none}
  body .rv,body .pcard,body .pcard img{transition:none}
}
body .cases-track img,body .cases-track img:hover{filter:brightness(0);opacity:.8}
/* Logos brancos em suporte escuro, sem alterar os arquivos de imagem. */
body .phero-tag{display:inline-flex;background:#17191D;border-radius:10px;padding:.65rem 1rem}
body .ptag{background:#17191D;padding:.4rem .65rem;border-radius:8px;color:#FFF}
body .ptag img{filter:none}
body .login-tab.active{background:var(--o);color:#17191D}
body .link,body .linkbtn,body .tab.active{color:#B53708}
input::placeholder,textarea::placeholder{color:#72757C;opacity:1}
input,select,textarea{accent-color:var(--o)}
:focus-visible{outline:2px solid #B53708;outline-offset:4px}
nav :focus-visible,footer :focus-visible{outline-color:var(--o)}
@media(max-width:860px){
  body nav .nlinks{background:#08090B}
}

/* ============================================================
   Camada tipográfica e de acabamento — 15/09/2026
   Carrega depois do <style> inline de cada página, então corrige
   os tokens em um lugar só em vez de nas 15 páginas.
   ============================================================ */

/* 1. Pilha de fallback. Antes era 'Inter',sans-serif: se a fonte do
   Google falhasse, o texto caía num serifado genérico. */
:root{
  --f:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fd:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
/* Inter variável com eixo óptico: nos títulos grandes o desenho troca
   sozinho para o corte de display (hastes mais finas, espacejamento
   mais fechado), que é o ajuste que antes se tentava imitar na mão. */
html{font-optical-sizing:auto}

/* 2. Títulos em dois níveis, porque peso e tracking não podem ser os
   mesmos em todo tamanho. Antes -.042/-.045em amassava as palavras e
   1.02 de entrelinha não deixava espaço para os acentos do português
   (é, ã, ç colidiam com a linha de cima).

   NÍVEL BASE — todo h1/h2/h3, inclusive os compactos (título de card,
   h1 de 29px da área do cliente, h2 de 18px de painel). Peso 700 e
   tracking leve: em tamanho pequeno, 800 fecha os contornos e o
   tracking de display gruda as letras. */
body h1,body .h1,body h2,body .h2,
body .login-intro h1,body .login-card h1{
  font-weight:700;letter-spacing:-.014em;line-height:1.18;text-wrap:balance
}
body h3,body .detail-txt h3,body .pcard-body h3,body .mname{
  font-weight:700;letter-spacing:-.012em;line-height:1.26
}

/* NÍVEL DISPLAY — só as manchetes que realmente aparecem grandes
   (40px+). Aqui o peso 800 e o tracking fechado têm o que segurar. */
body .hero-h,body .phead h1,body .phero h1,body .hello,
body .test-intro h1,body .legal-page h1{
  font-weight:800;letter-spacing:-.026em;line-height:1.1
}
/* Os h2 de seção são fluidos: 48px no desktop, 28-32px no celular.
   Tracking e entrelinha servem aos dois tamanhos, mas o peso não —
   em 28px o 800 fecha os contornos da Inter. Por isso só o peso muda
   no ponto de quebra; no celular eles caem para o 700 do nível base.
   O mesmo vale para o h1 da área do cliente (29px → 42px). */
body .beauty h2,body .cases-head h2,body .cta h2,body .depo h2,
body .ficha-head h2,body .hub h2,body .life h2,body .steps-head h2,
body .teaser-head h2,body .types-head h2,body .instagram-head h2{
  letter-spacing:-.022em;line-height:1.14
}
@media(min-width:861px){
  body .beauty h2,body .cases-head h2,body .cta h2,body .depo h2,
  body .ficha-head h2,body .hub h2,body .life h2,body .steps-head h2,
  body .teaser-head h2,body .types-head h2,body .instagram-head h2{
    font-weight:800
  }
  body .login-intro h1{font-weight:800;letter-spacing:-.026em;line-height:1.1}
}

/* 3. Corpo de texto: Inter já vem fechada, o -.011em extra deixava
   o texto corrido apertado nas telas pequenas. */
body{letter-spacing:normal}
body p,body li{line-height:1.68;text-wrap:pretty}
body .lead,body .phero-sub,body .legal-intro{max-width:62ch}

/* 4. Números alinhados. Preço, ficha e estatística usam figuras
   tabulares para as colunas baterem e o R$ não dançar entre cards. */
body .pprice,body .price,body .pspecs,body .specs,body .spec b,body .sn b,
body .mstats .s b,body .fs-n,body .hst-n,body .num-n,body .specnums,
body .specnums-in,body .legal-date,body .parcela,body .pnum{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1
}

/* 5. Alvos de toque no rodapé. Os links tinham 18-23px de altura; o
   mínimo para o dedo é 24px (44px no celular, mais abaixo).
   As colunas empilham, então usam flex de bloco — com inline-flex eles
   caem na mesma linha e se sobrepõem. A fileira de links legais e de
   redes é horizontal e usa inline-flex mesmo. */
body footer .fcol a{
  display:flex;align-items:center;min-height:28px;padding-block:.15rem
}
body .footer-legal-links a,body .footer-legal-links button,
body .footer-external-links a{
  display:inline-flex;align-items:center;min-height:28px;padding-block:.15rem
}

/* ============================================================
   Tag de estado do veículo (0 km / seminova)
   Pastilha clara com ponto de cor: legível sobre qualquer foto,
   sem virar adesivo colorido em cima do produto.
   ============================================================ */
body .pstate,body .badge-state{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f);font-size:.7rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;line-height:1;
  color:var(--ink);border-radius:100px;white-space:nowrap
}
body .pstate::before,body .badge-state::before{
  content:"";width:.44rem;height:.44rem;border-radius:50%;flex:none
}
body .pstate.is-novo::before,body .badge-state.is-novo::before{
  background:var(--ok);box-shadow:0 0 0 3px rgba(20,115,79,.16)
}
body .pstate.is-seminova::before,body .badge-state.is-seminova::before{
  background:#865500;box-shadow:0 0 0 3px rgba(134,85,0,.16)
}
/* Sobre a foto do card */
body .pstate{
  position:absolute;top:.85rem;right:.85rem;z-index:3;
  padding:.44rem .72rem;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border:1px solid rgba(23,25,29,.10);
  box-shadow:0 1px 2px rgba(23,25,29,.10),0 8px 20px rgba(23,25,29,.07)
}
/* Na fileira de badges da página do produto */
body .badge-state{
  background:var(--card);border:1px solid rgba(23,25,29,.24);
  padding:.4rem .9rem .4rem .75rem
}
/* ============================================================
   Camada mobile — 16/09/2026
   O <meta viewport> agora leva viewport-fit=cover, então os
   env(safe-area-inset-*) que já existiam no CSS finalmente valem
   alguma coisa no iPhone (antes retornavam sempre 0).
   ============================================================ */
@media(max-width:860px){

  /* 1. Alvos de toque de 44px (mínimo do Apple HIG e do WCAG 2.2 AA).
     Só em elementos autônomos — link dentro de parágrafo continua
     seguindo a entrelinha do texto, como deve ser. */
  body .crumb a,
  body .ci-vl a,
  body .b2c .cardlink,
  body .b2c .mkt a,
  body .footer-legal-links a,
  body .footer-legal-links button,
  body .footer-external-links a,
  body .fb .wm,
  body .parc .parc-mais{
    display:inline-flex;align-items:center;min-height:44px
  }
  body footer .fcol a{display:flex;align-items:center;min-height:44px}
  /* Links do menu aberto: tinham 33px de altura de toque. */
  body nav .nlinks a{
    display:flex;align-items:center;justify-content:center;
    min-height:48px;width:100%
  }
  body .parc .parc-mais{justify-content:center;width:100%}

  /* 2. Caixa de aceite: o quadrado de 20px era o alvo inteiro.
     Agora a linha toda tem 44px de altura e o quadrado cresce
     para 22px, sem mudar a aparência do formulário. */
  body .terms-confirm{
    display:flex;align-items:flex-start;gap:.75rem;
    min-height:44px;padding-block:.35rem
  }
  body .terms-confirm input[type=checkbox]{
    width:22px;height:22px;flex:none;margin-top:.1rem
  }

  /* 3. Botão flutuante do WhatsApp acima do indicador de home do iPhone. */
  body .fab-wa{bottom:calc(1rem + env(safe-area-inset-bottom))}

  /* 4. Nas páginas de produto o rodapé fixo de preço já reserva
     espaço no body; some a faixa do indicador de home para o
     último bloco não ficar por baixo da barra. */
  body:has(.buybar){padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ============================================================
   Assinatura da marca no rodapé — 16/09/2026
   ============================================================ */
body footer .fb p.fslogan,body footer .fslogan{
  font-size:clamp(.95rem,1.7vw,1.1rem);font-weight:700;
  letter-spacing:-.01em;line-height:1.35;
  color:#F7F8FA;margin:0
}
body footer .fslogan span{font-weight:700}
body footer .fslogan span{color:var(--o)}
body footer .fb p:not(.fslogan){margin-top:0}

/* ============================================================
   Banner de cookies — 16/09/2026
   Os três botões eram idênticos: não havia ação primária e o
   clique não dava retorno nenhum. Agora "Aceitar todos" e
   "Salvar escolhas" são laranja sólido, os demais respondem ao
   toque e ao teclado, e a escolha marcada aparece em laranja.
   ============================================================ */
body .cookie-actions button{
  transition:background-color .15s,border-color .15s,color .15s,transform .06s
}
body .cookie-actions button:hover{
  border-color:var(--o);color:#A8370A;background:#FFF6F2
}
body .cookie-actions button:active{transform:translateY(1px)}
body .cookie-actions button:focus-visible{
  outline:2px solid var(--o);outline-offset:2px
}
/* Ação primária */
body .cookie-actions button[data-cookie="accept"],
body .cookie-actions button[data-cookie="save"]{
  background:var(--o);border-color:var(--o);color:#FFF
}
body .cookie-actions button[data-cookie="accept"]:hover,
body .cookie-actions button[data-cookie="save"]:hover{
  background:#E24E0F;border-color:#E24E0F;color:#FFF
}
/* Escolha marcada em Personalizar */
body .cookie-settings label{
  display:flex;align-items:center;gap:.6rem;
  min-height:44px;padding:.35rem .6rem;margin-top:.4rem;
  border:1px solid var(--line);border-radius:10px;
  font-weight:600;cursor:pointer;
  transition:border-color .15s,background-color .15s,color .15s
}
body .cookie-settings label:hover{border-color:var(--o)}
body .cookie-settings label:has(input:checked){
  border-color:var(--o);background:#FFF6F2;color:#A8370A
}
body .cookie-settings label input[type=checkbox]{
  width:20px;height:20px;flex:none;accent-color:var(--o)
}
body .cookie-settings label:has(input:focus-visible){
  outline:2px solid var(--o);outline-offset:2px
}

/* Cabeçalhos de coluna do rodapé: o text-transform:uppercase fazia a
   tela mostrar "GTMOB" mesmo com "Gtmob" escrito no HTML. Como as
   marcas agora são Caixa Alta e Baixa, o transform sai — e o
   espacejamento cai junto, porque .14em foi calibrado para versal. */
body footer .fcol h4{
  text-transform:none;letter-spacing:.02em;font-size:.82rem;font-weight:700
}

/* Cards de tipo na home sem o ícone — o espaçamento tinha sido
   calibrado para um pictograma de 42px no topo; sem ele, título e
   descrição precisam de hierarquia própria em vez de gap uniforme. */
body .types-grid .type-card{gap:.5rem;padding:var(--s8) var(--s8) calc(var(--s8) - .3rem)}
body .type-card h3{font-size:1.32rem;letter-spacing:-.018em;line-height:1.2}
body .type-card p{margin-top:.1rem;line-height:1.6;max-width:34ch}
body .type-card .tgo{margin-top:.75rem}

/* ============================================================
   Avaliações dos clientes — 16/09/2026
   ============================================================ */
body .depo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);
  margin:var(--s8) 0 var(--s8);text-align:left
}
body .depo-card{
  display:flex;flex-direction:column;gap:.7rem;margin:0;
  background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:var(--s6);box-shadow:var(--sh)
}
body .depo-nota{color:var(--o);font-size:.95rem;letter-spacing:.12em;line-height:1}
body .depo-card blockquote{
  margin:0;font-size:.95rem;line-height:1.6;color:var(--ink)
}
body .depo-card blockquote::before{content:"“"}
body .depo-card blockquote::after{content:"”"}
body .depo-card figcaption{
  display:flex;flex-direction:column;gap:.1rem;margin-top:auto;padding-top:.5rem
}
body .depo-card figcaption strong{font-size:.9rem;font-weight:600}
body .depo-card figcaption span{font-size:.8rem;color:var(--ink3)}
@media(max-width:860px){body .depo-grid{grid-template-columns:1fr}}

/* Topo das páginas sem a etiqueta ("A linha do hub", "Gtmob para
   empresas", "Contato", "Área do cliente"). O h1 tinha margin-top
   reservando espaço para ela; sem a etiqueta o título sobe. */
body .cat-head h1,body .b2b-head h1,body .contato-head h1,
body .login-intro h1,body .phead h1{margin-top:0}

/* ============================================================
   Ajustes de leitura — 16/09/2026
   ============================================================ */

/* Palco do destaque da home. O fundo #F1F2F3 sumia com veículo de
   carenagem clara — a Q5 é branca e literalmente desaparecia na borda.
   Um cinza um tom abaixo, com leve vinheta, separa o produto do fundo
   sem tirar a página do tema claro. */
body .home-banner .banner-product{
  background:transparent;border:0;padding-inline:0
}
body .home-banner .banner-caption{
  border-top:1px solid var(--line2);color:var(--ink);
  padding-top:1rem;margin-top:.4rem
}
body .home-banner .banner-caption strong,
body .home-banner .banner-caption span:last-child{color:#C24405}
body .home-banner .banner-product .hs-solo{
  filter:drop-shadow(0 18px 26px rgba(23,25,29,.16))
}

/* Cabeçalho de seção: o space-between jogava o texto de apoio para a
   borda oposta da tela e ele ficava órfão do título. Agora o par fica
   junto, e o texto acompanha a largura do título. */
body .teaser-head,body .types-head,body .hub-head,body .cases-head{
  justify-content:flex-start;align-items:flex-end;
  column-gap:var(--s12);row-gap:.4rem
}
body .teaser-head > :first-child,body .types-head > :first-child{flex:0 1 auto}
body .teaser-head p,body .types-head p{max-width:42ch;margin-bottom:.15rem}
@media(max-width:860px){
  body .teaser-head,body .types-head{flex-direction:column;align-items:flex-start}
}


/* Faixa "Ninguém compra elétrico no escuro": era um título solto numa
   área vazia. Agora carrega as três dúvidas reais, em colunas. */
body .beauty-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s6);margin-top:var(--s12);text-align:left
}
body .beauty-cards > div{
  display:flex;flex-direction:column;gap:.45rem;
  padding-top:1rem;border-top:2px solid var(--o)
}
body .beauty-cards b{
  font-size:1.02rem;font-weight:700;letter-spacing:-.012em;color:var(--ink)
}
body .beauty-cards span{
  font-size:.9rem;line-height:1.62;color:var(--ink2)
}
@media(max-width:860px){
  body .beauty-cards{grid-template-columns:1fr;gap:var(--s8);margin-top:var(--s8)}
}


/* "Solicitar Best-ride" era texto puro ao lado do botão cheio e não
   se lia como ação. Vira link com sublinhado próprio, que aparece no
   toque e no teclado sem competir com o botão principal. */
body .hero-cta .btn.b-t,body .hero-cta .btn.b-g{
  background:transparent;border:0;padding-inline:.2rem;
  box-shadow:inset 0 -2px 0 var(--line);border-radius:0
}
body .hero-cta .btn.b-t:hover,body .hero-cta .btn.b-t:focus-visible,
body .hero-cta .btn.b-g:hover,body .hero-cta .btn.b-g:focus-visible{
  box-shadow:inset 0 -2px 0 var(--o);color:#C24405;background:transparent
}

/* ============================================================
   Instagram — 16/09/2026
   Embed oficial do Instagram, que funciona sem chave de API. Cada
   quadro é a publicação de verdade: se um post for apagado lá, o
   quadro fica vazio — trocar o código na home resolve.
   ============================================================ */
body .ig{max-width:var(--max);margin:0 auto;padding:var(--s20) var(--px)}
body .ig-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s8)
}
body .ig-head p{color:var(--ink2);margin-top:.3rem;max-width:46ch}
body .ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
body .ig-card{
  position:relative;aspect-ratio:1/1.28;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:var(--soft)
}
body .ig-card iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block
}
@media(max-width:860px){
  body .ig-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  body .ig-head{flex-direction:column;align-items:flex-start}
}

/* "elétrico" na manchete: a palavra em si no laranja da marca. O
   filete embaixo sai, senão vira reforço em cima de reforço. */
body .hero-h .uline{color:var(--o)}
body .hero-h .uline::after,body .hero-h .uline::before{display:none}

/* ============================================================
   Rodapé no celular — 16/09/2026
   Eram 7 colunas de marca empilhadas em 2 faixas de 150px, com
   alvo de toque de 44px em cada link: 1453px de rodapé numa tela
   de 812. Aqui as colunas de MODELO viram uma lista corrida de
   pastilhas, que cabe em poucas linhas e mantém o alvo do dedo.
   ============================================================ */
@media(max-width:860px){
  body footer .fg{
    display:flex;flex-direction:column;gap:var(--s6)
  }
  /* GTMOB, Aima, Sudu, Vammo e Hynak: título e links na mesma linha */
  body footer .fcol{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:.4rem .5rem;
    padding-bottom:.9rem;border-bottom:1px solid var(--line2)
  }
  body footer .fcol:last-child{border-bottom:0;padding-bottom:0}
  body footer .fcol h4{
    flex:0 0 100%;margin:0 0 .15rem;font-size:.72rem;
    letter-spacing:.06em;color:var(--ink3)
  }
  body footer .fcol a{
    min-height:38px;padding:.35rem .8rem;
    border:1px solid var(--line);border-radius:100px;
    font-size:.85rem;line-height:1
  }
  body footer .fbt{gap:1rem;text-align:left;align-items:flex-start}
  body footer .fbt img{height:56px}
}
body .fbt-legal{line-height:1.55;font-size:.8rem}
body .fbt-legal small{color:var(--ink3);font-size:.76rem}

/* Agrupamento das marcas no rodapé.
   No desktop o bloco é transparente ao layout (display:contents), então
   a grade de colunas continua exatamente como era. No celular ele vira
   um grupo só, com um título "Modelos" no lugar de cinco. */
body footer .fbrands{display:contents}
body footer .fbrands-h{display:none}
@media(max-width:860px){
  body footer .fbrands{
    display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;
    padding-bottom:.9rem;border-bottom:1px solid var(--line2)
  }
  body footer .fbrands-h{
    display:block;flex:0 0 100%;margin:0 0 .15rem;
    font-size:.72rem;letter-spacing:.06em;text-transform:none;
    font-weight:700;color:var(--ink3)
  }
  body footer .fbrands .fcol{
    display:contents          /* os links das 5 marcas correm juntos */
  }
  body footer .fbrands .fcol h4{display:none}
}

/* Botão laranja com texto branco. A regra do tema escuro pintava o
   texto de #07090D, herdado de quando o botão era branco sobre preto;
   no laranja isso lia como grafite sobre laranja. */
body .btn.b-o,body a.btn.b-o,body button.btn.b-o{
  background:var(--o);color:#FFFFFF;border-color:var(--o)
}
body .btn.b-o:hover,body a.btn.b-o:hover{
  background:#E24E0F;border-color:#E24E0F;color:#FFFFFF
}

/* Rodapé enxuto da área do cliente */
body .portal-footer .fbt-legal{
  margin:0 0 .9rem;color:var(--ink3);font-size:.78rem;line-height:1.5
}