/* --- Estilos Generales y Fondo --- */
body {
    background-color: #121212; 
    color: #e0e0e0; 
    
    /* ¡CAMBIO AQUÍ! Fuente por defecto para todo el texto */
    font-family: 'Lato', sans-serif; 
    
    margin: 0;
}


/* --- Estilos del Menú de Navegación --- */
header {
    padding: 20px; /* Añade un poco de espacio alrededor del menú */
}

/* --- Estilos del Menú de Navegación (TIPO BARRA) --- */
nav ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex; /* Usamos Flexbox para alinear los elementos */
    width: 100%; /* El menú ocupará el ancho completo */
    overflow: hidden; /* Asegura que los hijos (los botones) respeten los bordes redondeados */

}

/* Hacemos que cada elemento de la lista se expanda */
nav li {
    flex: 1; /* ¡LA CLAVE! Cada elemento crece para ocupar el mismo espacio */
    text-align: center; /* Centramos el texto dentro de cada botón */
    
}

/* Quitamos la línea del último botón para un acabado limpio */
nav li:last-child {
    border-right: none;
}

/* --- Estilo de los Botones del Menú (sin bordes individuales) --- */
nav a {
    display: block; /* Hacemos que el enlace ocupe todo el espacio del 'li' */
    padding: 15px 0; /* Espacio interior vertical, el horizontal ya no es necesario */
    text-decoration: none;
    color: #e0e0e0;
    font-weight: bold;
    
    /* La transición sigue funcionando para el efecto de relieve */
    transition: all 0.3s ease-out; 
}


/* --- Efecto Relieve para el Menú (Hover y Activo) --- */
nav a:hover {
    color: #ffffff;
    background-color: #2c2c2c; /* Añadimos un fondo para el efecto relieve */

    /* La sombra interior (inset) sigue siendo la clave del efecto relieve */
    box-shadow: inset 3px 3px 6px #000000;
}


/* --- Estilos para las Secciones del Contenido --- */
main {
    padding: 20px; /* Añade un poco de espacio a los lados del contenido principal */
}

section {
    padding: 60px 20px; /* Espacio interior para cada sección */
    border-bottom: 1px solid #333; /* Línea sutil para separar secciones */
    max-width: 900px; /* Ancho máximo para que no sea muy ancho en pantallas grandes */
    margin: 0 auto; /* Centra las secciones en la página */
    text-align: left; /* Alineamos el texto a la izquierda dentro de las secciones */
}

section:last-child {
    border-bottom: none; /* Quitamos la línea en la última sección */
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif; /* Fuente para los títulos */
    text-align: center;
    color: #ffffff;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em; /* Tamaño de fuente para los títulos de sección */
    margin-top: 0;
    margin-bottom: 40px;
}

p {
    line-height: 1.6; /* Mejora la legibilidad de los párrafos */
}


/* --- Estilos Específicos (Listas, Proyectos, Contacto) --- */
section ul {
    list-style: none; /* Quitamos los puntos de las listas */
    padding: 0;
}

section ul li {
    background-color: #1a1a1a; /* Fondo ligeramente más claro para cada elemento */
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 3px solid #007BFF; /* Un acento de color */
}

.proyecto {
    background-color: #1e1e1e;
    padding: 25px;
    border-radius: 8px;
    margin-top: 20px;
}

#contacto {
    text-align: center;
}

#contacto a {
    color: #007BFF; /* Un color azul para que destaque */
    text-decoration: none;
    font-weight: bold;
}

#contacto a:hover {
    text-decoration: underline;
}

/* --- ESTILOS PARA LA LISTA DE EXPERIENCIA DESPLEGABLE --- */

/* Contenedor principal de cada puesto de trabajo */
.experiencia-lista-desplegable li {
    background-color: #1a1a1a;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 3px solid #007BFF;
    cursor: pointer; /* Indica que el elemento es interactivo */
    overflow: hidden; /* Clave para que el efecto de despliegue funcione bien con los bordes redondeados */
}

/* El título del trabajo, que siempre es visible */
.trabajo-titulo {
    padding: 18px 15px;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Pequeño efecto al pasar el cursor */
}

/* El contenedor de la descripción, que estará oculto por defecto */
.trabajo-descripcion {
    max-height: 0; /* ¡LA CLAVE! Por defecto, la altura es cero */
    opacity: 0; /* Lo hacemos invisible */
    overflow: hidden; /* Oculta el contenido que no cabe */
    padding: 0 15px; /* Padding horizontal, pero vertical es cero */
    background-color: #252525; /* Un fondo ligeramente distinto para diferenciarlo */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, opacity 0.3s ease-in-out; /* Animación suave */
}

/* Párrafo dentro de la descripción para un mejor espaciado */
.trabajo-descripcion p {
    margin: 0;
    padding-bottom: 18px; /* Espacio inferior para que no quede pegado al cerrar */
}


