/* Titania Hotspot - folha de estilo
   Sistema: Abismo #011336, Sinal #00B4FF (texto de botão #011336), Órbita #1E6BFF,
   Névoa #EEF3FB, Tinta #0B1B3A, Farol #FF9F45 (só a jaqueta do visitante e a comemoração),
   azul de texto/link em fundo claro #1557D8.
   Tipos: Unbounded (títulos, números grandes), Figtree (texto). */

@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --abismo: #011336;
  --abismo-2: #0A2257;
  --sinal: #00B4FF;
  --sinal-claro: #4CC9FF;
  --orbita: #1E6BFF;
  --nevoa: #EEF3FB;
  --nevoa-2: #DCE6F5;
  --linha: #C9D6EA;
  --tinta: #0B1B3A;
  --tinta-2: #3A4B6B;
  --farol: #FF9F45;
  --azul: #1557D8;
  --claro: #C3D0E6;
  --branco: #FFFFFF;

  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 78rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--nevoa);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); line-height: 1.12; max-width: 22ch; }
h3 { font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
.sr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.topo :focus-visible, .hero :focus-visible, .banda-escura :focus-visible, .fim :focus-visible,
.rodape :focus-visible, .plano-destaque :focus-visible { outline-color: var(--sinal); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--sinal); color: var(--abismo); padding: .6rem 1rem; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.35rem;
  font: 700 1rem/1.2 var(--texto);
  background: var(--sinal); color: var(--abismo);
  border: 2px solid var(--sinal); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--sinal-claro); border-color: var(--sinal-claro); }
