:root {
    --x-dark: #021425;
    --x-semi-dark: #0a0a0a;
    --x-light: #FFFFFF;
    --x-primary: #2B2348;
    --x-secondary: #AADB4D;
    --x-tertiary: #6A45ED;
    --x-complementary: #000AAA;
    --x-dark-10: #E7EEF4;
    --x-dark-20: #C1D0DE;
    --x-dark-30: #98ABBD;
    --x-dark-40: #7F93A7;
    --x-dark-50: #586D82;
    --x-dark-60: #3A5067;
    --x-dark-70: #263E56;
    --x-dark-80: #12283D;
    --x-dark-90: #081D31;
    --x-primary-10: #C6C7D9;
    --x-primary-20: #A2A4BE;
    --x-primary-30: #7F81A4;
    --x-primary-40: #666691;
    --x-primary-50: #4F4C80;
    --x-primary-60: #494578;
    --x-primary-70: #403B6C;
    --x-primary-80: #392E60;
    --x-primary-90: #312853;
    --x-secondary-10: #F7FCEE;
    --x-secondary-20: #EEF8DD;
    --x-secondary-30: #E6F5CC;
    --x-secondary-40: #DEF2BB;
    --x-secondary-50: #D6EEAA;
    --x-secondary-60: #CEEA99;
    --x-secondary-70: #C6E788;
    --x-secondary-80: #BEE378;
    --x-secondary-90: #B5E067;
    --x-tertiary-10: #F0ECFD;
    --x-tertiary-20: #E1D9FC;
    --x-tertiary-30: #D2C7FA;
    --x-tertiary-40: #C3B5F8;
    --x-tertiary-50: #B4A2F6;
    --x-tertiary-60: #A590F4;
    --x-tertiary-70: #967DF2;
    --x-tertiary-80: #876AF0;
    --x-tertiary-90: #7958EE;
    --x-complementary-10: #707AFF;
    --x-complementary-15: #7C90FF;
    --x-complementary-20: #5C67FF;
    --x-complementary-30: #4754FF;
    --x-complementary-40: #3341FF;
    --x-complementary-50: #1F2EFF;
    --x-complementary-60: #0A1BFF;
    --x-complementary-70: #0010F5;
    --x-complementary-80: #000FE0;
    --x-complementary-90: #000ECC;
    --x-danger: #FF0000;
    --fuente-principal: "Rubik", sans-serif;
    --mutuus-blue: #0A357C;
}

.container-fluid {
    --bs-gutter-x: 0;
}

picture {
    position: relative;
}

    picture source,
    picture img {
        height: auto;
    }

html {
    font-size: 16px;
}

body {
    font-family: var(--fuente-principal);
    background-color: var(--x-light);
}

.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.bold {
    font-weight: 700;
}

p {
    color: var(--x-dark);
    font-family: var(--fuente-principal);
    font-style: normal;
    font-weight: 400;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--x-dark);
    font-family: var(--fuente-principal);
    font-style: normal;
    font-weight: 700;
    margin: 0;
}

h1 {
    font-size: 3.815rem;
    line-height: 4.3125rem;
}

h2 {
    font-size: 3.05188rem;
    line-height: 3.5rem;
}

h3 {
    font-size: 2.44125rem;
    line-height: 2.9375rem;
}

h4 {
    font-size: 1.95313rem;
    line-height: normal;
}

h5 {
    font-size: 1.5625rem;
    line-height: normal;
}

h6 {
    font-size: 1.25rem;
    line-height: normal;
}

.p-sm {
    font-size: 1rem;
    line-height: 1.375rem;
}

