@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap'); /*importa el tipo de letra */

:root{
    --colorPrimario: #5f5f9c ;
    --colorSecundario: #6196A6;
    --colorTerciario: #A4CE95;
    --color-hover: #272727;
    --fuenteMonserrat: 'Montserrat', sans-serif;
    --fuenteKrona: 'Krona One', sans-serif; 
     
}

* {             /*restablece las partes por default */
    padding: 0;
    margin:0;
}

body{                   
    /*height: 100vh;    */              /* Altura al 100% */
    box-sizing: border-box;         /* definir cómo se calcula el ancho y alto de los elementos HTML */
    background-color: var(--colorPrimario);    /* Color de fondo */
    color: var(--colorSecundario);               /* color de la letra */
}

.header{
    padding: 2% 0% 0% 15%;
}

.header_menu{
    display: flex;
    gap: 80px ;
}

.header_menu_link{
    font-size: 1.5rem;
    font-family: var(--fuenteMonserrat);
    font-weight: 600;
    color: var(--colorTerciario);
    text-decoration: none;
}

.presentacion {
    /*margin: 10% 15%;   */             /* margen superior e inferior, izquierdo-derecho, crea espacio afuera del elemento */
    padding: 5% 15%; /*Crea espacio adentro del elemento*/
    display: flex;                  /* El texto lo acomoda en bloques, coloca uno al lado de otro */
    align-items: center;            /* Acomo de forma vertical */
    justify-content: space-between; /* Espacio entre los bloques eje horizontal */
    gap:82px;
}

.presentacion__contenido{
    width: 50%;                   /* Ancho del elemento */
    display: flex;
    flex-direction: column;         /* Direcciones de los textos o imágenes ; se usa para horizontal */
    gap: 40px;                      /* Espacio entre los bloques */
}

.presentacion__contenido__titulo{
    font-size: 2.25rem;                /* Tamalo del texto */
    font-family: var(--fuenteKrona);   /*Tipo de letra */
}

.titulo-destaque {
    color:var(--colorTerciario);
}

.presentacion__contenido__texto{
    font-size:  1.5rem;
    font-family: var(--fuenteMonserrat);
}

.presentacion__enlaces{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.presentacion__enlaces__subtitulo{
    color: var(--colorSecundario);
    font-family: var(--fuenteKrona);
    font-size:  1.5rem;
    font-weight: 400;   /* Definir el grosor o peso de la fuente de un texto. */
}

.presentacion__enlaces__link{
    display: flex;
    flex-direction: center;
    justify-content: center;
    width: 50%;
    text-align: center; /* Alineación del texto */
    border-radius: 8px; /* Borde de las esquinas */
    border: 2px solid var(--colorTerciario);  /* Borde-margen */
    font-size:  1.5rem;
    font-weight: 600;
    padding: 16px 0;    /* esponsable de definir la distancia entre un contenido y sus bordes */
    text-decoration: none;  /* Decoracion del texto */
    color: var(--colorSecundario);
    font-family: var(--fuenteMonserrat);
    gap: 10px;
}

.presentacion__enlaces__link:hover{ /* Para poder hacer que el fondo de un boton cambie de color, personaliza una etiqueta */
    background-color: var(--color-hover);
}

.presentacion_imagen{
    width: 50%;
}

.footer{
    font-family: var(--fuenteMonserrat);
    font-size:  1.5rem;
    font-weight: 400;
    background-color: var(--colorTerciario);
    padding:  1.5rem;
    color: var(--colorPrimario);
    display: flex;
    text-align: center; /*centrar el texto*/
    display: flex;
    justify-content: center;
}

@media(max-width: 1200px){
    .presentacion{
        flex-direction: column-reverse; /*acomoda el acomodo de manera contraria */
    }

    .header{
        padding: 10%;
    }

    .header_menu{
        justify-content: center;
        padding: 5%;
    }

    .presentacion__contenido{
        width: auto;
    }
}