:root{
    --primary-color: #0680D6;
    --subtitle-color: #222831;
    --whitesmoke: #F6F6F6;
    --button-text-color: #1E1E1E;
    --midnight-green: #376377;
    --sky-blue: #4E9999;
    --midnight-green-light: #0E435B;
    --footer-color: #003153;
    --copyright-color: #00223A;
    --border-color: #D9D9D9;

    /* Font families */
    --font-space-grotesk: 'Space Grotesk', sans-serif;
    --font-poppins: 'Poppins', sans-serif;
    --font-dm-sans: 'DM Sans', sans-serif;

    /* Button */
    --button-width: 184px;
    --button-height: 48px;
    --button-padding: 12px 20px 12px 24px;
    --button-border-radius: 8px;
    --button-font-weight: 500;
    --button-font-size: 16px;
    --button-line-height: 24px;
    --button-letter-spacing: 0.25px;

    /* Navlink */
    --navlink-font-weight: 500;
    --navlink-font-size: 16px;
    --navlink-line-height: 24px;

    /* List */
    --icon-font-size: 8px;
    
    /* Additional colors for responsabilidades */
    --white-color: #FFFFFF;
    --gray-color: #7D7D7D;
    
    /* Font weights */
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    
    /* Line height variables */
    --lh-1: 1;
    --lh-100-percent: 100%;
    --lh-130-percent: 130%;
    --lh-150-percent: 150%;
    --lh-160-percent: 160%;
    
    /* Letter spacing */
    --ls-0-2: 0.2px;
    --ls-0-5: 0.5px;
    --ls-1: 1px;
    
    /* Font sizes */
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-21: 21px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-26: 26px;
    --fs-28: 28px;
    --fs-32: 32px;
    --fs-36: 36px;
    --fs-40: 40px;
    --fs-42: 42px;
    --fs-44: 44px;
    --fs-48: 48px;
    --fs-52: 52px;
    
    /* Margin values */
    --mb-12: 12px;
    --mb-16: 16px;
    --mb-24: 24px;
    --mb-32: 32px;
    
    /* Padding values */
    --p-8: 8px;
    --p-10: 10px;
    --p-12: 12px;
    --p-14: 14px;
    --p-16: 16px;
    --p-20: 20px;
    --p-24: 24px;
    --p-28: 28px;
    
    /* Border radius */
    --br-15: 15px;
    --br-24: 24px;
    
    /* Additional colors */
    --color-0083df: #0083DF;
    --transition-duration: 0.3s;
    --width-0: 0%;
    --width-100: 100%;
    --height-2: 2px;
    --border-width-1: 1px;

    /* Spacing */
    --spacing-0: 0;
    --spacing-1: 1px;
    --spacing-3: 3px;
    --spacing-4: 4px;
    --spacing-5: 5px;
    --spacing-6: 6px;
    --spacing-7: 7px;
    --spacing-8: 8px;
    --spacing-9: 9px;
    --spacing-10: 10px;
    --spacing-11: 11px;
    --spacing-12: 12px;
    --spacing-15: 15px;
    --spacing-16: 16px;
    --spacing-18: 18px;
    --spacing-19: 19px;
    --spacing-20: 20px;
    --spacing-22: 22px;
    --spacing-24: 24px;
    --spacing-28: 28px;
    --spacing-30: 30px;
    --spacing-32: 32px;
    --spacing-36: 36px;
    --spacing-38: 38px;
    --spacing-40: 40px;
    --spacing-42: 42px;
    --spacing-48: 48px;
    --spacing-50: 50px;
    --spacing-56: 56px;
    --spacing-60: 60px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-75: 75px;
    --spacing-80: 80px;
    --spacing-88: 88px;
    --spacing-96: 96px;
    --spacing-100: 100px;
    --spacing-120: 120px;
    --spacing-600: 600px;
    --width-75-percent: 75%;
}
::marker{
    color: var(--primary-color);
    font-size: var(--fs-12);
}
.navbar{
    padding: 0;
}
.float-left{
    float: left;
}
.float-right{
    float: right;
}
.fs-small{
    font-size: var(--icon-font-size);
}
.center{
    margin: auto;
}
.bold{
    font-weight: bold;
}
#table_timbres td{
    border: var(--border-color) solid 1px;
}
#table_timbres{
    border-spacing: 0;
    border-collapse: separate;
    text-align: center;
    width: 100%;
}
#table_timbres th:last-child {
    padding: var(--p-10);
    border-top-right-radius: var(--br-15);
    border: var(--border-color) solid var(--border-width-1);
}
#table_timbres th:first-child {
    padding: var(--p-10);
    border-top-left-radius: var(--br-15);
    border: var(--border-color) solid var(--border-width-1);
}
#table_timbres tr:last-child td:first-child {
    border-bottom-left-radius: var(--br-15);
    border: var(--border-color) solid var(--border-width-1);
}
#table_timbres tr:last-child td:last-child {
    border-bottom-right-radius: var(--br-15);
    border: var(--border-color) solid var(--border-width-1);
}
.navbar-brand{
    padding-top: var(--p-28);
    padding-bottom: var(--p-28);
}
.navbar button{
    padding-left: var(--p-16)!important;
    padding-top: var(--p-8)!important;
    padding-bottom: var(--p-8)!important;
    padding-right: var(--p-14)!important;
}
button.btn.btn-primary{
    border-radius: var(--button-border-radius);
    font-family: var(--font-poppins);
    font-weight: var(--fw-300);
    font-size: var(--fs-16);
    line-height: var(--button-line-height);
    color: var(--white-color);
    background-color: var(--primary-color);
    border: none;
    padding-left: var(--p-24);
    padding-right: var(--p-20);
    padding-top: var(--p-12);
    padding-bottom: var(--p-12);
    display: flex;
}
button.btn img{
    margin-left: var(--fs-12);
}
li.nav-item{
    padding-left: var(--p-12)!important;
    padding-right: var(--p-12)!important;
    margin-left: var(--spacing-6);
    margin-right: var(--spacing-6);
}
.nav-link{
    font-family: var(--font-poppins);
    font-weight: var(--fw-500);
    font-size: var(--fs-16);
    line-height: var(--fs-16);
    color: var(--subtitle-color);
    padding-left: var(--spacing-0)!important;
    padding-right: var(--spacing-0)!important;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--primary-color);
    font-weight: var(--fw-500);
}
.nav-underline {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.nav-underline::after {
    content: "";
    position: absolute;
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    width: var(--width-0);
    height: var(--height-2);
    background-color: var(--color-0083df);
    transition: width var(--transition-duration) ease-in-out;
}
.nav-item:hover {
    cursor: pointer;
}
.nav-item:hover .nav-underline::after {
    width: var(--width-100);
}
.bg-primary {
    background-color: var(--primary-color) !important;
}
.bg-midnight-green {
    background-color: var(--midnight-green) !important;
}
.bg-sky-blue {
    background-color: var(--sky-blue) !important;
}
.bg-whitesmoke {
    background-color: var(--whitesmoke) !important;
}
.bg-half-whitesmoke {
    background: linear-gradient(to bottom, var(--whitesmoke) 50%, white 50%);
}
.bg-footer, footer{
    background-color: var(--footer-color) !important;
}
.bg-copyright {
    background-color: var(--copyright-color) !important;
}
.bg-half-footer{
    background: linear-gradient(to bottom, white 50%, var(--footer-color) 50%);
}
.bg-half-footer-whitesmoke{
    background: linear-gradient(to bottom, var(--whitesmoke) 50%, var(--footer-color) 50%);
}

.accordion-button::after {
    font-family: "Font Awesome 5 Free";
    content: "\f067"; /* Unicode for the minus symbol in Font Awesome */
    font-weight: 900;
    background-image: none;
    font-size: var(--fs-16);
}
.accordion-button:not(.collapsed)::after {
    font-family: "Font Awesome 5 Free";
    content: "\f068"; /* Unicode for the plus symbol in Font Awesome */
    font-weight: 900;
    transform: none;
    background-image: none;
}
.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
    color: var(--subtitle-color);
}
.planes-nomina{
    height: 100%;
}
#planes .col-xl-4{
    margin-bottom: var(--spacing-40);
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
}
.plan{
    background-color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 6px 52px -4px rgba(0, 0, 0, 0.04), 0px 2px 24px rgba(0, 0, 0, 0.04);
    border-radius: var(--spacing-0) var(--spacing-0) var(--fs-16) var(--fs-16);
    padding-left: var(--spacing-32);
    padding-top: var(--spacing-24);
    padding-right: var(--spacing-32);
    padding-bottom: var(--spacing-32);
    height: 100%;
}
.plan .plan-label{
    font-family: var(--font-dm-sans);
    font-weight: var(--fw-700);
    font-size: var(--fs-16);
    line-height: var(--lh-160);
    letter-spacing: var(--spacing-1);
    margin-bottom: 0;
    color: var(--white-color);
    width: fit-content;
    padding: 0 var(--spacing-10);
    border-radius: var(--spacing-4);
    text-transform: uppercase;
}
.plan button.solicitar-plan{
    margin-top: auto!important;
}
.plan.primary .plan-label{
    background-color: var(--primary-color);
}
.plan.primary{
    border-top: var(--spacing-8) solid var(--primary-color);
}
.plan.midnight-green .plan-label{
    background-color: var(--midnight-green);
}
.plan.midnight-green{
    border-top: var(--spacing-10) solid var(--midnight-green);
}
.plan.sky-blue .plan-label{
    background-color: var(--sky-blue);
}
.plan.sky-blue{
    border-top: var(--spacing-10) solid var(--sky-blue);
}
.ff-space-grotesk{
    font-family: var(--font-space-grotesk);
}
.ff-poppins{
    font-family: var(--font-poppins);
}
.ff-dm-sans{
    font-family: var(--font-dm-sans);
}
.fs-14{
    font-size: var(--fs-14);
}
.fs-16{
    font-size: var(--fs-16);
}
.fs-18{
    font-size: var(--fs-18);
}
.fs-20{
    font-size: var(--fs-20);
}
.plan a{text-decoration: none !important;}
@media (max-width: 767px) {
    .fs-20 {
        font-size: var(--fs-18);
    }
}
@media (max-width: 575px) {
    .fs-20 {
        font-size: var(--fs-16);
    }
}
.fs-22{
    font-size: var(--fs-22);
}
@media (max-width: 767px) {
    .fs-22 {
        font-size: var(--fs-20);
    }
}
@media (max-width: 575px) {
    .fs-22 {
        font-size: var(--fs-18);
    }
}
.fs-24{
    font-size: var(--fs-24);
}
@media (max-width: 767px) {
    .fs-24 {
        font-size: var(--fs-20);
    }
}
@media (max-width: 575px) {
    .fs-24 {
        font-size: var(--fs-18);
    }
}
.fs-26{
    font-size: var(--fs-26);
}
@media (max-width: 767px) {
    .fs-26 {
        font-size: var(--fs-22);
    }
}
.fs-32{
    font-size: var(--fs-32);
}
.fs-40{
    font-size: var(--fs-40);
}
@media (max-width: 990px) {
    .fs-40 {
        font-size: var(--fs-32);
    }
}
@media (max-width: 575px) {
    .fs-40 {
        font-size: var(--fs-24);
    }
}
.fs-44{
    font-size: var(--fs-44);
}
@media (max-width: 990px) {
    .fs-44 {
        font-size: var(--fs-36);
    }
}
@media (max-width: 575px) {
    .fs-44 {
        font-size: var(--fs-28);
    }
}
.fs-48{
    font-size: var(--fs-48);
}
@media (max-width: 990px) {
    .fs-48 {
        font-size: var(--fs-36);
    }
}
@media (max-width: 575px) {
    .fs-48 {
        font-size: var(--fs-32);
    }
}
.fs-52{
    font-size: var(--fs-52);
}
@media (max-width: 767px) {
    .fs-52 {
        font-size: var(--fs-42);
    }
}
@media (max-width: 575px) {
    .fs-52 {
        font-size: var(--fs-32);
    }
}
.fw-200{
    font-weight: 200;
}
.fw-300{
    font-weight: 300;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}
