/*
 * PRODS — página institucional pública.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * POR QUE CSS PRÓPRIO, E NÃO O DO PAINEL
 *
 * `prods-brand.css` existe para pintar o CoreUI do Backpack: ele redefine
 * variáveis `--cui-*` e presume o Bootstrap carregado. Reaproveitá-lo aqui
 * traria ~200 KB de framework administrativo para uma página que precisa de
 * layout, tipografia e seis componentes — e faria a landing herdar mudanças
 * pensadas para telas de cadastro.
 *
 * O que os dois compartilham é o que de fato importa: os valores da marca,
 * repetidos abaixo a partir do mesmo manual (references/marca/LEIA-ME.txt).
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * ⚠️ VERDE NÃO É COR DE TEXTO SOBRE CLARO
 *
 * #00B894 sobre branco dá ~2,2:1 — reprova no WCAG AA. Aqui ele aparece como:
 * texto sobre grafite (6,6:1), fundo sob texto grafite (6,6:1), e traço
 * decorativo. Nunca como texto sobre branco ou névoa.
 *
 * A ardósia #253A4D carrega as ações: 7,5:1 com branco, passa em AAA.
 */

/* ── Marca ──────────────────────────────────────────────────────────────────
 *
 * Valores do pacote de marca, versão C3 (agosto/2026). Não inventar tons
 * intermediários: os translúcidos abaixo derivam destes por opacidade.
 */
:root {
    --prods-ardosia: #253a4d;
    --prods-ardosia-escura: #1c2d3c;
    --prods-verde: #00b894;
    --prods-verde-escuro: #00997b;
    --prods-grafite: #16232e;
    --prods-nevoa: #e6e9ed;
    --prods-modulo: #c3ccd5;

    --prods-texto: #16232e;
    --prods-texto-suave: #4a5b6b;
    --prods-texto-claro: #ffffff;
    --prods-texto-claro-suave: #b6c2cd;

    --prods-borda: #dfe4e9;
    --prods-borda-escura: rgba(255, 255, 255, 0.1);

    --prods-fonte-marca: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --prods-fonte-texto: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --prods-fonte-dados: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* Largura útil. O `min()` evita que a página role na horizontal em telas
       estreitas sem precisar de media query. */
    --prods-largura: min(1160px, 100% - 2.5rem);
    --prods-raio: 14px;
    --prods-raio-pequeno: 8px;
    --prods-transicao: 160ms ease;
}

/* ── Base ───────────────────────────────────────────────────────────────────*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* O cabeçalho é fixo: sem isto, uma âncora aterrissa embaixo dele. */
    scroll-padding-top: 5.5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #fff;
    color: var(--prods-texto);
    font-family: var(--prods-fonte-texto);
    font-size: 1rem;
    line-height: 1.65;
    /* ⚠️ Corta o estouro horizontal na raiz. Sem isto, um único elemento
       decorativo largo faz a página inteira rolar de lado no celular. */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3 {
    font-family: var(--prods-fonte-marca);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

a {
    color: var(--prods-ardosia);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Foco visível e consistente em tudo que recebe teclado — a landing é a porta
   de entrada, e navegar por Tab não pode virar adivinhação. */
:where(a, button, [tabindex]):focus-visible {
    outline: 3px solid var(--prods-verde);
    outline-offset: 3px;
    border-radius: 4px;
}

.prods-container {
    width: var(--prods-largura);
    margin-inline: auto;
}

/* Atalho de teclado: some até receber foco. */
.prods-pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--prods-ardosia);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--prods-raio-pequeno) 0;
}

.prods-pular:focus {
    left: 0;
}

/* ── Botões ─────────────────────────────────────────────────────────────────*/

.prods-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: var(--prods-raio-pequeno);
    border: 1px solid transparent;
    font-family: var(--prods-fonte-texto);
    font-size: 0.975rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--prods-transicao),
        border-color var(--prods-transicao), color var(--prods-transicao);
}

.prods-btn--primario {
    background: var(--prods-ardosia);
    color: #fff;
}

.prods-btn--primario:hover {
    background: var(--prods-grafite);
}

