[hidden]{display:none!important;}
/* tema sempre claro (o site não tem versão escura): ver o comentário TEMA SEMPRE CLARO no <head> das páginas */
:root{color-scheme:only light;}
:root{
  --branco:#ffffff;
  --bg-alt:#f6f7f8;
  --azul:#031e5f;
  --azul-2:#0a2c74;
  --azul-botao:#031e5f;    /* fundo de botão azul com texto branco (no escuro continua escuro, para o branco ler bem) */
  --azul-botao-2:#0a2c74;
  --verde:#00c3b3;
  --verde-2:#00a893;
  --verde-texto:#007f71;  /* verde para TEXTO pequeno (eyebrow, links, chips): contraste ≥4,5:1 no branco e no cinza */
  --sobre-verde:#04201c;  /* texto/ícone em cima de fundo verde (botões, chat) */
  --tinta:#0e1726;
  --texto:#4a5262;
  --borda:#e6e9ee;
  --radius-sm:10px;
  --radius-md:20px;
  --radius-lg:32px;
  --radius-pill:999px;
  --shadow-1:0 3px 12px rgba(3,30,95,.10);
  --shadow-2:0 24px 50px rgba(3,30,95,.16);
  --maxw:1180px;
  --fonte:"Campton","Segoe UI",system-ui,sans-serif;  /* fonte da marca da página (a Corretora troca por Gotham Rounded) */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --branco:#0e1726;
    --bg-alt:#141d2e;
    --azul:#9fb3e6;
    --azul-2:#c3d0f2;
    --azul-botao:#1f3c8f;
    --azul-botao-2:#2a4aa3;
    --verde:#20d6c4;
    --verde-2:#4fe4d5;
    --verde-texto:#4fe4d5;
    --tinta:#eef1f6;
    --texto:#b7c0d1;
    --borda:#263049;
    --shadow-1:0 3px 16px rgba(0,0,0,.35);
    --shadow-2:0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --branco:#0e1726;
  --bg-alt:#141d2e;
  --azul:#9fb3e6;
  --azul-2:#c3d0f2;
  --azul-botao:#1f3c8f;
  --azul-botao-2:#2a4aa3;
  --verde:#20d6c4;
  --verde-2:#4fe4d5;
  --verde-texto:#4fe4d5;
  --tinta:#eef1f6;
  --texto:#b7c0d1;
  --borda:#263049;
  --shadow-1:0 3px 16px rgba(0,0,0,.35);
  --shadow-2:0 24px 60px rgba(0,0,0,.5);
}

@font-face{font-family:"Campton";src:url("../fonts/campton-1.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Campton";src:url("../fonts/campton-2.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Campton";src:url("../fonts/campton-3.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Campton";src:url("../fonts/campton-4.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap;}

*{box-sizing:border-box;}
/* carros que "sangram" para fora da borda não criam rolagem lateral no celular */
html,body{overflow-x:clip;}
body{
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--fonte);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
section{padding-block:clamp(56px,8vw,96px);}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px;}
h1,h2,h3{font-family:var(--fonte);font-weight:700;color:var(--tinta);margin:0;text-wrap:balance;}
p{margin:0;color:var(--texto);}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fonte);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde-texto);margin-bottom:14px;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--verde);border-radius:2px;}
.eyebrow--on-verde{color:var(--branco);text-shadow:0 2px 10px rgba(3,30,95,.5);}
.eyebrow--on-verde::before{background:var(--branco);}
.display{font-family:var(--fonte);font-weight:800;letter-spacing:-.01em;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--radius-pill);
  font-family:var(--fonte);font-weight:600;font-size:15px;
  border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--azul);outline-offset:2px;}
.btn-primary{background:var(--verde);color:var(--sobre-verde);box-shadow:var(--shadow-1);}
.btn-primary:hover{background:var(--verde-2);transform:translateY(-1px);}
.btn-outline{border-color:var(--azul);color:var(--azul);background:transparent;}
.btn-outline:hover{background:var(--azul);color:var(--branco);}
.btn-on-dark{background:var(--branco);color:var(--azul);}
.btn-on-dark:hover{background:var(--verde);color:var(--sobre-verde);}
.btn-sm{padding:10px 20px;font-size:13.5px;}

/* header */
header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:color-mix(in srgb, var(--branco) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borda);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px;}
.nav__logo img{height:34px;width:auto;}
.nav__links{display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:600;}
.nav__links a{color:var(--tinta);opacity:.82;transition:opacity .15s, color .15s;}
.nav__links a:hover{opacity:1;color:var(--verde-texto);}
/* barrinha verde embaixo do link: aparece no hover e fica fixa no link da seção atual */
.nav__links a{position:relative;padding-block:6px;}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:var(--verde);transform:scaleX(0);transition:transform .25s ease;}
.nav__links a:hover::after,
.nav__links a.is-active::after{transform:scaleX(1);}
.nav__links a.is-active{opacity:1;color:var(--verde-texto);}
@media (prefers-reduced-motion: reduce){.nav__links a::after{transition:none;}}
.nav__cta{display:flex;align-items:center;gap:14px;}
.nav__tel{display:flex;flex-direction:column;line-height:1.25;font-size:13px;color:var(--texto);}
.nav__tel strong{font-size:14px;color:var(--tinta);}
.nav__toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;}
.nav__toggle svg{width:24px;height:24px;stroke:var(--tinta);}
@media (max-width:860px){
  .nav__links,.nav__tel{display:none;}
  .nav__toggle{display:inline-flex;}
}
@media (max-width:640px){
  /* celular: os botões do topo vão para dentro do menu ☰ */
  .nav__cta .btn{display:none;}
}

/* hero */
.hero{padding-block:clamp(40px,7vw,72px) clamp(56px,8vw,88px);position:relative;overflow:clip;}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
@media (max-width:940px){.hero__grid{grid-template-columns:1fr;gap:40px;}}
.hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.06;}
.hero__sub{font-family:var(--fonte);font-weight:600;color:var(--azul);font-size:clamp(17px,2vw,21px);margin-top:14px;}
.hero__text{margin-top:20px;max-width:52ch;font-size:16px;}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}


/* a coluna da arte ocupa a altura toda da linha, para o selo (bottom:0) alinhar com a base dos botões */
.hero__art{position:relative;padding:18px 10px 34px;align-self:stretch;display:flex;flex-direction:column;justify-content:center;}
.hero__badge{
  /* ocupa a largura toda do carro */
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);padding:18px 28px;display:flex;gap:22px;align-items:center;
  transform-origin:center bottom;
  transition:transform .25s ease, box-shadow .25s ease;
}
.hero__badge:hover,
.hero__badge:focus-visible{transform:scale(1.04);box-shadow:0 30px 60px rgba(3,30,95,.22);}
@media (prefers-reduced-motion: reduce){.hero__badge{transition:none;}}
@media (max-width:520px){.hero__badge{padding:14px 18px;gap:14px;}.hero__badge-num{font-size:36px!important;}}
/* o número ("+750") nunca encolhe nem quebra: largura reservada para "+000", para não pular durante a contagem */
.hero__badge-num{font-family:var(--fonte);font-weight:800;font-size:48px;color:var(--verde-2);line-height:1;font-variant-numeric:tabular-nums;
  flex:none;white-space:nowrap;min-width:4.2ch;text-align:left;}
