/*
 * Onepage de vendas.
 *
 * Os mesmos tokens do Azul Claro, copiados à mão: a onepage não carrega o
 * Tailwind nem o build do sistema. É uma página estática, e tem de abrir rápido
 * em celular ruim.
 *
 * Se um token mudar em docs/design-system/azul-claro/tokens.json, mude aqui
 * também. São os únicos dois lugares — e eles já se desencontraram uma vez:
 * até 13 de outubro de 2026 esta folha tinha `surface`, `ink`, `primary` e o
 * gradiente com valores que não eram os do Azul Claro.
 */

:root {
    /* Primitivas usadas fora dos semânticos: o céu da Vinheta e o texto sobre ele. */
    --branco: #ffffff;
    --ceu-400: #5bc0f5;
    --claro-500: #3a8dde;
    --royal-700: #1e5fd6;
    --noite-950: #0a1b3d;

    /* Semânticos, tema claro. */
    --surface: #ffffff;
    --surface-raised: #f2f7fc;
    --surface-tint: #e8f1fa;
    --ink: #0a2a5e;
    --ink-muted: #2b5a94;
    --primary: #2a78c8;
    --primary-hover: #1e5fd6;
    --on-primary: #ffffff;
    --brand: #3a8dde;
    --on-brand: #ffffff;
    --accent: #5bc0f5;
    --link: #1e5fd6;
    --border: #d3e6f6;
    --border-strong: #4f86c0;
    --focus-ring: #1e5fd6;
    --success: #007561;
    --warning: #8a5a00;
    --danger: #b34700;

    --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    --font-texto: 'Open Sans', 'Segoe UI', system-ui, sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(10, 42, 94, 0.14);
    --shadow-md: 0 8px 24px rgba(10, 42, 94, 0.16);
    --shadow-brilho: 0 0 40px rgba(91, 192, 245, 0.45);

    /* Altura do cabeçalho fixo: a rolagem para um bloco desconta ela. */
    --altura-topo: 64px;
}

/*
 * O tema escuro do Azul Claro, só no rodapé.
 *
 * Mesmos nomes, valores escuros: tudo o que usa os semânticos dentro do rodapé
 * troca sozinho, sem uma segunda folha de regras.
 */
.tema-escuro {
    --surface: #0a1b3d;
    --surface-raised: #11284f;
    --surface-tint: #16315e;
    --ink: #e8f1fa;
    --ink-muted: #a9ccee;
    --link: #8fd0f6;
    --border: #24427a;
    --border-strong: #6fa3de;
    --focus-ring: #8fd0f6;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--altura-topo) + 16px);
}

html.travada { overflow: hidden; }

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-texto);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.2;
    margin: 0;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.5rem); font-weight: 700; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 700; letter-spacing: 0.02em; }
h3 { font-size: 1.125rem; font-weight: 600; }

p { margin: 0; }

a { color: var(--link); }

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Os ícones Lucide do sprite: traço de 2 px, sem preenchimento, cor do texto. */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icone {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.conteudo {
    width: 100%;
    max-width: 72rem;
    /* 16 px de respiro nas laterais: a regra de 360 px vale aqui também. */
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 40rem) {
    .conteudo { padding-inline: 24px; }
}

.pular {
    position: absolute;
    left: 16px;
    top: -64px;
    z-index: 30;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--link);
    font-weight: 600;
}

.pular:focus { top: 8px; box-shadow: var(--shadow-md); }

.legenda {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-texto);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* ------------------------------------------------------------------ */
/* Botões                                                              */
/* ------------------------------------------------------------------ */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Um primário por tela: o botão do formulário. */
.botao--primario {
    background: var(--primary);
    color: var(--on-primary);
}

.botao--primario:hover { background: var(--primary-hover); }

.botao--secundario {
    background: var(--surface);
    color: var(--link);
    border-color: var(--border-strong);
}

.botao--secundario:hover { background: var(--surface-tint); }

/* Sobre o gradiente: branco com texto azul, e contorno branco. */
.botao--claro {
    background: var(--branco);
    color: var(--royal-700);
}

.botao--claro:hover { background: var(--surface-tint); }

.botao--contorno {
    background: transparent;
    color: var(--branco);
    border-color: var(--branco);
}

