/* ═══════════════════════════════════════════════════════════════
   João Paulo · JP Broker — "branco, ouro e marinho" sobre um mar em 3D
   Marcellus (títulos) + Manrope (texto) + IBM Plex Mono (instrumentos).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --branco: #FFFFFF;
  --creme: #FBF6EC;
  --azul-claro: #E4F0F8;
  --marinho: #0A1F33;
  --marinho-2: #12304D;
  --abismo: #06121F;
  --tinta: #0A1F33;
  --espuma: #F7F3EA;
  --ouro: #C9A25A;
  --ouro-escuro: #B08A43;
  --ouro-texto: #8E6522;
  --ouro-claro: #DDBB78;

  --acento: var(--ouro);
  --acento-hover: var(--ouro-escuro);
  --acento-texto: var(--ouro-texto);
  --texto-botao: var(--marinho);

  --fx-fundo: #FFFFFF;
  --fx-tinta: #0A1F33;

  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 104px; --e7: 168px;
  --margem: clamp(16px, 5.5vw, 88px);
  --topo-h: 76px;
  --mola: cubic-bezier(.22, 1, .36, 1);
}

.escuro { --acento: var(--ouro-claro); --acento-hover: #E8CB90; --acento-texto: var(--ouro-claro); }

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip também no html: só no body, o Chrome do celular alargava a página (fotos inclinadas, bússola, ondas)
   e o topo fixo ia junto, cortando o WhatsApp. "clip" (e não "hidden") mantém as cenas fixas funcionando. */
html { background: var(--fx-fundo); -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--fx-fundo); color: var(--fx-tinta);
  font: 400 17px/1.6 var(--texto);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--acento-texto); }
::selection { background: var(--ouro); color: var(--marinho); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }
svg.i { width: 18px; height: 18px; flex: 0 0 auto; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--marinho); color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; transition: top .2s; }
.pular:focus { top: 16px; }

/* ───────── o mar 3D (canvas fixo atrás de tudo) ───────── */
#oceano { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
.oceano-reserva {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #16344f 0%, #2a5670 38%, #c99a62 49%, #0d3148 51%, #071e30 100%);
}
.sem-3d #oceano { display: none; }
.pagina-home main { position: relative; z-index: 1; }

/* ───────── elementos comuns ───────── */
.rotulo { margin: 0 0 var(--e2); font: 500 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--acento-texto); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 26px; border: 0; border-radius: 999px;
  background: var(--acento); color: var(--texto-botao);
  font: 700 15px/1.2 var(--texto); letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 14px 30px -16px rgba(201, 162, 90, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform .35s var(--mola), background-color .3s, box-shadow .3s;
}
.botao:hover { background: var(--acento-hover); transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(201, 162, 90, 1), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.botao svg.i { transition: transform .35s var(--mola); }
.botao:hover svg.i { transform: translateX(4px); }
.botao-grande { padding: 20px 34px; font-size: 16.5px; }

.botao-vidro {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 22px 7px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 600 15px/1.2 var(--texto); text-decoration: none;
  transition: background-color .3s, border-color .3s, transform .35s var(--mola);
}
.botao-vidro:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--ouro-claro); transform: translateY(-2px); }
.icone-redondo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ouro-claro); color: var(--marinho); }
.icone-redondo svg { width: 20px; height: 20px; }