.lh-100{
    line-height: 100%;
}
.lh-130{
    line-height: 130%;
}
.lh-150{
    line-height: 150%;
}
.lh-160{
    line-height: 160%;
}
.color-subtitle{
    color: var(--subtitle-color);
}
.color-button-text{
    color: var(--button-text-color);
}
.color-midnight-green{
    color: var(--midnight-green);
}
.color-midnight-green-light{
    color: var(--midnight-green-light);
}
.color-sky-blue{
    color: var(--sky-blue);
}
.color-primary{
    color: var(--primary-color);
}
.color-whitesmoke{
    color: var(--whitesmoke);
}
.ps-40{
    padding-left: var(--spacing-40);
}
.ps-50{
    padding-left: var(--spacing-50);
}
.ps-60{
    padding-left: var(--spacing-60);
}
.ps-80{
    padding-left: var(--spacing-80);
}
.pe-20{
    padding-right: var(--spacing-20);
}
.pe-40{
    padding-right: var(--spacing-40);
}
.pe-50{
    padding-right: var(--spacing-50);
}
.pe-60{
    padding-right: var(--spacing-60);
}
.pe-80{
    padding-right: var(--spacing-80);
}
.pt-16{
    padding-top: var(--spacing-16);
}
.pt-24{
    padding-top: var(--spacing-24);
}
.pt-40{
    padding-top: var(--spacing-40);
}
.pt-50{
    padding-top: var(--spacing-50);
}
.pt-56{
    padding-top: var(--spacing-56);
}
.pt-100{
    padding-top: var(--spacing-100);
}
.pt-60{
    padding-top: var(--spacing-60);
}
.pt-64{
    padding-top: var(--spacing-64);
}
.pt-72{
    padding-top: var(--spacing-72);
}
.pt-80{
    padding-top: var(--spacing-80);
}
.pb-20{
    padding-bottom: var(--spacing-20);
}
.pb-24{
    padding-bottom: var(--spacing-24);
}
.pb-40{
    padding-bottom: var(--spacing-40);
}
.pb-50{
    padding-bottom: var(--spacing-50);
}
.pb-56{
    padding-bottom: var(--spacing-56);
}
.pb-60{
    padding-bottom: var(--spacing-60);
}
.pb-64{
    padding-bottom: var(--spacing-64);
}
.pb-80{
    padding-bottom: var(--spacing-80);
}
.pb-100{
    padding-bottom: var(--spacing-100);
}
.pb-120{
    padding-bottom: var(--spacing-120);
}
.mb-16{
    margin-bottom: var(--spacing-16);
}
.mb-24{
    margin-bottom: var(--spacing-24);
}
.mb-32{
    margin-bottom: var(--spacing-32);
}
.mt-16{
    margin-top: var(--spacing-16);
}
.mt-64{
    margin-top: var(--spacing-64);
}
.rounded-24{
    border-radius: var(--spacing-24)!important;
}
@media (max-width: 767px) {
    .row>*{
        padding-left: var(--spacing-24);
        padding-right: var(--spacing-24);
    }
    .w-100{
        width: var(--spacing-75)!important;
        margin: var(--spacing-0) auto;
        display: table;
    }
    #contacto .rounded-4{
        border-radius: var(--spacing-0)!important;
    }
    #para-quien-es .bg-primary.rounded-4,
    #servicios-complementarios .bg-primary.rounded-4{
        margin-left: var(--spacing-12);
        margin-right: var(--spacing-12);
    }
}

