:root{
  --azul:#2450F0;
  --azul-pin:#1A3BDD;
  --azul-prof:#001BAB;
  --navy:#000648;
  --navy-estrada:#002799;
  --circuito:#2447F0;
  --claro:#5B7BFF;
  --agua:#B9C8FE;
  --agua-borda:#8FA6F5;
  --terra:#FFFFFF;
  --terra-2:#E6EAFF;
  --linha:#DBE0F6;
  --ink:#2A3352;
  --ink-suave:#5A6788;
  --sombra:0 6px 18px rgba(0,6,72,.10), 0 1px 3px rgba(0,6,72,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:80px}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--terra);
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Sora','Inter',sans-serif;color:var(--navy);letter-spacing:-.035em}
/* borda direita mais limpa (texto alinhado a esquerda, sem justificar):
   balance = titulos com linhas de comprimento parecido; pretty = paragrafos sem palavra orfa (ignorado por navegador antigo) */
h1,h2,h3{text-wrap:balance}
.hero .sub,.sec-head p,.feat-txt p,.fim .sub,.passo p,.mar-oficial p,.faq p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* revelacao suave ao rolar */
.rev{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.rev.in{opacity:1;transform:none}

/* ============ BOTOES ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;border-radius:11px;padding:13px 24px;
  cursor:pointer;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s,transform .15s;
}
.btn:active{transform:scale(.98)}
.btn svg{width:17px;height:17px;flex:none}
.btn.pri{background:var(--azul);color:#fff}
.btn.pri:hover{background:var(--azul-pin)}
.btn.sec{background:#EAEDFE;color:var(--azul-prof);border-color:#CBD3F8}
.btn.sec:hover{border-color:var(--azul);color:var(--azul);background:#DCE1FE}
.btn .wa{fill:currentColor}

/* ============ TOPBAR ============ */
.topbar{
  position:fixed;top:14px;left:0;right:0;z-index:50;
  background:none;border-bottom:0;padding:0 16px;
}
.topbar .wrap{
  display:flex;align-items:center;gap:28px;height:56px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);border-radius:16px;
  box-shadow:0 10px 32px rgba(0,6,72,.14);
}
.marca{display:flex;align-items:center;flex:none}
.marca img{height:44px;width:auto}
.topnav{display:flex;gap:24px;margin:0 auto}
.topnav a{font-size:14px;font-weight:500;color:var(--ink-suave);transition:color .2s}
.topnav a:hover{color:var(--navy)}
.topcta{display:flex;gap:10px;align-items:center}
.topcta .btn{padding:10px 18px;font-size:14px;border-radius:10px}

/* ============ HERO ============ */
.hero{
  position:relative;background:var(--terra);
  min-height:92vh;display:flex;align-items:flex-start;
  padding:150px 0 250px;overflow:hidden;
}
.hero-mapa{position:absolute;inset:0;z-index:0}
.hero-mapa svg{width:100%;height:100%;display:block}
.hero-veu{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.93) 35%,rgba(255,255,255,.72) 55%,rgba(255,255,255,.12) 80%,rgba(255,255,255,0) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-conteudo{max-width:640px}
.hero h1{
  font-size:clamp(32px,4.3vw,54px);line-height:1.06;margin-bottom:26px;
}
.hero h1 em{font-style:normal;color:var(--azul)}
.tagline-assin{
  display:flex;align-items:center;gap:13px;white-space:nowrap;
  font-family:'Sora',sans-serif;font-weight:600;
  font-size:clamp(16px,1.9vw,20px);letter-spacing:.16em;text-transform:uppercase;color:var(--azul-prof);
  margin-bottom:26px;padding-right:56px;
}
.tagline-assin .tr{
  position:relative;flex:1;min-width:34px;height:2px;border-radius:2px;margin-right:7px;
  background:linear-gradient(90deg,rgba(36,80,240,0) 0%,var(--azul) 60%);
}
.tagline-assin .tr::after{
  content:'';position:absolute;right:-8px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border:2px solid var(--azul);border-radius:50%;
}
.hero .sub{
  font-size:clamp(16px,1.6vw,18.5px);line-height:1.65;color:var(--ink-suave);
  max-width:540px;margin-bottom:34px;
}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.hero-acts .btn,.fim-acts .btn{padding:10px 18px;font-size:14px;border-radius:10px}
.hero-nota{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--ink-suave)}
.hero-nota svg{width:18px;height:18px;flex:none;fill:var(--azul)}
/* telas baixas (notebooks 1366x768 etc.): compactar o hero p/ caber em 1 tela,
   deixando a fita de ativos visivel no rodape da dobra */
@media (max-height: 820px) and (min-width: 900px){
  .hero{min-height:100vh;padding:104px 0 150px}
  .hero h1{margin-bottom:16px}
  .tagline-assin{margin-bottom:16px}
  .hero .sub{margin-bottom:22px}
  .hero-acts{margin-bottom:20px}
}
/* entrada do texto do hero em cascata suave (estilo clear street) */
@media (prefers-reduced-motion: no-preference){
  .hero-conteudo>*{opacity:0;transform:translateY(26px);animation:heroEntra 1s cubic-bezier(.22,.68,.24,1) forwards}
  .hero-conteudo>*:nth-child(1){animation-delay:.08s}
  .hero-conteudo>*:nth-child(2){animation-delay:.22s}
  .hero-conteudo>*:nth-child(3){animation-delay:.36s}
  .hero-conteudo>*:nth-child(4){animation-delay:.50s}
  .hero-conteudo>*:nth-child(5){animation-delay:.64s}
  .hero-conteudo>*:nth-child(6){animation-delay:.78s}
}
@keyframes heroEntra{to{opacity:1;transform:translateY(0)}}
.cena-chip{
  position:absolute;right:26px;bottom:118px;z-index:2;
  display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--linha);border-radius:999px;padding:14px 24px;
  font-size:16px;font-weight:600;color:var(--navy);box-shadow:var(--sombra);
  max-width:min(48vw,720px);line-height:1.3;
}
.cena-chip .cd{position:relative;width:11px;height:11px;border-radius:50%;background:var(--azul);flex:none;animation:vivo 1.8s ease-in-out infinite}
.cena-chip .cd::after{
  content:'';position:absolute;inset:-3px;border:2px solid var(--azul);border-radius:50%;
  animation:sonar 1.8s ease-out infinite;
}
@keyframes sonar{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}

