@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body {
	width: 100%;

	font-size: 14px;

  font-family: "Noto Serif", serif;

font-family: "Poppins", sans-serif;

  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;

  color: white;
  
  background-color: #030303;
  /*border-top: 17px solid #27ea83;*/
   
    
}


p {
  margin: 0;
}






.clear {
	clear: both;
}

div#content {
	width: 100%;

  
}


@media (max-width: 990px) {

body {
  background-size: 20%;
  
}







}



@media (max-width: 500px) {

div.sector_info {
  margin-left: 5px;
  max-width: 200px !important;
  
}

div.lista_nombre p.producto_imagen {
  
}
  
}


div#contenedor_lista_productos {
  
}




a {
  text-decoration: none !important;
}


i {
  font-style: italic;
}

b {
  font-weight: bold;
}


h1, h2, h3 {
 
}


.scrollup{
    width:48px;
    height:48px;
    opacity:0.9;
    position:fixed;
    bottom:0;
    right:0;
    display:none;
    text-indent:-9999px;
    background: url('../images/top.png') no-repeat;
}

.whatsapp_icon{
    width:40px;
    height:40px;
    
    position:fixed;
    bottom:15px;
    left:15px;
    z-index: 1000;
    
    background: url('../images/whatsapp_icon.png') no-repeat;
}



.texto_titulo {
  font-size: 70px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  word-wrap: break-word;
}


.clear {
  clear: both;
}

img {
  width: 100%;
}


header {
	width: 100%;
	/*height: 362px;
  position: absolute;
  z-index: -1000;
  background-image: url(../images/deco_fondo.jpg);*/

}


/* ABRE MENU */

#menu_nav {
  max-width: 1200px;
  margin: auto;
  background-color: #030303;
  padding-left: 10px;

}

body {
  
  -webkit-animation: bugfix infinite 1s;
  /* needed for checkbox hack */
  
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
/* needed for checkbox hack */


#nav {
  position: relative;
  background-color: #030303;
  max-width: 100%;
  padding-left: 0;
  padding-bottom: 10px;
}
#nav ul {
  display: none;
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#nav ul li a {
  display: block;
  
  
  font-style: normal;
  padding-right: 10px;
  padding-top: 15px;
  /*background-color: black;*/
  color: white;
  text-decoration: none;
  
  text-transform: uppercase;
  font-size: 14px;
  
  /*border-right: 1px solid #0a6b44;*/
}
#nav ul li a:hover {
  
   color: #777777;
  
}

#nav ul li a.activo {
  background-color: #27ea83;
  
  pointer-events: none;

}

#nav ul li:last-of-type a {
  border-right: 0px;
}
#nav ul li ul li a {
  padding-left: 1.5em;
}
#nav ul li ul li ul li a {
  padding-left: 3.125em;
}
#nav input.trigger {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#nav input.trigger:checked ~ ul, #nav input.trigger:checked ~ ul li ul {
  display: block !important;
}





@media (min-width: 48em) {

  .container_switch {
    margin: auto;
  }
  
  #nav input.trigger:checked ~ ul, #nav input.trigger:checked ~ ul li ul {
    /* older flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    /* newer flexbox */
    display: flex;
    flex-direction: row;
  }
}

