/* Variables for hard-coded values */
:root {
    --spacing-0: 0;
    --spacing-1px: 1px;
    --spacing-12: 12px;
    --spacing-14: 14px;
    --spacing-15: 15px;
    --spacing-16: 16px;
    --spacing-17: 17px;
    --spacing-18: 18px;
    --spacing-19: 19px;
    --spacing-20: 20px;
    --spacing-21: 21px;
    --spacing-22: 22px;
    --spacing-24: 24px;
    --spacing-25: 25px;
    --spacing-28: 28px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-34: 34px;
    --spacing-35: 35px;
    --spacing-36: 36px;
    --spacing-37: 37px;
    --spacing-38: 38px;
    --spacing-40: 40px;
    --spacing-42: 42px;
    --spacing-45: 45px;
    --spacing-46: 46px;
    --spacing-48: 48px;
    --spacing-49: 49px;
    --spacing-50: 50px;
    --spacing-52: 52px;
    --spacing-54: 54px;
    --spacing-56: 56px;
    --spacing-58: 58px;
    --spacing-60: 60px;
    --spacing-64: 64px;
    --spacing-66: 66px;
    --spacing-68: 68px;
    --spacing-70: 70px;
    --spacing-72: 72px;
    --spacing-75: 75px;
    --spacing-80: 80px;
    --spacing-85: 85px;
    --spacing-90: 90px;
    --spacing-95: 95px;
    --spacing-100: 100px;
    --spacing-105: 105px;
    --spacing-110: 110px;
    --spacing-115: 115px;
    --spacing-272: 272px;
    --spacing-300: 300px;
    --spacing-350: 350px;
    --spacing-400: 400px;
    --fs-7: 7px;
    --fs-8: 8px;
    --fs-9: 9px;
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-17: 17px;
    --fs-18: 18px;
    --fs-19: 19px;
    --fs-20: 20px;
    --fs-21: 21px;
    --fs-24: 24px;
    --fs-25: 25px;
    --fs-27: 27px;
    --fs-28: 28px;
    --fs-32: 32px;
    --fs-36: 36px;
    --fs-38: 38px;
    --fs-39: 39px;
    --fs-40: 40px;
    --fs-42: 42px;
    --fs-44: 44px;
    --fs-46: 46px;
    --fs-49: 49px;
    --width-75-percent: 75%;
    --width-100-percent: 100%;
}

#main-banner{
    padding-bottom: var(--spacing-40);
}
/* Espaciado para main-banner */
#main-banner .row {
    padding-top: var(--spacing-1);
}
#main-banner .col-md-6:first-child {
    padding-left: var(--spacing-40);
}
#main-banner .col-md-6:last-child {
    padding-left: var(--spacing-80);
    padding-right: var(--spacing-20);
}
#main-banner button {
    margin-top: var(--spacing-64);
}

#main-banner .subtitulo{
    font-family: var(--font-poppins);
    font-weight: var(--fw-600);
    font-size: var(--fs-16);
    line-height: var(--lh-160-percent);
    color: var(--subtitle-color);
    margin-bottom: var(--spacing-0);
    letter-spacing: var(--ls-1);
    text-transform: uppercase;
}
#main-banner .titulo{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-52);
    line-height: normal;
    color: var(--subtitle-color);
    margin-bottom: var(--mb-24);
}
#main-banner .texto{
    font-family: var(--font-poppins);
    font-weight: var(--fw-400);
    font-size: var(--fs-18);
    line-height: var(--lh-160-percent);
    color: var(--subtitle-color);
    margin-bottom: var(--spacing-0);
    margin-top: var(--mb-24);
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#main-banner .texto span{
    font-weight: var(--fw-600);
}
/* Espaciado para para-quien-es */
#para-quien-es {
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-20);
}
#para-quien-es .container {
    padding-top: var(--spacing-56);
    padding-bottom: var(--spacing-56);
    padding-left: var(--spacing-50);
    padding-right: var(--spacing-50);
}
#para-quien-es .titulo{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-48);
    line-height: var(--lh-100-percent);
    color: var(--white-color);
}
#para-quien-es .fa-ul li{
    font-family: var(--font-poppins);
    font-weight: var(--fw-300);
    font-size: var(--fs-18);
    line-height: var(--lh-160-percent);
    color: var(--white-color);
    margin-bottom: var(--mb-16);
}
#para-quien-es .fa-ul li:last-child{
    margin-bottom: var(--spacing-0);
}
#para-quien-es .fa-li{
    line-height: var(--lh-1);
}
#para-quien-es .fa-solid {
    font-size: var(--fs-7);
}
/* Espaciado para beneficios */
#beneficios {
    padding-top: var(--spacing-60);
    padding-bottom: var(--spacing-80);
}
#beneficios .container > div:first-child {
    padding-bottom: var(--spacing-80);
}
#beneficios .container > div:nth-child(2) {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
}

