@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
:root {
  --color-primario: #ff4747;
  --color-secundario: #ffac30;
  --color-1: #f3f3f3;
  --color-2: #fff;
  --color-3: #fff;
  --letras-color: #757575;
  --borde_icono_redes: #a3a3a3;
  --icono_redes: #8a8a8a;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
}

.display, .subtotal--mi_carrito, .div_button_compra--mi_carrito, .delete_item, .elements_info_item, .data_info_item, .div_img_item, .detail_item, .item--mi_carrito, .div_empty--mi_carrito, .total_item--floating_menu_carrito, .menu_carrito, .floating_menu_carrito, .div_center_footer, .footer_card, footer, .header_content_preview_imagen, .premiew_image_producto, .content_preview_image, .btn_pedir, .select_metodo, .content_metodos_pago button, .content_metodos_pago, .content_qr_image, .span_title_emergente, .div_emergente, .div_cerrar, .header_mi_carrito, .h2_b2, .title_informacion_producto, .ButtonVideoYoutube, .ContentImagenesProducto, .BoxImagenesProducto, .BoxDescripcionProducto, .BoxContentInformationProducto, .buttons_carrito--productos, .burbuja_cantidad--producto, .btn_productos, .producto_informacion, .contenedor_imagen, .productos, .div_productos, .BoxSocialButtons .SocialButton, .SearchBar, .ContentSearchBar, .BoxContentSearchProduct, header, .BoxButtonMetodosPago, .ContentButtonsPrimary, .BoxInformationNavigation, .BoxLineaInformationNavigation, .HeaderCalogoInformationNavigation, .BoxCardInformationNavigation, .CardCategory, .PrincipalCardCategory, .BoxMoreCategory, .BoxCardCategory, .div_category, .loading, .btn_g span, .button_compra--mi_carrito span, .button_comprar--floating_menu_carrito span, .header_content_preview_imagen button span, .btn_pedir_text span, .content_qr_image button span, .button--icono_cerrar_metodos_svg span, .cerrar_btn span, .btn_open_imagen_producto span, .BoxButtonMetodosPago .ButtonMetodosPago span, .ContentButtonsPrimary a span, .HeaderCalogoInformationNavigation button span {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  background: var(--color-1);
  display: flex;
  flex-direction: column;
}

.p_css {
  letter-spacing: 0.4px;
  font-weight: 400;
  font-size: 0.9em;
  color: var(--letras-color);
}

.btn_g, .button_compra--mi_carrito, .button_comprar--floating_menu_carrito, .header_content_preview_imagen button, .btn_pedir_text, .content_qr_image button, .button--icono_cerrar_metodos_svg, .cerrar_btn, .btn_open_imagen_producto, .BoxButtonMetodosPago .ButtonMetodosPago, .ContentButtonsPrimary a, .HeaderCalogoInformationNavigation button {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 400;
  font-size: 1em;
  border-radius: 5px;
  border: 0;
  color: #fff;
  min-width: 100px;
}
.btn_g:hover, .button_compra--mi_carrito:hover, .button_comprar--floating_menu_carrito:hover, .header_content_preview_imagen button:hover, .btn_pedir_text:hover, .content_qr_image button:hover, .button--icono_cerrar_metodos_svg:hover, .cerrar_btn:hover, .btn_open_imagen_producto:hover, .BoxButtonMetodosPago .ButtonMetodosPago:hover, .ContentButtonsPrimary a:hover, .HeaderCalogoInformationNavigation button:hover {
  opacity: 0.8;
}
.btn_g i, .button_compra--mi_carrito i, .button_comprar--floating_menu_carrito i, .header_content_preview_imagen button i, .btn_pedir_text i, .content_qr_image button i, .button--icono_cerrar_metodos_svg i, .cerrar_btn i, .btn_open_imagen_producto i, .BoxButtonMetodosPago .ButtonMetodosPago i, .ContentButtonsPrimary a i, .HeaderCalogoInformationNavigation button i {
  color: #fff;
  border-radius: 5px;
  padding: 10px 10px;
  font-size: 25px;
}
.btn_g span, .button_compra--mi_carrito span, .button_comprar--floating_menu_carrito span, .header_content_preview_imagen button span, .btn_pedir_text span, .content_qr_image button span, .button--icono_cerrar_metodos_svg span, .cerrar_btn span, .btn_open_imagen_producto span, .BoxButtonMetodosPago .ButtonMetodosPago span, .ContentButtonsPrimary a span, .HeaderCalogoInformationNavigation button span {
  backdrop-filter: grayscale(30%);
  height: 100%;
  width: 100%;
  padding: 10px 10px;
  text-align: center;
}