/* ============ FITA DE ATIVOS (carrossel continuo, estilo clear street) ============ */
/* cartao fantasma: vidro branco translucido flutuando sobre o pe do mapa do hero */
.fita{
  position:absolute;left:16px;right:16px;bottom:3px;z-index:3;
  /* veu: 90% de branco no centro (alinhado a linha dos icones), reduzindo ate 0% nas extremidades */
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 55%,rgba(255,255,255,0) 100%);
  padding:36px 0 24px;overflow:hidden;
  /* fantasma: sem borda, sem sombra, sem blur (o blur criava fronteira reta) -
     a propria area se dissolve nas 4 direcoes (mascara dupla por intersecao) */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 300px,#000 calc(100% - 300px),transparent 100%),linear-gradient(180deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 300px,#000 calc(100% - 300px),transparent 100%),linear-gradient(180deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
  mask-composite:intersect;
}
.fita-janela{overflow:hidden}
.fita-trilho{display:flex;width:max-content;animation:fitaRola 44s linear infinite;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.fita:hover .fita-trilho{animation-play-state:paused}
.fita-grupo{display:flex;align-items:center;gap:64px;padding-right:64px}
.fita-item{
  display:flex;align-items:center;gap:13px;white-space:nowrap;
  font-family:'Sora',sans-serif;font-weight:500;font-size:15px;color:var(--ink-suave);
}
.fita-item svg{
  width:58px;height:58px;flex:none;fill:none;
  stroke:var(--azul);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
@keyframes fitaRola{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion: reduce){
  .fita-trilho{animation:none;width:auto;flex-wrap:wrap;gap:18px;justify-content:center}
  .fita-grupo[aria-hidden]{display:none}
}

/* ---- mapa claro (tema do modelo 7, mais azul e vivo) ---- */
#world{transition:transform 2.6s cubic-bezier(.25,.7,.2,1);will-change:transform}
.land{fill:#F0F2FF}
.grade line{stroke:#DCE1FB;stroke-width:1}
.mata{fill:var(--terra-2)}
.rio-borda{fill:none;stroke:var(--agua-borda);stroke-linecap:round;stroke-linejoin:round}
.rio{fill:none;stroke:var(--agua);stroke-linecap:round;stroke-linejoin:round}
.ilha{fill:var(--terra)}
.oceano{fill:var(--agua);stroke:var(--agua-borda);stroke-width:3}
.rd-casing{fill:none;stroke:#7480B8;stroke-linecap:round;stroke-linejoin:round}
.rd-core{fill:none;stroke:#fff;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:11 10;opacity:.9}
.rd-tag rect{fill:#fff;stroke:#95A0CE;stroke-width:1.4}
.rd-tag text{font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;fill:var(--navy-estrada);text-anchor:middle;letter-spacing:.02em}
.rio-nome text{font-family:'Inter',sans-serif;font-style:italic;font-weight:600;font-size:16px;fill:#7C8FE6;letter-spacing:.09em}
.divisa{fill:none;stroke:#CAD2F1;stroke-width:1.5;stroke-dasharray:7 8}
.estado text{font-family:'Sora',sans-serif;font-weight:700;font-size:30px;fill:#B3BEEC;opacity:.5;letter-spacing:.38em}
.rota-estrada{
  fill:none;stroke:var(--azul);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;pathLength:1;
  animation:tracar 2.4s cubic-bezier(.3,.6,.3,1) .6s forwards;
}
@keyframes tracar{to{stroke-dashoffset:0}}
.rota-fluvial{
  fill:none;stroke:var(--azul);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:12 9;animation:marchar 1.6s linear infinite;
}
@keyframes marchar{to{stroke-dashoffset:-42}}
.city .c-ring{fill:none;stroke:var(--azul-prof);stroke-width:1.5;opacity:.35}
.city .c-dot{fill:#fff;stroke:var(--azul-prof);stroke-width:2.5}
.city text{font-family:'Sora',sans-serif;font-weight:600;font-size:20px;fill:var(--navy)}
.city.menor .c-dot{stroke-width:2}
.city.menor text{font-size:15px;opacity:.72;font-weight:500}
.pin-body{fill:var(--azul)}
.pin-face{fill:#fff}
.pulse{fill:var(--claro);opacity:.5;transform-box:fill-box;transform-origin:center;animation:pulsar 2.4s ease-out infinite}
/* marcadores da camera viva: focados acendem, demais esmaecem */
.mk{transition:opacity .8s ease}
body.tour-focus .mk{opacity:.35}
body.tour-focus .mk.focus{opacity:1}
.mk .pulse{animation:none;opacity:0}
.mk.focus .pulse{animation:pulsar 2.4s ease-out infinite}
@keyframes pulsar{
  0%{transform:scale(.4);opacity:.5}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
.s-dot{fill:var(--circuito);stroke:#fff;stroke-width:2}
.tag rect{fill:rgba(255,255,255,.75);stroke:var(--linha);stroke-width:1}
.tag text{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;fill:var(--navy);text-anchor:middle}
.tag .tv{fill:var(--azul)}

/* ============ FAIXA DE CREDIBILIDADE ============ */
.cred{
  background:linear-gradient(120deg,var(--azul) 0%,var(--azul-prof) 100%);
  margin:0 18px;border-radius:28px;box-shadow:var(--sombra);
}
.cred .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:30px 24px;
}
.cred-item{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--azul);
  border:1px solid rgba(255,255,255,.16);
  border-left:3px solid rgba(255,255,255,.92);
  border-radius:14px;padding:18px 22px 18px 18px;
  box-shadow:var(--sombra);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.cred-item:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,6,72,.35);background:#3D64F6}
.cred-item svg{width:34px;height:34px;flex:none;margin-top:-5px;stroke:#fff}
.cred-item strong{
  display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:17.5px;color:#fff;
  letter-spacing:-.01em;margin-bottom:3px;white-space:nowrap;
}
@media (max-width:1180px){.cred-item strong{font-size:15px}}
.cred-item small{font-size:13px;line-height:1.5;color:#D9E2F5;display:block}
/* evita palavra orfa na ultima linha dos textos de card (ignorado por navegador antigo) */
.cred-item small,.seg p,.passo p,.feat-txt p{text-wrap:pretty}

/* ============ SECOES CLARAS ============ */
.sec{padding:88px 0}
.sec-head{max-width:660px;margin-bottom:44px}
.sec-head .kicker{
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-prof);margin-bottom:12px;display:block;
}
.sec-head h2{font-size:clamp(25px,3vw,36px);line-height:1.12;margin-bottom:14px}
.sec-head p{font-size:16.5px;line-height:1.65;color:var(--ink-suave)}

/* segmentos */
.seg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.seg{
  background:#fff;border:1px solid var(--linha);border-top:3px solid var(--azul);
  border-radius:16px;padding:26px 24px 22px;
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.seg:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,6,72,.10);border-color:var(--azul)}
.seg .ic{
  width:54px;height:54px;border-radius:12px;background:var(--terra-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.seg .ic svg{
  width:38px;height:38px;fill:none;
  stroke:var(--azul);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
}
.seg h3{font-size:18px;margin-bottom:8px}
.seg p{font-size:14px;line-height:1.6;color:var(--ink-suave);flex:1}

/* plataforma: linhas de recurso */
.feat{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding:34px 0;
}
.feat + .feat{border-top:1px solid var(--linha)}
.feat.inv .feat-txt{order:2}
.feat.inv .feat-mock{order:1}
.feat-txt .kicker{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul-prof);margin-bottom:10px;display:block;
}
.feat-txt h3{font-size:clamp(20.5px,2.25vw,26px);line-height:1.15;margin-bottom:12px}
.feat-txt p{font-size:15.5px;line-height:1.65;color:var(--ink-suave);margin-bottom:14px}
.feats{list-style:none;display:flex;flex-direction:column;gap:9px;margin:2px 0 6px}
.feats li{display:flex;gap:10px;font-size:14.5px;line-height:1.5;align-items:flex-start}
.feats svg{width:17px;height:17px;flex:none;margin-top:2.5px}

/* mockups de UI (reuso do padrao do modelo 7) */
.mock{
  border:1px solid var(--linha);border-top:3px solid var(--azul);
  border-radius:14px;background:#fff;
  overflow:hidden;box-shadow:var(--sombra);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.mock:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,6,72,.18);border-color:var(--azul)}
.mock-h{
  display:flex;align-items:center;gap:8px;padding:10px 14px;background:#F2F3FE;
  border-bottom:1px solid var(--linha);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#7583A9;
}
.mock-h .live{width:7px;height:7px;border-radius:50%;background:var(--azul);animation:vivo 1.8s ease-in-out infinite}
@keyframes vivo{0%,100%{opacity:1}50%{opacity:.35}}
.mrow{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 14px;border-bottom:1px solid #EDEFFA;font-size:14px;
}
.mrow:last-child{border-bottom:0}
.mrow .k{color:#6B7699;font-weight:500}
.mrow .v{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.mrow .v.az{color:var(--azul)}
.mrow .v.ok{color:var(--azul-prof)}
.spark{display:block;width:100%;height:52px;background:#fff}
.spark polyline{fill:none;stroke:var(--azul);stroke-width:2;stroke-linejoin:round}
.spark .area{fill:#E5E9FE;stroke:none}
.badge{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  border-radius:999px;padding:4px 11px;
}
.badge.novo{background:#EAEDFE;color:var(--azul-prof)}
.badge.trat{background:var(--terra-2);color:var(--ink-suave)}

/* ============ FAIXA AZUL-CLARA: EMBARCACOES ============ */
.rio-sec{
  background:linear-gradient(135deg,var(--azul-pin) 0%,var(--azul-prof) 62%,var(--navy-estrada) 100%);
  padding:88px 0;position:relative;overflow:hidden;
  margin:0 18px;border-radius:28px;box-shadow:var(--sombra);
}
.rio-sec .sec-head .kicker{color:#fff;opacity:.85}
.rio-sec .sec-head h2{color:#fff}
.rio-sec .sec-head p{color:rgba(255,255,255,.85)}
.rio-sec .feat-txt h3{color:#fff}
.rio-sec .feat-txt p{color:rgba(255,255,255,.85)}
.rio-sec .mock{box-shadow:0 18px 48px rgba(0,6,72,.35);border-top:1px solid var(--linha)}
.selo{
  display:flex;align-items:center;gap:13px;border:1px solid #CBD3F8;
  background:#fff;border-radius:12px;padding:13px 16px;margin-top:18px;
  box-shadow:0 10px 28px rgba(0,6,72,.25);
}
.selo .anc{
  width:42px;height:42px;flex:none;border-radius:50%;background:var(--azul);
  display:flex;align-items:center;justify-content:center;
}
.selo .anc svg{width:23px;height:23px;fill:#fff}
.selo strong{display:block;font-size:14px;color:var(--navy)}
.selo small{font-size:12.5px;color:#6B7699;font-weight:500}

/* ============ COMO FUNCIONA ============ */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.passo{
  background:#fff;border:1px solid var(--linha);border-top:3px solid var(--azul);
  border-radius:16px;padding:28px 26px;position:relative;
  box-shadow:0 10px 26px rgba(0,6,72,.08);
}
.passo .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;background:var(--azul);color:#fff;
  font-family:'Sora',sans-serif;font-weight:700;font-size:18px;margin-bottom:16px;
}
.passo h3{font-size:18px;margin-bottom:8px}
.passo p{font-size:14.5px;line-height:1.6;color:var(--ink-suave)}

/* como funciona - scroll livre + numero sticky com giro de hodometro (receita clear street medida ao vivo) */
.cf-wrap{display:grid;grid-template-columns:.55fr 1.9fr;gap:44px;align-items:start}
.cf-numcol{align-self:stretch}
.cf-num{
  display:flex;justify-content:center;
  font-family:'Inter Tight','Sora',sans-serif;font-weight:300;line-height:1;
  font-size:clamp(84px,8vw,140px);color:var(--azul-pin);letter-spacing:-.03em;
  position:sticky;top:calc(50vh - .5em);
}
/* tela larga: numero sai TOTALMENTE do enquadramento e fica colado ao titulo (clear street);
   titulo e descricao passam a ocupar o enquadramento inteiro */
@media (min-width:1500px){
  .cf-wrap{display:block;position:relative}
  .cf-numcol{position:absolute;top:0;bottom:0;right:calc(100% + 64px)}
  .cf-num{font-size:min(150px,calc((100vw - 1304px)/2.4))}
}
/* intro da secao mais estreita: nao pode invadir a direcao da coluna de texto dos itens */
#como-funciona .sec-head{max-width:560px}
.cf-num .rolo{display:block;height:1em;overflow:hidden}
.cf-num .rolo>div{display:flex;flex-direction:column;will-change:transform}
.cf-num .rolo span{display:block;height:1em}
.cf-item{
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;
  padding:56px 0;border-top:1px solid rgba(0,6,72,.14);
}
.cf-item:last-child{border-bottom:1px solid rgba(0,6,72,.14)}
.cf-item h3{font-size:clamp(30px,3.4vw,50px);line-height:1.08;font-weight:400;transition:color .4s ease}
.cf-item p{font-size:15px;line-height:1.65;color:var(--ink-suave);max-width:560px;transition:opacity .4s ease}
.etapas-js .cf-item h3{color:#A7B1D2}
.etapas-js .cf-item.on h3{color:var(--navy)}
.etapas-js .cf-item p{opacity:0}
.etapas-js .cf-item.on p{opacity:1}
@media (max-width:1020px){
  .cf-wrap{grid-template-columns:auto 1fr;gap:26px}
  .cf-num{font-size:clamp(64px,16vw,110px)}
  .cf-item{grid-template-columns:1fr;gap:10px;padding:34px 0}
}

/* ============ CTA FINAL ============ */
/* cartoes flutuantes no pe da pagina (estilo clear street): CTA e rodape soltos sobre fundo branco */
.fim{background:#fff;padding:0 18px 76px}
.fim-card{
  background:linear-gradient(135deg,var(--azul) 0%,var(--azul-prof) 100%);
  border-radius:28px;position:relative;overflow:hidden;z-index:2;
  padding:86px 0 12px;
  /* sombra direcional p/ baixo: projeta no rodape e cria a sensacao de nivel acima */
  box-shadow:var(--sombra),0 26px 46px -18px rgba(0,3,30,.6);
}
.fim-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  padding-bottom:76px;
}
.fim-tag{
  display:block;font-family:'Sora',sans-serif;font-weight:500;
  font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-bottom:14px;
}
.fim h2{font-size:clamp(26px,3.2vw,39px);line-height:1.1;margin-bottom:16px;color:#fff}
.fim h2 em{font-style:normal;color:#fff}
.fim .sub{font-size:17px;line-height:1.65;color:rgba(255,255,255,.85);margin-bottom:28px;max-width:520px}
.fim-acts{display:flex;flex-wrap:wrap;gap:12px}
.fim .btn.pri{background:#fff;color:var(--azul-prof)}
.fim .btn.pri:hover{background:var(--agua)}
.fim .btn.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.fim .btn.sec:hover{border-color:#fff;color:#fff}
.contatos{display:flex;flex-direction:column;gap:10px}
.contatos a{
  display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:#fff;
  border:1px solid rgba(255,255,255,.16);border-left:3px solid #fff;border-radius:12px;padding:14px 16px;
  background:var(--azul);box-shadow:var(--sombra);transition:border-color .2s,background .2s;
}
.contatos a:hover{border-color:#fff;background:#3D64F6}
.contatos a svg{width:19px;height:19px;flex:none;fill:#fff}
.contatos a svg + svg{margin-left:-4px;margin-right:-4px}
.rodape{
  width:calc(100% - 276px);max-width:100%;
  margin:-10px auto 0;padding:34px 0 25px;border-radius:0 0 16px 16px;
  background:var(--navy);box-shadow:var(--sombra);
  position:relative;z-index:1;
  transition:transform 1.4s cubic-bezier(.25,.6,.25,1);
}
/* revelacao: o rodape nasce escondido atras do cartao do CTA e desliza p/ fora no fim da rolagem */
.rodape.prep{transform:translateY(-78%)}
.rodape.prep.on{transform:translateY(0)}
.rodape .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between}
/* Logo OFICIAL (degradê claro, PNG transparente derivado do original 25/07) */
.rodape .marca img{height:60px;width:auto}
.rodape p{font-size:12.5px;color:rgba(255,255,255,.75);line-height:1.6;flex:1;text-align:right}

/* ============ WHATSAPP FLUTUANTE ============ */
.zap{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:56px;height:56px;border-radius:50%;background:var(--azul);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(26,59,221,.45);
  transition:background .2s,transform .18s;
}
.zap:hover{background:var(--azul-pin);transform:scale(1.06)}
.zap svg{width:28px;height:28px;fill:#fff}
.zap::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--claro);opacity:0;animation:zapulso 2.6s ease-out infinite;
}
@keyframes zapulso{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

/* ============ MODAL DE ACESSO ============ */
.acesso-veu{
  position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(0,6,72,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .22s ease;padding:16px;
}
.acesso-veu.aberto{opacity:1;pointer-events:auto}
.acesso-card{
  width:100%;max-width:400px;background:#fff;border-radius:18px;box-shadow:var(--sombra);
  padding:28px 26px 26px;position:relative;
  transform:translateY(14px);transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.acesso-veu.aberto .acesso-card{transform:none}
.acesso-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;background:none;
  cursor:pointer;color:var(--ink-suave);display:flex;align-items:center;justify-content:center;border-radius:8px;
  transition:background .2s,color .2s;
}
.acesso-x:hover{background:#EAEDFE;color:var(--navy)}
.acesso-x svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.acesso-card h3{font-size:20px;margin-bottom:6px}
.acesso-card .acesso-sub{font-size:14px;color:var(--ink-suave);margin-bottom:18px}
.sis-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.sis-opts button{
  padding:11px 6px;font-size:13.5px;font-weight:600;font-family:inherit;color:var(--ink-suave);
  background:#F4F6FE;border:1px solid var(--linha);border-radius:10px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.sis-opts button:hover{border-color:var(--azul);color:var(--azul)}
.sis-opts button.on{background:#EAEDFE;border-color:var(--azul);color:var(--azul-prof)}
.acesso-campos label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:5px}
.acesso-campos input{
  width:100%;padding:11px 13px;font:inherit;font-size:14.5px;color:var(--navy);
  border:1px solid var(--linha);border-radius:10px;background:#fff;margin-bottom:14px;
  transition:border-color .2s;
}
.acesso-campos input:focus{outline:none;border-color:var(--azul)}
.acesso-campos input:disabled{background:#F4F6FE;cursor:not-allowed}
.acesso-campos .btn{width:100%;padding:12px}
.acesso-campos .btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.acesso-erro{font-size:13.5px;font-weight:600;color:#B42318;margin:-4px 0 12px}

/* ============ RESPONSIVO ============ */
@media (max-width:1020px){
  .cred .wrap{grid-template-columns:repeat(2,1fr);gap:24px}
  .seg-grid{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1fr;gap:26px}
  .feat.inv .feat-txt{order:1}
  .feat.inv .feat-mock{order:2}
  .fim-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:820px){
  .topnav{display:none}
  .topcta{margin-left:auto}
}
@media (max-width:680px){
  .topbar{top:8px;padding:0 10px}
  .topbar .wrap{height:50px;gap:12px;border-radius:13px}
  .marca img{height:35px}
  .topcta .btn.pri{display:none}
  .topcta .btn{padding:9px 14px}
  .hero{min-height:0;padding:112px 0 64px}
  .hero-veu{background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.86) 55%,rgba(255,255,255,.95) 100%)}
  .tagline-assin{padding-right:24px}
  .cena-chip{display:none}
  .fita{display:none}
  .hero-acts .btn{width:100%}
  .sec{padding:64px 0}
  .rio-sec{padding:64px 0}
  .seg-grid{grid-template-columns:1fr}
  .passos{grid-template-columns:1fr}
  .cred .wrap{grid-template-columns:1fr;gap:18px;padding:28px 24px}
  .fim{padding-top:64px}
  .fim-grid{padding-bottom:52px}
  /* rodape: no mobile o desconto fixo de 276px espremia o cartao numa tira - largura quase total + conteudo empilhado */
  .rodape{width:calc(100% - 26px);padding:28px 0 20px}
  .rodape .wrap{flex-direction:column;text-align:center;gap:10px;justify-content:center}
  .rodape p{text-align:center;flex:none}
  .rodape .marca img{height:44px}
  .zap{right:14px;bottom:14px;width:52px;height:52px}
}

/* ============ MOVIMENTO REDUZIDO ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  .rota-estrada{animation:none;stroke-dashoffset:0}
  .rota-fluvial{animation:none}
  .pulse{animation:none;opacity:0}
  .mk.focus .pulse{animation:none}
  #world{transition:none}
  .cena-chip .cd{animation:none}
  .cena-chip .cd::after{animation:none;opacity:0}
  .zap::after{animation:none}
  .mock-h .live{animation:none}
}

/* ============ MARINHA DO BRASIL (secao propria + selo do hero) ============ */
/* selo compacto: mesma peca do selo de Embarcacoes, em linha, p/ o hero e cabecalhos */
.selo.compacto{display:inline-flex;margin:0 0 24px;padding:10px 16px 10px 12px;box-shadow:var(--sombra);transition:border-color .2s,transform .18s}
.selo.compacto:hover{border-color:var(--azul);transform:translateY(-2px)}
.selo.compacto .anc{width:36px;height:36px}
.selo.compacto .anc svg{width:20px;height:20px}
.selo.compacto strong{font-size:13.5px;line-height:1.25}
.selo.compacto small{font-size:12px}
/* chamada p/ clique no selo do hero */
.hero .selo.compacto{display:flex;width:100%;max-width:640px}
.selo .mais{display:inline-flex;align-items:center;gap:2px;margin-left:auto;padding-left:14px;flex:none;font-size:13px;font-weight:700;color:var(--azul);white-space:nowrap}
.selo .mais svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.selo:hover .mais{text-decoration:underline;text-underline-offset:3px}
.selo:hover .mais svg{transform:translateX(3px)}
a.selo{transition:border-color .2s,transform .18s}
a.selo:hover{border-color:var(--azul);transform:translateY(-2px)}
.rodape p a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.4)}
.rodape p a:hover{color:#fff;text-decoration-color:#fff}
@media (max-width:680px){.selo .mais span{display:none}}
.mar-oficial{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
  background:#fff;border:1px solid var(--linha);border-left:4px solid var(--azul);
  border-radius:16px;padding:26px 28px;box-shadow:0 10px 26px rgba(0,6,72,.08);margin-bottom:28px;
}
.mar-oficial .anc{width:64px;height:64px;flex:none;border-radius:50%;background:var(--azul);display:flex;align-items:center;justify-content:center}
.mar-oficial .anc svg{width:34px;height:34px;fill:#fff}
.mar-oficial .rot{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--azul-prof);margin-bottom:6px;display:block}
.mar-oficial h3{font-size:clamp(19px,2.1vw,24px);line-height:1.2;margin-bottom:6px}
.mar-oficial p{font-size:15px;line-height:1.6;color:var(--ink-suave);text-wrap:pretty}
.seg-grid.tres{grid-template-columns:repeat(3,1fr)}
.mar-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.mar-acts .btn{padding:10px 18px;font-size:14px;border-radius:10px}
/* pagina /marinha: cabecalho azul (mesma faixa de Embarcacoes) abaixo da topbar */
.rio-sec.pg-hero{margin-top:96px}
.rio-sec .sec-head h1{color:#fff;font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin-bottom:14px;letter-spacing:-.035em}
.rio-sec .selo.compacto{margin:0}
/* cabecalho da /marinha em 2 colunas: texto + cartao de transmissao e tipos de embarcacao (sem area azul vazia) */
.pg-topo{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:end;margin-bottom:34px}
.pg-hero .sec-head{margin-bottom:0;max-width:none}
.pg-hero .mar-acts{margin-top:24px}
.pg-rio .rot{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.85;margin-bottom:6px}
/* rio visto de cima (estilo mapa) com as embarcacoes atendidas navegando pela curva; bordas desvanecem (mascara em 4 direcoes, como a fita do inicio) */
.pg-rio{align-self:stretch;display:flex;flex-direction:column;min-height:320px;margin-left:-150px;position:relative;z-index:0}
.pg-rio .rot{text-align:right}
.pg-topo .sec-head{position:relative;z-index:1}
.rio-cena{display:block;width:100%;flex:1;min-height:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 180px,#000 calc(100% - 60px),transparent 100%),linear-gradient(180deg,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 180px,#000 calc(100% - 60px),transparent 100%),linear-gradient(180deg,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
  mask-composite:intersect;
}
.rio-cena .agua{fill:rgba(255,255,255,.15);stroke:rgba(255,255,255,.4);stroke-width:1.6}
.rio-cena .ondas path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:10 8;animation:marchar 2.4s linear infinite}
/* rotas em 6 faixas horizontais (73 px; selo 56 + rotulo) que nao se cruzam; todas descem 8 px p/ a direita = distancia constante; espelhado = navega p/ a esquerda */
.rio-cena .navio{offset-rotate:0deg;animation:navegaRota linear infinite}
.rio-cena .c1{offset-path:path("M-130 2 L760 10");animation-duration:38s}
.rio-cena .b1{offset-path:path("M760 83 L-100 75");animation-duration:26s}
.rio-cena .v1{offset-path:path("M-100 148 L760 156");animation-duration:30s}
.rio-cena .l1{offset-path:path("M760 229 L-100 221");animation-duration:13s}
.rio-cena .c2{offset-path:path("M-130 294 L760 302");animation-duration:44s}
.rio-cena .l2{offset-path:path("M-100 367 L760 375");animation-duration:15s}
.rio-cena .navio svg{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.rio-cena .navio svg [style]{fill:rgba(255,255,255,.35) !important}
.rio-cena .balanca{animation:balanca 3.2s ease-in-out infinite}
.rio-cena text{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:600;fill:#fff}
@keyframes navegaRota{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes balanca{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.rio-sec .demo{box-shadow:0 18px 48px rgba(0,6,72,.35);border-top:1px solid var(--linha)}
.topnav a.atual{color:var(--navy);font-weight:600}
.feats .ok{fill:none;stroke:var(--azul);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq details{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:0 20px;transition:border-color .2s}
.faq details[open]{border-color:var(--azul)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;line-height:1;color:var(--azul);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{font-size:14.5px;line-height:1.65;color:var(--ink-suave);padding:0 0 18px;text-wrap:pretty}
@media (max-width:1020px){.seg-grid.tres{grid-template-columns:repeat(2,1fr)}.faq{grid-template-columns:1fr}}
@media (max-width:680px){
  .seg-grid.tres{grid-template-columns:1fr}
  .mar-oficial{grid-template-columns:1fr;padding:22px}
  .rio-sec.pg-hero{margin-top:70px}
  .mar-acts .btn{width:100%}
}

/* ============ /marinha: ANIMACAO "NO DIA A DIA" (SVG + CSS, ciclo de 12 s) ============ */
.demo{background:#fff;border:1px solid var(--linha);border-top:3px solid var(--azul);border-radius:16px;box-shadow:0 10px 26px rgba(0,6,72,.08);overflow:hidden}
.demo-cena{display:block;width:100%;height:auto;background:#F7F8FF}
.demo-cena text{font-family:'Inter',sans-serif}
.demo-rio{fill:#DCE3FE}
.demo-agua{fill:none;stroke:var(--agua-borda);stroke-width:2;stroke-linecap:round;stroke-dasharray:14 12;animation:marchar 1.6s linear infinite;opacity:.8}
.demo-enlace{fill:none;stroke:#A9B8F3;stroke-width:1.6;stroke-dasharray:5 6}
/* AT -> Marinha e AT -> Plataforma: linha continua, fina e translucida (rede, nao corda) */
.demo-enlace.fio{stroke:rgba(36,80,240,.28);stroke-width:1.4;stroke-dasharray:none;stroke-linecap:round}
/* rastro: a mascara revela o pontilhado no mesmo ritmo da bolinha (velocidade constante em todos os trechos) */
.rastro{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:12s linear infinite}
.rastro.r1{animation-name:demoRastro1}.rastro.r2{animation-name:demoRastro2}.rastro.r3a{animation-name:demoRastro3a}.rastro.r3b{animation-name:demoRastro3b}
@keyframes demoRastro1{0%,18.0%{stroke-dashoffset:1}22.17%,99.8%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes demoRastro2{0%,36.0%{stroke-dashoffset:1}39.33%,99.8%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes demoRastro3a{0%,52.0%{stroke-dashoffset:1}54.5%,99.8%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes demoRastro3b{0%,52.0%{stroke-dashoffset:1}54.5%,99.8%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
/* quadro 1 (0-24% do ciclo): a balsa EMITE 3 ondas p/ o ceu (0-9%), depois RECEBE 3 de volta (8,5-17,5%); etiqueta 9,9-17,4% (some pouco antes do pacote sair aos 18%) */
.gps-onda{fill:none;stroke:var(--azul);stroke-width:3.4;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transform-box:view-box;animation:12s linear infinite}
/* sobe: arco centrado na antena, cresce ate o teto (raio 238 = escala 7.9) e some; desce: arco centrado no teto, aponta p/ baixo, cresce ate a antena ganhando cor */
.gps-onda.sobe{transform-origin:122px 238px;animation-name:demoOndaSobe}
.gps-onda.desce{transform-origin:122px 0px;animation-name:demoOndaDesce}
.gps-onda.o2{animation-delay:.12s}
.gps-onda.o3{animation-delay:.24s}
@keyframes demoOndaSobe{0%{transform:scale(.4);opacity:0}.4%{transform:scale(.5);opacity:1}6.8%{transform:scale(6.7);opacity:.06}7.2%,100%{transform:scale(7);opacity:0}}
@keyframes demoOndaDesce{0%,8.5%{transform:scale(.4);opacity:0}8.9%{transform:scale(.6);opacity:1}15.3%{transform:scale(7.7);opacity:.08}15.7%,100%{transform:scale(7.9);opacity:0}}
.gps-tag rect{fill:#fff;stroke:#B9C8FE;stroke-width:1.6;filter:drop-shadow(0 0 5px rgba(91,123,255,.9))}
.gps-tag .pino{fill:var(--azul)}
.gps-tag .pino-olho{fill:#fff}
.gps-tag text{font-size:11px;font-weight:700;fill:var(--navy)}
.gps-tag{opacity:0;animation:demoGpsTag 12s linear infinite}
@keyframes demoGpsTag{0%,9.2%{opacity:0}9.9%,17.4%{opacity:1}17.9%,100%{opacity:0}}
.demo-balsa{animation:demoBalanco 4s ease-in-out infinite}
.demo-balsa .casco{fill:#A9BAF6;stroke:var(--navy-estrada);stroke-width:1.8;stroke-linejoin:round}
.demo-balsa .caixa{fill:#E6EAFF;stroke:var(--navy-estrada);stroke-width:1.6}
.demo-balsa .cabine{fill:#fff;stroke:var(--navy-estrada);stroke-width:1.8}
.demo-balsa .janela{fill:#B9C8FE}
.demo-balsa .haste{stroke:var(--navy-estrada);stroke-width:1.8;stroke-linecap:round}
.demo-balsa .rastreador{fill:var(--azul);stroke:#fff;stroke-width:2;animation:demoNucleo 12s linear infinite}
@keyframes demoNucleo{0.00%,1.20%{fill:#E53935}1.30%,2.40%{fill:var(--azul)}2.50%,3.70%{fill:#E53935}3.80%,4.90%{fill:var(--azul)}5.00%,6.20%{fill:#E53935}6.30%,7.40%{fill:var(--azul)}7.50%,8.70%{fill:#E53935}8.80%,9.90%{fill:var(--azul)}10.00%,11.20%{fill:#E53935}11.30%,12.40%{fill:var(--azul)}12.50%,13.70%{fill:#E53935}13.80%,14.90%{fill:var(--azul)}15.00%,16.20%{fill:#E53935}16.30%,17.40%{fill:var(--azul)}17.50%,18.70%{fill:#E53935}18.80%,19.90%{fill:var(--azul)}20.00%,21.20%{fill:#E53935}21.30%,22.40%{fill:var(--azul)}22.60%,100%{fill:var(--azul)}}
.demo-sat{animation:demoFlutua 5s ease-in-out infinite}
.demo-sat .painel{fill:#B9C8FE;stroke:var(--navy-estrada);stroke-width:1.6}
.demo-sat .corpo{fill:#fff;stroke:var(--navy-estrada);stroke-width:1.8}
.demo-sat .antena{fill:none;stroke:var(--navy-estrada);stroke-width:1.6;stroke-linecap:round}
.demo-sat .braco{stroke:var(--navy-estrada);stroke-width:2.2;stroke-linecap:round}
.demo-sat .grade{fill:none;stroke:var(--navy-estrada);stroke-width:.9;opacity:.55}
.demo-sat .detalhe{fill:none;stroke:#B9C8FE;stroke-width:2;stroke-linecap:round}
.demo-sat .luz{fill:var(--azul);animation:demoLuzSat 12s linear infinite}
@keyframes demoLuzSat{0%,17.9%{fill:var(--azul)}18.00%,19.20%{fill:#E53935}19.30%,20.40%{fill:var(--azul)}20.50%,21.70%{fill:#E53935}21.80%,22.17%{fill:var(--azul)}22.27%,35.9%{fill:var(--azul)}36.00%,37.20%{fill:#E53935}37.30%,38.40%{fill:var(--azul)}38.50%,39.33%{fill:#E53935}39.43%,100%{fill:var(--azul)}}
/* ponta de baixo fica azul do momento em que o pacote da balsa chega ate o reenvio terminar */
.demo-sat .ponta.base{animation:demoPontaBase 12s linear infinite}
@keyframes demoPontaBase{0%,22.07%{fill:#fff}22.27%,39.33%{fill:var(--azul)}39.63%,100%{fill:#fff}}
.demo-sat .ponta{fill:#fff;stroke:var(--navy-estrada);stroke-width:1.6}
.demo-sat .corpo{animation:demoSatAceso 12s linear infinite}
.demo-cena .rotulo{font-size:12.5px;font-weight:600;fill:var(--ink-suave)}
.demo-cena .cartao{fill:#fff;stroke:var(--linha);stroke-width:1.5}
.demo-cena .ico{fill:none;stroke:var(--azul);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-cena .anc{fill:var(--azul)}
.demo-cena .anc-ico path{fill:#fff}
.demo-cena .titulo{font-size:13.5px;font-weight:700;fill:var(--navy)}
.demo-cena .sub{font-size:12px;font-weight:500;fill:var(--ink-suave)}
.demo-cena .st{animation:demoStatus 12s linear infinite}
/* cartoes acendem quando o sinal chega (fundo azul, texto branco, borda clara reluzente) e ficam acesos enquanto a legenda esta ativa */
.demo-at .cartao{animation:demoAtCartao 12s linear infinite}
.demo-at .titulo{animation:demoAtTexto 12s linear infinite}
.demo-at .sub{animation:demoAtSub 12s linear infinite}
.demo-at .ico{animation:demoAtIco 12s linear infinite}
.demo-dest .cartao{animation:demoDestCartao 12s linear infinite}
.demo-dest .titulo{animation:demoDestTexto 12s linear infinite}
.demo-dest .sub{animation:demoDestSub 12s linear infinite}
.demo-dest .ok-txt{animation:demoDestOkTxt 12s linear infinite}
.demo-dest .anc{animation:demoDestAnc 12s linear infinite}
.demo-dest .anc-ico path{animation:demoDestAncIco 12s linear infinite}
.demo-dest .st .ok{animation:demoDestOk 12s linear infinite}
.demo-cena .st .ok{fill:none;stroke:var(--azul-prof);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.demo-cena .ok-txt{font-size:12px;font-weight:700;fill:var(--azul-prof)}
.sinal{fill:var(--azul);stroke:#fff;stroke-width:2;offset-rotate:0deg;opacity:0;animation:12s linear infinite}
/* balsa->satelite e satelite->Amazon Trace: jogo de 3 raios (mesmo desenho da captacao) apontando p/ onde vai */
.sinal.raios{offset-rotate:auto;fill:none}
.sinal.raios path{fill:none;stroke:var(--azul);stroke-width:2.4;stroke-linecap:round}
.sinal.s1{offset-path:path("M122 238 L375 99");animation-name:demoSinal1}
.sinal.s2{offset-path:path("M375 99 L585 130");animation-name:demoSinal2}
.sinal.s3a{offset-path:path("M670 160 L708 80");animation-name:demoSinal3a}
.sinal.s3b{offset-path:path("M670 160 L708 240");animation-name:demoSinal3b}
@keyframes demoSinal1{0%,17.90%{offset-distance:0%;opacity:0}18.0%{offset-distance:0%;opacity:1}22.17%{offset-distance:100%;opacity:1}22.27%,100%{offset-distance:100%;opacity:0}}
@keyframes demoSinal2{0%,35.90%{offset-distance:0%;opacity:0}36.0%{offset-distance:0%;opacity:1}39.33%{offset-distance:100%;opacity:1}39.43%,100%{offset-distance:100%;opacity:0}}
@keyframes demoSinal3a{0%,51.90%{offset-distance:0%;opacity:0}52.0%{offset-distance:0%;opacity:1}54.5%{offset-distance:100%;opacity:1}54.60%,100%{offset-distance:100%;opacity:0}}
@keyframes demoSinal3b{0%,51.90%{offset-distance:0%;opacity:0}52.0%{offset-distance:0%;opacity:1}54.5%{offset-distance:100%;opacity:1}54.60%,100%{offset-distance:100%;opacity:0}}
@keyframes demoStatus{0%,55.3%{opacity:0}56.8%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes demoSatAceso{0%,22.0%,37%,100%{fill:#fff;stroke:var(--navy-estrada);filter:none}23.5%,36%{fill:#EAEDFE;stroke:var(--azul);filter:drop-shadow(0 0 5px rgba(91,123,255,.9))}}
@keyframes demoAtCartao{0%,39.1%,53%,100%{fill:#fff;stroke:var(--linha);stroke-width:1.5;filter:none}40.6%,52%{fill:var(--azul);stroke:#B9C8FE;stroke-width:2;filter:drop-shadow(0 0 6px rgba(91,123,255,.9))}}
@keyframes demoAtTexto{0%,39.1%,53%,100%{fill:var(--navy)}40.6%,52%{fill:#fff}}
@keyframes demoAtSub{0%,39.1%,53%,100%{fill:var(--ink-suave)}40.6%,52%{fill:#E6EAFF}}
@keyframes demoAtIco{0%,39.1%,53%,100%{stroke:var(--azul)}40.6%,52%{stroke:#fff}}
@keyframes demoDestCartao{0%,54.3%,98%,100%{fill:#fff;stroke:var(--linha);stroke-width:1.5;filter:none}55.8%,96%{fill:var(--azul);stroke:#B9C8FE;stroke-width:2;filter:drop-shadow(0 0 6px rgba(91,123,255,.9))}}
@keyframes demoDestTexto{0%,54.3%,98%,100%{fill:var(--navy)}55.8%,96%{fill:#fff}}
@keyframes demoDestSub{0%,54.3%,98%,100%{fill:var(--ink-suave)}55.8%,96%{fill:#E6EAFF}}
@keyframes demoDestOkTxt{0%,54.3%,98%,100%{fill:var(--azul-prof)}55.8%,96%{fill:#fff}}
@keyframes demoDestAnc{0%,54.3%,98%,100%{fill:var(--azul)}55.8%,96%{fill:#fff}}
@keyframes demoDestAncIco{0%,54.3%,98%,100%{fill:#fff}55.8%,96%{fill:var(--azul)}}
@keyframes demoDestOk{0%,54.3%,98%,100%{stroke:var(--azul-prof)}55.8%,96%{stroke:#fff}}
@keyframes demoBalanco{0%,100%{transform:translate(100px,256px)}50%{transform:translate(100px,253px)}}
@keyframes demoFlutua{0%,100%{transform:translate(375px,72px)}50%{transform:translate(375px,68px)}}
.demo-passos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linha);counter-reset:none}
.demo-passos li{
  display:flex;gap:10px;align-items:flex-start;padding:16px 18px;font-size:13.5px;line-height:1.45;color:var(--ink-suave);
  border-right:1px solid var(--linha);animation:12s linear infinite;text-wrap:pretty;
}
.demo-passos li:last-child{border-right:0}
.demo-passos li b{flex:none;width:24px;height:24px;border-radius:8px;background:#EAEDFE;color:var(--azul-prof);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-family:'Sora',sans-serif;animation:12s linear infinite}
.demo-passos li:nth-child(1){animation-name:demoPasso1}
.demo-passos li:nth-child(1) b{animation-name:demoNum1}
@keyframes demoPasso1{0%,17%{background:#EAEDFE;color:var(--navy);font-weight:600}18%,100%{background:#fff;color:var(--ink-suave);font-weight:400}}
@keyframes demoNum1{0%,17%{background:var(--azul);color:#fff}18%,100%{background:#EAEDFE;color:var(--azul-prof)}}
.demo-passos li:nth-child(2){animation-name:demoPasso2}
.demo-passos li:nth-child(2) b{animation-name:demoNum2}
@keyframes demoPasso2{0%,17%,40%,100%{background:#fff;color:var(--ink-suave);font-weight:400}18%,39%{background:#EAEDFE;color:var(--navy);font-weight:600}}
@keyframes demoNum2{0%,17%,40%,100%{background:#EAEDFE;color:var(--azul-prof)}18%,39%{background:var(--azul);color:#fff}}
.demo-passos li:nth-child(3){animation-name:demoPasso3}
.demo-passos li:nth-child(3) b{animation-name:demoNum3}
@keyframes demoPasso3{0%,39%,55%,100%{background:#fff;color:var(--ink-suave);font-weight:400}40%,54%{background:#EAEDFE;color:var(--navy);font-weight:600}}
@keyframes demoNum3{0%,39%,55%,100%{background:#EAEDFE;color:var(--azul-prof)}40%,54%{background:var(--azul);color:#fff}}
.demo-passos li:nth-child(4){animation-name:demoPasso4}
.demo-passos li:nth-child(4) b{animation-name:demoNum4}
@keyframes demoPasso4{0%,54%{background:#fff;color:var(--ink-suave);font-weight:400}55%,100%{background:#EAEDFE;color:var(--navy);font-weight:600}}
@keyframes demoNum4{0%,54%{background:#EAEDFE;color:var(--azul-prof)}55%,100%{background:var(--azul);color:#fff}}
@media (max-width:1020px){.pg-topo{grid-template-columns:1fr;gap:26px;align-items:start}.pg-rio{margin-left:0}.pg-rio .rot{text-align:left}.rio-cena{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%),linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%),linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}.demo-passos{grid-template-columns:1fr 1fr}.demo-passos li:nth-child(2){border-right:0}.demo-passos li:nth-child(-n+2){border-bottom:1px solid var(--linha)}}
@media (max-width:520px){.demo-passos{grid-template-columns:1fr}.demo-passos li{border-right:0;border-bottom:1px solid var(--linha)}.demo-passos li:last-child{border-bottom:0}.demo-cena .rotulo{display:none}}
@media (prefers-reduced-motion:reduce){
  .demo-agua,.demo-balsa,.demo-sat,.demo-sat .luz,.demo-sat .ponta.base,.demo-sat .corpo,.sinal,.demo-cena .st,.demo-passos li,.demo-passos li b,.demo-at *,.demo-dest *,.rastro,.gps-onda,.gps-tag,.demo-balsa .rastreador,.rio-cena .navio,.rio-cena .balanca,.rio-cena .ondas path{animation:none}
  .rio-cena .navio{offset-distance:50%}.rio-cena .navio:nth-of-type(odd){offset-distance:25%}.rio-cena .navio:nth-of-type(3n){offset-distance:75%}
  .gps-tag{opacity:1}.gps-onda.sobe{opacity:.8;transform:scale(2)}.gps-onda.desce{opacity:0}
  .rastro{stroke-dashoffset:0}
  .demo-cena .st{opacity:1}
  .sinal{opacity:0}
}