#beneficios .titulo{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-48);
    line-height: var(--lh-130-percent);
    text-align: center;
    color: var(--subtitle-color);
    margin-bottom: var(--mb-12);
}
#beneficios .subtitulo{
    font-family: var(--font-poppins);
    font-weight: var(--fw-300);
    font-size: var(--fs-20);
    line-height: var(--lh-150-percent);
    text-align: center;
    color: var(--subtitle-color);
    margin-bottom: var(--spacing-0);
    width: 50%;
}
#beneficios .subtitulo span{
    font-weight: var(--fw-500);
}
#beneficios .fa-ul li{
    font-family: var(--font-poppins);
    font-weight: var(--fw-400);
    font-size: var(--fs-20);
    line-height: var(--lh-160-percent);
    color: var(--subtitle-color);
    margin-bottom: var(--mb-16);
}
#beneficios .row.mb-80{
    margin-bottom: var(--spacing-80);
}
/* Espaciado para planes */
#planes {
    padding-top: var(--spacing-100);
    padding-bottom: var(--spacing-60);
}
#planes .container > div:first-child {
    padding-bottom: var(--spacing-80);
}
/* #planes .container > div:nth-child(2) {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
} */
#planes .plan > div:first-child {
    margin-bottom: var(--spacing-32);
}
#planes .plan > div:nth-child(2) {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-16);
}

#planes .titulo{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-40);
    line-height: var(--lh-130-percent);
    text-align: center;
    color: var(--subtitle-color);
    width: 75%;
    margin: 0 auto;
}
#planes .subtitulo{
    font-family: var(--font-poppins);
    font-weight: var(--fw-400);
    font-size: var(--fs-20);
    line-height: var(--lh-150-percent);
    text-align: center;
    color: var(--subtitle-color);
    margin-bottom: var(--spacing-0);
    width: 75%;
    margin: 0 auto;
}
#planes .plan .titulo-plan{
    font-family: var(--font-dm-sans);
    font-weight: var(--fw-600);
    font-size: var(--fs-32);
    line-height: var(--lh-130-percent);
    color: var(--subtitle-color);
    margin-bottom: var(--mb-24);
}
#planes .plan .precio-plan{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-32);
    line-height: var(--lh-160-percent);
    color: var(--subtitle-color);
    margin-bottom: var(--spacing-0);
}
#planes .plan .precio-plan span{
    font-family: var(--font-poppins);
    font-weight: var(--fw-300);
    font-size: var(--fs-16);
    line-height: var(--lh-160-percent);
    letter-spacing: var(--ls-0-2);
    color: var(--gray-color);
}
#planes .plan .titulo-servicios{
    font-family: var(--font-poppins);
    font-weight: var(--fw-600);
    font-size: var(--fs-16);
    line-height: var(--lh-160-percent);
    letter-spacing: var(--ls-0-2);
    text-transform: uppercase;
    color: var(--subtitle-color);
    margin-bottom: var(--mb-16);
    padding: 0;
    background-color: white;
}
#planes .plan .fa-ul li{
    font-family: var(--font-poppins);
    font-weight: var(--fw-300);
    font-size: var(--fs-16);
    line-height: var(--lh-160-percent);
    color: var(--subtitle-color);
    margin-bottom: var(--mb-16);
}
#planes .plan .fa-li{
    line-height: var(--lh-1);
}
#planes .plan .fa-solid {
    font-size: var(--fs-10);
}
#planes .plan .fa-ul li strong{
    font-weight: var(--fw-500)!important;
}
#planes .plan button.solicitar-plan{
    padding: var(--spacing-14) var(--spacing-16);
    border-radius: var(--button-border-radius);
    border-width: var(--spacing-1px);
    border: var(--spacing-1px) solid var(--button-text-color);
    font-family: var(--font-poppins);
    font-weight: var(--fw-500);
    font-size: var(--fs-16);
    line-height: var(--lh-130-percent);
    color: var(--button-text-color);
    display: flex;
    margin-top: var(--mb-32);
}
#planes .plan #planAccordion,
#planes .plan #planAccordion .accordion-item{
    background-color: white;
    border: none;
}
#planes .plan #planAccordion .accordion-body{
    padding-top: 0;
}
/* Espaciado para cta-optimiza */
#cta-optimiza {
    padding-top: var(--spacing-60);
    padding-bottom: var(--spacing-100);
}
#cta-optimiza button {
    margin-top: var(--spacing-16);
}

