/* ── Tokens: ajuste pela identidade visual do cliente ───────────────────── */
:root {
  --fundo: #02031a;          /* MESMA cor usada nos prompts das imagens */
  --fundo-2: #070a2a;
  --texto: #eef6fb;
  --texto-suave: #a9bccb;
  --acento: #00ccff;         /* cor principal da marca */
  --acento-texto: #000066;   /* texto sobre o acento */
  --linha: rgb(0 204 255 / 0.16);
  --painel: rgb(0 0 70 / 0.42);
  --mistura: lighten;        /* tema escuro: lighten | tema claro: multiply */

  --fonte-titulo: "Archivo", "Arial Narrow", sans-serif;
  --fonte-texto: "Archivo", system-ui, sans-serif;

  --raio: 18px;
  --gutter: clamp(16px, 4vw, 56px);
  --largura: 1240px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
/* Tema claro (marcas de luz, saúde, casamento etc.): troque os tokens assim
:root {
  --fundo: #f4efe7; --fundo-2: #ebe4d8; --texto: #1d1a16; --texto-suave: #5d564c;
  --linha: rgb(29 26 22 / .12); --painel: rgb(244 239 231 / .7); --mistura: multiply;
}
*/

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 clamp(16px, 1.05vw, 18px)/1.65 var(--fonte-texto);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Grão de filme: tira o aspecto "liso de IA" */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grao 1s steps(4) infinite;
}
@keyframes grao { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; font-stretch: 125%; line-height: 1.06; margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(28px, 3.4vw, 54px); }
h2 { font-size: clamp(26px, 3.2vw, 50px); }
h3 { font-size: clamp(18px, 1.4vw, 21px); font-weight: 600; font-stretch: 112%; }
p { margin: 0 0 1em; color: var(--texto-suave); text-wrap: pretty; }

