@font-face {
  font-family: 'Montserrat Regular';
  src: url(../fonts/montserrat-400.woff2);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat Medium';
  src: url(../fonts/montserrat-500.woff2);
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat Bold';
  src: url(../fonts/montserrat-600.woff2);
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
:root {
  --principal: #1d4389;
  --secundario: #DFE8F8;
  --warning: #ff9e5d;
  --acento: #FFE470;
  --hover-principal: #4276D7;
  --blanco: #ffffff;
  --texto: #272724;
  --negro: #272724;
  --gray-text: #929292;
  --card-color: #f5f5f5;
  --border-gray: #ededed;
  --border-color: rgba(65, 0, 153, .2);
  --titulo-size: 1.8rem;
  --border-radius: 1rem;
  --padd-top-section: 1.4rem;
  --padd-top: 6rem;
  --padd-bottom: 6rem;
  --font-regular: 'Montserrat Regular';
  --font-medium: 'Montserrat Medium';
  --font-bold: 'Montserrat Bold';
}
* {
  font-family: 'Montserrat Regular', system-ui, Arial, sans-serif;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat Regular', system-ui, Arial, sans-serif;
  font-size: 16px;
  color: var(--texto);
  background: #f8f8f8;
}


.btn-primary {
  height: 48px;
  width: 100%;
  font-size: 1rem;
  letter-spacing: .02rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  border: 0;
  border-radius: 1.6rem;
  background: var(--principal);
  border: 1px solid var(--principal);
  color: var(--blanco);
  transition: all .3s;
}

.btn-primary:hover {
  color: var(--principal);
  background: var(--secundario);
  border: 1px solid var(--principal);
}

.btn-outline-primary-2 {
  height: 48px;
  width: 100%;
  font-size: 1rem;
  letter-spacing: .02rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  border: 0;
  border-radius: 1.6rem;
  background: transparent;
  border: 1px solid var(--principal);
  color: var(--principal);
  transition: all .3s;
}

.btn-outline-primary-2:hover {
  color: var(--principal);
  background: var(--secundario);
  border: 1px solid var(--principal);
}

.btn-outline-warning-2 {
  height: 48px;
  width: 100%;
  font-size: 1rem;
  letter-spacing: .02rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  border: 0;
  border-radius: 1.6rem;
  background: transparent;
  border: 1px solid var(--warning);
  color: var(--warning);
  transition: all .3s;
}

.btn-outline-warning-2:hover {
  color: var(--warning);
  background: var(--secundario);
  border: 1px solid var(--warning);
}

.bodyPag.scrollnone {
  overflow: hidden;
}
.pl-0{
  padding-left: 0;
}
.pr-1{
  padding-right: 1rem;
}
.text-danger{
  color: red;
}
a {
  text-decoration: none;
}
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.lozad-fade {
  animation-name: fade-lozad;
  animation-duration: 2s;
}

@keyframes fade-lozad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* .container{
	max-width: 1240px;
} */
.container-fluid{
  width: calc(100% - 50px);
  margin: 0 auto;
}
.breadcrumb{
  margin-bottom: 0;
  padding-left: 0;
}

/* Header */

.header {
  background: #f8f8f8;
	position: sticky;
  top: 0;
  z-index: 99;
}
.link-logo{
  display: inline-block;
  width: auto;
  height: auto;
}
.img-logo{
  height: 50px;
	width: auto;
  object-fit: contain;
  position: relative;
  top: -2px;
}

.nav-header {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
	width: calc(100% - 50px);
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: calc(var(--bs-gutter-x)* .5);
  padding-left: calc(var(--bs-gutter-x)* .5);
  display: grid;
  grid-template-columns: 1fr 800px 1fr;
  align-items: center;
  column-gap: 1rem;
}

/* Buscador */
.item-mobile{
  display: none;
}
.form-buscador{
  position: relative;
  width: 100%;
  height: 48px;
  border: 1px solid var(--secundario);
  border-radius: 1.6rem;
  overflow: hidden;
}
.input-buscador{
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding-left: 1.2rem;
  font-size: 1rem;
  color: var(--texto);
}
.btn-buscador{
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.6rem;
  background: var(--principal);
  border: 0;
  padding: 0;
  outline: 0;
  transition: all .3s;
}
.btn-buscador:hover{
  background: var(--hover-principal);
}
.img-buscador{
  height: 20px;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Fin Buscador */

/* Iconos del Header */
.btn-header{
  color: var(--texto);
  font-size: .7rem;
  letter-spacing: 0.02rem;
  background: transparent;
  border: 0;
  padding: 0;
  outline: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  transition: all .3s;
}
.btn-header:hover{
  color: var(--principal);
}
.img-header {
  height: 22px;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}
.img-favorite {
  height: 24px;
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}
.btn-header-wrapper{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  display: grid;
  grid-template-rows: 24px auto;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 8px;
  top: 7px;
  transition: all .3s;
}
.btn-header-wrapper .small{
  position: relative;
  font-size: 9px;
}
.btn-header-wrapper.btn-header-login{
  left: -2px;
}

.fav-count,
.cart-count{
  background: var(--principal);
  width: 18px;
  height: 18px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  color: var(--blanco);
  line-height: 1;
  vertical-align: middle;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Fin Iconos del Header */

.nav-header-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  background: var(--principal);
  width: calc(100% - 74px);
  padding-left: 1rem;
  padding-right: 1.4rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1rem;
  container-name: menu-horizontal;
  container-type: inline-size;
}

.list-grid-hader-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 1.6rem;
  list-style: none;
  margin-bottom: 0;
}

/* Categoria Header */
.wrapper-header-bottom{
  padding-top: calc(1.4rem - .9rem);
  padding-bottom: calc(1.4rem - .9rem);
  transition: all .3s;
}
.btn-list-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  font-size: .9rem;
  font-family: var(--font-medium);
  font-weight: 500;
  word-break: break-all;
  letter-spacing: 0.04rem;
  line-height: 1;
  width: 200px;
  background: var(--blanco);
  border: 0;
  color: var(--principal);
  border-radius: 30px;
  padding: .8rem 1rem;
  position: relative;
  transition: all .3s;
}
.wrapper-header-bottom:hover .btn-list-header{
  background: var(--secundario);
}
.btn-list-header:hover {
  background: var(--secundario);
  color: var(--principal);
}
.btn-list-header img {
  object-fit: contain;
}
.btn-categorias:hover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(178deg) brightness(104%) contrast(102%);
}