.botao-contorno {
  display: inline-flex; align-items: center; padding: 15px 24px; border-radius: 999px;
  border: 1.5px solid var(--marinho); color: var(--marinho); font: 700 15px/1.2 var(--texto); text-decoration: none;
  transition: background-color .3s, color .3s;
}
.botao-contorno:hover { background: var(--marinho); color: #fff; }
.botao-whats svg.i { width: 20px; height: 20px; }

/* painéis de vidro claro sobre o mar */
.vidro-claro {
  --fx-tinta: #0A1F33; --acento-texto: var(--ouro-texto); --acento: var(--ouro); --acento-hover: var(--ouro-escuro);
  color: var(--fx-tinta);
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 24px;
  box-shadow: 0 34px 70px -34px rgba(3, 15, 28, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* cartão de WhatsApp (píer, estoque, contato) */
.cartao-whats {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 14px 22px 14px 14px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.08); color: var(--espuma);
  border: 1px solid rgba(221, 187, 120, 0.5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  text-decoration: none;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--mola), border-color .3s, background-color .3s;
}
.cartao-whats:hover { border-color: var(--ouro-claro); background: rgba(255, 255, 255, 0.13); }
.cartao-whats-icone { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; background: linear-gradient(145deg, #f3dca0, #c9a25a 55%, #9c7732); color: var(--marinho); box-shadow: 0 12px 26px -12px rgba(201, 162, 90, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.cartao-whats-icone svg { width: 28px; height: 28px; }
.cartao-whats-texto { display: grid; gap: 2px; text-align: left; }
.cartao-whats-texto small { font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ouro-claro); }
.cartao-whats-texto b { font: 400 22px/1.15 var(--display); }
.cartao-whats-texto span { font: 500 13px/1.3 var(--mono); opacity: .8; }
.cartao-whats svg.i { width: 22px; height: 22px; color: var(--ouro-claro); margin-left: 8px; transition: transform .35s var(--mola); }
.cartao-whats:hover svg.i { transform: translateX(4px); }

/* ───────── topo: vidro fosco com linha dourada ───────── */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: var(--e3);
  height: var(--topo-h); padding: 0 var(--margem);
  color: var(--marinho);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid rgba(201, 162, 90, 0.7);
  box-shadow: 0 12px 30px -22px rgba(3, 15, 28, 0.6);
  transition: background-color .4s;
}
.topo.rolou { background: rgba(255, 255, 255, 0.88); }
/* a marca da loja como na fachada: "regatta" com "Ilhabela" alinhado à direita embaixo, e o João Paulo pequeno */
.marca { display: inline-grid; justify-items: start; text-decoration: none; line-height: 1; }
.marca-logo { width: 200px; height: auto; display: block; }
.marca-local { justify-self: end; margin-top: -1px; font: italic 700 13px/1 var(--texto); letter-spacing: 0.01em; color: #14AEC6; }
.marca-joao { margin-top: 5px; font: 500 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.2em; color: var(--marinho); opacity: .8; }
.marca-nome { font: 400 23px/1 var(--display); text-transform: uppercase; letter-spacing: 0.08em; }
.marca-sub { margin-top: 6px; font: 500 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ouro-texto); }
.topo-nav {
  display: flex; gap: 4px; margin-left: auto; padding: 5px;
  border-radius: 999px; background: rgba(10, 31, 51, 0.05); border: 1px solid rgba(10, 31, 51, 0.07);
}
.topo-nav a { padding: 9px 17px; border-radius: 999px; font: 600 14px/1 var(--texto); text-decoration: none; transition: background-color .3s, color .3s, box-shadow .3s; }
.topo-nav a:hover { background: #fff; color: var(--ouro-texto); box-shadow: 0 6px 16px -8px rgba(10, 31, 51, 0.4); }
/* Mercado Livre: selo amarelo da marca com o aperto de mãos */
.topo-ml {
  display: inline-flex; align-items: center; gap: 9px; margin-left: 4px;
  padding: 5px 16px 5px 5px; border-radius: 999px;
  background: #fff; color: var(--marinho); text-decoration: none;
  border: 1px solid rgba(10, 31, 51, 0.12);
  box-shadow: 0 10px 22px -16px rgba(10, 31, 51, 0.8);
  transition: transform .35s var(--mola), border-color .3s;
}
.topo-ml:hover { transform: translateY(-1px); border-color: #e6cf00; }
.topo-ml-icone { width: 36px; height: 36px; flex: 0 0 auto; display: block; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(45, 50, 119, 0.12); }
.topo-ml-texto { display: grid; line-height: 1.15; }
.topo-ml-texto small { font: 500 9.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(10, 31, 51, 0.6); }
.topo-ml-texto b { font: 700 13.5px/1.2 var(--texto); }
.cartao-ml .cartao-whats-icone { overflow: hidden; background: #FFE600; box-shadow: 0 12px 26px -12px rgba(230, 200, 0, 0.9); }
.cartao-ml .cartao-whats-icone img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cartao-ml small { color: #FFE600; }
/* WhatsApp no topo: só o símbolo, num círculo verde */
.topo-whats {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 50%;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 10px 22px -12px rgba(18, 140, 70, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform .35s var(--mola), background-color .3s;
}
.topo-whats svg { width: 25px; height: 25px; }
.topo-whats:hover { transform: translateY(-2px) scale(1.04); background: #1EBE5B; }
.topo-whats-icone { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ouro); color: var(--marinho); }
.topo-whats-icone svg { width: 19px; height: 19px; }
.topo-whats-texto { display: grid; line-height: 1.15; }
.topo-whats-texto small { font: 500 9.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ouro-claro); }
.topo-whats-texto b { font: 700 14px/1.2 var(--texto); letter-spacing: 0.01em; }

/* ═════════ PLOTTER (movimento-assinatura) ═════════ */
.plotter {
  position: fixed; left: 24px; bottom: 20px; z-index: 40;
  display: flex; align-items: center; gap: 18px; height: 50px; padding: 5px 20px 5px 5px;
  color: #CBD8E5; background: rgba(6, 18, 31, 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(221, 187, 120, 0.35); border-radius: 10px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  font: 400 11px/1.25 var(--mono); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: opacity .6s, transform .6s var(--mola);
}
.plotter-bloco { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.plotter-bloco .k { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.14em; opacity: .6; }
.plotter-bloco .v { font-size: 11.5px; color: #fff; }
.plotter-id { padding-right: 18px; border-right: 1px solid rgba(221, 187, 120, 0.22); align-self: stretch; }
.plotter-marca { color: var(--ouro-claro); font-weight: 500; font-size: 10.5px; letter-spacing: 0.16em; }
.plotter-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; }
.plotter-estado b { font-weight: 500; }
.plotter-estado i { width: 6px; height: 6px; border-radius: 50%; background: #5E7187; transition: background-color .3s, box-shadow .3s; }
.plotter.em-curso .plotter-estado i { background: var(--ouro-claro); box-shadow: 0 0 0 3px rgba(221, 187, 120, 0.22); }
.plotter.no-porto .plotter-estado i { background: var(--ouro-claro); }
.plotter-vel .v { display: inline-block; min-width: 7.2ch; }
.plotter-wp { padding-left: 18px; border-left: 1px solid rgba(221, 187, 120, 0.22); align-self: stretch; }
.plotter-wp .v { max-width: 200px; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; }
.plotter-carta { display: block; flex: 0 0 auto; width: 92px; height: 38px; border-radius: 6px; background: #0F2A45; }
.plotter-carta .terra { fill: #1D3D5C; }
.plotter-carta .isobata { fill: none; stroke: rgba(203, 216, 229, 0.18); stroke-width: 1; stroke-dasharray: 2 3; }
.plotter-carta .sondagens text { fill: rgba(203, 216, 229, 0.36); font: 6px var(--mono); }
.plotter-carta .rota { fill: none; stroke: rgba(203, 216, 229, 0.4); stroke-width: 1; stroke-dasharray: 3 3; }
.plotter-carta .rastro { fill: none; stroke: var(--ouro-claro); stroke-width: 1.8; stroke-linecap: round; }
.plotter-carta .marco { fill: rgba(203, 216, 229, 0.6); }
.plotter-carta .destino { fill: none; stroke: var(--ouro-claro); stroke-width: 1.2; }
.plotter-carta #barco path { fill: #fff; }
@media (max-width: 1240px) { .plotter-lon, .plotter-prof { display: none; } .topo-ml-texto { display: none; } .topo-ml { padding: 4px; } }
@media (prefers-reduced-motion: no-preference) {
  .js .plotter { opacity: 0; transform: translateY(16px); }
  .js.chegou .plotter { opacity: 1; transform: none; transition-delay: 1.1s; }
}

/* ═════════ 1 · ABERTURA ═════════ */
/* A foto do João no timão ocupa a tela inteira. Camadas, de trás pra frente:
   fundo (zoom lento com a rolagem) › deriva (segue o ponteiro de leve) › foto (surge desfocada,
   entra em foco e respira) › véu (escurece a esquerda, onde o texto mora) › grão › noite (saída). */
.abertura-palco {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: calc(var(--topo-h) + 32px) var(--margem) 110px;
  background: var(--abismo);
  isolation: isolate;
}
.abertura-fundo, .abertura-deriva, .abertura-veu, .abertura-grao, .abertura-noite { position: absolute; inset: 0; pointer-events: none; }
/* a foto começa logo abaixo da barra e é ancorada no alto: a cabeça do João nunca é cortada,
   e os zooms (rolagem e respiração) crescem a partir do topo */
.abertura-fundo { z-index: -4; overflow: hidden; top: var(--topo-h); transform-origin: 70% 0%; }
.abertura-deriva { inset: 0 -2% -2% -2%; }
.abertura-deriva picture { display: block; width: 100%; height: 100%; }
.abertura-foto {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 64% 0%;
  transform-origin: 70% 0%; transform: scale(1.02);
  filter: saturate(1.04) contrast(1.05) brightness(1.03);
}
/* o véu escurece só a esquerda (texto) e a base; sobre o João, a luz fica aberta */
.abertura-veu {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(6, 18, 31, 0.9) 0%, rgba(6, 18, 31, 0.78) 24%, rgba(6, 18, 31, 0.44) 44%, rgba(6, 18, 31, 0.08) 60%, rgba(6, 18, 31, 0) 70%),
    linear-gradient(0deg, rgba(6, 18, 31, 0.92) 0%, rgba(6, 18, 31, 0.5) 14%, rgba(6, 18, 31, 0) 36%),
    radial-gradient(60% 75% at 75% 34%, rgba(6, 18, 31, 0) 50%, rgba(6, 18, 31, 0.28) 100%);
}
.abertura-grao {
  z-index: -2; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.abertura-noite { z-index: 0; background: var(--abismo); opacity: 0; }

.abertura-texto { position: relative; z-index: 1; max-width: min(640px, 50vw); }
.selo {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(221, 187, 120, 0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 11.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--espuma);
}
.selo-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ouro-claro); box-shadow: 0 0 0 4px rgba(221, 187, 120, 0.22); }
.selo-sep { width: 1px; height: 12px; background: rgba(221, 187, 120, 0.55); }
.abertura-titulo { font: 400 clamp(44px, 5.2vw, 84px)/1.05 var(--display); margin: 0 0 26px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35); }
.abertura-titulo em { white-space: nowrap; }
.abertura-titulo .p { display: inline-block; }
.abertura-sub { max-width: 46ch; margin-bottom: 36px; font-size: 18.5px; line-height: 1.6; color: rgba(247, 243, 234, 0.88); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); }
.abertura-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.abertura-infos {
  list-style: none; margin: 0; padding: 20px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  border-top: 1px solid rgba(221, 187, 120, 0.32);
  font: 500 13.5px/1.3 var(--texto); color: rgba(247, 243, 234, 0.86);
}
.abertura-infos li { display: flex; align-items: center; gap: 8px; }
.abertura-infos svg { width: 18px; height: 18px; color: var(--ouro-claro); }

@media (prefers-reduced-motion: no-preference) {
  .js .abertura-titulo .p { opacity: 0; transform: translateY(0.55em); }
  .js.chegou .abertura-titulo .p { opacity: 1; transform: none; transition: opacity .8s ease-out, transform 1.1s var(--mola); transition-delay: calc(0.35s + var(--i) * 0.07s); }
  .js .selo, .js .abertura-sub, .js .abertura-acoes, .js .abertura-infos { opacity: 0; transform: translateY(14px); }
  .js.chegou .selo { opacity: 1; transform: none; transition: opacity .8s .15s, transform .9s .15s var(--mola); }
  .js.chegou .abertura-sub { opacity: 1; transform: none; transition: opacity .9s .95s, transform 1s .95s var(--mola); }
  .js.chegou .abertura-acoes { opacity: 1; transform: none; transition: opacity .9s 1.1s, transform 1s 1.1s var(--mola); }
  .js.chegou .abertura-infos { opacity: 1; transform: none; transition: opacity .9s 1.3s, transform 1s 1.3s var(--mola); }
  /* a foto surge do escuro, desfocada e perto, e entra em foco devagar, como uma lente */
  .js .abertura-foto { opacity: 0; transform: scale(1.12); filter: blur(18px) saturate(0.6) brightness(0.75); }
  .js.chegou .abertura-foto {
    opacity: 1; transform: scale(1.02); filter: saturate(1.04) contrast(1.05) brightness(1.03);
    transition: opacity 1.4s ease-out, filter 2.2s cubic-bezier(.22,1,.36,1), transform 3s cubic-bezier(.16,1,.3,1);
    /* depois, respira: um zoom lentíssimo */
    animation: respirar 24s ease-in-out 3s infinite alternate;
  }
  .abertura-pausada .abertura-foto { animation-play-state: paused !important; }
}
@keyframes respirar {
  from { transform: scale(1.02); }
  to { transform: scale(1.06) translate(-0.8%, 0); }
}

/* ═════════ 2 · QUEM CONDUZ ═════════ */
/* começa na cor em que a abertura termina e clareia: sem corte seco entre as cenas */
.quem { padding: 190px var(--margem) 150px; background: linear-gradient(180deg, #06121F 0%, rgba(6, 18, 31, 0.6) 110px, rgba(6, 18, 31, 0) 320px); }
.quem-grade { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 5vw; align-items: center; }
.quem-painel { padding: 56px 56px 44px; }
.quem-frase { font: 400 clamp(30px, 3vw, 46px)/1.16 var(--display); margin: 0 0 24px; }
.quem-texto { display: grid; gap: 14px; font-size: 17px; line-height: 1.65; color: color-mix(in srgb, var(--fx-tinta) 80%, transparent); max-width: 60ch; }
.quem-fatos {
  list-style: none; margin: 38px 0 0; padding: 30px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  border-top: 1px solid rgba(201, 162, 90, 0.5);
}
.quem-fatos li { display: grid; gap: 12px; align-content: start; }
/* números em relevo: a face em ouro e a espessura desenhada em camadas */
.num3d {
  display: inline-block; font: 400 clamp(38px, 3.4vw, 54px)/1 var(--display); color: #B8893E;
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 1px 1px 0 #a57b36, 2px 2px 0 #936c2e, 3px 3px 0 #7f5d27, 4px 4px 0 #6c4f20, 6px 8px 14px rgba(10, 31, 51, 0.3);
  transform: perspective(500px) rotateX(12deg) rotateY(-8deg);
  transform-origin: left bottom;
}
.fato-txt { font-size: 13.5px; line-height: 1.45; color: color-mix(in srgb, var(--fx-tinta) 72%, transparent); max-width: 20ch; }

/* a escotilha: aro de latão, parafusos e vidro com reflexo */
.escotilha {
  position: relative; margin: 0; justify-self: center;
  width: min(470px, 36vw); aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, -8deg));
  transition: transform .6s var(--mola);
}
.escotilha-corpo {
  position: absolute; inset: 0; border-radius: 50%; padding: 7.5%;
  background: conic-gradient(from 210deg, #f6e2ad, #b8893e 18%, #6e4f1e 34%, #e9cd8e 50%, #8b692e 66%, #f3dca0 82%, #b8893e 100%);
  box-shadow: 0 50px 80px -34px rgba(3, 15, 28, 0.75), inset 0 2px 3px rgba(255, 255, 255, 0.65), inset 0 -4px 8px rgba(0, 0, 0, 0.35);
}
.escotilha-vidro {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--marinho);
  box-shadow: 0 0 0 6px rgba(40, 28, 10, 0.55), inset 0 12px 30px rgba(0, 0, 0, 0.5);
}
.escotilha-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.1s ease, transform 4.6s linear; }
.escotilha-foto.ativa { opacity: 1; transform: scale(1.02); }
.escotilha-reflexo {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(120% 80% at 28% 12%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 28%, transparent 46%),
    linear-gradient(135deg, transparent 56%, rgba(255, 255, 255, 0.1) 61%, transparent 67%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}
.parafusos i {
  position: absolute; width: 4.4%; height: 4.4%; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff3cf, #b8893e 55%, #5a3f15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.parafusos i:nth-child(1) { left: 50%; top: 3.6%; }
.parafusos i:nth-child(2) { left: 82.8%; top: 17.2%; }
.parafusos i:nth-child(3) { left: 96.4%; top: 50%; }
.parafusos i:nth-child(4) { left: 82.8%; top: 82.8%; }
.parafusos i:nth-child(5) { left: 50%; top: 96.4%; }
.parafusos i:nth-child(6) { left: 17.2%; top: 82.8%; }
.parafusos i:nth-child(7) { left: 3.6%; top: 50%; }
.parafusos i:nth-child(8) { left: 17.2%; top: 17.2%; }
.escotilha-selo {
  position: absolute; left: -10%; bottom: 6%;
  display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px;
  border-radius: 18px; background: rgba(10, 31, 51, 0.9); color: var(--espuma);
  border: 1px solid rgba(221, 187, 120, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7);
  transform: translateZ(60px);
}
.escotilha-selo svg { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--ouro); color: var(--marinho); }
.escotilha-selo span { display: grid; line-height: 1.15; }
.escotilha-selo small { font: 500 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ouro-claro); }
.escotilha-selo b { font: 400 22px/1.2 var(--display); }

/* ═════════ 3 · NO LEME ═════════ */
.leme-palco { display: block; padding: 0; }
.leme-cabine { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.leme-palco::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 18, 31, 0.72) 0%, rgba(6, 18, 31, 0.35) 34%, rgba(6, 18, 31, 0) 52%);
}
.leme-cabeca { position: absolute; z-index: 2; left: calc(var(--margem) + 80px); top: 172px; max-width: 560px; text-shadow: 0 3px 24px rgba(0, 0, 0, 0.6); }
.leme-titulo { font: 400 clamp(30px, 3vw, 46px)/1.14 var(--display); }
.leme-bussola {
  position: absolute; z-index: 2; top: 172px; right: calc(var(--margem) + 80px); width: 320px; padding-top: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.leme-bussola::before { content: ""; position: absolute; left: 50%; top: 0; border: 7px solid transparent; border-top-color: var(--ouro-claro); transform: translateX(-50%); }
.bussola-faixa {
  display: flex; gap: 42px; padding: 8px 0; white-space: nowrap;
  font: 500 13px/1 var(--mono); letter-spacing: 0.1em; color: rgba(247, 243, 234, 0.85);
  border-top: 1px solid rgba(221, 187, 120, 0.4); border-bottom: 1px solid rgba(221, 187, 120, 0.4);
  transform: translateX(calc(130px - var(--progresso, 0) * 330px));
}
.bussola-rumo { margin-top: 10px; text-align: center; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: rgba(247, 243, 234, 0.7); }
.bussola-rumo b { color: var(--ouro-claro); font-weight: 500; }

.leme-painel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  /* altura mínima de 46vh, mas cresce para cima se o texto da etapa precisar (notebooks de 768px de altura),
     sem a tela descer para trás do JP·NAV, que fica nos 92px de baixo */
  height: auto; min-height: max(46vh, 340px);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); gap: 4vw; align-items: center;
  padding: 3vh calc(var(--margem) + 60px) 92px;
  /* painel em preto brilhante, como o das lanchas atuais, com reflexo do céu na borda */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 7%),
    linear-gradient(180deg, #1a2531 0%, #0c131b 18%, #05080c 100%);
  border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 -30px 70px -20px rgba(0, 0, 0, 0.65);
}
/* friso de aço escovado no painel */
.leme-painel::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 12px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(160, 172, 182, 0) 0%, #c9d2d9 18%, #f4f7f9 50%, #aeb8c0 82%, rgba(160, 172, 182, 0) 100%);
  opacity: .75; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.leme-timao { position: relative; justify-self: center; width: min(330px, 25vw); aspect-ratio: 1; margin-top: -16vh; }
.timao-inclinado { width: 100%; height: 100%; transform: perspective(900px) rotateX(30deg); transform-style: preserve-3d; }
.timao-giro { width: 100%; height: 100%; display: block; transform: rotate(calc(var(--progresso, 0) * 288deg)); filter: drop-shadow(0 22px 18px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.2)); }
.timao-sombra { position: absolute; left: 12%; right: 12%; bottom: -4%; height: 12%; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 70%); filter: blur(6px); z-index: -1; }