/* ── Topo ──────────────────────────────────────────────────────────────── */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
  transition: background .4s var(--ease), backdrop-filter .4s;
}
.topo.rolou { background: rgb(2 3 26 / .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.marca { text-decoration: none; display: flex; align-items: center; }
.marca-logo { height: 36px; width: auto; } /* logo horizontal (símbolo + nome) */
.marca-texto { font-family: var(--fonte-titulo); font-size: 22px; letter-spacing: .02em; }
.menu { display: flex; gap: 28px; align-items: center; font-size: 14px; letter-spacing: .04em; }
.menu a { text-decoration: none; opacity: .8; transition: opacity .3s; }
.menu a:hover { opacity: 1; }
.menu-cta { border: 1px solid var(--linha); padding: 9px 16px; border-radius: 999px; opacity: 1 !important; }
.menu-botao { display: none; }
.menu-movel { display: none; }
@media (max-width: 760px) {
  .menu { display: none; }
  .topo { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 14px; }
  .menu-botao {
    display: grid; place-content: center; gap: 5px; width: 46px; height: 46px; padding: 0;
    border: 1px solid var(--linha); border-radius: 999px; background: rgb(2 3 26 / .45);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--texto); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-botao span { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease), opacity .3s; }
  .menu-aberto .menu-botao span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
  .menu-aberto .menu-botao span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .menu-aberto .menu-botao span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
  .menu-aberto .topo { z-index: 80; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

  .menu-movel {
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    position: fixed; inset: 0; z-index: 70; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(max(14px, env(safe-area-inset-top)) + 84px) var(--gutter) max(28px, env(safe-area-inset-bottom));
    background: radial-gradient(120% 70% at 100% 0%, rgb(0 204 255 / .14), transparent 60%), rgb(2 3 26 / .94);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s;
  }
  .menu-movel[hidden] { display: none; }
  .menu-aberto .menu-movel { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
  .menu-movel-nav { display: flex; flex-direction: column; }
  .menu-movel-nav a {
    display: flex; align-items: baseline; gap: 14px; padding: 13px 0; text-decoration: none;
    border-bottom: 1px solid var(--linha);
    font-family: var(--fonte-titulo); font-stretch: 125%; font-weight: 600; font-size: clamp(26px, 8vw, 34px); line-height: 1.1;
    color: var(--texto-suave); -webkit-tap-highlight-color: transparent;
    opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
  }
  .menu-movel-nav a small { font-family: var(--fonte-texto); font-stretch: 100%; font-size: 12px; font-weight: 400; letter-spacing: .14em; color: var(--acento); opacity: .7; }
  .menu-movel-nav a.atual { color: var(--texto); }
  .menu-movel-nav a.atual::after { content: ""; width: 8px; height: 8px; margin-left: auto; align-self: center; border-radius: 50%; background: var(--acento); box-shadow: 0 0 12px var(--acento); }
  .menu-movel-nav a:active { color: var(--acento); }
  .menu-aberto .menu-movel-nav a { opacity: 1; transform: none; }
  .menu-aberto .menu-movel-nav a:nth-child(2) { transition-delay: .04s; }
  .menu-aberto .menu-movel-nav a:nth-child(3) { transition-delay: .08s; }
  .menu-aberto .menu-movel-nav a:nth-child(4) { transition-delay: .12s; }
  .menu-aberto .menu-movel-nav a:nth-child(5) { transition-delay: .16s; }
  .menu-aberto .menu-movel-nav a:nth-child(6) { transition-delay: .2s; }
  .menu-movel-acoes { display: grid; gap: 12px; }
  .menu-movel-acoes a { display: block; text-align: center; text-decoration: none; padding: 15px 18px; border-radius: 999px; font-weight: 600; letter-spacing: .03em; }
  .menu-movel-cta { background: var(--acento); color: var(--acento-texto); }
  .menu-movel-whats { border: 1px solid var(--linha); color: var(--texto); }
  .menu-aberto .whats, .menu-aberto .som-alternar { opacity: 0 !important; pointer-events: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .menu-movel, .menu-movel-nav a { transition: none !important; transform: none !important; }
}

/* ── Abertura cinematográfica ──────────────────────────────────────────── */
.cine { position: relative; height: var(--altura, 400vh); }
.cine-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine-vinheta {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(0 0 0 / .45) 100%),
    linear-gradient(to bottom, transparent 70%, var(--fundo) 100%);
}
.momento {
  position: absolute; inset: auto var(--gutter) 12vh; max-width: 640px;
  opacity: 0; transform: translateY(24px); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
  pointer-events: none;
}
.momento.ativo { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.momento--direita { left: auto; right: var(--gutter); }
.momento--centro { left: 50%; right: auto; transform: translate(-50%, 24px); text-align: center; width: min(640px, calc(100% - 2 * var(--gutter))); }
.momento--centro.ativo { transform: translate(-50%, 0); }
.titulo-abertura { margin-bottom: .3em; }
.apoio { font-size: clamp(16px, 1.3vw, 20px); margin: 0; }
.destaque { font-family: var(--fonte-titulo); font-weight: 500; font-stretch: 112%; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.25; color: var(--texto); margin: 0 0 .6em; }
.destaque:last-child { margin: 0; }
.cine-dica {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .6;
  transition: opacity .5s;
}
.cine-dica span { width: 1px; height: 38px; background: linear-gradient(var(--texto), transparent); animation: dica 2s var(--ease) infinite; }
@keyframes dica { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.cine.andou .cine-dica { opacity: 0; }

/* ── Painéis (todo texto mora num painel) ──────────────────────────────── */
.painel {
  position: relative;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(24px, 3.2vw, 48px);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
.painel--vidro { background: rgb(2 3 40 / .42); }
.painel > :last-child { margin-bottom: 0; }
.rotulo { display: block; font-size: 12px; letter-spacing: .3em; color: var(--acento); margin-bottom: 18px; }

/* ── Seções ────────────────────────────────────────────────────────────── */
.secao {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; padding: 18vh var(--gutter);
  display: grid; align-content: center;
}
.secao-grade { width: 100%; max-width: var(--largura); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 560px) 1fr; }
.secao-grade--direita { grid-template-columns: 1fr minmax(0, 560px); }
.secao-grade--direita > .painel { grid-column: 2; }
.secao--larga { gap: 28px; justify-items: center; }
.painel--cabecalho { width: 100%; max-width: var(--largura); }
.cartoes { width: 100%; max-width: var(--largura); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cartao h3 { margin-bottom: .4em; }
.cartao { transition: transform .5s var(--ease), border-color .5s; }
.cartao:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
.passos { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: p; display: grid; gap: 22px; }
.passos li { counter-increment: p; display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; }
.passos li::before { content: counter(p, decimal-leading-zero); grid-row: span 2; font-family: var(--fonte-titulo); font-weight: 600; color: var(--acento); font-size: 22px; }
.passos strong { font-weight: 600; }
.passos span { color: var(--texto-suave); }

/* ── Arte: imagens fundidas ao fundo (nunca retângulo com borda) ───────── */
.arte {
  position: absolute; z-index: -1; pointer-events: none;
  object-fit: cover; mix-blend-mode: var(--mistura);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.arte--direita, .arte--esquerda { top: 0; bottom: 0; width: 64vw; height: 100%; }
.arte--direita {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 38%, transparent 96%), linear-gradient(to bottom, transparent 10%, #000 30%, #000 68%, transparent 88%);
          mask-image: linear-gradient(to left, #000 38%, transparent 96%), linear-gradient(to bottom, transparent 10%, #000 30%, #000 68%, transparent 88%);
}
.arte--esquerda {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 38%, transparent 96%), linear-gradient(to bottom, transparent 10%, #000 30%, #000 68%, transparent 88%);
          mask-image: linear-gradient(to right, #000 38%, transparent 96%), linear-gradient(to bottom, transparent 10%, #000 30%, #000 68%, transparent 88%);
}
.arte--fundo {
  inset: 0; width: 100%; height: 100%; opacity: .5;
  /* closest-side: a elipse zera exatamente na borda, então nunca sobra linha reta */
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%), linear-gradient(to bottom, transparent 10%, #000 32%, #000 68%, transparent 88%);
          mask-image: radial-gradient(closest-side, #000 35%, transparent 100%), linear-gradient(to bottom, transparent 10%, #000 32%, #000 68%, transparent 88%);
}
.arte--suave { opacity: .32; }
/* Parallax leve aplicado pelo app.js */
.arte[data-parallax] { will-change: transform; }

/* ── Contato ───────────────────────────────────────────────────────────── */
.secao--contato { justify-items: center; }
.painel--form { width: 100%; max-width: 760px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.campo { display: grid; gap: 6px; }
.campo--inteiro { grid-column: 1 / -1; }
.campo label { font-size: 13px; letter-spacing: .04em; color: var(--texto-suave); }
.campo input, .campo textarea {
  width: 100%; font: inherit; color: var(--texto);
  background: rgb(255 255 255 / .04); border: 1px solid var(--linha); border-radius: 12px;
  padding: 14px 16px; transition: border-color .3s, background .3s; resize: vertical;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--acento); background: rgb(255 255 255 / .07); }
.campo.erro input { border-color: #d9776b; }
.pote { position: absolute; left: -9999px; }
.form-status { min-height: 1.4em; margin: 0; font-size: 14px; }
.form-status.ok { color: var(--acento); }
.form-status.falha { color: #e39a90; }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ── Botões ────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 15px/1 var(--fonte-texto); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  color: var(--acento-texto); background: var(--acento); border: 0; border-radius: 999px;
  padding: 17px 30px; transition: transform .4s var(--ease), filter .3s;
}
.botao:hover { transform: translateY(-2px); filter: brightness(1.08); }
.botao[disabled] { opacity: .6; cursor: progress; }

/* ── WhatsApp flutuante ────────────────────────────────────────────────── */
.whats {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .35);
  transform: scale(0); transition: transform .5s var(--ease);
}
.whats.visivel { transform: scale(1); }
.whats:hover { transform: scale(1.07); }
.whats svg { width: 30px; height: 30px; }
.whats::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: pulso 2.6s ease-out infinite; }
@keyframes pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }

/* ── Rodapé ────────────────────────────────────────────────────────────── */
.rodape { padding: 0 var(--gutter) 40px; }
.rodape-painel { max-width: var(--largura); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--texto-suave); padding: 24px 32px; }

/* ── Revelar ao rolar ──────────────────────────────────────────────────── */
.revelar { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.revelar.visto { opacity: 1; transform: none; }

/* ── Celular ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .secao { padding: 14vh var(--gutter); min-height: auto; }
  .secao-grade, .secao-grade--direita { grid-template-columns: 1fr; }
  .secao-grade--direita > .painel { grid-column: 1; }
  .arte--direita, .arte--esquerda { left: 0; right: 0; width: 100%; height: 70%; opacity: .55;
    -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 30%, #000 55%, transparent 85%);
            mask-image: linear-gradient(to bottom, transparent 8%, #000 30%, #000 55%, transparent 85%); }
  .momento, .momento--direita { left: var(--gutter); right: var(--gutter); bottom: 10vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar, .momento:first-of-type { opacity: 1; transform: none; filter: none; }
  .cine { height: 100svh; }
  .momento:not(:first-of-type), .cine-dica { display: none; }
}

/* ── Carreira Barcos: ajustes ──────────────────────────────────────────── */
.cartoes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rodape-painel .marca-logo { height: 30px; }
@media (max-width: 760px) {
  /* celular: logo centralizada no topo (o botão do menu continua à direita) */
  .topo { justify-content: flex-end; }
  .topo .marca { position: absolute; left: 50%; translate: -50% 0; }
  .topo .marca-logo { height: 34px; }
  .marca-logo { height: 28px; }
}.secao { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
  .momento--centro { left: var(--gutter); right: var(--gutter); width: auto; transform: translateY(24px); }
  .momento--centro.ativo { transform: none; }
}
/* 3º momento: no canto, longe do barco (que termina de frente, no centro) */
.momento--final { max-width: 460px; }
@media (max-width: 860px) { .momento--final { max-width: none; bottom: 6vh; } }

/* Abertura só com o vídeo: título apenas para leitores de tela e buscadores */
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Som da apresentação ──────────────────────────────────────────────── */
.som-convite {
  position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 14px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--texto);
  font: 500 13px/1 var(--fonte-texto); letter-spacing: .22em; text-transform: uppercase;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.som-bolha {
  position: relative; display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .28);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 0 40px rgb(0 204 255 / .18), inset 0 0 24px rgb(255 255 255 / .06);
  transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.som-bolha svg { width: 34px; height: 34px; opacity: .9; }
.som-onda {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgb(0 204 255 / .55);
  animation: som-onda 2.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
.som-onda--2 { animation-delay: 1.4s; }
@keyframes som-onda { from { transform: scale(1); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }
.som-texto { opacity: .78; text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
.som-convite:hover .som-bolha, .som-convite:focus-visible .som-bolha {
  transform: scale(1.06); background: rgb(0 204 255 / .14); border-color: rgb(0 204 255 / .7);
}
.som-convite:focus-visible { outline: none; }
.som-convite.oculto { opacity: 0 !important; transform: translate(-50%, -50%) scale(.9); pointer-events: none; }
.cine:has(.som-convite:not(.oculto)) .cine-dica { opacity: 0; }

.som-alternar {
  position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--texto); background: rgb(2 3 40 / .5); border: 1px solid var(--linha);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), opacity .4s var(--ease);
}
.som-alternar:hover { transform: scale(1.07); border-color: rgb(0 204 255 / .6); }
.som-alternar svg { width: 20px; height: 20px; }
.som-alternar .som-on { display: none; }
.som-alternar[aria-pressed="true"] .som-on { display: grid; }
.som-alternar[aria-pressed="true"] .som-off { display: none; }
.som-alternar[aria-pressed="true"] { color: var(--acento); border-color: rgb(0 204 255 / .45); }
@media (max-width: 760px) { .som-bolha { width: 78px; height: 78px; } .som-convite { font-size: 11.5px; } }
.som-convite { top: 40%; }
.som-texto {
  white-space: nowrap; opacity: .92; padding: 8px 14px; border-radius: 999px;
  background: rgb(2 3 26 / .35); border: 1px solid rgb(255 255 255 / .12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (max-width: 760px) { .som-convite { letter-spacing: .14em; } }

/* ── Modelos: os barcos entram um por um com a rolagem ─────────────────── */
.frota { position: relative; height: calc(var(--n, 4) * 85vh + 100vh); height: calc(var(--n, 4) * 85svh + 100svh); }
.frota-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.frota-luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 38% at 50% 56%, rgb(0 120 255 / .22), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgb(0 204 255 / .08), transparent 70%),
    linear-gradient(to bottom, var(--fundo), var(--fundo-2) 50%, var(--fundo));
}
/* linha d'água: um fio de luz no horizonte */
.frota-luz::after {
  content: ""; position: absolute; left: 0; right: 0; top: 68%; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(0 204 255 / .45) 30%, rgb(255 255 255 / .7) 50%, rgb(0 204 255 / .45) 70%, transparent);
  box-shadow: 0 0 24px 2px rgb(0 204 255 / .35);
  opacity: .5;
}
.frota-topo {
  position: absolute; z-index: 3; top: max(96px, 13vh); left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between; align-items: baseline;
}
.frota-topo .rotulo { margin: 0; }
.frota-contador { font: 500 13px/1 var(--fonte-texto); letter-spacing: .3em; color: var(--texto-suave); }
.frota-contador b { color: var(--texto); font-weight: 600; font-size: 22px; letter-spacing: .05em; }

.modelo { position: absolute; inset: 0; pointer-events: none; --t: .5; }
.modelo.ativo { pointer-events: auto; }

/* nome gigante vazado, atrás do barco, corre no sentido contrário */
.modelo-fantasma {
  position: absolute; left: 50%; top: 50%; z-index: 0; white-space: nowrap;
  font: 700 clamp(140px, 30vw, 520px)/1 var(--fonte-titulo); font-stretch: 125%; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgb(0 204 255 / .22);
  transform: translate(-50%, -58%); translate: calc((var(--t) - .5) * 14vw) 0;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.modelo.ativo .modelo-fantasma { opacity: 1; }

/* o barco: chega pela direita com desfoque de velocidade e sai pela esquerda */
.modelo-barco {
  position: absolute; z-index: 1; left: 50%; top: 56%;
  width: min(86vw, 1320px);
  transform: translate(-50%, -50%) translateX(70vw) skewX(-8deg); filter: blur(16px); opacity: 0;
  translate: calc((.5 - var(--t)) * 5vw) 0;
  transition: transform 1.3s var(--ease), filter 1.1s var(--ease), opacity .8s var(--ease);
}
.modelo-barco--alto { width: min(68vw, 1040px); top: 51%; }
.modelo.ativo .modelo-barco { transform: translate(-50%, -50%); filter: blur(0); opacity: 1; }
.modelo.passou .modelo-barco { transform: translate(-50%, -50%) translateX(-70vw) skewX(8deg); filter: blur(16px); opacity: 0; transition-duration: .9s, .7s, .6s; }
.modelo-barco > img:first-child { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .55)); }

/* brilho que atravessa o alumínio (recortado no formato do barco) */
.modelo-brilho {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat;
  background: linear-gradient(100deg, transparent 38%, rgb(255 255 255 / .0) 42%, rgb(255 255 255 / .75) 50%, rgb(160 230 255 / .35) 54%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 130% 0;
}
.modelo.ativo .modelo-brilho { animation: brilho-casco 1.6s var(--ease) 1s both, brilho-casco 1.8s var(--ease) 6s infinite; }
@keyframes brilho-casco { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* reflexo na água */
.modelo-reflexo {
  position: absolute; left: 0; top: 100%; width: 100%; height: auto;
  transform: scaleY(-.55); transform-origin: top; opacity: .22; filter: blur(3px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 70%); mask-image: linear-gradient(to top, #000, transparent 70%);
}

/* nome do modelo: letras que despencam em foco + reflexo de luz passando */
.modelo-texto { position: absolute; z-index: 2; left: var(--gutter); bottom: max(9vh, 64px); }
.modelo-sobre {
  display: block; font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: var(--acento);
  opacity: 0; transform: translateX(-20px); transition: opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s;
}
.modelo-nome {
  position: relative; margin: .05em 0 .12em; perspective: 600px;
  font-size: clamp(64px, 10.5vw, 176px); font-weight: 700; font-stretch: 125%; letter-spacing: -.01em; line-height: .95;
}
.modelo-nome .letra {
  display: inline-block; --d: calc(var(--i) * 80ms + 450ms);
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #9fb3c4 0%, #eef6fb 30%, #ffffff 46%, #7fe3ff 50%, #ffffff 54%, #eef6fb 70%, #9fb3c4 100%);
  background-size: 300% 100%; background-position: 100% 0;
  opacity: 0; transform: translateY(.45em) rotateX(-85deg) scale(1.25); transform-origin: 50% 100%;
  filter: blur(14px) drop-shadow(0 0 0 rgb(0 204 255 / 0));
  transition: opacity .7s var(--ease) var(--d), transform 1s var(--ease) var(--d), filter .9s var(--ease) var(--d);
}
.modelo.ativo .modelo-nome .letra {
  opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 22px rgb(0 204 255 / .35));
  animation: brilho-letra 1.4s ease-in-out calc(var(--d) + 700ms) both, brilho-letra 1.6s ease-in-out calc(var(--d) + 5.6s) infinite;
}
.modelo.passou .modelo-nome .letra, .modelo.antes .modelo-nome .letra { transition-duration: .4s; transition-delay: calc(var(--i) * 30ms); }
.modelo.passou .modelo-nome .letra { transform: translateY(-.3em) scale(.9); }
@keyframes brilho-letra { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* clarão horizontal que corta o nome quando ele chega */
.modelo-nome::after {
  content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #7fe3ff 20%, #fff 50%, #7fe3ff 80%, transparent);
  box-shadow: 0 0 18px 4px rgb(0 204 255 / .6), 0 0 60px 10px rgb(0 120 255 / .3);
  transform: scaleX(0); opacity: 0; pointer-events: none;
}
.modelo.ativo .modelo-nome::after { animation: clarao 1.1s var(--ease) .35s both; }
@keyframes clarao { 0% { transform: scaleX(0); opacity: 0; } 25% { opacity: 1; } 60% { transform: scaleX(1); opacity: .9; } 100% { transform: scaleX(1.08); opacity: 0; } }
.modelo-linha {
  margin: 0; font-size: clamp(13px, 1vw, 15px); letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease) 1.1s, transform .8s var(--ease) 1.1s;
}
.modelo.ativo .modelo-sobre, .modelo.ativo .modelo-linha { opacity: 1; transform: none; }
.modelo:not(.ativo) .modelo-sobre, .modelo:not(.ativo) .modelo-linha { transition-delay: 0s; transition-duration: .35s; }

/* trilha de progresso: um traço por barco */
.frota-trilha { position: absolute; z-index: 3; right: var(--gutter); bottom: max(10vh, 70px); display: flex; gap: 8px; }
.frota-trilha i { width: 34px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .18); overflow: hidden; position: relative; }
.frota-trilha i::after { content: ""; position: absolute; inset: 0; background: var(--acento); transform: scaleX(var(--p, 0)); transform-origin: left; box-shadow: 0 0 10px var(--acento); }

/* celular: o barco fica maior que a tela e a câmera passeia pelo casco */
@media (max-width: 760px) {
  .frota-topo { top: 84px; }
  .frota-contador b { font-size: 18px; }
  .modelo-barco, .modelo-barco--alto { width: 150vw; top: 41%; translate: calc((.5 - var(--t)) * 50vw) 0; }
  .modelo-barco--alto { width: 125vw; translate: calc((.5 - var(--t)) * 25vw) 0; }
  .modelo-fantasma { top: 40%; font-size: 52vw; translate: calc((var(--t) - .5) * 30vw) 0; }
  .frota-luz { background: radial-gradient(90% 30% at 50% 42%, rgb(0 120 255 / .24), transparent 70%), linear-gradient(to bottom, var(--fundo), var(--fundo-2) 50%, var(--fundo)); }
  .frota-luz::after { top: 51%; }
  .modelo-texto { bottom: max(13vh, 96px); right: var(--gutter); }
  .modelo-nome { font-size: 25vw; }
  .modelo-linha { letter-spacing: .16em; }
  .frota-trilha { left: var(--gutter); right: auto; top: 128px; bottom: auto; }
  .frota-trilha i { width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .frota { height: auto; }
  .frota-palco { position: relative; height: auto; overflow: visible; padding: 16vh 0 8vh; display: grid; gap: 12vh; }
  .frota-topo { position: relative; top: 0; }
  .frota-contador, .frota-trilha, .modelo-fantasma, .modelo-nome::after { display: none; }
  .modelo { position: relative; inset: auto; display: grid; gap: 24px; padding: 0 var(--gutter); }
  .modelo-barco, .modelo-barco--alto { position: relative; left: auto; top: auto; width: 100%; max-width: 1100px; margin: 0 auto; transform: none !important; translate: none; filter: none !important; opacity: 1 !important; }
  .modelo-texto { position: relative; left: auto; bottom: auto; order: -1; }
  .modelo-sobre, .modelo-linha, .modelo-nome .letra { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ficha técnica: entra item por item depois do nome */
.modelo-ficha { display: flex; flex-wrap: wrap; gap: 14px clamp(22px, 3vw, 48px); margin: .2em 0 1.1em; padding: 0; }
.modelo-ficha > div {
  position: relative; padding-left: 14px;
  opacity: 0; transform: translateY(14px); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease);
}
.modelo-ficha > div::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(var(--acento), transparent); }
.modelo-ficha > div:nth-child(1) { --k: 0; } .modelo-ficha > div:nth-child(2) { --k: 1; } .modelo-ficha > div:nth-child(3) { --k: 2; } .modelo-ficha > div:nth-child(4) { --k: 3; }
.modelo.ativo .modelo-ficha > div { opacity: 1; transform: none; filter: blur(0); transition-delay: calc(1s + var(--k) * 120ms); }
.modelo-ficha dt { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 4px; }
.modelo-ficha dd { margin: 0; font: 600 clamp(20px, 1.7vw, 28px)/1.1 var(--fonte-titulo); font-stretch: 112%; color: var(--texto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.modelo-ficha small { font-size: .55em; font-weight: 500; letter-spacing: .06em; color: var(--texto-suave); }
.modelo-linha { transition-delay: 1.6s; color: var(--acento); font-size: 12px; }
.modelo-nome { margin-bottom: .18em; font-size: clamp(60px, 9vw, 150px); }
@media (max-width: 760px) {
  .modelo-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 1em; }
  .modelo-ficha dd { font-size: 20px; }
  .modelo-texto { bottom: max(10vh, 80px); }
  .modelo-nome { font-size: 22vw; }
  .modelo-barco, .modelo-barco--alto, .modelo-fantasma { top: 36%; }
  .frota-luz::after { top: 46%; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .modelo-barco { top: 47%; width: min(76vw, 1200px); }
  .modelo-barco--alto { top: 45%; width: min(58vw, 900px); }
  .modelo-nome { font-size: clamp(56px, 7vw, 110px); }
}
@media (prefers-reduced-motion: reduce) { .modelo-ficha > div { opacity: 1 !important; transform: none !important; filter: none !important; } }
/* desktop: nome à esquerda, ficha à direita, na mesma linha de base */
@media (min-width: 761px) {
  .modelo-texto {
    right: var(--gutter); display: grid; align-items: end; column-gap: 40px;
    grid-template-columns: auto 1fr; grid-template-areas: "sobre ficha" "nome ficha" "linha ficha";
  }
  .modelo-sobre { grid-area: sobre; } .modelo-nome { grid-area: nome; } .modelo-linha { grid-area: linha; }
  .modelo-ficha { grid-area: ficha; justify-self: end; margin: 0 0 .4em; flex-wrap: nowrap; }
  .frota-trilha { top: calc(max(96px, 13vh) + 40px); bottom: auto; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .modelo-ficha { display: grid; grid-template-columns: auto auto; }
}
/* ── Chamada: headline entre a abertura e os modelos ──────────────────── */
.chamada {
  position: relative; isolation: isolate; min-height: 92vh; min-height: 92svh;
  display: grid; place-content: center; justify-items: center; text-align: center;
  padding: 14vh var(--gutter);
}
.chamada-luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 45% at 50% 50%, rgb(0 110 255 / .2), transparent 70%);
  opacity: 0; transition: opacity 2s var(--ease);
}
.chamada.visto .chamada-luz { opacity: 1; }
.chamada-titulo {
  margin: 0; max-width: 16ch;
  font-size: clamp(40px, 6.4vw, 112px); font-weight: 700; font-stretch: 125%;
  line-height: .98; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance;
}
.chamada-linha { display: block; }
/* cada palavra sobe de dentro de uma "janela", saindo do desfoque */
.palavra { display: inline-block; overflow: hidden; padding: .06em .02em .1em; margin: -.06em 0 -.1em; vertical-align: top; }
.palavra-in {
  display: inline-block; --d: calc(var(--i) * 90ms);
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #ffffff 20%, #b9cad8 100%);
  transform: translateY(110%) rotate(4deg); filter: blur(10px); opacity: 0;
  transition: transform 1.1s var(--ease) var(--d), filter 1s var(--ease) var(--d), opacity .6s var(--ease) var(--d);
}
.chamada.visto .palavra-in { transform: none; filter: blur(0); opacity: 1; }
/* "aventura": azul da marca com um reflexo de luz correndo */
.palavra--destaque {
  background-image: linear-gradient(100deg, #00a2ff 0%, #00ccff 35%, #ffffff 50%, #00ccff 65%, #0077ff 100%);
  background-size: 250% 100%; background-position: 100% 0;
  filter: blur(10px) drop-shadow(0 0 0 transparent);
}
.chamada.visto .palavra--destaque {
  filter: blur(0) drop-shadow(0 0 28px rgb(0 204 255 / .45));
  animation: brilho-letra 1.6s ease-in-out calc(var(--d) + 1s) both, brilho-letra 2s ease-in-out calc(var(--d) + 6s) infinite;
}
/* frase de apoio entre dois fios de luz */
.chamada-sub {
  margin: clamp(26px, 4vh, 48px) 0 0; display: flex; align-items: center; gap: 18px;
  font: 500 clamp(17px, 1.7vw, 26px)/1.3 var(--fonte-titulo); font-stretch: 112%; color: var(--texto);
  letter-spacing: .02em;
}
.chamada-sub::before, .chamada-sub::after {
  content: ""; height: 1px; width: clamp(30px, 8vw, 120px);
  background: linear-gradient(90deg, transparent, var(--acento)); box-shadow: 0 0 12px var(--acento);
  transform: scaleX(0); transform-origin: right; transition: transform 1.2s var(--ease) calc(var(--total) * 90ms + 300ms);
}
.chamada-sub::after { background: linear-gradient(90deg, var(--acento), transparent); transform-origin: left; }
.chamada-sub > span { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: all 1s var(--ease) calc(var(--total) * 90ms + 200ms); }
.chamada.visto .chamada-sub::before, .chamada.visto .chamada-sub::after { transform: scaleX(1); }
.chamada.visto .chamada-sub > span { opacity: 1; transform: none; filter: none; }
.chamada-sub strong {
  font-weight: 700; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #00ccff 0%, #ffffff 50%, #00ccff 100%); background-size: 250% 100%; background-position: 100% 0;
}
.chamada.visto .chamada-sub strong { animation: brilho-letra 1.6s ease-in-out calc(var(--total) * 90ms + 1.2s) both, brilho-letra 2s ease-in-out 7s infinite; }
@media (max-width: 760px) {
  .chamada { min-height: 80svh; }
  .chamada-titulo { font-size: 10.4vw; }
  .chamada-sub { font-size: 17px; gap: 12px; }
  .chamada-sub::before, .chamada-sub::after { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .palavra-in, .chamada-sub > span { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ── Ficha técnica em cartões, maior e com ícones ─────────────────────── */
.modelo-ficha { gap: 14px; }
.modelo-ficha > div {
  padding: 16px 22px 18px; border-radius: 16px; min-width: 150px;
  background: linear-gradient(160deg, rgb(0 70 160 / .38), rgb(0 20 70 / .3));
  border: 1px solid rgb(0 204 255 / .28);
  box-shadow: 0 14px 40px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.modelo-ficha > div::before {
  left: 18px; right: 18px; top: -1px; bottom: auto; width: auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent); box-shadow: 0 0 12px var(--acento);
}
.modelo-ficha dt {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .2em; color: #cfe6f5;
}
.modelo-ficha dt svg { width: 24px; height: 24px; flex: none; color: var(--acento); filter: drop-shadow(0 0 8px rgb(0 204 255 / .6)); }
.modelo-ficha dd { font-size: clamp(30px, 2.5vw, 44px); font-weight: 700; text-shadow: 0 0 24px rgb(0 204 255 / .25); }
.modelo-ficha small { font-size: .5em; color: #cfe6f5; }
@media (min-width: 761px) {
  .modelo-texto { bottom: max(12vh, 104px); right: calc(var(--gutter) + 64px); }
}
@media (min-width: 761px) and (max-width: 1360px) {
  .modelo-ficha { display: grid; grid-template-columns: auto auto; }
  .modelo-ficha dd { font-size: 30px; }
}
@media (max-width: 760px) {
  .modelo-ficha { gap: 10px; }
  .modelo-ficha > div { min-width: 0; padding: 12px 14px 13px; border-radius: 14px; }
  .modelo-ficha > div::before { left: 12px; right: 12px; }
  .modelo-ficha dt { font-size: 11px; letter-spacing: .14em; gap: 7px; margin-bottom: 6px; }
  .modelo-ficha dt svg { width: 20px; height: 20px; }
  .modelo-ficha dd { font-size: 24px; }
  .modelo-texto { bottom: max(9vh, 76px); }
  .modelo-nome { font-size: 19vw; }
  .modelo-barco, .modelo-barco--alto, .modelo-fantasma { top: 31%; }
  .frota-luz::after { top: 41%; }
}
.frota-topo { justify-content: flex-end; }

/* ajustes finos: nome nunca quebra; ficha cabe em telas médias */
.modelo-nome { white-space: nowrap; }
/* nomes "CARREIRA 35" (11 letras): tamanho calculado para caber ao lado da ficha */
.modelo-nome { font-size: clamp(44px, 4.7vw, 104px) !important; }
@media (min-width: 761px) and (max-width: 1600px) { .modelo-nome { font-size: clamp(40px, 5vw, 84px) !important; } }
@media (min-width: 761px) and (max-width: 1150px) { .modelo-nome { font-size: 4.6vw !important; } }
@media (max-width: 760px) { .modelo-nome { font-size: 9.6vw !important; } }
@media (min-width: 761px) and (max-width: 1600px) {
  .modelo-nome { font-size: clamp(56px, 7.5vw, 130px); }
  .modelo-ficha { display: flex; }
  .modelo-ficha > div { min-width: 0; padding: 13px 18px 15px; }
  .modelo-ficha dd { font-size: clamp(26px, 2.2vw, 34px); }
  .modelo-ficha dt { font-size: 12px; letter-spacing: .16em; }
}
@media (min-width: 761px) and (max-width: 1300px) {
  .modelo-ficha { display: grid; grid-template-columns: auto auto; }
  .modelo-barco { top: 49%; width: 76vw; }
  .modelo-barco--alto { top: 47%; width: 58vw; }
}
@media (max-width: 760px) { .modelo-texto { bottom: max(11vh, 96px); } }
/* o brilho de "aventura" não pode ficar preso na janela da animação */
.chamada.solto .palavra { overflow: visible; }
/* menos espaço entre a headline e os barcos */
.chamada { min-height: 0; padding: 18vh var(--gutter) 0; }
@media (min-width: 761px) { .frota { margin-top: -6vh; } }
.chamada { z-index: 2; }
/* barcos mais altos no desktop: respiro entre o casco e o nome do modelo */
@media (min-width: 761px) {
  .modelo-barco { top: 46%; }
  .modelo-barco--alto { top: 42%; }
  .frota-luz { background: radial-gradient(60% 38% at 50% 46%, rgb(0 120 255 / .22), transparent 70%), radial-gradient(90% 60% at 50% 100%, rgb(0 204 255 / .08), transparent 70%), linear-gradient(to bottom, var(--fundo), var(--fundo-2) 50%, var(--fundo)); }
  .frota-luz::after { top: 58%; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .modelo-barco { top: 39%; }
  .modelo-barco--alto { top: 37%; }
}
@media (min-width: 761px) and (max-width: 1300px) {
  .modelo-barco { top: 40%; }
  .modelo-barco--alto { top: 38%; }
}

/* ── Galeria: o piloto mostra a foto e coloca no quadro ao lado ─────────── */
.galeria { position: relative; height: calc(var(--n, 4) * 115vh + 100vh); height: calc(var(--n, 4) * 115svh + 100svh); background: #07091d; }
.galeria::before, .galeria::after { content: ""; position: absolute; left: 0; right: 0; height: 30vh; pointer-events: none; z-index: 1; }
.galeria::before { top: 0; background: linear-gradient(var(--fundo), #07091d); }
.galeria::after { bottom: 0; background: linear-gradient(#07091d, var(--fundo)); }
.galeria-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; z-index: 2; }
.galeria-palco::before { /* luz azul suave atrás do quadro */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 50% at 76% 52%, rgb(0 120 255 / .16), transparent 70%);
}
/* paisagem realista atrás do piloto: miolo na cor exata do fundo do vídeo, para a borda do vídeo sumir */
.galeria-paisagem {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(48% 62% at 46% 62%, rgb(7 9 29) 62%, rgb(7 9 29 / .6) 82%, rgb(7 9 29 / 0)),
    linear-gradient(90deg, rgb(7 9 29 / .45), rgb(7 9 29 / .1) 45%, rgb(7 9 29 / .25)),
    url("assets/galeria/paisagem.webp") center 60% / cover no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
          mask-image: linear-gradient(transparent, #000 18%, #000 80%, transparent);
}
@media (max-width: 760px) {
  .galeria-paisagem {
    background: linear-gradient(rgb(7 9 29 / .2), rgb(7 9 29 / .35)), url("assets/galeria/paisagem-m.webp") center 40% / cover no-repeat;
  }
}
.galeria-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.galeria-topo { position: absolute; z-index: 4; top: max(96px, 13vh); right: var(--gutter); }
.galeria-contador { font: 500 13px/1 var(--fonte-texto); letter-spacing: .3em; color: var(--texto-suave); transition: opacity .5s; }
.galeria-contador b { color: var(--texto); font-weight: 600; font-size: 22px; letter-spacing: .05em; }
.galeria:not(.comecou) .galeria-contador { opacity: 0; }

.galeria-quadro { position: absolute; z-index: 3; margin: 0; left: 60%; top: 20%; width: 34%; aspect-ratio: 700 / 658; }
/* cada foto é um "cartão" solto; a própria foto já tem a borda branca */
.galeria-quadro > * {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px; transform-origin: 50% 55%;
  box-shadow: 0 26px 60px -18px rgb(0 0 0 / .85), 0 6px 18px rgb(0 0 0 / .35), 0 0 0 1px rgb(255 255 255 / .35);
  will-change: transform, opacity, filter; backface-visibility: hidden;
}
.galeria-capa {
  display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: var(--texto);
  border: clamp(8px, 1.1vw, 18px) solid #f4f6f8; background: radial-gradient(80% 70% at 50% 40%, #0d1a4a, #040620);
}
.galeria-capa img { width: clamp(150px, 15vw, 240px); height: auto; opacity: .95; }
.galeria-capa strong { font: 700 clamp(26px, 3.2vw, 52px)/1 var(--fonte-titulo); letter-spacing: .02em; }
.galeria-capa span { font-size: clamp(11px, .9vw, 14px); letter-spacing: .3em; text-transform: uppercase; color: var(--acento); }
.galeria-foto { object-fit: cover; background: #f4f6f8; opacity: 0; }

@media (max-width: 760px) {
  .galeria { height: calc(var(--n, 4) * 100svh + 100svh); }
  .galeria-palco::before { background: radial-gradient(70% 30% at 50% 74%, rgb(0 120 255 / .18), transparent 70%); } /* luz atrás da pilha, que agora fica embaixo */
  .galeria-topo { top: 84px; }
  .galeria-contador b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .galeria { height: auto; }
  .galeria-palco { position: relative; }
}

/* ── Chamada da galeria: mesma linguagem da headline dos modelos ───────── */
.chamada--galeria { padding: 22vh var(--gutter) 16vh; }
.chamada--galeria .chamada-titulo { max-width: 20ch; }
.chamada-linha--menor { font-size: .62em; line-height: 1.04; margin-top: .35em; }
.chamada-sub--fina { font-weight: 300; font-stretch: 100%; letter-spacing: .04em; color: #cfe6f5; max-width: 40ch; }
.chamada-sub--fina > span { text-wrap: balance; }
@media (max-width: 760px) {
  .chamada--galeria { padding: 16vh var(--gutter) 12vh; }
  .chamada--galeria .chamada-titulo { font-size: 9.2vw; }
  .chamada-linha--menor { font-size: .66em; }
  .chamada-sub--fina { font-size: 16px; }
  .chamada-sub--fina::before, .chamada-sub--fina::after { display: none; }
}
/* menos espaço entre a headline e o piloto da galeria */
.chamada--galeria { padding-bottom: 2vh; z-index: 3; }
.chamada--galeria + .galeria { margin-top: -14vh; }
@media (max-width: 760px) { .chamada--galeria { padding-bottom: 2vh; } .chamada--galeria + .galeria { margin-top: -3vh; } } /* piloto agora fica no topo: sem sobrepor o texto */
/* depois dos motores, o título da galeria fica mais perto dos cards (pedido do cliente) */
@media (min-width: 761px) { .solucoes + .chamada--galeria { padding-top: 4vh; } }
@media (max-width: 760px) { .solucoes + .chamada--galeria { padding-top: 0; } }

/* ── Motores Mercury ──────────────────────────────────────────────────── */
.motores { position: relative; padding: 0 var(--gutter) clamp(90px, 14vh, 160px); }
.chamada--motores { padding: 16vh 0 0; }
.motores-selo {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 clamp(22px, 3.4vh, 36px);
  padding: 9px 20px 9px 18px; border-radius: 999px; border: 1px solid rgb(0 204 255 / .3);
  background: rgb(0 40 120 / .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 12px/1 var(--fonte-texto); letter-spacing: .28em; text-transform: uppercase; color: var(--texto-suave);
  opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.motores-selo strong { font: 700 15px/1 var(--fonte-titulo); font-stretch: 125%; letter-spacing: .14em; color: var(--texto); }
.motores-selo span { position: relative; padding-right: 14px; }
.motores-selo span::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 14px; translate: 0 -50%; background: rgb(0 204 255 / .45); }
.chamada.visto .motores-selo { opacity: 1; transform: none; }
.chamada--motores .chamada-sub--fina { max-width: 46ch; }

.motores-grade {
  max-width: 1480px; margin: clamp(150px, 19vh, 210px) auto 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 28px);
  row-gap: clamp(150px, 18vh, 190px);
}
.motor {
  --mx: 50%; --my: 30%; --rx: 0deg; --ry: 0deg; --palco: clamp(250px, 21vw, 340px);
  position: relative; display: flex; flex-direction: column; min-height: 100%;
  padding-top: var(--palco); border-radius: 26px; isolation: isolate;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgb(0 204 255 / .13), transparent 60%),
    linear-gradient(170deg, rgb(10 40 120 / .55), rgb(3 8 40 / .75) 55%, rgb(2 4 26 / .9));
  border: 1px solid rgb(0 204 255 / .2);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .07);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
/* fio de luz no topo do card */
.motor::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent); box-shadow: 0 0 18px var(--acento);
  opacity: .7; transition: opacity .5s, left .6s var(--ease), right .6s var(--ease);
}
.motor:hover { border-color: rgb(0 204 255 / .5); box-shadow: 0 50px 90px -30px rgb(0 0 0 / .85), 0 0 60px -10px rgb(0 160 255 / .35), inset 0 1px 0 rgb(255 255 255 / .1); }
.motor:hover::before { opacity: 1; left: 4%; right: 4%; }

/* palco: holofote + HP gigante vazado atrás do motor */
.motor-palco { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: -1; pointer-events: none; }
.motor-palco::before {
  content: ""; position: absolute; left: 50%; top: -10%; width: 130%; aspect-ratio: 1; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(120 200 255 / .32), rgb(0 120 255 / .12) 45%, transparent 75%);
  transition: opacity .6s; opacity: .85;
}
.motor:hover .motor-palco::before { opacity: 1; }
.motor-hp {
  position: absolute; left: 50%; top: 2%; translate: -50% 0;
  font: 800 clamp(150px, 13vw, 230px)/.9 var(--fonte-titulo); font-stretch: 125%; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(0 204 255 / .32);
  background: linear-gradient(180deg, rgb(0 204 255 / .16), transparent 80%); -webkit-background-clip: text; background-clip: text;
  white-space: nowrap; transition: -webkit-text-stroke-color .6s, transform .8s var(--ease);
}
.motor:hover .motor-hp { -webkit-text-stroke-color: rgb(0 204 255 / .6); transform: scale(1.04); }
.motor-chao {
  position: absolute; left: 50%; top: calc(var(--palco) - 22px); width: 70%; height: 34px; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(0 0 0 / .75), transparent); filter: blur(4px);
}

/* o motor salta para fora do card */
.motor-img {
  position: absolute; left: 50%; bottom: calc(100% - var(--palco)); translate: -50% 0;
  height: clamp(380px, 31vw, 500px); width: auto; max-width: 92%; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 24px 30px rgb(0 0 0 / .7)) drop-shadow(0 0 1px rgb(150 210 255 / .5)) drop-shadow(-12px -8px 30px rgb(0 160 255 / .22));
  transform-origin: 50% 90%; transition: transform .8s var(--ease), filter .6s;
  pointer-events: none;
}
.motor:hover .motor-img { transform: translateY(-14px) scale(1.04) rotate(-1.5deg); filter: drop-shadow(0 36px 34px rgb(0 0 0 / .75)) drop-shadow(0 0 1px rgb(170 225 255 / .8)) drop-shadow(-14px -10px 40px rgb(0 180 255 / .4)); }

.motor-corpo { position: relative; display: flex; flex-direction: column; flex: 1; padding: 26px clamp(20px, 1.8vw, 30px) clamp(22px, 2vw, 30px); }
.motor-corpo::before { /* divisória de luz entre palco e texto */
  content: ""; position: absolute; top: 0; left: clamp(20px, 1.8vw, 30px); right: clamp(20px, 1.8vw, 30px); height: 1px;
  background: linear-gradient(90deg, transparent, rgb(0 204 255 / .35), transparent);
}
.motor-marca { margin: 0 0 8px; font: 500 11px/1 var(--fonte-texto); letter-spacing: .32em; text-transform: uppercase; color: var(--acento); }
.motor-nome {
  margin: 0 0 14px; font: 600 clamp(24px, 1.9vw, 32px)/1 var(--fonte-titulo); font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: .28em; flex-wrap: wrap;
}
.motor-nome b {
  font-weight: 800; font-stretch: 125%; font-size: 1.55em; letter-spacing: -.03em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #00a2ff 0%, #00ccff 35%, #ffffff 50%, #00ccff 65%, #0077ff 100%); background-size: 250% 100%; background-position: 100% 0;
  filter: drop-shadow(0 0 18px rgb(0 204 255 / .35));
}
.motor.visto .motor-nome b { animation: brilho-letra 1.6s ease-in-out calc(var(--i) * 140ms + .7s) both; }
.motor:hover .motor-nome b { animation: brilho-letra 1.4s ease-in-out both; }
.motor-nome small { font-size: .6em; font-weight: 500; color: var(--texto-suave); letter-spacing: .08em; }
.motor-desc { margin: 0 0 24px; flex: 1; min-height: 4.8em; font: 300 15px/1.6 var(--fonte-texto); color: var(--texto-suave); }
.motor-botao {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 22px; border-radius: 999px; text-decoration: none;
  font: 600 14px/1 var(--fonte-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--acento-texto);
  background: linear-gradient(100deg, #00a2ff, var(--acento)); box-shadow: 0 12px 30px -10px rgb(0 180 255 / .7);
  transition: transform .4s var(--ease), box-shadow .4s, filter .3s;
}
.motor-botao::after { /* reflexo passando */
  content: ""; position: absolute; inset: 0; translate: -120% 0; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
  transition: translate .8s var(--ease);
}
.motor-botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate .4s var(--ease); }
.motor-botao:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgb(0 200 255 / .9); filter: brightness(1.06); }
.motor-botao:hover::after { translate: 120% 0; }
.motor-botao:hover svg { translate: 4px 0; }
.motor-botao:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* entrada: os cards sobem um a um e o motor pousa */
.motor.revelar { opacity: 0; translate: 0 60px; transition: opacity 1s var(--ease) calc(var(--i) * 140ms), translate 1.1s var(--ease) calc(var(--i) * 140ms), transform .5s var(--ease), border-color .5s, box-shadow .5s; }
.motor.revelar .motor-img { opacity: 0; translate: -50% -50px; transition: opacity 1s var(--ease) calc(var(--i) * 140ms + .25s), translate 1.3s var(--ease) calc(var(--i) * 140ms + .25s), transform .8s var(--ease), filter .6s; }
.motor.revelar.visto { opacity: 1; translate: 0 0; }
.motor.revelar.visto .motor-img { opacity: 1; translate: -50% 0; }

@media (max-width: 1180px) {
  .motores-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  .motor { --palco: 300px; }
  .motor-img { height: 440px; }
  .motor-hp { font-size: 200px; }
}
/* celular: carrossel deslizante com o próximo card aparecendo na borda */
@media (max-width: 760px) {
  .motores { padding: 0 0 90px; }
  .chamada--motores { padding: 12vh var(--gutter) 0; }
  .chamada--motores .chamada-titulo { font-size: 10vw; }
  .motores-selo { font-size: 10px; letter-spacing: .22em; gap: 10px; padding: 8px 16px; }
  .motores-selo strong { font-size: 13px; }
  .motores-grade {
    display: flex; gap: 16px; max-width: none; margin-top: 0; padding: 150px var(--gutter) 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none;
  }
  .motores-grade::-webkit-scrollbar { display: none; }
  .motor { flex: 0 0 80%; scroll-snap-align: center; --palco: 250px; }
  .motor-img { height: 380px; }
  .motor-hp { font-size: 46vw; }
  .motor-desc { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .motor.revelar { opacity: 1 !important; translate: none !important; }
  .motor.revelar .motor-img { opacity: 1 !important; translate: -50% 0 !important; }
}
.motor.revelar, .motor.revelar.visto { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); }
/* nome do motor: marca em cima, potência grande embaixo */
.motor-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3em; }
.motor-nome span { flex: 0 0 100%; font-size: .62em; font-weight: 600; letter-spacing: .2em; color: var(--texto); margin-bottom: .35em; }
.motor-nome b { font-size: 2.3em; line-height: .9; }
.motor-nome small { font-size: .8em; font-weight: 600; }
.motor-marca { margin-bottom: 14px; }
/* card + motor cabem inteiros na tela do computador */
@media (min-width: 1181px) {
  .motor { --palco: clamp(220px, 15.5vw, 290px); }
  .motor-img { height: clamp(330px, 23.5vw, 440px); }
  .motor-hp { font-size: clamp(130px, 11vw, 200px); }
  /* o motor sobressai ~8vw acima do card; o espaço acompanha para não encostar no texto */
  .motores-grade { margin-top: calc(clamp(110px, 8vw, 150px) + 80px); }
}
.motor-desc { min-height: 3.2em; margin-bottom: 20px; }
.motor-botao { white-space: nowrap; }
@media (max-width: 1500px) { .motor-botao { font-size: 13px; letter-spacing: .03em; padding: 15px 18px; gap: 8px; } }

/* ── Soluções: fabricação, manutenção, conserto e sustentabilidade ────── */
.solucoes { position: relative; padding: 0 var(--gutter) clamp(90px, 14vh, 160px); }
.chamada--solucoes { padding: 2vh 0 0; }
.chamada--solucoes .chamada-sub--fina { max-width: 44ch; }
.chamada--solucoes .chamada-titulo { max-width: 20ch; font-size: clamp(40px, 5.4vw, 96px); }
.solucoes-grade {
  max-width: 1480px; margin: clamp(60px, 9vh, 100px) auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 28px);
}
.solucao {
  --mx: 50%; --my: 0%; --cor: var(--acento); --cor-rgb: 0 204 255;
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  padding: clamp(28px, 2.6vw, 44px) clamp(24px, 2.2vw, 38px); border-radius: 26px;
  background:
    radial-gradient(380px circle at var(--mx) var(--my), rgb(var(--cor-rgb) / .14), transparent 60%),
    linear-gradient(170deg, rgb(10 40 120 / .5), rgb(3 8 40 / .75) 55%, rgb(2 4 26 / .9));
  border: 1px solid rgb(var(--cor-rgb) / .2);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .07);
  transition: border-color .5s, box-shadow .5s, transform .5s var(--ease);
}
.solucao::before { /* fio de luz no topo, igual aos cards de motor */
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cor), transparent); box-shadow: 0 0 18px var(--cor);
  opacity: .7; transition: opacity .5s, left .6s var(--ease), right .6s var(--ease);
}
.solucao:hover { transform: translateY(-6px); border-color: rgb(var(--cor-rgb) / .5); box-shadow: 0 50px 90px -30px rgb(0 0 0 / .85), 0 0 60px -10px rgb(var(--cor-rgb) / .3), inset 0 1px 0 rgb(255 255 255 / .1); }
.solucao:hover::before { left: 4%; right: 4%; opacity: 1; }
.solucao-num {
  position: absolute; top: clamp(10px, 1vw, 18px); right: clamp(18px, 1.6vw, 30px); z-index: -1;
  font: 800 clamp(90px, 8vw, 140px)/1 var(--fonte-titulo); font-stretch: 125%; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(var(--cor-rgb) / .22); transition: -webkit-text-stroke-color .5s;
}
.solucao:hover .solucao-num { -webkit-text-stroke-color: rgb(var(--cor-rgb) / .45); }
.solucao-icone {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: clamp(26px, 3vw, 40px); border-radius: 18px;
  background: rgb(var(--cor-rgb) / .1); border: 1px solid rgb(var(--cor-rgb) / .3); box-shadow: 0 0 30px -6px rgb(var(--cor-rgb) / .45);
  transition: transform .6s var(--ease);
}
.solucao:hover .solucao-icone { transform: rotate(-6deg) scale(1.06); }
.solucao-icone svg { width: 34px; height: 34px; fill: none; stroke: var(--cor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.solucao-marca { margin: 0 0 12px; font: 500 11px/1.5 var(--fonte-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--cor); }
.solucao-titulo { margin: 0 0 16px; font: 700 clamp(24px, 1.9vw, 32px)/1.05 var(--fonte-titulo); font-stretch: 112%; text-transform: uppercase; color: var(--texto); }
.solucao-titulo em { font-style: normal; color: var(--cor); text-shadow: 0 0 24px rgb(var(--cor-rgb) / .5); }
.solucao-desc { flex: 1; margin: 0 0 26px; font: 300 15px/1.65 var(--fonte-texto); color: var(--texto-suave); }
.solucao-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0;
  font: 600 13px/1 var(--fonte-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--cor); text-decoration: none;
  border-bottom: 1px solid rgb(var(--cor-rgb) / .35); transition: gap .4s var(--ease), border-color .4s, transform .4s var(--ease), box-shadow .4s;
}
.solucao-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.solucao-link:hover { gap: 16px; border-color: var(--cor); }
.solucao-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* sustentabilidade: card largo, em verde, com bolhas subindo (flutuação) */
.solucao--verde {
  --cor: #2ee6a6; --cor-rgb: 46 230 166;
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 3vw, 56px);
  background:
    radial-gradient(520px circle at var(--mx) var(--my), rgb(var(--cor-rgb) / .13), transparent 60%),
    radial-gradient(60% 120% at 0% 100%, rgb(0 140 110 / .28), transparent 70%),
    linear-gradient(170deg, rgb(6 50 70 / .55), rgb(3 14 40 / .8) 55%, rgb(2 6 26 / .92));
}
.solucao--verde .solucao-icone { width: 96px; height: 96px; margin: 0; border-radius: 26px; }
.solucao--verde .solucao-icone svg { width: 50px; height: 50px; }
.solucao--verde .solucao-titulo { font-size: clamp(28px, 2.6vw, 44px); }
.solucao--verde .solucao-desc { margin: 0; max-width: 70ch; }
.solucao-link--cheio {
  align-self: center; padding: 17px 26px; border: 0; border-radius: 999px; white-space: nowrap;
  color: #00301f; background: linear-gradient(100deg, #12d58f, var(--cor)); box-shadow: 0 12px 30px -10px rgb(var(--cor-rgb) / .7);
}
.solucao-link--cheio:hover { gap: 14px; transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgb(var(--cor-rgb) / .9); }
.solucao-bolhas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.solucao-bolhas i {
  position: absolute; bottom: -30px; left: var(--x); width: var(--t); height: var(--t); border-radius: 50%;
  border: 1px solid rgb(var(--cor-rgb) / .35); background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / .25), rgb(var(--cor-rgb) / .06) 60%);
  animation: bolha var(--d) linear var(--a) infinite; opacity: 0;
}
.solucao-bolhas i:nth-child(1)  { --x: 6%;  --t: 10px; --d: 9s;  --a: 0s; }
.solucao-bolhas i:nth-child(2)  { --x: 14%; --t: 18px; --d: 12s; --a: 2s; }
.solucao-bolhas i:nth-child(3)  { --x: 27%; --t: 8px;  --d: 8s;  --a: 4s; }
.solucao-bolhas i:nth-child(4)  { --x: 38%; --t: 14px; --d: 11s; --a: 1s; }
.solucao-bolhas i:nth-child(5)  { --x: 52%; --t: 22px; --d: 14s; --a: 3s; }
.solucao-bolhas i:nth-child(6)  { --x: 63%; --t: 9px;  --d: 9s;  --a: 6s; }
.solucao-bolhas i:nth-child(7)  { --x: 74%; --t: 16px; --d: 12s; --a: 5s; }
.solucao-bolhas i:nth-child(8)  { --x: 84%; --t: 11px; --d: 10s; --a: 2.5s; }
.solucao-bolhas i:nth-child(9)  { --x: 92%; --t: 20px; --d: 13s; --a: 7s; }
.solucao-bolhas i:nth-child(10) { --x: 46%; --t: 7px;  --d: 7s;  --a: 5.5s; }
@keyframes bolha {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .55; }
  50% { transform: translate(12px, -160px); }
  85% { opacity: .4; }
  100% { transform: translate(-6px, -340px); opacity: 0; }
}

/* entrada: os cards sobem um a um */
.solucao.revelar { opacity: 0; translate: 0 60px; transition: opacity 1s var(--ease) calc(var(--i) * 130ms), translate 1.1s var(--ease) calc(var(--i) * 130ms), transform .5s var(--ease), border-color .5s, box-shadow .5s; }
.solucao.revelar.visto { opacity: 1; translate: 0 0; }

@media (max-width: 1180px) {
  .solucoes-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  .solucao--verde { grid-template-columns: auto minmax(0, 1fr); }
  .solucao--verde .solucao-link--cheio { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  .solucoes { padding: 0 var(--gutter) 90px; }
  .chamada--solucoes { padding: 0; }
  .chamada--solucoes .chamada-titulo { font-size: 10vw; }
  .solucoes-grade { grid-template-columns: 1fr; margin-top: 48px; gap: 16px; }
  .solucao--verde { grid-template-columns: 1fr; gap: 0; }
  .solucao--verde .solucao-icone { width: 64px; height: 64px; margin-bottom: 28px; border-radius: 18px; }
  .solucao--verde .solucao-icone svg { width: 34px; height: 34px; }
  .solucao--verde .solucao-desc { margin-bottom: 26px; }
  .solucao--verde .solucao-link--cheio { grid-column: auto; justify-self: stretch; justify-content: center; }
  .solucao.revelar { opacity: 1 !important; translate: 0 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .solucao-bolhas { display: none; } }

/* ícones 3D: objeto solto, flutuando sobre um brilho (sem caixa) */
.solucao-icone { position: relative; width: 112px; height: 112px; background: none; border: 0; box-shadow: none; border-radius: 0; }
.solucao-icone::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2%; height: 22%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--cor-rgb) / .55), transparent); filter: blur(10px); animation: icone-sombra 5s ease-in-out infinite; }
.solucao-icone img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .45)); animation: icone-flutua 5s ease-in-out infinite; }
.solucao:nth-child(2) .solucao-icone img, .solucao:nth-child(2) .solucao-icone::before { animation-delay: -1.2s; }
.solucao:nth-child(3) .solucao-icone img, .solucao:nth-child(3) .solucao-icone::before { animation-delay: -2.4s; }
.solucao:hover .solucao-icone { transform: scale(1.08); }
@keyframes icone-flutua { 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes icone-sombra { 50% { transform: scaleX(.82); opacity: .7; } }
.solucao--verde .solucao-icone { width: 150px; height: 150px; }

/* celular: card centralizado, ícone 3D grande no meio, títulos maiores */
@media (max-width: 760px) {
  .solucao { align-items: center; text-align: center; padding: 34px 24px 36px; }
  .solucao-num { right: 50%; translate: 50% 0; top: 6px; font-size: 128px; opacity: .8; }
  .solucao-icone { width: 150px; height: 150px; margin: 0 auto 22px; }
  .solucao-marca { font-size: 11.5px; letter-spacing: .2em; }
  .solucao-titulo { font-size: clamp(30px, 9vw, 38px); line-height: 1.02; margin-bottom: 16px; }
  .solucao-desc { font-size: 16px; }
  .solucao-link { align-self: center; }
  .solucao--verde { justify-items: stretch; }
  .solucao--verde > * { min-width: 0; }
  .solucao--verde .solucao-icone { width: 170px; height: 170px; margin: 0 auto 22px; border-radius: 0; justify-self: center; }
  .solucao--verde .solucao-titulo { font-size: 7vw; letter-spacing: -.01em; }
  .solucao--verde .solucao-link--cheio { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .solucao-icone img, .solucao-icone::before { animation: none; } }

/* celular, encerramento: título maior e centralizado; atendente primeiro, botão do WhatsApp logo abaixo dela */
@media (max-width: 760px) {
  .fechamento-texto { display: contents; }
  .fechamento-grade { gap: 0; justify-items: center; }
  .fechamento-selo { order: 1; justify-self: center; }
  .fechamento .fechamento-titulo { order: 2; text-align: center; font-size: 13.4vw; line-height: .98; letter-spacing: -.04em; }
  .fechamento .fechamento-titulo span { display: inline; }
  .fechamento-titulo span:first-child::after { content: " "; }
  .fechamento-sub { order: 3; text-align: center; margin-bottom: 8px; }
  .fechamento-atendente { order: 4; }
  .fechamento-acao { order: 5; width: 100%; margin-top: -14px; position: relative; z-index: 4; }
  .fechamento-garantias { order: 6; width: 100%; }
  .fechamento { padding-bottom: 6vh; }
}

/* computador: headline da abertura em 4 linhas ("Alta resistência / em cada detalhe. / Seu barco / direto da fábrica.") */
@media (min-width: 761px) {
  .cine + .chamada .chamada-titulo { max-width: none; font-size: clamp(40px, min(5.2vw, 9vh), 92px); }
}

/* celular: headline da abertura maior e mais perto do barco; motores mais perto da ficha do último modelo */
@media (max-width: 760px) {
  .cine + .chamada { padding-top: 6vh; }
  .cine + .chamada .chamada-titulo { font-size: 11.3vw; letter-spacing: -.04em; text-wrap: wrap; } /* sem "balance": evita palavra sozinha na linha */
  .cine + .chamada .chamada-linha { display: inline; }
  .cine + .chamada .chamada-linha:not(:last-child)::after { content: " "; }
  .chamada--motores { padding-top: 1vh; }
}

/* ── Comprar: encerramento de venda (atendente + WhatsApp) ─────────────── */
.fechamento {
  --zap: #25d366; --zap-rgb: 37 211 102;
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; padding: max(110px, 13vh) var(--gutter) 8vh;
  display: grid; align-items: center;
}
.fechamento-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 72%, transparent);
          mask-image: linear-gradient(transparent, #000 12%, #000 72%, transparent);
  background:
    radial-gradient(40% 55% at 74% 55%, rgb(0 120 255 / .22), transparent 70%),
    radial-gradient(30% 40% at 62% 82%, rgb(var(--zap-rgb) / .16), transparent 70%),
    radial-gradient(35% 45% at 18% 30%, rgb(0 204 255 / .07), transparent 70%);
}
.fechamento-grade { width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 3vw, 56px); align-items: center; }

.fechamento-selo { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px;
  font: 500 12px/1 var(--fonte-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--zap);
  background: rgb(var(--zap-rgb) / .08); border: 1px solid rgb(var(--zap-rgb) / .3); margin-bottom: 22px; }
.fechamento-selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--zap); box-shadow: 0 0 0 0 rgb(var(--zap-rgb) / .7); animation: ponto-vivo 1.8s infinite; }
@keyframes ponto-vivo { 70% { box-shadow: 0 0 0 9px rgb(var(--zap-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--zap-rgb) / 0); } }

