@charset "UTF-8";

/*
 * Ajustes da Nexfrigo sobre o layout de referência.
 *
 * Fica num arquivo próprio de propósito: o CSS que veio no pacote é minificado e compartilhado
 * entre as páginas do site original — editar lá dificultaria enxergar o que é nosso. Este arquivo
 * é carregado por último, então vence por ordem, sem precisar de !important em tudo.
 */

/* ──────────────────────────────────────────────────────── contato por região (#contato) ──
 * O CTA que existia aqui mandava o visitante para a própria seção. No lugar entram os três
 * representantes: um cartão por estado, cada um abrindo o WhatsApp com a mensagem já escrita.
 * Sem formulário — o distribuidor prefere falar direto, e um formulário exigiria backend.
 */

.nx-contato_lead {
  max-width: 54ch;
  margin: 18px 0 0;
}

.nx-contato_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}

/*
 * O CSS do pacote pinta de branco o texto desta faixa (no layout original ela era escura). Como
 * aqui o fundo é claro, o texto sumia. A cor é reafirmada no cartão e nos filhos — por isso o
 * seletor desce até os spans, senão a regra do pacote, mais específica, continua vencendo.
 */
.nx-contato_card,
.nx-contato_card span {
  color: #18181b;
}

.nx-contato_card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 24px 24px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.nx-contato_card:hover {
  transform: translateY(-2px);
  border-color: rgb(22 163 74 / 45%);
  box-shadow: 0 12px 28px rgb(9 18 30 / 10%);
}

/* A sigla do estado é a âncora visual: é por ela que o olho encontra a própria região. */
.nx-contato_card .nx-contato_uf {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #1B7F4D;
}

.nx-contato_card .nx-contato_estado {
  margin-top: 6px;
  font-size: 1.16rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.nx-contato_card .nx-contato_nome {
  font-size: 0.95rem;
  opacity: 0.66;
}

.nx-contato_card .nx-contato_acao {
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1B7F4D;
}

.nx-contato_acao::after {
  content: ' →';
}

@media (max-width: 62em) {
  .nx-contato_grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────── logo do cabeçalho ──
 * A marca do layout original era um SVG deitado (169×23, ~7:1). A da Nexfrigo tem o símbolo do
 * "N" ao lado do nome, então é bem mais alta (~3,2:1) — e, sem tamanho no CSS, o PNG entraria com
 * seus 875px nativos. A altura fica travada aqui e a largura acompanha sozinha.
 */
.sp-navbar3_logo-img {
  height: 30px;
  width: auto;
  /* O template desce o logo 0,2rem para ele "pousar" na linha da barra. Com a
     pílula visível desde o topo, esse empurrão o faz escapar por baixo dela. */
  bottom: 0;
}

@media (max-width: 48em) {
  .sp-navbar3_logo-img {
    height: 26px;
  }
}

/* ─────────────────────────────────────────── menu legível no topo da página ──
 * A pílula escura do menu só aparecia depois de 50px de rolagem. Mas a hero
 * começa 47px abaixo do topo, então no primeiro instante os links brancos
 * ficavam sobre o branco da página — invisíveis. A pílula passa a existir
 * sempre; rolando, ela só fica um pouco mais fechada.
 */
/* A pilula em si esta no <style> do index.html, junto da regra do template que
   a deixava transparente — la e o unico lugar onde a correcao pega, porque
   aquele bloco carrega depois deste arquivo. */
.sp-navbar3_link { font-size: 1rem; }
.sp-navbar3_link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* A barra é fixa e tem ~95px: sem isto a seção chamada pelo menu encosta no
   topo da janela e os primeiros 95px dela ficam atrás da barra. */
#golpes, #desafio, #fui-vitima { scroll-margin-top: 6.5rem; }

/* ──────────────────────────────────────────────────── hero: uma sombra só, e nenhuma à esquerda ──
 * Aqui existia um `.sp2-hero_bg-video::after` com duas coisas: um reforço lateral que chegava a
 * 82% de preto na borda esquerda e um véu uniforme de 34% sobre o quadro inteiro. Somados ao
 * degradê do `_gradient-darken`, cobriam quase 90% da imagem naquele canto — o vídeo entrega 118
 * de luminância no lado esquerdo e a página pintava 33.
 *
 * O reforço lateral foi escrito quando o texto do hero ficava à esquerda. Ele agora fica à
 * direita, então a camada protegia um lado onde não há mais nada para proteger.
 *
 * Fica valendo uma sombra só, a do `_gradient-darken`. Um pseudo-elemento não aparece em
 * `querySelectorAll`, e foi por isso que este aqui escapou de três varreduras: quem for procurar
 * camada escura sobre o vídeo, procure também nos ::before e ::after.
 */

/* O conteúdo precisa ficar acima do véu. */
.sp-main-hero_content-wrap {
  position: relative;
  z-index: 2;
}

/* ─────────────────────────────────────────────────────────────────── logo do rodapé ──
 * Mesmo caso do cabeçalho: o PNG da marca tem 875px de largura nativa e o layout não define
 * tamanho para esse slot, porque a marca original era um SVG pequeno.
 */
.comparison_sp-logo.is-footer {
  height: 34px;
  width: auto;
}


/* ───────────────────────────────────────────── seção de contato: correções de layout ──
 * Três heranças do layout original atrapalhavam aqui:
 *
 * 1. o título vinha branco (a faixa era escura no original) e sumia no fundo claro;
 * 2. `.sp2-cta_component` limita o conteúdo a 50% da largura — fazia sentido para um bloco
 *    de texto curto ao lado de uma arte, não para três cartões lado a lado;
 * 3. o respiro vertical foi calculado para uma seção com muito mais conteúdo.
 */
#contato .sp2-cta_component {
  max-width: none;
  text-align: center;
  align-items: center;
}

#contato .heading-style-h1 {
  color: #18181b;
  max-width: 18ch;
  margin-inline: auto;
}

#contato .nx-contato_lead {
  margin-inline: auto;
  text-align: center;
}

/* Os cartões voltam a alinhar à esquerda: dentro deles a leitura é de cima para baixo,
 * e texto centralizado em cartão pequeno cansa. */
.nx-contato_card {
  text-align: left;
}

.nx-contato_grid {
  max-width: 880px;
  margin-inline: auto;
}

/* Respiro proporcional ao que a seção realmente tem hoje. */
#contato .padding-section-large {
  padding-block: 96px;
}

@media (max-width: 48em) {
  #contato .padding-section-large {
    padding-block: 64px;
  }
}

/* ───────────────────────────────────────────────────────────────────────── rodapé ──
 * Mesmo desenho do site que está no ar: fundo escuro, a marca à esquerda com o lema e a
 * frase que resume o método, e ao lado as colunas de navegação e do projeto. Fecha com
 * uma barra fina, separada por um fio, com o aviso e a assinatura.
 *
 * Os valores vêm medidos do site no ar: fundo #071127, lema 18px a 80% de branco, a frase
 * 2.025rem/600, os títulos de coluna 0.855rem em versalete a 50%, e o fio a 14%.
 */
footer.section_footer3 {
  background-color: #071127;
  /* No mobile o template pinta um degrade branco por cima da cor de fundo, e era ele
     que apagava o rodape escuro: o texto branco ficava sobre branco. */
  background-image: none;
  color: #fff;
  padding-block: 0;
}

.nx-rodape_topo {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: 3.375rem;
  padding-block: 4.5rem 4rem;
}

.nx-rodape_logo {
  display: block;
  width: 10rem;
  height: auto;
  margin-bottom: 1.5rem;
}