#nav label {
  position: relative;
  display: block;
  min-height: 2em;
  padding: .45em;
  font-size: 1.3em;
  margin: 0;
  cursor: pointer;
  line-height: 1.5em;
  color: white;
}
#nav label:after {
  position: absolute;
  right: 0.2em;
  top: 0.3em;
  content: "\2261";
  font-size: 2em;

  color: white;
  background-color: #030303;
  padding: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-radius: 0px;
}
@media (min-width: 48em) {
  #nav ul {
    /* older flexbox */
    display: -ms-flexbox;
    flex-direction: -ms-row;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    /* newer flexbox */
    display: flex;
    flex-direction: row;
  }
  #nav ul li {
    position: relative;
    text-align: center;
    /* older flexbox */
    -ms-flex: 0.2;
    -webkit-box-flex: 0.2;
    -moz-box-flex: 0.2;
    box-flex: 0.2;
    /* newer flexbox */
    flex: 0.2;
  }




  


  #nav ul li ul {
    display: none !important;
    position: absolute;
    top: 3.0625em;
    left: 0;
    display: block;
    width: 12.5em;
    z-index: 200;
  }
  #nav ul li ul li {
    text-align: left;

  }
  #nav ul li ul li ul {
    z-index: 300;
    top: 0px;
    left: 12.4em;
  }
  #nav ul li ul li ul li a {
    padding-left: 30px !important;
  }
  #nav ul li:hover > ul {
    display: block !important;
  }
  #nav label {
    display: none;
  }

  
}


/* CIERRA MENU */







div#sub_content {
    max-width: 1200px;
    margin: auto;
    
    margin-top: 40px;
    min-height: 500px;
    border-top: 2px solid #111;
    padding-top: 10px;
    
    
}






.barra_sesion {
  /*background-color: rgba(29, 29, 29, 1);
  background-color: rgba(255, 255, 255, 0.95);*/
  background-color: #030303;
  width: 100%;
  height: 50px;
  position: fixed;
  z-index: 5000;
  height: 50px;
 /* transition: all .25s ease-in-out;   esto es para que al hacer scroll transiciones y se achique con efecto */
  -webkit-box-shadow: 0px 0px 7px 0px rgba(200,200,200,0.2);
  -moz-box-shadow: 0px 0px 7px 0px rgba(200,200,00,0.2);
  box-shadow: 0px 0px 7px 0px rgba(200,200,200,0.2);
}

.barra_sesion p {
  text-align: center;
  color: #eee;
  font-size: 12px;
  line-height: 50px;
  display: block;
  
}

.barra_sesion i {
  
}

.barra_sesion img.admin_icon {
  width: 15px;
  margin-right: 5px;
  
  
}

.barra_sesion img.salir_icon {
  width: 15px;
  

}

.barra_sesion span {
  font-weight: bold;
  

}

div#sidebar p.nombre_seccion {
  text-transform: uppercase;
  color: white;
  padding-left: 5px;
}

a.atras p {
  text-align: right;
}


p.subagregar {
  font-size: 18px;
   margin-top: 20px;

}


p.titulo_seccion {
  font-size: 35px;
  text-align: center;
  text-transform: uppercase;
  color: black;
  margin-top: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #9a9a9a;
  font-weight: bold;
  
  
}


p.titulo_seccion img {
  width: 25px;
  vertical-align: middle;
  margin-left: 5px;
}


div.categoria_titulo {
  margin-top: 35px;
  margin-bottom: 10px;
  margin-left: 5px;
}

p.titulo_categoria {
  text-align: left;
  font-size: 30px;
  float: left;
  padding: 0;
  
  
  display: inline;
  line-height: 36px;
  font-family: "Bebas Neue", sans-serif;
  

  font-weight: 400;
  font-style: normal;
  padding-left: 2px;
  padding-right: 2px;
  text-transform: uppercase;
}

/*div.izq_categoria, div.der_categoria {
  height: 35px;
  width: 22.5px;
  float: left;
}

div.izq_categoria {
  background-image: url(../images/izq_categoria.png);
  background-size: cover;
  margin-right: -2px;
}

div.der_categoria {
  background-image: url(../images/der_categoria.png);
  background-size: cover;
  margin-left: -2px;
}
*/

p.contador {
  display: inline;
  color: #777;
  font-size: 12px;
}


p.producto_nombre {
  font-weight: 600;
  font-size: 15px;
  
  
  font-style: normal;
  
  
  

}

div#destacado {
  position: absolute;
  margin-left: 14px;
  margin-top: 52px;


}

