.cta2:hover,
.cta{
    background-color: #1F989B;
    padding: 10px 15px;
    border-radius: 8px;
    color: white;
}

.cta:hover{
    background-color: #1E40AF;
    color: white;
}

.cta3:hover,
.cta2{
    background-color: white;
    color: #1F989B;
    padding: 10px 15px;
    border-radius: 8px;
}

.cta3{
    background-color: aliceblue;
    color: #1E40AF;
    padding: 10px 15px;
    border-radius: 8px;
}

.padding{
    padding: 4rem 7rem;
}

.bg-home{
    background: linear-gradient(90deg, #1E40AF 0%, #1D4ED8 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 4rem 6rem;
    text-align: center;
}

.g-home{
    position: relative; 
    display: inline-block;
    justify-content: center;
}

.g-call{
    position: absolute; 
    bottom: 2rem; 
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.llamenos{
    margin-left: -50px;
}

.pension{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.grid-home {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.pasos{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.pasos2{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}

.item {
    border-radius: 20px;
}
.paso div {
    gap: 1rem;
}

.paso div hr {
    flex: 1;
    height: 3px;
    background-color: gray;
    border: none;
    margin: 0;
}

.paso div h1 {
    margin: 0;
}

.serv{
    background-color: white;
    padding: 2rem 4rem;
    border-radius: 30px;
    margin-bottom: 1rem;
}

.link{
    color: #D1D5DB;
    font-size: 14px;
}
.link:hover{
    color: #1F989B;
}

.img{
    width: 200px;
}
.item img {
    width: 100%;
    height: 200px;
    object-fit: contain;
}

.test-img{
    width: 70% !important;
    height: auto !important;
}

.diferencias{
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 20px;
}

.diferencias div{
    display: grid; 
    grid-template-rows: auto auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    gap: 10px;
}


.btn1{
    color: white;
    border-radius: 30px;
    background: #1F989B;
    padding: 10px 30px;
    font-weight: bold;
}
.btn1:hover{
    background: #256768;
}
.btn2{
    color: black;
    border-radius: 30px;
    background: #E5E7EB;
    padding: 10px 30px;
    font-weight: bold;
}
.btn2:hover{
    background: #7b8088;
}

.resultado{
    width: 394px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 23px;
    color: white;
    font-weight: bold;
    border-radius: 20px;
    background: var(--color, linear-gradient(90deg, #1E40AF 0%, #1D4ED8 100%));
}

.error{
    color: #1D4ED8;
}

/* Media queries para dispositivos móviles */
@media screen and (max-width: 425px) {
    .bg-home{
        padding: 2rem;
        text-align: start;
    }

    .pasos2{
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .paso div {
        gap: 0.5rem;
    }

    .pension,
    .pasos,
    .grid-home {
        grid-template-columns: 1fr;
    }
    .padding {
        padding: 2rem;
    }

    .person-img,
    .bg-img,
    .servicios img{
        width: 50%;
    }
    .serv{
        padding: 1rem;
    }
    .img{
        width: 100%;
    }

    .whats,
    .llamenos img{
        width: 12% !important;
    }
    .diferencias div{  
        gap: 2px;
    }
}

@media (min-width: 426px) and (max-width: 800px){
    .serv,
    .bg-home{
        padding: 2rem;
    }
    .g-call{
        bottom: 2rem;
        justify-content: end;
    }
    .g-call img{
        width: 30%;
    }
    .pasos2{
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .pasos,
    .grid-home {
        grid-template-columns: repeat(2, 1fr);
    }
    .padding{
        padding: 2rem 4rem;
    }
    .person-img{
        width: 40%;
    }
    .servicios img,
    .bg-img{
        width: 70%;
    }

    .whats,
    .llamenos img{
        width: 10%;
    }
	.pension {
    	grid-template-columns: repeat(1, 1fr);
	}
}

@media (min-width: 801px) and (max-width: 1025px){
    .bg-home{
        padding: 2rem;
    }
    .g-call{
        bottom: 2rem;
        justify-content: end;
    }
    .g-call img{
        width: 30%;
    }
   
    .pasos,
    .grid-home {
        grid-template-columns: repeat(2, 1fr);
    }

    .bg-img,
    .servicios img{
        width: 70%;
    }
    .padding{
        padding: 3rem;
    }
    .pasos2{
        grid-template-columns: repeat(3, 1fr);
    }
	.pension {
    	grid-template-columns: repeat(1, 1fr);
	}
}

@media (min-width: 1026px) and (max-width: 2500px){

   .padding{
        padding: 4rem 8rem;
    } 
    .test-img{
        width: 40% !important;
        height: auto !important;
    }
    .bg-img{
        width: auto;
    }
}