.btn-sm { min-height: 40px; padding: .4rem 1rem; font-size: .9375rem; }
.btn-fio { background: transparent; color: var(--branco); border-color: rgba(255,255,255,.45); }
.btn-fio:hover { background: var(--branco); color: var(--abismo); border-color: var(--branco); }
.btn-fio-escuro { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-fio-escuro:hover { background: var(--tinta); color: var(--branco); border-color: var(--tinta); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(1, 19, 54, .92); backdrop-filter: blur(10px); color: var(--branco); border-bottom: 1px solid rgba(255,255,255,.08); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font: 600 1.05rem/1 var(--display); letter-spacing: -0.01em; }
.marca b { color: var(--sinal); font-weight: 600; }
.topo nav { display: none; }
.topo nav ul { list-style: none; display: flex; gap: 1.75rem; }
.topo nav a { text-decoration: none; font-size: .9375rem; color: var(--claro); }
.topo nav a:hover { color: var(--branco); }

/* ============ HERO + CENA ============ */
.hero { background: var(--abismo); color: var(--branco); padding: 1.5rem 0 4rem; overflow: hidden; }
.hero-in { display: grid; gap: 2.25rem; }
.hero h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.25rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.035em; max-width: 13ch; }
.lead { margin-top: 1.25rem; font-size: 1.15rem; color: var(--claro); max-width: 34rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-nota { margin-top: 1.5rem; font-size: .9375rem; color: #9FB2D3; max-width: 30rem; }

.cena { container-type: inline-size; }
.cena-palco { position: relative; }
.cena-svg { width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.cena-letreiro { font: 600 22px var(--display); fill: #FFFFFF; letter-spacing: -0.02em; }
.cena-cartaz { font: 700 13px var(--texto); fill: var(--tinta); text-anchor: middle; }
.balao-txt { font: 700 14px var(--texto); fill: var(--tinta); }

.alcance { pointer-events: none; }
.anel { fill: none; stroke: var(--sinal); stroke-width: 2; opacity: .35; }
.onda { fill: none; stroke: var(--sinal); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.barras rect { fill: #C9D6EA; transition: fill .2s; }
.barras rect.on { fill: var(--azul); }
.conectado .barras rect.on { fill: var(--sinal); }

#visitante { cursor: grab; touch-action: none; outline: none; }
#visitante.arrastando { cursor: grabbing; }
.bq-alvo { pointer-events: all; }
.bq-foco { opacity: 0; }
#visitante:focus-visible .bq-foco { opacity: 1; }
#visitante .bq-perna-e, #visitante .bq-perna-d { transform-box: view-box; transform-origin: 60px 128px; }
#visitante .bq-braco-d { transform-box: view-box; transform-origin: 78px 82px; transition: transform .35s ease; }
#visitante .bq-braco-e { transform-box: view-box; transform-origin: 42px 82px; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.bq-tela { transition: fill .3s; }
.bq-boca, .bq-boca-feliz { transition: opacity .2s; }

.cena.portal-on .bq-braco-d { transform: rotate(-22deg); }
.cena.portal-on .bq-tela { fill: #EEF3FB; }
.cena.conectado .bq-tela { fill: var(--sinal); }
.cena.conectado .bq-braco-d { transform: rotate(-10deg); }
.cena.conectado .bq-braco-e { transform: rotate(140deg); }
.cena.conectado .bq-boca { opacity: 0; }
.cena.conectado .bq-boca-feliz { opacity: 1; }
.cena.conectado .anel { opacity: .6; }

@media (prefers-reduced-motion: no-preference) {
  .onda { animation: onda 4.8s ease-out infinite; }
  .onda-2 { animation-delay: 2.4s; }
  .cena.andando .bq-perna-e { animation: passo .42s ease-in-out infinite alternate; }
  .cena.andando .bq-perna-d { animation: passo .42s ease-in-out infinite alternate-reverse; }
}
@keyframes onda { 0% { transform: scale(.2); opacity: 0; } 15% { opacity: .55; } 100% { transform: scale(1); opacity: 0; } }
@keyframes passo { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

#visitante.some { opacity: 0; transition: opacity .2s; }
#visitante { transition: opacity .2s; }

/* celular ampliado */
.fone {
  position: absolute; left: 2.2%; top: 3.5%; width: 30%; height: 50%;
  background: var(--abismo-2); color: var(--branco);
  border: 3px solid #23397A; border-radius: clamp(12px, 2.4cqw, 22px);
  padding: clamp(6px, 1.2cqw, 12px);
  font-size: clamp(9px, 1.45cqw, 13px); line-height: 1.25;
  overflow: hidden;
  transform-origin: 85% 100%;
  transition: background-color .3s, border-color .3s;
}
.fone-idle { height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; gap: .35em; color: #7F93BD; }
.fone-idle svg { width: 2.6em; height: auto; }
.fone-idle-t { font: 600 1.15em var(--display); color: var(--branco); }
.fone-idle-d { font-size: .95em; max-width: 15em; }
.fone[data-estado="sinal"] .fone-idle { color: var(--sinal); }
.fone-portal { display: none; }
.fone[data-estado="portal"], .fone[data-estado="conectado"] { background: var(--branco); color: var(--tinta); border-color: var(--abismo); }
.fone[data-estado="portal"] .fone-idle, .fone[data-estado="conectado"] .fone-idle { display: none; }
.fone[data-estado="portal"] .fone-portal, .fone[data-estado="conectado"] .fone-portal { display: grid; gap: .42em; }
.fp-cab { display: flex; align-items: center; gap: .5em; padding-bottom: .4em; border-bottom: 1px solid var(--nevoa-2); }
.fp-cab svg { width: 2.1em; height: 2.1em; flex: none; }
.fp-cab strong { display: block; font: 600 1em var(--display); letter-spacing: -0.02em; }
.fp-cab small { font-size: .82em; color: var(--tinta-2); }
.fp-campo { border: 1px solid var(--linha); border-radius: .5em; padding: .2em .55em .25em; }
.fp-campo span { display: block; font-size: .72em; font-weight: 700; color: var(--tinta-2); }
.fp-campo i { display: block; font-style: normal; min-height: 1.25em; white-space: nowrap; overflow: hidden; }
.fp-campo.digitando i::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -.15em; background: var(--tinta); }
.fp-aceite { display: flex; align-items: center; gap: .45em; font-size: .86em; }
.fp-aceite b { width: 1.1em; height: 1.1em; border: 1.5px solid var(--abismo); border-radius: .25em; position: relative; flex: none; }
.fp-aceite.ok b { background: var(--abismo); }
.fp-aceite.ok b::after { content: ""; position: absolute; left: .3em; top: .08em; width: .3em; height: .6em; border: solid #FFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fp-btn { position: relative; display: grid; place-items: center; height: 2.3em; border-radius: 999px; background: var(--abismo); color: var(--branco); font-weight: 700; overflow: hidden; transition: background-color .3s, transform .12s; }
.fp-btn span { grid-area: 1 / 1; transition: opacity .2s; }
.fp-btn-b { opacity: 0; }
.fp-btn.apertado { transform: scale(.94); }
.fone[data-estado="conectado"] .fp-btn { background: var(--farol); color: var(--abismo); }
.fone[data-estado="conectado"] .fp-btn-a { opacity: 0; }
.fone[data-estado="conectado"] .fp-btn-b { opacity: 1; }
.fp-nota { font-size: .72em; color: var(--tinta-2); text-align: center; }
.fone.pop { animation: pop .38s cubic-bezier(.3, 1.5, .55, 1); }
@keyframes pop { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }

/* mini painel */
.mini-painel {
  position: absolute; right: 2.2%; top: 3.5%; width: 25%;
  background: var(--abismo); color: var(--branco);
  border-radius: clamp(10px, 1.8cqw, 16px); border-left: 4px solid var(--sinal);
  padding: clamp(6px, 1.1cqw, 11px) clamp(8px, 1.4cqw, 14px);
  font-size: clamp(9px, 1.35cqw, 12.5px); line-height: 1.2;
}
.mp-t { color: #9FB2D3; margin-bottom: .35em; }
.mp-t small { font-size: .9em; }
.mp-linha { position: relative; display: flex; align-items: baseline; gap: .45em; }
.mp-linha b { font: 700 1.9em/1.15 var(--display); min-width: 1.1em; }
.mp-linha span { color: var(--claro); }
.mp-linha b.bump { animation: bump .5s cubic-bezier(.3, 1.6, .5, 1); color: var(--farol); }
@keyframes bump { from { transform: scale(1.5); } to { transform: none; } }
.mp-linha b { display: inline-block; transform-origin: 50% 70%; transition: color 1.2s; }
.mp-mais { position: absolute; right: 0; top: 0; font: 700 1.2em var(--display); color: var(--farol); font-style: normal; opacity: 0; }
.mp-mais.vai { animation: mais 1.1s ease-out; }
@keyframes mais { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* controles */
.cena-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: 1rem; }
.btn-cena { min-width: 14rem; }
.btn-cena[aria-disabled="true"] { opacity: .6; cursor: progress; }
.cena-status { font: 600 .95rem/1.3 var(--display); letter-spacing: -0.01em; color: var(--sinal); flex: 1 1 12rem; min-height: 2.6em; display: flex; align-items: center; }
.cena-dica { font-size: .9rem; color: #9FB2D3; flex-basis: 100%; }

/* Cena estreita: celular ampliado vai para baixo da cena */
@container (max-width: 560px) {
  .fone { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 14.5rem; margin-top: .75rem; font-size: 13px; padding: 12px 14px; border-radius: 18px; }
  .fone-idle { min-height: 13rem; }
  .fone[data-estado="portal"] .fone-portal, .fone[data-estado="conectado"] .fone-portal { grid-template-columns: 1fr 1fr; column-gap: .5em; }
  .fp-cab, .fp-aceite, .fp-btn, .fp-nota { grid-column: 1 / -1; }
  .mini-painel { width: 38%; font-size: 10px; }
  .btn-cena { flex: 1 1 100%; }
}

/* ============ BANDAS ============ */
.banda { padding: clamp(3.5rem, 2rem + 5vw, 6rem) 0; }
.banda-clara { background: var(--nevoa); color: var(--tinta); }
.banda-escura { background: var(--abismo); color: var(--branco); }
.banda-curta { padding: 3rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.intro { margin-top: 1rem; font-size: 1.125rem; max-width: 38rem; }
.banda-clara .intro { color: var(--tinta-2); }
.banda-escura .intro { color: var(--claro); }

/* Como funciona: sequência real */
.passos { list-style: none; counter-reset: p; margin-top: 3rem; display: grid; gap: 2.5rem; }
.passos li { counter-increment: p; position: relative; padding-top: 4.6rem; }
.passos li::before {
  content: counter(p);
  position: absolute; left: 0; top: 0;
  font: 300 4rem/1 var(--display); color: var(--azul); letter-spacing: -0.04em;
}
.passos li::after { content: ""; position: absolute; left: 3.4rem; right: 0; top: 2.1rem; border-top: 2px dotted #9DB4DD; }
.passos li:last-child::after { display: none; }
.passos h3 { margin-bottom: .55rem; }
.passos p { color: var(--tinta-2); max-width: 32rem; }

/* Painel */
.pn { display: grid; gap: 3rem; align-items: center; }
.pn-lista { margin-top: 2rem; display: grid; gap: 1.1rem; }
.pn-lista div { padding-left: 1rem; border-left: 2px solid var(--sinal); }
.pn-lista dt { font: 600 1rem var(--display); letter-spacing: -0.01em; }
.pn-lista dd { color: var(--claro); }
.breve { margin-top: 2.25rem; }
.breve h3 { font-size: .95rem; color: var(--claro); font-weight: 500; }
.breve ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.breve li { font-size: .9rem; padding: .3rem .85rem; border: 1.5px dashed #5873A8; border-radius: 999px; color: var(--claro); }

.mock { margin: 0; }
.mock-app { display: grid; grid-template-columns: 3.6rem 1fr; border-radius: 20px; overflow: hidden; background: var(--nevoa); color: var(--tinta); box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.mock-trilho { background: var(--abismo-2); display: grid; align-content: start; justify-items: center; gap: 1rem; padding: 1rem 0; }
.mt-i { width: 2.3rem; height: 2.3rem; border-radius: 10px; display: grid; place-items: center; }
.mt-i svg { width: 1.2rem; height: 1.2rem; fill: #7F93BD; stroke: #7F93BD; stroke-width: 0; }
.mt-i:nth-child(3) svg, .mt-i:nth-child(5) svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt-i:nth-child(4) svg path { fill: none; stroke-width: 2.4; }
.mt-i.ativo { background: var(--sinal); }
.mt-i.ativo svg { fill: var(--abismo); }
.mock-main { padding: 1.1rem; display: grid; gap: .9rem; min-width: 0; }
.mock-topo { display: flex; justify-content: space-between; align-items: baseline; }
.mock-topo strong { font: 600 1rem var(--display); }
.mock-topo span { font-size: .8rem; color: var(--tinta-2); padding: .1rem .6rem; border: 1px solid var(--linha); border-radius: 999px; }
.mock-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.k { background: var(--branco); border-radius: 12px; padding: .65rem .8rem; }
.k span { display: block; font-size: .75rem; color: var(--tinta-2); }
.k strong { font: 700 1.9rem/1.1 var(--display); letter-spacing: -0.04em; }
.k-on { grid-column: 1 / -1; display: flex; align-items: center; gap: .9rem; }
.k-on span { order: -1; }
.k-on strong { color: var(--azul); }
.avs { display: flex; margin-left: auto; }
.avs svg { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--nevoa-2); border: 2px solid var(--branco); margin-left: -.6rem; }
.mock-graf { background: var(--branco); border-radius: 12px; padding: .65rem .8rem; }
.mock-graf span { font-size: .75rem; color: var(--tinta-2); }
.mock-graf svg { width: 100%; height: 76px; margin-top: .4rem; }
.mock-leads { background: var(--branco); border-radius: 12px; padding: .35rem .8rem; font-size: .875rem; }
.mock-leads div { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--nevoa); }
.mock-leads div:last-child { border-bottom: 0; }
.ml-cab { font-size: .72rem; color: var(--tinta-2); }
.tag { font-style: normal; font-size: .72rem; padding: .05rem .55rem; border-radius: 999px; background: var(--nevoa); color: var(--tinta-2); }
.tag-nova { background: #DDF3FF; color: #0A3F8F; }
.mock figcaption { margin-top: .8rem; font-size: .85rem; color: #9FB2D3; }

/* Benefícios */
.bn { display: grid; gap: 2.5rem; }
.bn-lista { display: grid; }
.bn-lista div { padding: 1.35rem 0; border-top: 1.5px solid var(--linha); }
.bn-lista dt { font: 600 1.02rem var(--display); letter-spacing: -0.01em; }
.bn-lista dd { margin-top: .4rem; color: var(--tinta-2); max-width: 31rem; }

/* LGPD */
.sg { display: grid; gap: 2.5rem; }
.sg-col h3 { font-size: 1.2rem; color: var(--sinal); padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.sg-col ul { list-style: none; display: grid; gap: .9rem; margin-top: 1rem; }
.sg-col li { position: relative; padding-left: 1.6rem; color: #E3EAF6; }
.sg-col li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .4rem; border: solid var(--sinal); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.sg-nota { font-size: .9375rem; color: #9FB2D3; max-width: 40rem; }

/* Planos: uma faixa única, com o Profissional elevado */
.planos { margin-top: 3rem; display: grid; background: var(--branco); border: 1.5px solid var(--linha); border-radius: 24px; }
.plano { padding: 1.9rem 1.6rem; display: flex; flex-direction: column; }
.plano + .plano { border-top: 1.5px solid var(--linha); }
.plano h3 { font-size: 1.3rem; }
.plano-p { margin-top: .35rem; color: var(--tinta-2); }
.preco { margin: 1.3rem 0 1.2rem; font: 700 clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem)/1 var(--display); letter-spacing: -0.045em; }
.preco span { font: 500 .95rem var(--texto); letter-spacing: 0; color: var(--tinta-2); margin-left: .25rem; }
.plano ul { list-style: none; display: grid; align-content: start; gap: .55rem; margin-bottom: 1.8rem; flex: 1; }
.plano li { position: relative; padding-left: 1.3rem; }
.plano li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--orbita); }
.plano .btn { align-self: stretch; }
.plano-destaque { background: var(--abismo); color: var(--branco); border-radius: 24px; }
.plano + .plano-destaque, .plano-destaque + .plano { border-top: 0; }
.plano-destaque .plano-p, .plano-destaque .preco span { color: var(--claro); }
.plano-destaque li::before { background: var(--sinal); }
.avulsos { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
.avulsos p { color: var(--tinta-2); }
.avulsos ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.avulsos li strong { font-family: var(--display); font-weight: 600; font-size: .95rem; margin-right: .35rem; }

/* Provedores */
.isp { display: grid; gap: 1.5rem; align-items: center; }
.isp h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); }
.isp p { margin-top: .6rem; color: var(--claro); max-width: 42rem; }
.isp .btn { justify-self: start; }

/* FAQ */
.fq { display: grid; gap: 2rem; }
.fq-lista { border-top: 1.5px solid var(--linha); }
.fq details { border-bottom: 1.5px solid var(--linha); }
.fq summary { cursor: pointer; list-style: none; position: relative; padding: 1.15rem 2.5rem 1.15rem 0; font-weight: 700; font-size: 1.0625rem; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.45rem; border: solid var(--azul); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .2s; }
.fq details[open] summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.fq details p { padding: 0 2.5rem 1.3rem 0; color: var(--tinta-2); max-width: 44rem; }

/* Fim */
.fim { background: var(--abismo); color: var(--branco); padding: 3rem 0 4rem; }
.fim-in { display: grid; gap: 1.5rem; align-items: center; }
.fim-logo { display: block; width: min(100%, 34rem); }
.fim-logo img { width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 70% 68% at 50% 46%, #000 62%, transparent 100%); }
.fim h2 { max-width: 16ch; }
.fim p { margin: 1rem 0 1.75rem; color: var(--claro); max-width: 30rem; font-size: 1.1rem; }

/* Rodapé */
.rodape { background: var(--abismo); color: var(--claro); border-top: 1px solid rgba(255,255,255,.08); padding: 2.75rem 0 2rem; font-size: .9375rem; }
.rodape-in { display: grid; gap: 2rem; }
.rodape .marca { color: var(--branco); margin-bottom: .6rem; }
.rodape-tag { font: 500 .95rem var(--display); color: var(--sinal); letter-spacing: -0.01em; margin-bottom: .25rem; }
.rodape h2 { font: 700 1rem var(--texto); color: var(--branco); margin-bottom: .5rem; }
.rodape ul { list-style: none; display: grid; gap: .35rem; }
.rodape a { color: #E3EAF6; text-underline-offset: .2em; }
.rodape a:hover { color: var(--sinal); }
.rodape-c { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8125rem; color: #8095BC; }

/* ============ Telas estreitas ============ */
.marca, .btn-sm { white-space: nowrap; }
@media (max-width: 420px) {
  .marca { font-size: .88rem; gap: .45rem; }
  .marca img { width: 30px; height: 30px; }
  .topo .btn-sm { padding: .4rem .8rem; font-size: .875rem; }
}

/* ============ Telas maiores ============ */
@media (min-width: 640px) {
  .bn-lista { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .rodape-in { grid-template-columns: 2fr 1fr; }
  .mock-kpis { grid-template-columns: 1fr 1fr 1.6fr; }
  .k-on { grid-column: auto; }
}
@media (min-width: 960px) {
  .topo nav { display: block; }
  .hero { padding: 2.5rem 0 5rem; }
  .hero-in { grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr); gap: 3rem; align-items: center; }
  .passos { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .passos li::after { right: -1rem; }
  .pn { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; }
  .bn { grid-template-columns: 1fr 1.5fr; gap: 4rem; }
  .bn-cab { position: sticky; top: 6rem; align-self: start; }
  .sg { grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .sg-cab, .sg-nota { grid-column: 1 / -1; }
  .planos { grid-template-columns: 1fr 1.08fr 1fr; align-items: stretch; }
  .plano + .plano { border-top: 0; border-left: 1.5px solid var(--linha); }
  .plano-destaque, .plano + .plano-destaque, .plano-destaque + .plano { border-left: 0; }
  .plano-destaque { margin: -1.25rem 0; padding-top: 3.15rem; padding-bottom: 3.15rem; }
  .isp { grid-template-columns: 1fr auto; gap: 3rem; }
  .fq { grid-template-columns: 1fr 1.5fr; gap: 4rem; }
  .fim-in { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  #visitante, #visitante.some, .fone { transition: opacity .25s !important; }
}

.plano-duvida { display: block; text-align: center; margin-top: .75rem; font-size: .9rem; color: inherit; opacity: .8; }
.plano-duvida:hover { opacity: 1; }
.topo-acoes { display: flex; align-items: center; gap: 1rem; }
.topo-entrar { color: #fff; text-decoration: none; font-weight: 600; }
.topo-entrar:hover { color: #4CC9FF; }