@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --color-principal: hsl(242, 100%, 50%) ;
    --color-secundario: hsl(19, 100%, 50%);
    --color-texto-oscuro: hsl(0, 0%, 0%);
    --color-texto-medio:hsl(0, 0%, 0%) ;
    --color-texto-claro: hsl(240, 7%, 97%);

    --fuente-principal: 'montserrat', sans-serif;
    --fuente-titulos:'montserrat', sans-serif ;

    --ancho-contenedor: min(90rem, calc(100% - 2rem));

    --espaciado-base: 1rem;

    --sombra-caja: 0 4px 4px hsl(0 0% 0% / 25%);
    }

* { 
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
}

body { 
    font-family:var(--fuente-principal);
    margin: 0;
    color: var(--color-texto-medio);
    background-color: var(--color-texto-claro);
    line-height: 1.6;
    text-wrap: pretty;
}

h1, h2, h3, a { 
    font-family: var(--fuente-titulos);
    text-wrap: balance;
    line-height: 1.1;}

h1, h2, h3 { 
    color: var(--color-texto-oscuro);
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: hsl(242, 100%, 50%);
    font-weight: bold;
}

a:hover,
a:focus-visible {
    color:var(--color-secundario);
}

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

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

figure { 
    margin: 0;
}

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

header {
    box-shadow: var(--sombra-caja);
}

#logo img {
    max-height: 60px;
    width: auto;
    padding: .3rem;
    border: solid 3px hsl(242, 100%, 50%);
    border-radius: .5rem;
}

header nav ul { 
    margin-block: 0;
}

header nav a {
    background-color: hsl(240, 7%, 97%);
    color: var(--color-principal);
    display: block;
    width: fit-content;
    padding-block: .5rem;
    padding-inline: var(--espaciado-base);
    border-radius: 5%;
}

header nav a:hover, 
header nav a:focus-visible {
    background-color: hsl(0, 0%, 88%);
    color: var(--color-texto-oscuro);
}

section {
    padding-block: 2rem;

}

section h1, section h2 { 
    border-block-end: 4px solid hsl(242, 100%, 50%);
    background-color: hsl(242, 100%, 95%);
    padding: var(--espaciado-base);
}

.equipo article { 
    background-color: hsl(242, 100%, 95%);
    padding: 1rem;
    border-radius: .25rem;
}

.equipo img {
    border: solid .2em var(--color-principal);
    box-shadow: var(--sombra-caja);
    width: 8em;
    border-radius: 5%;
}

.equipo-texto p {
    font-weight: 700;
}

.equipo-texto a, 
.academicos a {
    background-color: hsl(0, 0%, 88%);
    border-radius: .25rem;
    color: var(--color-principal);
    padding-block: .25rem;
    padding-inline:  1em .75em;
    width: fit-content;
    
}

.equipo-texto a:hover,
.academicos a:hover,
.equipo-texto a:focus-visible,
.academicos a:focus-visible {
    color: var(--color-texto-oscuro);
    background-color: hsl(0, 12%, 77%);
}

.equipo-texto a::after,
.academicos a::after{
    content: ' >';    
}

.academicos img {
    display: block;
    width: 8em;
    aspect-ratio: 1;
    object-fit: contain;
    background-color: hsl(0, 0%, 88%);
    padding: .5em;
    border-radius: .25rem;
    box-shadow: 0 4px 4px transparent;
    transition: box-shadow .6s ease;
}

footer {
    margin-block: 0;
}

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

header .contenedora{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

header nav ul {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.equipo .contenedora,
.academicos .contenedora {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22em, 100%), 1fr));
  gap: 1rem;
}

.equipo article {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.equipo-texto {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 1rem;
}

.equipo-texto>*{
    margin-block: 0;
}

.academicos ul.contenedora>li {
    display: grid;
    gap: 1rem;
    grid-template-rows: auto 1fr auto;
}

.academicos ul.contenedora>li>*,
.academicos ul.contenedora>li h3 {
  margin-block: 0;
}

.academicos ul.contenedora>li a { 
    margin-inline-end: auto;
}

.sr-only { 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.plan-imagen {
    max-width: 600px;
    margin-block: 1rem;
}

.tarjetas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start;
}