/* carro do topo mais alto, para as rodas não ficarem atrás do selo */
.hero__art .bleed__car{bottom:14%;}
/* a foto do BYD tem ~11,5% de área transparente embaixo; desce ele para as rodas ficarem na linha dos outros */
.hero__art .hero__car--byd{bottom:2.5%;}
/* carrossel de veículos do topo: espera à esquerda (desfocado) → centro (nítido) → sai à direita (desfocado) */
.hero__art .hero__car{
  opacity:0;transform:translateX(-85%);
  filter:blur(14px) drop-shadow(0 22px 22px rgba(3,30,95,.35));
  transition:none;
}
.hero__art .hero__car.is-active{
  opacity:1;transform:translateX(-50%);
  filter:blur(0) drop-shadow(0 22px 22px rgba(3,30,95,.35));
  transition:transform .7s cubic-bezier(.22,.8,.3,1), opacity .45s ease, filter .7s ease;
}
.hero__art .hero__car.is-saindo{
  opacity:0;transform:translateX(-15%);
  filter:blur(14px) drop-shadow(0 22px 22px rgba(3,30,95,.35));
  transition:transform .65s cubic-bezier(.5,0,.75,0), opacity .5s ease .1s, filter .65s ease;
}
.hero__badge-text{font-size:14px;color:var(--texto);line-height:1.35;}
.hero__badge-text strong{display:block;color:var(--tinta);font-size:16px;margin-bottom:3px;}
/* tablet/celular (topo em uma coluna): o selo deixa de ficar por cima do carro e passa para baixo dele,
   encostando só um pouco no bloco verde; o bloco fica mais alto para o carro aparecer inteiro */
@media (max-width:940px){
  .hero__art{padding-bottom:0;width:100%;max-width:520px;margin-inline:auto;}
  .hero__art .bleed{aspect-ratio:5/4.1;}
  .hero__art .bleed__car{bottom:9%;}
  .hero__art .hero__car--byd{bottom:1%;}
  /* Fiorino (img-09): a foto é mais alta que a dos outros carros (1100×758 contra ~1100×640) e parecia maior;
     no celular/tablet ela fica ~7% mais estreita (largura, não "scale": o scale encolhia também o translateX(-50%)
     que centraliza o carro e o tirava do centro). A base (bottom) não muda, então ela continua apoiada nas rodas. */
  .bleed .bleed__car.bleed__car--fiorino{width:100%;}          /* padrão 108% */
  .bleed--sm .bleed__car.bleed__car--fiorino{width:96%;}       /* card da Frota: padrão 104% */
  /* o selo fica com a MESMA largura do bloco verde (que tem 9% de recuo de cada lado), logo abaixo dele, com um respiro */
  .hero__badge{position:relative;left:auto;right:auto;bottom:auto;margin:14px 9% 0;padding:16px 20px;gap:16px;}
  .hero__badge-num{font-size:40px;min-width:0;}
}
/* celular: bloco verde um pouco mais largo e o selo em duas linhas:
   "+750  Carros na frota atual" em cima e o texto dos clientes embaixo, na largura toda */
@media (max-width:520px){
  .hero__art .bleed__block{left:5%;right:5%;}
  .hero__badge{margin-inline:5%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;padding:14px 18px;}
  .hero__badge-text{display:contents;}
  .hero__badge-num{font-size:34px!important;min-width:4ch;} /* largura de "+750" reservada: o texto não pula na contagem */
  .hero__badge-text strong{font-size:15px;line-height:1.2;margin:0;}
  .hero__badge-sub{grid-column:1 / -1;font-size:13px;color:var(--texto);line-height:1.4;}
}

/* bleed: colored block with a cut-out vehicle overflowing its edges */
.bleed{position:relative;aspect-ratio:5/3.7;max-width:100%;}
.bleed__block{position:absolute;left:9%;right:9%;top:8%;bottom:8%;border-radius:var(--radius-lg);box-shadow:var(--shadow-2);z-index:0;}
.bleed--verde .bleed__block{background:linear-gradient(155deg,var(--verde) 0%, var(--verde-2) 100%);}
.bleed--azul .bleed__block{background:linear-gradient(155deg,var(--azul-2) 0%, var(--azul) 100%);}
.bleed__ring{position:absolute;left:9%;top:8%;width:82%;height:84%;max-width:none;object-fit:contain;opacity:.5;z-index:0;pointer-events:none;}
.bleed__car{
  position:absolute;z-index:1;width:108%;left:50%;bottom:3%;transform:translateX(-50%);
  max-width:none;filter:drop-shadow(0 22px 22px rgba(3,30,95,.35));
}
.bleed--sm{aspect-ratio:5/4.1;}
.bleed--sm .bleed__block{left:10%;right:10%;top:16%;bottom:6%;}
.bleed--sm .bleed__car{width:104%;bottom:5%;}

/* pattern bg helper */
.pattern-bg{background-image:url("../img/img-01.webp");background-repeat:repeat;background-size:420px auto;}

/* institutional teal band */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
@media (max-width:900px){.intro{grid-template-columns:1fr;}}
.intro__panel{
  background:linear-gradient(155deg,var(--verde) 0%, var(--verde-2) 100%);
  border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);color:var(--sobre-verde);
  box-shadow:var(--shadow-2);
}
.intro__panel h3{color:var(--sobre-verde);font-size:15px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:18px;}
.modal-list{display:flex;flex-direction:column;gap:10px;}
.modal-list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--branco);border:1px solid rgba(4,32,28,.1);color:var(--sobre-verde);
  border-radius:var(--radius-sm);padding:13px 16px;font-weight:600;font-size:14.5px;
  box-shadow:0 2px 8px rgba(4,32,28,.08);
  transition:transform .15s, box-shadow .15s;
}
.modal-list a:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(4,32,28,.14);}
.intro h2{font-size:clamp(26px,3.2vw,36px);}
.intro__text{margin-top:16px;max-width:50ch;}

