/* ══════════════════════════════════════════════════════════════
   MARCOS TRANSFER — folha única
   Mesma base dos sites anteriores: curva --mola, reveal [data-rv],
   onda diagonal nas grades, brilho de cursor nos botões.
   Paleta azul/marinho puxada da referência de aeroporto.
   ══════════════════════════════════════════════════════════════ */
:root{
 /* Paleta tropical, versão viva (o cliente pediu "cores mais vivas").
    Dois turquesas com papéis diferentes, e isso é de propósito:

      --agua      preenchimento. Superfície grande e luminosa: botão,
                  faixa de contato, círculo de ícone, chip ativo.
      --agua-esc  texto e ícone fino SOBRE BRANCO. O turquesa vivo em
                  corpo de texto dá 2,2:1 de contraste, que ninguém lê;
                  este dá 4,6:1.

    E o texto sobre o turquesa vivo é escuro, não branco: branco sobre
    #00C4B4 dá 2,2:1, o marinho dá 6,2:1. Fica mais vivo e mais legível
    ao mesmo tempo — não é troca de uma coisa pela outra. */
 --agua:#00C4B4;          /* preenchimentos vivos */
 --agua-mid:#22E2CE;      /* brilho, hover e destaque sobre escuro */
 --agua-esc:#00857A;      /* turquesa de texto sobre branco */
 --agua-clara:#D6FBF5;    /* círculo dos ícones, painéis */
 --mar:#04333B;           /* rodapé, superfícies escuras e texto sobre turquesa */
 --mar-2:#0A5560;
 --coral:#F2542D;         /* preços */
 --dourado:#F2BE4C;       /* coroa da marca, estrelas */
 --tinta:#12241F;         /* títulos */
 --corpo:#566664;         /* texto corrido */
 --suave:#879793;         /* legendas, rótulos */
 --bg:#FFFFFF;
 --areia:#FDF7EC;         /* fundo de seção, areia quente */
 --linha:#E9E2D5;
 --linha-2:#F3EEE3;
 --verde:#12B76A;         /* checks */
 --sombra:0 1px 2px rgba(6,40,44,.04),0 8px 24px -12px rgba(6,40,44,.14);
 --sombra-alta:0 2px 6px rgba(6,40,44,.05),0 26px 52px -22px rgba(6,40,44,.24);
 --mola:cubic-bezier(.16,1,.3,1);
 --r:14px; --r-g:22px;
 --topo:88px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--corpo);
 font:400 16px/1.65 'Inter','Segoe UI',system-ui,sans-serif;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
/* Todo ícone é <svg><use>. Sem medida o SVG vale 300x150 e estoura o grid. */
svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
 stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--tinta);font-family:'Inter Tight','Inter',sans-serif;
 font-weight:800;letter-spacing:-.032em;line-height:1.06}
p{margin:0}
.wrap{width:min(1320px,calc(100% - 120px));margin-inline:auto}
.az{color:var(--agua)}

/* ── rótulo de seção ──────────────────────────────────────────── */
.kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;
 text-transform:uppercase;color:var(--agua-esc);margin-bottom:14px}
.sechd{text-align:center;max-width:680px;margin:0 auto 54px}
.sechd h2{font-size:clamp(28px,3.2vw,42px)}
.sechd .risco{width:56px;height:3px;border-radius:2px;background:var(--agua);
 margin:20px auto 0}
.sechd p{margin-top:18px;font-size:17px;color:var(--corpo)}
.sechd.esq{text-align:left;margin-inline:0}
.sechd.esq .risco{margin-inline:0}


/* ══ CURSOR ════════════════════════════════════════════════════
   Seta branca com contorno preto, do desenho que o cliente mandou.
   O contorno é o que garante leitura nos dois fundos da página: o
   hero escuro e o corpo branco. A ponta fica no vértice agudo da
   direita, então o hotspot é ali (30 19 dentro dos 34px).
   Em tela de toque não existe cursor — aí volta o padrão. */
:root{
 --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 512 512'%3E%3Cpath d='M128 98 452 290 330 316 192 434Z' fill='%23fff' stroke='%23000' stroke-width='38' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 30 19, auto;
}
body,body *{cursor:var(--seta)}
@media (hover:none){
 body,body *{cursor:auto}
}

/* ══ BOTÕES ════════════════════════════════════════════════════
   O brilho que acompanha o cursor é injetado pelo anim.js (.btn-glow). */
.btn,.btn-o{position:relative;display:inline-flex;align-items:center;justify-content:center;
 gap:10px;padding:15px 28px;border-radius:10px;font-weight:600;font-size:15px;
 letter-spacing:.01em;overflow:hidden;white-space:nowrap;
 transition:transform .5s var(--mola),box-shadow .5s var(--mola),
            background .3s ease,color .3s ease,border-color .3s ease}
.btn{background:var(--agua);color:var(--mar);font-weight:700;
 box-shadow:0 10px 26px -14px rgba(0,196,180,.85)}
.btn:hover{background:var(--agua-mid);transform:translateY(-2px);
 box-shadow:0 20px 36px -16px rgba(0,196,180,.65)}
