[Proyecto] Haga lo que hicimos

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); /* Fuente Krona y Monserrat Importada desde google fonts*/

:root{
    --color-texto-negrilla: #5BD1D7;
    --color-texto: #004D61;
    --color-fondo: #012933;
    --color-fondoClaro: #348498;
    --color-linkActivo: #FF502F;
    --tamaño-fuente: 16px;
    --fuente-montserrat: "Montserrat", sans-serif;
    --fuente-krona: "Krona One", sans-serif;
}

* { /* este es el reset de la magen y el relleno por defecto dle navegador*/
    margin: 0;
    padding: 0;
}

body{
    box-sizing: border-box;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-size: var(--tamaño-fuente); /* esto es igual a 1rem*/
    box-sizing: border-box;
}

.Encabezado{
    display: flex;
    justify-content: center;
    padding: 1.5% 0 0 0;
}

.Encabezado__menu{
    display: flex;
    justify-content: left;
    gap: 80px;
    width: 62vw;
    font-size: 1.5rem;
    font-family: var(--fuente-montserrat);
    font-weight: 600;
    color: var(--color-texto-negrilla);
}

.Encabezado__menu__link{
    text-decoration: none;
    border: 2.5px solid var(--color-fondo);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.Encabezado__menu__link:link{ /* Link sin visitar */
    color: var(--color-texto);
}

.Encabezado__menu__link:visited{ /* Link visitado */
    color: var(--color-texto);
}

.Presentacion{
    display: flex;
    align-items: center;
    padding: 4% 15%; /* Margen vertical de 10% y horizontal de 19% */
    gap: 80px;
}

.Presentacion__contenido{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.Presentacion__contenido__titulo{
    font-size: 2.25rem;
    font-family: var(--fuente-krona);
}

.Texazul{
    color: var(--color-texto-negrilla);
}

.Presentacion__contenido__texto{
    font-size: 1.5rem;
    font-family: var(--fuente-montserrat);
    font-weight: 400;
}

.Presentacion__enlaces{
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center; /* alineamiento en el eje vertical */
    font-size: 1.5rem;
    font-family: var(--fuente-montserrat);
    font-weight: 600;
    margin: 3px;
}

.Presentacion__enlaces_subtitulo{
    font-size: 1.5rem;
    font-family: var(--fuente-krona);
    font-weight: 400;
}

.Presentacion__enlaces_Link{
    width: 70%;
    /* background: linear-gradient(to bottom right, #22D4FD, #11849e);  Gradiente hacia la esquina derecha entre 2 colores */
    text-align: center;
    padding: 19px 0;
    border: 2.5px solid var(--color-texto-negrilla);
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    justify-content: center; /* alineamiento en el eje horizontal */
    gap: 16px;
}

.Presentacion__enlaces_Link:link{ /* Link sin visitar */
    color: var(--color-texto-negrilla);
}

.Presentacion__enlaces_Link:visited{ /* Link visitado */
    color: var(--color-texto);
}

.Presentacion__enlaces_Link:hover, .Encabezado__menu__link:hover{ /* Pasando el mouse sobre el link */
    color: var(--color-texto-negrilla);
    background-color: var(--color-fondoClaro);
    border-color: var(--color-linkActivo);
    cursor: pointer;
}

.Presentacion__enlaces_Link:active, .Encabezado__menu__link:active{ /* Link presionado */
    color: var(--color-linkActivo);
}

.Presentacion__imagen{
    width: 50%;
}

.PiePagina{
    background-color: var(--color-texto-negrilla);
    color: black;
    text-align: center;
    font-size: 1.5rem;
    font-family: var(--fuente-montserrat);
    font-weight: 400;
    padding: 24px;
}

@media (max-width: 1200px){

    .Encabezado__menu{
        width: 90vw;
        justify-content: center;
        padding: 4% 0 0 0;
    }

    .Presentacion{
        flex-direction: column-reverse;
        padding: 4% 5%;
        gap: 40px;
    }

    .Presentacion__contenido{
        width: auto;
    }

    .Presentacion__imagen{
        width: 60%;
    }

}