.fechamento-titulo { font-size: clamp(38px, min(4.4vw, 8.4vh), 64px); line-height: 1; letter-spacing: -.025em; margin-bottom: .4em; }
.fechamento-titulo span { display: block; white-space: nowrap; }
.fechamento-titulo em { font-style: normal;
  background: linear-gradient(100deg, #fff 0%, var(--acento) 30%, var(--zap) 55%, #fff 70%, var(--acento) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: titulo-brilho 6s linear infinite; }
@keyframes titulo-brilho { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.fechamento-sub { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; max-width: 600px; margin-bottom: clamp(24px, 4vh, 38px); }

.fechamento-garantias { list-style: none; margin: clamp(26px, 5vh, 48px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 620px; }
.fechamento-garantias li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px;
  background: rgb(255 255 255 / .035); border: 1px solid var(--linha); transition: border-color .4s, transform .4s var(--ease), background .4s; }
.fechamento-garantias li:hover { border-color: rgb(var(--zap-rgb) / .45); background: rgb(var(--zap-rgb) / .06); transform: translateY(-2px); }
.fechamento-garantias svg { flex: 0 0 38px; width: 38px; height: 38px; padding: 8px; border-radius: 11px; color: var(--acento); background: rgb(0 204 255 / .1); }
.fechamento-garantias span { display: grid; gap: 3px; font-size: 13px; color: var(--texto-suave); line-height: 1.3; }
.fechamento-garantias b { font-size: 15px; font-weight: 600; color: var(--texto); }
.fechamento-garantias.revelar.visto li { animation: garantia-entra .8s var(--ease) both; }
.fechamento-garantias li:nth-child(2) { animation-delay: .1s !important; } .fechamento-garantias li:nth-child(3) { animation-delay: .2s !important; } .fechamento-garantias li:nth-child(4) { animation-delay: .3s !important; }
@keyframes garantia-entra { from { opacity: 0; transform: translateY(18px); } }

/* o botão: verde vivo, ondas saindo, brilho passando, ícone balançando */
.fechamento-acao { display: grid; justify-items: start; gap: 16px; }
.zap { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 18px;
  padding: 14px 18px 14px 14px; border-radius: 999px; text-decoration: none; color: #04140a;
  background: linear-gradient(135deg, #3cf07f, var(--zap) 45%, #12a94f);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .25) inset, 0 20px 50px -12px rgb(var(--zap-rgb) / .8), 0 0 80px -10px rgb(var(--zap-rgb) / .55);
  transition: transform .5s var(--ease), box-shadow .5s; animation: zap-respira 3s ease-in-out infinite; }
.zap::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none; overflow: hidden;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .65) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat;
  animation: zap-brilho 3.2s ease-in-out infinite; }
.zap:hover { transform: translateY(-4px) scale(1.03); animation-play-state: paused; box-shadow: 0 0 0 1px rgb(255 255 255 / .35) inset, 0 28px 60px -12px rgb(var(--zap-rgb) / 1), 0 0 120px -10px rgb(var(--zap-rgb) / .8); }
.zap-ondas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.zap-ondas i { position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--zap); opacity: 0; animation: zap-onda 3s ease-out infinite; }
.zap-ondas i:nth-child(2) { animation-delay: 1s; } .zap-ondas i:nth-child(3) { animation-delay: 2s; }
.zap-icone { position: relative; z-index: 2; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #0c7a38; box-shadow: 0 6px 18px rgb(0 0 0 / .25); }
.zap-icone svg { width: 36px; height: 36px; animation: zap-toca 3s ease-in-out infinite; transform-origin: 50% 60%; }
.zap-texto { position: relative; z-index: 2; display: grid; gap: 5px; padding-right: 4px; }
.zap-texto b { font: 700 clamp(20px, 1.7vw, 26px)/1 var(--fonte-titulo); font-stretch: 112%; letter-spacing: -.01em; }
.zap-texto small { font: 500 13px/1 var(--fonte-texto); letter-spacing: .04em; opacity: .78; }
.zap-seta { position: relative; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgb(4 20 10 / .14); transition: transform .5s var(--ease), background .5s; }
.zap-seta svg { width: 22px; height: 22px; animation: zap-seta 1.6s ease-in-out infinite; }
.zap:hover .zap-seta { background: #04140a; color: var(--zap); transform: translateX(4px); }
@keyframes zap-respira { 50% { transform: scale(1.025); } }
@keyframes zap-brilho { 0%, 35% { background-position: -150% 0; } 75%, 100% { background-position: 250% 0; } }
@keyframes zap-onda { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.18, 1.6); opacity: 0; } }
@keyframes zap-toca { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-14deg); } 65% { transform: rotate(12deg); } 70% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } 80% { transform: rotate(0); } }
@keyframes zap-seta { 50% { transform: translateX(4px); } }
.fechamento-fone { margin: 0 0 0 20px; font-size: 14px; }
.fechamento-fone a { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--linha); }
.fechamento-fone a:hover { border-color: var(--zap); }