.btn-o{background:#fff;color:var(--tinta);border:1px solid var(--linha)}
.btn-o:hover{border-color:var(--agua);color:var(--agua);transform:translateY(-2px);
 box-shadow:var(--sombra)}
.btn .seta,.btn-o .seta{width:17px;height:17px;transition:transform .5s var(--mola)}
.btn:hover .seta,.btn-o:hover .seta{transform:translateX(4px)}
.btn-glow{position:absolute;inset:0;pointer-events:none;opacity:0;
 background:radial-gradient(130px circle at var(--gx,50%) var(--gy,50%),
 rgba(255,255,255,.55),transparent 62%);transition:opacity .35s ease}
.btn-glow.on{opacity:1}
.btn-o .btn-glow{background:radial-gradient(130px circle at var(--gx,50%) var(--gy,50%),
 rgba(0,196,180,.12),transparent 62%)}
.link-t{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--agua-esc);
 font-size:15px;transition:gap .4s var(--mola)}
.link-t svg{width:15px;height:15px}
.link-t:hover{gap:13px}

/* ══ NAV ═══════════════════════════════════════════════════════
   Dois estados: sobre o hero escuro ela é transparente com texto
   claro; passado o hero, .compact (do anim.js) traz o fundo branco
   e o texto escuro. Só as cores mudam — a geometria é a mesma. */
.nav{position:fixed;inset:0 0 auto;z-index:900;background:transparent;
 border-bottom:1px solid transparent;
 transition:background .45s ease,box-shadow .45s ease,border-color .45s ease}
.nav.compact{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
 border-color:var(--linha);box-shadow:0 10px 30px -24px rgba(6,40,44,.55)}
.navin{display:flex;align-items:center;gap:42px;height:var(--topo);
 transition:height .45s var(--mola)}
.nav.compact .navin{height:70px}

.logo{display:flex;align-items:center;gap:13px}
.logo .mk{width:50px;height:auto;flex:none;
 transition:width .45s var(--mola),transform .55s var(--mola)}