.botao--contorno:hover {
    background: var(--branco);
    color: var(--royal-700);
}

.botao--contorno-escuro {
    background: transparent;
    color: var(--ink);
    border-color: var(--border-strong);
}

.botao--contorno-escuro:hover { background: var(--surface-tint); }

/* ------------------------------------------------------------------ */
/* Etiquetas                                                           */
/* ------------------------------------------------------------------ */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.etiqueta .icone { width: 14px; height: 14px; }

.etiqueta--sucesso { color: var(--success); }
.etiqueta--atencao { color: var(--warning); }

.etiqueta--marca {
    background: var(--surface-tint);
    border-color: var(--border-strong);
    color: var(--link);
}

/* ------------------------------------------------------------------ */
/* Cabeçalho e mega menus                                              */
/* ------------------------------------------------------------------ */

.topo {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    transition: box-shadow 150ms ease;
}

.topo[data-rolado] { box-shadow: var(--shadow-sm); }

.topo__barra {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--altura-topo);
}

/* A marca é logotipo tipográfico, como manda o Azul Claro: sem símbolo. */
/* A marca SM365 é imagem em curvas: nunca texto redigitado. */
.topo__marca,
.rodape__marca {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    text-decoration: none;
}

.topo__marca img { display: block; height: 40px; width: auto; }
.rodape__marca img { display: block; height: 48px; width: auto; }

.topo__alternar {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font: 600 0.9375rem var(--font-display);
    cursor: pointer;
}

.topo__alternar .icone--fechar { display: none; }
.topo__alternar[aria-expanded='true'] .icone--abrir { display: none; }
.topo__alternar[aria-expanded='true'] .icone--fechar { display: block; }

.nav {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 16px;
}

.nav__lista {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__gatilho,
.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink);
    font: 600 0.9375rem var(--font-display);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.nav__gatilho:hover,
.nav__link:hover,
.nav__gatilho[aria-expanded='true'] {
    background: var(--surface-tint);
}

/* Em que bloco a pessoa está: traço embaixo do item, além da cor. */
.nav__gatilho[data-ativo],
.nav__link[data-ativo] { color: var(--link); }

.nav__gatilho[data-ativo]::after,
.nav__link[data-ativo]::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.icone--seta {
    width: 16px;
    height: 16px;
    transition: transform 150ms ease;
}

.nav__gatilho[aria-expanded='true'] .icone--seta { transform: rotate(180deg); }

.nav__acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.nav__entrar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    color: var(--ink);
    font: 600 0.9375rem var(--font-display);
    text-decoration: none;
}

.nav__entrar:hover { background: var(--surface-tint); }

.nav__acoes .botao { min-height: 40px; padding: 8px 16px; font-size: 0.9375rem; }

/* O painel ocupa a largura toda, logo abaixo da barra. */
.mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding-block: 32px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.mega[hidden] { display: none; }

.mega__grade {
    display: grid;
    gap: 32px;
}

.mega__grade--produto { grid-template-columns: 1fr 1fr 1.1fr; }

.mega__grade .legenda { margin-bottom: 12px; }

.mega__links {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega__links--quatro { grid-template-columns: repeat(4, 1fr); }
.mega__links--tres { grid-template-columns: repeat(3, 1fr); }

.mega__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 150ms ease;
}

.mega__link:hover { background: var(--surface-tint); }

.mega__link > .icone {
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: var(--radius-md);
    background: var(--surface-tint);
    color: var(--link);
}

.mega__link:hover > .icone { background: var(--surface); }

.mega__link strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.mega__link small {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ink-muted);
}

.mega__destaque {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

.mega__destaque .legenda { margin-bottom: 0; }

.mega__destaque-titulo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--ink);
}

.mega__destaque strong { color: var(--ink); }

.mega__mais {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    text-decoration: none;
}

.mega__mais:hover { text-decoration: underline; }

.mega__mais .icone { width: 16px; height: 16px; }

.mega__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--ink-muted);
}

/* Sem script, o painel abre por mouse e por foco, como recurso de reserva. */
.sem-js .nav__item:hover > .mega,
.sem-js .nav__item:focus-within > .mega { display: block; }

