/* CSS DE LA PAGINA PRINCIPAL/HOME */


  /* TIPOGRAFIAS Y FUENTES */


    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@600;700&family=Staatliches&display=swap');


  .poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}



/* ESTILOS FIJOS DE ELEMENTOS PRINCIPALES */


  *{
    margin: 0;
    padding: 0 ;
  scrollbar-width: thin;

  }

  html{
    scroll-behavior: smooth;
  }
  /* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #111;
}

::-webkit-scrollbar-thumb {
  background: #2e2e2e;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #444;
}



  
  body {
     
      font-size: 16px;
      font-family: 'Oswald', sans-serif;
      margin:0;
      padding: 0;
      background-color: #fff;
      box-sizing: border-box;
      scroll-behavior: smooth;
    }
  
    a{
      color: #fff;
      text-decoration: none;
  
    }
  
    ul {
      list-style: none;
      list-style-type: none;
    }
  
  
  h1{
      padding: 0;
      margin: 0;
      font-family: 'Oswald', sans-serif;
  }
  
  header {
    display: flex;
    position: absolute;
    color: #fff;
    left: 0;
    top: 0;
    width: 100%;


  }


/* HEADER */


.navbar {
  display: flex;
  width: 100%;
   justify-content: center;
  font-family: "Poppins", sans-serif;
  margin-top: 3vh;
  z-index: 10;
  flex-wrap: nowrap;
}

.navbar_list{
  margin-top: 1.5vh;
    display: flex;
  padding: 0 15%;
}


.navbar_list li{
  display: flex;
  padding: 0 4vh;
}


.icons_nav{
  display: flex;
  
}

.icons_nav li{  
  margin: 2vh 2.5vh;

  z-index: 10;
}

  
  header {
    list-style: none;
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
}


header li {
    color: white;

    border-radius: 5px;
    transition: all .2s ease;
    
}


header li a {

  font-size: 2vh;

}



header li a:hover {
  opacity: 0.7;

}

.logo{

  width: auto;
  height: 25%;
  display: block;
}


.search-container {
  display: none;
  margin-top: 10px;
  position: relative;
}

  .icon_cart{
      font-size: 2.2vh;
    }

.search-container.show {
  display: block;
}

.search-container input[type="text"] {
  width: 180px;          /* ancho fijo */
  padding: 8px 16px;     /* similar a 1vh 3vh */
  border: 2px solid white;
  border-radius: 12px;
  color: #fff;
  background: transparent !important;
  outline: none;
  position: absolute;
  right: 0px;           /* fijo, no vh */
  top: 0;
}


.search-container input[type="text"]::placeholder {
  color: #fff;
}

/* BANNER */

.banner{
  position: relative;
  overflow: hidden;
  width: 100%;
}

.banner span{
  position: absolute;
  color: #eee;
  font-family: "Poppins", sans-serif;
  font-size: .75rem;
  font-weight: 300;
  top: 41%;
  left: 49.6%;
  transform: translate(-50%, -50%);

}

.logo_banner{
       position: absolute;
    z-index: 10;
    width: auto;
    height: 12%;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}



.btn_banner{
  position: absolute;
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 1.5rem;
  top: 45.2%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 1vh;
  cursor: pointer;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  z-index: 20;

}

.btn_banner:hover{
  background: #fff;
  border: 2px solid #fff;
  color: #111;
}

.banner_img .btn_banner {
    z-index: 20;
}

.banner_img{
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(80%);
   z-index: 1;

}

.banner_img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35); /* Ajustá el 0.35 */
    pointer-events: none;
     z-index: 1;
}

.banner_img2{
  width: 100%;
  height: auto;
  display: none;
}


/* AVISO TIENDA */

.aviso-tienda {
    padding: 10vh 0;
    text-align: center;
  font-family: "Poppins", sans-serif;
    background-color: #111;


}

.aviso-tienda h3 {
    font-size: 3.2vh;  
    padding-top: 5vh;
    margin-bottom: 10px;
    color: #fff;
}

.aviso-tienda p {
    color: #fff;
    font-size: 1.5vh;
    font-weight: 400;
    width: 70%;
    margin: 0 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.5;
}



/* PRODUCTOS */

.productos-div{
  margin: 15vh 8%;
  padding: 0 1.8%;
  overflow: hidden;

}

.productos_container a{
  margin: 0;
  padding: 0;
}


.productos_container{
  margin: 4% 0%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  font-family: "Poppins", sans-serif;
  width: auto;
}

.productos-div h2{
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 6vh;
}

.producto{
  width: 80%;
  height: auto;
  padding: 8% 5%;
  padding-bottom: 5%;
  margin: 5% 2%;
  border-radius: 1vh;
  box-shadow: 0px 0px 20px #aaa;
    cursor: pointer;
  transition: all .5s;
  overflow: hidden;
}

.producto:hover .producto__img{
 transform: scale(1.05);
 object-fit: cover;
 transition: transform .4s ease;

}

.producto__img{
 width: 90%;
 border-radius: .5vh;
  height: auto;
   transition: all .5s ease;
   overflow: hidden;

}

.titulo__producto{
color: #333;
text-align: left;
font-size: 15px;
margin-top: 0.3rem;
}

.precio__producto{
  color: #222;
text-align: left;
font-size: 16px;
margin-top: 0.2rem;


}

.coleccion__producto{
  color: #666;
  text-align: left;
font-size: 12px;
margin-top: 2.3rem;

}

.btn-prod{
  
  font-family: "Poppins", sans-serif;
  background: #000;
   display: flex;
    align-items: center;
    justify-content: space-between;
        box-sizing: border-box;
  border-radius: .5vh;
  width: 100%;
  color: #fff;
  font-size: .9rem;
  padding: .8vh 2.5vh;
  font-weight: 600;
  margin-top: 10px;
  cursor: pointer;
  transition: all .3s ease-in-out;
  outline: none;
    border: 3px solid #000;
}


.btn-prod:hover{
    border: 3px solid #000;

    color: #000;
    background: transparent;
}

.btn-prod:hover  i{
  color: #000;
}



