/* =========================================================================
   EVOLUTION NR-1: CSS próprio da landing /plataforma/planos/nr1/

   Carregado SÓ por esta página, depois de style.css, planos.css e precos.css.
   Não redefine token global: acrescenta os da página no escopo `.nr1`.

   Por que um arquivo próprio: style.css é pedido com o mesmo ?v= por 10 páginas e
   planos.css por 5. Mexer neles para redesenhar uma página obrigaria a trocar a
   versão em todas, e as suítes hero-plataforma-mobile e planos-cabecalho reprovam
   quando isso sai pela metade.
   ========================================================================= */

.nr1 {
    --nr1-elev: #1a1a1a;
    --nr1-ouro-forte: #e5c151;
    --nr1-raio: 12px;
    --nr1-raio-g: 16px;
    --nr1-ease: cubic-bezier(.16, 1, .3, 1);
    --nr1-borda: rgba(255, 255, 255, 0.09);
    --nr1-borda-ouro: rgba(var(--primary-gold-rgb), 0.3);
    /* Classificação de risco: a MESMA escala do relatório (nr1_classificacao_cor), em tons
       mais claros para texto e forma sobre fundo escuro. A cor nunca vem sozinha: todo
       uso traz o rótulo escrito ao lado. */
    --nr1-critico: #f87171;
    --nr1-alto: #fb923c;
    --nr1-medio: #facc15;
    --nr1-medio-baixo: #a3e635;
    --nr1-baixo: #4ade80;
}

/* ------------------------------------------------------ utilitários --- */

.nr1-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* `fixed`, e não `absolute`: com a página rolada, o link absoluto ficava lá em cima, fora
   da tela, e quem navega por teclado recebia o foco num elemento invisível. */
.nr1-pular {
    position: fixed;
    left: 1rem; top: -4rem;
    z-index: 2000;
    background: var(--primary-gold);
    color: #000;
    padding: 0.75rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    /* Transição PRÓPRIA e curta. Sem ela, o link herda o `all 0.4s` do style.css e leva
       quase meio segundo deslizando de fora da tela até o lugar, tempo em que ele aparece
       cortado na borda de cima. */
    transition: top 0.15s ease;
}
.nr1-pular:focus { top: 1rem; }
@media (prefers-reduced-motion: reduce) { .nr1-pular { transition: none; } }

/* O cabeçalho é fixo: a âncora não pode parar embaixo dele. */
.nr1 main section[id] { scroll-margin-top: 5.5rem; }
.nr1 main:focus { outline: none; }

/* Dois rótulos herdados vinham em 0.72rem (11,5 px), abaixo do piso de 12 px que esta
   página adota para legenda. Ajuste só no escopo `.nr1`: as outras páginas de plano não
   mudam de tamanho por causa desta. */
.nr1 .pl-ilustrativo { font-size: 0.75rem; }
.nr1 .pl-table thead th { font-size: 0.75rem; }

/* O hambúrguer do style.css desenha 28 x 18 px. As barras continuam do mesmo tamanho; o
   que cresce é a área de toque, para chegar aos 44 x 44 pedidos no celular. */
.nr1 .hamburger { padding: 14px; margin: -14px; box-sizing: content-box; }

.nr1 .pl-lead { font-size: 1.06rem; max-width: 62ch; }
.nr1-texto { color: var(--text-muted); font-size: 1rem; line-height: 1.7; max-width: 62ch; }

.nr1-cabeca { margin-bottom: 2.2rem; }
.nr1-cabeca .pl-lead { margin-bottom: 0; }
.nr1-cabeca--centro { text-align: center; }
.nr1-cabeca--centro .pl-h2, .nr1-cabeca--centro .pl-lead { margin-left: auto; margin-right: auto; }

/* Selo de classificação: cor + texto. */
.nr1-selo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}
.nr1-selo::before {
    content: "";
    width: 0.55rem; height: 0.55rem;
    border-radius: 2px;
    background: currentColor;
}
.nr1-selo--critico { color: var(--nr1-critico); }
.nr1-selo--alto { color: var(--nr1-alto); }
.nr1-selo--medio { color: var(--nr1-medio); }
.nr1-selo--medio_baixo { color: var(--nr1-medio-baixo); }
.nr1-selo--baixo { color: var(--nr1-baixo); }

