@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/* MAPA */
/* MIXIN */
* {
  font-family: "Playfair Display";
  box-sizing: border-box;
  /*SI AGREGO PADDING O BORDE, EL ANCHO O ALTO DE MI ELEMENTO SE RESPETA ;) */
  margin: 0;
  padding: 0;
  /*LIMPIEZA DE ESPACIADOS Y MARGENES POR DEFECTO PARA ASI PODER CONFIGURAR LOS MIOS PROPIOS*/
}

.bgHeader {
  background-color: #1A1A1A;
}
.bgHeader ul .home:hover, .bgHeader ul .productos:hover, .bgHeader ul .sucursales:hover, .bgHeader ul .acercaDe:hover, .bgHeader ul .contacto:hover {
  background-color: rgba(255, 233, 196, 0); /* Color más brillante al pasar el mouse */
  color: rgba(250, 183, 49, 0.8);
}
@media screen and (max-width: 768px) {
  .bgHeader ul a {
    text-align: start;
    width: 20% !important;
  }
}

.navbar-expand-lg .navbar-nav .nav-link { /* VER EXPLICACION DE ESTO EN AFTER DE BOOTSTRAP */
  color: rgba(255, 255, 255, 0.623);
  font-family: "Fjalla One";
}

.logo {
  width: 45px;
  height: 45px;
}

.logo-carrito {
  width: 30px;
}

footer {
  background-color: lightsteelblue;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 10;
}
footer h6 {
  font-size: 1.5rem;
  font-family: "Fjalla One";
}
footer .fa-whatsapp {
  color: #25d366;
  font-size: 3rem;
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 2;
}
footer .redesSociales a i:hover {
  color: #a37f41;
  transform: scale(1.5);
}

