@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200;300;400;500;600;700&display=swap');

/* VARIABLES */
:root {
    /* colores */
    --color-principal: #1D29A1;
    --color-oscuro: #222222;
    --color-circulos-header-y-equipo: #535353;
    --color-detalles: #F56F3D;
    --color-texto-principal: #FFFBF6;
    --color-boton: #E5ED78;
    --color-datos-acad-fondo: #FB9357;
    --color-titulo-datos: #FFCF8C;
    --color-lila: #CACFFF;

    --fuente-principal: 'Stack Sans Headline', sans-serif;

    /* medidas */
    --ancho-contenedor: min(75rem, calc(100% - 2rem));
}

/* BASE */
* {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
}

body {
    background-color: var(--color-principal);
    margin: 0;
    font-family: var(--fuente-principal);
    text-align: center;
    text-wrap: pretty;
}

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

a {
    text-decoration: none;
    font-weight: bold;
}

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

figure {
    margin: 0;
}

p span {
    display: block;
}

.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;
}

/* header */
header,
footer {
    background-color: var(--color-oscuro);
    margin: 0;
    padding: 0.6rem 1rem;
}

#logo img {
    width: 100px;
}

.contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu ul {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.menu li {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.menu li a {
    display: block;
    background-color: var(--color-circulos-header-y-equipo);
    color: var(--color-texto-principal);
    font-weight: 200;
    padding: 6px 19px;
    border-radius: 19px;
    transition: background-color 0.2s ease;
}

.menu li:hover {
    transform: translateY(-5px);
}

.menu li a:hover {
    background-color: var(--color-detalles);
    filter: drop-shadow(0px 2px 2px #9D9B9B);
}

/* hero */
.comitente {
    color: var(--color-texto-principal);
    padding-top: 350px;
    padding-bottom: 40px;
    background-image: url("../imagenes/fondo.svg");
    background-repeat: no-repeat;
    background-position: center -55px;
    background-size: 100% auto;
}

.comitente p {
    font-weight: 200;
    font-size: x-large;
}

.comitente img {
    width: 700px;
}

.onu {
    position: absolute;
    top: 120px;
    left: 30px;
    color: var(--color-texto-principal);
    text-align: left;
}

.onu h3 {
    margin: 0;
    font-weight: 400;
}

.onu h4 {
    font-weight: 200;
    margin-top: 3px;
}

/* que es */
.que-es {
    padding: 40px 20px;
    color: var(--color-texto-principal);
}

.que-es h2 {
    font-size: 2rem;
    font-weight: 200;
    margin-bottom: 20px;
}

.que-es p {
    max-width: 700px;
    margin: 0 auto;
    line-height: var(--altura-linea-textos);
    font-weight: 200;
}

/* opciones */
.opciones {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-block: 100px;
}

.opcion {
    background-color: #3D46AD;
    color: var (--color-texto-principal);
    padding: 28px 55px;
    border-radius: 50px;
    font-weight: 200;
    font-size: 1.3rem;
}

/* botones */
.boton,
.boton-link {
    display: inline-block;
    color: var(--color-oscuro);
    padding: 10px 35px;
    border-radius: 30px;
    font-size: 1rem;
}

.boton {
    background-color: var(--color-boton);
    font-weight: 200;
    margin-top: 15px;
    margin-bottom: 25px;
}

/* equipo */
.equipo {
    background-color: var(--color-oscuro);
    padding-top: 80px;
    padding-bottom: 120px;
}

.titulo {
    font-size: 4rem;
    color: var(--color-texto-principal);
    font-weight: 400;
    margin: 0;
}

.numero {
    font-size: 2.5rem;
    color: var(--color-texto-principal);
    font-weight: 200;
    padding-bottom: 70px;
    margin: 0;
}

.equipo-lista {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

/* tarjetas */
.card,
.ficha {
    background-color: var(--color-texto-principal);
    color: var(--color-oscuro);
    padding: 25px;
}

.card {
    border-radius: 40px;
    width: 410px;
}

.card p {
    font-weight: 200;
    font-size: 1.1rem;
    margin: 0 0 20px;
}

.nombre {
    font-weight: 400;
    font-size: 2rem;
    margin: 15px 0 4px;
}

.perfil {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
}

.logo img {
    width: 150px;
}

.logo-fadu img {
    width: 250px;
}

/* dato */
.dato-curioso {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    padding: 1px;
    background-color: var(--color-detalles);
    color: var(--color-texto-principal);
    font-size: 3.5rem;
    font-weight: 200;
}

/* datos acad */
.datos-academicos {
    background-color: var(--color-datos-acad-fondo);
    padding: 40px;
}

.datos-academicos h2 {
    color: var(--color-titulo-datos);
    font-weight: 400;
    padding-top: 15px;
    padding-bottom: 40px;
}

.grilla-academica {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.ficha {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "logo"
        "nombre"
        "detalle"
        "boton";
    grid-template-rows: auto auto 1fr auto;
    justify-items: center;
    row-gap: var(--espaciado-base);
    border-radius: 40px;
    padding: 30px;
}

.ficha .logo {
    grid-area: logo;
    padding: 20px;
}

.academia {
    grid-area: nombre;
    font-weight: 200;
    font-size: 1.7rem;
    margin: 0;

}

.detalle {
    grid-area: detalle;
    margin: 10px 0 0;
    padding: 20px;
}

.detalle li {
    margin-bottom: 8px;
    font-weight: 200;
}

.boton-link {
    grid-area: boton;
    background-color: var(--color-lila);
    font-weight: 300;
    padding-bottom: 10px;
}

/* pie */
footer {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 2rem;
    align-items: center;
    padding: 1.2rem 2rem;
    color: var(--color-texto-principal);
    font-size: 0.8rem;
    font-weight: 200;
    text-align: left;
}

footer p {
    margin: 0;
}