@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --color-fondo: hsl(320 23.08% 97.45%);
    --color-texto: hsl(0 0% 20%);
    --color-principal: hsl(334.21 52.2% 40.2%);
    --color-borde-encabezado: hsl(335.76 55.93% 65.29%);
    --color-blanco: hsl(0 0% 100%);
    --color-negro: hsl(0 0% 0%);
    --color-fondo-nav: hsl(337.14 60% 93.14%);
    --color-texto-nav: hsl(335.17 53.37% 31.96%);
    --color-fondo-titulo: hsl(335.45 62.86% 86.27%);
    --color-borde-titulo: hsl(337.17 51.13% 56.67%);
    --color-titulo: hsl(334.29 53.85% 25.49%);
    --color-fondo-imagen: hsl(336.67 45% 92.16%);
    --color-borde-imagen: hsl(335.12 40.59% 80.2%);
    --color-fondo-integrante: hsl(334.29 25% 89.02%);
    --color-borde-tarjeta: hsl(333.33 29.67% 82.16%);
    --color-fondo-boton: hsl(334.62 40.63% 74.9%);
    --color-fondo-institucion: hsl(338.18 26.83% 91.96%);
    --color-texto-pie: hsl(335.29 58.62% 94.31%);

    --fuente-texto: "Open Sans", sans-serif;
    --fuente-titulos: "Plus Jakarta Sans", sans-serif;

    --ancho-contenedor: min(47.5rem, 92%);
    --espaciado: 0.75rem;

    --imagen-minima: 2.625rem;
    --imagen-avatar: 7.8125rem;
    --imagen-alto-maximo: 30rem;
    --alto-caja-logo: 4.375rem;
    --alto-maximo-logo: 3.625rem;
    --ancho-maximo-logo: 90%;
}

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

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-texto);
    font-optical-sizing: auto;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6,
button,
.boton-nav,
.boton-rotulo,
.boton-institucion {
    font-family: var(--fuente-titulos);
    font-optical-sizing: auto;
}

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

a:focus-visible {
    outline: 0.1875rem solid var(--color-negro);
    outline-offset: 0.1875rem;
    box-shadow: 0 0 0 0.375rem var(--color-blanco);
}

.contenedora,
main,
.pie p {
    width: var(--ancho-contenedor);
    margin-inline: auto;
}

.encabezado {
    background-color: var(--color-principal);
    border-bottom: 0.25rem solid var(--color-borde-encabezado);
}

.contenedora {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--espaciado);
    min-height: 3.625rem;
}

.logo img {
    width: var(--imagen-minima);
    aspect-ratio: 1;
    object-fit: contain;
    background-color: var(--color-blanco);
    padding: 0.25rem;
}

.navegacion {
    min-width: 0;
}

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

.boton-nav {
    display: block;
    padding: 0.4375rem var(--espaciado);
    background-color: var(--color-fondo-nav);
    color: var(--color-texto-nav);
    text-decoration: none;
    border-radius: 0.1875rem;
    font-size: 0.875rem;
    font-weight: bold;
}

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

main {
    min-width: 0;
    margin-block: 1.75rem 2.8125rem;
}

main section > h2 {
    margin: 2.1875rem 0 var(--espaciado);
    padding: 0.6875rem 0.8125rem;
    background-color: var(--color-fondo-titulo);
    border-bottom: 0.1875rem solid var(--color-borde-titulo);
    color: var(--color-titulo);
    font-size: 1.125rem;
    font-weight: bold;
}

.presentacion h1 {
    margin: 0 0 var(--espaciado);
    padding: 0.8125rem;
    background-color: var(--color-fondo-titulo);
    border-bottom: 0.1875rem solid var(--color-borde-titulo);
    color: var(--color-titulo);
    font-size: 1.25rem;
    line-height: 1.25;
}

.informacion-proyecto {
    padding: 0.875rem 0.25rem;
}

.informacion-proyecto h2 {
    margin: 0 0 0.625rem;
    color: var(--color-principal);
    font-size: 1.0625rem;
}

