@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --black: #050505;
  --white: #f5f5f2;
  --red: #ff1717;
  --gray: #777;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

img {
  max-width: 100%;
  display: block;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 70px;

  padding: 0 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(0, 0, 0, .92);

  border-bottom:
    1px solid rgba(255,255,255,.12);

  z-index: 100;
}

.logo img {
  width: 130px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 38px;
}

.desktop-nav a {
  font-size: 10px;
  font-weight: 800;

  transition:
    color .2s ease;
}

.desktop-nav a:hover {
  color: var(--red);
}

.join-button {
  padding: 13px 18px;

  display: flex;
  align-items: center;

  gap: 20px;

  background: var(--red);
  color: #fff;

  font-size: 10px;
  font-weight: 900;

  transition:
    background .2s ease,
    color .2s ease;
}

.join-button:hover {
  background: #fff;
  color: #000;
}


/* =========================================================
   LANGUAGE SWITCH
========================================================= */

.navbar-actions {
  position: relative;
  flex-shrink: 0;
}

.language-switch {
  position: absolute;

  top: 50%;
  right: calc(100% + 16px);

  transform: translateY(-50%);

  display: flex;
  align-items: center;

  gap: 5px;

  white-space: nowrap;
}

.language-button {
  padding: 0;

  border: 0;

  background: transparent;

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

  font-family: "Inter", sans-serif;

  font-size: 9px;
  font-weight: 900;

  line-height: 1;

  cursor: pointer;
}

.language-button.active {
  color: var(--red);
}

.language-divider {
  color: rgba(255,255,255,.25);

  font-size: 9px;
  font-weight: 700;
}

.menu-button {
  display: none;
}

.mobile-language-switch {
  display: none;
}


/* =========================================================
   GENERAL
========================================================= */

.section-number {
  position: absolute;

  top: 35px;
  left: 28px;

  color: var(--red);

  font-size: 11px;
  font-weight: 900;
}

.section-light {
  position: relative;

  background: var(--white);
  color: #050505;
}

.section-dark {
  position: relative;

  background: #050505;
  color: #fff;
}

.outline-button {
  min-width: 145px;

  padding: 12px 14px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  border:
    1px solid var(--red);

  color: #fff;

  font-size: 10px;
  font-weight: 900;

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

.outline-button:hover {
  background: var(--red);
}

.dark-button {
  color: #000;
  border-color: #000;
}

.dark-button:hover {
  color: #fff;
  background: #000;
}

/* WORLD CTA — fixed width in EN / ES so translation never shifts layout */
.world-enter-button {
  width: 176px;
  min-width: 176px;
}


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

.hero {
  position: relative;

  min-height: 100svh;

  overflow: hidden;

  background: #000;
}

.hero-background {
  position: absolute;
  inset: 0;

  z-index: 0;
}

.hero-background img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    contrast(1.05)
    brightness(.72);

  transform: scale(1.02);
}

.hero-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.72) 32%,
      rgba(0,0,0,.25) 65%,
      rgba(0,0,0,.30) 100%
    );
}

.hero-content {
  position: relative;

  min-height: 100svh;

  padding:
    125px
    28px
    55px;

  z-index: 3;
}

.hero-number {
  position: absolute;

  top: 100px;
  left: 28px;

  color: var(--red);

  font-size: 11px;
  font-weight: 900;
}

.hero-side-label {
  position: absolute;

  right: 25px;
  top: 50%;

  writing-mode: vertical-rl;

  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 700;
}

.hero-copy {
  position: absolute;

  left: 28px;
  bottom: 65px;

  max-width: 800px;
}

.hero-copy h1 {
  margin: 0;

  font-family: "Anton", sans-serif;

  font-size:
    clamp(80px, 9vw, 150px);

  line-height: .92;

  letter-spacing: -.025em;

  text-transform: uppercase;

  color: var(--white);
}

.hero-copy h1 span {
  color: var(--red);
}

.hero-copy p {
  max-width: 380px;

  margin-top: 30px;

  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}

.hero-copy .outline-button {
  margin-top: 25px;
}


/* =========================================================
   ABOUT
========================================================= */

.about {
  position: relative;

  min-height: 560px;

  padding:
    80px
    28px;

  display: grid;

  grid-template-columns:
    240px
    1fr;

  gap: 35px;

  align-items: center;

  background: var(--white);
  color: #050505;
}

.about-title > span,
.section-title-block > span,
.services-title > span,
.world-title > span,
.join-copy > span {
  display: block;

  font-size: 10px;
  font-weight: 900;
}

.about-title h2,
.section-title-block h2,
.world-title h2 {
  margin-top: 8px;

  font-family: "Anton", sans-serif;

  font-size:
    clamp(50px, 5vw, 85px);

  line-height: .85;

  text-transform: uppercase;
}

.about-title h2 span,
.section-title-block h2 span,
.world-title h2 span {
  color: var(--red);
}

.about-text h3 {
  font-family: "Anton", sans-serif;

  font-size: 27px;

  line-height: .95;
}

.about-text h3 span {
  color: var(--red);
}

.about-text p {
  max-width: 350px;

  margin-top: 20px;

  font-size: 12px;

  line-height: 1.55;
}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.about-image {
  position: relative;

  width: 100%;
  height: 480px;

  overflow: hidden;

  background: #050505;
}

.about-image > img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(100%);

  transform:
    scale(1.02);

  transition:
    transform .5s ease;
}

.about-image:hover > img {
  transform:
    scale(1.05);
}

.about-image .about-text {
  position: absolute;

  top: 50%;
  left: 35px;

  transform:
    translateY(-50%);

  width: 320px;

  color: #fff;

  z-index: 3;
}

.about-image .about-text h3 {
  color: #fff;

  font-family: "Anton", sans-serif;

  font-size: 27px;

  line-height: .95;
}

.about-image .about-text h3 span {
  color: var(--red);
}

.about-image .about-text p {
  max-width: 320px;

  margin-top: 20px;

  color: #fff;

  font-size: 12px;

  line-height: 1.55;
}


/* =========================================================
   ABOUT LOCATION
========================================================= */

.about-location {
  position: absolute;

  top: 50%;
  right: 25px;

  transform:
    translateY(-50%);

  height: auto;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: flex-start;

  gap: 28px;

  padding: 0;

  z-index: 3;
}

.globe {
  width: 52px;
  height: 52px;

  display: flex;

  align-items: center;
  justify-content: center;
}

.globe img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.about-location .location-text {
  color: #fff;

  font-size: 13px;

  line-height: 1.25;

  font-weight: 900;

  text-transform: uppercase;
}

.about-location .location-red {
  color: var(--red);

  font-size: 13px;

  line-height: 1.25;

  font-weight: 900;

  text-transform: uppercase;
}


/* =========================================================
   ARTISTS
========================================================= */

.artists {
  position: relative;

  min-height: 520px;

  padding:
    70px
    28px;

  display: grid;

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

  gap: 10px;

  background: #050505;
}

.artists .section-title-block {
  min-width: 0;
}

.artists .section-title-block h2 {
  margin-bottom: 25px;
}


/* =========================================================
   ARTISTS GRID
========================================================= */

.artists-grid {
  grid-column: 2;

  width: 100%;

  display: grid;

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

  gap: 10px;

  align-items: start;
}


/* =========================================================
   ARTIST CARD
========================================================= */

.artist-card {
  position: relative;

  width: 100%;
  min-width: 0;

  display: flex;

  flex-direction: column;
}

.artist-card-link {
  position: absolute;
  inset: 0;

  z-index: 10;

  display: block;
}


/* =========================================================
   ARTIST IMAGE
========================================================= */

.artist-placeholder {
  position: relative;

  width: 100%;

  height:
    clamp(330px, 53vh, 470px);

  padding: 0;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #444,
      #111
    );
}

.artist-placeholder img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center top;

  transition:
    transform .45s ease,
    filter .45s ease;
}

.artist-card:hover .artist-placeholder img {
  transform:
    scale(1.025);
}

.artist-card:nth-child(1) .artist-placeholder img {
  object-position:
    center 25%;
}

.artist-card:nth-child(2) .artist-placeholder img {
  object-position:
    center 20%;
}

.artist-card:nth-child(3) .artist-placeholder img {
  object-position:
    center 50%;
}


/* =========================================================
   ARTIST 03 — LOCKED
========================================================= */

.artist-card--locked {
  cursor: default;
}

.artist-card--locked .artist-placeholder img {
  opacity: .58;

  filter:
    grayscale(100%)
    contrast(1.15)
    brightness(.58);
}

.artist-card--locked:hover .artist-placeholder img {
  transform: none;
}

.artist-card--locked .artist-role {
  color:
    rgba(255,255,255,.55);
}

.artist-card--locked .artist-location {
  color:
    rgba(255,255,255,.34);
}

.artist-card--locked .artist-genre {
  color: var(--red);
}


/* =========================================================
   ARTIST NUMBER
========================================================= */

.artist-number {
  position: absolute;

  top: 10px;
  left: 10px;

  z-index: 3;

  color: var(--red);

  font-size: 10px;

  font-weight: 900;
}


/* =========================================================
   ARTIST INFO
========================================================= */

.artist-info {
  position: relative;

  width: 100%;

  min-height: 100px;

  padding:
    18px
    4px
    20px;
}

.artist-info h3 {
  margin: 0;

  color: #f3f3f1;

  font-family: "Anton", sans-serif;

  font-size: 30px;

  font-weight: 400;

  line-height: .95;

  letter-spacing: -.02em;

  text-transform: uppercase;
}

.artist-meta {
  margin-top: 13px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 6px;
}

.artist-info .artist-meta span {
  display: block;

  font-size: 8px;

  font-weight: 700;

  line-height: 1.25;

  letter-spacing: .08em;

  text-transform: uppercase;
}

.artist-info .artist-role {
  color: #b8b8b8;
}

.artist-info .artist-location {
  color: #777;
}

.artist-info .artist-genre {
  color: var(--red);

  font-weight: 900;
}

.artist-info b {
  position: absolute;

  right: 4px;
  bottom: 18px;

  color: var(--red);

  font-size: 20px;
}


/* =========================================================
   ARTISTS — TABLET
========================================================= */

@media (max-width: 1000px) {

  .artists {
    grid-template-columns:
      150px
      minmax(0, 1fr);
  }

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

    gap: 18px;
  }

  .artist-placeholder {
    height: auto;

    aspect-ratio:
      4 / 5;
  }

}


/* =========================================================
   ARTISTS — MOBILE
========================================================= */