/* Estilos para el menú desplegable de 2 columnas */
.dropdown-menu-custom {
    min-width: var(--spacing-600);
    padding: var(--spacing-24) var(--spacing-16);
    border: var(--border-width-1) solid var(--border-color);
    border-radius: var(--spacing-8);
    box-shadow: var(--spacing-0) var(--spacing-8) var(--spacing-24) rgba(0, 0, 0, 0.15);
    display: block;
    opacity: var(--spacing-0);
    visibility: hidden;
    transform: translateY(-var(--spacing-20));
    transition: all 0.7s ease;
    pointer-events: none;
    position: absolute;
    left: var(--spacing-0);
    right: auto;
    z-index: 1000;
}

/* Mostrar el dropdown al hacer hover sobre el elemento padre */
.nav-item.dropdown:hover .dropdown-menu-custom {
    opacity: var(--spacing-1);
    visibility: visible;
    transform: translateY(var(--spacing-0));
    pointer-events: auto;
}

/* Mantener el dropdown visible cuando se hace hover sobre el menú */
.dropdown-menu-custom:hover {
    opacity: var(--spacing-1);
    visibility: visible;
    transform: translateY(var(--spacing-0));
    pointer-events: auto;
}

.dropdown-menu-custom .container {
    max-width: 100%;
    padding: var(--spacing-0);
}