.imagen-proyecto {
    margin: 0.9375rem 0 1.875rem;
    padding: var(--espaciado);
    background-color: var(--color-fondo-imagen);
    border: 0.0625rem solid var(--color-borde-imagen);
}

.imagen-proyecto img {
    width: 100%;
    max-height: var(--imagen-alto-maximo);
    object-fit: contain;
    background-color: var(--color-blanco);
}

.imagen-proyecto figcaption {
    padding-top: 0.5625rem;
    color: var(--color-texto-nav);
    font-size: 0.875rem;
    font-style: italic;
}

.imagen-mapa img {
    max-height: none;
}

.imagen-plan {
    width: fit-content;
    max-width: 100%;
    margin: 0.9375rem auto 1.875rem;
}

.imagen-plan img {
    width: auto;
    max-height: var(--imagen-alto-maximo);
    background-color: transparent;
}

section[aria-labelledby="titulo-persona"] .imagen-plan,
section[aria-labelledby="titulo-mvp"] .imagen-plan {
    width: 100%;
}

section[aria-labelledby="titulo-persona"] .imagen-plan img,
section[aria-labelledby="titulo-mvp"] .imagen-plan img {
    width: 100%;
    max-height: none;
}

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

.integrante {
    display: grid;
    grid-template-columns:
        minmax(0, var(--imagen-avatar))
        minmax(0, 1fr);
    gap: var(--espaciado);
    min-width: 0;
    min-height: 11.875rem;
    padding: var(--espaciado);
    background-color: var(--color-fondo-integrante);
    border: 0.0625rem solid var(--color-borde-tarjeta);
}

.foto-integrante {
    align-self: start;
    min-width: 0;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--color-blanco);
}

.foto-integrante img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.info-integrante h3 {
    margin: 0 0 0.25rem;
    color: var(--color-titulo);
    font-size: 1rem;
}

.info-integrante p {
    margin: 0 0 var(--espaciado);
    font-size: 0.875rem;
    line-height: 1.5;
}

.info-integrante .profesion {
    margin-bottom: 0.625rem;
    color: var(--color-principal);
    font-weight: bold;
}

.boton-rotulo,
.boton-institucion {
    display: inline-block;
    padding: 0.375rem 0.5625rem;
    background-color: var(--color-fondo-boton);
    color: var(--color-titulo);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: bold;
    border-radius: 0.1875rem;
}

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

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

.instituciones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaciado);
}

.institucion {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: auto;
    padding: var(--espaciado);
    background-color: var(--color-fondo-institucion);
    border: 0.0625rem solid var(--color-borde-tarjeta);
}

.logo-institucion {
    display: grid;
    place-items: center;
    grid-template-columns: minmax(0, 1fr);
    flex-shrink: 0;
    height: var(--alto-caja-logo);
    margin-bottom: var(--espaciado);
    background-color: var(--color-blanco);
}

.logo-institucion img {
    max-width: var(--ancho-maximo-logo);
    max-height: var(--alto-maximo-logo);
    object-fit: contain;
}

.institucion h3 {
    margin: 0 0 0.625rem;
    font-size: 1rem;
    line-height: 1.3;
}

.institucion h3 a {
    color: var(--color-titulo);
    text-decoration: none;
}

.institucion h3 a:hover,
.institucion h3 a:focus-visible {
    text-decoration: underline;
}

.institucion h4 {
    margin: 0.625rem 0;
    color: var(--color-principal);
    font-size: 0.875rem;
}

.institucion p {
    margin: 0.3125rem 0;
    font-size: 0.875rem;
}

.catedra {
    margin: 0.5rem 0;
    padding-left: 0.9375rem;
    font-size: 0.875rem;
}

.institucion > .boton-institucion {
    align-self: flex-start;
    margin-top: auto;
}

.institucion > p:last-of-type,
.institucion > .catedra {
    margin-bottom: var(--espaciado);
}

.pie {
    padding: 1.125rem 0;
    background-color: var(--color-principal);
    color: var(--color-texto-pie);
}

.pie p {
    margin-block: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (max-width: 40rem) {
    .instituciones {
        grid-template-columns: minmax(0, 1fr);
    }
}