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

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

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  background-color: #e1d0af;
  overflow-x: hidden;
}

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

a {
  text-decoration: none;
}


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

.landing {
  width: 100vw;
  min-height: 100vh;
  background-color: #e1d0af;
}


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

.desktop-stage {
  position: relative;

  width: 100vw;
  height: 100vh;

  background-color: #e1d0af;
  background-image: url("../../assets/img/bg-desktop1.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}


/*
  Este contenedor incluye:
  - Los 4 botones
  - El texto de horario

  Así ambos elementos mantienen su posición
  relativa respecto a la imagen de fondo.
*/

.desktop-actions {
  position: absolute;

  left: 50%;
  top: 69.7vh;

  transform: translateX(-50%);

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

  width: 72vw;
}


/* =========================
   BOTONES DESKTOP
========================= */

.desktop-buttons {
  width: 100%;

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

  gap: 1.2vw;
}


/* Cada botón */

.ticket-button {
  display: block;

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

  transform-origin: center center;
}


/* Tamaño desktop */

.desktop-buttons .ticket-button {
  width: 16.1vw;
}

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


/* =========================
   TEXTO DE HORARIO
========================= */

.event-hours {
  color: #2b377f;

  font-family: "Open Sans", sans-serif;
  font-weight: 700;

  text-align: center;

  margin: 0;

  white-space: nowrap;
}


/* Texto desktop */

.desktop-actions .event-hours {
  font-size: 1.05vw;

  /*
    Espacio pequeño respecto a los botones
    para mantenerlo dentro de la zona beige.
  */
  margin-top: 1.2vh;
}


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

.ticket-button:hover {
  transform: scale(0.93);
}

.ticket-button:active {
  transform: scale(0.89);
}


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

.mobile-content {
  display: none;
}


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

@media (max-width: 767px) {

  body {
    background-color: #e1d0af;
  }

  .landing {
    min-height: 100vh;
    background-color: #e1d0af;
  }


  /* Ocultar desktop */

  .desktop-stage {
    display: none;
  }


  /* Mostrar mobile */

  .mobile-content {
    display: flex;
    flex-direction: column;
    align-items: center;

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

    background-color: #e1d0af;

    padding-bottom: 7vw;
  }


  /* Banner */

  .mobile-banner {
    width: 100vw;
    height: auto;

    object-fit: contain;
  }


  /* Botones */

  .mobile-buttons {
    width: 100vw;

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

    gap: 2.1vh;

    margin-top: 3vh;
  }


  .mobile-buttons .ticket-button {
    width: 77vw;
  }

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


  /* Texto mobile */

  .mobile-content .event-hours {
    font-size: 3.4vw;

    margin-top: 2.5vh;

    padding-left: 4vw;
    padding-right: 4vw;

    white-space: normal;
  }

}


/* =========================
   DESKTOP MÁS ALTO / ANGOSTO
========================= */

@media (min-width: 768px) and (max-aspect-ratio: 16 / 9) {

  .desktop-actions {
    /*
      Altura real de bg-desktop1:
      100vw * 9 / 16 = 56.25vw

      La imagen está centrada verticalmente.
    */

    top: calc(
      50vh -
      28.125vw +
      39.2vw
    );

    width: 72vw;
  }


  .desktop-buttons {
    gap: 1.2vw;
  }


  .desktop-buttons .ticket-button {
    width: 16.1vw;
  }


  /*
    En este caso el fondo está escalado
    según el ancho, por eso usamos vw
    también para el texto y separación.
  */

  .desktop-actions .event-hours {
    font-size: 1.05vw;
    margin-top: 0.7vw;
  }

}


/* =========================
   DESKTOP MUY ANCHO
========================= */

@media (min-width: 768px) and (min-aspect-ratio: 16 / 9) {

  .desktop-actions {
    /*
      En este caso background-size: contain
      está limitado por la altura.
    */

    top: 75.7vh;

    width: 100vh;
  }


  .desktop-buttons {
    gap: 2.15vh;
  }


  .desktop-buttons .ticket-button {
    width: 28.6vh;
  }


  /*
    Aquí usamos vh para que el texto
    escale exactamente con el fondo.
  */

  .desktop-actions .event-hours {
    font-size: 1.85vh;
    margin-top: 1.2vh;
  }

}