/* =====================================================
   VARIABLES
===================================================== */

:root {
    --amarillo: #f5c400;
    --amarillo-claro: #ffd83d;

    --rojo: #d62828;
    --rojo-oscuro: #a51d1d;

    --negro: #0d0d0d;
    --negro-2: #161616;
    --negro-3: #202020;

    --gris: #777;
    --gris-claro: #bdbdbd;

    --blanco: #f5f5f5;

    --borde: #333;

    --radio: 8px;
}


/* =====================================================
   RESET
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--negro);
    color: var(--blanco);
    line-height: 1.5;
}


/* =====================================================
   HEADER
===================================================== */

body > header {
    background: var(--negro-2);

    border-top: 5px solid var(--rojo);
    border-bottom: 3px solid var(--amarillo);

    padding: 30px 7%;
}

.header-content {
    max-width: 1100px;
    margin: auto;
}

.header-label {
    display: block;

    color: var(--rojo);

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 8px;
}

.header-content h1 {
    color: var(--amarillo);

    font-size: 40px;
    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 5px;
}

.header-content p {
    color: var(--gris-claro);

    font-size: 14px;
}


/* =====================================================
   NAVEGACIÓN
===================================================== */

nav {
    background: #111;

    border-bottom: 1px solid var(--borde);

    padding: 18px 7%;
}

.nav-group {
    max-width: 1100px;

    margin: 0 auto 12px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}

.nav-group:last-child {
    margin-bottom: 0;
}

.nav-title {
    color: var(--gris);

    font-size: 11px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-right: 8px;
}

.nav-group a {
    display: inline-block;

    color: var(--blanco);

    background: var(--negro-3);

    border: 1px solid var(--borde);

    border-radius: 4px;

    padding: 7px 13px;

    text-decoration: none;

    font-size: 12px;

    font-weight: bold;

    transition: all 0.2s ease;
}

.nav-group a:hover {
    background: var(--amarillo);

    color: var(--negro);

    border-color: var(--amarillo);

    transform: translateY(-2px);
}


/* =====================================================
   CONTENIDO
===================================================== */

main {
    width: min(1100px, 90%);

    margin: 45px auto 70px;
}


/* =====================================================
   PERFIL
===================================================== */

.profile {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    padding: 30px;

    margin-bottom: 30px;

    background:
        linear-gradient(
            120deg,
            rgba(245, 196, 0, 0.08),
            transparent 65%
        ),
        var(--negro-2);

    border: 1px solid var(--borde);

    border-left: 5px solid var(--amarillo);

    border-radius: var(--radio);

    position: relative;

    overflow: hidden;
}

.profile::after {
    content: "AUTOMOTIVE / SYSTEM";

    position: absolute;

    right: 20px;
    bottom: 12px;

    color: rgba(245, 196, 0, 0.12);

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 3px;
}

.profile-info {
    position: relative;

    z-index: 1;
}

.section-label {
    display: block;

    color: var(--rojo);

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 8px;
}

.profile-info h2 {
    color: var(--blanco);

    font-size: 34px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 5px;
}

.profile-info p {
    color: var(--gris-claro);

    font-size: 14px;
}

.profile-image {
    position: relative;

    z-index: 2;
}

.profile-image img {
    display: block;

    width: 125px;
    height: 125px;

    object-fit: cover;

    border-radius: 50%;

    border: 4px solid var(--amarillo);

    filter: grayscale(100%);

    transition: all 0.3s ease;
}

.profile-image img:hover {
    filter: grayscale(0%);

    border-color: var(--rojo);

    transform: scale(1.05);
}


/* =====================================================
   HISTORIAL ACADÉMICO
===================================================== */

.academic-history {
    background: var(--negro-2);

    border: 1px solid var(--borde);

    border-radius: var(--radio);

    padding: 30px;
}

.section-heading {
    border-bottom: 2px solid var(--borde);

    padding-bottom: 18px;

    margin-bottom: 25px;
}

