@import url(general.css);

: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-display: swap;
}

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

@font-face {
  font-family: "JostRegular";
  src: url(../fonts/Jost-400-Book.woff);
     font-display: swap;
}
#hero-post {
  margin-top: 8rem !important;
  min-height: 24rem !important;
  padding-block: 2rem !important;
  /* background-image: url('../../images/fondo-categoria-blog.png'); */
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center center;
  border-radius: 0.5rem;
  width: min(88%, 1550px) !important;
}

html {
  scroll-behavior: smooth;
}



#informacion-blog {
  padding-block: 2rem;
  height: 100%;
  padding-block-end: 5rem;

  .contenedor {
    height: 100%;
    display: flex;
    justify-content: space-between;
    gap: 2rem;

    .left {
      flex-basis: 70%;
      display: flex;
      flex-direction: column;
      .left-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-block-end: 0.5rem;
        border-bottom: 4px solid var(--color-3);
        p:nth-child(1) {
          padding: 8px 16px;
          align-items: center;
          gap: 7px;
          color: #fff;
          border-radius: 15px 0px;
          background: var(--3, #2b0002);

          text-align: center;
          font-family: var(--font-4);
          font-size: 15px;
          font-style: normal;
          font-weight: 400;
          line-height: 15px;
        }
        .container-comentarios {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 2rem;
          .container-svg {
            width: 24px;
            height: 19px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
            }
          }

          p {
            text-align: center;
            font-family: var(--font-4);
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 15px;
          }
        }
      }
      .left-bot {
        height: 100%;
        padding-block: 1.5rem;
        padding-bottom: 0rem;
        .container-texts {
          display: flex;
          flex-direction: column;
          gap: 1rem;
          p{
              display: flex;
              img{
                  width: unset;
                  margin: auto;
              }
          }
          h2 {
            color: var(--7, #007000);
            font-family: var(--font-2);
            font-size: 30px;
            font-style: normal;
            font-weight: 700;
            line-height: 35px;
          }
          p,
          span {
            color: var(--3, #2b0002);
            font-family: var(--font-4);
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 25px;
          }
          span {
            font-style: italic;
          }
          h3{
              strong{
                  span{
                      font-style: normal;
                      font-weight: 700;
                  }
              }
          }
          h3{
              span{
                  strong{
                      font-style: normal;
                      font-weight: 700;
                  }
              }
          }
          ul {
              display: flex;
              flex-direction: column;
              gap: 1rem;
              li{
                 margin-left: 2rem;
                 list-style: disc;
                   color: var(--3, #2b0002);
                    font-family: var(--font-4);
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 15px;
                 
              }
          }
        }
      }
    }
    .right {
      flex-basis: 30%;
      display: flex;
      flex-direction: column;

      .right-top {
        width: 100%;
        padding-block: 0.5rem;
        border-bottom: 4px solid var(--color-3);
        h2 {
          color: var(--7, #007000);
          font-family: var(--font-2);
          font-size: 20px;
          font-style: normal;
          font-weight: 700;
          line-height: 23px;
        }
      }

      .right-bot {
        padding-block: 2rem;
        width: 100%;
        display: grid;
        row-gap: 4rem;

        .splide__track {
          .splide__list {
            gap: 2rem;
            flex-direction: column;
            .splide__slide {
              padding-block: 1rem;

              width: 100%;
              .box-blog {
                width: 100%;
                height: 100%;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 1rem; /* Ajusta el espacio interno si es necesario */
                width: 100%; /* Asegúrate de que las cajas se ajusten al contenedor de grid */

                /* Transición suave para el cambio de ancho */

                /* Agrega una regla para el estado hover en .box-blog */
                &:hover::after {
                  width: 80%; /* Ancho de la línea al hacer hover */
                }

                &::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.2s ease; /* Transición suave para el cambio de ancho */
                }

                .container-image-blog {
                  width: 100%;
                  height: 25rem;
                  overflow: hidden;
                  border-radius: 0.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;
                  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;
                  }
                }

                /* Efectos al hacer hover sobre .box-blog */
                &:hover .container-image-blog img {
                  transform: scale(1.05);
                }

                &:hover .container-info-blog p {
                  /* Agrega aquí las reglas para el texto al hacer hover, si es necesario */
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Contenedor principal */
.comments-section {
  h2 {
    color: var(--7, #007000);
    font-family: var(--font-2);
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
    padding-bottom: 0rem;
  }

  #product_reviews {
    position: relative;
    z-index: 2;

    .review-totals {
      display: none;
    }
    .ic_rev {
        position: relative;
      max-width: 100%;
      display: flex;
      justify-content: space-between;
      border: none;
      border-bottom: 2px solid #007000;
      padding-top: 1rem;

      .review-left {
        display: flex;
        flex-direction: row-reverse;
        align-items: start;
        gap: 1rem;
        max-width: unset;
        float: unset;

        .review-avatar {
          width: 30px;
          height: 30px;
          margin-top: unset!important   ;

          img {
             content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MSIgaGVpZ2h0PSI0MSIgdmlld0JveD0iMCAwIDQxIDQxIiBmaWxsPSJub25lIj4KPHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNMCAxMS44MDhDMCA1LjI4NjYyIDUuMjg2NjIgMCAxMS44MDggMEg0MVYyOS4xOTJDNDEgMzUuNzEzNCAzNS43MTM0IDQxIDI5LjE5MiA0MUgwVjExLjgwOFoiIGZpbGw9IiM4RUJGMzgiLz4KPHBhdGggZD0iTTMyLjgwMTMgMTkuNjczMkMzMi44MDEzIDIwLjMzNjggMzIuODAxMyAyMS4wMDA1IDMyLjgwMTMgMjEuNjU3OUMzMi43NDQ0IDIyLjA1NjEgMzIuNzEyOCAyMi40NTQzIDMyLjYzMDYgMjIuODQ2MkMzMS42MDY3IDI3LjYzMTEgMjguNzQ5NiAzMC43ODUyIDI0LjA5NzUgMzIuMzA4NUMyMy4zMDc0IDMyLjU2NzYgMjIuNDg1NyAzMi42ODE0IDIxLjY2NCAzMi43Njk5QzIxLjAwMDMgMzIuNzY5OSAyMC4zMzY2IDMyLjc2OTkgMTkuNjcyOSAzMi43Njk5QzE5LjI3NDcgMzIuNzEzIDE4Ljg3MDIgMzIuNjgxNCAxOC40NzgzIDMyLjU5OTNDMTMuNzM3NyAzMS42MDA2IDEwLjU5NjIgMjguODAwNCA5LjAzNDk2IDI0LjIzMDVDOC43NTY4NSAyMy40MTUxIDguNjM2NzUgMjIuNTYxOCA4LjUyOTMgMjEuNzA4NUM4LjUyOTMgMjEuMDEzMiA4LjUyOTMgMjAuMzE3OSA4LjUyOTMgMTkuNjI4OUM4LjYxNzc5IDE4Ljk2NTIgOC43MDYyOCAxOC4zMDE1IDguODc2OTQgMTcuNjU2OEMxMC40ODI0IDExLjQ2MjQgMTYuNTI1MiA3LjU0MzQ3IDIyLjg1MjMgOC43NDQ0M0MyNy42MTE5IDkuNjQ4MzEgMzAuNzM0NCAxMi41MzY5IDMyLjI5NTYgMTcuMTA2OUMzMi41ODAxIDE3LjkzNDkgMzIuNzA2NSAxOC44MDA5IDMyLjgwMTMgMTkuNjczMlpNMjEuMDUwOSA5Ljk4OTYzQzE4LjM4MzUgMTAuMDc4MSAxNi42MTM2IDEwLjU3NzUgMTUuMDM5OCAxMS42MTQxQzExLjM1NDcgMTQuMDQ3NiA5LjY2MDczIDE3LjQ4NjEgMTAuMDY1MyAyMS44OTE4QzEwLjI3MzggMjQuMTU0NiAxMS4yMjgzIDI2LjExNDEgMTIuNzM5IDI3LjgwMTdDMTIuOTYwMiAyOC4wNDgzIDEyLjk2NjUgMjguMDQxOSAxMy4xMDU2IDI3Ljc1MTJDMTQuNjg1OCAyNC40MjY0IDE4LjIxMjggMjIuNTExMiAyMS44NDczIDIzLjA2MTFDMjQuNzg2NSAyMy41MDM2IDI2LjkwNCAyNS4xMDkxIDI4LjIzMTMgMjcuNzU3NUMyOC4zNzY3IDI4LjA0ODMgMjguMzcwNCAyOC4wNTQ2IDI4LjU5NzkgMjcuODAxN0MzMC42NTg1IDI1LjQ3NTcgMzEuNTY4NyAyMi43NTc3IDMxLjMwOTYgMTkuNjczMkMzMS4xMTM2IDE3LjM5MTMgMzAuMjQxNCAxNS4zNjg3IDI4LjcxMTcgMTMuNjQ5NEMyNi40Njc4IDExLjE0NjMgMjMuNjM2MSA5Ljk2NDM1IDIxLjA1MDkgOS45ODk2M1pNMjAuNjcxNiAyNC40NzA3QzIwLjQ1MDQgMjQuNDcwNyAyMC4yMjkyIDI0LjQ0NTQgMjAuMDA3OSAyNC40NzdDMTcuMjc3MyAyNC44MzA5IDE1LjM2MjEgMjYuMjU5NSAxNC4yNjIzIDI4Ljc4NzhDMTQuMTYxMiAyOS4wMjggMTQuMTkyOCAyOS4xNjA3IDE0LjQwNzcgMjkuMzEyNEMxNi42NDUyIDMwLjg4IDE5LjExNjcgMzEuNTQzNyAyMS44NDEgMzEuMjU5MkMyMy43MjQ2IDMxLjA2MzMgMjUuNDE4NiAzMC4zODA2IDI2Ljk1NDUgMjkuMjg3MUMyNy4xMzc4IDI5LjE2MDcgMjcuMTY5NCAyOS4wNDA2IDI3LjA4NzMgMjguODM4NEMyNi4wNTcgMjYuMTg5OSAyMy41Mjg2IDI0LjQ1OCAyMC42NzE2IDI0LjQ3MDdaIiBmaWxsPSIjMDA3MDAwIi8+CjxwYXRoIGQ9Ik0yMC42NTIxIDIxLjM5MjdDMTguMTU1NCAyMS4zOTI3IDE2LjExMzcgMTkuMzUxIDE2LjEwNzQgMTYuODYwNkMxNi4xMDc0IDE0LjM3MDIgMTguMTY4IDEyLjMxNiAyMC42Nzc0IDEyLjMyMjNDMjMuMTY3OCAxMi4zMjg2IDI1LjIyMjEgMTQuMzgyOSAyNS4yMjIxIDE2Ljg2MDZDMjUuMjE1NyAxOS4zNjM3IDIzLjE2NzggMjEuMzk5IDIwLjY1MjEgMjEuMzkyN1pNMjAuNjcxMSAxMy44MTRDMTguOTcwOCAxMy44MTQgMTcuNTk5MSAxNS4xNjAzIDE3LjU5OTEgMTYuODQ4QzE3LjU5MjggMTguNTQyIDE4Ljk2NDQgMTkuOTUxNSAyMC42NTg0IDE5LjkzMjZDMjIuNTEwNCAxOS45MTM2IDIzLjczMDMgMTguNDQwOCAyMy43MzAzIDE2Ljg4NTlDMjMuNzM2NyAxNS4xNzkzIDIyLjM3NzcgMTMuODIwMyAyMC42NzExIDEzLjgxNFoiIGZpbGw9IiMwMDcwMDAiLz4KPC9zdmc+');
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }
        }
        .reviewer-name {
          span {
            color: var(--7, #007000);
            font-family: "JostRegular";
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: 20px;
            text-wrap: nowrap;
          }
        }
      }
      .review-right {
        display: flex;
        flex-direction: column;
        align-items: end;
        width: 100%;
        .review-text {
            width: 100%;
          color: var(--3, #2b0002);
          font-family: "JostRegular";
          font-size: 15px;
          font-style: normal;
          font-weight: 300;
          line-height: 20px;
        }
        .review-title {
          display: none;
        }
        .al-box{
          background-image: none !important;
         border:none !important;
         background-color: white;
         box-shadow: none !important;
         p{
          font-family: var(--font-4);
         }
         
        }
          .review-rating{
            span.rating-on::before{
              content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE3IDE2IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTcuNTYwMTMgMC41MjgyMjFDNy45OTc5MSAtMC4xNzU4OTQgOS4wMjI2OSAtMC4xNzU4OTMgOS40NjA0OCAwLjUyODIyMUwxMS40NTY0IDMuNzM4MzVDMTEuNjEwNCAzLjk4NjA4IDExLjg1NTEgNC4xNjM4NiAxMi4xMzgzIDQuMjMzOEwxNS44MDgxIDUuMTQwMDNDMTYuNjEzIDUuMzM4ODEgMTYuOTI5NyA2LjMxMzQzIDE2LjM5NTMgNi45NDczN0wxMy45NTkxIDkuODM3NTdDMTMuNzcxMSAxMC4wNjA2IDEzLjY3NzYgMTAuMzQ4MyAxMy42OTg2IDEwLjYzOTJMMTMuOTcwOCAxNC40MDk0QzE0LjAzMDUgMTUuMjM2NCAxMy4yMDE0IDE1LjgzODggMTIuNDMzMyAxNS41MjY0TDguOTMxNzYgMTQuMTAyNkM4LjY2MTUzIDEzLjk5MjcgOC4zNTkwNyAxMy45OTI3IDguMDg4ODQgMTQuMTAyNkw0LjU4NzI2IDE1LjUyNjRDMy44MTkyMiAxNS44Mzg4IDIuOTkwMTUgMTUuMjM2NCAzLjA0OTg0IDE0LjQwOTRMMy4zMjE5OSAxMC42MzkyQzMuMzQyOTkgMTAuMzQ4MyAzLjI0OTUzIDEwLjA2MDYgMy4wNjE1MSA5LjgzNzU3TDAuNjI1MjcyIDYuOTQ3MzdDMC4wOTA5MDIyIDYuMzEzNDMgMC40MDc1NzcgNS4zMzg4MSAxLjIxMjUxIDUuMTQwMDNMNC44ODIyOSA0LjIzMzhDNS4xNjU1IDQuMTYzODYgNS40MTAxOSAzLjk4NjA4IDUuNTY0MjIgMy43MzgzNEw3LjU2MDEzIDAuNTI4MjIxWiIgZmlsbD0iIzAwNzAwMCIgZmlsbC1vcGFjaXR5PSIxIi8+Cjwvc3ZnPg==');
            }
            span.rating-off::before{
                content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE3IDE2IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTcuNTYwMTMgMC41MjgyMjFDNy45OTc5MSAtMC4xNzU4OTQgOS4wMjI2OSAtMC4xNzU4OTMgOS40NjA0OCAwLjUyODIyMUwxMS40NTY0IDMuNzM4MzVDMTEuNjEwNCAzLjk4NjA4IDExLjg1NTEgNC4xNjM4NiAxMi4xMzgzIDQuMjMzOEwxNS44MDgxIDUuMTQwMDNDMTYuNjEzIDUuMzM4ODEgMTYuOTI5NyA2LjMxMzQzIDE2LjM5NTMgNi45NDczN0wxMy45NTkxIDkuODM3NTdDMTMuNzcxMSAxMC4wNjA2IDEzLjY3NzYgMTAuMzQ4MyAxMy42OTg2IDEwLjYzOTJMMTMuOTcwOCAxNC40MDk0QzE0LjAzMDUgMTUuMjM2NCAxMy4yMDE0IDE1LjgzODggMTIuNDMzMyAxNS41MjY0TDguOTMxNzYgMTQuMTAyNkM4LjY2MTUzIDEzLjk5MjcgOC4zNTkwNyAxMy45OTI3IDguMDg4ODQgMTQuMTAyNkw0LjU4NzI2IDE1LjUyNjRDMy44MTkyMiAxNS44Mzg4IDIuOTkwMTUgMTUuMjM2NCAzLjA0OTg0IDE0LjQwOTRMMy4zMjE5OSAxMC42MzkyQzMuMzQyOTkgMTAuMzQ4MyAzLjI0OTUzIDEwLjA2MDYgMy4wNjE1MSA5LjgzNzU3TDAuNjI1MjcyIDYuOTQ3MzdDMC4wOTA5MDIyIDYuMzEzNDMgMC40MDc1NzcgNS4zMzg4MSAxLjIxMjUxIDUuMTQwMDNMNC44ODIyOSA0LjIzMzhDNS4xNjU1IDQuMTYzODYgNS40MTAxOSAzLjk4NjA4IDUuNTY0MjIgMy43MzgzNEw3LjU2MDEzIDAuNTI4MjIxWiIgZmlsbD0iIzRENTU3NCIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+Cjwvc3ZnPg==');
            }
          }

      }

      .review-time {
        /*position: absolute;*/
        /*left: 31%;*/
        /*transform: translateX(-50%);*/
        color: var(--3, #2b0002);
        font-family: "JostRegular";
        font-size: 17px;
        font-style: italic;
        font-weight: 300;
        line-height: 20px;
        
        
        
      }
    }

    .comment-respond {
      h3 {
        text-align: center;
        color: var(--7, #007000);
        font-family: var(--font-2);
        font-size: 25px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
      }
      form {
        .comment-notes {
          display: none;
        }
        .comment-form-title {
          display: none;
        }

        label {
          display: none;
        }
        textarea {
          max-width: unset;
          
          padding: 0.5rem;
          margin-bottom: 1rem;
                 color: var(--3, #2B0002);
        font-family: var(--font-4);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
          border-radius: 30px 0px;
          border: 1px solid #007000;
          padding: 1rem;
          background: #fff;
          &::placeholder{
              color: var(--3, #2B0002);
        font-family: var(--font-4);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
          }
        }
        input{
          border: none !important;
          max-width: unset !important;
          border-bottom: 2px solid #007000 !important;
       
        }
          input[type="text"]{
                        color: var(--3, #2B0002);
        font-family: var(--font-4);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
          }

        input[type="submit"]{
          border-bottom: none !important;
          background: transparent;
          color: var(--3, #2b0002);
          font-family: var(--font-2);
          font-size: 17px;
   
          font-weight: 300;
          line-height: 20px;
        }

        .comment-form-cookies-consent{
          display: none;
        }
        .review-rating {
         span.rating-off {
            &::before{
              content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE3IDE2IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTcuNTYwMTMgMC41MjgyMjFDNy45OTc5MSAtMC4xNzU4OTQgOS4wMjI2OSAtMC4xNzU4OTMgOS40NjA0OCAwLjUyODIyMUwxMS40NTY0IDMuNzM4MzVDMTEuNjEwNCAzLjk4NjA4IDExLjg1NTEgNC4xNjM4NiAxMi4xMzgzIDQuMjMzOEwxNS44MDgxIDUuMTQwMDNDMTYuNjEzIDUuMzM4ODEgMTYuOTI5NyA2LjMxMzQzIDE2LjM5NTMgNi45NDczN0wxMy45NTkxIDkuODM3NTdDMTMuNzcxMSAxMC4wNjA2IDEzLjY3NzYgMTAuMzQ4MyAxMy42OTg2IDEwLjYzOTJMMTMuOTcwOCAxNC40MDk0QzE0LjAzMDUgMTUuMjM2NCAxMy4yMDE0IDE1LjgzODggMTIuNDMzMyAxNS41MjY0TDguOTMxNzYgMTQuMTAyNkM4LjY2MTUzIDEzLjk5MjcgOC4zNTkwNyAxMy45OTI3IDguMDg4ODQgMTQuMTAyNkw0LjU4NzI2IDE1LjUyNjRDMy44MTkyMiAxNS44Mzg4IDIuOTkwMTUgMTUuMjM2NCAzLjA0OTg0IDE0LjQwOTRMMy4zMjE5OSAxMC42MzkyQzMuMzQyOTkgMTAuMzQ4MyAzLjI0OTUzIDEwLjA2MDYgMy4wNjE1MSA5LjgzNzU3TDAuNjI1MjcyIDYuOTQ3MzdDMC4wOTA5MDIyIDYuMzEzNDMgMC40MDc1NzcgNS4zMzg4MSAxLjIxMjUxIDUuMTQwMDNMNC44ODIyOSA0LjIzMzhDNS4xNjU1IDQuMTYzODYgNS40MTAxOSAzLjk4NjA4IDUuNTY0MjIgMy43MzgzNEw3LjU2MDEzIDAuNTI4MjIxWiIgZmlsbD0iIzRENTU3NCIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+Cjwvc3ZnPg==');
            }
          }

          span.rating-on {
            &::before{
              content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE3IDE2IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTcuNTYwMTMgMC41MjgyMjFDNy45OTc5MSAtMC4xNzU4OTQgOS4wMjI2OSAtMC4xNzU4OTMgOS40NjA0OCAwLjUyODIyMUwxMS40NTY0IDMuNzM4MzVDMTEuNjEwNCAzLjk4NjA4IDExLjg1NTEgNC4xNjM4NiAxMi4xMzgzIDQuMjMzOEwxNS44MDgxIDUuMTQwMDNDMTYuNjEzIDUuMzM4ODEgMTYuOTI5NyA2LjMxMzQzIDE2LjM5NTMgNi45NDczN0wxMy45NTkxIDkuODM3NTdDMTMuNzcxMSAxMC4wNjA2IDEzLjY3NzYgMTAuMzQ4MyAxMy42OTg2IDEwLjYzOTJMMTMuOTcwOCAxNC40MDk0QzE0LjAzMDUgMTUuMjM2NCAxMy4yMDE0IDE1LjgzODggMTIuNDMzMyAxNS41MjY0TDguOTMxNzYgMTQuMTAyNkM4LjY2MTUzIDEzLjk5MjcgOC4zNTkwNyAxMy45OTI3IDguMDg4ODQgMTQuMTAyNkw0LjU4NzI2IDE1LjUyNjRDMy44MTkyMiAxNS44Mzg4IDIuOTkwMTUgMTUuMjM2NCAzLjA0OTg0IDE0LjQwOTRMMy4zMjE5OSAxMC42MzkyQzMuMzQyOTkgMTAuMzQ4MyAzLjI0OTUzIDEwLjA2MDYgMy4wNjE1MSA5LjgzNzU3TDAuNjI1MjcyIDYuOTQ3MzdDMC4wOTA5MDIyIDYuMzEzNDMgMC40MDc1NzcgNS4zMzg4MSAxLjIxMjUxIDUuMTQwMDNMNC44ODIyOSA0LjIzMzhDNS4xNjU1IDQuMTYzODYgNS40MTAxOSAzLjk4NjA4IDUuNTY0MjIgMy43MzgzNEw3LjU2MDEzIDAuNTI4MjIxWiIgZmlsbD0iIzAwNzAwMCIgZmlsbC1vcGFjaXR5PSIxIi8+Cjwvc3ZnPg==');
            }
          }
        }
       

     
      }
    }
  }

  .container-comments {
    .prueba {
      display: flex;
      justify-content: end;
      border-bottom: 2px solid #007000;
      padding-top: 1rem;
      .comment {
        display: flex;

        gap: 2rem;
        padding-bottom: 2rem;

        .left-user {
          display: flex;
          align-items: start;
          justify-content: start;
          .container-svg-user {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
            }
          }
        }

        .left-info {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          .top {
            display: flex;
            justify-content: space-between;

            .left-header {
              display: flex;
              justify-content: space-between;
              gap: 1rem;
              align-items: center;

              h3 {
                color: var(--7, #007000);
                font-family: "JostRegular";
                font-size: 20px;
                font-style: normal;
                font-weight: 700;
                line-height: 20px;
              }
              p {
                color: var(--3, #2b0002);
                font-family: "JostRegular";
                font-size: 17px;
                font-style: italic;
                font-weight: 300;
                line-height: 20px;
              }
            }

            .right-top {
              display: grid;
              grid-template-columns: repeat(5, 1.4rem);
            }
          }

          .bot {
            p {
              color: var(--3, #2b0002);
              font-family: "JostRegular";
              font-size: 15px;
              font-style: normal;
              font-weight: 300;
              line-height: 20px;
            }
          }
        }
      }
    }
    .prueba:nth-child(2n) {
      .comment {
        width: 90%;
      }
    }
  }
}

/* Formulario para agregar un comentario */
.comment-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

/* Título del formulario */
.comment-form h3 {
  color: var(--7, #007000);
  font-family: var(--font-2);
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: 25px;
}

/* Área de texto para escribir el comentario */
.comment-form textarea {
  width: 100%;

  padding: 0.5rem;
  margin-bottom: 1rem;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  border-radius: 30px 0px;
  border: 1px solid #007000;
  padding: 1rem;
  background: #fff;
}

textarea::placeholder {
  color: var(--3, #2b0002);
  font-family: var(--font-4);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

/* Contenedor del pie del formulario */
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Campo de correo electrónico */
.form-footer input[type="email"] {
  flex: 1;
  padding: 0.5rem;
  border: none;
  margin-right: 1rem;
  font-family: Arial, sans-serif;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 112, 0, 0.5);
}

input::placeholder {
  color: var(--3, #2b0002);
  font-family: var(--font-4);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

/* inicio queries */

@media (max-width: 768px) {
  /* incio queries hero */
  #hero {
    /* background-image: url('../../images/fondo-categoriBlog-small.png'); */
  }

  /* fin queries hero */

  /*Inicio quereis informacion-blog*/

  #informacion-blog {
    .contenedor {
      flex-direction: column;

      .right {
        .right-bot {
          .splide__track {
            .splide__list {
              flex-direction: row;

              .splide__slide {
                .box-blog {
                  .container-image-blog {
                    width: 100%;
                    height: 21rem;
                  }
                }
              }
            }
          }
        }
      }
      .left{
        .left-bot{
          .container-texts{

          }
        }
        .comments-section{
         
          #product_reviews{
          
            .ic_rev{
              .review-time{
                left: 5rem;
                top: 4rem;
                transform: translate(-50%, -50%);
              }
            }
          }
        }
      }
    }
  }
  /*Fin quereis informacion-blog*/
}
/* fin queries */