:root {
  --primary-color: #fbc737;
  --color-1: #8ebf38;
  --color-2: #007000;
  --color-3: #2b0002;
  --color-4: #fcd7c1;
  --font-1: "QuicksandMedium";
  --font-2: "QuicksandBold";
  --font-3: "Quicksand";
  --font-4: "JostRegular";
}

@font-face {
  font-family: "QuicksandMedium";
  src: url(../fonts/Quicksand-Medium.woff);
      font-style: normal;
}

@font-face {
  font-family: "QuicksandBold";
  src: url(../fonts/Quicksand-Bold.woff);
      font-style: normal;
}
@font-face {
  font-family: "Quicksand";
  src: url(../fonts/Quicksand-Regular.woff);
      font-style: normal;
}

@font-face {
  font-family: "JostRegular";
  src: url(../fonts/Jost-400-Book.woff);
      font-style: normal;
}

#banners {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 2;
    @media (max-width: 768px) {
      height: auto;
    }
  
    #splide-banner {
      width: 100%;
      height: 100%;
      position: relative;
  
      .splide__track {
        width: 100%;
        height: 100%;
        
        .splide__list {
          width: 100%;
          height: 100%;
          
          .splide__slide {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
  
            video {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
  
            .imagen-banner {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
              display: block;
              transform: scale(1.01); /* Evita bordes blancos */
              image-rendering: -webkit-optimize-contrast;
              image-rendering: crisp-edges;
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              -webkit-transform: translateZ(0);
              transform: translateZ(0);
              will-change: transform;
              
              @media (max-width: 768px) {
                display: none;
              }
            }

            .imagen-banner-responsive {
              display: none;
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
              transform: scale(1.01);
              image-rendering: -webkit-optimize-contrast;
              image-rendering: crisp-edges;
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              -webkit-transform: translateZ(0);
              transform: translateZ(0);
              will-change: transform;
              
              @media (max-width: 768px) {
                display: block;
                object-fit: contain;
              }
            }

            /* Optimización para pantallas retina */
            @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
              .imagen-banner,
              .imagen-banner-responsive {
                image-rendering: auto;
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
              }
            }
  
            .container-info {
              width: 80%;
              height: 100%;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -10%);
              display: flex;
              flex-direction: column;
              gap: 1rem;
              z-index: 2;
              
              @media (max-width: 768px) {
                width: 90%;
                transform: translate(-50%, -5%);
              }
              
              .textos {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1rem;
                
                h2, p {
                  color: white;
                }
                
                h2 {
                  font-family: var(--font-2);
                  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.45);
                  font-size: clamp(30px, 5vw, 40px);
                  font-style: normal;
                  font-weight: 700;
                  line-height: 1.2;
                  
                  @media (max-width: 768px) {
                    text-align: center;
                    width: 100%;
                  }
                }
                
                p {
                  font-family: var(--font-4);
                  font-size: clamp(18px, 3vw, 25px);
                  font-style: normal;
                  font-weight: 500;
                  line-height: 1.4;
                  width: 60%;
                  
                  @media (max-width: 768px) {
                    width: 100%;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
      
      .splide__arrow {
        &.splide__arrow--prev,
        &.splide__arrow--next {
          border-radius: 40px;
          border: 1px solid rgba(255, 255, 255, 1);
          background: rgba(0, 0, 0, 0.3);
          width: 40px;
          height: 40px;
          opacity: 1;
          transition: all 0.3s ease;
          
          &:hover {
            background: rgba(0, 0, 0, 0.5);
          }
          
          @media (max-width: 768px) {
            width: 35px;
            height: 35px;
          }
        }
        
        &.splide__arrow--prev {
          left: 3% !important;
        }
        
        &.splide__arrow--next {
          right: 3% !important;
        }
        
        svg {
          fill: white !important;
          font-size: 16px;
        }
      }
      
      .splide__pagination__page {
        background: #fff;
        height: 15px;
        width: 15px;
        transition: all 0.3s ease;
        
        &.is-active {
          background: #8EBF38;
          transform: scale(1.2);
        }
      }
    }
}
#categorias {
  width: 100%;
  background-color: rgba(252, 215, 193, 0.3);
  max-height: 46rem;
  position: relative;

  .container-image-hoja {
    position: absolute;
    top: -10%;
    right: 13%;
    width: 9rem;
    height: 9rem;
    transition: all 0.4s ease-in-out;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: blur(2px);
    }

    &:hover {
      transform: translateY(-20px);
      img {
        filter: none;
      }
    }
  }

  .categorias {
    height: 100%;
    padding-block: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;

    .info-categoria {
      display: flex;
      flex-direction: column;
      justify-content: center;
            align-items: center;
      gap: 1rem;

      h2 {
        color: var(--color-2);
        text-align: center;
        font-family: "QuicksandBold";
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 50px;
        text-align: center;
      }
      p {
        color: var(--color-3);
        text-align: center;
        font-family: "JostRegular";
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 25px; /* 125% */
        text-align: center;
        width: 80%;
      }
    }

    .info-categoria h2::before {
                content: "";
            display: inline-flex;
            /* display: inline-block; */
            position: relative;
            /* position: absolute; */
            left: 0.5rem;
            top: 0rem;
            width: 47px;
            height: 30px;
            /* margin-right: 10px; */
            background-image: url(../../images/hojita.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
    }

    #splide-categoria {
      width: 100%;
      min-height: 43rem;

      .splide__track {
        width: 100%;
        height: 100%;

        .splide__list {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .splide__slide {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative; /* Necesario para el pseudo-elemento */

            .box-categoria {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              width: 12rem;
              height: 19rem;
              gap: .5rem;
              .img-categoria {
                position: relative; /* Necesario para posicionar el pseudo-elemento correctamente */
                transition: transform 0.3s ease;
                /* display: flex;
                justify-content: center;
                align-items: center; */

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

                &::after {
                  content: "";
                  position: absolute;
                  bottom: 0; /* Coloca el borde en la parte inferior */
                  left: 50%; /* Centra el borde horizontalmente */
                  width: 40%;
                  height: 2px; /* Altura inicial del borde */
                  background-color: var(--color-2); /* Color del borde */
                  transform: translateX(
                    -50%
                  ); /* Ajusta el borde para que esté centrado */
                  transition: height 0.3s ease, width 0.3s ease; /* Transiciones suaves para el hover */
                }
              }

              .titulo-categoria {
                height: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                h3 {
                  color: var(--color-3);
                  text-align: center;
                  font-family: "JostRegular";
                  font-size: 25px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 30px; /* 120% */
                  transition: font-weight 0.3s ease; /* Transición suave para el peso de la fuente */
                }
              }
            }
            &:hover .img-categoria img {
              transform: scale(
                1.1
              ); /* Aumenta ligeramente el tamaño de la imagen al hacer hover */
            }

            &:hover .img-categoria::after {
              height: 1px; /* Altura del borde al hacer hover */
              width: 50%; /* Ancho del borde al hacer hover */
            }

            &:hover .titulo-categoria h3 {
              font-weight: 700; /* Cambia el peso de la fuente en hover */
            }
          }
        }
      }
    }
  }
}

#nosotros {
  width: 100%;
  min-height: 43rem;
  position: relative;
  padding-block: 4rem;
  .nosotros {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .container-image {
      width: 45%;
      height: 100%;
      position: relative;
      img.operario {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
      }
      img:nth-child(2) {
        position: absolute;
        top: 0;
        left: -15%;
        filter: blur(2px);
        transition: all 0.4s ease-in-out;

        &:hover {
          transform: translateY(-20px);
          filter: none;
        }
      }
      img:nth-child(3) {
        position: absolute;
        bottom: 0;
        left: 0;
        filter: blur(2px);
        transition: all 0.4s ease-in-out;

        &:hover {
          transform: translateY(-20px);
          filter: none;
        }
      }
    }

    .container-info {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      gap: 1rem;
      
      
            .planta-transparente{
      
        position: absolute;
            width: 17rem;
    height: auto;
    right: -13rem;
    bottom: -33rem;
        img{
          height: 100%;
          object-fit: cover;
          object-position: center;
          width: 100%;
        }
        
        @media (max-width:768px){
            width: 20rem;
                height: auto;
                right: -3rem;
                bottom: -49rem;
        }
      }
      
      h2 {
        color: var(--color-2);
        text-align: center;
        font-family: "QuicksandBold";
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 50px;
        text-align: center;
        width: max-content;
        position: relative;
      }

      p {
        color: var(--color-3);
        text-align: center;
        font-family:var(--font-4) ;
        font-size: 23px;
        font-style: normal;
        font-weight: 400;
        line-height: 30px; /* 120% */
        text-align: start;
      }
    }

    .container-info h2::before {
        content: "";
        display: inline-block;
        position: absolute;
        left: -1.5rem;
        
        width: 50px;
        height: 40px;
            /* margin-right: 10px; */
        background-image: url(../../images/hojita.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center
    }

    .image-taza {
        position: absolute;
        top: 0;
        right: 0;
        height: 36rem;
        width: auto;
        aspect-ratio: 1 / 1;
        transform: translate(34%, -51%);
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
      }
    }
  }
}
button.splide__pagination__page.is-active {
  display: none;
}
#productos {
  width: 100%;
  background-color: rgba(252, 215, 193, 0.3);
  /* height: 100vh; */
  height: 45rem;
  padding-block: 2rem;
  display: flex;
  /* justify-content: space-between; */
  flex-direction: column;
  h2 {
    height: 15%;
    color: var(--color-2);
    text-align: center;
    font-family: "QuicksandBold";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 100% */
  }

  .productos {
    height: 85%;
    padding-block: 2rem;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    .tab {
      overflow: hidden;
      justify-content: center;
      gap: 3rem;
      display: flex;
      flex-wrap: wrap;
      /* padding-inline: 10rem; */
    }

    /* Style the buttons inside the tab */
    .tab button {
      border: none;
      display: flex;
      width: 135px;
      height: 50px;
      padding: 15px 25px;
      justify-content: center;
      align-items: center;
      gap: 7px;
      flex-shrink: 0;
      border-radius: 25px 0px;
      background: rgba(142, 191, 56, 0.1);
      color: var(--color-3);
      text-align: center;
      font-family: "JostRegular";
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px;
    }

    /* Change background color of buttons on hover */

    /* Create an active/current tablink class */
    .tab button.active {
      background-color: var(--color-3);
      color: white;
    }

    /* Style the tab content */
    .tabcontent {
      display: none;
      padding: 6px 12px;
      /* border: 1px solid #ccc; */
      border-top: none;
    }
    .container-splides {
      .splide__arrow.splide__arrow--prev,
      .splide__arrow.splide__arrow--next {
        border-radius: 40px;
        border: 1px solid rgba(142, 191, 56, 0.5);

        background: rgba(142, 191, 56, 0.1);
      }
      .splide__arrow.splide__arrow--prev {
        left: 1%;
        height: 40px;
        width: 40px;
      }
      .splide__arrow.splide__arrow--next {
        right: 1%;
        height: 40px;
        width: 40px;
      }
      .splide__arrow:disabled {
        opacity: 1;
      }

      .splide__arrow svg {
        fill: var(--color-2) !important;
        font-size: 16px;
      }

      height: 21rem;

      .splide {
        width: 100%;
        height: 100%;

        .splide__track {
          width: 100%;
          height: 100%;

          .splide__list {
            width: 100%;
            height: 100%;
            
            align-items: center;
         

            .splide__slide {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              flex-direction: column;
              padding-inline: 2rem;

              .container-image-producto {
                height: 18rem;
                width: 20rem;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                  object-position: center;
                  transform: scale(1);
                  transition: all 0.3s ease-in-out;
                }
              }

              .container-info-producto {
                width: 100%;
                display: flex;
                flex-direction: column;

                a {
                  color: var(--color-2);
                  font-family: "JostRegular";
                  font-size: 15px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 15px;
                  transition: all 0.3s ease-in-out;
                }

                p {
                  color: var(--color-3);
                  text-align: center;
                  font-family: "Quicksand";
                  font-size: 20px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 20px;
                  text-align: start;
                  transition: all 0.3s ease-in-out;
                }
              }

              /* Efecto de hover */
              &:hover {
                .container-image-producto img {
                  transform: scale(
                    1.1
                  ); /* Aumenta la escala al pasar el mouse */
                }

                .container-info-producto a {
                  font-weight: 700; /* Incrementa el font-weight al pasar el mouse */
                }

                .container-info-producto p {
                  font-weight: 700; /* Incrementa el font-weight al pasar el mouse */
                }
              }
            }
          }
        }
      }
    }
  }

  .producto-destacado {
    height: 100%;
    padding-block: 2rem;
    display: flex;
    align-items: center;
    /* position: relative; */
    .container-image {
      padding: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 21rem;
      width: 80%;
      img {
        height: auto;
        width: 78%;
        object-fit: cover;
        object-position: center;
      }
    }

    .container-info-producto {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
      width:50%;
      position: relative;
     
      h2 {
        color: var(--color-3);
        font-family: "QuicksandBold";
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; /* 133.333% */
        position: relative;
        text-align: start;
      }
      h2::before {
        content: attr(data-category);
        position: absolute;
        top: -120%;
        left: 0;
        width: 94px;
        height: 20px;
        padding: 8px;
        color: #fff;
        text-align: center;
        font-family:var(--font-4);
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 15px;
        border-radius: 15px 0px;
        background-color: var(--color-3);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      p {
        color: #040409;
        font-family: "JostRegular";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px; /* 125% */
        width: 80%;
      }
      div.button{
        margin: unset!important;
      }
    }

    @media (max-width: 768px) {
      flex-direction: column;
      gap: 2rem;
      height: auto;
      max-width: 90%;
      margin: 0 auto;
      /*padding-block: 3rem;*/
      
      .container-image {
        width: 100%;
        height: 100%;
        padding: 0;
        order: 1;
        max-height: 250px;
        display: flex;
        justify-content: center;
        
        img {
          width: 100%;
          max-height: 220px;
          object-fit: contain;
          object-position: center;  
        }
      }
      
      .container-info-producto {
        width: 100%;
        align-items: flex-start;
        order: 2;
        padding: 0;
        gap: 1.5rem;
        
        h2 {
          text-align: left;
          width: 100%;
          font-size: 24px;
          line-height: 1.3;
          margin-top: 1rem;
          
          &::before {
            top: -3rem;
            left: 0;
            transform: none;
          }
        }
        
        p {
          text-align: left;
          width: 100%;
          font-size: 16px;
          line-height: 1.6;
          margin-bottom: 0.5rem;
        }
        
        div.button {
          display: flex;
          justify-content: flex-start;
          width: 55%;
          margin-top: 0.5rem;
        }
      }
    }
  }

  @media (max-width: 768px) {
    height: auto;
    
    .productos {
      .container-splides {
        height: auto;
        padding: 0 1.5rem;
        position: relative;
        overflow: visible;

        #splide_productos_destacados {
          overflow: visible;
          
          .splide__track {
            overflow: visible;
            padding-bottom: 2rem;
          }

          .splide__list {
            gap: 1rem;
          }

          .splide__arrow {
            opacity: 1;
            width: 35px;
            height: 35px;
            background: #fff;
            border: 1px solid var(--color-2);
            
            svg {
              fill: var(--color-2) !important;
            }

            &.splide__arrow--prev {
              left: -1.5rem;
            }

            &.splide__arrow--next {
              right: -1.5rem;
            }
          }

          .splide__slide {
            height: auto;
            
            .producto-destacado {
              min-height: 520px;
            }
          }
        }
      }
    }
  }
}

