/* =====================================================
   CASAEXTREMA - SIMULADOR V3
   Versão 3.0
===================================================== */


/* =====================================================
   01 - ÁREA PRINCIPAL
===================================================== */

:root{

    --cor-principal:#d71920;
    --cor-principal-hover:#b31318;
    --cor-sucesso:#18a957;

    --cor-texto:#333333;
    --cor-texto-claro:#777777;

    --cor-fundo:#f5f7fb;
    --cor-card:#ffffff;

    --cor-borda:#e4e7ec;

    --sombra:
        0 8px 25px rgba(0,0,0,.08);

    --raio:18px;

    --transicao:.30s;

    --largura:850px;

/* era 1100px 1208 8:17

    --fonte:'Poppins',sans-serif;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--fonte);

    background:var(--cor-fundo);

    color:var(--cor-texto);

    line-height:1.5;

    font-size:16px;

    -webkit-font-smoothing:antialiased;

}

.simulador{

    width:100%;

    min-height:100vh;

/* era 60px  20px 1208 8:17

    padding:30px 20px;


    display:flex;

    justify-content:center;

    align-items:flex-start;

}

.simulador-container{

    width:100%;

    max-width:var(--largura);

    margin:auto;

}

.oculto{

    display:none!important;

}

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

/* =====================================================
   02 - CARD PRINCIPAL
===================================================== */

.simulador-card{

    background:var(--cor-card);

    border-radius:var(--raio);

    box-shadow:var(--sombra);

    overflow:hidden;

    width:100%;

    border:1px solid var(--cor-borda);

    transition:all var(--transicao);

}

.simulador-card:hover{

    box-shadow:
        0 18px 45px rgba(0,0,0,.12);

}

.card-header{

    background:#ffffff;

    padding:35px 40px;

    border-bottom:1px solid var(--cor-borda);

}

.card-body{

    padding:40px;

}

.card-footer{

    padding:30px 40px;

    background:#fafafa;

    border-top:1px solid var(--cor-borda);

}

/* Espaçamento entre os blocos */

.bloco{

    margin-bottom:35px;

}

.bloco:last-child{

    margin-bottom:0;

}

/* Títulos */

.card-titulo{

    font-size:32px;

    font-weight:700;

    color:var(--cor-texto);

    margin-bottom:12px;

    line-height:1.2;

}

.card-subtitulo{

    font-size:17px;

    color:var(--cor-texto-claro);

    line-height:1.6;

    max-width:700px;

}

/* Linha divisória elegante */

.divisor{

    width:100%;

    height:1px;

    background:#ececec;

    margin:20px 0;

}

/* Badge superior */

.badge-simulador{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#ffe8e8;

    color:var(--cor-principal);

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

/* Caixa branca interna */

.box{

    background:#ffffff;

    border:1px solid var(--cor-borda);

    border-radius:14px;

    padding:25px;

    transition:.30s;

}

.box:hover{

    border-color:var(--cor-principal);

    box-shadow:

        0 8px 20px rgba(215,25,32,.08);

}

/* =====================================================
   03 - CABEÇALHO
===================================================== */

.sim-header{

    text-align:center;

    margin-bottom:35px;

}

.sim-logo{

    width:82px;

    height:82px;

    margin:0 auto 20px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--cor-principal),
        #ff5b5b
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:34px;

    box-shadow:
        0 12px 30px rgba(215,25,32,.30);

}

.sim-header h1{

    font-size:34px;

    font-weight:700;

    color:var(--cor-texto);

    margin-bottom:8px;

    line-height:1.2;

}

.sim-header p{

    max-width:700px;

    margin:auto;

    color:var(--cor-texto-claro);

    font-size:17px;

    line-height:1.7;

}

/* Informações rápidas */

.sim-info{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:28px;

}

.info-item{

    background:#ffffff;

    border:1px solid var(--cor-borda);

    border-radius:50px;

    padding:10px 18px;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    font-weight:600;

    color:#555;

    transition:.30s;

}

.info-item:hover{

    border-color:var(--cor-principal);

    color:var(--cor-principal);

    transform:translateY(-2px);

}

.info-item i{

    color:var(--cor-principal);

    font-size:16px;

}

/* Caixa de destaque */

.sim-alerta{

    margin-top:30px;

    background:#fff8f8;

    border-left:5px solid var(--cor-principal);

    border-radius:12px;

    padding:18px 22px;

    font-size:15px;

    color:#555;

    line-height:1.7;

}

.sim-alerta strong{

    color:var(--cor-principal);

}

/* Selos */

.sim-selos{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:25px;

}

.selo{

    background:#ffffff;

    border:1px solid var(--cor-borda);

    border-radius:12px;

    padding:12px 18px;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    font-weight:600;

    box-shadow:0 4px 12px rgba(0,0,0,.05);

    transition:.30s;

}

.selo:hover{

    transform:translateY(-3px);

    border-color:var(--cor-principal);

    box-shadow:0 10px 22px rgba(215,25,32,.12);

}

.selo i{

    color:var(--cor-principal);

    font-size:18px;

}

/* =====================================================
   04 - BARRA DE PROGRESSO
===================================================== */

.progresso{

    margin:35px 0 45px;

}

.progresso-topo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.progresso-titulo{

    font-size:16px;

    font-weight:600;

    color:var(--cor-texto);

}

.progresso-porcentagem{

    font-size:15px;

    font-weight:700;

    color:var(--cor-principal);

}

/* Barra */

.progresso-barra{

    width:100%;

    height:12px;

    background:#eceff3;

    border-radius:30px;

    overflow:hidden;

    position:relative;

}

/* Barra preenchida */

.progresso-preenchido{

    width:0%;

    height:100%;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--cor-principal),
        #ff6262
    );

    transition:width .45s ease;

    position:relative;

}

