@import url(../css/fonts.css);

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

html {
  scroll-behavior: smooth;
}

:root {
  --Mts-regular: "Monstserrat-Regularr", sans-serif;
  --Rb-regular: "Roboto-Regular", sans-serif;
  --Fj-regular: "Fjalla-one", sans-serif;
  --bg-azul: #00002a;
  --bg-black: #111;
  --bg-purple-main: #9300e8;
  --bg-morado-claro: #9669f0;
  --bg-color-red: #f23f40;
}

body {
  width: 100%;
  font-family: var(--Mts-regular);
}

main {
  width: 100%;
  overflow: hidden;
}

section {
  width: 100%;
  height: 100%;
  padding-block: 1rem 4rem;
  position: relative;
}

.container {
  width: 92%;
  max-width: 1200px;
  margin: auto;
}

h2,
.gTitle {
  margin-bottom: 1rem; /* mb-4 */
  font-size: clamp(24px, 2.5vw, 36px);

  font-weight: 900; /* font-black */
  letter-spacing: -0.05em; /* tracking-tighter */
  text-align: center; /* text-center */
  text-transform: uppercase; /* uppercase */
  border-radius: 0.375rem; /* rounded-md */
}

.none {
  display: none;
}

h1 {
  font-size: 80px;
  line-height: 1.1;
  letter-spacing: 0.4px;
  margin-bottom: 3rem;
  color: #000;
  font-weight: var(--sf-regular);
}

.h1_text {
  font-size: calc(50px + (80 - 50) * ((100vw - 375px) / (1920 - 375)));
}

p {
  color: #000;
  font-size: 18px;
  line-height: 1.44;
  letter-spacing: 0.0125rem;
}

li {
  list-style: none;
}

img {
  width: 100%;
  height: auto;
}
.wa-order-button {
  margin-top: 1rem !important;
}

.margin-section {
  /*margin-top: 108px;*/
  /* margin-top: 220px; */
  margin-top: 291px;
}

a {
  text-decoration: none;
}
.white {
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: clamp(0.8rem, 2vw, 1rem);
}
/*Clases generales*/
.flex-col {
  display: flex;
  flex-direction: column;
  /* justify-content: center;
    align-items: center; */
}

.flex-row {
  display: flex;
  align-items: center;
}
.w-100 {
  width: 100%;
}
.justify-center {
  justify-content: center;
}

.splide {
  width: 100%;
  height: 100%;
  .splide__track {
    width: 100%;
    height: 100%;
    .splide__list {
      width: 100%;
      height: 100%;
      .splide__slide {
        width: 100%;
        height: 100%;
      }
    }
  }
  .splide__arrows {
    .splide__arrow--prev {
      width: 35px;
      height: 35px;
      background-color: white;
      border-radius: 5px;
      /* right: 10%;
      top: -10%; */
      top: 40%;
      left: inherit;
      margin-right: 24px;
    }
    .splide__arrow--next {
      width: 35px;
      height: 35px;
      background-color: white;
      border-radius: 5px;
      top:40%;
      /* top: -10%;
      
      right: 5%; */
    }
  }
}

.gButton {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  height: 3.25rem;
  transition: all 400ms ease;
  font-size: 1rem;
  color: #fff;
  background: none;
  padding-left: 2.1875rem;
  padding-right: 2.1875rem;
  width: fit-content;
  margin: 0;

  border-radius: 0.125rem;
}