@media (max-width: 700px) {

  .artists {
    display: block !important;

    min-height: auto;

    padding:
      55px
      22px
      70px;
  }

  .artists .section-title-block {
    width: 100%;

    margin-bottom: 40px;
  }

  .artists .section-title-block h2 {
    margin-bottom: 25px;
  }

  .artists-grid {
    grid-column: auto !important;

    width: 100%;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 52px !important;

    margin: 0;
  }

  .artist-card {
    position: relative;

    width: 100%;

    min-width: 0;

    display: block;
  }

  .artist-placeholder {
    width: 100%;

    height: auto !important;

    aspect-ratio:
      4 / 5;

    padding: 0;

    display: block;

    overflow: hidden;

    background: #171717;
  }

  .artist-placeholder img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
  }

  .artist-card:nth-child(1) .artist-placeholder img {
    object-position:
      center 25%;
  }

  .artist-card:nth-child(2) .artist-placeholder img {
    object-position:
      center 20%;
  }

  .artist-card:nth-child(3) .artist-placeholder img {
    object-position:
      center 50%;
  }

  .artist-info {
    position: relative;

    width: 100%;

    min-height: 0;

    padding:
      20px
      2px
      0;
  }

  .artist-info h3 {
    margin: 0;

    color: #f3f3f1;

    font-family: "Anton", sans-serif;

    font-size: 38px;

    font-weight: 400;

    line-height: .9;

    letter-spacing: -.02em;

    text-transform: uppercase;
  }

  .artist-meta {
    margin-top: 14px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;
  }

  .artist-info .artist-meta span {
    display: block;

    font-size: 9px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: .08em;

    text-transform: uppercase;
  }

  .artist-info .artist-role {
    color: #b8b8b8;
  }

  .artist-info .artist-location {
    color: #777;
  }

  .artist-info .artist-genre {
    color: var(--red);

    font-weight: 900;
  }

}


/* =========================================================
   ARTISTS — SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .artists {
    padding:
      50px
      18px
      65px;
  }

  .artists-grid {
    gap: 46px !important;
  }

  .artist-info h3 {
    font-size: 36px;
  }

  .artist-info .artist-meta span {
    font-size: 8px;
  }

}


/* =========================================================
   RELEASES — TRYHARD EDITORIAL
========================================================= */

.releases {
  --release-cover-size:
    clamp(300px, 26vw, 360px);

  position: relative;

  width: 100%;

  min-height: 500px;

  padding:
    42px
    28px
    42px;

  display: grid;

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

  column-gap: 36px;

  align-items: start;

  background: var(--white);
  color: #050505;

  border-top:
    1px solid rgba(0, 0, 0, .55);

  overflow: hidden;
}

.releases .section-number {
  top: 18px;
  left: 28px;

  color: var(--red);

  font-size: 10px;
  font-weight: 900;
}


/* =========================================================
   RELEASES LEFT TITLE
========================================================= */

.releases .section-title-block {
  grid-column: 1;

  min-width: 0;

  padding-top: 20px;
}

.releases .section-title-block > span {
  display: block;

  margin-bottom: 8px;

  color: #050505;

  font-size: 9px;
  font-weight: 900;

  line-height: 1;

  text-transform: uppercase;
}

.releases .section-title-block h2 {
  margin: 0;

  color: #050505;

  font-family: "Anton", sans-serif;

  font-size:
    clamp(58px, 5vw, 78px);

  font-weight: 400;

  line-height: .82;

  letter-spacing: -.03em;

  text-transform: uppercase;
}

.releases .section-title-block h2 span {
  color: var(--red);
}

.releases .section-title-block .outline-button {
  min-width: 145px;

  margin-top: 20px;

  padding:
    11px
    13px;

  border:
    1px solid #050505;

  color: #050505;

  font-size: 8px;
  font-weight: 900;

  background: transparent;
}

.releases .section-title-block .outline-button:hover {
  background: #050505;
  color: #fff;
}


/* =========================================================
   RELEASE CONTENT
========================================================= */

.release-content {
  grid-column: 2;

  position: relative;

  width: 100%;

  min-width: 0;

  display: grid;

  grid-template-columns:
    38px
    var(--release-cover-size)
    minmax(0, 1fr)
    38px;

  grid-template-rows:
    var(--release-cover-size)
    auto
    auto;

  column-gap: 24px;

  row-gap: 10px;

  align-items: center;
}


/* =========================================================
   RELEASE COVER
========================================================= */

.release-cover {
  grid-column: 2;
  grid-row: 1;

  position: relative;

  width:
    var(--release-cover-size);

  height:
    var(--release-cover-size);

  overflow: hidden;

  background: #111;
}

.release-cover img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* =========================================================
   RELEASE INFO
========================================================= */

.release-info {
  grid-column: 3;
  grid-row: 1;

  width: 100%;

  min-width: 0;

  align-self: start;

  padding-top: 28px;
}

.release-label {
  display: block;

  margin-bottom: 10px;

  color: var(--red);

  font-size: 9px;
  font-weight: 900;

  line-height: 1;

  text-transform: uppercase;
}

.release-info h3 {
  max-width: 650px;

  margin: 0;

  color: #050505;

  font-family: "Anton", sans-serif;

  font-size:
    clamp(42px, 4vw, 60px);

  font-weight: 400;

  line-height: .88;

  letter-spacing: -.025em;

  text-transform: uppercase;
}

.release-info p {
  margin-top: 12px;

  color: #050505;

  font-size: 8px;
  font-weight: 600;

  line-height: 1;

  text-transform: uppercase;
}


/* =========================================================
   PLATFORMS
========================================================= */

.platforms {
  margin-top: 25px;

  display: flex;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;
}

.platform-link {
  min-height: 36px;

  padding:
    8px
    12px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  border:
    1px solid rgba(0, 0, 0, .25);

  background: transparent;

  color: #050505;

  font-size: 8px;
  font-weight: 900;

  line-height: 1;

  white-space: nowrap;

  text-transform: uppercase;

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

.platform-link img {
  width: 15px;
  height: 15px;

  display: block;

  flex-shrink: 0;

  object-fit: contain;
}

.platform-link:hover {
  background: #050505;

  border-color: #050505;

  color: #fff;
}


/* =========================================================
   RELEASE ARROWS
========================================================= */

.release-prev,
.release-next {
  position: relative;

  width: 38px;
  height: 38px;

  padding: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 0;

  border-radius: 50%;

  background: #050505;

  color: #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 15px;
  font-weight: 400;

  line-height: 1;

  cursor: pointer;

  z-index: 5;

  transition:
    background .15s ease,
    color .15s ease;
}

.release-prev {
  grid-column: 1;
  grid-row: 1;
}

.release-next {
  grid-column: 4;
  grid-row: 1;
}

.release-prev:hover,
.release-next:hover {
  background: var(--red);

  color: #fff;
}


/* =========================================================
   RELEASE COUNTER
========================================================= */

.release-counter {
  grid-column: 3;
  grid-row: 2;

  width: 100%;

  margin-top: -54px;

  padding-bottom: 8px;

  border-bottom:
    1px solid rgba(0, 0, 0, .34);

  color: #050505;

  font-size: 8px;
  font-weight: 900;

  line-height: 1;

  text-align: left;
}

.release-counter span {
  color: var(--red);
}


/* =========================================================
   RELEASE THUMBNAILS
========================================================= */

.release-thumbs {
  grid-column: 3;
  grid-row: 3;

  width: 100%;

  display: flex;

  justify-content: flex-start;
  align-items: center;

  gap: 9px;

  margin: 0;

  overflow-x: auto;

  scrollbar-width: none;
}

.release-thumbs::-webkit-scrollbar {
  display: none;
}

.release-thumb {
  position: relative;

  width: 66px;
  height: 66px;

  padding: 0;

  flex:
    0
    0
    66px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

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

  background: #0a0a0a;

  color: #fff;

  cursor: pointer;

  transition:
    border-color .15s ease,
    color .15s ease;
}

.release-thumb img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.release-thumb span {
  font-size: 8px;
  font-weight: 900;

  line-height: 1;
}

.release-thumb:hover {
  border-color: var(--red);

  color: var(--red);
}

.release-thumb.active {
  border-color: var(--red);
}


/* =========================================================
   RELEASES TABLET
========================================================= */

@media (min-width: 901px) and (max-width: 1120px) {

  .releases {
    --release-cover-size:
      280px;

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

    column-gap: 26px;
  }

  .releases .section-title-block h2 {
    font-size: 58px;
  }

  .release-content {
    grid-template-columns:
      34px
      var(--release-cover-size)
      minmax(0, 1fr)
      34px;

    column-gap: 18px;
  }

  .release-prev,
  .release-next {
    width: 34px;
    height: 34px;
  }

  .release-info {
    padding-top: 18px;
  }

  .release-info h3 {
    font-size:
      clamp(34px, 4vw, 46px);
  }

  .platforms {
    margin-top: 20px;
  }

  .release-thumb {
    width: 56px;
    height: 56px;

    flex-basis: 56px;
  }

}


/* =========================================================
   RELEASES MOBILE
========================================================= */

@media (max-width: 900px) {

  .releases {
    --release-cover-size:
      min(100%, 560px);

    min-height: auto;

    padding:
      55px
      22px
      44px;

    display: block;

    border-top:
      1px solid rgba(0, 0, 0, .55);
  }

  .releases .section-number {
    top: 20px;
    left: 22px;
  }

  .releases .section-title-block {
    width: 100%;

    padding-top: 0;

    margin-bottom: 30px;
  }

  .releases .section-title-block h2 {
    font-size:
      clamp(64px, 16vw, 90px);

    line-height: .82;
  }

  .releases .section-title-block .outline-button {
    margin-top: 18px;
  }

  .release-content {
    width: 100%;

    display: grid;

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

    grid-template-rows:
      auto
      auto
      44px
      auto
      auto;

    column-gap: 12px;

    row-gap: 18px;
  }

  .release-cover {
    grid-column: 1 / -1;
    grid-row: 1;

    width: 100%;

    max-width: 560px;

    height: auto;

    aspect-ratio:
      1 / 1;

    justify-self: center;
  }

  .release-info {
    grid-column: 1 / -1;
    grid-row: 2;

    width: 100%;

    padding-top: 2px;
  }

  .release-label {
    margin-bottom: 9px;

    font-size: 9px;
  }

  .release-info h3 {
    max-width: 100%;

    font-size:
      clamp(42px, 11vw, 64px);

    line-height: .9;
  }

  .release-info p {
    margin-top: 12px;
  }

  .platforms {
    margin-top: 22px;
  }

  .platform-link {
    min-height: 38px;

    font-size: 8px;
  }

  .release-prev {
    grid-column: 1;
    grid-row: 3;

    justify-self: start;
  }

  .release-next {
    grid-column: 3;
    grid-row: 3;

    justify-self: end;
  }

  .release-prev,
  .release-next {
    width: 40px;
    height: 40px;
  }

  .release-counter {
    grid-column: 1 / -1;
    grid-row: 4;

    margin: 0;

    padding-bottom: 9px;

    font-size: 9px;
  }

  .release-thumbs {
    grid-column: 1 / -1;
    grid-row: 5;

    width: 100%;

    justify-content: flex-start;

    gap: 8px;
  }

  .release-thumb {
    width: 64px;
    height: 64px;

    flex-basis: 64px;
  }

}


/* =========================================================
   RELEASES SMALL MOBILE
========================================================= */

@media (max-width: 550px) {

  .releases {
    padding:
      52px
      18px
      38px;
  }

  .releases .section-number {
    left: 18px;
  }

  .releases .section-title-block {
    margin-bottom: 26px;
  }

  .releases .section-title-block h2 {
    font-size: 19vw;
  }

  .release-info h3 {
    font-size:
      clamp(40px, 12vw, 56px);
  }

  .release-thumb {
    width: 58px;
    height: 58px;

    flex-basis: 58px;
  }

}


/* =========================================================
   RELEASES NO HOVER
========================================================= */

@media (hover: none) {

  .release-prev:hover,
  .release-next:hover {
    background: #050505;
  }

  .platform-link:hover {
    background: transparent;

    border-color:
      rgba(0, 0, 0, .25);

    color: #050505;
  }

  .release-thumb:hover {
    border-color:
      rgba(0, 0, 0, .08);

    color: #fff;
  }

  .release-thumb.active:hover {
    border-color:
      var(--red);
  }

}


/* =========================================================
   WHAT WE DO — TRYHARD
   HORIZONTAL PREMIUM SERVICE MODULES
========================================================= */

.services {
  position: relative;

  width: 100%;
  min-height: auto;

  padding:
    52px
    28px
    48px;

  display: grid;

  grid-template-columns:
    minmax(250px, 300px)
    minmax(0, 1fr);

  column-gap:
    clamp(32px, 4vw, 64px);

  align-items: stretch;

  background:
    radial-gradient(
      circle at 72% 48%,
      rgba(255,23,23,.035) 0%,
      transparent 38%
    ),
    #050505;

  color: #f5f5f2;

  overflow: hidden;
}


/* =========================================================
   SECTION NUMBER
========================================================= */

.services .section-number {
  position: absolute;

  top: 22px;
  left: 28px;

  color: var(--red);

  font-family:
    "Inter",
    sans-serif;

  font-size: 10px;
  font-weight: 900;
  line-height: 1;

  z-index: 10;
}


/* =========================================================
   LEFT TITLE
========================================================= */

.services-title {
  position: relative;

  grid-column: 1;

  width: 100%;
  min-width: 0;

  padding:
    12px
    20px
    0
    0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;
  justify-content: flex-start;

  z-index: 5;
}


.services-title > span {
  display: block;

  margin-bottom: 14px;

  color:
    rgba(245,245,242,.62);

  font-family:
    "Inter",
    sans-serif;

  font-size: 9px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: .045em;

  text-transform: uppercase;
}


.services-title h2 {
  width: 100%;

  max-width: 300px;

  margin: 0;

  color: #f5f5f2;

  font-family:
    "Anton",
    sans-serif;

  font-size:
    clamp(42px, 3.8vw, 58px);

  font-weight: 400;

  line-height: .84;

  letter-spacing: -.025em;

  text-transform: uppercase;
}


.services-title h2 span {
  color: var(--red);
}


/* =========================================================
   GRID — ONE HORIZONTAL STRIP
========================================================= */

.services-grid {
  position: relative;

  grid-column: 2;

  width: 100%;
  min-width: 0;

  display: grid;

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

  align-items: stretch;

  border:
    1px solid rgba(245,245,242,.17);

  perspective: 1200px;

  perspective-origin:
    50% 50%;

  overflow: visible;
}


/* =========================================================
   SERVICE MODULE
========================================================= */

.service {
  position: relative;

  width: 100%;
  min-width: 0;
  min-height: 278px;

  padding:
    21px
    22px
    20px;

  display: flex;

  flex-direction: column;

  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(255,23,23,.03),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #080808 0%,
      #050505 58%,
      #030303 100%
    );

  border-right:
    1px solid rgba(245,245,242,.17);

  overflow: hidden;

  transform:
    translate3d(0,0,0);

  transform-style:
    preserve-3d;

  backface-visibility:
    hidden;

  opacity: 1;

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    background .45s ease,
    border-color .35s ease,
    box-shadow .55s cubic-bezier(.16,1,.3,1),
    opacity .35s ease,
    filter .35s ease;
}


