/* =============================================================================
   ÁUREA — Experiencias Sonoras
   -----------------------------------------------------------------------------
   Subapp de bienestar sonoro dentro de la App de Expansión. Misma artesanía
   que el resto (glass liquid, sombras extremadamente suaves, holograma sutil)
   pero con identidad propia: carbón + champagne + dorado pálido, en vez del
   warm-ivory del resto de la app — "luxury wellness technology", no una
   biblioteca de audios. Regla de composición: mucho espacio negativo.
   ========================================================================= */

.aurea-shell {
  --a-carbon:    #161616;
  --a-champagne: #C7B7A2;
  --a-gold:      #B19B81;
  --a-taupe:     #A39C93;
  --a-cream:     #EFE9E1;

  --a-surface:   color-mix(in srgb, var(--a-cream) 5%, var(--a-carbon));
  --a-surface-2: color-mix(in srgb, var(--a-cream) 9%, var(--a-carbon));
  --a-line:      color-mix(in srgb, var(--a-champagne) 16%, transparent);
  --a-glass-bg:      color-mix(in srgb, var(--a-cream) 6%, transparent);
  --a-glass-border:  color-mix(in srgb, var(--a-champagne) 26%, transparent);
  --a-glass-filter:  blur(22px) saturate(1.25) brightness(1.02);
  --a-text:      var(--a-cream);
  --a-text-soft: var(--a-taupe);
  --a-sh-soft: 0 1px 0 color-mix(in srgb, var(--a-cream) 5%, transparent), 0 24px 54px -34px rgba(0, 0, 0, 0.6);

  background:
    radial-gradient(ellipse 70% 45% at 85% 8%, color-mix(in srgb, var(--a-gold) 16%, transparent), transparent 60%),
    radial-gradient(ellipse 120% 55% at 50% 0%, color-mix(in srgb, var(--a-champagne) 11%, var(--a-carbon)), var(--a-carbon) 62%);
  color: var(--a-text);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 44px) 96px;
  position: relative;
  overflow: hidden;
}
.aurea-shell * { box-sizing: border-box; }

/* ---------- hero (home): foto de borde a borde + diagrama + texto -------
   Antes era un simple saludo centrado sobre el fondo del shell; ahora es su
   propia escena — misma receta que las tarjetas de categoría (foto + velo +
   grano), con el diagrama en proporción áurea como firma visual a la
   derecha y todo el texto justificado a la izquierda. */
.aurea-hero {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap;
  border-radius: 24px;
  overflow: hidden;
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 32px;
  min-height: 240px;
  background-size: cover;
  background-position: center;
}
/* el degradado de velo es el mismo para los dos productos (misma paleta);
   solo cambia la fotografía de fondo debajo. */
.aurea-hero--aurea {
  background-image:
    linear-gradient(100deg, color-mix(in srgb, var(--a-carbon) 86%, transparent) 0%, color-mix(in srgb, var(--a-carbon) 58%, transparent) 42%, color-mix(in srgb, var(--a-carbon) 22%, transparent) 72%, color-mix(in srgb, var(--a-carbon) 10%, transparent) 100%),
    url("../assets/aurea-hero.jpg");
}
.aurea-hero--hipnosis {
  background-image:
    linear-gradient(100deg, color-mix(in srgb, var(--a-carbon) 86%, transparent) 0%, color-mix(in srgb, var(--a-carbon) 58%, transparent) 42%, color-mix(in srgb, var(--a-carbon) 22%, transparent) 72%, color-mix(in srgb, var(--a-carbon) 10%, transparent) 100%),
    url("../assets/hipnosis-hero.jpg");
}
.aurea-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.18;
  pointer-events: none;
}
.aurea-hero__text { position: relative; z-index: 2; max-width: 46ch; text-align: left; }
.aurea-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(var(--t-caption) * 1.2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-gold);
}
/* wordmark: el nombre de la subapp como marca propia, no como un título de
   página más — tracking amplio, mayúsculas, una línea delgada debajo. */
