/* =========================================================
   AURORA INTERNA – IGUAL LÓGICA QUE CANCIONERO
   ========================================================= */

  .bg-blobs {
      position: relative;
      z-index: 0;
  }

  .bg-blobs::before,
  .bg-blobs::after {
      content: "";
      position: fixed;
      inset: -20%;
      pointer-events: none;
      z-index: 0;
      filter: blur(90px);
      opacity: .32;
      background:
          radial-gradient(520px 380px at 15% 25%, rgba(255, 255, 255, .28) 0%, transparent 60%),
          radial-gradient(520px 380px at 85% 20%, rgba(0, 0, 0, .10) 0%, transparent 60%),
          radial-gradient(520px 380px at 50% 95%, rgba(255, 255, 255, .12) 0%, transparent 60%);
      animation: floaty 18s ease-in-out infinite alternate;
  }

  .bg-blobs::after {
      animation-duration: 22s;
      transform: scale(1.05);
  }

  @keyframes floaty {
      from {
          transform: translateY(0);
      }

      to {
          transform: translateY(-10px);
      }
  }

  @media (prefers-reduced-motion: reduce) {

      .bg-blobs::before,
      .bg-blobs::after {
          animation: none;
      }
  }

  /* =========================================================
   CARD DEL LECTOR + FONDO BLANCO SEMITRANSPARENTE
   ========================================================= */

  /* Card exterior – misma lógica de “nivel” que la lista, pero para un solo elemento */
  .song-card {
      position: relative;
      z-index: 1;

      /* contenedor oscuro con acento de color */
      background:
          radial-gradient(circle at top,
              rgba(15, 23, 42, 0.96),
              rgba(15, 23, 42, 0.99));
      border-radius: 20px;
      padding: .7rem;
      margin-top: 1rem;

      border: 1px solid rgba(30, 64, 175, 0.95);
      box-shadow:
          0 18px 40px rgba(0, 0, 0, .75),
          0 0 0 1px rgba(15, 23, 42, 0.95);
  }

  /* Pequeña barra de color a la izquierda estilo “vida/energía” */
  .song-card::before {
      content: "";
      position: absolute;
      inset: 0;
      left: 0;
      width: 6px;
      border-radius: 20px;
      background:
          linear-gradient(180deg,
              #3b82f6,
              #facc15,
              #ef4444);
      box-shadow:
          0 0 12px rgba(250, 204, 21, .9),
          0 0 22px rgba(239, 68, 68, .9);
  }

  /* Interior donde va la letra: blanco semitransparente */
  .reader {
      position: relative;
      z-index: 1;

      background: rgba(255, 255, 255, 0.92);
      border-radius: 14px;
      padding: 1.1rem 1.15rem;

      color: #0f172a;
      box-shadow:
          0 0 0 1px rgba(148, 163, 184, 0.5),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  /* Texto de la letra */
  .letra {
      line-height: 1.75;
      font-size: 1.05rem;
      /* se puede sobreescribir por JS */
  }

  /* Subtítulos dentro de la letra (secciones) */
  .letra h2,
  .letra h3 {
      color: var(--brand-azul, #0133CC);
      margin-top: 1rem;
      margin-bottom: .25rem;
      scroll-margin-top: 80px;
      border-left: 4px solid var(--brand-amarillo, #FFD400);
      padding-left: .5rem;
  }

  /* =========================================================
   RESPONSIVE
   ========================================================= */

  @media (max-width: 768px) {
      .container {
          padding-left: 5%;
          padding-right: 5%;
      }

      .home-hero {
          margin-top: .6rem;
          padding-inline: .9rem;
      }

      .home-hero h1 {
          font-size: 1.3rem;
      }

      .song-card {
          border-radius: 18px;
          padding: .6rem;
      }

      .reader {
          padding: .9rem .9rem;
      }
  }

  /* =========================================================
   PÁGINA CANCIONERO – ESTILO “VIDEOJUEGO JUVENIL”
   ========================================================= */

  /* ---------- Aurora interna tipo “pantalla de juego” ---------- */
  .bg-blobs {
      position: relative;
      z-index: 0;
  }

  .bg-blobs::before,
  .bg-blobs::after {
      content: "";
      position: fixed;
      inset: -25%;
      pointer-events: none;
      z-index: 0;
      filter: blur(90px);
      opacity: .32;
      background:
          radial-gradient(520px 380px at 15% 25%, rgba(255, 255, 255, .30) 0%, transparent 60%),
          radial-gradient(520px 380px at 85% 20%, rgba(0, 0, 0, .15) 0%, transparent 60%),
          radial-gradient(520px 380px at 50% 95%, rgba(255, 255, 255, .16) 0%, transparent 60%);
      animation: floaty 18s ease-in-out infinite alternate;
  }

  .bg-blobs::after {
      animation-duration: 22s;
      transform: scale(1.05);
  }

  @keyframes floaty {
      from {
          transform: translateY(0);
      }

      to {
          transform: translateY(-10px);
      }
  }

  @media (prefers-reduced-motion: reduce) {

      .bg-blobs::before,
      .bg-blobs::after {
          animation: none;
      }
  }

  /* =========================================================
   HERO PRINCIPAL (LOGO + TÍTULO)
   ========================================================= */

  .home-hero {
      position: relative;
      z-index: 1;
      margin-top: 1.2rem;
      padding: 1rem 1.2rem 1.4rem;
      text-align: center;

      background:
          linear-gradient(135deg,
              rgba(49, 130, 246, 0.22),
              rgba(239, 68, 68, 0.18),
              rgba(250, 204, 21, 0.15));
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow:
          0 18px 45px rgba(0, 0, 0, 0.30),
          0 0 0 1px rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(14px);
  }

  .home-hero img {
      display: block;
      margin: 0 auto .6rem;
  }

  .home-hero h1 {
      font-size: 1.5rem;
      margin: 0;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      background: linear-gradient(120deg,
              var(--brand-amarillo, #facc15),
              var(--brand-azul, #2563eb),
              var(--brand-rojo, #ef4444));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow:
          0 0 10px rgba(0, 0, 0, .55),
          0 1px 0 rgba(255, 255, 255, .06);
  }

  .home-hero p {
      margin-top: .35rem;
      font-size: .9rem;
      opacity: .9;
  }

  /* =========================================================
   BUSCADOR PEGADO – ESTILO BARRA DE BÚSQUEDA “HUD”
   ========================================================= */

  .search-sticky {
      position: sticky;
      top: .6rem;
      z-index: 5;

      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: .5rem;
      align-items: center;

      backdrop-filter: blur(14px) saturate(160%);
      background:
          linear-gradient(135deg,
              rgba(15, 23, 42, 0.88),
              rgba(37, 99, 235, 0.92));
      border-radius: 14px;
      padding: .6rem .75rem;
      border: 1px solid rgba(148, 163, 184, 0.8);
      box-shadow:
          0 10px 28px rgba(15, 23, 42, 0.65),
          0 0 0 1px rgba(15, 23, 42, 0.4);
      color: #f9fafb;
  }

  .search-icon {
      font-size: 1.1rem;
  }

  .search-input {
      width: 100%;
      border-radius: 10px;
      border: 1px solid rgba(148, 163, 184, 0.9);
      background: rgba(15, 23, 42, 0.98);
      color: #e5e7eb;
      padding: .55rem .7rem;
      font-weight: 600;
      font-size: .9rem;
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .8);
      transition: border .15s ease, box-shadow .15s ease, transform .12s ease;
  }

  .search-input::placeholder {
      color: rgba(156, 163, 175, 0.95);
  }

  .search-input:focus {
      border-color: var(--brand-amarillo, #facc15);
      box-shadow:
          0 0 0 1px rgba(250, 204, 21, 0.5),
          0 0 18px rgba(250, 204, 21, 0.65);
      transform: translateY(-1px);
  }

  /* Contador de resultados tipo “badge” de videojuego */
  .count-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.2rem;
      font-weight: 800;
      font-size: .75rem;

      background:
          linear-gradient(145deg,
              var(--brand-amarillo, #facc15),
              var(--brand-rojo, #ef4444));
      color: #111827;
      border: 1px solid rgba(15, 23, 42, .8);
      border-radius: 999px;
      padding: .2rem .6rem;
      box-shadow:
          0 4px 12px rgba(0, 0, 0, .45),
          0 0 0 1px rgba(248, 250, 252, 0.7);
  }

  /* =========================================================
   LISTA TIPO “SELECTOR DE NIVELES”
   ========================================================= */

  .list-wrap {
      position: relative;
      z-index: 1;
      margin-top: .5rem;

      background: radial-gradient(circle at top,
              rgba(15, 23, 42, 0.85),
              rgba(15, 23, 42, 0.98));
      border-radius: 18px;
      border: 1px solid rgba(148, 163, 184, 0.65);
      box-shadow:
          0 16px 40px rgba(0, 0, 0, .70),
          0 0 0 1px rgba(15, 23, 42, 0.85);
      padding: .35rem;
      overflow: hidden;
  }

  .list {
      display: flex;
      flex-direction: column;
      gap: .35rem;
      margin: 0;
      padding: 0;
      list-style: none;
  }

  /* Cada canción como “botón de nivel” */
  .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;

      padding: .68rem .8rem;
      border-radius: 12px;
      text-decoration: none;

      background:
          linear-gradient(120deg,
              rgba(30, 64, 175, 0.92),
              rgba(59, 130, 246, 0.96));
      color: #f9fafb;

      border: 1px solid rgba(30, 64, 175, 0.95);
      box-shadow:
          0 8px 22px rgba(15, 23, 42, 0.8),
          0 0 0 1px rgba(15, 23, 42, 0.9);

      transition:
          background .15s ease,
          transform .12s ease,
          box-shadow .15s ease,
          filter .15s ease;
  }

  .item:hover {
      background:
          linear-gradient(120deg,
              rgba(37, 99, 235, 1),
              rgba(250, 204, 21, 0.98));
      transform: translateY(-2px);
      box-shadow:
          0 12px 30px rgba(0, 0, 0, .85),
          0 0 0 1px rgba(250, 250, 250, 0.7);
      filter: saturate(120%);
  }

  .item:active {
      transform: translateY(0);
      box-shadow:
          0 4px 14px rgba(0, 0, 0, .7),
          0 0 0 1px rgba(15, 23, 42, 0.9);
  }

  /* “Texto de nivel” (nombre de canción) */
  .song-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 700;
      font-size: .9rem;
      letter-spacing: .02em;
  }

  /* Icono 🎶 con efecto leve */
  .song-icon {
      opacity: .95;
      font-size: 1.1rem;
      text-shadow:
          0 0 6px rgba(251, 191, 36, 0.9),
          0 0 14px rgba(251, 191, 36, 0.9);
  }

  /* =========================================================
   PEQUEÑOS AJUSTES RESPONSIVOS
   ========================================================= */

  @media (max-width: 768px) {
      .home-hero {
          margin-top: .6rem;
          padding-inline: .95rem;
      }

      .home-hero h1 {
          font-size: 1.25rem;
      }

      .search-sticky {
          top: .4rem;
          padding-inline: .6rem;
      }

      .item {
          padding: .62rem .7rem;
      }

      .song-title {
          font-size: .85rem;
      }

      .list-wrap {
          border-radius: 16px;
      }

      /* Si tu layout tiene .container global, esto suaviza los laterales en móvil */
      .container {
          padding-inline: 5%;
      }
  }