.leme-tela {
  position: relative; border-radius: 18px; padding: 20px 26px 22px;
  background: linear-gradient(160deg, rgba(24, 56, 86, 0.96), rgba(6, 18, 31, 0.97));
  border: 1px solid rgba(221, 187, 120, 0.38);
  box-shadow: 0 0 0 7px #040a12, 0 0 0 8px rgba(221, 187, 120, 0.25), 0 34px 50px -20px rgba(0, 0, 0, 0.85), inset 0 0 50px rgba(70, 150, 210, 0.08);
  transform: perspective(1400px) rotateX(9deg); transform-origin: 50% 100%;
}
.leme-tela::after { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 38%); }
.tela-topo {
  display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(221, 187, 120, 0.22);
  font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ouro-claro);
}
.tela-topo b { color: #fff; font-weight: 500; }
.leme-etapas { list-style: none; margin: 0; padding: 0; display: grid; min-height: 150px; perspective: 900px; }
.leme-etapas .fx-etapa {
  grid-area: 1 / 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start;
  transform: rotateX(-40deg) translateY(18px); transform-origin: 50% 0;
  transition: opacity .45s ease, transform .7s var(--mola);
}
.leme[data-etapa="1"] .fx-etapa:nth-of-type(1),
.leme[data-etapa="2"] .fx-etapa:nth-of-type(2),
.leme[data-etapa="3"] .fx-etapa:nth-of-type(3),
.leme[data-etapa="4"] .fx-etapa:nth-of-type(4),
.leme[data-etapa="5"] .fx-etapa:nth-of-type(5) { transform: none; }
.etapa-num {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(145deg, #f3dca0, #c9a25a 55%, #9c7732); color: var(--marinho);
  font: 700 21px/1 var(--texto); box-shadow: 0 0 0 5px rgba(201, 162, 90, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.leme-etapas h3 { font: 400 clamp(24px, 2.2vw, 32px)/1.15 var(--display); color: #fff; margin-bottom: 10px; }
.leme-etapas p { font-size: 16px; line-height: 1.6; color: rgba(247, 243, 234, 0.82); max-width: 52ch; }
.leme-etapas p + p { margin-top: 8px; }
.tela-teclas { display: flex; gap: 10px; margin-top: 20px; }
.tela-teclas button {
  width: 46px; height: 36px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, #1c3d5b, #0c2238); color: rgba(247, 243, 234, 0.85);
  border: 1px solid rgba(221, 187, 120, 0.32); font: 500 13px/1 var(--mono);
  box-shadow: 0 4px 0 #030810, inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background .3s, color .3s, box-shadow .3s, transform .15s;
}
.tela-teclas button:hover { border-color: var(--ouro-claro); }
.tela-teclas button:active { transform: translateY(3px); box-shadow: 0 1px 0 #030810; }
.tela-teclas button.acesa { background: linear-gradient(180deg, #e8cb90, #c9a25a); color: var(--marinho); box-shadow: 0 4px 0 #6e4f1e, 0 0 18px rgba(221, 187, 120, 0.55); }

/* ═════════ 4 · O PÍER ═════════ */
.pier {
  position: relative; padding: 150px var(--margem) 260px;
  background: linear-gradient(180deg, #060f1a 0%, rgba(6, 18, 31, 0.88) 8%, rgba(6, 18, 31, 0.88) 88%, rgba(6, 18, 31, 0) 100%);
}
.pier-cabeca { max-width: 1000px; margin: 0 auto 96px; text-align: center; }
.pier-titulo { font: 400 clamp(36px, 4vw, 62px)/1.1 var(--display); margin-bottom: 18px; text-wrap: balance; }
.pier-sub { font-size: 17px; color: rgba(247, 243, 234, 0.8); }

.pier-deck { position: relative; max-width: 1280px; margin: 0 auto; display: grid; gap: 120px; padding: 30px 0; }
/* o deck central: tábuas de teca descendo a página */
.pier-deck::before {
  content: ""; position: absolute; top: -50px; bottom: -50px; left: 50%; width: 78px; transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0.45)),
    repeating-linear-gradient(180deg, #936238 0 30px, #5e3a1d 30px 32px);
  border-left: 3px solid rgba(221, 187, 120, 0.3); border-right: 3px solid rgba(221, 187, 120, 0.3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  opacity: .92;
}
.vaga { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr); align-items: center; }
.vaga-cabeco {
  grid-column: 2; grid-row: 1; justify-self: center; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c8, #c9a25a 50%, #5a3f15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(10, 31, 51, 0.6);
}
.vaga-foto-caixa { grid-row: 1; perspective: 1200px; }
.vaga-esq .vaga-foto-caixa { grid-column: 1; padding-right: 26px; }
.vaga-dir .vaga-foto-caixa { grid-column: 3; padding-left: 26px; }
.vaga-info { grid-row: 1; max-width: 440px; transition: opacity .6s ease; }
.vaga-esq .vaga-info { grid-column: 3; padding-left: 44px; }
.vaga-dir .vaga-info { grid-column: 1; justify-self: end; padding-right: 44px; text-align: right; }
.js .pier .vaga:not(.ativa) .vaga-info { opacity: .5; }

.vaga-foto {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden;
  background: var(--marinho-2);
  box-shadow: 0 50px 70px -36px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(221, 187, 120, 0.3);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--mola), box-shadow .6s;
}
.vaga-foto:hover { box-shadow: 0 60px 80px -36px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--ouro-claro); }
.vaga-foto img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0%)) scale(1.1); transition: transform .2s linear; }
.vaga-brilho { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, 0.3), transparent 48%); mix-blend-mode: soft-light; }
.inclinando .vaga-brilho { opacity: 1; }
.vaga-fotos-n { position: absolute; right: 14px; bottom: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(10, 31, 51, 0.78); color: var(--espuma); font: 500 11px/1 var(--mono); letter-spacing: 0.08em; }
.vaga-numero { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font: 500 11.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: rgba(247, 243, 234, 0.75); }
.vaga-dir .vaga-numero { justify-content: flex-end; }
.vaga-numero span { color: var(--ouro-claro); }
.vaga-nome { font: 400 clamp(34px, 3.2vw, 52px)/1.05 var(--display); margin-bottom: 12px; }
.vaga-nome a { text-decoration: none; }
.vaga-spec { font-size: 15px; line-height: 1.5; color: rgba(247, 243, 234, 0.78); margin-bottom: 18px; }
.vaga-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 22px; }
.vaga-dir .vaga-preco { justify-content: flex-end; }
.vaga-preco .valor { font: 500 clamp(22px, 2vw, 30px)/1 var(--mono); color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.vaga-preco .valor-consulta { font-size: 17px; }
.vaga-preco s { font: 400 14px/1 var(--mono); opacity: .55; }
.vaga-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.vaga-dir .vaga-acoes { justify-content: flex-end; }
.vaga-link, .vaga-whats {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  font: 700 13.5px/1 var(--texto); text-decoration: none; transition: background-color .3s, color .3s, border-color .3s;
}
.vaga-link { border: 1px solid rgba(247, 243, 234, 0.35); color: var(--espuma); }
.vaga-link:hover { border-color: var(--ouro-claro); color: var(--ouro-claro); }
.vaga-link svg.i { width: 16px; height: 16px; }
.vaga-whats { background: var(--ouro-claro); color: var(--marinho); }
.vaga-whats:hover { background: #e8cb90; }
.vaga-whats svg { width: 17px; height: 17px; }

.pier-fim { max-width: 1000px; margin: 110px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: stretch; gap: 18px; text-align: center; }
.pier-fim .botao { grid-column: 1 / -1; justify-self: center; margin-bottom: 14px; }
.estoque-contatos { display: flex; flex-direction: column; gap: 12px; }

@media (prefers-reduced-motion: no-preference) {
  /* os barcos flutuam no píer; ao toque, balançam */
  .vaga-foto { animation: flutuar 6.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.4s); }
  .vaga-foto.balancando { animation: balanco 1.15s cubic-bezier(.36, .07, .19, .97); }
  /* entrada em 3D: a vaga gira para a frente ao chegar */
  .js .vaga .vaga-foto-caixa > .vaga-foto { opacity: 0; }
  .js .vaga-foto-caixa { transform: perspective(1400px) rotateY(var(--gira, 22deg)) translateZ(-120px); opacity: 0; transition: transform 1.3s var(--mola), opacity 1s ease; }
  .js .vaga-dir .vaga-foto-caixa { --gira: -22deg; }
  .js .vaga.visivel .vaga-foto-caixa { transform: none; opacity: 1; }
  .js .vaga.visivel .vaga-foto-caixa > .vaga-foto { opacity: 1; }
  .js .vaga .vaga-info { transform: translateY(30px); }
  .js .vaga.visivel .vaga-info { transform: none; transition: opacity .6s ease, transform 1s .15s var(--mola); }
}
@keyframes flutuar { 0%, 100% { translate: 0 0; rotate: -0.35deg; } 50% { translate: 0 -7px; rotate: 0.35deg; } }
@keyframes balanco {
  0% { translate: 0 0; rotate: 0deg; }
  18% { translate: 0 7px; rotate: -2.4deg; }
  42% { translate: 0 -5px; rotate: 1.8deg; }
  66% { translate: 0 3px; rotate: -0.9deg; }
  100% { translate: 0 0; rotate: 0deg; }
}

/* ═════════ 5 · VENDER ═════════ */
.vender { position: relative; padding: 150px var(--margem) 150px; }
/* logos das marcas: cartões de vidro só com o logo */
.marca-cartao { display: grid; place-items: center; min-height: 172px; padding: 30px 34px; }
.marca-cartao img { width: auto; max-width: 82%; max-height: 74px; object-fit: contain; }
.marca-cartao.marca-alta img { max-height: 112px; }
.marca-cartao.marca-larga { grid-column: 1 / -1; min-height: 180px; } /* Regatta em destaque: ocupa a linha inteira */
.marca-cartao.marca-larga img { max-width: 56%; max-height: 104px; }
.estrutura.marcas, .fx-reduzido .estrutura.marcas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* JP Broker acima dos logos: "Representante oficial das marcas" */
.vender-marcas { display: grid; gap: 18px; }
.representante { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 26px 30px; border-radius: 22px; text-align: center; }
.representante img { width: 230px; height: auto; }
.representante p { font: 500 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ouro-texto); padding-left: 22px; border-left: 1px solid rgba(201, 162, 90, 0.6); }