/* Efeito brilho */

.progresso-preenchido::after{

    content:"";

    position:absolute;

    top:0;

    left:-40%;

    width:40%;

    height:100%;

    background:rgba(255,255,255,.35);

    animation:brilhoBarra 2s linear infinite;

}

@keyframes brilhoBarra{

    from{

        left:-40%;

    }

    to{

        left:120%;

    }

}

/* Etapas */

.progresso-etapas{

    margin-top:18px;

    display:flex;

    justify-content:space-between;

    gap:10px;

}

.etapa{

    flex:1;

    text-align:center;

    position:relative;

}

.etapa-numero{

    width:34px;

    height:34px;

    margin:auto;

    border-radius:50%;

    background:#e7e7e7;

    color:#888;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    transition:.30s;

}

.etapa span{

    display:block;

    margin-top:8px;

    font-size:13px;

    color:#888;

}

/* Etapa ativa */

.etapa.ativa .etapa-numero{

    background:var(--cor-principal);

    color:#fff;

    box-shadow:0 8px 20px rgba(215,25,32,.25);

}

.etapa.ativa span{

    color:var(--cor-principal);

    font-weight:600;

}

/* Etapa concluída */

.etapa.concluida .etapa-numero{

    background:var(--cor-sucesso);

    color:#fff;

}

.etapa.concluida span{

    color:var(--cor-sucesso);

    font-weight:600;

}

/* Linha entre etapas */

.etapa:not(:last-child)::after{

    content:"";

    position:absolute;

    top:17px;

    left:60%;

    width:80%;

    height:2px;

    background:#dddddd;

    z-index:-1;

}

/* =====================================================
   05 - TELAS (STEPS)
===================================================== */

/* Área das etapas */

.steps{

    position:relative;

    width:100%;

    overflow:hidden;

}

/* Cada tela */

.step{

    display:none;

    animation:fadeStep .45s ease;

}

/* Tela ativa */

.step.ativo{

    display:block;

}

/* Animação */