.dropdown-menu-custom .row {
    margin: var(--spacing-0);
}

.dropdown-menu-custom .col-md-6 {
    padding: var(--spacing-0) var(--spacing-15);
}

.dropdown-menu-custom .dropdown-item:hover {
    color: var(--primary-color);
    background-color: transparent;
}

.dropdown-menu-custom .dropdown-item:focus {
    color: var(--primary-color);
    background-color: transparent;
}

.dropdown-menu-custom .titulo{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 16px;
    letter-spacing: 1px;
    margin-bottom: 0;
    padding: 8px 0;
    margin-bottom: 24px;
}
.dropdown-menu-custom li {
    list-style: none;
    padding-bottom: 8px;
}
.dropdown-menu-custom li a{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.53px;
    padding: 8px 0;
    transition: color 0.3s ease;
    display: flex;
    align-items: flex-start;
    white-space: normal;
    word-break: break-word;
}
.dropdown-menu-custom li a img{
    margin-right: 10px;
}

.navbar-toggler {
    border: none;
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1160px;
    }
}

/* Responsive para dispositivos móviles */
@media (max-width: 767px) {
    .navbar-brand img{
        width: 150px!important;
    }
    .navbar button.btn{
        font-size: var(--fs-12);
    }
}

@media(max-width: 1199px) {
    .dropdown-menu-custom {
        min-width: 0;
        width: 100%;
        position: static;
        left: auto;
        right: auto;
        box-shadow: none;
        border-radius: 0 0 8px 8px;
        transform: none !important;
        display: none;
        transition: none;
        margin-top: 0;
        padding: 0 !important;
        background: #fff !important;
    }
    .dropdown-menu-custom .col-md-6 {
        width: 100%;
        margin-bottom: 10px;
    }
    .nav-item.dropdown.show-mobile .dropdown-menu-custom {
        display: block;
    }
}
.accordion-item, .accordion-button{
    background-color: var(--whitesmoke);
}
.accordion-button{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    color: #222831;
    padding: 16px;
}
.accordion-body{
    padding-left: 8px;
}
.accordion-body li{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    color: #222831;
}
#contacto .form-label{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
}
#contacto .form-check label{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
}
#contacto .form-check label a{
    color: #1E1E1E;
}
#contacto button[type="submit"]{
    margin-top: 20px;
    font-size: 14px;
    line-height: 130%;
    width: 100%!important;
}
#contacto button img{
    margin-left: var(--spacing-8);
}
/* Espaciado para footer */
footer {
    padding-top: var(--spacing-72);
}
footer .container {
    padding-left: var(--spacing-60);
    padding-right: var(--spacing-60);
}
footer .row:nth-child(2) {
    padding-top: var(--spacing-64);
    padding-bottom: var(--spacing-64);
}
footer .col-md-3:nth-child(3) > div:first-child {
    padding-top: var(--spacing-16);
}
footer .col-md-3:nth-child(4) li:last-child {
    margin-bottom: var(--spacing-16);
}
footer .bg-copyright .container {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
}
footer .copyright{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: var(--fs-14);
    line-height: var(--spacing-16);
    letter-spacing: 0.53px;
    color: #FFFFFF;
    margin-bottom: var(--spacing-0);
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
}
footer .terminos-condiciones{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: var(--fs-14);
    line-height: var(--spacing-16);
    letter-spacing: 0.53px;
    color: #FFFFFF;
    margin-bottom: var(--spacing-0);
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
}
footer .social-icons a{
    padding: var(--spacing-10);
}
footer .social-icons a img{
    height: var(--spacing-20);
    width: var(--spacing-20);
}
footer .titulo{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: var(--fs-18);
    line-height: var(--spacing-16);
    letter-spacing: 1px;
    color: #FFFFFF;
    padding: var(--spacing-8) var(--spacing-0);
    margin-bottom: var(--spacing-24);
}
footer .navegacion li{
    padding: var(--spacing-8) var(--spacing-0);
}
footer .navegacion li a{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: var(--fs-16);
    line-height: 150%;
    letter-spacing: 0.53px;
    color: #FFFFFF;
    text-decoration: none;
    padding: var(--spacing-8) var(--spacing-0);
}

