@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

       
       /* --- Estilos 
       Generales --- */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: Arial, sans-serif;
            overflow-x: hidden; /* Previene scroll horizontal si algo se desborda */
        }

 /* Colores */

:root {
    --acento: #e6ae16;
    --enlaces:#352b1d;
}


        /* --- Estilos del Header --- */
        header {
            background-color: rgba(42, 23, 58, 0.6);
            color: white;
            padding: 0px 5%; /* Espaciado interno, porcentaje para adaptabilidad */
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed; /* Fijo en la parte superior */
            top: 0;
            left: 0;
            width: 90%; /* 100% - (padding-left + padding-right) */
            z-index: 1000; /* Asegura que esté por encima de otros elementos */
        }

        .logo a {
            color: white;
            text-decoration: none;
            font-size: 1.8em;
            font-weight: bold;
        }

/* Menu de navegacion*/
        .nav-links {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

        .nav-links li {
            margin-left: 25px;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
             font-family: "Roboto", sans-serif;
             font-optical-sizing: auto;
            font-weight: normal;
            font-style: normal;
            font-size: 1em;
            padding: 5px 0;
            position: relative;
            display: inline-block;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #fddc00; /* Color para el subrayado */
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }


        /* Iconos sociales*/
        .navbar-nav .nav-item{
            display: inline-block;
        }


        .social-icons {            
            align-items: center;
            display: inline-block;
        }

        .social-icons a {
            margin-left: 15px;
        }

           .social-icons a svg {
            color: #FFF;
            width: 16px; /* Tamaño de los iconos sociales */
            height: 16px;
        }

        
        .hamburger {
            display: none; /* Oculto por defecto, visible en móvil */
            cursor: pointer;
            padding: 10px;
        }

        .hamburger div {
            width: 25px;
            height: 3px;
            background-color: white;
            margin: 5px 0;
            transition: all 0.3s ease;
        }



        /* --- Estilos Hero Section Parallax 3D --- */
        .hero-parallax {
            width: 100%;
            height: 100vh;
            position: relative;
           
            padding-top: 0px; /* Ajustar según la altura real del header */
            box-sizing: border-box;

            /* PERSPECTIVE: Define cuán pronunciado es el efecto 3D.
               Valores más bajos (ej. 500px) = efecto más exagerado.
               Valores más altos (ej. 2000px) = efecto más sutil.
               Un buen punto de partida es entre 800px y 1200px. */
            perspective: 1000px;
            /* perspective-origin: 50% 50%; /* Dónde está el "ojo" del espectador. Por defecto es el centro. */
        
        }

        .image-container {
            display: block;
            padding-top: 30px;
            }

        .layer {   
            position: absolute;
            top: 60%;
            left: 50%;
            /* El transform inicial se aplicará en JS junto con el parallax */
            /* transform: translate(-50%, -50%); */
            transition: transform 0.08s ease-out;
            display: flex;
            justify-content: center;
            align-items: center;

            /* TRANSFORM-STYLE: Necesario para que las transformaciones 3D anidadas funcionen correctamente.
               Si las capas mismas tuvieran hijos con transformaciones 3D.
               En este caso, con la imagen directa, no es estrictamente necesario, pero es buena práctica. */
            transform-style: preserve-3d;
            padding-top: 50px;
          
        }

        .layer img {
            width: 80%;
            height: 80%;
            object-fit: cover;
            display: block;
            opacity: 0.9;
        }

        .layer-1 { width: 450px; height: 399px; z-index: 1;}
        .layer-2 { width: 282px; height: 249px; z-index: 2;}
        .layer-3 { width: 152px; height: 134px; z-index: 3;}
        .layer-4 { width: 85px; height: 75px; z-index: 4; }
        .layer-5 { width: 49px; height: 43px; z-index: 5; }
        .layer-6 { width: 29px; height: 25px; z-index: 6;}
        .layer-7 { width: 17px; height: 15px; z-index: 7;}


        .fecha {
            display: block;
            text-align: center;
            margin-top: 0px;
        }

        .fecha img{
             max-width: 50%;
        }


/* --- Estilos Responsivos para el Header --- */
        @media (max-width: 992px) {  

        .layer {
            position: absolute;
            top: 45%;
            left: 50%;
            /* El transform inicial se aplicará en JS junto con el parallax */
            /* transform: translate(-50%, -50%); */
            transition: transform 0.08s ease-out;
            display: flex;
            justify-content: center;
            align-items: center;

            /* TRANSFORM-STYLE: Necesario para que las transformaciones 3D anidadas funcionen correctamente.
               Si las capas mismas tuvieran hijos con transformaciones 3D.
               En este caso, con la imagen directa, no es estrictamente necesario, pero es buena práctica. */
            transform-style: preserve-3d;
            padding-top: 0px;
          
        }

         .layer img {
            max-width: 80%;
            height: auto;
           
        }

        #logo img{
             max-width: 72%;
         }

        .fecha img {
            margin-top: 30px;
             max-width: 70%;
        }

         footer  { 
            margin-bottom: 0px;
           padding-bottom: 0px;
           height: 100%;
           background: #000;
         }


        footer img { 
            max-width: 90%;
         }

        .fecha {
            margin-top: 345px;
            padding-bottom: 20px;
        }

         #grain-canvas{
            height: 100%!important;
        }

        }



        @media (max-width: 448px) {  

        #grain-canvas{
            height: 90%!important;
        }
         .layer{
            top:50%;        
        
        }
         
        .layer img {
            max-width: 60%;
            height: auto;
           
        }

        #logo img{
             max-width: 74%;
         }

        .fecha img {
             max-width: 90%;
        }

         footer  { 
            margin-bottom: 0px;
           padding-bottom: 45px;
         }


        footer img { 
            max-width: 90%;
         }

        .fecha {
            margin-top: 0px;
            padding-bottom: 20px;
        }

        }






        /* Logo Vartex*/

         #logo{
            padding-top: 90px;
            text-align: center;
            display: block;
        }

        /* --- Estilos Responsivos para el Header --- */
        @media (max-width: 992px) { /* Punto de quiebre para tabletas y móviles */
            .nav-links {
                position: fixed; /* Ocupa toda la pantalla cuando está activo */
                left: 100%; /* Inicialmente fuera de la pantalla */
                top: 0px; /* Debajo del header */
                padding-top: 70px; /* Para no solaparse con el header si se hace fixed desde top 0 */
                background-color: rgba(42, 23, 58, 0.6);
                width: 70%; /* Ancho del menú desplegable */
                max-width: 300px; /* Ancho máximo */
                height: 100vh;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                transition: left 0.5s ease-in-out;
                box-shadow: 2px 0 5px rgba(0,0,0,0.2);
                padding-top: 30px; /* Espacio superior dentro del menú */
            }

            .nav-links.active {
                left: 0; /* Muestra el menú */
            }

            .nav-links li {
                margin: 20px 0;
                width: 100%;
                text-align: center;
            }
            .nav-links a {
                font-size: 1.2em;
            }

            .hamburger {
                display: block; /* Muestra el botón hamburguesa */
                z-index: 1001; /* Encima del nav-links cuando está cerrado */
            }

            /* Animación del botón hamburguesa a "X" */
            .hamburger.active .line1 {
                transform: rotate(-45deg) translate(-6px, 7px);
            }
            .hamburger.active .line2 {
                opacity: 0;
            }
            .hamburger.active .line3 {
                transform: rotate(45deg) translate(-5px, -6px);
            }

            .social-icons {
                /* Opcional: Moverlos al menú desplegable o ocultarlos */
                /* Para este ejemplo, los mantenemos en el header */
                /* Podrías hacerlos más pequeños o reducir su margen */
                 margin-left: auto; /* Empuja los iconos a la derecha del logo en móvil */
                 margin-right: 10px; /* Espacio antes del hamburguer */
            }
             .logo {
                /* Si los iconos sociales y el hamburguer ocupan mucho */
                /* flex-grow: 1; */
             }
        }

        @media (max-width: 480px) {
             .logo a {
                font-size: 1.5em;
             }
             .social-icons img {
                width: 20px;
                height: 20px;
             }
             .social-icons a {
                margin-left: 10px;
             }

            .versiones {
                background-color:white!important;;
                padding:2em;
                margin: 0px;
                
            }

            .versiones a {
                text-decoration: none!important;
                font-weight: 100;
                font-size: 0.9em;
                color: var(--enlaces);
            }

            .versiones ul {
                padding-top: 0.3em;
            }

            .versiones li {
                list-style-type: none;
                margin:0.3em;
            }
        }