/* ═════════ 5 · MINHA HISTÓRIA ═════════ */
.historia { position: relative; padding: 150px var(--margem) 250px; }
.historia-grade { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 5vw; align-items: start; }
.historia-foto { position: sticky; top: calc(var(--topo-h) + 40px); margin: 0; }
.historia-foto::before { /* moldura dourada deslocada atrás da foto */
  content: ""; position: absolute; inset: 0; transform: translate(20px, 20px);
  border: 1px solid rgba(221, 187, 120, 0.6); border-radius: 28px; pointer-events: none;
}
.historia-moldura {
  position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 3 / 4;
  box-shadow: 0 50px 80px -36px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.18);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--mola);
}
.historia-moldura img { width: 100%; height: 100%; object-fit: cover; }
.historia-brilho { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(circle at var(--bx, 50%) var(--by, 30%), rgba(255, 255, 255, 0.22), transparent 50%); mix-blend-mode: soft-light; }
.inclinando .historia-brilho { opacity: 1; }
.historia-cartao {
  position: absolute; left: -26px; bottom: 34px; display: grid; gap: 3px; padding: 14px 20px 15px;
  border-radius: 16px; border: 1px solid rgba(221, 187, 120, 0.5);
  background: rgba(8, 22, 38, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.8);
}
.historia-cartao-rotulo { font: 500 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ouro-claro); }
.historia-cartao-nome { font: 400 25px/1.1 var(--display); color: #fff; }
.historia-texto { padding: 52px 56px 50px; }
.historia-titulo { font: 400 clamp(32px, 3.2vw, 50px)/1.12 var(--display); margin-bottom: 30px; }
.historia-titulo em { white-space: nowrap; }
.historia-marcos { list-style: none; margin: 0 0 34px; padding: 26px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; border-top: 1px solid rgba(201, 162, 90, 0.5); border-bottom: 1px solid rgba(201, 162, 90, 0.5); }
.historia-marcos li { display: grid; gap: 10px; align-content: start; }
.historia-marcos .num3d { font-size: clamp(30px, 2.6vw, 42px); }
.historia-corpo { display: grid; gap: 16px; font-size: 16.5px; line-height: 1.72; color: color-mix(in srgb, var(--fx-tinta) 82%, transparent); max-width: 64ch; }
.historia-fecho { margin: 34px 0 0; padding: 26px 0 0 26px; border-left: 3px solid var(--ouro); }
.historia-fecho p { font: 400 clamp(21px, 1.8vw, 26px)/1.45 var(--display); color: var(--ouro-texto); }
.historia-fecho span { display: block; text-wrap: balance; } /* uma frase por linha, sem palavra sozinha no fim */
/* gradação de cor sobre o mar 3D: água de praia, turquesa, e areia perto da arrebentação */
.vender::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: saturate(2.3) brightness(1.1) contrast(1.06);
  backdrop-filter: saturate(2.3) brightness(1.1) contrast(1.06);
  background: linear-gradient(180deg, rgba(0, 140, 160, 0.08) 0%, rgba(0, 175, 180, 0.12) 62%, rgba(0, 175, 180, 0.06) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.vender-grade { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4vw; align-items: start; }
.vender-chamada { padding: 50px; }
.vender-chamada h2 { font: 400 clamp(36px, 3.8vw, 58px)/1.08 var(--display); margin-bottom: 22px; }
.vender-chamada > p:not(.rotulo) { font-size: 17px; line-height: 1.65; margin-bottom: 30px; color: color-mix(in srgb, var(--fx-tinta) 80%, transparent); max-width: 46ch; }
.vender-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.estrutura { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.estrutura-cartao {
  padding: 28px 26px; border-radius: 22px;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--mola), box-shadow .5s;
}
.estrutura-cartao:hover { box-shadow: 0 40px 70px -30px rgba(3, 15, 28, 0.7), inset 0 1px 0 #fff; }
.estrutura-icone {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 18px; border-radius: 15px;
  background: linear-gradient(145deg, #f6e2ad, #c9a25a 55%, #8b692e); color: var(--marinho);
  box-shadow: 0 12px 22px -12px rgba(139, 105, 46, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.estrutura-icone svg { width: 25px; height: 25px; }
.estrutura-cartao h3 { font: 400 22px/1.2 var(--display); margin-bottom: 8px; }
.estrutura-cartao p { font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--fx-tinta) 76%, transparent); }
/* a arrebentação que leva à parte clara */
.espuma { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 150px; overflow: hidden; pointer-events: none; }
.espuma-3 { fill: rgba(228, 240, 248, 0.32); }
.espuma-2 { fill: rgba(228, 240, 248, 0.6); }
.espuma-1 { fill: #E4F0F8; }
@media (prefers-reduced-motion: no-preference) {
  .espuma-3 { animation: ondas 16s linear infinite; }
  .espuma-2 { animation: ondas 11s linear infinite reverse; }
  .espuma-1 { animation: ondas 8s linear infinite; }
}
@keyframes ondas { to { transform: translateX(-1440px); } }

/* ═════════ 6 · ATRACADO ═════════ */
.atracado { position: relative; background: var(--azul-claro); color: var(--marinho); padding: 50px var(--margem) 0; }
.atracado-grade { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: start; }
.atracado .rotulo { color: var(--ouro-texto); }
.atracado-titulo { font: 400 clamp(64px, 8.4vw, 140px)/0.98 var(--display); margin-bottom: 18px; }
.atracado-titulo em { color: var(--ouro); }
.atracado-endereco { font: 400 clamp(22px, 2vw, 30px)/1.35 var(--display); }
/* as duas lojas: cada cartão mostra o endereço e troca o mapa ao lado */
.lojas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.loja {
  display: grid; align-content: start; gap: 8px; text-align: left; cursor: pointer;
  padding: 18px 20px; border-radius: 18px; font: inherit; color: var(--marinho);
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(10, 31, 51, 0.1);
  transition: background-color .3s, border-color .3s, box-shadow .3s, transform .35s var(--mola);
}
.loja:hover { background: #fff; transform: translateY(-2px); }
.loja.ativa { background: #fff; border-color: var(--ouro); box-shadow: 0 20px 40px -26px rgba(10, 31, 51, 0.55); }
.loja-rotulo { font: 500 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ouro-texto); }
.loja-endereco { font: 400 15.5px/1.45 var(--display); }
.loja-ver { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font: 700 12.5px/1 var(--texto); color: color-mix(in srgb, var(--marinho) 70%, transparent); }
.loja-ver svg { width: 15px; height: 15px; color: var(--ouro-texto); }
.loja.ativa .loja-ver { color: var(--ouro-texto); }
.cartao-whats-grande { margin: 28px 0 26px; background: var(--marinho); border-color: var(--marinho); box-shadow: 0 30px 50px -30px rgba(10, 31, 51, 0.8); }
.cartao-whats-grande.cartao-ml { margin: 0 0 30px; }
.cartao-whats-grande.cartao-insta { margin: -12px 0 26px; }
.cartao-whats-grande:hover { background: var(--marinho-2); border-color: var(--ouro); }
.atracado-dados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.atracado-dados li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(10, 31, 51, 0.08); font-size: 15px; line-height: 1.45; }
.atracado-dados svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--ouro-texto); margin-top: 2px; }
.atracado-dados small { display: block; margin-bottom: 3px; font: 500 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in srgb, var(--marinho) 62%, transparent); }
.atracado-dados a { text-underline-offset: 3px; text-decoration-color: var(--ouro); }
.atracado-mapa { margin: 0; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid rgba(201, 162, 90, 0.6); box-shadow: 0 34px 60px -32px rgba(10, 31, 51, 0.5); }
.atracado-mapa iframe { display: block; width: 100%; height: 470px; border: 0; filter: saturate(0.85); }
.atracado-mapa figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 14px 18px; font: 600 14px/1 var(--texto); }
.atracado-mapa figcaption svg { width: 18px; height: 18px; color: var(--ouro-texto); }
.atracado-mapa figcaption a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.atracado-mapa figcaption a:hover { color: var(--ouro-texto); }

.rodape { padding: var(--e4) var(--margem) var(--e5); font-size: 14px; }
.rodape-home { max-width: 1320px; margin: 90px auto 0; padding: 32px 0 110px; border-top: 1px solid rgba(10, 31, 51, 0.14); display: grid; gap: 8px; }
.rodape-assinatura .marca-nome { font-size: 20px; margin-right: 10px; color: var(--ouro-texto); }
.rodape-nota { font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--fx-tinta) 64%, transparent); max-width: 80ch; }