/*Estilos header*/
/*Estilos header*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;

  .header-top {
    justify-content: center;
    background-color: var(--bg-black);
    .dgwt-wcas-ico-magnifier-handler {
      display: none;
    }
    /* .dgwt-wcas-search-wrapp {
      min-width: 500px;
    } */
    .container {
      justify-content: space-between;
      gap: 2rem;
      .logo-mirana {
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          max-width: 180px;
          height: auto;
          object-fit: contain;
        }
      }

      .menu-icons {
        justify-content: flex-end;
        gap: 2rem;
        /* flex: .8; */
        width: 100%;
        svg {
          color: #102820;
        }
        .dgwt-wcas-search-wrapp {
          margin: auto 0;
        }

        a,
        .hamburger-btn {
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          background: none;
          border: none;
          cursor: pointer;
          padding: 0;

          &:hover {
            color: var(--accent-color, #f0f0f0);
          }
        }

        .hamburger-btn {
          svg {
            transition: transform 0.3s ease;
          }

          &:hover svg {
            transform: scale(1.1);
          }
        }
      }
    }
  }

  .header-center {
    background-color: var(--bg-black);
    padding-block: 1rem;
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      .dgwt-wcas-search-wrapp {
        display: none;
      }
      .menu-header {
        .custom-header-menu {
          gap: 2rem;
          height: 100%;

          li {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;

            a {
              color: white;
              font-family: var(--Rb-regular);
              font-weight: 500;
              display: block;
              text-transform: uppercase;
              padding: 5px 0;
            }

            &:has(.submenu) > a::after {
              content: url("data:image/svg+xml;base64,CiAgICA8c3ZnIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZmYiPgogICAgICAgIDxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIj48L2c+CiAgICAgICAgPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L2c+CiAgICAgICAgPGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTIgMTQuNUMxMS45MDE1IDE0LjUwMDUgMTEuODAzOCAxNC40ODEzIDExLjcxMjggMTQuNDQzNUMxMS42MjE4IDE0LjQwNTcgMTEuNTM5MiAxNC4zNTAxIDExLjQ3IDE0LjI4TDggMTAuNzhDNy45MDg2MSAxMC42MzkxIDcuODY3MTkgMTAuNDcxNSA3Ljg4MjM4IDEwLjMwNDJDNy44OTc1NiAxMC4xMzY5IDcuOTY4NDggOS45Nzk1NCA4LjA4Mzc2IDkuODU3MzVDOC4xOTkwNCA5LjczNTE1IDguMzUyIDkuNjU1MTkgOC41MTgxNCA5LjYzMDI5QzguNjg0MjggOS42MDU0IDguODUzOTYgOS42MzY5OSA5IDkuNzIwMDNMMTIgMTIuNzJMMTUgOS43MjAwM0MxNS4xNDYgOS42MzY5OSAxNS4zMTU3IDkuNjA1NCAxNS40ODE5IDkuNjMwMjlDMTUuNjQ4IDkuNjU1MTkgMTUuODAxIDkuNzM1MTUgMTUuOTE2MiA5Ljg1NzM1QzE2LjAzMTUgOS45Nzk1NCAxNi4xMDI0IDEwLjEzNjkgMTYuMTE3NiAxMC4zMDQyQzE2LjEzMjggMTAuNDcxNSAxNi4wOTE0IDEwLjYzOTEgMTYgMTAuNzhMMTIuNSAxNC4yOEMxMi4zNjc1IDE0LjQxNDQgMTIuMTg4NiAxNC40OTMxIDEyIDE0LjVaIiBmaWxsPSIjZmZmIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9zdmc+");
              font-size: 0.7em;
              margin-left: 5px;
              display: inline-block;
              vertical-align: middle;
            }

            .submenu {
              position: absolute;
              top: 100%;
              left: 0;
              min-width: 200px;
              background-color: #000;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
              z-index: 1000;
              padding: 10px 0;
              border-radius: 4px;
              margin-top: 0;

              opacity: 0;
              visibility: hidden;
              pointer-events: none;
              transition: all 0.3s ease;
              transform: translateY(10px);

              li {
                display: block;
                width: 100%;
                height: auto;
                padding: 0;

                a {
                  display: block;
                  padding: 8px 15px;
                  white-space: nowrap;
                  color: white;
                  font-size: 0.9em;
                  font-weight: 400;

                  &:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                  }
                }
              }
            }

            &:hover > .submenu,
            &.active > .submenu {
              opacity: 1;
              visibility: visible;
              pointer-events: all;
              transform: translateY(0);
            }

            &.active > a {
              color: var(--accent-color, #f0f0f0);
            }
          }
        }
      }
    }
  }

  &.scrolling {
    background-color: var(--bg-black);

    .header-top {
      .menu-header {
        .custom-header-menu {
          li {
            a {
              color: white;
            }
          }
        }
      }
      .menu-icons {
        svg {
          color: white;
        }
      }
    }
    .header-bottom {
      visibility: hidden;
      display: none;
    }
  }
}

.header-bottom {
  background-color: white;
  width: 100%;
  min-height: 60px;
  height: 100%;
  visibility: visible;
  transition: all 0.3s ease-in-out;

  #swBrands {
    overflow: visible !important;
    height: 100%;
    padding-block: 1rem;
    .splide__track {
      .splide__list {
        .splide__slide {
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: auto;
            height: auto;
            max-width: 100%;
            object-fit: contain;
            /**filter: grayscale(1);**/
          }
          &:hover {
            img {
              filter: grayscale(0);
            }
          }
        }
      }
    }
  }
}

/* Estilos del menú móvil */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;

  &.active {
    visibility: visible;
    opacity: 1;

    .mobile-menu-content {
      transform: translateX(0);
    }
  }
}

.mobile-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100%;
  background-color: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  background-color: var(--bg-black, #000);

  .mobile-menu-logo {
    img {
      height: 40px;
      width: auto;
    }
  }

  .mobile-menu-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    svg {
      width: 24px;
      height: 24px;
    }
  }
}

