@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;1,200;1,300&display=swap');
/* font-family: 'Montserrat', sans-serif; */
@import url('https://fonts.cdnfonts.com/css/fine-serif-hosomozig');
/* font-family: 'Fine Serif Hosomozi__G', sans-serif; */
@import url('https://fonts.cdnfonts.com/css/blueprinted');
/* font-family: 'BluePrinted', sans-serif; */
@import url('https://fonts.cdnfonts.com/css/nayla-free');
/* font-family: 'Nayla Free', sans-serif; */
@import url('https://fonts.cdnfonts.com/css/brown-choco');
/* font-family: 'Brown Choco', sans-serif; */


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}


@media screen and (min-width: 320px) {

/* HEADER */
    .html1{
        background-image: url(/imagenes/pexels-element-digital-1051077.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }

    header div picture{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header div picture img{
        border-radius: 50%;
        margin: 10vh;
        overflow: hidden;
        backdrop-filter: blur(21px) saturate(180%);
        -webkit-backdrop-filter: blur(21px) saturate(180%);
        background-color: #8d8b8a60;
    }

    .presentacion{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: -10vh;
        backdrop-filter: blur(21px) saturate(180%);
        -webkit-backdrop-filter: blur(21px) saturate(180%);
        background-color: #8d8b8a60;
    }

    .presentacion p{
        margin: 1vh;
        font-size: 1em;
        font-weight: bold;
       
    }

    .avion a img{
        width: 8vh;
        margin: 6vh 1vh;
        position: fixed;
        bottom: 1vh;
        right: 0;
        z-index: 1;
        cursor: pointer;
        overflow: hidden;
    }

    header .menu-toggle{
        margin-top: 40vh;
        background-color: rgb(233,78,27);
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        cursor: pointer;
    }

    .bar {
        width: 30px;
        height: 6px;
        background-color: #000000;
        margin: 3px 0;
        transition: 0.4s;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        bottom: 10vh;
        backdrop-filter: blur(21px) saturate(180%);
        -webkit-backdrop-filter: blur(21px) saturate(180%);
        background-color: #8d8b8a60;
        width: 100%;
    }

    .nav-menu li {
        text-align: center;
        list-style: none;
        margin: 2vh;
    }

    .nav-menu a {
        text-decoration: none;
        color: #000000;
        margin: 2vh;
        font-size: 1em;
        font-weight: bold;
    }

    .nav-menu.active {
        display: flex;
        text-align: center;
    }


/* MAIN */
    .somos{
        text-align: center;
    }

    .somos h2{
        margin-top: 3vh;
        padding: 2vh;
    }

    .somos p{
        padding: 2vh;
        font-weight: 300;
        line-height: 1.5;
    }

    .tit{
        text-align: center;
        font-size: 1.3em;
        margin: 3vh;
        padding: 3vh;
        margin-top: 2vh;
        letter-spacing: 0.2em;
    }

    .nuestrosproductos{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .productos div img{
        width: 35vh;
        height: 27vh;
        margin-top: 2vh;
    }

    .productos{
        background-image: linear-gradient(0deg, rgba(56,32,27, 0.2),rgba(56, 32, 27, 0),rgb(255,255,255));
    }

    .destacados{
        background-color: #38201b33;
        padding-bottom: 5vh;
    }

    .desdes{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .destacados h2{
        letter-spacing: 0.2em;
        text-align: center;
        font-size: 2em;
        padding: 5vh;
    }

    .des1{
        width: 40vh;
        margin: 2vh;
        padding: 2vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        margin: 2vh;
        border-radius: 15px;
    }

    .des1 h4{
        text-align: center;
        font-size: 1em;
        margin-top: 5vh;    
    }

    .des1 p{
        text-align: center;
        font-size: 0.9em;
        font-weight: 300;
        line-height: 1.5;
        padding: 1vh;
    }

    .des1 a{
        color: #000000;
        margin: 4vh;
    }

    .destacados div img{
        width: 35vh;
        height: 27vh;
        margin-top: 2vh;
    }

    .productos .desdes img{
        width: 35vh;
        height: 27vh;
        margin-top: 2vh;
    }


    /* Otro html */

    .infogeneral{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap ;
        width: 100%;
        height: auto;
        text-align: center;
        position: relative;

    }

    .infogeneral section{
        width: 90%;
        box-sizing: border-box;
        box-shadow: 10px 10px 10px rgba(5, 5, 5, 0.318);
        margin: 1vh;
        padding: 1vh;
        padding-top: 20px;
        text-align: center;
    }

    .botonvolver{
        position: fixed;
        width: 100%;
        text-align: center;
        padding: px;
        background-color: var(--c2);
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000000ce;
    }


    .botonvolver a{
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        color: #fff;
    }

    .botonvolver img{
        width: 10vh;
    }

    .infogeneral section h3{
        margin: 1px;
    }



    .contenedor-productos .especial h3{
        margin-top: 8vh;
    }

    .infogeneral section p{
        margin: 10px;
        padding: 5px;
    }

    .contenedor-productos {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .contenedor-productos section{
        border-radius: 15px;
    }

    .contenedor-productos p{
        font-size: 0.8em;
        letter-spacing: 0.05vh;
        line-height: 1.2;
    }

    .slide-frame{
        width: 100%;
        height: auto;
        margin: 10px auto 0;
        overflow: hidden;
    }

    .slide-frame ul{
        display: flex;
        padding: 0;
        width: 500%;
        animation: slide 15s infinite;
    }

    .slide-frame li{
        list-style: none;
        margin-top: 40px;
        width: 100%;
    }

    .slide-frame img{
        width: 100%;
    }

    @keyframes slide {
        0% {margin-left: 0%;}
        18% {margin-left: 0%;}

        20% {margin-left: -100%;}
        38% {margin-left: -100%;}

        40% {margin-left: -200%;}
        58% {margin-left: -200%;}

        60% {margin-left: -300%;}
        78% {margin-left: -300%;}

        80% {margin-left: -400%;}
        98% {margin-left: -400%;}

    }

    footer{
        background-image: linear-gradient(0deg, rgb(229,51,10),rgba(233, 79, 27, 0.664),rgba(56,32,27, 0.2));
    }

    .contacto{
        display: flex;
        flex-direction: column;
    }

    .redes{
        display: flex;
        flex-direction: column;
        margin: 2vh;
    }

    .titulofooter{
        font-size: 2em;
        text-align: center;
        margin: 3vh;
    }

    .iconos{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 2vh; 
    }

    .iconos a{
        font-size: 0.9em;
        text-decoration: none;
        color: #000000;
    }

    .iconos img{
        width: 7vh;
        margin-left: 4vh;
        margin-right: 1vh;
    }

    .ubicacion{
        display: flex;
        flex-direction: column; 
        align-items: center;
        margin: 2vh;
    }

    .ubicacion p{
        text-align: center;
        margin: 2vh;
    }

    .ubicacion iframe{
        width: 40vh;
        height: 35vh;
        border-radius: 15px;
    }

    .copy{
        font-size: 0.8em;
        padding: 1vh;
        text-align: center;
        background-color: #38201b33;
    }

    .legales h4{
        text-align: center;
        padding: 3vh;
    }

}




@media screen and (min-width: 768px) {

    .contacto{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .des1{
        width: 90vh;
        height: 150vh;
    }

    .destacados div img{
        width: 60vh; 
        height: 45vh;
    }

    .productos .desdes img{
        width: 60vh;
        height: 45vh;
    }

    .avion a img{
        width: 15vh;
        margin-right: 2vh;
    }

    .logoprincipal img{
        width: 70vh;
    }

    header .menu-toggle{
        margin-top: 60vh;
    }

    .nav-menu {
        bottom: -49vh;

    }
}




@media screen and (min-width: 1024px) {
    
    .contenedor-productos p{
        font-size: 1em;
    }

    .slide-frame{
        width: 45%;
    }

    .especial{
        margin: 3vh;
    }

    .logoprincipal img{
        width: 30%;
        backdrop-filter: blur(21px) saturate(180%);
        -webkit-backdrop-filter: blur(21px) saturate(180%);
        background-color: rgba(158, 154, 154, 0.062);
        background-color: #8d8b8a33;
    }

    .somos p{
        font-size: 1.2em;
        padding: 5vh;
        margin-right: 7vh;
        margin-left: 7vh;
    }

    .avion a img{
        width: 15vh;
        margin-bottom: 7vh;
    }

    .tit h2{
        font-size: 2em;
    }

    .presentacion p{
        font-size: 1.6em;
    }

    .des1{
        width: 60vh;
        height: 100vh;
    }

    .destacados div img{
        width: 50vh;
        height: 38vh;
    }

    .productos .desdes img{
        width: 50vh;
        height: 38vh;
    }

    header{
        height: 120vh;
    }
    
    .nav-menu {
        display: block;
    }

    .nav-menu ul {
        position: absolute;
        bottom: 28vh;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        background-color: rgb(233,78,27);
        padding: 2vh;   
    }

    .nav-menu a{
        font-size: 1.2em;
    }

    header .menu-toggle {
        display: none; 
    }
    
    .slide-frame img{
        height: 80%;
    }
    
}