.ben_container{
  display: block;
  width: auto;
  padding: 15% 10%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .9rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 2rem;
}


.ben_container h3{
  font-size: 1.2rem;
}

.ben_container div{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: flex;
}

.ben_container div ul li{
  margin: 0 4vh;
  font-size: .9rem;
}


/* NOSOTROS */


.about_container {
    position: relative;
    display: block ;
    width: auto;
    min-height: 50vh;
    overflow: hidden;
    align-items: center;
    justify-content: center;

    padding: 10% 8%;

    background-color: #000;

    font-family: "Poppins", sans-serif;
    color: #fff;
}

.about_container::before {
    content: "";
    display: block ;
    position: absolute;
    inset: 0;

    background: url("/recAudioVisual/Imagenes/banner_us.webp")
                center center / cover no-repeat;

    filter: blur(5px) brightness(75%);
    transform: scale(1.08);
    z-index: 0;
}

.about_container > * {
    position: relative;
    z-index: 1;
    display: block ;
}

.about_container h1{
     position: relative;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 6vh;
}

.about_container h2{
  color: #fff;
   position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 3.5vh;
  font-weight: 500;
}

.blocks{
     position: relative;
  width: 100%;
  text-align: center;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3%;
  margin: 6% 0%;
}

.blocks div{
  padding: 15% 10%;
  border-radius: 1vh;
  box-shadow: #000 0px 0px 30px;
  background: rgba(0, 0, 0, 0.65);
  justify-content: center;
  display: flex;              
  flex-direction: column; 
}

.about_container h3{
  margin: 7% 0;
  font-weight: 400;
  font-size: 2vh;
}

/* CONTACTO */

.contacto_container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;

    display: flex;

    background-color: #000;
}

.contacto_container::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("/recAudioVisual/Imagenes/imagen_plt.png")
                center center / cover no-repeat;

    filter: blur(6px);
    transform: scale(1.08);

    z-index: 0;
}

.contacto_container > * {
    position: relative;
    z-index: 1;
}

.contacto_container h1{
    position: absolute;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 6vh;

}


.form_container{
  position: relative;
  padding: 6% 10%;
  z-index: 10;
  width: 70%;
  max-width: 1400px; 
}

/* Fila nombre + email */
.form_row{
  display: flex;
  gap: 60px;
  margin-bottom: 30px;
  margin-top: 15vh;
}

/* Contenedor individual */
.form_sp{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* Texto arriba */
.form_sp span{
  font-size: 12px;
  color: #bbb;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
}

/* Inputs y textarea */
.form_sp input,
.form_sp textarea{
  width: 100%;
  padding: 12px 16px;
  border: 2px solid white;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-family: "Poppins", sans-serif;
  outline: none;
  transition: 0.2s ease;
}

/* Textarea altura */
.form_sp textarea{
  min-height: 150px;
  margin-bottom: 7vh;
  resize: vertical;
}

/* Placeholder */
.form_sp input::placeholder,
.form_sp textarea::placeholder{
  color: #bbb;
}

/* Focus */
.form_sp input:focus,
.form_sp textarea:focus{
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,0.3);
}


.form_container button{
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: 1.2vh 8vh;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;

}

.form_container button:hover{
  background: #fff;
  border: 3px solid #fff;
  color: #111;
}


.contacto_container::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* controla la opacidad acá */
  z-index: 1;
}

/* ENVÍOS */

.envios_container{
  display: block;
  font-family: "Poppins", sans-serif;
  margin: 16% 10%;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #000;
}

.envios_block h1{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 6vh;
    margin-bottom: 5vh;
}

.envios_block h3{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 2.5vh;
    font-weight: 400;
    margin-bottom: 5vh;
    width: 90%;
}
.envios_block  a{

  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 2rem;
  border: 3px solid #000;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #000;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 10vh;
  cursor: pointer;
  transition: all .3s ease;

}

.envios_block  a:hover{
  background: #000;
  border: 3px solid #000;
  color: #fff;
}




/* CUIDADOS DEL MATE */

.info_container{
  display: block;
  font-family: "Poppins", sans-serif;
  margin: 10% 6%;
  width: 72%;
  padding: 15vh 15vh;
  border-radius: 1.5vh;
    background-color: #212121;
    color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: #000 0px 0px 30px;

  
}

.info_block h1{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 6vh;
    margin-bottom: 5vh;
}

.info_block h3{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 2.5vh;
    font-weight: 400;
    margin-bottom: 5vh;
    width: 90%;
}
.info_block  a{

  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 2rem;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 10vh;
  cursor: pointer;
  transition: all .3s ease;

}

.info_block  a:hover{
  background: #fff;
  border: 3px solid #fff;
  color: #000;
}



/* FOOTER */


      footer{
        background-color: #222222;
        padding-bottom: 30px;
        padding-top: 10vh;

      }

      
        .footer-nav{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          margin-left: 10vh;
          justify-content: center;
           text-align: center;
        }
        .footer-nav div{
        margin: 8vh 10vh;  
        }



        .footer-nav h1{
          font-family: "Poppins", sans-serif;
          text-align: center;
          color: #fff;
          font-size: 17px;
          font-weight: bold;
         padding-bottom: 3vh;

        }



        .footer-nav ul li{
          margin: 2vh 0;
          font-family: Jost;
        }
          
        .footer-nav ul li a:hover{
           color: #fff;

          }

          footer p{
            display:flex ;
            font-size: 20px;
            font-family: "Poppins", sans-serif;
            color: #fff;
            margin-top: 2vh;
          }

 
          .line{
            background-color: #777;
             padding: 8% 1px;
             margin-left: 15vh;
             display: block;
          }

          .footer-container{
            display: flex;
             margin: 0 10vh;
          }

          span{
            font-weight: bold;
            color: #fff;
            margin-left: 1vh;
          }
          

          
        #img-footer{
           height: 4vh;
        }


        #navigate{
          padding-left: 10px ;
        }

        .w-c-u{

          display: grid;
          grid-template-columns: repeat(3, 1fr);
          margin: 0 23vh;
        align-items: center;
          justify-content: center;
          text-align: center;
        }

        .w-c-u div{
          background: #191919;
          box-shadow: #000 -7px 10px 30px;
          padding: 6vh;
          border-radius: 3vh;
        }

        .copyright{
          font-size: 12px;
          font-family: "Poppins", sans-serif;
          display: flex;
          color: #777;
          font-weight: normal;
          margin-top: 5vh;
          margin-left: 10vh;
          user-select: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
        }