.loading {
  position: absolute;
  flex-direction: column;
  visibility: visible;
  opacity: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: var(--color-1);
  transition: ease 0.5s;
}

#loading {
  border: 7px solid #fff;
  border-top: 7px solid var(--color-primario);
  border-top-style: groove;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  animation: girar 0.6s linear infinite;
  margin: 15px 0;
}

@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#loading_letter {
  letter-spacing: 0.4px;
  font-weight: 500;
  font-size: 1.2em;
  color: var(--letras-color);
}

.div_promo {
  margin: 2% 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.promo {
  text-align: center;
  width: 70%;
  border-radius: 8px;
}

.img_promo {
  border-radius: 8px;
  max-width: 100%;
  max-height: 300px;
  border: 1px solid var(--color-secundario);
  box-shadow: 0 0 4px var(--color-secundario);
}

@media screen and (max-width: 768px) {
  .promo {
    width: 95%;
  }
}
.div_category {
  min-height: 0px;
  min-height: 50px;
  margin: 5px 5px;
}

.BoxCardCategory {
  justify-content: flex-start;
  overflow: auto;
  margin-left: 5px;
}
.BoxCardCategory::-webkit-scrollbar {
  height: 0px;
}
.BoxCardCategory::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--color-primario);
}

.BoxMoreCategory {
  align-items: flex-start;
  width: 50px;
}

.PrincipalCardCategory {
  cursor: pointer;
  background-color: var(--color-primario);
  color: #fff;
  height: 45px;
  width: 45px;
  min-width: 45px;
  font-size: 30px;
  border-radius: 10px;
  margin: 5px;
  box-shadow: 0 0 1px 1px var(--color-primario);
}
.PrincipalCardCategory:hover {
  background-color: var(--color-primario);
  color: #fff;
}

.CardCategory {
  cursor: pointer;
  justify-content: flex-start;
  height: 35px;
  margin: 5px;
  border-radius: 10px;
  min-width: 100px;
  max-width: 250px;
  background-color: var(--color-3);
  box-shadow: 0 0 1px 1px var(--color-primario);
}
.CardCategory:hover {
  background-color: var(--color-primario);
}
.CardCategory:hover span {
  color: #fff;
}
.CardCategory .ColorCardCategory {
  background-color: var(--color-primario);
  height: 100%;
  width: 18px;
  border-radius: 8px 0 0 8px;
}
.CardCategory span {
  margin: 0 5px;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
  font-weight: 500;
  font-size: 0.8em;
  color: var(--letras-color);
}

.isCategoryFullView {
  overflow: none;
  min-height: 70px;
  flex-wrap: wrap;
}
.isCategoryFullView .CardCategory {
  max-width: none;
}

.BoxCardInformationNavigation {
  justify-content: flex-start;
  flex-direction: column;
  z-index: 1;
  transition: ease 0.4s;
  position: fixed;
  align-items: center;
  left: -400px;
  background-color: var(--color-3);
  width: 400px;
  top: 0;
  bottom: 0;
}
@media screen and (max-width: 600px) {
  .BoxCardInformationNavigation {
    left: -100%;
    width: 100%;
  }
}

.BoxCardInformationNavigation--Activado {
  left: 0;
}

.HeaderCalogoInformationNavigation {
  width: 100%;
  justify-content: space-around;
  margin: 5px 0;
}
.HeaderCalogoInformationNavigation p {
  color: var(--letras-color);
  font-size: 1.2em;
}
.HeaderCalogoInformationNavigation button {
  background-color: var(--color-primario);
}

.ContenidoInformationNavigation {
  margin: auto 0;
}
.ContenidoInformationNavigation h2 {
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.5px;
  color: var(--letras-color);
}

.BoxLineaInformationNavigation {
  width: 100%;
  margin: 15px 0;
}

.LineaInformationNavigation {
  width: 80%;
  height: 2px;
  background-color: var(--color-primario);
  border: 0;
}

.BoxInformationNavigation {
  width: 100%;
  flex-direction: column;
}

.DescriptionInformationNavigation, .DireccionInformationNavigation {
  width: 80%;
  font-size: 0.9em;
  color: var(--letras-color);
  letter-spacing: 0.2px;
  text-align: center;
}

.DireccionInformationNavigation {
  margin: 10px 0;
}