span.destacado {
  color: white;
  background-color: red;
  font-size: 10px;
  font-weight: bold;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 8px;
  display: inline;
}

p.producto_descripcion {
  
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 11px;
  line-height: 13px;
}

p.producto_precio {
  font-weight: 700;
  color: black;
  background-color: white;
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 30px;
  font-size: 14px;
  position: absolute;
  margin-left: -60px;
}




div.lista_nombre p {
  

}


div.lista_nombre p.producto_imagen  {
  width: 70px;
  height: 70px;
  overflow: hidden;
  background-position: center;
  background-size: cover;

  
}

div.lista_nombre p.producto_imagen img {
  width: 100%;

}

div.img_prod p.producto_imagen  {
  
  
}


div.sub_content div.row {
	margin-left: 0;
	margin-right: 0;
}


.barra_sesion {
  /*background-color: rgba(29, 29, 29, 1);
  background-color: rgba(255, 255, 255, 0.95);*/
  
  width: 100%;
  height: 50px;
  position: fixed;
  z-index: 5000;
  height: 50px;
  top: 0;
 /* transition: all .25s ease-in-out;   esto es para que al hacer scroll transiciones y se achique con efecto */
  -webkit-box-shadow: 0px 0px 7px 0px rgba(54,53,54,0.5);
  -moz-box-shadow: 0px 0px 7px 0px rgba(54,53,54,0.5);
  box-shadow: 0px 0px 7px 0px rgba(54,53,54,0.5);
}


div.cajita_barra_sesion {
  float: right;
  padding-right: 20px;
  padding-left: 20px;
  border-right: 1px solid #555;
  height: 100%;
}


div.row {
	margin-left: 0;
	margin-right: 0;
}


div.sector {
	float: left;


}

div.sector_img {
	width: 70px;
  height: 70px;
  border-radius: 35px;
  overflow: hidden;
  
  
}

div.sector_info {
	margin-left: 5px;
	max-width: 165px;
  
	
}

div.sector_precio {
	margin-left: 5px;
    float: right;
}

div.sector_info p {
	width: 100%;
	display: block;
}

div.sector_img_info {
	float: left;
}

div.caja_producto {
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	min-height: 90px;
  margin-left: 4px;
  margin-right: 4px;
  background-color: #171717;
  border-radius: 15px;
}

div.lista_nombre {
	padding: 0;
	padding-top: 10px;
  padding-bottom: 15px;
}


/*div.derecha {
	border-left: 2px solid #eaeaea;
  border-right: 2px solid #eaeaea;
  margin-left: -1px;
  margin-right: -1px;
}*/



div.separador {
	height: 10px;
	width: 95%;
	margin: auto;
	border-bottom: 1px solid #eaeaea;
	
}

div#caja_logo {
  width: 100%;
  position:relative;
  height: 350px;
  top: -9px;

}

div#portada {
  position: absolute;
  width: 100%;
  height: 215px;
  margin: auto;
  background-image: url(../images/deco_fondo_moderno_liso.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-size: cover;
  background-position: center;
  
  
}


div.logo {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
  margin-top: 60px;
  background-color: #030303;
  border-radius: 100px;
  overflow: hidden;
  top: 105px;
  -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);  
}

div.logo_barra {
  

}

div.logo .img {
  width: 130px;
  height: 210px;
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 30px;
  

}

div.logo .imagen {
  width: 100px;
  height: 147px;
  background-image: url(../images/logo.png);
  background-size: cover;
  
}

p.texto_logo {
  text-transform: uppercase;
  font-weight: 200;
  font-family: "Domine", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 30px;
  text-align: center;
  border-bottom: 1px solid #999;
}

div#botones {
  max-width: 990px;
  margin: auto;
}

p#p_botones {
  text-align: right;
}

div#botones a {
  padding: 10px;
  font-size: 16px;
  font-family: "Domine", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-weight: 300;
  color: black;
}