/* HEADER RESPONSIVE */

        @media (max-width: 1250px){ 


.navbar {
  display: flex;
  width: 100%;
   justify-content: center;
  font-family: "Poppins", sans-serif;
  margin-top: 3vh;
}

.navbar_list{
  margin-top: 1.5vh;
    display: flex;
  padding: 0 20vh;
}


.navbar_list li{
  display: flex;
  padding: 0 4vh;
}


.icons_nav{
  display: flex;
}

.icons_nav li{  
  margin: 1.8vh 2.5vh;
  font-size: 1.5vh;
  z-index: 10;
}

  
  header {
    list-style: none;
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
}


header li {
    color: white;

    border-radius: 5px;
    transition: all .2s ease;
    
}


header li a {

  font-size: 2vh;

}



header li a:hover {
  opacity: 0.7;

}

.logo{

  width: auto;
  height: 25%;
  display: block;
}


.search-container {
  display: none;
  margin-top: 10px;
  position: relative;
}

.search-container.show {
  display: none;
}

.search-container input[type="text"] {
  width: 180px;          /* ancho fijo */
  padding: 8px 16px;     /* similar a 1vh 3vh */
  border: 2px solid white;
  border-radius: 12px;
  color: #fff;
  background: transparent !important;
  outline: none;
  position: absolute;
  right: 0px;           /* fijo, no vh */
  top: 0;
}


.search-container input[type="text"]::placeholder {
  color: #fff;
}

        }

     @media (max-width: 1100px){ 


.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 2rem;
}


.ben_container h3{
  font-size: 1.2rem;
}

.ben_container div{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: flex;
}

.ben_container div ul li{
  margin: 0 4vh;
  font-size: .7rem;
}


.navbar_list{
  margin-top: 1.5vh;
    display: flex;
  padding: 0 10vh;
}

     }


          @media (max-width: 950px){ 



.navbar_list{
  margin-top: 1.5vh;
    display: flex;
  padding: 0 5vh;
}

     }


        @media (max-width: 900px){ 

.navbar_list{
  margin-top: 1.5vh;
    display: flex;
  padding: 0 10vh;

}

.navbar_list li{
  display: flex;
  padding: 0 2vh;
}

     }

      @media (max-width: 800px){ 

.navbar_list{
  margin-top: 1.5vh;
    display: flex;
  padding: 0 4vh;
}

.navbar_list li{
  display: flex;
  padding: 0 2vh;
}

.logo{
margin-top: .5vh;
  width: auto;
  height: 20%;
  display: block;
}

.icons_nav li{  
  margin: 1.5vh 1.5vh;
  z-index: 10;
}




.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 1.5rem;
}


.ben_container h3{
  font-size: 1rem;
}

.ben_container div{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: flex;
}

.ben_container div ul li{
  margin: 0 3vh;
  font-size: .7rem;
}

     }

        @media (max-width: 685px){ 

          
.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 1.5rem;
}


.ben_container h3{
  font-size: 1rem;
}

.ben_container div{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: flex;
}

.ben_container div ul li{
  margin: 0 1vh;
  font-size: .6rem;
}

.navbar_list{
  margin-top: 1vh;
    display: flex;
  padding: 0 4vh;

}

.navbar_list li{
  display: flex;
  padding: 0 2vh;
}

.logo{

  width: auto;
  height: 15%;
  display: block;
}


header li a {

  font-size: 1.5vh;

}

.icons_nav li{  
  margin: .5vh 1.5vh;
  z-index: 10;
  font-size: 1.5vh;
}


     }


            @media (max-width: 575px){ 

                      
.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 1rem;
}


.ben_container h3{
  font-size: 1rem;
}

.ben_container div{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: block;
}

.ben_container div ul li{
  margin: 1vh 1vh;
  font-size: .6rem;
}

  .navbar {
  display: flex;
  width: 100%;
   justify-content: center;
  font-family: "Poppins", sans-serif;
  margin-top: 2vh;
 
}

.navbar_list{
  margin-top: .7vh;
    display: flex;
  padding: 1.5vh 1vh;
  gap: .5rem;
 
}

.navbar_list li{
  display: flex;
  padding: 0 1.5vh;
}

.logo{

  width: auto;
  height: 12%;
  display: block;
  margin-top: 1.6vh;
}


header li a {

  font-size: 1.5vh;

}

.icons_nav li{  
  margin: 1.7vh 1vh;
  z-index: 10;
  font-size: 1.5vh;
}


     }

         @media (max-width: 485px){ 


          
                      
.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: .6rem;
}


.ben_container h3{
  font-size: 1rem;
}

.ben_container div{
  display: block;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: block;
}

.ben_container div ul li{
  margin: 1vh 0vh;
  font-size: .6rem;
}
             
              .logo_banner{
                 display: none;
             }

             .banner span{
                display: none;
             }


        .banner_img{
          display: none;
        }

        .banner_img2{
          display: block;
        }

        .search-container {
          display: none;
          margin-top: 0px;
          position: relative;
        }

        .search-container.show {
          display: block;
        }

        .search-container input[type="text"] {
          width: 120px;          /* ancho fijo */
          padding: 3px 16px;     /* similar a 1vh 3vh */
          border: 2px solid white;
          border-radius: 6px;
          color: #fff;
          background: transparent !important;
          outline: none;
          position: relative;
          right: 0px;           /* fijo, no vh */
          top: 0;
          font-size: 10px;
        }


        .search-container input[type="text"]::placeholder {
          color: #fff;
        }

          .navbar {
          display: flex;
          justify-content:space-between;
          margin-top: 3vh;
          position: relative;

        }

        .navbar_list{
            display: none;
        }



        .logo{

          width: auto;
          height: 17%;
          display: flex;
          margin-left: 5vh;
        }


        header li a {

          font-size: 2vh;

        }

        .icons_nav{
          display: flex;
          margin-right: 5vh;
        }

        .icons_nav li{  
          margin: .7vh 1vh;
          z-index: 10;
          font-size: 1.5vh;
        }


     }

      @media (max-width: 400px){ 

        
          
                      
.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: .6rem;
}