/*
 * Abaixo de 1024 px o cabeçalho vira o menu do celular: um botão abre a lista
 * em tela cheia, e cada painel abre por baixo do seu item, como sanfona.
 */
@media (max-width: 63.99rem) {
    .topo__alternar { display: inline-flex; }

    .nav { display: none; }

    .topo[data-aberto] .nav {
        position: fixed;
        inset: var(--altura-topo) 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 16px 16px 32px;
        overflow-y: auto;
        background: var(--surface);
    }

    .nav__lista {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav__item { border-bottom: 1px solid var(--border); }

    .nav__gatilho,
    .nav__link {
        width: 100%;
        justify-content: space-between;
        min-height: 56px;
        padding-inline: 4px;
        font-size: 1rem;
        border-radius: 0;
    }

    .nav__gatilho:hover,
    .nav__link:hover,
    .nav__gatilho[aria-expanded='true'] { background: transparent; }

    .nav__gatilho[data-ativo]::after,
    .nav__link[data-ativo]::after { display: none; }

    .mega {
        position: static;
        padding: 0 0 16px;
        border: 0;
        box-shadow: none;
    }

    .mega .conteudo { padding-inline: 0; }

    .mega__grade--produto,
    .mega__links--quatro,
    .mega__links--tres { grid-template-columns: 1fr; }

    .mega__grade { gap: 16px; }

    .mega__link { padding: 8px; }

    .nav__acoes {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
    }

    .nav__acoes .botao,
    .nav__entrar { min-height: 48px; justify-content: center; }

    .nav__entrar { border: 1px solid var(--border-strong); }
}

@media (min-width: 64rem) and (max-width: 74.99rem) {
    .mega__links--quatro { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Abertura, sobre o gradiente Vinheta                                 */
/* ------------------------------------------------------------------ */

/*
 * A Vinheta do Azul Claro: vertical, ceu-400, claro-500 e royal-700. É o único
 * gradiente da página, e só aparece aqui.
 *
 * Texto branco só da metade para baixo. No alto fica a linha de céu em
 * noite-950 e a prévia do painel, que é um cartão branco e não depende do
 * fundo.
 */
.abertura {
    /*
     * A Vinheta ocupa os 60% de cima, e o royal-700 continua sólido embaixo.
     * Com o texto ao lado da vitrine, o título sobe no degradê, e na Vinheta
     * esticada à altura inteira ele caía em 2,75:1. Comprimida, fica acima de
     * 3:1 no título e de 4,5:1 no texto pequeno (medição em LEIA.md).
     */
    background-color: var(--royal-700);
    background-image: linear-gradient(180deg, var(--ceu-400) 0%, var(--claro-500) 40%, var(--royal-700) 85%);
    background-size: 100% 60%;
    background-repeat: no-repeat;
    color: var(--branco);
    padding-block: 32px 56px;
    overflow: hidden;
}

/*
 * No celular a vitrine vem primeiro, no alto claro do gradiente, e o texto
 * branco depois, na metade de baixo, onde o contraste passa. No computador,
 * texto à esquerda alinhado ao pé e vitrine à direita.
 */
.abertura__grade {
    display: grid;
    gap: 40px;
    grid-template-areas:
        'vitrine'
        'texto';
}

.abertura__texto { grid-area: texto; }

/* O selo sai do céu e vira etiqueta: legível em qualquer altura do degradê. */
.abertura__selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--branco);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
}

.abertura__selo .icone { color: var(--brand); }

.abertura h1 { margin-top: 20px; }

.abertura .promessa {
    margin-top: 16px;
    font-size: clamp(1.125rem, 2.2vw, 1.5rem);
    line-height: 1.5;
    max-width: 40ch;
}

.acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.acoes .botao .icone { margin-left: 4px; }

.demo-aviso {
    margin-top: 16px;
    max-width: 48ch;
    font-size: 0.9375rem;
}

.demo-aviso strong { font-weight: 600; }

/* Três provas curtas, separadas por linha fina. */
.abertura__provas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 32px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.875rem;
    line-height: 1.4;
}

.abertura__provas strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
}

