/* 
* Estilos para página /tenemos-un-plan
* Autor: Brandcode" 
*/

/*Reset y preestilos*/

@font-face {
  font-family: "HurmeGeometricSans1-Bold";
  src: url("../fonts/HurmeGeometricSans1-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

body#cms.cms-id-16 {
  overflow-x: hidden;
}

body#cms.cms-id-16 #header .header-nav,
body#cms.cms-id-16 .footer-container .container {
  max-width: 1920px;
  margin: 0 auto;
  --max: 100;
  --min: 30;
  --maxtrans: 1920;
  --mintrans: 430;
  padding-inline: clamp(
    var(--min) * 1px,
    calc(
      (var(--max) - var(--min)) *
        ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) +
        var(--min) * 1px
    ),
    var(--max) * 1px
  ) !important;
}

body#cms.cms-id-16 .container {
  padding-inline: 0 !important;
  max-width: unset;
}
body#cms.cms-id-16 .container #main {
  max-width: unset;
}
body#cms.cms-id-16 .container #main #content {
  padding-block: 0 !important;
  overflow: hidden;
  padding-inline: 0;
}

body#cms.cms-id-16 .container #main .wrapper .row:not(.ampliado) {
  max-width: 1920px;
  margin: 0 auto;
  --max: 150;
  --min: 30;
  --maxtrans: 1920;
  --mintrans: 430;
  padding-inline: clamp(
    var(--min) * 1px,
    calc(
      (var(--max) - var(--min)) *
        ((100vw - var(--mintrans) * 1px) / (var(--maxtrans) - var(--mintrans))) +
        var(--min) * 1px
    ),
    var(--max) * 1px
  ) !important;
}

body#cms.cms-id-16 em.red {
  color: #ea5442;
}

/*Reset y preestilos*/