.submenu-categorias{
  box-sizing: border-box;
  position: absolute;
  top: 98%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--blanco);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  max-width: 100%;
  width: calc(99vw - 74px);
  box-sizing: border-box;
  display: none;
  grid-template-columns: 300px 1fr;
  /* padding: 3.2rem 1.6rem; */
  border-radius: var(--border-radius);
  box-shadow: 0 17px 15px -11px rgba(0,0,0,.2);
  transition: all .3s;
}
.wrapper-header-bottom:hover .submenu-categorias{
  display: grid;
  opacity: 1;
  visibility: visible;
}
.list-categorias{
  background: var(--secundario);
  display: flex;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.list-categorias-link{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  font-size: .9rem;
  letter-spacing: 0.02rem;
  color: var(--texto);
  text-align: left;
  padding: .8rem 1.6rem;
  border: 0;
  background: transparent;
  transition: all .3s;
}
.list-categorias-link:hover{
  background: var(--hover-principal);
  color: var(--blanco);
}
.list-categorias-link img{
  width: 8px;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.list-categorias-link.active{
  background: var(--hover-principal);
  color: var(--blanco);
}
.list-categorias-link.active img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(91%) saturate(1%) hue-rotate(203deg) brightness(107%) contrast(100%);
}

.list-categorias-desc{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  font-size: .9rem;
  letter-spacing: 0.02rem;
  color: var(--principal);
  padding: .5rem 1rem;
  margin-top: .5rem;
  background: var(--secundario);
  border-radius: 30px;
  transition: all .3s;
}
.list-categorias-desc img{
  width: 14px;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.list-categorias-desc:hover{
  background: var(--hover-principal);
  color: var(--blanco);
}
.list-categorias-desc:hover img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.submenu-categorias-right{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-right: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
}
.list-child-categorias{
  display: none;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1rem;
  list-style: none;
  padding-top: 1rem;
  padding-left: 0;
}
.list-child-categorias.active-menu{
  display: grid;
}
.child-categorias-link{
  display: block;
  padding: .8rem 1rem;
  font-size: .9rem;
  color: var(--texto);
  letter-spacing: 0.02rem;
  position: relative;
  transition: all .3s;
}
.child-categorias-link::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: url(../images/arrow-menu-right.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s;
}
.child-categorias-link:hover{
  color: var(--principal);
  background: var(--secundario);
  border-radius: 8px;
}
.child-categorias-link:hover::after{
  opacity: 1;
  visibility: visible;
}

.list-categorias-footer{
  list-style: none;
  padding-left: 0;
  padding-top: 1rem;
  margin-top: auto;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1.6rem;
  border-top: 1px solid var(--secundario);
}

/* Fin Categoria Header */

.item-header{
  padding: 1.4rem 0;
  transition: all .3s;
}
.item-header:hover{
  color: var(--principal);
}
.item-nav-mobile .list-nav-header{
  column-gap: .2rem;
}
.list-nav-header{
  display: flex;
  align-items: center;
	justify-content: flex-end;
  column-gap: .7rem;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.list-nav-header-bottom{
  display: flex;
  align-items: center;
	justify-content: space-between;
  column-gap: 1.8rem;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.link-list-header{
  color: var(--blanco);
  font-size: .8rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 1;
  position: relative;
  display: flex;
  align-items: center;
  column-gap: .5rem;
}

.item-header:hover .link-list-header{
  color: var(--acento);
  transition: all .3s;
}

.submenu-item-header{
  box-sizing: border-box;
  position: absolute;
  top: 99%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--blanco);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  max-width: 100%;
  width: calc(99vw - 74px);
  box-sizing: border-box;
  display: none;
  border-radius: var(--border-radius);
  box-shadow: 0 17px 15px -11px rgba(0,0,0,.2);
  transition: all .3s;
}
.list-item-header{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 2rem;
  margin-bottom: 0;
}
.title-submenu-item-header{
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  color: var(--principal);
  border-bottom: .9px dashed var(--principal);
}
.item-header:hover .submenu-item-header{
  display: grid;
  opacity: 1;
  visibility: visible;
}

/* Mi Cuenta */
.seccion-mi-cuenta{
  padding-top: 4rem;
  padding-bottom: 8rem;
}
.row-cuenta{
  row-gap: 1.6rem;
}
.title-cuenta{
  font-size: 1.5rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: var(--principal);
  margin-bottom: 1rem;
}
.row-nav-cuenta{
  row-gap: 1.6rem;
}
.nav-cuenta{
  padding: 1rem;
  border: 1px solid var(--secundario);
  border-radius: var(--border-radius);
  background: #f4f4f4;
  list-style: none;
  margin-bottom: 0;
  position: sticky;
  top: 160px;
}
.nav-cuenta li:last-child .nav-link{
  border-bottom: 0;
}
.nav-cuenta li .nav-link{
  font-size: 1rem;
  letter-spacing: 0.04rem;
  color: var(--texto);
  line-height: 1.5;
  text-align: left;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gray-text);
  padding: .8rem .5rem;
  outline: 0;
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  transition: all .3s;
}
.nav-cuenta li .nav-link.active{
  padding-left: 1.2rem;
  background: var(--principal);
  color: var(--acento);
  border-radius: 6px;
}
.nav-cuenta li .nav-link:hover{
  padding-left: 1.2rem;
  background: var(--principal);
  color: var(--acento);
  border-radius: 6px;
}
.tab-cuenta{
  padding: 2rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--secundario);
}
.title-tab-cuenta{
  font-size: 1.8rem;
  font-family: var(--font-bold);
  font-weight: 600;
  letter-spacing: 0.04rem;
  color: var(--principal);
  margin-bottom: 1.6rem;
}
.subtitle-tab-cuenta{
  font-size: 1.4rem;
  font-family: var(--font-bold);
  font-weight: 600;
  letter-spacing: 0.04rem;
  color: var(--principal);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.form-map{
  border-radius: var(--border-radius);
  overflow: hidden;
}
.grid-btn-cuenta{
  width: 420px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  margin-top: 1.6rem;
}
.grid-compras{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  grid-gap: 1.4rem;
  margin-bottom: 2rem;
}
.grid-compras:last-child{
  margin-top: 2rem;
}
.card-compras{
  padding: 1.6rem;
  border-radius: var(--border-radius);
  border: 1px solid #ebebeb;
  transition: all .3s;
}
.card-compras:hover{
  background: var(--secundario-light-2);
}
.list-card-compras{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.card-actions-compras{
  width: fit-content;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  flex-wrap: wrap;
}
.text-sin-datos{
  padding: 2rem;
  border: 1px solid var(--secundario);
  border-radius: var(--border-radius);
  text-align: center;
}
.btn-principal {
  display: block;
  width: 216px;
  margin-top: 1rem;
  background: var(--principal);
  border: 0;
  font-size: 1rem;
  letter-spacing: .02rem;
  color: var(--blanco);
  text-align: center;
  padding: .8rem 2rem;
  border-radius: 2rem;
  transition: all .3s;
}
.btn-principal:hover{
  background: var(--acento);
  color: var(--principal);
}
.btn-principal-tiny {
  display: block;
  width: 80px;
  margin-top: 1rem;
  background: var(--principal);
  border: 0;
  font-size: 1rem;
  letter-spacing: .02rem;
  color: var(--blanco);
  text-align: center;
  padding: .8rem 2rem;
  border-radius: 2rem;
  transition: all .3s;
}
.btn-principal-tiny:hover{
  background: var(--acento);
  color: var(--principal);
}
.btn-outline-principal {
  display: block;
  width: 216px;
  margin-left: auto;
  margin-left: auto;
  margin-top: 1rem;
  background: var(--blanco);
  border: 1px solid var(--principal);
  font-size: 1rem;
  letter-spacing: .02rem;
  color: var(--principal);
  text-align: center;
  padding: .8rem 2rem;
  border-radius: 2rem;
  transition: all .3s;
}
.btn-outline-principal:hover{
  border: 1px solid var(--acento);
  background: var(--acento);
  color: var(--principal);
}

/* Fin Mi Cuenta */

/* Header Promociones */
.list-grid-header-bottom{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.item-header-desc{
  padding-top: calc(1.4rem - .5rem);
  padding-bottom: calc(1.4rem - .5rem);
}
.list-header-desc{
  color: var(--principal);
  font-size: .85rem;
  letter-spacing: 0.04rem;
  line-height: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--secundario);
  padding: .5rem 1rem;
  border-radius: 30px;
  column-gap: .5rem;
}
.list-header-desc img{
  width: 14px;
  aspect-ratio: 1/1;
  object-fit: contain;
}
/* Header Promociones */

.item-nav-mobile{
  display: none;
}

.submenu-nav{
  position: absolute;
  top: 144px;
  left: 50%;
  transform: translate(-50%);
  z-index: 999;
  background: var(--blanco);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  width: calc(100% - 70px);
  padding: 3.2rem 1.6rem;
  border-radius: var(--border-radius);
  transition: all .3s;
}
.grid-submenu-nav{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.item-submenu-nav{
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  padding-left: 3.2rem;
  padding-right: 3.2rem;
}
.item-submenu-nav:nth-child(2),
.item-submenu-nav:nth-child(3){
  border-left: 1px solid #ededed;
}

.item-submenu-nav:nth-child(3){
  padding-left: 3.2rem;
  padding-right: 1rem;
}
.item-submenu-nav:nth-child(4){
  padding-left: 1rem;
}

.item-header:hover .submenu-nav {
  opacity: 1;
  visibility: visible;
}

.img-header-banner{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}
.title-submenu{
  font-size: 1.2rem;
  color: var(--principal);
  margin-bottom: 1rem;
}

.menu-item {
  display: flex;
  align-items: center;
  column-gap: 1.4rem;
  font-size: .9rem;
  line-height: 1.4;
  letter-spacing: 0.02rem;
  color: var(--texto);
  padding: .4rem 0;
  transition: all .3s;
}
.menu-item:hover {
  color: var(--principal);
}

.list-submenu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(222px, 1fr));
  gap: 1rem;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}
.submenu-nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 1rem;
  font-size: .9rem;
  color: var(--principal);
  text-transform: capitalize;
  transition: all .3s;
}
.submenu-icon {
  background: var(--secundario);
  border-radius: var(--border-radius);
  box-shadow: 0 5px 20px #2727241a;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}
.submenu-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

@container menu-horizontal (width < 1400px) {
  .btn-list-header{
    width: 164px;
    white-space: nowrap;
    font-size: .85rem;
  }
  .list-grid-hader-bottom{
    padding-left: 0;
    justify-content: center;
  }
  .item-header:nth-last-of-type(-n+3){
    display: none;
  }
  .link-list-header{
    font-size: .8rem;
  }
}
/* Producto Header */

.card-producto{
  display: block;
  position: relative;
  color: var(--secundario);
  border: 1px solid var(--secundario);
  border-radius: var(--border-radius);
  background: var(--blanco);
  overflow: hidden;
  min-height: 300px;
}
.tag-descuentos{
  padding: .5rem 1rem;
  font-size: .8rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: var(--blanco);
  letter-spacing: 0.04rem;
  text-align: center;
  width: fit-content;
  background: #e6007e;
  border-radius: .5rem;
  margin-bottom: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9;
}
.card-producto-imagen{
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.5rem 1rem;
  aspect-ratio: 1/1;
  overflow: hidden;
  transition: all 1s;
}
.owl-productos .img-producto,
.owl-relacionados .img-producto{
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 1rem;
  aspect-ratio: 1/1;
  transition: all 1s;
}
.img-producto{
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 1.6rem;
  aspect-ratio: 1/1;
  transition: all 1s;
}
.card-producto:hover .img-producto{
  transform: scale(1.1);
  transition: all 1s;
}
.card-producto-texto{
  padding-left: 1.4rem;
  padding-top: .8rem;
  padding-right: 1.4rem;
  padding-bottom: 1.2rem;
}
.card-titulo{
  font-size: 1rem;
  font-weight: 400;
  color: var(--texto);
  line-height: 1.5;
  letter-spacing: 0.02rem;
  text-align: center;
  margin-bottom: 0;
  height: 48px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: all .3s;
}
.card-titulo a{
  color: var(--texto);
}
.card-producto:hover .card-titulo a{
  color: var(--principal);
}

.precio-principal{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: .5rem;

  font-size: 1.2rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  color: var(--principal);
  margin-top: 1.1rem;
  margin-bottom: 1.4rem;
}
.precio-anterior{
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  color: var(--texto);
  text-decoration: line-through;
  margin-bottom: 0;
}
.card-precio{
  font-size: 1.125rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  letter-spacing: 0.02rem;
  text-align: center;
  margin-bottom: 0;
}


.lista-card-botones{
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.btn-card-favoritos{
  width: 44px;
  height: 44px;
  background: url(../images/fav-normal.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  border-radius: 1.6rem;
  border: 0;
  outline: 0;
  padding: 0;
  transition: all .6s;
  border: 1px solid transparent;
  position: absolute;
  top: .2rem;
  right: .5rem;
  z-index: 90;
}
.btn-card-favoritos:hover{
  background: url(../images/fav-color.svg);
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: center;
  transform: scale(1.1);
  transition: all .6s;
}
.btn-card-favoritos-active{
  width: 44px;
  height: 44px;
  background: url(../images/fav-color.svg);
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: center;
  transform: scale(1.1);
  border-radius: 1.6rem;
  border: 0;
  outline: 0;
  padding: 0;
  transition: all .6s;
  border: 1px solid transparent;
  position: absolute;
  top: .2rem;
  right: .5rem;
  z-index: 90;
}
/* .btn-card-favoritos:hover{
  background: url(../images/fav-color.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: scale(1.1);
  transition: all .6s;
} */

/* .btn-card-favoritos{
  width: 42px;
  height: 42px;
  border-radius: 1.6rem;
  background: var(--secundario);
  border: 0;
  outline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .6s;
  border: 1px solid transparent;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 9;
} */
.card-card-botones{
  margin-top: 1.4rem;
}
.btn-card-carrito{
  width: 100%;
  height: 48px;
  border-radius: var(--border-radius);
  background: var(--principal);
  color: var(--blanco);
  border: 0;
  outline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  transition: all .6s;
}
.btn-card-carrito svg{
  width: 18px;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1/1;
  transition: all .6s;
}
.btn-card-carrito:hover{
  color: var(--principal);
  background: var(--secundario);
}
.btn-card-carrito:hover svg{
  fill: var(--principal);
}

.descuentosfp-price{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  border-top: 1px solid #ededed;
  margin-top: 1rem;
  padding-top: 1rem;
}
.descuentosft-images{
  display: flex;
  align-items: center;
  column-gap: .3rem;
}
.descuentosfp-price img {
  width: auto;
  max-width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 8px;
}
.descuentosfp{
  text-align: right;
}
.text-descuentosfp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: .6rem;
  font-weight: 400;
  color: #ec0200;
  margin-bottom: 0rem;
  line-height: 1;
}
.precio-descuentosfp {
  display: block;
  color: #ec0200;
  font-size: 1rem;
  font-family: var(--font-medium);
  font-weight: 500;
  margin-bottom: 0;
  line-height: 1;
}

/* Precios */
.card-producto-btn {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.2rem;
}
.title-card-producto-btn {
  font-size: .8rem;
  color: var(--negro);
  margin-bottom: .2rem;
}
.btn-contado {
  font-size: .9rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02rem;
  color: var(--blanco);
  width: 100%;
  height: 46px;
  background: var(--principal);
  border-radius: var(--border-radius);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  padding: .8rem 1rem;
  margin-top: 1rem;
  transition: all .3s;
}

.btn-contado:hover{
  background: var(--hover-principal);
}
.btn-contado:hover img{
  filter: brightness(0) saturate(100%) invert(13%) sepia(58%) saturate(5718%) hue-rotate(264deg) brightness(80%) contrast(122%);
}

/* Fin Precios */

/* Fin Descuentos */
.item-desc-tarjeta{
  margin-top: 1rem;
}
.title-desc-tarjeta{
  font-size: .9rem;
  font-family: var(--font-medium);
  color: var(--texto);
  margin-bottom: .8rem;
  padding-right: 2.5rem;
  display: inline-flex;
  align-items: flex-start;
  gap: .4rem;
  position: relative;
}
.owl-carousel .owl-item .title-desc-tarjeta img,
.title-desc-tarjeta img{
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.text-desc-tarjeta{
  font-size: .75rem;
  color: var(--texto);
  margin-bottom: .5rem;
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  flex-wrap: wrap;
}
.text-desc-tarjeta:last-child{
  margin-bottom: 0;
}
.text-desc-tarjeta b{
  font-size: .9rem;
  font-family: var(--font-medium);
  color: #ff0200;
}
/* Fin Descuentos */

/* CARRITO TOGGLE */

.cart-header{
  background: var(--blanco);
  padding: 1.6rem;
  width: 460px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out;
  z-index: 9999;
}
.cart-header.open{
  transform: translateX(0);
  transition: ease-in-out .6s;
}
.item-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.2rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--secundario);
}
.cart-head-title{
  font-size: 1.6rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  letter-spacing: 0.02rem;
  margin-bottom: 0;
}
.cart-head-btn{
  display: flex;
  align-items: center;
  column-gap: .5rem;
  background: #efefef;
  border: 0;
  outline: 0;
  border-radius: 1.6rem;
  padding: .5rem 1rem;
  font-size: .9rem;
  color: var(--texto);
  transition: all .3s;
}
.cart-head-btn:hover{
  background: #d8d8d8;
}

.cart-head-btn img{
  width: 18px;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1/1;
}
.item-body{
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  column-gap: 1rem;

  overflow-y: auto;
}
.card-cart{
  width: 100%;
  display: flex;
  align-items: flex-start;
  column-gap: 1.4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid #ededed;
}
.card-cart-images{
  display: block;
  border: 1px solid var(--secundario);
  border-radius: 1rem;
  padding: .5rem;
}
.card-cart-images img{
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 1rem;
}
.card-cart-text{
  width: 100%;
}
.card-cart-title{
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02rem;
  color: var(--texto);
  width: 95%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-cart-title a{
  color: var(--texto);
}
.card-cart-title a:hover{
  color: var(--principal);
}
.card-cart-precio{
  font-size: 1.125rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  letter-spacing: 0.02rem;
  margin-bottom: 0;
}
.card-cart-actions{
  display: flex;
  align-items: center;
  column-gap: 1.4rem;
  margin-top: .8rem;
}
.card-cart-contador{
  border: 1px solid var(--principal);
  border-radius: var(--border-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  width: fit-content;
}
.card-cart-contador.mt-0{
  margin-top: 0;
}
.mas,
.menos,
.menos-cantidad,
.mas-cantidad
{
  font-size: 1rem;
  color: var(--texto);
  border: 0;
  outline: 0;
  background: var(--blanco);
  height: 35px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.count-input{
  font-size: .9rem;
  color: var(--texto);
  text-align: center;
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  outline: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number]{
  appearance: none;
  -moz-appearance: textfield;
  -webkit-appearance: none;
}
.card-btn-remove{
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 0;
  text-decoration: underline;
  font-size: .8rem;
  color: var(--texto);
  transition: all .3s;
}
.card-btn-remove:hover{
  color: red;
}

.cart-footer{
  position: sticky;
  bottom: 0;
  z-index: 99;
  padding-top: 1.6rem;
  border-top: 1px solid #ededed;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.grid-total-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-footer-title{
  font-size: 1.6rem;
  color: var(--principal);
  letter-spacing: 0.02rem;
  margin-bottom: 0;
}
.cart-footer-total{
  font-size: 1.2rem;
  letter-spacing: 0.02rem;
  margin-bottom: 0;
  color: var(--principal);
}
.btn-checkout{
  height: 48px;
  width: 100%;
  font-size: 1rem;
  letter-spacing: 0.02rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  border: 0;
  border-radius: 1.6rem;
  background: var(--principal);
  border: 1px solid var(--principal);
  color: var(--blanco);
  transition: all .3s;
}
.btn-checkout:hover{
  background: var(--hover-principal);
  border: 1px solid var(--secundario);
}
.overlay{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5));
  opacity: 0;
  visibility: hidden;
}
.overlay.open{
  opacity: 1;
  visibility: visible;
}
/* Fin CARRITO TOGGLE */

/* Fin Producto Header */

/* Fin Header */

/* Banner Principal */
.banner-principal{
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  aspect-ratio: 3.5/1;
}
.grid-banner-principal{
  display: grid;
  grid-template-columns: 73.5% 25%;
  gap: 1.4rem;
}
.owl-banner-principal{
  display: block;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
.owl-banner-principal .slide-owl-wrap:not(:first-child),
.owl-banner-miniatura .slide-owl-wrap:not(:first-child) {
  display: none;
}
.owl-banner-miniatura .owl-stage-outer,
.owl-banner-miniatura .owl-stage,
.owl-banner-miniatura .owl-item,
.owl-banner-miniatura .slide-owl-wrap{
  height: 100%;
}
.owl-banner-principal  .img-banner{
  height: 100%;
}
.owl-banner-miniatura{
  display: block;
  height:auto;
  aspect-ratio: 8 / 9.9;
  border-radius: 1rem;
  overflow: hidden;
}
.owl-banner-miniatura .img-banner{
  height: 100%;
}
.owl-banner-principal  .img-banner,
.owl-banner-miniatura .img-banner{
  width: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}
.owl-banner-principal  .owl-stage,
.owl-banner-miniatura .owl-stage{
  margin: 0;
  padding: 0;
}
.container-banner{
  position: relative;
}
.container-text-banner{
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blanco);
  border-radius: var(--border-radius);
  min-width: 450px;
  padding: 2rem;
}
.title-banner{
  font-size: 1.6rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--principal);
  text-align: center;
  margin-bottom: 0;
  background: var(--blanco);
}
.link-enlace{
  display: block;
  width: fit-content;
  font-size: .8rem;
  color: var(--principal);
  background: rgba(140, 128, 101, .2);
  padding: .5rem 1rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.4rem;
  border-radius: 1.6rem;
  transition: all .3s;
}
.link-enlace:hover{
  color: var(--principal);
}

.wrapper-seccion-banner{
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 4.5/1;
}
.img-seccion-banner{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-radius);
}
.wrapper-seccion-banner::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5));
  z-index: 1;
}
.titulo-banner{
  font-size: 2.8rem;
  font-family: var(--titulo);
  color: var(--blanco);
  letter-spacing: 0.02rem;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.item-banner {
  position: relative; 
}

.item-banner .intro-content {
  position: absolute; 
  top: 50%;
  left: 50%; 
  transform: translate(-50%, -50%);
  z-index: 2; 
}
.owl-carousel.owl-banner-principal .owl-nav .owl-prev,
.owl-carousel.owl-banner-principal .owl-nav .owl-next,
.owl-carousel.owl-banner-miniatura .owl-nav .owl-prev,
.owl-carousel.owl-banner-miniatura .owl-nav .owl-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.6rem;
  background: var(--secundario);
  border: 1px solid var(--secundario);
  transition: all .3s;
}
.owl-carousel.owl-banner-principal .owl-nav .owl-prev,
.owl-carousel.owl-banner-miniatura .owl-nav .owl-prev{
  left: 5px;
}
.owl-carousel.owl-banner-principal .owl-nav .owl-next,
.owl-carousel.owl-banner-miniatura .owl-nav .owl-next{
  right: 5px;
}