/* atendente: fundida no fundo (sem quadrado), balões de conversa chegando */
.fechamento-atendente { position: relative; justify-self: center; width: min(100%, 600px, 64vh); aspect-ratio: 1120 / 1500; }
.atendente-aura { position: absolute; inset: 12% 6% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 120 255 / .35), rgb(var(--zap-rgb) / .08) 60%, transparent);
  filter: blur(30px); animation: aura 7s ease-in-out infinite; }
@keyframes aura { 50% { transform: scale(1.08); opacity: .75; } }
.atendente-foto { width: 100%; height: 100%; display: block; object-fit: cover;
  /* closest-side: zera exatamente nas bordas da foto, nunca sobra retângulo */
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 74%, transparent 100%), linear-gradient(#000 70%, transparent 98%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 74%, transparent 100%), linear-gradient(#000 70%, transparent 98%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  opacity: 0; transform: translateY(40px) scale(.97); filter: blur(6px);
  transition: opacity 1.4s var(--ease), transform 1.6s var(--ease), filter 1.4s var(--ease); }
.fechamento.visto .atendente-foto { opacity: 1; transform: none; filter: none; }

.balao { position: absolute; z-index: 3; display: flex; align-items: center; padding: 14px 18px; border-radius: 20px;
  font: 500 15px/1.3 var(--fonte-texto); color: #0b1a12; background: #e9fbe9; white-space: nowrap;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / .6); opacity: 0; transform: translateY(16px) scale(.9); transform-origin: left bottom;
  transition: opacity .6s var(--ease), transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.balao::after { content: ""; position: absolute; bottom: -6px; width: 16px; height: 16px; background: inherit; transform: rotate(45deg); border-radius: 3px; }
/* "Oi!" à direita do rosto; resposta à esquerda, na altura do braço (nunca em cima do título) */
.balao--1 { top: 13%; right: -12%; border-bottom-right-radius: 6px; transform-origin: right bottom; }
.balao--1::after { right: 22px; }
.balao--2 { top: 60%; left: -10%; background: #dcf8c6; border-bottom-left-radius: 6px; }
.balao--2::after { left: 22px; }
.balao.ativo { opacity: 1; transform: none; animation: balao-flutua 5s ease-in-out .8s infinite; }
@keyframes balao-flutua { 50% { transform: translateY(-6px); } }
.balao-msg { display: none; }
.balao--2 .balao-msg, .balao.respondeu .balao-msg { display: inline; }
.balao.respondeu .balao-digitando { display: none; }
.balao-digitando { display: inline-flex; gap: 5px; padding: 4px 2px; }
.balao-digitando i { width: 8px; height: 8px; border-radius: 50%; background: #5b7a66; animation: digitando 1.2s infinite; }
.balao-digitando i:nth-child(2) { animation-delay: .15s; } .balao-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes digitando { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.atendente-cracha { position: absolute; z-index: 3; left: 50%; bottom: 22%; translate: -50% 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap; font: 500 13px/1 var(--fonte-texto); letter-spacing: .02em; color: var(--texto);
  background: rgb(2 3 40 / .55); border: 1px solid rgb(var(--zap-rgb) / .35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 1s var(--ease) 1.2s; }
.fechamento.visto .atendente-cracha { opacity: 1; }
.cracha-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--zap); animation: ponto-vivo 1.8s infinite; }

@media (max-width: 960px) {
  .fechamento { padding: 14vh var(--gutter) 0; min-height: auto; }
  .fechamento-grade { grid-template-columns: 1fr; }
  .fechamento-atendente { width: min(88%, 420px); margin: 10px auto 0; justify-self: center; }
  .balao--1 { right: -8%; } .balao--2 { left: -8%; }
}
@media (max-width: 560px) {
  .fechamento-titulo { font-size: clamp(32px, 10.4vw, 52px); }
  .fechamento-titulo span { white-space: normal; }
  .fechamento-selo { letter-spacing: .14em; font-size: 11px; }
  .fechamento-garantias { grid-template-columns: 1fr; gap: 10px; }
  .fechamento-acao { justify-items: stretch; }
  .zap { gap: 12px; padding: 10px 12px 10px 10px; }
  .zap-icone { width: 54px; height: 54px; } .zap-icone svg { width: 30px; height: 30px; }
  .zap-texto b { font-size: 20px; }
  .zap-seta { width: 40px; height: 40px; margin-left: auto; }
  .fechamento-fone { margin: 0; text-align: center; }
  .balao { font-size: 13px; padding: 11px 14px; }
  .balao--1 { right: -6%; top: 10%; } .balao--2 { left: -6%; }
  .atendente-cracha { font-size: 12px; bottom: 16%; }
}
@media (prefers-reduced-motion: reduce) {
  .atendente-foto, .balao, .atendente-cracha { opacity: 1 !important; transform: none !important; filter: none !important; }
  .balao .balao-msg { display: inline; } .balao .balao-digitando { display: none; }
}