/* ===== MAPA DE EFEITOS (rodada 2: movimento ligado à rolagem) =====
   Tudo "scrubbed" (vai e volta com a rolagem). Nenhum efeito se repete em dois blocos seguidos.
   SUPERFÍCIE (--k = quanto da superfície já subiu)
   1. Linha d'água ............ a água sobe pela tela e engole a câmera: onda com espuma que avança e desliza de lado
   2. Título h1 ............... afunda letra a letra numa onda (sin), perde a nitidez e ganha cor de profundidade
   3. Raios de luz ............ estreitam (scale X) e somem conforme desce
   4. Tubarão do sonar ........ mergulha de bico para baixo; o sonar se expande e apaga
   5. Etiqueta "pacote a bordo" fica boiando: sobe e inclina enquanto a câmera desce
   6. Garantias ............... soltam-se como bolhas, uma de cada vez, para cima
   A VIAGEM
   7. Cardumes ................ mudam de direção com o sentido da rolagem e esticam com a velocidade (JS)
   8. Letreiro do boletim ..... placa de aeroporto que embaralha e mostra a estação no meio da tela (só desktop, onde o boletim é fixo)
   9. Boletim ................. linhas viram em rotateX (split-flap) ao entrar e quando o conteúdo muda
   10. Título da rota ......... o texto enche de água de baixo para cima (background-clip: text)
   11. Rota costurada ......... linha-guia que se desenha com a rolagem (stroke-dashoffset) com lanterninha na ponta
   12. Boias .................. emergem com mola amortecida (passa do ponto e assenta)
   13. Cartões das estações ... pêndulo preso à boia, alternando o lado
   14. Casinha ................ telhado se desenha e a janela acende
   15. Algas .................. crescem do leito e se dobram com a velocidade (--vel)
   O FUNDO (AJUDA)
   16. Título da ajuda ........ pressão: chega grande e é comprimido até o tamanho final; placa conta 350 → 500 m
   17. Tubarão espiando ....... sobe por trás da borda da plaquinha (máscara)
   18. Perguntas .............. sobem como bolhas, balançando de lado e crescendo
   19. Cartão de contato ...... abre como bolha: recorte circular que cresce a partir de baixo
   ================================================================== */

/* Loja Shark · aba de rastreio ("o mergulho")
   A página é um mergulho: superfície clara com luz cáustica, a rota costurada que desce
   pelas profundidades até a casa do cliente, e o fundo do mar (ajuda) emendando no rodapé navy.
   Camadas: fundo das seções (z auto) < canvas de bolhas/plâncton (z 1) < conteúdo (z 2). */

:root {
  --mar-0: #F2F8FC;
  --mar-1: #DDEFFB;
  --mar-2: #A9D5F2;
  --mar-3: #4C9BDA;
  --mar-4: #1D5E9C;
  --mar-5: #133D66;
  --mar-6: #0E2E4F;
  --fundo-antes-rodape: #0E2E4F;
  --verde-zap: #25D366;
}

.mar { position: relative; isolation: isolate; background: var(--mar-0); overflow: clip; }
.mar > section { position: relative; }
/* sensores do motion.js (vazios, do tamanho da seção): recebem --p/--e/--c no lugar da seção inteira */
.m-sensor { position: absolute; inset: 0; pointer-events: none; visibility: hidden; contain: strict; z-index: -1; }
.abismo-intro, .contato-fundo { position: relative; }
/* blocos independentes: o que muda dentro não refaz o layout da página */
.estacao, .perguntas details, .contato-cartao, .boletim { contain: layout style; }
.mar .container { position: relative; z-index: 2; }

/* ---------- camadas decorativas fixas ---------- */
.mar-particulas { position: fixed; inset: 0 0 auto 0; width: 100%; height: 100vh; z-index: 1; pointer-events: none; }