/* ------------------------------------------------------------------ */
/* A vitrine: o sistema de verdade, projetado                           */
/* ------------------------------------------------------------------ */

.vitrine {
    grid-area: vitrine;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.vitrine__palco {
    position: relative;
    padding: 0 0 48px 0;
    perspective: 1600px;
}

.vitrine figure { margin: 0; }

.vitrine__computador {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md), var(--shadow-brilho);
    transition: transform 150ms ease-out;
}

.vitrine__computador img {
    display: block;
    width: 100%;
    height: auto;
}

/* A barra do navegador, para a captura parecer um sistema no ar. */
.vitrine__barra {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-tint);
    border-bottom: 1px solid var(--border);
}

.vitrine__barra span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-strong);
}

.vitrine__barra em {
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-muted);
    font-style: normal;
    font-size: 0.75rem;
}

.vitrine__celular {
    position: absolute;
    right: 4%;
    bottom: 0;
    width: 26%;
    max-width: 150px;
    overflow: hidden;
    border: 6px solid var(--noite-950);
    border-radius: 22px;
    background: var(--noite-950);
    box-shadow: var(--shadow-md);
}

.vitrine__celular img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Os dois cartões do que o sistema faz sozinho. */
.vitrine__aviso {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-md);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.vitrine__aviso .icone { width: 20px; height: 20px; color: var(--brand); flex: none; }
.vitrine__aviso strong { display: block; font-weight: 600; }
.vitrine__aviso small { display: block; color: var(--ink-muted); }

.vitrine__aviso--lembrete { left: -8px; top: 22%; }
.vitrine__aviso--teto { left: 6%; bottom: 8px; }

/* As abas: brancas, com a escolhida marcada por borda, peso e cor. */
.vitrine__abas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vitrine__abas button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 14px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-muted);
    font: 600 0.875rem/1 var(--font-texto);
    cursor: pointer;
    transition: border-color 150ms ease-out, color 150ms ease-out;
}

.vitrine__abas button:hover { color: var(--ink); }

.vitrine__abas button[aria-selected='true'] {
    border-color: var(--noite-950);
    color: var(--ink);
}

.vitrine__abas button:focus-visible {
    outline: 3px solid var(--branco);
    outline-offset: 2px;
}

@media (max-width: 30rem) {
    .vitrine__aviso--lembrete { display: none; }
    .abertura__provas { grid-template-columns: 1fr; }
}

@media (min-width: 64rem) {
    .abertura { padding-block: 56px 72px; }

    .abertura__grade {
        min-height: 44rem;
        grid-template-columns: 0.95fr 1.05fr;
        grid-template-areas: 'texto vitrine';
        column-gap: 56px;
        align-items: end;
    }

    /* 24 px é texto grande para o WCAG: sobre o meio do gradiente, 3:1 basta. */
    .abertura .promessa { font-size: 1.5rem; }

    .vitrine { align-self: center; }

    /* Em telas mais baixas a coluna de texto define a altura: o respiro em
       cima mantém o título fora do céu claro do degradê. */
    .abertura__texto { padding-top: 112px; }

    /* A projeção: o computador inclinado, que se endireita sob o cursor. */
    .vitrine__computador {
        transform: rotateY(-9deg) rotateX(3deg);
        transform-origin: left center;
    }

    .vitrine__palco:hover .vitrine__computador { transform: rotateY(-3deg) rotateX(1deg); }

    .vitrine__celular { right: -12px; width: 24%; max-width: 170px; }
    .vitrine__aviso--lembrete { left: -40px; }
    .vitrine__aviso--teto { left: 10%; }
}