div#botones a:hover {
color: #8d4925;
}

/*
div#botones a.seccion_activa {
  color: #8d4925;
  pointer-events: none;
}
*/

div.contacto {
  max-width: 320px;
  margin: auto;
  
  font-size: 12px;
  margin-top: 20px;
  padding-top: 10px;
  position: relative;
  top:92px;
}

div.contacto div.redes a:hover {
  opacity: 50%;
}


div.contacto div.datos {
  float: left;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 600;
  font-style: italic;
}

div.contacto div.redes {
  width: 20px;
}



div.contacto div.datos p {
  display: inline-block;
  line-height: 20px;
}



div.contacto a.insta {
  width: 20px;
  height: 20px;
  background-image: url(../images/insta_byn.png);
  background-size: cover;
  display: inline-block;
} 

div.contacto a.face {
  width: 20px;
  height: 20px;
  background-image: url(../images/face_byn.png);
  background-size: cover;
  display: inline-block;
} 

div.contacto span.whats {
  width: 20px;
  height: 20px;
  background-image: url(../images/whatsapp_byn.png);
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -1px;
  
} 








div.contacto_footer {
  max-width: 320px;
  margin: auto;
  color: white;
  margin-top: 20px;
  padding-top: 10px;
  
}


div.contacto_footer div.datos {
  float: left;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 600;
  font-style: italic;
}

div.contacto_footer div.redes {
  width: 20px;
}

div.contacto_footer div.datos img {
  width: 20px;
  vertical-align: -5px;
}

div.contacto_footer div.datos p {
  display: inline-block;
  line-height: 20px;
}

div.contacto_footer div.datos p.tel img{
  margin-right: 2px;
}

footer {
  width: 100%;
  background-color: #171717;
  margin-top: 50px;
  
  color: #aeaeae80;
  text-align: center;
  
}

div#sub_footer {
  max-width: 990px;
  padding-top: 60px;
  padding-bottom: 40px;
  margin: auto;
  font-size: 12px;
}

div#sub_footer .img {
  width: 105px;
  height: 118px;
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
  
  

}

div#sub_footer .imagen {
  width: 80px;
  height: 118px;
  background-image: url(../images/logo.png);
  background-size: cover;
  
}



footer div#by a{
    color: #fff;
    font-style: italic;


}

div#by {
  width: 100%;
  font-size: 12px;
  margin-top: 10px;
  padding: 20px;
  padding-top: 20px;
  border-top: 1px solid #151515;
  color: #aeaeae;
  font-style: italic;
  background-color: #030303;
}

footer div#by a:hover{
    color: #eaeaea80;
   
}

div#sub_footer div.contacto {
  margin-bottom: 20px;
}

div#sub_footer div.contacto_footer a.insta {
  width: 20px;
  height: 20px;
  background-image: url(../images/insta_byn.png);
  background-size: cover;
  display: inline-block;
} 

div#sub_footer div.contacto_footer a.face {
  width: 20px;
  height: 20px;
  background-image: url(../images/face_byn.png);
  background-size: cover;
  display: inline-block;
} 

div#sub_footer div.contacto_footer span.whats {
  width: 20px;
  height: 20px;
  background-image: url(../images/whatsapp_byn.png);
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -1px;
 
} 

/*
.gris {
  -webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);  
}
*/


.gris:hover {
  opacity: 50%;
}









/*NOVEDADES*/


div#novedades {
    max-width: 1200px;
    height: 310px;
    margin: auto;
    color: white;
    margin-top: 40px;
    margin-bottom: 60px !important;
    padding-left: 5px;
  padding-right: 5px;
    
 }   
    
/*div#novedades .imagen_novedad {
      width: 400px;
      height: 400px;
      float: left;
    }*/


