/* ==========================================================================
   Landing white-label do parceiro
   --------------------------------------------------------------------------
   Esta folha NÃO define nenhuma cor de marca. As variáveis --marca-* chegam
   prontas do template, calculadas em sistema/utils/cores.py a partir das duas
   cores que o parceiro escolheu no painel — inclusive as decisões de contraste
   (o que fica escrito em cima da marca, qual tom da marca pode virar texto no
   branco, qual quase-preto tem o tom dela). Aqui só se decide forma.

   Por que isso importa: a marca do parceiro pode ser um amarelo #f59b00. Se o
   CSS cravasse "texto branco sobre a marca", metade das landings sairia
   ilegível. Toda vez que precisar de cor de marca, use a variável já pensada
   para aquele uso — nunca escreva um hexadecimal aqui dentro, exceto os
   neutros e os semáforos (verde/âmbar/vermelho de status).

   A tipografia é servida do próprio domínio (assets/fonts/landing/). A página
   não faz nenhuma requisição a terceiros: no domínio do parceiro, quem visita
   fala só com o parceiro.
   ========================================================================== */

/* Inter variável (wght 100-900), subsets latin e latin-ext. Um arquivo por
   subset cobre todos os pesos — ver assets/fonts/landing/PROCEDENCIA.md. */
@font-face {
    font-family: 'InterLanding';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/landing/inter-latin.260c81a4759b.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'InterLanding';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/landing/inter-latin-ext.1ad231aac0a8.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

:root {
    /* Neutros — independentes da marca. */
    --tinta: #0d1520;
    --tinta-2: #3d4c5c;
    --tinta-3: #64748b;
    --linha: #e4ebf1;
    --linha-forte: #cfdae3;
    --branco: #fff;
    --papel: #f7fafc;

    /* Semáforos de status dentro das simulações de tela. */
    --ok: #15803d;
    --ok-fundo: #e8f7ee;
    --atencao: #b45309;
    --atencao-fundo: #fdf3e3;
    --erro: #b91c1c;
    --erro-fundo: #fdeceb;

    --raio: 18px;
    --raio-g: 26px;
    --raio-p: 12px;

    --sombra-p: 0 1px 2px rgba(13, 21, 32, .04), 0 4px 12px -4px rgba(13, 21, 32, .06);
    --sombra: 0 2px 4px rgba(13, 21, 32, .03), 0 14px 34px -12px rgba(13, 21, 32, .12);
    --sombra-g: 0 30px 70px -24px rgba(13, 21, 32, .28), 0 6px 16px -8px rgba(13, 21, 32, .12);

    --topo: 72px;
}

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

/* O próprio materialdesignicons.css crava ".mdi:before,.mdi-set{font-size:18px}"
   depois da regra que herdaria o tamanho — isso vence por ordem de cascata e
   deixa TODO ícone desta página (WhatsApp flutuante, etiquetas, recursos,
   passos, rodapé...) plantado em 18px, ignorando o font-size do elemento pai.
   Repetimos a regra deles aqui (mesma especificidade, carregada depois) só
   para restaurar o "inherit" — cada ícone volta a obedecer o font-size que já
   está declarado no seletor dele neste arquivo. */
.mdi:before, .mdi-set { font-size: inherit; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'InterLanding', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--tinta-2);
    background: var(--branco);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--tinta);
    font-weight: 800;
    letter-spacing: -.032em;
    line-height: 1.1;
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.35rem + 3.4vw, 3.9rem); line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.3vw, 2.85rem); }
h3 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); }
h4 { font-size: 1.15rem; letter-spacing: -.02em; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
strong { color: var(--tinta); font-weight: 700; }

/* Números de painel e de preço alinham em coluna: figuras tabulares. */
.numeros { font-variant-numeric: tabular-nums; }

:where(a, button, input, select, summary):focus-visible {
    outline: 3px solid var(--marca);
    outline-offset: 3px;
    border-radius: 6px;
}

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: .85rem 1.4rem;
    background: var(--tinta);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 var(--raio-p) 0;
}
.pular-para-conteudo:focus {
    left: 0;
}

/* ─────────────────────────── Estrutura ─────────────────────────── */