.aurea-wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.52rem, 1.92rem + 2.88vw, 3.6rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a-cream);
  line-height: 1;
  margin: 0;
}
.aurea-hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.38rem, 1.2rem + 0.72vw, 1.68rem);
  color: var(--a-cream);
  margin: 4px 0 4px;
  line-height: 1.2;
}
.aurea-hero__desc {
  font-size: 1.104rem;
  color: color-mix(in srgb, var(--a-cream) 72%, transparent);
  line-height: 1.5;
  margin: 0 0 12px;
}

/* cápsulas de especificación — dato pequeño, nunca gritado */
.aurea-specs { display: flex; flex-wrap: wrap; gap: 8px; }
.aurea-spec {
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.03em;
  color: var(--a-champagne);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--a-champagne) 32%, transparent);
  background: color-mix(in srgb, var(--a-cream) 6%, transparent);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .aurea-hero { padding: 28px 22px; }
}

.aurea-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 1.92rem + 2.16vw, 3.24rem);
  color: var(--a-text);
  text-align: left;
  margin: 4px 0 32px;
}

/* ---------- navegación de categoría ------------------------------------- */
.aurea-catnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.aurea-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--a-champagne); font-size: 1.08rem;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.aurea-back svg { width: 16px; height: 16px; }
.aurea-back:hover { color: var(--a-cream); }
.aurea-catnav__count {
  font-family: var(--font-mono); font-size: 0.816rem; letter-spacing: 0.08em;
  color: var(--a-text-soft);
}

/* ---------- orbe holográfico (CSS en reposo) ---------------------------- */
.aurea-orb { position: relative; flex: none; }
.aurea-orb--xs { width: 30px; height: 30px; }
.aurea-orb--md { width: 84px; height: 84px; margin: 0 auto 20px; }
.aurea-orb--lg { width: 168px; height: 168px; margin: 0 auto 18px; }
.aurea-orb__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--a-line);
}
.aurea-orb__ring.r2 { inset: 19.1%; border-color: color-mix(in srgb, var(--a-champagne) 30%, transparent); }
.aurea-orb__ring.r3 { inset: 30.9%; border-color: color-mix(in srgb, var(--a-champagne) 46%, transparent); }
.aurea-orb__core {
  position: absolute; inset: 40%; border-radius: 50%;
  background: radial-gradient(circle, var(--a-champagne), color-mix(in srgb, var(--a-gold) 60%, transparent) 70%, transparent 100%);
  opacity: 0.55;
  transition: opacity 0.6s ease;
}
.aurea-orb.is-playing .aurea-orb__core { opacity: 0.95; animation: aurea-breathe 2.6s ease-in-out infinite; }
.aurea-orb.is-playing .r1 { animation: aurea-spin 50s linear infinite; }
.aurea-orb.is-playing .r2 { animation: aurea-spin 34s linear infinite reverse; }
.aurea-orb.is-playing .r3 { animation: aurea-spin 21s linear infinite; }
@keyframes aurea-spin { to { transform: rotate(360deg); } }
@keyframes aurea-breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.14); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .aurea-orb__ring, .aurea-orb__core { animation: none !important; }
}

/* ---------- "portadas" por categoría (foto real) ------------------------
   Un solo lenguaje visual reutilizado en 3 tamaños: tarjeta de categoría,
   miniatura del "ahora suena" y miniatura del mini-reproductor. */
.aurea-cover {
  position: relative; border-radius: 14px; overflow: hidden; flex: none;
  background-size: cover; background-position: center;
}
/* grano sutil encima de la foto — mismo tratamiento "fílmico" en toda la
   subapp, no solo donde antes había gradiente. */