/* ------------------------------------------------------------ hero --- */

.nr1-hero .pl-hero-grid { align-items: center; }

/* No desktop a frase rotativa mais longa ("compare unidades e setores.") quebrava em duas
   linhas a 3.2rem, e a reserva de altura deixava um vão sob a primeira frase. Com a coluna
   de texto um pouco mais larga e o título a 2.6rem, todas cabem em uma linha a partir de
   1025px. Medido no navegador em 1024, 1280 e 1440. */
@media (min-width: 1025px) {
    .nr1-hero .pl-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2.5rem; }
    .nr1-hero .nr1-h1,
    .nr1-hero .nr1-h1-din { font-size: clamp(2.2rem, 3.4vw, 2.6rem); }
}
.nr1-hero .pl-badge { margin-bottom: 1.2rem; }

.nr1-h1 {
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.1;
    margin-bottom: 0;
    letter-spacing: -0.01em;
}
/* O rotativo saiu de dentro do H1: o que era bloco irmão DENTRO do título virou parágrafo
   irmão DO título, e a margem de baixo passou para ele.

   Os dois seletores abaixo precisam de 0,2,x para vencer as regras compartilhadas de
   `.pl-hero h1` e `.pl-hero .pl-h1-din`, que valem 0,1,1. Com uma classe só eles perderiam
   sem avisar, que foi o que sempre aconteceu com o `margin-bottom: 1.2rem` daqui. */
.pl-hero h1.nr1-h1 { margin-bottom: 0; }
.pl-hero .nr1-h1-din { letter-spacing: -0.01em; }
.nr1-h1-fixo { display: block; }

/* O trecho que alterna. As quatro frases ficam empilhadas na MESMA célula da grade: a
   altura é sempre a da maior, com ou sem JS, então a troca não empurra nada (CLS zero).
   Sem JS, só a primeira aparece; as outras existem no HTML com visibility:hidden. */
.nr1-rot {
    display: grid;
    color: var(--primary-gold);
}
.nr1-rot-item {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
}
.nr1-rot-item.is-ativo { visibility: visible; opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
    .nr1-rot.is-pronto .nr1-rot-item {
        transform: translateY(10px);
        clip-path: inset(0 0 100% 0);
        transition:
            opacity 440ms var(--nr1-ease),
            transform 440ms var(--nr1-ease),
            clip-path 440ms var(--nr1-ease),
            visibility 0s linear 440ms;
    }
    .nr1-rot.is-pronto .nr1-rot-item.is-ativo {
        transform: none;
        clip-path: inset(0 0 0 0);
        transition:
            opacity 440ms var(--nr1-ease),
            transform 440ms var(--nr1-ease),
            clip-path 440ms var(--nr1-ease),
            visibility 0s;
    }
}

.nr1-hero .pl-hero-sub { font-size: 1.1rem; max-width: 52ch; }
.nr1-micro { font-size: 0.9rem; color: var(--text-muted); margin: -0.6rem 0 1.4rem; }

.nr1-provas {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.2rem;
    max-width: 30rem;
}
.nr1-provas li {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.93rem; color: var(--text-main);
}
.nr1-provas i { color: var(--primary-gold); font-size: 0.85rem; width: 1rem; text-align: center; }