.seccionTitulos {
  background-image: linear-gradient(to right top, rgba(0, 0, 0, 0.3137254902), rgba(0, 0, 0, 0.3137254902)), url(../assets/img/Fondo-Mate-Origen.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.seccionTitulos .mates,
.seccionTitulos .existo {
  text-shadow: 5px 5px 0px #A37F41;
  font-size: 150px;
}
.seccionTitulos h2, .seccionTitulos h3 {
  font-family: "Fjalla One";
}
.seccionTitulos .separador {
  color: #a37f41;
}
.seccionTitulos .separador hr {
  width: 7%;
  border: 0;
  height: 0.5px;
  background-color: #a37f41;
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .seccionTitulos .tituloGrande {
    padding-left: 40px;
  }
  .seccionTitulos .tituloGrande .preparoUnos,
  .seccionTitulos .tituloGrande .luego {
    padding-left: 80px;
  }
  .seccionTitulos .tituloGrande .mates,
  .seccionTitulos .tituloGrande .existo {
    text-shadow: 5px 5px 0px #A37F41;
    font-size: 100px;
  }
  .seccionTitulos .subtitulo {
    padding-left: 80px;
  }
}
.productosDestacados .tituloDestacados {
  background-color: rgb(84, 104, 131);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 1;
}
.productosDestacados h3 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.productosDestacados .imagenesDestacados {
  background-color: rgb(252, 238, 221);
  position: relative;
}
.productosDestacados .imagenesDestacados div {
  width: 400px;
  height: 475px;
  overflow: hidden;
  justify-content: space-around !important;
}
.productosDestacados .imagenesDestacados div a {
  width: 60%;
  height: 65%;
  text-decoration: none;
  background-color: rgb(255, 105, 105);
}
.productosDestacados .imagenesDestacados div a img {
  width: 100%;
  height: 100%;
  border: 1px solid #000; /* borde negro */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* sombra */
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.2s ease-in-out;
}
.productosDestacados .imagenesDestacados div a img:hover {
  transform: scale(1.09);
  filter: initial;
}
.productosDestacados .imagenesDestacados div p {
  font-family: "Fjalla One";
}

.guiaPreparacionMate {
  background-color: #1A1A1A;
  font-size: 30px;
  font-weight: 400;
}
.guiaPreparacionMate .tituloGuia {
  background-color: rgb(84, 104, 131);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
  position: relative; /* necesario para que el z-index funcione */
  z-index: 1;
}
.guiaPreparacionMate .videoYPasos .bordeado {
  border: 1px solid rgba(244, 165, 96, 0.496);
}
.guiaPreparacionMate .videoYPasos .bordeado .listaPasos {
  background-color: #1A1A1A;
}
.guiaPreparacionMate .videoYPasos .bordeado .listaPasos h4 {
  font-size: 2.5rem;
}
.guiaPreparacionMate .videoYPasos .bordeado .listaPasos p {
  font-family: "Fjalla One";
  font-size: 1.75rem;
}
.guiaPreparacionMate .videoYPasos .bordeado .listaPasos a {
  border: outset rgb(66, 24, 6);
}
.guiaPreparacionMate .videoYPasos .bordeado .listaPasos a:hover {
  border: outset rgb(66, 24, 6);
  font-weight: 900;
  padding: 10px;
}
.guiaPreparacionMate .videoYPasos .bordeado iframe {
  width: 100%;
  height: 300px;
}

.opiniones {
  background-color: rgb(252, 238, 221);
  text-align: center;
}
.opiniones .TituloOpinionesClientes {
  background-color: rgb(84, 104, 131);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
}
.opiniones h5 {
  font-size: xx-large;
  padding: 15px;
}
.opiniones h5 a {
  color: black;
  border: outset rgb(132, 37, 37);
  text-decoration: none;
}
.opiniones h5 a:hover {
  border: outset rgb(132, 37, 37);
  font-weight: 900;
  padding: 10px;
}
.opiniones p {
  font-size: large;
}
.opiniones .imagenesOpiniones div {
  width: 400px;
  height: 400px;
}
.opiniones .imagenesOpiniones div img {
  width: 90%;
}

.productos {
  background-color: rgb(252, 238, 221);
}
.productos .tituloProductos {
  background-image: linear-gradient(to right top, rgba(0, 0, 0, 0.3960784314), rgba(0, 0, 0, 0.3960784314)), url(../assets/img/paquetes_de_yerba.jpg);
  background-position: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
}
.productos .tituloProductos h1 {
  color: white;
  font-family: "Fjalla One";
  font-size: 5rem;
  letter-spacing: 3px;
  text-shadow: 5px 5px 0px #A37F41;
}
@media screen and (max-width: 768px) {
  .productos .tituloProductos h1 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}
.productos .imagenesProductos div.producto {
  width: 250px;
  /* todos los productos tendrán el mismo ancho */
  background-color: white;
  border: 1px solid #000;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, outline 0.3s ease;
  box-sizing: border-box !important;
}
.productos .imagenesProductos div.producto a {
  color: rgb(0, 0, 0);
  text-decoration: none;
}
.productos .imagenesProductos div.producto a img {
  height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.productos .imagenesProductos .bombillas:hover,
.productos .imagenesProductos .yerbas:hover,
.productos .imagenesProductos .termos:hover,
.productos .imagenesProductos .mates:hover {
  outline: 5px solid #000;
  transform: scale(1.09);
  filter: initial;
}
.productos nav a {
  text-decoration: none;
  color: black;
  border: outset rgb(132, 37, 37);
}
.productos nav a:hover {
  border: outset rgb(132, 37, 37);
  font-weight: 900;
  padding: 10px;
}

@media screen and (max-width: 1400px) {
  .productos .imagenesProductos div a h1 {
    font-size: 1.5rem !important;
  }
}
@media screen and (max-width: 768px) {
  .productos .imagenesProductos div a h1 {
    font-size: 2rem !important;
  }
}
.titulos {
  background-image: linear-gradient(to right top, rgba(0, 0, 0, 0.1882352941), rgba(0, 0, 0, 0.1882352941)), url(../assets/img/Paquete-alacena.jpg);
  background-position: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
}
.titulos h1 {
  color: white !important;
  font-family: "Fjalla One" !important;
  font-size: 5rem !important;
  letter-spacing: 3px !important;
  text-shadow: 5px 5px 0px #A37F41 !important;
}
.titulos h2 {
  color: white !important;
  font-family: "Fjalla One" !important;
  letter-spacing: 3px !important;
  text-shadow: 5px 5px 0px #A37F41 !important;
  padding-bottom: 8px !important;
}

.mainSucursales {
  background-color: rgb(252, 238, 221);
}

@media screen and (max-width: 768px) {
  .titulos {
    background-size: cover;
  }
  .titulos h2 {
    font-size: 1.25rem !important;
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .titulos img {
    padding-top: 30px;
    padding-bottom: 30px;
    width: 25px;
  }
}
@media screen and (max-width: 913px) {
  .titulos {
    background-size: cover;
  }
  .titulos h1 {
    text-align: center;
    font-size: 3.5rem;
    text-shadow: 2.5px 2.5px 0px #A37F41;
  }
  .titulos h2 {
    font-size: 1.25rem !important;
  }
  .titulos img {
    width: 25px;
  }
}
.mainAbout {
  background-color: rgb(252, 238, 221);
}

.tituloAbout h1 {
  font-size: 4.5rem;
}
.tituloAbout img {
  margin: 20px !important;
  height: 60px !important;
  width: 60px !important;
}

.ArticuloAbout p {
  font-family: "Open Sans";
}

@media screen and (max-width: 768px) {
  .tituloAbout h1 {
    font-size: 3rem;
    text-align: center;
  }
  .ArticuloAbout p {
    font-size: 1rem;
  }
  img {
    width: 100%;
    height: auto;
  }
}
.separadorAbout {
  color: #a37f41;
}
.separadorAbout hr {
  border: 0;
  height: 0.5px;
  background-color: #a37f41;
  opacity: 1;
}

.comoCurarMate .tituloCuracion img {
  margin: 20px !important;
  height: 40px !important;
  width: 40px !important;
}
.comoCurarMate li {
  font-size: 1rem;
  font-family: "Open Sans";
}
.comoCurarMate .imagenCuracion {
  background-image: url(../assets/img/COMO_CURAR_MATE.jpg);
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  .comoCurarMate .imagenCuracion {
    height: 40vh;
  }
}
.seccionContacto .tituloContacto {
  background-image: linear-gradient(to right top, rgba(0, 0, 0, 0.5764705882), rgba(0, 0, 0, 0.5764705882)), url(../assets/img/pasando-el-mate.jpg);
  background-position: center;
}
.seccionContacto .tituloContacto div {
  width: 80%;
  border: 2px solid rgba(244, 165, 96, 0.496);
}
.seccionContacto .tituloContacto div h1 {
  color: white;
  font-family: "Fjalla One";
  font-size: 5rem;
  letter-spacing: 3px;
  text-shadow: 5px 5px 0px #A37F41;
}
.seccionContacto .tituloContacto div p {
  color: white;
  text-shadow: 2px 2px 0px #A37F41;
  font-family: "Fjalla One";
}
.seccionContacto .colorFondo {
  background-color: #1A1A1A;
}
@media screen and (max-width: 768px) {
  .seccionContacto .tituloContacto {
    background-size: cover;
  }
  .seccionContacto .tituloContacto p {
    font-size: 10px !important;
    text-shadow: 1px 1px 0px #A37F41 !important;
  }
}
.seccionContacto .bordeado {
  background-color: #1A1A1A;
  width: 80%;
}
.seccionContacto .bordeado div {
  border: 1px solid rgba(244, 165, 96, 0.496);
}
.seccionContacto .bordeado div a {
  text-decoration: none;
  color: rgb(53, 138, 249);
}
.seccionContacto .bordeado div a:hover {
  color: #a37f41;
  transform: scale(1.5);
}
.seccionContacto .bordeadoFormulario {
  border: 1px solid rgba(244, 165, 96, 0.496);
  width: 78.7%;
  margin-bottom: 30px;
}
.seccionContacto .bordeadoFormulario form {
  padding: 30px;
  border: outset rgb(0, 0, 0);
  background-color: rgb(252, 238, 221);
}
.seccionContacto .bordeadoFormulario form label {
  color: #a37f41;
  font-weight: 700;
}
.seccionContacto .bordeadoFormulario form .enviar, .seccionContacto .bordeadoFormulario form .limpiar {
  background-color: #a37f41;
  border-radius: 0;
}
.seccionContacto .bordeadoFormulario form .enviar:hover, .seccionContacto .bordeadoFormulario form .limpiar:hover {
  background-color: #eece97; /* Color más brillante al pasar el cursor */
  box-shadow: 0 0 10px rgba(250, 183, 49, 0.8); /* Efecto de iluminación */
}
@media screen and (max-width: 1300px) {
  .seccionContacto .bordeadoFormulario {
    width: 78.5%;
  }
}
@media screen and (max-width: 1000px) {
  .seccionContacto .bordeadoFormulario {
    width: 78.1%;
  }
}
@media screen and (max-width: 768px) {
  .seccionContacto .bordeadoFormulario {
    width: 76%;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
main {
  background-color: rgb(252, 238, 221);
}
main .titulo_termos {
  background-image: linear-gradient(to right top, rgba(0, 0, 0, 0.3960784314), rgba(0, 0, 0, 0.3960784314)), url(../assets/img/paquetes_de_yerba.jpg);
  background-position: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
}
main .titulo_termos h1, main .titulo_termos h2 {
  color: white;
  font-family: "Fjalla One";
  font-size: 5rem;
  letter-spacing: 3px;
  text-shadow: 5px 5px 0px #A37F41;
}
@media screen and (max-width: 768px) {
  main .titulo_termos h1, main .titulo_termos h2 {
    font-size: 3rem;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

.termo1 {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  background-color: rgb(252, 238, 221);
}
.termo1 .fila {
  background-color: rgb(255, 255, 255);
  border: 3px solid, #000;
  position: relative;
}
.termo1 .fila .imagen {
  overflow: hidden;
}
.termo1 .fila .imagen img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  transition: transform 0.2s ease-in-out;
  filter: grayscale(100%);
}
.termo1 .fila .imagen img:hover {
  transform: scale(1.09);
  filter: initial;
}
.termo1 .fila p {
  font-family: "Open Sans";
}
.termo1 .button {
  padding: 10px;
  margin: 10px;
}

@media screen and (max-width: 768px) {
  .termo1 {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
  }
  .termo1 .fila {
    display: flex !important;
    flex-direction: column !important;
    align-items: end !important;
    width: 80% !important;
  }
  .termo1 .fila p {
    padding: 0 !important;
  }
}
@media screen and (max-width: 1400px) {
  .termo1 {
    display: flex !important;
    flex-direction: row !important;
  }
  .termo1 .fila {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .termo1 .fila p {
    padding: 0 !important;
  }
}
@keyframes appear {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
main {
  background-color: rgb(252, 238, 221);
}
main .titulo_yerbas {
  background-image: linear-gradient(to right top, rgba(0, 0, 0, 0.3960784314), rgba(0, 0, 0, 0.3960784314)), url(../assets/img/paquetes_de_yerba.jpg);
  background-position: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
}
main .titulo_yerbas h1, main .titulo_yerbas h2 {
  color: white;
  font-family: "Fjalla One";
  font-size: 5rem;
  letter-spacing: 3px;
  text-shadow: 5px 5px 0px #A37F41;
}
@media screen and (max-width: 768px) {
  main .titulo_yerbas h1, main .titulo_yerbas h2 {
    font-size: 3rem;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

.yerba {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  background-color: rgb(252, 238, 221);
}
.yerba .fila {
  background-color: rgb(255, 255, 255);
  border: 3px solid, #000;
  position: relative;
}
.yerba .fila .imagen {
  overflow: hidden;
}
.yerba .fila .imagen img {
  width: 90%;
  height: 90%;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  transition: transform 0.2s ease-in-out;
  filter: grayscale(100%);
}
.yerba .fila .imagen img:hover {
  transform: scale(1.09);
  filter: initial;
}
.yerba .fila p {
  font-family: "Open Sans";
}
.yerba .button {
  padding: 10px;
  margin: 10px;
}

@media screen and (max-width: 768px) {
  .yerba {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
  }
  .yerba .fila {
    display: flex !important;
    flex-direction: column !important;
    align-items: end !important;
    width: 80% !important;
  }
  .yerba .fila p {
    padding: 0 !important;
  }
}
@media screen and (max-width: 1400px) {
  .yerba {
    display: flex !important;
    flex-direction: row !important;
  }
  .yerba .fila {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .yerba .fila p {
    padding: 0 !important;
    font-size: 1.2rem !important;
  }
}
@keyframes appear {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
main {
  background-color: rgb(252, 238, 221);
}
main .titulo_yerbas {
  background-image: linear-gradient(to right top, rgba(0, 0, 0, 0.3960784314), rgba(0, 0, 0, 0.3960784314)), url(../assets/img/paquetes_de_yerba.jpg);
  background-position: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
}
main .titulo_yerbas h1, main .titulo_yerbas h2 {
  color: white;
  font-family: "Fjalla One";
  font-size: 5rem;
  letter-spacing: 3px;
  text-shadow: 5px 5px 0px #A37F41;
}
@media screen and (max-width: 768px) {
  main .titulo_yerbas h1, main .titulo_yerbas h2 {
    font-size: 3rem;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

.mate {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  background-color: rgb(252, 238, 221);
}
.mate .fila {
  background-color: rgb(255, 255, 255);
  border: 3px solid, #000;
  position: relative;
}
.mate .fila .imagen {
  overflow: hidden;
}
.mate .fila .imagen img {
  width: 90%;
  height: 90%;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  transition: transform 0.2s ease-in-out;
  filter: grayscale(100%);
}
.mate .fila .imagen img:hover {
  transform: scale(1.09);
  filter: initial;
}
.mate .fila p {
  font-family: "Open Sans";
}
.mate .button {
  padding: 10px;
  margin: 10px;
}

@media screen and (max-width: 768px) {
  .mate {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
  }
  .mate .fila {
    display: flex !important;
    flex-direction: column !important;
    align-items: end !important;
    width: 80% !important;
  }
  .mate .fila p {
    padding: 0 !important;
  }
}
@media screen and (max-width: 1400px) {
  .mate {
    display: flex !important;
    flex-direction: row !important;
  }
  .mate .fila {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .mate .fila p {
    padding: 0 !important;
  }
}
@keyframes appear {
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
main {
  background-color: rgb(252, 238, 221);
}
main .titulo_yerbas {
  background-image: linear-gradient(to right top, rgba(0, 0, 0, 0.3960784314), rgba(0, 0, 0, 0.3960784314)), url(../assets/img/paquetes_de_yerba.jpg);
  background-position: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 -6px 12px rgba(0, 0, 0, 0.7);
}
main .titulo_yerbas h1, main .titulo_yerbas h2 {
  color: white;
  font-family: "Fjalla One";
  font-size: 5rem;
  letter-spacing: 3px;
  text-shadow: 5px 5px 0px #A37F41;
}
@media screen and (max-width: 768px) {
  main .titulo_yerbas h1, main .titulo_yerbas h2 {
    font-size: 3rem;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

.bombilla {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  background-color: rgb(252, 238, 221);
}
.bombilla .fila {
  background-color: rgb(255, 255, 255);
  border: 3px solid, #000;
  position: relative;
}
.bombilla .fila .imagen {
  overflow: hidden;
}
.bombilla .fila .imagen img {
  width: 90%;
  height: 90%;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  transition: transform 0.2s ease-in-out;
  filter: grayscale(100%);
}
.bombilla .fila .imagen img:hover {
  transform: scale(1.09);
  filter: initial;
}
.bombilla .fila p {
  font-family: "Open Sans";
}
.bombilla .button {
  padding: 10px;
  margin: 10px;
}

@media screen and (max-width: 768px) {
  .bombilla {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
  }
  .bombilla .fila {
    display: flex !important;
    flex-direction: column !important;
    align-items: end !important;
    width: 80% !important;
  }
  .bombilla .fila p {
    padding: 0 !important;
  }
}
@media screen and (max-width: 1400px) {
  .bombilla {
    display: flex !important;
    flex-direction: row !important;
  }
  .bombilla .fila {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .bombilla .fila p {
    padding: 0 !important;
  }
}
.offcanvas-title {
  font-size: 1.9rem;
  font-family: "Fjalla One";
  font-weight: 400;
}

.divHrOffcanvas {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.divHrOffcanvas .hrOffcanvas {
  width: 90%;
  border: 0;
  height: 1.5px;
  background-color: #a37f41;
  opacity: 1;
}

#listaProductosCarrito {
  background-color: rgb(255, 0, 0);
  width: 100%;
}/*# sourceMappingURL=estilos.css.map */