.aurea-cover::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.22;
  pointer-events: none;
}
.aurea-cover.cover-claridad { background-image: url("../assets/aurea-claridad.jpg"); }
.aurea-cover.cover-nervioso { background-image: url("../assets/aurea-nervioso.jpg"); }
.aurea-cover.cover-flow { background-image: url("../assets/aurea-flow.jpg"); }
.aurea-cover.cover-riqueza { background-image: url("../assets/hipnosis-riqueza.jpg"); }
.aurea-cover.cover-vitalidad { background-image: url("../assets/hipnosis-vitalidad.jpg"); }
.aurea-cover.cover-magnetismo { background-image: url("../assets/hipnosis-magnetismo.jpg"); }
.aurea-cover--now { width: 108px; height: 108px; border-radius: 16px; }
.aurea-cover--mini { width: 42px; height: 42px; border-radius: 10px; }
.aurea-cover--sm { width: 42px; height: 42px; border-radius: 10px; }
.aurea-cover--cat {
  width: 168px; height: 168px; margin: 0 auto 18px; border-radius: 24px;
  box-shadow: 0 1px 0 rgba(239, 233, 225, 0.12) inset, 0 28px 54px -28px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.3s ease;
}
.aurea-cover--cat.is-playing {
  box-shadow: 0 1px 0 rgba(239, 233, 225, 0.12) inset, 0 0 0 1px rgba(199, 183, 162, 0.4), 0 28px 60px -24px rgba(177, 155, 129, 0.45);
}
@media (max-width: 640px) { .aurea-cover--cat { width: 140px; height: 140px; } }

/* ---------- tarjeta "ahora suena" (glass liquid) ------------------------ */
.aurea-now {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 2px;
  padding: clamp(24px, 4vw, 36px) clamp(16px, 4vw, 28px);
  border-radius: 28px;
  background: var(--a-glass-bg);
  border: 1px solid var(--a-glass-border);
  backdrop-filter: var(--a-glass-filter);
  -webkit-backdrop-filter: var(--a-glass-filter);
  box-shadow: var(--a-sh-soft);
  margin-bottom: 40px;
}
.aurea-now--cat { padding-top: clamp(32px, 5vw, 44px); }
.aurea-now__t { font-family: var(--font-display); font-size: 1.56rem; color: var(--a-text); margin: 0; }
.aurea-now__meta { font-family: var(--font-mono); font-size: 0.888rem; letter-spacing: 0.04em; color: var(--a-text-soft); margin: 4px 0 18px; text-transform: uppercase; }
.aurea-now__empty, .aurea-now__done { color: var(--a-text-soft); font-size: 1.14rem; margin: 4px 0 0; }
.aurea-now__cta {
  background: color-mix(in srgb, var(--a-champagne) 16%, transparent);
  border: 1px solid var(--a-glass-border); border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--a-champagne); font-size: 1.02rem;
  padding: 10px 18px;
}
.aurea-now__cta svg { width: 14px; height: 14px; }
.aurea-now__cta:hover { color: var(--a-cream); border-color: var(--a-champagne); }
.aurea-now__ctrls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; }

.aurea-now__bar {
  width: 100%; max-width: 320px; height: 3px; border-radius: 3px;
  background: color-mix(in srgb, var(--a-cream) 14%, transparent);
  cursor: pointer; margin: 4px 0 18px;
}
.aurea-now__fill { display: block; height: 100%; width: 0%; border-radius: 3px; background: var(--a-champagne); transition: width 0.2s linear; }

/* ---------- variante horizontal (home): miniatura + contenido ----------- */
.aurea-now--home {
  flex-direction: row; align-items: center; text-align: left;
  gap: 20px; padding: 18px 22px;
}
.aurea-now--home .aurea-now__bar { max-width: none; margin: 10px 0 4px; }
.aurea-now--home.is-empty, .aurea-now--home.is-idle, .aurea-now--home.is-terminado { align-items: center; }
.aurea-now__main { flex: 1; min-width: 0; }
.aurea-now__label {
  display: block; font-family: var(--font-mono); font-size: 0.792rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-gold); margin-bottom: 4px;
}
.aurea-now__time { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.816rem; color: var(--a-text-soft); margin: 0 0 14px; }
.aurea-now__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aurea-now--home .aurea-now__ctrls { justify-content: flex-start; margin: 0; }
@media (max-width: 560px) {
  .aurea-now--home { flex-direction: column; text-align: center; }
  .aurea-now--home .aurea-now__row { justify-content: center; }
}

/* glass liquid real: vidrio esmerilado con blur, un filo de luz arriba
   (relieve) y una sombra de contacto abajo (profundidad) — no un círculo
   plano con borde. El botón principal, además, en vidrio champagne sólido
   con el mismo relieve, como una gota. */