#cta-optimiza .titulo{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-40);
    line-height: var(--lh-100-percent);
    text-align: center;
    color: var(--midnight-green-light);
}
/* Espaciado para como-funciona */
#como-funciona {
    padding-top: var(--spacing-100);
    padding-bottom: var(--spacing-120);
}
#como-funciona .row {
    padding-top: var(--spacing-80);
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
}
#como-funciona .col-md-5 > div:nth-child(1),
#como-funciona .col-md-5 > div:nth-child(2) {
    padding-bottom: var(--spacing-40);
}
#como-funciona ul {
    margin-bottom: var(--spacing-0);
}

#como-funciona .titulo{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-48);
    line-height: var(--lh-130-percent);
    text-align: center;
    color: var(--subtitle-color);
    margin-bottom: var(--spacing-0);
    width: 75%;
    margin: 0 auto;
}
#como-funciona .paso{
    font-family: var(--font-poppins);
    font-weight: var(--fw-700);
    font-size: var(--fs-14);
    line-height: var(--lh-160-percent);
    letter-spacing: var(--ls-1);
    color: var(--primary-color);
    margin-bottom: var(--spacing-0);
}
#como-funciona .titulo-paso{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-26);
    line-height: var(--lh-100-percent);
    color: var(--subtitle-color);
    margin-bottom: var(--mb-24);
}
#como-funciona .texto-paso{
    font-family: var(--font-poppins);
    font-weight: var(--fw-400);
    font-size: var(--fs-16);
    line-height: var(--lh-160-percent);
    color: var(--subtitle-color);
    margin-bottom: var(--spacing-0);
}
#como-funciona .col-md-6 div:not(:last-child) {
    padding-bottom: var(--spacing-40);
}
/* Espaciado para faqs */
#faqs {
    padding-top: var(--spacing-100);
    padding-bottom: var(--spacing-50);
}

#faqs .titulo{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-48);
    line-height: var(--lh-130-percent);
    color: var(--subtitle-color);
    margin-bottom: var(--spacing-0);
}
/* Espaciado para contacto */
#contacto {
    padding-top: var(--spacing-50);
}
#contacto .container {
    padding-left: var(--spacing-80);
    padding-right: var(--spacing-80);
    padding-top: var(--spacing-56);
    padding-bottom: var(--spacing-56);
}
#contacto .col-md-6:last-child {
    padding-left: var(--spacing-40);
}
#contacto .col-md-6:last-child > div {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
}
#contacto form > div {
    margin-bottom: var(--spacing-16);
}
#contacto .form-check {
    margin-bottom: var(--spacing-12);
}

#contacto .titulo{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-44);
    line-height: var(--lh-100-percent);
    letter-spacing: var(--ls-1);
    text-align: center;
    color: var(--white-color);
    margin-bottom: var(--mb-32);
}
#contacto .texto{
    font-family: var(--font-space-grotesk);
    font-weight: var(--fw-500);
    font-size: var(--fs-20);
    line-height: var(--lh-100-percent);
    letter-spacing: var(--ls-1);
    text-align: center;
    color: var(--white-color);
    margin-bottom: var(--spacing-0);
}