.profundimetro { position: fixed; z-index: 3; pointer-events: none; left: 16px; bottom: 22px; }
.profundimetro-regua { display: none; }
.profundimetro-leitura {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(10, 37, 64, .82); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(10, 37, 64, .25);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
/* celular: vidro fosco fixo sobre a página que rola = recomposição a cada quadro; fica um navy quase opaco */
.pouca-forca .profundimetro-leitura { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 37, 64, .92); }
.profundimetro.ligado .profundimetro-leitura { opacity: 1; transform: none; }
@media (max-width: 1319px) { .profundimetro-leitura .rotulo { display: none; } .profundimetro-leitura { padding: 6px 10px; } .profundimetro { left: 10px; bottom: 16px; } }
.profundimetro-leitura .rotulo { color: var(--ciano); font-size: 10px; }
.profundimetro-leitura b { font-weight: 500; font-size: 14px; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.profundimetro-leitura b[data-neg]::before { content: '−'; }
.profundimetro-leitura small { font-size: 11px; color: #9fc3e0; }

@media (min-width: 1320px) {
  .profundimetro { left: auto; right: 22px; bottom: auto; top: 50%; transform: translateY(-50%); width: 64px; height: 52vh; display: grid; justify-items: end; align-items: center; }
  .profundimetro-regua {
    display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 22px; overflow: hidden;
    color: rgba(30, 127, 212, .35);
    -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    transition: color .6s;
  }
  /* a régua desliza por transform (período de 60 px), em vez de background-position por quadro */
  .profundimetro-regua::before {
    content: ''; position: absolute; left: 0; right: 0; top: -60px; bottom: 0;
    background-image:
      repeating-linear-gradient(180deg, currentColor 0 1.5px, transparent 1.5px 60px),
      repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 12px);
    background-size: 22px 60px, 11px 12px;
    background-position: right top, right top;
    background-repeat: repeat-y;
    transform: translate3d(0, var(--regua-y, 0px), 0);
  }
  .profundimetro-regua { opacity: 0; transition: opacity .5s, color .6s; }
  .profundimetro.ligado .profundimetro-regua { opacity: 1; }
  .profundimetro.fundo .profundimetro-regua { color: rgba(53, 203, 232, .45); }
  .profundimetro-leitura { position: relative; margin-right: 30px; flex-direction: column; align-items: flex-end; gap: 0; padding: 8px 12px; border-radius: 14px; }
  .profundimetro-leitura::after { content: ''; position: absolute; right: -30px; top: 50%; width: 26px; height: 1.5px; background: var(--ciano); }
}

/* ---------- SUPERFÍCIE (hero) ---------- */
.superficie {
  min-height: calc(100svh - var(--header-h) - 36px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 8vw, 96px) 0 clamp(80px, 9vw, 120px);
  background:
    radial-gradient(120% 70% at 80% 0%, rgba(53, 203, 232, .18), transparent 60%),
    linear-gradient(180deg, var(--mar-0) 0%, #E9F4FC 55%, var(--mar-1) 100%);
  overflow: hidden;
}
.lamina { position: absolute; top: 0; left: 0; width: 120%; height: 60px; pointer-events: none; }
.lamina path { fill: #fff; }
.lamina-a { opacity: .7; animation: lamina 14s ease-in-out infinite alternate; }
.lamina-b { opacity: .35; animation: lamina 19s ease-in-out infinite alternate-reverse; }
@keyframes lamina { from { transform: translateX(0); } to { transform: translateX(-8%); } }

.raios { position: absolute; inset: -10% 0 0; pointer-events: none; overflow: hidden; }
.raios i {
  position: absolute; top: -10%; height: 120%; width: clamp(60px, 9vw, 150px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .35) 45%, transparent 85%);
  filter: blur(10px); opacity: .55; transform-origin: top center;
  transform: skewX(-18deg);
  animation: raio 9s ease-in-out infinite alternate;
}
.raios i:nth-child(1) { left: 8%; animation-delay: -2s; }
.raios i:nth-child(2) { left: 30%; width: clamp(30px, 4vw, 70px); animation-delay: -5s; opacity: .4; }
.raios i:nth-child(3) { left: 52%; animation-delay: -1s; }
.raios i:nth-child(4) { left: 71%; width: clamp(40px, 6vw, 100px); animation-delay: -7s; }
.raios i:nth-child(5) { left: 90%; width: clamp(30px, 4vw, 60px); animation-delay: -3s; opacity: .35; }
@keyframes raio {
  0% { transform: skewX(-18deg) translateX(0); opacity: .25; }
  50% { opacity: .6; }
  100% { transform: skewX(-12deg) translateX(40px); opacity: .35; }
}
/* celular: blur(10px) em cinco faixas altas que se movem é refeito pela GPU a cada quadro. A borda macia passa
   a vir de uma máscara (calculada uma vez): a faixa ganha 20px de cada lado, como o desfoque espalhava */
.pouca-forca .raios i {
  filter: none; border: solid transparent; border-width: 0 20px; margin-left: -20px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  mask: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
}

.superficie-grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.superficie-texto { max-width: 620px; }
.superficie .rotulo { display: inline-flex; align-items: center; gap: 10px; }
.ponto-vivo { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ciano); }
/* o anel que pulsa: antes era box-shadow animado (recalcula e repinta a cada quadro, para sempre); agora é
   um círculo que cresce só com transform/opacity, no compositor. 8px + 10px de cada lado = escala 3,5 */
.ponto-vivo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(53, 203, 232, .7); animation: vivo 2.4s infinite; }
@keyframes vivo { 70% { transform: scale(3.5); opacity: 0; } 100% { transform: none; opacity: 0; } }
.superficie h1 { font-size: clamp(40px, 5.6vw, 76px); margin: 14px 0 18px; letter-spacing: -.035em; line-height: 1; }
.superficie h1 em { font-style: normal; color: var(--oceano); display: block; }
.superficie .lead { max-width: 520px; }

