:root {
    --saude-azul: #003f52;
    --saude-azul-2: #005f73;
    --saude-borda: #dce4e8;
    --saude-texto: #0e2d3a;
    --saude-mutado: #536773;
    --saude-ouro: #f0a52b;
    --saude-fundo: #f7f9fa;
}

body .container {
    max-width: 432px;
}

.saude-app {
    background: #fff;
    border: 1px solid rgba(0, 63, 82, .12);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 36, 48, .18);
    color: var(--saude-texto);
    overflow: hidden;
}

.saude-app__body {
    padding: 1rem 1rem 1.1rem;
}

.saude-formulario {
    color: var(--saude-texto);
}

.saude-js-feedback,
.saude-alerta {
    background: #fff6e8;
    border: 1px solid rgba(240, 165, 43, .35);
    border-radius: 8px;
    color: #6d4d1c;
    font-size: .78rem;
    line-height: 1.45;
    margin: .85rem 0 0;
    padding: .75rem;
}

.saude-js-feedback {
    background: #fff0f0;
    border-color: rgba(176, 0, 32, .2);
    color: #9b1c31;
    margin: 0 0 .85rem;
}

.saude-section {
    margin-top: .95rem;
}

.saude-section__titulo {
    color: var(--saude-texto);
    font-size: .85rem;
    font-weight: 800;
    margin: 0 0 .55rem;
}

.saude-toggle {
    display: grid;
    gap: .45rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: .9rem;
}

.saude-toggle label,
.saude-operadora-card,
.saude-faixa {
    cursor: pointer;
    margin: 0;
}