@media(min-width:1201px){
    #planes .col-lg-4{
        padding-left: 20px;
        padding-right: 20px;
    }
    #faqs .row {
        padding-left: var(--spacing-80);
        padding-right: var(--spacing-80);
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    #planes .container .planes-container {
        padding-left: var(--spacing-30);
        padding-right: var(--spacing-30);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Estilos para lg (large) según Bootstrap */
    #main-banner{
        padding-top: var(--spacing-40);
    }
    #main-banner .titulo{
        font-size: var(--fs-38); /* Entre 52px original y 46px md */
    }
    #main-banner .subtitulo{
        font-size: var(--fs-16); /* Mantiene valor original */
    }
    #main-banner .texto{
        font-size: var(--fs-18); /* Mantiene valor original */
    }
    #para-quien-es{
        padding-top: var(--spacing-38); /* Entre 40px original y 37px md */
        padding-bottom: var(--spacing-21); /* Entre 20px original y 22px md */
        padding-left: var(--spacing-32)!important;
        padding-right: var(--spacing-32)!important;
    }
    #para-quien-es .titulo{
        font-size: var(--fs-38); /* Entre 48px original y 44px md */
        padding-left: var(--spacing-28);
        padding-bottom: var(--spacing-30);
    }
    #para-quien-es .container{
        padding-top: var(--spacing-54); /* Entre 56px original y 50px md */
        padding-bottom: var(--spacing-54);
        padding-left: var(--spacing-12);
        padding-right: var(--spacing-12);
    }
    #para-quien-es .texto{
        font-size: var(--fs-18); /* Entre 22px original y 20px md */
    }
    #beneficios{
        padding-top: var(--spacing-56); /* Entre 60px original y 52px md */
        padding-bottom: var(--spacing-115); /* Entre 120px original y 110px md */
    }
    #beneficios .titulo{
        font-size: var(--fs-46); /* Entre 48px original y 44px md */
    }
    #beneficios .subtitulo{
        font-size: var(--fs-19); /* Entre 20px original y 19px md */
        padding-left: var(--spacing-35);
        padding-right: var(--spacing-35);
    }
    #beneficios .fa-ul li{
        font-size: var(--fs-19); /* Entre 20px original y 19px md */
    }
    #beneficios .container > div:nth-child(2){
        padding-left: var(--spacing-35);
        padding-right: var(--spacing-35);
    }
    #beneficios img{
        width: var(--spacing-400); /* Entre tamaño original y 350px md */
    }
    #planes{
        padding-top: var(--spacing-95); /* Entre 100px original y 90px md */
        padding-bottom: var(--spacing-56); /* Entre 60px original y 52px md */
    }
    #planes .titulo{
        font-size: var(--fs-39); /* Entre 40px original y 38px md */
        padding-bottom: var(--spacing-20);
    }
    #planes .subtitulo{
        font-size: var(--fs-19); /* Entre 20px original y 19px md */
    }
    #planes .container .planes-container {
        padding-left: var(--spacing-50);
        padding-right: var(--spacing-50);
    }
    /* #planes .container > div:nth-child(2){
        padding-left: var(--spacing-35);
        padding-right: var(--spacing-35);
    } */
    #planes .plan > div:nth-child(2){
        margin-top: var(--spacing-16);
        margin-bottom: var(--spacing-16);
    }
    #cta-optimiza{
        padding-top: var(--spacing-56); /* Entre 60px original y 52px md */
        padding-bottom: var(--spacing-95); /* Entre 100px original y 90px md */
    }
    #cta-optimiza .titulo{
        font-size: var(--fs-39); /* Entre 40px original y 38px md */
        padding-bottom: var(--spacing-16);
    }
    #cta-optimiza button{
        margin-top: var(--spacing-16);
    }
    #como-funciona{
        padding-top: var(--spacing-95); /* Entre 100px original y 90px md */
        padding-bottom: var(--spacing-110); /* Entre 120px original y 100px md */
    }
    #como-funciona .titulo{
        font-size: var(--fs-46); /* Entre 48px original y 44px md */
        padding-left: var(--spacing-37);
        padding-right: var(--spacing-37);
        width: 90%;
    }
    #como-funciona .row{
        padding-left: var(--spacing-35);
        padding-right: var(--spacing-35);
    }
    #como-funciona .titulo-paso{
        font-size: var(--fs-25); /* Entre 26px original y 27px md */
    }
    #como-funciona .order-3{
        padding-top: var(--spacing-32);
    }
    #como-funciona img{
        width: var(--width-75-percent)!important;
    }
    #faqs{
        padding-top: var(--spacing-95); /* Entre 100px original y 90px md */
        padding-bottom: var(--spacing-54); /* Entre 50px original y 58px md */
    }
    #faqs .titulo{
        font-size: var(--fs-46); /* Entre 48px original y 44px md */
        text-align: center;
        padding-bottom: var(--spacing-72);
    }
    #faqs .row{
        padding-left: var(--spacing-70);
        padding-right: var(--spacing-70);
    }
    #contacto{
        padding-top: var(--spacing-42); /* Entre 50px original y 37px md */
    }
    #contacto .titulo{
        font-size: var(--fs-42); /* Entre 44px original y 40px md */
        margin-bottom: var(--spacing-34);
    }
    #contacto .container{
        padding-left: var(--spacing-70)!important; /* Entre 80px original y 60px md */
        padding-right: var(--spacing-70)!important;
        padding-top: var(--spacing-58);
        padding-bottom: var(--spacing-49)!important;
        border-radius: 0!important;
        margin: 0;
        max-width: 100%;
    }
    #contacto .col-md-6:last-child > div{
        padding-left: var(--spacing-35);
        padding-right: var(--spacing-35);
    }
    #contacto .col-md-6:last-child{
        padding-top: var(--spacing-40)!important;
        padding-left: var(--spacing-37)!important;
        padding-right: var(--spacing-37)!important;
    }
    #contacto .bg-white.p-4.rounded-24{
        border-bottom-left-radius: var(--spacing-18)!important;
        border-bottom-right-radius: var(--spacing-18)!important;
        padding-bottom: var(--spacing-34)!important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Estilos para md (medium) según Bootstrap */
    #main-banner{
        padding-top: var(--spacing-40);
    }
    #main-banner .titulo{
        font-size: var(--fs-46); /* Entre 52px original y 40px sm */
    }
    #main-banner .subtitulo{
        font-size: var(--fs-16); /* Mantiene valor original */
    }
    #main-banner .texto{
        font-size: var(--fs-18); /* Entre 18px original y 17px sm */
    }
    #para-quien-es{
        padding-top: var(--spacing-37); /* Entre 40px original y 35px sm */
        padding-bottom: var(--spacing-22); /* Entre 20px original y 25px sm */
        padding-left: var(--spacing-28)!important;
        padding-right: var(--spacing-28)!important;
    }
    #para-quien-es .titulo{
        font-size: var(--fs-44); /* Entre 48px original y 40px sm */
        padding-left: var(--spacing-16);
        padding-bottom: var(--spacing-30);
    }
    #para-quien-es .container{
        padding-top: var(--spacing-50); /* Entre 56px original y 42px sm */
        padding-bottom: var(--spacing-50);
        padding-left: var(--spacing-12);
        padding-right: var(--spacing-12);
    }
    #para-quien-es .texto{
        font-size: var(--fs-20); /* Entre 22px original y 19px sm */
    }
    #beneficios{
        padding-top: var(--spacing-52); /* Entre 60px original y 45px sm */
        padding-bottom: var(--spacing-110); /* Entre 120px original y 100px sm */
    }
    #beneficios .titulo{
        font-size: var(--fs-44); /* Entre 48px original y 40px sm */
    }
    #beneficios .subtitulo{
        font-size: var(--fs-19); /* Entre 20px original y 18px sm */
        padding-left: var(--spacing-30);
        padding-right: var(--spacing-30);
        width: 100%;
    }
    #beneficios .fa-ul li{
        font-size: var(--fs-19); /* Entre 20px original y 18px sm */
    }
    #beneficios .container > div:nth-child(2){
        padding-left: var(--spacing-30);
        padding-right: var(--spacing-30);
    }
    #beneficios img{
        width: var(--spacing-272); /* Entre tamaño original y 300px sm */
    }
    #planes{
        padding-top: var(--spacing-90); /* Entre 100px original y 80px sm */
        padding-bottom: var(--spacing-52); /* Entre 60px original y 46px sm */
    }
    #planes .titulo{
        font-size: var(--fs-38); /* Entre 40px original y 36px sm */
        padding-bottom: var(--spacing-20);
    }
    #planes .subtitulo{
        font-size: var(--fs-19); /* Entre 20px original y 18px sm */
    }
    /* #planes .container > div:nth-child(2){
        padding-left: var(--spacing-30);
        padding-right: var(--spacing-30);
    } */
    #planes .plan > div:nth-child(2){
        margin-top: var(--spacing-16);
        margin-bottom: var(--spacing-16);
    }
    #cta-optimiza{
        padding-top: var(--spacing-52); /* Entre 60px original y 46px sm */
        padding-bottom: var(--spacing-90); /* Entre 100px original y 80px sm */
    }
    #cta-optimiza .titulo{
        font-size: var(--fs-38); /* Entre 40px original y 36px sm */
        padding-bottom: var(--spacing-16);
    }
    #cta-optimiza button{
        margin-top: var(--spacing-16);
    }
    #como-funciona{
        padding-top: var(--spacing-90); /* Entre 100px original y 80px sm */
        padding-bottom: var(--spacing-100); /* Entre 120px original y 80px sm */
    }
    #como-funciona .titulo{
        font-size: var(--fs-44); /* Entre 48px original y 40px sm */
        padding-left: var(--spacing-35);
        padding-right: var(--spacing-35);
    }
    #como-funciona .row{
        padding-left: var(--spacing-30);
        padding-right: var(--spacing-30);
    }
    #como-funciona .titulo-paso{
        font-size: var(--fs-27); /* Entre 26px original y 28px sm */
    }
    #como-funciona .order-3{
        padding-top: var(--spacing-32);
    }
    #como-funciona img{
        width: var(--width-100-percent)!important;
    }
    #faqs{
        padding-top: var(--spacing-90); /* Entre 100px original y 80px sm */
        padding-bottom: var(--spacing-58); /* Entre 50px original y 66px sm */
    }
    #faqs .titulo{
        font-size: var(--fs-44); /* Entre 48px original y 40px sm */
        text-align: center;
        padding-bottom: var(--spacing-72);
    }
    #faqs .row{
        padding-left: var(--spacing-0);
        padding-right: var(--spacing-0);
    }
    #contacto{
        padding-top: var(--spacing-37); /* Entre 50px original y 25px sm */
    }
    #contacto .titulo{
        font-size: var(--fs-40); /* Entre 44px original y 36px sm */
        margin-bottom: var(--spacing-34);
    }
    #contacto .container{
        padding-left: var(--spacing-60)!important; /* Entre 80px original y 40px sm */
        padding-right: var(--spacing-60)!important;
        padding-top: var(--spacing-60);
        padding-bottom: var(--spacing-42)!important;
        border-radius: 0!important;
        margin: 0;
        max-width: 100%;
    }
    #contacto .col-md-6:last-child > div{
        padding-left: var(--spacing-30);
        padding-right: var(--spacing-30);
    }
    #contacto .col-md-6:last-child{
        padding-top: var(--spacing-48)!important;
        padding-left: var(--spacing-35)!important;
        padding-right: var(--spacing-35)!important;
    }
    #contacto .bg-white.p-4.rounded-24{
        border-bottom-left-radius: var(--spacing-16)!important;
        border-bottom-right-radius: var(--spacing-16)!important;
        padding-bottom: var(--spacing-34)!important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    /* Estilos para sm (small) según Bootstrap */
    #main-banner{
        padding-top: var(--spacing-40);
    }
    #main-banner .titulo{
        font-size: var(--fs-40); /* Entre 52px original y 32px mobile */
    }
    #main-banner .subtitulo{
        font-size: var(--fs-15); /* Entre 16px original y 14px mobile */
    }
    #main-banner .texto{
        font-size: var(--fs-17); /* Entre 18px original y 16px mobile */
    }
    #para-quien-es{
        padding-top: var(--spacing-35); /* Entre 40px original y 30px mobile */
        padding-bottom: var(--spacing-25); /* Entre 20px original y 30px mobile */
        padding-left: var(--spacing-24)!important;
        padding-right: var(--spacing-24)!important;
    }
    #para-quien-es .titulo{
        font-size: var(--fs-40); /* Entre 48px original y 32px mobile */
        padding-left: var(--spacing-0);
        padding-bottom: var(--spacing-28);
    }
    #para-quien-es .container{
        padding-top: var(--spacing-42); /* Entre 56px original y 28px mobile */
        padding-bottom: var(--spacing-42);
        padding-left: var(--spacing-12);
        padding-right: var(--spacing-12);
    }
    #para-quien-es .texto{
        font-size: var(--fs-19); /* Entre 22px original y 16px mobile */
    }
    #beneficios{
        padding-top: var(--spacing-45); /* Entre 60px original y 30px mobile */
        padding-bottom: var(--spacing-100); /* Entre 120px original y 80px mobile */
    }
    #beneficios .titulo{
        font-size: var(--fs-40); /* Entre 48px original y 32px mobile */
    }
    #beneficios .subtitulo{
        font-size: var(--fs-18); /* Entre 20px original y 16px mobile */
        padding-left: var(--spacing-20);
        padding-right: var(--spacing-20);
        width: 100%;
    }
    #beneficios .fa-ul li{
        font-size: var(--fs-18); /* Entre 20px original y 16px mobile */
    }
    #beneficios .container > div:nth-child(2){
        padding-left: var(--spacing-20);
        padding-right: var(--spacing-20);
    }
    #beneficios img{
        width: var(--spacing-272); /* Entre tamaño original y 272px mobile */
    }
    #planes{
        padding-top: var(--spacing-80); /* Entre 100px original y 60px mobile */
        padding-bottom: var(--spacing-46); /* Entre 60px original y 32px mobile */
    }
    #planes .titulo{
        font-size: var(--fs-36); /* Entre 40px original y 32px mobile */
        padding-bottom: var(--spacing-16); /* Entre original y 12px mobile */
    }
    #planes .subtitulo{
        font-size: var(--fs-18); /* Entre 20px original y 16px mobile */
    }
    /* #planes .container > div:nth-child(2){
        padding-left: var(--spacing-20);
        padding-right: var(--spacing-20);
    } */
    #planes .plan > div:nth-child(2){
        margin-top: var(--spacing-16);
        margin-bottom: var(--spacing-16);
    }
    #cta-optimiza{
        padding-top: var(--spacing-46); /* Entre 60px original y 32px mobile */
        padding-bottom: var(--spacing-80); /* Entre 100px original y 60px mobile */
    }
    #cta-optimiza .titulo{
        font-size: var(--fs-36); /* Entre 40px original y 32px mobile */
        padding-bottom: var(--spacing-16);
    }
    #cta-optimiza button{
        margin-top: var(--spacing-16);
    }
    #como-funciona{
        padding-top: var(--spacing-80); /* Entre 100px original y 60px mobile */
        padding-bottom: var(--spacing-80); /* Entre 120px original y 40px mobile */
    }
    #como-funciona .titulo{
        font-size: var(--fs-40); /* Entre 48px original y 32px mobile */
        padding-left: var(--spacing-30);
        padding-right: var(--spacing-30);
        width: 90%;
    }
    #como-funciona .row{
        padding-left: var(--spacing-20);
        padding-right: var(--spacing-20);
    }
    #como-funciona .titulo-paso{
        font-size: var(--fs-28); /* Entre 26px original y 24px mobile */
    }
    #como-funciona .order-3{
        padding-top: var(--spacing-32);
    }
    #como-funciona img{
        width: var(--width-100-percent)!important;
    }
    #faqs{
        padding-top: var(--spacing-80); /* Entre 100px original y 60px mobile */
        padding-bottom: var(--spacing-66); /* Entre 50px original y 80px mobile */
    }
    #faqs .titulo{
        font-size: var(--fs-40); /* Entre 48px original y 32px mobile */
        text-align: center;
        padding-bottom: var(--spacing-72);
    }
    #faqs .row{
        padding-left: var(--spacing-0);
        padding-right: var(--spacing-0);
    }
    #contacto{
        padding-top: var(--spacing-25); /* Entre 50px original y 0 mobile */
    }
    #contacto .titulo{
        font-size: var(--fs-36); /* Entre 44px original y 32px mobile */
        margin-bottom: var(--spacing-36);
    }
    #contacto .container{
        padding-left: var(--spacing-40)!important; /* Entre 80px original y 12px mobile */
        padding-right: var(--spacing-40)!important;
        padding-top: var(--spacing-64);
        padding-bottom: var(--spacing-28)!important;
        border-radius: 0!important;
        margin: 0;
        max-width: 100%;
    }
    #contacto .col-md-6:last-child > div{
        padding-left: var(--spacing-20);
        padding-right: var(--spacing-20);
    }
    #contacto .col-md-6:last-child{
        padding-top: var(--spacing-32)!important;
        padding-left: var(--spacing-30)!important;
        padding-right: var(--spacing-30)!important;
    }
    #contacto .bg-white.p-4.rounded-24{
        border-bottom-left-radius: var(--spacing-12)!important;
        border-bottom-right-radius: var(--spacing-12)!important;
        padding-bottom: var(--spacing-34)!important;
    }
}

