:root {

    --fondo: hsl(0 0% 95%);
    --blanco: hsl(0 0% 100%);
    --gris-intenso: hsl(0 0% 35%);
    --gris-titulo: hsl(0 0% 88%);
    --gris-boton: hsl(0 0% 82%);
    --gris-tarjeta: hsl(0 0% 91%);
    --borde: hsl(0 0% 75%);
    --texto: hsl(0 0% 18%);
    --texto-cuerpo: hsl(0 0% 35%);


    --fuente-principal: Arial, Helvetica, sans-serif;


    --ancho-encabezado: min(50rem, calc(100% - 1.5rem));
    --ancho-contenido: min(44rem, 100%);
    --ancho-pie: 41.5rem;
    --separacion: 0.75rem;
    --tarjeta-equipo-minima: 19rem;
    --tarjeta-institucion-minima: 12rem;


    --imagen-minima: 2.5rem;
    --imagen-presentacion: 17.25rem;
    --imagen-avatar: 6.5rem;
    --logo-ancho: 3.5rem;
    --logo-alto: var(--imagen-minima);
    --logo-institucion-alto: 3.25rem;
    --recuadro-logo-alto: 4.5rem;


    --sombra-encabezado:
        0 0.1875rem 0.375rem hsl(0 0% 0% / 15%);
    --sombra-presentacion:
        0 -1rem 0 -0.375rem var(--gris-titulo);
}


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


body {
    margin: 0;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background-color: var(--fondo);
    color: var(--texto-cuerpo);
    font-family: var(--fuente-principal);
    font-size: 1rem;
    line-height: 1.6;
}

h1,
h2,
h3,
h4 {
    color: var(--texto);
    line-height: 1.3;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

img {
    display: block;
    min-width: var(--imagen-minima);
    max-width: 100%;
    height: auto;
}

a:focus-visible {
    outline: 0.1875rem solid var(--texto);
    outline-offset: 0.25rem;
}


header {
    width: var(--ancho-encabezado);
    margin: 0.75rem auto 0;
    padding: 0.9375rem 1.25rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    background-color: var(--gris-intenso);
    border-radius: 1rem;
    box-shadow: var(--sombra-encabezado);
}

header>img {
    width: var(--logo-ancho);
    height: var(--logo-alto);
    object-fit: contain;
}


nav {
    min-width: 0;
    justify-self: end;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav a {
    display: block;
    padding: 0.625rem 0.9375rem;
    background-color: var(--gris-boton);
    color: var(--texto);
    border-radius: 0.625rem;
    font-weight: bold;
    text-decoration: none;
}

nav a:hover,
nav a:focus-visible {
    background-color: var(--blanco);
}


main {
    width: var(--ancho-contenido);
    min-width: 0;
    margin-inline: auto;
    padding: 2.75rem 1.25rem 3rem;
}


.presentacion {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    margin-bottom: 5rem;
    padding: 2rem 1.5rem 1.5rem;
    background-color: var(--blanco);
    border-radius: 2rem;
    text-align: center;
    box-shadow: var(--sombra-presentacion);
}

.presentacion h1 {
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

.foto-victoria {
    width: var(--imagen-presentacion);
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    border: 0.1875rem solid var(--gris-intenso);
    border-radius: 2.25rem;
}

.profesion {
    margin: 1rem 0 0;
    color: var(--texto);
    font-size: 1.375rem;
}


.titulo-seccion {
    margin-bottom: 1.25rem;
    padding: 0.8125rem 1.25rem;
    background-color: var(--gris-titulo);
    border: 0.0625rem solid var(--borde);
    border-radius: 0.875rem;
    font-size: 1.25rem;
}


.recorrido {
    margin-bottom: 3.5rem;
}

.recuadro-recorrido {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    padding: 1.75rem 1.5rem;
    background-color: var(--blanco);
    border-radius: 1.875rem;
}

.año h3 {
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
    border-left: 0.1875rem solid var(--gris-intenso);
    font-size: 1rem;
}

.año ul {
    margin: 0;
    padding-left: 1rem;
}

.año li {
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.año li::marker {
    color: var(--texto);
}


.equipo {
    margin-bottom: 2rem;
}

.integrantes {
    display: grid;
    grid-template-columns: repeat(auto-fit,
            minmax(min(var(--tarjeta-equipo-minima), 100%), 1fr));
    gap: var(--separacion);
}

.integrante {
    display: grid;
    grid-template-columns:
        minmax(0, var(--imagen-avatar)) minmax(0, 1fr);
    gap: var(--separacion);
    min-width: 0;
    padding: 0.875rem;
    background-color: var(--gris-tarjeta);
    border: 0.0625rem solid var(--borde);
    border-radius: 1.25rem;
}

.avatar {
    width: var(--imagen-avatar);
    aspect-ratio: 1;
    align-self: start;
    padding: 0.25rem;
    object-fit: cover;
    background-color: var(--blanco);
    border-radius: 0.875rem;
}


.informacion-integrante {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-width: 0;
}

.informacion-integrante h3 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.informacion-integrante h4 {
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
}

.informacion-integrante p {
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
}

.informacion-integrante .boton {
    justify-self: start;
    align-self: end;
}


.boton {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    background-color: var(--gris-intenso);
    color: var(--blanco);
    border: 0.0625rem solid var(--gris-intenso);
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: bold;
    text-decoration: none;
}

.boton:hover,
.boton:focus-visible {
    background-color: var(--blanco);
    color: var(--texto);
}


.instituciones {
    display: grid;
    grid-template-columns: repeat(auto-fit,
            minmax(min(var(--tarjeta-institucion-minima), 100%), 1fr));
    gap: var(--separacion);
}


.institucion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 0.875rem;
    background-color: var(--gris-tarjeta);
    border: 0.0625rem solid var(--borde);
    border-radius: 1.25rem;
}

.recuadro-logo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    align-self: stretch;
    flex-shrink: 0;
    height: var(--recuadro-logo-alto);
    margin-bottom: 0.875rem;
    padding: 0.625rem;
    background-color: var(--blanco);
    border-radius: 0.75rem;
}

.recuadro-logo img {
    width: 100%;
    height: var(--logo-institucion-alto);
    object-fit: contain;
}

.institucion h3 {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.institucion h4 {
    margin-bottom: 0.875rem;
    font-size: 0.8125rem;
}

.institucion ul {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.institucion li {
    margin-bottom: 0.5rem;
}

.institucion .lista-catedra {
    padding-left: 1rem;
    list-style: disc;
}

.institucion>.boton {
    margin-top: auto;
}


footer {
    padding: 2rem 1.25rem;
    background-color: var(--texto);
    color: var(--blanco);
}

footer p {
    max-width: var(--ancho-pie);
    margin: 0 auto;
    font-size: 0.8125rem;
}