.aurea-ctrl {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Colores sólidos (rgba), no color-mix(): el fondo/borde de este control
     tiene que verse SIEMPRE, incluso si el navegador no soporta color-mix()
     o si backdrop-filter no se renderiza — no puede depender de ninguna de
     las dos para tener contraste. */
  border: 1px solid rgba(199, 183, 162, 0.6);
  background: rgba(239, 233, 225, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #efe9e1;
  cursor: pointer;
  box-shadow:
    inset 0 1.5px 0 rgba(239, 233, 225, 0.55),
    inset 0 -1px 3px rgba(22, 22, 22, 0.4),
    0 6px 14px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.aurea-ctrl svg { width: 16px; height: 16px; stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.aurea-ctrl:hover { border-color: rgba(199, 183, 162, 0.9); transform: translateY(-1px); }
.aurea-ctrl:active { transform: translateY(0); }
.aurea-ctrl--main {
  width: 52px; height: 52px;
  background: linear-gradient(160deg, #ded2c0 0%, #c7b7a2 55%, #b9a58d 100%);
  color: #161616;
  border: 1px solid rgba(239, 233, 225, 0.5);
  box-shadow:
    inset 0 1.5px 0 rgba(239, 233, 225, 0.7),
    inset 0 -3px 5px rgba(22, 22, 22, 0.28),
    0 10px 22px -10px rgba(177, 155, 129, 0.7);
}
.aurea-ctrl--main svg { width: 19px; height: 19px; }
.aurea-ctrl--main:hover { filter: brightness(1.08); }

/* ---------- bloqueo: venta del upsell ------------------------------------
   Cuando no se ha comprado, el hero deja de ser "bienvenida" y pasa a ser
   una pantalla de venta: contenido centrado, candado luminoso, CTA dorado
   directo a Hotmart. Mismo fondo/velo/grano que la versión comprada — solo
   cambia la composición del texto encima. */
/* Sin foto: la pantalla de venta se sostiene sola con el candado, el CTA y
   el mismo degradado ambiental carbón + dorado del resto del shell — nada
   detrás del texto para competir con él. (Probado con foto primero: incluso
   oscurecida, seguía ganándole protagonismo al texto centrado.) */
.aurea-hero.is-locked {
  justify-content: center; text-align: center; min-height: 340px;
  padding: clamp(36px, 5vw, 52px) clamp(24px, 4vw, 40px);
  /* mismo degradado del resto del shell (ya probado, se funde sin dejar
     ningún borde visible) — el anterior, más contrastado y centrado en la
     propia tarjeta, se veía como una mancha elíptica detrás del candado. */
  background-image:
    radial-gradient(ellipse 70% 45% at 85% 8%, color-mix(in srgb, var(--a-gold) 16%, transparent), transparent 60%),
    radial-gradient(ellipse 120% 55% at 50% 0%, color-mix(in srgb, var(--a-champagne) 11%, var(--a-carbon)), var(--a-carbon) 62%);
  /* relieve glass liquid: el mismo filo de luz arriba + sombra de contacto
     que ya usan .aurea-now/.aurea-catcard, para que la tarjeta se sienta
     con cuerpo y no como un rectángulo de color plano. */
  border: 1px solid var(--a-glass-border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--a-cream) 16%, transparent), var(--a-sh-soft);
}
.aurea-hero.is-locked .aurea-hero__text {
  max-width: 54ch; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.aurea-hero.is-locked .aurea-hero__desc { max-width: 42ch; }
.aurea-lockbadge {
  position: relative;
  flex: none;
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  color: var(--a-cream);
  background: color-mix(in srgb, var(--a-cream) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--a-champagne) 45%, transparent);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--a-gold) 25%, transparent),
    0 0 44px -4px color-mix(in srgb, var(--a-gold) 70%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--a-cream) 40%, transparent);
}
/* halo ambiental detrás del candado — el mismo "respiro" que ya usa el orbe
   en reposo (aurea-breathe), para que la pantalla de venta se sienta viva
   sin depender de una animación nueva. */
.aurea-lockbadge::after {
  content: "";
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--a-gold) 55%, transparent), transparent 70%);
  opacity: 0.6;
  animation: aurea-breathe 3.6s ease-in-out infinite;
  z-index: -1;
}
/* anillo que gira — mismo lenguaje que los anillos del reproductor
   (.aurea-orb), un solo tramo más dorado marca el giro sin ser un spinner
   de carga. Firma visual del candado, no decoración suelta. Más rápido que
   la primera versión (16s) para que el movimiento se note de un vistazo. */
