/* ==========================================
   1. FUENTES 
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Estilo para tu nombre */
.nombre-titulo {
    font-family: 'Ballet', 'Space Grotesk', cursive, sans-serif;
    color: rgb(74, 46, 9);
    text-align: center;
    font-size: 3rem; /* rem: tamaño adaptable del título */
}

/* ==========================================
   2. PALETA DE DISEÑO Y VARIABLES
   ========================================== */
:root {
    --color-principal: hwb(14 16% 68%);
    --color-secundario: hwb(14 16% 68%);
    --color-texto-oscuro: hsl(0 0% 10%);
    --color-texto-medio: hsl(0 0% 25%);
    --color-claro: whitesmoke;
    
    --fuente-principal: "Poppins", sans-serif;
    --fuente-titulos: "Poppins", sans-serif;
    
    --altura-linea-textos: 1.6;
    --altura-linea-titulos: 1.1;
    --ancho-contenedor: min(75rem, calc(100% - 2rem));
    --espaciado-base: 1rem;
    --sombra-caja: 0 4px 4px hsl(0 0% 0% / 25%);
}

/* ==========================================
   3. RESET GLOBAL Y BOX MODEL
   ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* ==========================================
   4. ESTILOS GENERALES
   ========================================== */
body {
    font-family: var(--fuente-principal);
    margin: 0;
    color: var(--color-texto-medio);
    background-color: var(--color-claro);
    line-height: var(--altura-linea-textos);
    text-wrap: pretty;
    min-block-size: 100dvh;
}

.legal { 
    width: var(--ancho-contenedor);
    margin-inline: auto;
}

.equipo-seccion {
    width: var(--ancho-contenedor);
    margin-inline: auto;
}

header, footer {
    background-color: var(--color-principal);
    color: var(--color-claro);
    padding-block: var(--espaciado-base);
}

ul, ol {
    list-style: none;
    padding: 0;
}

/* Estilos para el contenedor del menú de navegación */
nav.navegacion-superior {
    background-color: var(--color-principal); 
    padding: 0.75rem 0; /* rem: espaciado vertical */
    text-align: center;
}

nav.navegacion-superior ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 1rem; /* rem: separación entre botones */
    flex-wrap: wrap;
}

nav.navegacion-superior a {
    display: inline-block;
    color: var(--color-claro);
    text-decoration: none;
    font-family: var(--fuente-principal);
    font-size: 0.9rem; /* rem: tamaño del texto del menú */
    font-weight: 600;
    padding: 0.5rem 1.125rem; /* rem: relleno del botón */
    border-radius: 20px; /* px: radio de curvatura fijo */
    background-color: rgba(255, 255, 255, 0.15);
    transition: background-color 0.3s ease, color 0.3s ease;
}

nav.navegacion-superior a:hover {
    background-color: #ffffff;
    color: var(--color-texto-oscuro);
}

nav.navegacion-superior a.activo {
    background-color: #ffffff;
    color: var(--color-texto-oscuro);
    font-weight: 700;
}

/* ==========================================
   5. PERFIL INDIVIDUAL
   ========================================== */
body.perfil-mili {
    font-family: var(--fuente-principal);
    background-color: #f5e5ea !important;
    color: #4a2e2b;
}

.Biografia {
    border: 2px solid #ffffffa2; /* px: grosor de línea */
    padding: 1rem; /* rem: relleno interno */
    margin-bottom: 1rem; /* rem: margen inferior */
    border-radius: 8px; /* px: curva de esquina */
    background: #ffffffa2;
    max-width: 600px; /* px: ancho máximo estricto */
    width: 90%;      
    margin-inline: auto;
}

/* Tipografía Ballet para tu nombre */
h1.nombre-mili {
    font-family: 'Ballet', cursive !important;
    color: rgb(74, 46, 9) !important;
    text-align: center !important;
    font-size: 3.5rem; /* rem: tamaño de título principal */
}

h2.anios-fadu {
    font-family: 'Ballet', cursive !important;
    color: rgb(74, 46, 9) !important;
    text-align: center !important;
    font-size: 3.5rem; /* rem: tamaño del subtítulo */
}

/* Carrera y Tarjetas adaptables */
.cbc, .primer-anio, .segundo-anio, .tercer-anio, .Actualmente {
    border: 2px solid #ffffffa2;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: #ffffffa2;
    max-width: 600px; 
    width: 90%;      
    margin-inline: auto;
}

/* ==========================================
   MÓDULO CONTENEDOR DE LA GRILLA
   ========================================== */
.Carrera {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem; /* rem: espacio entre columnas de materias */
    width: var(--ancho-contenedor);
    margin-inline: auto;
    margin-bottom: 2rem;
}

.Carrera > h2 {
    grid-column: 1 / -1;
    color: var(--color-texto-oscuro);
    font-size: 1.4rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 0.3rem;
}

/* Equipo vm04 */
.equipo-seccion {
    border: 2px solid #ffffffa2;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: #ffffffa2;
    max-width: 400px;
    width: 90%;
    margin-inline: auto;
    text-align: center;
}

.tarjeta-materia {
    border: 2px solid #ffffffa2;
    padding: 1rem;
    border-radius: 12px;
    background: #ffffffa2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* px: sombra suave */
}

.tarjeta-materia h3 {
    color: var(--color-principal);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.tarjeta-materia p {
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Tarjeta del prototipo dentro de equipo-seccion */
.tarjeta-prototipo {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid #ffffff;
    padding: 0.6rem; /* rem: espacio interno */
    border-radius: 8px;
}

.Uba {
    border: 2px solid #ffffffa2;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: #ffffffa2;
}

/* ==========================================
   ADAPTACIÓN PARA CELULARES (RESPONSIVE)
   ========================================== */
@media (max-width: 768px) { /* px: punto de quiebre de pantalla */
    .Carrera {
        display: flex !important;
        flex-direction: column !important;
        width: 90% !important;
        margin-inline: auto !important;
        gap: 1rem !important; /* rem: espacio entre tarjetas verticales */
    }

    .tarjeta-materia {
        width: 100% !important;
        max-width: 100% !important;
    }

    h1.nombre-mili, 
    h2.anios-fadu {
        font-size: 2.3rem !important; /* rem: reducción de título en celulares */
    }
}