/* split feature (terceirizacao / assinatura) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:36px;}}
.feature--reverse .feature__media{order:2;}
@media (max-width:900px){.feature--reverse .feature__media{order:0;}}
.feature__media{position:relative;}
/* Assinatura: sem quadrado, só o arco grande atrás do carro, passando do topo da seção */
.sec-arco{overflow-x:clip;} /* corta só nas laterais (evita rolagem horizontal); em cima o arco pode vazar */
/* a coluna da imagem ocupa a altura toda da linha; o carro fica centralizado nela */
.sec-arco .feature__media{align-self:stretch;display:flex;flex-direction:column;justify-content:center;}
.sec-arco .arco-fundo{
  /* base do arco = fim da coluna + padding de baixo da section = borda inferior da seção */
  position:absolute;z-index:0;pointer-events:none;max-width:none;
  left:-22%;bottom:calc(-1 * clamp(56px,8vw,96px));width:160%;height:auto;
  /* opacidade em onda contínua: oscila suavemente em torno de 20% (entre 10% e 30%) */
  opacity:.2;
  animation:arco-onda 4s ease-in-out infinite;
}
@keyframes arco-onda{
  0%,100%{opacity:.1;}
  50%{opacity:.3;}
}
@media (prefers-reduced-motion: reduce){.sec-arco .arco-fundo{animation:none;}}
.sec-arco .feature > div:not(.feature__media){position:relative;z-index:1;} /* texto sempre por cima do arco */
.sec-arco .feature__text{max-width:42ch;} /* texto mais estreito (5 linhas) para não chegar no arco */
/* no celular a imagem fica em cima do texto: o arco termina na base da imagem para não passar por trás do texto */
@media (max-width:900px){.sec-arco .arco-fundo{bottom:0;width:125%;left:-12.5%;}}
.bleed--arco .bleed__car{bottom:-6%;}
.feature h2{font-size:clamp(26px,3.2vw,34px);}
.feature__text{margin-top:16px;max-width:50ch;}
.stat-card{
  margin-top:26px;background:var(--azul);color:var(--branco);border-radius:var(--radius-md);
  padding:24px 26px;display:inline-flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-1);
  min-width:240px;
}
.stat-card .num{font-family:var(--fonte);font-weight:800;font-size:clamp(34px,4vw,44px);line-height:1;}
.stat-card .label{font-size:14px;color:#c8d3ef;max-width:26ch;}
.stat-note{margin-top:10px;font-size:12px;color:var(--texto);opacity:.8;}

/* section header (generic) */
.sec-head{max-width:640px;margin-inline:auto;text-align:center;margin-bottom:44px;}
.sec-head h2{font-size:clamp(26px,3.2vw,36px);}
.sec-head p{margin-top:14px;font-size:16px;}
.sec-head.left{margin-inline:0;text-align:left;}

/* formatos (4 cards) */
.formatos-frame{
  border:1.5px solid var(--borda);border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);
  background:var(--bg-alt);
}
.formatos-frame__head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.formatos-frame__head h2{font-size:clamp(24px,3vw,32px);}
.formatos-frame__head h2 b{color:var(--verde-2);}
.formatos-frame > p{max-width:60ch;margin-bottom:32px;}
.formatos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:940px){.formatos-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.formatos-grid{grid-template-columns:1fr;}}
.formato-card{
  position:relative;background:var(--azul);color:var(--branco);border-radius:var(--radius-md);
  padding:24px 20px;display:flex;flex-direction:column;gap:14px;min-height:220px;
}
.formato-card .tag{
  position:absolute;top:-10px;right:16px;background:var(--verde);color:var(--sobre-verde);
  font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 12px;border-radius:var(--radius-pill);
}
.formato-card h3{color:var(--branco);font-size:18px;line-height:1.25;}
.formato-card h3 span{display:block;color:#8fd8ff;font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;color:#9fb3e6;}
.formato-card p{color:#c8d3ef;font-size:13.5px;line-height:1.55;}
.formato-card__cta{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;border-radius:var(--radius-pill);background:var(--verde);color:var(--sobre-verde);
  font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.formato-card__cta:hover{background:var(--verde-2);transform:translateY(-1px);}

/* 4 motivos para alugar */
.motivos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:940px){.motivos-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.motivos-grid{grid-template-columns:1fr;}}
.motivo-card{position:relative;background:var(--bg-alt);border:1px solid var(--borda);border-radius:var(--radius-md);padding:28px 24px;}
.motivo-card__num{position:absolute;top:22px;right:24px;font-size:26px;font-weight:800;color:var(--borda);}
.motivo-card__icon{width:52px;height:52px;border-radius:50%;background:var(--azul);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.motivo-card__icon svg{width:24px;height:24px;stroke:var(--verde);fill:none;stroke-width:2;}
.motivo-card h3{font-size:17px;margin-bottom:10px;}
.motivo-card p{font-size:13.5px;line-height:1.6;color:var(--texto);}

/* gestao completa */
.gestao{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:stretch;}
@media (max-width:900px){.gestao{grid-template-columns:1fr;}}
.gestao__left h2{font-size:clamp(26px,3.4vw,38px);}
.gestao__left h2 .accent{color:var(--verde-2);}
.gestao__left p{margin-top:16px;max-width:48ch;}
.gestao__photo{margin-top:26px;}
.gestao__panel{background:var(--azul);border-radius:var(--radius-lg);padding:clamp(30px,3.4vw,44px);color:var(--branco);display:flex;flex-direction:column;}
.gestao__panel h3{color:var(--branco);font-size:clamp(24px,2.6vw,30px);letter-spacing:.01em;text-transform:uppercase;font-weight:800;margin-bottom:20px;}
/* itens dividem a altura do painel; o ativo fica destacado */
.fleet-item{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 26px;margin-inline:-26px;border-radius:var(--radius-md);border-top:1px solid rgba(255,255,255,.14);cursor:pointer;outline:none;transition:background .25s ease;}
.fleet-item:first-of-type{border-top:none;}
.fleet-item.is-active{background:rgba(255,255,255,.07);border-top-color:transparent;}
.fleet-item.is-active + .fleet-item{border-top-color:transparent;}
.fleet-item:focus-visible{box-shadow:0 0 0 2px var(--verde);}
.fleet-item__title{display:flex;align-items:center;gap:14px;font-weight:700;font-size:clamp(21px,2.2vw,27px);margin-bottom:14px;}
.fleet-item__title::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--verde);flex:none;transition:transform .25s ease, box-shadow .25s ease;}
.fleet-item.is-active .fleet-item__title::before{transform:scale(1.3);box-shadow:0 0 0 5px rgba(0,195,179,.25);}
.fleet-item p{color:#c8d3ef;font-size:clamp(16px,1.5vw,18px);line-height:1.65;padding-left:26px;}
/* troca de veículo na foto: os dois ficam sobrepostos e só o ativo aparece */
.gestao__car{opacity:0;transform:translateX(calc(-50% + 40px));transition:opacity .4s ease, transform .4s ease;}
.gestao__car.is-active{opacity:1;transform:translateX(-50%);}
@media (prefers-reduced-motion: reduce){.gestao__car,.fleet-item{transition:none;}}

/* frota gallery */
.frota-grid{display:grid;grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;gap:22px;padding-top:10px;}
@media (max-width:860px){.frota-grid{grid-template-columns:1fr;}}
/* desktop: cards e quadrado colorido mais largos, com o veículo no mesmo tamanho de antes
   (altura mantida pelo aspect-ratio; carro = 85% de 540px ≈ 104% de 440px) */
@media (min-width:861px){
  .frota-grid{grid-template-columns:repeat(2,minmax(0,540px));gap:28px;}
  .frota-card__media .bleed{aspect-ratio:540/361;}
  .frota-card__media .bleed__block{left:7%;right:7%;}
  .frota-card__media .bleed__car{width:85%;}
  /* mesma margem lateral do quadrado colorido (7%), para o texto alinhar com ele */
  .frota-grid .frota-card__body{padding-inline:7%;}
  .frota-grid .frota-card__body p{text-wrap:pretty;}
}
.frota-card{border-radius:var(--radius-lg);background:var(--branco);border:1px solid var(--borda);padding-bottom:4px;}
.frota-card__media{position:relative;}
.frota-card__media.is-icon{aspect-ratio:4/3;border-radius:var(--radius-lg);background:var(--azul);display:flex;align-items:center;justify-content:center;margin:8% 6% 0;}
.frota-card__media.is-icon svg{width:64px;height:64px;stroke:var(--verde);}
.frota-card__body{padding:14px 22px 26px;}
.frota-card__body h3{font-size:18px;margin-bottom:8px;}
.frota-card__body p{font-size:13.5px;}

/* entrega destaque */
.entrega{background:var(--azul);color:var(--branco);border-radius:var(--radius-lg);overflow:hidden;position:relative;}
.entrega__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;}
@media (max-width:900px){.entrega__grid{grid-template-columns:1fr;}}
/* texto centralizado na vertical dentro do quadrado azul */
.entrega__text{padding:clamp(32px,4.5vw,56px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
.entrega__text h2{color:var(--branco);font-size:clamp(24px,3vw,32px);}
.entrega__text p{color:#c8d3ef;margin-top:16px;max-width:46ch;}
.entrega__text .eyebrow{margin-top:0;}
.entrega blockquote{
  margin:24px 0 0;padding-left:18px;border-left:3px solid var(--verde);
  font-style:italic;color:var(--branco);font-size:15px;max-width:44ch;
}
.entrega__media{position:relative;min-height:260px;display:flex;align-items:center;background:var(--azul-2);}
.entrega__media--video{flex-direction:column;justify-content:center;gap:20px;overflow:hidden;}
.entrega__media--video::before{
  content:"";position:absolute;inset:-10px;z-index:0;
  background-image:url("../img/img-02.webp");
  background-size:cover;background-position:center;
  filter:blur(6px);transform:scale(1.06);
}
.entrega__media--video::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(155deg,rgba(0,195,179,.1) 0%, rgba(0,168,147,.1) 100%);
}
.entrega__play{position:relative;z-index:1;width:88px;height:88px;border-radius:50%;background:var(--branco);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(3,30,95,.32);transition:transform .2s ease;flex:none;text-decoration:none;}
.entrega__play:hover{transform:scale(1.06);}
.entrega__play svg{width:30px;height:30px;fill:var(--azul);margin-left:4px;}
.video-pill{
  position:absolute;left:20px;bottom:20px;z-index:1;display:inline-flex;align-items:center;gap:10px;
  background:rgba(14,23,38,.72);backdrop-filter:blur(6px);color:var(--branco);
  padding:10px 16px 10px 10px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;
  text-decoration:none;
}
.video-pill .dot{width:30px;height:30px;border-radius:50%;background:var(--verde);display:flex;align-items:center;justify-content:center;flex:none;}
.video-pill svg{width:14px;height:14px;fill:var(--sobre-verde);}
.video-pill--center{position:relative;left:auto;bottom:auto;background:rgba(14,23,38,.28);padding:10px 20px;}
.video-pill:hover{background:rgba(14,23,38,.85);}

/* diferenciais */
#diferenciais{position:relative;overflow:clip;}
/* arco começa dentro da seção, para o topo aparecer inteiro (antes era cortado em top:-40px) */
.dif-ring{position:absolute;left:50%;top:clamp(24px,4vw,48px);width:900px;max-width:none;transform:translateX(-50%);opacity:.05;pointer-events:none;z-index:0;}
#diferenciais .wrap{position:relative;z-index:1;}
/* com o fundo cinza texturizado (pattern-bg), os arcos viram brancos para continuar aparecendo */
#diferenciais.pattern-bg .dif-ring{filter:brightness(0) invert(1);opacity:1;}
:root[data-theme="dark"] #diferenciais.pattern-bg .dif-ring{filter:none;opacity:.05;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #diferenciais.pattern-bg .dif-ring{filter:none;opacity:.05;}}
/* duas colunas: texto à esquerda, cards dos diferenciais à direita; o anel fica centralizado atrás de tudo */
.dif-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,72px);align-items:center;}
.dif-texto{margin-bottom:0;max-width:460px;}
.dif-texto .btn{margin-top:28px;}
#diferenciais .dif-ring{left:50%;top:50%;transform:translate(-50%,-50%);}
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.check-item{display:flex;gap:14px;align-items:center;min-height:88px;padding:18px;background:var(--branco);
  border:1px solid var(--borda);border-radius:var(--radius-md);box-shadow:var(--shadow-1);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.check-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--verde);}
