/*
 * Archivo: estilo.css
 * Tema: Estilo para portafolio de Diseño Gráfico por Computación (DGPC)
 * Basado en la paleta de colores de la imagen y la tipografía Inter.
 */

/* ==================================== */
/* 1. Variables y Configuración Base */
/* ==================================== */

:root {
    /* Colores basados en image_da9ee6.jpg */
    --color-dark-primary: #0A0A1F; /* Fondo principal (similar al borde oscuro) */
    --color-light: #EDEDF3; /* Color claro para texto y elementos (similar al #EDEDF3) */
    --color-accent-orange: #FDA136; /* Color de acento/naranja (similar al #FDA136) */
    --color-gradient-start: #FF6B35; /* Naranja/Rojo vivo para el gradiente */
    
    /* Colores derivados */
    --color-card-bg: rgba(25, 25, 45, 0.6); /* Fondo de tarjetas semi-transparente */
    --color-nav-bg: rgba(10, 10, 31, 0.9); /* Fondo de navegación oscuro y opaco */
    --color-current-item: var(--color-accent-orange);
    
    /* Tipografía */
    --font-family-primary: 'Inter', sans-serif;
    --max-content-width: 1200px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-primary);
    color: var(--color-light);
    line-height: 1.6;
    min-height: 100vh;
    /* Gradiente radial similar al de la imagen, con inicio en rojo/naranja y final en oscuro */
    background: var(--color-dark-primary);
    background-image: radial-gradient(circle at 10% 50%, rgba(255, 107, 53, 0.25) 0%, var(--color-dark-primary) 50%);
    background-attachment: fixed; /* Mantiene el gradiente fijo al hacer scroll */
}

a {
    color: var(--color-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-accent-orange);
}

/* ==================================== */
/* 2. Layout General */
/* ==================================== */

.content-wrapper {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 20px;
}

/* ==================================== */
/* 3. Navegación Superior */
/* ==================================== */

.top-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-nav-bg);
    backdrop-filter: blur(5px); /* Efecto "frosted glass" para la nav */
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.top-nav a {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ==================================== */
/* 4. Cabecera y Perfil (Estructura Centrada Revertida) */
/* ==================================== */

/* --- Estilo del Header: Contenedor Principal Flexbox --- */
.profile-header {
    /* Convierte el header en un contenedor flex para alinear la imagen y el texto */
    display: flex;
    /* Alinea los elementos (imagen y texto) a lo largo del eje transversal (vertical),
       en este caso, los estira para que ocupen la altura completa del contenedor (500px) */
    align-items: stretch;
    /* Añade algo de espacio interno o un ancho máximo si es necesario */
    max-width: 1000px; /* Ejemplo: 500px foto + 500px texto */
    margin: 0 auto; /* Centra el bloque completo si el ancho es menor al de la pantalla */
    text-align: left; /* Asegura que el texto dentro del profile-info se alinee a la izquierda */
}

/* --- Estilo del Avatar Centrado y Cuadrado (500x500px) --- */
.avatar-new {
    /* Tamaño fijo de la imagen */
    width: 300px;
    height: 300px;
    
    /* Mantenemos el estilo visual */
    border-radius: 20px;
    object-fit: cover;
    
    /* Eliminamos el 'margin: 20px auto 30px auto;' anterior para el centrado,
       ya que ahora es parte de un diseño flex. Usamos 'margin-right' para separar del texto. */
    margin: 0 30px 0 0; /* Espacio a la derecha de la foto */
    display: block;
    
    /* Borde y sombra sutiles */
    border: 3px solid var(--color-accent-orange);
    box-shadow: 0 0 20px rgba(253, 161, 54, 0.4);
}

/* --- Contenedor del Texto: Flex para control de Nombre y Subtítulo --- */
.profile-info {
    /* Ocupa el espacio restante junto a la imagen */
    flex-grow: 1; /* Esto hará que ocupe el espacio restante (aprox. 500px) */
    height: 300px; /* Establece la altura que debe ocupar */
    
    /* Usa Flexbox interno para colocar el nombre arriba y el subtítulo abajo */
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    /* Alinea el primer elemento (nombre) al inicio y el último (subtítulo) al final */
    justify-content: space-between; 
}

/* --- Estilos de Texto --- */

.profile-name {
    /* Nombre más pequeño y con mayúsculas/minúsculas */
    font-size: 3rem; 
    font-weight: 900;
    margin-bottom: 5px; /* Pequeño margen inferior */
    color: var(--color-accent-orange);
    text-transform: none;
    letter-spacing: normal;
    /* 'align-self: flex-start;' ya no es necesario gracias a justify-content: space-between */
}

.profile-career {
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 5px; /* Pequeño margen superior */
    opacity: 1;
    /* 'align-self: flex-end;' ya no es necesario gracias a justify-content: space-between */
}

.profile-tag:hover {
    background-color: var(--color-accent-orange);
    border-color: var(--color-accent-orange);
    color: var(--color-dark-primary);
}

/* Eliminamos los contenedores anteriores que ya no usamos */
.header-card, .header-text-content, .header-avatar-container {
    all: unset;
}

/* ==================================== */
/* 5. Secciones y Contenedores */
/* ==================================== */

.section-container {
    padding: 40px 0;
}

.section-card {
    background-color: var(--color-card-bg);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.section-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent-orange);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(253, 161, 54, 0.3);
}

