/* ==========================================================================
   Paginas publicas - Home, Modulos e Planos (reestilo de 26/09/2026)

   Segue app/Features/Paginas-Publicas.md: cores em variaveis num lugar so,
   escala tipografica fechada, CSS em arquivo (nenhum style= inline nas views)
   e hover por CSS (funciona em toque e teclado, ao contrario dos onmouseover
   antigos). A aparencia e de pagina de venda - marca com forca, respiro,
   ilustracoes de produto -, nao a do painel.

   Tudo sob .st-root (prefixo st-). O style.css global prende a cor de p, span,
   a, li e titulos em preto com !important: por isso as cores aqui tambem
   levam !important (mesmo motivo do checkout.css).
   ========================================================================== */

.st-root {
    --st-marca:        #1f5c9c;
    --st-marca-escura: #163f6d;
    --st-marca-clara:  #2f7fd0;
    --st-marca-wash:   #eef5fd;
    --st-ceu:          #0ea5e9;
    --st-verde:        #16a34a;
    --st-verde-wash:   #ecfdf3;
    --st-ouro:         #f59e0b;
    --st-destaque:     #6d28d9;   /* plano em destaque */
    --st-tinta:        #0f172a;
    --st-tinta-2:      #475569;
    --st-apagado:      #64748b;
    --st-borda:        #e2e8f0;
    --st-fundo:        #f4f6f9;   /* o mesmo do body/cabecalho do sistema: menu e pagina sao um bloco so */
    --st-sup:          #ffffff;
    --st-raio:         18px;
    --st-raio-g:       28px;
    --st-sombra:       0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
    --st-sombra-g:     0 2px 6px rgba(15, 23, 42, .06), 0 24px 48px rgba(31, 92, 156, .14);

    /* Cor do bloco (modulo, recurso): sobrescrita pelas classes .st-tom-* */
    --st-cor:      var(--st-marca);
    --st-cor-wash: var(--st-marca-wash);

    background: var(--st-fundo);
    /* Ponta a ponta: o cabecalho do sistema poe toda view dentro de
       <main class="container">, e uma pagina de venda em caixa estreita perde
       a forca. Sai do container sem mexer no cabecalho (as outras telas usam). */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -15px;          /* o body do sistema tem padding 15px */
    overflow-x: clip;
    font-size: 1rem;
    line-height: 1.6;
}
.st-root *, .st-root *::before, .st-root *::after { box-sizing: border-box; }

/* A faixa ponta a ponta nao pode abrir rolagem lateral (100vw conta a barra de rolagem) */
body:has(.st-root) { overflow-x: clip; }
/* O style.css poe overflow-x: hidden no .container abaixo de 768px: cortava as
   faixas ponta a ponta (texto encostado e comido nas bordas do celular). O
   corte da sobra lateral fica so no body, acima. */
.container:has(> .st-root) { overflow: visible !important; }

