/* ATRACA · landing náutica: porto, farol, carta e cais. Arte de ponta a ponta, texto com respiro. */
#app:has(.lp3) { max-width: none; margin: 0; padding-left: 0 !important; }

.lp3 {
  --noite: #0A0F16; --grafite: #161E29; --ardosia: #1F2935;
  --areia: #F4EFE6; --papel: #EFE5D2; --lar: #F26B1D; --lar-claro: #FF8D4D; --ver: #1E9E71;
  --t1: #161E29; --t2: #475261; --t3: #7A838E; --bd: #E6DFD2;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lado: clamp(20px, 5.5vw, 96px);
  color-scheme: light; background: #fff; color: var(--t1);
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.6;
  overflow-x: clip;
}
.lp3 h1, .lp3 h2, .lp3 h3 { margin: 0; }
.lp3 p { margin: 0; }
.lp3 em { font-style: normal; color: var(--lar); }
.lp3 .cinza { color: #9BA2AB; }
.lp3-largura { padding-inline: var(--lado); }
.lp3 section[id] { scroll-margin-top: 84px; }

/* títulos em linhas que sobem, como no filme */
.lp3-titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 88%; letter-spacing: -0.015em; line-height: 1.02; font-size: clamp(30px, 3.8vw, 58px); }
.lp3-titulo .l { display: block; overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.lp3-titulo .l > span { display: inline-block; transform: translateY(108%); transition: transform 900ms var(--curva); }
.lp3-revela.visivel .lp3-titulo .l > span, .lp3-hero .lp3-titulo .l > span, .lp3-final .lp3-revela.visivel .l > span { transform: none; }
.lp3-titulo .l:nth-child(2) > span { transition-delay: 90ms; }
.lp3-titulo .l:nth-child(3) > span { transition-delay: 180ms; }
.lp3-hero .lp3-titulo .l > span { animation: lp3Sobe 1000ms var(--curva) both; transform: none; }
.lp3-hero .lp3-titulo .l:nth-child(1) > span { animation-delay: 250ms; }
.lp3-hero .lp3-titulo .l:nth-child(2) > span { animation-delay: 360ms; }
.lp3-hero .lp3-titulo .l:nth-child(3) > span { animation-delay: 470ms; }

.lp3-cap { display: inline-flex; align-items: center; gap: 10px; font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--t1); }
.lp3-cap i { width: 10px; height: 10px; background: var(--lar); flex-shrink: 0; }
.lp3-cap b { color: var(--t3); font-weight: 600; }
.lp3-cap b:empty { display: none; }
.lp3-cap.claro { color: #F5F3EF; }
.lp3-cap.claro b { color: #8B95A3; }

.lp3-revela { opacity: 0; transform: translateY(34px); transition: opacity 800ms var(--curva), transform 800ms var(--curva); }
.lp3-revela.visivel { opacity: 1; transform: none; }

/* botões */
.lp3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 99px; padding: 10px 20px; font: 700 15px 'IBM Plex Sans', sans-serif; white-space: nowrap; background: var(--lar); color: #fff; border: 1.5px solid var(--lar); transition: transform 180ms var(--curva), box-shadow 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease; }
.lp3-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(242, 107, 29, .35); background: #FF7A2E; }
.lp3-btn.grande { padding: 15px 28px; font-size: 16.5px; }
.lp3-btn.vidro { background: rgba(245, 243, 239, .08); border-color: rgba(245, 243, 239, .35); color: #F5F3EF; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lp3-btn.vidro:hover { background: rgba(245, 243, 239, .16); box-shadow: none; }
.lp3-btn.fantasma { background: transparent; color: inherit; border-color: currentColor; opacity: .9; }
.lp3-btn.fantasma:hover { box-shadow: none; opacity: 1; }
.lp3-btn.contorno { background: #fff; color: var(--t1); border-color: #CFC7B8; }
.lp3-btn.contorno:hover { box-shadow: none; background: var(--areia); }

/* navegação: transparente sobre o porto, sólida depois */
.lp3-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: #F5F3EF; transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease; }
/* enquanto é transparente, um véu escuro garante contraste sobre qualquer coisa que passe embaixo */
.lp3-nav::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 22, .82), rgba(10, 15, 22, .28) 65%, transparent); pointer-events: none; transition: opacity 300ms ease; }
.lp3-nav.solido::before { opacity: 0; }
.lp3-nav-in { position: relative; z-index: 1; }
.lp3-nav.solido { background: rgba(255, 255, 255, .94); color: var(--t1); box-shadow: 0 1px 0 var(--bd); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lp3-nav-in { display: flex; align-items: center; gap: 28px; height: 72px; padding-inline: var(--lado); }
.lp3-marca { display: flex; align-items: center; gap: 10px; font: 900 19px 'Archivo', sans-serif; font-stretch: 112%; letter-spacing: .01em; color: inherit; }
.lp3-links { display: none; gap: 4px; }
.lp3-links button { background: none; border: none; color: inherit; font: 500 15px 'IBM Plex Sans', sans-serif; padding: 8px 12px; border-radius: 99px; opacity: .85; }
.lp3-links button:hover { opacity: 1; background: rgba(127, 127, 127, .14); }
.lp3-acoes { margin-left: auto; display: flex; gap: 10px; }
.lp3-so-largo { display: none !important; }
.lp3-so-curto { display: none; }

/* menu do celular */
.lp3-menu { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; padding: 0 9px; border: 1.5px solid currentColor; border-radius: 99px; background: transparent; color: inherit; opacity: .9; }
.lp3-menu i { display: block; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform 220ms var(--curva), opacity 160ms ease; }
.lp3-nav.aberto .lp3-menu i:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.lp3-nav.aberto .lp3-menu i:nth-child(2) { opacity: 0; }
.lp3-nav.aberto .lp3-menu i:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }
.lp3-gaveta { position: absolute; top: 100%; left: 0; right: 0; background: rgba(255, 255, 255, .97); color: var(--t1); border-bottom: 1px solid var(--bd); box-shadow: 0 18px 40px rgba(10, 15, 22, .18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; padding: 10px var(--lado) 18px; gap: 2px; animation: lp3Entra 260ms var(--curva) both; }
.lp3-gaveta button { background: none; border: none; text-align: left; padding: 14px 2px; font: 600 17px 'IBM Plex Sans', sans-serif; color: var(--t1); border-bottom: 1px solid var(--bd); }
.lp3-gaveta button:last-of-type { border-bottom: none; }
.lp3-gaveta .lp3-btn { margin-top: 12px; justify-content: center; padding: 14px 24px; font-size: 16.5px; }

/* cenas SVG ocupam a tela inteira */
.lp3-cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp3-cena [data-vel] { will-change: transform; }

/* ---------- hero ---------- */
.lp3-hero { position: relative; min-height: max(100svh, 820px); background: var(--noite); color: #F5F3EF; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
.lp3-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 15, 22, .72) 0%, rgba(10, 15, 22, .25) 45%, transparent 62%); }
/* O hero é uma coluna só: manchete, linha de apoio, ação e selo dividem a mesma medida
   (cerca de 15 palavras por linha) e os espaços seguem uma escala, não um gap único. */
