/* =====================================================
   ENANO BENDITO RECORDS - CUSTOM.CSS
   Pegar este código en: css/custom.css
   ===================================================== */

/* BASE GENERAL */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #000 !important;
  color: #ccc;
  font-family: Lato, sans-serif;
}

/* Evita fondo blanco de la plantilla Canvas */

#wrapper,
#content,
.content-wrap {
  background-color: #000 !important;
}

/* CONTENEDOR PRINCIPAL */

.page-container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 30px 15px;
}

/* TIPOGRAFÍAS */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Poppins, sans-serif;
}

/* =====================================================
   POSTER PRINCIPAL / IMAGEN 0
   ===================================================== */

.poster-home {
  position: relative;
  width: 100%;
  margin-bottom: 55px;
}

.poster-home img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Capa que contiene los 48 botones */

.compass-clicks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* =====================================================
   BOTONES DEL COMPÁS SONORO - TRANSPARENTES
   ===================================================== */

.compass-link {
  position: absolute;
  display: block;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 20;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease,
    transform 0.25s ease;
}

.compass-link:hover {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.55);
  backdrop-filter: brightness(1.25);
  transform: scale(1.02);
}

/* 
   MODO PRUEBA:
   Si quieres volver a ver los botones rojos para acomodarlos,
   reemplaza el bloque de .compass-link de arriba por este:

.compass-link {
  position: absolute;
  display: block;
  background: rgba(255, 0, 0, 0.35);
  border: 2px solid red;
  cursor: pointer;
  z-index: 20;
}

.compass-link:hover {
  background: rgba(0, 255, 255, 0.45);
  border: 2px solid cyan;
}
*/

/* =====================================================
   PLAYLISTS / RELEASES
   ===================================================== */

.release {
  margin-bottom: 55px;
  scroll-margin-top: 20px;
}

.release img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
  border-radius: 8px;
}

.release iframe {
  width: 100%;
  height: 450px;
  border: 0;
  display: block;
  margin-bottom: 8px;
}

/* Créditos debajo del reproductor de SoundCloud */

.soundcloud-credit {
  font-size: 10px;
  color: #ccc;
  line-break: anywhere;
  word-break: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: Interstate, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Garuda, Verdana, Tahoma, sans-serif;
  font-weight: 100;
}

.soundcloud-credit a {
  color: #ccc;
  text-decoration: none;
}

.soundcloud-credit a:hover {
  text-decoration: underline;
}

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

@media (max-width: 768px) {
  .page-container {
    padding: 15px 8px;
  }

  .poster-home {
    margin-bottom: 35px;
  }

  .release {
    margin-bottom: 40px;
  }

  .release iframe {
    height: 360px;
  }
}

@media (max-width: 480px) {
  .page-container {
    padding: 10px 5px;
  }

  .release iframe {
    height: 320px;
  }

  .soundcloud-credit {
    font-size: 9px;
  }
}