body {
    font-family: "Montserrat", sans-serif;
}

b, strong {
    font-weight: normal;
}

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

input[type=number] {
    -moz-appearance: textfield;
}

/*---------------------------------------------------EXCLUSIVO HOME---------------------------------------------------*/
.backgroundGradient {
    background: transparent;
    background-size: 400% 400%;
    border-radius: 40px;
    animation: gradient 15s ease infinite;
}




@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.backgroundResponsiveFixed {
    background-color: transparent !important;
    position: fixed;
    z-index: 1000;
    width: 100%;
}

.backgroundResponsivebanner {
    background-color: #03A53C;
    background-image: linear-gradient(to right, #66B924, #069F89, #03A53C);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Añadir sombra si es necesario */
    position: fixed;
    z-index: 1000;
    width: 100%;
    background-size: 200% 100%; /* Asegura que el gradiente se expanda más allá del contenedor */
    animation: gradientAnimation 5s ease-in-out infinite; /* Ajusta el tiempo y el modo de animación */

}

input, select, button {
    font-size: 1em;
    font-weight: 400;
}

/*----------------------------------NAVBAR----------------------------------*/
.navbar-light .navbar-nav .nav-link {
    color: #FFFFFFFF !important;
    font-weight: 600;
}
.bgTitleGradient {
    background: linear-gradient(to right, #03A532, #069F89, #6DBA45);
}

.ContainerGradient {
    background: linear-gradient(to right, #03A532, #069F89, #6DBA45);
    min-height: 180px;
}



.navbar-light .navbar-nav .nav-link:hover {
    color: var(--color-nav);

}

.navbar-light {
    border-color: var(--color-explora);
}


.navbar-light .navbar-nav .show > .nav-link {
    color: var(--color-nav);
}

.navbar-light .navbar-nav .nav-link:focus {
    color: var(--color-nav);
}

.dropdownitems {
    font-weight: 600;

}

.dropdownitems:hover {
    background-color: transparent !important;
    color: var(--color-nav) !important;
}

.dropdownmenus {
    background-color: #03A53C !important;
    background-image: linear-gradient(to right, #66B924, #069F89, #03A53C) !important;
    border: none !important;
    opacity: 1 !important;
}



.inputG {
    border: 2px solid #006652;
    border-radius: 15px;
    color: gray;
    text-align: center;
    width: 100%;
}
.inputGS {
    border-radius: 15px;
    text-align: center;
    width: 100%;
}
.inputG:focus {
    border: 2px solid #006652;
    outline: none;
}


/*----------------------------------FOOTER----------------------------------*/
.line {
    width: 100%;
    background-color: #000000;
    height: 1vw;
}

.btnSuscribete {
    background-color: var(--color-button);
    border-radius: 15px;
    border: 3px solid white;
    color: white;
    margin: auto;
    width: 100%;
}


.btn-Recarga {
    font-size: large;
    width: 8rem;
    height: auto;
    font-weight: 900;
    border-radius: 10px;
    color: #000000 !important;
    background-color: #ffcd00;
    font-family: Montserrat;
    font-style: italic;
    line-height: 25px;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    text-align: center;
    text-decoration: none;
    @media (max-width: 425px) {
        width: 5rem !important;
        font-size: small !important;
    }

    &:hover {
        transform: scale(1.05); /* Escala el elemento al 110% de su tamaño original */
    }
}


.btnIniciarSession {
    border-radius: 10px !important;
    background-color: var(--color-button);
    color: white;
    margin: auto;
    width: 100%;
}


::placeholder {
    font-family: 'Montserrat', sans-serif;
    font-style: normal !important;
}

.btnSuscribete:hover {
    color: var(--color-nav);
    background-color: var(--color-button);
    border-radius: 15px;
    box-shadow: 8px 8px 0px 0px rgb(122, 205, 212) !important;
    border: 3px solid var(--color-button);
    color: white;
}

footer ul li {
    font-size: 12px;
    list-style-type: none;
    margin: 5px 0;
}

footer a {
    text-decoration: none;
    color: white;
}

footer a:hover {
    text-decoration: none;
    color: white;
    font-weight: 600;
}

footer .form-control {
    border-radius: 10px;

}

footer .form-control:focus {
    color: var(--color-explora);

}

.redes {
    color: white;
    list-style-type: none;
    font-size: 30px;
}

.redes a:hover {
    color: var(--color-nav);
}

.textCopy {
    font-size: 12px;
}

.imgWhats {
    width: 60px;
    bottom: 75px;
    right: 15px;
    z-index: 1;
}

.imgMess {
    width: 60px;
    bottom: 15px;
    right: 15px;
    z-index: 1;
}

/*----------------------------------COLORES----------------------------------*/
:root {
    --color-explora: #009D8E;
    --color-alpha-explora: rgba(0, 44, 92, 0.3);
    --color-alpha-disfruta: rgba(0, 159, 227, 0.3);
    --color-comparte: #8be9e9;
    --color-disfruta: #1da6f2;
    --color-nav: #fff;
    --color-button: #ed2d4d;
    --color-app: #9ed0ef;
}

.bg-explora {
    background-color: var(--color-explora);
}


@media only screen and (min-width: 1024px) {
    .bgTitleGradient {
        background: linear-gradient(to right, #03A532, #069F89, #6DBA45);
    }

    .img-logoP {
        height: 43px !important;
    }


    h1, .titleModal {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.7em;
    }

    h3 {
        font-size: 1.5em;
    }

    h4, .contentModal {
        font-size: 1.4em;
    }

    p, button .titleFaqs {
        font-size: 1.2em;
    }

    input, select, button {
        font-size: 1.2em;
    }

    .dropdown-menu {
        background-color: #cbd2da;
        opacity: 1;
    }

    .btnIniciarSession {
        border-radius: 10px !important;
    }

    .redes {
        font-size: 30px !important;
    }
}

@media only screen and(min-width: 1366px) {
    .btnIniciarSession {
        border-radius: 10px !important;
    }

    .redes {
        font-size: 30px !important;
    }
}

@media only screen and (min-width: 1440px) {
    .img-logoP {
        height: 43px !important;
    }

    h1, .titleModal {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.9em;
    }

    h3 {
        font-size: 1.7em;
    }

    h4, .contentModal {
        font-size: 1.2em;
    }

    p {
        font-size: 1.2em;
    }

    .ptamano {
        font-size: 1em;
    }

    input {
        font-size: 1em;
    }


    .carousel02 {
        padding: 100px 0;
        margin-right: 100px;
    }

    .pasarela {
        width: 60%;
    }

    .bg-exploraI {
        background-size: 25%;
    }

    .redes {
        font-size: 30px;
    }
}

@media only screen and (min-width: 1920px) {
    h1, .titleModal {
        font-size: 3.1em;
    }

    h2 {
        font-size: 2.3em;
    }

    h3 {
        font-size: 2.1em;
    }

    h4, .contentModal {
        font-size: 2em;
    }

    .bgTitleGradient {
        opacity: .9;
    }

    .carousel-control-next, .carousel-control-prev {
        width: 5%;
        opacity: 1;
    }

    .img-logoP {
        height: 43px !important;
    }

    .redes {
        font-size: 30px;
    }

}

@media only screen and (min-width: 2560px) {
    h1, .titleModal {
        font-size: 3.3em;
    }

    h2 {
        font-size: 2.5em;
    }

    h3 {
        font-size: 2.3em;
    }

    h4, .contentModal {
        font-size: 2.2em;
    }

    .img-logoP {
        height: 43px !important;
    }

    .redes {
        font-size: 30px;
    }

}

@media only screen and (min-width: 390px) {
    .redes {
        font-size: 15px;
    }
}

.text-footer {
}

@media (min-width: 300px) and( max-width: 400px) {
    .ContainerGradient {
        background: linear-gradient(to right, #03A532, #069F89, #6DBA45);
        height: 150px;
    }

}


.index-navbar {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /*//padding: 10px 20px;*/
    position: fixed;
}


.glass_nav {
    background: rgba(255, 255, 255, 0.23);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.7px);
    -webkit-backdrop-filter: blur(4.7px);
    padding-top: 8px;
    padding-bottom: 8px;
    @media only screen and (max-width: 920px) {
        padding-left: 5px;
        padding-right: 5px;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none
    }
}

.first-nav {
    background-color: #006652;
    color: #FFFFFF;
    border-radius: 15px 15px 0 0;
}

.b2b-nav-Pers {
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-size: 0.8em !important;
}

.vr {
    background-color: white;
    opacity: 1;
}

.vrb2bNav {
    background-color: #FFFFFF !important;
    height: 1rem !important;
    opacity: 1 !important;
}

.b2b-nav{
    text-decoration: none;
    color: #FFFFFF !important;
    font-weight: 400;
    font-size: 0.8em!important;
}
.b2b-nav:hover{
    text-decoration: none;
    color: #002C5D;
    font-weight: 800;
}

.backgroundResponsive {
    background-color: #2C9F90;
    color: white !important;
    border-radius: 15px;
    @media screen and (max-width: 925px) {
        background: rgba(0, 44, 93, 0.50);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        -webkit-backdrop-filter: blur(4.7px);
    }

}

.imgLogoDiri {
    width: 40%;
}


.navbar-toggler {
    border: transparent;
}

.navbar-light .navbar-toggler {
    font-size: 1.7em;
    color: transparent;
    border-color: transparent;
}

.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27white%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e")!important;
    color: white!important;
    @media (max-width: 435px) {
        font-size: 0.55em !important;
    }
}

.dropdown-menu {
    background-color: #FFFFFF;
    border: #006652 solid 1px;
    opacity: 1;
}

.dropdown-item {
    font-weight: 600;
    color: #006652 !important;
}

.dropdown-item:hover {
    background-color: transparent;
    color: #2C9F90 !important;
}