.saude-toggle input,
.saude-operadora-card input,
.saude-faixa input[type="checkbox"] {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.saude-toggle span {
    align-items: center;
    border: 1px solid var(--saude-borda);
    border-radius: 6px;
    color: #1f3340;
    display: flex;
    font-size: .78rem;
    font-weight: 700;
    gap: .45rem;
    justify-content: center;
    min-height: 36px;
    padding: .45rem .5rem;
}

.saude-toggle label:has(input:checked) span {
    background: linear-gradient(135deg, var(--saude-azul), var(--saude-azul-2));
    border-color: var(--saude-azul);
    color: #fff;
}

.saude-grid {
    display: grid;
    gap: .75rem .9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.saude-grid--um {
    grid-template-columns: 1fr;
}

.saude-field {
    color: var(--saude-texto);
    display: block;
    font-size: .76rem;
    font-weight: 700;
    margin: 0;
}

.saude-field--full {
    grid-column: 1 / -1;
}

.saude-field input,
.saude-field select {
    background: #fff;
    border: 1px solid var(--saude-borda);
    border-radius: 6px;
    color: #243946;
    display: block;
    font-size: .84rem;
    font-weight: 500;
    height: 34px;
    margin-top: .32rem;
    padding: .42rem .6rem;
    width: 100%;
}

.saude-field input:focus,
.saude-field select:focus {
    border-color: var(--saude-azul-2);
    box-shadow: 0 0 0 3px rgba(0, 95, 115, .13);
    outline: 0;
}

.saude-form-bloco[hidden] {
    display: none !important;
}

.saude-faixas {
    display: grid;
    gap: .5rem .55rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.saude-faixa {
    align-items: center;
    border: 1px solid var(--saude-borda);
    border-radius: 6px;
    display: grid;
    column-gap: .35rem;
    grid-template-columns: 16px minmax(0, 1fr) 38px;
    min-height: 38px;
    padding: .45rem .5rem;
    row-gap: .2rem;
}

.saude-faixa__box {
    border: 1px solid #adb8bf;
    border-radius: 3px;
    height: 13px;
    position: relative;
    width: 13px;
}

.saude-faixa:has(input[type="checkbox"]:checked) .saude-faixa__box {
    background: var(--saude-azul);
    border-color: var(--saude-azul);
}

.saude-faixa:has(input[type="checkbox"]:checked) .saude-faixa__box::after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: "";
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg);
    width: 4px;
}

.saude-faixa__rotulo {
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.saude-faixa__qtd {
    appearance: textfield;
    background: #edf8fc;
    border: 1px solid #b9d9e4;
    border-radius: 5px;
    color: var(--saude-azul);
    font-size: .72rem;
    grid-column: 3;
    height: 22px;
    justify-self: end;
    margin-top: 0;
    max-width: 38px;
    min-width: 38px;
    padding: .1rem .15rem;
    text-align: center;
}

.saude-faixa__qtd::-webkit-outer-spin-button,
.saude-faixa__qtd::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.saude-faixa__qtd:disabled {
    display: none;
}

.saude-operadoras {
    display: grid;
    gap: .55rem;
    grid-auto-rows: minmax(64px, 1fr);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.saude-operadora-card {
    align-items: center;
    border: 1px solid var(--saude-borda);
    border-radius: 7px;
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 64px;
    padding: .45rem;
    text-align: center;
}

.saude-operadora-card--sem {
    color: var(--saude-texto);
    flex-direction: column;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.12;
}

.saude-operadora-card--sem i {
    font-size: 1.15rem;
    margin-bottom: .15rem;
}

.saude-operadora-card--porto {
    background: linear-gradient(135deg, #005f73, #003f52);
    border-color: #005f73;
}

.saude-operadora-card--porto:has(input:checked) {
    border-color: #18d5c2;
    box-shadow: 0 0 0 2px rgba(24, 213, 194, .28);
}

.saude-operadora-card--porto .saude-brand img {
    max-width: 96px;
}

.saude-operadora-card:has(input:checked) {
    border-color: var(--saude-azul);
    box-shadow: 0 0 0 2px rgba(0, 63, 82, .13);
}

.saude-brand {
    align-items: center;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    min-height: 32px;
    width: 100%;
}

.saude-brand img {
    display: block;
    max-height: 34px;
    max-width: 86px;
    object-fit: contain;
}

.saude-brand--texto {
    color: var(--saude-azul);
    font-size: .84rem;
}

.saude-consentimentos {
    border-top: 1px solid #e2e6e9;
    margin: 1.75rem 0 0;
    padding: 1rem 0 0;
}

.saude-consentimento {
    align-items: flex-start;
    color: #20282f;
    cursor: pointer;
    display: flex;
    font-size: inherit;
    font-weight: 600;
    gap: .5rem;
    line-height: 1.4;
    margin: .75rem 0 .25rem;
}

.saude-consentimento input {
    accent-color: var(--saude-azul);
    flex: 0 0 auto;
    height: auto;
    margin-top: .2rem;
    width: auto;
}

.saude-acoes {
    margin-top: 1.35rem;
}

.saude-botao {
    align-items: center;
    background: var(--saude-azul);
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    color: #fff;
    display: flex;
    font-size: 1.12rem;
    font-weight: 800;
    justify-content: center;
    margin: 0;
    min-height: 58px;
    padding: .9rem 1rem;
    width: 100%;
}

.saude-botao:hover {
    background: #003747;
}

.saude-app .microcopy-privacidade,
.saude-formulario .microcopy-privacidade {
    color: #5b6770;
    font-size: .95rem;
    line-height: 1.4;
    margin: 1rem .4rem 0;
}

.saude-parametros {
    border: 1px solid var(--saude-borda);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 36, 48, .08);
    padding: .85rem;
}

.saude-parametros h2,
.saude-opcoes-titulo {
    color: var(--saude-texto);
    font-size: .9rem;
    font-weight: 800;
    margin: 0 0 .7rem;
}

.saude-parametro {
    align-items: center;
    border-bottom: 1px solid #e6ecef;
    display: grid;
    gap: .7rem;
    grid-template-columns: 20px 1fr;
    min-height: 36px;
    padding: .35rem 0;
}

.saude-parametro:last-child {
    border-bottom: 0;
}

.saude-parametro i {
    color: var(--saude-azul);
}

.saude-parametro span {
    font-size: .8rem;
}

.saude-lista {
    display: grid;
    gap: .7rem;
}

.saude-opcao,
.saude-sem-preferencia {
    align-items: center;
    border: 1px solid var(--saude-borda);
    border-radius: 8px;
    display: grid;
    gap: .75rem;
    grid-template-columns: 70px 1fr auto;
    margin-top: .7rem;
    min-height: 94px;
    padding: .8rem;
}

/* "Sem preferência" fica FORA da .saude-lista (não recebe o gap dela), então
   precisa compensar o gap para o respiro igualar o espaçamento entre os cards. */
.saude-sem-preferencia {
    margin-top: 1.4rem;
}

.saude-opcao--selecionada {
    border-color: var(--saude-azul);
    box-shadow: 0 0 0 2px rgba(0, 63, 82, .12);
}

.saude-opcao__logo,
.saude-sem-preferencia__icone {
    align-items: center;
    background: #f3f6f8;
    border-radius: 7px;
    display: flex;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.saude-opcao__logo img {
    max-height: 54px;
    max-width: 64px;
    object-fit: contain;
}

.saude-opcao h3,
.saude-sem-preferencia h3 {
    font-size: .96rem;
    line-height: 1.2;
    margin: 0 .25rem .25rem 0;
}

.saude-opcao__info {
    min-width: 0;
}

.saude-opcao__detalhes {
    list-style: none;
    margin: 0 0 .35rem;
    padding: 0;
}

.saude-opcao__detalhes li {
    color: #52636e;
    font-size: .74rem;
    line-height: 1.3;
}

.saude-opcao__detalhes li:first-child {
    color: #061d29;
    font-weight: 600;
}

.saude-opcao__valor {
    text-align: right;
}

.saude-opcao__apartir {
    color: #52636e;
    display: block;
    font-size: .68rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.saude-opcao__valor strong {
    color: #061d29;
    display: block;
    font-size: .92rem;
    white-space: nowrap;
}

.saude-opcao__valor span {
    color: #52636e;
    font-size: .72rem;
}

.saude-opcao__acao {
    grid-column: 3;
}

.saude-opcao__acao button,
.saude-sem-preferencia button {
    background: linear-gradient(135deg, var(--saude-azul), var(--saude-azul-2));
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    margin: .35rem 0 0;
    min-height: 36px;
    padding: .45rem .7rem;
    white-space: nowrap;
}

.saude-opcao__acao button[disabled] {
    background: #aab7be;
}

.saude-badge {
    border-radius: 5px;
    display: inline-flex;
    font-size: .64rem;
    font-weight: 800;
    padding: .18rem .38rem;
}

.saude-badge--validacao {
    background: #fff4df;
    color: #9a650d;
}

.saude-badge--ok {
    background: #e7f5ec;
    color: #166d3c;
}

.saude-sem-preferencia {
    grid-template-columns: 58px 1fr auto;
}

.saude-sem-preferencia__icone {
    color: #50616b;
    font-size: 1.9rem;
}

.saude-sem-preferencia p {
    color: #536773;
    font-size: .78rem;
    margin: 0;
}

.link-secundario-wrap {
    margin-bottom: .2rem;
}

@media (max-width: 460px) {
    body .container {
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .saude-app {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        min-height: 100vh;
    }

    .saude-formulario {
        padding: 0 1rem 1.5rem;
    }

    .saude-faixas,
    .saude-operadoras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saude-opcao,
    .saude-sem-preferencia {
        grid-template-columns: 58px 1fr;
    }

    .saude-opcao__valor,
    .saude-opcao__acao,
    .saude-sem-preferencia form {
        grid-column: 2;
        text-align: left;
    }
}

/* ============================================================================
   LAYOUT DESKTOP (≥992px) — 3 colunas: apresentação · formulário · comparativo.
   Abaixo de 992px NADA disto se aplica: painel e comparativo ficam ocultos e o
   fluxo é o de sempre (form → tela de resultado). Progressive enhancement — o
   desktop é uma camada aditiva sobre o mobile, que permanece intacto.
   ============================================================================ */

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

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

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

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

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

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

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

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

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

    .saude-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;
    }

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

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

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

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

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

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

    /* --- Coluna 3: comparativo (placeholder + resultado injetado por AJAX) --- */
    .saude-comparativo__vazio {
        background: #fff;
        border: 1px dashed var(--saude-borda);
        border-radius: 14px;
        color: var(--saude-mutado);
        padding: 2.5rem 1.5rem;
        text-align: center;
    }

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

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

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

    /* Resultado injetado numa faixa estreita (~360px): empilha como no mobile ≤460. */
    .saude-comparativo .saude-opcao,
    .saude-comparativo .saude-sem-preferencia {
        grid-template-columns: 48px 1fr;
    }

    .saude-comparativo .saude-opcao__valor,
    .saude-comparativo .saude-opcao__acao,
    .saude-comparativo .saude-sem-preferencia form {
        grid-column: 2;
        text-align: left;
    }

    /* 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;
    }
}