.aurea-lockbadge::before {
  content: "";
  position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--a-champagne) 30%, transparent);
  border-top-color: color-mix(in srgb, var(--a-gold) 80%, transparent);
  animation: aurea-spin 7s linear infinite;
}
/* el candado entero respira (crece/se encoge) y, encima, el gancho del
   candado (el único <path>, el cuerpo es el <rect>) se levanta y vuelve a
   caer como si estuviera a punto de abrirse — la seña de "casi se abre",
   no solo un brillo de fondo. */
.aurea-lockbadge {
  animation: aurea-badge-pulse 3.2s ease-in-out infinite;
}
.aurea-lockbadge svg { width: 26px; height: 26px; stroke-width: 1.6; }
.aurea-lockbadge svg path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: aurea-shackle-tease 3.2s ease-in-out infinite;
}
@keyframes aurea-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes aurea-shackle-tease {
  0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
  80% { transform: translateY(-1.6px) rotate(-9deg); }
  90% { transform: translateY(-0.4px) rotate(3deg); }
}
.aurea-hero.is-locked .aurea-specs { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .aurea-lockbadge::after, .aurea-lockbadge::before, .aurea-lockbadge, .aurea-lockbadge svg path { animation: none !important; }
}

/* CTA dorado — mismo "vidrio sólido champagne" que .aurea-ctrl--main, en
   forma de píldora con texto, para que se lea como UN lenguaje de marca.
   Lleva el mismo halo dorado que el candado, para que ambos se sientan
   parte de un mismo momento (no un botón cualquiera pegado debajo). */
.aurea-hero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 10px 0 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 1.08rem;
  color: #161616;
  background: linear-gradient(160deg, #ded2c0 0%, #c7b7a2 55%, #b9a58d 100%);
  border: 1px solid rgba(239, 233, 225, 0.5);
  box-shadow:
    inset 0 1.5px 0 rgba(239, 233, 225, 0.7),
    inset 0 -3px 5px rgba(22, 22, 22, 0.28),
    0 14px 30px -12px rgba(177, 155, 129, 0.75),
    0 0 46px -14px color-mix(in srgb, var(--a-gold) 85%, transparent);
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.2s ease;
}
.aurea-hero__cta svg { width: 18px; height: 18px; }
.aurea-hero__cta:hover { transform: translateY(-1px); filter: brightness(1.07); }
.aurea-hero__cta:active { transform: translateY(0); }
.aurea-hero__recheck {
  background: none; border: 0; padding: 0; margin: 0 0 18px; cursor: pointer;
  color: var(--a-champagne); font-size: 0.86rem;
  text-decoration: underline; text-underline-offset: 3px;
  font-family: var(--font-body);
}
.aurea-hero__recheck:hover { color: var(--a-cream); }

/* ---------- pantalla de venta compacta (sin scroll) ---------------------
   Sin compra: solo hero + la primera tarjeta, nada de "Explora"/"Recientemente
   escuchado" — ver viewPremiumHome. Menos padding abajo para que el conjunto
   quepa en una pantalla normal sin desplazarse. */
.aurea-shell--paywall { padding-bottom: clamp(28px, 4vw, 48px); }
.aurea-shell--paywall .aurea-now { margin-bottom: 0; }

/* ---------- banner de bloqueo dentro de una categoría -------------------- */
.aurea-catlock {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 28px;
  padding: 14px 20px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--a-gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--a-champagne) 32%, transparent);
  color: var(--a-cream);
  text-decoration: none;
}
.aurea-catlock svg:first-child { width: 17px; height: 17px; flex: none; color: var(--a-champagne); }
.aurea-catlock span { flex: 1; font-size: 0.96rem; }
.aurea-catlock svg:last-child { width: 15px; height: 15px; flex: none; color: var(--a-champagne); }
.aurea-catlock:hover { border-color: var(--a-champagne); background: color-mix(in srgb, var(--a-gold) 15%, transparent); }

