.calculator-page{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding-top:90px;
}

.container{
    width:100%;
    max-width:900px;

    margin:0 auto;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:25px 20px 80px;
}

@media(min-width:1200px){

    .container{
        max-width:1000px;
    }

    .card{
        width:100%;
        max-width:900px;

        margin:0 auto;
    }

}

@media (max-width:1024px){

    .calculator-page{
        align-items:center;
    }

    nav{
        padding:.7rem 1.2rem;
    }

    .container{
        padding:22px 18px 70px;
    }

    .card{
        padding:28px;
    }

    .hero-card{
        padding:34px 28px;
    }

    .resultado-paneles{
        width:160px;
        height:160px;
    }

    .resultado-paneles span{
        font-size:3.1rem;
    }

}

@media(max-width:825px){

    .calculator-page{
        justify-content:center;
        align-items:flex-start;

        padding-top:95px;
    }

    .container{
        display:flex;
        flex-direction:column;
        align-items:center;

        width:100%;

        padding:20px 18px 65px;
    }

    .card{
        width:100%;
        max-width:720px;
    }

    .hamburger{
        display:flex;
        z-index:3200;
    }

    nav{
        padding:.8rem 1rem;
    }

    .nav-logo{
        width:48px;
    }

    .logo-link{
        gap:.7rem;
    }

    .logo-link h1{
        font-size:1.15rem;
    }

    .nav-links{
        position:absolute;

        top:calc(100% + 10px);
        right:.9rem;

        width:255px;
        max-width:calc(100vw - 1.8rem);

        display:flex;
        flex-direction:column;
        align-items:center;
        gap:.65rem;

        padding:.85rem;

        background:rgba(15,23,42,.82);

        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);

        border:1px solid rgba(255,255,255,.16);

        border-radius:16px;

        box-shadow:
        0 18px 40px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.10);

        transform:translateY(-12px) scale(.97);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transition:all .28s ease;
    }

    .nav-links.open{
        transform:translateY(0) scale(1);

        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .nav-links li{
        width:100%;

        display:flex;
        justify-content:center;
    }

    .nav-links a,
    .nav-links .btn{
        width:100%;

        text-align:center;

        color:#fff !important;

        font-size:.93rem;

        padding:.75rem .9rem;

        border-radius:12px;
    }

    .nav-links a:hover{
        background:rgba(255,255,255,.12);

        color:#fff !important;
    }

    .card{
        padding:26px 22px;
    }

    .hero-card{
        padding:32px 24px;
    }

    .hero-card h2{
        font-size:2rem;
    }

    .resultado-grid{
        grid-template-columns:1fr;
    }

    .buttons-row{
        flex-direction:column;
    }

    .resultado-paneles{
        width:155px;
        height:155px;
    }

    .resultado-paneles span{
        font-size:3rem;
    }

    .cotizacion-box{
        padding:26px;
    }

}

@media(max-width:768px){

    .calculator-page{
        padding-top:85px;
    }

    .container{
        width:100%;

        display:flex;
        flex-direction:column;
        align-items:center;

        padding:18px 16px 60px;
    }

    .card{
        width:100%;
        max-width:680px;

        padding:24px 20px;

        border-radius:16px;
    }

    .hero-card{
        padding:30px 20px;
    }

    .hero-card h2{
        font-size:1.9rem;
    }

    .hero-card p{
        font-size:.97rem;
    }

    .step-text{
        font-size:.95rem;
    }

    .benefits li{
        font-size:1rem;
    }

    .resultado-main{
        margin:24px 0;
    }

    .resultado-paneles{
        width:145px;
        height:145px;
    }

    .resultado-paneles span{
        font-size:2.7rem;
    }

    .resultado-paneles small{
        font-size:.92rem;
    }

    .resultado-item{
        padding:18px;
    }

    .resultado-item strong{
        font-size:1.55rem;
    }

    .cotizacion-box{
        margin-top:40px;
        padding:22px;
    }

    .modalContent{
        padding:28px 22px;
    }

    table{
        font-size:.95rem;
    }

    th,
    td{
        padding:12px;
    }

}