.nav.compact .logo .mk{width:43px}
.logo:hover .mk{transform:translateY(-2px) scale(1.04)}
.logo b{font-family:'Inter Tight','Inter',sans-serif;font-size:22px;font-weight:800;
 color:#fff;letter-spacing:-.03em;line-height:1;transition:color .45s ease}
.logo b span{font-weight:500;color:#9BC4BE;transition:color .45s ease}
.logo small{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
 color:rgba(255,255,255,.55);font-weight:600;margin-top:5px;transition:color .45s ease}
.nav.compact .logo b{color:var(--tinta)}
.nav.compact .logo b span{color:var(--suave)}
.nav.compact .logo small{color:var(--suave)}

.navlinks{display:flex;gap:34px;margin-inline:auto;font-size:15.5px;font-weight:500}
.navlinks a{position:relative;padding:7px 0;color:rgba(255,255,255,.74);
 transition:color .3s ease}
.navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
 border-radius:2px;background:var(--agua-mid);transition:right .45s var(--mola)}
.navlinks a:hover,.navlinks a.active{color:#fff}
.navlinks a:hover::after,.navlinks a.active::after{right:0}
.nav.compact .navlinks a{color:var(--corpo)}
.nav.compact .navlinks a:hover,.nav.compact .navlinks a.active{color:var(--tinta)}
.nav.compact .navlinks a::after{background:var(--agua-esc)}

.navright{display:flex;align-items:center;gap:22px}
.navfone{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;
 color:#fff;transition:color .3s ease,opacity .3s ease}
.navfone svg{width:19px;height:19px;fill:currentColor;stroke:none}
.navfone:hover{opacity:.8}
.nav.compact .navfone{color:var(--tinta)}
.navright .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;border-radius:10px;place-items:center;
 border:1px solid rgba(255,255,255,.32);transition:border-color .45s ease}
.burger span{display:block;width:19px;height:1.8px;background:#fff;border-radius:2px;
 transition:transform .45s var(--mola),opacity .3s ease,background .45s ease}
.burger span+span{margin-top:5px}
.nav.compact .burger{border-color:var(--linha)}
.nav.compact .burger span{background:var(--tinta)}
.nav.aberto .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav.aberto .burger span:nth-child(2){opacity:0}
.nav.aberto .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ══ 1 · HERO ══════════════════════════════════════════════════
   A foto sangra por trás da nav. O véu são duas camadas: uma escura
   no topo, para a nav ler sobre o céu claro, e outra na horizontal,
   forte à esquerda onde fica o texto e quase nula sobre o carro. */
.hero{position:relative;padding-top:var(--topo);overflow:hidden;background:#04262B;
 min-height:100vh;min-height:100svh}
.hero-foto{position:absolute;inset:0;z-index:0}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:55% 62%}
.hero-foto::after{content:'';position:absolute;inset:0;
 background:
  linear-gradient(180deg,rgba(3,26,29,.66) 0%,rgba(3,26,29,.20) 16%,rgba(3,26,29,0) 32%),
  linear-gradient(96deg,rgba(3,34,38,.90) 0%,rgba(3,34,38,.82) 28%,rgba(4,38,42,.54) 45%,
   rgba(4,38,42,.20) 61%,rgba(4,38,42,.04) 78%,rgba(4,38,42,.20) 100%)}
/* A coluna ocupa o que sobra da primeira tela. As duas margens automáticas
   — uma no texto, outra no cartão — dividem a sobra em partes iguais: o
   texto desce para a faixa de cima do meio em vez de ficar grudado na nav,
   e a folga que fica entre ele e o cartão é a mesma que fica acima dele.
   svh evita o pulo quando a barra do navegador do celular recolhe. */
.heroin{position:relative;z-index:3;display:flex;flex-direction:column;
 min-height:calc(100vh - var(--topo));min-height:calc(100svh - var(--topo));
 padding:clamp(26px,4vh,54px) 0 clamp(34px,5.6vh,66px)}
.hcopy{margin-top:auto}
.hcopy{max-width:760px}
.hero .kicker{font-size:14.5px;font-weight:600;color:#7ED8CC;
 letter-spacing:.24em;margin-bottom:18px}
.hcopy h1{font-size:clamp(36px,4.55vw,63px);line-height:1.08;color:#fff;
 letter-spacing:-.035em}
/* cada linha é uma janela: o texto entra deslizando de dentro dela.
   O padding compensa o overflow:hidden, que senão corta a cedilha de
   "começa" e a perna do "q" de "embarque". */
.hcopy h1 .linha{display:block;overflow:hidden;
 padding-bottom:.09em;margin-bottom:-.09em}
.hcopy h1 .linha > span{display:block}
.hcopy h1 .az{color:#2ED9C3}
.hcopy > p{margin-top:24px;font-size:18.5px;line-height:1.62;color:#C3D6D3}

.hselos{display:flex;margin-top:40px;flex-wrap:wrap;row-gap:20px}
.hselo{display:flex;align-items:center;gap:13px;padding:2px 26px;
 border-left:1px solid rgba(255,255,255,.17)}
.hselo:first-child{padding-left:0;border-left:0}
.hselo > svg{width:29px;height:29px;stroke:#2ED9C3;stroke-width:1.6;
 transition:transform .5s var(--mola)}
.hselo:hover > svg{transform:translateY(-3px)}
.hselo b{display:block;font-size:17px;font-weight:600;color:#fff;line-height:1.3;
 font-family:inherit;letter-spacing:0;text-shadow:0 1px 12px rgba(2,22,25,.8)}
.hselo > span > span{display:block;font-size:14px;color:#A8BEBA;margin-top:3px;
 text-shadow:0 1px 12px rgba(2,22,25,.85)}

/* ── barra de cotação: vidro escuro apoiado na base do hero ───── */
.cota{position:relative;z-index:4;margin-top:auto;border-radius:18px;
 background:rgba(5,36,40,.74);backdrop-filter:blur(16px);
 border:1px solid rgba(255,255,255,.13);padding:24px 30px 28px;
 box-shadow:0 34px 64px -34px rgba(0,0,0,.85)}
.cotahd{display:flex;align-items:baseline;gap:13px;margin-bottom:20px}
.cotahd h3{font-size:22px;color:#fff}
.cotahd span{font-size:14.5px;color:#8FAAA7}
.cotaform{display:grid;grid-template-columns:1.2fr 1.2fr 1.1fr 1.1fr auto;gap:0;
 align-items:end}
.campo{padding:0 26px;border-right:1px solid rgba(255,255,255,.13);min-width:0}
.campo:first-child{padding-left:2px}
.campo label{display:block;font-size:12px;font-weight:700;letter-spacing:.13em;
 text-transform:uppercase;color:#86A5A2;margin-bottom:12px}
.campo .ctrl{display:flex;align-items:center;gap:11px}
.campo .ctrl svg{width:18px;height:18px;stroke:var(--agua-mid);flex:none}
.campo .ctrl .cv{width:15px;height:15px;stroke:#86A5A2;margin-left:auto}
.campo input,.campo select{width:100%;border:0;outline:0;background:none;
 font:500 15.5px/1.4 inherit;color:#fff;padding:3px 0;min-width:0;
 appearance:none;-webkit-appearance:none;cursor:pointer;color-scheme:dark}
.campo input::placeholder{color:#7E9A97;font-weight:400}
.campo select option{color:var(--tinta);background:#fff}
.campo input:focus,.campo select:focus{color:#6FE3D3}
.cotaform .btn{margin-left:26px;padding:16px 28px;align-self:end}
.cotaform .btn .seta{width:16px;height:16px}


/* ══ ENTRADA DO HERO ═══════════════════════════════════════════
   Keyframes disparados no próprio carregamento, sem classe posta por
   JS. A versão anterior fazia o contrário — escondia tudo no CSS e
   esperava o JS revelar depois de document.fonts.ready — e por isso
   não rodava: a fonte demorava ~900ms, o hero ficava em branco esse
   tempo todo, e qualquer engasgo no caminho (erro de script, aba em
   segundo plano) deixava a primeira tela vazia de vez.

   Aqui o navegador já começa a animação ao ler o CSS. O fill "both"
   segura o primeiro quadro durante o atraso e trava o último no fim,
   então o elemento nunca depende de ninguém para terminar visível.
   Com "reduzir movimento" a regra *{animation:none} lá embaixo zera
   tudo e cada elemento fica no seu estado natural, que já é o final.

   A ordem é a que o olho percorre: a foto fecha o zoom, depois entram
   rótulo, as duas linhas do título saindo de dentro da própria
   máscara, o texto, os selos em cascata e por fim o cartão. */
@keyframes sobe{
 from{opacity:0;transform:translate3d(0,26px,0)}
 to{opacity:1;transform:none}
}
@keyframes desce{
 from{opacity:0;transform:translate3d(0,-18px,0)}
 to{opacity:1;transform:none}
}
@keyframes revela-linha{
 from{transform:translate3d(0,112%,0)}
 to{transform:none}
}
@keyframes aproxima{
 from{transform:scale(1.13)}
 to{transform:none}
}

.nav{animation:desce .9s var(--mola) .05s both}
.hero-foto img{animation:aproxima 2.9s cubic-bezier(.22,1,.26,1) both}
.hero .kicker{animation:sobe .9s var(--mola) .20s both}
.hcopy h1 .linha > span{animation:revela-linha 1.2s cubic-bezier(.19,1,.22,1) both}
.hcopy h1 .linha:nth-child(1) > span{animation-delay:.30s}
.hcopy h1 .linha:nth-child(2) > span{animation-delay:.42s}
.hcopy > p{animation:sobe .95s var(--mola) .60s both}
.hselo{animation:sobe .95s var(--mola) both}
.hselo:nth-child(1){animation-delay:.72s}
.hselo:nth-child(2){animation-delay:.80s}
.hselo:nth-child(3){animation-delay:.88s}
.cota{animation:sobe 1s var(--mola) .96s both}

/* ══ 2 · POR QUE ═══════════════════════════════════════════════ */
.por{padding:128px 0 110px;background:var(--bg)}
.porgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.porcard{text-align:center;padding:38px 26px 34px;border-radius:var(--r-g);
 background:#fff;border:1px solid transparent;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola),
            border-color .4s ease,background .4s ease}
.porcard:hover{transform:translateY(-8px);background:#fff;border-color:var(--linha-2);
 box-shadow:var(--sombra-alta)}
.porcard i{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;
 background:var(--agua-clara);margin:0 auto 22px;
 transition:background .45s ease,transform .6s var(--mola)}
.porcard:hover i{background:var(--agua);transform:scale(1.06) rotate(-6deg)}
.porcard i svg{width:29px;height:29px;stroke:var(--agua-esc);stroke-width:1.7;
 transition:stroke .45s ease}
.porcard:hover i svg{stroke:var(--mar)}
.porcard h3{font-size:18.5px;margin-bottom:10px}
.porcard p{font-size:14.8px;line-height:1.65;color:var(--corpo)}

/* ── faixa de números ─────────────────────────────────────────── */
.nums{margin-top:76px;display:grid;grid-template-columns:repeat(4,1fr);
 background:var(--mar);border-radius:var(--r-g);overflow:hidden;
 background-image:radial-gradient(900px 300px at 15% -40%,rgba(0,196,180,.50),transparent 70%)}
.num{padding:42px 26px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.num:last-child{border-right:0}
.num b{display:block;font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(30px,3.4vw,42px);
 font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1;
 transition:text-shadow .6s ease,color .6s ease}
.num b.num-glow{color:#fff;text-shadow:0 0 22px rgba(94,231,214,.85)}
.num span{display:block;margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.62);
 letter-spacing:.03em}

/* ══ 3 · CATÁLOGO DE SERVIÇOS ══════════════════════════════════
   Cartão-link inteiro: foto com etiqueta, título, rota, o que inclui e
   o preço na base. O .sin é coluna flex com a lista em flex:1 para que
   a faixa de preço encoste embaixo em todos os cartões, mesmo com
   títulos de uma ou duas linhas — senão os doze preços dançam. */
.serv{padding:110px 0 120px;background:var(--bg)}
.filtros{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:-22px 0 42px}
.chip{padding:11px 22px;border-radius:999px;border:1px solid var(--linha);background:#fff;
 font-size:14.5px;font-weight:600;color:var(--corpo);
 transition:background .35s ease,color .35s ease,border-color .35s ease,
            transform .5s var(--mola),box-shadow .5s var(--mola)}
.chip:hover{border-color:var(--agua);color:var(--agua);transform:translateY(-2px)}
.chip.on{background:var(--agua);border-color:var(--agua);color:var(--mar);font-weight:700;
 box-shadow:0 10px 24px -14px rgba(0,196,180,.85)}

.servgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.scard{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-g);
 overflow:hidden;border:1px solid var(--linha-2);color:inherit;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola),border-color .4s ease}
.scard:hover{transform:translateY(-9px);box-shadow:var(--sombra-alta);border-color:transparent}
.scard[hidden]{display:none}
.sfoto{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;flex:none}
.sfoto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--mola)}
.scard:hover .sfoto img{transform:scale(1.07)}
.stag{position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;
 gap:6px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.95);
 backdrop-filter:blur(6px);font-size:11.5px;font-weight:700;color:var(--tinta);
 box-shadow:0 6px 16px -9px rgba(6,40,44,.55)}
.stag svg{width:13px;height:13px;stroke:var(--agua-esc)}
.sin{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.stit{display:block;font-family:'Inter Tight','Inter',sans-serif;font-size:17px;
 font-weight:800;color:var(--tinta);letter-spacing:-.025em;line-height:1.3}
.srota{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;
 color:var(--suave);line-height:1.35}
.srota svg{width:14px;height:14px;stroke:var(--agua-esc);flex:none}
.slist{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:8px;align-content:start;flex:1}
.slist li{display:flex;gap:8px;align-items:flex-start;font-size:13.2px;line-height:1.45;
 color:var(--corpo)}
.slist svg{width:14px;height:14px;stroke:var(--verde);stroke-width:2.2;flex:none;margin-top:3px}
.spreco{display:flex;align-items:baseline;gap:8px;margin-top:18px;padding-top:16px;
 border-top:1px solid var(--linha-2)}
.spreco > span:first-child{font-size:12.5px;color:var(--suave)}
.spreco b{font-family:'Inter Tight','Inter',sans-serif;font-size:23px;font-weight:800;
 color:var(--coral);letter-spacing:-.03em}
.sseta{margin-left:auto;align-self:center;width:32px;height:32px;border-radius:50%;
 background:var(--agua-clara);display:grid;place-items:center;flex:none;
 transition:background .4s ease,transform .5s var(--mola)}
.sseta svg{width:15px;height:15px;stroke:var(--agua-esc);stroke-width:2;
 transition:stroke .4s ease}
.scard:hover .sseta{background:var(--agua);transform:translateX(3px)}
.scard:hover .sseta svg{stroke:var(--mar)}
.servnota{max-width:660px;margin:36px auto 0;text-align:center;font-size:13.5px;
 line-height:1.6;color:var(--suave)}

/* ══ 4 · FROTA ═════════════════════════════════════════════════ */
.frota{padding:110px 0;background:var(--areia)}
.frotatop{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
 margin-bottom:52px}
.frotatop .sechd{margin-bottom:0}
.frotanota{max-width:300px;text-align:right;font-size:14px;line-height:1.6;color:var(--suave)}
.fgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.fcard{background:#fff;border-radius:var(--r-g);border:1px solid var(--linha-2);
 padding:20px 18px 22px;text-align:center;position:relative;overflow:hidden;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola),border-color .4s ease}
.fcard::before{content:'';position:absolute;inset:auto 0 0 0;height:3px;
 background:var(--agua);transform:scaleX(0);transform-origin:left;
 transition:transform .6s var(--mola)}
.fcard:hover{transform:translateY(-10px);box-shadow:var(--sombra-alta);border-color:transparent}
.fcard:hover::before{transform:scaleX(1)}
.ffoto{height:98px;display:grid;place-items:center;margin-bottom:14px;overflow:hidden}
.ffoto img{max-height:94px;width:auto;object-fit:contain;
 transition:transform .7s var(--mola)}
.fcard:hover .ffoto img{transform:scale(1.07) translateX(4px)}
.fcard h3{font-size:17.5px}
.fcard .mod{display:block;font-size:13px;color:var(--suave);margin-top:6px}
.fcap{display:flex;justify-content:center;gap:16px;margin:16px 0 0;
 padding:13px 0 0;border-top:1px solid var(--linha-2)}
.fcap span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--corpo)}
.fcap svg{width:15px;height:15px;stroke:var(--suave)}
.fpreco{font-size:13px;color:var(--suave)}
.fpreco b{display:block;font-family:'Inter Tight','Inter',sans-serif;font-size:26px;
 font-weight:800;color:var(--coral);letter-spacing:-.03em;line-height:1.15}

/* ══ 4 · ROTAS (painel azul) ═══════════════════════════════════ */
.rotas{padding:110px 0}
.rotapanel{background:var(--agua-clara);border-radius:28px;padding:56px;
 display:grid;grid-template-columns:.85fr 2fr;gap:48px;align-items:center;
 background-image:radial-gradient(600px 300px at 100% 0%,rgba(255,255,255,.7),transparent 60%)}
.rotacopy h2{font-size:clamp(28px,3.1vw,40px);line-height:1.08}
.rotacopy p{margin:20px 0 28px;font-size:15.5px;color:#4A5C5A;max-width:300px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rcard{background:#fff;border-radius:18px;padding:26px 24px 0;position:relative;
 overflow:hidden;min-height:250px;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola)}
.rcard:hover{transform:translateY(-8px);box-shadow:var(--sombra-alta)}
.rtag{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
 text-transform:uppercase;color:var(--suave);line-height:1.45;
 min-height:2.9em}   /* reserva a segunda linha: assim os três preços alinham */
.rvalor{margin:10px 0 16px;display:flex;align-items:baseline;gap:6px}
.rvalor b{font-family:'Inter Tight','Inter',sans-serif;font-size:32px;font-weight:800;
 color:var(--coral);letter-spacing:-.035em}
.rvalor span{font-size:13.5px;color:var(--suave)}
.rlist{display:grid;gap:9px;margin-bottom:18px}
.rlist li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--corpo)}
.rlist svg{width:15px;height:15px;stroke:var(--verde);stroke-width:2.2}
.rcard .rfoto{margin:0 -24px;display:flex;justify-content:flex-end}
.rcard .rfoto img{width:78%;max-width:190px;
 transition:transform .7s var(--mola)}
.rcard:hover .rfoto img{transform:translateX(-6px) scale(1.04)}
.rlist{list-style:none;padding:0}

/* ══ 5 · COMO FUNCIONA ═════════════════════════════════════════ */
.como{padding:110px 0 120px;background:var(--bg)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.passo{text-align:center;padding:0 22px;position:relative}
/* linha pontilhada entre os passos — some no último e no mobile */
.passo::after{content:'';position:absolute;top:38px;left:calc(50% + 52px);
 right:calc(-50% + 52px);height:2px;
 background-image:linear-gradient(90deg,var(--linha) 55%,transparent 0);
 background-size:9px 2px}
.passo:last-child::after{display:none}
.passo i{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
 background:var(--agua);margin:0 auto 22px;position:relative;z-index:1;
 box-shadow:0 14px 30px -14px rgba(0,196,180,.85);
 transition:transform .6s var(--mola),box-shadow .6s var(--mola)}
.passo:hover i{transform:translateY(-6px) scale(1.05);
 box-shadow:0 22px 38px -16px rgba(0,196,180,.85)}
.passo i svg{width:30px;height:30px;stroke:var(--mar);stroke-width:1.9}
.passo .et{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;color:var(--agua-esc);margin-bottom:8px}
.passo h3{font-size:18px;margin-bottom:10px}
.passo p{font-size:14.5px;line-height:1.65;max-width:230px;margin-inline:auto}

/* ══ 6 · DEPOIMENTOS ═══════════════════════════════════════════ */
.dep{padding:110px 0;background:var(--areia)}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dcard{background:#fff;border-radius:var(--r-g);border:1px solid var(--linha-2);
 padding:30px 28px 28px;position:relative;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola)}
.dcard:hover{transform:translateY(-8px);box-shadow:var(--sombra-alta)}
.dcard .aspas{position:absolute;top:24px;right:26px;font-size:54px;line-height:1;
 font-family:Georgia,serif;color:var(--linha);transition:color .45s ease}
.dcard:hover .aspas{color:#CFE8E3}
.dtopo{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.dtopo img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
 border:2px solid var(--linha-2)}
.dtopo b{display:block;font-size:15.5px;color:var(--tinta);font-weight:700}
.estrelas{display:flex;gap:2px;margin-top:5px}
.estrelas svg{width:14px;height:14px;fill:var(--dourado);stroke:none}
.dcard p{font-size:14.8px;line-height:1.7;color:var(--corpo)}
.dcard .rota{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
 font-size:12.5px;font-weight:600;color:var(--agua-esc);background:var(--agua-clara);
 padding:6px 12px;border-radius:999px}
.dcard .rota svg{width:14px;height:14px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:34px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--linha);
 transition:width .45s var(--mola),background .35s ease}
.dots i.on{width:26px;border-radius:4px;background:var(--agua)}

/* ══ 7 · DESTINOS ══════════════════════════════════════════════ */
.dest{padding:110px 0}
.desttop{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
 margin-bottom:52px}
.desttop .sechd{margin-bottom:0}
.egrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ecard{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3.1;
 display:block;transition:transform .6s var(--mola),box-shadow .6s var(--mola)}
.ecard:hover{transform:translateY(-8px);box-shadow:var(--sombra-alta)}
.ecard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--mola)}
.ecard:hover img{transform:scale(1.08)}
.ecard::after{content:'';position:absolute;inset:0;
 background:linear-gradient(180deg,transparent 34%,rgba(8,20,38,.82) 100%)}