.service:last-child {
  border-right: 0;
}


/* =========================================================
   RED LIGHT / ACTIVE EDGE
========================================================= */

.service::after {
  content: "";

  position: absolute;

  left: 12%;
  right: 12%;
  bottom: 0;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,23,23,.95),
      transparent
    );

  box-shadow:
    0 -2px 18px rgba(255,23,23,.35);

  opacity: 0;

  transform:
    scaleX(.35);

  transform-origin:
    center;

  transition:
    opacity .35s ease,
    transform .6s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   BACKGROUND NUMBERS
========================================================= */

.service::before {
  position: absolute;

  top: 4px;
  right: 12px;

  color:
    rgba(245,245,242,.035);

  font-family:
    "Anton",
    sans-serif;

  font-size:
    clamp(72px, 5.5vw, 94px);

  font-weight: 400;

  line-height: 1;

  letter-spacing: -.04em;

  pointer-events: none;

  z-index: 0;

  transform:
    translateZ(-8px);

  transition:
    color .45s ease,
    transform .55s cubic-bezier(.16,1,.3,1),
    opacity .35s ease;
}


.service:nth-child(1)::before {
  content: "01";
}


.service:nth-child(2)::before {
  content: "02";
}


.service:nth-child(3)::before {
  content: "03";
}


/* =========================================================
   ICON
========================================================= */

.service-icon {
  position: relative;

  z-index: 3;

  width: 76px;
  height: 76px;

  margin:
    12px
    0
    0;

  display: flex;

  align-items: center;
  justify-content: flex-start;

  transform:
    translateZ(18px);
}


.service-icon::before {
  content: "";

  position: absolute;

  left: 7px;
  top: 50%;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,23,23,.17),
      transparent 68%
    );

  filter:
    blur(12px);

  opacity: 0;

  transform:
    translateY(-50%)
    scale(.7);

  transition:
    opacity .45s ease,
    transform .55s cubic-bezier(.16,1,.3,1);
}


.service-icon img {
  position: relative;

  z-index: 2;

  display: block;

  width: 64px;
  height: 64px;

  max-width: 64px;
  max-height: 64px;

  object-fit: contain;
  object-position: center;

  filter: none;

  transform:
    translate3d(0,0,0);

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    filter .35s ease;
}


/* =========================================================
   TITLE
========================================================= */

.service h3 {
  position: relative;

  z-index: 3;

  width: 100%;

  max-width: 220px;

  margin:
    auto
    0
    0;

  color: #f5f5f2;

  font-family:
    "Anton",
    sans-serif;

  font-size:
    clamp(23px, 1.8vw, 30px);

  font-weight: 400;

  line-height: .88;

  letter-spacing: -.015em;

  text-transform: uppercase;

  transform:
    translateZ(22px);

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    color .3s ease;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.service p {
  position: relative;

  z-index: 3;

  width: 100%;

  max-width: 240px;

  margin-top: 10px;

  color:
    rgba(245,245,242,.43);

  font-family:
    "Inter",
    sans-serif;

  font-size: 8px;

  font-weight: 400;

  line-height: 1.5;

  transform:
    translateZ(14px);

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    color .3s ease;
}


/* =========================================================
   DESKTOP HOVER — 3D WITHOUT CHANGING SECTION HEIGHT
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .service:hover {
    z-index: 8;

    background:
      radial-gradient(
        circle at 20% 12%,
        rgba(255,23,23,.075),
        transparent 38%
      ),
      linear-gradient(
        145deg,
        #0d0d0d 0%,
        #070707 58%,
        #030303 100%
      );

    border-color:
      rgba(255,23,23,.38);

    box-shadow:
      0 20px 40px rgba(0,0,0,.34),
      0 0 24px rgba(255,23,23,.07),
      inset 0 1px 0 rgba(255,255,255,.045);

    transform:
      translate3d(0,-6px,22px)
      rotateX(1deg)
      scale(1.008);
  }


  .service:hover::after {
    opacity: 1;

    transform:
      scaleX(1);
  }


  .service:hover::before {
    color:
      rgba(255,23,23,.095);

    transform:
      translate3d(0,-5px,6px)
      scale(1.025);
  }


  .service:hover .service-icon::before {
    opacity: 1;

    transform:
      translateY(-50%)
      scale(1);
  }


  .service:hover .service-icon img {
    transform:
      translate3d(0,-5px,12px);

    filter:
      drop-shadow(
        0 7px 12px
        rgba(255,23,23,.10)
      );
  }


  .service:hover h3 {
    transform:
      translate3d(0,-3px,28px);
  }


  .service:hover p {
    color:
      rgba(245,245,242,.70);

    transform:
      translate3d(0,-2px,18px);
  }


  .services-grid:has(.service:hover)
  .service:not(:hover) {
    opacity: .56;

    filter:
      saturate(.70)
      brightness(.80);
  }

}


/* =========================================================
   TABLET / SMALL DESKTOP
   STILL HORIZONTAL
========================================================= */

@media (max-width: 1100px) {

  .services {
    grid-template-columns:
      minmax(205px, 235px)
      minmax(0, 1fr);

    column-gap: 26px;
  }


  .services-title h2 {
    max-width: 235px;

    font-size:
      clamp(38px, 4vw, 48px);
  }


  .service {
    min-height: 264px;

    padding:
      19px
      17px
      17px;
  }


  .service-icon {
    width: 64px;
    height: 64px;
  }


  .service-icon img {
    width: 56px;
    height: 56px;

    max-width: 56px;
    max-height: 56px;
  }


  .service h3 {
    font-size:
      clamp(21px, 2.2vw, 27px);
  }

}


/* =========================================================
   TABLET PORTRAIT
   TITLE + HORIZONTAL SWIPE CARDS
========================================================= */

@media (max-width: 850px) {

  .services {
    grid-template-columns:
      minmax(175px, 200px)
      minmax(0, 1fr);

    column-gap: 20px;

    padding:
      52px
      22px
      46px;
  }


  .services .section-number {
    left: 22px;
  }


  .services-title {
    padding-right: 8px;
  }


  .services-title h2 {
    max-width: 195px;

    font-size:
      clamp(34px, 5vw, 44px);
  }


  .services-grid {
    grid-template-columns:
      repeat(3, minmax(210px, 1fr));

    overflow-x: auto;
    overflow-y: visible;

    scroll-snap-type:
      x proximity;

    scrollbar-width:
      none;
  }


  .services-grid::-webkit-scrollbar {
    display: none;
  }


  .service {
    min-height: 250px;

    scroll-snap-align:
      start;
  }

}


/* =========================================================
   MOBILE
   KEEP VERTICAL HEIGHT LOW:
   TITLE ABOVE + CARDS IN ONE HORIZONTAL SWIPE ROW
========================================================= */

@media (max-width: 700px) {

  .services {
    display: block;

    padding:
      54px
      18px
      48px;
  }


  .services .section-number {
    top: 21px;
    left: 18px;
  }


  .services-title {
    width: 100%;

    padding:
      0
      0
      24px;
  }


  .services-title > span {
    margin-bottom: 10px;
  }


  .services-title h2 {
    max-width: 420px;

    font-size:
      clamp(48px, 13vw, 70px);

    line-height: .82;
  }


  .services-grid {
    width:
      calc(100% + 18px);

    grid-template-columns:
      repeat(3, minmax(225px, 74vw));

    margin-right: -18px;

    border-right: 0;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-inline:
      contain;

    scroll-snap-type:
      x mandatory;

    -webkit-overflow-scrolling:
      touch;
  }


  .service {
    min-height: 220px;

    padding:
      18px
      17px
      17px;

    scroll-snap-align:
      start;
  }


  .service-icon {
    width: 58px;
    height: 58px;

    margin-top: 3px;
  }


  .service-icon img {
    width: 52px;
    height: 52px;

    max-width: 52px;
    max-height: 52px;
  }


  .service h3 {
    max-width: 210px;

    font-size:
      clamp(25px, 7vw, 34px);
  }


  .service p {
    max-width: 220px;

    font-size: 8px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .services-title h2 {
    font-size:
      13.5vw;
  }


  .services-grid {
    grid-template-columns:
      repeat(3, minmax(218px, 78vw));
  }


  .service {
    min-height: 210px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .service,
  .service::before,
  .service::after,
  .service-icon::before,
  .service-icon img,
  .service h3,
  .service p {
    transition:
      none !important;

    transform:
      none !important;
  }

}

/* =========================================================
   WORLD
========================================================= */

.world {
  min-height: 430px;

  padding:
    70px
    28px
    55px;

  display: grid;

  grid-template-columns:
    minmax(220px, 20%)
    minmax(0, 80%);

  column-gap: 32px;

  align-items: start;

  background: var(--white);

  color: #050505;
}

.world-title {
  grid-column: 1;

  min-width: 0;

  padding-top: 0;
}

.world-title > span {
  display: block;

  margin-bottom: 8px;

  font-size: 10px;
  font-weight: 900;

  line-height: 1;
}

.world-title h2 {
  margin: 0;

  font-family:
    "Anton",
    sans-serif;

  font-size:
    clamp(54px, 5.2vw, 82px);

  line-height: .82;

  letter-spacing: -.025em;

  text-transform: uppercase;
}

.world-title h2 span {
  color: var(--red);
}

.world-title .outline-button {
  min-width: 145px;

  margin-top: 28px;

  padding:
    12px
    14px;

  font-size: 9px;

  border:
    1px solid #050505;

  color: #050505;
}

.world-title .outline-button:hover {
  background: #050505;

  color: #fff;
}

.world-gallery {
  grid-column: 2;

  width: 100%;

  display: grid;

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

  gap: 3px;

  align-self: start;
}

.world-photo {
  position: relative;

  width: 100%;

  aspect-ratio:
    4 / 7;

  min-height: 280px;

  max-height: 410px;

  overflow: hidden;

  background: #d8d8d5;
}

.world-photo img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  filter:
    grayscale(100%)
    contrast(1.12);

  transition:
    filter .35s ease,
    transform .45s ease;
}

.world-photo:hover img {
  filter:
    grayscale(0%)
    contrast(1.05);

  transform:
    scale(1.025);
}


/* =========================================================
   JOIN THE TEAM — TRYHARD COMPACT
========================================================= */

.join-section {
  position: relative;

  width: 100%;
  min-height: 420px;

  padding:
    22px
    28px
    26px;

  display: grid;

  grid-template-rows:
    auto
    1fr
    auto;

  background: #050505;
  color: #f5f5f2;

  overflow: hidden;

  isolation: isolate;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.join-section::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    url("assets/plataform/FINALBSAS.PNG");

  background-repeat: no-repeat;

  background-size: cover;

  background-position:
    60% 52%;

  filter:
    grayscale(100%)
    contrast(1.18)
    brightness(.92);

  opacity: .72;

  z-index: -3;
}


/* =========================================================
   DARK MASK
========================================================= */

.join-section::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5,5,5,.98) 0%,
      rgba(5,5,5,.94) 19%,
      rgba(5,5,5,.72) 38%,
      rgba(5,5,5,.22) 61%,
      rgba(5,5,5,.30) 77%,
      rgba(5,5,5,.70) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5,5,5,.92) 0%,
      rgba(5,5,5,.18) 36%,
      rgba(5,5,5,.15) 70%,
      rgba(5,5,5,.55) 100%
    );

  z-index: -2;

  pointer-events: none;
}