/*
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ ESTA VARIANTE ERA USADA E NUNCA EXISTIU

   O botão do plano em destaque pedia `.prods-btn--verde` desde o primeiro dia.
   Sem a regra, ele caía só na base `.prods-btn` — sem fundo, texto escuro sobre
   branco e sem nada que o identificasse como botão. Era o botão mais importante
   da página, no cartão que a página quer que seja escolhido, e era o único
   ilegível.

   ⚠️ Falha do tipo que nenhum teste pega e nenhum erro reporta: CSS não reclama
   de classe inexistente. Só aparece olhando a tela.

   ⚠️ O verde de fundo é o ESCURO (`--prods-verde-escuro`), não o claro da
   marca. Branco sobre `#00b894` dá 2,1:1 — reprova em qualquer critério. Sobre
   `#00997b` passa de 3:1, que é o mínimo para texto grande e elemento de
   interface; o peso 600 e o tamanho do botão completam.
   ═══════════════════════════════════════════════════════════════════════════ */
.prods-btn--verde {
    background: var(--prods-verde-escuro, #00997b);
    border-color: var(--prods-verde-escuro, #00997b);
    color: #fff;
    font-weight: 600;
}

.prods-btn--verde:hover,
.prods-btn--verde:focus-visible {
    background: #007a62;
    border-color: #007a62;
    color: #fff;
}

.prods-btn--contorno {
    background: transparent;
    border-color: var(--prods-borda);
    color: var(--prods-ardosia);
}

.prods-btn--contorno:hover {
    border-color: var(--prods-ardosia);
    background: var(--prods-nevoa);
}

/* Sobre fundo escuro o contorno precisa da paleta invertida. */
.prods-btn--claro {
    background: #fff;
    color: var(--prods-ardosia);
}

.prods-btn--claro:hover {
    background: var(--prods-nevoa);
}

.prods-btn--fantasma-claro {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.prods-btn--fantasma-claro:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.07);
}

/* ── Cabeçalho ──────────────────────────────────────────────────────────────*/

.prods-cabecalho {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--prods-borda);
}

.prods-cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
}

.prods-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--prods-grafite);
}

.prods-marca img {
    width: 30px;
    height: 30px;
}

.prods-marca__nome {
    font-family: var(--prods-fonte-marca);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
}

.prods-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.prods-nav__link {
    color: var(--prods-texto-suave);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color var(--prods-transicao);
}

.prods-nav__link:hover {
    color: var(--prods-ardosia);
}

.prods-cabecalho__acoes {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

/* Botão do menu no celular. Fica oculto no desktop. */
.prods-menu-botao {
    display: none;
    background: transparent;
    border: 1px solid var(--prods-borda);
    border-radius: var(--prods-raio-pequeno);
    padding: 0.55rem;
    cursor: pointer;
    color: var(--prods-ardosia);
}

/* ── Hero ───────────────────────────────────────────────────────────────────*/

.prods-hero {
    position: relative;
    background: var(--prods-grafite);
    color: var(--prods-texto-claro);
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 7rem);
    overflow: hidden;
}

/* Malha discreta ao fundo: sugere estrutura e processo sem foto de fábrica.
   `pointer-events: none` para não interceptar cliques nos CTAs. */
.prods-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%);
    pointer-events: none;
}

.prods-hero__grade {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.prods-selo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem 0.35rem 0.6rem;
    border: 1px solid rgba(0, 184, 148, 0.4);
    border-radius: 999px;
    background: rgba(0, 184, 148, 0.1);
    /* Verde sobre grafite: 6,6:1. */
    color: var(--prods-verde);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.prods-selo__ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--prods-verde);
}

.prods-hero h1 {
    margin: 1.5rem 0 0;
    font-size: clamp(2.25rem, 5.4vw, 3.75rem);
    letter-spacing: -0.03em;
}

.prods-hero__destaque {
    color: var(--prods-verde);
}

.prods-hero__sub {
    margin-top: 1.35rem;
    max-width: 34rem;
    font-size: clamp(1.02rem, 1.5vw, 1.15rem);
    color: var(--prods-texto-claro-suave);
}

.prods-hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2.25rem;
}

