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


:root{
    --color-primario: #000000;
    --color-secundario:#F6F6F6;
    --color-terciario: #22D4FD;
    --color-hover-fondo: #272727;
    --color-hover-borde: #0000FF;

    --fuente-montserrat: 'Montserrat', sans-serif;
    --fuente-krona: 'Krona One', sans-serif;

}



* {
    padding: 0;
    margin:0;
}


.header{/* Estilo del header */
     padding: 2% 0% 0% 15%;/*cada numero equivale  a un valor de margen (arriba, derecha, abajo, izquierda)*/

}

.header__nav{/* Estilo del nav */
    display: flex;
    gap: 80px; /* Espacio entre los enlaces del nav */
}

.header__nav__link{/* Estilo de los enlaces del nav */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-terciario);
    text-decoration: none;
}

.header__nav__link:hover{/* Efecto hover que hace cambio de color del texto */
    color: var(--color-hover-borde);/* Cambia el color del texto al pasar el cursor */
    cursor: pointer; /* Cambia el cursor al pasar sobre el enlace */
}

body{

    box-sizing: border-box;
    background-color: var(--color-primario);
    color: var(--color-secundario);
}

.presentacion {
    padding: 5% 13%;/* Espacio interno del contenedor. Sacamos margin para poner padding. El contenedor es toda la seccion de presentacion en la medida que alejo los elementos del borde se acercan entre si*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px; /* Espacio entre la imagen y el contenido */
}

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

.presentacion__contenido__titulo{
    font-size: 2.25rem;
    font-family: 'Krona One', sans-serif;
    
}

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

.presentacion__contenido__texto{
    font-size: 1.5rem;
    font-family: 'Montserrat', sans-serif;
    margin: 0%;
}

.presentacion__enlaces__subtitulo{/* Estilo del subtitulo agregado */
    font-size: 1.5rem;
    font-family: 'Krona One', sans-serif;
    font-weight: 400;


}

.presentacion__enlaces{/* Estilo del contenedor de los enlaces */
    display: flex;
    justify-content: space-between;
    flex-direction: column; /* Cambiado a columna */
    align-items: center; /* Centrado horizontal */
    gap: 32px; /* Espacio entre los enlaces */
}

.presentacion__enlaces__link{/* Estilo de los enlaces que se comportan como contenedores*/
    display: flex; /* El enlace es un contenedor flex */
    justify-content: center;/* Centrado horizontal */
    gap: 16px;; /* Espacio entre el icono y el texto */
    width: 50%;/* Ancho del boton asignado por figma */
    text-align: center;
    border-radius: 8px;;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;/* Espacio interno (arriba y abajo, izquierda y derecha) */
    text-decoration: none;
    color: var(--color-secundario);
    font-family: 'Montserrat', sans-serif;
    border: var(--color-terciario) 2px solid;
}

.presentacion__enlaces__link:hover{/* Efecto hover que hace cambio de color del borde */
    border-color: var(--color-hover-borde);/* Cambia el color del borde al pasar el cursor */
    background-color: var(--color-hover-fondo); /* Cambia el fondo al pasar el cursor */
    cursor: pointer; /* Cambia el cursor al pasar sobre el enlace */
}

.presentacion__imagen{
    width: 50%;
}

.footer{/* Estilo del footer */
    background-color: var(--color-terciario);
    color:var(--color-primario);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    padding: 24px 0;

}

@media (max-width: 1200px){

    .header{
        padding: 10%;
    }

    .header__nav{
        justify-content: center;
    }

    .presentacion{
        flex-direction: column;
        padding: 5%;
    }

    .presentacion__contenido{
        width: auto;
    }
}