body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #0a0a0a;
  color: #f2f2f2;
  display: block;
}

.sidebar {
  width: 230px;
  background: rgba(25, 0, 40, 0.25); /* cristal más fino */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: none; /* quitamos línea dura */
  box-shadow: 0 0 20px rgba(255, 0, 204, 0.08); /* solo glow suave */
  padding: 30px 20px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  color: #fff;
  background-image: none !important; /* esto evita bandas de gradientes */
}


.sidebar .logo {
  font-size: 1.6rem;
  font-weight: bold;
  color: #ff66cc;
  text-align: center;
  margin-bottom: 40px;
}

.sidebar nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar nav ul li {
  margin: 22px 0;
}

.sidebar nav ul li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05em;
  transition: all 0.3s ease;
  padding: 6px 12px;
  border-radius: 12px;
}

.sidebar nav ul li a:hover {
  background-color: rgba(255, 0, 204, 0.08);
  color: #ff99dd;
  transform: translateX(4px);
}

.sidebar nav ul li a i {
  color: #ff66cc;
  font-size: 1.2em;
  transition: transform 0.3s ease, color 0.3s ease;
}

.sidebar nav ul li a:hover i {
  transform: scale(1.2);
  color: #ffaadd;
}

/* Main Content */
.main-content {
  margin-left: 240px;
  padding: 40px;
  flex-grow: 1;
  background-color: #0a0a0a;
  box-shadow: inset 4px 0 8px -4px #ff00cc33;
}

/* Hero con partículas */
.hero {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.overlay {
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.55);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 0 15px #ff66cc66;
}

.hero h1 {
  font-size: 3rem;
  color: #ff66cc;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  color: #f0f0f0;
}

/* Sección musica */

.section-block {
  margin-bottom: 80px;
}

.section-title {
  font-size: 2.2rem;
  color: #ff66cc;
  margin-bottom: 10px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #bbb;
  margin-bottom: 30px;
}

.music-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.song-card {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 12px #ff66cc33;
  width: calc(33.333% - 20px);
  min-width: 240px;
  transition: transform 0.3s;
}

.song-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 18px #ff66cc66;
}

.song-card .cover {
  height: 160px;
  background: linear-gradient(145deg, #ff66cc55, #000);
  border-radius: 12px;
  margin-bottom: 16px;
}

.song-card h3 {
  color: #f2f2f2;
  margin-bottom: 6px;
}

.song-card .tagline {
  color: #ccc;
  font-style: italic;
  font-size: 0.95rem;
}

/* 🌸 TIENDA – Noaura Style */
.section-block#tienda {
  background-color: #0f0f0f;
  padding: 60px 30px;
  border-top: 2px solid #ff66cc33;
}

.section-block#tienda .section-title {
  font-size: 2.5em;
  color: #ff99cc;
  margin-bottom: 20px;
  text-align: center;
  text-shadow: 0 0 10px #ff99cc88;
}

.section-block#tienda .section-subtitle {
  color: #ccc;
  text-align: center;
  margin-bottom: 40px;
  font-style: italic;
}

.shop-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.product-card {
  background: #1a1a1a;
  border: 1px solid #ff66cc55;
  border-radius: 16px;
  padding: 20px;
  width: 220px;
  text-align: center;
  box-shadow: 0 0 12px #ff66cc33;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px #ff66cc66;
}

.product-img {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, #ff66cc, #cc00aa);
  border-radius: 12px;
  margin-bottom: 15px;
}

.product-card h3 {
  color: #fff;
  font-size: 1.1em;
  margin: 10px 0;
}

.price {
  color: #ffb6e6;
  font-weight: bold;
  margin-bottom: 12px;
}