/* ── Painel do hero: uma OP em CSS ──────────────────────────────────────────
 *
 * Não é screenshot: os dados do sistema são de clientes, e uma captura
 * envelheceria a cada mudança de tela. É uma representação do modelo real —
 * ordem, lote e os quatro estados que a OP percorre — desenhada em HTML.
 */

.prods-painel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--prods-borda-escura);
    border-radius: var(--prods-raio);
    padding: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.prods-painel__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--prods-borda-escura);
}

.prods-painel__rotulo {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--prods-modulo);
}

.prods-painel__valor {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--prods-fonte-dados);
    font-size: 1.05rem;
    color: #fff;
}

.prods-etapas {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.prods-etapa {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--prods-raio-pequeno);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
}

.prods-etapa--feita {
    border-color: rgba(0, 184, 148, 0.28);
    background: rgba(0, 184, 148, 0.08);
}

.prods-etapa--atual {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
}

.prods-etapa__marca {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.09);
    color: var(--prods-modulo);
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.prods-etapa--feita .prods-etapa__marca {
    background: var(--prods-verde);
    /* Grafite sobre verde: 6,6:1. */
    color: var(--prods-grafite);
}

.prods-etapa__nome {
    font-size: 0.93rem;
    font-weight: 500;
    color: #fff;
    min-width: 0;
}

.prods-etapa__dado {
    font-family: var(--prods-fonte-dados);
    font-size: 0.8rem;
    color: var(--prods-texto-claro-suave);
    white-space: nowrap;
}

.prods-painel__rodape {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--prods-borda-escura);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--prods-texto-claro-suave);
}

.prods-painel__rodape svg {
    flex-shrink: 0;
    color: var(--prods-verde);
}

/* ── Seções ─────────────────────────────────────────────────────────────────*/

.prods-secao {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.prods-secao--nevoa {
    background: var(--prods-nevoa);
}

.prods-secao--escura {
    background: var(--prods-ardosia);
    color: #fff;
}

.prods-secao__cabecalho {
    max-width: 44rem;
}

.prods-secao__cabecalho--centro {
    margin-inline: auto;
    text-align: center;
}

.prods-olho {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--prods-verde-escuro);
    margin-bottom: 0.75rem;
}

.prods-secao--escura .prods-olho {
    color: var(--prods-verde);
}

/*
   ⚠️ `h1` E `h2` — o tamanho do título de seção não depende da TAG.

   As seções `planos` e `cadastro` são incluídas na home (onde o `<h1>` é do
   herói, e elas abrem em `<h2>`) e nas páginas próprias `/planos` e `/cadastro`
   (onde elas são o assunto e abrem em `<h1>`). Prender o tamanho ao `h2` fazia
   a mesma seção mudar de tamanho conforme o endereço — e o nível do cabeçalho
   é decisão de ESTRUTURA, para quem navega por leitor de tela; a aparência não
   deve variar por causa dela.
*/
.prods-secao h1,
.prods-secao h2 {
    font-size: clamp(1.65rem, 3.4vw, 2.4rem);
    line-height: 1.18;
}

.prods-secao__texto {
    margin-top: 1.1rem;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    color: var(--prods-texto-suave);
}

.prods-secao--escura .prods-secao__texto {
    color: var(--prods-texto-claro-suave);
}

/* ── Recursos ───────────────────────────────────────────────────────────────*/

.prods-recursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
    margin-top: 2.75rem;
}

/* ⚠️ Três colunas fixas a partir do desktop, e não `auto-fit`.
 *
 * Com `auto-fit` os seis cartões viravam 4 + 2 em 1160 px: uma fileira cheia e
 * outra pela metade, com um vazio à direita — o arranjo que faz uma página
 * parecer template. Em três colunas fecham 3 + 3, e cada cartão ganha largura
 * suficiente para o texto não descer em cinco linhas estreitas. */
@media (min-width: 1000px) {
    .prods-recursos {
        grid-template-columns: repeat(3, 1fr);
    }
}

.prods-recurso {
    background: #fff;
    border: 1px solid var(--prods-borda);
    border-radius: var(--prods-raio);
    padding: 1.6rem;
    transition: border-color var(--prods-transicao),
        transform var(--prods-transicao);
}