.ben_container h3{
  font-size: 1rem;
}

.ben_container div{
  display: block;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: block;
}

.ben_container div ul li{
  margin: 1vh 0vh;
  font-size: .6rem;
}

          .search-container {
  display: none;
  margin-top: 0px;
  position: relative;
}

.search-container.show {
  display: block;
}

.search-container input[type="text"] {
  width: 90px;          /* ancho fijo */
  padding: 3px 16px;     /* similar a 1vh 3vh */
  border: 2px solid white;
  border-radius: 6px;
  color: #fff;
  background: transparent !important;
  outline: none;
  position: relative;
  right: 0px;           /* fijo, no vh */
  top: 0;
  font-size: 10px;
}

      }


       @media (max-width: 350px){ 

.search-container {
  display: none;
  margin-top: 0px;
  position: relative;
}

.search-container.show {
  display: block;
}

.search-container input[type="text"] {
  width: 70px;          /* ancho fijo */
  padding: 3px 12px;     /* similar a 1vh 3vh */
  border: 2px solid white;
  border-radius: 6px;
  color: #fff;
  background: transparent !important;
  outline: none;
  position: relative;
  align-items: center;
  font-size: 8px;
}

      }

            @media (max-width: 330px){ 

    .icon_search{
      display: none;
    }

    .icon_cart{
      font-size: 2vh;
    }

    .logo{
      height: 15%;
      margin-left: 2vh;
    }

     .icons_nav li{  
          margin: .7vh 1vh;
          z-index: 10;
          font-size: 2vh;
        }

       .icons_nav{
      display: flex;
      margin-right: 2vh;
    }

.search-container {
  display: none;
  margin-top: 0px;
  position: relative;
}

.search-container.show {
  display: block;
}

.search-container input[type="text"] {
  width: 70px;          /* ancho fijo */
  padding: 3px 12px;     /* similar a 1vh 3vh */
  border: 2px solid white;
  border-radius: 6px;
  color: #fff;
  background: transparent !important;
  outline: none;
  position: relative;
  align-items: center;
  font-size: 6px;
}
  }


             @media (max-width: 250px){ 

  .search-container {
  display: none;
  margin-top: 0px;
  position: relative;
}

.search-container.show {
  display: none;
}

    .icon_cart{
      font-size: 1.5vh;
    }

    .logo{
      height: 12%;
    }

    .icons_nav{
      display: flex;
      margin-right: 3vh;
      margin-top: .5vh;
    } 

    .icons_nav li{  
      font-size: 1vh;
    }

            }



/* BANNER RESPONSIVE */


    @media (max-width: 1300px){
    .btn_banner{
      padding: .3rem 1.5rem;
      font-size: .9rem;
        top: 46.5%;
      }
    }


    @media (max-width: 1200px){
    .btn_banner{
      padding: .3rem 1.2rem;
      font-size: .8rem;
      top: 46%;
      }
    }

    @media (max-width: 1100px){
    .btn_banner{
      padding: .3rem 1.2rem;
      font-size: .7rem;
      top: 47%;
      }
    }

     @media (max-width: 950px){
    .btn_banner{
      padding: .3rem 1.2rem;
      font-size: .6rem;
      
      }
    }

     @media (max-width: 900px){
    .btn_banner{
      padding: .25rem 1rem;
      font-size: .6rem;
      
      }

      .banner span{
        font-size: .6rem;
      }
    }

      @media (max-width: 800px){
    .btn_banner{
      padding: .25rem .8rem;
      font-size: .5rem;
         top: 48%;
      
      }

         .banner span{
        font-size: .5rem;
      }
    }

        @media (max-width: 600px){
    .btn_banner{
      padding: .25rem .6rem;
      font-size: .5rem;
      top: 48%;
      }
    }


      @media (max-width: 485px){
    .btn_banner{
      z-index: 10;
      padding: .5rem 1.5rem;
      font-size: .9rem;
      top: 15%;
      left: 0;
      margin-left: 15vh;
      
      }
    }

       @media (max-width: 430px){
    .btn_banner{
      padding: .5rem 1.5rem;
      font-size: .7rem;
      top: 15%;
      left: 0;
      margin-left: 13vh;
      
      }
    }

       @media (max-width: 330px){
    .btn_banner{
      padding: .5rem 1rem;
      font-size: .6rem;
      top: 20%;
      left: 0;
      margin-left: 9vh;
      
      }
    }

       @media (max-width: 280px){
    .btn_banner{
      padding: .4rem 1rem;
      font-size: .6rem;
      top: 22%;
      left: 0;
      margin-left: 9vh;
      
      }
    }

     @media (max-width: 250px){
    .btn_banner{
      font-size: .5rem;
      top: 20%;
      left: 0;
      margin-left: 8vh;
      
      }
    }

     @media (max-width: 220px){
    .btn_banner{
      padding: .3rem .7rem;
      font-size: .5rem;
      top: 22%;
      left: 0;
      margin-left: 7.5vh;
      
      }
    }

        @media (max-width: 190px){
    .btn_banner{
      padding: .3rem .7rem;
      font-size: .4rem;
      top: 25%;
      left: 0;
      margin-left: 6.5vh;
      
      }
    }


    /* PRODUCTOS RESPONSIVE*/

    @media (max-width: 600px){

.productos-div{
  margin: 10vh 8%;
  padding: 0 4%;
  overflow: hidden;

}

.productos_container a{
  margin: 0;
  padding: 0;
}


.productos_container{
  margin: 12% 0%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  text-align: center;
  font-family: "Poppins", sans-serif;
  width: auto;
  column-gap: 4%;
  justify-items: center;

}

.productos-div h2{
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 4.5vh;
  text-align: center;
}

.producto{
  width: 80%;
  height: auto;
  padding: 8% 5%;
  padding-bottom: 5%;
  margin: 5% 2%;
  margin-bottom: 15%;
  border-radius: 1vh;
  box-shadow: 0px 0px 20px #aaa;
  overflow: hidden;
}

.producto__img{
 width: 90%;
  height: auto;


}

.titulo__producto{
color: #333;
text-align: left;
font-size: 15px;
margin-top: 0.3rem;
}

.precio__producto{
  color: #222;
text-align: left;
font-size: 14px;
margin-top: 0.2rem;


}

.coleccion__producto{
  color: #666;
  text-align: left;
font-size: 12px;
margin-top: 2.3rem;

}

               
.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 1.5rem;
}