.nx-rodape_lema {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* A frase do método é o único elemento grande do rodapé: é ela que a pessoa leva. */
.nx-rodape_grito {
  margin: 1.8rem 0 0;
  font-size: 2.025rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.nx-rodape_titulo {
  margin: 0 0 1.4rem;
  font-size: 0.855rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.nx-rodape_menu {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.nx-rodape_menu a {
  color: #fff;
  font-size: 1.125rem;
  text-decoration: none;
  width: fit-content;
}

.nx-rodape_menu a:hover,
.nx-rodape_sobre a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nx-rodape_sobre p {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.nx-rodape_sobre a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nx-rodape_base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.25rem;
  align-items: start;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.nx-rodape_base p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 991px) {
  .nx-rodape_topo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    padding-block: 3.5rem 3rem;
  }
  /* A marca ocupa a linha inteira: a frase do método quebraria mal em meia largura. */
  .nx-rodape_marca { grid-column: 1 / -1; }
  .nx-rodape_grito { font-size: 1.75rem; }
}

@media (max-width: 600px) {
  .nx-rodape_topo {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    padding-block: 3rem 2.5rem;
  }
  .nx-rodape_base {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

/* Herdado do "Fale com a gente", que segue com o desenho do template. */
#contato .padding-section-large {
  padding-block: 56px 48px;
}

@media (max-width: 48em) {
  #contato .padding-section-large {
    padding-block: 40px 36px;
  }
}

/* ─────────────────────────────────── painéis de vidro sobre as fotos do "Como funciona" ──
 * Cada passo do ciclo ganha um painel com dados da operação por cima da foto. O efeito de
 * vidro (`backdrop-filter`) deixa a imagem transparecer, o que amarra painel e foto — sem
 * ele, o bloco pousa como um adesivo.
 *
 * Dois temas porque as fotos alternam entre claras e escuras: um painel escuro sobre foto
 * escura some, e o contrário também.
 */
.sp2-check_image-wrap {
  position: relative;
  overflow: hidden;
}

.nx-glass {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 9px 11px;
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  font-size: 0.72rem;
  line-height: 1.25;
}

.nx-glass.is-escuro {
  background: rgb(10 14 20 / 20%);
  border: 1px solid rgb(255 255 255 / 20%);
  color: #f4f7fa;
}

.nx-glass.is-claro {
  background: rgb(255 255 255 / 26%);
  border: 1px solid rgb(255 255 255 / 42%);
  color: #18181b;
  box-shadow: 0 6px 18px rgb(9 18 30 / 10%);
}

.nx-glass_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.nx-glass_titulo {
  display: block;
  font-size: 0.83rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.nx-glass_badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}

.nx-glass_badge.is-verde {
  background: rgb(22 163 74 / 16%);
  color: #1B7F4D;
}

.nx-glass_badge.is-azul {
  background: rgb(34 183 176 / 18%);
  color: #22b7b0;
}

.is-escuro .nx-glass_badge.is-verde {
  background: rgb(22 163 74 / 24%);
  color: #4ade80;
}

.is-escuro .nx-glass_badge.is-azul {
  background: rgb(34 183 176 / 24%);
  color: #5eead4;
}

.nx-glass_lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}

.nx-glass_lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.nx-glass_lista span {
  opacity: 0.66;
}

.nx-glass_lista b {
  font-weight: 620;
  white-space: nowrap;
}

/* Em telas pequenas o painel encosta nas bordas e encolhe a tipografia. */
@media (max-width: 48em) {
  .nx-glass {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 13px 14px;
    font-size: 0.8rem;
  }
  .nx-glass_titulo {
    font-size: 0.94rem;
  }
}

/* Sem suporte a backdrop-filter, o fundo fica sólido para o texto não perder contraste. */
@supports not (backdrop-filter: blur(4px)) {
  .nx-glass.is-escuro { background: rgb(10 14 20 / 78%); }
  .nx-glass.is-claro { background: rgb(255 255 255 / 86%); }
}

/* Com o painel mais transparente, a foto passa a interferir no texto. Uma sombra curta
 * devolve a legibilidade sem fechar o vidro de novo. */
.nx-glass.is-escuro {
  text-shadow: 0 1px 3px rgb(0 0 0 / 72%);
}

.nx-glass.is-claro {
  text-shadow: 0 1px 3px rgb(255 255 255 / 85%);
}

/* As linhas secundárias ficavam apagadas demais sobre foto; sobe um pouco o contraste. */
.nx-glass_lista span {
  opacity: 0.92;
}

/* Com o painel quase transparente, quem garante a leitura é um degradê na base da própria
 * foto — técnica padrão para texto sobre imagem. O painel fica só como moldura de vidro. */
.sp2-check_image-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgb(6 10 16 / 62%) 0%, rgb(6 10 16 / 22%) 55%, transparent 100%);
}

/* Nos painéis claros o degradê inverte: clareia a base para o texto escuro ler. */
.sp2-check_item:nth-child(even) .sp2-check_image-wrap::after {
  background: linear-gradient(to top, rgb(255 255 255 / 72%) 0%, rgb(255 255 255 / 28%) 55%, transparent 100%);
}

/* Painel pela metade da altura: duas linhas, sem barra nem rodapé. */
.nx-glass {
  padding: 8px 10px;
  border-radius: 12px;
}

.nx-glass_lista {
  gap: 2px;
}

.nx-glass_titulo {
  font-size: 0.8rem;
}

/* ────────────────────────────── painéis: altura uniforme e leitura reforçada ──
 * Dois problemas depois de encolher os painéis:
 *
 * 1. alturas desiguais — o card 1 tem subtítulo ("Fazenda Santa Clara") e os outros não,
 *    então a fileira ficava desalinhada;
 * 2. os rótulos usavam `opacity`, que empilha com a transparência do painel e do degradê:
 *    três camadas de esmaecimento somadas deixaram o texto quase invisível.
 *
 * A altura passa a ser fixa, com o conteúdo ancorado embaixo; e a cor do texto vira sólida
 * (sem `opacity`), controlada por alpha na própria cor — assim só há um nível de esmaecimento.
 */
