/* Banner exportaciones */
section.banner-exportaciones {
  position: relative;
  margin-top: 123px;
  padding: 50px 0 150px 0;
  box-sizing: border-box;
  .container-banner-fondo {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;

    overflow: hidden;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
      animation: backgroundZoom2 10s infinite;
    }
  }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    .main-content {
      width: 50%;
      display: flex;
      flex-direction: column;
      gap: 24px;
      h2 {
        color: transparent;
        -webkit-text-stroke: 1px #fff; /* Para navegadores basados en WebKit */
        text-stroke: 1px #fff; /* Para otros navegadores */

        font-family: "Roboto-700", sans-serif;
        font-size: 58.302px;
        line-height: normal;
        strong {
          color: #fff;
          font-family: "Roboto-700", sans-serif;
          font-size: 58.302px;
          line-height: normal;
        }
      }
      p {
        color: #fff;
        font-family: "Roboto-400", sans-serif;
        font-size: 27px;
        line-height: 30px;
        margin-top: 31px;
        strong {
          font-family: "Roboto-700", sans-serif;
        }
      }
      hr {
        width: 40%;
        margin: 0 auto;
      }
    }

    .map-world {
      position: absolute;
      top: 0;
      right: 0;
      height: 417px;
      width: 357px;
      img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: center;
      }
    }
  }
}