/* Media Queries Responsivos - Valores Progresivos */

/* Large screens (992px - 1199px) - Valores intermedios calculados */
@media (max-width: 1199px) and (min-width: 992px) {
    :root {
        /* Font sizes con reducción gradual del 10% */
        --fs-52: 47px;
        --fs-48: 43px;
        --fs-44: 40px;
        --fs-42: 38px;
        --fs-40: 36px;
        --fs-36: 32px;
        --fs-32: 29px;
        --fs-28: 25px;
        --fs-26: 23px;
        --fs-24: 22px;
        --fs-22: 20px;
        --fs-21: 19px;
        --fs-20: 18px;
        --fs-18: 16px;
        --fs-16: 15px;
        --fs-15: 14px;
        --fs-14: 13px;
        --fs-12: 11px;
        
        /* Spacing con reducción gradual del 12% */
        --spacing-100: 88px;
        --spacing-96: 84px;
        --spacing-80: 70px;
        --spacing-72: 63px;
        --spacing-64: 56px;
        --spacing-60: 53px;
        --spacing-48: 42px;
        --spacing-40: 35px;
        --spacing-32: 28px;
        --spacing-24: 21px;
        --spacing-20: 18px;
        --spacing-16: 14px;
        --spacing-15: 13px;
        --spacing-12: 11px;
        --spacing-10: 9px;
        --spacing-8: 7px;
        --spacing-5: 4px;
        
        /* Button adjustments */
        --button-width: 166px;
        --button-height: 43px;
        --button-padding: 11px 18px 11px 21px;
        --button-border-radius: 7px;
        --button-font-size: 15px;
        --button-line-height: 22px;
    }
    
    .container {
        max-width: 960px;
    }

    .col-md-6:not(:last-child) .plan{
        margin-bottom: var(--spacing-36); /* 40px reducido 10% */
    }
    .accordion-button{
        font-size: var(--fs-16); /* 18px reducido 10% */
        gap: var(--spacing-5); /* mantiene valor mínimo */
    }
    .accordion-body{
        padding-top: var(--spacing-11); /* 12px reducido ~10% */
    }
    footer{
        padding-top: var(--spacing-88); /* 100px reducido 12% */
    }
    footer .container{
        padding-left: var(--spacing-18); /* 20px reducido 10% */
        padding-right: var(--spacing-18);
    }
    footer .col-md-3:not(:last-child) .list-unstyled{
        margin-bottom: var(--spacing-56); /* 64px reducido 12% */
    }
    footer .col-md-3:last-child .list-unstyled{
        margin-bottom: var(--spacing-28); /* 32px reducido 12% */
    }
    .align-items-center img{
        margin: auto !important;
    }
}