/* a sonda (formulário) */
.sonda {
  margin-top: 28px; padding: 8px; border-radius: 30px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--sombra), inset 0 0 0 1px rgba(255, 255, 255, .9);
}
/* celular: a água passa por baixo da sonda ao rolar; sem vidro fosco não há o que recompor */
.pouca-forca .sonda { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .93); }
.sonda-abas { display: inline-flex; gap: 2px; padding: 4px; margin: 4px 4px 10px; border-radius: 999px; background: rgba(30, 127, 212, .08); }
.sonda-abas button { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--texto-2); transition: background .25s, color .25s, box-shadow .25s; }
.sonda-abas button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: var(--sombra-s); }
.sonda-form { padding: 0 4px 6px; }
.sonda-campo {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px;
  border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--linha);
  transition: box-shadow .25s;
}
.sonda-campo:focus-within { box-shadow: inset 0 0 0 2px var(--oceano), 0 0 0 6px rgba(30, 127, 212, .12); }
.sonda-campo.erro { box-shadow: inset 0 0 0 2px var(--navy); animation: treme .4s; }
@keyframes treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.sonda-icone { width: 22px; height: 22px; flex: none; color: var(--oceano); }
.sonda-campo input {
  flex: 1; min-width: 0; height: 52px; border: 0; background: none; outline: none;
  font-family: var(--mono); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy);
}
.sonda-campo input::placeholder { color: var(--texto-3); letter-spacing: .04em; text-transform: none; font-family: var(--fonte); font-size: 16px; }
.sonda-btn { flex: none; }
.sonda-dica { margin: 10px 14px 4px; font-size: 13.5px; color: var(--texto-2); min-height: 1.6em; display: flex; gap: 8px; align-items: center; }
.sonda-dica b { color: var(--navy); }
.sonda-dica.ok::before, .sonda-dica.aviso::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; }
.sonda-dica.ok::before { background: var(--oceano) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sonda-dica.aviso::before { background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sonda-duplo { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.sonda-duplo label { display: grid; gap: 2px; padding: 8px 18px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--linha); transition: box-shadow .25s; }
.sonda-duplo label:focus-within { box-shadow: inset 0 0 0 2px var(--oceano); }
.sonda-duplo span { font-size: 11.5px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; }
.sonda-duplo input { border: 0; outline: none; background: none; height: 30px; font-size: 16px; font-weight: 600; min-width: 0; }
.sonda-btn-largo { width: 100%; margin-top: 8px; }
.sonda-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 4px 14px 8px; border-top: 1px dashed rgba(30, 127, 212, .2); margin-top: 6px; }
.link-demo { font-size: 14px; font-weight: 600; color: var(--texto-2); padding: 8px 0; }
.link-demo u { color: var(--oceano); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.link-demo:hover u { color: var(--navy); }
.chip-ultimo { font-size: 13px; font-weight: 600; color: var(--navy); padding: 6px 12px; border-radius: 999px; background: rgba(30, 127, 212, .08); }
.chip-ultimo code { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; }
.chip-ultimo:hover { background: rgba(30, 127, 212, .16); }

.garantias { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.garantias li { display: flex; align-items: center; gap: 8px; }
.garantias img { width: 22px; height: 22px; }
.ico-garantia { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.6px var(--oceano); color: var(--oceano); font-size: 11px; font-weight: 800; }
.ico-zap { box-shadow: none; background: var(--verde-zap) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v10H8l-4 4z'/%3E%3C/svg%3E") center / 13px no-repeat; }

/* visual do hero: tubarão no sonar */
.superficie-visual { position: relative; aspect-ratio: 1; width: 100%; max-width: 540px; justify-self: center; }
.sonar { position: absolute; inset: 4%; border-radius: 50%; }
.sonar i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(30, 127, 212, .28); animation: onda-sonar 4.8s cubic-bezier(.2, .6, .4, 1) infinite; }
.sonar i:nth-child(2) { animation-delay: -1.6s; }
.sonar i:nth-child(3) { animation-delay: -3.2s; }
@keyframes onda-sonar { from { transform: scale(.35); opacity: 0; } 20% { opacity: 1; } to { transform: scale(1.05); opacity: 0; } }
.sonar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, .25) 55%, transparent 70%); }
.sonar::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed rgba(30, 127, 212, .25); }
.sonar-varredura { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(53, 203, 232, .16), transparent 20%); animation: gira 6s linear infinite; -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%); mask: radial-gradient(circle, #000 60%, transparent 71%); }
.sonda-ativa .sonar-varredura, .superficie.ping .sonar-varredura { animation-duration: 1.6s; }
@keyframes gira { to { transform: rotate(1turn); } }
.mascote-boia { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(10, 37, 64, .18)); animation: boiar 6s ease-in-out infinite; }
@keyframes boiar { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } }
.etiqueta-flutuante {
  position: absolute; left: 0; bottom: 14%; display: grid; gap: 0;
  padding: 10px 16px 11px; border-radius: 16px; background: var(--creme);
  box-shadow: var(--sombra), inset 0 0 0 4px var(--creme), inset 0 0 0 5.5px rgba(10, 37, 64, .16);
  outline: 1.5px dashed rgba(10, 37, 64, .25); outline-offset: -8px;
  transform: rotate(-5deg); animation: boiar 7s ease-in-out infinite reverse;
}
.etiqueta-flutuante .rotulo { font-size: 10px; color: var(--texto-3); }
.etiqueta-flutuante b { font-size: 15px; }

.descer { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--texto-2); }
.descer svg { width: 20px; height: 20px; animation: descer 2s ease-in-out infinite; }
@keyframes descer { 50% { transform: translateY(6px); } }
/* superfície fora da tela (classe .fora posta pelo rastreio.js): as animações infinitas dela param.
   Mesmo no compositor, elas pesam em cada quadro de rolagem pelo resto da página */
.superficie.fora .raios i, .superficie.fora .lamina path, .superficie.fora .sonar i, .superficie.fora .sonar-varredura,
.superficie.fora .mascote-boia, .superficie.fora .etiqueta-flutuante, .superficie.fora .descer svg, .superficie.fora .ponto-vivo::after { animation-play-state: paused; }

