/*==================================================
  GAMES PAGE
==================================================*/

.games-page{
  background:
    radial-gradient(circle at top,#143327 0%,#081611 46%,#050908 100%);
  color:#eef4f1;
}

.games-page main{
  overflow:hidden;
}


/*==================================================
  HERO
==================================================*/

.games-hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
}

.games-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;

  background:
    linear-gradient(
      135deg,
      rgba(8,24,18,.96),
      rgba(8,24,18,.82) 48%,
      rgba(8,24,18,.68)
    );
}

.games-hero::after{
  content:"";
  position:absolute;
  inset:auto -12% -35% auto;
  width:620px;
  aspect-ratio:1;
  border-radius:50%;
  z-index:-2;

  background:
    radial-gradient(
      circle,
      rgba(210,169,73,.16),
      rgba(210,169,73,0) 68%
    );
}

.games-hero__glow{
  position:absolute;
  inset:-20% auto auto -12%;
  width:560px;
  aspect-ratio:1;
  border-radius:50%;
  z-index:-2;

  background:
    radial-gradient(
      circle,
      rgba(42,112,79,.22),
      rgba(42,112,79,0) 70%
    );
}

.games-hero__layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) 360px;
  gap:4rem;
  align-items:center;
  padding-block:9rem 7rem;
}

.games-hero__copy{
  max-width:780px;
}

.games-hero h1{
  margin:.8rem 0 1.6rem;
  font-size:clamp(3rem,5.4vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.035em;
}

.games-hero h1 em{
  color:var(--color-accent);
  font-style:normal;
}

.games-hero__intro{
  max-width:670px;
  font-size:1.15rem;
  line-height:1.85;
  color:rgba(255,255,255,.82);
}


/*==================================================
  HERO - PANEL
==================================================*/

.games-hero__panel{
  padding:2.5rem;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  backdrop-filter:blur(14px);

  box-shadow:
    0 24px 70px rgba(0,0,0,.28);
}

.games-hero__panel-label{
  display:block;
  margin-bottom:1.3rem;

  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;

  color:var(--color-accent);
}

.games-hero__panel strong{
  display:block;
  margin-bottom:1rem;
  font-size:1.5rem;
  line-height:1.35;
}

.games-hero__panel p{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}

.games-hero__stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  margin-top:2rem;
}

.games-hero__stats div{
  padding:1.2rem;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}

.games-hero__stats span{
  display:block;
  font-size:1.8rem;
  font-weight:800;
  color:#fff;
}

.games-hero__stats small{
  display:block;
  margin-top:.2rem;
  color:rgba(255,255,255,.6);
}
/*==================================================
  CONTROLES DEL CATÁLOGO
==================================================*/

.catalog-controls{
  padding:6rem 0 3rem;
}

.catalog-controls__heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  gap:3rem;
  align-items:end;
  margin-bottom:2.5rem;
}

.catalog-controls__heading h2{
  margin:.8rem 0 0;
  font-size:clamp(2.2rem,4vw,3.5rem);
  line-height:1.08;
}

.catalog-controls__heading p:last-child{
  margin:0;
  line-height:1.8;
  color:rgba(255,255,255,.72);
}


/*==================================================
  FILTROS
==================================================*/

.catalog-filters{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.catalog-filter{

  padding:.95rem 1.6rem;

  border:1px solid rgba(255,255,255,.08);

  border-radius:999px;

  background:rgba(255,255,255,.03);

  color:#eef4f1;

  font:inherit;

  cursor:pointer;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.catalog-filter:hover{

  transform:translateY(-2px);

  border-color:rgba(255,255,255,.16);

  background:rgba(255,255,255,.06);
}

.catalog-filter.is-active{

  background:var(--color-accent);

  color:#08120d;

  border-color:transparent;

  font-weight:700;
}


/*==================================================
  ESTADOS
==================================================*/

.game-status{

  position:absolute;

  top:1rem;

  left:1rem;

  padding:.45rem .9rem;

  border-radius:999px;

  font-size:.72rem;

  font-weight:700;

  letter-spacing:.04em;

  text-transform:uppercase;

  color:#fff;

  backdrop-filter:blur(8px);
}

.game-status--available{

  background:#2d9b53;
}

.game-status--testing{

  background:#2d9715;
}

.game-status--soon{

  background:#666;
}


/*==================================================
  ENCABEZADOS
==================================================*/

.section-heading{

  max-width:760px;

  margin-bottom:3rem;
}

.section-heading h2{

  margin:.8rem 0 1rem;

  font-size:clamp(2.2rem,4vw,3.6rem);

  line-height:1.08;
}

.section-heading p{

  color:rgba(255,255,255,.75);

  line-height:1.8;
}
/*==================================================
  JUEGO DESTACADO
==================================================*/

.featured-game{
  padding:3rem 0 6rem;
}

.featured-game__card{

  display:grid;

  grid-template-columns:
    minmax(380px,520px)
    minmax(0,1fr);

  gap:3rem;

  align-items:center;

  padding:2rem;

  border-radius:32px;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.018)
    );

  overflow:hidden;
}

.featured-game__media{

  position:relative;

  border-radius:22px;

  overflow:hidden;
}

.featured-game__media img{

  display:block;

  width:100%;

  height:100%;

  object-fit:cover;
}

.featured-game__content h2{

  margin:.8rem 0 1.3rem;

  font-size:clamp(2.2rem,4vw,3.6rem);

  line-height:1.08;
}

.featured-game__lead{

  margin-bottom:2rem;

  line-height:1.85;

  color:rgba(255,255,255,.80);
}

.featured-game__features{

  margin:0 0 2rem;

  padding:0;

  list-style:none;

  display:grid;

  gap:1rem;
}