.check-item__icone{width:44px;height:44px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--verde) 16%,transparent);color:var(--verde-texto);}
.check-item__icone svg{width:22px;height:22px;}
.check-item > span:last-child{font-size:15px;line-height:1.4;color:var(--tinta);font-weight:600;}
@media (max-width:900px){
  .dif-grid{grid-template-columns:1fr;}
  .dif-texto{max-width:640px;}
}
@media (max-width:520px){.checklist{grid-template-columns:1fr;}.check-item{min-height:0;}}
@media (prefers-reduced-motion: reduce){.check-item{transition:none;}}

/* final CTA */
.cta-final{
  position:relative;border-radius:var(--radius-lg);overflow:clip;
  background:var(--azul);color:var(--branco);padding:clamp(48px,7vw,80px) clamp(24px,5vw,64px);
  text-align:center;
}
.cta-final__ring{position:absolute;top:50%;left:50%;width:640px;max-width:none;transform:translate(-50%,-50%);opacity:.35;pointer-events:none;}
.cta-final__inner{position:relative;z-index:1;max-width:640px;margin-inline:auto;}
.cta-final h2{color:var(--branco);font-size:clamp(26px,3.6vw,40px);}
.cta-final p{color:#c8d3ef;margin-top:14px;font-size:16px;}
.cta-final__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:30px;}

