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

* {
  box-sizing: border-box;
}


html {
  background: #000;

  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: #000;

  color: #fff;

  font-family:
    "Instrument Sans",
    Arial,
    Helvetica,
    sans-serif;

  overflow-x: hidden;
}


img {
  display: block;

  max-width: 100%;
}



/* =========================================
   SECCIONES DE SCROLL
========================================= */

.fade-section {
  position: relative;

  height: 200vh;
}


.sticky-screen {
  position: sticky;

  top: 0;

  width: 100%;

  height: 100vh;
  height: 100dvh;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #000;

  opacity: 0;

  will-change: opacity;
}



/* =========================================
   LOGO PRINCIPAL
========================================= */

.main-logo {
  width: min(29vw, 310px);

  height: auto;
}



/* =========================================
   PLATAFORMA CULTURAL
========================================= */

.statement {
  text-align: center;

  padding: 24px;
}


.statement h1 {
  margin: 0;

  font-size:
    clamp(
      34px,
      4.6vw,
      72px
    );

  font-weight: 500;

  letter-spacing: -0.045em;

  line-height: 0.98;
}



/* =========================================
   FLECHA ENTRE SECCIONES
========================================= */

.section-next {
  position: absolute;

  left: 50%;

  bottom:
    max(
      34px,
      env(safe-area-inset-bottom)
    );

  transform: translateX(-50%);

  width: 46px;

  height: 46px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: 0;

  color: rgba(255, 255, 255, 0.72);

  cursor: pointer;

  z-index: 20;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}


.section-next:hover {
  color: #fff;
}


.section-next svg {
  width: 25px;

  height: 25px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.35;

  stroke-linecap: round;

  stroke-linejoin: round;
}



/* =========================================
   GALERÍA
========================================= */

.gallery-screen {
  overflow: hidden;
}


.gallery-shell {
  position: relative;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}



/* =========================================
   TRACK HORIZONTAL
========================================= */

.gallery-track {
  width: 100%;

  display: flex;

  gap: 4vw;

  overflow-x: auto;

  padding: 0 6vw;

  scroll-snap-type: x mandatory;

  scroll-padding-inline: 6vw;

  scrollbar-width: none;

  cursor: grab;

  user-select: none;

  -webkit-overflow-scrolling: touch;
}


.gallery-track::-webkit-scrollbar {
  display: none;
}


.gallery-track.dragging {
  cursor: grabbing;

  scroll-snap-type: none;
}



/* =========================================
   FOTOS
========================================= */

.gallery-slide {
  margin: 0;

  flex: 0 0 88vw;

  width: 88vw;

  height:
    min(
      76vh,
      calc(88vw * 0.5625)
    );

  min-height: 420px;

  overflow: hidden;

  scroll-snap-align: center;

  background: #000;

  display: flex;

  align-items: center;

  justify-content: center;
}


.gallery-slide img {
  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

  pointer-events: none;
}



/* =========================================
   FLECHA DE GALERÍA
========================================= */

.gallery-next {
  position: absolute;

  top: 45%;

  right: 3vw;

  transform: translateY(-50%);

  width: 54px;

  height: 54px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.35);

  border-radius: 50%;

  background:
    rgba(0, 0, 0, 0.35);

  color: #fff;

  cursor: pointer;

  z-index: 10;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}


.gallery-next:hover {
  background:
    rgba(255, 255, 255, 0.12);

  border-color:
    rgba(255, 255, 255, 0.75);
}


.gallery-next svg {
  width: 21px;

  height: 21px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.5;

  stroke-linecap: round;

  stroke-linejoin: round;
}



/* =========================================
   LOGOS DE EVENTOS
========================================= */

.event-logos {
  width:
    min(
      800px,
      88vw
    );

  margin: 26px auto 0;

  display: grid;

  grid-template-columns:
    repeat(4, 150px);

  justify-content: center;

  align-items: center;

  gap: 38px;
}


.event-logo-box {
  width: 150px;

  height: 54px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.event-logo {
  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;
}



/* =========================================
   AJUSTE INDIVIDUAL DE LOS LOGOS
========================================= */

/*
Logo 1:
el doble del tamaño base
*/

.logo-1 {
  transform: scale(2);
}


/*
Logo 2:
50% más grande
*/

.logo-2 {
  transform: scale(1.5);
}


/*
Logo 3:
tamaño normal
*/

.logo-3 {
  transform: scale(1);
}


/*
Logo 4:
más chico
*/

.logo-4 {
  transform: scale(0.65);
}



/* =========================================
   CONTACTO
========================================= */

.contact {
  flex-direction: column;

  gap: 26px;

  text-align: center;
}


.email {
  color: #fff;

  text-decoration: none;

  font-size:
    clamp(
      20px,
      2.4vw,
      34px
    );

  font-weight: 400;

  letter-spacing: -0.025em;
}


.email:hover {
  opacity: 0.65;
}



/* =========================================
   INSTAGRAM
========================================= */

.instagram {
  width: 34px;

  height: 34px;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: opacity 0.2s ease;
}


.instagram:hover {
  opacity: 0.65;
}


.instagram svg {
  width: 100%;

  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.55;
}


.instagram .dot {
  fill: currentColor;

  stroke: none;
}



/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {


  .main-logo {
    width:
      min(
        36vw,
        230px
      );
  }


  .gallery-track {
    gap: 16px;

    padding-inline: 5vw;

    scroll-padding-inline: 5vw;
  }


  .gallery-slide {
    flex-basis: 90vw;

    width: 90vw;

    height:
      min(
        72vh,
        calc(90vw * 0.7)
      );

    min-height: 0;
  }


  .event-logos {
    width: 92vw;

    grid-template-columns:
      repeat(4, 110px);

    gap: 26px;
  }


  .event-logo-box {
    width: 110px;

    height: 42px;
  }


  .gallery-next {
    width: 48px;

    height: 48px;

    right: 18px;
  }


}



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

@media (max-width: 480px) {


  .main-logo {
    width:
      min(
        39vw,
        180px
      );
  }


  .statement h1 {
    font-size:
      clamp(
        30px,
        10vw,
        44px
      );
  }


  .section-next {
    bottom:
      max(
        24px,
        env(safe-area-inset-bottom)
      );

    width: 42px;

    height: 42px;
  }


  .section-next svg {
    width: 22px;

    height: 22px;
  }


  .gallery-track {
    gap: 12px;

    padding-inline: 4vw;

    scroll-padding-inline: 4vw;
  }


  .gallery-slide {
    flex-basis: 92vw;

    width: 92vw;

    height:
      min(
        67vh,
        calc(92vw * 0.82)
      );

    min-height: 0;
  }


  .gallery-next {
    width: 44px;

    height: 44px;

    right: 14px;

    top: 43%;
  }


  .gallery-next svg {
    width: 18px;

    height: 18px;
  }


  .event-logos {
    width: 92vw;

    margin-top: 22px;

    grid-template-columns:
      repeat(2, 110px);

    gap:
      26px 34px;
  }


  .event-logo-box {
    width: 110px;

    height: 38px;
  }


  .email {
    font-size: 20px;
  }


  .instagram {
    width: 31px;

    height: 31px;
  }


}



/* =========================================
   ACCESIBILIDAD
========================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

}