.ContentButtonsPrimary {
  width: 70%;
}
.ContentButtonsPrimary a {
  text-decoration: none;
  min-width: 0;
  background-color: var(--color-primario);
}
.ContentButtonsPrimary a:first-child {
  width: calc(100% - 50px);
}
.ContentButtonsPrimary .IconWhatsappInformationNavigation {
  margin: 0 2px;
  min-width: 0;
}

.BoxButtonMetodosPago {
  width: 100%;
}
.BoxButtonMetodosPago .ButtonMetodosPago {
  width: 70%;
  margin: 10px 0;
  background-color: var(--color-primario);
}

.BoxCabeceraContenido {
  display: flex;
  justify-content: flex-start;
}
@media screen and (max-width: 768px) {
  .BoxCabeceraContenido {
    flex-direction: column;
    align-items: center;
  }
}

header {
  justify-content: space-around;
  width: 35%;
  min-width: 320px;
  height: 90px;
  background-color: var(--color-3);
  border: 2px solid var(--color-2);
  border-top: none;
  border-left: none;
  border-radius: 0 0 70px 0;
}
@media screen and (max-width: 768px) {
  header {
    width: 95%;
    border: 2px solid var(--color-2);
    border-radius: 0 0 20px 20px;
  }
}

@media screen and (max-width: 600px) {
  .header--OnRedes {
    margin-top: 50px;
  }
}

.ButtonMenuInfo {
  border: 0;
  margin: 0 10px;
  background-color: transparent;
  cursor: pointer;
}
.ButtonMenuInfo i {
  font-size: 30px;
  color: var(--letras-color);
}

.CabeceraImgLogo {
  width: 70px;
  max-height: 70px;
  border-radius: 10%;
}

.CabeceraTitulo {
  padding-right: 10px;
  width: 60%;
  max-height: 90px;
  word-wrap: break-word;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: 1.3px;
  font-weight: 400;
  font-size: 1em;
  color: var(--letras-color);
}

.BoxContentSearchProduct {
  width: 62%;
  height: 80px;
  margin: 0 1.5%;
}
@media screen and (max-width: 768px) {
  .BoxContentSearchProduct {
    width: 100%;
    margin: 0;
  }
}
@media screen and (max-width: 600px) {
  .BoxContentSearchProduct {
    height: 100%;
    flex-direction: column-reverse;
  }
}

.ContentSearchBar {
  width: 100%;
  margin-right: 5px;
  position: relative;
  transition-duration: 500ms;
}
@media screen and (max-width: 768px) {
  .ContentSearchBar {
    margin: 0 5px;
  }
}

.SearchBar {
  flex-direction: row;
  transition-duration: 500ms;
  width: 100%;
  background-color: var(--color-3);
  border: 2px solid var(--borde_icono_redes);
  border-radius: 80px 20px 20px 20px;
}
@media screen and (max-width: 1024px) {
  .SearchBar {
    width: 95%;
    border-radius: 20px;
  }
}
@media screen and (max-width: 600px) {
  .SearchBar {
    margin: 15px 0;
  }
}
.SearchBar i {
  color: var(--letras-color);
  padding: 0px 10px 0px 20px;
  font-size: 30px;
}
.SearchBar .IconCloseSearchBar {
  display: none;
  cursor: pointer;
  padding: 0;
  padding-right: 10px;
}
.SearchBar .IconCloseSearchBar--OnFocus {
  display: block;
}
.SearchBar input {
  font-size: 1em;
  width: 100%;
  height: 50px;
  color: var(--letras-color);
  border: 0;
  border-radius: 0px 20px 20px 0;
  outline: none;
  background-color: transparent;
}
.SearchBar input::placeholder {
  font-size: 1.1em;
  font-weight: 400;
  text-align: center;
  color: var(--letras-color);
}

.ResultadosSearchBar {
  display: none;
  list-style: none;
  position: absolute;
  top: 54px;
  border-radius: 0 0 20px 20px;
  background-color: var(--color-3);
  border: 1px solid var(--borde_icono_redes);
  border-top: 0px;
  width: 95%;
  max-height: 200px;
  overflow-x: auto;
  overflow-y: 0;
}
@media screen and (max-width: 600px) {
  .ResultadosSearchBar {
    top: 70px;
    width: 90%;
  }
}
.ResultadosSearchBar li {
  cursor: pointer;
  color: var(--letras-color);
  font-size: 0.9em;
  padding: 10px 0;
  padding-left: 20px;
}
.ResultadosSearchBar li:last-child {
  border-radius: 0 0 15px 15px;
}
.ResultadosSearchBar li:hover {
  transition: ease 0.15s;
  color: var(--color-3);
  background-color: var(--color-primario);
}
.ResultadosSearchBar::-webkit-scrollbar {
  width: 2px;
}
.ResultadosSearchBar::-webkit-scrollbar-button {
  height: 4%;
}
.ResultadosSearchBar::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--color-secundario);
}

