/* =====================================================================================================
   Página institucional. Mesma identidade do sistema: preto azulado do logo, degradê da chama (âmbar -> laranja ->
   vermelho) e azul-petróleo da gota. Escura de propósito (a marca é desenhada para fundo escuro).
   Animações: entrada por palavra, revelações variadas ao rolar, brilho que segue o mouse, inclinação 3D, botões
   imantados, cursor, parallax, faixas em movimento e fundo que muda de tom por seção (ver landing.js).
   Tudo isso é desligado para quem pede "reduzir movimento" no sistema.
   ===================================================================================================== */

:root {
  color-scheme: dark;
  --fundo: #080d12;
  --bg: #080d12;
  --bg-2: #0b121a;
  --superficie: #0f1721;
  --superficie-2: #141f2b;
  --superficie-3: #1c2a3a;
  --borda: #1a2735;
  --borda-forte: #2a3c50;
  --texto: #e9eff6;
  --texto-fraco: #8b9db2;
  --acento: #fab01e;
  --acento-2: #ee7a12;
  --acento-3: #de3d17;
  --acento-texto: #1b1203;
  --acento-suave: rgba(250, 176, 30, 0.13);
  --acento-brilho: rgba(250, 176, 30, 0.32);
  --chama: linear-gradient(135deg, #fab01e 0%, #ee7a12 58%, #de3d17 100%);
  --teal: #26a7b3;
  --teal-2: #146c86;
  --teal-claro: #5cc6d0;
  --teal-suave: rgba(38, 167, 179, 0.14);
  --teal-brilho: rgba(38, 167, 179, 0.30);
  --foco: #5cc6d0;
  --ok: #4ade80;
  --raio: 20px;
  --raio-p: 12px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* desenho do veículo (mesmos valores do sistema) */
  --corpo: #18222e; --corpo-borda: #4d6178; --cabine: #202d3b; --vidro: #3f5873; --engate: #5f7389;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background-color: var(--fundo); color: var(--texto); font: 17px/1.6 var(--fonte); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color 1.4s ease; /* o fundo muda de tom suavemente a cada seção */
}
img { max-width: 100%; }
a { color: var(--teal-claro); }
h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.15; margin: 0; font-weight: 650; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--teal-brilho); }

.miolo { width: min(1180px, 100% - 40px); margin: 0 auto; }
.miolo.estreito { width: min(880px, 100% - 40px); }
.pular { position: absolute; left: 16px; top: -60px; z-index: 400; background: var(--acento); color: var(--acento-texto); padding: 10px 16px; border-radius: 10px; font-weight: 700; transition: top 0.2s; }
.pular:focus { top: 12px; }

/* barra de progresso da rolagem */
.progresso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300; pointer-events: none; }
.progresso span { display: block; height: 100%; background: var(--chama); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 14px var(--acento-brilho); }

/* ===================================== Cabeçalho ===================================== */