/* ---------- explora Áurea: tarjetas de categoría ------------------------ */
.aurea-section__t { font-family: var(--font-display); font-style: italic; font-size: 1.56rem; color: var(--a-text); margin: 0 0 4px; text-align: left; }
.aurea-section__sub { color: var(--a-text-soft); font-size: 1.08rem; text-align: left; margin: 0 0 24px; }
.aurea-explore { margin-bottom: 44px; }
.aurea-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .aurea-cats { grid-template-columns: 1fr; } }

/* foto de borde a borde (aquí, gradiente de su categoría) con el texto
   flotando encima sobre un velo oscuro — como una portada real de álbum,
   no una tarjeta de texto con una miniatura aparte. */
/* Imagen arriba, texto abajo en un panel sólido — ya NO el texto flotando
   sobre la foto. Con imágenes tan cargadas de luz y textura (las ondas
   holográficas), superponer texto encima siempre iba a competir con algo
   de la imagen; separarlo garantiza legibilidad sin depender de un velo. */
.aurea-catcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--a-glass-border);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--a-cream) 35%, transparent),
    var(--a-sh-soft);
  color: var(--a-cream);
  background: var(--a-surface);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.aurea-catcard:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--a-cream) 45%, transparent),
    0 34px 64px -30px rgba(0, 0, 0, 0.7);
}
.aurea-catcard__cover {
  position: relative;
  aspect-ratio: 4 / 3;
  flex: none;
}
.aurea-catcard__cover.aurea-cover { border-radius: 0; }
/* acento holográfico — distinto por categoría, firmado en una esquina sin
   taparle protagonismo a la foto. mix-blend-mode screen: solo aporta luz,
   nunca oscurece. */
.aurea-catcard__holo {
  position: absolute; z-index: 1; right: -10px; bottom: -10px;
  width: 110px; height: 110px;
  color: var(--a-champagne);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
}
.aurea-catcard__holo svg { width: 100%; height: 100%; }
.cover-claridad .aurea-catcard__holo { animation: aurea-spin 60s linear infinite; }
.cover-nervioso .aurea-catcard__holo { animation: aurea-breathe 5s ease-in-out infinite; }
.cover-vitalidad .aurea-catcard__holo { animation: aurea-breathe 4s ease-in-out infinite; }
.cover-magnetismo .aurea-catcard__holo { animation: aurea-spin 46s linear infinite; }
@media (prefers-reduced-motion: reduce) { .aurea-catcard__holo { animation: none !important; } }
.aurea-catcard__ico {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--a-cream);
  background: color-mix(in srgb, var(--a-carbon) 42%, transparent);
  backdrop-filter: blur(5px);
}
.aurea-catcard__ico svg { width: 17px; height: 17px; stroke-width: 1.4; }
.aurea-catcard__lock {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--a-champagne);
  background: color-mix(in srgb, var(--a-carbon) 55%, transparent);
  backdrop-filter: blur(5px);
}
.aurea-catcard__lock svg { width: 14px; height: 14px; stroke-width: 1.6; }

/* panel de texto — superficie sólida, nunca sobre la imagen */
.aurea-catcard__body { position: relative; z-index: 2; padding: 18px 20px 20px; flex: 1; }
.aurea-catcard__t { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; margin: 0; color: var(--a-cream); }
.aurea-catcard__d { font-size: 0.9rem; color: var(--a-text-soft); margin: 7px 0 0; line-height: 1.5; }
.aurea-catcard__line { width: 26px; height: 1px; background: var(--a-champagne); margin: 14px 0 10px; }
.aurea-catcard__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--a-champagne); }
.aurea-catcard__cta svg { width: 13px; height: 13px; }

/* ---------- recientemente escuchado ------------------------------------- */
.aurea-recent__empty { text-align: center; color: var(--a-text-soft); font-size: 1.056rem; }
.aurea-recent__list { display: flex; flex-direction: column; }
.aurea-recrow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--a-line);
}
.aurea-recrow:last-child { border-bottom: none; }
.aurea-recrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a-gold); flex: none; }
.aurea-recrow__t { flex: 1; font-size: 1.104rem; color: var(--a-text); }
.aurea-recrow__dur { font-family: var(--font-mono); font-size: 0.864rem; color: var(--a-text-soft); }
.aurea-recrow__play {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--a-line); background: transparent; color: var(--a-champagne); cursor: pointer;
}
.aurea-recrow__play svg { width: 12px; height: 12px; }
.aurea-recrow__play:hover { border-color: var(--a-champagne); }