.envelope {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.faixa {
    position: relative;
    padding: clamp(4rem, 2rem + 7vw, 7rem) 0;
}

/* O cabeçalho é fixo: sem isto, o link de âncora para a seção logo abaixo dele. */
[id] { scroll-margin-top: calc(var(--topo) + 8px); }
.faixa--papel { background: var(--papel); }
.faixa--marca { background: var(--marca-suave); }
.faixa--justa { padding-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); }

/* Seções escuras: o quase-preto tem o tom da marca, então elas continuam
   parecendo do mesmo parceiro. */
.faixa--escura {
    background: linear-gradient(165deg, var(--escuro) 0%, var(--escuro-2) 100%);
    color: #cbd5e1;
    isolation: isolate;
}
.faixa--escura h2,
.faixa--escura h3,
.faixa--escura h4,
.faixa--escura strong { color: #fff; }

/* Cartão claro DENTRO de faixa escura (o cartão de plano é o caso). Sem este
   resgate, a regra acima pinta de branco o nome e o preço do plano — que ficam
   sobre papel branco, ou seja, invisíveis. */
.faixa--escura .superficie-clara { color: var(--tinta-2); }
.faixa--escura .superficie-clara h2,
.faixa--escura .superficie-clara h3,
.faixa--escura .superficie-clara h4,
.faixa--escura .superficie-clara strong { color: var(--tinta); }

/* Foto de fundo das seções escuras. Fica bem apagada: é textura, não assunto. */
.faixa__foto {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: .16;
    mix-blend-mode: luminosity;
    pointer-events: none;
}
.faixa--escura::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(70% 60% at 15% 0%,
        color-mix(in srgb, var(--marca) 26%, transparent), transparent 70%);
    pointer-events: none;
}

.cabecalho-secao {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
    text-align: center;
}
.cabecalho-secao p {
    margin-top: 1rem;
    font-size: 1.1rem;
    color: var(--tinta-3);
}
.faixa--escura .cabecalho-secao p { color: #a8b6c4; }

/* Etiqueta acima do título da seção. */
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    padding: .4rem .9rem .4rem .7rem;
    border: 1px solid var(--marca-borda);
    border-radius: 999px;
    background: var(--marca-suave);
    color: var(--marca-texto);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.etiqueta i { font-size: 1.05rem; }
.faixa--escura .etiqueta {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
    color: var(--marca-em-escuro);
}

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

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.7rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease,
        background-color .18s ease, border-color .18s ease, color .18s ease;
}
.botao i { font-size: 1.2rem; }
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

.botao--marca {
    background: var(--marca-cheia);
    color: var(--sobre-cheia);
    box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--marca) 70%, transparent);
}
.botao--marca:hover {
    background: var(--marca-cheia-hover);
    box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--marca) 75%, transparent);
}

.botao--contorno {
    background: var(--branco);
    color: var(--tinta);
    border-color: var(--linha-forte);
}
.botao--contorno:hover { border-color: var(--tinta-3); }

.botao--claro { background: #fff; color: var(--tinta); }

.botao--fantasma {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    backdrop-filter: blur(6px);
}
.botao--fantasma:hover { background: rgba(255, 255, 255, .18); }

.botao--largo { width: 100%; }
.botao--grande { padding: 1.1rem 2.2rem; font-size: 1.1rem; }

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

.topo {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.topo.rolado {
    border-bottom-color: var(--linha);
    box-shadow: 0 6px 24px -18px rgba(13, 21, 32, .6);
    background: rgba(255, 255, 255, .94);
}
.topo__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--topo);
}

/* A marca do parceiro é imagem enviada por ele: altura limitada e largura
   livre, para logo quadrado e logo deitado caberem sem distorcer. */
.marca-topo {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--tinta);
}
.marca-topo img {
    height: 40px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
}

/* Placa escura para quem só tem a arte de fundo escuro. Vira um lockup — lê
   como decisão de design, e não como logo sumido no branco. */
.marca-placa {
    display: inline-flex;
    align-items: center;
    padding: .45rem .8rem;
    border-radius: 12px;
    background: var(--escuro);
}
.marca-placa img { height: 30px; max-width: 180px; }

.menu-topo {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}
.menu-topo a {
    font-size: .98rem;
    font-weight: 600;
    color: var(--tinta-2);
    transition: color .18s ease;
}
.menu-topo a:hover { color: var(--marca-texto); }