/* ═════════ ESTOQUE COMPLETO (embarcacoes/index.html) ═════════ */
.pagina-estoque { --fx-fundo: #FFFFFF; background: #fff; }
.estoque-cabeca {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap;
  padding: calc(var(--topo-h) + 56px) var(--margem) 60px;
  background: radial-gradient(90% 140% at 85% 0%, #1b4262 0%, rgba(27, 66, 98, 0) 60%), var(--marinho);
  color: var(--espuma); border-bottom: 3px solid var(--ouro);
}
.estoque-cabeca-texto { max-width: 760px; }
.estoque-cabeca .migalha { color: rgba(247, 243, 234, 0.7); margin-bottom: 18px; }
.estoque-cabeca .migalha a { color: var(--ouro-claro); }
.estoque-titulo { font: 400 clamp(40px, 4.8vw, 72px)/1.05 var(--display); margin-bottom: 16px; }
.estoque-titulo em { display: block; color: var(--ouro-claro); font-size: .58em; margin-top: 6px; }
.estoque-sub { font-size: 16.5px; line-height: 1.6; max-width: 62ch; color: rgba(247, 243, 234, 0.82); }
.estoque-corpo { max-width: 1320px; margin: 0 auto; padding: 0 var(--margem) 110px; }
.estoque-controles {
  position: sticky; top: var(--topo-h); z-index: 10;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  margin: 0 calc(-1 * var(--margem)); padding: 18px var(--margem);
  background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(10, 31, 51, 0.08);
}
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; font: 600 14px/1.2 var(--texto); color: var(--marinho); background: #fff; border: 1px solid rgba(10, 31, 51, 0.16); border-radius: 999px; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.filtro span { font: 500 11px/1 var(--mono); opacity: .7; }
.filtro:hover { border-color: var(--ouro); }
.filtro[aria-pressed="true"] { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.filtro[aria-pressed="true"] span { color: var(--ouro-claro); opacity: 1; }
.ordem { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--marinho); }
.ordem span { opacity: .7; }
.ordem select {
  appearance: none; -webkit-appearance: none; padding: 10px 32px 10px 14px; font: 600 14px/1.2 var(--texto); text-transform: none; letter-spacing: 0; color: var(--marinho);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E6522' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid rgba(10, 31, 51, 0.16); border-radius: 999px; cursor: pointer;
}
.estoque-contagem { margin: 26px 0 18px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ouro-texto); }
.cartas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.carta[hidden] { display: none; }
.carta-link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 20px; background: #fff; color: var(--marinho); text-decoration: none;
  border: 1px solid rgba(10, 31, 51, 0.1); box-shadow: 0 24px 44px -34px rgba(10, 31, 51, 0.55);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--mola), box-shadow .5s, border-color .4s;
}
.carta-link:hover { border-color: var(--ouro); box-shadow: 0 44px 60px -34px rgba(10, 31, 51, 0.6); }
.carta-foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creme); }
.carta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--mola); }
.carta-link:hover .carta-foto img { transform: scale(1.05); }
.carta-selo, .carta-fotos { position: absolute; padding: 6px 11px; border-radius: 999px; font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.carta-selo { left: 12px; top: 12px; background: rgba(10, 31, 51, 0.86); color: #fff; }
.carta-fotos { right: 12px; bottom: 12px; background: rgba(255, 255, 255, 0.9); color: var(--marinho); }
.carta-info { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 20px; }
.carta-nome { font: 400 25px/1.15 var(--display); }
.carta-spec { font-size: 14px; line-height: 1.45; color: rgba(10, 31, 51, 0.7); }
.carta-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(10, 31, 51, 0.08); }
.carta-preco { font: 600 17px/1 var(--mono); font-variant-numeric: tabular-nums; }
.carta-preco.consulta { font-size: 13.5px; font-weight: 500; color: var(--ouro-texto); }
.carta-ver { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--texto); color: var(--ouro-texto); }
.carta-ver svg.i { width: 15px; height: 15px; transition: transform .35s var(--mola); }
.carta-link:hover .carta-ver svg.i { transform: translateX(4px); }
.etiqueta { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 8px 2px; font: 600 10px/1.2 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ouro-texto); border: 1px solid var(--ouro); border-radius: 999px; }

