/* Índice: presentación de discos. Cada álbum es una funda con su vinilo; al pasar el ratón el vinilo sale y gira
   y el fondo de la página pasa al paisaje de ese álbum. Distinto de las páginas internas: sin menú lateral ni scroll por secciones. */

.home .bg { position: fixed; inset: -20px; z-index: 0; background-size: cover; background-position: center; opacity: 0;
  filter: blur(3px) brightness(.5) saturate(.9); transition: opacity 1.4s ease; transform: scale(1.04); }
.home .bg.on { opacity: 1; }
.home .veil { background: radial-gradient(120% 90% at 50% 30%, rgba(8, 12, 22, .2), rgba(8, 12, 22, .85) 75%); }

.home main { position: relative; z-index: 3; }
/* cabecera del índice: solo el logo, centrado */
.home-top { justify-content: center; }
.home-top { padding-top: 40px; }
.home-top .logo { width: 220px; } /* en el índice, el logo manda */
@media (max-width: 700px) { .home-top .logo { width: 160px; } }
.intro { max-width: 620px; margin: 0 auto; padding: 150px 24px 0; text-align: center; }
.intro .eyebrow { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .4em; text-transform: uppercase; color: var(--dim); opacity: .7; }
.intro p { margin: 22px 0 0; font-size: 16px; line-height: 1.7; color: #dfe3e7; opacity: .85; }

/* rejilla de discos */
.discs { list-style: none; margin: 0 auto; padding: 90px 40px 120px; max-width: 1280px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 90px 70px; }
.disc { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.disc.in { opacity: 1; transform: none; }
.disc a { display: block; color: var(--text); text-decoration: none; outline: none; }

/* funda + vinilo: el vinilo asoma un poco a la derecha y sale al pasar el ratón */
.sleeve-box { position: relative; width: 78%; aspect-ratio: 1; }
.vinyl-slide { position: absolute; inset: 3%; z-index: 1; transform: translateX(18%); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.vinyl { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .1);
  background:
    radial-gradient(circle, transparent 0 33%, rgba(255, 255, 255, .06) 33.4% 34%, transparent 34.5%),
    repeating-radial-gradient(circle, #121418 0 1.2px, #22252b 1.6px 2.8px),
    #16181c;
  animation: spin 2.4s linear infinite; animation-play-state: paused; }
.vinyl::before { content: ''; position: absolute; inset: 0; border-radius: 50%; /* brillo del vinilo */
  background: conic-gradient(from 30deg, transparent 0 40deg, rgba(255, 255, 255, .16) 60deg, transparent 90deg 220deg, rgba(255, 255, 255, .12) 240deg, transparent 270deg); }
.vinyl .label { position: absolute; inset: 33%; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.vinyl .label::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; translate: -50% -50%; border-radius: 50%; background: #0b0c0f; }
.sleeve { position: absolute; inset: 0; z-index: 2; border-radius: 4px; overflow: hidden; background: #111 center / cover no-repeat;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), box-shadow 1.1s; }
.sleeve::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .12), transparent 40%); }

.disc a:hover .vinyl-slide, .disc a:focus-visible .vinyl-slide { transform: translateX(46%); }
@media (hover: hover) { .disc a:hover .vinyl { animation-play-state: running; } } /* gira solo con el ratón encima */
.disc a:hover .sleeve, .disc a:focus-visible .sleeve { transform: translateX(-4%) rotate(-1.5deg); box-shadow: 0 40px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .14); }

.disc .info { margin-top: 30px; }
.disc .kind { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); opacity: .65; }
.disc h2 { font-family: 'Cormorant', Georgia, serif; font-weight: 500; font-size: 34px; letter-spacing: .03em; line-height: 1.1; margin: 8px 0 0; }
.disc .p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #dfe3e7; opacity: .8; max-width: 34ch; }
.disc .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; transition: opacity .4s, gap .4s; }
.disc a:hover .go { opacity: 1; gap: 14px; }

/* pie: redes y contacto */
.disco-foot { max-width: 1280px; margin: 0 auto; padding: 60px 40px 70px; border-top: 1px solid rgba(255, 255, 255, .1); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); opacity: .55; }
.foot-col a { color: var(--text); text-decoration: none; font-size: 15px; opacity: .85; transition: opacity .3s; width: fit-content; }
.foot-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.disco-foot .credits { margin-top: 50px; text-align: center; }
@media (max-width: 700px) { .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .disco-foot { padding: 50px 28px 60px; } }

@media (max-width: 700px) {
  .discs { grid-template-columns: 1fr; padding: 70px 28px 110px; gap: 70px; }
  .intro { padding-top: 110px; }
  .intro p { font-size: 15px; }
  .sleeve-box { width: 72%; }
  .vinyl-slide { transform: translateX(26%); } /* en el teléfono no hay ratón: el vinilo asoma más */
}
@media (prefers-reduced-motion: reduce) { .vinyl { animation: none; } .disc { transition: none; opacity: 1; transform: none; } }

/* frase discreta de apoyo al final de la presentación */
.intro-support { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; transition: text-decoration-color .3s; }
.intro-support:hover { text-decoration-color: rgba(255, 255, 255, .9); }
/* pie en 5 columnas: apoyar (texto · botón · QR) + 4 contactos con icono */
.foot-cols { grid-template-columns: 1.3fr repeat(4, 1fr); align-items: start; }
.foot-support p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #dfe3e7; }
.foot-support .support-btn { padding: 11px 22px; font-size: 12px; }
.support-qr-link { display: none; }
.foot-col a { display: inline-flex; align-items: center; gap: 9px; }
.fi { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
@media (min-width: 981px) {
  .support-qr-link { display: block; margin-top: 18px; width: fit-content; }
  .support-qr { display: block; width: 120px; height: 120px; border-radius: 12px; background: #fff; padding: 5px; image-rendering: pixelated; }
}
@media (max-width: 980px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-support { grid-column: 1 / -1; text-align: center; margin-bottom: 10px; }
  .foot-support .support-btn { margin: 0 auto; }
}
.foot-col a.support-btn { color: #0a0f19; opacity: 1; display: inline-flex; }
.foot-col a.support-btn:hover { text-decoration: none; }
.foot-col a.support-qr-link:hover { text-decoration: none; }