.acoes-topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}
.acoes-topo .entrar {
    font-weight: 700;
    color: var(--tinta);
    padding: .5rem 0;
}
.acoes-topo .entrar:hover { color: var(--marca-texto); }
.acoes-topo .botao { padding: .72rem 1.35rem; font-size: .97rem; }

.abrir-menu {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--linha);
    border-radius: 12px;
    background: var(--branco);
    color: var(--tinta);
    font-size: 1.6rem;
    cursor: pointer;
}

/* Menu do celular: painel deslizante, não dropdown. */
.menu-celular {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    z-index: 120;
    padding: 1.5rem;
    background: var(--branco);
    box-shadow: -20px 0 60px -20px rgba(13, 21, 32, .35);
    transform: translateX(102%);
    /* Fechado o painel some do foco também: só deslocar deixaria os links
       tabuláveis fora da tela. */
    visibility: hidden;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.menu-celular.aberto { transform: translateX(0); visibility: visible; }
.menu-celular__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}
.menu-celular__topo img { height: 34px; width: auto; max-width: 170px; object-fit: contain; }
.fechar-menu {
    width: 40px;
    height: 40px;
    border: 1px solid var(--linha);
    border-radius: 10px;
    background: none;
    color: var(--tinta);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.menu-celular nav a {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem .25rem;
    border-bottom: 1px solid var(--linha);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tinta);
}
.menu-celular nav a i { color: var(--marca-texto); font-size: 1.3rem; }
.menu-celular__acoes { margin-top: auto; padding-top: 1.75rem; display: grid; gap: .75rem; }

.cortina {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(13, 21, 32, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
.cortina.visivel { opacity: 1; visibility: visible; }

/* ─────────────────────────── Herói ─────────────────────────── */

.heroi {
    position: relative;
    padding: clamp(3.5rem, 2rem + 6vw, 6rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
    background:
        linear-gradient(180deg, var(--marca-suave) 0%, var(--branco) 62%);
    overflow: hidden;
}
/* Halo da marca atrás da simulação de tela — dá profundidade sem foto. */
.heroi::before {
    content: '';
    position: absolute;
    top: -22%;
    right: -14%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--marca) 30%, transparent) 0%,
        transparent 68%);
    filter: blur(10px);
    pointer-events: none;
}
.heroi__interno {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}
.heroi h1 { margin-bottom: 1.4rem; }
.heroi__texto {
    font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem);
    max-width: 34rem;
    color: var(--tinta-2);
}
.heroi__botoes {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin: 2.25rem 0 1.75rem;
}

.garantias {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    font-size: .96rem;
    font-weight: 600;
    color: var(--tinta-2);
}
.garantias li { display: flex; align-items: center; gap: .45rem; }
.garantias i { color: var(--marca-texto); font-size: 1.15rem; }

/* ─────────────────────────── Simulações de tela ─────────────────────────── */

.palco { position: relative; }

.janela {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--branco);
    box-shadow: var(--sombra-g);
    overflow: hidden;
}
.janela__barra {
    display: flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 .9rem;
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
}
.janela__barra b {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--linha-forte);
}
.janela__url {
    margin-left: .6rem;
    padding: .18rem .7rem;
    border-radius: 999px;
    background: var(--branco);
    border: 1px solid var(--linha);
    font-size: .72rem;
    font-weight: 600;
    color: var(--tinta-3);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.janela__corpo { padding: 1.1rem; }
.janela > img { width: 100%; height: auto; }

/* Cartão que flutua sobre a simulação — prova de vida da interface. */
.aviso-flutuante {
    position: absolute;
    left: -1.75rem;
    bottom: -1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.1rem .8rem .85rem;
    border: 1px solid var(--linha);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    box-shadow: var(--sombra);
    max-width: 17rem;
}
.aviso-flutuante__icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--marca-cheia);
    color: var(--sobre-cheia);
    font-size: 1.2rem;
}
.aviso-flutuante strong { display: block; font-size: .95rem; line-height: 1.3; }
.aviso-flutuante span { font-size: .8rem; color: var(--tinta-3); }

