/* Todo el codigo es propiedad de Blue Waves Investment si piensas copiarlo piesa primero en ser creativo */
/* Reinicio de estilos básicos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Estilo general del cuerpo */
body {
    color: #fff;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Navegación */
.navbar {
    background-color: #00264d;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.navbar .logo img {
    max-width: 150px;
}

.navbar .menu {
    list-style: none;
    display: flex;
    gap: 20px;
}

.navbar .menu li a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
}

.navbar .menu li a:hover {
    color: #ff6600;
}

/* Hero Section */
.hero {
    background-color: #003366;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea el contenido hacia la izquierda */
    padding: 20px;
    position: relative;
}

/* Contenedor de texto */
.text {
    max-width: 550px;
    margin-left: 50px; /* Mueve el texto más hacia la izquierda */
    z-index: 2; /* Asegura que el texto esté por encima de la imagen */
}

.text h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #ffffff;
}

.text p {
    font-size: 1rem;
    margin-bottom: 30px;
    color: #e0e0e0;
}

/* Botones */
.cta {
    background: #ff6600;
    color: #fff;
    padding: 10px 20px;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    display: inline-block;
}

.cta:hover {
    background: #e65500;
}

.cta-secondary {
    display: inline-block;
    margin-left: 15px;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.cta-secondary:hover {
    color: #ff6600;
}

/* Imagen */
.image {
    position: absolute; /* Posiciona la imagen de manera específica */
    bottom: -5px; /* Ajusta verticalmente */
    right: -5px; /* Ajusta horizontalmente */
    z-index: 1; /* Asegura que la imagen esté detrás del texto */
}

.image img {
    max-width: 1200px; /* Tamaño máximo de la imagen */
    width: 100%;
    height: auto;
}

/* MEDIA QUERIES */

/* Pantallas medianas (tablets) */
@media (max-width: 1024px) {
    .hero {
        padding: 20px;
    }

    .text {
        text-align: center;
        margin-left: 0; /* Centra el texto en tablets */
    }

    .image {
        bottom: -10px;
        right: -100px; /* Ajusta la posición en pantallas más pequeñas */
    }

    .image img {
        max-width: 400px;
    }
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    .text {
        margin-left: 0; /* Centra el texto en móviles */
    }

    .image {
        position: static; /* Elimina posicionamiento absoluto en móviles */
        margin-top: 20px;
    }

    .image img {
        max-width: 100%; /* La imagen ocupa todo el ancho disponible */
        margin: 0 auto;
    }
}


/* Contenedor de corazones */
.floating-hearts {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* No interfiere con los clics del usuario */
    z-index: 2; /* Asegura que los corazones estén sobre la imagen */
}

.floating-hearts::before,
.floating-hearts::after {
    content: "❤";
    position: absolute;
    font-size: 2rem;
    color: rgba(255, 0, 0, 0.7);
    animation: float-up 3s linear infinite, fade-in-out 3s linear infinite;
}

/* Animación para el primer corazón */
.floating-hearts::before {
    left: 30%;
    animation-delay: 0s;
}

/* Animación para el segundo corazón */
.floating-hearts::after {
    left: 70%;
    animation-delay: 1.5s;
}

/* Animación de subida flotante */
@keyframes float-up {
    0% {
        transform: translateY(100px) scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(1.2);
        opacity: 0;
    }
}

/* Animación de entrada y salida */
@keyframes fade-in-out {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Contenedor de imágenes flotantes */
.floating-images {
    position: absolute;
    top: 30%; /* Ajusta la posición de las imágenes flotantes */
    left: 60%; /* Ajusta la posición horizontal */
    display: flex;
    gap: 10px; /* Espacio entre las imágenes */
    z-index: 3; /* Asegura que las imágenes estén sobre el fondo */
}

.floating-item {
    width: 100px; /* Tamaño de las imágenes */
    height: auto;
    animation: float-up 5s ease-in-out infinite, fade-in-out 5s ease-in-out infinite;
}

/* Animación de subida flotante */
@keyframes float-up {
    0% {
        transform: translateY(20px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(20px);
    }
}

/* Animación de entrada y salida */
@keyframes fade-in-out {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* Contenedor de imágenes flotantes */
.floating-images {
    position: absolute;
    top: 50%; /* Centrado verticalmente */
    left: 50%; /* Centrado horizontalmente */
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2; /* Asegura que las imágenes estén sobre la imagen principal */
    transform: translate(-50%, -50%); /* Centra el contenedor */
}

.floating-item {
    position: absolute;
    width: 20px; /* Tamaño más pequeño de las imágenes */
    height: auto;
    animation: float-up 5s linear infinite, fade-in-out 5s linear infinite;
}

/* Primera imagen flotante */
.floating-item:nth-child(1) {
    left: 45%; /* Centrado horizontalmente */
    top: 5%; /* Más cerca del centro vertical */
    animation-delay: 0s; /* Sin retraso para la primera imagen */
}

/* Segunda imagen flotante */
.floating-item:nth-child(2) {
    left: 50%; /* Justo en el centro */
    top: 15%; /* Más abajo */
    animation-delay: 2s; /* Retraso de 2 segundos */
}

/* Tercera imagen flotante */
.floating-item:nth-child(3) {
    left: 55%; /* Más cerca del centro */
    top: 5%; /* Más arriba */
    animation-delay: 4s; /* Retraso de 4 segundos */
}

/* Animación de subida flotante */
@keyframes float-up {
    0% {
        transform: translateY(50px) scale(0.8);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(1.2);
        opacity: 0;
    }
}

/* Animación de entrada y salida */
@keyframes fade-in-out {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Sección Sobre Nosotros */
.about-us {
    background-color: #f9f9f9;
    padding: 60px 20px;
    text-align: center;
}

.about-us-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

.about-us-text {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    text-align: left;
}

.about-us-text h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.about-us-text .highlight {
    font-size: 1.2rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 20px;
}

.about-us-text p {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 15px;
}

.about-us-image {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    display: flex;
    justify-content: center;
}

.about-us-image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Sección Servicios */
.services {
    background-color: #ffffff;
    padding: 60px 20px;
    text-align: center;
}

.services-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

.services-image {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    display: flex;
    justify-content: center;
}

.services-image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.services-text {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    text-align: left;
}

.services-text h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.services-text .highlight {
    font-size: 1.2rem;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 20px;
}

.services-text p {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
    margin-bottom: 15px;
}

/* Sección Alternativa de Servicios */
.services-alt {
    background-color: #ffffff;
    padding: 60px 20px;
    text-align: center;
}

.services-alt-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}

.services-alt-text {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    text-align: left;
}

.services-alt-text h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.services-alt-text .highlight {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
}

.services-alt-image {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    display: flex;
    justify-content: center;
}

.services-alt-image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Sección de características */
.features {
    background-color: #f4f8fd; /* Color de fondo */
    padding: 60px 20px;
    text-align: center;
}

.features h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 40px;
}

.features-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-item {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}

.feature-item img {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
}

.feature-item h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.feature-item p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}

/* Efecto al pasar el ratón por encima */
.app-card:hover {
    transform: translateY(-5px); /* Mueve la tarjeta ligeramente hacia arriba */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aumenta la sombra para dar un efecto de elevación */
}