.topo { position: sticky; top: 0; z-index: 20; background: var(--ink); color: #fff; border-bottom: 1px solid var(--ink-linha); }
.topo__in { display: flex; align-items: center; gap: var(--e5); min-height: 64px; }
.topo__marca { display: inline-flex; text-decoration: none; margin-right: auto; }
.logo { display: inline-flex; align-items: center; gap: var(--e2); }
.logo__marca { display: block; width: 104px; height: auto; }
.logo__produto { font: 600 .82rem/1 var(--fonte-display); letter-spacing: .02em; color: #fff; padding: 4px 8px; border: 1px solid var(--ink-linha); border-radius: 999px; }
.topo__menu { display: flex; gap: var(--e5); list-style: none; margin: 0; padding: 0; }
.topo__menu a { color: var(--suave-escuro); text-decoration: none; font-weight: 500; font-size: .95rem; padding: var(--e2) 0; border-bottom: 2px solid transparent; transition: color var(--dur-micro), border-color var(--dur-micro); }
.topo__menu a:hover, .topo__menu a[aria-current="page"] { color: #fff; border-color: var(--vermelho); }
.topo__cta { min-height: 40px; padding-inline: var(--e4); font-size: .9rem; }
@media (max-width: 760px) { .topo nav { display: none; } }

.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(2.25rem, 1.5rem + 3vw, 4.5rem) 0 clamp(4rem, 3rem + 5vw, 7rem); }
.hero h1 { font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.25rem); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60rem 30rem at 85% 10%, rgb(214 0 58 / .18), transparent 60%), linear-gradient(transparent 0 calc(100% - 1px), rgb(255 255 255 / .04) 0) 0 0 / 100% 48px, linear-gradient(90deg, transparent 0 calc(100% - 1px), rgb(255 255 255 / .04) 0) 0 0 / 48px 100%; pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(2rem, 4vw, 3.5rem); background: var(--branco); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } }
.hero h1 { margin: var(--e3) 0 var(--e4); }
.grifo { position: relative; white-space: nowrap; }
.grifo::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em; background: var(--vermelho); transform-origin: left; }
html.rn-anima .hero__texto:not(.is-in) .grifo::after { transform: scaleX(0); }
html.rn-anima .hero__texto.is-in .grifo::after { transform: scaleX(1); transition: transform .9s var(--rn-ez2) .55s; }
.hero__apoio { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: #d4d8e0; max-width: 34rem; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin: var(--e5) 0 var(--e5); }
.etiqueta--clara { color: var(--vermelho-claro); }
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; padding: 0; margin: 0; }
.chips li { font-size: .85rem; color: #d4d8e0; padding: 6px 12px; border: 1px solid var(--ink-linha); border-radius: 999px; background: rgb(255 255 255 / .03); }

.demo { position: relative; background: var(--ink-2); border: 1px solid var(--ink-linha); border-radius: var(--raio-g); padding: var(--e4); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.demo::before { content: ""; position: absolute; top: 10px; right: -5px; width: 34px; height: 2px; background: var(--vermelho); transform: rotate(45deg); }
.demo__barra { display: flex; align-items: center; gap: 6px; margin-bottom: var(--e3); }
.demo__ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-linha); }
.demo__url { margin-left: var(--e3); font-size: .75rem; color: var(--suave-escuro); }
.demo__busca { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.demo__busca span { font-size: .82rem; padding: 6px 10px; border-radius: var(--raio); background: var(--ink-3); border: 1px solid var(--ink-linha); }
.demo__busca .demo__qtd { margin-left: auto; background: var(--vermelho-escuro); border-color: var(--vermelho-escuro); }
.demo__mapa { display: block; width: 100%; height: auto; border-radius: var(--raio); background: #0f1218; }
.demo__ruas { stroke: #232835; stroke-width: 6; fill: none; stroke-linecap: round; }
.demo__pino { fill: var(--ciano); transform-box: fill-box; transform-origin: center; animation: pino 4.8s var(--rn-ez) infinite; animation-delay: calc(var(--i, 0) * .45s); opacity: .25; }
@keyframes pino { 0%, 100% { opacity: .25; transform: scale(.7); } 12% { opacity: 1; transform: scale(1.25); } 30% { opacity: .9; transform: scale(1); } }
.demo__linhas { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: 6px; }
.demo__linhas li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); padding: 10px 12px; background: var(--ink-3); border: 1px solid var(--ink-linha); border-radius: var(--raio); font-size: .82rem; animation: linha 4.8s var(--rn-ez) infinite; animation-delay: calc(1.2s + var(--i, 0) * .5s); }
.demo__linhas b { font-weight: 600; margin-right: auto; }
.demo__linhas span { color: var(--suave-escuro); }
@keyframes linha { 0% { opacity: 0; transform: translateY(8px); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.demo__nota { margin: var(--e3) 0 0; font-size: .72rem; color: var(--suave-escuro); text-align: right; }

.secao { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0; }
.secao--papel { background: var(--papel); }
.secao--escura { background: var(--ink); color: #e6e8ec; }
.secao--escura h2 { color: #fff; }
.cabeca { max-width: var(--largura-texto); margin-bottom: var(--e7); }
.cabeca h2 { margin: var(--e3) 0 var(--e4); }
.cabeca__apoio { color: var(--suave); font-size: 1.08rem; }
.estreito { max-width: 52rem; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.duas h2 { margin: var(--e3) 0 var(--e5); }
.duas--centro { align-items: center; }
@media (max-width: 820px) { .duas { grid-template-columns: 1fr; } }

.campos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
@media (max-width: 900px) { .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } }
.campos__item { position: relative; padding: var(--e5); background: var(--branco-puro); border: 1px solid var(--linha); border-radius: var(--raio-g); display: grid; align-content: start; gap: var(--e2); transition: border-color var(--dur-micro), transform var(--dur-curta) var(--rn-ez); }
.campos__item:hover { border-color: var(--ink); transform: translateY(-2px); }
.campos__item p { color: var(--suave); margin: 0; font-size: .95rem; }
.nivel { justify-self: start; margin-top: var(--e2); font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linha); color: var(--suave); }
.nivel--email, .nivel--redes { color: var(--vermelho-escuro); border-color: rgb(214 0 58 / .35); background: rgb(214 0 58 / .05); }

.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); counter-reset: passo; }
@media (max-width: 820px) { .passos { grid-template-columns: 1fr; } }
.passos__item { position: relative; padding-top: var(--e5); border-top: 2px solid var(--ink); }
.passos__item::before { content: ""; position: absolute; top: -2px; left: 0; width: 48px; height: 2px; background: var(--vermelho); }
.passos__n { display: block; font: 700 .9rem/1 var(--fonte-display); color: var(--vermelho); margin-bottom: var(--e3); }
.passos__item h3 { margin-bottom: var(--e2); }
.passos__item p { color: var(--suave); margin: 0; }

.lista-check, .lista-x { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.lista-check li, .lista-x li { position: relative; padding-left: 30px; }
.lista-check li::before, .lista-x li::before { position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.lista-check li::before { content: "✓"; background: #e5f3e8; color: var(--verde-ok); }
.lista-x li::before { content: "✕"; background: #fbe7ea; color: var(--vermelho-escuro); }
.link-seta { color: #fff; font-weight: 600; text-decoration-color: var(--vermelho); text-decoration-thickness: 2px; }
.link-seta::after { content: " →"; }

.faq { display: grid; gap: var(--e2); }
.faq__item { background: var(--branco-puro); border: 1px solid var(--linha); border-radius: var(--raio-g); }
.faq__item summary { list-style: none; cursor: pointer; padding: var(--e4) var(--e5); display: flex; align-items: center; gap: var(--e4); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-size: 1.05rem; margin-right: auto; }
.faq__item summary::after { content: "+"; font: 400 1.4rem/1 var(--fonte-display); color: var(--vermelho); transition: transform var(--dur-curta) var(--rn-ez); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 var(--e5) var(--e5); margin: 0; color: var(--suave); }

.form-espera { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; gap: var(--e4); }
.form-espera .ajuda { margin: 0; font-size: .85rem; color: var(--suave); }
.opcional { font-weight: 400; color: var(--suave); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rodape { background: var(--ink); color: var(--suave-escuro); padding: var(--e7) 0 var(--e5); }
.rodape__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e6); }
.rodape__sobre { max-width: 26rem; margin-top: var(--e3); font-size: .92rem; }
.rodape__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.rodape a { color: #e6e8ec; }
.rodape__fim { margin-top: var(--e6); padding-top: var(--e4); border-top: 1px solid var(--ink-linha); font-size: .85rem; }

.pagina-texto { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; }
.pagina-texto .in { max-width: 46rem; }
.pagina-texto h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); margin-bottom: var(--e5); }
.pagina-texto h2 { font-size: 1.4rem; margin: var(--e7) 0 var(--e3); }
.pagina-texto p, .pagina-texto li { color: #2b303a; }
.pagina-texto .atualizado { color: var(--suave); font-size: .9rem; }

@media (prefers-reduced-motion: reduce) { .demo__pino, .demo__linhas li { animation: none; opacity: 1; transform: none; } }