body#cms.cms-id-16 #content {
  .row.banner {
    background-image: url("../resources/foto_local_editada_2-v2.webp") !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 640px;
    position: relative;
  }

  .row.banner::after {
    background-image: linear-gradient(to bottom, #202a42, #202a42);
    opacity: 0.7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .row.banner h1 {
    white-space: nowrap;
    font-family: "Guthen Bloots Personal Use", sans-serif !important;
    --max: 180;
    --min: 100;
    --maxtrans: 1920;
    --mintrans: 430;
    font-size: clamp(
      var(--min) * 1px,
      calc(
        (var(--max) - var(--min)) *
          (
            (100vw - var(--mintrans) * 1px) /
              (var(--maxtrans) - var(--mintrans))
          ) + var(--min) * 1px
      ),
      var(--max) * 1px
    );
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: 1.81px;
    text-align: center;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    @media (max-width: 1000px) {
      white-space: normal;
    }
  }

  .row.banner h1::after {
    display: none;
  }
}

body#cms.cms-id-16 #content {
  .wrapper:has(.row.cerca-de-ti) {
    background-color: #132742;
  }
  .row.cerca-de-ti {
    --max-pb: 150;
    --min-pb: 50;
    --maxtrans-pb: 1920;
    --mintrans-pb: 430;
    padding-top: clamp(
      var(--min-pb) * 1px,
      calc(
        (var(--max-pb) - var(--min-pb)) *
          (
            (100vw - var(--mintrans-pb) * 1px) /
              (var(--maxtrans-pb) - var(--mintrans-pb))
          ) + var(--min-pb) * 1px
      ),
      var(--max-pb) * 1px
    );

    .container {
      display: flex;
      flex-direction: row;
      background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.616) 2px,
        transparent 2px
      );
      background-size: 20px 4px;
      background-repeat: repeat-x;
      background-position: bottom left;

      @media (max-width: 1000px) {
        display: flex;
        flex-direction: column;
      }
    }

    .container .col.col1 {
      display: flex;
      flex-direction: column;
      flex: 1;
      h2 {
        font-family: "Guthen Bloots Personal Use", sans-serif !important;
        --max: 100;
        --min: 100;
        --maxtrans: 1920;
        --mintrans: 430;
        font-size: clamp(
          var(--min) * 1px,
          calc(
            (var(--max) - var(--min)) *
              (
                (100vw - var(--mintrans) * 1px) /
                  (var(--maxtrans) - var(--mintrans))
              ) + var(--min) * 1px
          ),
          var(--max) * 1px
        );
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: normal;
        text-align: left;
        color: white;
        text-transform: unset;
        transform: rotate(-5deg);
        transform-origin: top left;

        @media (max-width: 1000px) {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          transform-origin: left;
        }
      }

      .icon_inner {
        display: flex;
        flex-direction: row;
        gap: 50px;
        padding-block: 50px !important;
        @media (max-width: 1000px) {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }

      .icon_inner.inner_1 {
        background-image: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.616) 2px,
          transparent 2px
        );
        background-size: 20px 4px;
        background-repeat: repeat-x;
        background-position: bottom left;
      }

      .icon_inner .icon_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;

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

        p {
          display: flex;
          flex-direction: column;
          font-family: "HurmeGeometricSans1-Bold", sans-serif;
          --max: 23;
          --min: 16;
          --maxtrans: 1920;
          --mintrans: 430;
          font-size: clamp(
            var(--min) * 1px,
            calc(
              (var(--max) - var(--min)) *
                (
                  (100vw - var(--mintrans) * 1px) /
                    (var(--maxtrans) - var(--mintrans))
                ) + var(--min) * 1px
            ),
            var(--max) * 1px
          );
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.2;
          letter-spacing: 0.71px;
          text-align: left;
          color: white;
          text-transform: uppercase;

          em.number {
            --max: 78;
            --min: 50;
            --maxtrans: 1920;
            --mintrans: 430;
            font-size: clamp(
              var(--min) * 1px,
              calc(
                (var(--max) - var(--min)) *
                  (
                    (100vw - var(--mintrans) * 1px) /
                      (var(--maxtrans) - var(--mintrans))
                  ) + var(--min) * 1px
              ),
              var(--max) * 1px
            );

            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.2;
            letter-spacing: 1.1px;
            text-align: left;
            color: #ea5442;
          }
          em.text {
            font-style: normal;
          }
        }
      }

      .icon_inner.inner_1 .icon_item:nth-child(1) img {
        content: url("../resources/Grupo 121.png");
      }
      .icon_inner.inner_1 .icon_item:nth-child(2) img {
        content: url("../resources/Grupo 122.png");
      }

      .icon_inner.inner_2 .icon_item:nth-child(1) img {
        content: url("../resources/Grupo 123.png");
      }
      .icon_inner.inner_2 .icon_item:nth-child(2) img {
        content: url("../resources/Grupo 124.png");
      }

      .icon_inner.inner_2 .icon_item:nth-child(2) p span {
        position: relative;
      }

      .icon_inner.inner_2 .icon_item:nth-child(2) p span::after {
        content: "";
        background-image: url("../resources/mdqlovers.png");
        display: inline-block;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 70px;
        width: 150px;
        position: absolute;
        left: 55px;
        top: 10px;
      }
    }
    .container .col.col2 {
      width: fit-content;
      img {
        content: url("../resources/Grupo 118.png");
        width: 590px;
        height: auto;

        @media (max-width: 1000px) {
          max-width: 100%;
        }
      }
    }
  }
}