.modal-index .modal-content{
  background-color: transparent !important;
  border: 0 !important;
}
.modal-index .btn-close{
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
}
/* Fin Banner Principal */

/**** Inicio Card Banners ****/

.seccion-card-banner {
  position: relative;
  padding-top: 4rem;
}

.seccion-card-banner .header-productos {
  height: 48.8px;
}

.owl-card-banner .owl-nav {
  position: absolute;
  top: -62px;
  right: 0;
  display: flex;
  gap: .875rem;
  transition: all .3s;
}
.owl-carousel.owl-card-banner .owl-nav .owl-prev,
.owl-carousel.owl-card-banner .owl-nav .owl-next {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.6rem;
  background: var(--secundario);
  border: 1px solid var(--secundario);
  transition: all .3s;
}

.owl-carousel.owl-card-banner .owl-nav .owl-prev img {
    width: 15px;
    height: 15px;
    aspect-ratio: 1 / 1;
}

.owl-carousel.owl-card-banner .owl-nav .owl-prev:hover,
.owl-carousel.owl-card-banner .owl-nav .owl-next:hover {
  opacity: 0.8;
}

.owl-carousel.owl-card-banner .owl-nav .owl-prev:hover img,
.owl-carousel.owl-card-banner .owl-nav .owl-next:hover img {
  filter: invert(22%) sepia(72%) saturate(1185%) hue-rotate(193deg) brightness(88%) contrast(95%);
}


/**** Fin Card Banners ****/

/* Seccion Categorias */
.seccion-categorias {
  padding-top: 4rem;
}

.header-categorias{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-top: 1.2rem;
  border-top: .9px dashed var(--principal);
  margin-bottom: 1.4rem;
}

.title-categorias{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 1;
  color: var(--principal);
  margin-bottom: 0;
}
.btn-categorias{
  font-size: .85rem;
  letter-spacing: 0.04rem;
  line-height: 1;
  background: var(--blanco);
  color: var(--principal);
  border: 1px solid var(--principal);
  border-radius: var(--border-radius);
  padding: .8rem 1rem;
  margin-left: 1rem;
  position: relative;
  transition: all .3s;
}
.btn-categorias:hover{
  background: var(--principal);
  border: 1px solid transparent;
  color: var(--blanco);
}

.owl-categorias{
  display: block;
}
.owl-categorias .slide-owl-wrap:not(:first-child) {
  display: none;
}
.card-categorias{
  position: relative;
}
.card-img-categorias{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
  position: relative;
  transition: all 2s;
}
.card-img-categorias:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,.5), transparent);
}
.owl-categorias .img-categoria{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
  border-radius: var(--border-radius);
  transition: all 2s;
}
.owl-carousel .owl-item .img-categoria.owl-lazy{
  transition: all 2s;
}
.card-categorias:hover .img-categoria{
  transform: scale(1.05);
  transition: all 2s;
}
.card-text-categoria{
  position: absolute;
  top: 0;
  left: 0;
  padding: 1.6rem;
  display: grid;
  gap: .5rem;
}
.card-title-categoria{
  font-size: 1.8rem;
  font-family: var(--font-bold);
  font-weight: 600;
  letter-spacing: 0.02rem;
  color: var(--blanco);
  margin-bottom: 0;
  margin-left: .2rem;
  transition: all .3s;
}
.card-categorias:hover .card-title-categoria{
  color: var(--blanco);
}
.card-link-categoria{
  font-size: .8rem;
  letter-spacing: 0.02rem;
  color: var(--blanco);
  line-height: 1.2;
  margin-left: .2rem;
  margin-bottom: 0;
  width: fit-content;
  position: relative;
  transition: all .3s;
}
.card-link-categoria::before{
  content: "";
  position: absolute;
  display: block;
  height: 1px;
  width: 100%;
  bottom: 0;
  background: var(--blanco);
  transition: transform .01s linear;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.card-link-categoria::after{
  content: "";
  position: absolute;
  display: block;
  height: 1px;
  width: 100%;
  bottom: 0;
  background: var(--blanco);
  transform: scaleX(1);
  transition: transform .01s linear;
  transform-origin: 100% 50%;
}
.card-categorias:hover .card-link-categoria::before {
  background-color: var(--blanco);
  transform: scaleX(1);
  transition: transform .5s cubic-bezier(.19,1,.22,1) .5s;
}
.card-categorias:hover .card-link-categoria::after {
  background-color: var(--blanco);
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.19,1,.22,1);
}
.card-link-categoria:hover{
  color: var(--blanco);
}
/* Fin Seccion Categorias */

/* Seccion Productos */
.container-custom{
  padding-left: 1rem;
  padding-right: 1rem;
}
.seccion-productos{
  padding-top: var(--padd-top);
  /* padding-bottom: var(--padd-bottom); */
  padding-bottom: 2rem;
}
.seccion-productos.mt-seccion{
  padding-top: 1.4rem;
}
.seccion-productos.mb-seccion{
  padding-bottom: 2rem;
}
.grid-promocion{
  position: relative;
}
.wrapper-promociones{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  margin-bottom: 1.8rem;
  aspect-ratio: 4.9 / 1;
}
.promo-contador{
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  z-index: 9;
  height: auto;
  width: fit-content;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: var(--border-radius);
  padding: 1.6rem;
  background: rgba(223, 232, 248, .8);
  backdrop-filter: blur(10px);
}
.title-contador{
  font-size: var(--titulo-size);
  font-family: var(--font-bold);
  font-weight: 600;
  letter-spacing: 0.04rem;
  line-height: 1.2;
  color: var(--principal);
  margin-bottom: .6rem;
}
.simplyCountdown{
  width: fit-content;
  display: flex;
  align-items: center;
  column-gap: .5rem;
  height: 70px;
  width: 100%;
  aspect-ratio: 2/1;
}
.simply-section{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  height: 70px;
  width: 70px;
  aspect-ratio: 1/1;
  background: var(--principal);
  border-radius: var(--border-radius);
}
.simply-amount{
  font-size: 1.4rem;
  font-family: var(--font-medium);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04rem;
}
.simply-word{
  font-size: .6rem;
}
.simply-amount,
.simply-word {
  display: block;
  text-align: center;
  color: var(--secundario);
}
.btn-promo{
  display: inline-flex;
  align-items: center;
  column-gap: .6rem;
  max-width: 200px;
  font-size: .9rem;
  letter-spacing: 0.04rem;
  line-height: 1;
  background: var(--blanco);
  color: var(--principal);
  border: 1px solid var(--principal);
  border-radius: var(--border-radius);
  padding: .8rem 1rem;
  margin-bottom: 1.4rem;
  position: relative;
  transition: all .3s;
}
.btn-promo svg{
  stroke: var(--principal);
  width: 12px;
  height: auto;
  object-fit: contain;
  transition: all .6s;
}
.btn-promo:hover{
  color: var(--blanco);
  background: var(--principal);
}
.btn-promo:hover svg{
  stroke: var(--blanco);
  transform: translateX(5px);
  transition: all .3s;
}

.img-promocion{
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4.9 / 1;
}

.header-productos{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-top: 1.2rem;
  border-top: .9px dashed var(--principal);
}

.header-productos-nicho{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
}
.header-productos-nicho::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: var(--principal);
  z-index: -1;
}
.title-productos{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1;
  color: var(--principal);
  margin-bottom: 0;
}
.lista-productos{
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  display: flex;
  align-items: center;
  column-gap: 1.2rem;
}
.link-productos{
  display: block;
  font-size: .94rem;
  color: var(--secundario);
  letter-spacing: 0.02rem;
  transition: all .3s;
}
.link-productos-active{
  color: var(--principal);
  text-decoration: underline;
}
.link-productos:hover{
  color: var(--principal);
}
.banner-productos{
  border-radius: 1rem;
  height: 330px;
  overflow: hidden;
}

.owl-productos,
.owl-marcas,
.owl-card-banner,
.owl-noticias{
  display: block;
  margin-top: 1.6rem;
}
.owl-productos {
  min-height: 556px;
}
.owl-productos .card-producto:not(:first-child) {
  display: none;
}
.owl-carousel.owl-productos .owl-nav .owl-prev,
.owl-carousel.owl-productos .owl-nav .owl-next,
.owl-carousel.owl-productos-2 .owl-nav .owl-prev,
.owl-carousel.owl-productos-2 .owl-nav .owl-next,
.owl-carousel.owl-categorias .owl-nav .owl-prev,
.owl-carousel.owl-categorias .owl-nav .owl-next,
.owl-carousel.owl-noticias .owl-nav .owl-prev,
.owl-carousel.owl-noticias .owl-nav .owl-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.6rem;
  background: var(--secundario);
  border: 1px solid var(--secundario);
  transition: all .3s;
}
.owl-productos .owl-nav .owl-prev,
.owl-productos-2 .owl-nav .owl-prev,
.owl-categorias .owl-nav .owl-prev,
.owl-noticias .owl-nav .owl-prev,
.owl-noticias .owl-nav .owl-prev{
  left: -.5rem;
}
.owl-productos .owl-nav .owl-next,
.owl-productos-2 .owl-nav .owl-next,
.owl-categorias .owl-nav .owl-next,
.owl-noticias .owl-nav .owl-next,
.owl-noticias .owl-nav .owl-next{
  right: -.5rem;
}
.owl-carousel .owl-nav .owl-prev img,
.owl-carousel .owl-nav .owl-next img,
.owl-carousel-2 .owl-nav .owl-prev img,
.owl-carousel-2 .owl-nav .owl-next img{
  width: 15px;
  height: 15px;
  aspect-ratio: 1/1;
}
/* FIN Seccion Productos */

/* Seccion Marcas */

.card-marca {
  width: 90%;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 1rem;
  background: var(--blanco);
  border-radius: var(--border-radius);
  border: 1px solid var(--secundario);
  overflow: hidden;
  transition: all .3s;
}
.owl-carousel .owl-item .img-marcas {
  width: auto;
  height: 50px;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  transition: all 1s;
}
.card-marca:hover {
  background: var(--secundario);
  transition: all .6s;
}
.card-marca:hover .img-marcas{
  transform: scale(1.1);
  transition: all 1s;
}

/* Fin Seccion Marcas */

/* Seccion Banner Medio */
.card-banner{
  display: block;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all .3s;
}
.img-card-banner{
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: all 1s;
}
.link-banner-medio{
  display: block;
  width: 100%;
  height: auto;
}
.img-banner-medio{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1rem;
}
.card-banner:hover .img-card-banner{
  transform: scale(1.1);
  transition: all 1s;
}
/* Fin Seccion Banner Medio */

/* Seccion Noticias */
.seccion-noticias{
  padding-top: var(--padd-top);
  padding-bottom: var(--padd-bottom);
}
.seccion-noticias-pag{
  padding-top: var(--padd-top);
  padding-bottom: 8rem;
}
.grid-noticias-pag{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1.6rem;
  row-gap: 4rem;
}
.item-noticias-pag{
  min-height: 400px;
}
.item-noticias-pag .title-noticias{
  font-size: 1.4rem;
}

.header-productos.pt-0{
  padding-top: 0;
}
.grid-noticias{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas: 'n-1 n-2 n-3'
                       'n-1 n-4 n-3';
  gap: 1.6rem;
}
.item-noticias{
  min-height: 280px;
}
.item-noticias:nth-child(1){
  grid-area: n-1;
}
.item-noticias:nth-child(2){
  grid-area: n-2;
}
.item-noticias:nth-child(3){
  grid-area: n-3;
}
.item-noticias:nth-child(4){
  grid-area: n-4;
}
.card-noticias{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-bottom: 1rem;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  border-bottom: .9px dashed var(--principal);
  transition: all 1s;
}

