.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Parte 1: Título y texto introductorio */
.hero {
    background-color: #004080;
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

/* Animaciones para la primera parte (título y texto introductorio) */
.hero h1 {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(30px); /* Desplazamiento inicial */
    animation: slide-up 1s ease-out forwards; /* Animación de aparición */
}

.hero .subtitle {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(30px); /* Desplazamiento inicial */
    animation: slide-up 1s ease-out 0.2s forwards; /* Animación con retraso */
}

.hero .description {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(30px); /* Desplazamiento inicial */
    animation: slide-up 1s ease-out 0.4s forwards; /* Animación con retraso */
}

/* Definición de la animación slide-up */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero .description strong {
    color: #ffcc00;
}

/* Parte 2: Imagen a la izquierda y 4 ventajas con íconos de check */
.ventajas-check {
    padding: 60px 0;
    background-color: #fff;
}

.ventajas-content {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.ventajas-image {
    flex: 1;
}

.ventajas-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.ventajas-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 3em;
}

.ventaja-lado {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.check-icon {
    width: 24px;
    height: 24px;
    margin-top: 5px;
}

.ventaja-texto h3 {
    font-size: 1.5rem;
    color: #004080;
    margin-bottom: 10px;
}

.ventaja-texto p {
    font-size: 1rem;
    color: #555;
}

.ventaja-texto strong {
    color: #004080;
}

.ventaja-lado {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(20px); /* Desplazamiento inicial */
    animation: aparecer 0.5s ease-out forwards; /* Animación de aparición */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición para hover */
    border-radius: 1em;
}

.ventaja-lado:nth-child(1) { animation-delay: 0.2s; }
.ventaja-lado:nth-child(2) { animation-delay: 0.4s; }
.ventaja-lado:nth-child(3) { animation-delay: 0.6s; }
.ventaja-lado:nth-child(4) { animation-delay: 0.8s; }

.ventaja-lado:hover {
    transform: translateY(10px); /* Efecto hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra al hacer hover */
}

/* Parte 3: Otras ventajas en 3 columnas y 1 fila */
.ventajas-adicionales {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.ventajas-adicionales h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 40px;
    color: #004080;
    animation: slide-up 1s ease-out forwards; /* Animación para el título */
}

.ventajas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en desktop */
    gap: 20px;
}

.ventaja-arriba {
    background-color: #fff;
    padding: 20px;
    border-radius: 1em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    opacity: 0; /* Inicialmente invisible */
    animation: aparecer 1s ease-out forwards; /* Animación para las ventajas */
    display: flex;
    flex-direction: column; /* Imagen arriba, texto debajo */
    align-items: center; /* Centrar horizontalmente */
}

.ventaja-arriba:nth-child(1) { animation-delay: 0.2s; }
.ventaja-arriba:nth-child(2) { animation-delay: 0.4s; }
.ventaja-arriba:nth-child(3) { animation-delay: 0.6s; }

.ventaja-imagen {
    width: 100%;
    max-width: 100px;
    height: auto;
    margin-bottom: 15px;
    animation: scale-up 0.5s ease-out forwards; /* Animación para la imagen */
}

.ventaja-texto h3 {
    font-size: 1.5rem;
    color: #004080;
    margin-bottom: 10px;
}

.ventaja-texto p {
    font-size: 1rem;
    color: #555;
}

.ventaja-texto strong {
    color: #004080;
}

.ventaja-arriba {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(20px); /* Desplazamiento inicial */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición para hover */
    
}


.ventaja-arriba:nth-child(1) { animation-delay: 0.2s; }
.ventaja-arriba:nth-child(2) { animation-delay: 0.4s; }
.ventaja-arriba:nth-child(3) { animation-delay: 0.6s; }

.ventaja-arriba:hover {
    transform: translateY(-5px); /* Efecto hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra al hacer hover */
}

/* Definición de las animaciones */

@keyframes slide-up {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scale-up {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* Responsive Design */
@media (max-width: 768px) {
    .ventajas-content {
        flex-direction: column;
    }

    .ventajas-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }

    .ventaja-arriba {
        animation: none; /* Desactiva animaciones en móvil si es necesario */
        opacity: 1;
    }
}