body#cms.cms-id-16 #content {
  .wrapper:has(.row.proyeccion-global) {
    background-color: #132742;
  }
  .row.proyeccion-global {
    --max-pb: 100;
    --min-pb: 100;
    --maxtrans-pb: 1920;
    --mintrans-pb: 430;
    padding-block: clamp(
      var(--min-pb) * 1px,
      calc(
        (var(--max-pb) - var(--min-pb)) *
          (
            (100vw - var(--mintrans-pb) * 1px) /
              (var(--maxtrans-pb) - var(--mintrans-pb))
          ) + var(--min-pb) * 1px
      ),
      var(--max-pb) * 1px
    );

    .container {
      display: flex;
      flex-direction: row;

      @media (max-width: 1000px) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }

    .container .col.col1 {
      display: flex;
      flex-direction: column;
      flex: 1;
      h2 {
        font-family: "Guthen Bloots Personal Use", sans-serif !important;
        --max: 100;
        --min: 100;
        --maxtrans: 1920;
        --mintrans: 430;
        font-size: clamp(
          var(--min) * 1px,
          calc(
            (var(--max) - var(--min)) *
              (
                (100vw - var(--mintrans) * 1px) /
                  (var(--maxtrans) - var(--mintrans))
              ) + var(--min) * 1px
          ),
          var(--max) * 1px
        );
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: normal;
        text-align: left;
        color: white;
        text-transform: unset;
        transform: rotate(-5deg);
        transform-origin: top left;

        @media (max-width: 1000px) {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }

      img {
        content: url("../resources/Grupo 119.png");
        width: 870px;
        height: auto;

        @media (max-width: 1000px) {
          max-width: 100%;
        }
      }
    }
    .container .col.col2 {
      .icon_inner {
        display: flex;
        flex-direction: column;
        gap: 50px;
        --max: 100;
        --min: 100;
        --maxtrans: 1920;
        --mintrans: 430;
        padding-inline: clamp(
          var(--min) * 1px,
          calc(
            (var(--max) - var(--min)) *
              (
                (100vw - var(--mintrans) * 1px) /
                  (var(--maxtrans) - var(--mintrans))
              ) + var(--min) * 1px
          ),
          var(--max) * 1px
        );
      }

      .icon_inner .icon_item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 15px;

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

        p {
          display: flex;
          flex-direction: column;
          font-family: "HurmeGeometricSans1-Bold", sans-serif;
          --max: 23;
          --min: 16;
          --maxtrans: 1920;
          --mintrans: 430;
          font-size: clamp(
            var(--min) * 1px,
            calc(
              (var(--max) - var(--min)) *
                (
                  (100vw - var(--mintrans) * 1px) /
                    (var(--maxtrans) - var(--mintrans))
                ) + var(--min) * 1px
            ),
            var(--max) * 1px
          );

          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.2;
          letter-spacing: 0.71px;
          text-align: left;
          color: white;
          text-transform: uppercase;

          em.number {
            --max: 78;
            --min: 50;
            --maxtrans: 1920;
            --mintrans: 430;
            font-size: clamp(
              var(--min) * 1px,
              calc(
                (var(--max) - var(--min)) *
                  (
                    (100vw - var(--mintrans) * 1px) /
                      (var(--maxtrans) - var(--mintrans))
                  ) + var(--min) * 1px
              ),
              var(--max) * 1px
            );
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.2;
            letter-spacing: 1.1px;
            text-align: left;
            color: #ea5442;
          }
          em.text {
            font-style: normal;
          }
        }
      }

      .icon_inner .icon_item:nth-child(1) img {
        content: url("../resources/Grupo 125.png");
      }
      .icon_inner .icon_item:nth-child(2) img {
        content: url("../resources/Grupo 126.png");
      }
      .icon_inner .icon_item:nth-child(3) img {
        content: url("../resources/Grupo 127.png");
      }
    }
  }
}

body#cms.cms-id-16 #content {
  .descubre {
    max-width: 1920px;
    margin: 0 auto;
    --max: 250;
    --min: 250;
    --maxtrans: 1920;
    --mintrans: 430;
    padding-inline: clamp(
      var(--min) * 1px,
      calc(
        (var(--max) - var(--min)) *
          (
            (100vw - var(--mintrans) * 1px) /
              (var(--maxtrans) - var(--mintrans))
          ) + var(--min) * 1px
      ),
      var(--max) * 1px
    );
    padding-block: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;

    h3 {
      font-family: "Roboto", sans-serif;
      --max: 80;
      --min: 40;
      --maxtrans: 1920;
      --mintrans: 430;
      font-size: clamp(
        var(--min) * 1px,
        calc(
          (var(--max) - var(--min)) *
            (
              (100vw - var(--mintrans) * 1px) /
                (var(--maxtrans) - var(--mintrans))
            ) + var(--min) * 1px
        ),
        var(--max) * 1px
      );
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      color: #202a42;
      max-width: 950px;
    }

    .banner {
      background-color: #ea5442;
      padding-inline: 75px;
      padding-block: 40px;
      border-radius: 100px;
      font-family: "Roboto", sans-serif;
      --max: 80;
      --min: 30;
      --maxtrans: 1920;
      --mintrans: 430;
      font-size: clamp(
        var(--min) * 1px,
        calc(
          (var(--max) - var(--min)) *
            (
              (100vw - var(--mintrans) * 1px) /
                (var(--maxtrans) - var(--mintrans))
            ) + var(--min) * 1px
        ),
        var(--max) * 1px
      );
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      color: white;
      margin-block: 50px;

      @media (max-width: 1000px) {
        padding-inline: 30px;
        padding-block: 15px;
      }
    }

    .text-container p {
      font-family: "Roboto", sans-serif;
      font-size: 22px;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      color: #202a42;
      max-width: 844px;

      strong.red {
        font-size: 32px;
        color: #ea5442;
      }
    }

    .separator {
      background-image: url("../resources/line-footer.png");
      background-size: cover;
      background-repeat: repeat-x;
      background-position: center;
      position: absolute;
      bottom: 0;
      width: 100vw;
      height: 20px;
    }
  }
}