/* ---------- lista de pistas (pantalla de categoría) --------------------- */
.aurea-list { margin-top: 4px; }
.aurea-tracks { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid var(--a-line); }
.aurea-row {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--a-surface) 85%, transparent);
}
.aurea-row + .aurea-row { border-top: 1px solid var(--a-line); }
.aurea-row.is-current { background: color-mix(in srgb, var(--a-champagne) 8%, var(--a-surface)); }
.aurea-row__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.984rem; color: var(--a-text-soft); }
.aurea-row__t { font-family: var(--font-body); font-weight: 600; font-size: 1.152rem; color: var(--a-text); margin: 0; }
.aurea-row__sub { font-family: var(--font-mono); font-size: 0.864rem; color: var(--a-text-soft); margin: 3px 0 0; }
.aurea-row__play {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--a-line); background: transparent; color: var(--a-champagne); cursor: pointer;
}
.aurea-row__play svg { width: 15px; height: 15px; }
.aurea-row__play:not(:disabled):hover { background: var(--a-champagne); color: var(--a-carbon); }
.aurea-row__play:disabled { color: var(--a-text-soft); border-color: var(--a-line); cursor: default; }

/* ---------- mini-reproductor global (fuera de #app) ---------------------
   Barra de ancho completo, anclada abajo, viva en TODA la app (no solo
   dentro de Áurea) mientras algo esté sonando — por eso vive fuera de #app:
   render() reemplaza #app en cada navegación, esto no. */
.aurea-mini {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 10px clamp(14px, 3vw, 28px);
  background: rgba(22, 22, 22, 0.92);
  border-top: 1px solid rgba(199, 183, 162, 0.18);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: 0 -12px 34px -18px rgba(0, 0, 0, 0.55);
  z-index: 60;
  font-family: var(--font-body);
}
.aurea-mini__fill { position: absolute; top: 0; left: 0; height: 2px; border-radius: 0; }
.aurea-mini__info {
  flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0;
  color: #EFE9E1; text-align: left;
}
.aurea-mini__meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.aurea-mini__t { font-size: 1.032rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aurea-mini__mood { font-family: var(--font-mono); font-size: 0.768rem; letter-spacing: 0.08em; text-transform: uppercase; color: #A39C93; }
.aurea-mini__ctrls { display: flex; align-items: center; gap: 10px; flex: none; }
.aurea-mini__time {
  flex: none; font-family: var(--font-mono); font-size: 0.8rem;
  font-variant-numeric: tabular-nums; color: #A39C93; min-width: 2.6em;
}
.aurea-mini__vol { display: flex; align-items: center; gap: 8px; flex: none; color: #C7B7A2; }
.aurea-mini__vol svg { width: 15px; height: 15px; }
.aurea-mini__vol input[type="range"] {
  width: 84px; accent-color: #C7B7A2; cursor: pointer;
}
@media (max-width: 720px) {
  .aurea-mini__vol { display: none; }
  .aurea-mini__time { display: none; }
  .aurea-mini { gap: 10px; }
}

@media (max-width: 640px) {
  .aurea-shell { padding-bottom: 88px; }
  .aurea-row { grid-template-columns: 24px 1fr auto; padding: 13px 14px; gap: 10px; }
  .aurea-orb--lg { width: 140px; height: 140px; }
}

/* el mini-reproductor es global (vive fuera de Áurea, fuera de #app) — si
   algo suena mientras la persona navega a OTRA parte de la app, esta
   reserva el espacio de abajo para que la barra no tape el contenido. */
body.has-aurea-mini { padding-bottom: 72px; }

/* Áurea ocupa toda su zona de contenido, sin que se asome el fondo marfil
   del resto de la app alrededor de la tarjeta oscura — todo el lienzo
   detrás también pasa a carbón mientras se está en esta sección. */
.canvas--aurea { background: #161616; }