/* ===== Mapa neuronal fusionado con el background ===== */
.neuro{
  position: relative;
  height: clamp(540px, 62vh, 760px);
  margin: 0 0 80px;        /* sin marco, sin tarjeta */
  border: none;
  border-radius: 0;
  background: transparent; /* se “funde” con el fondo general */
  overflow: hidden;
  box-shadow: none;
}

.neuro-canvas{
  position:absolute; inset:0; display:block;
  width:100%; height:100%;
}

/* Etiqueta del nodo central (sigue al 3D) */
.neuro-label{
  position:absolute; left:0; top:0;
  transform:translate(-9999px,-9999px);
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  font-weight:900; letter-spacing:-.2px;
  pointer-events:none;
}

/* Fallback */
.neuro-overlay{ position:absolute; inset:0; display:grid; place-items:center; gap:16px; text-align:center; }
.neuro-center{
  font-weight:900; letter-spacing:-.2px; padding:10px 14px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.06);
}
.neuro-chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.neuro-chip{
  text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.2px;
  padding:12px 16px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.02); transition: border-color .2s ease, transform .2s ease;
}
.neuro-chip:hover{ border-color: rgba(255,255,255,.16); transform: translateY(-1px); }

.neuro-hint{
  position:absolute; right:14px; bottom:12px; font-size:12px; color:var(--muted);
  background:rgba(0,0,0,.22); border:1px solid var(--border); padding:6px 10px; border-radius:999px;
}

@media (max-width:920px){
  .neuro{ height: 520px; }
  .neuro-hint{ display:none; }
}
/* Ocultar totalmente el fallback cuando tiene [hidden] */
.neuro-overlay[hidden]{ display:none !important; }

/* Label que sigue al nodo hovered (un poco más chico) */
.neuro-label--hover{
  padding:6px 10px;
  font-weight:800;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:999px;
  pointer-events:none;
}



/* Botón pause/play */
.neuro-toggle{
  position:absolute; top:12px; right:12px;
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.06); cursor:pointer;
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
  z-index:5;
}
.neuro-toggle:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.neuro-toggle svg{ width:18px; height:18px; fill:var(--text); opacity:.9 }
.neuro-toggle[aria-pressed="true"] svg{ /* ícono play cuando está en pausa */
  d: path("M8 5v14l11-7z"); /* no todos los navegadores soportan 'd:' dinámico; JS cambia el ícono también */
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}









/* ===== Neuronal · Mobile UI ===== */
.neuro-mobile{ padding:14px 0 24px; }
.neuro-mobile-scroller{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:12px; overflow-x:auto; padding:6px 4px 10px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
@media (min-width:560px){ .neuro-mobile-scroller{ grid-auto-columns:56%; } }

.neuro-card{
  position:relative; scroll-snap-align:center;
  border:1px solid var(--border); border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  box-shadow:0 12px 36px rgba(0,0,0,.35);
  padding:12px; display:grid; gap:8px; color:var(--text); text-decoration:none;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.neuro-card:active{ transform:scale(.98); }

.nc-media{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:rgba(255,255,255,.02); }
.nc-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.nc-media::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.75;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 28px),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%);
}
.nc-title{ font-weight:900; letter-spacing:-.2px; line-height:1.2; }
.nc-desc{ color:var(--muted); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nc-arrow{ justify-self:end; opacity:.85; }

.neuro-mobile-links{ list-style:none; margin:10px 4px 0; padding:0; display:grid; gap:6px; }
.neuro-mobile-links a{ color:var(--text); text-decoration:none; border-bottom:1px dashed var(--border); }
.neuro-mobile-links a:hover{ border-bottom-color:rgba(255,255,255,.4); }

.neuro-mobile-actions{ margin-top:10px; }
#neuroPause.btn-ghost[aria-pressed="true"]{ opacity:.85; }

/* No mostrar la UI mobile en desktop grande */
@media (min-width:881px){
  #neuroMobile{ display:none !important; }
}