@keyframes fadeStep{

    from{

        opacity:0;

        transform:translateX(25px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* Título da etapa */

.step-titulo{

    font-size:28px;

    font-weight:700;

    color:var(--cor-texto);

    margin-bottom:10px;

}

/* Texto auxiliar */

.step-subtitulo{

    font-size:16px;

    color:var(--cor-texto-claro);

    margin-bottom:35px;

    line-height:1.7;

}

/* Grupo de perguntas */

.step-grupo{

    margin-bottom:30px;

}

/* Separação entre linhas */

.step-linha{

    display:grid;

    grid-template-columns:repeat(2,1fr);

/* era 22px 1208 8:17


    gap:18px;

    margin-bottom:22px;

}

/* Linha com 3 colunas */

.step-linha-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-bottom:22px;

}

/* Linha única */

.step-linha-1{

    display:block;

    margin-bottom:22px;

}

/* Caixa de destaque */

.step-box{

    background:#fafafa;

    border:1px solid var(--cor-borda);

    border-radius:14px;

    padding:22px;

    transition:.30s;

}

.step-box:hover{

    border-color:var(--cor-principal);

    box-shadow:

        0 10px 25px rgba(215,25,32,.08);

}

/* Ícone do título */

.step-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#ffe8e8;

    color:var(--cor-principal);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    margin-bottom:18px;

}

/* Mensagens */

.step-msg{

    background:#fff8ea;

    border-left:5px solid #f4b400;

    padding:18px;

    border-radius:10px;

    color:#666;

    font-size:15px;

    line-height:1.7;

    margin-top:25px;

}

/* Sucesso */

.step-sucesso{

    background:#edf9f2;

    border-left:5px solid var(--cor-sucesso);

}

/* Erro */

.step-erro{

    background:#fff2f2;

    border-left:5px solid #d71920;

}

/* Navegação */

.step-navegacao{

    margin-top:40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

/* Centralizada */

.step-navegacao.center{

    justify-content:center;

}

/* Botões lado direito */

.step-direita{

    display:flex;

    gap:15px;

}

/* Espaçamento final */

.step:last-child{

    padding-bottom:10px;

}

/* =====================================================
   06 - CAMPOS
===================================================== */

/* Grupo de campo */

.form-group{

    margin-bottom:4px;

}

/* Label */

.form-label{

    display:block;

    margin-bottom:4px;

    font-size:15px;

    font-weight:600;

    color:var(--cor-texto);

}

/* Campo obrigatório */

.form-label .obrigatorio{

    color:var(--cor-principal);

    margin-left:4px;

}

/* Texto de ajuda */

.form-help{

    margin-top:6px;

    font-size:13px;

    color:#888;

    line-height:1.5;

}

/* Linhas */

.form-row{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.form-row-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.form-row-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

}

/* Campo ocupa toda largura */

.form-full{

    grid-column:1/-1;

}

/* Cartões de opção */

.opcao-card{

    border:2px solid var(--cor-borda);

    border-radius:14px;

    background:#fff;

    padding:18px;

    cursor:pointer;

    transition:.30s;

    display:flex;

    align-items:center;

    gap:15px;

}

.opcao-card:hover{

    border-color:var(--cor-principal);

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(215,25,32,.08);

}

.opcao-card.ativo{

    border-color:var(--cor-principal);

    background:#fff7f7;

}

/* Ícone */

.opcao-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#ffeaea;

    color:var(--cor-principal);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    flex-shrink:0;

}

/* Conteúdo */

.opcao-texto{

    flex:1;

}

.opcao-titulo{

    font-size:15px;

    font-weight:600;

    color:var(--cor-texto);

    margin-bottom:4px;

}

.opcao-descricao{

    font-size:13px;

    color:#777;

    line-height:1.5;

}

/* Mensagens */

.erro{

    margin-top:8px;

    color:#d71920;

    font-size:13px;

    display:none;

}

.erro.visivel{

    display:block;

}

.sucesso{

    margin-top:8px;

    color:var(--cor-sucesso);

    font-size:13px;

}

/* Destaque */

.campo-destaque{

    padding:18px;

    background:#fff8f8;

    border:1px solid #ffd7d7;

    border-left:4px solid var(--cor-principal);

    border-radius:12px;

    margin-bottom:25px;

}

/* Separador */

.form-divider{

    height:1px;

    background:var(--cor-borda);

    margin:35px 0;

}

/* Título interno */

.form-section-title{

    font-size:20px;

    font-weight:700;

    color:var(--cor-texto);

    margin-bottom:20px;

}

/* =====================================================
   07 - INPUTS
===================================================== */

/* Todos os campos */

.form-control{

    width:100%;

    height:56px;

    padding:0 18px;

    font-size:16px;

    color:var(--cor-texto);

    background:#ffffff;

    border:2px solid var(--cor-borda);

    border-radius:12px;

    outline:none;

    transition:all .30s;

}

/* Textarea */

textarea.form-control{

    min-height:140px;

    padding:15px 18px;

    resize:vertical;

    line-height:1.6;

}

/* Focus */

.form-control:focus{

    border-color:var(--cor-principal);

    box-shadow:

        0 0 0 4px rgba(215,25,32,.10);

}

/* Placeholder */

.form-control::placeholder{

    color:#aaaaaa;

}

/* Hover */

.form-control:hover{

    border-color:#cccccc;

}

/* Disabled */

.form-control:disabled{

    background:#f4f4f4;

    color:#999;

    cursor:not-allowed;

}

/* Readonly */

.form-control[readonly]{

    background:#fafafa;

}

/* Campo válido */

.form-control.is-valid{

    border-color:var(--cor-sucesso);

}

.form-control.is-valid:focus{

    box-shadow:

        0 0 0 4px rgba(24,169,87,.12);

}

/* Campo inválido */

.form-control.is-invalid{

    border-color:#d71920;

}

.form-control.is-invalid:focus{

    box-shadow:

        0 0 0 4px rgba(215,25,32,.12);

}

/* Grupo com ícone */

.input-group{

    position:relative;

}

.input-group i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#999;

    font-size:18px;

    transition:.30s;

}

.input-group .form-control{

    padding-left:50px;

}

.input-group .form-control:focus + i{

    color:var(--cor-principal);

}

/* Ícone à direita */

.input-right{

    position:relative;

}

.input-right i{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:#999;

}

/* Prefixo */

.input-prefix{

    display:flex;

    align-items:center;

    border:2px solid var(--cor-borda);

    border-radius:12px;

    overflow:hidden;

    transition:.30s;

}

.input-prefix span{

    padding:0 18px;

    background:#f7f7f7;

    font-weight:600;

    color:#666;

    height:56px;

    display:flex;

    align-items:center;

    border-right:1px solid var(--cor-borda);

}

.input-prefix input{

    flex:1;

    border:none;

    outline:none;

    height:56px;

    padding:0 18px;

    font-size:16px;

}

.input-prefix:focus-within{

    border-color:var(--cor-principal);

    box-shadow:

        0 0 0 4px rgba(215,25,32,.10);

}

/* Sufixo */

.input-suffix{

    display:flex;

    align-items:center;

    border:2px solid var(--cor-borda);

    border-radius:12px;

    overflow:hidden;

}

.input-suffix span{

    padding:0 18px;

    background:#f7f7f7;

    font-weight:600;

    color:#666;

    height:56px;

    display:flex;

    align-items:center;

    border-left:1px solid var(--cor-borda);

}

.input-suffix input{

    flex:1;

    border:none;

    outline:none;

    padding:0 18px;

    height:56px;

}

/* Busca */

.input-search{

    position:relative;

}

.input-search button{

    position:absolute;

    right:8px;

    top:8px;

    width:40px;

    height:40px;

    border:none;

    background:var(--cor-principal);

    color:#fff;

    border-radius:10px;

    cursor:pointer;

    transition:.30s;

}

.input-search button:hover{

    background:var(--cor-principal-hover);

}

/* Contador */

.char-count{

    margin-top:6px;

    text-align:right;

    font-size:12px;

    color:#999;

}

/* Loading */

.input-loading{

    position:relative;

}

.input-loading::after{

    content:"";

    position:absolute;

    right:18px;

    top:50%;

    width:18px;

    height:18px;

    margin-top:-9px;

    border:3px solid #ddd;

    border-top:3px solid var(--cor-principal);

    border-radius:50%;

    animation:inputLoading .8s linear infinite;

}

@keyframes inputLoading{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* =====================================================
   08 - SELECTS
===================================================== */

/* Select padrão */

.form-select{

    width:100%;

    height:56px;

    padding:0 50px 0 18px;

    border:2px solid var(--cor-borda);

    border-radius:12px;

    background:#fff;

    color:var(--cor-texto);

    font-size:16px;

    cursor:pointer;

    outline:none;

    transition:all .30s;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

}

/* Focus */

.form-select:focus{

    border-color:var(--cor-principal);

    box-shadow:

        0 0 0 4px rgba(215,25,32,.10);

}

/* Hover */

.form-select:hover{

    border-color:#cfcfcf;

}

/* Disabled */

.form-select:disabled{

    background:#f4f4f4;

    color:#999;

    cursor:not-allowed;

}

/* Grupo */

.select-group{

    position:relative;

}

/* Seta */

.select-group::after{

    content:"▼";

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    font-size:12px;

    color:#888;

    pointer-events:none;

    transition:.30s;

}

.select-group:focus-within::after{

    color:var(--cor-principal);

}

/* Ícone */

.select-icon{

    position:relative;

}

.select-icon i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#999;

    z-index:2;

}

.select-icon .form-select{

    padding-left:50px;

}

/* Válido */

.form-select.is-valid{

    border-color:var(--cor-sucesso);

}

/* Inválido */

.form-select.is-invalid{

    border-color:#d71920;

}

/* Select pequeno */

.form-select-sm{

    height:46px;

    font-size:14px;

}

/* Select grande */

.form-select-lg{

    height:64px;

    font-size:18px;

}

/* Grupo horizontal */

.select-inline{

    display:flex;

    gap:15px;

}

.select-inline .select-group{

    flex:1;

}

/* Card Select */

.select-card{

    border:2px solid var(--cor-borda);

    border-radius:14px;

    padding:18px;

    background:#fff;

    transition:.30s;

}

.select-card:hover{

    border-color:var(--cor-principal);

    box-shadow:

        0 10px 25px rgba(215,25,32,.08);

}

/* Label */

.select-label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:var(--cor-texto);

}