/* =========================================================
   SECTION NUMBER
   IGUAL QUE EL RESTO DE LA WEB
========================================================= */

.join-section .section-number {
  position: absolute;

  top: 22px;
  left: 28px;

  color: #ff1717;

  font-family:
    "Inter",
    sans-serif;

  font-size: 10px;

  font-weight: 900;

  line-height: 1;

  z-index: 10;
}


/* =========================================================
   HEADER
========================================================= */

.join-header {
  position: relative;

  z-index: 5;

  width: 100%;

  min-height: 38px;

  padding:
    0
    0
    12px
    32px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  border-bottom:
    1px solid rgba(245,245,242,.18);
}


/* LABEL */

.join-label {
  color: #f5f5f2;

  font-family:
    "Inter",
    sans-serif;

  font-size: 9px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: .025em;

  text-transform: uppercase;
}


/* LOCATION */

.join-location {
  color:
    rgba(245,245,242,.46);

  font-family:
    "Inter",
    sans-serif;

  font-size: 7px;

  font-weight: 600;

  line-height: 1.45;

  letter-spacing: .06em;

  text-align: right;

  text-transform: uppercase;
}


/* =========================================================
   MAIN
========================================================= */

.join-main {
  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;

  min-height: 0;

  padding:
    28px
    0
    25px;
}


/* =========================================================
   TITLE
========================================================= */

.join-main h2 {
  width: max-content;

  max-width: 560px;

  margin: 0;

  color: #f5f5f2;

  font-family:
    "Anton",
    sans-serif;

  font-size:
    clamp(58px, 6vw, 88px);

  font-weight: 400;

  line-height: .80;

  letter-spacing: -.032em;

  text-transform: uppercase;
}


.join-main h2 span {
  color: #ff1717;
}


/* =========================================================
   BOTTOM
========================================================= */

.join-footer {
  position: relative;

  z-index: 5;

  width: 100%;

  padding-top: 16px;

  display: grid;

  grid-template-columns:
    minmax(260px, 390px)
    minmax(240px, 1fr);

  gap:
    clamp(35px, 7vw, 100px);

  align-items: end;

  border-top:
    1px solid rgba(245,245,242,.18);
}


/* =========================================================
   TEXT
========================================================= */

.join-footer p {
  max-width: 360px;

  margin: 0;

  color:
    rgba(245,245,242,.64);

  font-family:
    "Inter",
    sans-serif;

  font-size: 9px;

  font-weight: 400;

  line-height: 1.5;
}


/* =========================================================
   CTA
========================================================= */

.join-cta {
  position: relative;

  justify-self: end;

  width: 300px;

  min-height: 48px;

  padding:
    0
    15px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  overflow: hidden;

  border:
    1px solid #ff1717;

  background: #ff1717;

  color: #050505;

  font-family:
    "Inter",
    sans-serif;

  font-size: 8px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: .035em;

  text-transform: uppercase;

  transition:
    color .22s ease;
}


/* =========================================================
   CTA HOVER
========================================================= */

.join-cta::before {
  content: "";

  position: absolute;

  inset: 0;

  background: #050505;

  transform:
    translateX(-101%);

  transition:
    transform .35s cubic-bezier(.16,1,.3,1);

  z-index: 0;
}


.join-cta > span {
  position: relative;

  z-index: 2;
}


.join-cta-arrow {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 15px;

  font-weight: 400;

  transition:
    transform .28s cubic-bezier(.16,1,.3,1);
}


.join-cta:hover {
  color: #f5f5f2;
}


.join-cta:hover::before {
  transform:
    translateX(0);
}