.card-img-noticias{
  border-radius: var(--border-radius);
  height: 380px;
  overflow: hidden;
}
.card-text-noticias{
  width: 96%;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.fecha-noticias{
  display: block;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  line-height: 1.4;
  color: var(--texto);
  text-transform: capitalize;
}
.title-noticias{
  font-size: 1.3rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1.4;
  color: var(--principal);
  margin-bottom: 0;
  height: 60px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.card-noticias:hover .title-noticias{
  color: var(--hover-principal);
}
.text-noticias p,
.text-noticias a,
.text-noticias{
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  color: var(--texto);
  margin-bottom: 0;
  height: 44px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.btn-noticias{
  font-size: .95rem;
  letter-spacing: 0.02rem;
  color: var(--principal);
  line-height: 1.2;
  margin-left: .2rem;
  margin-bottom: 0;
  width: fit-content;
  position: relative;
  transition: all .3s;
}

.btn-noticias::before {
  content: "";
  position: absolute;
  display: block;
  height: 1px;
  width: 100%;
  bottom: 0;
  background: var(--principal);
  transition: transform .01s linear;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.btn-noticias::after {
  content: "";
  position: absolute;
  display: block;
  height: 1px;
  width: 100%;
  bottom: 0;
  background: var(--principal);
  transform: scaleX(1);
  transition: transform .01s linear;
  transform-origin: 100% 50%;
}
.card-noticias:hover .btn-noticias::before {
  background-color: var(--principal);
  transform: scaleX(1);
  transition: transform .5s cubic-bezier(.19,1,.22,1) .5s;
}
.card-noticias:hover .btn-noticias::after {
  background-color: var(--principal);
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.19,1,.22,1);
}

.img-noticias{
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  border-radius: var(--border-radius);
  transition: all 4s;
}
.card-noticias:hover .img-noticias{
  transform: scale(1.1);
  transition: all 2s;
}

/* Fin Seccion Noticias */

/* PostNoticias */
.seccion-postnoticias{
  padding-top: var(--padd-top);
  padding-bottom: var(--padd-bottom);
}
.date-postnoticias{
  font-size: 1.125rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--texto);
  text-align: center;
  line-height: 1.4;
  text-transform: capitalize;
  margin-bottom: .5rem;
}
.title-postnoticias{
  font-size: 2.6rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  text-align: center;
  line-height: 1.4;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}
.subtitle-postnoticias p,
.subtitle-postnoticias div,
.subtitle-postnoticias{
  font-size: 1rem;
  font-weight: 400;
  color: var(--texto);
  line-height: 1.4;
  letter-spacing: 0.02rem;
  text-align: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto ;
  margin-bottom: 2rem;
  text-align: center !important;
}
.subtitle-postnoticias-2{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  line-height: 1.4;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}
.img-postnoticias{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-radius);
}
.text-postnoticias{
  font-size: 1rem;
  color: var(--texto);
  line-height: 1.8;
  letter-spacing: 0.02rem;
  margin-bottom: 2rem;
}
/* Fin PostNoticias */

.seccion-marcas {
  padding-top: 6rem;
  padding-bottom: 0;
}
/* Seccion Magistral */
.seccion-magistral-index{
  padding-bottom: var(--padd-bottom);
}
.wrapper-magistrar{
  position: relative;
}
.titulo-banner-magistral{
  font-size: 2.8rem;
  font-family: var(--titulo);
  color: var(--principal);
  letter-spacing: .02rem;
  line-height: 1.5;
  text-align: center;
  width: 32%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.link-magistral{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.container-magistral{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  width: 100%;
}
.text-magistral-index,
.text-magistral-index h6{
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  color: var(--texto);
  text-align: center;
}
.title-magistral-index{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 1;
  line-height: 1.5;
  text-align: center;
  color: var(--principal);
  margin-bottom: 1rem;
}
.btn-magistral{
  font-size: .9rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02rem;
  color: var(--blanco);
  width: fit-content;
  height: 46px;
  margin: 0 auto;
  background: var(--principal);
  border-radius: var(--border-radius);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  padding: .8rem 3rem;
  margin-top: 1rem;
  transition: all .3s;
}
.btn-magistral:hover{
  background: var(--hover-principal);
}

.wrapper-contact-center{
  width: fit-content;
  margin-top: 1.6rem;
}
.title-contact-center{
  font-size: 1.2rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  color: var(--principal);
}
.btn-contact-whatsapp{
  font-size: .9rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02rem;
  color: var(--blanco);
  width: fit-content;
  height: 46px;
  background: var(--principal);
  border-radius: var(--border-radius);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  padding: .8rem 3rem;
  margin-top: 1rem;
  transition: all .3s;
}
.btn-contact-whatsapp svg{
  width: 18px;
  height: 18px;
  aspect-ratio: 1/1;
}

.btn-contact-whatsapp:hover{
  background: var(--hover-principal);
}
.img-magistral{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-radius);
  aspect-ratio: 4.9 / 1;
}
/* Fin Seccion Magistral */


/* /////Footer//////// */
.footer{
  margin-top: 0;
  background: #f2f2f0;
}
.grid-footer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 400px;
  /* grid-template-columns: repeat(4, 1fr); */
  grid-column-gap: 2rem;
  padding-top: 2rem;
  border-top: .9px dashed var(--principal);
}
.item-footer:nth-child(2),
.item-footer:nth-child(3),
.item-footer:nth-child(4) {
  display: flex;
  justify-content: center;
}
.container-footer{
  padding: 0 2.8rem;
}
.container-footer-contacto{
  padding-right: 2rem;
  margin-bottom: 0;
}

.container-enlaces{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  column-gap: 2rem;
}

.title-footer {
  color: var(--principal);
  font-size: 1.125rem;
  font-family: var(--font-medium);
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  padding-bottom: .2rem;
}

.title-footer::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--principal);
}
.lista-enlaces {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.lista-enlaces li{
  letter-spacing: 0.02rem;
  color: var(--texto);
  display: flex;
  align-items: flex-start;
  column-gap: 8px;
}
.lista-enlaces li a {
  display: flex;
  align-items: flex-start;
  column-gap: .6rem;
  font-size: .9rem;
  letter-spacing: 0.02rem;
  color: var(--texto);
  transition: all .3s;
  position: relative;
}
.lista-enlaces li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--hover-principal);
  transition: all .6s;
}
.lista-enlaces li a:hover::after {
  width: 100%;
  transition: all .3s;
}
.lista-contacto-footer li a:hover::after{
  display: none;
}
.lista-enlaces li a svg{
  height: 16px;
  width: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  position: relative;
  top: 4px;
  fill: var(--principal);
  transition: all .4s;
}
.lista-enlaces li a:hover svg{
  fill: var(--hover-principal);
  transition: all .3s;
}
.lista-enlaces li a:hover {
  color: var(--hover-principal);
  text-decoration: none;
}
.lista-redes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lista-redes li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--principal);
  font-size: .9rem;
  padding: .2rem 0;
  position: relative;
  transition: all .3s;
}

.lista-redes li a:hover {
  color: var(--hover-principal);
  text-decoration: none;
}

.lista-redes li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--principal);
  transition: all .3s;
}

.lista-redes li a:hover::after {
  width: 100%;
}
.list-redes{
  display: flex;
  align-items: center;
  column-gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Newsletter */
.container-footer-newsletter{
  margin-left: auto;
  width: 95%;
}
.title-newsletter{
  color: var(--principal);
  font-size: 1.25rem;
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  padding-bottom: .2rem;
}
.lista-enlaces-newsletter{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 1rem;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.lista-enlaces-newsletter li a img{
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.lista-enlaces-newsletter li a svg{
  fill: var(--principal);
  transition: all .3s;
}
.lista-enlaces-newsletter li a:hover svg{
  fill: var(--hover-principal);
  transition: all .3s;
}
.form-newsletter{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
}
.form-newsletter:focus-visible{
  border: 1px solid var(--acento);
}
.wrapper-form-newsletter{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  height: 52px;
  border-radius: 1.6rem;
  background: transparent;
  border: 1px solid var(--principal);
  overflow: hidden;
  transition: all .3s;
}
.input-newsletter{
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--principal);
  border: 0;
  border-radius: 1.6rem;
  background: var(--blanco);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
}
.input-newsletter:focus-visible{
  outline: 0;
  border: 0;
}
.input-newsletter::placeholder{
  color: var(--texto);
}

.btn-newsletter{
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  background-color: var(--principal);
  color: var(--blanco);
  width: fit-content;
  padding: .5rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-family: var(--font-medium);
  font-weight: 500;
  border-radius: 30px;
  border: 0;
  outline: 0;
  transition: all .3s;
}
.btn-newsletter img{
  filter: brightness(0) saturate(100%) invert(13%) sepia(58%) saturate(5718%) hue-rotate(264deg) brightness(80%) contrast(122%);
}
.btn-newsletter:hover {
  background: var(--principal);
}
.btn-newsletter:hover img{
  filter: unset;
}


/* Fin Newsletter */
.grid-newsletter{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 0;
}
.item-newsletter:nth-child(1){
  display: flex;
  align-items: center;
  column-gap: 1rem;
}
.container-porta {
  border-top: .9px dashed var(--principal);
  margin-top: 1rem;
}

.text-footer {
  font-size: .9rem;
  color: var(--principal);
  padding-top: 1.2rem;
  padding-bottom: 1rem;
  letter-spacing: 0.02rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .4rem;
}
.text-footer a {
  color: var(--principal);
  text-decoration: none;
  letter-spacing: 0.02rem;
}
.text-footer svg {
  height: 16px;
  width: auto;
  object-fit: contain;
  margin-top: 2px;
}


/* Fin footer */

.close.btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: unset;
  z-index: 9;
}

/* Catalogos */

.banner-catalogo{
  padding-top: 2rem;
}
.container-banner-catalogo{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4.8 / 1;
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  margin-bottom: .5rem;
}
.img-catalogo{
  width: 100%;
  height: auto;
  object-fit: cover;
}
.title-catalogo{
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  color: var(--principal);
  font-size: 3rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  margin-bottom: 0;
}

.catalogo{
  padding-top: 2rem;
  padding-bottom: 8rem;
}
.toolbox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--principal);
}
.grid-toolbox{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  column-gap: 1.2rem;
  row-gap: 2rem;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.item-promo{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: var(--principal);
  line-height: 1.4;
  letter-spacing: 0.04rem;
  text-align: center;
  padding: 2rem;
  border-radius: var(--border-radius);
  background: var(--secundario);
  transition: all .3s;
}
.item-promo span{
  font-size: 1rem;
}
.item-promo:hover{
  color: var(--blanco);
  background: var(--hover-principal);
}

.aside-filtros .item-head{
  display: none;
}
.title-tolbox{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1;
  color: var(--principal);
  margin-bottom: 0;
}
.toolbox-item {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}
.btn-filtro{
  display: none;
}
.toolbox-item label{
  font-size: .94rem;
}
.select-custom .input-filter{
  display: block;
  height: 35px;
  width: 150px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  padding-left: 1rem;
  color: var(--texto);
  font-size: .85rem;
}
.select-custom .input-filter:focus-visible{
  outline: 0;
}

/* Filtros */

.aside-filtros,
.aside-sucursales{
  background: var(--secundario);
  border-radius: var(--border-radius);
  padding: 1.6rem;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  max-height: calc(100vh - 100px - 2rem);
  overflow-y: auto;
}
.title-toolbox-aside {
  font-size: 1.3rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: .02rem;
  line-height: 1;
  color: var(--principal);
  border-bottom: 1px solid var(--principal);
  padding-bottom: 1rem;
  padding-left: 0;
  margin-bottom: 1.4rem;
}
.card-filter{
  border-bottom: 1px solid var(--principal);
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
}
.card-filter:last-child{
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.btn-aside{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  outline: 0;
  padding-left: 0;
  font-size: 1.125rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  letter-spacing: 0.02rem;
}
.btn-subaside{
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 1.125rem;
  color: var(--secundario);
  letter-spacing: 0.02rem;
}
.btn-aside img,
.btn-subaside img{
  width: 8px;
  height: auto;
  object-fit: contain;
}
.card-content-aside{
  height: 0;
  overflow: hidden;
  transform: all .3s;
}
.card-content-aside.active{
  height: 100%;
  transition: all .3s;
}
.list-aside{
  list-style: none;
  margin-top: 1rem;
  margin-bottom: 0;
  padding-left: 0;
}
.list-subaside{
  list-style: none;
  margin-bottom: 0;
  padding-left: 2.8rem;
  display: none;
  height: 0;
  overflow: hidden;
  transition: all .3s;
}
.list-subaside.active{
  display: block;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 2.8rem;
  height: 100%;
  transition: all .3s;
}
.list-aside li{
  margin-bottom: .5rem;
}
.list-subaside li{
  margin-bottom: 1rem;
}
.input-filtro{
  display: none;
}
.label-filtro{
  font-size: .9rem;
  color: var(--texto);
  padding-left: 1.6rem;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.label-filtro::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid var(--principal);
}
.label-filtro::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background-image: url(../images/check.svg);
  background-position: center;
  background-size: 8px;
  background-repeat: no-repeat;
  background-color: var(--principal);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

.input-filtro[type="checkbox"]:checked~.label-filtro::after {
  opacity: 1;
  visibility: visible;
}


/* Filtro de precios */
.card-slider-price {
  width: 90%;
  margin: 0 auto;
  padding-top: 1rem;
}
.container-inputs-precio{
  display: flex;
  align-items: center;
  column-gap: 1rem;
}
.container-inputs-precio input{
  border: 1px solid rgba(140, 128, 101, .2);
  border-radius: 30px;
  width: 100%;
  height: 44px;
  color: var(--principal);
  font-size: 1rem;
  padding-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.noUi-connect{
  background: var(--principal) !important;
}
.noUi-horizontal {
  height: 10px !important;
}
.noUi-horizontal .noUi-handle {
  width: 12px !important;
  top: -1px !important;
  cursor: grab !important;
}
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
  right: -2px !important;
}
.noUi-handle:after, .noUi-handle:before{
  display: none !important;
}
/* Fin Filtro de precios */

/* Fin Filtros */

.grid-catalogo{
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-gap: 1.6rem;
}
.grid-sucursales{
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-gap: 1.6rem;
}
.grid-productos{
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(23%, 1fr)); */
  grid-gap: 1.4rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}
.grid-favoritos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  grid-gap: 1.6rem;
  margin-top: 2rem;
}
/* Fin Productos */

/* Ficha de producto */

.ficha{
  padding-top: 4rem;
}
.row-ficha{
  justify-content: center;
}
.header-card-ficha{
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 1rem;
  position: relative;
}
.header-card-ficha div{
  align-items: center;
  justify-content: center;
  margin-left: auto;
  display: flex;
}
.header-card-ficha .btn-card-favoritos{
  top: 0;
  right: 0;
}
.header-card-ficha .btn-card-favoritos-active{
  top: 0;
  right: 0;
}
.btn-favoritos-ficha{
  width: 42px;
  height: 42px;
  border-radius: 1.6rem;
  background: var(--secundario);
  border: 0;
  outline: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .6s;
  border: 1px solid transparent;
}
.btn-favoritos-ficha img {
  width: 18px;
  height: auto;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  transition: all .6s;
}
/* Slick Carousel */

.slider-single > .slide:not(:first-child) {
  display: none;
}
.slider-nav > .slide:not(:first-child) {
  display: none;
}
.container-slider-product{
  width: 100%;
  margin-right: auto;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1rem;
  position: sticky;
  top: 170px;
  z-index: 9;
}
.slider-single{
  overflow: hidden;
}
.product-main-image{
  padding: 1.6rem;
  margin-right: .5rem;
  margin-bottom: 0;
  border-radius: 1rem;
  border: 1px solid var(--principal);
  border: 1px solid var(--border-gray);
  background: var(--blanco);
  overflow: hidden;
}
.slick-vertical.slider-nav .slick-slide{
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #ededed;
  background: var(--blanco);
  margin-bottom: 1rem;
  cursor: pointer;
}
.slick-vertical.slider-nav .slick-slide.is-active{
  border: 1px solid var(--principal);
}
.slick-slide img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Fin Slick Carousel */

.card-text-ficha{
  width: 100%;
  margin-left: auto;
  padding: 2.4rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-gray);
  background: var(--blanco);
}
.title-marca{
  display: inline-block;
  font-size: .8rem;
  letter-spacing: 0.02rem;
  color: var(--principal);
  background: var(--secundario);
  padding: .5rem 1rem;
  border-radius: 1.6rem;
  transition: all .3s;
}
.title-marca:hover{
  color: var(--principal);
}