/* ---------- A VIAGEM ---------- */
.viagem {
  padding: clamp(72px, 9vw, 120px) 0 clamp(140px, 16vw, 220px);
  background: linear-gradient(180deg, var(--mar-1) 0%, var(--mar-2) 22%, var(--mar-3) 46%, var(--mar-4) 66%, var(--mar-5) 84%, var(--mar-6) 100%);
}
.viagem-grade { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.boletim-coluna { position: sticky; top: calc(var(--header-h) + 24px); }
.boletim-coluna.solto { position: relative; top: 0; }
.boletim { scroll-margin-top: calc(var(--header-h) + 16px); }
.rota-cabeca { margin-bottom: clamp(28px, 4vw, 48px); }
.rota-cabeca .titulo-secao { max-width: 560px; }

/* boletim */
.boletim {
  position: relative; border-radius: var(--raio-l); padding: clamp(22px, 2.4vw, 30px);
  background: #fff; color: var(--navy);
  box-shadow: var(--sombra-l);
  outline: none;
}
.boletim::before { content: ''; position: absolute; inset: 8px; border-radius: 26px; border: 1.5px dashed rgba(10, 37, 64, .1); pointer-events: none; }
.boletim > * { position: relative; }
.boletim-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.selo-exemplo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); background: var(--espuma); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linha); }
.boletim-titulo { font-size: clamp(22px, 2.2vw, 28px); margin: 10px 0 10px; line-height: 1.15; }
.boletim-texto { color: var(--texto-2); font-size: 15px; }
.boletim-codigo { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; color: var(--navy); background: var(--espuma); padding: 4px 10px; border-radius: 8px; display: inline-block; }
.boletim-previsao { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(53, 203, 232, .14), rgba(30, 127, 212, .08)); }
.boletim-previsao .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--oceano); box-shadow: var(--sombra-s); }
.boletim-previsao .ico svg { width: 22px; height: 22px; }
.boletim-previsao small { display: block; font-size: 12px; color: var(--texto-2); font-weight: 600; }
.boletim-previsao b { font-size: 16px; }
.boletim-barra { margin: 16px 0 6px; height: 8px; border-radius: 999px; background: var(--espuma); overflow: hidden; box-shadow: inset 0 0 0 1px var(--linha); }
.boletim-barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ciano), var(--oceano)); transform: translate3d(calc((var(--barra, 0) - 1) * 100%), 0, 0); transition: transform 1.6s var(--ease); }
.boletim-etapa { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--texto-2); }

.atualizacoes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.atualizacoes h3 { font-size: 13px; }
.atualizacoes li { position: relative; padding: 0 0 14px 22px; font-size: 14px; }
.atualizacoes li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
.atualizacoes li::after { content: ''; position: absolute; left: 7.25px; top: 18px; bottom: 0; width: 1.5px; background: repeating-linear-gradient(180deg, var(--linha) 0 4px, transparent 4px 7px); }
.atualizacoes li:last-child { padding-bottom: 0; }
.atualizacoes li:last-child::after { display: none; }
.atualizacoes li:first-child::before { background: var(--oceano); box-shadow: 0 0 0 4px rgba(30, 127, 212, .18); }
.atualizacoes b { display: block; font-size: 14.5px; line-height: 1.35; }
.atualizacoes span { color: var(--texto-2); font-size: 13px; }
.subtitulo-boletim { margin-top: 20px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--texto-2); }

