:root {
    --blanquesino: hsl(60, 16%, 86%);
    --rosa: hsl(353, 78%, 77%);
    --grisaceo: hsl(180, 4%, 16%);
    --oliva: hsl(62, 77%, 35%);

    --deep-plum: hsl(293, 31%, 23%);
    --warm-ochre: hsl(44, 67%, 50%);
    --gris_claro: hsl(79, 12%, 65%);

    --altura-linea-textos: 1.6;
    --altura-linea-titulos: 1.1;

    /* Espaciado y Estructura */
    --ancho-contenedor: min(75rem, calc(100% - 2rem));
    /* ancho igual al valor mi­nimo entre 1200px (75rem) o el 100% del ancho disponible menos 2rem (32px). Esto garantiza margen en pantallas pequeñas sin usar padding */

    --espaciado-base: 1rem;
}

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


.raleway {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

html {
    scrollbar-gutter: stable;
}

body {
    color: var(--grisaceo);
    background-color: var(--blanquesino);
    text-align: center;
    line-height: var(--altura-linea-textos);
    text-wrap: pretty;
}

img {
    max-width: 100%;
    height: auto;
}

header,
footer {
    background-color: var(--oliva);
    color: var(--blanquesino);
}

a {
    text-decoration: none;
}

.menu a,
.equipo a {
    color: var(--grisaceo);
    display: inline-block;
    padding-block: calc(var(--espaciado-base) / 2);
    padding-inline: var(--espaciado-base);
    margin-block-end: var(--espaciado-base);
    background-color: var(--rosa);
    border: 2px solid var(--rosa);
    border-radius: 2rem;

}

.menu a:hover,
.equipo a:hover {
    background-color: var(--oliva);
    color: var(--blanquesino);
    border-color: var(--rosa);
}

.contenedor {
    background-color: var(--oliva);
    width: 100%;
    padding-block: var(--espaciado-base);
    color: var(--blanquesino);
    border-block: 4px solid var(--rosa);
}

ul li {
    list-style: none;
}

.materias{
    margin-block: var(--espaciado-base);
}

.años-materias {
    margin-block: var(--espaciado-base);
    margin-inline: var(--espaciado-base);
    padding: var(--espaciado-base);
    border-inline-start: 5px solid var(--rosa);
}

.subtitulo-materias {
    display: inline-block;
    padding-block: calc(var(--espaciado-base) / 2);
    padding-inline: var(--espaciado-base);
    margin-block: var(--espaciado-base);
    background-color: var(--rosa);
    border: 2px solid var(--rosa);
    border-radius: 2rem;
}

article {
    color: var(--blanquesino);
    background-color: var(--grisaceo);
    width: var(--ancho-contenedor);
    margin-block: var(--espaciado-base);
    margin-inline: auto;
    padding: var(--espaciado-base);
    border-inline-start: 5px solid var(--rosa);
}

.equipo li {
    background-color: var(--gris_claro);
    width: 100%;
    margin-block: var(--espaciado-base);
    padding: var(--espaciado-base);
    border-inline-start: 5px solid var(--rosa);
}

article a {
    color: var(--rosa);
    display: inline-block;
    padding-block: calc(var(--espaciado-base) / 2);
    padding-inline: var(--espaciado-base);
    margin-block-end: var(--espaciado-base);
}

article a:hover {
    color: var(--oliva);
}

.equipo img {
    display: block;
    width: 8em;
    aspect-ratio: 1 / 1;
    object-fit: cover;

    border: 5px solid var(--oliva);
    margin: 0;
}

.presentacion {
    background-image: url(../imagenes/fondo_presentacion.jpeg);
    background-repeat: no-repeat;
    background-position: auto;
    background-size: cover;
    width: 100%;
    min-height: 60vh;
    padding-block: var(--espaciado-base);
}

.prototipo img{
    display: block;
    width: 80%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}




/*GRID*/

body {
    min-block-size: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

header .contenedor {
    display: flex;
    justify-content: space-between;
    gap: var(--espaciado-base);
    flex-wrap: wrap;
    align-items: center;
}

.menu ul {
    display: flex;
    gap: calc(var(--espaciado-base) / 2);
    flex-wrap: wrap;
    flex-wrap: balance;
}

.equipo .caja ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--espaciado-base);
    width: var(--ancho-contenedor);
    margin-inline: auto;
}

.datos-academicos .caja {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--espaciado-base);
}

.equipo li {
    display: grid;
    grid-template-columns: 8em 1fr;
    gap: var(--espaciado-base);
}

.equipo-info {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--espaciado-base);
}

.equipo-info a {
    margin-inline-start: auto;
    justify-self: end;
}

.años {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaciado-base);
}

.materias-curso {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espaciado-base);
}

.prototipo{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaciado-base);
}