.title-ficha{
  font-size: 2.2rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  letter-spacing: 0.02rem;
  line-height: 1.3;
  margin-bottom: .8rem;
}
.codigo-card-ficha{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: .5rem;
  margin-bottom: 1rem;
}
.codigo-ficha{
  font-size: .8rem;
  color: var(--texto);
  letter-spacing: 0.02rem;
  margin-bottom: 0;
}
.barra-ficha{
  font-size: .8rem;
  color: var(--texto);
  letter-spacing: 0.02rem;
  margin-bottom: 0;
}
.stock-ficha{
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
  font-size: .8rem;
  letter-spacing: 0.02rem;
  color: var(--blanco);
  background: #00b140;
  border-radius: 30px;
  padding: .5rem 1rem;
  margin-bottom: 0;
}
.text-ficha{
  font-size: 1rem;
  color: var(--texto);
  letter-spacing: 0.01rem;
  line-height: 1.5;
  margin-bottom: .6rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.text-info{
  font-size: 1rem;
  color: var(--principal);
  text-decoration: underline;
  transition: all .3s;
}
.text-info:hover{
  color: var(--principal);
}
.line-blue{
  border-color: var(--principal);
  opacity: 1;
}
.list-ficha{
  display: flex;
  flex-direction: column;
  gap: .8rem;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
}
.list-ficha li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-ficha li p{
  font-size: 1rem;
  margin: 0;
}
.list-ficha li p:first-child{
  font-size: 1rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--negro);
}
.container-text-description{
  padding-top: 2rem;
  margin-top: 2rem;
}
.title-description{
  font-size: 1.2rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  letter-spacing: 0.02rem;
  line-height: 1.5;
  margin-top: 1.4rem;
}
.text-description{
  font-size: 1rem;
  color: var(--texto);
  letter-spacing: 0.02rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.container-card-relacionados {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
  padding: 1rem;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: #eff1fd;
  border-radius: 12px;
  transition: all .3s;
}
.container-card-relacionados .btn-producto{
  width: 100%;
}
.container-card-relacionados .img-producto{
  height: 220px;
  aspect-ratio: 1/1;
  object-fit: contain;
}

/* Precios Ficha */
.card-precio-ficha{
  border-top: 1px solid #ededed;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-top: 1.2rem;
  margin-top: 2rem;
}
.title-precio{
  font-size: 1rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--texto);
  letter-spacing: 0.02rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.precio-web{
  font-size: 1.8rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: var(--principal);
  letter-spacing: 0.02rem;
  margin-bottom: 0;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  column-gap: 1.2rem;
}
.precio-web span{
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .02rem;
  color: var(--texto);
  text-decoration: line-through;
  margin-bottom: .35rem;
}
/* Fin Precios Ficha */

/* Encontrar Ficha */
.card-ficha-info{
  border-top: 1px solid #ededed;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 2rem;
  padding-top: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.btn-ficha{
  width: fit-content;
  height: 48px;
  border-radius: var(--border-radius);
  border: 0;
  background: var(--principal);
  color: var(--blanco);
  border: 0;
  outline: 0;
  padding: .5rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  transition: all .6s;
}
.btn-ficha:hover{
  background: var(--secundario);
  color: var(--principal);
}
.list-ficha-compartir{
  list-style: none;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  padding-left: 0;
  margin-bottom: 0;
}
.list-ficha-compartir li{
  font-size: 1rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--texto);
  letter-spacing: 0.02rem;
}
.list-ficha-compartir li a{
  display: block;
  width: 100%;
  height: auto;
}
.list-ficha-compartir li img{
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  object-fit: contain;
}
/* Fin Encontrar Ficha */

.card-botones-ficha{
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 1.2rem;
  row-gap: 1.2rem;
}
.item-botones-ficha:nth-child(2){
  width: 100%;
}
.item-botones-ficha .count-input{
  height: 48px;
}
.card-itau-ficha{
  border: 1px solid #ededed;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1.2rem;
  border-radius: 1rem;
}
.title-itau {
  font-size: 1.125rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--texto);
  border-bottom: 1px solid #ededed;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
}
.title-itau span{
  font-size: 1.4rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--texto);
  height: 1.125rem;
  display: flex;
  align-items: center;
  column-gap: .5rem;
  position: relative;
  bottom: 3px;
}
.title-itau span img{
  width: auto;
  object-fit: contain;
}
.grid-itua-ficha{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 1rem;
}
.grid-bancos-ficha{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
}
.item-itau{
  width: 100%;
}
.list-itau {
  display: flex;
  align-items: center;
  column-gap: 1.2rem;
  margin-bottom: 1rem;
  padding-left: 0;
  list-style: none;
}
.list-itau li {
  font-size: 1.4rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: #ff0200;
}
.list-itau li.text-descuento{
  font-size: 1rem;
  color: var(--texto);
  font-weight: 400;
  margin-bottom: 0;
  margin-right: 1rem;
}
.precio-descuento{
  display: flex;
  align-items: center;
  gap: 1rem;
}
.list-itau li img {
  width: 28px;
  max-width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 8px;
}
.text-itau {
  font-size: .8rem;
  color: var(--texto);
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: .5rem;
  row-gap: .2rem;
}
.text-itau span{
  font-size: 1.2rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: #ff0200;
  position: relative;
  bottom: 2px;
}
.text-descuento{
  font-size: 1rem;
  color: var(--texto);
  margin-bottom: .4rem;
  line-height: 1.8;
  /* display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: .6rem;
  row-gap: .2rem; */
}
.text-descuento b{
  font-size: 1.4rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: #ff0200;
  margin-left: .5rem;
  margin-right: .5rem;
}
/* Seccion TABS */
.seccion-description{
  padding-top: 3rem;
}
.content-tabs {
  padding: 2rem;
  background: var(--blanco);
  border-radius: 1rem;
  border: 1px solid var(--principal);
  margin-top: 2rem;
}
.nav.nav-tabs{
  border-bottom: 1px solid rgba(217, 217, 217, 0.7);
  margin-bottom: 2rem;
}
.nav-tabs .nav-link{
  font-size: 1.125rem;
  border: 0;
  color: var(--texto);
  background: 0;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
  color: var(--principal);
  border: 0;
  border-bottom: 2px solid var(--principal) !important;
  background: transparent;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  isolation: unset;
  border: 0;
}
.nav.nav-pills .nav-item .nav-link{
  font-size: 1.125rem;
  color: var(--texto);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.nav.nav-pills .nav-item.show .nav-link, .nav.nav-pills .nav-item .nav-link.active {
  color: var(--principal);
  border-bottom: 2px solid var(--principal);
  background: transparent;
}
.text-description {
  font-size: 1rem;
  font-weight: 400;
  color: var(--texto);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Relacionados */
.seccion-relacionados{
  padding-top: var(--padd-top);
  padding-bottom: var(--padd-bottom);
}
.title-relacionados{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1;
  color: var(--principal);
  margin-bottom: 0;
}
.owl-carousel.owl-relacionados{
  display: block;
}
.owl-carousel.owl-relacionados .slide-owl-wrap:not(:first-child){
  display: none;
}
.owl-carousel.owl-relacionados .owl-prev,
.owl-carousel.owl-relacionados .owl-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.6rem;
  background: #f2f2f0 !important;
  border: 1px solid #ededed !important;
  transition: all .3s;
}
.owl-carousel.owl-relacionados .owl-prev:hover,
.owl-carousel.owl-relacionados .owl-next:hover{
  transform: translateY(-50%) scale(1.1);
}
.owl-carousel.owl-relacionados .owl-prev{
  left: -1rem;
}
.owl-carousel.owl-relacionados .owl-next{
  right: -1rem;
}
/* Fin Relacionados */

/* Modal */
.modal-add-product modal-dialog {
  width: 660px;
}
.title-modal{
  font-size: 1.6rem;
  color: var(--principal);
  letter-spacing: 0.02rem;
  text-align: center;
  margin-bottom: 1.2rem;
}
.product-title-modal{
  font-size: 1rem;
  color: var(--principal);
  letter-spacing: 0.02rem;
  line-height: 1.3;
  text-align: center;
  text-transform: capitalize;
}
.product-total-modal{
  font-size: .9rem;
  letter-spacing: 0.02rem;
  text-align: center;
  color: var(--gray-text);
  margin-bottom: .4rem;
}
.grid-buttons-modal{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.2rem;
}
.btn-close-modal{
  position: absolute;
  top:1rem;
  right: 1rem;
  z-index: 99;
}
/* Fin Modal */

/* Modal disponibilidad */
.disponibilidad-modal-mensaje{
  font-size: 1.6rem;
  color: var(--principal);
  letter-spacing: 0.02rem;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 1rem;
}
.disponibilidad-modal-productos{
  font-size: .9rem;
  letter-spacing: 0.02rem;
  text-align: center;
  color: var(--gray-text);
  margin-bottom: .4rem;
}
.disponibilidad-modal-advertencia{
  font-size: .9rem;
  letter-spacing: 0.02rem;
  text-align: center;
  color: red;
  margin-bottom: .4rem;
}
/* Fin Modal disponibilidad */
/* Modal Ficha */
.header-modal{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.modal-title{
  font-size: 1.4rem;
  color: var(--principal);
}
.list-sucursales{
  list-style: none;
  padding-left: 0;
  padding-right: 1rem;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 400px;
  overflow-y: auto;
}
.list-sucursales li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-gray);
  border-radius: var(--border-radius);
  background: var(--secundario);
  transition: all .3s;
}
.list-sucursales li:hover{
  background: var(--secundario);
}
.list-sucursales p{
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--texto);
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 0;
}

.list-sucursales svg{
  width: 18px;
  height: auto;
  aspect-ratio: 1/1;
}
.btn-modal{
  width: fit-content;
  height: 48px;
  border-radius: var(--border-radius);
  border: 0;
  background: var(--principal);
  color: var(--blanco);
  border: 0;
  outline: 0;
  padding: .5rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  transition: all .6s;
}
.btn-modal:hover{
  color: var(--blanco);
  background: var(--hover-principal);
}
@media (min-width: 576px) {
  .modal-ficha .modal-dialog {
      max-width: 600px;
      margin-right: auto;
      margin-left: auto;
  }
}
/* Fin Modal Ficha */

/* Fin Ficha de producto */

/* Login */

.seccion-login{
  padding-top: 6rem;
  padding-bottom: 8rem;
  background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), url(../images/fondo-login.avif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.row-login{
  justify-content: center;
  gap: 1rem;
}
.row-redes-login{
  display: none;
}
.title-login{
  font-size: 1.4rem;
  color: var(--principal);
  border-bottom: 1px solid var(--principal);
  padding-top: .5rem;
  padding-bottom: .5rem;
  margin-bottom: 2rem;
}
.nav.nav-pills.nav-login {
  column-gap: 0;
  justify-content: center !important;
  border: 0;
  margin-bottom: 2rem;
}
.nav.nav-pills.nav-login .nav-item .nav-link{
  font-size: 1.4rem;
  color: var(--texto);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  border-bottom: 1px solid #ededed;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
}
.nav.nav-pills.nav-login .nav-item .nav-link.active{
  color: var(--principal);
  border-bottom: 1px solid var(--principal);
}
.form-box {
  max-width: 575px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  padding: 3rem 4rem 3rem;
  border-radius: 1rem;
  border: 1px solid #ededed;
}
.form-choice {
  color: #333;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: -.025em;
}
.btn-login.btn-g {
  display: block;
  border-radius: 1rem;
  padding: .8rem 1rem;
  text-align: center;
  font-size: 1rem;
  background-color: #cc3333;
  color: #fff;
}
.btn-login.btn-f{
  display: block;
  border-radius: 1rem;
  padding: .8rem 1rem;
  text-align: center;
  font-size: 1rem;
  background-color: #3366cc;
  color: #fff;
}
.form-login{
  margin-top: 2rem;
}
.forgot-link{
  display: block;
  text-align: center;
  color: var(--principal);
  text-decoration: underline;
  margin-top: 2rem;
  transition: all .3s;
}
.forgot-link:hover{
  color: var(--principal);
}
/* Fin Login */

/* Politica */

.seccion-politica{
  padding-top: var(--padd-top);
  padding-bottom: 8rem;
  /* background: var(--blanco); */
}
.title-politica{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--secundario);
}

/* Fin Politica */

/* Preguntas Frecuentes */
.container-info-tab {
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  border: 1px solid var(--principal);
  border-radius: 1rem;
}
.button-tabs {
  background: transparent;
  border-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  margin: 0;
  width: 100%;
  font-size: 1.125rem;
  text-align: left;
  color: var(--principal);
  transition: all .3s;
}
.button-tabs img {
  width: 10px;
  transition: all .3s;
}
.button-tabs.open-tabs {
  font-size: 1.125rem;
  color: var(--principal);
}
.text-container-tabs {
  height: 0;
  overflow: hidden;
  transition: all .3s;
}
.text-container-tabs.open-tabs {
  height: auto;
  transition: all .3s;
}
.text.text-tabs {
  font-size: 1rem;
  letter-spacing: 0.02rem;
  color: var(--texto);
  font-weight: 400;
}
/* Fin Preguntas Frecuentes */

/* Como Comprar */
.title-comprar{
  font-size: 1.4rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  margin-bottom: 1rem;
}
.line-politica{
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
}
/* Fin Como Comprar */

/* Nosotros */
.seccion-nosotros{
  padding-top: var(--padd-top);
  padding-bottom: var(--padd-top);
}
.bg-color{
  background: var(--secundario);
}
.row-nosotros{
  row-gap: 1.6rem;
  justify-content: center;
}
.container-text-nosotros{
  height: 100%;
}
.container-img-nosotros{
  height: 100%;
  padding-left: 2.4rem;
}
.img-nosotros{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1.3/1;
  border-radius: var(--border-radius);
}
.title-head-nosotros{
  display: inline-block;
  font-size: .9rem;
  color: var(--principal);
  background: var(--secundario);
  padding: .5rem 1rem;
  margin-top: .4rem;
  margin-bottom: 1rem;
  border-radius: 1.6rem;
  transition: all .3s;
}
.bg-white{
  background: var(--blanco);
}
.title-nosotros{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: .02rem;
  line-height: 1.4;
  color: var(--principal);
  margin-bottom: 1rem;
}
.text-nosotros{
  font-size: 1rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  color: var(--texto);
  margin-bottom: 1rem;
}