.ben_container h3{
  font-size: 1rem;
}

.ben_container div{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: block;
}

.ben_container div ul li{
  margin: 1vh 1vh;
  font-size: .6rem;
}

    }

     @media (max-width: 460px){

      

.productos-div{
  margin: 10vh 2%;
  padding: 0 4%;
  overflow: hidden;

}

.productos_container a{
  margin: 0;
  padding: 0;
}


.productos_container{
  margin: 12% 0%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  text-align: center;
  font-family: "Poppins", sans-serif;
  width: auto;
  column-gap: 4%;

}

.productos-div h2{
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 4vh;
}

.producto{
  width: 85%;
  height: auto;
  padding: 8% 5%;
  padding-bottom: 5%;
  margin: 5% 2%;
  margin-bottom: 15%;
  border-radius: 1vh;
  box-shadow: 0px 0px 20px #aaa;
  overflow: hidden;
}

.producto__img{
 width: 90%;
  height: auto;


}

.titulo__producto{
color: #333;
text-align: left;
font-size: 15px;
margin-top: 0.3rem;
}

.precio__producto{
  color: #222;
text-align: left;
font-size: 14px;
margin-top: 0.2rem;


}

.coleccion__producto{
  color: #666;
  text-align: left;
font-size: 12px;
margin-top: 2.3rem;

}


          
                      
.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 1rem;
}


.ben_container h3{
  font-size: .8rem;
}

.ben_container div{
  display: block;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: block;
}

.ben_container div ul li{
  margin: 1vh 0vh;
  font-size: .6rem;
}

    }


     @media (max-width: 350px){

      .btn-prod{

  font-size: .7rem;
 
}

.productos-div{
  margin: 10vh 2%;
  padding: 0 4%;
  overflow: hidden;

}

.productos_container a{
  margin: 0;
  padding: 0;
}


.productos_container{
  margin: 12% 0%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  text-align: center;
  font-family: "Poppins", sans-serif;
  width: auto;
  column-gap: 4%;

}

.productos-div h2{
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 3.2vh;
}

.producto{
  width: 85%;
  height: auto;
  padding: 8% 5%;
  padding-bottom: 5%;
  margin: 5% 2%;
  margin-bottom: 15%;
  border-radius: 1vh;
  box-shadow: 0px 0px 20px #aaa;
  overflow: hidden;
}

.producto__img{
 width: 90%;
  height: auto;


}

.titulo__producto{
color: #333;
text-align: left;
font-size: 12px;
margin-top: 0.3rem;
}

.precio__producto{
  color: #222;
text-align: left;
font-size: 14px;
margin-top: 0.2rem;


}

.coleccion__producto{
  color: #666;
  text-align: left;
font-size: 12px;
margin-top: 2.3rem;

}


          
                      
.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 1rem;
}


.ben_container h3{
  font-size: .8rem;
}

.ben_container div{
  display: block;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: block;
}

.ben_container div ul li{
  margin: 1vh 0vh;
  font-size: .6rem;
}

    }


       @media (max-width: 290px){

.productos-div{
  margin: 10vh 2%;
  padding: 0 4%;
  overflow: hidden;

}

.productos_container a{
  margin: 0;
  padding: 0;
}


.productos_container{
  margin: 12% 0%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  text-align: center;
  font-family: "Poppins", sans-serif;
  width: auto;
  column-gap: 4%;

}

.productos-div h2{
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 2.7vh;
  margin-left: 1vh;
}

.producto{
  width: 85%;
  height: auto;
  padding: 8% 5%;
  padding-bottom: 8%;
  margin: 5% 2%;
  margin-bottom: 15%;
  border-radius: 1vh;
  box-shadow: 0px 0px 20px #aaa;
  overflow: hidden;
}

.producto__img{
 width: 90%;
  height: auto;


}

.titulo__producto{
color: #333;
text-align: left;
font-size: 12px;
margin-top: 0.3rem;
}

.precio__producto{
  color: #222;
text-align: left;
font-size: 12px;
margin-top: 0.2rem;


}

.coleccion__producto{
  color: #666;
  text-align: left;
font-size: 12px;
margin-top: 2.3rem;

}


          
                      
.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 1rem;
}


.ben_container h3{
  font-size: .6rem;
}

.ben_container div{
  display: block;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: block;
}