.p-md {
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.p-lg {
    font-size: 1.47656rem;
    line-height: 1.96875rem;
}

.p-lg-md {
    font-size: 1.375rem;
    line-height: normal;
}

.p-lg-x {
    font-size: 1.75rem;
    line-height: 2.625rem;
}

.p-sm-bold,
.p-md-bold,
.p-lg-bold,
.p-lg-x-bold {
    font-weight: 700;
}

.p-sm-semibold,
.p-md-semibold,
.p-lg-semibold,
.p-lg-x-semibold {
    font-weight: 600;
}

.p-sm-normalbold,
.p-md-normalbold,
.p-lg-normalbold,
.p-lg-x-normalbold {
    font-weight: 500;
}

.btn-primary {
    display: inline-flex;
    padding: 1.25rem 0.9375rem;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem;
    border-radius: 1.5rem;
    border: 2px solid var(--x-secondary);
    background: var(--x-secondary);
    box-shadow: 0px 8px 20px 0px var(--x-secondary);
    color: var(--x-dark);
    font-family: var(--fuente-principal);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 15rem;
    height: 3.8rem;
}

    .btn-primary:hover,
    .btn-primary:focus {
        border: 2px solid var(--x-secondary-80);
        background: var(--x-secondary-80);
        color: var(--x-dark);
        box-shadow: none;
    }

.btn-secondary {
    display: inline-flex;
    padding: 1.25rem 0.9375rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 1.5rem;
    border: 2px solid var(--x-tertiary-60);
    background: var(--x-tertiary-60);
    box-shadow: none;
    color: var(--x-light);
    font-family: var(--fuente-principal);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 15rem;
    height: 3.8rem;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        border: 2px solid var(--x-tertiary-60);
        background: var(--x-tertiary-60);
        color: var(--x-light);
        box-shadow: none;
    }

.btn-element-contact {
    display: flex;
    padding: 0.9375rem 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 1rem;
    background: transparent;
    color: var(--x-dark);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.375rem;
    border: 2px solid var(--x-dark);
}

    .btn-element-contact:hover,
    .btn-element-contact:focus {
        border-radius: 1rem;
        box-shadow: none;
        border: 2px solid var(--x-dark-30);
        color: var(--x-dark-30);
    }

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

@media only screen and (max-width: 1025px) {
    h2 {
        font-size: 2.6rem;
        line-height: 3.2rem;
    }
}

@media only screen and (max-width: 767px) {
    h1 {
        font-size: 2.0275rem;
        line-height: 2.25rem;
    }

    h2 {
        font-size: 1.80188rem;
        line-height: 2.125rem;
    }

    h3 {
        font-size: 1.60188rem;
        line-height: 2rem;
    }

    h4 {
        font-size: 1.4225rem;
        line-height: 1.75rem;
    }

    h5 {
        font-size: 1.26563rem;
        line-height: 1.625rem;
    }

    h6 {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .p-sm {
        font-size: 1rem;
        line-height: 1.375rem;
    }

    .p-md {
        font-size: 1rem;
        line-height: 1.375rem;
    }

    .p-lg {
        font-size: 1.21875rem;
        line-height: 1.96875rem;
    }

    .p-lg-x {
        font-size: 1rem;
        line-height: normal;
    }

    .btn-primary {
        font-size: 1rem;
    }
}

.navbar-trasparent {
    background: var(--mutuus-blue) !important;
}

.navbar {
    background: var(--mutuus-blue);
    height: 5rem;
    border-radius: 0;
}

    .navbar .container {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

.nav-link {
    padding: 0.94rem;
    color: var(--x-light);
    font-family: var(--fuente-principal);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
}

.dropdown-toggle::after {
    margin-left: 0.31rem;
}

.navbar .btn-element-contact {
    margin-left: 0.94rem;
}

.nav-link:focus,
.nav-link:hover {
    color: var(--x-dark-50);
}

.dropdown-menu {
    padding: 0;
    width: 16rem;
}

.dropdown-item {
    padding: 0.94rem;
    color: var(--x-dark);
    font-family: var(--fuente-principal);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem;
}

    .dropdown-item:focus, .dropdown-item:hover {
        color: var(--x-light);
        background-color: var(--x-tertiary);
    }

.navbar-toggler:focus {
    box-shadow: none;
}

/*footer {
    background: #FFFFFF !important;
    box-shadow: 0px -10px 15px 0px rgba(0, 0, 0, 0.10) !important;
}

    footer .row {
        width: 100%;
    }

    footer .container {
        display: flex;
        padding: 5rem 0 2rem;
        flex-direction: column;
        align-items: flex-start;
    }

.footer-logo {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.88rem;
}

.footer-logo-img {
    width: 12.3125rem;
    height: 2.94619rem;
}

.footer-logo-tranquilo {
    color: var(--x-dark);
    font-family: var(--fuente-principal);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.footer-informacion {
    display: flex;
    justify-content: space-between;
}

    .footer-informacion a {*/
        /*color: var(--x-light);*/
        /*text-decoration: none;
    }

    .footer-informacion h5 {
        margin-bottom: 1.87rem;*/
        /*color: var(--x-light);*/
    /*}

    .footer-informacion .p-md {
        margin-bottom: 0.94rem;*/
        /*color: var(--x-light);*/
    /*}

    .footer-informacion h6 {
        margin-bottom: 1.25rem;*/
        /*color: var(--x-light);*/
    /*}

    .footer-informacion > .footer-ramos .col-12 {
        display: flex;
        justify-content: space-between; 
    }

        .footer-informacion > .footer-ramos .col-12 .col-3 {
            width: 24%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .footer-informacion > .footer-ramos .col-12 .col-5 {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

            .footer-informacion .footer-ramos .col-12 .col-5 .p-md,
            .footer-informacion .footer-ramos .col-12 .col-3 .p-md {
                margin-bottom: 0.31rem;
                color: var(--x-dark-80);
                text-decoration: none;
            }


        .footer-informacion .footer-ramos-col{
            display: flex;
            flex-direction: column;
            gap: 0.63rem;
        }

.footer-certificados{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.footer-redes {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.footer-titles{    
    font-size: 1.25rem;
    line-height: normal;
    color: var(--x-dark);
    font-family: var(--fuente-principal);
    font-style: normal;
    font-weight: 700;
    margin: 0;
    color: var(--x-light);
} 

.footer-h6{
    margin-bottom: 1.25rem;
}

.redes {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
}

footer a {
    cursor: pointer;
}

footer .container-derechos-reservados {
    padding: 0;
    background-color: #3D3166;
}

    footer .container-derechos-reservados .container {
        display: flex;
        padding: .9375rem 0;
        flex-direction: row;
        justify-content: space-between;
    }

    footer .container-derechos-reservados .p-sm {
        width: 100%;
        text-align: center;
        margin: 0;
        color: var(--x-light);
    }*/


footer .row {
    width: 100%;
}

footer .container {
    display: flex;
    padding: 5rem 0;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.88rem;
}

.footer-logo-img {
    width: 7.78806rem;
    height: 3.3125rem;
}

.footer-logo-tranquilo {
    color: var(--a-color-dark);
    font-family: var(--fuente-principal);
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.footer-informacion {
    display: flex;
}

    .footer-informacion a {
        color: var(--a-color-dark);
        text-decoration: none;
    }

    .footer-informacion h5 {
        margin-bottom: 1.87rem;
    }

    .footer-informacion .p-md {
        margin-bottom: 1.25rem;
    }

    .footer-informacion h6 {
        margin-bottom: 1.25rem;
    }

    .footer-informacion .col-8 .col-12 {
        display: flex;
        justify-content: space-between;
    }

        .footer-informacion .col-8 .col-12 .col-3 {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

            .footer-informacion .col-8 .col-12 .col-3 .p-md {
                margin-bottom: 0.31rem;
                color: var(--a-color-dark-80);
                text-decoration: none;
            }

.footer-redes {
    padding-top: 1.88rem;
    padding-bottom: 1.88rem;
}

.redes {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
}

footer a {
    cursor: pointer;
}

footer .container-fluid {
    display: flex;
    padding: 0.9375rem 0.625rem;
    justify-content: center;
    align-items: center;
    background: #0A357C;
}

    footer .container-fluid .p-sm {
        margin: 0;
        color: var(--a-color-light);
    }

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.94rem;
        padding-left: 0.94rem;
    }
}

@media only screen and (max-width: 991px) {
    .ms-auto {
        margin-left: 0 !important;
    }

    .navbar {
        /* height: auto; */
        padding-top: 1.12rem;
        /* padding-bottom: 1.12rem; */
    }

    .navbar-logo {
        width: 6.6875rem;
        height: 1.5625rem;
    }

    .navbar-toggler-icon {
        color: var(--x-dark);
        font-size: 2rem;
        height: 1.75rem;
    }

    .navbar-brand {
        padding: 0;
        margin-right: 0;
    }

    .navbar-toggler {
        padding: 0;
    }

    .dropdown-menu {
        background: var(--x-tertiary);
        border: 0;
        padding: 0;
        width: 100%;
    }

    .dropdown-item {
        color: var(--x-light);
    }

        .dropdown-item:focus,
        .dropdown-item:hover {
            background-color: transparent;
        }

    .navbar .btn-element-contact {
        margin: 0;
    }

    footer .container {
        padding: 3.75rem 0.75rem;
    }

    footer .container-derechos-reservados .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-top: 1.2rem;
        padding-bottom: 0;
    }

    .footer-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.88rem;
    }

    .footer-informacion {
        display: flex;
        flex-direction: column;
        margin-top: 0.94rem;
    }

        .footer-informacion > .col-4,
        .footer-informacion > .col-8 {
            width: 100%;
        }

            .footer-informacion > .col-8 > .col-12 {
                display: flex;
                flex-direction: column;
            }

                .footer-informacion > .col-8 > .col-12 .col-5,
                .footer-informacion > .col-8 > .col-12 .col-3,
                .footer-informacion > .col-8 > .col-12 .col-1 {
                    width: 50%;
                }

                    .footer-informacion > .col-8 > .col-12 .col-5 .p-md,
                    .footer-informacion > .col-8 > .col-12 .col-3 .p-md {
                        display: none;
                    }

        .footer-informacion h5 {
            margin-bottom: 0.875rem;
        }

        .footer-informacion .col-4 {
            padding-left: 0rem;
        }

        .footer-informacion .col-8 {
            margin-top: 1rem;
        }

        .footer-informacion h6 {
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 700;
            line-height: 1.625rem;
            margin-bottom: 0.62rem;
        }

    .footer-redes {
        display: none;
    }

    .redes {
        gap: 1.25rem;
        justify-content: start;
    }

        .redes svg {
            width: 1.5625rem;
            height: 1.5625rem;
        }

    .footer-logo-img {
        width: 10.3125rem;
        height: 2.46763rem;
    }

    footer .container-fluid .p-sm {
        font-size: 0.875rem;
        line-height: normal;
        font-weight: 700;
        margin-bottom: 1.2rem;
    }

    .footer-brands {
        row-gap: 1.88rem;
    }

        .footer-brands .cnsf {
            width: 14rem;
        }

        .footer-brands .aws {
            width: 7.25rem;
        }

        .footer-brands .condusef {
            width: 4.79rem;
        }

    .footer-certificados{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .footer-certificados > .col-12{
            display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 3.5rem;
    }

    .footer-certificados > .col-6{
            display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1.86rem;
    }

    .footer-redes-movil{
        padding: 0 18%;
    margin-bottom: 1.86rem;
    }

    .encryption{
        width: 3.9755rem;
height: 3.06713rem;        
    }
    
        .footer-informacion .footer-ramos-col{
            display: flex;
            width: 100%;
        }
        .footer-informacion .footer-ramos-col-movil .col-6{
            display: flex;
            flex-direction: column;
            gap: 0.31rem;
            margin-bottom:0.31rem;
        }
        .footer-informacion .footer-ramos-col-movil a{
            font-size: 0.875rem;
line-height: 1.96875rem;
        }

    .footer-ramos-col-movil{
            display: flex;
    flex-wrap: wrap;
    }
    
    .footer-titles{
        font-size: 0.875rem;
        line-height: 1.96875rem;
    }

    .footer-h6 {
        margin-top: 0.63rem;
    margin-bottom: 0rem;
}

    .footer-titles br{
     display: none;   
    }
}

@media (min-width: 451px) and (max-width: 769px) {
    .navbar .container {
        --bs-gutter-x: 2rem;
        --bs-gutter-y: 2rem;
    }

    footer .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 359px) and (max-width: 450px) {
    .navbar .container {
        --bs-gutter-x: 1.2rem;
        --bs-gutter-y: 1.2rem;
    }

    footer .container {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }
}

@media (max-width: 320px) {
    .navbar .container {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Para Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*Direccion*/
.direccion {
    padding-top: 5.19rem
}

.direccion-h3 {
    text-align: center;
    margin-bottom: 3rem
}

.direccion .mapa {
    padding: 0;
    height: 23.0625rem;
    position: relative
}

    .direccion .mapa iframe {
        width: 100%;
        height: 100%
    }

.mapa-informacion {
    width: 26rem;
    height: 11rem;
    position: absolute;
    top: 14%;
    left: 58%;
    display: flex;
    padding: 1.25rem 2.1875rem;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 1.5rem;
    background: var(--x-light);
    box-shadow: 0 0 24px 0 rgba(0,0,0,.15)
}

    .mapa-informacion h6 {
        color: var(--x-dark);
        margin: 0
    }

    .mapa-informacion p {
        margin: 0
    }

    .mapa-informacion .p-xs {
        margin-bottom: .625rem
    }

    .mapa-informacion .p-sm {
        margin-bottom: .72rem
    }

    .mapa-informacion a {
        color: var(--x-dark);
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.375rem
    }

    .mapa-informacion .p_whatsapp svg {
        margin-right: .31rem;
        width: 1.5625rem;
        height: 1.5625rem
    }

@media only screen and (min-width: 1369px) {
    .direccion .mapa {
        height: 30rem;
        position: relative
    }
}

@media(min-width: 992px) and (max-width:2000px) {
    .mapa-informacion {
        top: 6%;
        left: 56%
    }
}

@media only screen and (max-width: 991px) {

    .direccion {
        padding: 3.75rem 0 0
    }

    .direccion-h3 {
        margin-bottom: 1.37rem
    }

    .direccion .mapa {
        height: 30rem
    }

    .mapa-informacion {
        top: 2%;
        left: calc(50% - 9rem);
        width: 18rem;
        height: auto;
        padding: 1.25rem
    }

        .mapa-informacion .p-sm {
            font-size: .875rem;
            line-height: normal
        }
}

.navbar-logo-cliente {
    width: auto !important;
    height: 48px !important;
    max-width: 150px !important;
    object-fit: contain;
}

.navbar-logo-cliente-1x1 {
    width: auto !important;
    height: 50px !important;
    max-width: 50px !important;
    object-fit: contain;
}

.footer-logo-cliente {
    width: auto !important;
    height: 60px !important;
    max-width: 170px !important;
    object-fit: contain;
}

.footer-logo-cliente-1x1 {
    width: auto;
    height: 90px;
    max-width: 90px;
    object-fit: contain;
}