.topo { position: fixed; inset: 0 0 auto 0; z-index: 100; animation: descer 0.9s 0.1s var(--ease) both; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.topo.rolado { background: rgba(8, 13, 18, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--borda); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.marca { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.marca img { border-radius: 11px; display: block; transition: transform 0.4s var(--ease); }
.marca:hover img { transform: rotate(-3deg) scale(1.04); }
.marca span { display: flex; flex-direction: column; line-height: 1.15; }
.marca strong { font-size: 0.95rem; letter-spacing: 0.07em; text-transform: uppercase; background: var(--chama); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca small { color: var(--texto-fraco); font-size: 0.76rem; margin-top: 2px; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a { white-space: nowrap; }
.menu > a:not(.botao) { position: relative; color: #c4d0de; text-decoration: none; padding: 9px 13px; border-radius: 10px; font-size: 0.95rem; transition: color 0.2s; }
.menu > a:not(.botao)::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--chama); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease); }
.menu > a:not(.botao):hover { color: #fff; }
.menu > a:not(.botao):hover::after { transform: scaleX(1); transform-origin: left; }
.menu .botao { margin-left: 8px; }
.botao-menu { display: none; width: 44px; height: 44px; border-radius: var(--raio-p); border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); cursor: pointer; place-items: center; }
.botao-menu svg { width: 22px; height: 22px; }

/* ===================================== Botões ===================================== */

.botao {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px;
  border-radius: var(--raio-p); font: inherit; font-weight: 650; font-size: 0.95rem; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.25s var(--ease), translate 0.35s var(--ease), box-shadow 0.25s ease, border-color 0.2s ease, background-color 0.2s ease, filter 0.2s;
}
.botao svg { width: 18px; height: 18px; }
.botao.grande { min-height: 54px; padding: 0 28px; font-size: 1.02rem; border-radius: 14px; }
/* O reflexo de luz é uma camada do FUNDO do próprio botão (e não um elemento que desliza), então nunca escapa dele,
   mesmo no botão com o anel pulsante, que precisa de overflow visível. */
.botao.primario {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.34) 50%, transparent 70%) 170% 0 / 260% 100% no-repeat, var(--chama);
  color: var(--acento-texto); box-shadow: 0 8px 26px var(--acento-suave);
}
.botao.primario:hover {
  transform: translateY(-2px); box-shadow: 0 14px 34px var(--acento-brilho); filter: brightness(1.05); background-position: -70% 0, 0 0;
  transition: transform 0.25s var(--ease), translate 0.35s var(--ease), box-shadow 0.25s ease, filter 0.2s, background-position 0.9s ease;
}
.botao.secundario { background: rgba(255, 255, 255, 0.04); color: var(--texto); border-color: var(--borda-forte); }
.botao.secundario:hover { border-color: var(--teal); background: var(--teal-suave); transform: translateY(-2px); }
.botao:active { transform: scale(0.97); }
/* anel que pulsa para chamar a atenção para a ação principal */
.botao.pulsar { overflow: visible; }
.botao.pulsar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--acento-brilho); animation: pulsar 2.8s 1.6s ease-out infinite; pointer-events: none; }

/* ===================================== Início ===================================== */

.brilho { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: 0.5; }
.brilho.a { width: 520px; height: 520px; left: -140px; top: -120px; background: var(--acento-2); animation: flutuar 16s ease-in-out infinite; }
.brilho.b { width: 460px; height: 460px; right: -120px; top: 120px; background: var(--teal-2); animation: flutuar 19s ease-in-out infinite reverse; }