div.texto_novedad {
      
      
      position: relative;
      bottom: 200px;
      z-index: 1000;
      max-width: 1200px;
      margin: auto;
      padding: 20px;
      padding-top: 25px;
      text-align: center;
      color: white;
      background-color: rgba(0, 0, 0, 0.5);
      
      /*background: rgb(255,255,255);
      background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);*/
    }

div.texto_novedad h3 {
      
      font-family: "Bebas Neue", sans-serif;
      font-size: 40px;
      line-height: 39px;
    }

div.texto_novedad p {
      font-family: "Poppins", sans-serif;
      font-style: italic;
      font-size: 16px;
      
     
    }


div#novedades .imagen_novedad {
  width: 100%;
  height: 100%;
  border-radius: 15px;

}

div#novedades .imagen_novedad img{
  
  height: 100%;
}
/*CIERRA NOVEDADES*/
    

/* Abre Toogle switch */

$dayBg: #fff;
$nightBg: #000;
$toggleDay: #E6A555;
$toggleNight: #2c4b98;
$size: 105px;
$toggleBgTransition: background-color 300ms ease-in;

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



.container_switch {
  background-color: #fff;
  cursor: pointer;
  width: 60px;
  border-radius: 8vw;
 
  transition: background-color 300ms cubic-bezier(.5, 0, .5, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -5px;
}


.toggle--wrapper {
  background-color: #b3b3b3;
  width: 100%;
  height: 30px;
  border-radius: 20em;
  padding: 1em;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  transition: background-color 300ms ease-in;
  
  z-index: 1;
}

.toggle--knob {
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  background: white;
  border-radius: 50%;
  transform: translateX(0);
  transition: transform 700ms cubic-bezier(.5, 0, .5, 1);
  position: relative;
  border: none;
  &::before {
    content: '';
    display: block;
    background-color: #b3b3b3;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    left: -100%;
    transform-origin: center top;
    transform: translateX(0);
    transition: transform 300ms cubic-bezier(.5, 0, .5, 1), background-color 300ms ease-in;
  }
}



[data-state="day"] {
  background-color: #fff;
  .toggle--wrapper {
    background-color: #b3b3b3;
  }
}

[data-state="night"] {
  background-color: #000;
  .toggle--wrapper {
    background-color: #333;
  }

  .toggle--knob {
    transform: translateX(100%) rotate(25deg);
    &::before {
      transform: translateX(100%) rotate(45deg);
      background-color: #333;
    }
  }
}


#caja_logo, #content, #sub_footer {
    transition: opacity 0.2s ease; /* Duración de la transición */
}

.fade-out {
    opacity: 0; /* Hacer el body invisible */
}

.fade-in {
    opacity: 1; /* Hacer el body visible */
}


/* Cierra Toogle switch */





.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}



.producto_imagen, .caja_producto {
  cursor: pointer;
}

.modal {
            display: none; /* Oculto por defecto */
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;

            
        }


.modal img {
            max-width: 500px;
            padding-left: 5px;
            padding-right: 5px;
            border-radius: 20px;
            transition: transform 0.3s ease; /* Transición suave */
            transform: scale(0); /* Comenzar con escala 0 */
        }

.modal .show  {
            transform: scale(1); /* Ampliar a escala 1 */
        }


#contenido_modal {
            position: relative;
            display: flex; 
            flex-direction: column;   /* Apila los elementos en columna */
}

#imgTil, #imgDesc {
  padding-left: 20px;
}

#imgTil {
  font-size: 17px;
  font-weight: bold;
  margin-top: 10px;
}

#imgDesc {
  font-size: 13px;
  font-style: italic;
}



p#newdest:empty {
  display: none !important;
}


p#newdest {
  position: absolute;
  width: 65px;
  background-color: red;
  color: white;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 20px 20px 20px 20px;
  font-weight: bold;
  height: 35px;
  line-height: 35px;
  text-align: center;
  top:5px;
  right:10px;
  z-index: 1500;

}