/* Ondas*/

#waterCanvas {
    display: block; /* Elimina espacio extra debajo del canvas */
    position: absolute;
    top: 0;
    left: 0;
    /* El tamaño se establecerá en JS para que coincida con la ventana */
}




/* Grano animado*/

.background-container {
    background: linear-gradient(145deg, #6d1127, #fddc00);
}

#grain-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: overlay; /* This is key for the "fusion" like effect */
    /* Other good options: soft-light, multiply, screen */
    pointer-events: none; /* Allows clicking through the canvas */
    opacity: 0.5; /* Adjust grain visibility. 0.05 to 0.25 is usually good */
}


/* Versiones*/

#versiones {
    display: flex;
    justify-content: center;
    width: 100%;
     background-color: #FFF;
}

.versiones{
    padding:2em;
    margin: 0px;
    max-width: 800px!important;
 }


.versiones a {
    text-decoration: none;
    font-weight: 100;
    font-size: 0.9em;
    color: var(--enlaces);
    transition: color 0.9s ease;
}

.versiones a:hover {
    text-decoration: underline dotted;
    font-weight: 100;
    font-size: 0.9em;
    color: var(--acento);
    transition: color 0.2s ease;
}

.versiones ul {
    padding-top: 0.3em;
}

.versiones li {
    list-style-type: none;
    margin:0.3em;
}

.svg-inline--fa.fa-w-14 {
    width: .675em;
    color: var(--acento);
    margin-right: 3px;
}

/* Footer*/
footer {
    background-color: #FFF;
    text-align: center;
    position: relative; /* Cambiado de fixed */
    padding-top: 40px;
    margin-top: 0px;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: solid 1px var(--acento);
}