/* Anatomia do hero: pílula da oferta, manchete grande ocupando a largura e linha de apoio
   com medida de leitura própria — a manchete não fica presa à coluna do texto de apoio. */
.lp3-hero-texto { position: relative; z-index: 2; padding: clamp(96px, 12vh, 148px) var(--lado) 0; width: min(calc(1200px + var(--lado) * 2), 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 0; will-change: transform, opacity; }
.lp3-hero .lp3-titulo { margin-top: 22px; font-size: clamp(31px, min(6.2vw, 9.6vh), 84px); line-height: .96; color: #F5F3EF; }
.lp3-hero .lp3-titulo em { color: var(--lar-claro); }
.lp3-hero-texto > p { margin-top: 24px; font-size: clamp(16.5px, 1.3vw, 20px); line-height: 1.5; color: #C9CFD8; max-width: 32em; animation: lp3Entra 900ms var(--curva) 700ms both; }
.lp3-hero .lp3-cta { margin-top: 34px; }
.lp3-hero-texto > .lp3-cap { animation: lp3Entra 800ms var(--curva) 100ms both; }
.lp3-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.lp3-hero .lp3-cta { animation: lp3Entra 900ms var(--curva) 850ms both; }
.lp3-nota { font-size: 14px; color: #8B95A3; animation: lp3Entra 900ms var(--curva) 950ms both; }
.lp3-rolar { position: absolute; z-index: 3; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: none; color: #C9CFD8; font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; animation: lp3Entra 900ms var(--curva) 1.6s both; }
.lp3-rolar i { width: 1.5px; height: 42px; background: linear-gradient(#F5F3EF, transparent); animation: lp3Linha 2.2s ease-in-out infinite; transform-origin: top; }

/* animações do porto */
.lp3-onda { animation: lp3Onda 40s linear infinite; }
.lp3-onda.o1 { animation-duration: 70s; }
.lp3-onda.o2 { animation-duration: 44s; }
.lp3-onda.o3 { animation-duration: 30s; }
.lp3-onda.o4 { animation-duration: 20s; }
.lp3-estrela { animation: lp3Pisca 4.5s ease-in-out infinite; }
.lp3-brilho { animation: lp3Brilho 3.2s ease-in-out infinite; }
.lp3-facho { transform-box: view-box; transform-origin: 1478px 395px; animation: lp3Facho 9s ease-in-out infinite alternate; }
.lp3-lanterna { animation: lp3Brilho 2.6s ease-in-out infinite; }
.lp3-balanca { transform-box: fill-box; transform-origin: 50% 100%; animation: lp3Balanca 5.2s ease-in-out infinite; }
.lp3-balanca.dois { animation-duration: 6.1s; animation-delay: -2s; }
.lp3-corda, .nv-corda, .lp3-corda-rota { fill: none; stroke: var(--lar); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lp3-hero .lp3-corda, .lp3-final .lp3-corda { stroke-dashoffset: 0; }
.lp3-rotulo-barco rect, .lp3-rotulo-barco path { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }
.lp3-rotulo-barco .rot { font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .16em; fill: #C24E08; }
.lp3-rotulo-barco .tit { font: 800 18px 'Archivo', sans-serif; fill: #161E29; }
.lp3-hero .lp3-rotulo-barco { animation: lp3Aparece .8s ease 1.2s both; }
.lp3-selo { transform-box: fill-box; }
.lp3-selo .lp3-anel { transform-box: fill-box; transform-origin: center; opacity: 0; }
.lp3-selo.vivo .lp3-anel, .lp3-hero .lp3-selo .lp3-anel, .lp3-final .lp3-selo .lp3-anel { animation: lp3Anel 2.4s ease-out infinite; }
.lp3-selo .lp3-anel.dois { animation-delay: 1.2s !important; }
.lp3-hero .lp3-selo.cais > * { transform-box: fill-box; }
.lp3-hero .lp3-selo.cais { animation: lp3Aparece .6s ease 4.1s both; }
.lp3-cena.atracado .lp3-navega, .lp3-cena.atracado .lp3-rotulo-barco, .lp3-cena.atracado .lp3-selo { animation: none; }
.lp3-cena.atracado .lp3-corda { stroke-dashoffset: 0; animation: none; }

/* link discreto ao lado do botão principal: o hero tem um caminho só em destaque */
.lp3-elo { display: inline-flex; align-items: center; gap: 8px; color: #C9CFD8; font: 600 15.5px 'IBM Plex Sans', sans-serif; padding: 10px 2px; border-bottom: 1px solid rgba(201, 207, 216, .35); transition: color 200ms ease, border-color 200ms ease, gap 200ms var(--curva); }
.lp3-elo:hover { color: #F5F3EF; border-color: #F5F3EF; gap: 12px; }
.lp3-elo i { width: 14px; height: 9px; background: currentColor; -webkit-mask: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h13M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lp3-hero .lp3-elo { animation: lp3Entra 900ms var(--curva) 900ms both; }

/* selo da oferta no hero */
.lp3-gratis { display: inline-flex; align-items: center; white-space: nowrap; gap: 8px; align-self: flex-start; padding: 7px 14px 7px 12px; border-radius: 99px; background: rgba(30, 158, 113, .14); border: 1px solid rgba(30, 158, 113, .45); color: #7FE3BE; font: 600 13.5px 'IBM Plex Sans', sans-serif; animation: lp3Entra 900ms var(--curva) 950ms both; }
.lp3-gratis i { width: 8px; height: 8px; border-radius: 50%; background: var(--ver); box-shadow: 0 0 0 4px rgba(30, 158, 113, .22); flex-shrink: 0; }

/* ---------- garantias: a objeção respondida antes de tudo ---------- */
.lp3-garantias { background: var(--grafite); color: #F5F3EF; border-top: 1px solid rgba(245, 243, 239, .08); }
.lp3-garantias-in { display: grid; gap: 26px; padding-block: 34px 36px; }
.lp3-gar { display: flex; gap: 14px; align-items: flex-start; }
.lp3-gar svg { width: 30px; height: 30px; flex-shrink: 0; fill: none; stroke: var(--lar-claro); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lp3-gar b { display: block; font: 800 17px 'Archivo', sans-serif; font-stretch: 96%; margin-bottom: 4px; }
.lp3-gar p { font-size: 14.5px; line-height: 1.5; color: #AEB6C0; }

/* ---------- barra fixa do celular ---------- */
.lp3-barra { display: none; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .95); border-top: 1px solid var(--bd); box-shadow: 0 -10px 30px rgba(10, 15, 22, .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(110%); transition: transform 320ms var(--curva); }
.lp3-barra.vista { transform: none; }
.lp3-barra .lp3-btn { flex: 1 1 0; justify-content: center; padding: 13px 10px; font-size: 15.5px; }
.lp3-barra .lp3-btn.contorno { flex: 0 0 34%; }

/* variante B: texto à esquerda, produto à direita e o porto numa faixa embaixo dos dois
   (com a cena inteira atrás, os barcos passavam por trás do vídeo) */
.lp3-hero.duas { min-height: auto; padding-bottom: 190px; }
.lp3-hero.duas .lp3-cena { top: auto; height: 190px; }
/* o corte seco entre o fundo chapado e a cena virava uma linha: a própria cena nasce do fundo,
   esmaecida por máscara (cobrir com um degradê escuro apagava os barcos) */
.lp3-hero.duas .lp3-cena { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
.lp3-hero.duas .lp3-hero-texto { width: min(calc(640px + var(--lado) * 2), 100%); padding-top: clamp(84px, 8.5vh, 104px); }
.lp3-hero.duas .lp3-titulo { font-size: clamp(30px, min(3.3vw, 6vh), 48px); }
/* com o print ao lado, os rótulos dos barcos competem com a tela do produto */
.lp3-hero.duas .lp3-rotulo-barco { display: none; }
/* no celular o print entra depois do texto, nunca antes da manchete */
.lp3-hero.duas .lp3-hero-texto { order: 1; }
.lp3-hero.duas .lp3-hero-print { order: 2; }
.lp3-hero-print { position: relative; z-index: 2; margin: 28px var(--lado) 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(245, 243, 239, .14); box-shadow: 0 40px 90px rgba(4, 8, 13, .55); animation: lp3Entra 1000ms var(--curva) 700ms both; }
.lp3-hero-print img, .lp3-hero-print video { display: block; width: 100%; height: auto; background: #F5F3EF; }
/* a tela sozinha não explica nada: a legenda diz o que está acontecendo ali */
.lp3-hero-print { cursor: pointer; }
.lp3-hero-print .lp3-play { position: absolute; left: 50%; top: calc(50% - 14px); translate: -50% -50%; width: 74px; height: 74px; border-radius: 50%; border: none; background: rgba(10, 15, 22, .72); backdrop-filter: blur(6px); display: none; place-items: center; z-index: 3; }
.lp3-hero-print.parado .lp3-play { display: grid; }
.lp3-hero-print .lp3-play::after { content: ''; width: 0; height: 0; margin-left: 5px; border-left: 21px solid #F5F3EF; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.lp3-hero-print figcaption { padding: 12px 16px 14px; background: rgba(10, 15, 22, .82); color: #C9CFD8; font-size: 13.5px; line-height: 1.45; border-top: 1px solid rgba(245, 243, 239, .1); }
@media (min-width: 1024px) {
  .lp3-hero.duas { display: grid; grid-template-columns: minmax(460px, 49fr) 51fr; align-items: start; column-gap: clamp(24px, 3vw, 56px); padding-bottom: clamp(200px, 15.5vw, 320px); }
  /* os barcos atracam embaixo do texto, do lado esquerdo: sob o vídeo sobrava água vazia */
  .lp3-hero.duas .lp3-porto { transform-box: view-box; transform: translateX(-600px); }
  /* a faixa precisa ter altura para os barcos caberem dentro dela, não só a água */
  /* a cena sobe até quase o link e mantém o enquadramento em qualquer largura:
     altura e recorte proporcionais, ancorados embaixo */
  .lp3-hero.duas .lp3-cena { height: clamp(330px, 30vw, 620px); }
  /* a coluna de texto fica no meio da altura do vídeo */
  .lp3-hero.duas .lp3-hero-texto { grid-area: 1 / 1; align-self: center; padding-top: 0; padding-right: 0; width: 100%; margin-top: clamp(84px, 8.5vh, 104px); }
  .lp3-hero.duas .lp3-hero-print { grid-area: 1 / 2; margin: clamp(84px, 8.5vh, 104px) var(--lado) 0 0; transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg); transform-origin: left center; }
  .lp3-hero.duas .lp3-rolar { display: none; }
}
/* ---------- quadro de chegadas ---------- */

/* ---------- história fixa entre dois portos ---------- */
.lp3-historia { position: relative; height: 270vh; background: #DCE3E8; }
.lp3-historia-fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.lp3-nevoa .nv-rota { fill: none; stroke: var(--lar); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.lp3-nevoa .nv-card rect, .lp3-nevoa .nv-card path, .lp3-nevoa .nv-match rect, .lp3-nevoa .nv-parceria rect { filter: drop-shadow(0 10px 22px rgba(22, 30, 41, .14)); }
.lp3-nevoa .nv-card-rot { font: 600 15px 'IBM Plex Mono', monospace; letter-spacing: .14em; fill: #7A838E; }
.lp3-nevoa .nv-card-tit { font: 800 24px 'Archivo', sans-serif; fill: #161E29; }
.lp3-nevoa .nv-card-rot.claro { fill: #8B95A3; }
.lp3-nevoa .nv-bolha-t { font: 400 18px 'IBM Plex Sans', sans-serif; fill: #111B21; }
.lp3-nevoa .nv-bolha-nome { font: 600 14px 'IBM Plex Sans', sans-serif; }
.lp3-nevoa .nv-bolha-hora { font: 400 12px 'IBM Plex Sans', sans-serif; fill: #667781; }
.lp3-nevoa .nv-wpp-grupo { font: 600 19px 'IBM Plex Sans', sans-serif; fill: #fff; }
.lp3-nevoa .nv-wpp-sub { font: 400 14px 'IBM Plex Sans', sans-serif; fill: #CFE9E4; }
.lp3-nevoa .nv-wpp-janela { opacity: 0; filter: drop-shadow(0 24px 40px rgba(22, 30, 41, .2)); }
.lp3-nevoa .nv-bolha, .lp3-nevoa .nv-match, .lp3-nevoa .nv-parceria { opacity: 0; }
.lp3-nevoa .nv-card.b { opacity: 0; }
.lp3-nevoa .nv-match-tit { font: 900 36px 'Archivo', sans-serif; fill: #F26B1D; }
.lp3-nevoa .nv-match-tit.claro { fill: #F5F3EF; font-size: 30px; }
.lp3-nevoa .nv-match-item { font: 500 20px 'IBM Plex Sans', sans-serif; fill: #3C4858; }
.lp3-nevoa .nv-match-item.claro { fill: #C9CFD8; }
.lp3-historia-texto { position: absolute; z-index: 2; left: var(--lado); top: 50%; transform: translateY(-50%); width: min(500px, 38vw); display: flex; flex-direction: column; gap: 18px; padding: 28px 30px 20px; border-radius: 24px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(22, 30, 41, .08); box-shadow: 0 24px 60px rgba(22, 30, 41, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lp3-hist-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lp3-hp { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(22, 30, 41, .1); opacity: .5; transition: opacity 400ms ease; cursor: pointer; }
.lp3-hp:not(.ativo):hover { opacity: .8; }
.lp3-hp:focus-visible { outline: 2px solid var(--lar); outline-offset: 4px; border-radius: 10px; }
.lp3-hp:first-child { border-top: none; }
.lp3-hp.ativo { opacity: 1; }
.lp3-hp.feito { opacity: .6; }
.lp3-hp-pager { display: none; gap: 8px; }
.lp3-hp-pg { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(22, 30, 41, .25); background: transparent; color: var(--t2); font: 800 14px 'Archivo', sans-serif; cursor: pointer; transition: background 250ms ease, color 250ms ease, border-color 250ms ease; }
.lp3-hp-pg.ativo { background: var(--lar); border-color: var(--lar); color: #fff; }
.lp3-hp-n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #161E29; display: flex; align-items: center; justify-content: center; font: 800 15px 'Archivo', sans-serif; transition: background 300ms ease, color 300ms ease, border-color 300ms ease; }
.lp3-hp.ativo .lp3-hp-n { background: var(--lar); border-color: var(--lar); color: #fff; }
.lp3-hp.feito .lp3-hp-n { background: #161E29; color: #fff; }
.lp3-hp h3 { font: 900 clamp(24px, 2.3vw, 36px) 'Archivo', sans-serif; font-stretch: 90%; line-height: 1.05; color: var(--t1); }
.lp3-hp p { margin-top: 0; max-height: 0; overflow: hidden; font-size: 16.5px; color: #3C4858; transition: max-height 500ms var(--curva), margin 500ms var(--curva); }
.lp3-hp.ativo p { max-height: 160px; margin-top: 10px; }
.lp3-nevoa .nv-fachos { transform-box: view-box; transform-origin: 800px 312px; animation: lp3FachoDuplo 6s ease-in-out infinite alternate; }
.lp3-nevoa .nv-grupo { transform-box: view-box; transform-origin: 800px 600px; }

/* ---------- carta náutica ---------- */
.lp3-carta { position: relative; background: var(--papel); height: 360vh; }
.lp3-carta-fixo { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: 92px 0 22px; overflow: hidden; }
.lp3-carta-fixo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1200px 500px at 20% 0%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(900px 600px at 100% 100%, rgba(201, 184, 148, .35), transparent 60%); }
.lp3-carta-cab { position: relative; display: flex; flex-direction: column; gap: 10px; }
.lp3-carta-titulo { font: 900 clamp(28px, min(3.4vw, 6vh), 52px) 'Archivo', sans-serif; font-stretch: 88%; line-height: 1.02; letter-spacing: -.015em; }
.lp3-carta-cab p { font-size: 16px; color: #5B5446; max-width: 560px; }
.lp3-carta-palco { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.lp3-carta-janela { position: relative; width: 100%; height: 100%; overflow: hidden; mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.lp3-carta-mapa { position: relative; }
.lp3-carta-mapa.horizontal { display: none; aspect-ratio: 1600 / 600; width: min(calc(100vw - 150px), calc((100svh - 300px) * 2.667)); }
.lp3-carta-mapa.vertical { aspect-ratio: 400 / 1640; margin-inline: auto; width: calc(100% - 32px); max-width: 520px; will-change: transform; }
.lp3-carta-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp3-carta-svg text { font: 700 14px 'Archivo', sans-serif; fill: #1B2431; }
.lp3-rota-fundo { fill: none; stroke: #9C8964; stroke-width: 3; stroke-dasharray: 3 10; stroke-linecap: round; }
.lp3-rota-viva { fill: none; stroke: var(--lar); stroke-width: 5; stroke-linecap: round; }
.lp3-boia-svg .halo { fill: #EFE5D2; stroke: #9C8964; stroke-width: 2; transition: stroke 300ms ease, fill 300ms ease; }
.lp3-boia-svg .nucleo { fill: #B8A780; transition: fill 300ms ease, transform 400ms var(--curva); transform-box: fill-box; transform-origin: center; }
.lp3-boia-svg.passou .halo { stroke: var(--lar); fill: #FFF3E8; }
.lp3-boia-svg.passou .nucleo { fill: var(--lar); transform: scale(1.25); }
.lp3-carta .lp3-selo { opacity: 0; }
.lp3-boia { position: absolute; width: min(236px, 18vw); display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 12px; background: rgba(239, 229, 210, .94); box-shadow: 0 0 0 1px rgba(156, 137, 100, .18); opacity: .55; transition: opacity 400ms ease, transform 500ms var(--curva); }
.lp3-boia.passou { opacity: 1; background: #FBF6EC; box-shadow: 0 10px 26px rgba(91, 84, 70, .16), 0 0 0 1px rgba(242, 107, 29, .28); }
.lp3-boia.cima { transform: translate(-50%, calc(-100% - 30px)); }
.lp3-boia.baixo { transform: translate(-50%, 30px); }
.lp3-boia.dir { left: auto !important; right: 4%; width: 55%; transform: translateY(-50%); }
.lp3-boia.esq { left: 4% !important; width: 55%; transform: translateY(-50%); text-align: right; align-items: flex-end; }
.lp3-boia.final.h { transform: translate(-50%, 0); text-align: center; align-items: center; width: min(236px, 17vw); }
.lp3-boia.final.v { transform: translate(-50%, 0); text-align: center; align-items: center; width: 80%; }
.lp3-boia-n { font: 700 12px 'IBM Plex Mono', monospace; letter-spacing: .12em; color: var(--lar); text-transform: uppercase; }
.lp3-boia b { font: 800 20px 'Archivo', sans-serif; font-stretch: 92%; color: var(--t1); line-height: 1.15; }
.lp3-boia p { font-size: 14.5px; line-height: 1.45; color: #5B5446; }
.lp3-carta-legenda { position: relative; margin-top: 12px; font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8C7A56; }

/* ---------- a bordo: abas do produto ---------- */
.lp3-bordo { background: #fff; padding: 88px 0 80px; overflow: hidden; }
.lp3-bordo-cab { display: flex; flex-direction: column; gap: 18px; }
.lp3-bordo-lista { margin-top: 56px; display: flex; flex-direction: column; gap: 72px; }
.lp3-bl { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.lp3-bl-texto { display: flex; flex-direction: column; gap: 13px; }
.lp3-bl-cap { display: flex; align-items: baseline; gap: 10px; font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); }
.lp3-bl-cap b { font-size: 12px; color: var(--t3); }
.lp3-bl-texto h3 { font: 900 clamp(26px, 2.8vw, 38px) 'Archivo', sans-serif; font-stretch: 90%; line-height: 1.04; letter-spacing: -.01em; }
.lp3-bl-texto > p { font-size: 16.5px; color: var(--t2); max-width: 46ch; }
.lp3-bl-texto ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lp3-bl-texto li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.45; }
.lp3-bl-texto li::before { content: ''; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; background: var(--tinta); }
.lp3-bl-print { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--bd); box-shadow: 0 24px 60px rgba(22, 30, 41, .14); }
.lp3-bl-print img { display: block; width: 100%; height: auto; }
.lp3-janela { height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #F3EFE8; border-bottom: 1px solid var(--bd); }
.lp3-janela i { width: 10px; height: 10px; border-radius: 50%; background: #D5CDBF; }
.lp3-janela { height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #F3EFE8; border-bottom: 1px solid var(--bd); }
.lp3-janela i { width: 10px; height: 10px; border-radius: 50%; background: #D5CDBF; }

/* ---------- vitrine: fotos reais dos galpões ---------- */


/* ---------- simulador ---------- */
.lp3-sim { position: relative; background: radial-gradient(900px 500px at 85% 20%, rgba(242, 107, 29, .16), transparent 60%), var(--grafite); color: #F5F3EF; padding: 88px 0 0; overflow: hidden; }
.lp3-sim-in { display: grid; grid-template-columns: 1fr; gap: 48px; position: relative; z-index: 2; }
.lp3-sim-controles { display: flex; flex-direction: column; gap: 22px; }
.lp3-sim-controles .lp3-titulo { color: #F5F3EF; }
.lp3-sim-controles .lp3-titulo em { color: var(--lar-claro); }
.lp3-sim-controles > p { color: #AEB6C0; font-size: 18px; max-width: 520px; }
.lp3-faixa { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-top: 6px; }
.lp3-faixa > span { display: flex; justify-content: space-between; font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8B95A3; }
.lp3-faixa output { font: 800 22px 'Archivo', sans-serif; font-stretch: 112%; letter-spacing: 0; text-transform: none; color: #F5F3EF; }
.lp3-faixa input { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--lar) var(--pct, 50%), rgba(245, 243, 239, .14) var(--pct, 50%)); outline: none; }
.lp3-faixa input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #F5F3EF; border: 6px solid var(--lar); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); cursor: grab; }
.lp3-faixa input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #F5F3EF; border: 6px solid var(--lar); cursor: grab; }
.lp3-sim-res { align-self: center; background: rgba(245, 243, 239, .04); border: 1px solid rgba(245, 243, 239, .1); border-radius: 28px; padding: 30px; display: flex; flex-direction: column; gap: 4px; backdrop-filter: blur(6px); }
.lp3-sim-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(245, 243, 239, .08); }
.lp3-sim-linha span { color: #AEB6C0; font-size: 15.5px; }
.lp3-sim-linha b { font: 800 26px 'Archivo', sans-serif; font-stretch: 112%; font-variant-numeric: tabular-nums; }
.lp3-sim-linha.destaque b { color: var(--lar-claro); font-size: 32px; }
.lp3-sim-anos { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 20px; border-radius: 18px; background: var(--ver); }
.lp3-sim-anos b { font: 900 clamp(54px, 5vw, 76px) 'Archivo', sans-serif; font-stretch: 116%; line-height: .9; font-variant-numeric: tabular-nums; }
.lp3-sim-anos span { font-size: 16px; line-height: 1.4; font-weight: 600; }
.lp3-sim-res small { margin-top: 14px; font-size: 13px; color: #8B95A3; line-height: 1.5; }
.lp3-sim-mar { position: relative; display: block; width: 100%; height: 220px; margin-top: 30px; }
.lp3-navio { transition: transform 700ms var(--curva); }

/* ---------- carga protegida ---------- */

/* ---------- quem está no leme ---------- */

/* ---------- preço ---------- */
.lp3-preco { position: relative; background: #fff; padding: 88px 0; overflow: hidden; }
.lp3-preco::after { content: ''; position: absolute; right: -3vw; bottom: -3vw; width: 30vw; height: 20vw; opacity: .04; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 10 40 27'%3E%3Cpath d='M6 31 V30 L18 12 V31 Z M18 31 V30 L30 12 V31 Z M30 31 V30 L42 12 V31 Z M6 30 H42 V33.5 Q42 35 40.5 35 H7.5 Q6 35 6 33.5 Z' fill='%23161E29'/%3E%3C/svg%3E") no-repeat right bottom / contain; }
.lp3-preco-cab { display: flex; flex-direction: column; gap: 20px; }
.lp3-planos { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 30px; max-width: 940px; }
.lp3-plano { position: relative; background: #fff; border: 1px solid var(--bd); border-radius: 24px; padding: 26px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(22, 30, 41, .06); }
.lp3-plano.destaque { background: var(--grafite); color: #F5F3EF; border-color: var(--grafite); box-shadow: 0 30px 80px rgba(22, 30, 41, .28); }
.lp3-plano-tag { position: absolute; top: 20px; right: 20px; background: var(--lar); color: #fff; font: 700 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; }
.lp3-plano h3 { font: 800 20px 'Archivo', sans-serif; font-stretch: 94%; }
.lp3-valor { margin-top: 12px !important; display: flex; align-items: baseline; gap: 10px; color: var(--t3); font-size: 16px; }
.lp3-plano.destaque .lp3-valor { color: #8B95A3; }
.lp3-valor { flex-wrap: wrap; }
.lp3-valor b { white-space: nowrap; font: 900 clamp(38px, 3.6vw, 48px) 'Archivo', sans-serif; font-stretch: 112%; letter-spacing: -.02em; color: inherit; line-height: 1; }
.lp3-plano.destaque .lp3-valor b { color: #F5F3EF; }
.lp3-plano:not(.destaque) .lp3-valor b { color: var(--t1); }
.lp3-obs { font-size: 14.5px; color: var(--t3); margin-top: 4px !important; }
.lp3-plano.destaque .lp3-obs { color: #8B95A3; }
.lp3-plano ul { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.lp3-plano li { position: relative; padding-left: 24px; font-size: 15px; }
.lp3-plano li::before { content: ''; position: absolute; left: 0; top: 8px; width: 11px; height: 11px; background: var(--ver); }
.lp3-plano.destaque li::before { background: var(--lar); }
.lp3-plano .lp3-btn { width: 100%; }

.lp3-preco-cab .lp3-titulo { font-size: clamp(30px, 3.4vw, 48px); }
.lp3-preco-cab > p { font-size: 16.5px; }

/* ---------- dúvidas ---------- */
.lp3-duvidas { background: var(--areia); padding: 120px 0; }
.lp3-duvidas-in { display: grid; grid-template-columns: 1fr; gap: 40px; }
.lp3-duvidas-cab { display: flex; flex-direction: column; gap: 20px; }
.lp3-faq { border-bottom: 1px solid #D8CFBF; }
.lp3-faq:first-child { border-top: 1px solid #D8CFBF; }
.lp3-faq summary { list-style: none; cursor: pointer; position: relative; padding: 24px 48px 24px 0; font: 700 clamp(18px, 1.5vw, 21px) 'Archivo', sans-serif; font-stretch: 96%; }
.lp3-faq summary::-webkit-details-marker { display: none; }
.lp3-faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: linear-gradient(var(--lar), var(--lar)) center / 100% 2.5px no-repeat, linear-gradient(var(--lar), var(--lar)) center / 2.5px 100% no-repeat; transition: transform 300ms var(--curva); }
.lp3-faq[open] summary::after { transform: rotate(135deg); }
.lp3-faq-corpo { overflow: hidden; }
.lp3-faq p { padding: 0 48px 26px 0; color: var(--t2); font-size: 17px; }
.lp3-duvidas-sub { color: var(--t2); font-size: 16.5px; max-width: 34ch; }
.lp3-duvidas-cab .lp3-btn { align-self: flex-start; margin-top: 4px; }

/* ---------- fechamento no porto ---------- */
.lp3-final { position: relative; min-height: max(115svh, 1000px); background: var(--noite); color: #F5F3EF; overflow: hidden; display: flex; }
.lp3-final::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 15, 22, .82) 0%, rgba(10, 15, 22, .3) 48%, transparent 64%); }
.lp3-final-texto { position: relative; z-index: 2; padding: 150px var(--lado) 0; display: flex; flex-direction: column; gap: 24px; max-width: 1200px; }
.lp3-final .lp3-titulo { font-size: clamp(42px, 5.4vw, 88px); }
.lp3-final .lp3-rotulo-barco { display: none; }
.lp3-final .lp3-titulo em { color: var(--lar-claro); }
.lp3-final-texto > p { color: #C9CFD8; font-size: 18.5px; max-width: 620px; }

.lp3-rodape { background: var(--noite); color: #8B95A3; padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(245, 243, 239, .08); }
.lp3-rodape-in { display: grid; grid-template-columns: 1fr; gap: 28px; }
.lp3-rodape .lp3-marca { color: #F5F3EF; }
.lp3-rodape b { display: block; color: #F5F3EF; font-size: 14px; margin-bottom: 8px; }
.lp3-rodape p { font-size: 14px; line-height: 1.9; margin-top: 8px; }
.lp3-rodape p a { color: #C9CFD8; text-decoration: none; border-bottom: 1px solid rgba(245, 243, 239, .22); transition: color 200ms ease, border-color 200ms ease; }
.lp3-rodape p a:hover { color: #F5F3EF; border-color: var(--lar); }

/* ---------- keyframes ---------- */
@keyframes lp3Onda { to { transform: translateX(-1600px); } }
@keyframes lp3Pisca { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
@keyframes lp3Brilho { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }
@keyframes lp3Facho { from { transform: rotate(7deg); } to { transform: rotate(-12deg); } }
@keyframes lp3FachoDuplo { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes lp3Balanca { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(3px) rotate(1.4deg); } }
@keyframes lp3NavegaA { from { transform: translateX(-820px); } to { transform: none; } }
@keyframes lp3NavegaB { from { transform: translateX(820px); } to { transform: none; } }
@keyframes lp3Desenha { to { stroke-dashoffset: 0; } }
@keyframes lp3Aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp3Anel { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes lp3Sobe { from { transform: translateY(108%); } to { transform: none; } }
@keyframes lp3Entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lp3Linha { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes lp3Fita { to { transform: translateX(-50%); } }
@keyframes lp3Progresso { from { width: 0; } to { width: 100%; } }

/* ---------- celular: composição da cena ajustada ---------- */
@media (max-width: 699px) {
  /* no celular o porto é recentrado nos barcos e os rótulos crescem para ficarem legíveis */
  .lp3-hero .lp3-porto, .lp3-final .lp3-porto { transform-box: view-box; transform-origin: 1180px 600px; transform: translateX(-330px) scale(1.18); }
  .lp3-hero .lp3-rotulo-barco, .lp3-final .lp3-rotulo-barco { transform-box: fill-box; transform-origin: 50% 0; }
  .lp3-hero .lp3-rotulo-barco.a, .lp3-final .lp3-rotulo-barco.a { transform: translateX(-91px) scale(1.85); }
  .lp3-hero .lp3-rotulo-barco.b, .lp3-final .lp3-rotulo-barco.b { transform: translateX(8px) scale(1.85); }
  .lp3-hero, .lp3-final { min-height: max(100svh, 770px); }
  .lp3-hero .lp3-cena, .lp3-final .lp3-cena { top: auto; height: 330px; }
  .lp3-hero .lp3-titulo { font-size: 31px; }
  .lp3-hero-texto > p, .lp3-final-texto > p { font-size: 15.5px; }
  .lp3-hero .lp3-cta, .lp3-final .lp3-cta { flex-direction: column; align-items: stretch; gap: 6px; }
  .lp3-hero .lp3-elo { align-self: flex-start; }
  .lp3-hero .lp3-btn.grande, .lp3-final .lp3-btn.grande { padding: 14px 20px; font-size: 16px; }
  .lp3-rolar { display: none; }
  .lp3-carta-cab p { display: none; }
  .lp3-carta-legenda { display: none; }
  /* a barra fixa de ações cobria os cartões de baixo da rota */
  .lp3-carta-fixo { padding-bottom: 78px; }
  .lp3-sim-linha b { font-size: 22px; white-space: nowrap; }
  .lp3-sim-linha.destaque b { font-size: 26px; }
  .lp3-sim-anos { flex-direction: column; align-items: flex-start; gap: 6px; }
  .lp3-sim-anos b { font-size: 48px; }
  .lp3-sim-anos span { font-size: 15px; }
  .lp3-hero-texto { padding-top: 84px; }
  .lp3-hero.duas { padding-bottom: 150px; }
  .lp3-hero.duas .lp3-cena { height: 150px; }
  /* na faixa o recorte já enquadra os barcos: o deslocamento do hero cheio atrapalha */
  .lp3-hero.duas .lp3-porto { transform: none; }
  .lp3-hero.duas .lp3-hero-texto { padding-top: 84px; }
  .lp3-hero .lp3-titulo { margin-top: 16px; }
  .lp3-hero-texto > p { margin-top: 16px; }
  .lp3-hero .lp3-cta { margin-top: 24px; }
  .lp3-barra { display: flex; }
  /* o navio fica no centro do recorte da cena, não na borda direita */
  .lp3-navio-pos { transform-box: view-box; transform: translate(800px, 156px); }
  .lp3-historia { height: 210vh; }
  .lp3-carta { height: 240vh; }
  .lp3-gratis { font-size: 12.5px; padding: 6px 12px 6px 10px; }
  /* o quadro de chegadas empilha: rótulo em cima, fita inteira embaixo */
  .lp3-so-largo-t { display: none; }
  .lp3-so-curto { display: inline; }
  /* a cena da história é recortada no trecho da conversa: nada de escala minúscula */
  .lp3-historia-fixo { background: #EEF2F4; }
  /* a barra fixa de ações cobre ~70 px: a cena sobe para os barcos não ficarem atrás dela */
  .lp3-historia .lp3-nevoa { top: auto; bottom: 70px; height: 360px; }
  /* o recorte é centrado no card do WhatsApp; estes dois nascem 30-35 unidades à esquerda */
  .lp3-nevoa .nv-match { transform: translate(35px, 115px); }
  .lp3-nevoa .nv-parceria { transform: translate(30px, 60px); }
  .lp3-historia-texto { left: 14px; right: 14px; top: 78px; transform: none; width: auto; gap: 8px; padding: 14px 16px 10px; border-radius: 18px; }
  .lp3-hp { padding: 8px 0; }
  /* os três passos empilhados cobriam a cena: fica o seletor ①②③ e só o texto da etapa ativa */
  .lp3-hp-pager { display: flex; }
  .lp3-hp { padding: 4px 0; border-top: none; }
  .lp3-hp:not(.ativo) { display: none; }
  .lp3-hp .lp3-hp-n { display: none; }
  .lp3-hp p { font-size: 15.5px; }
  .lp3-nevoa .nv-card { display: none; }
  .lp3-final-texto { padding-top: 96px; }
  /* no celular títulos e textos ficam centralizados; listas e tabelas seguem à esquerda */
  .lp3-hero-texto, .lp3-bordo-cab, .lp3-preco-cab, .lp3-duvidas-cab, .lp3-carta-cab, .lp3-sim-controles, .lp3-final-texto, .lp3-gar { text-align: center; align-items: center; }
  .lp3-hero-texto > p, .lp3-sim-controles > p { margin-inline: auto; }
  .lp3-gar { flex-direction: column; gap: 10px; }
  /* a tira de abas é rolável: com o alinhamento central ela virava mais larga que a tela */
  /* o navio entra entre os controles e o resultado: arrastar muda o navio e o número na mesma tela */
  .lp3-sim { display: flex; flex-direction: column; }
  .lp3-sim-in { display: contents; }
  .lp3-sim-controles { order: 1; padding-inline: var(--lado); }
  .lp3-sim-mar { order: 2; height: 170px; margin-top: 16px; }
  .lp3-sim-res { order: 3; margin: 16px var(--lado) 0; }
  .lp3-faixa { width: 100%; }
  .lp3-faixa > span { gap: 10px; }
}

@media (min-width: 700px) {
  .lp3-so-largo { display: inline-flex !important; }
  
  .lp3-garantias-in { grid-template-columns: repeat(3, 1fr); gap: 30px; padding-block: 40px 44px; }
  .lp3-planos { grid-template-columns: 1.1fr 1fr; }
  .lp3-rodape-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .lp3-nevoa .nv-grupo { transform: translateX(260px) scale(.66); }
  .lp3-historia-texto { width: min(460px, 42vw); }
  .lp3-boia b { font-size: clamp(16px, 1.4vw, 21px); }
  .lp3-boia p { font-size: clamp(12.5px, 1vw, 15px); }
}

@media (max-width: 1023px) {
  /* numa coluna, o print vem logo abaixo das abas: trocar de aba muda o que se vê */
}

@media (min-width: 1024px) {
  /* "A bordo": título à esquerda e as abas em cima do print, aproveitando a faixa vazia */
  /* título, abas e, abaixo, um cartão só por aba: texto e print no mesmo bloco */
  /* a conversa é o centro da cena no computador: um pouco maior que o resto */
  .lp3-nevoa .nv-wpp-janela { transform-box: view-box; transform-origin: 835px 345px; transform: scale(1.2); }
  .lp3-links { display: flex; }
  .lp3-menu { display: none; }
  .lp3-sim-in { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
  .lp3-duvidas-in { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
  /* alterna o lado do print a cada bloco, senão a página vira uma coluna só */
  .lp3-bl { grid-template-columns: minmax(280px, 42%) 1fr; gap: clamp(32px, 4vw, 64px); }
  .lp3-bl:nth-child(even) .lp3-bl-print { order: -1; }
  .lp3-duvidas-cab { position: sticky; top: 110px; }
  .lp3-nevoa .nv-grupo { transform: translateX(350px) scale(.66); }
}

/* Notebook: largura de desktop com pouca altura (14"/15" costumam dar ~700-780 px úteis).
   Sem isso a seção não cabe na tela e a leitura fica sufocada. */
@media (min-width: 1024px) and (max-height: 860px) {
  .lp3-titulo { font-size: clamp(28px, 2.9vw, 44px); }
  .lp3-bordo { padding: 56px 0 52px; }
  /* o print manda na altura do cartão: aqui ele é limitado pela tela e mostra o topo da tela real */
  .lp3-sim { padding-top: 56px; }
  .lp3-sim-in { gap: 34px; }
  .lp3-sim-res { padding: 22px; border-radius: 22px; }
  .lp3-sim-linha { padding: 10px 0; }
  .lp3-sim-linha b { font-size: 22px; }
  .lp3-sim-linha.destaque b { font-size: 27px; }
  .lp3-sim-anos { margin-top: 12px; padding: 14px 16px; }
  .lp3-sim-anos b { font-size: 46px; }
  .lp3-sim-mar { height: 150px; margin-top: 18px; }
  .lp3-preco { padding: 56px 0; }
  .lp3-planos { margin-top: 22px; }
  .lp3-plano { padding: 22px; }
  .lp3-duvidas { padding: 48px 0; }
  .lp3-duvidas-in { gap: 48px; }
  .lp3-duvidas details { padding: 11px 0; }
  .lp3-duvidas summary { font-size: 15.5px; }
  .lp3-duvidas details p { font-size: 15px; }
}

/* Celular com a barra do navegador aberta (~660 px úteis): painel, conversa, barcos e barra fixa
   disputam a mesma altura. Painel mais enxuto e conversa um pouco menor, crescendo de baixo para cima. */
@media (max-width: 699px) and (max-height: 720px) {
  .lp3-historia-texto { gap: 6px; padding: 12px 14px 8px; }
  .lp3-hp-pg { width: 30px; height: 30px; font-size: 13px; }
  .lp3-hp h3 { font-size: 19px; line-height: 1.1; }
  .lp3-hp p { font-size: 14px; line-height: 1.42; margin-top: 4px; }
  .lp3-nevoa .nv-wpp-janela { transform-box: view-box; transform-origin: 835px 540px; transform: scale(.86); }
}

/* ---------- menos movimento ---------- */
.lp3.reduzido *, .lp3.reduzido *::before, .lp3.reduzido *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.lp3.reduzido .lp3-revela { opacity: 1; transform: none; }
.lp3.reduzido .lp3-titulo .l > span { transform: none; }
.lp3.reduzido .lp3-corda { stroke-dashoffset: 0; }



@media (min-width: 700px) and (max-width: 1023px) {
  .lp3-historia-texto { left: 32px; right: 32px; top: 96px; transform: none; width: auto; max-width: 620px; }
  .lp3-hp-pager { display: flex; }
  .lp3-hp { border-top: none; }
  .lp3-hp:not(.ativo) { display: none; }
  .lp3-hp .lp3-hp-n { display: none; }
  .lp3-nevoa .nv-card { display: none; }
  .lp3-historia-fixo { background: #EEF2F4; }
  .lp3-historia .lp3-nevoa { top: auto; height: 700px; }
  .lp3-nevoa .nv-grupo { transform: none; }
  /* os três cartões nascem em centros diferentes; aqui ficam todos no meio do recorte */
  .lp3-nevoa .nv-wpp-janela { transform-box: view-box; transform-origin: 835px 345px; transform: translateX(-15px) scale(1.12); }
  .lp3-nevoa .nv-match { transform: translateX(20px); }
  .lp3-nevoa .nv-parceria { transform: translateX(15px); }
  /* no iPad o porto sobe: sem isso fica uma faixa vazia entre a ação e o horizonte */
  .lp3-hero, .lp3-final { min-height: max(88svh, 800px); }
  .lp3-hero .lp3-cena, .lp3-final .lp3-cena { top: auto; height: 800px; }
  .lp3-carta-cab p { display: none; }
}
@media (min-width: 1024px) {
  .lp3-carta-mapa.horizontal { display: block; }
  .lp3-carta-janela { display: none; }
}
@media (min-width: 1500px) {
}