.heroi { position: relative; overflow: hidden; padding: 150px 0 90px; }
.heroi::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); pointer-events: none; animation: grade 30s linear infinite; }
.heroi-grade { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.selo { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--teal-suave); border: 1px solid rgba(38, 167, 179, 0.4); color: var(--teal-claro); font-size: 0.86rem; font-weight: 600; margin-bottom: 22px; }
.selo svg { width: 17px; height: 17px; }
.heroi h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
.destaque { background: var(--chama); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitulo { margin-top: 22px; font-size: 1.15rem; color: #b6c4d4; max-width: 600px; }
.heroi-botoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.centro-botoes { justify-content: center; }
.pontos { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 11px; }
.pontos li { display: flex; align-items: center; gap: 11px; color: #c4d0de; font-size: 0.97rem; }
.pontos svg { width: 20px; height: 20px; color: var(--acento); flex: none; }

.heroi-visual { position: relative; }
.vidro-cartao { position: relative; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); border: 1px solid var(--borda-forte); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; padding: 14px 16px 18px; overflow: hidden; transition: transform 0.5s var(--ease); }
.vidro-cartao::before { content: ""; position: absolute; inset: -40% 30% auto -20%; height: 70%; background: radial-gradient(closest-side, var(--acento-suave), transparent); pointer-events: none; }
/* reflexo que acompanha o mouse */
.vidro-cartao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.09), transparent 55%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.vidro-cartao:hover::after { opacity: 1; }
.vidro-cartao.inclinado { transition: transform 0.1s linear; }
/* faixa de luz que varre o veículo, como um "escaneamento" da sinalização */
.varredura { position: absolute; left: 0; right: 0; top: -100px; height: 100px; background: linear-gradient(180deg, transparent, rgba(92, 198, 208, 0.11), transparent); pointer-events: none; animation: varrer 6.5s 2.6s ease-in-out infinite; z-index: 2; }
.vidro-topo { display: flex; align-items: center; gap: 7px; padding: 4px 4px 12px; }
.vidro-topo .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--superficie-3); }
.vidro-topo .ponto:nth-child(1) { background: #de3d17; }
.vidro-topo .ponto:nth-child(2) { background: #fab01e; }
.vidro-topo .ponto:nth-child(3) { background: #26a7b3; }
.vidro-titulo { margin-left: 8px; color: var(--texto-fraco); font-size: 0.82rem; font-weight: 600; }
.desenho { display: flex; justify-content: center; position: relative; }
.flutuante { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: 14px; background: rgba(15, 23, 33, 0.92); border: 1px solid var(--borda-forte); backdrop-filter: blur(8px); font-size: 0.85rem; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); white-space: nowrap; z-index: 3; }
.flutuante svg { width: 18px; height: 18px; color: var(--acento); }
.flutuante b { color: #fff; }
.flutuante.f1 { left: -34px; top: 22%; animation: boiar 6s ease-in-out infinite; }

/* desenho do veículo (mesmas regras do sistema) */
.veiculo-svg { width: 100%; max-width: 430px; height: auto; display: block; }
.veiculo-svg .corpo { fill: var(--corpo); stroke: var(--corpo-borda); stroke-width: 2; }
.veiculo-svg .cabine { fill: var(--cabine); stroke: var(--corpo-borda); stroke-width: 2; }
.veiculo-svg .para-brisa { fill: var(--vidro); }
.veiculo-svg .engate { stroke: var(--engate); stroke-width: 4; }
.veiculo-svg .texto-corpo { font: 600 11px var(--fonte); fill: var(--texto); }
.veiculo-svg .texto-fraco { font: 11px var(--fonte); fill: var(--texto-fraco); }
.veiculo-svg .rotulo-pos { font: 700 9px var(--fonte); fill: var(--texto-fraco); letter-spacing: 0.08em; }
.veiculo-svg .num-painel { font-family: "Arial Black", Arial, Helvetica, sans-serif; font-weight: 900; fill: #111; }
.veiculo-svg .placa { transform-box: fill-box; transform-origin: center; animation: saltar 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; animation-delay: calc(var(--i, 0) * 80ms + 250ms); }

/* ===================================== Faixas em movimento ===================================== */

.faixas { padding: 26px 0; overflow: hidden; border-block: 1px solid var(--borda); background: rgba(255, 255, 255, 0.012); display: grid; gap: 6px; }
.faixa-linha { display: flex; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.faixa-trilho { display: flex; flex: none; gap: 0; animation: faixa 60s linear infinite; will-change: transform; }
.faixa-linha.reversa .faixa-trilho { animation-direction: reverse; animation-duration: 72s; }
.faixas:hover .faixa-trilho { animation-play-state: paused; }
.faixa-trilho span { display: inline-flex; align-items: center; font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; padding: 0 28px; color: #dbe5f0; line-height: 1.3; }
.faixa-trilho span::after { content: ""; width: 12px; height: 12px; margin-left: 56px; border-radius: 50%; background: var(--chama); flex: none; }
.faixa-trilho span.contorno { color: transparent; -webkit-text-stroke: 1.5px rgba(219, 229, 240, 0.42); }

/* ===================================== Números ===================================== */

.numeros { border-bottom: 1px solid var(--borda); background: rgba(255, 255, 255, 0.015); }
.numeros-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.numero { position: relative; overflow: hidden; padding: 38px 24px; border-right: 1px solid var(--borda); display: flex; flex-direction: column; gap: 8px; transition: background-color 0.3s; }
.numero:last-child { border-right: 0; }
.numero strong { display: block; font-size: 2.6rem; font-weight: 650; line-height: 1; letter-spacing: -0.04em; background: var(--chama); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; transition: transform 0.45s var(--ease); transform-origin: left center; }
.numero strong span { font: inherit; color: inherit; }
.numero > span { color: var(--texto-fraco); font-size: 0.92rem; }
.numero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--acento-suave), transparent 65%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.numero:hover::after { opacity: 1; }
.numero:hover strong { transform: scale(1.04); }

/* ===================================== Seções ===================================== */

.secao { position: relative; padding: 112px 0; }
.secao.alt { border-block: 1px solid var(--borda); background: rgba(255, 255, 255, 0.014); }
.cabecalho-secao { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.cabecalho-secao h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.cabecalho-secao p:not(.sobretitulo) { margin-top: 16px; color: #b0bfd0; font-size: 1.08rem; }
.sobretitulo { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--acento); font-weight: 700; margin-bottom: 14px; }
.nota { margin-top: 30px; text-align: center; color: var(--texto-fraco); font-size: 0.9rem; max-width: 720px; margin-inline: auto; }

.grade { display: grid; gap: 18px; }
.grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* cartões: elevam, ganham borda e luz que seguem o mouse e inclinam em 3D (ver landing.js) */
.cartao, .perfil, .passo {
  position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px 24px; --mx: 50%; --my: 50%;
  transition: transform 0.45s var(--ease), border-color 0.3s ease, box-shadow 0.35s ease, background-color 0.3s;
}
.cartao.inclinado, .perfil.inclinado, .passo.inclinado { transition: transform 0.1s linear, border-color 0.3s ease, box-shadow 0.35s ease; }
.cartao::before, .perfil::before, .passo::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--acento), var(--teal) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cartao::after, .perfil::after, .passo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(250, 176, 30, 0.06), rgba(38, 167, 179, 0.03) 45%, transparent 70%);
}
@media (hover: hover) {
  .cartao:hover, .perfil:hover, .passo:hover { transform: translateY(-5px); border-color: transparent; background: var(--superficie-2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36), 0 10px 30px var(--acento-suave); }
  .cartao:hover::before, .perfil:hover::before, .passo:hover::before, .cartao:hover::after, .perfil:hover::after, .passo:hover::after { opacity: 1; }
}
.cartao h3, .perfil h3 { font-size: 1.12rem; margin: 18px 0 10px; }
.cartao p, .perfil p { color: #a9b9ca; font-size: 0.97rem; line-height: 1.55; }
.icone-cartao, .perfil > span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, var(--acento-suave), var(--teal-suave)); border: 1px solid var(--borda-forte); color: var(--acento); transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.3s, box-shadow 0.3s; }
.cartao:hover .icone-cartao, .perfil:hover > span { transform: rotate(-5deg) scale(1.08); box-shadow: 0 8px 20px var(--acento-suave); }
.icone-cartao svg, .perfil > span svg { width: 24px; height: 24px; }
.perfil > span { color: var(--teal-claro); }

/* passos, com uma linha que se desenha conforme você rola */
.passos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; position: relative; --prog: 0; }
.passos::before, .passos::after { content: ""; position: absolute; top: 53px; left: 12%; right: 12%; height: 2px; border-radius: 2px; }
.passos::before { background: var(--borda-forte); }
.passos::after { background: var(--chama); transform-origin: left; transform: scaleX(var(--prog)); box-shadow: 0 0 14px var(--acento-brilho); }
.passo { z-index: 1; padding: 30px 26px 28px; }
.passo-num { position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-3); border: 1px solid var(--borda-forte); color: var(--texto-fraco); font-weight: 800; font-size: 1.15rem; transition: background 0.5s, color 0.5s, box-shadow 0.5s, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.passo.ativo .passo-num { background: var(--chama); color: var(--acento-texto); border-color: transparent; box-shadow: 0 0 0 6px var(--acento-suave), 0 8px 20px var(--acento-suave); transform: scale(1.06); }
.passo h3 { margin: 20px 0 10px; font-size: 1.2rem; }
.passo p { color: #a9b9ca; font-size: 0.98rem; }

/* transparência */
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.duas-colunas .cartao h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.duas-colunas h3 svg { width: 22px; height: 22px; }
.ok-titulo { color: var(--ok); }
.aviso-titulo { color: var(--acento); }
.lista-simples { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-simples li { position: relative; padding-left: 24px; color: #b9c7d7; font-size: 0.97rem; }
.lista-simples li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.lista-simples li b { color: #fff; }
.lista-simples.grande li { font-size: 1.02rem; }

/* contratação (o fundo "respira" devagar) */
.faixa-contratacao {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; padding: 48px; border-radius: 28px; border: 1px solid var(--borda-forte);
  background: radial-gradient(90% 120% at 0% 0%, var(--acento-brilho), transparent 55%), radial-gradient(90% 120% at 100% 100%, var(--teal-brilho), transparent 55%), var(--superficie);
  background-size: 160% 160%, 160% 160%, auto; animation: deriva 14s ease-in-out infinite alternate;
}
.faixa-contratacao h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.faixa-contratacao p:not(.sobretitulo) { margin-top: 16px; color: #c0cddb; }

/* perguntas */
.faq { display: grid; gap: 12px; }
.faq details { overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; transition: border-color 0.25s, background-color 0.25s, transform 0.3s var(--ease); }
.faq details:hover { border-color: var(--borda-forte); transform: translateX(2px); }
.faq details[open] { border-color: var(--borda-forte); background: var(--superficie-2); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 600; font-size: 1.04rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--superficie-3); color: var(--acento); font-size: 1.3rem; line-height: 1; transition: transform 0.4s var(--ease), background-color 0.3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); background: var(--acento-suave); }
.faq details p { padding: 0 22px 22px; color: #b0bfd0; }

/* fecho */
.fecho { overflow: hidden; padding: 130px 0; }
.fecho .brilho.a { left: -160px; top: -100px; }
.fecho .brilho.b { right: -140px; top: auto; bottom: -140px; }
.fecho .miolo { position: relative; }
.fecho h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.centro { text-align: center; }
.centro .subtitulo { margin-inline: auto; }

/* ===================================== Rodapé ===================================== */

.rodape { border-top: 1px solid var(--borda); padding: 42px 0; background: #060a0e; position: relative; z-index: 1; }
.rodape-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.aviso-rodape { color: var(--texto-fraco); font-size: 0.82rem; max-width: 640px; line-height: 1.5; }
.copia { color: var(--texto-fraco); font-size: 0.85rem; }

/* ===================================== Entrada: palavras e revelações ===================================== */

/* títulos: cada palavra sobe de dentro de uma "máscara" (ver dividirPalavras em landing.js) */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.pal-i { display: inline-block; transform: translateY(108%) rotate(2deg); transform-origin: left bottom; }
[data-dividir].pronto .pal-i { animation: palavra 0.85s var(--ease) both; animation-delay: calc(var(--w) * 55ms + var(--base, 0ms)); }
[data-dividir] .destaque { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
[data-dividir] .destaque .pal-i { background: var(--chama); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* demais blocos: aparecem de formas diferentes (sobe, vem da esquerda, da direita, cresce, entra desfocado) */
.revelar { opacity: 0; }
.revelar.visivel { opacity: 1; animation: rev-sobe 0.8s var(--ease) var(--atraso, 0ms) backwards; }
.revelar[data-anim="esquerda"].visivel { animation-name: rev-esq; }
.revelar[data-anim="direita"].visivel { animation-name: rev-dir; }
.revelar[data-anim="escala"].visivel { animation-name: rev-escala; }
.revelar[data-anim="desfoque"].visivel { animation-name: rev-desfoque; }

/* primeira tela: entra por animação CSS, em sequência */
.entrada { animation: entrar 0.9s var(--ease) both; animation-delay: calc(var(--n, 0) * 90ms + 120ms); }
.heroi-texto > .selo { --n: 0; }
.heroi-texto > p.subtitulo { --n: 5; }
.heroi-texto > .heroi-botoes { --n: 6; }
.heroi-texto > .pontos { --n: 7; }
.heroi-visual.entrada { --n: 3; animation-name: entrar-escala; animation-duration: 1.3s; }

/* ===================================== Formulário de orçamento (janela) ===================================== */

.modal { width: min(620px, 100% - 28px); max-height: calc(100dvh - 28px); padding: 0; border: 1px solid var(--borda-forte); border-radius: 26px; background: var(--superficie); color: var(--texto); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); overflow: auto; }
.modal::backdrop { background: rgba(4, 8, 12, 0.74); backdrop-filter: blur(6px); animation: aparecer 0.3s ease both; }
.modal[open] { animation: modal-entra 0.45s var(--ease) both; }
.modal-corpo { position: relative; padding: 34px 32px 30px; background: radial-gradient(90% 60% at 0% 0%, var(--acento-suave), transparent 60%), radial-gradient(80% 60% at 100% 100%, var(--teal-suave), transparent 60%); }
.modal-fechar { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--borda-forte); background: var(--superficie-2); color: var(--texto); cursor: pointer; transition: border-color 0.2s, transform 0.25s var(--ease); }
.modal-fechar:hover { border-color: var(--teal); transform: rotate(90deg); }
.modal-fechar svg { width: 20px; height: 20px; }
.modal h2 { font-size: 1.6rem; padding-right: 36px; }
.modal-sub { margin: 10px 0 24px; color: #b0bfd0; }
#form-orcamento { display: grid; gap: 16px; }
.linha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label { font-size: 0.82rem; color: var(--texto-fraco); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; color: var(--texto); background: var(--superficie-2); border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.campo textarea { resize: vertical; min-height: 92px; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-fraco) 50%), linear-gradient(135deg, var(--texto-fraco) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-suave); }
.campo input.invalido, .campo select.invalido { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14); }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consentimento { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: #b0bfd0; cursor: pointer; }
.consentimento input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: #fab01e; }
.consentimento.invalido { color: #ffb4b4; }
.erro-form { padding: 11px 14px; border-radius: var(--raio-p); border: 1px solid rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.12); color: #ffb4b4; font-size: 0.9rem; }
.erro-form a { color: #ffd9a0; }
#orc-enviar[disabled] { opacity: 0.6; cursor: progress; }
.modal-sucesso { text-align: center; padding: 26px 8px 6px; display: grid; justify-items: center; gap: 14px; }
.modal-sucesso h2 { padding: 0; }
.modal-sucesso p { color: #b0bfd0; max-width: 380px; }
.selo-ok { width: 84px; height: 84px; }
.selo-ok circle { fill: rgba(74, 222, 128, 0.1); stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 145; animation: desenhar 0.8s 0.1s var(--ease) forwards; }
.selo-ok path { fill: none; stroke: var(--ok); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: desenhar 0.5s 0.7s var(--ease) forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-entra { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
body.modal-aberto { overflow: hidden; }
@media (max-width: 640px) {
  .modal-corpo { padding: 28px 18px 24px; }
  .linha-campos { grid-template-columns: minmax(0, 1fr); }
}
/* ===================================== Animações ===================================== */

@keyframes entrar { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes entrar-escala { from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes descer { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes palavra { from { transform: translateY(108%) rotate(2deg); } to { transform: none; } }
@keyframes rev-sobe { from { opacity: 0; transform: translateY(22px); } }
@keyframes rev-esq { from { opacity: 0; transform: translateX(-32px); } }
@keyframes rev-dir { from { opacity: 0; transform: translateX(32px); } }
@keyframes rev-escala { from { opacity: 0; transform: scale(0.95) translateY(14px); } }
@keyframes rev-desfoque { from { opacity: 0; filter: blur(7px); transform: translateY(14px); } }
@keyframes saltar { 0% { opacity: 0; transform: scale(0.55); } 100% { opacity: 1; transform: scale(1); } }
@keyframes flutuar { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, 20px); } }
@keyframes boiar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes varrer { 0% { top: -100px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes faixa { to { transform: translateX(-50%); } }
@keyframes grade { to { background-position: 26px 52px; } }
@keyframes deriva { from { background-position: 0% 0%, 100% 100%, 0 0; } to { background-position: 100% 100%, 0% 0%, 0 0; } }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(250, 176, 30, 0.34); } 70%, 100% { box-shadow: 0 0 0 16px rgba(250, 176, 30, 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .revelar { opacity: 1; }
  .pal-i { transform: none; }
  .faixa-trilho { animation: none !important; }
  .selo-ok circle, .selo-ok path { stroke-dashoffset: 0; }
}

/* ===================================== Telas menores ===================================== */

@media (max-width: 1100px) {
  .botao-menu { display: grid; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 20px 22px;
    background: rgba(8, 13, 18, 0.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borda);
    transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  }
  .menu.aberto { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
  .menu > a:not(.botao) { padding: 13px 12px; }
  .menu > a:not(.botao)::after { display: none; }
  .menu .botao { margin: 6px 0 0; }
  .topo { background: rgba(8, 13, 18, 0.9); backdrop-filter: blur(14px); }
}

@media (max-width: 1020px) {
  .heroi-grade { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .heroi { padding-top: 130px; }
  .heroi-visual { max-width: 520px; margin-inline: auto; }
  .flutuante.f1 { left: -8px; }
  .grade.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade.tres { grid-template-columns: minmax(0, 1fr); }
  .faixa-contratacao { grid-template-columns: minmax(0, 1fr); padding: 34px 26px; }
  .passos { grid-template-columns: minmax(0, 1fr); }
  .passos::before, .passos::after { display: none; }
  .rodape-linha { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .numeros-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero:nth-child(2) { border-right: 0; }
  .numero:nth-child(-n + 2) { border-bottom: 1px solid var(--borda); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .secao { padding: 76px 0; }
  .grade.quatro, .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .heroi { padding: 118px 0 64px; }
  .flutuante { display: none; }
  .botao.grande { width: 100%; }
  .numero { padding: 26px 16px; }
  .numero strong { font-size: 2rem; }
  .faixas { padding: 18px 0; }
}

/* links de política de privacidade e termos */
.rodape-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.rodape-links a, .copia a { color: var(--texto-fraco); font-size: 0.88rem; text-decoration: none; }
.rodape-links a:hover, .copia a:hover { color: var(--texto); text-decoration: underline; }
.copia a { white-space: nowrap; }
.consentimento a { color: var(--acento); text-underline-offset: 3px; }