/* ==========================================================================
site.css — layout do site público (header, nav, rodapé, WhatsApp, seções)
Seções de conteúdo (hero, sobre, frota…) entram nas Tasks 6–8 abaixo de LAYOUT.
========================================================================== */
/* --------------------------------------------------------------------------
HEADER (fixo, transparente sobre o hero; Plano 4 alterna .is-solid/.is-hidden)
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 50;
color: var(--off-white);
background: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.site-header { transition: transform var(--dur) var(--ease-out), background-color .3s ease; }
}
.site-header.is-solid {
background: rgba(0, 54, 51, .72);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: inset 0 -1px 0 var(--line-light);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: var(--header-h);
padding-block: 12px;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; position: relative; z-index: 2; }
.brand img { width: auto; height: 56px; }
@media (min-width: 1024px) { .brand img { height: 64px; } }
/* Botão do menu (só com JS; o atributo hidden é removido pelo site.js) */
.nav-toggle {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 0 4px 0 12px;
font: 600 .8125rem/1 var(--font-text);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--off-white);
position: relative;
z-index: 2;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle__icon {
position: relative;
width: 40px;
height: 40px;
border: 1px solid var(--line-light);
border-radius: 50%;
display: grid;
place-items: center;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
content: "";
position: absolute;
width: 16px;
height: 1.5px;
background: currentColor;
transform: translateY(-3.5px);
}
.nav-toggle__icon::after { transform: translateY(3.5px); }
.nav-toggle__label--close { display: none; }
body.is-open .nav-toggle__label--open { display: none; }
body.is-open .nav-toggle__label--close { display: inline; }
body.is-open .nav-toggle__icon::before { transform: rotate(45deg); }
body.is-open .nav-toggle__icon::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
.nav-toggle__icon::before, .nav-toggle__icon::after { transition: transform .35s var(--ease-out); }
}
@media (min-width: 1024px) { .nav-toggle { display: none !important; } }
/* Navegação */
.site-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
}
.site-nav a:not(.btn) { position: relative; padding-block: 6px; }
.site-nav a:not(.btn)::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
}
.site-nav a:not(.btn):hover::after,
.site-nav a:not(.btn):focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
.site-nav a:not(.btn)::after { transition: transform .35s var(--ease-out); }
}
/* Desktop: tudo inline */
@media (min-width: 1024px) {
.site-nav {
display: flex;
align-items: center;
gap: 36px;
font: 500 .9375rem/1 var(--font-text);
letter-spacing: .01em;
}
.site-nav ul { gap: 28px; }
}
/* Desktop estreito: com "Perguntas frequentes" o menu não cabia numa linha em 1024px */
@media (min-width: 1024px) and (max-width: 1279.98px) {
.site-nav { gap: 20px; font-size: .875rem; }
.site-nav ul { gap: 14px; }
}
/* Sem JS em telas menores: links em linha, pequenos, abaixo do logo */
@media (max-width: 1023.98px) {
html:not(.js) .site-header__inner { flex-wrap: wrap; padding-bottom: 14px; }
html:not(.js) .site-nav {
flex-basis: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 20px;
font: 500 .875rem/1 var(--font-text);
padding-top: 6px;
border-top: 1px solid var(--line-light);
}
html:not(.js) .site-nav ul { gap: 4px 18px; }
html:not(.js) .site-nav .btn { margin-left: auto; }
}
/* Com JS em telas menores: painel full-screen em --teal-deep */
@media (max-width: 1023.98px) {
html.js .site-nav {
position: fixed;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 40px;
padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
background: var(--teal-deep);
color: var(--off-white);
visibility: hidden;
opacity: 0;
overflow-y: auto;
}
html.js .site-nav::before {
/* fio dourado vertical, assinatura do painel */
content: "";
position: absolute;
top: var(--header-h);
bottom: 40px;
left: var(--gutter);
width: 1px;
background: var(--line);
opacity: .6;
}
html.js body.is-open .site-nav { visibility: visible; opacity: 1; }
html.js .site-nav ul {
flex-direction: column;
gap: 0;
padding-left: 28px;
counter-reset: nav;
}
html.js .site-nav li {
counter-increment: nav;
border-bottom: 1px solid var(--line-light);
opacity: 0;
transform: translateY(14px);
}
html.js body.is-open .site-nav li { opacity: 1; transform: none; }
html.js .site-nav li a {
display: flex;
align-items: baseline;
gap: 18px;
padding-block: 18px;
font-family: var(--font-display);
font-size: clamp(2rem, 7vw, 2.75rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -.01em;
}
html.js .site-nav li a::before {
content: counter(nav, decimal-leading-zero);
font: 600 var(--fs-eyebrow)/1 var(--font-text);
letter-spacing: .14em;
color: var(--gold);
}
html.js .site-nav li a::after { display: none; }
html.js .site-nav .btn { align-self: flex-start; margin-left: 28px; min-height: 52px; font-size: .9375rem; padding-inline: 28px; }
body.is-open { overflow: hidden; }
/* Com o menu aberto o header não pode ter backdrop-filter nem transform (.is-solid / .is-hidden): qualquer um dos
dois vira containing block do painel fixed, que passa a medir só o header (menu cortado com a página rolada). */
body.is-open .site-header {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: none;
box-shadow: none;
}
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
html.js.nav-ready .site-nav { transition: opacity .4s ease, visibility 0s linear .4s; }
html.js.nav-ready body.is-open .site-nav { transition: opacity .4s ease, visibility 0s; }
html.js.nav-ready .site-nav li { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
html.js body.is-open .site-nav li:nth-child(1) { transition-delay: .08s; }
html.js body.is-open .site-nav li:nth-child(2) { transition-delay: .13s; }
html.js body.is-open .site-nav li:nth-child(3) { transition-delay: .18s; }
html.js body.is-open .site-nav li:nth-child(4) { transition-delay: .23s; }
html.js body.is-open .site-nav li:nth-child(5) { transition-delay: .28s; }
html.js body.is-open .site-nav li:nth-child(6) { transition-delay: .33s; }
}
/* Submenu "Unidades" (páginas por cidade). Desktop: abre no hover/foco. Painel mobile: lista curta sob o item, sem numeração. */
.site-nav .site-nav__sub { flex-direction: column; flex-wrap: nowrap; gap: 0; }
@media (min-width: 1024px) {
.site-nav__group { position: relative; }
.site-nav .site-nav__sub {
position: absolute;
top: 100%;
left: -18px;
min-width: 200px;
padding: 10px 18px;
margin-top: 10px;
background: var(--teal-deep);
border: 1px solid var(--line-light);
border-radius: 12px;
box-shadow: var(--shadow-card);
visibility: hidden;
opacity: 0;
}
/* ponte invisível entre o item e o submenu: o hover não cai no vão */
.site-nav .site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.site-nav__group:hover > .site-nav__sub,
.site-nav__group:focus-within > .site-nav__sub { visibility: visible; opacity: 1; }
.site-nav__sub a { display: inline-block; padding-block: 8px; white-space: nowrap; }
/* header escondido pela rolagem leva o submenu junto (o hover do mouse parado não o deixa pendurado na tela) */
.site-header.is-hidden .site-nav .site-nav__sub { visibility: hidden; opacity: 0; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
.site-nav .site-nav__sub { transition: opacity .25s ease, visibility 0s linear .25s; }
.site-nav__group:hover > .site-nav__sub,
.site-nav__group:focus-within > .site-nav__sub { transition: opacity .25s ease, visibility 0s; }
}
@media (max-width: 1023.98px) {
/* sem JS: as cidades entram na mesma linha de links do header */
html:not(.js) .site-nav__group { display: flex; flex-wrap: wrap; gap: 4px 18px; }
html:not(.js) .site-nav .site-nav__sub { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
/* painel: cidades numa linha corrida sob "Unidades", encostadas no item, para o painel não crescer */
html.js .site-nav .site-nav__sub { flex-direction: row; flex-wrap: wrap; gap: 0 18px; margin-top: -10px; padding: 0 0 12px 40px; }
html.js .site-nav .site-nav__sub li { counter-increment: none; border-bottom: 0; opacity: 1; transform: none; }
html.js .site-nav .site-nav__sub a {
display: inline-flex;
padding-block: 4px;
font: 500 .9375rem/1.3 var(--font-text);
letter-spacing: .01em;
opacity: .82;
}
html.js .site-nav .site-nav__sub a::before { content: none; }
}
/* Telas curtas (celular comum): itens do painel um pouco mais baixos, para tudo caber sem rolar com as cidades */
@media (max-width: 1023.98px) and (max-height: 760px) {
html.js .site-nav > ul > li > a { padding-block: 12px; }
}
/* --------------------------------------------------------------------------
RODAPÉ
-------------------------------------------------------------------------- */
.site-footer {
background: var(--teal-deep);
color: var(--off-white);
padding-block: clamp(64px, 8vw, 112px) 32px;
border-top: 1px solid var(--line-light);
}
.site-footer__grid {
display: grid;
gap: 48px 40px;
}
@media (min-width: 768px) {
.site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px 48px; }
}
.site-footer__brand img { width: auto; height: 72px; margin-bottom: 24px; }
.site-footer__brand p { max-width: 38ch; opacity: .78; font-size: var(--fs-body); }
.site-footer__title {
display: block;
margin-bottom: 20px;
font: 600 var(--fs-eyebrow)/1 var(--font-text);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.site-footer__links a { opacity: .86; }
.site-footer__links a:hover { opacity: 1; color: var(--gold-soft); }
.site-footer__unit { display: grid; gap: 2px; }
.site-footer__unit strong { font-weight: 600; }
.site-footer__unit a, .site-footer__unit span { opacity: .78; font-size: var(--fs-small); }
.site-footer__unit a:hover { opacity: 1; color: var(--gold-soft); }
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 24px;
margin-top: clamp(48px, 6vw, 80px);
padding-top: 24px;
border-top: 1px solid var(--line-light);
font-size: var(--fs-small);
opacity: .62;
}
@media (prefers-reduced-motion: no-preference) {
.site-footer a { transition: color .25s ease, opacity .25s ease; }
}
/* --------------------------------------------------------------------------
WHATSAPP FLUTUANTE (pulso vem no Plano 4)
-------------------------------------------------------------------------- */
.wa-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 40;
width: 56px;
height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--teal);
color: var(--off-white);
box-shadow: 0 14px 34px -12px rgba(0, 27, 25, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.wa-float svg { width: 28px; height: 28px; }
.wa-float:hover { background: var(--teal-dark); }
.wa-float:active svg { transform: scale(.9); }
@media (prefers-reduced-motion: no-preference) {
.wa-float { transition: background-color .25s ease; }
.wa-float svg { transition: transform .15s ease; }
}
body.is-open .wa-float { visibility: hidden; }
/* ==========================================================================
SEÇÕES DE CONTEÚDO
========================================================================== */
/* Cabeçalho de seção dividido: título à esquerda, apoio à direita (≥1024) */
.section__head--split { gap: 24px 64px; align-items: end; }
.section__head-main { display: grid; gap: 20px; }
.section__head-aside { display: grid; gap: 14px; max-width: 44ch; }
.section__head-aside p { font-size: var(--fs-body); opacity: .82; }
@media (min-width: 1024px) {
.section__head--split { grid-template-columns: 7fr 5fr; }
.section__head-aside { padding-bottom: .35em; justify-self: end; }
}
/* ==== Hero ==== */
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 100vh;
min-height: 100svh;
display: grid;
align-items: end;
padding-top: var(--header-h);
color: var(--off-white);
background: var(--teal-deep);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero-video-frame { position: absolute; inset: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 768px) and (max-width: 1023.98px) {
/* tablet corta em cima/embaixo: mostra a parte de baixo do quadro, o assunto sobe para longe do título */
.hero-video { object-position: center 100%; }
/* vídeo horizontal/quadrado corta nas laterais, não em cima: fica centrado */
.hero--landscape .hero-video, .hero--square .hero-video { object-position: center; }
}
.hero-video-frame__stroke { display: none; }
.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 27, 25, .22) 0%, rgba(0, 27, 25, .42) 40%, rgba(0, 27, 25, .8) 72%, rgba(0, 27, 25, .92) 100%);
}
.hero__content {
display: grid;
gap: 22px;
justify-items: start;
padding-block: 48px clamp(48px, 10vh, 96px);
}
.hero .eyebrow { color: var(--gold); }
.hero-title { max-width: 14ch; color: var(--off-white); }
.hero__subtitle { max-width: 42ch; font-size: var(--fs-body); line-height: 1.6; opacity: .86; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.hero-ctas .btn--ghost { color: var(--off-white); border-color: rgba(252, 251, 248, .5); }
.hero-ctas .btn--ghost:hover { border-color: var(--off-white); }
@media (min-width: 1024px) {
.hero {
--hero-pad: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter)); /* alinha com o .container do header */
/* Moldura na proporção do vídeo (--frame-ratio vem inline do hero.php, travada entre 9:16 e 16:9; sem dimensões
vale 9:16) com até 78vh de altura e um teto de largura por orientação; nunca passa da coluna (100%). */
--frame-ratio: 9 / 16;
--frame-h-cap: 78vh;
--frame-max-w: 420px;
--frame-w: min(100%, var(--frame-max-w), calc(var(--frame-h-cap) * (var(--frame-ratio))));
--frame-short: min(var(--frame-w), calc(var(--frame-w) / (var(--frame-ratio)))); /* lado menor: base do raio dos cantos */
grid-template-columns: 7fr 5fr;
align-items: center;
min-height: 100vh;
padding: 96px var(--hero-pad) 72px;
background:
radial-gradient(60% 50% at 80% 20%, rgba(190, 155, 71, .12), transparent),
var(--teal-dark);
box-shadow: inset 0 -1px 0 var(--line);
}
.hero__media {
position: relative;
inset: auto;
z-index: 0;
grid-column: 2;
grid-row: 1;
display: flex;
justify-content: center;
align-items: center;
}
.hero__overlay { display: none; }
.hero--landscape { --frame-max-w: 640px; grid-template-columns: 1fr 1fr; }
.hero--square { --frame-max-w: 480px; }
.hero-video-frame {
position: relative;
inset: auto;
width: var(--frame-w);
aspect-ratio: var(--frame-ratio);
/* raio segue o rx="43" do traço SVG (43/720 do lado menor do viewBox) */
border-radius: calc(var(--frame-short) * 43 / 720);
overflow: hidden;
background: var(--teal-deep);
box-shadow: var(--shadow-card);
}
.hero-video { object-fit: contain; background: var(--teal-deep); }
/* com dimensões conhecidas a moldura já tem a proporção do vídeo (ou a borda do intervalo): cover centrado, sem barras */
.hero-video-frame--known .hero-video { object-fit: cover; object-position: center; }
.hero-video-frame__stroke { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__content {
grid-column: 1;
grid-row: 1;
max-width: none;
margin: 0;
padding: 0 clamp(40px, 6vw, 96px) 0 0;
gap: 26px;
}
/* notebook (viewport ≤ 800px de altura): título encolhe com a altura para os CTAs ficarem na dobra; acima disso 10vh ≥ 80px e vale a escala normal */
.hero-title { max-width: 12ch; font-size: min(var(--fs-display), 10vh); }
.hero__subtitle { max-width: 40ch; }
.hero-ctas { margin-top: 14px; gap: 14px; }
}
@media (min-width: 1024px) and (max-height: 800px) {
/* notebook: 78vh + header + respiro passa da dobra; moldura cabe entre os 96px de cima e o respiro de baixo */
.hero { --frame-h-cap: calc(100vh - 200px); }
}
/* ==== Sobre (pilares) ==== */
.pillars {
display: grid;
gap: clamp(32px, 4vw, 56px);
margin-top: clamp(16px, 3vw, 40px);
}
.pillar {
position: relative;
display: grid;
gap: 18px;
padding-top: 28px;
border-top: 1px solid var(--line);
}
.pillar::before {
/* marca dourada curta sobre a linha */
content: "";
position: absolute;
top: -1px;
left: 0;
width: 40px;
height: 1px;
background: var(--gold);
}
.pillar__icon { display: inline-flex; color: var(--gold-deep); }
.pillar__icon .icon { width: 28px; height: 28px; }
.pillar__title { font-size: var(--fs-h3); }
.pillar__text { font-size: var(--fs-body); opacity: .82; max-width: 34ch; }
@media (min-width: 768px) {
.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
/* escalonamento suave: cada pilar desce um pouco, quebrando a fileira rígida */
.pillar { padding-top: 32px; gap: 22px; margin-top: calc(var(--i, 0) * 40px); }
}
/* ==== Como funciona ==== */
.how__track { position: relative; }
/* Linha dourada de progresso: vertical no mobile (sobre a borda esquerda da lista), horizontal no desktop (sobre o trilho).
O estado inicial (escala 0) é aplicado pelo motion.js; sem JS a linha aparece inteira. */
.how-progress {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
background: var(--gold);
transform-origin: top;
}
.how-steps {
list-style: none;
margin: 0;
padding: 0 0 0 28px;
display: grid;
gap: clamp(36px, 6vw, 56px);
border-left: 1px solid var(--line-light);
}
.how-step { position: relative; display: grid; gap: 12px; }
.how-step::before {
/* marcador dourado na linha vertical */
content: "";
position: absolute;
top: .55em;
left: calc(-28px - 4.5px);
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 4px var(--teal-dark);
}
.how-step__num {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(3rem, 6vw, 5rem);
line-height: .9;
letter-spacing: -.02em;
color: var(--gold);
opacity: .9;
font-variant-numeric: lining-nums;
}
.how-step__title { font-size: var(--fs-h3); margin-top: 6px; }
.how-step__text { font-size: var(--fs-body); opacity: .8; max-width: 30ch; }
@media (max-width: 1023.98px) {
.how-step__num { font-weight: 600; }
}
@media (min-width: 1024px) {
.how__track { padding-top: 48px; }
.how__track::before {
/* trilho apagado; a linha dourada .how-progress corre por cima (Plano 4) */
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--line-light);
}
.how-progress { bottom: auto; right: 0; width: auto; height: 1px; transform-origin: left; }
/* seção pinada pelo ScrollTrigger: ocupa a viewport e centra o conteúdo */
.how--pin { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.how-steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 40px;
padding: 0;
border-left: 0;
}
.how-step { gap: 16px; }
.how-step::before { top: -52px; left: 0; }
.how-step__title { margin-top: 10px; }
}
/* ==== Frota ==== */
.fleet__aside { justify-self: start; }
@media (min-width: 1024px) {
.fleet__aside { justify-self: end; padding-bottom: .5em; }
}
.fleet-filter {
display: inline-flex;
gap: 4px;
padding: 4px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--off-white);
}
.fleet-filter button {
display: inline-flex;
align-items: center;
min-height: 40px;
padding-inline: 18px;
border: none;
border-radius: 999px;
font: 600 .8125rem/1 var(--font-text);
letter-spacing: .04em;
color: var(--teal-dark);
background: transparent;
opacity: .78;
cursor: pointer;
}
.fleet-filter button:hover { opacity: 1; }
.fleet-filter button[aria-pressed="true"] { background: var(--teal-deep); color: var(--off-white); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.fleet-filter button { transition: background-color .3s ease, color .3s ease, opacity .3s ease; }
}
.fleet-grid {
display: grid;
gap: clamp(24px, 3vw, 40px);
align-items: stretch; /* linhas de base alinhadas por fileira; o CTA desce para o fim do card */
}
@media (min-width: 768px) { .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fleet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3vw, 40px) clamp(24px, 3vw, 40px); } }
.fleet-card {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
padding-bottom: 28px;
border-bottom: 1px solid var(--line);
}
.fleet-card[hidden] { display: none; }
.fleet-card::after {
/* linha dourada que acende no hover, por cima da linha apagada */
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
}
.fleet-card:hover::after, .fleet-card:focus-within::after { transform: scaleX(1); }
.fleet-card__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-card);
background: var(--sand);
isolation: isolate;
}
.fleet-card__media picture, .fleet-card__img { width: 100%; height: 100%; }
.fleet-card__img { object-fit: cover; object-position: center; }
.fleet-card__media::after {
/* véu discreto na base para o contador ler bem sobre qualquer foto */
content: "";
position: absolute;
inset: auto 0 0;
height: 40%;
background: linear-gradient(180deg, rgba(0, 27, 25, 0), rgba(0, 27, 25, .35));
pointer-events: none;
}
.fleet-card__badge, .fleet-card__count {
position: absolute;
z-index: 1;
display: inline-flex;
align-items: center;
min-height: 30px;
padding-inline: 12px;
border-radius: 999px;
font: 600 .75rem/1 var(--font-text);
letter-spacing: .12em;
text-transform: uppercase;
}
.fleet-card__badge { top: 16px; left: 16px; background: var(--gold); color: var(--teal-deep); }
.fleet-card__count {
right: 16px;
bottom: 16px;
background: rgba(0, 27, 25, .55);
color: var(--off-white);
letter-spacing: .06em;
text-transform: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.fleet-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 22px; }
.fleet-card__body > * { max-width: 100%; }
.fleet-card__specs, .fleet-card__terms { align-self: stretch; }
.fleet-card__type {
font: 600 var(--fs-eyebrow)/1 var(--font-text);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-deep);
}
.fleet-card__name { font-size: var(--fs-h3); }
.fleet-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fleet-card__label { font-size: var(--fs-small); opacity: .7; }
.fleet-card__price strong { font: 600 1.25rem/1.2 var(--font-text); color: var(--teal-dark); letter-spacing: -.01em; }
.fleet-card__terms {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
font-size: var(--fs-small);
opacity: .82;
}
.fleet-card__terms li { position: relative; }
.fleet-card__terms li + li::before {
content: "";
position: absolute;
left: -11px;
top: .65em;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold);
}
.fleet-card__specs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 16px;
margin-top: 4px;
margin-bottom: 8px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.fleet-card__specs dt {
font: 600 .6875rem/1 var(--font-text);
letter-spacing: .12em;
text-transform: uppercase;
opacity: .58;
margin-bottom: 4px;
}
.fleet-card__specs dd { font-size: var(--fs-small); font-weight: 500; }
.fleet-card__cta { margin-top: auto; }
.fleet-card__name { text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
.fleet-card { transition: transform .6s var(--ease-out); }
.fleet-card::after { transition: transform .6s var(--ease-out); }
.fleet-card__media { transition: box-shadow .6s var(--ease-out); }
.fleet-card__img { transition: transform .8s var(--ease-out); }
.fleet-card:hover { transform: translateY(-6px); }
.fleet-card:hover .fleet-card__media { box-shadow: var(--shadow-card); }
.fleet-card:hover .fleet-card__img { transform: scale(1.05); }
}
/* ==== Marquee ==== */
.marquee {
overflow: hidden;
padding-block: clamp(22px, 3vw, 34px);
background: var(--sand);
color: var(--teal-dark);
border-block: 1px solid var(--line);
}
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 500;
line-height: 1;
letter-spacing: -.01em;
white-space: nowrap;
padding-inline: clamp(24px, 3vw, 44px);
}
@media (max-width: 1023.98px) { .marquee__item { font-weight: 600; } }
.marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Sem JS a faixa anda por CSS (Plano 2); com JS o motion.js assume (GSAP) — nunca os dois. O bloco reduce abaixo fica igual. */
@media (prefers-reduced-motion: no-preference) {
html:not(.js) .marquee__track { animation: marquee 40s linear infinite; }
html:not(.js) .marquee:hover .marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
/* faixa parada: uma só cópia, quebrando linha e centralizada */
.marquee__track { width: auto; animation: none; }
.marquee__group { flex-wrap: wrap; justify-content: center; gap: 12px 0; width: 100%; padding-inline: var(--gutter); }
.marquee__group[aria-hidden="true"] { display: none; }
.marquee__group .marquee__dot:last-child { display: none; }
}
/* ==== Por quê ==== */
.why-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line-light);
}
.why-item {
position: relative;
display: grid;
gap: 14px;
padding-block: clamp(28px, 4vw, 44px);
border-bottom: 1px solid var(--line-light);
}
.why-item::before {
/* marca dourada curta sobre a linha, mesma assinatura dos pilares */
content: "";
position: absolute;
top: -1px;
left: 0;
width: 40px;
height: 1px;
background: var(--gold);
opacity: 0;
}
.why-item:hover::before { opacity: 1; }
.why-item__mark { display: flex; align-items: center; gap: 16px; color: var(--gold); }
.why-item__num {
font: 600 var(--fs-eyebrow)/1 var(--font-text);
letter-spacing: .14em;
font-variant-numeric: lining-nums tabular-nums;
}
.why-item__icon { display: inline-flex; }
.why-item__title { font-size: var(--fs-h3); max-width: 18ch; }
.why-item__text { font-size: var(--fs-body); opacity: .8; max-width: 40ch; }
@media (min-width: 768px) {
.why-item { grid-template-columns: 112px minmax(0, 1fr); gap: 12px 32px; align-items: start; }
.why-item__mark { padding-top: .35em; }
.why-item__title, .why-item__text { grid-column: 2; }
}
@media (min-width: 1024px) {
.why-item { grid-template-columns: 140px minmax(0, 5fr) minmax(0, 6fr); gap: 0 clamp(32px, 5vw, 80px); }
.why-item__title { grid-column: 2; }
.why-item__text { grid-column: 3; padding-top: .45em; }
}
@media (prefers-reduced-motion: no-preference) {
.why-item::before { transition: opacity .4s ease; }
}
/* ==== Lightbox ==== */
.lightbox {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
padding: 84px 16px 96px;
background: rgba(0, 27, 25, .97);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--off-white);
}
.lightbox[hidden] { display: none; }
body.is-lightbox { overflow: hidden; }
.lightbox__figure {
display: grid;
gap: 14px;
justify-items: center;
max-width: min(1200px, 100%);
}
.lightbox__img {
max-width: 100%;
max-height: calc(100dvh - 220px);
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
background: var(--teal-deep);
}
.lightbox__caption { font-size: var(--fs-small); opacity: .8; text-align: center; max-width: 60ch; }
.lightbox__close, .lightbox__prev, .lightbox__next {
position: absolute;
z-index: 1;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 1px solid var(--line-light);
border-radius: 50%;
color: var(--off-white);
background: rgba(0, 27, 25, .4);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { border-color: var(--gold); color: var(--gold); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { bottom: 24px; left: calc(50% - 56px); }
.lightbox__next { bottom: 24px; right: calc(50% - 56px); }
.lightbox--single .lightbox__prev, .lightbox--single .lightbox__next { display: none; }
@media (min-width: 768px) {
.lightbox { padding: 84px 96px; }
.lightbox__prev { top: 50%; bottom: auto; left: 24px; transform: translateY(-50%); }
.lightbox__next { top: 50%; bottom: auto; right: 24px; transform: translateY(-50%); }
}
@keyframes lightbox-in { from { opacity: 0; } }
@keyframes lightbox-img-in { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: no-preference) {
.lightbox { animation: lightbox-in .3s ease; }
.lightbox__img { animation: lightbox-img-in .5s var(--ease-out); }
.lightbox__close, .lightbox__prev, .lightbox__next { transition: border-color .25s ease, color .25s ease; }
}
/* ==== Números ==== */
.stats-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
}
.stat {
position: relative;
display: grid;
gap: 10px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.stat::before {
/* marca dourada curta sobre a linha, mesma assinatura dos pilares */
content: "";
position: absolute;
top: -1px;
left: 0;
width: 40px;
height: 1px;
background: var(--gold);
}
.stat__value {
display: flex;
align-items: baseline;
gap: 2px;
max-width: none;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(3rem, 7vw, 5.5rem);
line-height: .9;
letter-spacing: -.02em;
color: var(--teal-dark);
font-variant-numeric: lining-nums tabular-nums;
}
.stat__prefix, .stat__suffix {
font-family: var(--font-text);
font-weight: 500;
font-size: clamp(1rem, 2vw, 1.5rem);
color: var(--gold-deep);
letter-spacing: 0;
}
.stat__prefix { margin-right: .12em; }
.stat__suffix { margin-left: .06em; }
.stat__label {
font-size: var(--fs-small);
line-height: 1.45;
color: var(--teal-dark);
opacity: .78;
max-width: 22ch;
}
@media (max-width: 1023.98px) {
.stat__value { font-weight: 600; }
}
@media (min-width: 768px) {
.stats-grid { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.stat { padding-top: 28px; gap: 14px; }
}
@media (min-width: 1024px) {
/* escalonamento suave: cada número desce um pouco, quebrando a fileira rígida */
.stat { margin-top: calc(var(--i, 0) * 28px); }
}
/* ==== Unidades ==== */
.units-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(40px, 6vw, 64px);
}
.unit {
position: relative;
display: grid;
gap: 14px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.unit::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 40px;
height: 1px;
background: var(--gold);
}
.unit__index {
font: 600 var(--fs-eyebrow)/1 var(--font-text);
letter-spacing: .14em;
color: var(--gold-deep);
font-variant-numeric: lining-nums tabular-nums;
}
.unit__city { font-size: var(--fs-h3); color: var(--teal-dark); }
.unit__city a { border-bottom: 1px solid transparent; }
.unit__city a:hover, .unit__city a:focus-visible { color: var(--gold-deep); border-bottom-color: var(--gold); }
.unit__name { font-weight: 600; font-size: var(--fs-body); }
.unit__address {
font-style: normal;
display: grid;
gap: 6px;
font-size: var(--fs-body);
line-height: 1.55;
opacity: .82;
max-width: 36ch;
}
.unit__line { display: block; }
.unit__contact {
display: inline-block;
justify-self: start;
color: var(--teal-dark);
font-size: .9375rem;
border-bottom: 1px solid var(--line);
padding-bottom: 1px;
overflow-wrap: anywhere;
}
.unit__contact:hover { border-bottom-color: var(--gold); color: var(--gold-deep); }
.unit__cta { margin-top: 10px; }
.unit__cta .btn--ghost { color: var(--teal-dark); }
.unit__cta .btn--ghost:hover { background: rgba(0, 54, 51, .06); }
@media (min-width: 768px) {
.units-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}
.unit { padding-top: 28px; gap: 16px; }
.unit + .unit {
/* linha dourada vertical entre as duas unidades */
border-left: 1px solid var(--line);
padding-left: clamp(24px, 4vw, 72px);
}
.unit:first-child { padding-right: clamp(24px, 4vw, 72px); }
}
@media (min-width: 1024px) {
.units-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.unit { padding-bottom: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
.unit__contact, .unit__city a { transition: border-color .25s ease, color .25s ease; }
}
/* ==== Página por cidade (/belem…) — topo escuro sob o header fixo, unidade ao lado do título ==== */
.city-hero { padding-top: calc(var(--header-h) + clamp(48px, 8vw, 112px)); }
.city-hero__inner { display: grid; gap: clamp(40px, 6vw, 72px); align-items: end; }
.city-hero__main { display: grid; gap: 20px; }
.city-hero__title { max-width: 16ch; font-size: var(--fs-h2); }
.city-hero__note { font-size: var(--fs-body); opacity: .82; max-width: 44ch; }
.city-unit {
position: relative;
display: grid;
gap: 16px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.city-unit::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--gold); }
.city-unit__name { font-size: var(--fs-h3); }
.city-unit__address { font-style: normal; display: grid; gap: 6px; font-size: var(--fs-body); line-height: 1.55; opacity: .86; max-width: 40ch; }
.city-unit__contact {
display: inline-block;
justify-self: start;
border-bottom: 1px solid var(--line);
padding-bottom: 1px;
overflow-wrap: anywhere;
}
.city-unit__contact:hover { border-bottom-color: var(--gold); color: var(--gold-soft); }
.city-unit__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (min-width: 1024px) {
.city-hero__inner { grid-template-columns: 7fr 5fr; gap: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
.city-unit__contact { transition: border-color .25s ease, color .25s ease; }
}
/* ==== Interesse ==== */
.lead { display: grid; gap: clamp(40px, 6vw, 72px); }
.lead__intro { display: grid; gap: 20px; align-content: start; }
.lead__subtitle { font-size: var(--fs-body); opacity: .82; max-width: 36ch; }
.lead__body { font-size: var(--fs-body); opacity: .72; max-width: 40ch; }
.lead-form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 22px 24px;
align-content: start;
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.field { display: grid; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
font: 600 var(--fs-small)/1.3 var(--font-text);
letter-spacing: .01em;
color: var(--off-white);
}
.field .opt { font-weight: 400; opacity: .6; }
.field input, .field select, .field textarea {
width: 100%;
min-height: 52px;
padding: 12px 16px;
border: 1px solid var(--line-light);
border-radius: 12px;
background: rgba(252, 251, 248, .05);
color: var(--off-white);
font: 400 1rem/1.4 var(--font-text);
outline: none;
-webkit-appearance: none;
appearance: none;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select {
padding-right: 44px;
/* stroke='%23BE9B47' é --gold (#BE9B47) hardcoded — SVG data-URI não lê custom property; manter em sync se --gold mudar */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
}
.field select option { color: var(--ink); background: var(--off-white); }
.field input::placeholder, .field textarea::placeholder { color: var(--off-white); opacity: .38; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(252, 251, 248, .28); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
border-color: var(--gold);
background: rgba(252, 251, 248, .08);
outline: none;
box-shadow: inset 0 0 0 1px var(--gold);
}
.field input:-webkit-autofill, .field textarea:-webkit-autofill {
-webkit-text-fill-color: var(--off-white);
-webkit-box-shadow: 0 0 0 1000px var(--teal-dark) inset;
caret-color: var(--off-white);
}
.field [aria-invalid="true"] { border-color: var(--gold-soft); }
.field__error {
display: block;
font-size: var(--fs-small);
line-height: 1.4;
color: var(--gold-soft);
}
.form-status {
grid-column: 1 / -1;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--gold-soft);
max-width: none;
}
.form-status:empty { display: none; }
.form-status.is-ok, .form-status.is-error {
padding: 14px 18px;
border: 1px solid var(--line-light);
border-left: 2px solid var(--gold);
border-radius: 0 12px 12px 0;
color: var(--off-white);
background: rgba(252, 251, 248, .04);
}
.lead-form__actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 14px 16px;
align-items: center;
margin-top: 6px;
}
.lead-form__actions .btn { flex: 1 1 auto; }
.lead-form__actions .btn--ghost { color: var(--off-white); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.btn--lg { min-height: 60px; padding-inline: 36px; font-size: 1rem; }
/* Confirmação (substitui o