/* =====================================================
   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%;
}

/* =====================================================
   BOTONES DEL COMPÁS SONORO - MODO VISIBLE
   ===================================================== */

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

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

/* 
   CUANDO YA ESTÉN BIEN UBICADOS,
   reemplaza el bloque de arriba por este:

.compass-link {
  position: absolute;
  display: block;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 5;
}

.compass-link:hover {
  background: rgba(255, 255, 255, 0.12);
}

*/

/* =====================================================
   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;
  }
}