.prods-recurso:hover {
    border-color: var(--prods-modulo);
    transform: translateY(-2px);
}

.prods-recurso__icone {
    width: 40px;
    height: 40px;
    border-radius: var(--prods-raio-pequeno);
    display: grid;
    place-items: center;
    background: var(--prods-nevoa);
    color: var(--prods-ardosia);
    margin-bottom: 1.1rem;
}

.prods-recurso h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.prods-recurso p {
    font-size: 0.95rem;
    color: var(--prods-texto-suave);
}

/* ── Fluxo produtivo ────────────────────────────────────────────────────────
 *
 * Horizontal no desktop, vertical no celular — sem duplicar a marcação: é a
 * mesma lista, com o `grid-auto-flow` trocado na media query.
 */

.prods-fluxo {
    list-style: none;
    margin: 2.75rem 0 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.5rem;
    counter-reset: etapa;
}

.prods-fluxo__item {
    position: relative;
    padding: 1.6rem 0.75rem 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--prods-borda-escura);
    border-radius: var(--prods-raio-pequeno);
    counter-increment: etapa;
}

/* A seta é decorativa: não carrega significado que o texto já não dê. */
.prods-fluxo__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.5rem;
    width: 0.5rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
}

/*
   ⚠️ O número é o que dá a LEITURA DE SEQUÊNCIA à faixa.

   A 0,75rem ele funcionava como etiqueta discreta e a faixa se lia como cinco
   caixas soltas. Grande, ele vira o elemento que o olho segue — que é o ponto
   de uma seção chamada "como funciona": mostrar que há uma ordem, e qual é.

   `clamp` porque são cinco colunas na mesma linha: num monitor largo cabe o
   tamanho cheio; num tablet ele encolhe sozinho em vez de quebrar a grade.
*/
.prods-fluxo__numero {
    display: block;
    font-family: var(--prods-fonte-dados);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--prods-verde);
    margin-bottom: 0.55rem;
}

.prods-fluxo__nome {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
}

/* ── Benefícios ─────────────────────────────────────────────────────────────*/

.prods-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 2rem 2.5rem;
    margin-top: 2.75rem;
}

.prods-beneficio {
    padding-top: 1.15rem;
    border-top: 2px solid var(--prods-verde);
}

.prods-beneficio h3 {
    font-size: 1.05rem;
    margin-bottom: 0.45rem;
}

.prods-beneficio p {
    font-size: 0.95rem;
    color: var(--prods-texto-suave);
}

/* ── Bloco de duas colunas (qualidade, rastreabilidade) ─────────────────────*/

.prods-duas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.prods-lista {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.prods-lista li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    font-size: 0.97rem;
    color: var(--prods-texto-suave);
}

.prods-secao--escura .prods-lista li {
    color: var(--prods-texto-claro-suave);
}

.prods-lista svg {
    margin-top: 0.28rem;
    color: var(--prods-verde-escuro);
    flex-shrink: 0;
}

.prods-secao--escura .prods-lista svg {
    color: var(--prods-verde);
}

/* Cartão de rastreabilidade: mostra a cadeia lote → produção → acabado. */
.prods-cadeia {
    background: #fff;
    border: 1px solid var(--prods-borda);
    border-radius: var(--prods-raio);
    padding: 1.5rem;
}

.prods-cadeia__linha {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px dashed var(--prods-borda);
}

.prods-cadeia__linha:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.prods-cadeia__linha:first-child {
    padding-top: 0;
}

.prods-cadeia__codigo {
    font-family: var(--prods-fonte-dados);
    font-size: 0.82rem;
    color: var(--prods-ardosia);
    background: var(--prods-nevoa);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    align-self: start;
}

.prods-cadeia__nome {
    font-size: 0.93rem;
    color: var(--prods-texto-suave);
    min-width: 0;
}

.prods-cadeia__nome strong {
    display: block;
    color: var(--prods-texto);
    font-weight: 600;
}

/* ── Chamada final ──────────────────────────────────────────────────────────*/

.prods-chamada {
    background: var(--prods-grafite);
    color: #fff;
    text-align: center;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.prods-chamada h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    max-width: 30rem;
    margin-inline: auto;
}