.buy-btn {
  background: linear-gradient(135deg, #ff66cc, #cc3399);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.buy-btn:hover {
  background: linear-gradient(135deg, #e64db1, #aa2277);
}

/* Radio NoauraStudios */
.radio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  box-shadow: 0 0 20px #ff66cc33;
}

.radio-frame {
  width: 100%;
  max-width: 420px;
  height: 80px;
  border-radius: 12px;
  box-shadow: 0 0 12px #ff66cc55;
  background-color: #111;
}

.tagline {
  margin-top: 12px;
  color: #ffccff;
  font-style: italic;
  font-size: 1rem;
}

/* Portada Radio NoauraStudios */
.portada-animada {
  max-width: 300px;
  border-radius: 20px;
  margin: 15px auto;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  box-shadow: 0 0 25px 3px #ff00cc88;
  animation: pulseGlow 3s infinite ease-in-out;
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 15px #ff00cc44; }
  50% { box-shadow: 0 0 30px #ff00ccaa; }
  100% { box-shadow: 0 0 15px #ff00cc44; }
}

.frase-mistica {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 10px;
  font-style: italic;
  font-size: 1.2em;
  color: #ffccf0;
  min-height: 1.5em; /* evita el salto antes de escribir */
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #ffccf0;
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #ffccf0; }
}

.main-content {
  margin-left: 240px;
  padding: 40px;
  flex-grow: 1;
  background-color: #0a0a0a;
  box-shadow: inset 4px 0 8px -4px #ff00cc33;
}


.cover-img {
  width: 100%;
  height:290px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 0 10px #ff66cc44;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cover-img:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px #ff33cc66;
}

.music-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.song-card {
  width: 100%;
  max-width: 320px;
  background: #1a1a1a;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 0 12px #ff66cc33;
  text-align: left;
  transition: transform 0.3s ease;
}

.song-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 18px #ff33cc66;
}
@media (max-width: 600px) {
  .song-card {
    max-width: 90%;
  }
}
.cover {
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
}
.song-card {
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.music-grid {
  row-gap: 40px;
}
.song-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.titulo-cancion {
  color: white;
  font-weight: bold;
  font-size: 1em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.emoji-rosa {
  color: #ff00cc !important;
  font-size: 1.2em;
  display: inline-block;
}

.humo-fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.capa {
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 0, 255, 0.07), transparent 70%),
              radial-gradient(circle at 70% 70%, rgba(255, 153, 255, 0.06), transparent 70%);
  animation: flotar 60s linear infinite;
  opacity: 0.2;
  filter: blur(60px);
}

.capa1 {
  animation-delay: 0s;
}
.capa2 {
  animation-delay: 20s;
}
.capa3 {
  animation-delay: 40s;
}

@keyframes flotar {
  0% { transform: translate(-10%, -10%) scale(1); }
  50% { transform: translate(10%, 10%) scale(1.1); }
  100% { transform: translate(-10%, -10%) scale(1); }
}

.menu-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  font-size: 2rem;
  z-index: 1101;
  color: #ff66cc;
  cursor: pointer;
  display: none;
}

@media screen and (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 75vw;
    max-width: 300px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1100;
    background: linear-gradient(to bottom, #1a001f, #330033);
    box-shadow: 0 0 20px rgba(255, 0, 204, 0.2);
  }

  body.menu-open .sidebar {
    transform: translateX(0);
  }

  body.menu-open {
    overflow: hidden;
  }
}

.bio-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bio-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding-top: 20px;
}

.bio-img {
  max-width: 360px;
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(255, 105, 180, 0.3);
  transition: transform 0.3s ease;
}

.bio-img:hover {
  transform: scale(1.02);
}

.bio-text {
  max-width: 600px;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #f0f0f0;
}

#bio {
  margin-bottom: 100px;
}

#redes {
  margin-top: 100px;
  padding-top: 60px;
  border-top: 2px solid rgba(255, 105, 180, 0.2); /* línea suave neón */
}
#redes {
  background: radial-gradient(circle at top, rgba(255, 0, 204, 0.04), transparent);
  border-radius: 20px;
  padding: 60px 20px;
}
.section-divider {
  text-align: center;
  font-size: 1.2rem;
  margin: 60px 0 30px;
  color: #ff66cc;
  text-shadow: 0 0 8px rgba(255, 102, 204, 0.5);
}

.section-block {
  transition: opacity 0.5s ease, filter 0.5s ease;
}

.dimmed {
  opacity: 0.2;
  filter: blur(1px);
}

body {
  background: linear-gradient(145deg, #0a0a0a, #1a001a);
  background-size: 400% 400%;
  animation: movimiento 12s ease infinite;
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  color: white;
}

@keyframes movimiento {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100%;
  background: #1f1f1f;
  padding: 20px;
  box-shadow: 2px 0 10px rgba(255, 102, 204, 0.2);
  z-index: 2;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #ff66cc;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar ul li {
  margin: 10px 0;
}

.sidebar ul li a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}

.sidebar ul li a:hover {
  color: #ff66cc;
}

.section-title {
  font-size: 26px;
  color: #ff66cc;
  margin-bottom: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.song-card a {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.3s ease;
}

.song-card a:hover {
  transform: scale(1.02);
}

.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.icon-grid a img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 102, 204, 0.3);
}

.icon-grid a img:hover {
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(255, 102, 204, 0.6);
}

/* 💿 Bloque Discografía */
.oferta-discografia {
  background: #111;
  border: 2px solid #ff4081;
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 0 25px #ff1c68;
  margin-bottom: 30px;
}

.oferta-discografia h2 {
  color: #ff9bd5;
  font-size: 26px;
  margin-bottom: 10px;
}

.oferta-discografia .precio {
  font-size: 22px;
  margin: 10px 0;
}

.oferta-discografia .precio span {
  font-size: 30px;
  font-weight: bold;
  color: #ff4081;
  animation: pulse 2s infinite;
}