@media (max-width: 575.98px) {
    [class^="col-"], [class*=" col-"] {
        padding-left: var(--spacing-20)!important;
        padding-right: var(--spacing-20)!important;
    }
    /* Estilos para xs (extra small) según Bootstrap */
    #main-banner{
        padding-top: var(--spacing-40);
    }
    #main-banner .titulo{
        font-size: var(--fs-32);
    }
    #main-banner .subtitulo{
        font-size: var(--fs-14);
    }
    #main-banner .texto{
        font-size: var(--fs-16);
    }
    #para-quien-es{
        padding-top: var(--spacing-30);
        padding-bottom: var(--spacing-30);
        padding-left: var(--spacing-20)!important;
        padding-right: var(--spacing-20)!important;
    }
    #para-quien-es .titulo{
        font-size: var(--fs-32);
        padding-left: var(--spacing-0);
        padding-bottom: var(--spacing-32);
    }
    #para-quien-es .container{
        padding-top: var(--spacing-28);
        padding-bottom: var(--spacing-28);
        padding-left: var(--spacing-12);
        padding-right: var(--spacing-12);
    }
    #para-quien-es .texto{
        font-size: var(--fs-16);
    }
    #beneficios{
        padding-top: var(--spacing-30);
        padding-bottom: var(--spacing-80);
    }
    #beneficios .titulo{
        font-size: var(--fs-32);
    }
    #beneficios .subtitulo{
        font-size: var(--fs-16);
        padding-left: var(--spacing-12);
        padding-right: var(--spacing-12);
        width: 100%;
    }
    #beneficios .fa-ul li{
        font-size: var(--fs-16);
    }
    #beneficios .container > div:nth-child(2){
        padding: var(--spacing-0);
    }
    #beneficios img{
        width: var(--spacing-272);
    }
    #planes{
        padding-top: var(--spacing-60);
        padding-bottom: var(--spacing-32);
    }
    #planes .titulo{
        font-size: var(--fs-32);
        padding-bottom: var(--spacing-12);
        width: 85%;
        margin: 0 auto;
    }
    #planes .subtitulo{
        font-size: var(--fs-16);
        width: 80%;
        margin: 0 auto;
    }
    #planes .container > div:nth-child(2){
        padding: var(--spacing-0);
    }
    #planes .plan > div:nth-child(2){
        margin: var(--spacing-0);
    }
    #cta-optimiza{
        padding-top: var(--spacing-32);
        padding-bottom: var(--spacing-60);
    }
    #cta-optimiza .titulo{
        font-size: var(--fs-32);
        padding-bottom: var(--spacing-32);
        width: 80%;
        margin: 0 auto;
    }
    #cta-optimiza button{
        margin: var(--spacing-0);
    }
    #como-funciona{
        padding-top: var(--spacing-60);
        padding-bottom: var(--spacing-40);
    }
    #como-funciona .titulo{
        font-size: var(--fs-32);
        width: 80%;
        margin: 0 auto;
    }
    #como-funciona .row{
        padding-left: var(--spacing-0);
        padding-right: var(--spacing-0);
    }
    #como-funciona .titulo-paso{
        font-size: var(--fs-24);
    }
    #como-funciona .order-3{
        padding-top: var(--spacing-32);
    }
    #como-funciona img{
        width: var(--width-100-percent)!important;
    }
    #faqs{
        padding-top: var(--spacing-60);
        padding-bottom: var(--spacing-80);
    }
    #faqs .titulo{
        font-size: var(--fs-32);
        text-align: center;
        padding-bottom: var(--spacing-72);
    }
    #faqs .row{
        padding-left: var(--spacing-0);
        padding-right: var(--spacing-0);
    }
    #contacto{
        padding-top: var(--spacing-0);
    }
    #contacto .titulo{
        font-size: var(--fs-32);
        margin-bottom: var(--spacing-40);
    }
    #contacto .container{
        padding-left: var(--spacing-12)!important;
        padding-right: var(--spacing-12)!important;
        padding-top: var(--spacing-72);
        padding-bottom: var(--spacing-0)!important;
        border-radius: var(--spacing-0)!important;
    }
    #contacto .col-md-6:last-child > div{
        padding: var(--spacing-0);
    }
    #contacto .col-md-6:last-child{
        padding-top: var(--spacing-64)!important;
        padding-left: var(--spacing-20)!important;
        padding-right: var(--spacing-20)!important;
    }
    #contacto .bg-white.p-4.rounded-24{
        border-bottom-left-radius: var(--spacing-0)!important;
        border-bottom-right-radius: var(--spacing-0)!important;
        padding-bottom: var(--spacing-34)!important;
    }
}