/* Prévia do relatório */
.nr1-preview {
    margin: 0;
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio-g);
    background: linear-gradient(160deg, #181818, #0f0f0f);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    padding: 1.2rem;
}
.nr1-preview-topo {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.6rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--nr1-borda);
    margin-bottom: 1rem;
}
.nr1-preview-titulo { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text-main); }
.nr1-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--nr1-borda-ouro);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--primary-gold);
    background: rgba(var(--primary-gold-rgb), 0.06);
}
.nr1-preview-corpo {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.1rem;
    align-items: center;
}
.nr1-preview-radar svg { display: block; width: 100%; height: auto; }
.nr1-mini-titulo {
    font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 0.55rem; font-weight: 600;
}
.nr1-prio { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.nr1-prio li { font-size: 0.86rem; color: var(--text-main); }
.nr1-prio-linha { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.nr1-prio-linha span:first-child { min-width: 0; }
.nr1-barra { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); margin-top: 0.35rem; overflow: hidden; }
.nr1-barra i { display: block; height: 100%; border-radius: 4px; background: var(--nr1-alto); transform-origin: left; }
.nr1-barra i.medio { background: var(--nr1-medio); }
.nr1-barra i.medio_baixo { background: var(--nr1-medio-baixo); }
.nr1-barra i.baixo { background: var(--nr1-baixo); }

.nr1-dist-barra { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-bottom: 0.55rem; }
.nr1-dist-barra i { display: block; height: 100%; }
.nr1-dist-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.nr1-dist-legenda li { font-size: 0.78rem; color: var(--text-muted); }
.nr1-dist-legenda b { color: var(--text-main); font-weight: 600; }
.nr1-preview-rodape { margin: 1rem 0 0; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nr1-preview-rodape small { font-size: 0.78rem; color: var(--text-muted); }

.nr1-radar-grade { fill: none; stroke: rgba(255, 255, 255, 0.08); }
.nr1-radar-eixo { stroke: rgba(255, 255, 255, 0.12); }
.nr1-radar-area { fill: rgba(var(--primary-gold-rgb), 0.16); stroke: var(--primary-gold); stroke-width: 2; stroke-linejoin: round; }
.nr1-radar-ponto { fill: var(--nr1-alto); stroke: #0f0f0f; stroke-width: 1.5; }
.nr1-radar-num { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; fill: var(--text-muted); }
.nr1-radar-num.is-alto { fill: var(--nr1-alto); }

/* ------------------------------------------------------ transição --- */

.nr1-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.nr1-card {
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio-g);
    background: var(--pl-surface);
    padding: 1.4rem;
}
.nr1-card h3 { font-size: 1.1rem; margin-bottom: 0.45rem; }
.nr1-card p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.65; margin: 0; }
.nr1-card-visual { height: 44px; margin-bottom: 1rem; display: flex; align-items: flex-end; gap: 5px; }
.nr1-card-visual svg { height: 44px; width: auto; }

/* ------------------------------------------------------- 4 etapas --- */

.nr1-etapas {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: nr1-etapa;
}
.nr1-etapa {
    position: relative;
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio-g);
    background: var(--pl-surface);
    padding: 1.4rem 1.4rem 1.4rem 4.6rem;
    counter-increment: nr1-etapa;
}
.nr1-etapa::before {
    content: counter(nr1-etapa, decimal-leading-zero);
    position: absolute; left: 1.3rem; top: 1.3rem;
    width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--nr1-borda-ouro);
    background: rgba(var(--primary-gold-rgb), 0.07);
    color: var(--primary-gold);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95rem;
}
.nr1-etapa h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.nr1-etapa p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.65; margin: 0; }

/* ------------------------------------------------------- relatórios --- */

.nr1-tablist {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.35rem;
    border: 1px solid var(--nr1-borda);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.2rem;
    background: rgba(255, 255, 255, 0.02);
}
.nr1-tab {
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: 600 0.95rem 'Outfit', sans-serif;
    cursor: pointer;
    transition: background-color .25s var(--nr1-ease), color .25s var(--nr1-ease);
}
.nr1-tab:hover { color: var(--text-main); }
.nr1-tab[aria-selected="true"] { background: var(--primary-gold); color: #000; }

.nr1-painel {
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio-g);
    background: linear-gradient(170deg, #161616, #0e0e0e);
    padding: 1.4rem;
}
.nr1-painel:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 3px; }
.nr1-painel-cabeca {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 0.6rem; margin-bottom: 1.2rem;
}
.nr1-painel-cabeca h3 { font-size: 1.15rem; margin: 0; }
.nr1-painel-grade {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1.6rem;
    align-items: start;
}
.nr1-bloco-rot { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.7rem; font-weight: 600; }
.nr1-radar-grande svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }

.nr1-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.nr1-ranking li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; font-size: 0.9rem; }
.nr1-ranking .nr1-num { font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--text-muted); font-size: 0.85rem; text-align: right; }
.nr1-ranking .nr1-nome { color: var(--text-main); min-width: 0; }
.nr1-ranking .nr1-barra { margin-top: 0.3rem; }
.nr1-ranking .nr1-valor { font-variant-numeric: tabular-nums; text-align: right; }
.nr1-ranking .nr1-valor b { display: block; color: var(--text-main); font-weight: 600; font-size: 0.9rem; }

.nr1-destaque {
    margin-top: 1.2rem;
    border: 1px solid var(--nr1-borda-ouro);
    border-radius: var(--nr1-raio);
    background: rgba(var(--primary-gold-rgb), 0.05);
    padding: 1rem 1.1rem;
}
.nr1-destaque p { margin: 0; color: var(--text-main); font-size: 0.95rem; line-height: 1.6; }
.nr1-destaque dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0.8rem 0 0; }
.nr1-destaque dt { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.nr1-destaque dd { margin: 0.15rem 0 0; font-family: 'Outfit', sans-serif; color: var(--text-main); font-size: 1rem; }

.nr1-recorte-nivel { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.nr1-recorte-nivel li {
    padding: 0.3rem 0.8rem; border-radius: 999px;
    border: 1px solid var(--nr1-borda); font-size: 0.85rem; color: var(--text-muted);
}
.nr1-recorte-nivel li[aria-current="true"] { border-color: var(--nr1-borda-ouro); color: var(--primary-gold); }

/* No celular o mapa inteiro em 360 px deixaria o texto da célula em 6 px. Em vez de
   encolher a letra, a MOLDURA rola na horizontal e o desenho mantém a largura mínima que
   preserva o tamanho do texto. A rolagem é do bloco, nunca da página. */
.nr1-mapa-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nr1-mapa svg { display: block; width: 100%; height: auto; min-width: 470px; }
.nr1-mapa text { font-family: 'Outfit', sans-serif; }
.nr1-mapa .m-col { font-size: 12px; fill: var(--text-muted); letter-spacing: 0.04em; }
.nr1-mapa .m-rot { font-size: 13px; fill: var(--text-main); }
.nr1-mapa .m-cel { font-size: 12.5px; font-weight: 600; fill: #f5f5f5; }

.nr1-bloqueado {
    display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: var(--nr1-raio);
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.015);
}
.nr1-bloqueado i { color: var(--text-muted); font-size: 1.1rem; margin-top: 0.15rem; }
.nr1-bloqueado b { display: block; color: var(--text-main); font-size: 0.95rem; margin-bottom: 0.2rem; }
.nr1-bloqueado p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }

.nr1-5w2h {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 0;
}
.nr1-5w2h > div {
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio);
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.02);
}
.nr1-5w2h dt { font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--primary-gold); margin-bottom: 0.25rem; font-weight: 600; }
.nr1-5w2h dd { margin: 0; color: var(--text-main); font-size: 0.95rem; line-height: 1.55; }
.nr1-5w2h .nr1-5w2h-largo { grid-column: 1 / -1; }
.nr1-status { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--primary-gold); }
.nr1-status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }

.nr1-nota-operacao { margin: 1rem 0 0; font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; max-width: 72ch; }
.nr1-nota-operacao i { color: var(--primary-gold); margin-right: 0.35rem; }

/* ---------------------------------------------------------- fatores --- */