body#cms.cms-id-16 #content {
  .row.encuentra {
    background-image: url("../resources/foto_local_editada_.webp") !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
  }

  .row.encuentra::after {
    background-image: linear-gradient(to bottom, #202a42, #202a42);
    opacity: 0.7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .row.encuentra h2 {
    font-family: "Roboto", sans-serif;
    --max: 80;
    --min: 40;
    --maxtrans: 1920;
    --mintrans: 430;
    font-size: clamp(
      var(--min) * 1px,
      calc(
        (var(--max) - var(--min)) *
          (
            (100vw - var(--mintrans) * 1px) /
              (var(--maxtrans) - var(--mintrans))
          ) + var(--min) * 1px
      ),
      var(--max) * 1px
    );
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    color: white;
    z-index: 2;
    position: relative;
    max-width: 1000px;
    text-transform: unset;

    @media (max-width: 1000px) {
      padding-inline: 30px;
    }
  }

  .row.encuentra .text-container p {
    margin-bottom: 10px !important;
    font-family: "Roboto", sans-serif;
    --max: 21;
    --min: 16;
    --maxtrans: 1920;
    --mintrans: 430;
    font-size: clamp(
      var(--min) * 1px,
      calc(
        (var(--max) - var(--min)) *
          (
            (100vw - var(--mintrans) * 1px) /
              (var(--maxtrans) - var(--mintrans))
          ) + var(--min) * 1px
      ),
      var(--max) * 1px
    );
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: white !important;
    z-index: 2;
    position: relative;
    max-width: 800px;

    @media (max-width: 1000px) {
      padding-inline: 30px;
    }
  }
}

body#cms.cms-id-16 #content {
  .wrapper:has(.ampliado) {
    background-color: #eeeeee;
  }

  .ampliado {
    --max: 175;
    --min: 0;
    --maxtrans: 1920;
    --mintrans: 1000;
    padding-right: clamp(
      var(--min) * 1px,
      calc(
        (var(--max) - var(--min)) *
          (
            (100vw - var(--mintrans) * 1px) /
              (var(--maxtrans) - var(--mintrans))
          ) + var(--min) * 1px
      ),
      var(--max) * 1px
    );
    padding-block: 100px;

    .container {
      max-width: 1920px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 50px;

      @media (max-width: 1000px) {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .col1 {
        img {
          content: url("../resources/Imagen 14.png");
          width: 1000px;
          height: auto;
          object-fit: contain;

          @media (max-width: 1000px) {
            max-width: 100%;
          }
        }
      }

      .col2 {
        h3 {
          font-family: "Roboto", sans-serif;
          --max: 60;
          --min: 40;
          --maxtrans: 1920;
          --mintrans: 430;
          font-size: clamp(
            var(--min) * 1px,
            calc(
              (var(--max) - var(--min)) *
                (
                  (100vw - var(--mintrans) * 1px) /
                    (var(--maxtrans) - var(--mintrans))
                ) + var(--min) * 1px
            ),
            var(--max) * 1px
          );
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: normal;
          letter-spacing: normal;
          text-align: left;
          color: #202a42;
          margin-bottom: 25px;

          @media (max-width: 1000px) {
            text-align: center;
            padding-inline: 30px;
          }
        }

        .text-container p {
          margin-bottom: 15px !important;
          font-family: "Roboto", sans-serif;
          --max: 21;
          --min: 16;
          --maxtrans: 1920;
          --mintrans: 430;
          font-size: clamp(
            var(--min) * 1px,
            calc(
              (var(--max) - var(--min)) *
                (
                  (100vw - var(--mintrans) * 1px) /
                    (var(--maxtrans) - var(--mintrans))
                ) + var(--min) * 1px
            ),
            var(--max) * 1px
          );
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: normal;
          letter-spacing: normal;
          text-align: left;
          color: #202a42;

          @media (max-width: 1000px) {
            text-align: center;
            padding-inline: 30px;
          }
        }
      }
    }
  }
}

body#cms.cms-id-16 #content {
  .ven-a-vivir {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: 150px !important;

    h2 {
      max-width: 890px;
      font-family: "Guthen Bloots Personal Use", sans-serif !important;
      --max: 100;
      --min: 45;
      --maxtrans: 1920;
      --mintrans: 430;
      font-size: clamp(
        var(--min) * 1px,
        calc(
          (var(--max) - var(--min)) *
            (
              (100vw - var(--mintrans) * 1px) /
                (var(--maxtrans) - var(--mintrans))
            ) + var(--min) * 1px
        ),
        var(--max) * 1px
      );
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: 1;
      letter-spacing: normal;
      text-align: center;
      color: #202a42;
      text-transform: unset;
      transform: rotate(-5deg);
      transform-origin: top left;
      margin-bottom: 100px !important;

      @media (max-width: 1000px) {
        margin-bottom: 20px !important;
      }

      em {
        position: relative;
      }

      em::after {
        content: "";
        background-image: url("../resources/linea.png");
        display: inline-block;
        position: absolute;
        bottom: -55px;
        height: 100px;
        background-position: center;
        background-size: cover;
        right: 0;
        --max: 750;
        --min: 300;
        --maxtrans: 1920;
        --mintrans: 430;
        width: clamp(
          var(--min) * 1px,
          calc(
            (var(--max) - var(--min)) *
              (
                (100vw - var(--mintrans) * 1px) /
                  (var(--maxtrans) - var(--mintrans))
              ) + var(--min) * 1px
          ),
          var(--max) * 1px
        );
        background-repeat: no-repeat;
        rotate: 5deg;
      }
    }

    .text-container p:nth-child(1) {
      font-family: "Roboto", sans-serif;
      --max: 21;
      --min: 16;
      --maxtrans: 1920;
      --mintrans: 430;
      font-size: clamp(
        var(--min) * 1px,
        calc(
          (var(--max) - var(--min)) *
            (
              (100vw - var(--mintrans) * 1px) /
                (var(--maxtrans) - var(--mintrans))
            ) + var(--min) * 1px
        ),
        var(--max) * 1px
      );
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      color: #202a42;
      max-width: 630px;

      @media (max-width: 1000px) {
        text-align: center;
        padding-inline: 30px;
      }
    }

    .text-container p:nth-child(2) {
      font-family: "Roboto", sans-serif;
      font-size: 36px;
      --max: 36;
      --min: 22;
      --maxtrans: 1920;
      --mintrans: 430;
      font-size: clamp(
        var(--min) * 1px,
        calc(
          (var(--max) - var(--min)) *
            (
              (100vw - var(--mintrans) * 1px) /
                (var(--maxtrans) - var(--mintrans))
            ) + var(--min) * 1px
        ),
        var(--max) * 1px
      );
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      color: #202a42;
      max-width: 500px;
    }

    .text-container:has(img) {
      display: flex;
      flex-direction: row;
      align-items: baseline;

      @media (max-width: 1000px) {
        align-items: center !important;
      }

      img {
        content: url("../resources/ubicacion.svg");
        width: 25px;
        height: auto;
        object-fit: contain;
      }

      p {
        margin: 0 !important;
      }

      @media (max-width: 1000px) {
        text-align: center;
        padding-inline: 40px;
      }
    }
  }
}