.oferta-discografia .subtitulo {
  font-style: italic;
  color: #ddd;
  margin-bottom: 20px;
}

.oferta-discografia .botones {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.oferta-discografia .btn-comprar,
.oferta-discografia .btn-suscribir {
  padding: 12px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.oferta-discografia .btn-comprar {
  background: #ff4081;
  color: white;
  box-shadow: 0 0 12px #ff4081;
}

.oferta-discografia .btn-suscribir {
  background: transparent;
  border: 2px solid #ff4081;
  color: #ff4081;
}

.oferta-discografia .btn-comprar:hover,
.oferta-discografia .btn-suscribir:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #ff1c68;
}

.oferta-discografia .confianza {
  font-size: 13px;
  color: #aaa;
  margin-top: 10px;
}


/* 🔥 Animación precio */
@keyframes pulse {
  0% { text-shadow: 0 0 5px #ff1c68; }
  50% { text-shadow: 0 0 20px #ff4081; }
  100% { text-shadow: 0 0 5px #ff1c68; }
}

/* 💿 Oferta Discografía */
.oferta-discografia {
  padding: 40px; /* más aire */
}

.oferta-discografia h2 {
  font-size: 32px; /* más grande */
  margin-bottom: 15px;
}

.oferta-discografia .precio {
  font-size: 26px;
  margin: 15px 0;
}

.oferta-discografia .precio span {
  font-size: 38px; /* el precio enorme */
}

.oferta-discografia .subtitulo {
  font-size: 18px;
  margin-bottom: 25px;
}

.oferta-discografia .btn-comprar,
.oferta-discografia .btn-suscribir {
  font-size: 18px;
  padding: 16px 28px; /* botones más gorditos */
}

.oferta-discografia .confianza {
  font-size: 15px;
  margin-top: 15px;
}

/* Botón principal de compra */
.btn-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.buy-btn {
  background: #ff4081;
  border: 0;
  padding: 10px 22px;
  border-radius: 26px;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 12px #ff4081;
  cursor: pointer;
  transition: .25s ease;
}
.buy-btn:hover { background:#ff1c68; box-shadow:0 0 18px #ff1c68; }

/* Enlace “Info canciones” bajo el botón */
.info-link{
  background: none;
  border: 0;
  margin-top: 8px;
  color: #ff9bd5;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.info-link::after{
  content: "▾";
  font-size: .9em;
  transition: transform .2s ease;
}
.info-link.open::after{ transform: rotate(180deg); }

/* Panel de canciones (plegable) */
.tracklist-wrap{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #ff4081;
  border-radius: 12px;
  background: rgba(255,64,129,.08);
  box-shadow: inset 0 0 8px rgba(255,64,129,.25);
  animation: drop .18s ease;
}
@keyframes drop{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }

/* Lista numerada limpia y alineada (sin duplicados) */
.tracklist{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: trk;
}
.tracklist li{
  counter-increment: trk;
  position: relative;
  padding-left: 1.6rem;
  margin: 6px 0;
  color: #eee;
}
.tracklist li::before{
  content: counter(trk) ".";
  position: absolute;
  left: 0;
  color: #ff9bd5;
  width: 1.2rem;
  text-align: right;
}


.planes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.plan-card {
  background-color: #130013;
  border: 2px solid #ff4fc4;
  border-radius: 20px;
  padding: 30px 20px;
  width: 280px;
  color: #fce1f5;
  text-align: center;
  box-shadow: 0 0 25px #ff4fc455;
  transition: transform 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 30px #ff4fc4aa;
}

.plan-card h4 {
  font-size: 1.4rem;
  color: #ff4fc4;
  margin-bottom: 10px;
}

.plan-card .precio {
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffffff;
  margin: 5px 0;
}

.plan-card .duracion {
  font-size: 0.9rem;
  font-style: italic;
  color: #f3bbec;
  margin-bottom: 15px;
}

.plan-img {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  box-shadow: 0 0 10px #ff4fc4aa;
}

.plan-card ul {
  text-align: left;
  margin: 15px 0;
  padding-left: 0;
  list-style: none;
}

.plan-card ul li {
  padding: 6px 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-premium {
  background-color: #ff4fc4;
  color: #130013;
  border: none;
  padding: 10px 18px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.btn-premium:hover {
  background-color: #ff6bd5;
  box-shadow: 0 0 18px #ff4fc480;
  transform: scale(1.05);
}

.premium h3,
.premium p,
.planes-container {
  text-align: center;
}

.plan-img {
  display: block;
  margin: 10px auto;      /* centrado */
  width: 120px;           /* tamaño fijo limpio */
  height: auto;           /* mantiene proporción */
  border-radius: 0;       /* sin bordes redondeados */
  box-shadow: none;       /* sin neón */
  background: transparent;/* sin fondo raro */
  object-fit: contain;    /* que nunca se deforme */
}