.mobile-menu-nav {
  padding: 1rem 0;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-item {
  position: relative;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.mobile-menu-link {
  display: block;
  padding: 1rem;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
  transition: all 0.3s ease;

  &:hover {
    background-color: #f8f9fa;
    color: var(--accent-color, #007cba);
  }
}

.mobile-submenu-toggle {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: #666;
  transition: all 0.3s ease;

  &.active {
    transform: translateY(-50%) rotate(180deg);
    color: var(--accent-color, #007cba);
  }

  &:hover {
    color: var(--accent-color, #007cba);
  }

  svg {
    width: 16px;
    height: 16px;
  }
}

.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;

  &.open {
    max-height: 500px;
  }
}

.mobile-submenu-item {
  border-bottom: 1px solid #e9ecef;

  &:last-child {
    border-bottom: none;
  }
}

.mobile-submenu-link {
  display: block;
  padding: 0.75rem 1rem 0.75rem 2rem;
  color: #666;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 400;
  transition: all 0.3s ease;

  &:hover {
    background-color: #e9ecef;
    color: var(--accent-color, #007cba);
  }
}

/* Prevenir scroll del body cuando el menú está abierto */
body.mobile-menu-open {
  overflow: hidden;
}

/*Fin estilos header*/
/*Estilos home*/

.banners-promotions {
  /* margin-top: 4.063rem; */
  padding-block: 0;
  margin-top: 208px;
  /* padding-block-start: 4rem; */
  height: 100%;

  #splBanners {
    .splide__track {
      .splide__list {
        .splide__slide {
          .card-banner {
            width: 100%;
            height: 100%;
            picture {
              display: block;
              width: 100%;
              height: 100%;
              img {
                /* object-fit: cover; */
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
.collections {
  gap: 2rem;
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;

    .box-wrapper {
      position: relative;

      span {
        position: absolute;
        left: 50%;
        bottom: -1rem;
        transform: translateX(-50%);
        background-color: #101824;
        font-size: 14px;
        padding: 12px 16px;
        border-radius: 5px;
        color: white;
        z-index: 2;
        font-family: var(--Mts-regular);
        font-weight: 600;
        transition: all 0.3s ease-in-out;
      }

      .box-collection {
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.2);
          z-index: 1;
        }

        img {
          width: 100%;
          height: auto;
          object-fit: cover;
          transform: scale(1);
          transition: all 0.3s ease-in-out;
          /* Quitamos position absolute para que el contenedor tome su altura */
        }
      }

      &:hover {
        .box-collection::after {
          content: none;
        }

        .box-collection img {
          transform: scale(1.1);
        }

        span {
          background-color: rgba(242, 63, 64, 1);
        }
      }
    }
  }
}
.latest_releases {
  .wrap {
    padding-inline: 1rem;
    .wrapper-splide {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-self: center;
      .splide {
        .splide__track {
          .splide__list {
            .splide__slide {
              .producto-item {
                .info-product {
                  padding: 0;
                }
              }
            }
          }
        }
        & .splide__arrows {
         /* .splide__arrow--prev{
            top: 40%;
          
            left: 2%;

          }
          .splide__arrow--next{
            top: 40%;
            right: 2%;
          } */
        }
      }
      .btn-black {
        color: #fff;
        padding: 5px 10px;
        margin: auto;
        border-radius: 10px;
        background-color: #000;
        font-size: 16px;
        line-height: 20px;
        font-weight: 800;
      }
    }
  }
}

.latest_releases,
.recomend,
.pre-sale,
.productos-relacionados-section,
.recien-llegados {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    transform: skewY(2.69deg);
    display: block;
    background-color: rgba(231, 231, 224, 1);
    z-index: -1;
  }

  .wrapper-splide {
    padding-inline: 24px;
    width: 100%;
    .splide {
      .splide__track {
        .splide__list {
          .splide__slide {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            /* border: 0.7rem solid #101820; */
            .producto-item {
              width: 100%;

              .info-product {
                gap: 0.5rem;

                padding: 1.5rem 1rem 1.2rem;
                /* background-color: rgba(16, 24, 32, 0.75); */
                text-align: center;

                h3 {
                  /* color: white; */
                  color: #000;
                  font-size: 18px;
                  font-weight: 900;
                  text-align: center;
                  line-height: 1;
                  text-transform: uppercase;
                }

                .prices {
                  justify-content: center;
                  align-items: center;
                  gap: 1rem;
                  p {
                    /* color: white; */
                    color: #000;
                  }
                  .sale-price {
                    font-size: 15px;
                    font-weight: 400;
                    line-height: 18px;
                    text-decoration: line-through;
                    color: var(--bg-color-red);
                  }
                  .regular-price {
                    /* color: #fff; */
                    color: #000;
                    font-size: 20px;
                    line-height: 20px;
                    font-weight: 700;
                  }
                }
                .pre-order {
                  color: #fff;
                  padding: 5px 10px;
                  margin: auto;
                  border-radius: 10px;
                  background-color: rgb(239 68 68);
                  font-size: 16px;
                  line-height: 20px;
                  font-weight: 800;
                  transform: translateY(300px);
                  transition: all 0.3s ease-in-out;
                  &:hover {
                    background-color: var(--bg-azul);
                  }
                }
              }
              &:hover {
                .info-product {
                  .pre-order {
                    transform: translate(0);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.recomend {
  .wrapper-splide {
    padding-inline: 0;
  }
}

.productos-relacionados-section {
  .wrapper-splide {
    .splide {
      .splide__track {
        .splide__list {
          .splide__slide {
            .product {
              display: flex;
              flex-direction: column;
              align-items: center;
              .button {
                background-color: #f23f40;
                color: white;
              }
            }
          }
        }
      }
    }
  }
}
.special-offers {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    transform: skewY(2.69deg);
    display: block;
    background-color: rgba(231, 231, 224, 1);
    z-index: -1;
  }
  .container {
    gap: 2rem;
    .texts {
      h2 {
        color: white;
      }
      p {
        color: white;
        text-align: center;
      }
    }
    .parent {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(5, 1fr);
      grid-column-gap: 15px;
      grid-row-gap: 15px;
      width: 100%;
      margin: 0 auto;
      height: 80vh;

      .grid-item {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background-color: #333;
        color: white;
        display: flex;
        align-items: flex-end;

        &:before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.2);
          z-index: 2;
        }

        &.div1 {
          grid-area: 1 / 1 / 3 / 3;
        }

        &.div2 {
          grid-area: 3 / 1 / 5 / 3;
        }

        &.div3 {
          grid-area: 1 / 3 / 5 / 5;
        }

        &.div4 {
          grid-area: 1 / 5 / 5 / 7;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
        }

        .text {
          position: relative;
          z-index: 3;
          padding: 20px;
          font-weight: bold;
          font-size: 24px;
          text-transform: uppercase;
          text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
        }
      }

      @media (max-width: 968px) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
        height: 90vh;

        .grid-item {
          &.div1 {
            grid-area: 1 / 1 / 3 / 3;
          }

          &.div2 {
            grid-area: 3 / 1 / 5 / 3;
          }

          &.div3 {
            grid-area: 1 / 3 / 5 / 5;
          }

          &.div4 {
            grid-area: 5 / 1 / 7 / 5;
          }
        }
      }

      @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(8, 1fr);
        grid-gap: 10px;
        height: auto;
        min-height: 100vh;

        .grid-item {
          &.div1 {
            grid-area: 1 / 1 / 3 / 2;
          }

          &.div2 {
            grid-area: 1 / 2 / 3 / 3;
          }

          &.div3 {
            grid-area: 3 / 1 / 6 / 3;
          }

          &.div4 {
            grid-area: 6 / 1 / 9 / 3;
          }

          .text {
            padding: 15px;
            font-size: 18px;
          }
        }
      }

      @media (max-width: 480px) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 200px);
        height: auto;

        .grid-item {
          &.div1,
          &.div2,
          &.div3,
          &.div4 {
            grid-area: auto;
          }

          .text {
            padding: 12px;
            font-size: 16px;
          }
        }
      }
    }
  }
}

.oferta {
  .container {
    .parent {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 8px;

      /* Esto hace que cada fila mida lo mismo */
      grid-auto-rows: 1fr;
    }

    .child {
      display: flex;
      flex-direction: column;

      .image {
        flex: 1;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover; /* adapta la imagen al espacio del grid */
          transition: all 0.3s ease-in-out;
        }
      }

      .name {
        background-color: #1c1c1c;
        color: #fff;
        text-align: center;
        font-weight: 700;
        padding: 4px;
        transition: all 0.3s ease-in-out;
      }

      &:hover {
        .image img {
          transform: scale(1.2);
        }
        .name {
          background-color: var(--bg-color-red);
        }
      }
    }

    .div1 {
      grid-column: span 2 / span 2;
      grid-row: span 2 / span 2;
    }

    .div2 {
      grid-column: span 2 / span 2;
      grid-column-start: 3;
    }

    .div3 {
      grid-column: span 2 / span 2;
      grid-column-start: 3;
      grid-row-start: 2;
    }
  }
}

.why-shop {
  .container {
    gap: 3rem;
    .texts {
      p {
        text-align: center;
      }
    }
    .wrapper-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      justify-content: center;
      align-items: center;
      gap: 2rem; /* o el espacio entre tus tarjetas */
      .card {
        align-items: center;
        gap: 1rem;
      }
      h3 {
        width: fit-content;
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-size: 14px;
        text-align: center;
        text-transform: uppercase;
      }
    }
  }
}

.banner-pop {
  padding: 0;
  background-color: var(--bg-azul);
  .left {
    width: 60%;
    picture {
      display: block;
      width: 100%;
      height: 100%;
      clip-path: polygon(0 0, 100% 0%, 89% 100%, 0% 100%);
    }
  }
  .right {
    width: 40%;
    height: 100%;
    padding: 1rem;

    .texts {
      gap: 1rem;
      justify-content: center;
      align-items: center;
      h3 {
        color: white;
        font-size: 40px;
        font-weight: 900;
        line-height: 45px;
      }
      p {
        color: white;

        text-align: center;
      }
      .link-popup {
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        border: 1px solid #fff;
        color: white;
        padding: 4px 12px;
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 2rem;
        text-align: center;
        transition: all 0.3s ease-in-out;
        &:hover {
          background-color: white;
          color: #000;
        }
      }
    }
  }
}
/*Fin estilos home*/

/*Estilos single-product*/
.single-product {
  margin-top: 88px;
  padding-block: 0;
  .container {
    .row {
      height: 100%;
      gap: 2rem;
      align-items: start;

      .producto-galeria {
        width: 50%;
        flex: 1;
        #splide-principal {
          .splide__arrows {
            .splide__arrow--prev {
              width: 35px;
              height: 35px;
              background-color: white;
              border-radius: 50%;
              top: inherit;
              bottom: 0;
              left: 1%;
            }
            .splide__arrow--next {
              width: 35px;
              height: 35px;
              background-color: white;
              border-radius: 50%;
              top: inherit;
              bottom: 0;
              right: inherit;
              left: 10%;
            }
          }
        }
      }
      .producto-info {
        width: 50%;
        align-self: normal;

        gap: 1rem;
        flex: 1;

        /* .producto-categorias {
          background: #f23f40;
          width: fit-content;
          color: white;
          padding: 5px 10px;
          font-size: 12px;
          font-weight: bold;
          border-radius: 5px;
        } */
        .producto-datos-top {
          display: flex;
          gap: 1rem;
          .etiqueta-dscto,
          .producto-categoria {
            color: white;
            padding: 4px 8px;
            border-radius: 50px;
            font-weight: 500;
            font-size: 14px;
            font-style: normal;
            letter-spacing: 1px;
            background-color: var(--bg-color-red);
            font-family: var(--Rb-regular);
          }
          .producto-categoria {
            background-color: var(--bg-purple-main);
          }
        }
        .producto-brand {
          font-size: 16px;
          font-weight: 300;
          font-style: normal;
          line-height: 1.6em;
          color: #5b5b5b;
          text-decoration: none;
          position: relative;
        }
        .producto-titulo {
          font-style: normal;
          font-family: var(--Mts-regular);
          text-transform: none;
          line-height: 1.5;
          color: var(--bg-azul);
          display: block;
          letter-spacing: 0px;
          text-rendering: optimizeLegibility;
          font-size: clamp(16px, 3vw, 24px);
          margin-bottom: 12px;
          clear: both;
          padding-top: 4px;
          font-weight: 400;
        }

        .producto-valoracion {
          display: flex;
          margin-bottom: 12px;
          gap: 10px;
          .star-rating {
            span {
              &::before {
                color: #ffc633;
              }
            }
          }
          .avg-rating {
            .light {
              color: rgba(0, 0, 0, 0.6);
            }
          }
        }
        .producto-precio {
          display: flex;
          gap: 12px;
          align-items: center;
          margin-bottom: 12px;
          .precio-oferta,
          .precio-regular {
            font-family: var(--Mts-regular);
            font-weight: 300;
            font-size: clamp(20px, 2vw, 32px);
            color: var(--bg-color-red);
          }

          .precio-regular {
            color: var(--bg-color-red);
            font-size: 20px;
            font-family: var(--Mts-regular);
          }
        }
        .producto-ahorro {
          font-family: var(--Mts-regular);
          font-weight: 300;
          font-size: clamp(12px, 1.5vw, 16px);
          color: var(--bg-color-red);
          margin-bottom: 12px;
        }

        .producto-acciones {
          margin-bottom: 12px;
          .cart {
            .deposits-frontend-wrapper {
              .deposit-notice {
                margin-bottom: 12px;
                font-weight: 600;
                span {
                  color: rgba(0, 0, 0, 0.6);
                }
              }
              .deposits-input-wrapper {
                flex-direction: column;
                gap: 0.75rem;
                .pretty {
                  input {
                  }
                  .state.p-primary-o {
                    border-radius: 0.5rem;
                    label {
                      font-weight: 600;
                    }
                  }
                }
              }
            }

            .quantity-button-wrapper {
              display: flex;
              flex-direction: column;
              gap: 12px;
              span {
                color: #102820;
                font-size: 16px;
                font-weight: 700;
              }
              .cantidades {
                display: flex;
                align-items: center;
                gap: 12px;

                .custom-quantity-input {
                  display: flex;
                  align-items: center;
                  align-self: stretch;
                  max-width: 120px;
                  background-color: #f0f0f0;
                  border-radius: 32px;
                  .minus-btn {
                    border-radius: 4px 0 0 4px;
                    height: 100%;
                  }

                  .plus-btn {
                    border-radius: 0 4px 4px 0;
                    height: 100%;
                  }

                  .quantity-btn {
                    width: 30px;
                    height: 30px;
                    border: none;
                    background: transparent;
                    cursor: pointer;
                    font-size: 18px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0;
                    margin: 0;
                  }
                  .quantity {
                    height: 100%;
                    input {
                      border: none;
                      height: 100%;
                      background-color: transparent;
                      appearance: none;
                    }
                  }

                  .quantity input.qty::-webkit-outer-spin-button,
                  .quantity input.qty::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                  }
                }
                .single_add_to_cart_button {
                  /* background-color: #101824; */
                  background-color: var(--bg-purple-main);
                  color: white;
                  font-weight: 600;
                  border-radius: 32px;
                }
              }
            }
          }
        }
        .producto-informacion {
          display: flex;
          gap: 1rem;
          padding: 1rem 0;
          border-top: 1px solid rgba(0, 0, 0, 0.2);
          border-bottom: 1px solid rgba(0, 0, 0, 0.2);
          .producto-sku,
          .producto-stock,
          .producto-categorias,
          .producto-marca {
            span {
              color: #101824;
              font-weight: 600;
            }
            a {
              font-size: 16px;
              background-color: rgba(255, 51, 51, 0.1);
              padding: 5px 10px;
              border-radius: 32px;
              color: rgba(255, 51, 51, 1);
            }
            color: rgba(0, 0, 0, 0.6);
          }
          margin-bottom: 12px;
        }
        .mis-upsells {
          .productos-upsell-personalizados {
            display: flex;
            gap: 1rem;
            .upsell-producto {
              display: flex;
              flex-direction: column;
              width: 100%;
              .attachment-woocommerce_thumbnail {
                max-width: 150px;
                max-height: 150px;
                aspect-ratio: 1 / 1;
              }
              h4 {
                margin: 0;
                line-height: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                text-align: center;
                line-clamp: 1;
                -webkit-box-orient: vertical;
                font-family: var(--Mts-regular);
                color: #000;
              }
              .precio {
                .price {
                  color: #000;
                  font-weight: 300;
                }
              }
              .button {
                background-color: #9300e8;
                color: white;
                border-radius: 24px;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
}
/* Estilos para el componente de acordeón */
.producto-acordeon {
  margin-bottom: 2rem;

  .container {
    max-width: 100%;
    padding: 0 15px;
  }

  .accordion {
    border-radius: 8px;
    overflow: hidden;
  }

  .accordion-item {
    border: none;
    margin-bottom: 1rem;
    background-color: #fff;
  }

  .accordion-header {
    margin: 0;
  }

  .accordion-button {
    width: 100%;
    text-align: left;
    background-color: #f8f8f8;
    border: none;
    color: #333;
    font-size: clamp(1rem, calc(1rem + 0.5vw), 1.375rem);
    font-weight: 500;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &:after {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-right: 2px solid #333;
      border-bottom: 2px solid #333;
      transform: rotate(45deg);
      transition: transform 0.3s ease;
      margin-left: 10px;
    }

    &.active {
      background-color: #fff;
      border-bottom: 1px solid #000;
      color: #000;
      font-weight: 600;

      &:after {
        transform: rotate(-135deg);
      }
    }
  }

  .accordion-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;

    &.show {
      max-height: 2000px; /* Valor alto para asegurar que todo el contenido sea visible */
    }
  }

  .accordion-body {
    padding: 1.5rem;
    background-color: #fff;
    font-family: var(--Mts-regular);
    p,
    strong {
      font-weight: 400;
    }

    ul,
    ol {
      padding-left: 1.5rem;

      li {
        list-style-type: disc;
        font-weight: 600;
        font-family: var(--Mts-regular);
        padding-block: 0.3rem;
      }
    }
  }

  /* Estilos para reseñas */
  #reviews {
    #comments {
      .commentlist {
        column-count: 2;
        padding: 0;

        .review {
          list-style-type: none;
          margin-bottom: 1.5rem;
          break-inside: avoid;

          .comment_container {
            img {
              display: none;
            }
          }

          .comment-text {
            margin: 0;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-height: 245px;
            padding: 1.5rem;
            background-color: #f8f8f8;

            .star-rating {
              span::before {
                color: #ffc633;
              }
            }

            .meta {
              display: flex;
              flex-direction: column;
              position: relative;

              .woocommerce-review__author {
                font-size: 20px;
                font-weight: bold;
                color: #000;
              }

              .woocommerce-review__dash {
                content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNSIgdmlld0JveD0iMCAwIDI0IDI1IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTEyIDIuODI4OThDMTAuMDcxNiAyLjgyODk4IDguMTg2NTcgMy40MDA4MSA2LjU4MzE5IDQuNDcyMTVDNC45Nzk4MiA1LjU0MzQ5IDMuNzMwMTMgNy4wNjYyNCAyLjk5MjE4IDguODQ3ODJDMi4yNTQyMiAxMC42Mjk0IDIuMDYxMTQgMTIuNTg5OCAyLjQzNzM1IDE0LjQ4MTFDMi44MTM1NSAxNi4zNzI0IDMuNzQyMTUgMTguMTA5NyA1LjEwNTcxIDE5LjQ3MzNDNi40NjkyOCAyMC44MzY4IDguMjA2NTYgMjEuNzY1NCAxMC4wOTc5IDIyLjE0MTZDMTEuOTg5MiAyMi41MTc4IDEzLjk0OTYgMjIuMzI0OCAxNS43MzEyIDIxLjU4NjhDMTcuNTEyNyAyMC44NDg5IDE5LjAzNTUgMTkuNTk5MiAyMC4xMDY4IDE3Ljk5NThDMjEuMTc4MiAxNi4zOTI0IDIxLjc1IDE0LjUwNzMgMjEuNzUgMTIuNTc5QzIxLjc0NzMgOS45OTM5NiAyMC43MTkyIDcuNTE1NTkgMTguODkxMyA1LjY4NzdDMTcuMDYzNCAzLjg1OTgyIDE0LjU4NSAyLjgzMTcxIDEyIDIuODI4OThaTTE2LjI4MDYgMTAuODU5NkwxMS4wMzA2IDE2LjEwOTZDMTAuOTYxIDE2LjE3OTMgMTAuODc4MyAxNi4yMzQ3IDEwLjc4NzIgMTYuMjcyNEMxMC42OTYyIDE2LjMxMDEgMTAuNTk4NiAxNi4zMjk2IDEwLjUgMTYuMzI5NkMxMC40MDE0IDE2LjMyOTYgMTAuMzAzOCAxNi4zMTAxIDEwLjIxMjggMTYuMjcyNEMxMC4xMjE4IDE2LjIzNDcgMTAuMDM5IDE2LjE3OTMgOS45NjkzOCAxNi4xMDk2TDcuNzE5MzggMTMuODU5NkM3LjU3ODY1IDEzLjcxODkgNy40OTk1OSAxMy41MjggNy40OTk1OSAxMy4zMjlDNy40OTk1OSAxMy4xMyA3LjU3ODY1IDEyLjkzOTEgNy43MTkzOCAxMi43OTg0QzcuODYwMTEgMTIuNjU3NiA4LjA1MDk4IDEyLjU3ODYgOC4yNSAxMi41Nzg2QzguNDQ5MDMgMTIuNTc4NiA4LjYzOTkgMTIuNjU3NiA4Ljc4MDYzIDEyLjc5ODRMMTAuNSAxNC41MTg3TDE1LjIxOTQgOS43OTgzNUMxNS4yODkxIDkuNzI4NjcgMTUuMzcxOCA5LjY3MzQgMTUuNDYyOCA5LjYzNTY4QzE1LjU1MzkgOS41OTc5NyAxNS42NTE1IDkuNTc4NTYgMTUuNzUgOS41Nzg1NkMxNS44NDg2IDkuNTc4NTYgMTUuOTQ2MSA5LjU5Nzk3IDE2LjAzNzIgOS42MzU2OEMxNi4xMjgyIDkuNjczNCAxNi4yMTA5IDkuNzI4NjcgMTYuMjgwNiA5Ljc5ODM1QzE2LjM1MDMgOS44NjgwNCAxNi40MDU2IDkuOTUwNzYgMTYuNDQzMyAxMC4wNDE4QzE2LjQ4MSAxMC4xMzI5IDE2LjUwMDQgMTAuMjMwNCAxNi41MDA0IDEwLjMyOUMxNi41MDA0IDEwLjQyNzUgMTYuNDgxIDEwLjUyNTEgMTYuNDQzMyAxMC42MTYyQzE2LjQwNTYgMTAuNzA3MiAxNi4zNTAzIDEwLjc4OTkgMTYuMjgwNiAxMC44NTk2WiIgZmlsbD0iIzAxQUIzMSIvPgo8L3N2Zz4=);
                position: absolute;
                right: 1rem;
                top: 0;
              }

              .woocommerce-review__published-date {
                font-size: 16px;
                color: rgba(0, 0, 0, 0.6);
              }
            }

            .description {
              p {
                font-size: clamp(12px, 2vw, 16px);
                line-height: 1.2;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.8);
              }
            }
          }
        }
      }
    }
  }
}
/*Fin estilos single-product*/
/*Estilos para el checkout*/

/*Fin estilos checkout*/
/*Estilos página de marcas*/
/*Fin estilos página de marcas*/
.brands-section {
  margin-top: 108px;
  background-color: rgba(231, 231, 224, 1);
  padding-block: 1rem;
  .container {
    h1 {
      /* font-size: clamp(2rem , 30vw, 3.4rem); */
      font-size: clamp(1rem, 5vw, 2.25rem);
      font-weight: bold;
      margin-block: 0 0.5em;
      padding-top: 1em;
      color: var(--bg-azul);
    }
  }
  .brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
    .brand-item {
      text-align: center;
      img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }
}

.brand-archive {
  margin-top: 108px;

  .brand-header {
    background-color: rgba(231, 231, 224, 1);
    padding-block: 2rem;

    .brand-banner {
      margin-bottom: 1.5rem;

      img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }
    }

    .brand-description {
      h1 {
        font-size: clamp(1rem, 5vw, 2.25rem);
        font-weight: bold;
        margin-block: 0 0.5em;
        padding-top: 1em;
        color: var(--bg-azul);
      }

      .description {
        font-size: clamp(0.9rem, 2vw, 1.1rem);
        line-height: 1.6;
        color: #444;
      }
    }
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 30px;
    margin-bottom: 30px;

    .product-item {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      a {
        text-decoration: none;
        color: inherit;
        display: block;
      }

      .product-thumbnail {
        height: 220px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }

        &:hover img {
          transform: scale(1.05);
        }
      }

      .product-info {
        padding: 15px;

        h2 {
          font-size: 16px;
          margin-bottom: 10px;
          color: #333;
          font-weight: 600;
          line-height: 1.3;
        }

        .price {
          font-weight: bold;
          color: var(--accent-color, #e63946);
          font-size: 1.1em;
          display: block;
          margin-top: 8px;
          text-align: center;
        }
      }
    }

    .pagination {
      grid-column: 1 / -1;
      margin-top: 30px;
      text-align: center;

      .page-numbers {
        padding: 8px 12px;
        border: 1px solid #ddd;
        margin: 0 5px;
        border-radius: 4px;
        color: var(--bg-azul);
        text-decoration: none;

        &.current {
          background-color: var(--bg-azul);
          color: white;
          border-color: var(--bg-azul);
        }

        &:hover:not(.current) {
          background-color: #f5f5f5;
        }
      }
    }

    .no-products {
      grid-column: 1 / -1;
      text-align: center;
      padding: 50px 0;
      color: #666;
      font-size: 1.1em;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .products-grid {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    .brand-header {
      padding-block: 1rem;
    }
  }

  @media (max-width: 480px) {
    .products-grid {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 15px;

      .product-item {
        .product-thumbnail {
          height: 180px;
        }

        .product-info {
          padding: 10px;

          h2 {
            font-size: 14px;
          }
        }
      }
    }
  }
}
/*Estilos footer*/

.main-login-user {
  /* min-height: 100dvh; */
  background-color: #202020;
  .register-or-login {
    display: flex;
    align-content: center;
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      .left-login {
        /* max-width: 550px; */
        width: 100%;
        .logo-mirana {
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            max-width: 200px;
          }
        }
        .title {
          align-items: center;
          color: #fff;
          span {
            font-size: 20px;
            color: #fff;
          }
        }
        .woocommerce {
          #customer_login {
            .u-column1,
            .u-column2 {
              .woocommerce-form {
                p {
                  color: #fff;
                }
                .container-inputs-checkbox {
                  .information-products {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/*Estilos de la página mi cuenta*/

/*Estios políticas*/
.politicas {
  .container {
    p {
      margin-bottom: 1rem;
      font-family: var(--Mts-regular);
    }
  }
}

/*Fin estilos página mi cuent*/

footer {
  background-color: var(--bg-black);
  padding-block: 4rem;
  .container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    .top {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: start;
      .footer-logo {
        gap: 1rem;
        img {
          max-width: 150px;
          object-fit: contain;
        }
        p {
          color: #fff;
        }
      }
      .footer-section {
        h3 {
          color: white;
          font-size: 24px;
          font-weight: bold;
        }
        .footer-links {
          li {
            text-decoration: none;
            color: #fff;
            font-size: 16px;
            padding-block: 0.4rem;
            a {
              text-decoration: none;
              color: #fff;
              font-size: 16px;
              padding-block: 0.4rem;
              font-family: var(--Mts-regular);
            }
          }
        }
      }
    }
    .social-links {
      display: flex;
      justify-content: center;
      gap: 2rem;
      .social-icon {
        svg {
          width: 30px;
          height: 30px;
        }
      }
    }
    .footer-bottom {
      display: flex;
      justify-content: center;
      p {
        color: #fff;
        text-align: center;
      }
    }
  }
}
/*Fin estilos footer*/