.join-cta:hover .join-cta-arrow {
  transform:
    translate(4px, -4px);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

  .join-section {
    min-height: 440px;
  }


  .join-main h2 {
    font-size: 94px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .join-section {
    min-height: 430px;

    padding:
      22px
      22px
      26px;
  }


  .join-section .section-number {
    left: 22px;
  }


  .join-header {
    padding-left: 31px;
  }


  .join-main h2 {
    font-size:
      clamp(56px, 9vw, 76px);
  }


  .join-footer {
    grid-template-columns:
      minmax(230px, 1fr)
      minmax(230px, 280px);

    gap: 30px;
  }


  .join-cta {
    width: 100%;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .join-section {
    min-height: auto;

    padding:
      20px
      18px
      24px;
  }


  .join-section .section-number {
    top: 20px;
    left: 18px;
  }


  .join-section::before {
    background-position:
      62% center;

    opacity: .58;
  }


  .join-section::after {
    background:
      linear-gradient(
        180deg,
        rgba(5,5,5,.78) 0%,
        rgba(5,5,5,.32) 35%,
        rgba(5,5,5,.55) 65%,
        #050505 100%
      ),
      linear-gradient(
        90deg,
        rgba(5,5,5,.80),
        rgba(5,5,5,.28)
      );
  }


  .join-header {
    padding:
      0
      0
      12px
      29px;
  }


  .join-location {
    font-size: 6px;
  }


  .join-main {
    padding:
      38px
      0
      38px;
  }


  .join-main h2 {
    max-width: 100%;

    font-size:
      clamp(54px, 15vw, 72px);

    line-height: .80;
  }


  .join-footer {
    display: block;

    padding-top: 16px;
  }


  .join-footer p {
    max-width: 290px;

    font-size: 8px;
  }


  .join-cta {
    width: 100%;

    min-height: 50px;

    margin-top: 22px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .join-location {
    display: none;
  }


  .join-main h2 {
    font-size:
      clamp(50px, 14.5vw, 64px);
  }

}


/* =========================================================
   TOUCH
========================================================= */

@media (hover: none) {

  .join-cta:hover {
    color: #050505;
  }


  .join-cta:hover::before {
    transform:
      translateX(-101%);
  }


  .join-cta:hover .join-cta-arrow {
    transform: none;
  }

}
/* =========================================================
   FOOTER
========================================================= */

.footer {
  min-height: 64px;

  padding:
    0
    28px;

  display: grid;

  grid-template-columns:
  auto
  1fr
  1fr
  auto;

  column-gap: 40px;

  align-items: center;

  background: #050505;

  border-top:
    1px solid rgba(255,255,255,.14);

  color: #fff;

  font-size: 9px;

  font-weight: 800;

  text-transform: uppercase;
}
.footer > :nth-child(2),
.footer > :nth-child(3) {
  justify-self: center;
}

.footer img {
  width: 82px;

  height: auto;
}

.footer a,
.footer span {
  transition:
    color .2s ease;
}

.footer a:hover {
  color: var(--red);
}

.footer > :last-child {
  justify-self: end;

  white-space: nowrap;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {
  display: none;
}


/* =========================================================
   GLOBAL TABLET
========================================================= */

@media (max-width: 1100px) {

  .about {
    grid-template-columns:
      18%
      25%
      37%
      20%;
  }

  .about-image {
    height: 330px;
  }

  .about-location {
    height: 330px;
  }

}


/* =========================================================
   GLOBAL MOBILE
========================================================= */

@media (max-width: 900px) {

  .desktop-nav,
  .navbar-actions {
    display: none;
  }

  .navbar {
    justify-content: flex-start;
  }

  .navbar .logo {
    flex: 0 0 auto;
    margin-right: auto;
  }

  .mobile-language-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 58px;
    min-width: 58px;
    height: 28px;

    margin-left: 14px;
    margin-right: 14px;

    flex: 0 0 58px;
    white-space: nowrap;
  }

  .mobile-language-switch .language-button {
    width: 20px;
    min-width: 20px;
    text-align: center;
  }

  .mobile-language-switch .language-divider {
    width: 6px;
    min-width: 6px;
    text-align: center;
  }

  .menu-button {
    display: block;

    width: 42px;
    min-width: 42px;
    flex: 0 0 42px;

    padding: 0;

    background: none;

    border: 0;

    color: #fff;

    font-size: 10px;

    font-weight: 900;

    text-align: right;
  }

  .mobile-menu {
    position: fixed;

    top: 70px;
    left: 0;

    width: 100%;

    height:
      calc(100dvh - 70px);

    padding:
      30px
      28px;

    background: #050505;

    flex-direction: column;

    justify-content: space-between;

    overflow-y: auto;

    z-index: 200;
  }

  .mobile-menu.active {
    display: flex;
  }

  .mobile-nav {
    display: flex;

    flex-direction: column;
  }

  .mobile-nav a {
    display: block;

    padding:
      13px
      0;

    border-bottom:
      1px solid rgba(255,255,255,.12);

    font-family:
      "Anton",
      sans-serif;

    font-size:
      clamp(34px, 10vw, 52px);

    line-height: 1;

    text-transform: uppercase;

    transition:
      color .2s ease;
  }

  .mobile-nav a:hover {
    color: var(--red);
  }

  .mobile-join {
    width: 100%;

    margin-top: 30px;

    padding:
      16px
      18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: var(--red);

    color: #fff;

    font-size: 11px;

    font-weight: 900;
  }

  .hero-copy h1 {
    font-size:
      clamp(65px, 15vw, 110px);
  }

  .hero-side-label {
    display: none;
  }

  .about {
    grid-template-columns:
      1fr;

    gap: 35px;

    padding:
      80px
      28px;
  }

  .about-title {
    margin: 0;

    transform: none;
  }

  .about-image {
    width: 100%;

    order: 3;
  }

  /*
    SERVICES NO ESTÁ ACÁ.
    TIENE SU PROPIO RESPONSIVE.
  */

  /*
    JOIN NO ESTÁ ACÁ.
    TIENE SU PROPIO RESPONSIVE.
  */

  .artists,
  .world {
    grid-template-columns:
      1fr;
  }

  .artists-grid {
    grid-column: auto;

    grid-template-columns:
      repeat(2, 1fr);
  }

  .world-gallery {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .footer {
    padding:
      20px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 550px) {

  .navbar {
    padding:
      0
      18px;
  }

  .mobile-language-switch {
    width: 56px;
    min-width: 56px;
    flex-basis: 56px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .menu-button {
    width: 40px;
    min-width: 40px;
    flex-basis: 40px;
  }

  .hero-content {
    padding-left: 18px;

    padding-right: 18px;
  }

  .hero-copy {
    left: 18px;

    bottom: 35px;
  }

  .hero-copy h1 {
    font-size: 18vw;

    line-height: .9;
  }

  .about {
    padding:
      70px
      18px
      0;

    gap: 35px;

    grid-template-columns:
      1fr;
  }

  .about-title {
    margin: 0;

    transform: none;
  }

  .about-title h2 {
    font-size: 19vw;

    line-height: .82;
  }

  .about-image {
    position: relative;

    width: 100%;

    height: auto;

    min-height: 1050px;

    margin-top: 10px;

    padding:
      400px
      28px
      60px;

    overflow: hidden;

    background: #050505;

    border-radius:
      24px
      24px
      0
      0;

    order: 3;
  }

  .about-image > img {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 620px;

    object-fit: cover;

    object-position:
      center
      top;

    filter:
      grayscale(100%);

    transform: none;

    z-index: 0;
  }

  .about-image:hover > img {
    transform: none;
  }

  .about-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.10) 25%,
        rgba(0,0,0,.55) 42%,
        rgba(0,0,0,.92) 58%,
        #050505 72%,
        #050505 100%
      );

    z-index: 1;

    pointer-events: none;
  }

  .about-image .about-text {
    position: relative;

    top: auto;
    left: auto;
    right: auto;

    width: 100%;

    padding: 0;

    transform: none;

    color: #fff;

    z-index: 3;
  }

  .about-image .about-text h3 {
    margin:
      0
      0
      30px;

    color: #fff;

    font-size: 34px;

    line-height: .92;
  }

  .about-image .about-text h3 span {
    color: var(--red);
  }

  .about-image .about-text p {
    width: 62%;

    max-width: none;

    margin-top: 25px;

    color: #fff;

    font-size: 13px;

    line-height: 1.55;
  }

  .about-location {
    position: absolute;

    top: 57%;

    right: 12px;

    left: auto;
    bottom: auto;

    width: 30%;

    height: auto;

    transform: none;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 22px;

    padding: 0;

    background: transparent;

    z-index: 5;
  }

  .about-location .globe {
    width: 62px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;
  }

  .about-location .globe img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    filter:
      brightness(0)
      invert(1);

    opacity: 1;
  }

  .about-location .location-text {
    color: #fff;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 900;

    text-transform: uppercase;
  }

  .about-location .location-red {
    color: var(--red);

    font-size: 11px;

    line-height: 1.2;

    font-weight: 900;

    text-transform: uppercase;
  }

  .artists-grid {
    grid-template-columns:
      1fr !important;
  }

  .world-gallery {
    grid-template-columns:
      1fr
      1fr;
  }

}


/* =========================================================
   ARROWS
========================================================= */

.arrow {
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-style: normal;

  font-weight: 400;

  line-height: 1;
}


/* =========================================================
   LANGUAGE — LAYOUT PROTECTION
========================================================= */

.hero-title-main > span {
  display: inline-block;

  white-space: nowrap;
}

.hero-title-main .hero-title-white {
  color: var(--white);
}

.hero-title-main .hero-title-red {
  color: var(--red);
}

.hero-copy > p {
  white-space: nowrap;
}

.outline-button [data-i18n] {
  white-space: nowrap;
}


/* =========================================================
   LANGUAGE — NAVBAR PROTECTION
========================================================= */

@media (min-width: 1101px) {

  .desktop-nav {
    position: absolute;

    left: 50%;

    transform:
      translateX(-50%);

    display: flex;

    align-items: center;

    gap: 38px;

    white-space: nowrap;
  }

}


/* =========================================================
   RELEASES — DYNAMIC CATALOG (STABLE)
   Keeps the original editorial geometry intact.
========================================================= */

/* Filters live INSIDE .release-content, so they do not create
   a new row in the outer .releases grid. */
.release-filters {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  position: relative;
  z-index: 8;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 2px 0 10px;
  border-bottom: 1px solid rgba(0,0,0,.22);
}

.release-filter {
  position: relative;
  padding: 0 0 8px;
  border: 0;
  background: transparent;
  color: rgba(5,5,5,.42);
  font-family: "Inter", sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease;
}

.release-filter > span {
  margin-left: 5px;
  color: rgba(5,5,5,.30);
  font-size: 7px;
}

.release-filter::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width .25s cubic-bezier(.16,1,.3,1);
}

.release-filter:hover,
.release-filter.active {
  color: var(--red);
}

.release-filter.active::after {
  width: 100%;
}

.release-filter.active > span {
  color: var(--red);
}

/* Same cell as filters, but pushed down just enough to clear them. */
.release-info {
  padding-top: 60px;
}

.release-secondary {
  margin-top: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(5,5,5,.48);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.release-separator {
  color: var(--red);
}

.release-date::before {
  content: none !important;
}

.release-counter .release-total {
  color: #050505;
}

/* Buttons are generated by JS. */
.platforms:empty {
  display: none;
}

.platform-link.platform-link--text-only {
  padding-left: 14px;
}

/* Keep switching subtle; do not move the geometry. */
.release-cover img,
.release-info {
  transition:
    opacity .18s ease,
    transform .26s cubic-bezier(.16,1,.3,1);
}

.release-content.is-switching .release-cover img {
  opacity: .18;
  transform: scale(.992);
}

.release-content.is-switching .release-info {
  opacity: .15;
  transform: translateY(4px);
}

@media (min-width: 901px) and (max-width: 1120px) {
  .release-info {
    padding-top: 56px;
  }

  .release-filters {
    gap: 18px;
  }
}

@media (max-width: 900px) {
  .release-content {
    grid-template-rows:
      auto
      auto
      auto
      44px
      auto
      auto;
  }

  .release-cover {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .release-filters {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    padding: 0 0 10px;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .release-filters::-webkit-scrollbar {
    display: none;
  }

  .release-filter {
    flex: 0 0 auto;
  }

  .release-info {
    grid-column: 1 / -1;
    grid-row: 3;
    padding-top: 0;
  }

  .release-prev {
    grid-column: 1;
    grid-row: 4;
  }

  .release-next {
    grid-column: 3;
    grid-row: 4;
  }

  .release-counter {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: 0;
  }

  .release-thumbs {
    grid-column: 1 / -1;
    grid-row: 6;
  }

  .release-secondary {
    flex-wrap: wrap;
    line-height: 1.35;
  }
}
/* =========================================================
   RELEASES — RESTORE ORIGINAL ARROW POSITION
========================================================= */

@media (min-width: 901px) {

  .release-prev {
    grid-column: 1;
    grid-row: 1;

    justify-self: center;
    align-self: center;

    transform: none;

    z-index: 5;
  }

}
/* =========================================================
   RELEASES — SEPARAR CARRUSEL DEL TÍTULO
========================================================= */

@media (min-width: 901px) {

  .releases {
    grid-template-columns:
      220px
      minmax(0, 1fr);

    column-gap: 48px;
  }

}
/* =========================================================
   CATALOG — SEPARAR NÚMERO DE PORTADA
========================================================= */

@media (min-width: 1181px) {

  .catalog-release {
    grid-template-columns:
      175px
      118px
      minmax(260px, 1.25fr)
      minmax(220px, .9fr)
      210px
      90px;

    column-gap: 24px;
  }

  .catalog-release-number {
    font-size: clamp(90px, 7.5vw, 125px);
    white-space: nowrap;
  }

}
/* =========================================================
   HERO 3D LAYER
========================================================= */

.hero-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}
/* =========================================================
   TRYHARD — 3D BUTTON SYSTEM FINAL
========================================================= */


/* =========================================================
   HERO — DISCOVER TRYHARD
========================================================= */

.hero-copy .outline-button {
  position: relative;

  background:
    linear-gradient(
      180deg,
      #202024 0%,
      #111114 40%,
      #070708 72%,
      #020203 100%
    );

  border: 1px solid #ff1717;

  color: #ffffff;

  box-shadow:
    0 5px 0 #650007,
    0 9px 18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -2px 0 rgba(255,23,23,0.15);

  text-shadow:
    0 1px 2px rgba(0,0,0,.45);

  transform: translateY(0);

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}


/* DISCOVER — HOVER */

.hero-copy .outline-button:hover {
  background:
    linear-gradient(
      180deg,
      #29292e 0%,
      #151518 42%,
      #09090b 72%,
      #030304 100%
    );

  border-color: #ff3838;

  color: #ffffff;

  box-shadow:
    0 5px 0 #810009,
    0 10px 22px rgba(0,0,0,.60),
    0 0 13px rgba(255,23,23,.13),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 0 rgba(255,23,23,.20);

  transform: translateY(0);
}


/* DISCOVER — CLICK */

.hero-copy .outline-button:active {
  transform: translateY(0);

  box-shadow:
    0 3px 0 #650007,
    0 6px 14px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.20);
}


/* =========================================================
   NAVBAR — JOIN THE TEAM
========================================================= */

.navbar .join-button {
  position: relative;

  background:
    linear-gradient(
      180deg,
      #ff4149 0%,
      #ee121d 32%,
      #bd050f 65%,
      #760006 100%
    );

  border: 1px solid #ff555c;

  color: #ffffff;

  box-shadow:
    0 5px 0 #410004,
    0 8px 18px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -2px 0 rgba(70,0,5,.65);

  text-shadow:
    0 1px 2px rgba(0,0,0,.38);

  transform: translateY(0);

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}


/* NAVBAR JOIN — HOVER */

.navbar .join-button:hover {
  background:
    linear-gradient(
      180deg,
      #ff5960 0%,
      #ff1c27 32%,
      #cf0712 66%,
      #850007 100%
    );

  border-color: #ff7379;

  color: #ffffff;

  box-shadow:
    0 5px 0 #520005,
    0 9px 22px rgba(0,0,0,.55),
    0 0 14px rgba(255,23,23,.18),
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -2px 0 rgba(70,0,5,.65);

  transform: translateY(0);
}


/* =========================================================
   JOIN SECTION — BOTÓN GRANDE DE ABAJO
========================================================= */

.join-section .join-cta {
  position: relative;

  overflow: visible;

  background:
    linear-gradient(
      180deg,
      #ff4149 0%,
      #ee121d 32%,
      #bd050f 65%,
      #760006 100%
    );

  border: 1px solid #ff555c;

  color: #ffffff;

  box-shadow:
    0 6px 0 #410004,
    0 11px 24px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -2px 0 rgba(70,0,5,.65);

  text-shadow:
    0 1px 2px rgba(0,0,0,.40);

  transform: translateY(0);

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}


/*
  IMPORTANTE:
  anulamos la capa negra animada original
*/

.join-section .join-cta::before {
  display: none;
}


/* JOIN GRANDE — HOVER */

.join-section .join-cta:hover {
  background:
    linear-gradient(
      180deg,
      #ff5960 0%,
      #ff1c27 32%,
      #cf0712 66%,
      #850007 100%
    );

  border-color: #ff7379;

  color: #ffffff;

  box-shadow:
    0 6px 0 #520005,
    0 12px 28px rgba(0,0,0,.58),
    0 0 16px rgba(255,23,23,.16),
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -2px 0 rgba(70,0,5,.65);

  transform: translateY(0);
}


/* La flecha tampoco se mueve */

.join-section .join-cta:hover .join-cta-arrow {
  transform: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .hero-copy .outline-button {
    box-shadow:
      0 4px 0 #650007,
      0 7px 15px rgba(0,0,0,.50),
      inset 0 1px 0 rgba(255,255,255,.20);
  }

  .navbar .join-button {
    box-shadow:
      0 4px 0 #410004,
      0 7px 15px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.42);
  }

  .join-section .join-cta {
    box-shadow:
      0 5px 0 #410004,
      0 9px 20px rgba(0,0,0,.50),
      inset 0 1px 0 rgba(255,255,255,.45);
  }

}
/* =========================================================
   AGREGAR AL FINAL DE style.css
   Suaviza el regreso del tilt 3D en las artist cards
   (el JS ya rota en tiempo real al mover el mouse;
   esto solo pule la transición cuando el mouse sale)
========================================================= */
 
.artist-placeholder {
  transition:
    transform .35s cubic-bezier(.16, 1, .3, 1),
    filter .45s ease;
 
  will-change: transform;
}
/* =====================================================
   TOUCH / SWIPE — ARTISTS + RELEASES
===================================================== */

.artists-3d-stage,
.coverflow--releases {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.artists-3d-stage:active,
.coverflow--releases:active {
  cursor: grabbing;
}

.artists-3d-stage img,
.coverflow--releases img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
/* =====================================================
   MOBILE — OCULTAR TH 3D
===================================================== */

@media (max-width: 700px) {

  .hero-3d-canvas {
    display: none !important;
  }

}

/* =========================================================
   ABOUT — LIQUID ETHER
   LIQUID ORIGINAL / COLORES TRYHARD
========================================================= */

.about-cinematic-title {
  position: relative;
  overflow: hidden;
}

#about-liquid-ether {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;

  overflow: hidden;
}

#about-liquid-ether canvas {
  width: 100%;
  height: 100%;

  display: block;
}