.acoes-rastreio { display: grid; gap: 8px; margin-top: 18px; }
.acao {
  display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px; border-radius: 18px; text-align: left; width: 100%;
  background: var(--espuma); box-shadow: inset 0 0 0 1px var(--linha);
  transition: background .2s, transform .25s var(--ease), box-shadow .25s;
}
.acao:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--sombra-s), inset 0 0 0 1px var(--linha); }
.acao .ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: var(--navy); box-shadow: var(--sombra-s); }
.acao .ico svg { width: 22px; height: 22px; }
.acao b { display: block; font-size: 15px; line-height: 1.25; }
.acao small { display: block; font-size: 12.5px; color: var(--texto-2); line-height: 1.35; }
.acao > svg { width: 18px; height: 18px; color: var(--texto-3); }
.acao-principal { background: var(--navy); color: #fff; box-shadow: 0 10px 24px rgba(10, 37, 64, .22); }
.acao-principal:hover { background: var(--navy-2); }
.acao-principal small, .acao-principal > svg { color: #a9c9e4; }
.acao-principal .ico { background: rgba(255, 255, 255, .1); color: var(--ciano); box-shadow: none; }
.acao-zap .ico { background: var(--verde-zap); color: #fff; }

.acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.btn-pequeno { min-height: 42px; padding: 0 16px; font-size: 14px; }
.btn-zap { --bg: var(--verde-zap); --fg: #fff; box-shadow: 0 8px 22px rgba(37, 211, 102, .3); }
.btn-zap svg { width: 20px; height: 20px; }
.btn-claro { --bg: var(--espuma); --fg: var(--navy); box-shadow: inset 0 0 0 1px var(--linha); }
.btn-claro:hover { --bg: #fff; }

/* plaquinha do tubarão espiando, com o código escrito no feltro */
.placa { position: relative; width: min(250px, 74%); margin: 10px auto 14px; container-type: inline-size; aspect-ratio: 640 / 400; overflow: hidden; }
.placa img { width: 100%; height: auto; margin-top: -18%; }
.placa span {
  position: absolute; left: 10%; right: 10%; top: 71.25%; height: 23.2%;
  display: grid; place-items: center; text-align: center;
  font-family: var(--mono); font-size: clamp(11px, 6.4cqw, 17px); letter-spacing: .08em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.placa-entra { animation: placa .7s var(--ease-mola) both; }
@keyframes placa { from { transform: translateY(24px); opacity: 0; } }

.nota-honesta { margin-top: 14px; font-size: 12.5px; color: var(--texto-3); line-height: 1.5; }
.link-sutil { color: var(--oceano); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- a rota ---------- */
.rota { position: relative; --recuo: 72px; --boia: 34px; }
.rota-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
/* véus: cada linha que "se desenha" mora num invólucro com overflow:hidden que o JS revela por
   translateY (o véu desce, o desenho sobe o mesmo tanto). Folga em volta para o brilho e as curvas. */
.rota-veu { position: absolute; top: -100px; bottom: 0; left: -160px; right: -160px; overflow: hidden; pointer-events: none; z-index: 0; }
.rota-veu > .rota-svg { inset: auto; top: 100px; left: 160px; width: calc(100% - 320px); height: calc(100% - 100px); }
.rota-veu-guia, .rota-veu-guia > .rota-svg { will-change: transform; }
.rota.nadando .rota-veu-feita, .rota.nadando .rota-veu-feita > .rota-svg { will-change: transform; }
.rota-veu-guia { display: none; }
.m-on .rota-veu-guia { display: block; }
.rota-costura { fill: none; stroke: rgba(10, 37, 64, .28); stroke-width: 2.4; stroke-dasharray: 9 8; stroke-linecap: round; }
.rota-feita { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(53, 203, 232, .9)); }
.rota-tubarao {
  position: absolute; left: 0; top: 0; z-index: 3; width: 92px; height: 92px; pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(10, 37, 64, .3));
  will-change: transform;
  /* balanço parado: animação no compositor (somada ao transform que o JS escreve só quando nada) */
  animation: tubarao-boia 2.83s ease-in-out infinite alternate;
}
@keyframes tubarao-boia { from { translate: 0 -5px; } to { translate: 0 5px; } }
.estacoes { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.estacao { position: relative; --dx: 0px; padding: 0 0 var(--vao, 72px) calc(var(--dx) + var(--recuo)); }
.estacao:last-child { padding-bottom: 0; }
.estacao:nth-child(1) { --dx: 6px; --vao: 56px; }
.estacao:nth-child(2) { --dx: 20px; --vao: 64px; }
.estacao:nth-child(3) { --dx: 30px; --vao: 80px; }
.estacao:nth-child(4) { --dx: 16px; --vao: 92px; }
.estacao:nth-child(5) { --dx: 4px; --vao: 104px; }
.estacao:nth-child(6) { --dx: 18px; }
.boia {
  position: absolute; left: var(--dx); top: 22px; width: var(--boia); height: var(--boia); border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 3px var(--oceano), 0 6px 16px rgba(10, 37, 64, .2);
  transition: background .4s, box-shadow .4s;
}
.boia::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--oceano); transform: scale(.6); transition: transform .4s var(--ease-mola), background .4s; }
.estacao-funda .boia { box-shadow: inset 0 0 0 3px var(--ciano), 0 6px 16px rgba(0, 0, 0, .3); background: var(--navy); }
.estacao-funda .boia::before { background: var(--ciano); }

.estacao-cartao {
  position: relative; max-width: 470px; padding: 18px 22px 20px; border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(10, 37, 64, .1), inset 0 0 0 1px rgba(255, 255, 255, .8);
  transition: opacity .5s;
}
.estacao-funda .estacao-cartao { background: rgba(10, 37, 64, .5); color: #E3F1FB; box-shadow: 0 14px 34px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(53, 203, 232, .18); }
/* celular: cartões que se movem com vidro fosco custam caro; um fundo um pouco mais denso dá o mesmo ar */
.pouca-forca .estacao-cartao { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .93); }
.pouca-forca .estacao-funda .estacao-cartao { background: rgba(12, 42, 72, .78); }
.estacao-prof { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 6px; }
.estacao-prof span { color: var(--oceano); }
.estacao-funda .estacao-prof { color: #8fb4d4; }
.estacao-funda .estacao-prof span { color: var(--ciano); }
.estacao h3 { font-size: clamp(19px, 2vw, 23px); margin-bottom: 6px; }
.estacao-funda h3 { color: #fff; }
.estacao-texto { font-size: 15px; color: var(--texto-2); line-height: 1.55; }
.estacao-funda .estacao-texto { color: #b9d3ea; }
.estacao-meta:empty { display: none; }
.estacao-meta { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--linha); font-size: 13.5px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.estacao-meta time { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--oceano); font-weight: 500; }
.estacao-funda .estacao-meta { border-top-color: rgba(255, 255, 255, .12); }
.estacao-funda .estacao-meta time { color: var(--ciano); }
.estacao-meta .agora { font-size: 11px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--oceano); color: #fff; }
.estacao-funda .estacao-meta .agora { background: var(--ciano); color: var(--navy); }

/* estados da viagem */
.rota.com-dados .estacao.feita .boia::before { transform: scale(1); }
.rota.com-dados .estacao.futura .estacao-cartao { opacity: .55; }
.rota.com-dados .estacao.futura .boia::before { transform: scale(0); }
.rota.com-dados .estacao.atual .estacao-cartao { box-shadow: 0 18px 50px rgba(10, 37, 64, .25), inset 0 0 0 2px var(--ciano); }
.rota.com-dados .estacao.atual .boia::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--ciano); animation: pulso 2.2s ease-out infinite; }
@keyframes pulso { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* a casinha no fundo do mar */
.boia-casa { width: 56px; height: 56px; top: 10px; left: calc(var(--dx) - 11px); background: none !important; box-shadow: none !important; }
.boia-casa::before { display: none; }
.boia-casa svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 14px rgba(53, 203, 232, .35)); }
.casa-corpo { fill: var(--creme); }
.casa-telhado { fill: none; stroke: var(--oceano-claro); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.casa-janela { fill: #FFD58A; }
.casa-porta { fill: var(--navy-2); }
.estacao-casa.feita .casa-janela, .estacao-casa.atual .casa-janela { fill: #FFE7B0; filter: drop-shadow(0 0 6px #FFD58A); }

/* bolhinhas que o tubarão solta */
.bolhinha { position: absolute; z-index: 2; width: var(--t, 8px); height: var(--t, 8px); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); pointer-events: none; animation: bolhinha 1.6s ease-out forwards; }
@keyframes bolhinha { to { transform: translate(var(--vx, 6px), -70px) scale(1.3); opacity: 0; } }

/* camadas de parallax */
.camada { position: absolute; left: 0; right: 0; pointer-events: none; will-change: transform; }
.camada-cardume { top: 28%; height: 120px; color: rgba(10, 37, 64, .22); }
.camada-cardume2 { top: 58%; height: 100px; color: rgba(53, 203, 232, .3); }
.cardume { position: absolute; left: 0; top: 0; width: clamp(140px, 18vw, 240px); animation: cardume 46s linear infinite; }
.camada-cardume2 .cardume { width: clamp(100px, 12vw, 170px); animation: cardume-volta 62s linear infinite; }
@keyframes cardume { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }
@keyframes cardume-volta { from { transform: translateX(110vw) scaleX(-1); } to { transform: translateX(-30vw) scaleX(-1); } }

.camada-algas { bottom: 40px; height: 260px; }
.alga { position: absolute; bottom: 0; height: clamp(160px, 22vw, 260px); width: auto; fill: rgba(14, 46, 79, .9); transform-origin: bottom center; animation: alga 7s ease-in-out infinite alternate; }
.alga-e { left: -10px; }
.alga-d { right: -14px; transform: scaleX(-1); animation-name: alga-d; animation-duration: 8.5s; height: clamp(120px, 16vw, 200px); }
@keyframes alga { from { transform: skewX(-4deg); } to { transform: skewX(5deg); } }
@keyframes alga-d { from { transform: scaleX(-1) skewX(-4deg); } to { transform: scaleX(-1) skewX(5deg); } }
/* a viagem fora da tela: algas, cardumes (sem JS), balanço do tubarão e pulso da boia param */
.viagem.fora .alga, .viagem.fora .cardume, .viagem.fora .rota-tubarao, .viagem.fora .boia::after { animation-play-state: paused; }
.leito { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(60px, 8vw, 120px); fill: var(--mar-6); }

/* ---------- O ABISMO (ajuda) ---------- */
.abismo {
  padding: clamp(40px, 6vw, 80px) 0 clamp(110px, 12vw, 160px);
  background:
    radial-gradient(40% 30% at 15% 20%, rgba(53, 203, 232, .08), transparent 70%),
    radial-gradient(35% 40% at 90% 70%, rgba(30, 127, 212, .12), transparent 70%),
    var(--mar-6);
  color: #C9DDEE;
}
.abismo-grade { display: grid; grid-template-columns: .9fr 1.1fr; grid-template-areas: 'intro perguntas' 'intro contato'; gap: 32px clamp(28px, 5vw, 80px); align-items: start; }
.abismo-intro { grid-area: intro; }
.perguntas { grid-area: perguntas; display: grid; gap: 10px; }
.contato-fundo { grid-area: contato; }
.abismo .rotulo { color: var(--ciano); }
.abismo .titulo-secao { color: #fff; margin: 10px 0 14px; }
.abismo .titulo-secao em { color: var(--ciano); }
.abismo .lead { color: #A9C6DF; }
.abismo-mascote { width: min(300px, 70%); margin: 22px 0 0; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35)); }
.abismo-mascote span { text-transform: lowercase; letter-spacing: .04em; font-size: clamp(11px, 6cqw, 17px); }

.perguntas details { border-radius: 22px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(53, 203, 232, .14); transition: background .3s; }
.perguntas details[open] { background: rgba(255, 255, 255, .08); }
.perguntas summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; position: relative; font-weight: 700; font-size: 16.5px; color: #fff; line-height: 1.35; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: ''; position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: rgba(53, 203, 232, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335CBE8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { padding: 0 22px 20px; font-size: 15px; color: #B6CFE4; }

.contato-cartao { border-radius: var(--raio-l); padding: clamp(22px, 2.6vw, 30px); background: linear-gradient(160deg, rgba(30, 127, 212, .28), rgba(10, 37, 64, .35)); box-shadow: inset 0 0 0 1px rgba(53, 203, 232, .2), 0 30px 60px rgba(0, 0, 0, .2); }
.contato-cartao h3 { color: #fff; font-size: 22px; margin: 8px 0 8px; }
.contato-cartao p { font-size: 15px; color: #B6CFE4; }
.contato-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn-vidro { --bg: rgba(255, 255, 255, .1); --fg: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.btn-vidro:hover { --bg: rgba(255, 255, 255, .18); }
.contato-email { display: inline-block; margin-top: 14px; font-size: 14px; color: #A9C6DF; text-decoration: underline; text-underline-offset: 3px; }
.contato-email:hover { color: #fff; }

/* ---------- responsivo ---------- */
@media (min-width: 900px) {
  .rota { --recuo: 96px; --boia: 38px; }
  .estacao:nth-child(1) { --dx: 0px; --vao: 70px; }
  .estacao:nth-child(2) { --dx: 70px; --vao: 80px; }
  .estacao:nth-child(3) { --dx: 130px; --vao: 96px; }
  .estacao:nth-child(4) { --dx: 80px; --vao: 110px; }
  .estacao:nth-child(5) { --dx: 14px; --vao: 120px; }
  .estacao:nth-child(6) { --dx: 66px; }
  .rota-tubarao { width: 128px; height: 128px; }
}
@media (max-width: 1080px) {
  .viagem-grade { grid-template-columns: 1fr; }
  .boletim-coluna { position: relative; top: 0; max-width: 620px; }
}
@media (max-width: 900px) {
  .superficie { min-height: 0; }
  .superficie-grade { grid-template-columns: 1fr; }
  .superficie-visual { order: -1; max-width: 300px; margin: -24px auto -36px; }
  .etiqueta-flutuante { left: -8%; bottom: 10%; padding: 8px 12px; }
  .etiqueta-flutuante b { font-size: 13px; }
  .descer { display: none; }
  .superficie { padding-bottom: 56px; }
  .viagem { padding-top: 48px; padding-bottom: 120px; }
  .abismo-grade { grid-template-columns: 1fr; grid-template-areas: 'intro' 'perguntas' 'contato'; }
  .abismo-mascote { width: 220px; margin: 18px auto 0; }
}
@media (max-width: 520px) {
  .superficie h1 { font-size: 40px; }
  .sonda { border-radius: 26px; }
  .sonda-abas { display: flex; margin: 4px 2px 8px; }
  .sonda-abas button { flex: 1; padding: 8px 6px; font-size: 13px; }
  .sonda-campo { flex-wrap: wrap; border-radius: 22px; padding: 6px 6px 6px 16px; }
  .sonda-campo input { height: 48px; font-size: 17px; }
  .sonda-btn { width: 100%; }
  .sonda-duplo { grid-template-columns: 1fr; }
  .sonda-extra { padding: 4px 10px 6px; }
  .garantias { gap: 8px 16px; font-size: 13px; }
  .estacao-cartao { padding: 16px 16px 18px; border-radius: 20px; }
  .estacao-texto { font-size: 14.5px; }
  .rota-tubarao { width: 70px; height: 70px; }
  .boletim { border-radius: 26px; }
  .contato-acoes .btn { width: 100%; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .raios i, .lamina path, .sonar i, .sonar-varredura, .mascote-boia, .etiqueta-flutuante, .cardume, .alga, .descer svg, .ponto-vivo::after, .rota-tubarao { animation: none !important; }
  .sonar i:nth-child(1) { transform: scale(.6); opacity: .8; }
  .sonar i:nth-child(2) { transform: scale(.85); opacity: .5; }
  .sonar i:nth-child(3) { transform: scale(1.02); opacity: .3; }
  .cardume { left: 12%; }
  .camada { transform: none !important; }
}

/* =====================================================================
   RODADA 2 · movimento ligado à rolagem (só com html.m-on, que o js/rastreio.js liga
   quando o motor existe e não há prefers-reduced-motion)
   ===================================================================== */

/* Rodada 3 (desempenho): os valores que mudam por quadro na superfície (água, título, raios, tubarão,
   sonar, etiqueta, garantias), nos cartões das estações, nas perguntas e no recorte do contato são
   calculados no js/rastreio.js e escritos direto no elemento (transform/translate/scale/rotate/opacity),
   em vez de calc() com sin()/color-mix() reavaliados pelo navegador a cada quadro. O CSS abaixo guarda
   só o que é fixo. Nenhuma propriedade guiada pela rolagem tem transition (o motion.js já suaviza). */

/* Rodada 4 (desempenho, medida com toque real + CPU 4x mais lenta): as variáveis do motion.js deixam de herdar.
   Sem isso, cada --p/--e/--c escrito numa estação, pergunta ou no boletim recalculava todos os filhos dela a cada
   quadro, e --vel/--rolagem no .cabecalho recalculavam o cabeçalho inteiro. Só a trilha até quem usa pede "inherit". */
@property --p { syntax: '*'; inherits: false; }
@property --e { syntax: '*'; inherits: false; }
@property --c { syntax: '*'; inherits: false; }
@property --vel { syntax: '*'; inherits: false; }
@property --rolagem { syntax: '*'; inherits: false; }
.boletim > *, .titulo-enche > .enche-veu, .enche-veu > .enche-cheio, .estacao-casa > .boia-casa, .boia-casa > svg, .boia-casa > svg > *,
.camada-algas > .alga, .abismo-mascote > * { --e: inherit; }
.cabecalho::after { --rolagem: inherit; }
.cabecalho > .container, .cabecalho .logo, .cabecalho .logo img { --vel: inherit; }

/* 1. linha d'água que sobe (a sonda fica acima da água: o formulário nunca é coberto) */
.m-on .sonda { position: relative; z-index: 4; }
.agua-sobe { display: none; }
.m-on .agua-sobe {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 3; pointer-events: none;
  transform: translate3d(0, 100%, 0);
  background: linear-gradient(180deg, rgba(30, 127, 212, .26) 0, rgba(76, 155, 218, .2) 30%, rgba(169, 213, 242, .16) 65%, rgba(221, 239, 251, 0) 100%);
  will-change: transform;
}
.agua-onda { position: absolute; left: 0; bottom: 100%; width: 200%; height: clamp(34px, 5vw, 70px); margin-bottom: -1px; overflow: visible; }
.agua-corpo { fill: rgba(30, 127, 212, .26); }
.agua-espuma { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(53, 203, 232, .8)); }

/* 2. título que afunda: --k só no h1; cada letra (ou palavra, no celular) tem --dy/--rz fixos calculados
   uma vez no JS. Cor e nitidez (blur no desktop; opacidade + escala no celular) vêm do JS. */
.m-on #titulo-rastreio .m-letra, .m-on #titulo-rastreio .m-palavra {
  transform: translate3d(0, calc(var(--k, 0) * var(--dy, 0px)), 0) rotate(calc(var(--k, 0) * var(--rz, 0deg)));
}

/* 3 a 6. raios, tubarão/sonar, etiqueta e garantias: escritos pelo JS (rastreio.js, pintaSup) */

/* 7. cardumes guiados pelo JS */
.m-on .cardume { animation: none; left: 0; }
.cardume g { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease-mola); }
.cardume g.para-direita { transform: scaleX(-1); }

/* 8. letreiro (placa de aeroporto) */
.letreiro { display: none; }
@media (min-width: 1081px) {
  .m-on .letreiro {
    display: grid; gap: 6px; margin-bottom: 12px; padding: 12px 16px 14px; border-radius: 20px;
    background: var(--navy); color: #fff; box-shadow: 0 14px 30px rgba(10, 37, 64, .22);
  }
  .letreiro-rotulo { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ciano); }
  .letreiro-texto { display: flex; flex-wrap: nowrap; gap: 1px; overflow: hidden; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; min-height: 22px; }
  .letreiro-texto i {
    font-style: normal; display: inline-grid; place-items: center; flex: none; width: .78em; height: 22px; border-radius: 3px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0 49%, rgba(0, 0, 0, .25) 49% 51%, rgba(255, 255, 255, .06) 51%);
    transform-origin: 50% 50%;
  }
  .letreiro-texto i.girando { animation: flap .09s linear infinite; color: #9fc3e0; }
  @keyframes flap { 50% { transform: perspective(80px) rotateX(-70deg); } }
}

/* 9. boletim que vira em linhas (todas assentam em 0° quando --e chega a 1; assentado, sem 3D) */
.m-on .boletim > * {
  transform-origin: 50% 0;
  transform: perspective(700px) rotateX(calc(clamp(0, 1.25 - var(--e, 1) * 1.6 + var(--r, 0) * .08 * (1 - var(--e, 1)), 1) * -82deg));
}
.m-on .boletim.assentado > * { transform: none; }
.boletim > :nth-child(1) { --r: 0; } .boletim > :nth-child(2) { --r: 1; } .boletim > :nth-child(3) { --r: 2; } .boletim > :nth-child(4) { --r: 3; }
.boletim > :nth-child(5) { --r: 4; } .boletim > :nth-child(6) { --r: 5; } .boletim > :nth-child(7) { --r: 6; } .boletim > :nth-child(n+8) { --r: 7; }
.m-on .boletim.virando > * { animation: virar-linha .55s var(--ease) both; animation-delay: calc(var(--r, 0) * 70ms); }
@keyframes virar-linha { from { transform: perspective(700px) rotateX(-88deg); opacity: .2; } to { transform: none; opacity: 1; } }

/* 10. título da rota que enche de água: o texto de base fica "vazio" e uma cópia colorida (aria-hidden,
   criada pelo JS) é revelada de baixo para cima por um véu em translateY. O degradê é fixo. */
.m-on .titulo-enche { position: relative; }
.m-on .titulo-enche, .m-on .titulo-enche > em { color: rgba(10, 37, 64, .16); }
.enche-veu { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform: translate3d(0, calc((1 - var(--e, 1)) * 100%), 0); }
.enche-cheio {
  display: block; transform: translate3d(0, calc((var(--e, 1) - 1) * 100%), 0);
  background: linear-gradient(0deg, var(--navy) 0, var(--oceano) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.enche-cheio em { color: transparent; -webkit-text-fill-color: transparent; }

/* 11. linha-guia da rota (revelada pelo véu; a lanterninha é um ponto HTML movido por transform) */
.rota-guia { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2.6; stroke-linecap: round; }
.rota-ponta {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; z-index: 1; pointer-events: none;
  background: #fff; opacity: 0; filter: drop-shadow(0 0 6px var(--ciano)) drop-shadow(0 0 12px rgba(53, 203, 232, .8));
  transition: opacity .3s; will-change: transform;
}
.rota-ponta.acesa { opacity: 1; }
.motion-reduzido .rota-veu-guia, .motion-reduzido .rota-ponta { display: none; }

/* 12. boias com mola e 13. cartões em pêndulo (alternando o lado): scale/rotate/translate escritos pelo JS */
.m-on .estacao-cartao { transform-origin: 0 0; }

/* 14. casinha */
.m-on .casa-telhado { stroke-dasharray: 72; stroke-dashoffset: calc((1 - var(--e, 1)) * 72); }
.m-on .casa-janela { opacity: calc(var(--e, 1) * 1.6 - .5); }

/* 15. algas que crescem e se dobram com a velocidade */
.m-on .alga { scale: 1 calc(.3 + var(--e, 1) * .7); }   /* a dobra com a velocidade (rotate) vem do rastreio.js, só com as algas na tela */

/* 16. pressão no título da ajuda */
.m-on .abismo-intro .titulo-secao { transform-origin: 0 100%; }   /* escala/opacidade: JS */

/* 17. tubarão espiando sobe por trás da placa */
.m-on .abismo-mascote img, .m-on .abismo-mascote span { translate: 0 calc((1 - var(--e, 1)) * 66cqw); }

/* 18. perguntas sobem como bolhas (balanço com sin() calculado no JS) e
   19. contato abre como bolha (recorte circular só durante a entrada; assentado, clip-path: none) */