/* area do cliente em destaque */
.area-cliente{
  position:relative;border-radius:var(--radius-lg);overflow:clip;
  color:var(--branco);padding:clamp(44px,7vw,72px) clamp(24px,5vw,64px);
  text-align:center;
}
.area-cliente::before{
  content:"";position:absolute;inset:-20px;z-index:0;
  background-image:url("../img/img-03.webp");
  background-size:cover;background-position:center;
  filter:blur(6px);transform:scale(1.08);
}
.area-cliente::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(155deg,rgba(0,195,179,.55) 0%, rgba(0,128,112,.62) 100%); /* véu verde sobre o desfoque */
}
.area-cliente__inner{position:relative;z-index:1;max-width:600px;margin-inline:auto;}
.area-cliente h2{color:var(--branco);font-size:clamp(26px,3.4vw,36px);}
.area-cliente__title-bg{
  display:inline-block;background:var(--azul);
  padding:10px 28px;border-radius:var(--radius-md);
}
.area-cliente p{color:var(--branco);margin-top:14px;font-size:16px;text-shadow:0 2px 10px rgba(3,30,95,.5);}
/* "PORTAL EXCLUSIVO" e o texto ficam direto sobre a foto (sem caixa atrás); a sombra do texto garante a leitura */
.area-cliente__selo{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px!important;
  font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 8px rgba(3,30,95,.6)!important;}
.area-cliente__selo::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--branco);}
.area-cliente__texto{display:inline-block;font-weight:500;text-shadow:0 1px 10px rgba(3,30,95,.65)!important;}
/* botão com ícone à esquerda */
.btn-icone{gap:10px;}
.btn-icone svg{width:18px;height:18px;flex:none;}
/* botão no verde do WhatsApp (#25d366); texto escuro, porque branco sobre esse verde não tem contraste suficiente */
.btn-whats{background:#25d366;color:#06331a;box-shadow:0 10px 24px rgba(37,211,102,.3);}
.btn-whats:hover{background:#1ebe5b;color:#06331a;}
/* botão "Área do Cliente": todo azul, com texto branco e ícone de chat maior num quadrado mais claro */
.btn-azul{background:var(--azul-botao);color:#fff;box-shadow:var(--shadow-1);}
.btn-azul:hover{background:var(--azul-botao-2);color:#fff;}
.btn-icone--chat{padding-left:10px;}
.btn-icone--chat svg{width:28px;height:28px;}
.area-cliente__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:28px;}

/* footer / contato */
.contato{background:var(--bg-alt);border-top:1px solid var(--borda);}
.contato__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;}
@media (max-width:860px){.contato__grid{grid-template-columns:1fr;}}
.contato h2{font-size:clamp(24px,3vw,32px);}
.contato__text{margin-top:14px;max-width:48ch;}
.contato__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.contact-card{background:var(--branco);border:1px solid var(--borda);border-radius:var(--radius-lg);padding:22px 26px;box-shadow:var(--shadow-1);
  /* altura só do conteúdo, encostado embaixo: base alinhada com o botão do WhatsApp */
  align-self:end;}
.contact-row{display:flex;gap:16px;align-items:flex-start;padding-block:16px;border-top:1px solid var(--borda);}
.contact-row:first-child{border-top:none;padding-top:0;}
.contact-row:last-child{padding-bottom:0;} /* sem sobra embaixo: borda inferior igual à de cima */
.contact-row svg{width:24px;height:24px;flex:none;stroke:var(--verde-2);margin-top:0;}
.contact-row div p{color:var(--tinta);font-weight:600;font-size:18px;}
.contact-row div span{display:block;color:var(--texto);font-size:15px;margin-top:4px;line-height:1.5;}
.foot-bottom{
  border-top:1px solid var(--borda);margin-top:56px;padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
}
.foot-bottom img{height:22px;opacity:.85;}
.foot-bottom small{color:var(--texto);font-size:12.5px;}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--texto);}
/* dados da empresa (razão social, CNPJ e endereço), na linha de baixo do rodapé, nas duas páginas */
/* a linha de cima (borda do .foot-bottom) vai até as bordas da .wrap, incluindo o recuo de 20px;
   esta avança os mesmos 20px para as duas linhas terem o mesmo comprimento, sem mexer no alinhamento do texto */
.foot-empresa{flex-basis:calc(100% + 40px);margin:2px -20px 0;padding:14px 20px 0;border-top:1px solid var(--borda);font-size:12.5px;line-height:1.6;color:var(--texto);display:flex;flex-wrap:wrap;gap:2px 18px;}
.foot-empresa strong{color:var(--tinta);font-weight:700;}


::selection{background:var(--verde);color:var(--sobre-verde);}

/* banner topo */