.einfo{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;
 display:flex;align-items:flex-end;justify-content:space-between;gap:10px;color:#fff}
.einfo b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.einfo span{display:block;font-size:12.5px;color:rgba(255,255,255,.72);margin-top:3px}
.einfo .sv{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);
 backdrop-filter:blur(6px);display:grid;place-items:center;flex:none;
 transition:background .4s ease,transform .5s var(--mola)}
.einfo .sv svg{width:15px;height:15px;stroke:#fff;stroke-width:2}
.ecard:hover .sv{background:var(--agua);transform:translateX(3px)}
.ecard:hover .sv svg{stroke:var(--mar)}

/* ══ 8 · FAIXA DE CONTATO ══════════════════════════════════════ */
.faixa{background:var(--agua);color:var(--mar);
 background-image:radial-gradient(700px 240px at 8% 0%,rgba(255,255,255,.35),transparent 65%)}
.faixain{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:34px 0}
.fx{display:flex;align-items:center;gap:16px;color:var(--mar);justify-content:center}
.fx i{width:50px;height:50px;border-radius:13px;background:rgba(4,51,59,.10);
 display:grid;place-items:center;flex:none;
 transition:background .4s ease,transform .55s var(--mola)}
.fx:hover i{background:rgba(4,51,59,.18);transform:translateY(-3px)}
.fx i svg{width:22px;height:22px;stroke:var(--mar)}
.fx span{display:block;font-size:12.5px;color:rgba(4,51,59,.72)}
.fx b{display:block;font-size:17px;font-weight:700;margin-top:2px}

/* ══ 9 · RODAPÉ ════════════════════════════════════════════════ */
.rod{background:var(--mar);color:rgba(255,255,255,.6);padding:76px 0 0;
 background-image:radial-gradient(900px 400px at 85% 0%,rgba(0,196,180,.34),transparent 66%)}
.rodgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.15fr;gap:40px;
 padding-bottom:58px}