/* Mensagem */

.select-msg{

    margin-top:8px;

    font-size:13px;

    color:#888;

}

/* Múltiplos */

.form-select[multiple]{

    height:auto;

    min-height:170px;

    padding:12px;

}

.form-select[multiple] option{

    padding:12px;

    border-radius:6px;

    margin-bottom:3px;

}

/* Optgroup */

.form-select optgroup{

    font-weight:700;

    color:var(--cor-principal);

}

/* Option */

.form-select option{

    color:#333;

}


/* =====================================================
   09 - BOTÕES
===================================================== */

/* Botão padrão */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:56px;

    padding:0 28px;

    border:none;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    text-decoration:none;

    transition:all .30s;

    user-select:none;

}

/* Botão Principal */

.btn-primary{

    background:var(--cor-principal);

    color:#fff;

    box-shadow:0 10px 25px rgba(215,25,32,.25);

}

.btn-primary:hover{

    background:var(--cor-principal-hover);

    transform:translateY(-2px);

    box-shadow:0 16px 35px rgba(215,25,32,.35);

}

.btn-primary:active{

    transform:scale(.98);

}

/* Botão Secundário */

.btn-secondary{

    background:#ffffff;

    color:var(--cor-texto);

    border:2px solid var(--cor-borda);

}

.btn-secondary:hover{

    border-color:var(--cor-principal);

    color:var(--cor-principal);

}