/* Kanban simulado. */
.mock-crm { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.mock-coluna__topo {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: 0 0 .5rem;
    margin-bottom: .55rem;
    border-bottom: 2px solid var(--marca);
    font-size: .68rem;
    font-weight: 700;
    color: var(--tinta-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mock-coluna:nth-child(2) .mock-coluna__topo { border-bottom-color: color-mix(in srgb, var(--marca) 70%, var(--linha-forte)); }
.mock-coluna:nth-child(3) .mock-coluna__topo { border-bottom-color: color-mix(in srgb, var(--marca) 45%, var(--linha-forte)); }
.mock-coluna:nth-child(4) .mock-coluna__topo { border-bottom-color: var(--linha-forte); }
.mock-coluna__topo em {
    margin-left: auto;
    font-style: normal;
    font-size: .66rem;
    color: var(--tinta-3);
}
.mock-cartao {
    padding: .6rem .65rem;
    margin-bottom: .5rem;
    border: 1px solid var(--linha);
    border-radius: 9px;
    background: var(--branco);
    box-shadow: var(--sombra-p);
}
.mock-linha {
    height: 6px;
    border-radius: 3px;
    background: var(--linha);
    margin-bottom: .38rem;
}
.mock-linha--titulo { height: 8px; width: 82%; background: var(--linha-forte); }
.mock-linha--curta { width: 55%; }
.mock-valor {
    display: inline-block;
    margin-top: .15rem;
    padding: .1rem .45rem;
    border-radius: 5px;
    background: var(--marca-suave-2);
    font-size: .62rem;
    font-weight: 700;
    color: var(--marca-texto);
}

/* Painel de locação simulado. */
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: .9rem; }
.mock-kpi {
    padding: .65rem .7rem;
    border: 1px solid var(--linha);
    border-radius: 10px;
    background: var(--papel);
}
.mock-kpi span {
    display: block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tinta-3);
}
.mock-kpi strong { font-size: 1.02rem; letter-spacing: -.02em; }
.mock-tabela { width: 100%; border-collapse: collapse; font-size: .74rem; }
.mock-tabela th {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--linha);
    color: var(--tinta-3);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
}
.mock-tabela td {
    padding: .5rem;
    border-bottom: 1px solid var(--linha);
    color: var(--tinta-2);
    font-weight: 600;
    /* Valor quebrado em duas linhas faria a simulação parecer defeito. */
    white-space: nowrap;
}
.mock-tabela td:first-child {
    white-space: normal;
    min-width: 8rem;
}
.selo {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
}
.selo--ok { background: var(--ok-fundo); color: var(--ok); }
.selo--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.selo--erro { background: var(--erro-fundo); color: var(--erro); }

/* Avaliação simulada. */
.mock-avaliacao { text-align: center; padding: .5rem 0 .25rem; }
.mock-avaliacao__rotulo {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tinta-3);
}
.mock-avaliacao__valor {
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--marca-texto);
    line-height: 1.2;
}
.mock-faixa {
    height: 8px;
    margin: .9rem 0 .5rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--linha) 0%, var(--marca) 55%, var(--linha) 100%);
}
.mock-faixa-legenda {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    font-weight: 600;
    color: var(--tinta-3);
}

/* ─────────────────────────── Barra de provas ─────────────────────────── */

.provas {
    display: grid;
    /* São 4 provas para quem revende o site e 2 para quem não revende — a
       barra se ajusta em vez de deixar buraco (ver services/landing_parceiro). */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--raio);
    overflow: hidden;
}
.prova {
    padding: 1.75rem 1.5rem;
    background: linear-gradient(165deg, var(--escuro) 0%, var(--escuro-2) 100%);
}
.prova__numero {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
    color: var(--marca-em-escuro);
}
.prova__numero span { font-size: 1.4rem; }
.prova__titulo { margin: .6rem 0 .35rem; font-size: 1.02rem; font-weight: 700; color: #fff; }
.prova__texto { font-size: .88rem; line-height: 1.5; color: #9fb0bf; }

/* ─────────────────────────── Faixas de módulo ─────────────────────────── */

.modulo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    align-items: center;
}
.modulo--invertido .modulo__texto { order: 2; }
.modulo h3 { margin: 0 0 1.1rem; }
.modulo__resumo { font-size: 1.1rem; color: var(--tinta-2); }

.lista-modulo { margin-top: 2rem; display: grid; gap: 1.15rem; }
.lista-modulo li { display: flex; gap: .95rem; }
.lista-modulo i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--marca-suave-2);
    color: var(--marca-texto);
    font-size: 1.25rem;
}
.lista-modulo strong { display: block; font-size: 1.02rem; line-height: 1.4; }
.lista-modulo span { font-size: .95rem; color: var(--tinta-3); line-height: 1.5; }

