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

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

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

body {
  background-color: #fff;
  font-family: "Open Sans", sans-serif;
}


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

.landing {
  position: relative;

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

  overflow: hidden;

  background-color: #fff;
  background-image: url("../img/bg2.png");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* Banner mobile oculto en desktop */

.mobile-banner {
  display: none;
}


/* Contenedor principal */

.content {
  position: relative;

  width: 100vw;
  height: 100vh;

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


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

.buttons {
  position: absolute;

  top: 74.8vh;
  left: 50%;

  transform: translateX(-50%);

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

  gap: 0vw;

  width: 100vw;
}


/* Links */

.event-button {
  display: block;

  width: 13.3vw;
  height: 10.2vh;

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

  transform-origin: center;
}


/* Imagen del botón */

.event-button img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* Hover */

.event-button:hover {
  transform: scale(0.93);
  filter: brightness(1.05);
}


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

.texto-desktop {
  position: absolute;

  top: 88vh;
  left: 50%;

  transform: translateX(-50%);

  width: 40vw;
  height: auto;

  object-fit: contain;
}


/* Mobile oculto en desktop */

.texto-mobile {
  display: none;
}


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

@media (max-width: 768px) {

  html,
  body {
    background-color: #000;
  }

  body {
    min-height: 0;
  }


  .landing {
    width: 100vw;

    height: auto;
    min-height: 0;

    overflow: visible;

    background-color: #000;
    background-image: none;
  }


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

  .mobile-banner {
    display: block;

    width: 100vw;
    height: 187.31vw;

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


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

  .content {
    position: relative;

    width: 100vw;

    /*
      Importante:
      eliminamos el min-height: 75vh
      para que el contenido termine justo
      después de los botones.
    */

    height: auto;
    min-height: 0;

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

    /*
      Solo dejamos 2vh debajo
      del último botón.
    */
    padding-bottom: 2vh;
  }


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

  .texto-mobile {
    display: block;

    position: relative;

    width: 91vw;
    height: auto;

    margin-top: 2.2vh;
    margin-bottom: 3.2vh;

    object-fit: contain;
  }


  /* No mostrar texto desktop */

  .texto-desktop {
    display: none;
  }


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

  .buttons {
    position: relative;

    top: auto;
    left: auto;

    transform: none;

    width: 100vw;

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

    gap: 2.6vh;
  }


  .event-button {
    width: 63.43vw;
    height: 27.36vw;
  }


  .event-button:hover {
    transform: scale(0.95);
  }
}