body {font-family: Arial, sans-serif; background-color: #c4c4c4;}
a { text-decoration: none;}
a:visited {color:#000;}
a:link {color:#000;}

.encabezado{ background-color:#ec7754; height:30px; align-items: start; display:block;}

.enc__titulo {font-size: 0.98em;font-family: 'arvo', sans-serif; height: 30px; color: white;display:inline-block; 
   line-height: 1.8; position:relative; left:20px;font-family:arial;font-weight: 400;}

.enc__redes{float:right;height:30px;display:flex;
         position:relative; top:7.5px; right:20px;font-size: 20px;}

.enc__redes a{padding-right: 10px; margin-top:-3px;}

header {position:sticky;top:-5px; box-sizing:border-box;border-bottom:4px solid #C14811;
      height: auto ;background-color: #2e4e4e;z-index: 1; text-align: center;}

.logo {height:auto;width:5vw;top:10%;left:2.5%;position:absolute;
      filter: drop-shadow(4px 2px 2px #535353);transition: all 0.2s;}
.logo:hover{scale: 1.12;}

.logo img{height: 100%; width:100%;border-radius:60px;}

.nav__ul {display:flex; justify-content: center;}
.nav__li{display: inline; padding-left:5px; padding-right: 5px; margin-right: 5px; margin-left: 5px;}
.nav__li a{outline: none;display: inline-block; padding:10px; text-align: center; transition:all .5s;font-weight: 400;line-height: 1.4;font-size:18px;}
.nav__li a:visited {color:#fff;}
.nav__li a:link {color:#fff;}
.nav__li:hover{background-color: #113434;}


.navresp__ul {display:none;}

@media only screen and (max-width:480px) {
   .nav__ul {display: inline;}
   .navresp__ul { display: block; width:100%;height:100%;}
   .logo {position: absolute; left: 10px; top: 40px; height: 50px; width: 50px;}
   .encabezado {display: block; text-align: center; align-items: center; height: auto; padding: 4px;}
   .enc__titulo {position: static; line-height: 1.1;}
   .enc__redes {position: static; float: none; align-items: center; justify-content: center;}
   .enc__redes a {padding: 0 8px;}
   .nav__li {display: block; padding: 2px 0;}
   header {position:static; top: 0;}
}

.separador {text-align:center; padding: 15px 0 20px 0; size:10px;background-color: #567f7f; color: white;}
.contenedor {display:grid;margin-top:40px; grid-template-rows: repeat(7,350px);
grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
padding:10px;grid-column-gap:20px ;grid-row-gap:64px;align-items: center;
grid-auto-rows: 350px;grid-auto-columns: 1fr;grid-auto-flow: dense; margin-bottom:40px}

.caja{box-shadow: 10px 12px 20px 0px #53350988;transition: all 0.3s; 
   background-color: white;overflow: hidden;text-align: center; padding: 20px}
.caja img{height:350px; width: 100%;object-fit:contain;

   transition: all 0.3s;}
.caja img:hover {transform: scale(1.2);}

#lista-muebles {
  display: flex;
  flex-wrap: wrap;   justify-content: center;
  gap: 20px;
  padding: 20px;
}
.item-mueble {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  background-color: #fff;max-width: 250px;
}

.imgmueble {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
}

.precio-original{text-decoration: line-through; color: #757575; font-size: 0.9em;}
.etiqueta-descuento {background-color: #d32f2f; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; font-weight: bold; margin-left: 5px;}
.precio-venta {color: #2e7d32; font-weight: bold; font-size: 1.2em;}
.precio-normal {color: black; font-weight: bold; font-size: 1.1em;}
.info-mueble { padding-top: 4px;font-size: 14px; text-align:left; border-top: 4px solid rgba(87, 87, 87, 0.316);}
.contenedor-precio { margin-top: 5px; }

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.precio-carrito {display: flex; align-items: center; justify-content: space-evenly; }
.btn-agregar {margin-top: 8px; color: rgb(23, 23, 23); border: none; padding: 5px 10px; cursor: pointer; 
  border-radius: 4px;}
.btn-agregar i{ pointer-events: none; }

@media only screen and (max-width:480px) {
 
  .item-mueble {
    display:inline-block; text-align: center; max-width: 100%;
  }
  .imgmueble {
    width: 100%;
    height: auto;
  }
  .info-mueble { display: inline-block; padding-top: 4px;
    font-size: 14px; text-align:left; border-top: 4px solid rgba(87, 87, 87, 0.316);
  }
  .btn-agregar i {font-size: 22px;}
  .contenedor-precio { font-size: 22px;}
}

.aside {display:flex; justify-content: center;
         background-color:#567f7f;width:100%}
.aside li {display:inline;}

.aside a{outline: none;
  display: inline-block;width: 100%;
  text-align: center;line-height: 2;
  color: white;transition: all .4s; padding: 10px}
.aside a:hover{background-color:#619191;}


footer {padding:20px;background-color: #3c5353;text-align: center; color: white; display: flex; flex-wrap: wrap; justify-content: space-around;
         font-weight:50; align-items: start;}

.mediosdepago {padding:10px;}
.mediosdepago img {height: 60px; width: auto; margin-top: 10px;}
.contacto {padding:10px;text-align: left;}
.contacto p {font-size: 1.2em; padding-top: 4px;}
.contacto i {margin-right: 10px; color: white;}
.redes {padding:10px; text-align: center;}
.redes i{font-size: 1.6em; color: white; padding-top: 10px; padding-right: 5px; padding-left: 5px;}
.copyright {font-size: 0.8em; color: white; margin-top: 20px;}
.botonwhatsapp { height: 40px; width: 40px; position: fixed; bottom: 40px ; right: 20px; font-size: 50px; z-index: 1000; background-color: #ffffff; border-radius: 10%; padding: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: all 0.3s ease-in-out; align-items: center; display: flex; justify-content: center;}
.botonwhatsapp:hover {background-color: #e0e0e0; transform: scale(1.1);}
.botonwhatsapp a{color: rgb(38, 234, 81); border-radius:50%}