/* ─────────────────────────── Grades de cartões ─────────────────────────── */

.grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.25rem;
}
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cartao {
    padding: 2rem 1.75rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--branco);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cartao:hover {
    transform: translateY(-4px);
    border-color: var(--marca-borda);
    box-shadow: var(--sombra);
}
.cartao h4 { margin-bottom: .5rem; }
.cartao p { font-size: .98rem; color: var(--tinta-3); }
.cartao__icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    background: var(--marca-suave-2);
    color: var(--marca-texto);
    font-size: 1.6rem;
}

/* Cartões de módulo extra: mais compactos, ficam abaixo dos recursos. */
.grade-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.extra {
    display: flex;
    gap: .9rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    background: var(--papel);
}
.extra i { color: var(--marca-texto); font-size: 1.5rem; line-height: 1.2; }
.extra strong { display: block; font-size: 1rem; }
.extra span { font-size: .9rem; color: var(--tinta-3); line-height: 1.5; }

/* ─────────────────────────── Portais ─────────────────────────── */

.portais {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}
.portal {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.15rem;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: var(--branco);
    box-shadow: var(--sombra-p);
    font-size: .92rem;
    font-weight: 600;
    color: var(--tinta-2);
}
.portal img {
    height: 22px;
    width: auto;
    max-width: 76px;
    object-fit: contain;
}

/* ─────────────────────────── Modelos de site ─────────────────────────── */

.modelos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.5rem;
}
.modelo {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--raio);
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}
.modelo:hover { transform: translateY(-6px); border-color: var(--marca-em-escuro); }
.modelo__imagem {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    line-height: 0;
}
.modelo__imagem img { width: 100%; height: auto; }
.modelo__lupa {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: rgba(13, 21, 32, .78);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}
.modelo:hover .modelo__lupa,
.modelo__imagem:focus-visible .modelo__lupa { opacity: 1; transform: translateY(0); }
.modelo__rodape { padding: 1.15rem 1.35rem 1.35rem; }
.modelo__rodape strong { display: block; font-size: 1.05rem; color: #fff; }
.modelo__rodape span { font-size: .9rem; color: #a8b6c4; }

/* Lupa em tela cheia para a página inteira do modelo. */
.lupa {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    padding: 4.5rem 1rem 1.5rem;
    background: rgba(8, 12, 18, .93);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.lupa.aberta { display: block; }
.lupa img {
    display: block;
    width: min(1000px, 100%);
    height: auto;
    margin: 0 auto;
    border-radius: var(--raio-p);
    box-shadow: var(--sombra-g);
}
.lupa__fechar {
    position: fixed;
    top: 1.1rem;
    right: 1.1rem;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.lupa__titulo {
    position: fixed;
    top: 1.6rem;
    left: 1.5rem;
    color: #fff;
    font-weight: 700;
}

/* ─────────────────────────── Segurança ─────────────────────────── */

.seguranca {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.25rem;
}
.seguranca-item {
    display: flex;
    gap: 1.1rem;
    padding: 1.6rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--branco);
}
.seguranca-item > i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--marca-cheia);
    color: var(--sobre-cheia);
    font-size: 1.4rem;
}
.seguranca-item h4 { margin-bottom: .35rem; font-size: 1.05rem; }
.seguranca-item p { font-size: .95rem; color: var(--tinta-3); }

.aviso-legal {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 760px;
    margin: 2.5rem auto 0;
    padding: 1.1rem 1.4rem;
    border: 1px dashed var(--linha-forte);
    border-radius: var(--raio-p);
    background: var(--branco);
    font-size: .92rem;
    color: var(--tinta-3);
}
.aviso-legal i { color: var(--marca-texto); font-size: 1.3rem; }

/* ─────────────────────────── Sobre ─────────────────────────── */

.sobre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(2.5rem, 1rem + 4vw, 4rem);
    align-items: center;
}
.sobre__texto p { margin-top: 1.1rem; font-size: 1.1rem; }
.cartao-marca {
    position: relative;
    padding: 2.75rem 2.25rem;
    border-radius: var(--raio-g);
    background: linear-gradient(150deg, var(--marca) 0%, var(--marca-2) 100%);
    color: var(--sobre-marca);
    box-shadow: var(--sombra-g);
    overflow: hidden;
}
.cartao-marca::after {
    content: '';
    position: absolute;
    right: -30%;
    top: -40%;
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}
.cartao-marca > * { position: relative; }
.cartao-marca img {
    height: 46px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 1.25rem;
}
.cartao-marca h3 { color: inherit; margin-bottom: .75rem; }
.cartao-marca p { opacity: .88; }
.cartao-marca ul { margin-top: 1.5rem; display: grid; gap: .6rem; font-weight: 600; }
.cartao-marca li { display: flex; align-items: center; gap: .55rem; }

