.fondo2{
    background-image: url('../fondo/FondoPágina2.png');
    background-size: cover;
    background-position: center;
}

.galeria{
    display: flex;
    margin-left: 80px;
}

h1{
    font-family: Helvetica;
    font-weight: lighter;
    font-size: 4.5vw;
    color: white;
    margin: 25px 0;
}

.servicios .gale{
    display: flex;
    background: linear-gradient(to right, rgba(155, 154, 154, 0.658), rgba(88, 88, 88, 0.479));
    border-radius: 50vw;
    margin-bottom: 4vh;
    height: 9.2vh;
    padding-right: 30px;
    justify-self: left;
    align-items: center;
}

.gale{
    opacity: 0;
    transform: translateX(-100px);
    animation: gale 1.5s ease-in-out forwards;
}

.gale:nth-child(1) { animation-delay: 0s; }
.gale:nth-child(2) { animation-delay: 0.5s; }
.gale:nth-child(3) { animation-delay: 1s; }
.gale:nth-child(4) { animation-delay: 1.5s; }

@keyframes gale {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0); 
        opacity: 1;
    }
}

.imgs .libreInv{
    width: 57%;
    height: 6.8vh;
}

.imgs .cartera{
    width: 57%;
    height: 6vh;
}

.imgs .sanea{
    width: 57%;
    height: 5.5vh;
}

.imgs{
    background: linear-gradient(to right, orange, yellow );
    border-radius: 50%;
    width: 5.3vw;
    height: 11.5vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 20px;
}

.servicios .menu{
    font-family: Helvetica;
    font-size: 1.6vw;
    color: white;
}

.gale .menu:hover{
    color: black;
}

.servicios .gale:hover{
    background: linear-gradient(to right, orange, yellow );
}

#free{
    font-family: Helvetica;
    font-size: 1.4vw;
    font-weight: bold;
}

#brief{
    font-family: Helvetica;
    font-size: 1.4vw;
    color: white;
    font-weight: bold;
}

#embarg{
    font-family: Helvetica;
    font-size: 1.4vw;
    color: white;
    font-weight: bold;
}

#sana{
    font-family: Helvetica;
    font-size: 1.6vw;
    font-weight: bold;
}

.titulo{
    background: white;
    border-radius: 50vh;
    height: 7vh;
    width: 60%;
    display: flex;
    align-items: center;
    margin-top: 15vh;
    justify-self: right;
    opacity: 0;
    animation: slideTi 2s ease-in-out forwards;
    animation-delay: 1s;
}

.titulo2{
    background: linear-gradient(to right, black, gray );
    border-radius: 50vh;
    height: 6.5vh;
    width: 64%;
    display: flex;
    align-items: center;
    margin-top: 15vh;
    justify-self: right;
    opacity: 0;
    animation: slideTi 2s ease-in-out forwards;
    animation-delay: 1s;
}

.titulo3{
    background:rgb(12, 110, 81);
    border-radius: 50vh;
    height: 6vh;
    width: 70%;
    display: flex;
    align-items: center;
    margin-top: 15vh;
    justify-self: right;
    opacity: 0;
    animation: slideTi 2s ease-in-out forwards;
    animation-delay: 1s;
}

.titulo4{
    background: linear-gradient(to right, orange, yellow );
    border-radius: 50vh;
    height: 6vh;
    width: 57%;
    display: flex;
    align-items: center;
    margin-top: 15vh;
    justify-self: right;
    opacity: 0;
    animation: slideTi 2s ease-in-out forwards;
    animation-delay: 1s;
}

@keyframes slideTi {
    from {
        transform: translateX(100%); /* Inicia fuera de la pantalla (derecha) */
        opacity: 0; /* Invisible */
    }
    to {
        transform: translateX(0); /* Llega a su posición original */
        opacity: 1; /* Totalmente visible */
    }
}

.components{
    width: 31%;
}

.complet{
    display: flex;
    justify-content: space-around;
}

.lb{
    background: linear-gradient(to right, orange, yellow );
    border-radius: 50vh;
    height: 10vh;
    width: 4.8vw;    
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 5px;
}

.lb .libreInv{
    width: 65%;
    height: 7vh;
}

.lb .cartera{
    width: 50%;
    height: 4vh;
}

.lb .embargo{
    width: 2vw;
    height: 5vh;
}

.lb .sanea{
    width: 2.7vw;
    height: 4.8vh;
}

.contenido{
    margin-top: 5vh;
    opacity: 0;
    animation: slideIn 1s ease-in-out forwards;
    animation-delay: 2s;
}

@keyframes slideIn {
    from {
        transform: translateX(100%); /* Inicia fuera de la pantalla (derecha) */
        opacity: 0; /* Invisible */
    }
    to {
        transform: translateX(0); /* Llega a su posición original */
        opacity: 1; /* Totalmente visible */
    }
}

#text3{
    font-family: Helvetica;
    color: white;
    font-size: 1.5vw;
    text-align: right;
    margin-bottom: 4vh;
}

.form3{
    width: 50%;
    height: 23vh;
}

.form4{
    width: 15%;
    height: 17vh;
}

.diseno{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

@media (max-width: 480px) {
    .fondo2{
        background-image: none;
        background: linear-gradient(rgb(44, 167, 85), rgb(74, 199, 105));
    }
    .complet{
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }
    h1{
        font-size: 11vw;
        justify-self: center;
    }
    .servicios{
        display: flex;
        margin-left: 2vw;
        padding: 4vh 0;
    }
    .galeria{
        margin: 0;
    }
    .servicios .gale{
        background: none;
        margin: 0;
        padding: 0;
        height: 0;

    }
    .servicios .menu{
        display: none;
    }
    .imgs{
        width: 20vw;
        height: 10vh;
    }
    .imgs .libreInv{
        width: 12vw;
        height: 6vh;
    }
    .imgs .cartera{
        width: 11.5vw;
        height: 5vh;
    }
    .components{
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .titulo{
        margin-top: 7vh;
        width: 78vw;
    }
    #free{
        font-size: 7vw;
    }
    .lb{
        width: 20vw;
        height: 10vh;
    }
    .lb .libreInv{
        height: 6.5vh;
    }
    .titulo2{
        margin-top: 7vh;
        width: 72vw;
    }
    #brief{
        font-size: 5vw;
    }
    .titulo3{
        margin-top: 7vh;
        width: 74vw;
    }
    #embarg{
        font-size: 5vw;
    }
    .lb .embargo{
        width: 10vw;
    }
    .titulo4{
        margin-top: 7vh;
        width: 74vw;
    }
    #sana{
        font-size: 5vw;
    }
    .lb .sanea{
        width: 12vw;
    }
    #text3{
        font-size: 4.5vw;
        text-align: center;
    }
    .diseno{
        gap: 39vw;
    }
    .form3{
        height: 16vh;
        width: 46vw;
    }
    .form4{
        height: 12vh;
    }
}