.ben_container div ul li{
  margin: 1vh 0vh;
  font-size: .6rem;
}

    }

     @media (max-width: 240px){

      .btn-prod{

  font-size: .48rem;
 
}

.productos-div{
  margin: 8vh 2%;
  padding: 0 4%;
  overflow: hidden;

}

.productos_container a{
  margin: 0;
  padding: 0;
}


.productos_container{
  margin: 12% 0%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  text-align: center;
  font-family: "Poppins", sans-serif;
  width: auto;
  column-gap: 4%;

}

.productos-div h2{
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 2.2vh;
  margin-left: 1vh;
}

.producto{
  width: 85%;
  height: auto;
  padding: 8% 5%;
  padding-bottom: 8%;
  margin: 5% 2%;
  margin-bottom: 15%;
  border-radius: 1vh;
  box-shadow: 0px 0px 20px #aaa;
  overflow: hidden;
}

.producto__img{
 width: 90%;
  height: auto;

}

.titulo__producto{
color: #333;
text-align: left;
font-size: 10px;
margin-top: 0.3rem;
}

.precio__producto{
  color: #222;
text-align: left;
font-size: 10px;
margin-top: 0.2rem;


}

.coleccion__producto{
  color: #666;
  text-align: left;
font-size: 8px;
margin-top: 2.3rem;

}


          
                      
.ben_container{
  display: block;
  width: auto;
  padding: 15% 0%;
  color: #aaa;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .8rem;
    align-items: center;
    text-align: center;
     left: 50%;
 
  overflow: hidden;
}

.ben_container h2{
  color: #888;
  font-size: 1rem;
}


.ben_container h3{
  font-size: .6rem;
}

.ben_container div{
  display: block;
  align-items: center;
  justify-content: center;
  margin-top: 3vh;
  text-align: center;

}


.ben_container div ul{
  text-align: center;
      align-items: center;
    display: block;
}

.ben_container div ul li{
  margin: 1vh 0vh;
  font-size: .6rem;
}

    }


    @media (max-width: 200px){



.productos-div h2{
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 1.6vh;
  margin-left: 1vh;
}


    }




    /* NOSOTROS RESPONSIVE*/

  @media (max-width: 900px){

.about_container{
  display: block;
    font-family: "Poppins", sans-serif;
  grid-template-columns: repeat(1, 1fr);
  padding: 25% 8%;
  padding-bottom: 25%;
  align-items: center;
  justify-content: center;
  color: #fff;
}


.about_container::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: url("/recAudioVisual/Imagenes/banner_us2.webp?=v2") center center / cover no-repeat;
    filter: blur(0px) brightness(100%);
    transform: scale(1.08);
    z-index: 0;
}



.about_container h1{
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 6vh;
}

.about_container h2{
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 3.5vh;
  font-weight: 500;
}

.blocks{
  width: 100%;
  text-align: center;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 5%;
  margin: 6% 0%;
}

.blocks div{
  padding: 10% 15%;
  border-radius: 1vh;
  box-shadow: #000 0px 0px 30px;
  justify-content: center;
  display: flex;              
  flex-direction: column; 
}

.about_container h3{
  margin: 7% 0;
  font-weight: 400;
  font-size: 2.2vh;
}
}

@media (max-width: 600px){
.about_container h1{

  font-size: 5vh;
}

.blocks{
  width: 100%;
  text-align: center;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 5%;
  margin:20% 0%;
}

.about_container h3{
  margin: 7% 0;
  font-weight: 400;
  font-size: 1.8vh;
}

.about_container h2{
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 3vh;
  font-weight: 500;
}

}

@media (max-width: 360px){
.about_container h1{
text-align: center;
  font-size: 4vh;
}

.blocks{
  width: 100%;
  text-align: center;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 5%;
  margin:20% 0%;
}

.about_container h3{
  margin: 7% 0;
  font-weight: 400;
  font-size: 1.5vh;
}

.about_container h2{
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 2.5vh;
  font-weight: 500;
}

}

@media (max-width: 290px){
.about_container h1{
text-align: center;
  font-size: 3vh;
}

.blocks{
  width: 100%;
  text-align: center;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 5%;
  margin:20% 0%;
}

.about_container h3{
  margin: 7% 0;
  font-weight: 400;
  font-size: 1.5vh;
}

.about_container h2{
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 2.5vh;
  font-weight: 500;
}

}


@media (max-width: 240px){

  .about_container{
  display: block;
    font-family: "Poppins", sans-serif;
  grid-template-columns: repeat(1, 1fr);
  padding: 25% 8%;
  padding-bottom: 25%;
  align-items: center;
  justify-content: center;
  background-color: #212121;
  color: #fff;
}
.about_container h1{
text-align: center;
  font-size: 2vh;
}

.blocks{
  width: 100%;
  text-align: center;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 5%;
  margin:20% 0%;
}

.about_container h3{
  margin: 7% 0;
  font-weight: 400;
  font-size: .8vh;
}

.about_container h2{
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;
}

}
/* FOOTER RESPONSIVE */


        @media (max-width: 1130px){
 .footer-nav{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          margin-left: 0vh;
          justify-content: center;
           text-align: center;
        }
        
        .footer-nav div{
        margin: 8vh 10vh;  
        }
}




@media (max-width: 1060px){

       .footer-nav{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          margin-left: 0vh;
          justify-content: center;
           text-align: center;
        }
        
        .footer-nav div{
        margin: 8vh 10vh;  
        }
}


@media (max-width: 1000px){
   .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          justify-content: center;
           text-align: center;
        }
.line{
          display: none;
        }
}


@media (max-width: 845px){
  .line{
          display: none;
        }
            .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          justify-content: center;
           text-align: center;
        }

}

@media (max-width: 685px){
     .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          margin-top: 10vh;
          justify-content: center;
           text-align: center;
        }

        .line{
          display: none;
        }

        .NAVIGATE{
          margin: 0
        }
          
          .footer-container{
            display: block;
             margin: 0 10vh;
          }
        
       .footer-nav div{
        margin: 5vh 10vh;  
        }
}

@media (max-width: 450px){
  .line{
          display: none;
        }
            .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          justify-content: center;
           text-align: center;
        }

  .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          margin-top: 10vh;
          justify-content: center;
           text-align: center;
        }

        .line{
          display: none;
        }

        .NAVIGATE{
          margin: 0
        }
          
          .footer-container{
            display: block;
             margin: 0 2vh;
          }
        
       .footer-nav div{
        margin: 5vh 10vh;  
        }

        .container-fp{
  text-align: center;
           align-items: center;
           justify-content: center;
        }

        
            footer p{
            font-size: 15px;
            text-align: center;
            justify-content: center;
            margin-top: 5vh;
          }

      #img-footer{
           height: 4vh;
         
        }
}

@media (max-width: 390px){
 .line{
          display: none;
        }
            .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          justify-content: center;
           text-align: center;
        }

   .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          margin-top: 10vh;
          justify-content: center;
           text-align: center;
        }

        .line{
          display: none;
        }

        .NAVIGATE{
          margin: 0
        }
          
          .footer-container{
            display: block;
             margin: 0 2vh;
          }
        
       .footer-nav div{
        margin: 5vh 10vh;  
        }

        .container-fp{
  text-align: center;
           align-items: center;
           justify-content: center;
        }

        
            footer p{
            font-size: 15px;
            font-family: Jost;
            text-align: center;
            margin-top: 5vh;
          }

      #img-footer{
           height: 4vh;
         
        }
}