/* ─────────────────────────── Passos ─────────────────────────── */

.passos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    counter-reset: passo;
}
.passo {
    position: relative;
    padding: 2rem 1.75rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--branco);
}
.passo::before {
    counter-increment: passo;
    content: counter(passo);
    position: absolute;
    top: 1.4rem;
    right: 1.6rem;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--marca-suave-2);
}
.passo i { display: block; margin-bottom: 1rem; font-size: 2rem; color: var(--marca-texto); }
.passo h4 { margin-bottom: .4rem; }
.passo p { font-size: .98rem; color: var(--tinta-3); }

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

.planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.plano {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.25rem 1.85rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio-g);
    background: var(--branco);
    box-shadow: var(--sombra);
    transition: transform .22s ease, box-shadow .22s ease;
}
.plano:hover { transform: translateY(-5px); box-shadow: var(--sombra-g); }
.plano--destaque {
    border: 2px solid var(--marca);
    box-shadow: var(--sombra-g);
}
.plano__selo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .38rem 1.05rem;
    border-radius: 999px;
    background: var(--marca-cheia);
    color: var(--sobre-cheia);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.plano h3 { font-size: 1.4rem; }
.plano__descricao { min-height: 2.9rem; margin-top: .4rem; font-size: .94rem; color: var(--tinta-3); }
.plano__preco {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    margin: 1.35rem 0 1.6rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid var(--linha);
}
.plano__preco em {
    font-style: normal;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tinta-3);
}
.plano__preco strong {
    font-size: 2.9rem;
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1;
}
.plano__preco span { font-size: 1rem; font-weight: 600; color: var(--tinta-3); }
.plano__itens { display: grid; gap: .75rem; flex: 1; margin-bottom: 1.85rem; }
.plano__itens li { display: flex; gap: .6rem; font-size: .97rem; }
.plano__itens i { flex-shrink: 0; margin-top: .18rem; color: var(--marca-texto); font-size: 1.15rem; }
.planos-nota {
    margin-top: 1.75rem;
    text-align: center;
    font-size: .92rem;
    color: #a8b6c4;
}

/* ─────────────────────────── Depoimentos ─────────────────────────── */

.depoimentos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.5rem;
}
.depoimento {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.85rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--branco);
}
.depoimento__estrelas { color: #e0a411; font-size: 1rem; letter-spacing: .1em; margin-bottom: .9rem; }
.depoimento p { flex: 1; font-size: 1.02rem; color: var(--tinta-2); }
.depoimento__autor { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; }
.depoimento__inicial {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--marca-cheia);
    color: var(--sobre-cheia);
    font-weight: 800;
}
.depoimento__autor strong { display: block; font-size: .98rem; }
.depoimento__autor span { font-size: .86rem; color: var(--tinta-3); }

/* ─────────────────────────── Dúvidas ─────────────────────────── */

.duvidas { max-width: 800px; margin: 0 auto; display: grid; gap: .85rem; }
.duvida {
    border: 1px solid var(--linha);
    border-radius: var(--raio-p);
    background: var(--branco);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.duvida[open] { border-color: var(--marca-borda); box-shadow: var(--sombra-p); }
.duvida summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--tinta);
    cursor: pointer;
    list-style: none;
}
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary i { flex-shrink: 0; color: var(--marca-texto); font-size: 1.4rem; transition: transform .25s ease; }
.duvida[open] summary i { transform: rotate(180deg); }
.duvida__resposta { padding: 0 1.4rem 1.35rem; font-size: 1rem; color: var(--tinta-3); }

/* ─────────────────────────── Fechamento ─────────────────────────── */