/* Botão Sucesso */

.btn-success{

    background:var(--cor-sucesso);

    color:#fff;

}

.btn-success:hover{

    filter:brightness(.95);

    transform:translateY(-2px);

}

/* Botão Outline */

.btn-outline{

    background:transparent;

    border:2px solid var(--cor-principal);

    color:var(--cor-principal);

}

.btn-outline:hover{

    background:var(--cor-principal);

    color:#fff;

}

/* Largura Total */

.btn-block{

    width:100%;

}

/* Pequeno */

.btn-sm{

    min-height:42px;

    padding:0 18px;

    font-size:14px;

}

/* Grande */

.btn-lg{

    min-height:64px;

    padding:0 36px;

    font-size:18px;

}

/* Desabilitado */

.btn:disabled{

    opacity:.60;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/* Ícones */

.btn i{

    font-size:16px;

}

/* Grupo */

.btn-group{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.btn-group .btn{

    flex:1;

}

/* Navegação */

.btn-nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:40px;

}

/* Loading */

.btn-loading{

    pointer-events:none;

    opacity:.85;

}

.btn-loading::after{

    content:"";

    width:18px;

    height:18px;

    border:3px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:btnLoading .8s linear infinite;

    margin-left:10px;

}

@keyframes btnLoading{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* Efeito de clique */

.btn-click{

    position:relative;

    overflow:hidden;

}

.btn-click::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

    background:rgba(255,255,255,.25);

    transform:translate(-50%,-50%);

    transition:width .45s,height .45s;

}

.btn-click:active::before{

    width:320px;

    height:320px;

}

/* =====================================================
   10 - RESUMO DA SIMULAÇÃO
===================================================== */

/* Card do Resultado */

.resumo{

    background:#ffffff;

    border:1px solid var(--cor-borda);

    border-radius:18px;

    box-shadow:var(--sombra);

    padding:35px;

    margin-top:30px;

}

/* Cabeçalho */

.resumo-header{

    text-align:center;

    margin-bottom:24px;

}

.resumo-header i{

    width:80px;

    height:80px;

    margin:auto auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eaf8ef;

    color:var(--cor-sucesso);

    font-size:38px;

}

.resumo-header h2{

    font-size:30px;

    font-weight:700;

    color:var(--cor-texto);

    margin-bottom:4px;

}

.resumo-header p{

    color:var(--cor-texto-claro);

    line-height:1.7;

    font-size:16px;

}

/* Grid */

.resumo-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:20px;

}