@media (prefers-reduced-motion: reduce) {
    .vitrine__computador,
    .vitrine__abas button { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Faixa de garantias                                                  */
/* ------------------------------------------------------------------ */

.garantias {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
}

.garantias__lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-block: 0;
    padding-block: 24px;
    list-style: none;
}

.garantias__lista li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.garantias__lista .icone { color: var(--link); }

@media (min-width: 64rem) {
    .garantias__lista {
        display: flex;
        justify-content: space-between;
    }
}

/* ------------------------------------------------------------------ */
/* Seções                                                              */
/* ------------------------------------------------------------------ */

.secao { padding-block: clamp(48px, 8vw, 96px); }

.secao--tinta { background: var(--surface-tint); }

.secao__cabeca { max-width: 44rem; }

.secao__cabeca .legenda::before {
    content: '';
    width: 24px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.secao__cabeca h2 { margin-top: 12px; }

.secao__apoio {
    margin-top: 16px;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-muted);
}

.secao__nota {
    margin-top: 16px;
    max-width: 64ch;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

/* Título à esquerda e conteúdo à direita, a partir do computador. */
@media (min-width: 64rem) {
    .dividido {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 64px;
        align-items: start;
    }

    .dividido > .grade,
    .dividido > .perguntas,
    .dividido > .formulario { margin-top: 0; }

    .dividido .secao__cabeca {
        position: sticky;
        top: calc(var(--altura-topo) + 32px);
    }
}

.grade {
    display: grid;
    gap: 16px;
    margin-top: 40px;
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .grade--quatro { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
    .grade { grid-template-columns: repeat(3, 1fr); }
    .grade--quatro { grid-template-columns: repeat(2, 1fr); }
    .grade--cinco { grid-template-columns: 1fr; }
    .grade--um { grid-template-columns: 1fr; }
}

@media (min-width: 64rem) {
    .grade { gap: 24px; }
    .grade--quatro { grid-template-columns: repeat(4, 1fr); }
}

/*
 * Cinco planos (ADR 0032), uniformes (03/11/2026): todos numa linha a partir
 * de 1024 px e um embaixo do outro abaixo disso. Duas ou três colunas deixavam
 * uma linha com sobra, que parecia buraco.
 */
@media (min-width: 64rem) {
    .grade--cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}

.cartao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.secao--tinta .cartao { background: var(--surface); }

.cartao p { color: var(--ink-muted); }

.cartao .etiqueta { margin-top: auto; }

.cartao__icone {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--surface-tint);
    color: var(--link);
}

.secao--tinta .cartao__icone { background: var(--surface-raised); border: 1px solid var(--border); }

.cartao__icone .icone { width: 22px; height: 22px; }

.cartao--linha {
    flex-direction: row;
    gap: 16px;
}

.cartao--linha .cartao__icone { margin-bottom: 0; }

.cartao--linha h3 { margin-bottom: 8px; }

/* Os passos, ligados por um traço no computador. */
.passos {
    display: grid;
    gap: 24px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: passo;
}

.passo {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.passo p { color: var(--ink-muted); }

/* Branco sobre brand só em negrito 19 px ou mais: o número tem 20 px. */
.passo__numero {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--on-brand);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
}

@media (min-width: 48rem) {
    .passos { grid-template-columns: repeat(3, 1fr); }

    .passo:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 46px;
        left: calc(24px + 44px + 12px);
        right: -12px;
        border-top: 2px dashed var(--border-strong);
    }
}

/* Ramos */
.segmentos {
    display: grid;
    gap: 12px;
    margin: 40px 0 0;
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    list-style: none;
}

.segmento {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.segmento > .icone {
    margin-top: 2px;
    color: var(--link);
}

.segmento strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
}

.segmento span span {
    display: block;
    margin-top: 4px;
    font-size: 0.9375rem;
    color: var(--ink-muted);
}

/* O convite para quem não achou o ramo: fecha a grade e leva ao contato. */
.segmento--convite { background: var(--surface-tint); border-style: dashed; }

.segmento__link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--link);
}

/* A faixa de planos do ramo (ADR 0021): o que se vende a ele. */
.segmento span .segmento__planos {
    margin-top: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
}

/*
 * O que o sistema ainda não faz.
 *
 * Numa página de vendas isso parece contraintuitivo, e não é: dizer antes
 * qualifica quem chega e evita a conversa que termina em devolução.
 */
.ressalva {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding: 16px 20px;
    max-width: 72ch;
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--surface-raised);
    color: var(--ink-muted);
    font-size: 0.9375rem;
}

.ressalva > .icone { margin-top: 2px; color: var(--ink); }

.ressalva strong { color: var(--ink); }

/* Preços */
.planos { align-items: stretch; }

.plano { gap: 4px; }

.plano .etiqueta { margin-top: 0; margin-bottom: 8px; }

