:root {
  --blue: #3fa9f5;
  --deep: #010f1f;
  --stage-w: 3840;
  --stage-h: 2160;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  background: #000812;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../assets/fonts/inter-200.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-400.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.site-shell,
.view {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.view {
  display: none;
  background: #000812;
}

.view.is-active {
  display: block;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  container-type: size;
  transform: translate(-50%, -50%);
}

.stage-desktop {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}

.stage-mobile {
  width: min(100vw, calc(100vh * 9 / 16));
  height: min(100vh, calc(100vw * 16 / 9));
}

.view-landing .stage-desktop {
  background: url("../assets/img/bg-portada-desktop.png") center / cover no-repeat;
}

.view-gallery .stage-desktop {
  background: url("../assets/img/bg-galeria-desktop.png") center / cover no-repeat;
}

.view-mobile-landing .stage-mobile {
  background: url("../assets/img/bg-portada-mobile.png") center / cover no-repeat;
}

.view-mobile-warning .stage-mobile {
  background: url("../assets/img/bg-aviso-mobile.png") center / cover no-repeat;
}

.brand-desktop {
  position: absolute;
  left: 32.266%;
  top: 25.926%;
  width: 35.46%;
  height: 7.407%;
  object-fit: fill;
}

.tagline {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-weight: 200;
  line-height: 1.279;
  text-align: center;
  color: #fff;
}

.tagline-desktop {
  left: 32.292%;
  top: 38.889%;
  width: 35.417%;
  height: 9.259%;
  font-size: 2.2396cqw;
}

.pill-button {
  position: absolute;
  width: 16.667%;
  height: 5.556%;
  padding: 0;
  color: var(--blue);
  background: var(--deep);
  border: 0.15625cqw solid var(--blue);
  border-radius: 0.5208cqw;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.pill-button:hover,
.pill-button:focus-visible,
.pill-button:active {
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0.5208cqw 0.5208cqw var(--blue);
  outline: none;
}

.pill-button:active {
  transform: translateY(1px);
}

.button-label {
  position: absolute;
  left: 10.469%;
  top: 36.54%;
  display: flex;
  align-items: center;
  height: 30.25%;
  font-size: 1.25cqw;
  font-weight: 400;
  line-height: 1;
}

.button-chevron {
  position: absolute;
  left: 86.829%;
  top: 11.667%;
  width: 11.341%;
  height: 80%;
  object-fit: fill;
  transform: rotate(-90deg);
  transform-origin: center;
}

.button-chevron-hover {
  opacity: 0;
}

.pill-button:hover .button-chevron:not(.button-chevron-hover),
.pill-button:focus-visible .button-chevron:not(.button-chevron-hover),
.pill-button:active .button-chevron:not(.button-chevron-hover) {
  opacity: 0;
}

.pill-button:hover .button-chevron-hover,
.pill-button:focus-visible .button-chevron-hover,
.pill-button:active .button-chevron-hover {
  opacity: 1;
}

.enter-desktop {
  left: 41.667%;
  top: 62.963%;
}

.contact-link {
  position: absolute;
  z-index: 3;
  left: 90.625%;
  top: 1.852%;
  width: 6.25%;
  height: 3.704%;
  color: #fff;
  font-size: 1.25cqw;
  font-weight: 200;
  line-height: 1.667;
  text-align: center;
  text-decoration: none;
  border-bottom: 0.1042cqw solid var(--blue);
  pointer-events: auto;
}

.app-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.app-card {
  --card-border-width: 0.5208cqw;
  --card-radius: 1.0417cqw;
  position: absolute;
  z-index: 1;
  display: block;
  width: 20.833%;
  height: 37.037%;
  color: #fff;
  background: #000;
  border: var(--card-border-width) solid var(--blue);
  border-radius: var(--card-radius);
  text-decoration: none;
  pointer-events: auto;
  transition: box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.app-card:not(.app-card-future):hover,
.app-card:not(.app-card-future):focus-visible,
.app-card.is-notice-visible {
  border-color: #fff;
  box-shadow: 0 0 0.5208cqw 0.5208cqw var(--blue);
  outline: none;
  transform: translateY(-1.5%);
}

.app-card:nth-child(1) {
  left: 10.417%;
  top: 7.407%;
}

.app-card:nth-child(2) {
  left: 39.583%;
  top: 7.407%;
}

.app-card:nth-child(3) {
  left: 68.75%;
  top: 7.407%;
}

.app-card:nth-child(4) {
  left: 10.417%;
  top: 55.556%;
}

.app-card:nth-child(5) {
  left: 39.583%;
  top: 55.556%;
}

.app-card:nth-child(6) {
  left: 68.75%;
  top: 55.556%;
}

.app-card[aria-disabled="true"] {
  cursor: default;
}

.app-card-future {
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: none;
}

.app-card-thumb {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 45%;
  object-fit: cover;
}

.app-card-future-pill {
  position: absolute;
  left: 35%;
  top: 20%;
  width: 30%;
  height: 30%;
  object-fit: contain;
}

.app-card span {
  position: absolute;
  left: 10%;
  top: 60%;
  width: 80%;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6667cqw;
  font-weight: 200;
  line-height: 1.72;
  letter-spacing: 0;
  text-align: center;
}

.app-card .app-card-notice {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #000;
  border: 0;
  border-radius: inherit;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: scale(1);
  transition: opacity 140ms ease;
}

.app-card .app-card-notice.is-visible {
  opacity: 1;
}

.app-card-notice-pill {
  position: absolute;
  left: 35%;
  top: 20%;
  width: 30%;
  height: 30%;
  object-fit: contain;
}

.app-card-notice-text {
  position: absolute;
  left: 10%;
  top: 60%;
  width: 80%;
  color: #fff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6667cqw;
  font-weight: 200;
  line-height: 1.72;
  letter-spacing: 0;
  text-align: center;
}

.minimize-button {
  position: absolute;
  z-index: 3;
  right: 0.26%;
  bottom: 0.463%;
  width: 2.604%;
  aspect-ratio: 1;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}

.minimize-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.view-mobile {
  display: none;
}

.brand-mobile {
  position: absolute;
  left: 16.204%;
  top: 6.563%;
  width: 67.593%;
  height: 24.688%;
  overflow: hidden;
}

.brand-mobile img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 27.253%;
  object-fit: fill;
}

.brand-mobile img:last-child {
  position: absolute;
  left: 0;
  top: 35.865%;
  width: 100%;
  height: 63.963%;
  object-fit: fill;
}

.tagline-mobile {
  left: 16.204%;
  top: 33.333%;
  width: 67.593%;
  height: 8.333%;
  font-size: 4.9074cqw;
}

.enter-mobile,
.share-button {
  left: 20.463%;
  width: 59.259%;
  height: 6.25%;
  border-width: 0.5556cqw;
  border-radius: 1.8519cqw;
}

.enter-mobile {
  top: 45.833%;
}

.share-button {
  top: 45.833%;
}

.enter-mobile span:first-child,
.share-button span:first-child {
  font-size: 4.4444cqw;
}

.share-button span:first-child {
  font-size: 3.7037cqw;
}

.mobile-warning-text {
  position: absolute;
  left: 12.963%;
  top: 6.25%;
  width: 74.074%;
  color: #fff;
  font-size: 4.4444cqw;
  font-weight: 200;
  line-height: 1.29;
  text-align: center;
}

.mobile-warning-text p {
  margin: 0 0 5.92%;
}

.round-pills-button {
  position: absolute;
  left: 25.926%;
  top: 58.333%;
  width: 48.148%;
  aspect-ratio: 1;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.round-pills-button img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (orientation: portrait), (max-width: 767px) {
  .view-desktop {
    display: none !important;
  }

  .view-mobile.is-active {
    display: block;
  }
}

@media (orientation: landscape) and (min-width: 768px) {
  .view-mobile {
    display: none !important;
  }

  .view-desktop.is-active {
    display: block;
  }
}