.nr1-fatores {
    list-style: none; margin: 0 0 1.6rem; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1rem;
}
.nr1-fatores li {
    display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.7rem; align-items: center;
    padding: 0.8rem 1rem;
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio);
    background: var(--pl-surface);
    color: var(--text-main);
    font-size: 0.98rem;
    line-height: 1.4;
}
.nr1-fatores .nr1-num {
    width: 2.2rem; height: 2.2rem; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--primary-gold-rgb), 0.08);
    color: var(--primary-gold);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.9rem;
}
.nr1-leitura {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0.8rem;
    align-items: stretch;
}
.nr1-leitura-item {
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio-g);
    padding: 1.1rem 1.2rem;
    background: rgba(255, 255, 255, 0.02);
}
.nr1-leitura-item h3 { font-size: 1.05rem; margin-bottom: 0.3rem; color: var(--text-main); }
.nr1-leitura-item p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.nr1-leitura-item--fim { border-color: var(--nr1-borda-ouro); background: rgba(var(--primary-gold-rgb), 0.05); }
.nr1-op { align-self: center; color: var(--primary-gold); font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 600; }

/* -------------------------------------------------------- anonimato --- */

.nr1-fluxo {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: nr1-fluxo;
}
.nr1-fluxo li {
    position: relative;
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio-g);
    background: var(--pl-surface);
    padding: 1.2rem;
}
.nr1-fluxo li i { color: var(--primary-gold); font-size: 1.15rem; margin-bottom: 0.7rem; display: block; }
.nr1-fluxo b { display: block; color: var(--text-main); font-size: 1rem; margin-bottom: 0.3rem; font-family: 'Outfit', sans-serif; }
.nr1-fluxo span { color: var(--text-muted); font-size: 0.93rem; line-height: 1.6; }
.nr1-fluxo li + li::before {
    content: "";
    position: absolute; left: -1rem; top: 50%;
    width: 1rem; height: 1px;
    background: var(--nr1-borda-ouro);
}

.nr1-compara {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem;
}
.nr1-compara > div {
    display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start;
    border-radius: var(--nr1-raio-g);
    padding: 1.1rem 1.2rem;
}
.nr1-compara-ok { border: 1px solid rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.04); }
.nr1-compara-ok i { color: var(--nr1-baixo); }
.nr1-compara-prot { border: 1px dashed rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.015); }
.nr1-compara-prot i { color: var(--text-muted); }
.nr1-compara i { font-size: 1.1rem; margin-top: 0.15rem; }
.nr1-compara b { display: block; color: var(--text-main); margin-bottom: 0.2rem; }
.nr1-compara p { margin: 0; color: var(--text-muted); font-size: 0.93rem; line-height: 1.6; }
.nr1-observacao { margin: 1rem 0 0; color: var(--text-main); font-size: 0.98rem; }

/* ------------------------------------------------------ plano/ciclos --- */

.nr1-trilha {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
}
.nr1-trilha li {
    position: relative;
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio);
    padding: 0.95rem 0.9rem;
    background: var(--pl-surface);
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    font-size: 0.98rem;
    line-height: 1.35;
}
.nr1-trilha li small { display: block; font-family: 'Inter', sans-serif; color: var(--text-muted); font-size: 0.85rem; margin-top: 0.3rem; line-height: 1.45; }
.nr1-trilha li:last-child { border-color: var(--nr1-borda-ouro); }
.nr1-trilha li + li::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: -0.55rem; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.6rem; color: var(--primary-gold);
}
.nr1-frase { margin: 1.1rem 0 0; color: var(--text-muted); font-size: 0.95rem; }
.nr1-frase i { color: var(--primary-gold); margin-right: 0.4rem; }

.nr1-ciclos {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.nr1-ciclos li {
    border-top: 2px solid var(--nr1-borda-ouro);
    padding: 1rem 0.2rem 0;
}
.nr1-ciclos b { display: block; font-family: 'Outfit', sans-serif; color: var(--text-main); font-size: 1.08rem; margin-bottom: 0.3rem; }
.nr1-ciclos span { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }

/* ---------------------------------------------------------- inclui --- */

.nr1-pilares {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.nr1-pilar {
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio-g);
    background: var(--pl-surface);
    padding: 1.3rem;
}
.nr1-pilar h3 { font-size: 1.05rem; margin-bottom: 0.7rem; color: var(--primary-gold); }
.nr1-pilar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.nr1-pilar li { position: relative; padding-left: 1.3rem; color: var(--text-main); font-size: 0.93rem; line-height: 1.5; }
.nr1-pilar li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: 0.2rem; font-size: 0.7rem; color: var(--primary-gold);
}
.nr1-mais { margin-top: 1.2rem; }
.nr1-mais > summary { list-style: none; }
.nr1-mais-corpo { padding-top: 1.2rem; }
.nr1-mais-corpo ul { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.1rem; color: var(--text-muted); }
.nr1-mais-corpo li { break-inside: avoid; margin-bottom: 0.45rem; line-height: 1.55; font-size: 0.95rem; }