/* ═════════ PÁGINA DA EMBARCAÇÃO ═════════ */
.pagina-barco { background: #fff; }
.barco { max-width: 1440px; margin: 0 auto; padding: 108px var(--margem) 0; }
.migalha { display: flex; flex-wrap: wrap; gap: 10px; font: 500 11.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--fx-tinta) 66%, transparent); }
.migalha a { text-underline-offset: 3px; text-decoration-color: var(--ouro); color: var(--ouro-texto); }
.barco-cabeca { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: var(--e5); margin-top: var(--e3); align-items: start; }
.galeria-palco { position: relative; margin: 0; height: min(76vh, 780px); background: var(--creme); border-radius: 18px; overflow: hidden;
  touch-action: pan-y pinch-zoom; /* o deslize lateral fica com a galeria (senão o navegador cancela o toque e a foto não passa) */ }
.galeria-img { width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.galeria-img.trocando { opacity: 0; }
.galeria-seta { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; font: 400 30px/1 var(--display); color: var(--marinho); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--ouro); border-radius: 50%; cursor: pointer; transition: transform .3s, background-color .3s; }
.galeria-seta:hover { transform: scale(1.06); background: var(--ouro); }
.galeria-seta.anterior { left: 16px; }
.galeria-seta.proxima { right: 16px; }
.galeria-contador { position: absolute; right: 16px; bottom: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(10, 31, 51, 0.82); color: var(--espuma); font: 500 12px/1 var(--mono); letter-spacing: 0.08em; }
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.miniatura { flex: 0 0 auto; width: 88px; height: 66px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: .6; transition: opacity .3s; background: var(--creme); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover, .miniatura.ativa { opacity: 1; }
.miniatura.ativa { outline: 2px solid var(--ouro); outline-offset: 2px; }
.barco-ficha { position: sticky; top: 100px; }
.barco-ficha .rotulo { color: var(--ouro-texto); }
.ficha-nome { font: 400 clamp(40px, 4.2vw, 68px)/1.05 var(--display); margin-bottom: var(--e3); }
.ficha-ano { color: var(--ouro-texto); }
.ficha-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: var(--e4); }
.ficha-preco .valor { font: 600 clamp(28px, 2.6vw, 38px)/1 var(--mono); color: var(--ouro-texto); font-variant-numeric: tabular-nums; }
.ficha-preco .valor-consulta { font-size: 22px; }
.ficha-preco s { font: 400 16px/1 var(--mono); opacity: .55; }
.ficha-dados { margin: 0 0 var(--e4); border-top: 2px solid var(--ouro); }
.ficha-dados div { display: flex; justify-content: space-between; gap: var(--e3); padding: 13px 0; border-bottom: 1px solid rgba(10, 31, 51, 0.12); }
.ficha-dados dt { font: 500 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ouro-texto); white-space: nowrap; }
.ficha-dados dd { margin: 0; font-size: 15px; text-align: right; }
.barco-ficha .botao { width: 100%; }
.ficha-apoio { margin-top: var(--e2); font-size: 13.5px; line-height: 1.55; color: rgba(10, 31, 51, 0.7); }
.ficha-apoio a { text-underline-offset: 3px; text-decoration-color: var(--ouro); }
.barco-texto { margin: var(--e6) 0; display: grid; gap: var(--e5); }
.barco-resumo { max-width: 68ch; display: grid; gap: var(--e2); }
.barco-resumo p { font-size: 18px; color: rgba(10, 31, 51, 0.82); }
.barco-resumo p:first-child { font: 400 clamp(21px, 1.9vw, 26px)/1.45 var(--display); color: var(--marinho); }
.barco-bloco { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--e3); padding-top: var(--e3); border-top: 1px solid rgba(201, 162, 90, 0.6); }
.barco-bloco h2 { font: 400 25px/1.2 var(--display); }
.itens { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: var(--e4); }
.itens li { break-inside: avoid; position: relative; padding: 9px 0 9px 20px; font-size: 15px; line-height: 1.45; border-bottom: 1px solid rgba(10, 31, 51, 0.07); }
.itens li::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); }
.specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: var(--e4); }
.specs div { display: flex; justify-content: space-between; gap: var(--e2); padding: 10px 0; border-bottom: 1px solid rgba(10, 31, 51, 0.09); }
.specs dt { font-size: 14.5px; color: rgba(10, 31, 51, 0.7); }
.specs dd { margin: 0; font: 500 14px/1.45 var(--mono); text-align: right; white-space: nowrap; }
.specs .longo dd { font: 500 14px/1.45 var(--texto); white-space: normal; max-width: 62%; }
.barco-obs { max-width: 72ch; font-size: 16px; padding: var(--e3); background: var(--creme); border-left: 3px solid var(--ouro); border-radius: 0 12px 12px 0; }
.barco-outras { padding: var(--e5) 0 var(--e6); border-top: 1px solid rgba(201, 162, 90, 0.6); }
.barco-outras h2 { font: 400 clamp(30px, 2.8vw, 42px)/1.1 var(--display); margin-bottom: var(--e4); }
.outras-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.outra { display: grid; gap: 8px; text-decoration: none; }
.outra img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--creme); transition: transform .6s var(--mola); }
.outra:hover img { transform: scale(1.02); }
.outra-nome { font: 400 25px/1.15 var(--display); margin-top: 6px; }
.outra:hover .outra-nome { color: var(--ouro-texto); }
.outra-spec { font: 500 13px/1.4 var(--mono); color: rgba(10, 31, 51, 0.66); }
.voltar { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; text-underline-offset: 5px; text-decoration-color: var(--ouro); color: var(--ouro-texto); }
.pagina-barco .rodape, .pagina-estoque .rodape { background: var(--marinho); color: var(--espuma); display: grid; gap: 10px; }
.pagina-barco .rodape a, .pagina-estoque .rodape a { text-decoration-color: var(--ouro-claro); }
.rodape-linha { display: grid; gap: 4px; }
.rodape-coord { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; color: var(--ouro-claro); }
.pagina-barco .rodape-nota, .pagina-estoque .rodape-nota { color: rgba(247, 243, 234, 0.62); }

