*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-orange: hsl(23, 99%, 50%);
    --icon-size: 6rem;
    --font-size: x-large;
    --horizontal-margin: 15vw;
    --main-logo-width: 25rem;
    --icon-ui-size: 3em;
    --gap-industria: 8rem;
    --vertical-margin: 5rem;
    --width-productos: 15rem;
    --scroll-margin: 20rem;

}

body {
    min-height: 100vh;
    
}

html, body{
    margin: 0; padding: 0; width: 100%;
    height: 100%;
    overflow-x: hidden !important;
}

/* MENU */

#menu-bar {
    position: sticky;
    top: 0;
    background-color: white;
    box-shadow: rgb(220, 220, 220) 0 0.1rem 2rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#menu-bar ul {
    list-style: none;
    background-color: white;
    font-size: var(--font-size);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    font-weight: bold;
    z-index: 500;
}

#menu-bar ul a {
    text-decoration: none;
    color: var(--primary-orange);
    display: flex;
    justify-content: space-between;
}

#menu-bar ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    width: 100%;
}

#menu-bar ul li:hover {
    background-color: rgb(232, 232, 232);
}

#menu-bar ul li img {
    width: var(--icon-size);
    height: auto;
    aspect-ratio: 1/1;
}

#open-menu {
    fill: var(--primary-orange);
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 2vw;
    width: var(--icon-ui-size);
    display: none;
    z-index: 100;
}

#open-menu:hover {
    cursor: pointer;
}

#close-menu {
    position: absolute;
    top: 0;
    right: 0;
    fill: var(--primary-orange);
    width: var(--icon-ui-size);
    display: none;
    margin-right: 2vw;
    z-index: 999;

}

#close-menu {
    cursor: pointer;
}

.logo-container {
    max-width: var(--main-logo-width);
    min-width: 10rem;
    margin: 0 5rem;
}

#img-logo {
    width: 100%;
}

.nav-buttons {
    display: flex;
    justify-content: space-evenly;
    /* gap: 5rem; */
}



/* MARCADOR */

hr {
    border: none;
    height: 0.5rem;
    background-color: var(--primary-orange);
    margin: 1rem 0;
}

.texto {
    margin: var(--vertical-margin) var(--horizontal-margin);
}

.texto h1 {
    padding-left: 2rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: xx-large;
    font-weight: bold;
    
}

/* SWIPER */

.swiper-container {
    margin: 0 var(--horizontal-margin);
}

.swiper {
  max-width: 50rem;
  min-width: 15rem;
  
  z-index: 5;

}



.swiper-slide img {

    width: 100%;
}

.swiper-button-prev, .swiper-button-next, .swiper-pagination, .swiper-scrollbar {

    color: black;
}

/* VIDEOS */

.video-container {
    display: flex;
    justify-content: center;
    margin: var(--vertical-margin) var(--horizontal-margin);
    min-width: 15rem;
}

.video-container video {
    max-width: 100%;
}

/* TESTIMONIOS */

.container-testimonios {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
}

.container-testimonios button {
    padding: 10px 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    border: none;
    cursor: pointer;
    background-color: rgba(80, 14, 14, 0.323);
    color: white;
    border-radius: 5px;

}

.container-testimonios button:hover {
    background-color: rgba(80, 14, 14, 0.603);
}

.prev {
    left: 25%;
}

.next {
    right: 25%;
}


.testimonio {
    width: 50%;
    display: none;
    background-color: rgb(255, 207, 170);
    text-align: center;
    
}

.testimonio[testimonio-visible="true"] {
    display: block;
}

blockquote p {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: x-large;
    font-weight: bold;
    margin: 1rem;

}

.autor-testimonio {
    font-size: larger;
    font-weight: lighter;
    font-style: italic;
    margin: 1.5rem 0;
    text-align: center;
}

/* INDUSTRIA */

.tipo-industria {
    list-style: none;
    font-size: var(--font-size);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    align-items: center;
    text-align: center;
    gap: var(--gap-industria);
    font-weight: bold;
    margin: 0 10rem;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--primary-orange);

}

.tipo-industria img {

    width: var(--icon-size);
    height: auto;
    aspect-ratio: 1/1;
}



.tipo-industria li {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

/* FOOTER */

footer {
    background-color: var(--primary-orange);
    display: flex;
    justify-content: space-around;
    margin-top: 5rem;
}

footer a {
    text-decoration: none;
    color: White;
    margin: 5rem 0;
}

footer a:hover {
    text-decoration: underline;
}

footer p {
    font-size: large;
    font-weight: lighter;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
    padding: 0;
}


/* PRODUCTOS */


.productos {
    margin: var(--vertical-margin) var(--horizontal-margin);
    display: flex;
    justify-content: space-evenly;
    gap: 3rem;
    scroll-margin-top: var(--scroll-margin);
    padding-left: 3rem;
}

.lista-productos {
    width: 100%;
    min-width: 5rem;
}

.lista-productos ul {
    padding-left: 2rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: var(--font-size);
    
}

.lista-productos li:not(last-child) {
    margin-bottom: 1rem;

}

.lista-productos h1 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: xx-large;
    color: var(--primary-orange);   
    margin-bottom: 2.5rem; 
}