/* Tons: a cor de cada modulo identifica o bloco dele em toda a pagina */
.st-tom-azul     { --st-cor: #1f5c9c; --st-cor-wash: #eef5fd; }
.st-tom-verde    { --st-cor: #16a34a; --st-cor-wash: #ecfdf3; }
.st-tom-ambar    { --st-cor: #d97706; --st-cor-wash: #fff8eb; }
.st-tom-indigo   { --st-cor: #2563eb; --st-cor-wash: #eef3ff; }
.st-tom-ceu      { --st-cor: #0284c7; --st-cor-wash: #ecf8ff; }
.st-tom-roxo     { --st-cor: #7c3aed; --st-cor-wash: #f5f0ff; }
.st-tom-rosa     { --st-cor: #be123c; --st-cor-wash: #fff1f3; }
.st-tom-laranja  { --st-cor: #c2410c; --st-cor-wash: #fff5ed; }
.st-tom-esmeralda{ --st-cor: #047857; --st-cor-wash: #ecfdf5; }
.st-tom-teal     { --st-cor: #0f766e; --st-cor-wash: #effcfa; }
.st-tom-lima     { --st-cor: #4d7c0f; --st-cor-wash: #f5fbe9; }   /* area de atuacao */
.st-tom-magenta  { --st-cor: #a21caf; --st-cor-wash: #fdf2fe; }   /* metas */   /* pipeline de campanha: entre o verde do WhatsApp e o azul do pipeline */

/* ── Tipografia ─────────────────────────────────────────────────────────── */

.st-root h1, .st-root h2, .st-root h3, .st-root h4 {
    font-family: 'Montserrat', 'Poppins', Arial, sans-serif;
    color: var(--st-tinta) !important;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin: 0;
}
.st-root p, .st-root li, .st-root span, .st-root label, .st-root small { color: var(--st-tinta-2) !important; }
.st-root strong { color: var(--st-tinta) !important; }

.st-h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem); font-weight: 800; }
.st-h2 { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; }
.st-h3 { font-size: 1.2rem; font-weight: 700; }
.st-root .st-marca-txt { color: var(--st-marca) !important; }
.st-root .st-cor-txt   { color: var(--st-cor) !important; }
.st-lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.7; margin: 1rem 0 0; max-width: 40rem; }

/* ── Secoes ─────────────────────────────────────────────────────────────── */

.st-secao { padding: clamp(3.5rem, 2rem + 5vw, 6rem) 0; position: relative; }
.st-secao-branca { background: var(--st-sup); }
.st-secao-tom { background: var(--st-cor-wash); }
.st-cabeca { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 1rem + 3vw, 3.25rem); }
.st-cabeca .st-lead { margin-left: auto; margin-right: auto; }
.st-cabeca-esq { text-align: left; margin-left: 0; }

.st-rotulo {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1rem;
    background: var(--st-cor-wash); border: 1px solid color-mix(in srgb, var(--st-cor) 25%, transparent);
}
.st-root .st-rotulo, .st-root .st-rotulo i { color: var(--st-cor) !important; }

/* ── Botoes ─────────────────────────────────────────────────────────────── */

.st-root .st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: 1rem;
    text-decoration: none !important; border: 2px solid transparent; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    line-height: 1.2;
}
.st-root .st-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--st-marca) 45%, transparent); outline-offset: 2px; }
.st-root .st-btn-lg { padding: 1rem 1.8rem; font-size: 1.05rem; }
.st-root .st-btn-primario { background: var(--st-marca); border-color: var(--st-marca); box-shadow: 0 8px 20px rgba(31, 92, 156, .28); }
.st-root .st-btn-primario:hover { background: var(--st-marca-escura); border-color: var(--st-marca-escura); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(31, 92, 156, .34); }
.st-root .st-btn-primario, .st-root .st-btn-primario * { color: #fff !important; }
.st-root .st-btn-contorno { background: var(--st-sup); border-color: var(--st-borda); }
.st-root .st-btn-contorno:hover { border-color: var(--st-marca); transform: translateY(-1px); }
.st-root .st-btn-contorno, .st-root .st-btn-contorno * { color: var(--st-marca) !important; }
.st-root .st-btn-whats { background: var(--st-verde); border-color: var(--st-verde); }
.st-root .st-btn-whats:hover { background: #15803d; border-color: #15803d; transform: translateY(-1px); }
.st-root .st-btn-whats, .st-root .st-btn-whats * { color: #fff !important; }
.st-root .st-btn-claro { background: #fff; border-color: #fff; }
.st-root .st-btn-claro:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.st-root .st-btn-claro, .st-root .st-btn-claro * { color: var(--st-marca) !important; }
.st-root .st-btn-vazado { background: transparent; border-color: rgba(255, 255, 255, .55); }
.st-root .st-btn-vazado:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.st-root .st-btn-vazado, .st-root .st-btn-vazado * { color: #fff !important; }
.st-botoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* Acao secundaria do hero (demonstracao com a equipe): link abaixo dos dois botoes */
.st-root .st-alt-acao { margin: 1rem 0 0; font-size: .95rem; }
/* Home: faixa da busca gratis por CNAE, entre o topo e "Como funciona" */
.st-faixa-busca { padding: 0 0 clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.st-faixa-busca-caixa {
    display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem;
    background: var(--st-sup); border: 1px solid var(--st-borda); border-left: 5px solid var(--st-ouro);
    border-radius: var(--st-raio); box-shadow: var(--st-sombra);
}
.st-faixa-busca-caixa .st-icone { flex-shrink: 0; background: #fff8eb; }
.st-root .st-faixa-busca-caixa .st-icone i { color: #d97706 !important; }
.st-faixa-busca-texto { flex: 1; min-width: 0; }
.st-faixa-busca-texto .st-h3 { margin: 0 0 .25rem; }
.st-root .st-faixa-busca-texto p { margin: 0; color: var(--st-tinta-2) !important; }
.st-faixa-busca-caixa .st-btn { flex-shrink: 0; }
@media (max-width: 767.98px) {
    .st-faixa-busca-caixa { flex-direction: column; align-items: stretch; text-align: center; }
    .st-faixa-busca-caixa .st-icone { align-self: center; }
}
/* Planos: teste gratis em destaque acima dos cartoes */
.st-root .st-teste-gratis {
    display: flex; align-items: center; gap: .75rem; max-width: 52rem; margin: 0 auto 2rem;
    padding: .9rem 1.25rem; border-radius: 14px; background: var(--st-verde-wash); border: 1px solid #bbf7d0;
}
.st-root .st-teste-gratis, .st-root .st-teste-gratis * { color: #14532d !important; }
.st-root .st-teste-gratis i { font-size: 1.4rem; color: var(--st-verde) !important; }
/* No hero os dois botoes tem a mesma largura: lado a lado quando cabem, um
   embaixo do outro (iguais) quando a coluna e estreita, como no notebook */
.st-hero .st-botoes { max-width: 42rem; }
.st-root .st-hero .st-botoes .st-btn { flex: 1 1 19.5rem; justify-content: center; }

.st-root .st-link {
    display: inline-flex; align-items: center; gap: .35rem; font-weight: 600;
    text-decoration: none !important; color: var(--st-cor) !important;
}
.st-root .st-link:hover { gap: .55rem; }
.st-root .st-link i { color: inherit !important; transition: transform .15s ease; }

/* Selos de confianca (7 dias gratis, cancele quando quiser...) */
.st-selos { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 1.5rem 0 0; }
.st-root .st-selos li { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 500; }
.st-root .st-selos i { color: var(--st-verde) !important; font-size: 1.05rem; }

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

.st-hero {
    padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
    /* Na cor do cabecalho, sem a linha de corte que o branco fazia logo abaixo
       do menu; so um brilho azul suave a direita, atras das ilustracoes */
    background:
        radial-gradient(46rem 30rem at 88% 45%, rgba(14, 165, 233, .10), transparent 65%),
        var(--st-fundo);
    position: relative;
}
.st-hero-grade { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.st-root .st-hero .st-h1 .st-gradiente {
    background: linear-gradient(90deg, var(--st-marca), var(--st-ceu));
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
}
.st-hero-compacto { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* ── Maquetes de produto (dados de exemplo, sem screenshot que envelhece) ── */

.st-palco { position: relative; min-height: 420px; padding-bottom: 40px; }
.st-mock {
    background: var(--st-sup); border: 1px solid var(--st-borda); border-radius: var(--st-raio);
    box-shadow: var(--st-sombra-g); overflow: hidden;
}
.st-mock-topo {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .7rem 1rem; background: var(--st-cor);
}
.st-root .st-mock-topo, .st-root .st-mock-topo * { color: #fff !important; font-size: .85rem; font-weight: 600; }
.st-mock-corpo { padding: 1rem; }
.st-mock-linha {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .65rem .8rem; border-radius: 12px; background: var(--st-fundo); margin-bottom: .5rem;
}
.st-root .st-mock-linha strong { font-size: .9rem; }
.st-root .st-mock-linha small { display: block; font-size: .75rem; color: var(--st-apagado) !important; }
.st-root .st-mock-preco { font-weight: 700; color: var(--st-verde) !important; white-space: nowrap; }
.st-mock-caixa { padding: .8rem; border-radius: 12px; background: var(--st-cor-wash); border: 1px solid color-mix(in srgb, var(--st-cor) 20%, transparent); }
.st-root .st-mock-ok { font-size: .78rem; color: #166534 !important; }
.st-root .st-mock-ok i { color: var(--st-verde) !important; }
.st-root .st-mock-botao {
    display: block; text-align: center; margin-top: .6rem; padding: .55rem; border-radius: 10px;
    background: var(--st-cor); color: #fff !important; font-weight: 600; font-size: .85rem;
}
.st-mock-icone {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-cor-wash);
}
.st-root .st-mock-icone i { color: var(--st-cor) !important; font-size: 1.2rem; }

/* Hero da Home: duas maquetes sobrepostas (loja B2B + conversa no WhatsApp) */
.st-palco .st-mock-principal { position: relative; z-index: 2; max-width: 350px; margin-left: auto; }
.st-palco .st-mock-flutua {
    position: absolute; z-index: 3; left: -30px; bottom: -30px; width: 200px;
    animation: st-flutua 6s ease-in-out infinite;
}
.st-palco .st-mock-flutua-2 { left: auto; right: -8px; top: -34px; bottom: auto; width: 200px; animation-delay: -3s; }
/* Terceiro: o alerta de novas empresas, no canto de cima a esquerda da loja */
.st-palco .st-mock-flutua-3 { left: 10px; top: 20px; bottom: auto; width: 210px; animation-delay: -1.5s; }
.st-bolha {
    padding: .7rem .85rem; border-radius: 14px 14px 14px 4px; background: #dcf8c6;
}
.st-root .st-bolha p { margin: 0; font-size: .85rem; color: #14532d !important; }
.st-root .st-mock-mini { font-size: .72rem; text-align: right; display: block; margin-top: .3rem; }
.st-root .st-numero-grande { font-size: 1.6rem; font-weight: 800; color: var(--st-tinta) !important; line-height: 1.1; }
@keyframes st-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── Passos (como funciona) ──────────────────────────────────────────────── */

.st-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: passo; }
.st-passo {
    position: relative; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--st-raio);
    background: var(--st-sup); border: 1px solid var(--st-borda); box-shadow: var(--st-sombra);
}
.st-root .st-passo-num {
    width: 44px; height: 44px; border-radius: 14px; margin-bottom: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--st-marca), var(--st-ceu));
    font-weight: 800; font-size: 1.1rem; color: #fff !important;
}
.st-root .st-passo p { margin: .5rem 0 0; font-size: .95rem; }

/* ── Destaque de modulo (split texto + maquete) ─────────────────────────── */

.st-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
.st-split-inverte > :first-child { order: 2; }
.st-lista-check { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .85rem; }
.st-root .st-lista-check li { display: flex; gap: .7rem; align-items: flex-start; }
.st-root .st-lista-check li > i {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; margin-top: .05rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-cor-wash); color: var(--st-cor) !important; font-size: .95rem;
}
.st-root .st-plano-exclusivo { display: inline-block; margin-top: 1.25rem; font-size: .85rem; padding: .35rem .8rem; }

/* ── Grade de recursos ─────────────────────────────────────────────────── */

/* Colunas fixas, e nao auto-fill: com auto-fill a tela larga dava 4 colunas e a
   comum 3, e nenhum numero de cartoes fechava as duas. 16 recursos = 4 x 4 no
   computador, 8 x 2 no tablet, 1 por linha no celular. */
.st-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1199.98px) { .st-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .st-grade { grid-template-columns: 1fr; } }
.st-recurso {
    display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem; height: 100%;
    background: var(--st-sup); border: 1px solid var(--st-borda); border-radius: var(--st-raio);
    text-decoration: none !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.st-root a.st-recurso:hover, .st-root a.st-recurso:focus-visible {
    transform: translateY(-3px); box-shadow: var(--st-sombra-g);
    border-color: color-mix(in srgb, var(--st-cor) 35%, transparent);
}
.st-icone {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-cor-wash);
}
.st-root .st-icone i { color: var(--st-cor) !important; font-size: 1.35rem; }
.st-root .st-recurso p { margin: 0; font-size: .95rem; flex: 1; }
.st-root .st-recurso .st-selo-plano { align-self: flex-start; }
.st-root .st-selo-plano {
    display: inline-block; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
    background: var(--st-cor-wash); color: var(--st-cor) !important;
}

/* ── Numeros ────────────────────────────────────────────────────────────── */

.st-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.st-root .st-numero-valor {
    display: block; font-family: 'Montserrat', Arial, sans-serif; font-weight: 800;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); line-height: 1;
    /* Cor solida, sem gradiente recortado no texto (background-clip: text): no
       Safari do iPhone, dentro do .st-revelar que anima ao rolar, o numero
       sumia - so a legenda aparecia (print do celular, 27/09) */
    color: var(--st-marca) !important;
}
.st-root .st-numero p { margin: .5rem 0 0; font-size: .95rem; }

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

/* Mensal | Anual: o estado fica em data-periodo no .st-root; o CSS mostra um
   preco ou o outro (sem style= pelo JS) */
.st-periodo {
    display: inline-flex; padding: .3rem; border-radius: 999px; gap: .2rem;
    background: var(--st-sup); border: 1px solid var(--st-borda); box-shadow: var(--st-sombra);
}
.st-root .st-periodo button {
    border: 0; background: transparent; padding: .6rem 1.3rem; border-radius: 999px;
    font-weight: 600; font-size: .95rem; color: var(--st-tinta-2) !important; cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem; transition: background .15s ease;
}
.st-root .st-periodo button[aria-pressed="true"] { background: var(--st-marca); color: #fff !important; box-shadow: 0 4px 12px rgba(31, 92, 156, .3); }
.st-root .st-periodo button[aria-pressed="true"] span { color: inherit !important; }
.st-root .st-periodo-desc {
    font-size: .7rem; font-weight: 800; padding: .12rem .45rem; border-radius: 999px;
    background: var(--st-verde); color: #fff !important;
}
.st-periodo-dica { display: block; margin-top: .75rem; font-size: .9rem; }
.st-root[data-periodo="mensal"] .st-so-anual,
.st-root[data-periodo="anual"] .st-so-mensal,
.st-root:not([data-periodo]) .st-so-anual { display: none !important; }

.st-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; align-items: stretch; }
.st-plano {
    position: relative; display: flex; flex-direction: column; padding: 2rem 1.75rem 1.75rem;
    background: var(--st-sup); border: 1px solid var(--st-borda); border-radius: var(--st-raio-g);
    box-shadow: var(--st-sombra); transition: transform .2s ease, box-shadow .2s ease;
}
.st-plano:hover { transform: translateY(-4px); box-shadow: var(--st-sombra-g); }
.st-plano-destaque {
    border: 2px solid var(--st-destaque);
    background: linear-gradient(180deg, #faf7ff 0%, #fff 30%);
    box-shadow: 0 24px 48px rgba(109, 40, 217, .16);
}
.st-root .st-plano-fita {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    padding: .35rem 1rem; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .04em;
    background: var(--st-destaque); color: #fff !important; box-shadow: 0 6px 14px rgba(109, 40, 217, .35);
}
.st-root .st-plano-fita i { color: #fde68a !important; }
.st-plano-nome { display: flex; align-items: center; gap: .5rem; }
.st-root .st-plano-emoji { font-size: 1.6rem; line-height: 1; }
.st-root .st-plano-desc { font-size: .92rem; margin: .5rem 0 1.25rem; min-height: 2.8em; }
.st-preco { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.st-root .st-preco-valor { font-family: 'Montserrat', Arial, sans-serif; font-size: 2.5rem; font-weight: 800; color: var(--st-tinta) !important; line-height: 1; }
.st-root .st-plano-destaque .st-preco-valor { color: var(--st-destaque) !important; }
.st-root .st-preco-sufixo { font-size: 1rem; color: var(--st-apagado) !important; }
.st-root .st-preco-nota { display: block; font-size: .85rem; margin-top: .4rem; }
.st-root .st-preco-imposto { display: block; font-size: .75rem; color: var(--st-apagado) !important; margin-top: .2rem; }
.st-plano-itens { list-style: none; padding: 1.25rem 0 0; margin: 1.25rem 0 1.5rem; border-top: 1px solid var(--st-borda); display: grid; gap: .6rem; flex: 1; }
.st-root .st-plano-itens li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; }
.st-root .st-plano-itens li > i { color: var(--st-verde) !important; margin-top: .15rem; flex-shrink: 0; }
.st-root .st-plano-itens li.st-item-realce > i,
.st-root .st-plano-itens li.st-item-realce strong { color: var(--st-destaque) !important; }
.st-plano-funcoes { flex: 1; margin: 1.25rem 0 1.5rem; }
.st-plano .st-btn { width: 100%; }
.st-plano-destaque .st-btn-primario { background: var(--st-destaque); border-color: var(--st-destaque); box-shadow: 0 8px 20px rgba(109, 40, 217, .3); }
.st-plano-destaque .st-btn-primario:hover { background: #5b21b6; border-color: #5b21b6; }
.st-root .st-plano-duvida { display: block; text-align: center; margin-top: .75rem; font-size: .88rem; text-decoration: none !important; color: var(--st-apagado) !important; }
.st-root .st-plano-duvida:hover { color: var(--st-verde) !important; }
.st-root .st-plano-duvida i { color: var(--st-verde) !important; }
.st-garantias { text-align: center; margin-top: 2.5rem; }
.st-garantias .st-selos { justify-content: center; }

/* Sem plano no site (migration pendente): convite para falar com a gente */
.st-convite { max-width: 36rem; margin: 0 auto; text-align: center; padding: 2.5rem; background: var(--st-sup); border-radius: var(--st-raio-g); box-shadow: var(--st-sombra); }

/* ── Tabela comparativa ────────────────────────────────────────────────── */

.st-rolagem { overflow-x: auto; border-radius: var(--st-raio); border: 1px solid var(--st-borda); background: var(--st-sup); box-shadow: var(--st-sombra); }
.st-tabela { width: 100%; border-collapse: collapse; min-width: 620px; font-size: .92rem; }
.st-tabela th, .st-tabela td { padding: .85rem 1rem; border-bottom: 1px solid var(--st-borda); text-align: center; }
.st-tabela th:first-child, .st-tabela td:first-child { text-align: left; }
.st-root .st-tabela thead th { position: sticky; top: 0; background: var(--st-sup); font-weight: 700; color: var(--st-tinta) !important; }
.st-root .st-tabela thead th.st-col-destaque { color: var(--st-destaque) !important; }
.st-tabela tbody tr:nth-child(even) { background: #fafbfd; }
.st-tabela tbody tr:hover { background: var(--st-marca-wash); }
.st-root .st-tabela td { color: var(--st-tinta-2) !important; }
.st-root .st-tabela td:first-child { color: var(--st-tinta) !important; font-weight: 500; }
.st-tabela .st-col-destaque { background: rgba(109, 40, 217, .04); }
.st-root .st-sim { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; background: var(--st-verde-wash); }
.st-root .st-sim i { color: var(--st-verde) !important; }
.st-root .st-nao i { color: #cbd5e1 !important; }
/* Tablet: rola de lado com a coluna do recurso presa */
@media (max-width: 767.98px) {
    .st-tabela th:first-child, .st-tabela td:first-child { position: sticky; left: 0; background: var(--st-sup); z-index: 1; min-width: 170px; }
}
/* Celular: a tabela cabe inteira - rolando de lado, os planos ficavam escondidos
   atras da coluna do recurso, sem nada dizendo que dava para rolar */
@media (max-width: 575.98px) {
    .st-tabela { min-width: 0; font-size: .78rem; table-layout: fixed; }
    .st-tabela th, .st-tabela td { padding: .6rem .35rem; word-break: break-word; }
    .st-tabela th:first-child, .st-tabela td:first-child { position: static; min-width: 0; width: 44%; padding-left: .7rem; }
    .st-root .st-sim { width: 20px; height: 20px; }
}

/* ── Perguntas frequentes (details nativo, como as funcoes expansiveis) ── */

.st-faq { max-width: 50rem; margin: 0 auto; display: grid; gap: .75rem; }
.st-faq details { background: var(--st-sup); border: 1px solid var(--st-borda); border-radius: 14px; transition: box-shadow .15s ease; }
.st-faq details[open] { box-shadow: var(--st-sombra); }
.st-faq summary {
    list-style: none; cursor: pointer; padding: 1.1rem 1.25rem; font-weight: 600; color: var(--st-tinta) !important;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary:focus-visible { outline: 2px solid var(--st-marca); outline-offset: 2px; border-radius: 14px; }
.st-root .st-faq summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--st-marca) !important; transition: transform .2s ease; }
.st-faq details[open] summary::after { transform: rotate(45deg); }
.st-root .st-faq details p { margin: 0; padding: 0 1.25rem 1.2rem; }

/* ── Formulario de demonstracao ─────────────────────────────────────────── */

.st-form { background: var(--st-sup); border-radius: var(--st-raio-g); box-shadow: var(--st-sombra-g); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.st-form .form-control, .st-form .form-select { border-radius: 12px; padding: .75rem 1rem; border-color: var(--st-borda); }
.st-form .form-control:focus, .st-form .form-select:focus { border-color: var(--st-marca); box-shadow: 0 0 0 .2rem rgba(31, 92, 156, .15); }
.st-form-grade { display: grid; gap: .75rem; }
.st-root .st-form-nota { display: block; text-align: center; font-size: .82rem; margin-top: .8rem; }
.st-root .st-form-nota i { color: var(--st-verde) !important; }

/* ── Guia (conteudo para buscador) ─────────────────────────────────────── */

.st-guia { max-width: 58rem; margin: 0 auto; display: grid; gap: 1.25rem; }
.st-guia-bloco { background: var(--st-sup); border: 1px solid var(--st-borda); border-radius: var(--st-raio); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.st-guia-bloco h3 { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.st-root .st-guia-bloco p { margin: 0; line-height: 1.8; }
.st-guia-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem 1.5rem; }
.st-root .st-guia-lista li { display: flex; gap: .5rem; }
.st-root .st-guia-lista li > i { color: var(--st-verde) !important; margin-top: .2rem; }

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

.st-cta {
    position: relative; overflow: hidden; border-radius: var(--st-raio-g);
    padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
    background:
        radial-gradient(30rem 20rem at 100% 0%, rgba(14, 165, 233, .45), transparent 60%),
        linear-gradient(135deg, var(--st-marca-escura), var(--st-marca));
    text-align: center;
}
.st-root .st-cta h2, .st-root .st-cta p, .st-root .st-cta li, .st-root .st-cta span { color: #fff !important; }
.st-root .st-cta p { opacity: .9; }
.st-cta .st-botoes { justify-content: center; }
.st-root .st-cta .st-selos { justify-content: center; }
.st-root .st-cta .st-selos i { color: #86efac !important; }

/* ── Modulos: indice fixo e blocos ─────────────────────────────────────── */

.st-atalhos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.st-root .st-atalho {
    display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border-radius: 14px;
    background: var(--st-sup); border: 1px solid var(--st-borda); text-decoration: none !important;
    font-weight: 600; font-size: .9rem; color: var(--st-tinta) !important;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.st-root .st-atalho:hover { border-color: var(--st-cor); transform: translateY(-2px); box-shadow: var(--st-sombra); }
.st-root .st-atalho i { color: var(--st-cor) !important; font-size: 1.15rem; }
/* Numero impar de modulos: o ultimo ocupa a linha inteira em vez de ficar sozinho */
.st-root .st-atalho:last-child:nth-child(odd) { grid-column: 1 / -1; }
.st-root .st-atalho-principal { background: var(--st-cor-wash); border-color: color-mix(in srgb, var(--st-cor) 35%, transparent); }

.st-indice {
    position: sticky; top: 0; z-index: 50; background: rgba(244, 246, 249, .92);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--st-borda);
}
.st-indice-trilho { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding: .5rem 0; }
.st-indice-trilho::-webkit-scrollbar { display: none; }
.st-root .st-indice a {
    white-space: nowrap; padding: .45rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
    text-decoration: none !important; color: var(--st-tinta-2) !important; transition: background .15s ease, color .15s ease;
}
.st-root .st-indice a:hover { background: var(--st-fundo); color: var(--st-marca) !important; }
.st-root .st-indice a.ativo { background: var(--st-marca); color: #fff !important; }
/* Tela larga: os 13 modulos cabem sem rolar de lado (no computador ninguem
   percebe que o trilho rola); no celular ele continua rolando */
@media (min-width: 992px) {
    .st-indice-trilho { gap: .1rem; justify-content: space-between; }
    .st-root .st-indice a { padding: .45rem .55rem; font-size: .82rem; }
}

.st-modulo { padding: clamp(3rem, 2rem + 4vw, 5rem) 0; scroll-margin-top: 64px; }
.st-modulo-cabeca { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.st-modulo-cabeca .st-icone { width: 56px; height: 56px; border-radius: 16px; background: var(--st-cor); }
.st-root .st-modulo-cabeca .st-icone i { color: #fff !important; font-size: 1.5rem; }
.st-root .st-modulo-tag { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--st-cor) !important; margin-bottom: .2rem; }
.st-root .st-modulo p.st-modulo-texto { margin: 0 0 1.5rem; }
.st-divisor { display: flex; align-items: center; gap: 1rem; padding: 2rem 0 0; }
.st-divisor::before, .st-divisor::after { content: ''; flex: 1; height: 1px; background: var(--st-borda); }
.st-root .st-divisor span { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-apagado) !important; }

/* Ilustracoes dos modulos */
.st-ilustra { max-width: 440px; margin: 0 auto; width: 100%; }
.st-cartoes-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.st-mini {
    padding: 1.25rem 1rem; border-radius: var(--st-raio); text-align: center;
    background: var(--st-cor-wash); border: 1px solid color-mix(in srgb, var(--st-cor) 22%, transparent);
}
.st-root .st-mini i { font-size: 2rem; color: var(--st-cor) !important; display: block; margin-bottom: .5rem; }
.st-root .st-mini strong { display: block; color: var(--st-cor) !important; }
.st-root .st-mini small { font-size: .8rem; }
.st-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.st-trio > div { background: #fff; border-radius: 12px; padding: .6rem; text-align: center; }
.st-root .st-trio strong { display: block; font-size: 1.15rem; }
.st-root .st-trio .st-ok   { color: var(--st-verde) !important; }
.st-root .st-trio .st-pend { color: var(--st-ouro) !important; }
.st-root .st-trio .st-erro { color: #dc2626 !important; }
.st-progresso { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .7); overflow: hidden; }
.st-progresso > span { display: block; height: 100%; border-radius: 99px; background: var(--st-cor); }
.st-p-94 { width: 94%; } .st-p-85 { width: 85%; } .st-p-82 { width: 82%; } .st-p-72 { width: 72%; } .st-p-62 { width: 62%; } .st-p-48 { width: 48%; }
.st-progresso-fundo { background: var(--st-fundo); }

.st-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.st-kanban-col { border-radius: 14px; padding: .8rem; }
.st-kanban-col.c1 { background: #dbeafe; } .st-kanban-col.c2 { background: #fef3c7; } .st-kanban-col.c3 { background: #dcfce7; }
.st-root .st-kanban-col > strong { display: block; font-size: .8rem; margin-bottom: .6rem; }
.st-root .st-kanban-card { display: block; background: #fff; border-radius: 10px; padding: .5rem .6rem; margin-bottom: .45rem; font-size: .8rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); color: var(--st-tinta) !important; }

.st-janela-pontos { display: flex; gap: .35rem; margin-bottom: 1rem; align-items: center; }
.st-janela-pontos i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.st-janela-pontos i:nth-child(1) { background: #f87171; } .st-janela-pontos i:nth-child(2) { background: #fbbf24; } .st-janela-pontos i:nth-child(3) { background: #4ade80; }
.st-campo-falso { border: 1px solid var(--st-borda); background: var(--st-fundo); border-radius: 10px; padding: .55rem .75rem; font-size: .88rem; margin-bottom: .8rem; }
.st-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.st-root .st-chip { font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; background: var(--st-cor-wash); color: var(--st-cor) !important; }
.st-root .st-chip i { color: inherit !important; }

.st-barras { display: flex; align-items: flex-end; gap: .5rem; height: 120px; }
.st-barras > span { flex: 1; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--st-marca-clara), var(--st-marca)); }
.st-b-40 { height: 40%; } .st-b-60 { height: 60%; } .st-b-45 { height: 45%; } .st-b-75 { height: 75%; } .st-b-90 { height: 90%; } .st-b-100 { height: 100%; }
.st-barras-rotulos { display: flex; gap: .5rem; margin-top: .35rem; }
.st-root .st-barras-rotulos small { flex: 1; text-align: center; font-size: .72rem; }
.st-comissao { margin-bottom: 1rem; }
.st-comissao-linha { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: .35rem; }
.st-comissao .st-progresso { background: var(--st-fundo); }
.st-mapa-fundo {
    height: 240px; border-radius: var(--st-raio); position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 30% 40%, rgba(124, 58, 237, .35) 0 6%, transparent 22%),
        radial-gradient(circle at 62% 58%, rgba(14, 165, 233, .35) 0 7%, transparent 25%),
        radial-gradient(circle at 75% 28%, rgba(124, 58, 237, .25) 0 4%, transparent 18%),
        linear-gradient(135deg, #f5f0ff, #e0f2fe);
}
.st-root .st-mapa-fundo i { position: absolute; font-size: 1.8rem; color: var(--st-cor) !important; }
.st-mapa-fundo .m1 { left: 28%; top: 30%; } .st-mapa-fundo .m2 { left: 60%; top: 50%; } .st-mapa-fundo .m3 { left: 73%; top: 20%; }
.st-mapa-fundo .st-rota { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-tabela-mini { width: 100%; border-collapse: collapse; font-size: .85rem; }
.st-tabela-mini th, .st-tabela-mini td { padding: .55rem .6rem; border-bottom: 1px solid var(--st-borda); text-align: right; }
.st-tabela-mini th:first-child, .st-tabela-mini td:first-child { text-align: left; }
.st-root .st-tabela-mini th { background: var(--st-cor-wash); color: var(--st-cor) !important; font-weight: 700; }
.st-root .st-tabela-mini .st-melhor { color: var(--st-verde) !important; font-weight: 700; }

/* Pipeline de campanha: kanban do disparo com valor e chance de compra */
.st-ilustra-larga { max-width: 520px; }
.st-funil-topo { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.st-funil-topo > div { background: var(--st-cor-wash); border-radius: 12px; padding: .55rem .7rem; }
.st-root .st-funil-topo small { display: block; font-size: .72rem; }
.st-root .st-funil-topo strong { font-size: 1.05rem; }
.st-funil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.st-funil-col { background: var(--st-fundo); border-radius: 12px; padding: .5rem; min-height: 150px; }
.st-funil-ganho { background: var(--st-verde-wash); }
.st-root .st-funil-col > strong { display: block; font-size: .7rem; line-height: 1.2; margin-bottom: .45rem; color: var(--st-tinta-2) !important; }
.st-op { display: block; background: #fff; border-radius: 8px; padding: .4rem .45rem; margin-bottom: .4rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.st-root .st-op b { display: block; font-size: .7rem; line-height: 1.2; color: var(--st-tinta) !important; }
.st-root .st-op em { display: block; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--st-cor) !important; }
.st-root .st-op small { display: block; font-size: .62rem; color: #166534 !important; }
.st-root .st-op small i { color: var(--st-verde) !important; }
.st-op-ganho { border-left: 3px solid var(--st-verde); }
.st-root .st-op-ganho em { color: var(--st-verde) !important; }
.st-op-chance { display: block; height: 4px; border-radius: 99px; background: var(--st-fundo); margin-top: .3rem; overflow: hidden; }
.st-op-chance > i { display: block; height: 100%; background: var(--st-cor); }
.st-c-40 { width: 40%; } .st-c-45 { width: 45%; } .st-c-70 { width: 70%; }
@media (max-width: 575.98px) {
    .st-funil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-funil-col { min-height: 0; }
}

/* Prospeccao: mapa (Leaflet) e varredura de clientes inativos - animados em modulos.js */
.st-demo { background: var(--st-sup); border: 1px solid var(--st-borda); border-radius: var(--st-raio); padding: 1rem; height: 350px; overflow: hidden; box-shadow: var(--st-sombra); }
.st-demo-cabeca { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.st-root .st-demo-cabeca strong { font-size: .88rem; }
.st-root .st-demo-cabeca strong i { color: var(--st-cor) !important; margin-right: .35rem; }
.st-demo-busca { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--st-borda); background: var(--st-fundo); margin-bottom: .6rem; font-size: .82rem; }
.st-root .st-demo-busca i { color: var(--st-cor) !important; }
.st-demo-mapa { height: 238px; border-radius: 10px; overflow: hidden; }
.st-demo-mapa .leaflet-control-zoom { display: none !important; }
/* Credito da OpenStreetMap: obrigatorio, discreto */
.st-root .st-demo-mapa .leaflet-control-attribution { font-size: .6rem; background: rgba(255, 255, 255, .75); }
.st-root .st-demo-mapa .leaflet-control-attribution a { color: var(--st-apagado) !important; }
.st-root .st-demo-contador { visibility: hidden; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: #fef3c7; color: #92400e !important; }
.st-root .st-demo-contador.visivel { visibility: visible; }
.st-root .st-demo-contador span, .st-root .st-demo-contador i { color: inherit !important; }
.st-giro { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--st-cor); border-right-color: transparent; animation: st-gira .7s linear infinite; margin-left: auto; }
.st-giro[hidden] { display: none; }
@keyframes st-gira { to { transform: rotate(360deg); } }
.st-varredura-barra { height: 6px; border-radius: 99px; background: var(--st-verde-wash); overflow: hidden; margin: .4rem 0 .9rem; }
.st-varredura-barra > span { display: block; height: 100%; width: 0; background: var(--st-verde); transition: width .1s linear; }
.st-inativo {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .55rem .7rem; border-radius: 10px; margin-bottom: .4rem;
    background: var(--st-verde-wash); border: 1px solid #bbf7d0; animation: st-sobe .3s ease both;
}
.st-root .st-inativo strong { display: block; font-size: .82rem; }
.st-root .st-inativo small { font-size: .72rem; }
.st-root .st-inativo .st-reativar { font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; background: #fef3c7; color: #92400e !important; white-space: nowrap; }
.st-root .leaflet-tooltip.st-marcador-dica { background: #fff; border: 1px solid #fde68a; border-radius: 8px; padding: .3rem .5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.st-root .st-marcador-dica strong { display: block; font-size: .72rem; }
.st-root .st-marcador-dica small { font-size: .65rem; }
.st-ponto { width: 14px; height: 14px; border-radius: 50%; background: #d97706; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(217, 119, 6, .35); }
@keyframes st-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Módulos › Prospecção: exemplo do alerta de novas empresas (29/09/2026) ── */

/* Exemplo fixo, sem mapa: a altura acompanha o conteúdo */
.st-demo.st-demo-auto { height: auto; }
.st-alerta-lista { margin-top: .6rem; }
.st-alerta-linha {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .55rem .7rem; border-radius: 10px; margin-bottom: .4rem;
    background: #fff7ed; border: 1px solid #fed7aa;
}
.st-root .st-alerta-linha strong { display: block; font-size: .82rem; }
.st-root .st-alerta-linha small { font-size: .72rem; }
/* Prospeccao interna: a lista apaga durante a nova analise (modulos.js) */
#interna-resultado { transition: opacity .3s ease; }
/* Reserva a altura das 4 linhas: a lista e refeita a cada analise e o cartao
   (altura automatica) nao pode encolher e crescer de novo */
#interna-lista { min-height: 292px; }
/* Prospeccao: interna e alerta lado a lado, abaixo da lista e do mapa. Mesma
   altura (stretch da grade); um embaixo do outro no tablet e no celular */
.st-demos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 991.98px) { .st-demos-2 { grid-template-columns: 1fr; } }
#interna-resultado.st-analisando { opacity: .35; }
/* Linha de rodape das demos de prospeccao (interna e alerta) */
.st-root .st-interna-rodape { display: block; margin-top: .5rem; font-size: .74rem; color: var(--st-cor) !important; font-weight: 600; }
.st-root .st-interna-rodape i { color: inherit !important; }
.st-root .st-alerta-linha .st-alerta-novo { font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; background: #ffedd5; color: #9a3412 !important; white-space: nowrap; }

/* ── Aparecer ao rolar (so com JS; sem JS tudo aparece) ─────────────────── */

.st-js .st-revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.st-js .st-revelar.st-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .st-root *, .st-root *::before, .st-root *::after { animation: none !important; transition: none !important; }
    .st-js .st-revelar { opacity: 1; transform: none; }
}

/* ── Celular e tablet ───────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .st-hero-grade, .st-split { grid-template-columns: 1fr; }
    .st-split-inverte > :first-child { order: 0; }
    .st-palco { min-height: 0; padding: 1.5rem 0 2rem; }
    .st-palco .st-mock-principal { margin: 0 auto; }
    .st-numeros { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
    .st-passos { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .st-root .container { padding-left: 18px; padding-right: 18px; }
    .st-palco .st-mock-flutua { display: none; }
    .st-botoes .st-btn { width: 100%; }
    .st-atalhos { grid-template-columns: 1fr 1fr; }
    .st-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
    .st-plano { padding: 1.75rem 1.25rem 1.5rem; }
}