/* TEXTO SIEMPRE POR ENCIMA DEL LIQUID */

.about-cinematic-title > span,
.about-cinematic-title > h2 {
  position: relative;
  z-index: 2;
}
#about-liquid-ether .liquid-ether-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* =========================================================
   TRYHARD INTRO — METALLIC / 2 SECONDS
========================================================= */

#tryhard-intro {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100svh;

  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #050505;

  pointer-events: none;

  animation:
    tryhard-intro-exit 2s
    cubic-bezier(.76, 0, .24, 1)
    forwards;
}


/* =========================================================
   LOGO METALIZADO
========================================================= */

.tryhard-intro-metal-logo {
  width: min(560px, 62vw);

  aspect-ratio: 4 / 1;

  background:
    linear-gradient(
      115deg,
      #393939 0%,
      #777777 14%,
      #eeeeee 30%,
      #696969 44%,
      #ffffff 55%,
      #747474 68%,
      #d7d7d7 83%,
      #404040 100%
    );

  background-size: 220% 100%;

  -webkit-mask-image:
    url("assets/logos th/tryhard_logo_blanco.png");

  mask-image:
    url("assets/logos th/tryhard_logo_blanco.png");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  filter:
    drop-shadow(
      0 12px 28px
      rgba(0,0,0,.75)
    );

  animation:
    tryhard-metal-shine 1.7s
    ease-in-out
    forwards;
}


/* =========================================================
   MOVIMIENTO DEL METAL
========================================================= */

@keyframes tryhard-metal-shine {

  0% {
    background-position: 100% center;
    opacity: .72;
    transform: scale(.985);
  }

  25% {
    opacity: 1;
  }

  100% {
    background-position: 0% center;
    opacity: 1;
    transform: scale(1);
  }

}


/* =========================================================
   SALIDA DE LA INTRO
========================================================= */

@keyframes tryhard-intro-exit {

  0%,
  72% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .tryhard-intro-metal-logo {
    width: min(82vw, 440px);
  }

}
/* =========================================================
   SPLASH CURSOR
========================================================= */

#splash-cursor {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 50;

  pointer-events: none;

  overflow: hidden;
}

#splash-fluid {
  width: 100vw;
  height: 100vh;

  display: block;

  pointer-events: none;
}
/* =========================================================
   TRYHARD — UNIFIED BACKGROUND
   Sections 02 → 07
========================================================= */

/* =========================================================
   BACKGROUND GENERAL
========================================================= */

#about,
#artists,
#releases,
#services,
#world,
#shows {
  background: #050505 !important;
  color: #f5f5f2 !important;
}


/* =========================================================
   02 — ABOUT
========================================================= */

#about {
  background: #050505 !important;
  color: #f5f5f2 !important;
}

#about .about-cinematic-title > span,
#about .about-cinematic-title h2,
#about .about-cinematic-manifesto,
#about .about-cinematic-body p {
  color: #f5f5f2 !important;
}

#about .about-cinematic-manifesto span {
  color: var(--red) !important;
}


/* =========================================================
   04 — RELEASES
========================================================= */

#releases {
  background: #050505 !important;
  color: #f5f5f2 !important;
}

#releases .section-title-block > span,
#releases .section-title-block h2,
#releases .release-info h3,
#releases .release-info p {
  color: #f5f5f2 !important;
}

#releases .section-title-block h2 span,
#releases .release-label {
  color: var(--red) !important;
}


/* FILTERS */

#releases .release-filters {
  border-bottom-color:
    rgba(255,255,255,.18) !important;
}

#releases .release-filter {
  color:
    rgba(255,255,255,.48) !important;
}

#releases .release-filter > span {
  color:
    rgba(255,255,255,.34) !important;
}

#releases .release-filter:hover,
#releases .release-filter.active,
#releases .release-filter.active > span {
  color: var(--red) !important;
}


/* SECONDARY INFO */

#releases .release-secondary {
  color:
    rgba(255,255,255,.52) !important;
}

#releases .release-counter {
  color: #f5f5f2 !important;

  border-bottom-color:
    rgba(255,255,255,.22) !important;
}

#releases .release-counter .release-total {
  color: #f5f5f2 !important;
}


/* PLATFORM BUTTONS */

#releases .platform-link {
  color: #f5f5f2 !important;

  border-color:
    rgba(255,255,255,.28) !important;

  background:
    transparent !important;
}

#releases .platform-link:hover {
  background:
    #f5f5f2 !important;

  border-color:
    #f5f5f2 !important;

  color:
    #050505 !important;
}


/* RELEASE BUTTON */

#releases .dark-button {
  color: #f5f5f2 !important;

  border-color:
    #f5f5f2 !important;

  background:
    transparent !important;
}

#releases .dark-button:hover {
  color: #050505 !important;

  background:
    #f5f5f2 !important;
}


/* =========================================================
   06 — WORLD
========================================================= */

#world {
  background: #050505 !important;
  color: #f5f5f2 !important;
}

#world .world-title > span,
#world .world-title h2 {
  color: #f5f5f2 !important;
}

#world .world-title h2 span {
  color: var(--red) !important;
}

#world .world-title .outline-button {
  color: #f5f5f2 !important;

  border-color:
    #f5f5f2 !important;

  background:
    transparent !important;
}

#world .world-title .outline-button:hover {
  background:
    #f5f5f2 !important;

  color:
    #050505 !important;
}


/* =========================================================
   TRANSITIONS BETWEEN SECTIONS
========================================================= */

#about,
#artists,
#releases,
#services,
#world,
#shows {
  border-top-color:
    rgba(255,255,255,.08) !important;

  border-bottom-color:
    rgba(255,255,255,.08) !important;
}
/* =========================================================
   DIVISORES ENTRE SECCIONES
========================================================= */

#about,
#artists,
#releases,
#services,
#world,
#shows {
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Evitar doble línea entre bloques consecutivos */
#about {
  border-top: 0;
}
/* =========================================================
   04 — RELEASES / MÁS COMPACTO + RED GLOW
========================================================= */

/* ---------------------------------------------------------
   HACER LA SECCIÓN MÁS COMPACTA
--------------------------------------------------------- */

#releases {
  min-height: auto !important;

  --release-cover-size:
    clamp(265px, 22vw, 315px);

  padding:
    30px
    28px
    32px !important;
}


/* SUBIR UN POCO EL CONTENIDO IZQUIERDO */

#releases .section-title-block {
  padding-top: 10px;
}


/* REDUCIR ESPACIOS INTERNOS */

#releases .release-content {
  row-gap: 6px;
}


/* =========================================================
   ILUMINACIÓN DETRÁS DEL COVERFLOW
========================================================= */

#releases .coverflow--releases {
  position: relative;

  isolation: isolate;
}

