/* File: /css/styles.css
   Proyecto: Sonar Music — Farruko x Herencia de Timbiquí */

/* ===== Reset básico ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden; /* evita scroll */
}

/* ===== Fondo adaptable ===== */
body {
  position: relative;
  background-image: url('../img/bg-desktop.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  z-index: 0;
}

/* ===== SVG como textura ===== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('../img/HayQueVolver-01.svg');
  background-size: 100% auto; /* ocupa 95% del ancho */
  background-position: top center;
  background-repeat: repeat-y; /* se repite verticalmente */
  background-attachment: scroll;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); /* corte suave abajo */
}

/* ===== Carátula ===== */
.album-cover {
  position: relative;
  width: min(80%, 400px);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.album-cover img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* ===== Botón PRE-SAVE ===== */
.btn-presave {
  display: inline-block;
  background-color: #58767C;
  color: #fff;
  font-weight: 600;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform 0.2s ease, background-color 0.3s ease;
  z-index: 2;
}

.btn-presave:hover {
  background-color: #6b8d93;
  transform: scale(1.03);
}

/* ===== Fondo y textura para dispositivos móviles ===== */
@media (max-width: 768px) {
  html, body {
    overflow: hidden;
  }

  body {
    background-image: url('../img/bg-mobile.webp');
    background-attachment: scroll;
  }

  body::after {
    background-image: url('../img/HayQueVolver_Cel-01.svg');
    background-size: 95% auto;
    background-repeat: repeat-y;
  }

  .album-cover {
    width: 70%;
  }
}


/* ===== Botones de plataformas ===== */
.platform-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 45vw;
  z-index: 2;
  padding-top: 5vh;
  justify-content: center;
  justify-items: center;
}

.platform-buttons a {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.5rem;
  transition: transform 0.2s ease, background-color 0.3s ease;
}

.platform-buttons a:hover {
  transform: scale(1.05);
}

.platform-buttons img {
  width: 12vw;
  height: auto;
  display: block;
}

/* ===== Distribución especial (5 ítems) ===== */
.platform-buttons a:nth-child(4),
.platform-buttons a:nth-child(5) {
  grid-column: span 1;
}

/* ===== Escritorio: usamos 6 columnas lógicas para centrar la segunda fila ===== */
@media (min-width: 769px) {
  .platform-buttons {
    /* reemplaza la regla anterior de desktop por esta */
    grid-template-columns: repeat(6, 1fr);
    width: 45vw; /* mantiene tu ancho */
    gap: 1rem;
    padding-top: 5vh;
    justify-items: center;
  }

  /* Hacemos que cada botón ocupe 2 "sub-columnas" para que 3 botones llenen una fila (2+2+2) */
  .platform-buttons a {
    grid-column: span 2;
  }

  /* Primera fila: items 1,2,3 quedan en las posiciones por defecto (1-3,3-5,5-7) */

  /* Segunda fila: centramos los dos botones ocupando los bloques centrales */
  .platform-buttons a:nth-child(4) {
    grid-column: 2 / span 2; /* ocupa col 2-4 */
  }
  .platform-buttons a:nth-child(5) {
    grid-column: 4 / span 2; /* ocupa col 4-6 */
  }

  /* Ajuste del tamaño del logo si quieres mantener la proporción visual en desktop */
  .platform-buttons img {
    width: 12vw;
  }
}

/* ===== Móvil: conserva la regla que ya funciona para 2+2+1 centrada ===== */
@media (max-width: 768px) {
  .platform-buttons {
    grid-template-columns: repeat(2, 1fr);
    width: 95%;
    gap: 0.1rem;
    box-sizing: border-box;
    padding-top: 3vh;
    justify-items: center;
  }

  .platform-buttons a {
    grid-column: auto;
  }

  .platform-buttons a:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .platform-buttons img {
    width: 40vw;
  }
}