.fechamento { text-align: center; }
.fechamento h2 { max-width: 18ch; margin: 0 auto; }
.fechamento p {
    max-width: 44ch;
    margin: 1.2rem auto 2.25rem;
    font-size: 1.15rem;
    color: #c3d0da;
}
.fechamento__botoes { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.fechamento__nota {
    margin-top: 1.75rem;
    font-size: .92rem;
    color: #9fb0bf;
}

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

.rodape {
    padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem;
    background: var(--escuro-2);
    color: #93a3b3;
    font-size: .95rem;
}
.rodape__topo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rodape__marca img { height: 40px; width: auto; max-width: 200px; object-fit: contain; margin-bottom: 1.1rem; }
.rodape__marca strong { display: block; font-size: 1.2rem; color: #fff; margin-bottom: 1.1rem; }
.rodape__marca p { max-width: 34ch; }
.rodape h4 { margin-bottom: 1rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.rodape__lista { display: grid; gap: .7rem; }
.rodape__lista a { display: flex; align-items: center; gap: .55rem; transition: color .18s ease; }
.rodape__lista a:hover { color: #fff; }
.rodape__lista i { color: var(--marca-em-escuro); font-size: 1.2rem; }
.rodape__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.75rem;
    font-size: .88rem;
    color: #7c8b9a;
}
.rodape__base nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rodape__base a:hover { color: #fff; }

/* ─────────────────────────── Flutuantes ─────────────────────────── */

.zap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.85rem;
    box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .6);
    transition: transform .18s ease;
}
/* materialdesignicons.css crava ".mdi{line-height:1.1}" direto no elemento —
   isso vence a herança, então line-height só neutraliza mirando o próprio
   ".mdi" (senão o glifo fica alto/descentralizado dentro do círculo). */
.zap i { line-height: 1; }
.zap:hover { transform: scale(1.07); }

/* Barra de ação do celular: no telefone o rodapé fica longe e o topo some. */
.barra-acao {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    display: none;
    gap: .6rem;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--linha);
    box-shadow: 0 -8px 26px -18px rgba(13, 21, 32, .7);
}
.barra-acao .botao { flex: 1; padding: .8rem 1rem; font-size: .98rem; }

/* ─────────────────────────── Entrada em cena ─────────────────────────── */

.surge {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.surge.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .surge { opacity: 1; transform: none; }
}

/* ─────────────────────────── Telas menores ─────────────────────────── */

@media (max-width: 1024px) {
    .heroi__interno,
    .modulo,
    .sobre { grid-template-columns: 1fr; }
    .modulo--invertido .modulo__texto { order: 0; }
    .heroi__interno { gap: 3rem; }
    .provas { grid-template-columns: repeat(2, 1fr); }
    .grade--3,
    .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rodape__topo { grid-template-columns: 1fr 1fr; }
    .rodape__marca { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .menu-topo { display: none; }
    .acoes-topo { display: none; }
    .abrir-menu { display: flex; }
}

@media (max-width: 720px) {
    body { font-size: 1rem; }
    .envelope { padding: 0 1.15rem; }
    .heroi__botoes .botao { width: 100%; }
    .aviso-flutuante { left: 0; bottom: -1rem; max-width: 15rem; }
    .grade--3,
    .passos { grid-template-columns: 1fr; }
    .provas { grid-template-columns: 1fr; }
    .prova { display: flex; align-items: baseline; gap: 1rem; padding: 1.25rem 1.35rem; }
    .prova__numero { font-size: 2rem; }
    .prova__titulo { margin: 0 0 .2rem; }
    .mock-crm { grid-template-columns: repeat(2, 1fr); }
    .mock-kpis { grid-template-columns: 1fr 1fr; }
    .mock-kpi:last-child { display: none; }
    /* Cabe contrato, valor e situação; a data é o que menos conta na leitura. */
    .mock-tabela th:nth-child(2),
    .mock-tabela td:nth-child(2) { display: none; }
    .etiqueta { font-size: .74rem; letter-spacing: .04em; }
    .plano__descricao { min-height: 0; }
    /* A barra de ação já tem "Falar" (mesmo link wa.me) — a bolha flutuante
       do WhatsApp ficaria espremida colada nela, duplicando a mesma ação. */
    .zap { display: none; }
    .barra-acao { display: flex; }
    body { padding-bottom: 72px; }
    .rodape__topo { grid-template-columns: 1fr; gap: 2rem; }
}