/* =========================================================
   PORTADAS POR ENCIMA DE LA ILUMINACIÓN
========================================================= */

#releases .coverflow-stage,
#releases .coverflow-track {
  position: relative;

  z-index: 2;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 701px) and (max-width: 1100px) {

  #releases {
    --release-cover-size:
      280px;

    padding:
      32px
      24px
      34px !important;
  }

  #releases .coverflow-spotlight {
    width: 560px;
    height: 270px;
  }

}


/* =========================================================
   MOBILE
   No lo comprimimos tanto para no perjudicar la lectura
========================================================= */

@media (max-width: 700px) {

  #releases {
    padding:
      48px
      18px
      38px !important;
  }

  #releases .coverflow-spotlight {
    width: 115vw;
    height: 300px;

    top: 44%;

    opacity: .72;
  }

  #releases .coverflow--releases::after {
    width: 86vw;
  }

}
/* =========================================================
   08 — HEADER ARRIBA / FOTO DESDE LA LÍNEA
========================================================= */

#contact.join-final {
  position: relative;
}


/* =========================================================
   FRANJA SUPERIOR
========================================================= */

#contact .join-final-top {
  position: relative;

  z-index: 20;

  min-height: 82px;

  padding:
    18px
    28px
    14px !important;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  border-bottom: 0 !important;
}


/* 08 + JOIN THE TEAM */

#contact .join-final-index {
  margin: 0 !important;

  transform: none !important;
}


/* TRYHARD / BUENOS AIRES */

#contact .join-final-location {
  margin: 0 !important;

  transform: none !important;

  text-align: right;
}


/* =========================================================
   LÍNEA — EXACTAMENTE DONDE EMPIEZA LA FOTO
========================================================= */

#contact .join-final-top::after {
  content: "";

  position: absolute;

  left: 28px;
  right: 28px;

  bottom: 0;

  height: 1px;

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

  pointer-events: none;
}


/* =========================================================
   LA FOTO EMPIEZA DEBAJO DE ESA LÍNEA
========================================================= */

#contact.join-final::before {
  inset:
    82px
    0
    0
    0 !important;
}


/* LA MÁSCARA OSCURA TAMBIÉN EMPIEZA CON LA FOTO */

#contact.join-final::after {
  inset:
    82px
    0
    0
    0 !important;
}
#contact .join-final-copy h2 {
  line-height: .92;
}
/* =========================================================
   05 — WHAT WE DO / 3D CARDS V2
========================================================= */

@media (min-width: 851px) {

  /* SECCIÓN UN POCO MÁS COMPACTA */
  #services.services {
    padding:
      40px
      28px
      42px !important;

    grid-template-columns:
      minmax(230px, 280px)
      minmax(0, 1fr) !important;

    column-gap:
      clamp(36px, 4vw, 62px) !important;

    overflow: visible !important;
  }


  /* =====================================================
     TITULO IZQUIERDO
  ===================================================== */

  #services .services-title {
    padding-top:
      8px !important;
  }

  #services .services-title h2 {
    max-width:
      280px !important;

    font-size:
      clamp(43px, 3.5vw, 54px) !important;

    line-height:
      .82 !important;
  }


  /* =====================================================
     CONTENEDOR DE TARJETAS
  ===================================================== */

  #services .services-grid {
    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap:
      clamp(12px, 1.3vw, 20px) !important;

    border:
      0 !important;

    perspective:
      1400px !important;

    perspective-origin:
      50% 45%;

    overflow:
      visible !important;
  }


  /* =====================================================
     TARJETA
  ===================================================== */

  #services .service {
    position: relative;

    min-height:
      300px !important;

    padding:
      24px
      24px
      22px !important;

    border:
      1px solid rgba(255,255,255,.14) !important;

    background:
      radial-gradient(
        circle at 25% 15%,
        rgba(239,23,38,.055),
        transparent 34%
      ),
      linear-gradient(
        145deg,
        #0d0d0d 0%,
        #070707 52%,
        #030303 100%
      ) !important;

    box-shadow:
      0 16px 36px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.025);

    overflow:
      hidden !important;

    transform:
      perspective(1200px)
      translateZ(0)
      rotateX(0deg)
      rotateY(0deg);

    transform-style:
      preserve-3d;

    transition:
      transform .55s cubic-bezier(.16,1,.3,1),
      border-color .35s ease,
      box-shadow .55s cubic-bezier(.16,1,.3,1),
      background .45s ease,
      opacity .35s ease !important;
  }


  /* =====================================================
     NUMERO GIGANTE DE FONDO
  ===================================================== */

  #services .service::before {
    top:
      4px !important;

    right:
      14px !important;

    font-size:
      clamp(88px, 7vw, 118px) !important;

    color:
      rgba(255,255,255,.035) !important;

    transform:
      translateZ(-15px) !important;
  }


  /* =====================================================
     LOGOS / ICONOS MUCHO MÁS GRANDES
  ===================================================== */

  #services .service-icon {
    width:
      118px !important;

    height:
      118px !important;

    margin-top:
      8px !important;

    display:
      flex;

    align-items:
      center;

    justify-content:
      flex-start;

    transform:
      translateZ(38px) !important;
  }

  #services .service-icon img {
    width:
      100px !important;

    height:
      100px !important;

    max-width:
      100px !important;

    max-height:
      100px !important;

    object-fit:
      contain;

    filter:
      drop-shadow(
        0 0 10px
        rgba(239,23,38,.16)
      );

    transform:
      translateZ(0);

    transition:
      transform .55s cubic-bezier(.16,1,.3,1),
      filter .4s ease !important;
  }


  /* HALO DETRÁS DEL LOGO */
  #services .service-icon::before {
    left:
      -10px !important;

    top:
      50% !important;

    width:
      125px !important;

    height:
      125px !important;

    background:
      radial-gradient(
        circle,
        rgba(239,23,38,.28) 0%,
        rgba(239,23,38,.12) 34%,
        transparent 70%
      ) !important;

    filter:
      blur(18px) !important;

    opacity:
      .48 !important;

    transform:
      translateY(-50%)
      scale(.82) !important;
  }


  /* =====================================================
     TEXTO
  ===================================================== */

  #services .service h3 {
    max-width:
      240px !important;

    margin:
      auto
      0
      0 !important;

    font-size:
      clamp(27px, 2vw, 34px) !important;

    line-height:
      .86 !important;

    transform:
      translateZ(34px) !important;
  }

  #services .service p {
    max-width:
      245px !important;

    margin-top:
      10px !important;

    font-size:
      8px !important;

    color:
      rgba(245,245,242,.50) !important;

    transform:
      translateZ(22px) !important;
  }


  /* =====================================================
     HOVER 3D MÁS MARCADO
  ===================================================== */

  #services .service:hover {
    z-index:
      10;

    border-color:
      rgba(239,23,38,.62) !important;

    background:
      radial-gradient(
        circle at 25% 15%,
        rgba(239,23,38,.13),
        transparent 38%
      ),
      linear-gradient(
        145deg,
        #111 0%,
        #080808 55%,
        #030303 100%
      ) !important;

    box-shadow:
      0 30px 55px rgba(0,0,0,.55),
      0 0 36px rgba(239,23,38,.12),
      inset 0 1px 0 rgba(255,255,255,.055) !important;

    transform:
      perspective(1200px)
      translateY(-10px)
      translateZ(32px)
      rotateX(2deg)
      scale(1.025) !important;
  }


  #services .service:hover .service-icon::before {
    opacity:
      .95 !important;

    transform:
      translateY(-50%)
      scale(1.08) !important;
  }

  #services .service:hover .service-icon img {
    transform:
      translate3d(0,-6px,28px)
      scale(1.08) !important;

    filter:
      drop-shadow(
        0 8px 16px
        rgba(239,23,38,.25)
      ) !important;
  }

  #services .service:hover h3 {
    transform:
      translate3d(0,-3px,46px) !important;
  }

  #services .service:hover p {
    color:
      rgba(245,245,242,.72) !important;

    transform:
      translate3d(0,-2px,32px) !important;
  }


  /* LOS OTROS DOS RETROCEDEN */
  #services .services-grid:has(.service:hover)
  .service:not(:hover) {
    opacity:
      .48 !important;

    transform:
      perspective(1200px)
      translateZ(-20px)
      scale(.985) !important;

    filter:
      saturate(.7)
      brightness(.72) !important;
  }
}
/* =========================================================
   06 — WORLD / MOBILE V2
   TITLE ARRIBA + GALERIA HORIZONTAL
========================================================= */

@media (max-width: 700px) {

  /* =====================================================
     SECCION
  ===================================================== */

  #world.world {
    display: block !important;

    min-height: 0 !important;

    padding:
      52px
      18px
      36px !important;

    overflow: hidden !important;
  }


  /* 06 */
  #world > .section-number {
    top: 20px !important;
    left: 18px !important;
  }


  /* =====================================================
     TITULO
  ===================================================== */

  #world .world-title {
    position: relative;

    grid-column: auto !important;

    width: 100% !important;
    max-width: none !important;

    margin:
      0
      0
      28px !important;

    padding: 0 !important;

    z-index: 5;
  }


  #world .world-title > span {
    margin-bottom:
      10px !important;

    font-size:
      8px !important;
  }


  #world .world-title h2 {
    width: 100% !important;

    max-width:
      360px !important;

    margin: 0 !important;

    font-size:
      clamp(60px, 17vw, 82px) !important;

    line-height:
      .80 !important;

    letter-spacing:
      -.035em !important;
  }


  /* =====================================================
     BOTON SEE MORE
  ===================================================== */

  #world .world-title .outline-button {
    min-width:
      132px !important;

    margin-top:
      20px !important;

    padding:
      11px
      13px !important;

    font-size:
      8px !important;
  }


  /* =====================================================
     GALERIA — SWIPE HORIZONTAL
  ===================================================== */

  #world .world-gallery {
    grid-column:
      auto !important;

    width:
      calc(100% + 18px) !important;

    margin:
      0
      -18px
      0
      0 !important;

    padding-right:
      18px;

    display:
      grid !important;

    grid-auto-flow:
      column !important;

    grid-template-columns:
      none !important;

    grid-auto-columns:
      minmax(235px, 72vw) !important;

    gap:
      6px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    scroll-snap-type:
      x mandatory;

    overscroll-behavior-inline:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:
      none;
  }


  #world .world-gallery::-webkit-scrollbar {
    display: none;
  }


  /* =====================================================
     FOTOS
  ===================================================== */

  #world .world-photo {
    width:
      100% !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    aspect-ratio:
      4 / 5 !important;

    scroll-snap-align:
      start;

    background:
      #111 !important;
  }


  #world .world-photo img {
    width:
      100% !important;

    height:
      100% !important;

    object-fit:
      cover !important;
  }
}
/* =========================================================
   05 — WHAT WE DO
   TABLET + MOBILE / NEW CARDS
========================================================= */