.rodmarca .logo b{color:#fff}
.rodmarca .logo b span{color:rgba(255,255,255,.45)}
.rodmarca .logo small{color:rgba(255,255,255,.42)}
.rodmarca p{margin-top:22px;font-size:14.5px;line-height:1.7;max-width:290px}
.social{display:flex;gap:10px;margin-top:24px}
.social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
 display:grid;place-items:center;
 transition:background .35s ease,transform .5s var(--mola)}
.social a:hover{background:var(--agua);transform:translateY(-3px)}
.social a:hover svg{stroke:var(--mar)}
.social svg{width:17px;height:17px;stroke:#fff;stroke-width:1.7}
.rodcol h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:20px;
 letter-spacing:-.01em}
.rodcol ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rodcol a{font-size:14.2px;color:rgba(255,255,255,.58);
 transition:color .3s ease,padding-left .4s var(--mola)}
.rodcol a:hover{color:#fff;padding-left:5px}
.rodcol .linha-c{display:flex;gap:11px;font-size:14.2px;line-height:1.55;
 color:rgba(255,255,255,.58)}
.rodcol .linha-c svg{width:16px;height:16px;stroke:var(--agua-mid);margin-top:3px}
.rodbase{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;text-align:center;
 font-size:13px;color:rgba(255,255,255,.4)}

/* ══ BOTÃO FLUTUANTE DO WHATSAPP ═══════════════════════════════ */
.wa{position:fixed;right:24px;bottom:24px;z-index:950;width:58px;height:58px;
 border-radius:50%;background:#25D366;display:grid;place-items:center;
 box-shadow:0 14px 30px -10px rgba(37,211,102,.75);
 transition:transform .55s var(--mola),box-shadow .55s var(--mola)}
.wa:hover{transform:scale(1.08) translateY(-2px);
 box-shadow:0 20px 38px -12px rgba(37,211,102,.85)}
.wa svg{width:29px;height:29px;fill:#fff;stroke:none}
.wa::before{content:'';position:absolute;inset:0;border-radius:50%;
 border:2px solid rgba(37,211,102,.55);animation:pulso 2.6s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.5);opacity:0}
 100%{opacity:0}}