.ResultadosSearchBar--OnFocusSearchBar {
  z-index: 1;
  display: block;
}

.BoxSocialButtons {
  display: flex;
}
@media screen and (max-width: 600px) {
  .BoxSocialButtons {
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 0;
    background-color: var(--color-3);
  }
}
.BoxSocialButtons .SocialButton {
  transition: ease 0.3s;
  margin-left: 4px;
  text-decoration: none;
  background: var(--color-3);
  height: 50px;
  width: 50px;
  border-radius: 15px;
  border: 2px solid var(--borde_icono_redes);
}
@media screen and (max-width: 600px) {
  .BoxSocialButtons .SocialButton {
    border-top: 0;
    margin: 0 1px;
    width: 100%;
    border-radius: 0 0 10px 10px;
  }
}
.BoxSocialButtons .SocialButton i {
  background-color: transparent;
  color: var(--letras-color);
  font-size: 30px;
}
.BoxSocialButtons .SocialButton:first-child {
  margin: 0;
}
.BoxSocialButtons .SocialButton:hover {
  background: var(--color-primario);
}
.BoxSocialButtons .SocialButton:hover i {
  color: #fff;
}

.BoxSocialButtons--OnFocusSearchBar {
  display: none;
}
@media screen and (max-width: 600px) {
  .BoxSocialButtons--OnFocusSearchBar {
    display: flex;
  }
}

.body_1 {
  padding-bottom: 50px;
  width: 100%;
}

