/* ── Experiencia de portada: túnel + cerebro + posts en 3D ───── */
:root {
  --exp-bg: #05070c;
  --exp-line: rgba(120, 170, 220, .18);
  --exp-left: #8b7cf0;   /* humanidades: psicología / filosofía */
  --exp-right: #37b6e9;  /* ciencias: ciencia / tecnología */
}

body.experience {
  background: var(--exp-bg);
  color: #e8edf5;
  overflow-x: hidden;
}

/* Mismo menú que el resto de Pensatu, solo que sobre fondo oscuro.
   El left/right es imprescindible: un position:fixed sin anchura se encoge
   al contenido y el menú se quedaba pegado a la izquierda. */
body.experience .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}
body.experience .nav-brand { color: #fff; }
body.experience .nav-links a { color: rgba(214, 228, 245, .75); }
body.experience .nav-brand:hover,
body.experience .nav-links a:hover { color: var(--d-ciencia-claro); }
body.experience .nav-links a.is-active { color: #fff; font-weight: 600; }

/* ── Estructura del scroll ───────────────────────────────────── */
.journey { position: relative; }
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
#tunnel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* Halo central */
.stage::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 70vmin; height: 70vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(70,120,200,.20) 0%, rgba(5,7,12,0) 65%);
  z-index: 1;
  pointer-events: none;
}

/* ── Cerebro (red de nodos, dibujada en /js/brain-network.js) ── */
.brain {
  position: absolute;
  left: 50%; top: 50%;
  width: 34vmin;
  aspect-ratio: 200 / 224;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

/* Destello cuando el cerebro escupe un post */
.brain-flash {
  position: absolute;
  left: 50%; top: 50%;
  width: 26vmin; height: 26vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(120,180,255,0) 60%);
}
.brain-flash.is-firing { animation: flash .7s ease-out; }
@keyframes flash {
  0%   { opacity: .4; transform: translate(-50%, -50%) scale(.4); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.25); }
}

/* ── Campo 3D con los posts ──────────────────────────────────── */
.field {
  position: absolute;
  inset: 0;
  z-index: 3;
  perspective: 820px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  /* Con preserve-3d el propio contenedor se interpone ante las tarjetas que
     aún están detrás de su plano (z negativo) y se comía los clics. */
  pointer-events: none;
}
.post-node {
  position: absolute;
  left: 50%; top: 50%;
  width: 340px;
  margin: -70px 0 0 -170px;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  background: rgba(10, 16, 28, .78);
  border: 1px solid rgba(140, 180, 230, .22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  text-decoration: none;
  color: inherit;
  opacity: 0;
  will-change: transform, opacity;
}
.post-node { cursor: pointer; }
.post-node:hover { text-decoration: none; border-color: rgba(190, 220, 255, .55); }
.post-node::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.post-node[data-discipline="psicologia"] { --accent: var(--d-psicologia-claro); }
.post-node[data-discipline="filosofia"]  { --accent: var(--d-filosofia-claro); }
.post-node[data-discipline="ciencia"]    { --accent: var(--d-ciencia-claro); }
.post-node[data-discipline="tecnologia"] { --accent: var(--d-tecnologia-claro); }
.post-node.is-more { --accent: rgba(205, 225, 245, .55); }
.post-node.is-empty { cursor: default; text-align: center; }
.post-node.is-empty::before { display: none; }
.post-node.is-empty .node-tags { justify-content: center; }
.node-kicker {
  font-family: var(--font-heading);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .45rem;
}
.node-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
  color: #f2f6fb;
  margin-bottom: .6rem;
}
.node-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.node-tag {
  font-size: .7rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(160, 200, 240, .25);
  color: rgba(210, 228, 245, .8);
}

/* ── Título de entrada ───────────────────────────────────────── */
.hero {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6.2vw, 4.6rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 0 40px rgba(60, 130, 220, .55);
}
.hero p {
  margin-top: 1rem;
  max-width: 34rem;
  color: rgba(215, 228, 245, .75);
}
.scroll-cue {
  position: absolute;
  bottom: 8vh;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(200, 220, 245, .6);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(8px); opacity: 1 } }

/* Etiquetas de eje */
.axis-labels {
  position: absolute;
  left: 0; right: 0; bottom: 3.5vh;
  z-index: 4;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0 1.5rem;
  font-family: var(--font-heading);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}
.axis-labels b { font-weight: 700; }
.axis-labels .d-psicologia { color: var(--d-psicologia-claro); }
.axis-labels .d-filosofia  { color: var(--d-filosofia-claro); }
.axis-labels .d-ciencia    { color: var(--d-ciencia-claro); }
.axis-labels .d-tecnologia { color: var(--d-tecnologia-claro); }
.axis-labels .sep { color: rgba(200, 220, 245, .35); margin: 0 .35rem; }

/* Barra de progreso del viaje */
.journey-progress {
  position: fixed;
  left: 0; top: 0;
  height: 2px;
  width: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--d-psicologia-claro), var(--d-filosofia-claro), var(--d-ciencia-claro), var(--d-tecnologia-claro));
}

/* ── Cierre ──────────────────────────────────────────────────── */
.outro {
  position: relative;
  z-index: 5;
  background: var(--exp-bg);
  text-align: center;
  padding: 6rem 1.5rem 4rem;
}
.outro h2 { font-family: var(--font-heading); color: #fff; margin-bottom: 1rem; }
.outro p { color: rgba(215, 228, 245, .7); margin-bottom: 2rem; }
.btn-ghost-light {
  display: inline-block;
  padding: .7rem 1.6rem;
  border: 1px solid rgba(160, 200, 240, .4);
  border-radius: 999px;
  color: #e8edf5;
}
.btn-ghost-light:hover { text-decoration: none; border-color: #fff; color: #fff; }

/* ── Respaldo: móvil y movimiento reducido ───────────────────── */
.fallback-list { display: none; padding: 7rem 1.5rem 4rem; max-width: 46rem; margin: 0 auto; }
.fallback-list h1 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  margin-bottom: 2rem;
  text-align: center;
}
.fallback-list .post-node { position: static; margin: 0 0 1rem; width: auto; opacity: 1; transform: none; display: block; }

body.is-static .journey,
body.is-static .outro { display: none; }
body.is-static .fallback-list { display: block; }

@media (max-width: 860px) {
  .post-node { width: 270px; margin-left: -135px; }
}

/* ── Tarjeta de cierre "Y más…" ──────────────────────────────── */
.post-node.is-more {
  background: rgba(14, 22, 38, .72);
  border-style: dashed;
  border-color: rgba(170, 205, 245, .4);
}
.post-node.is-more .node-title { font-size: 1.45rem; }
.post-node.is-more .node-tags {
  font-size: .78rem;
  color: rgba(200, 220, 245, .65);
}

/* Lenis necesita mandar sobre el scroll nativo */
html.has-lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis-stopped { overflow: hidden; }