/* Medium screens (768px - 991px) - Valores intermedios calculados */
@media (max-width: 991px) and (min-width: 768px) {
    :root {
        /* Font sizes con reducción gradual del 20% */
        --fs-52: 42px;
        --fs-48: 38px;
        --fs-44: 35px;
        --fs-42: 34px;
        --fs-40: 32px;
        --fs-36: 29px;
        --fs-32: 26px;
        --fs-28: 22px;
        --fs-26: 21px;
        --fs-24: 19px;
        --fs-22: 18px;
        --fs-21: 17px;
        --fs-20: 16px;
        --fs-18: 14px;
        --fs-16: 13px;
        --fs-15: 12px;
        --fs-14: 11px;
        --fs-12: 10px;
        
        /* Spacing con reducción gradual del 25% */
        --spacing-100: 75px;
        --spacing-96: 72px;
        --spacing-80: 60px;
        --spacing-72: 54px;
        --spacing-64: 48px;
        --spacing-60: 45px;
        --spacing-48: 36px;
        --spacing-40: 30px;
        --spacing-32: 24px;
        --spacing-24: 18px;
        --spacing-20: 15px;
        --spacing-16: 12px;
        --spacing-15: 11px;
        --spacing-12: 9px;
        --spacing-10: 8px;
        --spacing-8: 6px;
        --spacing-5: 4px;
        
        /* Button adjustments */
        --button-width: 147px;
        --button-height: 38px;
        --button-padding: 10px 16px 10px 19px;
        --button-border-radius: 6px;
        --button-font-size: 13px;
        --button-line-height: 19px;
    }
    
    .container {
        max-width: 720px;
    }
    
    .navbar-nav {
        margin-top: var(--spacing-16);
    }
    
    .dropdown-menu-custom {
        min-width: 400px;
        position: static;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: var(--spacing-8);
    }
    
    .col-md-6:not(:last-child) .plan{
        margin-bottom: var(--spacing-30); /* 40px reducido 25% */
    }
    .accordion-button{
        font-size: var(--fs-14); /* 18px reducido 22% */
        gap: var(--spacing-4); /* 5px reducido 20% */
    }
    .accordion-body{
        padding-top: var(--spacing-9); /* 12px reducido 25% */
    }
    #contacto .texto{
        margin-bottom: var(--spacing-40)!important; /* 50px reducido 20% */
    }
    footer{
        padding-top: var(--spacing-75); /* 100px reducido 25% */
    }
    footer .container{
        padding-left: var(--spacing-15); /* 20px reducido 25% */
        padding-right: var(--spacing-15);
    }
    footer .col-md-3:not(:last-child) .list-unstyled{
        margin-bottom: var(--spacing-48); /* 64px reducido 25% */
    }
    footer .col-md-3:last-child .list-unstyled{
        margin-bottom: var(--spacing-24); /* 32px reducido 25% */
    }
}

/* Small screens (576px - 767px) - Valores intermedios calculados */  
@media (max-width: 767px) and (min-width: 576px) {
    :root {
        /* Font sizes con reducción gradual del 30% */
        --fs-52: 36px;
        --fs-48: 34px;
        --fs-44: 31px;
        --fs-42: 29px;
        --fs-40: 28px;
        --fs-36: 25px;
        --fs-32: 22px;
        --fs-28: 20px;
        --fs-26: 18px;
        --fs-24: 17px;
        --fs-22: 15px;
        --fs-21: 15px;
        --fs-20: 14px;
        --fs-18: 13px;
        --fs-16: 11px;
        --fs-15: 11px;
        --fs-14: 10px;
        --fs-12: 9px;
        
        /* Spacing con reducción gradual del 40% */
        --spacing-100: 60px;
        --spacing-96: 58px;
        --spacing-80: 48px;
        --spacing-72: 43px;
        --spacing-64: 38px;
        --spacing-60: 36px;
        --spacing-48: 29px;
        --spacing-40: 24px;
        --spacing-32: 19px;
        --spacing-24: 14px;
        --spacing-20: 12px;
        --spacing-16: 10px;
        --spacing-15: 9px;
        --spacing-12: 7px;
        --spacing-10: 6px;
        --spacing-8: 5px;
        --spacing-5: 3px;
        
        /* Button adjustments */
        --button-width: 129px;
        --button-height: 34px;
        --button-padding: 8px 14px 8px 17px;
        --button-border-radius: 6px;
        --button-font-size: 11px;
        --button-line-height: 17px;
    }
    
    .navbar-brand img {
        height: var(--spacing-32);
    }
    
    .btn-primary {
        padding: var(--spacing-8) var(--spacing-16);
        font-size: var(--fs-14);
    }
    
    .dropdown-menu-custom {
        left: 50%;
        transform: translateX(-50%);
        margin-top: var(--spacing-8);
    }
    
    .hero-section {
        padding: var(--spacing-48) 0;
    }
    
    .hero-section h1 {
        margin-bottom: var(--spacing-24);
    }
    
    .benefits-section .col-md-4 {
        margin-bottom: var(--spacing-32);
    }
    
    .col-md-6:not(:last-child) .plan{
        margin-bottom: var(--spacing-24); /* 40px reducido 40% */
    }
    .accordion-button{
        font-size: var(--fs-13); /* 18px reducido 28% */
        gap: var(--spacing-3); /* 5px reducido 40% */
    }
    .accordion-body{
        padding-top: var(--spacing-7); /* 12px reducido 42% */
    }
    #contacto .texto{
        margin-bottom: var(--spacing-40)!important;
    }
    footer{
        padding-top: var(--spacing-60); /* 100px reducido 40% */
    }
    footer .container{
        padding-left: var(--spacing-12); /* 20px reducido 40% */
        padding-right: var(--spacing-12);
    }
    footer .col-md-3:not(:last-child) .list-unstyled{
        margin-bottom: var(--spacing-38); /* 64px reducido 40% */
    }
    footer .col-md-3:last-child .list-unstyled{
        margin-bottom: var(--spacing-19); /* 32px reducido 40% */
    }
    footer .copyright{
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .dropdown-menu-custom {
        margin-top: var(--spacing-8);
    }

    .col-md-6:not(:last-child) .plan{
        margin-bottom: var(--spacing-40);
    }
    .accordion-button{
        font-size: var(--fs-18);
        gap: var(--spacing-5);
    }
    .accordion-body{
        padding-top: var(--spacing-12);
    }
    #contacto .texto{
        margin-bottom: var(--spacing-40)!important;
    }
    footer{
        padding-top: var(--spacing-100);
    }
    footer .container{
        padding-left: var(--spacing-20);
        padding-right: var(--spacing-20);
    }
    footer .col-md-3:not(:last-child) .list-unstyled{
        margin-bottom: var(--spacing-64);
    }
    footer .col-md-3:last-child .list-unstyled{
        margin-bottom: var(--spacing-32);
    }
    footer .copyright{
        text-align: center;
    }
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
  z-index: 999999;
}

.my-float{
	margin-top:-15px;
}