/* --- LA MAGIA: EFECTO AL PASAR EL CURSOR (HOVER) --- */

/* Cuando pasamos el cursor sobre el 'li', la descripción que está dentro se expande */
.experiencia-lista-desplegable li:hover .trabajo-descripcion {
    max-height: 300px; /* Le damos una altura máxima suficiente para que quepa el texto */
    opacity: 1; /* Lo hacemos visible */
    padding: 18px 15px; /* Le damos su padding completo */
}

/* Opcional: Cambiamos el color de fondo del título al pasar el cursor para dar feedback */
.experiencia-lista-desplegable li:hover .trabajo-titulo {
    background-color: #2c2c2c;
}



/* --- Estilos para el Botón de Ver Proyecto --- */
.ver-proyecto-btn {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.ver-proyecto-btn:hover {
    background-color: #0056b3;
}


/* --- Estilos para la Ventana Modal --- */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Se queda fijo en la pantalla */
    z-index: 100; /* Por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo negro semitransparente */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Centrado */
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    height: 80%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
}

#proyectoFrame {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
}




/* --- ESTILOS PARA LA PANTALLA DE BIENVENIDA (SPLASH GATE) --- */

.splash-gate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    /* Fondo oscuro para ocultar el contenido al principio */
    background-color: #121212; 
    transition: background-color 1s ease 0.5s; /* El fondo se desvanece después */
}

/* Las dos líneas verticales (las compuertas) */
.gate {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0.5px; /* Grosor de la línea */
    background-color: grey; /* Color azul para que destaquen */
    
    
    /* ¡LA CLAVE DE LA ANIMACIÓN! */
    transition: transform 1.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.left-gate {
    left: 50%;
    transform: translateX(-100%); /* Se posiciona justo a la izquierda del centro */
}

.right-gate {
    left: 50%;
}

/* Botón de "Entrar" */
.enter-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #e0e0e0;
    background-color: transparent;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    cursor: pointer;
    z-index: 999;
    transition: opacity 0.5s ease;
}

/* --- CLASES DE ANIMACIÓN (controladas por JavaScript) --- */

/* Cuando las compuertas se abren */
.splash-gate.opened .left-gate {
    transform: translateX(-100vw); /* Se mueve a la izquierda */
}
.splash-gate.opened .right-gate {
    transform: translateX(100vw); /* Se mueve a la derecha */
}

/* El botón desaparece */
.splash-gate.opened .enter-btn {
    opacity: 0;
    pointer-events: none; /* Evita que se pueda hacer clic mientras desaparece */
}

/* El fondo oscuro se vuelve transparente */
.splash-gate.opened {
    background-color: transparent;
}

/* Ocultamos todo el contenedor al final */
.splash-gate.hidden {
    display: none;
}


/* --- ESTILOS PARA EL CONTENIDO PRINCIPAL --- */

.main-content {
    /* Inicialmente el contenido está invisible */
    opacity: 0;
    transition: opacity 1s ease 0.8s; /* Aparece 0.8s después de hacer clic */
}

.main-content.visible {
    opacity: 1;
}

/* Botón de "Entrar" */
.enter-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #e0e0e0;
    background-color: transparent;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    cursor: pointer;
    z-index: 201; /* Por encima de las puertas */
    transition: opacity 0.5s ease;
}

/* --- CLASES DE ANIMACIÓN (controladas por JavaScript) --- */

/* Cuando las puertas se abren */
.splash-screen.opened .left-door {
    transform: translateX(-100%);
}
.splash-screen.opened .right-door {
    transform: translateX(100%);
}

/* Cuando el botón desaparece */
.splash-screen.opened .enter-btn {
    opacity: 0;
}

/* Cuando la pantalla de bienvenida se oculta del todo */
.splash-screen.hidden {
    display: none;
}


/* --- ESTILOS PARA EL CONTENIDO PRINCIPAL --- */

.main-content {
    /* Inicialmente el contenido está invisible */
    opacity: 0;
    transition: opacity 1s ease 1s; /* Se hará visible 1s después de que se active */
}

/* Cuando el contenido debe aparecer */
.main-content.visible {
    opacity: 1;
}

/* Estilos para la animación de texto "poco a poco" */
#inicio h1, #inicio p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Clases que añadirá JS para hacerlos visibles */
#inicio h1.fade-in, #inicio p.fade-in {
    opacity: 1;
    transform: translateY(0);
}



/* --- Estilos para los botones de proyecto --- */
.botones-proyecto {
    margin-top: 15px;
    display: flex; /* Pone los botones uno al lado del otro */
    gap: 10px; /* Crea un espacio entre ellos */
}

/* Estilo para el nuevo botón de demo */
.ver-demo-btn {
    background-color: #28a745; /* Color verde para diferenciarlo */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.ver-demo-btn:hover {
    background-color: #218838;
}

/* Estilo para el vídeo dentro del modal */
#videoPlayer {
    max-height: 100%;
    border-radius: 5px;
}