/* ══ REVEAL — mesmo sistema [data-rv] dos sites anteriores ══════ */
.anim [data-rv]{opacity:0;transform:translate3d(0,26px,0);
 transition:opacity .85s var(--mola) var(--d,0s),transform .95s var(--mola) var(--d,0s)}
.anim [data-rv="left"]{transform:translate3d(-34px,0,0)}
.anim [data-rv="right"]{transform:translate3d(34px,0,0)}
.anim [data-rv="zoom"]{transform:scale(.94)}
.anim [data-rv].in{opacity:1;transform:none}

/* onda diagonal das grades — o atraso --wd vem do anim.js */
.anim .porgrid .porcard[data-wave],
.anim .servgrid .scard[data-wave],
.anim .fgrid .fcard[data-wave],
.anim .rgrid .rcard[data-wave],
.anim .pgrid .passo[data-wave],
.anim .dgrid .dcard[data-wave],
.anim .egrid .ecard[data-wave]{
 opacity:0;transform:translate3d(0,34px,0) scale(.97);
 transition:opacity 1s var(--mola) var(--wd,0s),transform 1s var(--mola) var(--wd,0s)}
.anim .porgrid .porcard[data-wave].wv-in,
.anim .servgrid .scard[data-wave].wv-in,
.anim .fgrid .fcard[data-wave].wv-in,
.anim .rgrid .rcard[data-wave].wv-in,
.anim .pgrid .passo[data-wave].wv-in,
.anim .dgrid .dcard[data-wave].wv-in,
.anim .egrid .ecard[data-wave].wv-in{opacity:1;transform:none}

