@font-face {
    font-family: inter-light;
    src: url("../fonts/inter/Inter-Light.ttf");
}

@font-face {
    font-family: inter-medium;
    src: url("../fonts/inter/Inter-Medium.ttf");
}

@font-face {
    font-family: inter-bold;
    src: url("../fonts/inter/Inter-Bold.ttf");
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

body {
    font-family: "Inter-Medium";
    background-color: rgb(255, 255, 255);

}


header {
    display: flex;
    /*me sube los elementos*/
    justify-content: space-between;
    /*me lo pone a la izquierda*/
    align-items: center;
    /*me lo centra en el medio pero a la izquierda*/
    padding: 10px 6%;
    /*me lo centra de arriba aabajo*/
    /*me lo cenntra a los lados*/
    background-color: hsl(0, 0%, 100%);
    

}

header img {
    width: 90px;
    /*ancho para un elemento, proporciona un ancho fijo y preciso*/

}

.imagen-header {
    width: 100%;
    /*ancho del contenedor padre de la img,permite que elemento se ajuste de manera mas flexible a diferente tamaños de pantalla y diseño responsive*/
}

nav a {
    margin-right: 80px;
    /*separa los elementos de lado a lado y del uno al otro*/
    color: rgb(0, 213, 255);
    text-decoration: none;
    font-size: 1.1em;

    /*Expande el icono de los lados*/
}

nav a:last-child {
    margin-right: 0;
    /*Margen a la derecha*/

}

nav a:hover {
    color: rgb(255, 255, 255);
    /*Cambiar a color aqua*/
}

h1 {
    margin-bottom: 50px;
    /*Hace una separación de parrafos de arriba a abajo con pixeles*/
    font-weight: medium;
    text-align: center;
    /*Me centra el titulo en el medio*/
    font-size: 3em;
    /*Me agranda las palablas*/
    font-family: "inter-bold";

}

.seccion-primera-2-columnas {
    margin: 2%
        /*margen a la izquierda y de arriba para abajo*/
        10%
        /*margen a la izquierda*/
        5%
        /*margen a la derecha y de arriba para abajo*/
        10%;
    /*margen a la derecha*/

}

.sectionp{
    font-size: 1em;
    font-family: inter-light;
}

.section-1 {
    display: grid;
    /*me sube el contenedor, me proporciona una cuadricula de una sola columna*/
    align-items: center;
    /*me centra los elementos hijos de un contenedor*/
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    /*me sentra los contenedores divididos en 2 partes, pero uno arriba y otro abajo*/
}

.section-1 img {
    width: 100%;
    /*tamaño de la foto*/
}

.section-1 .izq {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 10%;
    /*me acomodada el texto con porcentaje*/
    gap: 25px;
    /*me separa de arriba abajo el titutlo con el parrafo*/
    font-size: 1em;
    /*Tamaño de fuente de letras*/
    font-family: inter-light;
    line-height: 1.5em;
    /*me crea una linea de separamiento*/

}

.section-1 h2 {
    font-size: 1.8em;
    /*me coloca los titulos y parrafos mas grande*/
    line-height: 1em;
    font-family: inter-bold;

}

.section-1 .der {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-left: 10%;
    /*Se fija a rellenar a la izquierda*/
    padding-right: 10%;
    /*Se fija a rellenar a la derecha*/
    font-size: 1em;
    /*Tamaño de fuente de letras*/
    font-family: inter-ligh;
    line-height: 1.5em;
    /*Altura de linea*/
}

/*Seccion 3 columnas*/

.seccion-segunda-3-columnas {

    margin: 2% 10% 5% 10%;
    /*Establece un margen de cuatro lados*/
}

.seccion-segunda-3-columnas h3 {
    font-size: 2.5em;
    margin-top: 5%;
    /*Establece un tamaño de margen de arriba hacia abajp*/
    margin-bottom: 3%;
    /*Establece un tamaño de margen de abajo hacia arriba*/
    text-align: center;
    font-family: inter-bold;
}

.section-2 {
    display: flex;
    /*Me centra todo llenando todo el espacio que pueda a ver*/
    justify-content: center;
    /*Define como se deben alinear los elementos o flex items que estan adentro de un flex*/
    align-items: center;
    /*Centra y controla la alineacion de todos los elementos de un contenedor*/
    gap: 7%;

}

.section-2 img {
    width: 100%;
    /*Tamaño de imagen*/
}

.section-2 h3 {
    margin-top: 20px;
    /*margen de abajo hacia arriba*/
    margin-bottom: 20px;
    /*msrgen inferior de arriba hacia abajo*/
    font-family: inter-bold;
    font-size: 1.5em;
    text-align: left;
}

.section-2 p {
    font-family: inter-light;
    margin-top: 20px;
    margin-bottom: 20px;

}

.more {
    background-color: rgb(0, 251, 255);
    border: none;
    padding: 5px 5px 5px 5px;
    text-decoration: none;
    color: black;
    transform: skew(30deg);

}

.more:hover {
    color: white;
    background: black;
    box-shadow: 7px 13px 37px rgb(0, 0, 0);
}

footer {
    display: flex;
    /*Rellena los espacios disponibles*/
    align-items: center;
    justify-content: space-between;
    background-color: black;
    padding: 10px 6%;
    height: 300px;
}

footer a {

    color: rgb(0, 213, 255);
    font-size: 1.1em;
    margin-right: 70px;

}

footer a:hover {
    color: azure;
}

footer img {
    width: 90px;
}


/*Estilo de tablet*/

@media (max-width:920px) {

    header img {
        width: 80px;
    }

    nav a {
        margin-right: 25px;
         font-size: 13px;
    }

    h1 {
        font-size: 2em;
    }

    .sectionp {
        font-size: 1em;
        line-height: 1.3em;
    }
    .section-1 h2 {
        font-size: 1.2em;
        line-height: 1em;
        font-family: inter-bold;
    }


    .section-1 .izq {

        font-size: 0.7em;
    }

    .tres p {
        font-size: 0.7em;
    }

    .tres h3 {
        font-size: 0.8em;
    }

    .section-1 .der {

    font-size: 0.7em;

   }

   .seccion-segunda-3-columnas h2 {

    font-size: 2em;
   }

   footer {
    padding: 2% 2%;
   }

   footer a {
    margin-right: 25px;
    font-size: 12px;
   }

}

/*Version movil*/
   @media (max-width:680px){

    header {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 0 10px 10px;

    }

    header img{

        width: 50px;
        margin: 10px;

    }

    .section-1{

        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .reverse{
        flex-direction: column-reverse;
    }

    .section-1 h2{

        font-size: 1.3em;

    }
    
    .section-1 .der{

        display: flex;
        flex-direction: column;
        gap: 25px;
        padding-left: 0;
        padding-right: 10%;
        font-size: 1em;
        font-family: inter-light;
        line-height: 1.5em;
        margin-top: 50px;

    }

    .section-1 .izq{

        display: flex;
        flex-direction: column;
        gap: 25px;
        padding-left: 0;
        padding-right: 10%;
        font-size: 1em;
        font-family: inter-light;
        line-height: 1.5em;
        margin-top: 50px;

    }

    .reverse{
        display: flex;
       flex-direction: column-reverse;
    }
    
    .section-2{

        flex-direction: column;
        align-items: center;
         /* Centra los elementos en el eje horizontal */
         gap: 25px;


    }

    .section-2 h3{

        font-size: 1.3em;

}

    .section-2 p{
        font-size: 1em;

    }

    footer{

        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 25px;

    }
   }