@import url("./base.css") layer(home);
@import url("./components/navbar.css") layer(components);
@import url("./components/footer.css") layer(components);
@import url("./components/welcome.css") layer(components);


@layer home {
  .home-hero-container {
    width: 100%;

    .home-hero-escudo {
      --p: 6.5%;
      --w: 8.33%;

      margin: var(--p) var(--p) 0 auto;
    }

    .hero-logo {
      margin: 3% auto 0;
    }

    .home-hero-text {
      padding: 39% 5% 0;
      text-align: center;
      font-size: min(6.11vw, 66px);
      letter-spacing: -0.02em;
      line-height: 1.13;
      font-weight: 300;

      em {
        display: block;
        font-size: min(6.66vw, 72px);
        font-style: normal;
        font-weight: 600;
        line-height: 1.15;
      }
    }

    .home-hero-cta {
      display: block;
      margin-top: 10%;

      .home-hero-btn {
        --w: 62%;

        margin: 0 auto;
      }
    }

  }

  .home-premios-container {
    display: grid;
    place-items: center;
    padding-top: 11.5%;
    gap: 3%;

    .home-premios-title {
      --w: 45.09%;
    }

    .home-premios-carousel {
      width: 100%;
      max-width: 87.9%;
      overflow: hidden;

      .carousel-track {
        align-items: center;
      }

      .swiper-slide {
        img {
          --w: 69.44%;

          margin: 0 auto;
        }
      }

      .home-premios-carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: grid;
        place-items: center;
        width: 5.5%;
        height: 5.5%;
        cursor: pointer;
        z-index: 10;
        background-color: transparent;
        border: 0;
        color: currentcolor;

        &.home-premios-carousel-btn-next {
          right: 0;
        }

        &.home-premios-carousel-btn-prev {
          left: 0;
        }

        &.swiper-button-disabled {
          color: #fff8;
          cursor: not-allowed;
        }
      }
    }

  }

  .home-como-juego,
  .home-puntos {
    --w: 76.85%;

    margin: 0 auto;
  }

  .home-como-juego {
    margin-top: 11.5%;
  }

  .home-puntos {
    margin-top: min(13vw, 145px);
  }


  .home-footer-container {
    margin-top: 7%;
    position: relative;
    overflow-x: hidden;

    .home-footer-content {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;

      .home-footer-rrss {
        position: relative;
        width: 100%;
        margin-bottom: 4.5%;
        left: 52.5%;


        img {
          --w: 7.77%;

          display: inline-block;
          margin-right: 1%;
        }
      }

      .home-footer-bot {
        --px: 5%;
        --pb: 3%;

        padding: 0 var(--px) var(--pb);
        font-size: min(2.12vw, 23px);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .home-footer-dudas {
          em {
            font-size: min(3.05vw, 33px);
            font-weight: 600;
          }

          a {
            text-decoration-color: #fffA;
          }
        }


        .home-footer-tyc-copy {
          display: grid;
          gap: 13%;
          text-align: center;

          a {
            text-decoration: none;
          }
        }
      }
    }
  }
}