/* --- RESET BÁSICO --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #0a0a0a; /* Fondo NEGRO muy oscuro */
    color: #e2e8f0; 
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

h1, h2, h3, .week-number {
    font-family: 'Roboto Mono', monospace; 
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/* --- NAVBAR (Barra Principal) --- */
.navbar {
    background-color: #050505; /* Fondo sólido para tapar lo de atrás */
    /* Restauramos la línea azul que querías */
    border-bottom: 2px solid #2962ff; 
    padding: 1rem 2rem;
    
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    /* La barra se esconde totalmente hacia arriba */
    /* La línea azul de borde quedará justo en el límite superior de la pantalla */
    transform: translateY(-100%); 
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Sombra sutil inicial */
    box-shadow: 0 0 10px rgba(41, 98, 255, 0.1);
}

/* Al pasar el mouse sobre la barra O sobre la pestaña */
.navbar:hover {
    transform: translateY(0); /* La barra baja */
    box-shadow: 0 0 40px rgba(41, 98, 255, 0.4); /* Resplandor al abrir */
}

/* --- PESTAÑA / GATILLO (Versión Final: Fusión Perfecta) --- */
.menu-trigger {
    position: absolute;
    /* Esto coloca el inicio de la pestaña justo al final del menú */
    top: 100%; 
    
    /* 1. ALINEACIÓN A LA IZQUIERDA */
    /* Usamos el mismo margen que tu navbar (2rem = aprox 32px) para que alinee con el texto */
    left: 2rem; 
    transform: none; /* Quitamos el centrado */
    
    /* El fondo debe ser IDÉNTICO al del navbar para tapar la línea azul de atrás */
    background-color: #050505; 
    
    /* 2. FUSIÓN VISUAL (El truco) */
    /* Bordes solo abajo y lados */
    border: 2px solid #2962ff;
    border-top: none; /* Quitamos el borde de arriba */
    
    /* Subimos la pestaña 2 pixeles para que se "coma" la línea del menú */
    margin-top: -1px; 
    
    /* Redondeado solo abajo para que arriba se vea unido al menú */
    border-radius: 0 0 15px 15px;
    
    /* 3. "SÁCALA MÁS" (Visibilidad) */
    /* Aumentamos el padding para que la caja sea más alta y baje más */
    padding: 8px 25px 2px 25px; 
    
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    
    /* Z-INDEX MAYOR para estar encima de la línea del menú */
    z-index: 1005; 
    
    /* Sombra para darle profundidad */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}



/* Ajustes finos al Logo e Imagen */
.trigger-logo {
    height: 30px; /* Más grande para que se vea bien */
    width: auto;
}

.trigger-arrow {
    color: #2962ff;
    font-size: 1.5rem; /* Flecha más grande */
    font-weight: bold;
    transition: transform 0.4s ease;
}

/* Girar la flecha cuando el menú baja */
.navbar:hover .trigger-arrow {
    transform: rotate(180deg);
}

/* --- CONTENIDO DEL MENÚ --- */
.navbar-inner {
    /* CAMBIO 1: Hacemos el contenedor un poco más ancho para dar libertad */
    max-width: 1200px; 
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* CAMBIO 2: Esto empuja el logo a la derecha y los links a la izquierda */
    padding: 0 8rem; /* Antes no tenía esto. 4rem son aprox 64px de empuje */
    
    opacity: 0; 
    transition: opacity 0.3s ease 0.1s;
}

/* Texto aparece al bajar */
.navbar:hover .navbar-inner {
    opacity: 1;
}

/* Estilos de enlaces se mantienen igual */
.logo {
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
    font-size: 1.2rem;
    color: #2962ff; 
    letter-spacing: -1px;
    text-shadow: 0px 0px 8px rgba(41, 98, 255, 0.3);
}

.links a {
    margin-left: 28px;
    font-size: 0.9rem;
    color: #94a3b8;
    transition: 0.3s;
}

.links a:hover {
    color: #ffffff;
    border-bottom: 2px solid #2962ff;
}

/* --- HEADER / HERO --- */
.hero {
    /* Aumenté un poco el padding superior para compensar */
    padding: 6rem 2rem 4rem 2rem; 
    background: linear-gradient(180deg, #0f172a 0%, #0a0a0a 100%);
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    color: #2962ff; /* Título en Azul Eléctrico */
    margin-bottom: 0.5rem;
    text-shadow: 0px 0px 10px rgba(41, 98, 255, 0.3); /* Brillo neón */
}

.subtitle {
    color: #10b981; /* Verde */
    font-family: 'Roboto Mono', monospace;
    margin-bottom: 1.5rem;
}

.intro-text {
    max-width: 600px;
    margin: 0 auto;
    color: #94a3b8;
}

/* --- MAIN LAYOUT --- */
main {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 2rem;
}

section {
    margin-bottom: 4rem;
}

h2 {
    border-left: 4px solid #ef4444; /* Rojo para marcar secciones */
    padding-left: 1rem;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

/* --- GRID DE TARJETAS (Assignments) --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px;
}

.card {
    background-color: #111827; 
    border: 1px solid #1f2937;
    padding: 1.5rem;
    border-radius: 8px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card:hover {
    transform: translateY(-5px);
    border-color: #2962ff; /* Borde Azul Eléctrico al pasar mouse */
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #64748b;
}

.week-number {
    color: #ef4444; /* Rojo */
    font-weight: bold;
}

.card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.card p {
    font-size: 0.95rem;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

/* --- ETIQUETAS Y BOTONES --- */
.tags {
    margin-bottom: 1.5rem;
}

.tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-right: 5px;
    font-family: 'Roboto Mono', monospace;
    background-color: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
}

.btn-card {
    display: block;
    text-align: center;
    background-color: #0f172a;
    border: 1px solid #2962ff; /* Borde Azul Eléctrico */
    color: #2962ff; /* Texto Azul Eléctrico */
    padding: 0.75rem;
    border-radius: 4px;
    font-weight: 600;
}

.btn-card:hover {
    background-color: #2962ff; /* Fondo Azul Eléctrico al hover */
    color: #ffffff; 
    box-shadow: 0 0 15px rgba(41, 98, 255, 0.4); /* Brillo intenso */
}

/* --- FOOTER --- */
footer {
    text-align: center;
    padding: 3rem 1rem;
    border-top: 1px solid #1f2937;
    color: #64748b;
    font-size: 0.9rem;
}

footer a {
    color: #ef4444; /* Rojo */
}

/* --- Nuevo Logo FabLab (Derecha del menú) --- */
.nav-right-logo {
    height: 45px; /* Ajusta este número según qué tan grande lo quieras */
    width: auto;
    margin-left: 2rem; /* Un poco de separación extra de los links */
    transition: transform 0.3s ease;
}

.nav-right-logo:hover {
    transform: scale(1.1); /* Efecto zoom sutil al pasar el mouse */
}