.nx-glass {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

/* `opacity` some: era ela que somava com as outras camadas translúcidas. */
.nx-glass_lista span {
  opacity: 1;
}

.is-escuro .nx-glass_lista span {
  color: rgb(255 255 255 / 88%);
}

.is-claro .nx-glass_lista span {
  color: rgb(24 24 27 / 82%);
}

/* Os valores são a informação: peso cheio e cor plena. */
.nx-glass_lista b {
  font-weight: 700;
}

.is-escuro .nx-glass_lista b,
.is-escuro .nx-glass_titulo {
  color: #fff;
}

.is-claro .nx-glass_lista b,
.is-claro .nx-glass_titulo {
  color: #0f1720;
}

/* Um pouco maior: 0,72rem era pequeno demais sobre foto. */
.nx-glass {
  font-size: 0.78rem;
  letter-spacing: 0.004em;
}

.nx-glass_titulo {
  font-size: 0.86rem;
}

/* Sombra firme: é ela que separa a letra da textura da foto por baixo. */
.nx-glass.is-escuro,
.nx-glass.is-escuro .nx-glass_lista span,
.nx-glass.is-escuro .nx-glass_lista b {
  text-shadow: 0 1px 4px rgb(0 0 0 / 85%);
}

.nx-glass.is-claro,
.nx-glass.is-claro .nx-glass_lista span,
.nx-glass.is-claro .nx-glass_lista b {
  text-shadow: 0 1px 4px rgb(255 255 255 / 92%);
}

/* O degradê da base sobe um pouco para cobrir a altura fixa do painel. */
.sp2-check_image-wrap::after {
  height: 64%;
  background: linear-gradient(to top, rgb(6 10 16 / 78%) 0%, rgb(6 10 16 / 34%) 58%, transparent 100%);
}

.sp2-check_item:nth-child(even) .sp2-check_image-wrap::after {
  background: linear-gradient(to top, rgb(255 255 255 / 86%) 0%, rgb(255 255 255 / 40%) 58%, transparent 100%);
}

/* Selos legíveis: fundo mais sólido, já que o painel atrás quase não tem. */
.nx-glass_badge.is-verde {
  background: rgb(22 163 74 / 92%);
  color: #fff;
}

.nx-glass_badge.is-azul {
  background: rgb(34 183 176 / 92%);
  color: #04302e;
}

.is-escuro .nx-glass_badge.is-verde {
  background: rgb(22 163 74 / 90%);
  color: #fff;
}

.is-escuro .nx-glass_badge.is-azul {
  background: rgb(34 183 176 / 90%);
  color: #04302e;
}

.nx-glass_badge {
  text-shadow: none;
}

/* ─────────────────────────────────────────────────────────── planos: sem preço público ──
 * O bloco foi desenhado para um número curto ("$199") em 4,375rem. "Sob consulta" ocupa muito
 * mais espaço nesse corpo, então aqui ele volta a ter tamanho de texto.
 */
.nx-preco-consulta .sp3-membership_price {
  font-size: 2.5rem;
  line-height: 2.875rem;
  letter-spacing: -0.02em;
}

@media screen and (max-width: 767px) {
  .nx-preco-consulta .sp3-membership_price {
    font-size: 2rem;
    line-height: 2.375rem;
  }
}

/* ───────────────────────────────────────────── navegação por seção fora do desktop ──
 * O menu lateral foi removido, e era ele que guardava "A plataforma", "Depoimentos" e
 * "Dúvidas" abaixo de 992px — o CSS do pacote esconde `.sp-navbar3_left` nessa faixa.
 *
 * São dois regimes: no tablet os três links cabem entre o logo e o botão; no celular não
 * (logo e CTA já ocupam a largura toda), então descem para uma segunda linha.
 */

/* Tablet: uma linha só. As larguras fixas do desktop (28rem no left, 25,5rem no right)
 * estouram aqui — daí o `width: auto`, com o mesmo peso do `!important` que as define. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .sp-navbar3_inner {
    flex: 1;
    justify-content: space-between;
  }

  .sp-navbar3_component .sp-navbar3_left {
    display: flex;
    width: auto !important;
    gap: 1.5rem;
  }

  .sp-navbar3_component .sp-navbar3_right {
    width: auto !important;
  }
}

/* Celular: o logo sai do fluxo para a segunda linha poder usar a largura inteira. */
@media screen and (max-width: 767px) {
  .sp-navbar3_wrapper {
    position: relative;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .sp-navbar3_logo {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    z-index: 1;
  }

  .sp-navbar3_inner {
    flex-wrap: wrap;
    width: 100%;
    row-gap: 0.625rem;
  }

  .sp-navbar3_right {
    order: 1;
    width: 100%;
    justify-content: flex-end;
  }

  .sp-navbar3_left {
    order: 2;
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 1.5rem;
  }

  .sp-navbar3_link {
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }
}

/* Abaixo de 480px o logo e o CTA se encontravam no meio da barra — o logo é absoluto
 * aqui, então não havia empurrão. Ambos encolhem.
 *
 * O logo leva dois seletores porque sua largura é definida num `<style>` do corpo do
 * index, que vence este arquivo por ordem de documento.
 */
@media screen and (max-width: 480px) {
  .sp-navbar3_logo .sp-navbar3_logo-img {
    width: 6.5rem;
  }

  .sp-navbar3_cta {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }

  .sp-navbar3_left {
    gap: 1.125rem;
  }

  .sp-navbar3_link {
    font-size: 0.78125rem;
  }
}

/* ──────────────────────────────────────────────────────────────── hero da home ──
 * O bloco de texto passa para a direita: no vídeo a pessoa aparece à esquerda,
 * e o texto em cima dela disputava a leitura com o rosto.
 * As linhas continuam alinhadas à esquerda dentro do bloco — é o bloco que anda,
 * não o texto, que centralizado ficaria pior de ler.
 */
@media (min-width: 768px) {
  /* O invólucro tinha só a largura do conteúdo, então não havia o que alinhar:
     precisa ocupar a faixa inteira para o bloco poder encostar à direita. */
  .sp-main-hero_content-wrap {
    width: 100%;
    align-items: flex-end;
    /* O slide traz 4rem de respiro só à esquerda e embaixo; à direita não havia
       nenhum, e o título encostava na borda da tela. */
    padding-right: 4rem;
  }
  .sp2-home-hero_content.is-home-hero { align-items: flex-start; }
}

/* No celular a tela é curta e o vídeo já diz o essencial: o texto de apoio sai
   para o título e os botões respirarem. */
@media (max-width: 767px) {
  .sp2-home-hero_content .max-width-small { display: none; }
}

/* Sem o botão do topo, o cabeçalho encolheu e o logo passou a encostar na borda
   de baixo. O respiro devolve o que o botão ocupava. */
@media (max-width: 991px) {
  .sp-navbar3_wrapper { padding-bottom: 0.75rem; }
}

/* ──────────────────────────────────────────────────── o golpe, mensagem a mensagem (#roteiro) ──
 * Fica logo abaixo do hero e reaproveita os elementos da seção de planos (sp3-membership):
 * o mesmo par de colunas, os mesmos bullets e a mesma barra de progresso com contador.
 * O que muda é o conteúdo — em vez de slides de produto, a conversa de um golpe.
 *
 * A seção é alta de propósito: o miolo gruda na tela e a rolagem revela uma mensagem por vez,
 * acendendo o bullet correspondente e movendo o balão de alerta para o lado da mensagem.
 * A altura em svh é o que define o ritmo — encurtar aqui acelera a narração.
 */

.section_nx-roteiro {
  position: relative;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fa 45%, #f7f9fb 100%);
}

.section_nx-roteiro { height: 460svh; }

.section_nx-roteiro > .page-padding {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
}

/* brilhos de fundo, na cor do tema */
.nx-roteiro_brilhos {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}
.nx-roteiro_brilhos i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.nx-roteiro_brilhos .is-verde {
  top: 22svh; right: 14%; width: 460px; height: 460px;
  background: radial-gradient(circle, #27AE6040, transparent 70%);
}
.nx-roteiro_brilhos .is-azul {
  top: 46svh; right: 34%; width: 380px; height: 380px;
  background: radial-gradient(circle, #1B7F4D2e, transparent 70%);
}

.sp3-membership_wrapper.is-nx-roteiro { position: relative; z-index: 1; }


/* ---- coluna de texto ---- */
.nx-roteiro_olho {
  margin: 0 0 0.75rem;
  color: #71717a;
  font-size: 0.875rem;
}

/* Sem verde: o layout hierarquiza texto só com #18181b e #71717a. */
.nx-roteiro_texto .heading-style-h2 em { font-style: normal; color: inherit; }

.nx-roteiro_intro { max-width: 44ch; margin: 1.25rem 0 0; }

/* ---- bullets viram cartões de sinal ---- */
.sp3-membership_bullets[data-sinais] { padding-left: 0; gap: 0.6rem; }

.sp3-membership_bullet-item.is-nx-sinal {
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  background: #eef1f6;
  border-left: 4px solid transparent;
  opacity: 0.55;
  transition: background-color 0.4s, border-left-color 0.4s, opacity 0.4s, box-shadow 0.4s;
}
.sp3-membership_bullet-item.is-nx-sinal p { margin: 0; }
.sp3-membership_bullet-item.is-nx-sinal strong {
  display: block;
  color: #18181b;
  /* O tema não usa negrito: a diferença entre rótulo e apoio é a cor.
     Sem isto vale o peso padrão do navegador para <strong>. */
  font-weight: 400;
}

.nx-sinal_ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #e2e6ed;
  color: #a1a1aa;
  transition: background-color 0.4s, color 0.4s;
}
.nx-sinal_ic svg { width: 1.25rem; height: 1.25rem; }

.sp3-membership_bullet-item.is-nx-sinal[data-ativo] {
  opacity: 1;
  background: #fff;
  border-left-color: #fc5f2b;
  box-shadow: 0 10px 30px -18px rgb(15 23 32 / 35%);
}
.sp3-membership_bullet-item.is-nx-sinal[data-ativo] .nx-sinal_ic {
  background: #ffe8e0;
  color: #fc5f2b;
}

/* ---- celular ---- */
.nx-roteiro_fone-col { align-items: center; gap: 1.75rem; }
.nx-fone-palco { position: relative; width: 100%; display: grid; justify-items: center; }

.nx-fone {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 10px;
  background: #0b0f16;
  border-radius: 44px;
  box-shadow:
    0 0 0 2px #2a3140,
    0 40px 80px -40px rgb(11 15 22 / 60%);
}

.nx-fone_ilha {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 82px; height: 24px;
  background: #0b0f16;
  border-radius: 99px;
}

.nx-fone_status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 6px;
  background: #fff;
  border-radius: 36px 36px 0 0;
  color: #18181b;
  font-size: 0.875rem;
}
.nx-fone_status-ic { display: flex; align-items: center; gap: 5px; color: #18181b; }
.nx-fone_status-ic svg { height: 11px; width: auto; fill: currentColor; }

.nx-fone_topo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px 12px;
  background: #fff;
  border-bottom: 1px solid #e8ebf0;
}
.nx-fone_voltar { color: #6a7382; display: grid; place-items: center; }
.nx-fone_voltar svg { width: 1.05rem; height: 1.05rem; }
.nx-fone_foto {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #dfe3ea;
  color: #9aa3b2;
  overflow: hidden;
}
.nx-fone_foto svg { width: 26px; height: 26px; }
.nx-fone_nome {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: #18181b;
}
.nx-fone_nome small { display: block; font-size: 0.875rem; color: #71717a; }
.nx-fone_mais { color: #8a93a2; }
.nx-fone_mais svg { width: 1.1rem; height: 1.1rem; }

/* Fica DENTRO do aparelho de propósito: a conversa imita o WhatsApp de perto,
   e uma captura de tela dela precisa levar o aviso junto. */
.nx-fone_selo {
  margin: 0;
  padding: 5px 12px;
  background: #fff5f1;
  border-bottom: 1px solid #ffd9cb;
  color: #9a4a22;
  font-size: 0.75rem;
  text-align: center;
}

.nx-fone_conversa {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 340px;
  padding: 14px 12px;
  background: #fff;
}

.nx-bolha {
  position: relative;
  max-width: 86%;
  margin: 0;
  padding: 9px 12px 7px;
  font-size: 1rem;
  line-height: 1.4;
  color: #18181b;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s, transform 0.45s;
}
.nx-bolha time {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: #9aa3b2;
  text-align: right;
}
.nx-bolha.is-dele { justify-self: start; background: #f1f3f6; border-top-left-radius: 4px; }
.nx-bolha.is-sua  { justify-self: end;   background: #dcf7d3; border-top-right-radius: 4px; }
.nx-bolha[data-visivel] { opacity: 1; transform: none; }

.nx-fone_campo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 18px;
  background: #fff;
  border-radius: 0 0 36px 36px;
}
.nx-fone_add {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #eef1f6;
  color: #6a7382;
  font-size: 1.25rem;
  line-height: 1;
}
.nx-fone_input {
  flex: 1;
  padding: 8px 14px;
  border-radius: 99px;
  background: #f1f3f6;
  color: #9aa3b2;
  font-size: 1rem;
}
.nx-fone_mic { flex: none; color: #6a7382; }
.nx-fone_mic svg { width: 1.15rem; height: 1.15rem; }

/* ---- fecho da narrativa ----
 * A sequência terminava no quarto sinal e parava. Quem acabou de reconhecer o
 * golpe pergunta o que fazer, e é isso que este bloco responde.
 */
.nx-roteiro_fecho {
  padding: 0.85rem 1.1rem;
  background: #18181b;
  color: #fff;
  border-radius: 14px;
}
.nx-roteiro_fecho[hidden] { display: none; }
.nx-roteiro_fecho-regra {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}
.nx-roteiro_fecho-texto {
  margin: 0.4rem 0 0;
  color: rgb(255 255 255 / 72%);
  font-size: 0.875rem;
}

/* ---- balão de alerta ---- */
.nx-alerta {
  position: absolute;
  z-index: 4;
  right: 0;
  top: var(--nx-alerta-y, 180px);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 226px;
  padding: 0.85rem 1rem;
  background: #fff5f1;
  border: 1px solid #ffd9cb;
  border-radius: 14px;
  box-shadow: 0 16px 40px -22px rgb(252 95 43 / 45%);
  transition: top 0.45s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.35s;
}
.nx-alerta[hidden] { display: none; }
/* fio ligando o balão à mensagem */
.nx-alerta::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 1.55rem;
  width: 26px;
  height: 1px;
  background: #ffb59a;
}
.nx-alerta::after {
  content: "";
  position: absolute;
  right: calc(100% + 24px);
  top: calc(1.55rem - 2px);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fc5f2b;
}
.nx-alerta_ic {
  flex: none;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: #ffe3d8;
  color: #fc5f2b;
}
.nx-alerta_ic svg { width: 1.05rem; height: 1.05rem; }
.nx-alerta_txt { font-size: 0.875rem; color: #71717a; }
.nx-alerta_txt strong { display: block; color: #18181b; font-weight: 400; margin-bottom: 1px; }

/* Em telas estreitas não há espaço à direita: o balão vira um aviso abaixo do celular. */
@media (max-width: 1279px) {
  .nx-alerta {
    position: static;
    width: 100%;
    max-width: 320px;
    margin-top: 1rem;
  }
  .nx-alerta::before, .nx-alerta::after { display: none; }
}

/* Da largura em que o balão flutua, o celular deixa de ficar centrado na coluna:
   encosta à esquerda e abre a faixa da direita para ele, como no desenho de referência. */
@media (min-width: 1280px) {
  .nx-roteiro_fone-col { align-items: flex-start; }
  .nx-fone-palco { justify-items: start; }
  .nx-roteiro_fone-col .sp3-membership_nav { width: 320px; }
}

/* ---- barra de progresso (elemento do sp3-membership) ---- */
.nx-roteiro_fone-col .sp3-membership_nav { max-width: 320px; }
.nx-roteiro_fone-col .sp3-membership_bar-fill {
  background-color: #1B7F4D;
  transition: width 0.45s cubic-bezier(0.45, 0, 0.55, 1);
}

@media (prefers-reduced-motion: reduce) {
  .nx-bolha,
  .nx-alerta,
  .sp3-membership_bullet-item.is-nx-sinal,
  .nx-roteiro_fone-col .sp3-membership_bar-fill { transition: none; }
}

/* ── No celular o aparelho é o assunto ────────────────────────────────────────
 * Uma rolagem, um cartão: ele surge sobre a base do aparelho e sai quando o
 * próximo chega. A conversa acima vai acumulando, como a de verdade. É por isso
 * que os cartões não empilham aqui — só o da vez fica na tela.
 */
@media (max-width: 991px) {
  .section_nx-roteiro { height: 420svh; }

  /* Altura do cabeçalho fixo, que mudou quando o botão saiu do topo. */
  .section_nx-roteiro > .page-padding {
    top: 64px;
    min-height: calc(100svh - 64px);
    align-items: start;
    padding: 0.5rem 20px 0.4rem;
  }

  /* Dissolve as colunas para o aparelho e os cartões dividirem a mesma célula. */
  .nx-roteiro_texto,
  .nx-roteiro_fone-col { display: contents; }

  .sp3-membership_wrapper.is-nx-roteiro {
    grid-template-columns: 1fr;
    /* título · aparelho · cartão · barra */
    grid-template-rows: auto 1fr auto auto;
    gap: 0.35rem;
    align-items: stretch;
  }

  .sp3-membership_head-wrap { grid-column: 1; grid-row: 1; }
  .nx-roteiro_intro { display: none; }          /* o espaço vai para o aparelho */
  #roteiro .heading-style-h2 { font-size: 2rem; line-height: 1.06; }
  .nx-roteiro_olho { margin-bottom: 0.2rem; font-size: 0.875rem; }

  .nx-fone-palco { grid-column: 1; grid-row: 2; align-content: start; }
  .nx-roteiro_fone-col .sp3-membership_nav { grid-column: 1; grid-row: 4; width: 100%; max-width: none; }

  .nx-fone {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Teto de altura: sem ele a proporção fixa faz o aparelho crescer e empurra
       o cartão e a barra para fora da tela. 64px é o cabeçalho fixo; o resto é
       o título, o cartão, a barra e os respiros. */
    max-height: calc(100svh - 301px);
    aspect-ratio: 1 / 1.72;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    padding: 9px;
    border-radius: 38px;
  }
  .nx-fone_ilha { top: 17px; width: 74px; height: 21px; }
  .nx-fone_status { padding: 10px 14px 5px; border-radius: 31px 31px 0 0; }
  .nx-fone_topo { padding: 7px 12px 10px; }
  .nx-fone_conversa {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    align-content: end;   /* a conversa cresce de baixo para cima */
    overflow: hidden;
    padding: 11px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%);
  }
  .nx-fone_campo { padding: 9px 11px 15px; border-radius: 0 0 31px 31px; }

  /* Bolha ainda oculta fora do fluxo: com align-content:end ela ocupava o fundo
     da conversa e empurrava as visíveis para fora da área. */
  .nx-bolha:not([data-visivel]) { display: none; }
  .nx-bolha[data-visivel] { animation: nx-bolha-entra 0.4s ease both; }
  @keyframes nx-bolha-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  /* Os cartões ocupam a mesma célula do aparelho, encostados embaixo: um sobre o
     outro, e só o da vez aparece. */
  /* Faixa própria abaixo do aparelho. Sem a coluna explícita o posicionamento
     automático cria uma coluna nova e empurra o aparelho para fora da tela.
     A altura é fixa para o cartão não fazer a cena pular quando o texto muda. */
  .sp3-membership_bullets[data-sinais] {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    align-content: center;
    min-height: 5.2rem;
    padding: 0;
    gap: 0;
    pointer-events: none;
  }

  .sp3-membership_bullet-item.is-nx-sinal {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
    background: #fff;
    border-left-color: #fc5f2b;
    box-shadow: 0 18px 44px -20px rgb(15 23 32 / 45%);
  }

  .sp3-membership_bullet-item.is-nx-sinal[data-atual] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .sp3-membership_bullet-item.is-nx-sinal .nx-sinal_ic {
    background: #ffe8e0;
    color: #fc5f2b;
  }

  /* Mesma faixa do cartão: um substitui o outro, sem a cena mudar de altura. */
  .nx-roteiro_fecho {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    animation: nx-bolha-entra 0.4s ease both;
  }

  .nx-alerta { display: none !important; }
}
/* ─────────────────────────────────────────────────────── página de um golpe ──
 * Página simples, sem a navegação inteira da home: quem chega aqui veio de um
 * golpe específico e quer a resposta, não o site todo.
 */
.nx-detalhe_topo { border-bottom: 1px solid #e4e4e7; background: #fff; }
.nx-detalhe_topo-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.9rem;
}
.nx-detalhe_marca img { display: block; height: 2.6rem; width: auto; }
.nx-detalhe_voltar {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: #18181b; font-size: 0.875rem;
  text-decoration: underline; text-underline-offset: 4px;
}

.nx-detalhe_carregando { color: #71717a; }

.nx-detalhe_corpo { display: grid; gap: 2.5rem; max-width: 46rem; }
.nx-detalhe_cabeca { display: grid; gap: 0.75rem; }
.nx-detalhe_cabeca .heading-style-h2 { margin: 0; }
.nx-detalhe_resumo { margin: 0; color: #71717a; }

.nx-detalhe_bloco { display: grid; gap: 0.75rem; }
.nx-detalhe_bloco .heading-style-h4 { margin: 0; }
.nx-detalhe_texto { display: grid; gap: 0.75rem; }
.nx-detalhe_bloco p { margin: 0; color: #71717a; font-size: 1.125rem; line-height: 1.5; }

.nx-detalhe_lista { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.nx-detalhe_lista li {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.7rem;
  color: #71717a; font-size: 1.125rem; line-height: 1.4;
}
.nx-detalhe_marca-item { color: #a1a1aa; }
.is-alerta .nx-detalhe_marca-item { color: #fc5f2b; }
.is-nao .nx-detalhe_marca-item { color: #a32c1e; }
.is-sim .nx-detalhe_marca-item { color: #1B7F4D; }

.nx-detalhe_par { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .nx-detalhe_par { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.nx-detalhe_par .nx-detalhe_bloco {
  padding: 1.25rem 1.4rem; border: 1px solid #e4e4e7; border-radius: 0.75rem;
}
.nx-detalhe_par .is-nao { background: #fdf6f4; border-color: #f3d9d2; }
.nx-detalhe_par .is-sim { background: #f4faf6; border-color: #d3e9da; }

/* exemplo fictício */
.nx-detalhe_exemplo { border: 1px solid #e4e4e7; border-radius: 0.75rem; overflow: hidden; }
.nx-detalhe_exemplo-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1.1rem; border-bottom: 1px solid #e4e4e7;
  color: #18181b; font-size: 0.875rem;
}
.nx-detalhe_selo {
  padding: 0.2rem 0.55rem; border-radius: 99px;
  background: #fff5f1; color: #9a4a22; font-size: 0.75rem;
}
.nx-detalhe_conversa { display: grid; gap: 0.6rem; padding: 1.1rem; background: #f1f3f6; }
.nx-detalhe_bolha {
  max-width: 88%; margin: 0; padding: 0.7rem 0.95rem;
  border-radius: 1rem; background: #fff; color: #18181b;
  font-size: 1rem; line-height: 1.4;
}
.nx-detalhe_bolha.is-dele { justify-self: start; border-top-left-radius: 0.25rem; }
.nx-detalhe_bolha.is-sua { justify-self: end; background: #dcf7d3; border-top-right-radius: 0.25rem; }

.nx-detalhe_regra { padding: 1.25rem 1.4rem; border-radius: 0.75rem; background: #18181b; color: #fff; }
.nx-detalhe_regra-titulo { margin: 0 0 0.35rem; font-size: 1.125rem; }
.nx-detalhe_regra p:last-child { margin: 0; color: rgb(255 255 255 / 72%); font-size: 0.875rem; }

.nx-detalhe_rodape { border-top: 1px solid #e4e4e7; background: #fafafa; }
.nx-detalhe_rodape p {
  max-width: 60rem; margin: 0; padding-block: 1.5rem;
  color: #71717a; font-size: 0.875rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .nx-golpes_enche { transition: none !important; }
}

/* ───────────────────────────────────────────────────────────── golpes (#golpes) ──
 * Composição da seção de planos: mídia à esquerda, texto à direita, com a mesma
 * barra de progresso e contador.
 *
 * A mídia são dois cartões verticais, um por golpe da categoria. Cada cartão é a
 * imagem e o botão ao mesmo tempo: o painel da categoria entra de fundo e o texto
 * do golpe fica por cima. A informação está na imagem, não numa lista ao lado.
 *
 * A seção inteira vira escura. É a única faixa escura da página: depois do
 * #roteiro, que é claro, ela para a rolagem e diz "agora é o assunto sério".
 * O escuro também é o que dá relevo aos cartões — sobre branco eles ficavam
 * chapados, sem sombra que aparecesse.
 *
 * Classes próprias (nx-golpes_*): o script do template faz querySelector pela
 * classe dele e pega a PRIMEIRA da página — reusar rouba o alvo do carrossel.
 */
.section_nx-golpes {
  /* Espelha o padding lateral do .page-padding do template: as filas que
     rolam sangram por ele para tocar a borda da tela. */
  --nx-sangra: 2.5rem;
  position: relative;
  background: #e9e9ec;
  color: #18181b;
  /* Fio nas duas bordas: separa do branco das seções vizinhas sem precisar
     escurecer o cinza. */
  border-block: 1px solid #dcdce0;
}

.nx-golpes_wrapper {
  display: grid;
  /* A mídia leva mais largura que o texto: são os cartões que carregam a seção,
     e a coluna de texto já era a mais alta das duas. */
  grid-template-columns: 1.32fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* ---- mídia: os dois cartões ---- */
.nx-golpes_media { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.nx-golpes_palco { position: relative; min-width: 0; }

.nx-golpes_grupo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.nx-golpes_grupo[hidden] { display: none; }

/* Desencontro vertical: o par deixa de ser um bloco retangular e passa a ter
   diagonal. É o que dá volume à cena sem precisar de perspectiva. */
.nx-golpes_grupo > .nx-golpes_cartao:nth-child(2) { margin-top: 3rem; }

.nx-golpes_cartao {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4.2;          /* vertical: o cartão é um retrato */
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background-color: #101c36;   /* enquanto a foto carrega */
  background-size: cover;
  background-position: center top;   /* as fotos põem a pessoa no terço de cima */
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 2px 6px -2px rgb(9 12 20 / 12%),
    0 18px 36px -16px rgb(9 12 20 / 28%),
    0 40px 70px -40px rgb(9 12 20 / 30%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.nx-golpes_cartao:hover,
.nx-golpes_cartao:focus-visible {
  transform: translateY(-10px);
  box-shadow:
    0 2px 6px -2px rgb(9 12 20 / 14%),
    0 30px 54px -18px rgb(9 12 20 / 34%),
    0 60px 90px -44px rgb(27 127 77 / 34%);
}

/* Escurece a base para o texto ler sobre a fotografia. Mais forte do que seria
   preciso sobre um fundo chapado: a foto tem detalhe claro em qualquer lugar. */
.nx-golpes_cartao-fundo {
  position: absolute;
  inset: 0;
  /* Só a base escurece. Um véu por cima da foto inteira apagava a luz dela e
     devolvia à cena o ar pesado que estas fotos existem para não ter. */
  background: linear-gradient(
    180deg,
    rgb(6 10 20 / 0%) 0%,
    rgb(6 10 20 / 0%) 44%,
    rgb(6 10 20 / 42%) 62%,
    rgb(6 10 20 / 80%) 80%,
    rgb(6 10 20 / 92%) 100%
  );
}

.nx-golpes_cartao-texto {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.35rem;
  padding: 1.75rem 1.5rem 1.5rem;
}
/* Os dois cartões têm sempre a mesma altura: quem manda é o aspect-ratio, não o
   texto. Um resumo comprido passava do cartão e o overflow:hidden cortava o
   nome pela metade. O corte agora é declarado, e cai no fim do resumo. */
.nx-golpes_cartao-nome {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 1.25rem;
  line-height: 1.25;
}
.nx-golpes_cartao-resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: rgb(255 255 255 / 82%);
  font-size: 0.9375rem;
  line-height: 1.4;
}
/* Botão de verdade, não um link sublinhado: é o que a pessoa aperta, e o alvo
   precisa parecer um alvo. Geometria copiada do .sp2_btn do template — os
   valores, não a classe: a classe tem script do template pendurado nela. */
.nx-golpes_cartao-acao {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding: 0.75rem 1.15rem;
  border-radius: 5rem;
  background: #fff;
  color: #18181b;
  font-size: 0.9375rem;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nx-golpes_cartao-acao::after {
  content: "→";
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.nx-golpes_cartao:hover .nx-golpes_cartao-acao,
.nx-golpes_cartao:focus-visible .nx-golpes_cartao-acao {
  background: #1b7f4d;
  color: #fff;
}
.nx-golpes_cartao:hover .nx-golpes_cartao-acao::after { transform: translateX(4px); }

/* Entrada a cada troca de categoria. O grupo sai de display:none, então a
   animação recomeça sozinha — o JS não precisa saber disso. */
@keyframes nx-golpe-entra {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.nx-golpes_grupo.is-ativo > .nx-golpes_cartao {
  animation: nx-golpe-entra 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.nx-golpes_grupo.is-ativo > .nx-golpes_cartao:nth-child(2) { animation-delay: 0.1s; }

/* ---- barra de progresso ---- */
.nx-golpes_nav { display: flex; align-items: center; gap: 1.5rem; width: 100%; }
.nx-golpes_barras { display: flex; flex-grow: 1; align-items: center; gap: 0.5rem; }
.nx-golpes_barra {
  position: relative;
  flex: 1;
  height: 0.3125rem;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgb(24 24 27 / 16%);
  overflow: hidden;
  cursor: pointer;
}
/* Alvo de toque generoso sem engordar a linha. */
.nx-golpes_barra::before { content: ""; position: absolute; inset: -0.75rem 0; }
.nx-golpes_enche { display: block; width: 0; height: 100%; border-radius: 99px; background: #1b7f4d; }
.nx-golpes_contador { flex-shrink: 0; color: #5f5f68; font-size: 0.9375rem; white-space: nowrap; }

/* ---- texto ---- */
.nx-golpes_texto { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.nx-golpes_head .heading-style-h2 { margin: 0; color: #18181b; }
.nx-olho { margin: 0 0 0.875rem; color: #5f5f68; font-size: 0.9375rem; }

/* ---- categorias, em coluna ---- */
.nx-golpes_abas {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #d0d0d6;
}

.nx-golpes_aba {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.875rem;
  padding: 0.875rem 0;
  border: 0;
  border-bottom: 1px solid #d0d0d6;
  background: none;
  color: #5f5f68;
  font: inherit;
  font-size: 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, padding-left 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.nx-golpes_aba::before {
  content: "";
  flex: none;
  width: 0;
  height: 2px;
  background: #1b7f4d;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.nx-golpes_aba:hover { color: #18181b; }
.nx-golpes_aba[aria-selected="true"] { color: #18181b; }
.nx-golpes_aba[aria-selected="true"]::before { width: 1.75rem; }

.nx-golpes_desc { margin: 0; color: #52525b; }
.nx-golpes_desc[hidden] { display: none; }
/* Irmã do grid: fica sob a coluna de texto no desktop e depois dos cartões no
   empilhado, onde a ordem de leitura muda. */
.nx-golpes_nota {
  grid-column: 2;
  margin: -3rem 0 0;
  color: #64646d;
  font-size: 0.875rem;
}

@media (max-width: 991px) {
  .nx-golpes_wrapper { grid-template-columns: 1fr; gap: 2rem; }
  /* A mídia vem primeiro no código; no empilhado o texto guia a leitura. */
  .nx-golpes_media { order: 2; }
  .nx-golpes_texto { order: 1; }
  .nx-golpes_nota { grid-column: 1; order: 3; margin: 0; }

  /* Categorias numa fila só, que rola. Em coluna elas comiam meia tela de
     altura antes de a pessoa chegar nos cartões. A fila sangra pelo padding
     lateral para tocar a borda da tela, e o golpes.js traz a atual para o
     meio a cada troca — quem só olha nunca perde a categoria da vez. */
  .nx-golpes_abas {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    border-top: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--nx-sangra) * -1);
    padding-inline: var(--nx-sangra);
    scroll-padding-inline: var(--nx-sangra);
  }
  .nx-golpes_abas::-webkit-scrollbar { display: none; }
  .nx-golpes_aba {
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
    width: auto;
    min-height: 3.25rem;
    padding: 0.8rem 1.35rem;
    border: 1px solid #c9c9d0;
    border-radius: 99px;
    font-size: 1.0625rem;
    text-align: center;
    white-space: nowrap;
    scroll-snap-align: center;
    transition: color 0.2s, background-color 0.25s, border-color 0.25s;
  }
  .nx-golpes_aba::before { display: none; }   /* o traço vira o próprio preenchimento */
  .nx-golpes_aba[aria-selected="true"] {
    border-color: transparent;
    background: #1b7f4d;
    color: #fff;
  }
}

@media (max-width: 767px) {
  .section_nx-golpes .padding-section-medium { padding-block: 4rem; }

  .section_nx-golpes { --nx-sangra: 1.5rem; }

  /* Os dois cartões viram um trilho que corre na horizontal, um por vez, com
     o segundo espiando na borda para dizer que ele existe. Empilhados eram
     quase mil pixels de rolagem antes da próxima categoria; lado a lado num
     grid sobrava 158px de largura para cada um. */
  .nx-golpes_grupo {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--nx-sangra) * -1);
    padding-inline: var(--nx-sangra);
    scroll-padding-inline: var(--nx-sangra);
  }
  .nx-golpes_grupo::-webkit-scrollbar { display: none; }
  .nx-golpes_cartao {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .nx-golpes_grupo > .nx-golpes_cartao:nth-child(2) { margin-top: 0; }
  .nx-golpes_cartao-texto { padding: 1.5rem 1.25rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-golpes_enche,
  .nx-golpes_cartao,
  .nx-golpes_cartao-acao,
  .nx-golpes_cartao-acao::after,
  .nx-golpes_aba,
  .nx-golpes_aba::before { transition: none !important; }
  .nx-golpes_grupo.is-ativo > .nx-golpes_cartao { animation: none; }
}

/* O herói do modal é um slot deitado e a foto do golpe é em pé: o corte central
   cortava o rosto. Escopado no grupo para não mexer nos modais do template. */
[data-modal-group="golpes"] .modal-dialog__hero-img { object-position: center 22%; }

/* ─────────────────────────────────────────── fui vítima (#fui-vitima) ──
 * Os cinco passos de quem caiu num golpe, na mecânica do howitworks do
 * template: seção alta, palco preso na tela, a rolagem escolhe o passo.
 *
 * As classes visuais (.howitworks__*) são as de lá — é o mesmo componente. Os
 * atributos são próprios (data-caminho-*) porque o script do template faz
 * document.querySelector('[data-howitworks]'), pega o primeiro da página e tem
 * TOTAL = 4 fixo; aqui são cinco passos e outra seção.
 *
 * O tom é o oposto do original: lá a fotografia é escura e o texto branco. Aqui
 * as fotos são claras de propósito, então o véu clareia em vez de escurecer e o
 * texto usa as variantes --dark que o próprio template já traz.
 */
.section_nx-caminho { background: #fff; }

/* A abertura fica presa no alto e vale para os cinco passos: é o enunciado do
   que vem embaixo, não o primeiro cartão. O palco desce o tanto que ela ocupa
   — o caminho.js mede e publica em --nx-abertura — em vez de ficar por baixo,
   que cortaria a cabeça das pessoas nas fotos. */
.nx-caminho_abertura {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #fff;
}
.section_nx-caminho .nx-caminho_abertura.padding-section-medium {
  padding-block: calc(var(--nx-cabecalho, 3.5rem) + 1rem) 1.5rem;
}
/* Duas colunas: título à esquerda, apoio à direita. Empilhados, o título só
   podia crescer tirando altura do palco — e o palco que encolhe corta a cabeça
   das pessoas nas fotos. Lado a lado, ele cresce para dentro da largura que
   estava sobrando e a faixa fica até mais baixa do que era. */
.nx-caminho_abertura-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: end;
}
.nx-caminho_abertura .heading-style-h2 {
  margin: 0;
  /* Maior que o título dos passos (3rem no teto). Se os dois tivessem o mesmo
     corpo, a faixa leria como mais um passo em vez de como o enunciado deles. */
  font-size: clamp(2.75rem, 3.7vw, 3.75rem);
  line-height: 1.05;
}
/* O mesmo ponto verde dos passos, parado: diz que a faixa e os cinco cartões
   embaixo dela são a mesma coisa. */
.nx-caminho_abertura .nx-olho {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  color: #1b7f4d;
  font-size: 1rem;
}
.nx-caminho_abertura .nx-olho::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #1b7f4d;
}
.nx-caminho_intro { max-width: 32rem; margin: 0 0 0.4rem; color: #52525b; }

.section_nx-caminho .howitworks__stage {
  top: var(--nx-abertura, 0.5rem);
  height: calc(100svh - var(--nx-abertura, 0.5rem) - 0.5rem);
}

/* 100vh por passo, mais a cauda que o caminho.js reserva no fim para o quinto
   passo ficar parado antes de a seção sair. */
.nx-caminho_trilho { height: 575vh; }

/* Véu claro: as fotos têm o lado esquerdo vazio e quase branco, e o texto
   escuro precisa de piso garantido mesmo se a foto for trocada. */
.nx-caminho_veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgb(255 255 255 / 92%) 0%,
    rgb(255 255 255 / 84%) 34%,
    rgb(255 255 255 / 38%) 58%,
    rgb(255 255 255 / 0%) 80%
  );
}

/* ---- o passo ocupa o palco ----
 * O palco é a tela inteira; o texto do template foi desenhado para um quadro
 * menor e aqui virava um recado no canto. A coluna fica estreita de propósito:
 * o título cresce quebrando em poucas linhas, em vez de atravessar a foto e
 * sair da parte clareada pelo véu. */
.section_nx-caminho .howitworks__content-slot {
  left: 4.5rem;
  width: 38rem;
  max-width: calc(100% - 9rem);
}
/* O passo vive numa caixa fechada: do topo do palco até logo acima da régua, e
   centrado dentro dela. Ancorado só por um lado ele crescia para fora — por
   baixo passava por cima da régua, por cima saía do palco e o título era
   cortado. Fechada nas duas pontas, não há para onde escapar. */
.section_nx-caminho .howitworks__content,
.section_nx-caminho .howitworks__content.is-active {
  top: 0;
  bottom: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: none;
}
.section_nx-caminho .howitworks__title {
  margin: 0 0 0.85rem;
  /* Cabe "Registre a ocorrência" numa linha só na coluna de 38rem. Maior que
     isto e os títulos de duas palavras quebravam, empurrando o bloco. */
  font-size: clamp(2.25rem, 3vw, 3rem);
  line-height: 1.08;
}
.section_nx-caminho .howitworks__body {
  max-width: 30rem;
  font-size: clamp(1.125rem, 1.35vw, 1.375rem);
  line-height: 1.45;
  color: #2b2b31;
}

/* O ponto que pulsa marca o passo que está no ar. É o único movimento contínuo
   da seção — o resto só se mexe quando a rolagem manda. */
/* A foto do passo no ar deriva devagar. São fotografias paradas e a seção fica
   quase um minuto na tela: sem isso o quadro congela. O passo dura ~1 tela de
   rolagem, e a deriva é lenta o bastante para nunca chegar ao fim dela. */
@keyframes nx-deriva {
  from { transform: scale(1.015); }
  to   { transform: scale(1.085); }
}
.section_nx-caminho .howitworks__bg.is-active img {
  animation: nx-deriva 14s cubic-bezier(0.16, 0.6, 0.35, 1) both;
}
/* O palco é mais achatado que a foto, então o corte é em cima e embaixo. Nestas
   fotos a cabeça está no terço de cima: o corte tem que sair de baixo. */
.section_nx-caminho .howitworks__bg img { object-position: center 22%; }

.nx-caminho_num {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  color: #1b7f4d;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.nx-caminho_num::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #1b7f4d;
  animation: nx-pulso 2.2s ease-in-out infinite;
}
@keyframes nx-pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.6); }
}

/* O detalhe que faltava: o erro que se comete naquele passo, ou o que ninguém
   lembra de guardar. É o que a seção existe para dizer. */
.nx-caminho_nota {
  max-width: 30rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgb(24 24 27 / 16%);
  color: #4f4f57;
  font-size: 1rem;
  line-height: 1.5;
}

.nx-caminho_passo { position: relative; }

/* As quatro linhas entram uma depois da outra quando o passo troca. */
.section_nx-caminho .nx-caminho_passo > * {
  opacity: 0;
  transform: translateY(0.85rem);
  transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.section_nx-caminho .howitworks__content.is-active .nx-caminho_passo > * { opacity: 1; transform: none; }
.section_nx-caminho .howitworks__content.is-active .nx-caminho_passo > :nth-child(1) { transition-delay: 0.06s; }
.section_nx-caminho .howitworks__content.is-active .nx-caminho_passo > :nth-child(2) { transition-delay: 0.13s; }
.section_nx-caminho .howitworks__content.is-active .nx-caminho_passo > :nth-child(3) { transition-delay: 0.2s; }
.section_nx-caminho .howitworks__content.is-active .nx-caminho_passo > :nth-child(4) { transition-delay: 0.27s; }

/* ---- a régua dos cinco passos ----
 * Sai da direita, onde boiava sobre a fotografia e ficava ilegível conforme a
 * imagem, e desce para baixo do texto: o véu garante o piso claro, e a pessoa
 * lê o passo e sabe onde está sem mudar o olho de lugar. */
/* Uma barra só, atravessando os cinco passos e enchendo com a rolagem. Cinco
   pedaços separados diriam a mesma coisa em cinco lugares; a barra inteira diz
   de uma vez quanto do caminho já passou. */
.section_nx-caminho .howitworks__nav::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1b7f4d;
  transform: scaleX(var(--nx-progresso, 0));
  transform-origin: left center;
}
.section_nx-caminho .howitworks__nav {
  top: auto;
  right: auto;
  bottom: 4rem;
  left: 4.5rem;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  border-left: 0;
  border-top: 1px solid rgb(24 24 27 / 18%);
  transform: none;
}
.section_nx-caminho .howitworks__nav .li { display: flex; }
.section_nx-caminho .howitworks__nav-item {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.3rem;
  width: auto;
  min-height: 3.25rem;
  padding: 0.95rem 1.5rem 0 0;
  border: 0;
  color: #57575f;
  font-size: 1rem;
  transition: color 0.25s;
}
.section_nx-caminho .howitworks__nav-item:hover { color: #18181b; }
.section_nx-caminho .howitworks__nav-item.is-active { color: #18181b; }
/* No template o rótulo só abre no item da vez. Aqui os cinco ficam à mostra:
   é uma lista de o-que-fazer, e serve para ler antes de chegar em cada um. */
.section_nx-caminho .howitworks__nav-label {
  opacity: 1;
  max-width: none;
  overflow: visible;
  text-align: left;
  white-space: nowrap;
}
.section_nx-caminho .howitworks__nav-num {
  color: #8a8a92;
  font-size: 0.875rem;
}
.section_nx-caminho .howitworks__nav-item.is-active .howitworks__nav-num { color: #1b7f4d; }

@media (max-width: 991px) {
  .nx-caminho_trilho { height: 495vh; }

  /* A foto é deitada e o palco fica em pé: o corte come as laterais, e a
     pessoa — que no quadro está à direita — sumia. O enquadramento anda até
     ela e o véu vira vertical, deixando o texto em cima e a cena embaixo. */
  /* As regras acima têm duas classes e passam por cima das do template, que
     têm uma só — inclusive das que ele reserva para telas pequenas. Aqui elas
     são desfeitas uma a uma. */
  .section_nx-caminho .howitworks__content-slot {
    left: auto;
    inset: 0 1.5rem;
    width: auto;
    max-width: none;
  }
  /* O texto deixa de nascer no topo e passa a ficar preso logo acima da régua.
     Duas coisas de uma vez: sai de cima do rosto, que nestas fotos fica no
     terço de cima do quadro, e não tem mais como invadir a régua — quando
     cresce, cresce para cima, não para baixo. */
  /* No celular a abertura volta a ser um bloco que passa: presa, ela comeria a
     metade da tela que a cena precisa. */
  .nx-caminho_abertura { position: static; }
  .nx-caminho_abertura-grade { grid-template-columns: 1fr; gap: 1.25rem; }
  .nx-caminho_abertura .heading-style-h2 { font-size: clamp(2rem, 8.5vw, 2.75rem); }
  .nx-caminho_intro { max-width: none; margin-bottom: 0; }
  .section_nx-caminho .nx-caminho_abertura.padding-section-medium { padding-block: 4rem 3rem; }
  .section_nx-caminho .howitworks__stage { top: 0; height: 100dvh; }

  .section_nx-caminho .howitworks__content,
  .section_nx-caminho .howitworks__content.is-active {
    top: 0;
    justify-content: flex-end;
    bottom: 5rem;
    /* O template segura o bloco em 75% da largura; aí o fundo dele parava no
       meio da tela e deixava uma emenda vertical na foto. */
    max-width: none;
    transform: none;
  }
  /* O branco é do texto, não do palco: preso ao bloco de texto, ele acompanha a
     altura que o passo tiver e a altura que o aparelho tiver. Preso à caixa —
     que vai do topo do palco até a régua — cobria a fotografia inteira. */
  .section_nx-caminho .nx-caminho_passo::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2.25rem;
    right: -1.5rem;
    bottom: -6rem;
    left: -1.5rem;
    background: linear-gradient(
      180deg,
      rgb(255 255 255 / 0%) 0%,
      rgb(255 255 255 / 62%) 22%,
      rgb(255 255 255 / 93%) 40%,
      rgb(255 255 255 / 97%) 60%
    );
  }

  .section_nx-caminho .howitworks__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .section_nx-caminho .howitworks__body { max-width: none; font-size: 1.0625rem; }
  .nx-caminho_nota { max-width: none; margin-top: 1rem; padding-top: 0.85rem; font-size: 0.9375rem; }
  .nx-caminho_num { margin-bottom: 0.5rem; font-size: 1.0625rem; }

  /* A régua fica embaixo, no mesmo lugar do desktop. Para isso o véu passa a
     clarear também o rodapé (ver .nx-caminho_veu abaixo). */
  .section_nx-caminho .howitworks__nav {
    top: auto;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    gap: 0.25rem;
  }
  .section_nx-caminho .howitworks__nav-item { padding-right: 0.6rem; }
  .section_nx-caminho .howitworks__nav-item {
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.6rem 0 0;
    font-size: 1.0625rem;
  }
  /* Cinco rótulos não cabem em 375px: fica a fila de números e o rótulo só do
     passo da vez, como o template já faz. */
  .section_nx-caminho .howitworks__nav-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s;
  }
  .section_nx-caminho .howitworks__nav-item.is-active .howitworks__nav-label {
    max-width: 9rem;
    opacity: 1;
  }

  .section_nx-caminho .howitworks__bg img { object-position: 74% center; }
  /* Sobra ao véu do palco só clarear a cena de leve; o piso do texto agora é o
     fundo do próprio bloco (ver .nx-caminho_passo::before acima). */
  .nx-caminho_veu {
    background: linear-gradient(
      180deg,
      rgb(255 255 255 / 14%) 0%,
      rgb(255 255 255 / 0%) 34%,
      rgb(255 255 255 / 0%) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Sem o vaivém dos fundos: o passo simplesmente aparece. */
  .section_nx-caminho .howitworks__bg.is-active,
  .section_nx-caminho .howitworks__bg.is-prev { animation: none; }
  .section_nx-caminho .howitworks__bg.is-prev { visibility: hidden; }
  .nx-caminho_num::before { animation: none; }
  .section_nx-caminho .howitworks__bg.is-active img { animation: none; }
  .section_nx-caminho .nx-caminho_passo > * { transition: none; opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────── desafio (#desafio) ──
 * As cinco situações, na grade sp2-check do template. As classes são as dele:
 * o único script pendurado ali é o [data-stagger], que roda por instância e não
 * disputa alvo com ninguém. O quiz vive dentro do modal do template, no grupo
 * "desafio" — mesmo mecanismo dos golpes, sidenav e navegação de graça.
 */
/* Um passo mais escuro que o cinza dos Golpes (#e9e9ec): a seção pede peso,
   e os cinzas de texto continuam acima de 4,5:1 sobre ele. */
.section_nx-desafio { background: #dcdce1; border-block: 1px solid #cfcfd6; }

.nx-desafio_topo { max-width: 46rem; }
/* O cinza secundário do template passa sobre branco, mas cai para 3,54:1 sobre
   este cinza mais escuro. */
.nx-desafio_intro { margin-top: 0.25rem; color: #4a4a53; }

/* Cinco cartões, cinco colunas: quatro deixariam o quinto sozinho na linha. */
.nx-desafio_grade { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }

.nx-desafio_cartao {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nx-desafio_cartao .sp2-check_image {
  width: 100%;
  /* Sem isto o atributo height="737" do <img> vale como altura e o
     aspect-ratio: 1 do template não chega a ser usado. */
  height: auto;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Ilustração, não fotografia: fundo branco e a figura respirando dentro dele.
   A foto repetia os rostos dos Golpes logo acima e pesava a seção. */
.nx-desafio_cartao .sp2-check_image-wrap {
  overflow: hidden;
  border-radius: 0.75rem;
  background: #fff;
  border: 1px solid #cfcfd6;
}
.nx-desafio_cartao .sp2-check_image { padding: 14%; }
.nx-desafio_cartao:hover .sp2-check_image,
.nx-desafio_cartao:focus-visible .sp2-check_image { transform: scale(1.04); }

.nx-desafio_cartao .check-item_content {
  align-items: flex-start;
  padding: 1rem 0 0;
  text-align: left;
}
.nx-desafio_cartao .heading-style-h4 { font-size: 1.0625rem; line-height: 1.3; }
.nx-desafio_cartao:hover .heading-style-h4 { text-decoration: underline; text-underline-offset: 4px; }

/* Por onde a situação chega. É a primeira coisa que a pessoa reconhece. */
.nx-desafio_cartao .check-item_number {
  background: #0d1b3d;
  color: #fff;
}
.nx-desafio_canal {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid #d4d4d8;
  background: #f4f4f5;
  color: #3f3f46;
  font-size: 0.8125rem;
}
.nx-desafio_quantas { color: #5f5f68; font-size: 0.9375rem; }

/* O .button-wrap do template é display:none — ele só aparece com uma variante
   que esta seção não usa. */
.nx-desafio_acao { display: flex; justify-content: center; }

/* ---- botão ----
 * Geometria do .sp2_btn do template; a classe fica de fora porque ela carrega
 * o estado de carregamento dos formulários dele. */
.nx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 5rem;
  background: #18181b;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nx-btn:hover, .nx-btn:focus-visible { background: #1b7f4d; }

/* ---- quiz, dentro do modal ---- */
.nx-quiz_opcoes { display: grid; gap: 0.625rem; }

.nx-quiz_opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #d4d4d8;
  border-radius: 0.75rem;
  background: #fff;
  color: #18181b;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.nx-quiz_opcao:hover:not(:disabled) { border-color: #18181b; }
.nx-quiz_opcao:disabled { cursor: default; }

.nx-quiz_letra {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid #d4d4d8;
  border-radius: 50%;
  font-size: 0.875rem;
}
.nx-quiz_texto { line-height: 1.45; }

/* A resposta segura acende sempre, escolhida ou não: quem errou precisa sair
   sabendo qual era. */
.nx-quiz_opcao.is-segura {
  border-color: #1b7f4d;
  background: rgb(27 127 77 / 7%);
}
.nx-quiz_opcao.is-segura .nx-quiz_letra { border-color: #1b7f4d; color: #1b7f4d; }
.nx-quiz_opcao.is-perdida { border-color: #b45309; background: rgb(180 83 9 / 6%); }
.nx-quiz_opcao.is-perdida .nx-quiz_letra { border-color: #b45309; color: #b45309; }
.nx-quiz_opcao.is-escolhida { border-width: 2px; }

.nx-quiz_retorno {
  margin: 1rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid #b45309;
  color: #3f3f46;
  line-height: 1.5;
}
.nx-quiz_retorno.is-segura { border-left-color: #1b7f4d; }

.nx-quiz_regra {
  display: grid;
  gap: 0.25rem;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  background: #f4f4f5;
}
.nx-quiz_regra-rotulo { color: #1b7f4d; font-size: 0.875rem; }
.nx-quiz_regra-texto { line-height: 1.5; }

.nx-quiz_refazer {
  margin-top: 0.9rem;
  padding: 0;
  border: 0;
  background: none;
  color: #3f3f46;
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

@media (max-width: 991px) {
  /* Trilho que corre, como nos golpes: cinco em duas colunas deixariam um
     sozinho, e em uma coluna seriam cinco telas de rolagem. */
  .nx-desafio_grade {
    display: flex;
    grid-template-columns: none;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    scroll-padding-inline: 1.5rem;
    /* O .sp2-check_component e um flex column com align-items: center, entao a
       trilha herda align-self: center e passa a ser medida pelo conteudo — dava
       450px numa tela de 375 e a pagina inteira rolava na horizontal. Esticando,
       a largura vira a do container mais a sangria, que e a da tela. */
    align-self: stretch;
    min-width: 0;
  }
  .nx-desafio_grade::-webkit-scrollbar { display: none; }
  .nx-desafio_cartao { flex: 0 0 66%; scroll-snap-align: start; }
}

@media (max-width: 600px) {
  .nx-desafio_cartao { flex-basis: 78%; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-desafio_cartao .sp2-check_image { transition: none; }
}

/* ── Rodape: nada mais largo que a tela ─────────────────────────────────────
   Os grupos do rodape sao filhos de um flex em coluna que nao os estica, entao
   cada um fica com a largura do proprio conteudo. Quando o conteudo e mais
   largo que a coluna — o campo de e-mail com o botao ao lado, ou os links em
   duas colunas numa tela estreita — ele transborda e e a pagina inteira que
   passa a rolar na horizontal. Estas regras prendem cada grupo ao container e
   liberam o que precisa encolher. */
@media (max-width: 991px) {
  .footer2_group1,
  .footer2_group2,
  .footer2_column {
    max-width: 100%;
    min-width: 0;
  }
  /* O campo e o botao cabem lado a lado enquanto der; abaixo disso o botao
     desce em vez de furar a tela. */
  .newsletter_footer-form { flex-wrap: wrap; }
  .newsletter_input-field {
    flex: 1 1 12rem;
    min-width: 0;
  }
  .footer2_column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Numa tela bem estreita duas colunas de links deixam cada uma com pouco mais
   de cem pixels e os rotulos quebram no meio. Uma coluna so. */
@media (max-width: 479px) {
  .footer2_column { grid-template-columns: minmax(0, 1fr); }
}

/* ── O projeto ─────────────────────────────────────────────────────────────
   A seção reaproveita o desenho do .sp2-membership: centrada, com a lista de
   40rem no meio. O que entra de novo e o texto de abertura e o par de cartoes
   de uso, que respondem as duas perguntas que o rodape promete. */
.nx-projeto_lead {
  max-width: 40rem;
  margin: 0;
  color: #52525b;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.nx-projeto_uso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 40rem;
  max-width: 100%;
  margin-top: 0.5rem;
}
.nx-projeto_uso-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid #e4e4e7;
  border-radius: 0.75rem;
  text-align: left;
}
.nx-projeto_uso-item b {
  font-size: 1rem;
  font-weight: 600;
  color: #18181b;
}
.nx-projeto_uso-item span {
  color: #52525b;
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .nx-projeto_uso { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────────────────────── o que ainda e do Nexfrigo, oculto ──
 * As secoes abaixo continuam no HTML, intactas, mas fora da pagina: sao as que
 * ainda carregam o conteudo do frigorifico e ainda nao foram substituidas pelas
 * do Idoso Seguro.
 *
 * Ficam escondidas por atributo, e nao apagadas, porque a estrutura delas ainda
 * serve de forma para as secoes que faltam (Aprender, A regra, Para a familia).
 * Para rever qualquer uma durante o trabalho, basta tirar o data-oculto do
 * elemento — ou comentar a regra abaixo para ver todas de novo.
 *
 * Oculto hoje:  #como-funciona · #plataforma (com o FAQ #duvidas dentro)
 *               #planos · #contato · os 9 modais do grupo "faq"
 */
[data-oculto="nexfrigo"] {
  display: none !important;
}

/* ─────────────────────────────────────────────────── o véu da abertura ──
 * O template traz duas camadas pretas ancoradas na base — uma em `overlay` e outra em
 * `darken` — que juntas esmagam os meios-tons: a cortina clara vira cinza e o rosto some
 * na sombra.
 *
 * Aqui volta o véu do site que estava no ar: uma faixa só, no azul da marca, escura no
 * topo (onde a barra pousa), quase limpa a 22% (é onde fica o rosto) e fechando embaixo,
 * onde o texto precisa de fundo.
 */
#sp-main-hero .sp-main-hero_gradient-overlay {
  display: none;
}

#sp-main-hero .sp-main-hero_gradient-darken {
  inset: 0;
  height: auto;
  opacity: 1;
  mix-blend-mode: normal;
  background-image:
    /* Onde o texto mora. O reforço antigo vinha da esquerda, de quando a copy ficava
       daquele lado; ela agora fica à direita, e a esquerda — onde está a pessoa e a
       parte mais escura da cena — não recebe sombra nenhuma. */
    linear-gradient(
      90deg,
      rgba(6, 13, 28, 0) 26%,
      rgba(6, 13, 28, 0.60) 62%,
      rgba(6, 13, 28, 0.86) 100%
    ),
    /* Topo para a barra pousar, base para as três notas. */
    linear-gradient(
      rgba(6, 13, 28, 0.30) 0%,
      rgba(6, 13, 28, 0.04) 26%,
      rgba(6, 13, 28, 0.34) 74%,
      rgba(6, 13, 28, 0.72) 100%
    );
}

/* A etiqueta da abertura pousa na parte clara da imagem, e é o único texto
 * pequeno ali: com o véu leve ela cai para 4,2:1, abaixo do mínimo. Em vez de
 * escurecer a foto inteira por causa de uma linha, a linha ganha o próprio
 * fundo — que também a destaca como etiqueta, que é o que ela é.
 */
#sp-main-hero .badge_block.is-white {
  align-self: flex-start;
  width: fit-content;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border-radius: 100px;
  background-color: rgba(6, 13, 28, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* No celular o texto ocupa a largura toda e fica embaixo: o reforço lateral não tem
 * onde agir, e o que vale é o degradê vertical, um pouco mais fechado no pé. */
@media (max-width: 991px) {
  #sp-main-hero .sp-main-hero_gradient-darken {
    background-image: linear-gradient(
      rgba(6, 13, 28, 0.30) 0%,
      rgba(6, 13, 28, 0.04) 26%,
      rgba(6, 13, 28, 0.46) 68%,
      rgba(6, 13, 28, 0.82) 100%
    );
  }
}