@media (max-width: 320px){


        .line{
          display: none;
        }
            .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          justify-content: center;
           text-align: center;
        }

 .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          margin-top: 10vh;
          justify-content: center;
           text-align: center;
        }

        .line{
          display: none;
        }

        .NAVIGATE{
          margin: 0
        }
          
          .footer-container{
            display: block;
             margin: 0 2vh;
          }
        
       .footer-nav div{
        margin: 5vh 10vh;  
        }

        .container-fp{
  text-align: center;
           align-items: center;
           justify-content: center;
        }

        
            footer p{
            font-size: 15px;
            font-family: Jost;
            text-align: center;
            margin-top: 5vh;
          }

      #img-footer{
           height: 4vh;
         
        }
}

@media (max-width: 280px){
 .line{
          display: none;
        }
            .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          justify-content: center;
           text-align: center;
        }

 .footer-nav{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-left: 0vh;
          margin-top: 10vh;
          justify-content: center;
           text-align: center;
        }

        .line{
          display: none;
        }

        .NAVIGATE{
          margin: 0
        }
          
          .footer-container{
            display: block;
             margin: 0 2vh;
          }
        
       .footer-nav div{
        margin: 5vh 10vh;  
        }

        .container-fp{
  text-align: center;
           align-items: center;
           justify-content: center;
        }

        
            footer p{
            font-size: 10px;
            
            text-align: center;
            margin-top: 5vh;
          }

      #img-footer{
           height: 3vh;
         
        }

 .footer-nav ul li{
          margin: 2vh 0;
          
          font-size: 14px;
        }
  
  
        .footer-nav h1{
          font-family: 'Jost';
          text-align: center;
          color: #fff;
          font-size: 15px;
          font-weight: bold;
         padding-bottom: 3vh;

        }

        .copyright {
    font-size: 8px;
    font-family: "Poppins", sans-serif;
    display: flex;
    color: #777;
    font-weight: normal;
    margin-top: 5vh;
    margin-left: 3vh;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
}



/* CONTACTO RESPONSIVE */

@media (max-width: 500px){

  .contacto_container h1{
    position: absolute;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 5vh;


}

.form_container {
    font-family: "Poppins", sans-serif;
    background: transparent;
    padding: 1vh 5vh;
    border-radius: 1.5vh;
    cursor: pointer;
    color: #fff;
    font-size: 2vh;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
}


   .form_container {
    padding: 20% 10%;

}


}

@media (max-width: 400px){
.form_sp span {
    font-size: 12px;
    color: #bbb;
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    margin-top: 2vh;
}

.copyright {
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    display: flex;
    color: #777;
    font-weight: normal;
    margin-top: 5vh;
    margin-left: 5vh;
    margin-right: 5vh;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


   .form_container {
    padding: 20% 10%;

}

  .form_row {
    display: block;
    margin-bottom: 30px;
    margin-top: 12vh;
}

#spn_emna{
  margin-top: 3vh;
}

}

@media (max-width: 300px){

  .form_container {
    padding: 15% 10%;

}

  .contacto_container h1{
    position: absolute;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 4vh;


}

.form_container {
    font-family: "Poppins", sans-serif;
    background: transparent;
    padding: 10vh 2vh;
    border-radius: 1.5vh;
    cursor: pointer;
    color: #fff;
    font-size: 1.5vh;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
}

}

@media (max-width: 230px){

  .form_sp input, .form_sp textarea {
    width: 90%;
    padding: 12px 16px;
    border: 2px solid white;
    border-radius: 12px;
    background: transparent;
    color: #fff;
    font-family: "Poppins", sans-serif;
    outline: none;
    transition: 0.2s ease;
}

  .form_container {
    padding: 15% 10%;

}

  .contacto_container h1{
    position: absolute;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 3vh;


}

.form_row {
        display: block;
        margin-bottom: 30px;
        margin-top: 10vh;
    }

.form_container {
    font-family: "Poppins", sans-serif;
    background: transparent;
    padding: 10vh 2vh;
    border-radius: 1.5vh;
    cursor: pointer;
    color: #fff;
    font-size: 1.5vh;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
}

.form_container button{
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: 1.2vh 5vh;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  align-items: center;
  justify-content: center;

}

}


/* ENVÍOS RESPONSIVE */

@media (max-width: 850px){


.envios_container{
  display: block;
  font-family: "Poppins", sans-serif;
  margin: 32% 10%;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #000;
}

.envios_block h1{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 6vh;
    margin-bottom: 5vh;
}

.envios_block h3{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 2vh;
    font-weight: 400;
    margin-bottom: 5vh;
    width: 90%;
}
.envios_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 2rem;
  border: 3px solid #000;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #000;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 10vh;
  cursor: pointer;
  transition: all .3s ease;

}

.envios_block a:hover{
  background: #000;
  border: 3px solid #000;
  color: #fff;
}


}


@media (max-width: 500px){


.envios_container{
  display: block;
  font-family: "Poppins", sans-serif;
  margin: 40% 10%;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #000;
}

.envios_block h1{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 5vh;
    margin-bottom: 5vh;
}

.envios_block h3{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 2vh;
    font-weight: 400;
    margin-bottom: 4vh;
    width: 90%;
}
.envios_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 2rem;
  border: 3px solid #000;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #000;
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: 10vh;
  cursor: pointer;
  transition: all .3s ease;

}

.envios_block a:hover{
  background: #000;
  border: 3px solid #000;
  color: #fff;
}


}


@media (max-width: 400px){


.envios_container{
  display: block;
  font-family: "Poppins", sans-serif;
  margin: 40% 10%;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #000;
}

.envios_block h1{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 4vh;
    margin-bottom: 3vh;
}

.envios_block h3{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 1.5vh;
    font-weight: 400;
    margin-bottom: 4vh;
    width: 90%;
}
.envios_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 1rem;
  border: 3px solid #000;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #000;
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: 10vh;

}

.envios_block a:hover{
  background: #000;
  border: 3px solid #000;
  color: #fff;
}


}


