/* Global Estilo */

.cambio {
    content: "";
    height: 110px;
}


@media screen and (max-width: 900px) {
    body {
        text-align: center;
    }

    h1 {
        font-size: 28px;
        text-align: center;
        padding-top: 25px;
    }

    h2 {
        font-size: 18px;
    }

    .btn_catalogo {
        margin: auto;
    }

    .cambio {
        content: "";
        height: 80px;
    }
}


/* Header ---------------------------------*/

@media screen and (min-width: 900px) {
    .s__1,
    .s__2,
    .s__3 {
        padding: 0 40px;
    }
    
    header {
        position: fixed;
        height: 170px;
        margin: 0 auto 0 auto;
        flex-direction: row;
        transition: all 300ms ease-in-out;
    }

    .div__header {
        width: 95%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: auto;
    }

    .logo {
        grid-column: 2 / 3;
        justify-content: center;
    }

    .logo img {
        width: 230px;
    }

    .navi {
        height: auto;
        overflow: visible;
        margin-bottom: 0;
        margin-top: auto;
    }

    nav ul {
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        margin: 0;
        flex-wrap: nowrap;
        gap: 0;
    }

    nav {
        margin: 20px 0 0 0;
        justify-content: flex-end;
    }

    nav li {
        margin: 0 12px;
    }

    nav a {
        padding: 30px 0px 30px 0px;
        justify-content: flex-end;
        white-space: nowrap;
        display: flex;
        color: var(--oscuro);
        text-decoration: none;
        font-size: 14px;
        text-transform: initial;
        transition: all 200ms ease-in-out;
        transform: scale(1);
        font-weight: 600;
    }

    .lenguaje ul {
        align-items: flex-end;
    }

    .lenguaje li {
        padding: 30px 5px 30px 5px;
    }
}

@media screen and (min-width: 1100px) {
    
    header {
        display: flex;
        height: 110px;
    }

    .div__header {
        width: 80%;
        height: 100%;
    }

    .logo {
        width: 25%;
    }

    .navi {
        width: 60%;
        
        display: block;
        opacity: 1;
        
    }

    nav {
        align-items: center;
        justify-content: flex-end;
    }

    nav ul {
        height: 100%;
        margin: 0;
        gap: 15px;
    }

    nav li {
        margin: 0;
    }

    nav a {
        padding: 10px 0px 20px 0px;
        font-size: 16px;
    }

    .lenguaje {
        width: 30px;
    }
}

/* @media screen and (max-width: 1450px) {

    .s__1,
    .s__2,
    .s__3, 
    .s__4 {
        padding: 0 40px;
    }
} */





@media screen and (max-width: 900px) {
    header {
        width: 100%;
    }
    video {
        width: 130px;
        height: 200px;
    }
}