/* Compromiso section */
section.compromiso {
  padding: 80px 0 180px 0;
  box-sizing: border-box;
  position: relative;

  background-color: white;
  opacity: 0.99;
  .container-fondo {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  .container {
    display: flex;
    justify-content: space-between;
    .compromiso-descripcion {
      width: 45%;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .certificaciones {
        display: flex;
        flex-direction: row;
        gap: 9px;

        .container-certificacion {
          height: 51px;
          width: 51px;
          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
      }

      .contenido {
        color: var(--7, #4d4d4d);
        font-family: "Roboto-400", sans-serif;
        font-size: 17px;
        line-height: 21px;
        text-align: justify;
        strong {
          font-family: "Roboto-700", sans-serif;
          text-align: justify;
        }
        hr {
          width: 110px;
          height: 2px;
          background: #4d4d4d;
          margin-top: 8px;
        }
      }

      .paises {
        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
        column-gap: 20px;
        row-gap: 10px;
        max-width: calc(160px * 2 + 20px * 2);
        /* margin: 0 auto; */
        align-items: center;
        justify-content: center;
        .container-tayo-pais {
          position: relative;
          & > img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;

            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
            mix-blend-mode: color-dodge;
            z-index: 4;
          }
          .container-country {
            height: 66px;
            width: 144px;
            position: relative;
            /*
            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              background: url(../../images/raichu.gif);
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              z-index: 0;
              mix-blend-mode: color-dodge;
            }
            */
            img {
              height: 100%;
              width: 100%;
              object-fit: contain;
              object-position: center;
            }
          }
        }
      }
    }
    .productos {
      width: 50%;
      position: relative;
      top: 4rem;
      aspect-ratio: 683 / 474;
      max-width: 740px;
      height: auto;
      .product-name {
        position: absolute;
        bottom: 0;
        transform: translate(20px, 60px);
        &:nth-child(1) {
          /* left: 0; */
          left: -12%;
          width: 54%;
          top: 22px;
          z-index: 2;
          .canva-name {
            left: 50%;
            position: relative;
            transform: translate(20%, 0);
          }
          .container-img {
            z-index: 2;
            img {
              aspect-ratio: 219 / 191;
            }
          }
        }
        &:nth-child(2) {
          /* background: green; */
          left: 55%;
          transform: translate(-15%, 30px);
          width: 70%;
          top: 0;
          .container-product-name {
            .line-canvas {
              z-index: 1;
            }
            .canva-name {
              left: 50%;
              position: relative;
              transform: translate(20%, 0);
            }
            .container-img {
              z-index: 1;
              img {
                aspect-ratio: 211 / 192;
              }
            }
          }
        }
        &:nth-child(3) {
          /* background: chocolate; */
          left: 20%;
          width: 28%;
          justify-content: end;
          gap: 20px;
          transform: translate(90px, 50px);
          z-index: 3;
          .canva-name {
            order: 2;
            transform: translate(-100%, 0);
            .canva {
              order: 2;
            }
            span {
              order: 1;
            }
          }
          .container-img {
            order: 1;
            z-index: 3;
            img {
              aspect-ratio: 76 / 81;
            }
          }
        }
        &:nth-child(4) {
          /* background: #312783; */
          right: 0;
          width: 35%;
          justify-content: end;
          gap: 20px;
          transform: translate(60px, 50px);
          .canva-name {
            order: 2;
            transform: translate(-100%, 0);
            .canva {
              order: 2;
            }
            span {
              order: 1;
            }
          }
          .container-img {
            order: 1;
            z-index: 3;
            img {
              aspect-ratio: 76 / 81;
            }
          }
        }
        .container-product-name {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          position: relative;
          .line-canvas {
            transition: opacity ease 0.5s;
            opacity: 0;

            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Para que el canvas no interfiera con la interacción del usuario */
            z-index: 2;
          }

          .canva-name {
            display: flex;
            flex-direction: row;
            max-width: 163px;

            transition: opacity ease 0.5s;
            opacity: 0;
            .canva {
              display: flex;
              justify-content: center;
              align-items: center;
              &::before {
                /* height: 76px;
                width: 100px; */
                height: 20px;
                width: 20px;
                content: "";
                /* background: url('../../images/canva-name-product.webp'); */
                background: url("../../images/cicle-canva-name.webp");
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;

                display: inline-block;
              }
            }
            span {
              color: var(--7, #4d4d4d);
              font-family: "Roboto-700", sans-serif;
              font-size: 10.131px;
              line-height: 11.144px;

              z-index: 3;
              /* max-width: 100px; */
              padding: 4px;
              box-sizing: border-box;

              display: flex;
              flex-direction: row;
            }
          }
          .container-img {
            img {
              height: 100%;
              width: 100%;
              object-fit: contain;
              object-position: center;
            }
          }
        }
        .container-product-name.active {
          .line-canvas {
            opacity: 1;
          }
          .canva-name {
            opacity: 1;
          }
        }
      }
    }
  }
}

/* Nuestras exportaciones section */
section.nuestras-exportaciones {
  padding: 80px 0;
  box-sizing: border-box;
  position: relative;
  .container-fondo {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  .container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    .nuestras-exportaciones-title {
      h2 {
        color: var(--1, #000);
        text-align: center;
        font-family: "Roboto-700", sans-serif;
        font-size: 37.774px;
        line-height: normal;
        strong {
          color: var(--2, #312783);
        }
      }
    }
    .splide {
      .splide__track {
        ul.splide__list {
          .splide__slide {
            height: 100%;
            .container-img {
              height: 100%;
              width: 100%;
              img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center;
              }
            }
          }
        }
      }
    }
  }
}

/* Responsive styles */
@media (max-width: 1400px) {
  .nuestras-exportaciones {
    .splide {
      .splide__list {
      }
    }
  }
}

@media (max-width: 1350px) {
  section.compromiso {
    .container {
      .compromiso-descripcion {
        .certificaciones {
          .container-certificacion {
            img {
            }
          }
        }

        .contenido {
        }
        .paises {
          .container-country {
            img {
            }
          }
        }
      }
      .productos {
        .product-name {
          &:nth-child(1) {
          }
          &:nth-child(2) {
          }
          &:nth-child(3) {
            left: 10%;
            /*transform: translate(20px, 20px);*/
            transform: translate(90px, 10px);
          }
          &:nth-child(4) {
            right: 30px;
            /*transform: translate(20px, 20px);*/
            transform: translate(80px, 10px);
          }
        }
      }
    }
  }
}

@media (max-width: 1270px) {
  section.compromiso {
    .container {
      .compromiso-descripcion {
        .certificaciones {
          .container-certificacion {
            img {
            }
          }
        }

        .contenido {
        }
        .paises {
          .container-country {
            img {
            }
          }
        }
      }
      .productos {
        .product-name {
          &:nth-child(1) {
          }
          &:nth-child(2) {
          }
          &:nth-child(3) {
            transform: translate(70px, -20px);
          }
          &:nth-child(4) {
            transform: translate(50px, -20px);
          }
        }
      }
    }
  }
}
@media (max-width: 1150px) {
  section.compromiso {
    .container {
      .compromiso-descripcion {
        .certificaciones {
          .container-certificacion {
            img {
            }
          }
        }

        .contenido {
        }
        .paises {
          .container-country {
            img {
            }
          }
        }
      }
      .productos {
        .product-name {
          &:nth-child(1) {
          }
          &:nth-child(2) {
          }
          &:nth-child(3) {
            transform: translate(70px, -50px);
          }
          &:nth-child(4) {
            transform: translate(50px, -50px);
          }
        }
      }
    }
  }
}

@media (max-width: 1250px) {
  section.banner-exportaciones {
    .container-banner-fondo {
      img {
      }
    }

    .container {
      .main-content {
        h2 {
          font-size: 36px;
          strong {
            font-size: 36px;
          }
        }
        p {
          font-size: 25px;
          strong {
            font-size: 25px;
          }
        }
      }

      .map-world {
        height: 380px;
        width: 300px;
        right: -30px;
        img {
        }
      }
    }
  }
}

@media (max-width: 1050px) {
  section.compromiso {
    .container {
      flex-direction: column;
      gap: 50px;
      .compromiso-descripcion {
        order: 2;
        width: 100%;
        max-width: 750px;
        margin: 0 auto;

        .certificaciones {
          .container-certificacion {
            img {
            }
          }
        }

        .contenido {
        }
        .paises {
          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
          margin: 0 auto;
          .container-country {
            img {
            }
          }
        }
      }
      .productos {
        /* height: 370px; */
        order: 1;
        width: 100%;
        margin: 0 auto;
        top: 0;
        .product-name {
          &:nth-child(1) {
            left: 0;
            width: 55%;
          }
          &:nth-child(2) {
            left: 60%;
            width: 60%;
          }
          &:nth-child(3) {
            left: 30%;
            width: 25%;
          }
          &:nth-child(4) {
            right: 0;
            width: 25%;
          }
        }
      }
    }
  }
}
@media (max-width: 992px) {
  section.banner-exportaciones {
    .container {
      display: flex;
      flex-direction: column;
      gap: 30px;
      .main-content {
        width: 100%;
        max-width: 600px;
        hr {
        }
      }

      .map-world {
        position: unset;
        width: 100%;
        height: auto;
        aspect-ratio: 357/417;
        max-width: 357px;
        margin: 0 auto;
        img {
        }
      }
    }
  }

  section.nuestras-exportaciones {
    .container {
      .nuestras-exportaciones-title {
        h2 {
          font-size: 25px;
          strong {
            font-size: 25px;
          }
        }
      }
    }
  }
}

@media (max-width: 850px) {
  section.compromiso {
    .container {
      .productos {
        .product-name {
          &:nth-child(1) {
            left: 0;
            width: 55%;
            transform: unset;
            .canva-name {
              transform: translate(-50%, 0);
              flex-direction: column;
              .canva {
                order: 2;
                &::before {
                }
              }
              span {
                width: 100%;
                margin: 0 auto;
                display: block;
                max-width: 100px;
                text-align: center;
              }
            }
          }
          &:nth-child(2) {
            right: 0;
            left: unset;
            width: 60%;
            transform: unset;
            .container-product-name {
              .canva-name {
                transform: translate(-50%, 0);
                flex-direction: column;
                .canva {
                  order: 2;
                  &::before {
                  }
                }
                span {
                  width: 100%;
                  margin: 0 auto;
                  display: block;
                  max-width: 100px;
                  text-align: center;
                }
              }
            }
          }
          &:nth-child(3) {
            left: 30%;
            width: 25%;
            transform: unset;
            .canva-name {
              transform: translate(-50%, 0);
              .canva {
              }
              span {
                width: 100%;
                margin: 0 auto;
                display: block;
                max-width: 100px;
                text-align: center;
              }
            }
          }
          &:nth-child(4) {
            right: 2rem;
            width: 25%;
            z-index: 2;
            transform: unset;
            .canva-name {
              transform: translate(-50%, 0);
              .canva {
              }
              span {
                width: 100%;
                margin: 0 auto;
                display: block;
                max-width: 100px;
                text-align: center;
              }
            }
          }
          .container-product-name {
            gap: 20px;
            .canva-name {
              .canva {
                span {
                }
                &::before {
                  height: 10px;
                  width: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 700px) {
  .nuestras-exportaciones {
    .splide {
      .splide__list {
      }
    }
  }
}

@media (max-width: 650px) {
  section.compromiso {
    .container {
      width: 100%;
      .compromiso-descripcion {
        width: 85%;
        .certificaciones {
          .container-certificacion {
            img {
            }
          }
        }

        .contenido {
        }
        .paises {
          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
          .container-country {
            img {
            }
          }
        }
      }
      .productos {
        .product-name {
          &:nth-child(1) {
            left: 0;
            width: 55%;
            transform: unset;
            .canva-name {
              transform: translate(-50%, 0);
              flex-direction: column;
              .canva {
                order: 2;
                &::before {
                }
              }
              span {
                width: 100%;
                margin: 0 auto;
                display: block;
                max-width: 100px;
                text-align: center;
              }
            }
          }
          &:nth-child(2) {
            right: 0;
            left: unset;
            width: 60%;
            transform: unset;
            .container-product-name {
              .canva-name {
                transform: translate(-50%, 0);
                flex-direction: column;
                .canva {
                  order: 2;
                  &::before {
                  }
                }
                span {
                  width: 100%;
                  margin: 0 auto;
                  display: block;
                  max-width: 100px;
                  text-align: center;
                }
              }
            }
          }
          &:nth-child(3) {
            left: 30%;
            width: 25%;
            transform: unset;
            .canva-name {
              transform: translate(-50%, 0);
              .canva {
              }
              span {
                width: 100%;
                margin: 0 auto;
                display: block;
                max-width: 100px;
                text-align: center;
              }
            }
          }
          &:nth-child(4) {
            right: 2rem;
            width: 25%;
            z-index: 2;
            transform: unset;
            .canva-name {
              transform: translate(-50%, 0);
              .canva {
              }
              span {
                width: 100%;
                margin: 0 auto;
                display: block;
                max-width: 100px;
                text-align: center;
              }
            }
          }
          .container-product-name {
            gap: 20px;
            .canva-name {
              .canva {
                span {
                }
                &::before {
                  height: 10px;
                  width: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 500px) {
  section.compromiso {
    .container {
      .compromiso-descripcion {
        .contenido {
        }
        .paises {
          .container-country {
            img {
            }
          }
        }
      }
      .productos {
        height: 330px;
        aspect-ratio: unset;
        .product-name {
          &:nth-child(1) {
          }
          &:nth-child(2) {
          }
          &:nth-child(3) {
            transform: translate(-20px, 20px);
          }
          &:nth-child(4) {
            transform: translate(0px, 25px);
          }
        }
      }
    }
  }
}

@media (max-width: 420px) {
  section.compromiso {
    .container {
      .productos {
        height: 330px;
        aspect-ratio: unset;
        .product-name {
          &:nth-child(1) {
            height: 330px;
            width: 190px;
          }
          &:nth-child(2) {
            height: 330px;
            width: 230px;
          }
          &:nth-child(3) {
            height: 174px;
            width: 95px;
          }
          &:nth-child(4) {
            height: 174px;
            width: 95px;
          }
        }
      }
    }
  }
}

@media (min-width: 1800px) {
  section.compromiso {
    .container {
      .compromiso-descripcion {
        .contenido {
          font-size: 23px;
          line-height: 27px;
        }
        .paises {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
          column-gap: 20px;
          row-gap: 10px;
          max-width: calc(200px * 2 + 20px * 2);
          align-items: center;
          justify-content: center;
          .container-tayo-pais {
            .container-country {
              height: 70px;
              width: 200px;
            }
          }
        }
        .certificaciones {
          gap: 1.5rem;
          .container-certificacion {
            height: 80px;
            width: 80px;
          }
        }
      }

      .productos {
        .product-name {
          .container-product-name {
            .canva-name {
              span {
                font-size: 17.131px;
                line-height: 18.144px;
              }
            }
          }
        }
      }
    }
  }
}