/* =====================================================
   CALCULADORA DE RIESGO NORMATIVO V3 PREMIUM
   OPTIMIZACIÓN CANARIAS
===================================================== */


/* =====================================================
   SECCIÓN PRINCIPAL
===================================================== */

#calculadora {

    padding: 130px 0 120px;

    background: #F7F9FC;

    overflow: hidden;

}


/* =====================================================
   CONTENEDOR
===================================================== */

.calculadora-container {

    width: 100%;

    max-width: 1120px;

    margin: 0 auto;

    padding: 0 30px;

    box-sizing: border-box;

}


/* =====================================================
   CABECERA
===================================================== */

.calculadora-header {

    max-width: 780px;

    margin: 0 auto 65px;

    text-align: center;

}


.calculadora-header .section-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 11px 22px;

    margin-bottom: 24px;

    background: #EEF6E2;

    color: #7DAA3D;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 700;

}


.calculadora-header h2 {

    margin: 0 0 22px;

    color: #0B2149;

    font-size: 50px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.8px;

}


.calculadora-header p {

    max-width: 700px;

    margin: 0 auto;

    color: #667085;

    font-size: 19px;

    line-height: 1.7;

}


/* =====================================================
   CAJA PRINCIPAL
===================================================== */

.calculadora-box {

    position: relative;

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding: 55px;

    background: #FFFFFF;

    border: 1px solid #E6EAF0;

    border-radius: 32px;

    box-shadow:
        0 35px 90px rgba(16, 24, 40, 0.09);

    box-sizing: border-box;

}


/* =====================================================
   BARRA DE PROGRESO
===================================================== */

.calculadora-progress {

    margin-bottom: 45px;

}


.progress-info {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

    color: #667085;

    font-size: 13px;

    font-weight: 600;

}


.progress-info strong {

    color: #0B2149;

    font-size: 13px;

    font-weight: 700;

}


.progress-bar {

    width: 100%;

    height: 7px;

    overflow: hidden;

    background: #EEF0F3;

    border-radius: 20px;

}


#progress-fill {

    display: block;

    width: 20%;

    height: 100%;

    background: #7DAA3D;

    border-radius: 20px;

    transition: width .5s ease;

}


/* =====================================================
   PASOS
===================================================== */

.calculadora-step {

    display: none;

}


.calculadora-step.active {

    display: block;

    animation: calculatorStepIn .45s ease both;

}


@keyframes calculatorStepIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =====================================================
   NÚMERO DEL PASO
===================================================== */

.step-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 55px;

    height: 55px;

    margin-bottom: 26px;

    background: #EEF6E2;

    color: #7DAA3D;

    border-radius: 50%;

    font-size: 15px;

    font-weight: 800;

}


/* =====================================================
   CONTENIDO
===================================================== */

.step-content h3 {

    margin: 0 0 14px;

    color: #0B2149;

    font-size: 29px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: -.5px;

}


.step-content p {

    max-width: 700px;

    margin: 0 0 35px;

    color: #667085;

    font-size: 17px;

    line-height: 1.65;

}


/* =====================================================
   OPCIONES
===================================================== */

.calculator-options {

    display: grid;

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

    gap: 16px;

}


.calculator-option {

    display: flex;

    align-items: center;

    gap: 16px;

    width: 100%;

    min-height: 78px;

    padding: 18px 22px;

    background: #FFFFFF;

    border: 2px solid #E7EAF0;

    border-radius: 18px;

    color: #0B2149;

    font-family: inherit;

    font-size: 16px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


.calculator-option:hover {

    border-color: #7DAA3D;

    background: #FAFDF7;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(125, 170, 61, .12);

}


.calculator-option.selected {

    border-color: #7DAA3D;

    background: #EEF6E2;

    box-shadow:
        0 12px 30px rgba(125, 170, 61, .15);

}


.option-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    background: #F1F7E9;

    border-radius: 13px;

    color: #7DAA3D;

    font-size: 20px;

}


.option-text {

    line-height: 1.4;

}


/* =====================================================
   RESULTADO
===================================================== */

.calculadora-result {

    display: none;

    text-align: center;

}


.calculadora-result.active {

    display: block;

    animation: calculatorResultIn .6s ease both;

}


@keyframes calculatorResultIn {

    from {

        opacity: 0;

        transform: scale(.97) translateY(15px);

    }

    to {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}


/* =====================================================
   RESULTADO BADGE
===================================================== */

.result-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 20px;

    margin-bottom: 25px;

    background: #EEF6E2;

    color: #7DAA3D;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

}


/* =====================================================
   TÍTULO RESULTADO
===================================================== */

.calculadora-result h3 {

    max-width: 650px;

    margin: 0 auto 30px;

    color: #0B2149;

    font-size: 28px;

    line-height: 1.35;

    font-weight: 800;

}


/* =====================================================
   MEDIDOR DE RIESGO
===================================================== */

.risk-meter {

    display: flex;

    justify-content: center;

    margin-bottom: 25px;

}


.risk-meter-circle {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 170px;

    height: 170px;

    border: 12px solid #EEF6E2;

    border-top-color: #7DAA3D;

    border-right-color: #7DAA3D;

    border-radius: 50%;

    box-sizing: border-box;

    animation: meterAppear .8s ease both;

}


@keyframes meterAppear {

    from {

        opacity: 0;

        transform: scale(.7);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


#risk-score {

    color: #0B2149;

    font-size: 34px;

    font-weight: 800;

}


.risk-meter-circle small {

    margin-top: 3px;

    color: #667085;

    font-size: 12px;

    font-weight: 600;

}


/* =====================================================
   NIVEL DE RIESGO
===================================================== */

.result-level {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 240px;

    padding: 15px 28px;

    margin-bottom: 22px;

    background: #EEF6E2;

    color: #7DAA3D;

    border-radius: 14px;

    font-size: 25px;

    font-weight: 800;

}


/* =====================================================
   TÍTULO DEL RESULTADO
===================================================== */

.calculadora-result h4 {

    max-width: 650px;

    margin: 0 auto 14px;

    color: #0B2149;

    font-size: 22px;

    line-height: 1.4;

    font-weight: 800;

}


/* =====================================================
   TEXTO DEL RESULTADO
===================================================== */

.calculadora-result > p {

    max-width: 650px;

    margin: 0 auto 35px;

    color: #667085;

    font-size: 17px;

    line-height: 1.7;

}


/* =====================================================
   CTA RESULTADO
===================================================== */

.result-cta {

    max-width: 650px;

    margin: 0 auto 30px;

    padding: 30px;

    background: #F7F9FC;

    border: 1px solid #E8EBF0;

    border-radius: 20px;

}


.result-cta strong {

    display: block;

    margin-bottom: 8px;

    color: #0B2149;

    font-size: 18px;

    line-height: 1.4;

}


.result-cta span {

    display: block;

    margin-bottom: 22px;

    color: #667085;

    font-size: 15px;

    line-height: 1.6;

}


.result-cta .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 270px;

}


/* =====================================================
   REINICIAR
===================================================== */

.calculator-restart {

    padding: 8px 0;

    background: transparent;

    border: none;

    color: #667085;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: color .25s ease;

}


.calculator-restart:hover {

    color: #7DAA3D;

}


/* =====================================================
   CONFIANZA
===================================================== */

.calculadora-trust {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 35px;

    margin-top: 35px;

    color: #667085;

    font-size: 14px;

    font-weight: 600;

}


.calculadora-trust span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}


.calculadora-trust span::first-letter {

    color: #7DAA3D;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    #calculadora {

        padding: 100px 0;

    }


    .calculadora-header h2 {

        font-size: 42px;

    }


    .calculadora-box {

        padding: 45px;

    }


}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 768px) {

    #calculadora {

        padding: 80px 0;

    }


    .calculadora-container {

        padding: 0 20px;

    }


    .calculadora-header {

        margin-bottom: 45px;

    }


    .calculadora-header .section-badge {

        font-size: 12px;

        padding: 9px 16px;

    }


    .calculadora-header h2 {

        font-size: 32px;

        line-height: 1.2;

        letter-spacing: -.5px;

    }


    .calculadora-header p {

        font-size: 16px;

        line-height: 1.6;

    }


    .calculadora-box {

        padding: 30px 22px;

        border-radius: 23px;

    }


    .calculadora-progress {

        margin-bottom: 35px;

    }


    .step-number {

        width: 45px;

        height: 45px;

        margin-bottom: 20px;

    }


    .step-content h3 {

        font-size: 23px;

    }


    .step-content p {

        font-size: 16px;

        margin-bottom: 25px;

    }


    .calculator-options {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .calculator-option {

        min-height: 64px;

        padding: 15px 16px;

        font-size: 15px;

    }


    .option-icon {

        width: 40px;

        height: 40px;

    }


    .risk-meter-circle {

        width: 145px;

        height: 145px;

    }


    #risk-score {

        font-size: 30px;

    }


    .calculadora-result h3 {

        font-size: 23px;

    }


    .calculadora-result h4 {

        font-size: 19px;

    }


    .calculadora-result > p {

        font-size: 16px;

    }


    .result-cta {

        padding: 25px 20px;

    }


    .result-cta .btn {

        width: 100%;

        min-width: 0;

    }


    .calculadora-trust {

        flex-direction: column;

        gap: 12px;

        text-align: center;

    }

}


/* =====================================================
   MÓVIL PEQUEÑO
===================================================== */

@media (max-width: 480px) {

    #calculadora {

        padding: 70px 0;

    }


    .calculadora-container {

        padding: 0 16px;

    }


    .calculadora-header h2 {

        font-size: 28px;

    }


    .calculadora-header p {

        font-size: 15px;

    }


    .calculadora-box {

        padding: 25px 18px;

        border-radius: 20px;

    }


    .progress-info {

        font-size: 12px;

    }


    .step-content h3 {

        font-size: 21px;

    }


    .step-content p {

        font-size: 15px;

    }


    .calculator-option {

        font-size: 14px;

    }


    .risk-meter-circle {

        width: 135px;

        height: 135px;

        border-width: 10px;

    }


    #risk-score {

        font-size: 27px;

    }


    .result-level {

        width: 100%;

        min-width: 0;

        box-sizing: border-box;

        font-size: 22px;

    }


    .calculadora-result h3 {

        font-size: 21px;

    }


    .calculadora-result h4 {

        font-size: 18px;

    }


}