/* Esqueleto · Moxen — los estilos del efecto y de la demostración. */
:root {
  --eq-fondo: #0a0a0a;
  --eq-texto: #f4f4f4;
  --eq-suave: rgba(255, 255, 255, .5);
  --eq-tarjeta: rgba(255, 255, 255, .035);
  --eq-linea: rgba(255, 255, 255, .08);
  --eq-hueso: rgba(255, 255, 255, .09);      /* el hueso */
  --eq-brillo: rgba(255, 255, 255, .13);     /* el brillo que pasa */
  --eq-arte: #181818;
  --eq-grading: saturate(.85) contrast(1.05);   /* el tono de las fotos */
  --eq-curva: cubic-bezier(.22, 1, .36, 1);
  --eq-banda: 340px;                         /* el ancho de la luz */
  --eq-sombra: rgba(0, 0, 0, .6);
}
:root[data-tema="claro"] {
  --eq-fondo: #eeeeee;
  --eq-texto: #0a0a0a;
  --eq-suave: rgba(0, 0, 0, .5);
  --eq-tarjeta: rgba(255, 255, 255, .6);
  --eq-linea: rgba(0, 0, 0, .07);
  --eq-hueso: rgba(0, 0, 0, .07);
  --eq-brillo: rgba(255, 255, 255, .75);
  --eq-arte: #dcdcdc;
  --eq-sombra: rgba(0, 0, 0, .1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--eq-fondo); color: var(--eq-texto); }
body { font-family: "General Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ── el efecto ─────────────────────────────────────────────────────── */
[data-esqueleto] { position: relative; }
.eq-capa { position: absolute; inset: 0; pointer-events: none; }
/* Cada hueso recorta una banda de luz que lo cruza con transform. Todas
   las bandas van a la misma hora y cada una se corre lo que su hueso
   está corrido (--x), así se ve una sola luz que pasa por todos a la vez. */
.eq-hueso {
  position: absolute; border-radius: 8px; overflow: hidden; background: var(--eq-hueso);
  transition: opacity .45s var(--eq-curva) var(--eq-espera, 0s);
}
.eq-luz {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--eq-banda);
  background: linear-gradient(100deg, transparent, var(--eq-brillo) 50%, transparent);
  animation: eq-barre 1.7s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform;
}
/* de antes del borde izquierdo de la fila a después del derecho */
@keyframes eq-barre {
  from { transform: translateX(calc(var(--eq-banda) * -1 - var(--x))); }
  to { transform: translateX(calc(var(--eq-ancho) - var(--x))); }
}

/* cargando: huesos encima y el contenido escondido debajo */
[data-hueso] { transition: opacity .6s var(--eq-curva) var(--eq-espera, 0s), translate .7s var(--eq-curva) var(--eq-espera, 0s); }
.is-cargando [data-hueso] { opacity: 0; translate: 0 8px; transition-duration: .25s; transition-delay: 0s; }
[data-esqueleto]:not(.is-cargando) .eq-hueso { opacity: 0; }
/* las fotos, además, se asientan desde un poco de zum, como una foto que termina de cargar */
.eq-arte { overflow: hidden; }
.eq-arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--eq-grading); transition: transform 1.1s var(--eq-curva) var(--eq-espera, 0s); }
.is-cargando .eq-arte img { transform: scale(1.12); transition-duration: .3s; transition-delay: 0s; }
.is-cargando .eq-hueso { transition-duration: .3s; transition-delay: 0s; }

/* ── la demostración ───────────────────────────────────────────────── */
.eq-escena { min-height: 100%; display: grid; place-items: center; padding: 2rem 1rem 5rem; cursor: pointer; }
.eq-fila { display: grid; grid-template-columns: repeat(3, 348px); gap: 30px; }
/* en pantallas estrechas, una columna */
@media (max-width: 1140px) { .eq-fila { grid-template-columns: minmax(0, 348px); } .eq-escena .eq-pista { position: static; margin-top: 1.5rem; } }
.eq-tarjeta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 16px 16px 22px;
  border-radius: 26px; background: linear-gradient(var(--eq-tarjeta), transparent 140%); box-shadow: inset 0 0 0 1px var(--eq-linea), 0 30px 60px -30px var(--eq-sombra);
}
.eq-arte { position: relative; width: 100%; height: 224px; border-radius: 16px; background-color: var(--eq-arte); }
.eq-tema { padding: 5px 11px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--eq-linea); font-size: .75rem; font-weight: 500; color: var(--eq-suave); }
.eq-titulo { margin: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.eq-pie { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: .9rem; color: var(--eq-suave); }
.eq-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--eq-texto); color: var(--eq-fondo); }
/* el avatar lleva un glifo abstracto, no iniciales */
.eq-avatar svg { width: 14px; height: 14px; fill: currentColor; }
.eq-min { margin-left: auto; }
.eq-pista { position: absolute; bottom: 2.2rem; margin: 0; color: var(--eq-suave); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) { .eq-luz { animation: none; opacity: 0; } .eq-arte img { transition: none; } }