@media(max-width:700px){

    #inputMeses{
        grid-template-columns:1fr;
    }

    .progress-container{
        height:9px;
    }

    .buttons-row{
        gap:12px;
    }

}

@media(max-width:600px){

    body{
        font-size:15px;
    }

    .calculator-page{
        align-items:flex-start;
    }

    .container{
        width:100%;

        display:flex;
        flex-direction:column;
        align-items:center;

        padding:16px 14px 55px;
    }

    .card{
        width:100%;

        padding:22px 18px;
    }

    .hero-card h2{
        font-size:1.7rem;
    }

    .hero-card p{
        margin-bottom:20px;
    }

    input,
    select,
    textarea{
        padding:.8rem .9rem;
        font-size:.95rem;
    }

    .btn,
    .btn-secondary,
    .btn-outline{
        font-size:.95rem;
        padding:.8rem 1rem;
    }

    .resultado-paneles{
        width:135px;
        height:135px;
    }

    .resultado-paneles span{
        font-size:2.4rem;
    }

    .resultado-grid{
        gap:14px;
    }

    .cotizacion-box{
        padding:20px;
    }

    .modalContent{
        border-radius:20px;
    }

}


@media(max-width:480px){

    .nav-links{
        right:.7rem;

        width:230px;

        max-width:calc(100vw - 1.4rem);

        padding:.75rem;
    }

    .nav-logo{
        width:42px;
    }

    .logo-link h1{
        font-size:1rem;
    }

    .calculator-page{
        padding-top:80px;
    }

    .container{
        padding:14px 12px 50px;
    }

    .card{
        padding:20px 16px;
        border-radius:15px;
    }

    .hero-card{
        padding:26px 16px;
    }

    .hero-card h2{
        font-size:1.55rem;
        line-height:1.2;
    }

    .step-number{
        font-size:.82rem;
    }

    .step-text{
        font-size:.9rem;
    }

    .benefits li{
        font-size:.93rem;
    }

    label{
        font-size:.88rem;
    }

    input,
    select,
    textarea{
        border-radius:10px;
    }

    .resultado-paneles{
        width:125px;
        height:125px;
    }

    .resultado-paneles span{
        font-size:2.2rem;
    }

    .resultado-item{
        padding:16px;
    }

    .resultado-item strong{
        font-size:1.35rem;
    }

    .cotizacion-box{
        padding:18px 16px;
        border-radius:16px;
    }

    table{
        font-size:.88rem;
    }

    th,
    td{
        padding:10px;
    }

    .modalContent{
        padding:24px 18px;
    }

    #cerrarModal{
        font-size:1.7rem;
    }

    .social-icon a{
        font-size:26px;
    }

}

@media(max-width:360px){

    .nav-links{
        width:215px;
        padding:.65rem;
    }

    .nav-links a,
    .nav-links .btn{
        font-size:.87rem;
        padding:.65rem .75rem;
    }

    .logo-link h1{
        font-size:.92rem;
    }

    .nav-logo{
        width:38px;
    }

    .container{
        padding:12px 10px 45px;
    }

    .card{
        padding:18px 14px;
    }

    .hero-card h2{
        font-size:1.35rem;
    }

    .hero-card p{
        font-size:.85rem;
    }

    .resultado-paneles{
        width:112px;
        height:112px;
    }

    .resultado-paneles span{
        font-size:1.9rem;
    }

    .resultado-paneles small{
        font-size:.8rem;
    }

    .resultado-item strong{
        font-size:1.2rem;
    }

    .cotizacion-box{
        padding:15px;
    }

    th,
    td{
        padding:8px;
        font-size:.82rem;
    }

    .modalContent{
        padding:20px 14px;
    }

    .social-icons{
        gap:15px;
    }

    .social-icon a{
        font-size:22px;
    }

}