.section-heading h2 {
    font-size: 25px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =====================================================
   AÑOS
===================================================== */

.academic-year {
    margin-bottom: 35px;

    border: 1px solid var(--borde);

    border-radius: 7px;

    overflow: hidden;

    background: var(--negro);
}

.academic-year > header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 18px;

    background: var(--negro-3);

    border-bottom: 2px solid var(--amarillo);
}

.academic-year > header h3 {
    color: var(--amarillo);

    font-size: 25px;

    font-weight: 900;

    letter-spacing: 1px;
}

.academic-year > header span {
    color: var(--gris-claro);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

    padding: 5px 9px;

    border: 1px solid var(--borde);

    border-radius: 3px;
}


/* =====================================================
   MATERIAS
===================================================== */

.subject {
    padding: 17px 20px;

    border-bottom: 1px solid #292929;

    position: relative;

    transition: background 0.2s ease;
}

.subject:last-child {
    border-bottom: none;
}

.subject:hover {
    background: #191919;
}


/* Línea lateral */

.subject::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background: #444;
}

.subject:hover::before {
    background: var(--amarillo);
}

.subject h4 {
    color: var(--blanco);

    font-size: 14px;

    font-weight: bold;

    margin-bottom: 3px;
}

.subject p {
    color: var(--gris);

    font-size: 12px;
}

.subject strong {
    color: var(--amarillo);

    font-size: 15px;
}


/* Materias aprobadas */

.subject.approved::before {
    background: var(--rojo);
}

.subject.approved:hover::before {
    background: var(--amarillo);
}


/* =====================================================
   RESUMEN ACADÉMICO
===================================================== */

.academic-summary {
    margin-top: 30px;

    padding: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(214, 40, 40, 0.08),
            transparent 60%
        ),
        var(--negro);

    border: 1px solid var(--borde);

    border-top: 3px solid var(--rojo);

    border-radius: var(--radio);
}

.academic-summary h3 {
    font-size: 20px;

    text-transform: uppercase;

    margin-bottom: 20px;
}

.summary-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
}

.summary-card {
    padding: 18px;

    background: var(--negro-3);

    border: 1px solid var(--borde);

    border-radius: 5px;
}

.summary-card span {
    display: block;

    color: var(--gris);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;
}

.summary-card strong {
    display: block;

    color: var(--amarillo);

    font-size: 20px;
}


/* =====================================================
   FOOTER
===================================================== */

body > footer {
    background: #090909;

    border-top: 4px solid var(--rojo);

    padding: 35px 7%;

    text-align: center;

    color: #666;

    font-size: 11px;

    line-height: 1.8;
}

body > footer p {
    margin-bottom: 2px;
}

body > footer p:first-child {
    color: var(--amarillo);

    font-size: 13px;

    margin-bottom: 8px;
}

body > footer p:last-child {
    margin-top: 12px;

    color: var(--rojo);

    font-weight: bold;
}


/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--negro);
}

::-webkit-scrollbar-thumb {
    background: #444;

    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--amarillo);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 700px) {

    .header-content h1 {
        font-size: 30px;
    }

    .profile {
        padding: 22px;

        flex-direction: column;

        align-items: flex-start;
    }

    .profile-image {
        align-self: center;
    }

    .profile-info h2 {
        font-size: 27px;
    }

    .academic-history {
        padding: 18px;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .nav-group {
        align-items: stretch;

        flex-direction: column;
    }

    .nav-title {
        margin-bottom: 3px;
    }

    .nav-group a {
        width: 100%;

        text-align: center;
    }
}


@media (max-width: 450px) {

    main {
        width: 94%;
    }

    .profile-info h2 {
        font-size: 23px;
    }

    .profile-image img {
        width: 105px;
        height: 105px;
    }

    .academic-year > header {
        padding: 12px;
    }

    .academic-year > header h3 {
        font-size: 21px;
    }

    .subject {
        padding: 15px;
    }

    .subject h4 {
        font-size: 13px;
    }
}