/* ============================================================================
   Layout DESKTOP do simulador de CONSÓRCIO (≥992px) — 3 colunas:
   apresentação · formulário · comparativo (Consórcio × Financiamento).
   Espelha o padrão do saude-publico.css. Abaixo de 992px NADA se aplica: painel
   e comparativo ficam ocultos e o fluxo é o de sempre (form → tela de resultado).
   Progressive enhancement — o mobile permanece 100% intacto.

   Usa as variáveis de cor --tinta/--tinta-2/--acento definidas no <style> do
   layout público (public/layout.blade.php), compartilhadas com o hero.
   ============================================================================ */

/* Painel (col 1) e comparativo (col 3) só existem no desktop. */
.simulador-painel,
.simulador-comparativo {
    display: none;
}

@media (min-width: 992px) {
    /* Solta a largura de celular (430px do layout) só quando há o grid de 3 colunas
       (o index). Com :has(.simulador-desktop) a PÁGINA de resultado (acesso direto,
       sem grid) fica estreita/centralizada como no mobile. */
    body .container:has(.simulador-desktop) {
        max-width: 1180px;
    }

    .simulador-desktop {
        align-items: start;
        display: grid;
        gap: 1.5rem;
        grid-template-columns: 300px minmax(0, 1fr) 380px;
    }

    .simulador-painel,
    .simulador-comparativo {
        display: block;
    }

    /* --- Coluna 1: painel de apresentação (fundo escuro, igual ao mockup) --- */
    .simulador-painel {
        background: linear-gradient(160deg, var(--tinta), var(--tinta-2));
        border-radius: 14px;
        box-shadow: 0 14px 36px rgba(0, 36, 48, .18);
        color: #fff;
        padding: 1.6rem 1.4rem;
    }

    .simulador-painel__selo {
        color: var(--acento);
        display: block;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        margin-bottom: .5rem;
        text-transform: uppercase;
    }

    .simulador-painel__titulo {
        font-size: 1.3rem;
        font-weight: 800;
        line-height: 1.22;
        margin: 0 0 1.3rem;
    }

    .simulador-painel__destaques {
        display: grid;
        gap: 1rem;
        list-style: none;
        margin: 0 0 1.4rem;
        padding: 0;
    }

    .simulador-painel__destaques li {
        align-items: start;
        display: grid;
        gap: .75rem;
        grid-template-columns: 34px 1fr;
    }

    .simulador-painel__destaques i {
        align-items: center;
        background: rgba(255, 255, 255, .12);
        border-radius: 8px;
        display: flex;
        font-size: 1rem;
        height: 34px;
        justify-content: center;
        width: 34px;
    }

    .simulador-painel__destaques strong {
        display: block;
        font-size: .9rem;
    }

    .simulador-painel__destaques span {
        color: rgba(255, 255, 255, .82);
        font-size: .8rem;
        line-height: 1.35;
    }

    .simulador-painel__avaliacao {
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, .18);
        display: flex;
        gap: .7rem;
        padding-top: 1.15rem;
    }

    .simulador-painel__avaliacao > strong {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1;
    }

    .simulador-painel__estrelas {
        color: var(--acento);
        display: block;
        font-size: .95rem;
        letter-spacing: .1em;
    }

    .simulador-painel__avaliacao span {
        display: block;
        font-size: .78rem;
    }

    /* --- Coluna 3: comparativo (placeholder + Consórcio × Financiamento por AJAX) --- */
    .simulador-comparativo__vazio {
        background: #fff;
        border: 1px dashed #cdd3d6;
        border-radius: 14px;
        color: #5b6770;
        padding: 2.5rem 1.5rem;
        text-align: center;
    }

    .simulador-comparativo__vazio i {
        color: var(--tinta-2);
        font-size: 2.2rem;
    }

    .simulador-comparativo__titulo {
        color: var(--tinta);
        font-size: 1rem;
        font-weight: 800;
        margin: .8rem 0 .3rem;
    }

    .simulador-comparativo__ajuda {
        font-size: .84rem;
        line-height: 1.45;
        margin: 0;
    }

    /* O comparativo injetado já traz .comparativo (cards empilhados) + .economia +
       .whatsapp-final, todos estilizados no layout. Aqui o container não força
       margem extra (o comparativo já começa no topo da coluna). */
    .simulador-comparativo .comparativo {
        margin: 0;
    }

    /* Header no desktop: acompanha a largura das 3 colunas; logo da corretora à direita. */
    .hero__inner {
        max-width: 1180px;
    }

    .hero__logo-empresa {
        display: block;
        max-height: 52px;
        max-width: 200px;
        object-fit: contain;
    }
}