.prods-chamada p {
    margin: 1.15rem auto 0;
    max-width: 34rem;
    color: var(--prods-texto-claro-suave);
}

.prods-chamada__acoes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

/* ── Rodapé ─────────────────────────────────────────────────────────────────*/

.prods-rodape {
    background: var(--prods-ardosia-escura);
    color: var(--prods-texto-claro-suave);
    padding: 2.25rem 0;
    font-size: 0.9rem;
}

.prods-rodape__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.prods-rodape .prods-marca {
    color: #fff;
}

.prods-rodape__assinatura {
    display: block;
    font-family: var(--prods-fonte-texto);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--prods-texto-claro-suave);
}

/* ── Responsivo ─────────────────────────────────────────────────────────────*/

@media (max-width: 960px) {
    .prods-hero__grade {
        grid-template-columns: 1fr;
    }

    /* No celular o painel vem depois do texto: quem chega quer ler a promessa
       antes de ver a ilustração. */
    .prods-hero__visual {
        order: 2;
    }

    .prods-fluxo {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .prods-fluxo__item {
        text-align: left;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.85rem;
        align-items: center;
        padding: 0.9rem 1rem;
    }

    .prods-fluxo__numero {
        margin-bottom: 0;
    }

    /* Na vertical, o traço liga um item ao seguinte por baixo. */
    .prods-fluxo__item:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -0.5rem;
        left: 1.55rem;
        width: 1px;
        height: 0.5rem;
    }
}

@media (max-width: 780px) {
    .prods-nav {
        display: none;
    }

    .prods-menu-botao {
        display: grid;
        place-items: center;
    }

    /* Menu aberto: a nav vira uma faixa abaixo do cabeçalho. */
    .prods-cabecalho[data-menu="aberto"] .prods-nav {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--prods-borda);
        padding: 0.5rem 0;
    }

    .prods-cabecalho[data-menu="aberto"] .prods-nav__link {
        padding: 0.85rem calc((100% - var(--prods-largura)) / 2 + 0rem);
        padding-inline: max(1.25rem, calc((100vw - var(--prods-largura)) / 2));
        font-size: 1rem;
    }

    .prods-cabecalho__interno {
        position: relative;
    }
}

@media (max-width: 460px) {
    .prods-hero__acoes .prods-btn,
    .prods-chamada__acoes .prods-btn {
        /* Botões de largura cheia: alvo de toque confortável, e nada escapa da
           tela em 375 px. */
        width: 100%;
    }

    .prods-painel {
        padding: 1rem;
    }

    .prods-etapa {
        grid-template-columns: auto 1fr;
        row-gap: 0.25rem;
    }

    .prods-etapa__dado {
        grid-column: 2;
    }
}

/* ── Movimento reduzido ─────────────────────────────────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .prods-recurso:hover {
        transform: none;
    }
}

/* ── Impressão ──────────────────────────────────────────────────────────────*/