.section-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-light);
    margin-top: 15px;
    margin-bottom: 10px;
}

.section-card p, .section-card ul {
    margin-bottom: 15px;
    font-size: 1rem;
    opacity: 0.9;
}

.section-card ul {
    list-style: none;
    padding-left: 0;
}

.section-card li {
    padding: 5px 0;
}

/* ==================================== */
/* 6. Recorrido Académico / Foja */
/* ==================================== */

.subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.subject-year {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
}

.subject-year h4 {
    color: var(--color-accent-orange);
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed rgba(253, 161, 54, 0.5);
}

.subject-year.projected {
    background-color: rgba(253, 161, 54, 0.1); /* Fondo más claro para lo proyectado */
    border-color: var(--color-accent-orange);
}

/* ==================================== */
/* 7. Proyecto DGPC */
/* ==================================== */

.sub-section {
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 3px solid rgba(255, 255, 255, 0.1);
}

.equipo-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
}

.equipo-nav li {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.equipo-nav li a:hover {
    color: var(--color-light); /* Evita que el enlace de acento cambie a naranja */
}

.equipo-nav li:hover {
    background-color: rgba(253, 161, 54, 0.3);
}

.equipo-nav li.current {
    background-color: var(--color-current-item);
    color: var(--color-dark-primary);
    font-weight: 700;
    pointer-events: none; /* Deshabilita click en el item actual */
}

/* ==================================== */
/* 8. Cátedra y Docentes */
/* ==================================== */

.datos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.institucion {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    border-top: 4px solid var(--color-accent-orange);
}

.institucion h4 {
    color: var(--color-light);
    font-size: 1.2rem;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.institucion a:hover h4 {
    color: var(--color-accent-orange);
}

.institucion ul {
    list-style: none;
    padding-left: 0;
    font-size: 0.9rem;
}

.institucion .rol {
    font-weight: 600;
    color: var(--color-accent-orange);
}

/* ==================================== */
/* 9. Animaciones (Efecto de la web ref.) */
/* ==================================== */

/* Estas clases definen la transición para el efecto de fade-in/slide-up 
   que típicamente se activa con JavaScript (como en la web de referencia) 
   al entrar en el viewport (Intersection Observer). */
.animated-section {
    opacity: 1; /* Por defecto, visible para asegurar el contenido */
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Si se quisiera la animación inicial (oculta) se usaría:
.animated-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animated-section.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
}
... y se activaría la clase 'is-visible' con JS al hacer scroll.
*/

/* ==================================== */
/* 10. Footer */
/* ==================================== */

.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 50px;
    padding: 20px 0 30px 0;
    text-align: center;
    font-size: 0.75rem;
    opacity: 0.6;
}

/* ==================================== */
/* 11. Media Queries (Adaptación) */
/* ==================================== */

@media (max-width: 768px) {
    .profile-name {
        font-size: 2rem;
    }
    
    .top-nav ul {
        gap: 15px;
    }
    
    .section-card {
        padding: 20px;
    }

    .subjects-grid, .datos-grid {
        grid-template-columns: 1fr;
    }

    .equipo-nav ul {
        justify-content: center;
    }
}