.seccion-valores{
  padding-top: var(--padd-top);
  padding-bottom: var(--padd-bottom);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
.title-valores{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: .02rem;
  line-height: 1.4;
  color: var(--principal);
  text-align: center;
  margin-bottom: 1rem;
}
.grid-valores{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 1.4rem;
  margin-top: 2rem;
}
.item-valores{
  border-radius: 1rem;
  padding: 2rem;
  background: var(--secundario);
  transition: all .6s;
}
.item-valores:hover{
  box-shadow: 0 15px 15px rgba(23, 15, 62, .15);
  transform: translateY(-5px);
  transition: all .3s;
}
.card-valores-img{
  width: 90px;
  height: 90px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  background: var(--blanco);
  margin-bottom: 1rem;
}
.card-valores-img img {
  width: 40px;
  aspect-ratio: 1/1;
  -o-object-fit: contain;
  object-fit: contain;
}
.title-card-valores {
  font-size: 1.4rem;
  font-family: var(--font-medium);
  font-weight: 500;
  text-align: center;
  letter-spacing: .02rem;
  line-height: 1.4;
  color: var(--principal);
  margin-bottom: .5rem;
}
.text-card-valores{
  font-size: 1rem;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  text-align: center;
  color: var(--texto);
  margin-bottom: 0;
}
/* Fin Nosotros */

/* Preparados Magistal */
.seccion-magistral{
  padding-top: 4rem;
  padding-bottom: var(--padd-bottom);
  background: var(--secundario);
}
.header-magistral{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}
.title-magistral{
  font-size: var(--titulo-size);
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.04rem;
  line-height: 1;
  line-height: 1.5;
  text-align: center;
  color: var(--principal);
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.text-magistral,
.text-magistral h6{
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  text-align: center;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.seccion-receta{
  border-top: .9px dashed var(--principal);
  padding-top: 4rem;
  padding-bottom: var(--padd-bottom);
}
.container-form-receta{
  background: var(--blanco);
  padding: 3rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-gray);
}
.wrapper-info-contacto{
  background: var(--secundario);
  border-radius: var(--border-radius);
  padding: 2rem;
  height: 100%;
}
.title-form-horario{
  font-size: 1.2rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  color: var(--principal);
  margin-top: 1.6rem;
  margin-bottom: 1rem;
}
.list-form-contacto,
.list-contacto-horairo{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.list-contacto-horairo li,
.list-form-contacto li a{
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  color: var(--texto);
  display: flex;
  align-items: center;
  column-gap: .6rem;
}
.list-contacto-horairo li svg,
.list-form-contacto li a svg{
  width: 18px;
  height: 18px;
  aspect-ratio: 1/1;
  object-fit: contain;
}

/* Fin Preparados Magistal */

/* /////Contacto//////// */

.contacto {
  padding-top: var(--padd-top);
  padding-bottom: var(--padd-bottom);
}
.form-recaptcha{
  height: 80px;
}
.form-group{
  margin-bottom: 1rem;
}
.form-group label{
  color: var(--texto);
}
.input-form{
  margin-bottom: .5rem;
}
.form-group .form-control{
  height: 46px;
  border-radius: .6rem;
}
.form-control::placeholder{
  font-size: .9rem;
  letter-spacing: 0.02rem;
}
.select-wrapper{
  position: relative;
}
.select-wrapper::after{
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: url(../images/arrow-bottom-black.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}
.form-prefix{
  display: flex;
  align-items: center;
  column-gap: 1rem;
  padding: 0 .75rem;
  height: 46px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 1rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.input-prefix{
  height: 100%;
  width: 80px;
  border: 0;
  outline: 0;
  font-size: 1rem;
  color: var(--texto);
  letter-spacing: 0.04rem;
}
.input-number{
  height: 100%;
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  font-size: 1rem;
  color: var(--texto);
  letter-spacing: 0.04rem;
}
.input-cv{
  display: none;
}
.input-cv.active{
  display: block;
}

.grid-contacto {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4rem;
  background: var(--blanco);
  border-radius: 1.6rem;
  padding: 2.6rem;
  border: 1px solid var(--border-gray);
}
.title-form {
  font-size: 1.375rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
  margin-bottom: 1rem;
  line-height: 1.4;
  letter-spacing: 0.04rem;
}
.form-control-contacto {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0.375rem 0.75rem;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .6rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control-receta{
  display: block;
  width: 100%;
  height: 48px;
  padding: 0.375rem 0.75rem;
  padding-top: .5rem;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .6rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
textarea.form-control-textarea {
  display: block;
  width: 100%;
  border: 1px solid #ced4da;
  border-radius: .6rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  font-size: 16px;
  box-shadow: none;
  height: 80px;
}
.iframe {
  border-radius: 1.6rem;
  overflow: hidden;
}
.btn-enviar {
  background-color: var(--principal);
  color: var(--blanco) !important;
  padding: 1rem 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-family: var(--font-medium);
  font-weight: 500;
  width: 200px;
  height: 46px;
  border-radius: 1.6rem;
  border: 0;
  outline: 0;
  transition: all .3s;
}
.btn-enviar:hover{
  background: var(--hover-principal);
}

.btn-enviar-email {
  background-color: var(--principal);
  color: var(--blanco) !important;
  padding: 1rem 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-family: var(--font-medium);
  font-weight: 500;
  width: auto;
  height: auto;
  border-radius: 1.6rem;
  border: 0;
  outline: 0;
  transition: all .3s;
}
.btn-enviar-email:hover{
  background: var(--hover-principal);
}


.contacto-map{
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* Fin Contacto */


/* Salon */
.grid-salon{
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 4rem;
  background: var(--blanco);
  border-radius: 1.6rem;
  padding: 2.6rem;
  border: 1px solid var(--border-gray);
}
.head-form-salon{
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-gray);
}
.title-salon{
  font-size: 1.6rem;
  font-family: var(--font-medium);
  font-weight: 500;
  text-align: center;
  color: var(--principal);
  line-height: 1.4;
  letter-spacing: .04rem;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.row-form{
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-gray);
}
.row-form:nth-child(3){
  border: 0;
  padding-bottom: 0;
}
/* Fin Salon */


/* Sucursales */
.aside-sucursales{
  margin-bottom: 2rem;
}
.tabla-sucursales{
  width: 100% !important;
  border: 1px solid var(--border-gray);
  border-radius: var(--border-radius);
  background: var(--blanco);
}
.tabla-sucursales tbody tr td{
  border-bottom: 1px solid var(--border-color);
}
.tabla-sucursales td,
.tabla-sucursales td a,
.tabla-sucursales td p{
  font-size: .875rem;
  border: 0;
}
.title-table-nombre{
  font-size: .875rem;
  font-family: var(--font-bold);
  letter-spacing: 0.02rem;
}
.sorting_disabled:nth-child(1),
.sorting_asc{
  width: 200px !important;
}
.sorting_1{
  font-size: 1.6rem;
  font-weight: 600;
  font-family: var(--font-bold);
  letter-spacing: 0.02rem;
}
.title-sucursales{
  font-size: 1.6rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: var(--principal);
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-gray);
}
.title-table{
  font-size: 1.125rem;
  font-family: var(--font-medium);
  font-weight: 500;
  color: var(--principal);
}
.table td{
  padding: 1rem 2rem;
}
.table td p{
  margin-bottom: 0;
}
.suc-info .link-table:first-child{
  margin-bottom: .4rem;
}
.link-table{
  font-size: .875rem;
  color: var(--texto);
  letter-spacing: 0.02rem;
  display: flex;
  align-items: center;
  column-gap: .8rem;
  transition: all .3s;
}
.link-table:hover{
  color: var(--principal);
  text-decoration: underline;
}
.link-table svg{
  width: 12px;
  height: auto;
  object-fit: contain;
}
.link-table-phone{
  font-size: .875rem;
  color: var(--principal);
  letter-spacing: 0.02rem;
  text-decoration: underline;
  display: flex;
  align-items: center;
  column-gap: .8rem;
  transition: all .3s;
}
.link-table-phone:hover{
  color: var(--principal);
  text-decoration: underline;
}
.link-table-phone svg{
  width: 12px;
  height: auto;
  object-fit: contain;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after{
  display: none !important;
}
.tabla-sucursales td p.text-table{
  font-size: .75rem;
  color: var(--texto);
  letter-spacing: 0.02rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: .8rem;
  row-gap: .25rem;
  margin-top: 1rem;
}
.tabla-sucursales td p.text-table:last-child{
  margin-top: .5rem;
}


.tabla-sucursales td p.text-table b{
  font-family: var(--font-bold);
}
.tabla-sucursales td p.text-table svg {
  width: 12px;
  height: auto;
  object-fit: contain;
}
.wrapper-text-table{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.text-horario{
  display: flex;
  flex-direction: column;
}

.tabla-sucursales-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
}
.list-paginacion{
  display: flex;
  align-items: center;
  column-gap: .5rem;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.page-numbers{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-gray);
  transition: all .3s;
}
.page-numbers:hover{
  background: var(--secundario);
}
.page-numbers.active{
  background: var(--principal);
  color: var(--blanco);
}
.text-paginacion{
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
  color: var(--texto);
  margin-bottom: 0;
}

/* Aside Sucursales */
.title-aside-sucursales{
  font-size: 1.6rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: var(--principal);
  padding-top: .5rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--principal);
}
.list-options{
  display: flex;
  align-items: center;
  column-gap: .5rem;
  list-style: none;
  padding-left: 0;
  margin-top: 1.6rem;
  margin-bottom: 2rem;
}
.input-option{
  display: none;
}
.label-option{
  font-size: .875rem;
  text-wrap: nowrap;
  color: var(--principal);
  background: var(--secundario);
  border: 1px solid var(--principal);
  border-radius: 30px;
  cursor: pointer;
  padding: .5rem 1.2rem;
  transition: all .3s;
}
.label-option:hover{
  color: var(--blanco);
  background: var(--principal);
}
.input-option[type=radio]:checked~.label-option{
  color: var(--blanco);
  background: var(--principal);
}
.wrapper-select{
  position: relative;
}
.salect-sucursales{
  display: block;
  height: 46px;
  width: 100%;
  background: var(--blanco);
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border-radius: 30px;
  padding-left: 1rem;
  padding-right: .5rem;
  margin-top: .4rem;
}
.wrapper-select::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: url(../images/arrow-menu.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 9;
}

/* Fin Aside Sucursales */
#datatable-sucursal td{
  padding-left: 0;
  vertical-align: top;
}
.dataTables_length{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
div.dataTables_wrapper div.dataTables_length label{
  display: flex;
  align-items: center;
  gap: 1rem;
}
div.dataTables_wrapper div.dataTables_info{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: .85rem;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  list-style: none;
  padding-top: 0.85rem;
  padding-bottom: .85rem;
  padding-left: 0;
  margin-bottom: 0;
}
.paginate_button.page-item .page-link{
  font-size: .9rem;
  padding: .5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: .5rem;
}
.paginate_button.page-item.active .page-link{
  background: var(--principal);
  color: var(--blanco);
  border: 0;
}
/* Fin Sucursales */

.nav.nav-pills{
  display: flex;
  justify-content: flex-start;
  column-gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #ededed;
}
.nav-link.nav-link-noticias{
  padding: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 10px;
  background: #eff1fd;
  border: 1px solid #eee;
  color: var(--principal);
  font-size: 1rem;
  letter-spacing: 0.04rem;
  min-width: 240px;
}
.nav-pills .nav-link.nav-link-noticias.active, .nav-pills .show>.nav-link.nav-link-noticias {
  background-color: var(--principal);
}
.nav-pills .nav-link.nav-link-noticias:hover, .nav-pills .show>.nav-link.nav-link-noticias {
  color: var(--blanco);
  background-color: var(--principal);
}
.nav-link.nav-link-noticias img{
  width: 30px;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.nav-link.nav-link-noticias.active img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(164%) hue-rotate(311deg) brightness(113%) contrast(100%);
}
.nav-link.nav-link-noticias:hover img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(164%) hue-rotate(311deg) brightness(113%) contrast(100%);
}

.nav-breadcrumb{
  margin-bottom: 0 !important;
  background-color: transparent !important;
}
.breadcrumb{
  padding: 0.75rem 0rem;
  border-bottom: 1px solid var(--border-gray);
}
.breadcrumb-item,
.breadcrumb-item a{
  color: #808080;
  font-size: .8rem;
}
.breadcrumb-item a:hover{
  color: var(--principal);
  text-decoration: none;
}
.breadcrumb-item.active{
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 45%;
  overflow: hidden;
}

/* Menu mobile */

.menu-mobile{
  position: fixed;
  left: 0;
  top: 0;
  width: 460px;
  height: 100%;
  overflow-y: auto;
  border-radius: 0;
  background: var(--blanco);
  padding: 1.6rem;
  margin: 0 auto;
  transform: translateX(-100%);
  transition: transform 0.6s ease-in-out;
  z-index: 999;
}
.menu-mobile.open{
  transition: ease-in-out .6s;
  transform: translateX(0);
}
.list-menu-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  list-style: none;
  padding-left: 0;
  margin-bottom: 2rem;
  background: var(--secundario);
  border-radius: var(--border-radius);
}
.item-mobbile-actions{
  font-size: .875rem;
  font-family: var(--font-medium);
  font-weight: 500;
  text-align: center;
  color: var(--texto);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
}
.item-mobbile-actions span{
  height: 37px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.item-mobbile-actions:hover{
  color: var(--principal);
}
.item-mobbile-actions img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.list-menu-mobile{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.list-menu-mobile li {
  width: 100%;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}
.list-menu-mobile li:last-child {
  border-bottom: 0;
}
.list-menu-mobile li .list-nav-submenu{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-size: .875rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.02rem;
  line-height: 1.5;
  text-decoration: none;
  padding: 1rem 0;
  transition: all .3s;
  background: transparent;
  color: var(--texto);
  outline: 0;
  border: 0;
}
.list-nav-submenu::before {
  content: '';
  position: absolute;
  top: 55%;
  right: 15px;
  transform: translateY(-50%);
  height: 1px;
  width: 12px;
  background: var(--texto);
  transition: all .3s;
}
.list-nav-submenu::after {
  content: '';
  position: absolute;
  top: 55%;
  right: 21px;
  transform: translateY(-50%);
  height: 12px;
  width: 1px;
  background: var(--texto);
  transition: all .3s;
}
.list-menu-mobile li .list-nav-submenu.open,
.list-nav-submenu.open {
  color: var(--principal);
  background: var(--blanco);
  border-radius: 8px 8px 0 0;
}
.list-nav-submenu.open::before {
  background: var(--principal);
  transform: translateY(-50%) rotate(90deg);
  opacity: 0;
}
.list-nav-submenu.open::after {
  background: var(--principal);
  transform: translateY(-50%) rotate(90deg);
}
.submenu-nav-two {
  height: 0;
  overflow: hidden;
}
.submenu-nav-two.open {
  height: auto;
  padding-left: 0.6rem;
  overflow: hidden;
  margin-bottom: 2.2rem;
}
.list-menu-mobile li p{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--texto);
  cursor: pointer;
}
.list-menu-mobile li p img{
  width: 10px;
  height: 10px;
  object-fit: contain;
  transition: all .3s;
}
.list-menu-mobile li.change p img{
  transform: rotate(-180deg);
  transition: all .3s;
}
.submenu-mobile{
  display: none;
}
.submenu-mobile.open{
  display: block;
}
.submenu-mobile li{
  border-bottom: 0;
}

.list-mobile-footer{
  list-style: none;
  padding-left: 0;
  margin-top: 3rem;
  margin-bottom: 0;
}
.list-mobile-footer li a{
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-size: .875rem;
  font-family: var(--font-medium);
  font-weight: 500;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-decoration: none;
  color: var(--texto);
  padding: .5rem 0;
  transition: all .3s;
}
.list-mobile-footer li a:hover{
  color: var(--principal);
}

/* Fin Menu mobile */

.container-btn-contact {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 10;
}

.btn-whatsapp {
  width: 60px;
  height: 60px;
  background: #47c259;
  padding: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .5rem;
  transition: all .3s;
}
.btn-whatsapp:hover{
  animation: shake 1s;
  animation-iteration-count: infinite;
  transition: all 1s;
}
.btn-whatsapp img{
  width: 45px;
  aspect-ratio: 1/1;
  object-fit: contain;
}


@keyframes shake{
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.1) rotate(-10deg);
  }
  50% {
    transform: scale(1.1) rotate(10deg);
  }
  75% {
    transform: scale(1.1) rotate(-10deg);
  }
  100% {
    transform: scale(1);
  }
}


footer .item-redes img {
  --size: 22px;
  width: var(--size);
  height: var(--size);
}

/* Buscador Mobile */
.btn-header.change-icons .contianer-btn-header{
  background: #efefef;
}
.btn-header.change-icons .img-close {
  display: block;
}
.btn-header.change-icons .img-buscar {
  display: none;
}
.img-close {
    display: none;
}
.contianer-btn-header {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
}
.img-buscar, .img-close{
  width: 20px;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.container-search {
  background: #f2f2f0;
  padding: 1.6rem;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: -1;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}
.container-search.visible {
  visibility: visible;
  bottom: -98px;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  transition: all .3s;
}
.grid-search{
  display: flex;
  align-items: center;
  column-gap: 1.6rem;
  margin-left: 2.4rem;
}
.form-search {
  width: 100%;
  /* margin: 0 auto; */
  position: relative;
}
.input-header-search {
  width: 100%;
  width: 100%;
  height: 46px;
  border-radius: 30px;
  padding: 0 1.4rem;
  font-size: 16px;
  border: 1px solid var(--principal);
  background: var(--blanco);
  outline: none;
}
.input-header-search::placeholder {
  font-size: .9rem;
}
.btn-search {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  border: 0;
  background: var(--principal);
  border-radius: 50%;
  padding: 0;
  transition: all .3s;
}
.btn-search svg {
  fill: var(--blanco);
  width: 18px;
  aspect-ratio: 1/1;
  object-fit: contain;
  transition: all .6s;
}
.btn-search:hover{
  background: var(--hover-principal);
}

.btn-call{
  display: flex;
  align-items: center;
  align-items: center;
  column-gap: .6rem;
  font-size: .95rem;
  color: var(--principal);
}
.btn-call img{
  height: 28px;
  object-fit: contain;
}
.btn-call-container{
  font-size: .8rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
  margin-bottom: 0;
  position: relative;
  top: -2px;
}
.btn-call-container strong{
  font-family: var(--font-medium);
}
/* Fin Buscador Mobile */

.owl-carousel .owl-item img.owl-lazy{
  transition: all 1s;
}

/* Checkout */
.nav-checkout{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.nav-checkout li:nth-child(1){
  justify-content: flex-start;
}
.nav-checkout li{
  display: flex;
  justify-content: center;
  align-items: center;    
}
.nav-checkout li:nth-child(3){
  justify-content: flex-end;
}
.container-checkout{
  padding-right: 1rem;
}
.title-checkout{
  font-size: 1.6rem;
  font-family: var(--font-bold);
  font-weight: 600;
  color: var(--principal);
  margin-bottom: 1rem;
}
.lista-btn-checkout{
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding-left: 0;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.btnPrevious,
.btnNext{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  height: 46px;
  min-width: 200px;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  border-radius: 1.6rem;
  transition: all .3s;
}
.btnPrevious{
  color: var(--principal);
  border: 1px solid var(--principal);
}
.btnPrevious:hover{
  color: var(--blanco);
  background: var(--hover-principal);
  border: 1px solid var(--hover-principal);
}
.btnPrevious:hover img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(61deg) brightness(113%) contrast(101%);
}
.btnNext{
  color: var(--blanco);
  background: var(--principal);
}
.btnNext:hover{
  background: var(--hover-principal);
  border: 1px solid var(--hover-principal);
}
/* Fin Checkout */

/* Resumen de Pedido */
.resumen_pedido{
  padding-bottom: 6rem;
}
.tabla-resumen b{ 
  font-family: var(--font-bold);
  font-weight: 600;
}
.card-body strong{
  font-family: var(--font-bold);
  font-weight: 600;
}
/* fin Resumen de Pedido */

@media screen and (min-width:690px) {
  .nav-header-top .btn-call {
    display: none;
  }
}

@media screen and (max-width:1280px) {
  .nav-header{
    grid-template-columns: 1fr 600px 1fr;
  }
}
@media screen and (max-width:1220px) {
  .nav-header{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .list-nav-header{
    column-gap: .4rem;
  }
  .link-list-header{
    font-size: .8rem;
  }
  .btn-header{
    font-size: .7rem;
  }
  .nav-header-bottom{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .list-nav-header-bottom{
    column-gap: 1.2rem;
  }
  .banner-productos{
    height: auto;
  }
  .row-info{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
  }
  .row-info .col-lg-3{
    width: 100%;
  }
  .card-info{
    justify-content: flex-start;
    padding-left: 2rem;
  }
  .card-info-images{
    aspect-ratio: 2/1;
  }
  .card-info-images img{
    height: 30px;
    width: 35px;
  }
  .card-info-title{
    font-size: 1rem;
  }
  .card-info-description{
    font-size: .85rem;
  }
  .owl-productos .card-titulo,
  .owl-relacionados .card-titulo{
    font-size: 1.125rem;
  }
  .card-titulo{
    font-size: 1rem;
    height: 48px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .grid-footer{
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  .container-footer-contacto{
    padding-left: 0;
  }
  .precio-descuentos{
    font-size: 1rem;
  }
  .container-slider-product{
    grid-template-columns: 100px minmax(0, 1fr);
  }
  .grid-info-contacto {
    grid-template-columns: 1fr;
  }
  .title-list-contacto{
    font-size: 1.125rem;
  }
  .cart-head-title,
  .cart-footer-title{
    font-size: 1.2rem;
  }
  .card-cart-title{
    font-size: .875rem;
  }
  .item-footer:nth-child(2),
  .item-footer:nth-child(3),
  .item-footer:nth-child(4) {
    justify-content: flex-start;
  }
  .container-footer-newsletter{
    width: 100%;
  }
  .wrapper-promociones{
    aspect-ratio: 3/1;
  }
  .img-promocion{
    aspect-ratio: 3/1;
  }

  .img-magistral {
    aspect-ratio: 3.5 / 1
  }
  .container-magistral {
    max-width: 350px;
  }
}

@media screen and (max-width:1180px) {
  :root{
    --padd-bottom: 4rem;
  }
  .container-fluid{
    width: 100%;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .nav-header-bottom{
    display: none;
  }
  .nav-header {
    width: 100%;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    display: grid;
    grid-template-columns: 40px 155px auto 60px;
    gap: 1rem;
    border-bottom: 1px solid var(--border-gray);
  }
  .list-submenu{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .item-nav-header:nth-child(2) {
    justify-content: center;
  }
  .link-logo{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .img-logo {
    height: 50px;
    width: auto;
    margin: 0 auto;
    display: flex;
  }
  .menu-item{
    padding: 1rem 0;
  }
  .item-login{
    display: none;
  }
  .item-mobile{
    display: block;
  }
  .row-login{
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .form-search,
  .input-header-search{
    width: 100%;
    max-width: unset;
  }

  .grid-carousel-productos{
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }


  /* Catalogo */
  .title-catalogo{
    display: none;
  }
  .grid-catalogo{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .grid-sucursales{
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Filtro  Catalogo */
  .toolbox-item label{
    font-size: .8rem;
  }
  .toolbox-left{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
  }
  .select-custom .input-filter{
    font-size: .8rem;
    width: 120px;
  }

  .btn-filtro{
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    background: #efefef;
    border: 0;
    outline: 0;
    height: 35px;
    border-radius: 1.6rem;
    padding: 0.5rem 1rem;
    font-size: .9rem;
    color: var(--texto);
    transition: all .3s;
  }
  .btn-filtro img{
    height: 16px;
    width: auto;
    object-fit: contain;
    aspect-ratio: 1/1;
  }
  .aside-filtros .item-head{
    display: flex;
  }

  .aside-filtros{
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-1000px);
    z-index: 999;
    width: 320px;
    height: 100%;
    background: var(--blanco);
    padding: 1.6rem;
    overflow: auto;
    transition: all .3s;
  }
  .aside-filtros.visible{
    transform: translateX(0);
    transition: all .5s;
  }
  .title-toolbox-aside{
    display: none;
  }

  .aside-filtros,
  .aside-sucursales{
    border-radius: 0;
  }
  /* Fin Catalogo */

  /* Ficha */
  .title-ficha{
    font-size: 1.8rem;
    line-height: 1.5;
  }
  .container-slider-product{
    width: 96%;
  }
  /* Fin Ficha */

  /* Menu Mobile */
  .item-nav-mobile {
    display: flex;
    align-items: center;
    column-gap: 1rem;
  }
  .btn-menu-mobile {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 50%;
  }
  .btn-menu-mobile img {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  .btn-menu-mobile .icon-close {
    display: none;
  }
  .button-menu {
    display: flex;
    position: relative;
    z-index: 99;
  }
  .nav-header-logo {
    position: relative;
    z-index: 99;
  }
  .lista-nav-header li a {
    font-size: 1.1rem;
  }
  .nav-header-items {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--blanco);
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
  }
  .nav-header-items.open {
    opacity: 1;
    visibility: visible;
  }
  .lista-nav-header {
    flex-direction: column;
    justify-content: center;
    height: 100vh;
  }
  .button-menu.change .hambur {
    display: none;
  }
  .button-menu.change .cerrar {
    display: block;
    width: 20px;
  }
  .item-nav-mobile{
    display: flex;
    align-items: center;
    column-gap: 1rem;
  }
  .btn-menu-mobile{
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 50%;
  }
  .btn-menu-mobile .icon-close{
    display: none;
  }
  .btn-menu-mobile img{
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  .btn-menu-mobile.change{
    background: #efefef;
  }
  .btn-menu-mobile.change .icon-menu{
    display: none;
  }
  .btn-menu-mobile.change .icon-close{
    display: flex;
    width: 15px;
    height: 15px;
    object-fit: contain;
  }
  .list-menu-mobile li:first-child .list-nav-submenu::before,
  .list-menu-mobile li:first-child .list-nav-submenu::after{
    display: none;
  }
  /* Fin Menu Mobile */
}
@media screen and (max-width:1100px) {
  :root{
    --titulo-size: 1.6rem;
  }
  .nav-header {
    width: 100%;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'menu logo carrito'
                         'buscador buscador buscador';
    gap: 1rem;
    border-bottom: 1px solid var(--border-gray);
  }
  .item-nav-header:nth-child(1){
    grid-area: menu;
  }
  .item-nav-header:nth-child(2){
    grid-area: logo;
  }
  .item-nav-header:nth-child(3){
    grid-area: buscador;
  }
  .item-nav-header:nth-child(4){
    grid-area: carrito;
  }
  .grid-search{
    margin-left: 0;
  }
  .link-logo{
    justify-content: center;
  }
  /* Banner Pricipal */
  .banner-principal{
    margin-top: 1rem;
    margin-bottom: 1rem;
    aspect-ratio: 2.5/1;
  }
  .grid-banner-principal{
    grid-template-columns: 100%;
  }
  .item-banner-principal:nth-child(2){
    display: none;
  }
  .owl-banner-miniatura{
    aspect-ratio: unset;
  }
  /* Fin Banner Pricipal */

  .wrapper-promociones{
    aspect-ratio: 2/1;
  }
  .img-promocion{
    aspect-ratio: 2/1;
  }

  .row-info-mobile{
    display: flex;
  }
  .row.row-info{
    display: none;
  }

  .btn-card-carrito{
    font-size: .94rem;
  }
  .container-footer-contacto{
    padding-left: 0;
    padding-right: 0;
  }

  /* Seccion Noticias */
  .grid-noticias {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        'n-1 n-2'
        'n-3 n-4';
    gap: 1.6rem;
  }
  .grid-noticias-pag{
    grid-template-columns: 1fr 1fr;
  }
  .item-noticias-pag:first-child {
    grid-column: span 1;
  }
  /* Fin Seccion Noticias */

  /* Contacto */
  .grid-info-contacto{
    gap: 1rem;
  }
  .card-contacto{
    padding: 1.2rem;
    gap: 1rem;
    border-radius: .8rem;
  }
  .list-contacto li a{
    font-size: .9rem;
  }
  .grid-contacto {
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 1.2rem;
  }
  .contacto-img{
    width: 60px;
    height: 60px;
  }
  .wrapper-info-contacto{
    padding: 0;
    background: var(--blanco);
  }
  .list-contacto-horairo li,
  .list-form-contacto li a{
    font-size: .85rem;
  }

  /* Ficha */
  .row-ficha{
    row-gap: 2rem;
  }
  .card-text-ficha{
    width: 100%;
  }
  .title-ficha{
    font-size: 1.4rem;
  }
  .container-slider-product{
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
  }
  .slider-nav .slick-track{
    display: flex !important;
    gap: 1rem;
  }
  .slider-nav .slick-slide {
    padding: .4rem;
    border-radius: 1rem;
    border: 1px solid #ededed;
    background: var(--blanco);
    margin-bottom: 1rem;
    cursor: pointer;
  }
  .slider-nav .slick-slide.is-active {
    border: 1px solid var(--principal);
  }

  /* Sucursales */
  .title-sucursales{
    font-size: 1.4rem;
    text-align: center;
    padding: 2rem 1rem;
  }
  .table-separate{
    width: 100% !important;
  }
  .table .table-head-sucursales {
    display: none;
  }
  .table tr{
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border-gray);
  }
  .tabla-sucursales tbody tr td{
    border: 0;
  }
  .tabla-sucursales tbody tr{
    border-bottom: 1px solid var(--border-gray);
  }
  .tabla-sucursales td p.text-table{
    flex-direction: column;
    align-items: flex-start;
    margin-top: .875rem;
  }
  .tabla-sucursales td p.text-table:last-child{
    margin-top: .875rem;
  }

  .table tr td{
    justify-content: flex-start;
    text-align: left;
    padding: 1rem 1rem;
  }
  .table tr .suc-title h6{
    font-size: 1.2rem;
    color: var(--principal);
  }
  .table tr .suc-info{
    gap: .5rem;
    align-items: flex-start;
    flex-direction: column;
  }
  .tabla-sucursales-footer{
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
  }
  /* Fin Sucursales */
  .title-magistral,
  .text-magistral{
    width: 80%;
  }
  .title-magistral{
    font-size: 1.4rem;
  }
  .title-form{
    font-size: 1.2rem;
  }

  /* Salon */
  .grid-salon{
    padding: 1.4rem;
  }
  .head-form-salon{
    margin-bottom: .5rem;
  }
  .title-salon{
    font-size: 1.2rem;
    width: 100%;
  }
  .titulo-banner,
  .titulo-banner-magistral {
    font-size: 2rem;
    width: 90%;
  }
}
@media screen and (max-width:768px) {
  :root{
    --padd-top: 5rem;
    --padd-bottom: 5rem;
  }
  .container-fluid {
    width: calc(100% - 20px);
    margin: 0 auto;
    padding-left: .2rem;
    padding-right: .2rem;
  }
  .breadcrumb {
    width: 100%;
  }
  .nav-header{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .img-header,
  .img-buscar,
  .img-close {
    width: 20px;
    height: 20px;
  }
  .grid-search{
    grid-template-columns: 1fr;
  }
  .text-top-header{
    font-size: .8rem;
  }
  .list-nav-header{
    gap: 0;
  }
  .nav-breadcrumb{
    padding-left: 0;
    padding-right: 0;
  }
  .banner-principal,
  .owl-banner-principal{
    aspect-ratio: unset;
  }
  .owl-banner-principal .img-banner{
    height: 100%;
  }
  .owl-banner-miniatura .img-banner{
    height: 100%;
  }
  .row-info{
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    row-gap: 1rem;
  }
  .card-info-images img {
    height: 30px;
    width: 35px;
  }
  .card-info{
    padding-left: 0;
    justify-content: center;
    align-items: center;
    gap: .5rem;
  }
  .link-productos{
    display: none;
  }
  .link-productos.link-productos-active{
    display: block;
  }
  .toolbox-left{
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .toolbox-item{
    gap: .5rem;
  }
  .select-custom .input-filter{
    width: 90px;
  }
  .wrapper-promociones{
    aspect-ratio: 1/1;
  }
  .img-promocion{
    aspect-ratio: 1/1;
    height: 100%;
  }
  .title-contador{
    font-size: 1.4rem;
    text-align: center;
  }
  .contianer-contador{
    width: fit-content;
    margin: 0 auto;
  }
  .promo-contador{
    top: unset;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    max-width: 320px;
    margin: 0 auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .simplyCountdown{
    gap: .5rem;
    justify-content: center;
  }
  .simply-section{
    height: 60px;
  }
  .simply-amount{
    font-size: 1.2rem;
  }
  .btn-promo{
    display: block;
    margin: 1rem auto;
    text-align: center;
  }
  .img-contador{
    width: 35px;
    height: 35px;
  }
  .container-img-nosotros{
    padding-left: 0;
  }
  .title-categorias{
    text-align: center;
  }
  .header-categorias,
  .header-productos{
    padding-top: 2rem;
    flex-direction: column;
    gap: 1rem;
  }

  /* Seccion Card Banners */
  .seccion-card-banner .header-productos {
    height: auto;
  }
  .owl-card-banner .owl-nav {
    top: 50%;
    transform: translateY(-50%);
    justify-content: space-between;
    width: 100%;
  }

  /* Seccion Noticias */
  .grid-noticias {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, .5fr);
    grid-template-areas:
        'n-1 n-1'
        'n-2 n-3'
        'n-4 n-4';
    gap: 1.6rem;
  }
  .card-text-noticias{
    padding: .8rem;
  }
  .card-img-noticias{
    height: 300px;
  }
  .owl-relacionados .card-noticias .img-noticias{
    height: 100%;
  }
  .title-noticias{
    font-size: 1.125rem;
    height: 52px;
  }
  .btn-noticias{
    height: auto;
    opacity: 1;
    visibility: visible;
    margin-top: 1rem;
  }

  .grid-noticias-pag{
    grid-template-columns: 1fr;
  }
  .item-noticias-pag .title-noticias {
    font-size: 1.125rem;
  }

  .title-postnoticias{
    font-size: var(--titulo-size);
    width: 100%;
  }
  .subtitle-postnoticias{
    width: 100%;
    font-size: 1.2rem;
    line-height: 1.5;
  }
  .subtitle-postnoticias p, .subtitle-postnoticias div, .subtitle-postnoticias{
    width: 100%;
  }
  /* Fin Seccion Noticias */

  /* Ficha */

  .label-planes{
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
    padding-left: 4rem;
  }
  .label-planes .precio-label{
    font-size: 1rem;
  }
  .item-botones-ficha{
    width: 100%;
  }
  .card-botones-ficha {
    column-gap: 0.8rem;
    row-gap: 0;
  }
  .content-tabs{
    padding: 1.2rem;
  }
  .card-text-ficha{
    padding: 1.4rem;
  }
  .card-itau-ficha{
    border-top: 1px solid #ededed;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .title-itau{
    font-size: 1rem;
    gap: .5rem;
  }
  .list-itau li.text-descuento{
    font-size: .85rem;
  }
  .text-descuento{
    font-size: .85rem;
  }
  .text-descuento b{
    font-size: 1.2rem;
  }
  .list-itau {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1.2rem;
  }
  /* Fin Ficha */

  /* Catalogo */
  .container-banner-catalogo{
    aspect-ratio: unset;
  }
  .img-catalogo{
    height: 100%;
  }
  .toolbox{
    flex-direction: column;
    gap: 2rem;
  }
  .grid-productos,
  .grid-favoritos {
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
  }
  .card-producto{
    padding-top: 1rem;
    border-radius: .8rem;
  }
  .card-producto-imagen{
    padding: 0;
  }
  .card-producto-descuentos{
    flex-direction: column;
    gap: .8rem;
    align-items: flex-start;
  }
  .card-precio{
    font-size: 1rem;
  }
  .btn-card-carrito {
    font-size: .9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
  }
  .btn-card-carrito img{
    width: 20px;
    height: 20px;
    display: none;
  }
  .btn-card-carrito img{
    width: 20px;
    height: 20px;
  }
  .card-producto-texto{
    padding-left: .8rem;
    padding-right: .8rem;
  }

  /* Cuenta */
  .tab-cuenta{
    padding: 1rem;
  }
  .title-tab-cuenta{
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  /* Fin Cuenta */

  /* Carrito Mobile */
  .wrapper-seccion-banner{
    aspect-ratio: 2 / 1;
  }
  .titulo-banner,
  .titulo-banner-magistral{
    font-size: 1.8rem;
    width: 100%;
  }
  .menu-mobile{
    width: 85%;
  }
  .cart-header{
    width: 85%;
  }
  .cart-head-btn{
    font-size: .8rem;
  }
  .card-cart-images img{
    width: 70px;
    height: 70px;
  }
  .card-cart-precio{
    font-size: 1rem;
  }
  .logo-footer{
    height: 30px;
  }
  .title-logo{
    margin-top: 1rem !important;
  }

  /* Politica */
  .top-header{
    display: none;
  }
  .header-productos::after,
  .header-categorias::after{
    display: none;
  }
  .btn-categorias{
    font-size: .9rem;
    text-align: center;
    width: 80%;
    max-width: 200px;
    margin: 0 auto;
    background: var(--blanco);
  }
  .container-footer-newsletter{
    width: 100%;
  }
  .product-main-image{
    margin-left: 2px;
    margin-right: 2px;
  }
  .owl-carousel.owl-relacionados .owl-prev{
    left: 0;
  }
  .owl-carousel.owl-relacionados .owl-next{
    right: 0;
  }
  .grid-footer{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .title-magistral,
  .text-magistral{
    width: 100%;
  }
  .img-magistral{
    aspect-ratio: unset;
  }
  .owl-productos .owl-nav .owl-prev, .owl-productos-2 .owl-nav .owl-prev, .owl-noticias .owl-nav .owl-prev, .owl-noticias .owl-nav .owl-prev{
    left: 0;
  }
  .owl-productos .owl-nav .owl-next, .owl-productos-2 .owl-nav .owl-next, .owl-noticias .owl-nav .owl-next, .owl-noticias .owl-nav .owl-next {
    right: 0;
  }
  .img-noticias{
    aspect-ratio: 1/1;
    height: 280px;
  }
  .form-box{
    padding: 1.6rem;
  }
  .form-login label{
    padding-bottom: .5rem;
  }
  .card-text-categoria{
    position: relative;
    padding: 1rem 0;
  }
  .card-title-categoria{
    font-size: 1.2rem;
    color: var(--principal);
  }
  .card-link-categoria{
    color: var(--principal);
  }
  .card-link-categoria::before,
  .card-link-categoria::after{
    background: var(--principal);
  }

  /* Checkout */
  .nav-checkout{
    display: flex;
  }
  .nav-checkout li {
    width: 100%;
  }
  .nav-checkout li .nav-link{
    display: none;
    column-gap: 1rem;
    align-items: center;
    width: 100%;
    font-size: 1.2rem;
    padding-left: 0;
  }
  .nav-checkout li .nav-link .step-count{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--principal);
    color: var(--blanco);
  }
  .nav-checkout li .nav-link.active{
    display: flex;
    width: 100%;
  }
  .step-title{
    margin-bottom: 0;
  }
  .btnPrevious, .btnNext{
    min-width: unset;
    width: fit-content;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    max-width: 165px;
    font-size: .9rem;
    white-space: nowrap;
  }
  /* Fin Checkout */
  .list-options{
    flex-wrap: wrap;
  }
  .text-magistral, .text-magistral h6{
    width: 100%;
  }
  .container-magistral{
    max-width: 370px;
  }
}

@media screen and (max-width:690px) {
  .btn-call{
    display: none;
  }
  .nav-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem .5rem;
    background: var(--principal);
  }
  .nav-header-top .btn-call{
    display: flex;
    justify-content: center;
    gap: .1rem;
  }
  .nav-header-top .btn-call-container {
    top: unset;
    font-size: .65rem;
    flex-direction: row;
    gap: .5rem;
    color: var(--blanco);
  }
  .nav-header-top .btn-call img {
    height: 14px;
    filter: brightness(0) saturate(100%) invert(94%) sepia(5%) saturate(3%) hue-rotate(120deg) brightness(119%) contrast(100%);
  }
}

@media screen and (max-width:480px) {
  .nav-header-top .btn-call img{
    display: none;
  }
  .nav-header{
    padding: .5rem .5rem;
  }
  .img-logo{
    height: 40px;
    top: 0;
  }
  .btn-header{
    height: 40px;
    gap: 0;
  }
  .btn-header-wrapper{
    left: unset;
    width: 35px;
    height: 35px;
  }
  .cart-count{
    font-size: .6rem;
  }
  .card-info-images{
    width: 40px;
    height: 40px;
  }
  .card-info-images img{
    height: 25px;
    width: 30px;
  }
  .title-banner-text-info{
    font-size: 1.6rem;
    width: 100%;
  }
  .subtitle-banner-text-info{
    width: 100%;
  }
  button.close {
    background: rgb(255 255 255 / 50%) ;
  }
  .paddiing-left{
    padding: 0 1.4rem;
  }
  .owl-carousel.owl-marcas{
    width: 100%;
  }

  .grid-filtros{
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .btn-producto{
    width: 100%;
    justify-content: center;
  }
  .text-itau{
    margin-bottom: .8rem;
  }

  .menu-mobile{
    width: 100%;
    min-width: 320px;
  }
  /* Carrito */
  .cart-header{
    width: 100%;
    min-width: 320px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .card-cart{
    gap: .8rem;
  }
  /* Filtros Catalogo */
  .container-text-banner{
    width: 90%;
    min-width: unset;
    padding: 1rem;
  }
  .title-banner{
    font-size: 1.2rem;
  }
  .grid-productos, .grid-favoritos {
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  /* Seccion Noticias */
  .grid-noticias {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'n-1'
        'n-2'
        'n-3'
        'n-4';
    gap: 1.6rem;
  }
  /* Seccion Noticias */

  .container-btn-contact {
    right: 1rem;
    bottom: 1rem;
  }
  .text-whatsapp{
    font-size: .8rem;
  }
  .card-botones-ficha {
    flex-wrap: wrap;
  }
  .btn-ficha{
    width: 100%;
  }

  .card-cart-contador{
    width: 100%;
  }
  .count-input{
    width: calc(100% - 70px);
  }
  .list-sucursales li{
    justify-content: center;
  }

  /* Aside Sucursales */
  .aside-sucursales{
    padding: 1.2rem;
  }
  .title-aside-sucursales{
    padding-bottom: 1rem;
  }
  .title-sucursales{
    text-align: left;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .label-option{
    font-size: .75rem;
  }
  .salect-sucursales{
    font-size: .9rem;
  }
  .tabla-sucursales{
    width: 92vw !important;
  }
  .tabla-sucursales td{
    width: fit-content;
    max-width: 90vw;
    display: block;
  }
  /* Fin Aside Sucursales */

  /* Magistal */
  .img-magistral{
    height: 550px;
  }
  /* Fin Magistal */
  .nav-tabs .nav-link{
    font-size: 1rem;
  }

  /* Producto */
  .owl-productos .card-titulo,
  .owl-relacionados .card-titulo{
    font-size: 1rem;
  }
  .item-footer{
    overflow: hidden;
  }
  /* Fin Producto */

  /* Promocion */
  .wrapper-promociones{
    aspect-ratio: unset;
  }
  .promo-contador{
    position: unset;
    transform: translateY(-2rem);
    aspect-ratio: unset;
    width: 100%;
    max-width: 100%;
    padding: 1rem;
  }
  .simplyCountdown {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    height: unset;
    aspect-ratio: unset;
  }

  /* Fin Promocion */

}