/* ═════════ RESPONSIVO ═════════ */
@media (max-width: 1100px) {
  .topo-nav a { padding: 9px 11px; }
  .marca-logo { width: 170px; }
  .historia-grade { grid-template-columns: minmax(0, 1fr); }
  .historia-foto { position: relative; top: auto; max-width: 460px; justify-self: center; }
  .cartas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leme-painel { padding-left: var(--margem); padding-right: var(--margem); }
  .estrutura { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --topo-h: 64px; }
  .topo-nav { display: none; }
  .topo { padding: 0 14px; gap: 10px; }
  .topo-whats { margin-left: auto; width: 42px; height: 42px; }
  .topo-whats svg { width: 23px; height: 23px; }
  .marca-logo { width: 150px; }
  .selo-sep, .selo-b { display: none; }

  .plotter { left: 12px; right: 12px; bottom: 12px; height: 44px; gap: 12px; padding: 0 16px; border-radius: 999px; }
  .plotter-opcional { display: none; }
  .plotter-bloco .k { display: none; }
  .plotter-id { flex-direction: row; align-items: center; gap: 10px; padding-right: 12px; }
  .plotter-wp { padding-left: 12px; flex: 1; }
  .plotter-wp .v { max-width: none; font-size: 10px; }

  /* 1 · abertura: o João em cima, o texto embaixo sobre o véu */
  .abertura-palco { justify-content: flex-end; padding: calc(var(--topo-h) + 16px) 16px 78px; }
  /* no celular a foto fica no alto, logo abaixo do topo, e se dissolve no mar escuro onde o texto mora */
  .abertura-fundo {
    top: calc(var(--topo-h) - 6px); bottom: auto; height: min(118vw, 56vh);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  }
  .abertura-foto { object-position: 72% 0%; }
  .abertura-veu { background: linear-gradient(0deg, rgba(6, 18, 31, 0.97) 0%, rgba(6, 18, 31, 0.9) 36%, rgba(6, 18, 31, 0.2) 58%, rgba(6, 18, 31, 0) 70%); }
  .abertura-texto { max-width: none; }
  .selo { font-size: 9.5px; gap: 8px; padding: 7px 12px; margin-bottom: 16px; }
  .abertura-titulo { font-size: clamp(32px, 9vw, 44px); margin-bottom: 14px; }
  .abertura-titulo .quebra { display: none; }
  .abertura-sub { font-size: 15px; margin-bottom: 20px; }
  .abertura-acoes { gap: 10px; margin-bottom: 0; }
  .abertura-acoes .botao { padding: 13px 18px; font-size: 14px; }
  .abertura-acoes .botao-vidro { font-size: 14px; }
  .abertura-infos { display: none; }

  /* 2 */
  .quem { padding: 90px 16px; }
  .quem-grade { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .quem-painel { padding: 30px 22px 26px; border-radius: 20px; }
  .quem-texto { font-size: 15.5px; }
  .quem-fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .escotilha { width: min(82vw, 380px); }
  .escotilha-selo { left: -4%; }

  /* 3 · leme */
  .leme-cabine { display: none; }
  .leme-cabeca { left: 16px; right: 16px; top: calc(var(--topo-h) + 22px); }
  .leme-titulo { font-size: clamp(26px, 7vw, 34px); }
  .leme-bussola { top: calc(var(--topo-h) + 150px); left: 50%; right: auto; width: 260px; transform: translateX(-50%); }
  .leme-painel {
    height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 18px;
    padding: 0 16px 76px; border-radius: 50% 50% 0 0 / 8% 8% 0 0;
  }
  .leme-painel::before { display: none; }
  .leme-timao { width: 40vw; max-width: 200px; margin-top: -12vh; }
  .leme-tela { padding: 16px 16px 18px; transform: none; }
  .leme-etapas .fx-etapa { gap: 14px; }
  .etapa-num { width: 44px; height: 44px; font-size: 18px; }
  .leme-etapas h3 { font-size: 23px; }
  .leme-etapas p { font-size: 14.5px; }
  .tela-teclas button { flex: 1; }

  /* 4 · píer: o deck corre pela esquerda */
  .pier { padding: 100px 16px 200px; }
  .pier-cabeca { margin-bottom: 60px; }
  .pier-deck { gap: 70px; }
  .pier-deck::before { left: 14px; width: 26px; transform: none; }
  .vaga { grid-template-columns: 54px minmax(0, 1fr); row-gap: 18px; }
  .vaga-cabeco { grid-column: 1; grid-row: 1; width: 22px; height: 22px; align-self: start; margin-top: 20px; }
  .vaga-esq .vaga-foto-caixa, .vaga-dir .vaga-foto-caixa { grid-column: 2; grid-row: 1; padding: 0; }
  .vaga-esq .vaga-info, .vaga-dir .vaga-info { grid-column: 2; grid-row: 2; padding: 0; justify-self: start; text-align: left; }
  .vaga-dir .vaga-numero, .vaga-dir .vaga-preco, .vaga-dir .vaga-acoes { justify-content: flex-start; }
  .vaga-nome { font-size: 32px; }
  .vaga-foto { border-radius: 16px; }
  .pier-fim { margin-top: 70px; grid-template-columns: minmax(0, 1fr); }
  .cartao-whats { width: 100%; }
  .cartao-whats-texto b { font-size: 19px; }

  /* 5 */
  .vender { padding: 90px 16px; }
  .estrutura.marcas { gap: 10px; }
  .vender-marcas { gap: 10px; }
  .representante { flex-direction: column; gap: 10px; padding: 20px 16px; border-radius: 16px; }
  .representante img { width: 180px; }
  .representante p { font-size: 10.5px; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(201, 162, 90, 0.6); }
  .marca-cartao { min-height: 104px; padding: 16px; border-radius: 16px; }
  .marca-cartao img { max-height: 46px; max-width: 88%; }
  .marca-cartao.marca-alta img { max-height: 70px; }
  .marca-cartao.marca-larga { min-height: 116px; }
  .marca-cartao.marca-larga img { max-width: 66%; max-height: 64px; }
  .historia { padding: 90px 16px 190px; }
  .historia-grade { gap: 44px; }
  .historia-foto { max-width: none; width: calc(100% - 16px); justify-self: start; }
  .historia-foto::before { transform: translate(12px, 12px); border-radius: 22px; }
  .historia-moldura { border-radius: 22px; }
  .historia-cartao { left: 12px; bottom: 14px; padding: 10px 14px 11px; }
  .historia-cartao-nome { font-size: 21px; }
  .historia-texto { padding: 30px 22px 28px; border-radius: 20px; }
  .historia-marcos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .historia-corpo { font-size: 15.5px; }
  .lojas { grid-template-columns: minmax(0, 1fr); }
  .vender-grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vender-chamada { padding: 30px 22px; }

  /* 6 */
  .atracado { padding: 40px 16px 0; }
  .atracado-grade { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .atracado-titulo { font-size: clamp(56px, 17vw, 88px); }
  .atracado-dados { grid-template-columns: minmax(0, 1fr); }
  .atracado-mapa iframe { height: 320px; }
  .rodape-home { padding-bottom: 96px; margin-top: 60px; }

  /* estoque */
  .estoque-cabeca { padding: calc(var(--topo-h) + 34px) 16px 40px; }
  .estoque-corpo { padding: 0 16px 90px; }
  .estoque-controles { margin: 0 -16px; padding: 12px 16px; }
  .filtro { padding: 9px 13px; font-size: 13px; }

  /* página da embarcação */
  .barco { padding: 88px 16px 0; }
  .barco-cabeca { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .galeria-palco { height: 58vh; }
  .galeria-seta { width: 42px; height: 42px; margin-top: -21px; font-size: 24px; }
  .barco-ficha { position: static; }
  .barco-bloco { grid-template-columns: minmax(0, 1fr); }
  .outras-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) { .cartas { grid-template-columns: minmax(0, 1fr); } }

/* ═════════ MOVIMENTO REDUZIDO: página parada e completa ═════════ */
.fx-reduzido .abertura-palco { min-height: 100vh; position: relative; overflow: hidden; }
.fx-reduzido .leme-palco { position: relative; overflow: hidden; padding: 180px 0 0; }
.fx-reduzido .leme-cabeca { position: relative; left: auto; top: auto; padding: 0 var(--margem); margin-bottom: 40px; }
.fx-reduzido .leme-bussola { display: none; }
.fx-reduzido .leme-painel { position: relative; height: auto; }
.fx-reduzido .leme-etapas { gap: 26px; }
.fx-reduzido .leme-etapas .fx-etapa { transform: none; }
.fx-reduzido .tela-teclas { display: none; }
.fx-reduzido .vaga-info { opacity: 1 !important; }

/* telas baixas: os textos das cinco etapas (dois parágrafos) precisam caber na cena fixa do leme */
@media (min-width: 901px) and (max-height: 780px) {
  .leme-cabeca, .leme-bussola { top: 128px; }
  .leme-painel { padding-top: 2vh; }
  .leme-etapas h3 { margin-bottom: 6px; }
  .leme-etapas p { font-size: 15px; line-height: 1.5; }
  .tela-topo { margin-bottom: 12px; padding-bottom: 9px; }
  .tela-teclas { margin-top: 14px; }
}
@media (max-width: 900px) and (max-height: 800px) {
  .leme-timao, .leme-bussola { display: none; }
  .leme-painel { padding-top: 14px; }
  .leme-etapas h3 { font-size: 21px; margin-bottom: 6px; }
  .leme-etapas p { font-size: 13.5px; line-height: 1.5; }
  .leme-etapas p + p { margin-top: 6px; }
  .tela-topo { margin-bottom: 12px; padding-bottom: 8px; }
  .tela-teclas { margin-top: 14px; }
}