@media (max-width: 250px){


.envios_container{
  display: block;
  font-family: "Poppins", sans-serif;
  margin: 16% 10%;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #000;
}

.envios_block h1{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 3vh;
    margin-bottom: 3vh;
}

.envios_block h3{
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 1.5vh;
    font-weight: 400;
    margin-bottom: 4vh;
    width: 90%;
}
.envios_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 1rem;
  border: 3px solid #000;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #000;
  font-size: .5rem;
  font-weight: 700;
  margin-bottom: 10vh;

}

.envios_block a:hover{
  background: #000;
  border: 3px solid #000;
  color: #fff;
}


}








/* CUIDADOS DEL MATE RESPONSIVE */


@media (max-width: 1100px){


.info_container{
  display: block;
  font-family: "Poppins", sans-serif;
  align-items: center;
  justify-content: center;
  margin: 10% 9%;
    width: auto;
  height: 100%;
  padding: 10vh 7vh;
  border-radius: 1.5vh;
    background-color: #212121;
    color: #fff;
}

.info_block h1{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 6vh;
    margin-bottom: 5vh;
}

.info_block h3{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 2vh;
    font-weight: 400;
    margin-bottom: 5vh;
    width: 90%;
}
.info_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 2rem;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 10vh;
  cursor: pointer;
  transition: all .3s ease;

}

.info_block a:hover{
  background: #fff;
  border: 3px solid #fff;
  color: #000;
}


}


@media (max-width: 850px){


.info_container{
  display: block;
  font-family: "Poppins", sans-serif;
  align-items: center;
  justify-content: center;
  margin: 10% 9%;
    width: auto;
  height: 100%;
  padding: 10vh 7vh;
  border-radius: 1.5vh;
    background-color: #212121;
    color: #fff;
}

.info_block h1{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 6vh;
    margin-bottom: 5vh;
}

.info_block h3{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 2vh;
    font-weight: 400;
    margin-bottom: 5vh;
    width: 90%;
}
.info_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 2rem;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 10vh;
  cursor: pointer;
  transition: all .3s ease;

}

.info_block a:hover{
  background: #fff;
  border: 3px solid #fff;
  color: #000;
}


}



@media (max-width: 650px){


.info_container{
  display: block;
  font-family: "Poppins", sans-serif;
  align-items: center;
  justify-content: center;
  margin: 10% 9%;
    width: auto;
  height: 100%;
  padding: 10vh 7vh;
  border-radius: 1.5vh;
    background-color: #212121;
    color: #fff;
}

.info_block h1{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 4.5vh;
    margin-bottom: 5vh;
}

.info_block h3{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 2vh;
    font-weight: 400;
    margin-bottom: 5vh;
    width: 90%;
}
.info_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 2rem;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 10vh;
  cursor: pointer;
  transition: all .3s ease;

}

.info_block a:hover{
  background: #fff;
  border: 3px solid #fff;
  color: #000;
}


}


@media (max-width: 500px){


.info_container{
  display: block;
  font-family: "Poppins", sans-serif;
  align-items: center;
  justify-content: center;
  margin: 10% 8% 25% 8%;
    width: auto;
  height: 100%;
  padding: 10vh 6vh;
  border-radius: 1.5vh;
    background-color: #212121;
    color: #fff;
}

.info_block h1{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 3vh;
    margin-bottom: 5vh;
}

.info_block h3{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 2vh;
    font-weight: 400;
    margin-bottom: 4vh;
    width: 90%;
}
.info_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 2rem;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: 10vh;
  cursor: pointer;
  transition: all .3s ease;

}

.info_block a:hover{
  background: #fff;
  border: 3px solid #fff;
  color: #000;
}


}


@media (max-width: 400px){


.info_container{
  display: block;
  font-family: "Poppins", sans-serif;
  align-items: center;
  justify-content: center;
  margin: 10% 2% 25% 2%;
  width: auto;
  height: 100%;
    padding: 10vh 5vh;
  border-radius: 1.5vh;
    background-color: #212121;
    color: #fff;
}

.info_block h1{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 2.8vh;
    margin-bottom: 3vh;
}

.info_block h3{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 1.5vh;
    font-weight: 400;
    margin-bottom: 4vh;
    width: 90%;
}
.info_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 1rem;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: 10vh;

}

.info_block a:hover{
  background: #fff;
  border: 3px solid #fff;
  color: #000;
}


}


@media (max-width: 300px){


.info_container{
  display: block;
  font-family: "Poppins", sans-serif;
  align-items: center;
  justify-content: center;
  margin: 10% 4%;
    width: auto;
  height: 100%;
  padding: 10vh 4vh;
  border-radius: 1.5vh;
    background-color: #212121;
    color: #fff;
}

.info_block h1{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 2vh;
    margin-bottom: 3vh;
}

.info_block h3{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 1.5vh;
    font-weight: 400;
    margin-bottom: 4vh;
    width: 90%;
}
.info_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem 1rem;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: .5rem;
  font-weight: 700;
  margin-bottom: 10vh;

}

.info_block a:hover{
  background: #fff;
  border: 3px solid #fff;
  color: #000;
}


}



@media (max-width: 250px){


.info_container{
  display: block;
  font-family: "Poppins", sans-serif;
  align-items: center;
  justify-content: center;
  margin: 10% 4%;
    width: auto;
  height: 100%;
  padding: 10vh 4vh;
  border-radius: 1.5vh;
    background-color: #212121;
    color: #fff;
}

.info_block h1{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 1.5vh;
    margin-bottom: 3vh;
}

.info_block h3{
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 1vh;
    font-weight: 400;
    margin-bottom: 4vh;
    width: 90%;
}
.info_block a{
  
  font-family: "Poppins", sans-serif;
  background: transparent;
  padding: .4rem .5rem;
  border: 3px solid #fff;
  border-radius: 1.5vh;
  cursor: pointer;
  color: #fff;
  font-size: .3rem;
  font-weight: 700;
  margin-bottom: 10vh;

}

.info_block a:hover{
  background: #fff;
  border: 3px solid #fff;
  color: #000;
}


}