/* Hero Section with Canvas Reveal Effect - Solo para la página principal */
.home-hero {
    min-height: 100vh; /* Altura completa de la ventana */
    height: 100vh; /* Altura completa de la ventana */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000; /* Fallback color */
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    border-radius: 0;
    margin-top: 0; /* Ya no necesitamos margen superior */
    padding-top: 56px; /* Espacio para la barra de navegación */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 1; /* Menor que el nav (z-index: 20) */
}

/* Estilos para la barra de navegación con scroll */
.nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Nav oculto (cuando se hace scroll hacia abajo) */
.nav-hidden {
    transform: translateY(-100%);
}

/* Nav visible (cuando se está arriba o se hace scroll hacia arriba) */
.nav-visible {
    transform: translateY(0);
    background-color: rgba(15, 15, 20, 0.9); /* Fondo con transparencia */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Ensure canvas fills the hero section */
.home-hero canvas {
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Add bottom gradient overlay */
.home-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%; /* Aumentamos la altura del gradiente inferior */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
    z-index: 2;
    pointer-events: none;
}

/* Remove top gradient since we're starting after the nav */
.home-hero::before {
    content: none; /* Eliminamos el gradiente superior */
}

/* Add some depth to the text */
.home-hero h1 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.home-hero p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .home-hero {
        min-height: 100vh;
        height: 100vh;
        padding-top: 60px; /* Espacio para la barra de navegación en móvil */
    }
}

/* Button hover effect */
.home-hero .btn {
    transition: all 0.3s ease;
}

.home-hero .btn:hover {
    transform: translateY(-2px);
}

/* Content container within hero */
.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Scroll indicator (flecha) */
.home-hero .animate-bounce {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    animation: bounce 2s infinite;
}

.home-hero .animate-bounce:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    animation-play-state: paused;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* Estilos generales para páginas regulares (no-home) */
.page-content {
    margin-top: 60px; /* Espacio para la barra de navegación */
    padding-top: 2rem;
}