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

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: #fff;
}

body {
  font-family: "Open Sans", sans-serif;
}

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

.landing-sago {
  --content-width: min(81vw, 140vh);

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

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  background: #fff;
  overflow-x: clip;
}

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

.banner {
  width: var(--content-width);
  margin-top: 4.3vh;
}

.banner picture,
.footer picture {
  display: block;
  width: 100%;
}

.banner__image,
.footer__image {
  display: block;
  width: 100%;
  height: auto;
}

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

.tickets {
  width: calc(var(--content-width) * 0.98);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: min(1.5vw, 2.6vh);

  margin-top: 2vh;
}

.tickets__button {
  display: block;
  min-width: 0;
  cursor: pointer;

  transform-origin: center;
  transition: transform 220ms ease;
}

.tickets__button img {
  display: block;
  width: 100%;
  height: auto;
}

/* HOVER */

@media (hover: hover) and (pointer: fine) {
  .tickets__button:hover {
    transform: scale(0.94);
  }
}

.tickets__button:focus-visible {
  outline: 0.2vw solid #386a00;
  outline-offset: 0.3vw;
  border-radius: 1vw;
}

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

.footer {
  width: var(--content-width);

  margin-top: 3.3vh;
  margin-bottom: 1.5vh;
}

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

@media (max-width: 767px) {

  .landing-sago {
    width: 100vw;
    min-height: 100vh;
  }

  /* BANNER */

  .banner {
    width: 100vw;
    margin-top: 0;
  }

  /* BOTONES */

  .tickets {
    width: 90vw;

    grid-template-columns: minmax(0, 1fr);
    gap: 7vw;

    margin-top: 8vw;
  }

  /* FOOTER */

  .footer {
    width: 92vw;

    margin-top: 12vw;
    margin-bottom: 4vw;
  }

  .tickets__button:focus-visible {
    outline-width: 0.6vw;
    outline-offset: 1vw;
  }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
  .tickets__button {
    transition: none;
  }
}