@media print {
    .prods-cabecalho,
    .prods-hero__acoes,
    .prods-chamada__acoes {
        display: none;
    }

    .prods-hero,
    .prods-secao--escura,
    .prods-chamada {
        background: #fff;
        color: #000;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEÇÕES ACRESCENTADAS EM 29/08/2026 — recursos, planos e cadastro
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Recursos ─────────────────────────────────────────────────────────────── */

/*
   ⚠️ `auto-fit` com mínimo de 20rem: em telas largas dá três colunas, em tablet
   duas, no celular uma. Com SEIS cartões, qualquer uma dessas contagens fecha as
   linhas sem sobra — foi por isso que o sétimo cartão saiu da grade.
*/
.site-recursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.25rem;
    margin-top: 2.25rem;
}

.site-recurso {
    background: #fff;
    border: 1px solid var(--prods-nevoa, #e6e9ed);
    border-radius: 0.75rem;
    padding: 1.5rem 1.4rem;
}

.site-recurso__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.625rem;
    background: #eef2f6;
    color: var(--prods-ardosia, #253a4d);
    font-size: 1.375rem;
    margin-bottom: 1rem;
}

.site-recurso h3 { margin: 0 0 0.35rem; font-size: 1.125rem; }

/*
   ⚠️ A pergunta tem PESO, e por isso vem em negrito e na cor do texto forte.

   Ela é a única linha que o visitante que está passando os olhos vai ler. Se
   ficar cinza-claro como um subtítulo qualquer, o cartão volta a começar pelo
   recurso — que é o que a reescrita existia para corrigir.
*/
.site-recurso__problema {
    margin: 0 0 0.9rem;
    color: var(--prods-grafite, #16232e);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
}

.site-recurso__itens { list-style: none; margin: 0; padding: 0; }

.site-recurso__itens li {
    position: relative;
    padding: 0.3rem 0 0.3rem 1.4rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/*
 * ⚠️ O marcador é decorativo e some para o leitor de tela: a lista já é
 * anunciada como lista, e "marca de seleção" repetido quinze vezes é ruído.
 */
.site-recurso__itens li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--prods-verde, #00b894);
    font-weight: 700;
}

/*
 * O bloco "o que o PRODS não faz".
 *
 * ⚠️ Visualmente distinto do resto, e de propósito: é a parte da página que
 * contradiz a expectativa, e escondê-la no mesmo tratamento das outras faria
 * o leitor passar direto.
 */
.site-limite {
    margin-top: 2.5rem;
    padding: 1.75rem;
    border: 1px solid #e4d5ab;
    border-radius: 0.75rem;
    background: #fffdf6;
}

.site-limite h3 { margin: 0 0 0.75rem; font-size: 1.0625rem; }
.site-limite ul { margin: 0; padding-left: 1.1rem; }
.site-limite li { padding: 0.3rem 0; font-size: 0.9375rem; line-height: 1.6; }

/* ── Planos ───────────────────────────────────────────────────────────────── */

.site-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
    align-items: stretch;
}

.site-plano {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--prods-nevoa, #e6e9ed);
    border-radius: 0.875rem;
    padding: 1.75rem 1.6rem;
}

/*
   ⚠️ Destaque por BORDA e ELEVAÇÃO, nunca por fundo colorido.

   Fundo colorido derruba o contraste do texto justamente no cartão que a página
   quer que seja lido. A borda mais grossa, a sombra e o pequeno deslocamento
   vertical dão a mesma hierarquia sem tocar na legibilidade.

   ⚠️ O deslocamento some no celular: com os cartões empilhados, um deles subir
   2 rem não é destaque, é desalinhamento.
*/
.site-plano--destaque {
    border: 2px solid var(--prods-verde-escuro, #00997b);
    box-shadow: 0 14px 36px rgba(0, 153, 123, 0.14);
}

@media (min-width: 62em) {
    .site-plano--destaque { transform: translateY(-0.75rem); }
}

/*
   ⚠️ O botão fica colado no rodapé do cartão, sempre na mesma altura.

   Sem `margin-top: auto`, cada botão para onde o texto acima terminou — e três
   botões em alturas diferentes fazem a comparação entre planos parecer
   desalinhada, que é justamente o que uma tabela de preços não pode parecer.
*/
.prods-plano-botao {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    padding-block: 0.7rem;
}

.site-plano__selo {
    align-self: flex-start;
    background: #d9f2ea;
    color: #0a6350;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.site-plano h3 { margin: 0 0 0.25rem; font-size: 1.375rem; }

.site-plano__chamada { margin: 0 0 1rem; color: #55606d; font-size: 0.875rem; min-height: 1.25rem; }

.site-plano__preco { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1; }
.site-plano__preco span { font-size: 1rem; font-weight: 400; color: #55606d; }

.site-plano__avaliacao { margin: 0.4rem 0 0; font-size: 0.8125rem; color: #55606d; }

.site-plano__beneficios { list-style: none; margin: 1.25rem 0; padding: 0; flex: 1 1 auto; }

.site-plano__beneficios li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.4rem;
    font-size: 0.9375rem;
}

.site-plano__beneficios li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--prods-verde, #00b894);
    font-weight: 700;
}

.site-plano__limites {
    margin: 0 0 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--prods-nevoa, #e6e9ed);
}

.site-plano__limites > div {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    font-size: 0.875rem;
}

.site-plano__limites dt { color: #55606d; margin: 0; }
.site-plano__limites dd { margin: 0; font-weight: 600; }

/* ── Formulário de cadastro ───────────────────────────────────────────────── */

.site-form { margin-top: 2.5rem; }

.site-form__grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .site-form__grade { grid-template-columns: 1.2fr 1fr; }
}

.site-bloco {
    background: #fff;
    border: 1px solid var(--prods-nevoa, #e6e9ed);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.site-bloco legend {
    grid-column: 1 / -1;
    font-weight: 700;
    font-size: 1.0625rem;
    padding: 0;
    margin-bottom: 0.25rem;
}

.site-campo { display: flex; flex-direction: column; }
.site-campo--largo { grid-column: 1 / -1; }

.site-campo label { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.3rem; }
.site-campo label span { color: #8d2020; }

.site-campo input,
.site-campo select {
    padding: 0.55rem 0.7rem;
    border: 1px solid #c9d2db;
    border-radius: 0.5rem;
    font: inherit;
    font-size: 0.9375rem;
}

.site-campo input:focus,
.site-campo select:focus {
    outline: none;
    border-color: var(--prods-verde, #00b894);
    box-shadow: 0 0 0 0.2rem rgba(0, 184, 148, 0.25);
}

.site-campo input[aria-invalid="true"] { border-color: #8d2020; }

.site-campo__dica { margin: 0.3rem 0 0; font-size: 0.8125rem; color: #626b75; }
.site-campo__dica--centro { text-align: center; }

.site-campo__erro { margin: 0.3rem 0 0; font-size: 0.8125rem; color: #8d2020; font-weight: 600; }

/*
 * Resumo de erros com links.
 *
 * ⚠️ Cada item leva ao campo: ler "o CNPJ é inválido" e ainda ter de caçar o
 * campo é quase o mesmo que não ter resumo.
 */
.site-erros {
    background: #fbe2e2;
    border: 1px solid #eec3c3;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    color: #8d2020;
}

.site-erros ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.site-erros a { color: inherit; font-weight: 600; }

.site-aviso {
    grid-column: 1 / -1;
    background: #f7f9fb;
    border-left: 3px solid var(--prods-ardosia, #253a4d);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: #4a5765;
}

/* Opção de plano dentro do formulário. */
.site-plano-opcao {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem;
    border: 1px solid var(--prods-nevoa, #e6e9ed);
    border-radius: 0.5rem;
    cursor: pointer;
}

.site-plano-opcao:has(input:checked) {
    border-color: var(--prods-ardosia, #253a4d);
    background: #f7f9fb;
}

/* ⚠️ Alvo de 44px em ponteiro grosso — o cartão inteiro já é clicável. */
.site-plano-opcao input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

.site-plano-opcao__corpo { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; flex: 1 1 auto; }
.site-plano-opcao__nome { font-weight: 700; }
.site-plano-opcao__preco { margin-left: auto; font-weight: 600; }
.site-plano-opcao__descricao { flex-basis: 100%; font-size: 0.8125rem; color: #55606d; }

.site-check {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.9375rem;
}

.site-check input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }

.prods-btn--bloco { display: block; width: 100%; text-align: center; }
.prods-nav__link--acao { align-self: center; }

/* ───────────────────────────────────────────────────────────────────────────
   Links legais no rodapé

   ⚠️ `order: -1` no celular: a linha legal sobe para antes do copyright. Num
   rodapé empilhado o último item é o mais fácil de perder de vista, e termos de
   uso e privacidade são justamente o que precisa estar ao alcance.
   ─────────────────────────────────────────────────────────────────────────── */
.prods-rodape__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.prods-rodape__legal a {
    color: inherit;
    opacity: .78;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: opacity .15s ease, border-color .15s ease;
}

.prods-rodape__legal a:hover,
.prods-rodape__legal a:focus-visible {
    opacity: 1;
    border-bottom-color: currentColor;
}

@media (max-width: 767.98px) {
    .prods-rodape__legal { order: -1; }
}

/* Aviso de cadastro indisponível (sem documentos legais publicados). */
.site-form__indisponivel {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    text-align: center;
    border: 1px solid var(--prods-nevoa, #e6e9ed);
    border-radius: .75rem;
    background: #fff;
    color: #626b75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modal dos documentos legais

   ⚠️ `[hidden]` precisa de `display: none !important` aqui: `.prods-modal` é
   `display: flex`, e a especificidade da classe venceria o atributo. É o modo
   clássico de um modal "escondido" ficar visível.
   ═══════════════════════════════════════════════════════════════════════════ */
.prods-modal[hidden] { display: none !important; }

.prods-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 4vw, 2.5rem);
}

.prods-modal__fundo {
    position: absolute;
    inset: 0;
    background: rgba(16, 35, 46, 0.62);
    backdrop-filter: blur(2px);
}

.prods-modal__caixa {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(56rem, 100%);
    max-height: min(86vh, 52rem);
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(16, 35, 46, 0.28);
    overflow: hidden;
}

/* ⚠️ O contorno de foco não é removido: a caixa recebe foco ao abrir, e é o
   único sinal de que o teclado está dentro do modal. */
.prods-modal__caixa:focus-visible { outline: 3px solid var(--prods-verde, #00b894); outline-offset: -3px; }

.prods-modal__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem 1rem;
    border-bottom: 1px solid var(--prods-nevoa, #e6e9ed);
}

.prods-modal__topo h2 { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.prods-modal__versao { margin: 0.25rem 0 0; font-size: 0.8125rem; color: #626b75; }
.prods-modal__versao[hidden] { display: none; }

.prods-modal__fechar {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: #626b75;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
}

.prods-modal__fechar:hover { background: #f2f4f6; color: var(--prods-grafite, #16232e); }
.prods-modal__fechar:focus-visible { outline: 2px solid var(--prods-verde, #00b894); outline-offset: 2px; }

/* ⚠️ `overscroll-behavior: contain` impede que a rolagem, ao chegar ao fim do
   texto, continue na página atrás do modal — o efeito de "a página fugiu". */
.prods-modal__corpo {
    padding: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #3c4650;
}

.prods-modal__corpo h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--prods-grafite, #16232e);
    margin: 1.75rem 0 0.6rem;
}
.prods-modal__corpo h2:first-child { margin-top: 0; }
.prods-modal__corpo p, .prods-modal__corpo ul, .prods-modal__corpo ol { margin-bottom: 1rem; }
.prods-modal__corpo li { margin-bottom: 0.35rem; }
.prods-modal__corpo strong { color: var(--prods-grafite, #16232e); }
.prods-modal__corpo a { color: var(--prods-verde-escuro, #00997b); }

.prods-modal__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid var(--prods-nevoa, #e6e9ed);
    background: #fafbfc;
}

.prods-modal__link { font-size: 0.875rem; color: var(--prods-verde-escuro, #00997b); }

/* ⚠️ Trava a rolagem do fundo enquanto o modal está aberto. Sem isso, rolar
   dentro do modal move a página atrás e o visitante perde o lugar do formulário. */
body.prods-modal-aberto { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   Faixa "Vale para tudo acima" — acesso, isolamento e auditoria

   ⚠️ Faixa, e não um sétimo cartão. Segurança não se compara a "Produção": ela
   vale para todos os cartões acima. Como cartão, competia por atenção com eles
   e ainda sobrava sozinha na linha; como faixa, se lê como a base sobre a qual
   o resto se apoia — que é o que ela é.
   ═══════════════════════════════════════════════════════════════════════════ */
.site-seguranca {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) 2fr;
    gap: 1.5rem 2.5rem;
    align-items: start;
    margin-top: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: #fff;
    border: 1px solid var(--prods-nevoa, #e6e9ed);
    border-radius: 0.75rem;
}

.site-seguranca__titulo h3 { margin: 0 0 0.3rem; font-size: 1.0625rem; }
.site-seguranca__titulo p { margin: 0; font-size: 0.875rem; color: #626b75; }

.site-seguranca__itens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.4rem 1.75rem;
}

.site-seguranca__itens li {
    position: relative;
    padding: 0.2rem 0 0.2rem 1.4rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.site-seguranca__itens li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--prods-verde-escuro, #00997b);
    font-weight: 700;
}

@media (max-width: 47.99em) {
    .site-seguranca { grid-template-columns: 1fr; }
}