/* Item */

.resumo-item{

    background:#fafafa;

    border:1px solid var(--cor-borda);

    border-radius:14px;

    padding:20px;

    transition:.30s;

}

.resumo-item:hover{

    border-color:var(--cor-principal);

    box-shadow:

        0 8px 20px rgba(215,25,32,.08);

}

.resumo-label{

    display:block;

    font-size:13px;

    color:#888;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.resumo-valor{

    font-size:24px;

    font-weight:700;

    color:var(--cor-principal);

}

/* Caixa Principal */

.resumo-destaque{

    margin:35px 0;

    padding:30px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--cor-principal),
        #ff5757
    );

    color:#fff;

    text-align:center;

}

.resumo-destaque small{

    display:block;

    opacity:.90;

    font-size:15px;

}

.resumo-destaque strong{

    display:block;

    margin-top:10px;

    font-size:42px;

    font-weight:700;

}

/* Lista */

.resumo-lista{

    margin-top:30px;

}

.resumo-lista ul{

    list-style:none;

    padding:0;

}

.resumo-lista li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:16px;

    line-height:1.6;

    color:#555;

}

.resumo-lista i{

    color:var(--cor-sucesso);

    margin-top:3px;

}

/* Observação */

.resumo-info{

    margin-top:30px;

    padding:22px;

    background:#fff8e8;

    border-left:5px solid #f4b400;

    border-radius:12px;

    color:#666;

    line-height:1.7;

}

/* CTA */

.resumo-cta{

    margin-top:40px;

    text-align:center;

}