.img-productos {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.imagen-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--width-productos);
}


.img-productos img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
}



/* FORMULARIO */

.container-form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--vertical-margin) var(--horizontal-margin);
}

.container-contacto {
    /* display: flex;
    flex-direction: column;
    justify-content: space-evenly; */
    display: flex;
    justify-content: center;
    padding-left: 0;
}

.contactos {
    display: flex;
    /* gap: 5rem; */
    list-style: none;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

}

.contactos a {
    display: flex;
    gap: 0.5rem;
    text-decoration: none;
    font-size: var(--font-size);
    color: var(--primary-orange);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bolder;
}

.contactos a:hover {
    color: hsl(23, 100%, 43%);
    text-decoration: underline;
}

/* NOSOTROS */

.nosotros h1 {
    color: var(--primary-orange);
}

.nosotros {
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: x-large;
    margin: 0 var(--horizontal-margin);
}

.nosotros ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: start;
}



.center-image {
    display: flex;
    justify-content: center;
    margin: var(--vertical-margin) var(--horizontal-margin);
}

.center-image img {
    width: 50%;
}




/* CLASES ANIMACIONES */

.toRight {
    animation-name: right;
    animation-duration: 0.5s;
}

.toLeft {
    animation-name: left;
    animation-duration: 0.5s;
}



/* MEDIA QUERYS */

@media screen and (max-width: 1415px) {

    #menu-bar ul li img, .tipo-industria img {
        width: calc(var(--icon-size) - 1.5rem);
}

    #img-logo {
        max-width: calc(var(--main-logo-width) - 2rem);

    }

    .tipo-industria {
        gap: calc(var(--gap-industria) - 2.5rem);
    }

    .img-productos img {
        width: calc(var(--width-productos) - 4rem);
    }

    
}

@media screen and (max-width: 1270px) {
    
    :root {
        --font-size: large;
         
    }
}

@media screen and (max-width:1080px) {

    #img-logo {
        margin-top: 0.5rem;
    }

    #open-menu, #close-menu {
        display: block;
    }

    .nav-buttons {
        flex-direction: column;
        position: fixed;
        right: -100%;
        top: 0;
        width: min(15em, 100%);
        transition: right 300ms ease-out;
        text-align: start;
        height: 100%;
        box-shadow: -0.5rem 0 2rem rgba(96, 48, 21, 0.769);
    }

    #menu-bar ul li {
        justify-content: start;
        text-align: start;
        padding: 0;
        
    }

    #menu-bar ul {
        display: flex;
        justify-content: center;
        gap: 2em;
        background-color: rgba(255, 255, 255, 0.726);
        backdrop-filter: blur(2.5rem);


    }

    .nav-buttons[data-visible="true"] {
        right: 0;
    }

    .nav-buttons a {
        width: 100%;
    }

    :root {
        --horizontal-margin: 8vw;
        --scroll-margin: 7rem;
    }

    .tipo-industria {
        margin: 0 4rem;
        gap: calc(var(--gap-industria) - 4.5rem);
    }

    .testimonio {
        width: 90vw;
    }

    .prev {
        left: 5%;
    }

    .next {
        right: 5%;
    }

    .productos {
        padding-left: 1.5rem;
    }

    } 

@media screen and (max-width: 840px) {


    .texto h1 {
        padding-left: 1rem;
    }



    .productos {
        flex-direction: column;
        padding: 0;
    }

    .lista-productos {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
}

@media screen and (max-width: 540px) {

    :root {
        --vertical-margin: calc(5rem - 1rem);
        --horizontal-margin: calc(8vw - 1rem);
    }

    .tipo-industria {
        margin: 0.5rem;
    }

    .tipo-industria img {
        width: calc(var(--icon-size) - 2.5rem);
    }

    .texto h1 {
        font-size: x-large;
    }

    blockquote p {
        font-size: medium;
    }

    .autor-testimonio {
        font-size: small;
    }

    footer p {
        font-size: medium;
    }

    footer a {
        margin: 2rem;
    }

    #open-menu {
        width: 2.5em;
    }

    .container-testimonios button {
    font-size: 2rem;

}

.nosotros h1 {
    font-size: 1.5em;
}

.nosotros h2, h3 {
    font-size: 1.1em;
}

.nosotros p, ul {
    font-size: 0.8em;
}

.imagen-container {
    width: calc(var(--width-productos) - 7rem);
}

.imagen-container img {
    width: calc(var(--width-productos) - 7rem);
}

}



@media screen and (max-width: 415px) {

    
}

/* ANIMACIONES */

/* @keyframes fade {
    1% {opacity: 0;}
} */

@keyframes right {
    from{transform: translateX(100px);}
}

@keyframes left {
    from{transform: translateX(-100px);}
} 

/* @keyframes leftOut {
    to{transform: translateX(100vw);}
} */