/* Constelación de áreas y skills · manegit.com
   Usa los tokens del sitio (--negro, --linea-osc, --violeta, etc.) con valores por defecto. */
.constelacion{
  --c-negro:var(--negro,#101010); --c-linea:var(--linea-osc,#2B2833); --c-tinta:var(--tinta-osc,#FFF4FE);
  --c-muted:var(--muted-osc,#B9B2C4); --c-tenue:#6E6879; --c-violeta:var(--violeta,#7424F5); --c-violeta-claro:var(--violeta-claro,#8072FC);
  --c-display:var(--display,"Bricolage Grotesque",system-ui,sans-serif);
}

/* Sin JavaScript: lista de áreas en grilla */
.constelacion__escena,.constelacion__info{display:none}
.constelacion__areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.constelacion__area{border:1px solid var(--c-linea);border-radius:14px;padding:26px;display:grid;gap:10px;align-content:start;background:var(--c-negro)}
.constelacion__area h3{font-size:21px}
.constelacion__area p{color:var(--c-muted);font-size:15.5px}
.constelacion__skills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.constelacion__skills li,.constelacion__chip{font-size:13.5px;border-radius:999px;padding:5px 13px;border:1px solid var(--c-linea);color:#DCD5E6;background:var(--c-negro);white-space:nowrap}

/* Con JavaScript */
.constelacion--activa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:40px;align-items:center}
.constelacion--activa .constelacion__escena{display:block;position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto}
.constelacion--activa .constelacion__info{display:grid;gap:16px;min-height:260px;align-content:center}
.constelacion--activa .constelacion__areas{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.constelacion__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* manegit: no transform-origin here; the JS rotates around the center (rotate(a 280 280)) and Chrome applied both */
.constelacion__orbita{fill:none;stroke:var(--c-linea);stroke-width:1}
.constelacion__rayo{stroke:var(--c-linea);stroke-width:1;transition:stroke .4s,stroke-width .4s}
.constelacion__rayo.es-activo{stroke:var(--c-violeta);stroke-width:2}
.constelacion__punto{fill:var(--c-tenue);transition:fill .4s}
.constelacion__punto.es-activo{fill:var(--c-violeta-claro)}
.constelacion__hilo{stroke:var(--c-violeta);stroke-width:1;stroke-dasharray:4 4;opacity:0;transition:opacity .4s}
.constelacion__hilo.es-activo{opacity:.8}

.constelacion__nodo{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--c-muted)}
.constelacion__nodo:focus-visible{outline:3px solid var(--c-violeta-claro);outline-offset:4px;border-radius:12px}
.constelacion__circulo{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--c-negro);border:1.5px solid var(--c-linea);font-family:var(--c-display);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;transition:background .4s,border-color .4s,box-shadow .4s,color .4s}
.constelacion__etiqueta{font-size:13px;font-weight:500;white-space:nowrap;transition:color .4s}
.constelacion__nodo.es-activo .constelacion__circulo{background:var(--c-violeta);border-color:var(--c-violeta);color:#fff;box-shadow:0 0 0 8px rgba(116,36,245,.18),0 0 40px rgba(116,36,245,.6)}
.constelacion__nodo.es-activo .constelacion__etiqueta{color:#fff}

.constelacion__centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(116,36,245,.35),rgba(16,16,16,0) 70%)}
.constelacion__centro img{width:72%;height:auto}

.constelacion__info .etiqueta{margin:0}
.constelacion__info h3{font-size:clamp(26px,3vw,34px)}
.constelacion__info p{color:var(--c-muted);font-size:17px}
.constelacion__info .constelacion__chips{display:flex;flex-wrap:wrap;gap:8px}
.constelacion__entra{animation:constelacion-entra .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes constelacion-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .constelacion--activa{grid-template-columns:minmax(0,1fr);gap:24px}
  .constelacion__circulo{width:42px;height:42px;font-size:13px}
  .constelacion__etiqueta{font-size:11.5px}
  .constelacion--activa .constelacion__info{min-height:0}
}
/* manegit: with 7 areas, neighbours on a phone are ~84 px apart; smaller nodes so the widest labels never touch while it turns */
@media (max-width:480px){
  .constelacion__circulo{width:38px;height:38px;font-size:12px}
  .constelacion__etiqueta{font-size:10.5px}
}
@media (max-width:360px){
  .constelacion__nodo{gap:3px}
  .constelacion__circulo{width:32px;height:32px;font-size:11px}
  .constelacion__etiqueta{font-size:9.5px;line-height:1.2}
}
@media (prefers-reduced-motion:reduce){
  .constelacion__entra{animation:none}
  .constelacion__rayo,.constelacion__punto,.constelacion__hilo,.constelacion__circulo{transition:none}
}