/* ----------------------------------------------------- investimento --- */

.nr1-invest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 1.4rem;
    align-items: start;
}
.nr1-config {
    border: 1px solid var(--nr1-borda-ouro);
    border-radius: 20px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--primary-gold-rgb), 0.09), transparent 60%),
        var(--pl-surface);
    padding: 1.7rem;
}
.nr1-config-rot { display: block; font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--text-main); margin-bottom: 0.5rem; font-size: 1rem; }
.nr1-config-linha { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: center; }
.nr1-qtd {
    width: 100%;
    min-height: 48px;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: #0c0c0c;
    color: var(--text-main);
    font: 600 1.2rem 'Outfit', sans-serif;
    font-variant-numeric: tabular-nums;
}
.nr1-qtd:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 2px; }
.nr1-qtd[aria-invalid="true"] { border-color: var(--nr1-critico); }
.nr1-range { width: 100%; min-height: 44px; accent-color: var(--primary-gold); cursor: pointer; }
.nr1-range:focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 4px; border-radius: 4px; }
.nr1-limites { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
.nr1-erro { min-height: 1.4em; margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--nr1-critico); }
.nr1-erro:empty { visibility: hidden; }

.nr1-valor-bloco { margin: 1rem 0 0.2rem; padding-top: 1rem; border-top: 1px solid var(--nr1-borda); }
.nr1-faixa { font-size: 0.95rem; color: var(--text-muted); margin: 0; }
.nr1-preco {
    font-family: 'Outfit', sans-serif; font-weight: 800;
    font-size: clamp(2.3rem, 5vw, 3rem);
    color: #fff; line-height: 1.05; margin: 0.25rem 0 0.2rem;
    font-variant-numeric: tabular-nums;
}
.nr1-unidade { margin: 0; font-size: 0.93rem; color: var(--text-muted); }
.nr1-config .btn { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 50px; margin-top: 1.3rem; text-align: center; }
.nr1-config .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.nr1-seguro { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.nr1-seguro a { color: var(--primary-gold); text-decoration: underline; text-underline-offset: 2px; }

.nr1-lado { display: grid; gap: 1rem; }
.nr1-lado .nr1-card h3 { font-size: 1rem; }
.nr1-entregas { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.nr1-entregas li { position: relative; padding-left: 1.3rem; font-size: 0.95rem; color: var(--text-main); }
.nr1-entregas li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: 0.25rem; font-size: 0.7rem; color: var(--primary-gold);
}
.nr1-card a { color: var(--primary-gold); text-decoration: underline; text-underline-offset: 2px; }
.nr1-card .btn { margin-top: 0.9rem; text-decoration: none; }
.nr1-faixas { margin-top: 1.2rem; }
.nr1-faixas .pl-faq-body { max-width: 30rem; }
.nr1-faixas .pl-table { font-size: 0.95rem; }

/* ---------------------------------------------------- transparência --- */

.nr1-transp {
    display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
    border: 1px solid var(--nr1-borda);
    border-radius: var(--nr1-raio-g);
    background: rgba(255, 255, 255, 0.02);
    padding: 1.4rem 1.5rem;
    max-width: 62rem;
}
.nr1-transp i { color: var(--primary-gold); font-size: 1.2rem; margin-top: 0.2rem; }
.nr1-transp h2 { font-size: 1.15rem !important; margin: 0 0 0.4rem !important; }
.nr1-transp p { margin: 0; color: var(--text-muted); line-height: 1.7; font-size: 0.98rem; }

/* ------------------------------------------------------------- FAQ --- */
/* Visual do .pl-faq, com classe própria: o planos.js mede `.pl-faq details` com o evento
   genérico, e aqui a medição é a desta página. Duas classes = dois eventos por clique. */

.nr1-faq { display: grid; gap: 0.7rem; max-width: 860px; }
.nr1-faq details {
    border: 1px solid var(--pl-border);
    border-radius: 12px;
    background: var(--pl-surface);
    overflow: hidden;
}
.nr1-faq summary {
    cursor: pointer;
    min-height: 44px;
    padding: 1.05rem 3rem 1.05rem 1.25rem;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.02rem;
    color: var(--text-main);
    position: relative;
    list-style: none;
}
.nr1-faq summary::-webkit-details-marker { display: none; }
.nr1-faq summary::after {
    content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
    color: var(--primary-gold); font-size: 0.8rem;
}
.nr1-faq details[open] > summary::after { content: "\f068"; }
.nr1-faq-corpo { padding: 0 1.25rem 1.25rem; color: var(--text-muted); line-height: 1.75; font-size: 0.98rem; }
.nr1-faq-corpo p { margin: 0; }
.nr1-faq-corpo p + p { margin-top: 0.8rem; }
.nr1-faq-corpo strong { color: var(--text-main); }
.nr1-faq-outras { margin-top: 0.8rem; }

/* -------------------------------------------------------- CTA final --- */

.nr1-final .pl-final h2 { max-width: 28ch; }
.nr1-final-acoes { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.nr1-final-acoes .btn { min-height: 48px; display: inline-flex; align-items: center; }
.nr1-todos { margin: 1.4rem 0 0; }
.nr1-todos a { color: var(--primary-gold); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------- CTA fixo no celular --- */

.nr1-fixo {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 10, 0.97);
    border-top: 1px solid var(--nr1-borda-ouro);
}
.nr1-fixo[hidden] { display: none; }
.nr1-fixo p { margin: 0; font-size: 0.88rem; color: var(--text-muted); line-height: 1.35; }
.nr1-fixo p b { display: block; color: var(--text-main); font-family: 'Outfit', sans-serif; font-size: 0.98rem; }
.nr1-fixo .btn { padding: 0.75rem 1.1rem; min-height: 46px; display: inline-flex; align-items: center; white-space: nowrap; }
body.nr1-fixo-on { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
body.nr1-fixo-on .whatsapp-float { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 1025px) {
    .nr1-fixo { display: none !important; }
}

/* ----------------------------------------------------------- revelar --- */
/* Só esconde quando o JS marcou a página E a pessoa não pediu menos movimento.
   Sem JS, ou com reduced motion, tudo nasce visível. */
@media (prefers-reduced-motion: no-preference) {
    .nr1-js .nr1-revelar {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 560ms var(--nr1-ease), transform 560ms var(--nr1-ease);
    }
    .nr1-js .nr1-revelar.is-visivel { opacity: 1; transform: none; }
    .nr1-js .nr1-painel .nr1-barra i { transform: scaleX(0); transition: transform 700ms var(--nr1-ease) 120ms; }
    .nr1-js .nr1-painel.is-desenhado .nr1-barra i { transform: scaleX(1); }
    .nr1 .btn-primary:hover { box-shadow: 0 10px 24px rgba(var(--primary-gold-rgb), 0.22); }
}
@media (prefers-reduced-motion: reduce) {
    .nr1-tab { transition: none; }
}

/* ------------------------------------------------------ responsivo --- */

@media (max-width: 1100px) {
    .nr1-pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .nr1-preview-corpo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
    .nr1-painel-grade { grid-template-columns: 1fr; }
    .nr1-invest { grid-template-columns: 1fr; }
    .nr1-trilha { grid-template-columns: 1fr; }
    .nr1-trilha li + li::before { left: 1.2rem; top: -0.3rem; transform: translate(-50%, -50%) rotate(90deg); }
    .nr1-leitura { grid-template-columns: 1fr; }
    .nr1-op { justify-self: center; transform: rotate(0); }
}

@media (max-width: 768px) {
    .nr1-trio, .nr1-etapas, .nr1-fluxo, .nr1-compara, .nr1-ciclos, .nr1-fatores { grid-template-columns: 1fr; }
    .nr1-fluxo li + li::before { left: 50%; top: -1rem; width: 1px; height: 1rem; }
    .nr1-5w2h { grid-template-columns: 1fr; }
    .nr1-destaque dl { grid-template-columns: 1fr; }
    .nr1-mais-corpo ul { columns: 1; }
}

@media (max-width: 600px) {
    .nr1-h1 { font-size: clamp(1.85rem, 8.2vw, 2.4rem); }
    .nr1-provas { grid-template-columns: 1fr; }
    .nr1-preview { padding: 1rem; }
    .nr1-preview-corpo { grid-template-columns: 1fr; }
    .nr1-preview-radar svg { max-width: 190px; margin: 0 auto; }
    .nr1-pilares { grid-template-columns: 1fr; }
    .nr1-etapa { padding: 1.2rem 1.1rem 1.2rem 4rem; }
    .nr1-etapa::before { left: 1rem; top: 1.1rem; width: 2.2rem; height: 2.2rem; }
    .nr1-painel { padding: 1rem; }
    .nr1-tablist { border-radius: 14px; width: 100%; }
    .nr1-tab { flex: 1 1 auto; padding: 0.55rem 0.8rem; }
    .nr1-config { padding: 1.3rem; }
    .nr1-config-linha { grid-template-columns: 1fr; gap: 0.5rem; }
    .nr1-transp { grid-template-columns: 1fr; }
    .nr1-final-acoes .btn { flex: 1 1 100%; justify-content: center; }
}

@media print {
    .nr1-fixo, .nr1-tablist { display: none !important; }
    .nr1-painel[hidden] { display: block !important; }
}

/* =========================================================================
   SITE DE VENDAS — NR-1 (prompt de 18/09/2026)
   ========================================================================= */

/* §10: a faixa que responde "o que e isto" antes de a pessoa decidir se continua lendo. */
.nr1-faixa { border-block: 1px solid var(--pl-border); }
.nr1-faixa-lista {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem; list-style: none; margin: 0; padding: 0;
}
.nr1-faixa-lista li { display: flex; flex-direction: column; gap: .15rem; }
.nr1-faixa-lista strong { color: var(--primary-gold); font-size: 1.02rem; }
.nr1-faixa-lista span { font-size: .84rem; color: var(--text-secondary, #b9b9b9); }

/* §17: do geral ao especifico. Os tres niveis sao uma LISTA ORDENADA de verdade: a ordem e o
   argumento, e leitor de tela precisa ouvir "1, 2, 3" e nao tres caixas soltas. */
.nr1-zoom {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: zoom;
}
.nr1-zoom > li {
    position: relative; padding: 1.2rem;
    border: 1px solid var(--pl-border); border-radius: var(--pl-radius); background: var(--pl-surface);
}
/* A seta so existe no desktop, onde os tres ficam lado a lado. Empilhados, ela apontaria
   para o lado errado. */
.nr1-zoom > li:not(:last-child)::after {
    content: '\2192'; position: absolute; right: -0.95rem; top: 50%;
    transform: translateY(-50%); color: var(--primary-gold); font-size: 1.1rem;
}
.nr1-zoom-nivel {
    display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--primary-gold); font-weight: 700; margin-bottom: .35rem;
}
.nr1-zoom p { margin: 0; font-size: .9rem; color: var(--text-secondary, #b9b9b9); }
@media (max-width: 820px) {
    .nr1-zoom { grid-template-columns: 1fr; }
    .nr1-zoom > li:not(:last-child)::after { content: none; }
}

/* §19: os seis beneficios finais. */
.nr1-beneficios {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem; margin-top: 2rem;
}
.nr1-beneficios article {
    padding: 1.1rem; border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius); background: var(--pl-surface);
}
.nr1-beneficios h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--primary-gold); }
.nr1-beneficios p { margin: 0; font-size: .89rem; color: var(--text-secondary, #b9b9b9); }