.cta-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    background: url('../images/banner.webp') no-repeat center center;
    position: relative;
    background-size: cover;
}

.cta-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    color: #ffffff;
}

.title {
    font-size: 4em;
    font-weight: bold;
    margin: 0;
    padding: 20px;
}

.cta-button {
    background-color: #28a745;
    color: #ffffff;
    padding: 12px 12px;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0; /* Alineado a la derecha */
    width: fit-content;
    font-weight: bold;
    text-transform: uppercase;
    justify-content: center;
    flex-direction: row;
    text-decoration: none;
    position: relative;
    animation: pulseButton 2s infinite;
}

.cta-button img {
    width: 24px;
    height: 24px;
    transition: fill 0.3s;
}

@keyframes pulseButton {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

.cta-button:hover {
    animation: none; /* Detiene la animación al hacer hover */
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.cta-button:focus {
    background-color: #1e7e34;
    color: #ffffff;
}

.cta-image {
    position: relative;
}

.cta-image img {
    max-width: 90%;
    height: auto;
}

.corner-images {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* ANIMACION LOGO 1*/ 
@keyframes mover-diagonal1 {  
    0% { transform: translate(0, 0); opacity: 1; }  
    100% { transform: translate(-3vw, -3vw); opacity: 0; }  
}  

.imagen-animada1 {  
    position: absolute;  
    top: 0;  /* Cambiado de bottom a top */  
    left: 0; /* Cambiado de right a left */  
    animation: mover-diagonal1 10s infinite;  
    animation-timing-function: ease-in-out;  
    width: 20vw;  
    height: 20vw;  
}  

/* ANIMACION LOGO 2 */
@keyframes mover-diagonal2 {  
    0% { transform: translate(0, 0); opacity: 1; }  
    100% { transform: translate(3vw, -3vw); opacity: 0; }  
}  

.imagen-animada2 {  
    position: absolute;  
    top: 0;  /* Mantener en la parte inferior */  
    right: 10%;    /* Mantener en la parte izquierda */  
    animation: mover-diagonal2 10s infinite;  
    animation-timing-function: ease-in-out;  
    width: 20vw;  
    height: 20vw;  
}  

/* ANIMACION LOGO WEB */
@keyframes mover-diagonal3 {
    0% { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(-3vw, 3vw); opacity: 0; }
}

.imagen-animada3 {
    position: absolute;
    bottom: 0;
    left: 0;
    animation: mover-diagonal3 10s infinite;
    animation-timing-function: ease-in-out;
    width: 20vw;
    height: 20vw;
}
/* ANIMACION LOGO INSTAGRAM*/
@keyframes mover-diagonal4 {
    0% {transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(3vw, 3vw); opacity: 0; }
}

.imagen-animada4 {
    position: absolute;
    bottom: 0;
    right: 10%;
    animation: mover-diagonal4 10s infinite;
    animation-timing-function: ease-in-out;
    width: 20vw;
    height: 20vw;
}

@keyframes mover-aleatorio {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(5px, 5px) rotate(0.5deg) scale(1.01); }
    50% { transform: translate(-5px, -5px) rotate(-0.5deg) scale(0.99); }
    75% { transform: translate(2px, 2px) rotate(0.25deg) scale(1.005); }
    100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

.imagen-astronauta {
    animation: mover-aleatorio 20s infinite;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.imagen-astronauta {
    animation: mover-aleatorio 8s infinite;
}