/* Estilos específicos del landing (index) */

.home-page main.wrap{
  margin-top:32px;
}

/* Hero con degradados tipo audio-hero */
.home-page .split{
  background:
    radial-gradient(circle at 0% 0%, rgba(14,148,136,.35), transparent 60%),
    radial-gradient(circle at 100% 0%, rgba(180,83,9,.36), transparent 60%),
    linear-gradient(180deg, #0b0f14, #05070a);
  border:1px solid #1b2430;
}

.home-page .left{
  background:linear-gradient(145deg, rgba(180,83,9,.96), rgba(180,83,9,.85));
}
.home-page .right{
  background:linear-gradient(145deg, rgba(14,165,165,.95), rgba(14,165,165,.86));
}

.home-page .hero-kicker{
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.home-page .mini-player{
  box-shadow:0 18px 40px rgba(0,0,0,.75);
}

/* sección mockups con más “escenario” */
.home-page #mockups .card{
  background:
    radial-gradient(circle at 0% 0%, rgba(14,148,136,.32), transparent 65%),
    radial-gradient(circle at 100% 0%, rgba(180,83,9,.28), transparent 65%),
    linear-gradient(180deg,var(--card1),var(--card2));
}
.home-page #mockups .card h2{
  letter-spacing:.08em;
}

/* bullets debajo de los mockups un poco más suaves */
.home-page #mockups .muted span{
  background:rgba(15,23,42,.75);
  border-radius:999px;
  padding:4px 10px;
  border:1px solid rgba(30,64,175,.4);
}

/* sección “¿Para quién es?” con un toque extra */
.home-page section:nth-of-type(3) .card{
  background:
    radial-gradient(circle at 0% 0%, rgba(14,148,136,.18), transparent 70%),
    radial-gradient(circle at 100% 0%, rgba(180,83,9,.16), transparent 70%),
    linear-gradient(180deg,var(--card1),var(--card2));
}