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

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  width: 100vw;
  min-height: 100vh;
}

body {
  position: relative;

  width: 100vw;
  height: 100vh;
  min-height: 100vh;

  overflow: hidden;

  background-color: #ffffff;
  background-image: url("../img/bg-1920x1080-1.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

a {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 0;
  text-decoration: none;
}

img {
  display: block;

  max-width: 100%;
  margin: 0;
  padding: 0;

  border: 0;
}


/* ==================================================
   DESKTOP PANORÁMICO
   Fondo de referencia: 1920 × 1080
================================================== */

.desktop-buttons {
  /*
    Tamaño real del fondo 16:9 dentro de la pantalla.

    Si la pantalla es más ancha que 16:9, el fondo se ajusta
    utilizando la altura.

    Si es más angosta, se ajusta utilizando el ancho.
  */

  --scene-width: min(100vw, 177.7778vh);
  --scene-height: min(56.25vw, 100vh);

  position: fixed;
  z-index: 2;

  /*
    Se considera el espacio vacío que puede quedar alrededor
    del fondo cuando se utiliza background-size: contain.
  */

  top: calc(
    ((100vh - var(--scene-height)) / 2)
    + min(15.2vh, 8.55vw)
  );

  left: calc(
    ((100vw - var(--scene-width)) / 2)
    + min(55.5vw, 98.6667vh)
  );

  display: flex;
  flex-direction: column;
  align-items: center;

  width: min(39.5vw, 70.2222vh);

  margin: 0;
  padding: 0;

  gap: min(1.1vh, 0.6188vw);
}

.desktop-buttons a {
  width: 100%;
}

.desktop-buttons img {
  width: 100%;
  height: auto;

  transform: scale(1);
  transform-origin: center center;

  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}


/* ==================================================
   EFECTO HOVER DE LOS BOTONES
================================================== */

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

  .desktop-buttons a:hover img {
    transform: scale(0.96);
    filter: brightness(1.08);
  }

  .desktop-buttons a:focus-visible img {
    transform: scale(0.96);
    filter: brightness(1.08);
  }

}

.mobile-buttons {
  display: none;
}


/* ==================================================
   DESKTOP MÁS CUADRADO
   Fondo de referencia: 1440 × 1024
================================================== */

@media (orientation: landscape) and (max-aspect-ratio: 31/20) {

  body {
    background-image: url("../img/bg-1440x1024-1.png");
    background-position: center center;
    background-size: cover;
  }

  .desktop-buttons {
    /*
      Proporción del fondo 1440 × 1024.
    */

    --scene-width: min(100vw, 140.625vh);
    --scene-height: min(71.1111vw, 100vh);

    top: calc(
      ((100vh - var(--scene-height)) / 2)
      + min(15.4vh, 10.9511vw)
    );

    left: calc(
      ((100vw - var(--scene-width)) / 2)
      + min(54.6vw, 76.7813vh)
    );

    width: min(38.8vw, 54.5625vh);

    gap: min(3.6vh, 2.56vw);
  }

}


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

@media (orientation: portrait) {

  html,
  body {
    height: auto;
    min-height: 100vh;
  }

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

    background-color: #ffffff;
    background-image: url("../img/bg_mobile-1.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100vw auto;
  }

  .desktop-buttons {
    display: none;
  }

  .mobile-buttons {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 80vw;

    margin: 0 auto;
    padding-top: 186.7vw;
    padding-bottom: 15vw;

    gap: 3.8vw;
  }

  .mobile-buttons a {
    width: 100%;
  }

  .mobile-buttons img {
    width: 100%;
    height: auto;
  }

}