.featured-game__features li{

  position:relative;

  padding-left:1.6rem;

  line-height:1.75;

  color:rgba(255,255,255,.76);
}

.featured-game__features li::before{

  content:"";

  position:absolute;

  left:0;

  top:.72rem;

  width:8px;

  height:8px;

  border-radius:50%;

  background:var(--color-accent);
}


/*==================================================
  CATÁLOGO
==================================================*/

.games-catalog{
  padding:2rem 0 7rem;
}

.games-grid{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:1.8rem;
}


/*==================================================
  TARJETAS
==================================================*/

.catalog-game-card{

  border-radius:24px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.015)
    );

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.catalog-game-card:hover{

  transform:translateY(-8px);

  border-color:rgba(255,255,255,.16);

  box-shadow:
    0 20px 55px rgba(0,0,0,.22);
}

.catalog-game-card__link{

  display:flex;

  flex-direction:column;

  height:100%;

  color:inherit;

  text-decoration:none;
}

.catalog-game-card__media{

  position:relative;

  aspect-ratio:16/10;

  overflow:hidden;
}

.catalog-game-card__media img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:
    transform .45s ease;
}

.catalog-game-card:hover
.catalog-game-card__media img{

  transform:scale(1.05);
}

.catalog-game-card__body{

  display:flex;

  flex-direction:column;

  flex:1;

  padding:1.6rem;
}

.catalog-game-card__collection{

  margin-bottom:.9rem;

  font-size:.78rem;

  font-weight:700;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:var(--color-accent);
}

.catalog-game-card__body h3{

  margin:0 0 .9rem;

  font-size:1.45rem;
}

.catalog-game-card__body p{

  flex:1;

  margin:0 0 1.4rem;

  line-height:1.75;

  color:rgba(255,255,255,.72);
}

.catalog-game-card__action{

  display:inline-flex;

  align-items:center;

  gap:.5rem;

  font-weight:700;

  color:var(--color-accent);
}
/*==================================================
  COLECCIONES
==================================================*/

.game-collections{
  padding:7rem 0;
}

.collections-grid{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:1.6rem;
}

.collection-card{

  padding:2rem;

  border-radius:24px;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  transition:
    transform .25s ease,
    border-color .25s ease;
}

.collection-card:hover{

  transform:translateY(-6px);

  border-color:rgba(255,255,255,.16);
}

.collection-card__number{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:48px;

  height:48px;

  margin-bottom:1.5rem;

  border-radius:50%;

  background:rgba(255,255,255,.05);

  color:var(--color-accent);

  font-weight:700;
}

.collection-card h3{

  margin:0 0 1rem;

  font-size:1.45rem;
}

.collection-card p{

  margin:0;

  line-height:1.8;

  color:rgba(255,255,255,.72);
}


/*==================================================
  PRÓXIMAMENTE
==================================================*/

.coming-soon{

  padding:2rem 0 7rem;
}

.coming-soon__box{

  max-width:900px;

  margin:auto;

  text-align:center;

  padding:4rem;

  border-radius:30px;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
    );
}

.coming-soon__box h2{

  margin:.8rem 0 1.5rem;

  font-size:clamp(2.3rem,4vw,3.8rem);

  line-height:1.08;
}

.coming-soon__box p{

  max-width:700px;

  margin:auto;

  line-height:1.9;

  color:rgba(255,255,255,.76);
}


/*==================================================
  COMUNIDAD
==================================================*/

.games-community{

  padding:0 0 8rem;
}

.games-community__box{

  max-width:900px;

  margin:auto;

  text-align:center;

  padding:4rem;

  border-radius:30px;

  border:1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
    );
}

.games-community__box h2{

  margin:.8rem auto 1.6rem;

  max-width:700px;

  font-size:clamp(2.3rem,4vw,3.8rem);

  line-height:1.08;
}

.games-community__box p{

  max-width:700px;

  margin:0 auto 2rem;

  line-height:1.9;

  color:rgba(255,255,255,.76);
}
/*==================================================
  RESPONSIVE - TABLET
==================================================*/

@media (max-width:1200px){

  .games-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .collections-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .featured-game__card{
    grid-template-columns:1fr;
  }

  .games-hero__layout{
    grid-template-columns:1fr;
  }

  .catalog-controls__heading{
    grid-template-columns:1fr;
  }

}


/*==================================================
  RESPONSIVE - MOBILE
==================================================*/

@media (max-width:768px){

  .games-hero{
    min-height:auto;
  }

  .games-hero__layout{
    padding-block:7rem 5rem;
    gap:2.5rem;
  }

  .games-hero h1{
    font-size:clamp(2.2rem,9vw,3.5rem);
  }

  .games-grid{
    grid-template-columns:1fr;
  }

  .collections-grid{
    grid-template-columns:1fr;
  }

  .featured-game__card{
    padding:1.5rem;
  }

  .featured-game__content h2{
    font-size:clamp(2rem,8vw,2.8rem);
  }

  .coming-soon__box,
  .games-community__box{
    padding:2.5rem;
  }

  .catalog-filters{
    justify-content:center;
  }

  .button-row{
    flex-direction:column;
    align-items:stretch;
  }

  .button-row .button{
    justify-content:center;
  }

}
/*==================================================
  REVEAL
==================================================*/

.games-page .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .6s ease,
    transform .6s ease;
}

.games-page .reveal.is-visible{
  opacity:1;
  transform:none;
}


/*==================================================
  AJUSTES
==================================================*/

.games-page .button-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

.games-page .button-row .button{
  min-width:220px;
}

.games-page h2,
.games-page h3{
  text-wrap:balance;
}

.games-page p{
  text-wrap:pretty;
}

.games-page section{
  position:relative;
}

.catalog-game-card,
.collection-card,
.featured-game__card{
  will-change:transform;
}