/* banner topo - carousel */
.banner-carousel{position:relative;width:100%;overflow:hidden;background:var(--bg-alt);}
.banner-carousel__track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.banner-carousel__slide{flex:0 0 100%;width:100%;min-width:100%;line-height:0;}
.banner-carousel__slide img{width:100%;height:auto;display:block;}
.banner-carousel__slide > a{display:block;} /* banner clicável (ex.: abre o WhatsApp) */
.banner-carousel__arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1);
  z-index:2;color:var(--azul);transition:background .2s;
}
.banner-carousel__arrow:hover{background:#fff;}
.banner-carousel__arrow svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;}
.banner-carousel__arrow--prev{left:20px;}
.banner-carousel__arrow--next{right:20px;}
.banner-carousel__dots{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:2;
}
.banner-carousel__dots button{
  width:9px;height:9px;padding:0;border:none;border-radius:999px;
  background:rgba(255,255,255,.55);cursor:pointer;transition:width .25s,background .25s;
}
.banner-carousel__dots button.is-active{width:24px;background:#fff;}

/* ===== Lateral fixa: aba Área do Cliente + chat ===== */
.lado-cliente{
  position:fixed;right:0;top:50%;z-index:50;
  display:flex;align-items:center;gap:10px;
  writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
  background:#031e5f;color:#fff;
  padding:20px 12px;border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:var(--fonte);font-weight:600;font-size:14px;letter-spacing:.04em;
  box-shadow:var(--shadow-2);transition:padding .2s ease, background .2s ease;
}
.lado-cliente:hover,.lado-cliente:focus-visible{background:#0a2c74;padding-inline:16px;outline:none;}
.lado-cliente svg{width:18px;height:18px;stroke:var(--verde);transform:rotate(180deg);flex:none;}
@media (max-width:640px){.lado-cliente{padding:14px 9px;font-size:12.5px;}}

.chat-botao{
  position:fixed;right:24px;bottom:24px;z-index:50;
  width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
  background:var(--verde);color:var(--sobre-verde);box-shadow:0 14px 30px rgba(0,168,147,.4);
  display:flex;align-items:center;justify-content:center;transition:transform .2s ease;
}
.chat-botao:hover{transform:scale(1.07);}
.chat-botao:focus-visible{outline:3px solid var(--azul);outline-offset:3px;}
.chat-botao svg{width:28px;height:28px;}
.chat-botao .ico-fechar{display:none;}
.chat-aberto .chat-botao .ico-chat{display:none;}
.chat-aberto .chat-botao .ico-fechar{display:block;}
.chat-botao::after{ /* pulso para chamar atenção, some depois que o chat é aberto uma vez */
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--verde);
  animation:chat-pulso 2.2s ease-out infinite;
}
.chat-visto .chat-botao::after{display:none;}
@keyframes chat-pulso{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

.chat-aviso{
  position:fixed;right:24px;bottom:98px;z-index:50;max-width:240px;
  background:var(--branco);color:var(--tinta);border:1px solid var(--borda);
  border-radius:var(--radius-md) var(--radius-md) 4px var(--radius-md);
  padding:12px 34px 12px 16px;font-size:14px;line-height:1.4;box-shadow:var(--shadow-2);
  cursor:pointer;animation:chat-entra .35s ease both;
}
.chat-aviso button{position:absolute;top:6px;right:8px;border:none;background:none;color:var(--texto);font-size:18px;line-height:1;cursor:pointer;padding:2px;}

.chat-janela{
  position:fixed;right:24px;bottom:98px;z-index:50;
  width:min(370px, calc(100vw - 32px));height:min(540px, calc(100vh - 130px));
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--radius-md);
  box-shadow:0 30px 70px rgba(3,30,95,.28);
  display:flex;flex-direction:column;overflow:hidden;
  animation:chat-entra .3s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes chat-entra{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.chat-topo{background:#031e5f;color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;}
.chat-topo__avatar{width:40px;height:40px;border-radius:50%;background:var(--verde);color:var(--sobre-verde);display:flex;align-items:center;justify-content:center;font-family:var(--fonte);font-weight:800;font-size:17px;flex:none;position:relative;}
.chat-topo__avatar::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#3ee07a;border:2px solid #031e5f;}
.chat-topo strong{display:block;font-family:var(--fonte);font-size:16px;}
.chat-topo span{font-size:12.5px;color:#c8d3ef;}
.chat-topo button{margin-left:auto;background:none;border:none;color:#fff;cursor:pointer;padding:6px;border-radius:8px;}
.chat-topo button:hover{background:rgba(255,255,255,.12);}
.chat-topo button svg{width:20px;height:20px;display:block;}

.chat-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;background:var(--bg-alt);}
.chat-msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;animation:chat-entra .25s ease both;}
.chat-msg--bot{align-self:flex-start;background:var(--branco);color:var(--tinta);border:1px solid var(--borda);border-bottom-left-radius:4px;}
.chat-msg--eu{align-self:flex-end;background:#031e5f;color:#fff;border-bottom-right-radius:4px;}
.chat-digitando{display:inline-flex;gap:4px;padding:14px 16px;}
.chat-digitando i{width:7px;height:7px;border-radius:50%;background:var(--texto);opacity:.5;animation:chat-ponto 1s infinite;}
.chat-digitando i:nth-child(2){animation-delay:.15s;}
.chat-digitando i:nth-child(3){animation-delay:.3s;}
@keyframes chat-ponto{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.chat-opcoes{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;}
.chat-opcoes button{
  border:1.5px solid var(--verde-texto);background:var(--branco);color:var(--verde-texto);
  border-radius:var(--radius-pill);padding:8px 14px;font:600 13.5px var(--fonte);cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.chat-opcoes button:hover{background:var(--verde-2);color:#fff;}
.chat-whats{
  align-self:stretch;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#25d366;color:#06331a;border-radius:var(--radius-pill);padding:12px 18px;
  font:700 14.5px var(--fonte);text-decoration:none;box-shadow:var(--shadow-1);
}
.chat-whats svg{width:20px;height:20px;}

.chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--borda);background:var(--branco);}
.chat-form input{
  flex:1;min-width:0;border:1px solid var(--borda);border-radius:var(--radius-pill);
  padding:11px 16px;font:15px var(--fonte);background:var(--bg-alt);color:var(--tinta);
}
.chat-form input:focus{outline:2px solid var(--verde);outline-offset:0;border-color:transparent;}
.chat-form button{width:44px;height:44px;flex:none;border:none;border-radius:50%;background:var(--verde);color:var(--sobre-verde);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.chat-form button svg{width:20px;height:20px;}
.chat-form button:disabled{opacity:.45;cursor:default;}

.chat-aviso__curto{display:none;}
/* computador (≥1025px): botão do chat maior e mais visível; balão e janela sobem junto para não encostar nele */
@media (min-width:1025px){
  .chat-botao{right:28px;bottom:28px;width:78px;height:78px;box-shadow:0 18px 38px rgba(0,168,147,.45);}
  .chat-botao svg{width:36px;height:36px;}
  .chat-aviso,.chat-janela{right:28px;bottom:120px;}
}
@media (max-width:640px){
  .chat-botao{right:16px;bottom:16px;width:56px;height:56px;}
  .chat-janela{right:16px;bottom:84px;}
  /* no celular o convite vira uma etiqueta de uma linha AO LADO do botão (mesma altura), e não um balão por cima do conteúdo */
  .chat-aviso{right:82px;bottom:24px;max-width:calc(100vw - 100px);display:flex;align-items:center;min-height:40px;
    padding:8px 36px 8px 16px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:600;white-space:nowrap;}
  .chat-aviso[hidden]{display:none;}
  .chat-aviso__longo{display:none;}
  .chat-aviso__curto{display:inline;}
  .chat-aviso button{top:50%;transform:translateY(-50%);right:10px;}
  .chat-aviso button::after{content:"";position:absolute;inset:-12px -8px;} /* área de toque maior para fechar */
  /* fim da página: espaço para o botão redondo não ficar em cima dos links do rodapé */
  .foot-bottom{padding-bottom:88px;}
}
@media (prefers-reduced-motion: reduce){
  .chat-botao::after{animation:none;display:none;}
  .chat-janela,.chat-aviso,.chat-msg{animation:none;}
}

/* ===== SELETOR DE MARCAS (Locadora | Corretora) — no lugar do logo, na linha do menu ===== */
.marcas{display:flex;align-items:center;gap:4px;flex:none;padding:4px;border-radius:var(--radius-pill);background:var(--bg-alt);border:1px solid var(--borda);}
.marcas__opcao{display:flex;align-items:center;justify-content:center;height:46px;padding:0 16px;border-radius:var(--radius-pill);opacity:.45;filter:grayscale(1);transition:opacity .2s,filter .2s,background .2s,box-shadow .2s;}
/* Mesmo peso visual (mesma área de desenho) para os dois logos:
   - Locadora (img-04): a imagem tem margem transparente; o desenho ocupa só 80% da altura (proporção do desenho 3:1).
     Com 34px de imagem, o desenho fica com ~27px × 82px.
   - Corretora: sem margem, proporção 5,5:1. Com 20px, fica ~20px × 111px: a mesma área do da Locadora. */
.marcas__opcao img{height:34px;width:auto;display:block;}
.marcas__opcao img.marcas__logo--larga{height:20px;}
.marcas__opcao:hover,.marcas__opcao:focus-visible{opacity:1;filter:none;}
.marcas__opcao.is-ativa{opacity:1;filter:none;background:var(--branco);box-shadow:var(--shadow-1);}
@media (max-width:420px){
  .marcas__opcao{height:40px;padding:0 10px;}
  .marcas__opcao img{height:28px;}
  .marcas__opcao img.marcas__logo--larga{height:16px;}
}
@media (prefers-reduced-motion: reduce){.marcas__opcao{transition:none;}}
/* com o seletor, a linha do menu fica mais cheia: em telas menores, links e botões
   vão saindo para o menu ☰, sem nunca quebrar linha. (O telefone não fica no topo; está no menu ☰ e no Contato.) */
.marcas__opcao{padding:0 14px;}
.nav__links{gap:22px;}
.nav__links a{white-space:nowrap;}
@media (max-width:1100px){
  .nav__links{display:none;}
  .nav__toggle{display:inline-flex;}
}
@media (max-width:760px){ .nav__cta .btn{display:none;} }

/* ===== NOSSOS CLIENTES: faixa de logos em cinza com transparência, deslizando sem parar ===== */
/* fica entre a Frota (cinza) e o case da entrega (branco): sem respiro embaixo, para não somar com o do case */
.clientes{padding-bottom:0;}
/* título em uma linha só no desktop (a faixa de logos embaixo é baixa; um título de 2 linhas pesava demais) */
.clientes__head{max-width:860px;}
.clientes__head > p:not(.eyebrow){max-width:560px;margin-inline:auto;}
/* sem rolagem automática (sem JS ou com "reduzir movimento"): uma linha só, que desliza com o dedo/scroll */
.clientes__faixa{overflow-x:auto;scrollbar-width:none;}
.clientes__faixa::-webkit-scrollbar{display:none;}
.clientes__lista{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;width:max-content;}
.clientes__item{flex:none;display:flex;align-items:center;justify-content:center;padding-inline:clamp(22px,3.6vw,52px);min-height:96px;}
/* logos 25% maiores que o --h e mais fortes (cinza a 65%) para dar destaque à seção */
.clientes__item img{display:block;height:calc(var(--h,44px) * 1.25);width:auto;max-width:none;
  filter:grayscale(1);opacity:.65;transition:filter .25s ease,opacity .25s ease;}
.clientes__item img:hover{filter:none;opacity:1;}
:root[data-theme="dark"] .clientes__item img{filter:grayscale(1) invert(1);opacity:.55;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .clientes__item img{filter:grayscale(1) invert(1);opacity:.55;}}
/* rolagem contínua: o script duplica a lista; andar metade dela (-50%) emenda a volta sem pulo.
   As bordas somem num degradê. Passar o mouse pausa. */
.clientes__faixa--rolando{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.clientes__faixa--rolando .clientes__lista{margin:0;animation:clientes-rola 38s linear infinite;}
.clientes__faixa--rolando:hover .clientes__lista{animation-play-state:paused;}
@keyframes clientes-rola{to{transform:translateX(-50%);}}
/* celular: logos um pouco menores e a faixa um pouco mais rápida */
@media (max-width:760px){
  .clientes__item{min-height:72px;}
  .clientes__item img{height:calc(var(--h,44px) * .9);}
  .clientes__faixa--rolando .clientes__lista{animation-duration:28s;}
}
@media (prefers-reduced-motion: reduce){.clientes__item img{transition:none;}}

/* ===== REVELAR AO ROLAR (Locadora e Corretora): blocos entram pela esquerda ou pela direita, intercalados =====
   Marcação: data-revela="esq" | "dir" num elemento, ou data-revela-grupo="esq" | "dir" no pai. Script: assets/js/revelar.js.
   Usa "translate" (e não "transform") para não anular o hover dos cards.
   Só liga com JavaScript e sem "reduzir movimento" (classe .revela-ativo no <html>); sem isso, tudo aparece normal. */
.revela-ativo [data-revela]{opacity:0;translate:var(--revela-x) 0;
  transition:opacity .7s ease var(--atraso,0s),translate .9s cubic-bezier(.22,1,.36,1) var(--atraso,0s),
             transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.revela-ativo [data-revela="esq"]{--revela-x:-56px;}
.revela-ativo [data-revela="dir"]{--revela-x:56px;}
.revela-ativo [data-revela].is-visivel{opacity:1;translate:0 0;}
@media (max-width:640px){
  .revela-ativo [data-revela="esq"]{--revela-x:-28px;}
  .revela-ativo [data-revela="dir"]{--revela-x:28px;}
}
@media print{.revela-ativo [data-revela]{opacity:1;translate:none;}}

/* ===== INTEGRAÇÃO TIFLUX: com o chat do TiFlux ligado (assets/js/integracoes.js), o chat próprio do site sai, para não sobrepor ===== */
.tiflux-chat-ativo [data-chat]{display:none!important;}

/* ===== ARRASTAR PARA O LADO (só no celular, até 640px), Locadora e Corretora =====
   Grades de cards com data-arrastar viram uma fila que a pessoa arrasta para o lado, com o card seguinte aparecendo
   na borda (sinal de que tem mais). Embaixo, o script assets/js/arrastar.js põe "Arraste para o lado" + bolinhas.
   --arrastar-sangria = quanto a fila avança até a borda do bloco (igual ao recuo lateral do bloco onde ela está). */
.arrastar-dica{display:none;}
@media (max-width:640px){
  [data-arrastar]{
    --arrastar-sangria:20px;
    display:flex!important;justify-content:flex-start!important;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--arrastar-sangria);scrollbar-width:none;
    margin-inline:calc(var(--arrastar-sangria) * -1);padding:14px var(--arrastar-sangria) 18px; /* espaço para a etiqueta "NOVO" e a sombra */
  }
  [data-arrastar]::-webkit-scrollbar{display:none;}
  /* dentro da fila, os cards NÃO usam a animação de entrada (deslizar ±28px): os que estão fora da tela, à direita,
     ficariam deslocados e chegariam tortos ao centro. A fila inteira continua aparecendo normalmente. */
  .revela-ativo [data-arrastar] > [data-revela]{translate:none!important;opacity:1!important;}
  [data-arrastar] > *{flex:0 0 84%;max-width:340px;scroll-snap-align:start;}
  .formatos-frame [data-arrastar]{--arrastar-sangria:28px;}
  .wrap[data-arrastar]{margin-inline:0;} /* quando a própria .wrap é a fila, ela já ocupa a tela toda */
  .wrap[data-arrastar] + .arrastar-dica{padding-inline:20px;} /* e a indicação embaixo ganha o mesmo recuo da página */
  .arrastar-dica{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;}
  .arrastar-dica__texto{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--verde-texto);
    transition:opacity .3s ease;}
  .arrastar-dica__texto svg{width:18px;height:18px;animation:arrastar-seta 1.6s ease-in-out infinite;}
  @keyframes arrastar-seta{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
  .arrastar-dica--usada .arrastar-dica__texto{opacity:0;}
  .arrastar-dica__bolinhas{display:flex;gap:6px;margin-left:auto;}
  .arrastar-dica__bolinhas button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--borda);cursor:pointer;
    transition:width .25s ease,background .25s ease;}
  .arrastar-dica__bolinhas button.is-ativa{width:22px;background:var(--verde-2);}
  /* filas com troca automática (data-arrastar-auto): os cards fora da frente ficam esmaecidos e ganham
     opacidade total ao chegar na frente. Usa filter:opacity (e não opacity) para não brigar com a animação de entrada. */
  [data-arrastar-auto] > *{filter:opacity(.4);
    transition:filter .5s ease,opacity .7s ease var(--atraso,0s),translate .9s cubic-bezier(.22,1,.36,1) var(--atraso,0s)!important;}
  [data-arrastar-auto] > .is-frente{filter:none;}
  /* e o card da frente fica CENTRALIZADO, com um pedaço igual do vizinho de cada lado (inclusive o 1º e o último):
     sem recuo interno; dois "espaçadores" invisíveis nas pontas deixam o 1º e o último chegarem ao centro */
  [data-arrastar-auto]{padding-inline:0;scroll-padding-inline:0;}
  [data-arrastar-auto] > *{flex:0 0 80%;max-width:none;scroll-snap-align:center;}
  [data-arrastar-auto]::before,[data-arrastar-auto]::after{content:"";flex:0 0 calc(10% - 14px);}
  /* área de toque maior sem aumentar a bolinha */
  .arrastar-dica__bolinhas button{position:relative;}
  .arrastar-dica__bolinhas button::after{content:"";position:absolute;inset:-10px -3px;}
}
@media (max-width:640px) and (prefers-reduced-motion: reduce){
  .arrastar-dica__texto svg{animation:none;}
  [data-arrastar]{scroll-behavior:auto;}
}

/* ===== AJUSTES DE UX NO CELULAR (≤640px), Locadora e Corretora =====
   Resultado da revisão de UX (design-critique): áreas de toque com no mínimo 44 × 44 px, textos pequenos um pouco maiores,
   etiquetas que não quebram linha e nada fixo cobrindo o conteúdo. No computador nada muda. */
@media (max-width:640px){
  /* seletor de marcas CENTRALIZADO no cabeçalho: um espaçador invisível à esquerda, do tamanho do ☰ (44px),
     equilibra o ☰ da direita; em telas muito estreitas o espaçador encolhe para nada sair da tela */
  .nav{gap:8px;}
  .nav::before{content:"";flex:0 1 44px;min-width:0;}
}
/* celulares estreitos (≤380px): seletor um pouco menor, para caber centralizado com o espaçador e o ☰ */
@media (max-width:380px){
  .marcas__opcao{padding:0 8px;}
  .marcas__opcao img{height:23px;}
  .marcas__opcao img.marcas__logo--larga{height:13px;}
}
@media (max-width:640px){
  /* botão ☰ e seletor de marcas com 44px de altura (dedo) */
  .nav__toggle{width:44px;height:44px;align-items:center;justify-content:center;padding:0;}
  .marcas__opcao{height:44px;}
  /* botões e links de ação dentro dos cards: 44px de altura */
  .formato-card__cta{min-height:44px;display:inline-flex;align-items:center;}
  .seguro-card__cta{min-height:44px;}
  /* rodapé: links com área de toque maior e letra um pouco maior */
  .foot-links{gap:4px 18px;font-size:13.5px;}
  .foot-links a{display:inline-block;padding-block:12px;}
  .foot-bottom small{font-size:13px;}
  /* etiquetas (eyebrow): menos espaço entre letras, para não quebrar linha e deixar o tracinho sozinho */
  .eyebrow{letter-spacing:.09em;}
  /* bolinhas dos carrosséis e setas pequenas do banner: área de toque invisível maior em volta */
  .banner-carousel__dots button{position:relative;} /* as setas já são position:absolute, não mexer */
  .banner-carousel__dots button::after{content:"";position:absolute;inset:-16px -4px;}
  .banner-carousel__arrow::after{content:"";position:absolute;inset:-8px;}
  .arrastar-dica__bolinhas button::after{inset:-18px -4px;}
  /* aba fixa "Área do Cliente": no celular cobria a borda direita do conteúdo;
     ela continua no menu ☰ ("Área do cliente") e na própria seção Área do Cliente */
  .lado-cliente{display:none;}
}

/* ===== MENU DO CELULAR (☰ → #mnav.mnav), Locadora, Corretora e Portal =====
   Lista de opções com linha divisória e setinha; uma opção em destaque azul (.mnav__destaque: Área do Cliente na Locadora,
   WhatsApp na Corretora) e o botão principal no fim (.mnav__cta). Abre/fecha pelo ☰ (onclick no próprio botão). */
.mnav{display:flex;flex-direction:column;padding-block:4px 20px;}
.mnav > a:not(.mnav__destaque):not(.mnav__cta){display:flex;align-items:center;justify-content:space-between;min-height:52px;
  font-family:var(--fonte);font-weight:600;font-size:16px;color:var(--tinta);border-bottom:1px solid var(--borda);}
.mnav > a:not(.mnav__destaque):not(.mnav__cta)::after{content:"";width:8px;height:8px;margin-right:4px;flex:none;
  border-top:2px solid var(--verde-texto);border-right:2px solid var(--verde-texto);transform:rotate(45deg);opacity:.8;}
.mnav > a:not(.mnav__destaque):not(.mnav__cta):active{color:var(--verde-texto);}
.mnav__destaque{display:flex;align-items:center;gap:12px;min-height:56px;margin-top:18px;padding:10px 16px;
  border-radius:var(--radius-md);background:var(--azul-botao);color:#fff;font-family:var(--fonte);font-weight:700;font-size:16px;
  box-shadow:var(--shadow-1);}
.mnav__destaque svg{width:30px;height:30px;flex:none;}
.mnav__destaque-ico{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:none;}
.mnav__destaque-ico svg{width:18px;height:18px;}
.mnav__cta{margin-top:10px;min-height:52px;justify-content:center;}

/* ===== REDES SOCIAIS (ícones redondos), Locadora e Corretora =====
   .hero__redes = "Siga a …" + ícones abaixo dos botões do topo; .contato-redes = só os ícones (Contato). */
.contato-redes{display:flex;gap:10px;margin-top:22px;}
.contato-redes a{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--borda);color:var(--azul);transition:background .2s,color .2s,border-color .2s;}
.contato-redes a:hover{background:var(--azul);color:#fff;border-color:var(--azul);}
.contato-redes svg{width:20px;height:20px;}
.hero__redes{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:26px;}
.hero__redes > span{font-size:14px;font-weight:500;color:var(--texto);}
.hero__redes .contato-redes{margin-top:0;}