#producto-destacado {
  width: 100%;
  min-height: 31rem;
  position: relative;
  
  
  .flor-manzanilla {
    width: 22rem;
    height: 20rem;
    position: absolute;
   bottom: 3rem;
    right: -5%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .producto-destacado {
    height: 100%;
    padding-block: 2rem;
    display: flex;
    display: flex;
        align-items: center;
    /* position: relative; */
    .container-image {
      
      padding: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30rem;
        width: 50%;
      img {
        height: auto;
        width: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
    @media (max-width: 768px) {
      .producto-destacado{
        display: grid;
        
      }
    }

    .container-info-producto {
      
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
      width:50%;
      position: relative;
     
      h2 {
        color: var(--color-3);
        font-family: "QuicksandBold";
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; /* 133.333% */
        position: relative;
         text-align: start;
      }
      h2::before {
        content: attr(data-category);
        position: absolute;
        top: -80%;
        left: 0;
        width: 94px;
        height: 20px;
        padding: 5px;
        color: #fff;
        text-align: center;
        font-family:var(--font-4);
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 15px;
        border-radius: 15px 0px;
        background-color: var(--color-3);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      p {
        color: #040409;
        font-family: "JostRegular";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px; /* 125% */
        width: 80%;
      }
      div.button{
        margin: unset!important;
      }
    }

  }
}

#puntos-ventas {
  padding-block: 2rem;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  position: relative;

  gap: 2rem;
  align-items: center;
  .container-semillas{
    position: absolute;
        bottom: -21%;
        left: -5%;
        width: 23rem;
        height: 23rem;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  h2 {
    color: var(--color-2);

    text-align: center;
    font-family: "QuicksandBold";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
  }

  h2::before {
    content: "";
    display: inline-block;
    position: relative;
    left: 18px;
    width: 50px; /* Ajusta según el tamaño deseado */
    height: 30px; /* Ajusta según el tamaño deseado */
    /* margin-right: 10px;  */
    background-image: url("../../images/hojita.svg"); /* Ruta a tu SVG */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  #splide-puntos-ventas {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .splide__arrow.splide__arrow--prev,
    .splide__arrow.splide__arrow--next {
      height: 40px;
      width: 40px;
      border: 1px solid var(--color-2);
    }
    .splide__arrow.splide__arrow--prev {
      left: 3%;
    }
    .splide__arrow.splide__arrow--next {
      right: 3%;
    }
    .splide__arrow:disabled {
      opacity: 1;
    }
    .splide__arrow svg {
      fill: var(--color-2) !important;
      font-size: 16px;
    }

    .splide__track {
      /* width: 100%; */
      height: 100%;
      .splide__list {
        width: 100%;
        height: 100%;
        .splide__slide {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .imagen-tienda {
            height: 9rem;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
              transform: scale(0.8);
              transition: transform 0.6s ease-in-out;
            }

            img:hover {
              transform: scale(1);
            }
          }
        }
      }
    }
  }
}

#blog {
  padding-block: 2rem;
  width: 100%;
  /* min-height: 70rem; */
  /* height: 80rem; */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-block-start: 8rem;
  .conta-hoja-blog{
    width: 5rem;
    height: 5rem;
    position: absolute;
    right: 5%;
    top: 18%;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

 

  .info-blog {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 2rem;
    h2 {
      color: var(--color-2);
      text-align: center;
      font-family: "QuicksandBold";
      font-size: 40px;
      font-style: normal;
      font-weight: 700;
      line-height: 40px;
      display: flex;
    }

    h2::before {
      content: "";
      display: inline-flex;
      position: relative;
      left:1rem;
     
      width: 60px; /* Ajusta según el tamaño deseado */
      height: 30px; /* Ajusta según el tamaño deseado */
      /* margin-right: 10px;  */
      background-image: url("../../images/hojita.svg"); /* Ruta a tu SVG */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    p {
      color: var(--color-3);
      text-align: center;
      font-family: "JostRegular";
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 25px;
    }
  }

  .contenedor {
 height: 100%;
   


    #splide-blog{
      width: 100%;
      height: 100%;
      
      .splide__track{
        width: 100%;
        height: 100%;
        padding-block-end: 10rem;

        .splide__list{
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

            /* gap: 2rem; */

          .splide__slide{
            /* width: 100%; */
            width: 21rem !important;
            height: 100%;
            transition: width 0.2s  ease-in-out; /* Transición suave para el cambio de ancho */

            .box-blog {
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              gap: 2rem;
        
      
      
              .container-image-blog {
                width: 100%;
                /* width: 22rem; */
                height: 25rem;
                overflow: hidden;
                border-radius: .5rem;
      
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  object-position: center;
                  transition: transform 0.5s ease-in-out;
                }
              }
              .container-info-blog {
                display: flex;
                flex-direction: column;
                width: 100%;
                gap: 1rem;
                h3 {
                
                    color: #007000;
                    text-align: center;
                    font-family: "JostRegular";
                    font-size: 15px;
                    font-style: normal;
                    font-weight: 300;
                    line-height: 15px; /* 100% */
                    text-align: start;

                  
            
                }
                p {
                  color: #2b0002;
                  font-family: "JostRegular";
                  font-size: 22px;
                  font-style: normal;
      
                  line-height: 30px;
                  text-align: start;
                  transition: all 0.4s ease-in-out;
                }
              }
            }
      
        
      
            &:hover {
              .container-image-blog img {
                transform: scale(1.05);
              }
      
              .container-info-blog p {
                /* font-family: "QuicksandBold"; */
              }
            }

            &:nth-child(2){
              top: 50px;
            }

            
            &::after {
              content: "";
              position: absolute;
              bottom: -1rem;
              left: 0;
              width: 20%;
              height: 2px; /* Ajusta el grosor de la línea */
              background-color: var(
                --color-2
              ); /* Cambia el color según tu preferencia */
              transition: width 0.5s  ease-in-out; /* Transición suave para el cambio de ancho */
            }
    
            &:hover::after {
              width: 80%; /* Ancho de la línea al hacer hover */
            }
          }
        }

      }
  }
  div.button{
    margin: auto;
  }
}

  .anise {
    width: 32rem;
    height: 20rem;
    position: absolute;
    top: -12%;
    left: -10%;
  }
}

.btn-wsp-float{
  position: fixed;
  bottom: 5rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
      transition: all 0.3s ease-in-out;
  a{
    width: 100%;
    height: 100%;
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
  }
}


/*Inicio Queries*/
@media (max-width:768px) {
    
      #banners{
    #splide-banner{
        
      .splide__track{
        .splide__list{
  
          .splide__slide{
              
              
             
             
            .container-info{
              
              align-items: center;
              .textos{
                  align-items: center;
                h2{
                  font-size: 30px;
                  text-align: center;
  
                }
                p{
                  font-size: 15px;
                  width: 100%;
                  line-height: 20px;
                  text-align: center;
                }
                
              }
            }
          }
        }
      }

    }

  
  }


  /* inicio queries categorias */
  #categorias{
      .container-image-hoja{
    transform: rotate(90deg);
    z-index: 2;
    right: -11%;
      }

  .categorias{
      gap:1rem;
    #splide-categoria{
      .splide__track{
        .splide__list
        {
          .splide__slide{
            .box-categoria{
              .titulo-categoria{
                h3{
                  font-weight: 700;
                }
              }
            }
          }
        }
      }
    }
  }      
    
  }

  /* fin queries categorias */
  /*Inicio queries nosotros*/
  #nosotros{
    padding-block: 10rem;
    .nosotros{
      flex-direction: column-reverse;

      .container-image{
        width: 24rem;
        height: 23rem;

        img:nth-child(2){
          max-width: 8rem;
          max-height: 7rem;
          top: 8%;
          left: 3%;
        }
        img:nth-child(3){
          max-width: 8rem;
          max-height: 7rem;
          bottom: -15%;
          left: 15%;
        }
      }

      .container-info{
        width: 100%;
   
        p{
          font-size: 20px;
        }

        .button{
          a{
            font-weight: 700;
          }
        }
      }

      .image-taza{
        width: 26rem;
        height: 20rem;
        right: -20%;
        top: -15%;
      
      }
    }



  }
  /*Fin queries nosotros*/

  /* inicio queries productos */

  #productos{
    height: 100vh;

    .productos{

      .tab{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-items: center;
        row-gap: .5rem;
      }

      .container-splides{
        #splide-infusiones, #splide-colagenos{
      
          .splide__track{
            
            .splide__list{
              display: flex;
            
              .splide__slide{
                .container-info-producto{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                  a{
                    font-weight: 700;
                  }
                  p{
                    font-weight: 700;
                  }
                }

              }
            }
          }    
        }
      }
    }

  }
  /* fin queries productos */


  /* inicio de queries producto destacado */

  #producto-destacado{
    .producto-destacado{
      flex-direction: column;
        gap: 2rem;

      .container-image{
        width: 100%;
        height:16rem;
      }

      .container-info-producto{
       width: 100%;
       align-items: center;
      }
    }
    .flor-manzanilla{
      width: 100%;
      position: unset !important;
      img{
        object-fit: contain;
      }
    }
  }
  /* fin queries producto destacado */

        


  /* inicio queries puntos ventas */
  #puntos-ventas{

    .container-semillas{
      position: absolute;
      bottom: -14%;
      left: -24%;
      width: 14rem;
      height: 15rem;
    }

    h2{
      font-size: 33px 
    }

    #splide-puntos-ventas{
      .splide__arrow.splide__arrow--prev,
      .splide__arrow.splide__arrow--next {
        height: 23px;
        width: 23px;
        border: 1px solid var(--color-2);
      }

      .splide__arrow svg {
        fill: var(--color-2) !important;
        font-size: 10px;
      }
    }
  }
  /* fin queries puntos ventas */


  /* inicio queries blog */
  #blog{
    display: flex;
    flex-direction: column;
    gap:  2rem;
    .conta-hoja-blog{
        right:1%;
    }

    .contenedor{
      height: 100%;
      width: 100% !important;
      margin-inline: unset !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        #splide-blog{

          .splide__track{
            padding: 5rem ;

            .splide__list{
              .splide__slide{

                     
            &:nth-child(2){
              top:0;
            }

              }

         

            }
          }

        }
    }
  }
  /* fin queries blog */
}

/* fin queries */