@media (max-width: 850px) {

  /* =========================
     CONTENEDOR
  ========================= */

  #services.services {
    overflow: hidden !important;
  }

  #services .services-grid {
    border: 0 !important;

    gap: 14px !important;

    padding:
      4px
      2px
      22px !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    scroll-snap-type: x mandatory !important;

    scrollbar-width: none;
  }

  #services .services-grid::-webkit-scrollbar {
    display: none;
  }


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

  #services .service {
    position: relative;

    min-height: 285px !important;

    padding:
      22px
      20px
      20px !important;

    border:
      1px solid rgba(255,255,255,.15) !important;

    background:
      radial-gradient(
        circle at 24% 15%,
        rgba(239,23,38,.08),
        transparent 37%
      ),
      linear-gradient(
        145deg,
        #0d0d0d 0%,
        #070707 55%,
        #030303 100%
      ) !important;

    box-shadow:
      0 18px 38px rgba(0,0,0,.38),
      inset 0 1px 0 rgba(255,255,255,.03) !important;

    scroll-snap-align: start;

    overflow: hidden !important;
  }


  /* QUITA EL ASPECTO DE TABLA */
  #services .service:last-child {
    border:
      1px solid rgba(255,255,255,.15) !important;
  }


  /* =========================
     NUMERO 01 / 02 / 03
  ========================= */

  #services .service::before {
    top: 5px !important;
    right: 13px !important;

    font-size:
      clamp(82px, 14vw, 112px) !important;

    color:
      rgba(255,255,255,.04) !important;
  }


  /* =========================
     LINEA ROJA INFERIOR
  ========================= */

  #services .service::after {
    left: 14% !important;
    right: 14% !important;

    opacity: .55 !important;

    transform:
      scaleX(.72) !important;

    box-shadow:
      0 -2px 20px rgba(239,23,38,.30) !important;
  }


  /* =========================
     ICONO GRANDE
  ========================= */

  #services .service-icon {
    width: 96px !important;
    height: 96px !important;

    margin-top: 5px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;
  }

  #services .service-icon img {
    width: 82px !important;
    height: 82px !important;

    max-width: 82px !important;
    max-height: 82px !important;

    object-fit: contain !important;

    filter:
      drop-shadow(
        0 0 12px
        rgba(239,23,38,.18)
      ) !important;
  }


  /* HALO */
  #services .service-icon::before {
    left: -8px !important;
    top: 50% !important;

    width: 105px !important;
    height: 105px !important;

    background:
      radial-gradient(
        circle,
        rgba(239,23,38,.26) 0%,
        rgba(239,23,38,.11) 38%,
        transparent 70%
      ) !important;

    filter: blur(18px) !important;

    opacity: .65 !important;

    transform:
      translateY(-50%)
      scale(.9) !important;
  }


  /* =========================
     TEXTOS
  ========================= */

  #services .service h3 {
    margin:
      auto
      0
      0 !important;

    font-size:
      clamp(28px, 5vw, 36px) !important;

    line-height:
      .86 !important;
  }

  #services .service p {
    margin-top:
      10px !important;

    font-size:
      9px !important;

    line-height:
      1.5 !important;

    color:
      rgba(245,245,242,.55) !important;
  }
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 700px) {

  #services.services {
    display: block !important;

    padding:
      52px
      18px
      42px !important;
  }


  /* TITULO */
  #services .services-title {
    padding:
      0
      0
      26px !important;
  }

  #services .services-title h2 {
    max-width:
      360px !important;

    font-size:
      clamp(48px, 13vw, 66px) !important;

    line-height:
      .80 !important;
  }


  /* CARRUSEL */
  #services .services-grid {
    width:
      calc(100% + 18px) !important;

    margin:
      0
      -18px
      0
      0 !important;

    padding:
      3px
      18px
      22px
      0 !important;

    grid-template-columns:
      repeat(
        3,
        minmax(245px, 78vw)
      ) !important;

    gap:
      10px !important;
  }


  /* TARJETA */
  #services .service {
    min-height:
      265px !important;

    padding:
      19px
      18px
      18px !important;
  }


  /* ICONOS */
  #services .service-icon {
    width:
      84px !important;

    height:
      84px !important;
  }

  #services .service-icon img {
    width:
      72px !important;

    height:
      72px !important;

    max-width:
      72px !important;

    max-height:
      72px !important;
  }

  #services .service-icon::before {
    width:
      92px !important;

    height:
      92px !important;
  }


  /* TITULO TARJETA */
  #services .service h3 {
    max-width:
      220px !important;

    font-size:
      clamp(29px, 8vw, 37px) !important;
  }

  #services .service p {
    max-width:
      225px !important;
  }
}


/* =========================================================
   PHONE PEQUEÑO
========================================================= */

@media (max-width: 430px) {

  #services .services-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(238px, 82vw)
      ) !important;
  }

  #services .service {
    min-height:
      255px !important;
  }
}
/* =========================================================
   04 — RELEASES / FIX NUMBER + NEUTRAL LIGHT
========================================================= */

/* 04 ARRIBA DEL LABEL RELEASES */
#releases > .section-number {
  position: absolute !important;
  top: 10px !important;
  left: 28px !important;
  z-index: 30 !important;

  color: var(--red) !important;
}


/* =========================================================
   CAMBIAR GLOW ROJO POR BLANCO / GRIS
========================================================= */

#releases .coverflow-spotlight {
  background:

    /* IZQUIERDA */
    radial-gradient(
      ellipse at 22% 50%,
      rgba(225,225,225,.14) 0%,
      rgba(190,190,190,.08) 25%,
      rgba(120,120,120,.035) 43%,
      transparent 64%
    ),

    /* CENTRAL */
    radial-gradient(
      ellipse at 50% 50%,
      rgba(245,245,242,.24) 0%,
      rgba(205,205,205,.12) 28%,
      rgba(125,125,125,.05) 48%,
      transparent 68%
    ),

    /* DERECHA */
    radial-gradient(
      ellipse at 78% 50%,
      rgba(225,225,225,.14) 0%,
      rgba(190,190,190,.08) 25%,
      rgba(120,120,120,.035) 43%,
      transparent 64%
    ) !important;

  filter: blur(30px) !important;
  opacity: .82 !important;
}


/* LUZ DE PISO */
#releases .coverflow--releases::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(235,235,232,.16) 0%,
      rgba(180,180,180,.07) 40%,
      transparent 73%
    ) !important;

  filter: blur(24px) !important;
  opacity: .72 !important;
}
/* =========================================================
   04 — RELEASES / NEUTRAL WHITE-GREY LIGHT
========================================================= */

/* LUZ GENERAL DETRÁS DE LAS TAPAS */
#releases .coverflow-spotlight {
  background:

    radial-gradient(
      ellipse at 22% 50%,
      rgba(235,235,235,.12) 0%,
      rgba(190,190,190,.06) 28%,
      transparent 62%
    ),

    radial-gradient(
      ellipse at 50% 50%,
      rgba(255,255,255,.22) 0%,
      rgba(210,210,210,.10) 30%,
      rgba(130,130,130,.035) 48%,
      transparent 68%
    ),

    radial-gradient(
      ellipse at 78% 50%,
      rgba(235,235,235,.12) 0%,
      rgba(190,190,190,.06) 28%,
      transparent 62%
    ) !important;

  filter: blur(32px) !important;
  opacity: .78 !important;
}


/* LUZ INFERIOR / PISO */
#releases .coverflow--releases::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(245,245,242,.13) 0%,
      rgba(180,180,180,.055) 40%,
      transparent 72%
    ) !important;

  filter: blur(26px) !important;
  opacity: .65 !important;
}
/* =========================================================
   RELEASES — GLOW FINAL BLANCO / GRIS
========================================================= */

@media (min-width: 901px) {

  /* CADA PORTADA */
  #releases .coverflow-item--release {
    box-shadow:
      0 0 18px 4px rgba(235, 235, 235, .16),
      0 0 42px 8px rgba(180, 180, 180, .08),
      0 18px 35px rgba(0, 0, 0, .70) !important;
  }


  /* HALO DETRÁS DE CADA PORTADA */
  #releases .coverflow-item--release::before {
    background:
      radial-gradient(
        ellipse at center,
        rgba(245, 245, 242, .26) 0%,
        rgba(205, 205, 205, .14) 30%,
        rgba(130, 130, 130, .06) 52%,
        transparent 74%
      ) !important;

    filter: blur(19px) !important;
    opacity: .80 !important;
  }


  /* PORTADA CENTRAL */
  #releases .coverflow-item--release.is-active {
    box-shadow:
      0 0 24px 6px rgba(255, 255, 255, .25),
      0 0 58px 14px rgba(190, 190, 190, .12),
      0 22px 42px rgba(0, 0, 0, .78) !important;
  }


  /* HALO PORTADA CENTRAL */
  #releases .coverflow-item--release.is-active::before {
    background:
      radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, .38) 0%,
        rgba(215, 215, 215, .18) 32%,
        rgba(135, 135, 135, .07) 54%,
        transparent 75%
      ) !important;

    filter: blur(22px) !important;
    opacity: .90 !important;
  }


  /* LUZ GENERAL DETRÁS DEL CARRUSEL */
  #releases .coverflow-spotlight {
    background:
      radial-gradient(
        ellipse at center,
        rgba(245, 245, 242, .12) 0%,
        rgba(170, 170, 170, .055) 42%,
        transparent 72%
      ) !important;
  }


  /* LUZ DE PISO */
  #releases .coverflow--releases::after {
    background:
      radial-gradient(
        ellipse at center,
        rgba(245, 245, 242, .15) 0%,
        rgba(170, 170, 170, .06) 40%,
        transparent 72%
      ) !important;
  }
}
/* =========================================================
   RELEASES — FINAL NEUTRAL GLOW
   OVERRIDE DEFINITIVO
========================================================= */

/* TODAS LAS PORTADAS */
#releases .coverflow-item--release {
  box-shadow:
    0 0 20px 5px rgba(245,245,245,.18),
    0 0 45px 10px rgba(180,180,180,.09),
    0 18px 35px rgba(0,0,0,.72) !important;
}


/* HALO INDIVIDUAL */
#releases .coverflow-item--release::before {
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.28) 0%,
      rgba(205,205,205,.14) 30%,
      rgba(125,125,125,.055) 52%,
      transparent 74%
    ) !important;

  filter: blur(19px) !important;
  opacity: .80 !important;
}


/* PORTADA CENTRAL */
#releases .coverflow-item--release.is-active {
  box-shadow:
    0 0 26px 7px rgba(255,255,255,.28),
    0 0 62px 15px rgba(200,200,200,.13),
    0 22px 42px rgba(0,0,0,.80) !important;
}


/* HALO CENTRAL */
#releases .coverflow-item--release.is-active::before {
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.42) 0%,
      rgba(215,215,215,.20) 30%,
      rgba(135,135,135,.07) 52%,
      transparent 75%
    ) !important;

  filter: blur(23px) !important;
  opacity: .92 !important;
}


/* LUZ GENERAL */
#releases .coverflow-spotlight {
  background:
    radial-gradient(
      ellipse at center,
      rgba(245,245,242,.15) 0%,
      rgba(175,175,175,.065) 42%,
      transparent 72%
    ) !important;

  filter: blur(26px) !important;
}


/* LUZ INFERIOR */
#releases .coverflow--releases::after {
  background:
    radial-gradient(
      ellipse at center,
      rgba(245,245,242,.16) 0%,
      rgba(175,175,175,.065) 40%,
      transparent 72%
    ) !important;

  filter: blur(16px) !important;
}