/* cursor do título datilografado */
.cursor{display:inline-block;width:2px;height:.82em;background:currentColor;
 margin-left:3px;vertical-align:-1px;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.cursor.off{display:none}

@media (prefers-reduced-motion:reduce){
 *{animation:none!important;transition-duration:.01ms!important}
 html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
   O hero é uma foto de fundo, então ele não precisa reorganizar peça
   nenhuma ao estreitar: o que muda é o véu (fica vertical, para o
   texto não cair em cima do carro) e a barra de cotação, que passa de
   uma linha para campos empilhados.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1240px){
 .wrap{width:min(1320px,calc(100% - 72px))}
 .navlinks{gap:26px;font-size:15px}
 .servgrid{grid-template-columns:repeat(3,1fr)}
 .navin{gap:28px}
 .rotapanel{padding:44px}
}
@media (max-width:1080px){
 .navfone{display:none}
 .fgrid,.egrid{grid-template-columns:repeat(3,1fr)}
 .rotapanel{grid-template-columns:1fr;gap:34px}
 .rotacopy p{max-width:none}
 .cotaform{grid-template-columns:1fr 1fr;gap:22px 0}
 .campo{padding:0 22px 14px 0;border-right:0;
  border-bottom:1px solid rgba(255,255,255,.13)}
 .cotaform .btn{grid-column:1/-1;margin-left:0;margin-top:10px}
}
@media (max-width:980px){
 .porgrid{grid-template-columns:repeat(2,1fr)}
 .nums{grid-template-columns:repeat(2,1fr)}
 .num:nth-child(2){border-right:0}
 .num:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
 .pgrid{grid-template-columns:repeat(2,1fr);gap:46px 0}
 .passo:nth-child(2)::after{display:none}
 .dgrid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
 .rodgrid{grid-template-columns:1fr 1fr 1fr;gap:38px}
 .rodmarca{grid-column:1/-1}
 .rodmarca p{max-width:460px}
}
@media (max-width:900px){
 :root{--topo:74px}
 .wrap{width:calc(100% - 44px)}
 .burger{display:grid}
 /* menu em painel deslizante — a nav vira coluna quando .aberto */
 .navlinks{position:fixed;inset:var(--topo) 0 auto;flex-direction:column;gap:0;
  background:#fff;border-bottom:1px solid var(--linha);padding:8px 22px 20px;
  margin:0;transform:translateY(-14px);opacity:0;pointer-events:none;
  box-shadow:0 22px 40px -26px rgba(6,40,44,.55);
  transition:transform .5s var(--mola),opacity .4s ease}
 .nav.aberto .navlinks{transform:none;opacity:1;pointer-events:auto}
 .navlinks a{padding:14px 0;border-bottom:1px solid var(--linha-2);font-size:16px}
 .navlinks a::after{display:none}
 .navright{margin-left:auto}
 .navright .btn{padding:12px 18px;font-size:14px}
 /* o painel do menu é branco, então a nav assume o tema claro enquanto
    estiver aberta, mesmo parada no topo sobre o hero escuro */
 .nav.aberto{background:rgba(255,255,255,.96);border-color:var(--linha)}
 .nav.aberto .logo b{color:var(--tinta)}
 .nav.aberto .logo b span,.nav.aberto .logo small{color:var(--suave)}
 .nav.aberto .navfone{color:var(--tinta)}
 .nav.aberto .burger{border-color:var(--linha)}
 .nav.aberto .burger span{background:var(--tinta)}
 .nav.aberto .navlinks a{color:var(--corpo)}
 /* véu na vertical: o texto ocupa a largura toda e o carro fica embaixo */
 .hero-foto img{object-position:70% 62%}
 .hero-foto::after{background:
  linear-gradient(180deg,rgba(3,26,29,.92) 0%,rgba(3,26,29,.88) 42%,
   rgba(4,30,34,.72) 64%,rgba(4,30,34,.58) 82%,rgba(4,30,34,.66) 100%)}
 .heroin{min-height:0;padding:44px 0 40px}
 .hcopy{margin-top:0}
 .cota{margin-top:36px}
 .hcopy{max-width:none}
 .hcopy > p{max-width:540px}
 .hcopy > p br{display:none}
 .cota{margin-top:40px;padding:22px 20px 24px}
 .por{padding:110px 0 90px}
 .frota,.como,.dep,.dest,.serv{padding:84px 0}
 .servgrid{grid-template-columns:repeat(2,1fr);gap:16px}
 .frotanota{text-align:left;max-width:none}
 .frotatop,.desttop{flex-direction:column;align-items:flex-start;gap:20px}
 .faixain{grid-template-columns:1fr;gap:22px;padding:30px 0}
 .fx{justify-content:flex-start}
}
@media (max-width:680px){
 .fgrid,.egrid{grid-template-columns:repeat(2,1fr)}

 .hselos{margin-top:32px}
 .hselo{padding:0 20px}
 .cotaform{grid-template-columns:1fr}
 .sechd{margin-bottom:38px}
 .rodgrid{grid-template-columns:1fr 1fr}
 .rodcol:last-child{grid-column:1/-1}
 .wa{right:16px;bottom:16px;width:54px;height:54px}
}
@media (max-width:600px){
 /* logo + CTA + hambúrguer não cabem lado a lado: o CTA sai e a conversa
    continua pelo botão flutuante do WhatsApp e pelo formulário do hero */
 .navright .btn{display:none}
 /* sem divisórias verticais quando os selos empilham */
 .hselos{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:30px}
 .hselo{padding:0;border-left:0;gap:11px}
 .hselo > svg{width:25px;height:25px}
 .hselo b{font-size:15px}
 .hselo > span > span{font-size:12.5px}
}
@media (max-width:480px){
 .hcopy h1{font-size:33px}
 .hcopy > p{font-size:16.5px}
 .hselos{grid-template-columns:1fr}
 .cotahd{flex-direction:column;gap:4px}
 .porgrid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
 .nums{grid-template-columns:1fr}
 .num{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
 .num:last-child{border-bottom:0}
 .pgrid{grid-template-columns:1fr;gap:38px}
 .passo::after{display:none}
 .passo p{max-width:none}
 .fgrid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
 .egrid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
 .servgrid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}
 .chip{padding:10px 18px;font-size:14px}
 .logo small{display:none}
}