.resumo-cta h3{

    font-size:24px;

    margin-bottom:12px;

    color:var(--cor-texto);

}

.resumo-cta p{

    color:#777;

    margin-bottom:25px;

}

/* Confiança */

.resumo-seguranca{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:25px;

}

.resumo-selo{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#666;

}

.resumo-selo i{

    color:var(--cor-sucesso);

}

/* =====================================================
   11 - RESPONSIVIDADE
===================================================== */

/* Notebook */

@media (max-width:1200px){

    .simulador-container{

        max-width:960px;

    }

}

/* Tablet */

@media (max-width:992px){

    .simulador{

        padding:40px 15px;

    }

    .card-header,
    .card-body,
    .card-footer{

        padding:30px;

    }

    .card-titulo{

        font-size:28px;

    }

    .step-titulo{

        font-size:24px;

    }

    .form-row,
    .form-row-3,
    .form-row-4,
    .step-linha,
    .step-linha-3,
    .resumo-grid{

        grid-template-columns:1fr;

    }

    .btn-group{

        flex-direction:column;

    }

}

/* Celular */

@media (max-width:768px){

    body{

        font-size:15px;

    }

    .simulador{

        padding:20px 12px;

    }

    .card-header,
    .card-body,
    .card-footer{

        padding:22px;

    }

    .sim-logo{

        width:70px;
        height:70px;
        font-size:30px;

    }

    .card-titulo,
    .sim-header h1{

        font-size:24px;

    }

    .card-subtitulo,
    .sim-header p{

        font-size:15px;

    }

    .step-titulo{

        font-size:22px;

    }

    .progresso-etapas{

        display:none;

    }

    .sim-info,
    .sim-selos{

        flex-direction:column;

        align-items:stretch;

    }

    .info-item,
    .selo{

        justify-content:center;

    }

    .btn-nav{

        flex-direction:column;

    }

    .btn-nav .btn{

        width:100%;

    }

    .btn{

        width:100%;

    }

    .form-control,
    .form-select{

        height:54px;

        font-size:16px;

    }

    .resumo{

        padding:22px;

    }

    .resumo-destaque strong{

        font-size:34px;

    }

}

/* Celulares pequenos */

@media (max-width:480px){

    .simulador{

        padding:15px 10px;

    }

    .card-header,
    .card-body,
    .card-footer{

        padding:18px;

    }

    .card-titulo,
    .sim-header h1{

        font-size:22px;

    }

    .step-titulo{

        font-size:20px;

    }

    .badge-simulador{

        font-size:12px;

        padding:7px 14px;

    }

    .resumo-header h2{

        font-size:24px;

    }

    .resumo-destaque{

        padding:22px;

    }

    .resumo-destaque strong{

        font-size:30px;

    }

    .resumo-item{

        padding:16px;

    }

    .resumo-valor{

        font-size:20px;

    }

    .btn{

        min-height:52px;

        font-size:15px;

    }

    .sim-logo{

        width:60px;
        height:60px;
        font-size:26px;

    }

}

/* Telas grandes */

@media (min-width:1600px){

    .simulador-container{

        max-width:1250px;

    }

}

body{
    background:red !important;
}
.radio-participantes{
    display:flex;
    gap:28px;
    align-items:center;
    margin-top:10px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.radio-participantes label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-weight:600;
}

.radio-participantes input{
    transform:scale(1.2);
}

/* Junta todos os elementos e remove o espaçamento gigante */
.simulador, 
.simulador-container, 
form, 
[id*="etapa"], 
[class*="etapa"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    height: auto !important;
    min-height: unset !important;
}

/* Cria o fundo/card para agrupar as perguntas de cada etapa */
form, [class*="etapa"] {
    background: #ffffff !important;
    padding: 30px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,.06) !important;
    width: 100% !important;
    max-width: 600px !important; /* Deixa o formulário compacto no centro */
    margin: 20px auto !important;
}

/* Controla o espaço entre os textos internos */
h3, p, select, input, label {
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    width: 100% !important;
    text-align: left !important;
}