.plano__para { font-size: 0.9375rem; }

.plano__preco {
    margin-block: 12px 4px;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
}

.cartao .plano__preco { color: var(--ink); }

.plano__preco small {
    font-family: var(--font-texto);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ink-muted);
}

.plano ul {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
    font-size: 0.9375rem;
}

.plano li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    /* O endereço do site (seunegocio.sm365.com.br) não cabe inteiro na coluna. */
    overflow-wrap: anywhere;
}

.plano li .icone {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--link);
}

/* Na linha de cinco, o cartão estreita (a página para em 72rem): preço e respiro encolhem com ele. */
@media (min-width: 64rem) {
    .plano { padding: 20px 16px; }
    .plano__preco { font-size: 1.75rem; }
    .plano ul { font-size: 0.875rem; }
}

.plano--destaque {
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-md);
}

.implantacao {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-tint);
    color: var(--ink-muted);
}

.implantacao .cartao__icone { margin-bottom: 0; background: var(--surface); }

.implantacao strong { color: var(--ink); }

/* Perguntas */
.perguntas {
    display: grid;
    gap: 12px;
    margin-top: 40px;
}

.perguntas details {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.perguntas summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 12px 20px;
    font-family: var(--font-display);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.perguntas summary::-webkit-details-marker { display: none; }

.perguntas summary .icone {
    color: var(--link);
    transition: transform 150ms ease;
}

.perguntas details[open] summary .icone { transform: rotate(180deg); }

.perguntas details p {
    padding: 0 20px 20px;
    color: var(--ink-muted);
}

/* Formulário */
.dividido--formulario { align-items: start; }

.lista-check {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.lista-check li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.lista-check .icone { color: var(--link); }

.formulario {
    display: grid;
    gap: 16px;
    margin-top: 40px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
}

@media (min-width: 40rem) {
    .formulario { padding: 32px; }
}

label {
    display: grid;
    gap: 4px;
    font-family: var(--font-display);
    font-weight: 600;
}

label .ajuda {
    font-family: var(--font-texto);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

input {
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-family: var(--font-texto);
    font-weight: 400;
}

.formulario .botao { width: 100%; }

.formulario__lgpd {
    font-size: 0.875rem;
    color: var(--ink-muted);
}

/* O campo isca. Escondido de quem vê, alcançável por robô — que é o ponto.
   `display:none` seria detectável; isto não é. */
.isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Rodapé                                                              */
/* ------------------------------------------------------------------ */

.rodape {
    background: var(--surface);
    color: var(--ink-muted);
    padding-block: 64px 32px;
    font-size: 0.9375rem;
}

.rodape__grade {
    display: grid;
    gap: 40px;
}

@media (min-width: 40rem) {
    .rodape__grade { grid-template-columns: repeat(2, 1fr); }
    .rodape__marca-bloco { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
    .rodape__grade { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
    .rodape__marca-bloco { grid-column: auto; }
}

.rodape__marca-bloco {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 16px;
    max-width: 22rem;
}


.rodape__coluna h2 {
    font-family: var(--font-texto);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
}

.rodape__coluna ul {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.rodape__coluna a {
    color: var(--ink-muted);
    text-decoration: none;
    transition: color 150ms ease;
}

.rodape__coluna a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.rodape__dica {
    margin-top: 16px;
    font-size: 0.875rem;
}

.rodape__dica strong { color: var(--ink); }

.rodape__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
}

.rodape__base p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rodape__base .icone { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ */
/* A página de recado do formulário (inscrever.php)                    */
/* ------------------------------------------------------------------ */

.recado { display: grid; place-items: center; min-height: 100dvh; padding: 16px; }

.recado main {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 32rem;
    display: grid;
    gap: 16px;
    text-align: center;
}

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

    * { transition: none !important; }
}
.cartao > .etiqueta { white-space: normal; }

/* O botão de assinar no pé de cada cartão de plano (ADR 0027). */
.plano { display: flex; flex-direction: column; }
.plano ul { flex-grow: 1; }
.plano__acao { margin-top: 16px; align-self: stretch; justify-content: center; }
.implantacao .lista-check { margin-top: 12px; }
.implantacao a { color: var(--link); }