.div_productos {
  margin: 10px 0;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.productos {
  flex-direction: column;
  justify-content: flex-start;
  margin: 2px;
  min-width: 240px;
  max-width: 20%;
  height: 310px;
  border-radius: 5px;
  box-shadow: 0 0 3px var(--color-2);
  border: 2px solid var(--color-2);
  background: var(--color-3);
}
@media screen and (max-width: 600px) {
  .productos {
    height: 350px;
    max-height: 350px;
    margin: 1px;
    min-width: 100px;
    width: calc(50% - 2px);
    max-width: calc(50% - 8px);
  }
}
.productos:hover {
  box-shadow: 0 0 10px var(--color-2);
}

.contenedor_imagen {
  height: 100%;
  width: 100%;
  flex-direction: column;
  text-align: center;
  border-radius: 5px;
}

.contenedor_visualizador_imagen {
  position: relative;
  right: 0;
  width: 100%;
}

.btn_open_imagen_producto {
  position: absolute;
  bottom: 0;
  right: 2px;
  background-color: var(--color-primario);
  opacity: 0.7;
  min-width: 0px;
}
.btn_open_imagen_producto i {
  padding: 8px;
  font-size: 25px;
}

.productos img {
  max-height: 200px;
  max-width: 100%;
  border-radius: 4px;
}

.separador {
  width: 99%;
  height: 0px;
  background-color: var(--color-secundario);
  border: none;
}

.producto_informacion {
  flex-direction: column;
  width: 100%;
  margin: auto 0 5px 0;
}

.producto_titulo {
  text-align: center;
  margin: 5px 0;
  width: 95%;
  color: var(--letras-color);
  letter-spacing: 0.4px;
  font-size: 0.8em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.producto_precio {
  color: var(--letras-color);
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 1.3em;
}

.producto_moneda {
  font-weight: 600;
}

.btn_productos {
  width: 100%;
}

.div--burbuja_cantidad--producto {
  display: flex;
  justify-content: flex-end;
  height: 0;
  background-color: #ff9a00;
  width: 100%;
}

.burbuja_cantidad--producto {
  opacity: 0;
  position: relative;
  color: #fff;
  background-color: var(--color-primario);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.burbuja_cantidad--producto--active {
  opacity: 1;
}

.buttons_carrito--productos {
  display: none;
  transition: ease 0.3s;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  margin-bottom: 1px;
}
.buttons_carrito--productos button {
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  background-color: var(--color-primario);
  box-shadow: 0 0 4px var(--color-primario);
  color: #fff;
  font-size: 1.5em;
  width: calc(50% - 1px);
  height: 38px;
}
@media screen and (max-width: 600px) {
  .buttons_carrito--productos button {
    height: 40px;
  }
}
.buttons_carrito--productos button:active {
  opacity: 0.6;
}

.buttons_carrito--productos--active {
  display: flex;
}

.informacion_buttons_carrito--productos {
  width: 100%;
  height: 100%;
  justify-content: center;
}
.informacion_buttons_carrito--productos button {
  margin: 0 5px;
  height: 50px;
  width: 200px;
}

.btn_compra,
.btn_info {
  cursor: pointer;
  border: none;
  padding: 8px 0;
  margin: 0 1px;
  margin-bottom: 1px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-shadow: 0 0 1px var(--color-3);
  background: var(--color-secundario);
  box-shadow: 0 0 2px var(--color-secundario);
  color: #fff;
  width: 100%;
}

.btn_compra {
  background-color: var(--color-primario);
  box-shadow: 0 0 4px var(--color-primario);
}

.btn_compra--carrito_active {
  display: none;
}

.btn_info:hover {
  box-shadow: 0 0 4px var(--color-secundario);
}

.btn_compra:hover {
  box-shadow: 0 0 4px var(--color-primario);
}

.btn_detalle_compra {
  font-weight: bolder;
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  margin: 0 0 10px 0;
  color: rgb(32, 32, 32);
  box-shadow: 0 0 4px rgb(255, 166, 0);
  background-image: radial-gradient(ellipse farthest-corner, rgb(255, 230, 0), rgb(255, 166, 0));
}
.btn_detalle_compra:hover {
  box-shadow: 0 0 10px rgb(255, 166, 0);
}

.body_2 {
  z-index: 1000;
  transition: ease 0.4s;
  position: fixed;
  width: 100%;
  min-height: 100vh;
  right: -100%;
}

.layer_producto {
  overflow: auto;
  height: 100vh;
  background: var(--color-1);
}

.BoxContentInformationProducto {
  height: 100%;
  max-height: 90vh;
}
@media screen and (max-width: 1024px) {
  .BoxContentInformationProducto {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .BoxContentInformationProducto {
    max-height: none;
  }
}

.NombreProducto,
.PrecioProducto,
.DescripcionProducto {
  color: var(--letras-color);
  margin: 10px 0;
  font-size: 1em;
}

.DescripcionProducto {
  overflow: auto;
  text-align: start;
  white-space: pre-line;
}
.NombreProducto {
  font-weight: 500;
  font-size: 1.2em;
}

.PrecioProducto {
  font-size: 2.2em;
  font-weight: 600;
}

.BoxDescripcionProducto {
  text-align: center;
  justify-content: flex-start;
  flex-direction: column;
  max-height: 500px;
  width: 40%;
}
@media screen and (max-width: 1024px) {
  .BoxDescripcionProducto {
    width: 70%;
  }
}
@media screen and (max-width: 768px) {
  .BoxDescripcionProducto {
    max-height: none;
  }
}
@media screen and (max-width: 600px) {
  .BoxDescripcionProducto {
    width: 90%;
  }
}

.BoxImagenesProducto {
  width: 60%;
  margin-top: 10px;
}
@media screen and (max-width: 1024px) {
  .BoxImagenesProducto {
    width: 70%;
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 600px) {
  .BoxImagenesProducto {
    width: 100%;
  }
}

.ContentImagenesProducto {
  flex-direction: column;
  margin-right: 20px;
}
@media screen and (max-width: 1024px) {
  .ContentImagenesProducto {
    margin: 10px 0;
    flex-direction: unset;
  }
}

.ContentImagenPrincipalProducto {
  text-align: center;
}

.ImgPrincipal {
  border-radius: 20px;
  max-height: 400px;
  max-width: 400px;
}
@media screen and (max-width: 600px) {
  .ImgPrincipal {
    max-width: 95%;
    max-height: 100%;
  }
}

.VideoYoutubePrincipal {
  height: 300px;
  width: 530px;
  border-radius: 10px;
  border: 2px solid var(--borde_icono_redes);
}
@media screen and (max-width: 600px) {
  .VideoYoutubePrincipal {
    max-width: 95%;
    max-height: 100%;
  }
}

.ImgSecondary {
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.3;
  border-radius: 10px;
  margin: 2px 0;
  width: 80px;
  height: 80px;
  transition: ease 0.3s;
}
.ImgSecondary:hover {
  transform: scale(1.1);
  opacity: 1;
}
@media screen and (max-width: 1024px) {
  .ImgSecondary {
    margin: 0 2px;
    width: 60px;
    height: 60px;
  }
}

.ButtonVideoYoutube {
  border: 2px solid var(--borde_icono_redes);
}
.ButtonVideoYoutube i {
  font-size: 40px;
  color: var(--color-primario);
}

.ImgFocus {
  border: 2px solid var(--borde_icono_redes);
  opacity: 1;
}

.title_informacion_producto {
  justify-content: start;
  width: 30%;
  color: var(--letras-color);
}

.line_title_informacion_producto {
  border: 0;
  background: var(--color-primario);
  width: 3px;
  height: 20px;
  margin-right: 15px;
}

.h2_b2 {
  text-align: center;
  color: var(--letras-color);
  font-size: 1.2em;
  font-weight: 400;
}

.div_cerrar, .header_mi_carrito {
  justify-content: space-evenly;
  position: sticky;
  top: 0;
  background-color: var(--color-3);
  border-bottom: 1px solid var(--color-primario);
  padding: 10px 0;
}

.cerrar_btn {
  background-color: var(--color-primario);
}

.div_btn_comprar {
  width: 100%;
  text-align: center;
  margin: 10px 0;
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .div_btn_comprar {
    margin-right: 0;
    margin-bottom: 100px;
  }
}

.btn_compra_informacion {
  font-size: 1.2em;
  padding: 15px;
  outline: none;
  width: 100%;
}

.div_emergente {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(10, 19, 24, 0.5294117647);
}

.emergente {
  position: relative;
  background-color: var(--color-3);
  box-shadow: 0 0 10px #525459;
  min-height: 200px;
  min-width: 550px;
  height: 80%;
  border-radius: 10px;
  padding: 8px 0;
  overflow: auto;
}
.emergente::-webkit-scrollbar {
  width: 4px;
}
.emergente::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--borde_icono_redes);
}

.span_title_emergente {
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
  color: var(--letras-color);
  font-weight: 500;
}

.text--span_title_emergente {
  font-size: 1.2em;
}

.button--icono_cerrar_metodos_svg {
  background-color: var(--color-primario);
}

.text--span_title_emergente,
.button--icono_cerrar_metodos_svg {
  margin: 0 10px;
}

.svg_icono_cerrar {
  cursor: pointer;
  font-size: 35px;
  margin-left: 5px;
  color: var(#fff);
}

.div_metodos, .div_select_metodos {
  display: flex;
  align-items: center;
  margin-top: 10px;
  flex-direction: column;
}
.div_metodos::-webkit-scrollbar, .div_select_metodos::-webkit-scrollbar {
  width: 2px;
}
.div_metodos::-webkit-scrollbar-thumb, .div_select_metodos::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--color-secundario);
}

.metodos, .select_metodo {
  cursor: pointer;
  transition: ease 0.2s;
  margin: 2px 0;
  width: 92%;
  border-radius: 7px;
  padding: 15px 10px;
  box-shadow: 0 0 0 0.5px var(--letras-color) inset;
  background-color: transparent;
  color: var(--letras-color);
  font-size: 0.9em;
  letter-spacing: 0.5px;
}
.metodos:hover, .select_metodo:hover {
  font-weight: 500;
  color: var(--color-primario);
  box-shadow: 2px 2px 0 var(--color-primario) inset, -2px -2px 0 var(--color-primario) inset;
}
.metodos:hover i, .select_metodo:hover i {
  font-size: 10px;
  box-shadow: 0 0 4px var(--color-primario);
  border: 5px solid var(--color-primario);
}
.metodos:hover span, .select_metodo:hover span {
  font-weight: 500;
}

.content_qr_image {
  width: 100%;
  flex-direction: column;
  text-align: center;
}
.content_qr_image h3 {
  color: var(--letras-color);
}
.content_qr_image img {
  margin: 20px 0;
  width: 250px;
}
.content_qr_image button {
  background-color: var(--color-primario);
}

.content_metodos_pago {
  justify-content: flex-start;
  padding: 5px;
}
.content_metodos_pago button {
  cursor: pointer;
  border: 2px solid var(--color-primario);
  background-color: transparent;
  color: var(--letras-color);
  font-size: 0.9em;
  border-radius: 10px;
  padding: 10px;
  margin: 0 5px;
}
.content_metodos_pago button i {
  margin-right: 10px;
  font-size: 25px;
}
.content_metodos_pago button:hover {
  box-shadow: 0 0 5px var(--color-primario);
}

.div_select_metodos {
  max-height: calc(100% - 110px);
}
.div_select_metodos .content_qr_image {
  flex-direction: column-reverse;
}
.div_select_metodos .content_qr_image h3 {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.div_select_metodos .content_qr_image .qr_image_descargar {
  margin: 10px 0;
}
.div_select_metodos .content_qr_image .img_descargar_qr {
  width: 150px;
  margin: 0;
}

.select_metodo {
  justify-content: flex-start;
}

.select_metodo--active {
  color: var(--color-primario);
  box-shadow: 3px 3px 0 var(--color-primario) inset, -3px -3px 0 var(--color-primario) inset;
}
.select_metodo--active i {
  font-size: 10px;
}
.select_metodo--active span {
  font-weight: 500;
}

.select_metodo_text {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.select_circle_svg {
  margin-right: 20px;
  margin-left: 10px;
  font-size: 12px;
  border-radius: 100%;
  color: var(--color-3);
  background-color: var(--color-3);
  border: 1px solid var(--letras-color);
}

.select_circle_svg--active {
  box-shadow: 0 0 4px var(--color-primario);
  border: 4px solid var(--color-primario);
}

.btn_pedir {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.btn_pedir_text {
  position: relative;
  background-color: var(--color-primario);
  color: #fff;
  width: 100%;
}
.btn_pedir_text i {
  font-size: 30px;
}
.btn_pedir_text span {
  font-size: 1em;
  padding: 15px 0;
}

.btn_pedir_svg {
  font-size: 40px;
  margin-right: 5px;
  color: #fff;
}

.mini_body {
  transition: ease 0.6s;
  opacity: 0;
}

.content_preview_image {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(10, 19, 24, 0.9607843137);
}

.premiew_image_producto {
  flex-direction: column;
}
.premiew_image_producto img {
  width: 95%;
  max-width: 500px;
  max-height: calc(100vh - 60px);
}

.header_content_preview_imagen {
  margin: 5px 0;
  width: 95%;
}
.header_content_preview_imagen button {
  width: 100%;
  background-color: var(--color-primario);
}

.footer_card {
  flex-direction: column;
  padding: 2rem 0 2rem 0;
  border-radius: 5px;
  background-color: var(--color-3);
  border: 2px solid var(--color-2);
  width: 90%;
  margin: 20px 0;
}

.div_center_footer {
  flex-direction: column;
  width: 90%;
}

.separador_footer {
  margin: 15px 0;
  width: 50%;
  height: 1px;
  background: #dedede;
}

.text_footer_mg {
  text-align: center;
  color: var(--letras-color);
  font-weight: 500;
}

.link_mg_footer {
  display: block;
  color: var(--color-primario);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 5px;
  border: 2px solid var(--color-2);
  padding: 5px 5px;
  margin-top: 5px;
}

.link_mg_report {
  color: var(--color-primario);
  text-decoration: none;
}

.img_footer_mg {
  display: flex;
  width: 80px;
  border-radius: 50%;
}

.text_report_mg {
  font-size: 1.1em;
  font-weight: 500;
}

@media screen and (max-width: 600px) {
  .footer_card {
    width: 90%;
  }
  .text_footer_mg {
    font-weight: 400;
  }
}
.floating_menu_carrito {
  transition: ease 0.4s;
  justify-content: space-between;
  height: 50px;
  width: 450px;
  padding: 5px;
  border-radius: 10px;
  position: fixed;
  bottom: -65px;
  left: 50%;
  margin-left: -225px;
  border: 2px solid var(--color-primario);
  background-color: var(--color-3);
  z-index: auto;
}

.floating_menu_carrito--active {
  bottom: 5px;
}

.menu_carrito {
  cursor: pointer;
  border-radius: 8px;
  width: 50px;
  height: 100%;
  background-color: var(--color-primario);
}
.menu_carrito i {
  font-size: 35px;
  color: #fff;
}

.total_item--floating_menu_carrito {
  color: var(--letras-color);
  align-items: flex-start;
  flex-direction: column;
}

.number_total_item--floating_menu_carrito {
  font-size: 0.8em;
}

.price_total_item--floating_menu_carrito {
  font-size: 1.3em;
}

.button_comprar--floating_menu_carrito {
  background-color: var(--color-primario);
  height: 100%;
  width: 200px;
}
.button_comprar--floating_menu_carrito i {
  margin-right: 5px;
  font-size: 40px;
}
.button_comprar--floating_menu_carrito span {
  font-size: 1.1em;
}

.div_mi_carrito {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  background-color: rgba(0, 0, 0, 0.5);
}

.mi_carrito {
  overflow: auto;
  position: relative;
  background-color: #fff;
  width: 400px;
  height: 100vh;
}

.mi_carrito::-webkit-scrollbar {
  width: 5px;
}

.mi_carrito::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: var(--borde_icono_redes);
}

.header_mi_carrito {
  z-index: 1;
  justify-content: space-between;
  border: 0;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0;
}
.header_mi_carrito h2 {
  color: var(--letras-color);
  font-size: 1.3em;
}

.pedidos--mi_carrito {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--color-3);
}

.items--pedidos--mi_carrito {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 155px);
}

.div_empty--mi_carrito {
  color: var(--letras-color);
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.div_empty--mi_carrito i {
  font-size: 80px;
}
.div_empty--mi_carrito span {
  font-size: 1.5em;
}

.item--mi_carrito {
  justify-content: space-between;
  border-radius: 5px;
  margin: 3px 0;
  width: 95%;
  min-height: 80px;
  max-height: 80px;
  background-color: var(--color-1);
}
.item--mi_carrito:first-child {
  margin-top: 10px;
}

.detail_item {
  width: calc(100% - 50px);
}

.img_item {
  margin: 0 10px;
  border-radius: 5px;
  max-width: 60px;
  max-height: 60px;
}

.info_item {
  width: calc(100% - 100px);
  color: var(--letras-color);
}

.title_info_item {
  width: 95%;
  margin-bottom: 5px;
  font-size: 0.9em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.data_info_item {
  justify-content: flex-start;
}

.elements_info_item:first-child {
  margin-right: 25px;
}

.icon_data_info_item {
  font-size: 30px;
  margin-right: 2px;
}

.delete_item {
  cursor: pointer;
  border: 0;
  height: 100%;
  width: 50px;
  border-radius: 10px 0 0 10px;
  background-color: var(--color-primario);
}
.delete_item:hover {
  opacity: 0.8;
}

.icon_delete_item {
  font-size: 25px;
  color: #fff;
}

.div_button_compra--mi_carrito {
  position: fixed;
  bottom: 0px;
  flex-direction: column;
  background-color: var(--color-1);
  border-top: 2px solid var(--borde_icono_redes);
  padding: 5px 0px;
  width: 395px;
}

.subtotal--mi_carrito {
  justify-content: space-between;
  margin-bottom: 5px;
  color: var(--letras-color);
  font-size: 1.1em;
  width: 90%;
}

.button_compra--mi_carrito {
  background-color: var(--color-primario);
  width: 95%;
}
.button_compra--mi_carrito i {
  font-size: 40px;
}
.button_compra--mi_carrito span {
  font-size: 1.2em;
  padding: 15px 0;
}

.fb_chat--inactive {
  display: none;
}

@media screen and (max-width: 600px) {
  .title_informacion_producto {
    width: 80%;
  }
  .div_category {
    margin: 0;
  }
  .div_category::-webkit-scrollbar {
    height: 0;
  }
  .BoxCardCategory {
    margin: 0;
  }
  .btn_open_imagen_producto {
    right: 0;
  }
  .btn_open_imagen_producto i {
    font-size: 30px;
  }
  .close_mini_body {
    height: 50px;
  }
  .producto_titulo {
    font-size: 0.9em;
  }
  .producto_informacion {
    font-size: 0.9em;
  }
  .producto_informacion {
    margin: auto 0 5px 0;
  }
  .btn_productos {
    flex-direction: column;
  }
  .btn_compra,
  .btn_info {
    width: 99%;
    font-size: 1em;
    padding: 8px 0;
  }
  .emergente {
    min-width: 90%;
    width: 95%;
    height: 95%;
  }
  .btn_compra_informacion {
    padding: 15px;
    font-size: 1em;
    width: 100%;
  }
  .floating_menu_carrito--active {
    bottom: 0;
  }
  .floating_menu_carrito {
    left: 0;
    margin: 0;
    width: calc(100% - 10px);
    width: calc(100% - 20px);
    border-radius: 0;
    border: 0;
    padding: 5px 10px;
  }
  .div_mi_carrito {
    justify-content: center;
  }
  .mi_carrito {
    width: 100%;
  }
  .icon_delete_item {
    font-size: 30px;
  }
  .div_button_compra--mi_carrito {
    width: 100%;
  }
}