/* Lo común de todas las páginas de dplasesores.com con la capa inmersiva: los colores de los dos temas (oscuro de serie,
   claro con el botón y la clave «dpl_theme») y los botones redondos de música y tema. Lo cargan la portada (con
   experiencia.css) y las demás páginas (con sitio.css). */
:root {
  color-scheme: dark;
  --fondo: #020617;
  --fondo-rgb: 2, 6, 23;
  --tinta: #f8fafc;
  --suave: #cbd5e1;
  --tenue: #94a3b8;
  --linea: rgba(255, 255, 255, .10);
  --linea-fuerte: rgba(255, 255, 255, .22);
  --panel: rgba(9, 16, 36, .86);
  --campo: rgba(2, 6, 23, .85);
  --cielo: #38bdf8;
  --indigo: #818cf8;
  --oro: #fbbf24;
  --boton-fondo: #f8fafc;
  --boton-texto: #020617;
  --boton-sombra: rgba(56, 189, 248, .5);
  --brilla: linear-gradient(100deg, #ffffff 0%, #38bdf8 45%, #818cf8 100%);
  --oferta: rgba(129, 140, 248, .16);
  --oferta-cielo: rgba(56, 189, 248, .16);
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --margen: clamp(16px, 6vw, 104px);
  --curva: cubic-bezier(.2, .7, .1, 1);
}
/* Claro, a elección del visitante (como en el resto de dplasesores.com: oscuro de serie) */
:root[data-theme="light"] {
  color-scheme: light;
  --fondo: #eef2f7; --fondo-rgb: 238, 242, 247; --tinta: #0f172a; --suave: #334155; --tenue: #475569;
  --linea: rgba(15, 23, 42, .12); --linea-fuerte: rgba(15, 23, 42, .24); --panel: rgba(255, 255, 255, .9); --campo: #ffffff;
  --cielo: #0369a1; --indigo: #4338ca; --oro: #b45309; --boton-fondo: #0f172a; --boton-texto: #f8fafc; --boton-sombra: rgba(3, 105, 161, .3);
  --brilla: linear-gradient(100deg, #0f172a 0%, #0369a1 50%, #4338ca 100%); --oferta: rgba(67, 56, 202, .08); --oferta-cielo: rgba(3, 105, 161, .08);
}

.redondo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; min-width: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tenue); font: 600 .74rem/1 var(--texto); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .3s, border-color .3s; }
.redondo:hover, .sonido[aria-pressed="true"] { color: var(--cielo); border-color: var(--cielo); }
.tema { padding: 0; width: 36px; }
.tema-luna { display: none; }
:root[data-theme="light"] .tema-sol { display: none; }
:root[data-theme="light"] .tema-luna { display: block; }
.sonido-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sonido-barras i { width: 2px; height: 5px; border-radius: 1px; background: currentColor; }
.sonido-barras i:nth-child(2) { height: 9px; } .sonido-barras i:nth-child(3) { height: 12px; } .sonido-barras i:nth-child(4) { height: 7px; }
.sonido[aria-pressed="true"] .sonido-barras i { animation: barras 1s ease-in-out infinite; }
.sonido[aria-pressed="true"] .sonido-barras i:nth-child(2) { animation-delay: .2s; }
.sonido[aria-pressed="true"] .sonido-barras i:nth-child(3) { animation-delay: .4s; }
.sonido[aria-pressed="true"] .sonido-barras i:nth-child(4) { animation-delay: .1s; }
@keyframes barras { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.sonido.pendiente { color: var(--cielo); border-style: dashed; }   /* sonaba en la página anterior: vuelve con el primer clic */

/* Estrellas con la nota exacta (style="--nota:4.9"): rellenas hasta la nota, la parte que falta en tenue */
.estrellas[style*="--nota"] {
  background: linear-gradient(90deg, var(--oro) calc(var(--nota) / 5 * 100%), rgba(148, 163, 184, .35) 0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* El cambio de página (js/src/transicion.js deshace la escena en polvo antes de irse): donde el navegador lo admite, una
   página se funde en la siguiente. Con movimiento reducido, no. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }