/* ============================================================================
   MODO CABINA (2026-08-15) — el scroll ya no cuenta la historia.
   Una sola pantalla: el cerebro al centro, el teatro del flujo a la
   izquierda, la prueba de vida a la derecha. En pantallas apiladas
   (<=1099px) se permite el scroll natural de UNA sección — no hay capítulos.
   ========================================================================== */
html,body{height:100%;overflow:hidden}
@media(max-width:1099px){html,body{height:auto;overflow:auto}}
#scroller{min-height:100dvh}

/* pie: en cabina flota discreto abajo-derecha, junto al borde */
footer{position:fixed;right:16px;bottom:8px;left:auto;z-index:56;display:block;
  background:transparent;border:0;padding:0}
footer .pie-marca,footer .pie-sp{display:none}
footer .pie-legal{font-size:.62rem;color:var(--mut);opacity:.66;letter-spacing:.06em}
@media(max-width:1099px){footer{position:static;padding:18px;text-align:center}}

/* ===== MISIONES (chips bajo el titular) ===== */
.misiones{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mis-titulo{margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut)}
.mis-chip{cursor:pointer;padding:8px 13px;border-radius:30px;text-align:left;
  border:1px solid rgba(var(--vio-rgb),.3);background:rgba(9,17,32,.55);
  color:var(--txt-3);font-size:.8rem;
  transition:border-color .25s,color .25s,box-shadow .25s}
.mis-chip:hover{border-color:var(--vio);color:#fff;
  box-shadow:0 0 22px -10px rgba(var(--vio-2-rgb),.9)}
body.mision .misiones{display:none}

/* ===== EL TEATRO — la demo guiada dentro de la columna del argumento ===== */
body.mision .h-texto>*:not(#teatro){display:none}
#teatro{display:none;width:100%;max-width:560px;text-align:left}
body.mision #teatro{display:block}

.tj-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.tj-demo{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--vio);padding:6px 11px;border:1px solid rgba(var(--vio-rgb),.35);border-radius:30px;
  background:rgba(var(--vio-2-rgb),.08)}
.tj-salir{cursor:pointer;border:1px solid var(--line);background:rgba(9,17,32,.6);
  color:var(--mut);border-radius:50%;width:30px;height:30px;font-size:.9rem;line-height:1;
  transition:color .25s,border-color .25s}
.tj-salir:hover{color:#fff;border-color:var(--line-fuerte)}

.tj-etapas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.tj-etapas li{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:20px;border:1px solid var(--line);color:var(--mut);
  transition:all .35s var(--ease)}
.tj-etapas li.activa{border-color:var(--vio);color:#fff;
  box-shadow:0 0 16px -6px rgba(var(--vio-2-rgb),.9);background:rgba(var(--vio-2-rgb),.14)}
.tj-etapas li:nth-child(5).activa{border-color:var(--amber);color:var(--amber);
  box-shadow:0 0 18px -6px rgba(var(--amber-rgb),.8);background:rgba(var(--amber-rgb),.08)}
.tj-etapas li.lista{border-color:rgba(var(--node-rgb),.5);color:var(--node)}

.tj-flujo{display:flex;flex-direction:column;gap:10px;max-height:min(52vh,470px);
  overflow-y:auto;overscroll-behavior:contain;padding-right:6px;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 18px,#000 100%);
          mask:linear-gradient(180deg,transparent 0,#000 18px,#000 100%)}
.tj-flujo::-webkit-scrollbar{width:4px}
.tj-flujo::-webkit-scrollbar-thumb{background:rgba(var(--vio-rgb),.3);border-radius:4px}

.tj-carta{border:1px solid var(--line);border-radius:14px;padding:12px 15px;
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--txt-3);font-size:.86rem;line-height:1.5;
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tj-carta.en{opacity:1;transform:none}
.tj-carta i{font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  color:var(--node2);display:block;margin-bottom:5px}
.tj-carta q{quotes:none;color:#fff;font-size:.92rem}
.tj-carta ul{margin:6px 0 0;padding-left:18px}
.tj-carta li{margin:3px 0}
.tj-carta .tj-arch{display:block;font-family:var(--mono);font-size:.72rem;color:var(--txt-2);
  margin-top:4px;line-height:1.7}
.tj-arch.tj-espera{opacity:.5}
.tj-carta.etiqueta{border-color:rgba(var(--node2-rgb),.35)}
.tj-carta.etiqueta em{color:var(--node2);font-style:normal}
.tj-carta.carpeta i{color:var(--gold)}
.tj-carta.plan{border-color:rgba(var(--vio-rgb),.4)}
.tj-carta.plan i{color:var(--vio)}
.tj-carta.equipo{padding:9px 15px;border-color:rgba(var(--violet-rgb),.35)}
.tj-carta.equipo b{color:var(--violet)}
.tj-carta.verde{border-color:rgba(var(--node-rgb),.45)}
.tj-carta.verde b{color:var(--node)}

/* la carta ámbar: el checkpoint humano — lo único sagrado */
.tj-carta.ambar{border-color:rgba(var(--amber-rgb),.55);background:rgba(24,16,4,.66);
  box-shadow:0 0 34px -12px rgba(var(--amber-rgb),.5)}
.tj-carta.ambar b{color:var(--amber)}
.tj-carta.ambar p{margin:6px 0 0}
.tj-carta.aprobada{opacity:.66}
.tj-botones{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.tj-ok,.tj-no,.tj-otra,.tj-cta{cursor:pointer;border-radius:30px;padding:9px 16px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  transition:all .25s}
.tj-ok{border:1px solid var(--amber);background:rgba(var(--amber-rgb),.14);color:var(--amber)}
.tj-ok:hover{background:var(--amber);color:#1a1204;box-shadow:0 0 26px -6px var(--amber)}
.tj-no,.tj-otra{border:1px solid var(--line);background:transparent;color:var(--mut)}
.tj-no:hover,.tj-otra:hover{color:#fff;border-color:var(--line-fuerte)}
.tj-carta.oro{border-color:rgba(var(--gold-rgb),.5)}
.tj-carta.oro b{color:var(--gold)}
.tj-cta{display:inline-block;border:1px solid var(--gold);color:var(--gold);text-decoration:none;
  background:rgba(var(--gold-rgb),.1)}
.tj-cta:hover{background:var(--gold);color:#1a1404;box-shadow:0 0 26px -6px var(--gold)}

/* ===== EL NÚCLEO REACCIONA ===== */
.cap.encendida .disco{box-shadow:0 0 0 2px rgba(var(--vio-rgb),.8),0 0 34px 6px rgba(var(--vio-2-rgb),.55)}
.cap.encendida .et{color:#fff;text-shadow:0 0 14px rgba(var(--vio-rgb),.8)}
.nx-caja.pide-humano .nx-esfera{stroke:var(--amber);filter:drop-shadow(0 0 22px rgba(var(--amber-rgb),.6))}
.nx-caja.pide-humano .nx-luz{background:radial-gradient(circle,rgba(var(--amber-rgb),.32),transparent 60%)}

/* ===== GABY DENTRO DEL CEREBRO ===== */
#gabyPill.en-nucleo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  bottom:auto;z-index:5;flex-direction:column;gap:4px;padding:0;
  width:92px;height:92px;border-radius:50%;justify-content:center;
  border:1px solid rgba(var(--vio-rgb),.5);
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.1),rgba(9,17,32,.55) 60%);
  box-shadow:0 0 44px -8px rgba(var(--vio-2-rgb),.8),inset 0 0 26px rgba(var(--vio-2-rgb),.25);
  opacity:0;pointer-events:none;transition:opacity .9s var(--ease),box-shadow .3s,border-color .3s}
#gabyPill.en-nucleo.viva{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
#gabyPill.en-nucleo:hover{border-color:var(--vio);
  box-shadow:0 0 60px -6px rgba(var(--vio-2-rgb),.95),inset 0 0 30px rgba(var(--vio-2-rgb),.35)}
#gabyPill.en-nucleo .pto{width:12px;height:12px}
#gabyPill.en-nucleo #gabyLb{display:block;font-size:.5rem;letter-spacing:.18em}
#gabyPill.en-nucleo::after{content:none}
#gabyPill.en-nucleo .mis{font-size:.56rem;letter-spacing:.24em;text-indent:.24em}
body.gaby-montada #gabyPill.en-nucleo{bottom:auto}
/* durante la misión el botón cede el centro (el cerebro está trabajando) —
   salvo que la llamada esté EN VIVO: a Gaby no se le cuelga por una demo */
body.mision #gabyPill.en-nucleo:not(.live){opacity:0;pointer-events:none}
/* el globo de Gaby acompaña al núcleo, no a la esquina */
#gabyGlobo{left:auto;right:26px;bottom:26px}
@media(max-width:1099px){#gabyGlobo{left:14px;right:14px;bottom:14px;max-width:none}}

/* ===== DIÁLOGOS (capacidades y preguntas) ===== */
dialog.dlg{border:1px solid rgba(var(--vio-rgb),.3);border-radius:18px;padding:26px 28px;
  width:min(560px,92vw);max-height:min(78vh,720px);overflow:auto;
  background:rgba(6,11,22,.92);color:var(--txt-2);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(var(--vio-2-rgb),.5)}
dialog.dlg::backdrop{background:rgba(2,4,9,.72);backdrop-filter:blur(4px)}
.dlg-x{position:absolute;top:10px;right:14px;border:0;background:none;cursor:pointer;
  color:var(--mut);font-size:1.3rem;line-height:1;padding:6px}
.dlg-x:hover{color:#fff}
.dlg-k{margin:0 0 4px;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--vio)}
.dlg-t{margin:0 0 10px;font-size:1.4rem;color:#fff}
.dlg-p{margin:0 0 12px;line-height:1.6;color:var(--txt-3)}
.dlg-h{margin:0 0 14px;padding-left:18px;color:var(--txt-3)}
.dlg-h li{margin:5px 0}
#capCuerpo video,#capCuerpo img{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
.dlg-cta{margin-top:14px}
.dlg .faq details{border-bottom:1px solid var(--line);padding:10px 0}
.dlg .faq summary{cursor:pointer;color:#fff;font-size:.95rem}
.dlg .faq p{color:var(--txt-3);line-height:1.6;margin:8px 0 2px}

/* móvil: el teatro respira */
@media(max-width:1099px){
  #teatro{max-width:600px;margin-inline:auto}
  .tj-flujo{max-height:none;-webkit-mask:none;mask:none;overflow:visible;padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  .tj-carta{transition:none;opacity:1;transform:none}
}

/* ============================================================================
   v2 — EL ESPACIO 3D NARRADO (los nodos flotan; nada de hoja plana)
   ========================================================================== */
#espacio{position:fixed;inset:0;z-index:40;pointer-events:none;
  perspective:1200px;perspective-origin:50% 46%}
.esp-mundo{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}

.nodo3d{position:absolute;left:50%;top:50%;transform-style:preserve-3d;
  transform:translate(-50%,-50%)
    translate3d(var(--tx,0),var(--ty,0),var(--tz,0)) rotateY(var(--ry,0deg));
  opacity:1;filter:blur(0);
  transition:transform 1.1s cubic-bezier(.16,.7,.2,1),opacity .8s ease,filter .8s ease}
.nodo3d.lejos{opacity:0;filter:blur(10px);
  transform:translate(-50%,-50%)
    translate3d(var(--tx,0),var(--ty,0),calc(var(--tz,0px) - 520px))
    rotateY(var(--ry,0deg)) scale(.6)}
.nodo3d .flote{animation:nodoFlota 7s ease-in-out infinite alternate;
  animation-delay:calc(var(--tz,0px) * 0.002s)}
@keyframes nodoFlota{from{transform:translateY(-5px)}to{transform:translateY(7px)}}
.nodo3d .tj-carta{width:clamp(200px,21vw,268px);box-shadow:0 22px 60px -28px rgba(0,0,0,.9)}
.nodo3d.frente .tj-carta{width:clamp(250px,30vw,350px)}
.nodo3d{pointer-events:none}
.nodo3d.toca .tj-carta{pointer-events:auto}
.nodo3d.aprobada{opacity:.55}
@media(max-width:1099px){
  #espacio{perspective:900px}
  .nodo3d .tj-carta{width:clamp(190px,62vw,250px)}
  .nodo3d.frente .tj-carta{width:min(84vw,330px)}
}
@media(prefers-reduced-motion:reduce){
  .nodo3d,.nodo3d.lejos{transition:none;opacity:1;filter:none;
    transform:translate(-50%,-50%) translate3d(var(--tx,0),var(--ty,0),var(--tz,0))}
  .nodo3d .flote{animation:none}
}

/* cabecera de la misión: flota arriba, bajo la barra */
#mCab{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:57;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  padding:9px 14px;border-radius:30px;border:1px solid rgba(var(--vio-rgb),.25);
  background:rgba(5,9,18,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#mCab .tj-etapas{margin:0}
@media(max-width:700px){#mCab{top:56px;width:min(96vw,560px)}}

/* subtítulos: la voz, escrita — abajo al centro */
#gabySub{position:fixed;left:50%;bottom:clamp(18px,6vh,54px);transform:translateX(-50%) translateY(8px);
  z-index:57;max-width:min(680px,88vw);margin:0;padding:10px 18px;border-radius:14px;
  border:1px solid rgba(var(--vio-rgb),.22);background:rgba(4,7,14,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.92rem;line-height:1.5;color:var(--txt-2);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .45s ease,transform .45s ease}
#gabySub.viva{opacity:1;transform:translateX(-50%)}

/* el núcleo respira con la voz (narración o Gaby en vivo) */
.nx-caja{--gv:0}
.nx-caja.narrando .nx-luz,.nx-caja.hablando .nx-luz{
  opacity:calc(.45 + var(--gv) * .55);
  transform:scale(calc(1.02 + var(--gv) * .22));
  transition:transform .12s linear,opacity .12s linear}
.nx-caja.narrando .nx-svg{filter:saturate(1.25)}
.nx-caja.hablando .nx-svg{filter:saturate(calc(1.1 + var(--gv) * .9)) brightness(calc(1 + var(--gv) * .18))}

/* el disco en llamada */
#gabyPill.conectando{border-color:rgba(var(--node2-rgb),.7)}
#gabyPill.conectando .pto{background:var(--node2);animation:dspRespira 1s ease-in-out infinite}
#gabyPill.live{border-color:var(--node);
  box-shadow:0 0 54px -6px rgba(var(--node-rgb),.8),inset 0 0 26px rgba(var(--node-rgb),.2)}
#gabyPill.live .pto{background:var(--node);box-shadow:0 0 12px 3px rgba(var(--node-rgb),.8);
  animation:dspRespira 1.6s ease-in-out infinite}

/* ============================================================================
   v3 — LA ESCENA THREE.JS (cine de verdad)
   ========================================================================== */
#lienzo3d{position:fixed;inset:0;z-index:45;pointer-events:none;display:block}

/* la carta del nodo ACTIVO: una sola a la vez, proyectada desde la escena */
.carta3d{position:fixed;left:0;top:0;z-index:58;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);will-change:transform}
.carta3d.abierta{opacity:1}
.carta3d .tj-carta{pointer-events:auto;width:clamp(220px,24vw,300px);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.95)}
.carta3d.plana{left:50%;top:50%;transform:translate(-50%,-50%)}
.carta3d.plana .tj-carta{width:min(88vw,360px)}
@media(max-width:700px){.carta3d .tj-carta{width:min(78vw,280px)}}

/* durante la misión, el hero SVG cede el escenario al lienzo */
body.mision .nx,body.mision .sysp{transition:opacity .8s var(--ease)}
body.mision .nx{opacity:0;pointer-events:none}
body.mision .sysp{opacity:.92;position:relative;z-index:46}
@media(max-width:1099px){body.mision .sysp{opacity:0;pointer-events:none}}

/* Gaby DENTRO de la esfera 3D: el disco viaja al corazón de la escena.
   La posición la escribe experiencia3d.js (proyección del origen). */
#gabyPill.en-esfera{position:fixed;left:0;top:0;bottom:auto;z-index:59;
  width:84px;height:84px}
body.mision #gabyPill.en-nucleo:not(.live){opacity:0;pointer-events:none}
body.mision #gabyPill.en-esfera{opacity:1 !important;pointer-events:auto !important}

/* la esencia de Gaby (video real del panel) llena su disco */
#gabyPill{overflow:hidden}
#gabyPill .gvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit;opacity:.5;pointer-events:none;z-index:-1;
  filter:saturate(1.2) brightness(.9)}
#gabyPill.sin-video{background-image:url(../img/equipo/gaby-avatar.png);
  background-size:cover;background-position:center}
#gabyPill.sin-video .gvid{display:none}
#gabyPill.en-nucleo #gabyLb,#gabyPill.en-esfera #gabyLb{text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* las caras reales del equipo en sus cartas */
.tj-carta.equipo{display:flex;align-items:center;gap:10px}
.tj-carta.equipo .tj-avatar{width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid rgba(var(--violet-rgb),.6);object-fit:cover;
  box-shadow:0 0 16px -4px rgba(var(--violet-rgb),.8)}

/* imágenes y dashboards REALES dentro de las cartas de la escena */
.tj-carta .tj-media{width:100%;border-radius:10px;border:1px solid var(--line);
  display:block;margin-top:9px}
.tj-carta .tj-pie{display:block;margin-top:5px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* la cara de Gaby manda en el disco: el letrero baja a un pie, fuera del círculo */
#gabyPill{overflow:visible}
#gabyPill .gvid{border-radius:50%;opacity:.88;z-index:0}
#gabyPill.en-nucleo #gabyLb,#gabyPill.en-esfera #gabyLb{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;z-index:2;font-size:.52rem}
#gabyPill.en-nucleo .mis,#gabyPill.en-esfera .mis{
  position:absolute;top:calc(100% + 24px);left:50%;transform:translateX(-50%);z-index:2}
#gabyPill.en-nucleo .pto,#gabyPill.en-esfera .pto{
  position:absolute;top:4px;right:4px;z-index:2;width:11px;height:11px;
  border:2px solid rgba(4,7,14,.8)}

/* la entidad 3D de fondo del hero: centrada tras el cerebro SVG */
.nx-caja{transition:transform .25s ease-out;transform-style:preserve-3d}
/* z-index:-1 la deja detrás de todo lo que vive en la caja (el tilt de la
   caja crea el contexto de apilamiento) SIN tocar el posicionamiento de los
   nodos del anillo ni del SVG. */
.nx-fondo3d{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:-1;pointer-events:none;opacity:.85;
  /* la entidad se disuelve en los bordes: jamás se monta sobre el titular */
  -webkit-mask:radial-gradient(circle,#000 58%,transparent 86%);
          mask:radial-gradient(circle,#000 58%,transparent 86%)}
body.mision .nx-fondo3d{opacity:0}

/* ===== PROFUNDIDAD DEL MARCO: barra y prueba de vida ===== */
/* En cabina no hay scroll, así que la barra jamás recibía su vidrio: ahora
   tiene presencia propia — vidrio, filo de luz y sombra que la despega. */
#top{background:linear-gradient(180deg,rgba(6,10,20,.82),rgba(6,10,20,.46));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(var(--vio-rgb),.16);
  box-shadow:0 12px 44px -20px rgba(0,0,0,.85)}

/* la carta de estado se inclina hacia la escena y FLOTA — nada plano */
@media(min-width:1100px){
  .sysp{transform:perspective(1100px) rotateY(-7deg);
    box-shadow:0 34px 80px -32px rgba(0,0,0,.9),0 0 52px -20px rgba(var(--vio-2-rgb),.4);
    border-color:rgba(var(--vio-rgb),.22);
    animation:sysFlota 9s ease-in-out infinite alternate}
  @keyframes sysFlota{
    from{transform:perspective(1100px) rotateY(-7.5deg) translateY(-5px)}
    to{transform:perspective(1100px) rotateY(-5deg) translateY(7px)}}
}
@media(prefers-reduced-motion:reduce){.sysp{animation:none;transform:none}}

/* cabecera de escena de CAPACIDAD: sin fila de etapas */
#mCab.solo-cap .tj-etapas{display:none}

/* ===== GABY v2: retrato nítido + anillo eléctrico (cero video oscuro) ===== */
#gabyPill .gvid{display:none}
#gabyPill .gcara{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;pointer-events:none;z-index:0;
  filter:saturate(1.15) contrast(1.06)}
#gabyPill.en-nucleo,#gabyPill.en-esfera{
  border:2px solid rgba(139,48,255,.95);
  box-shadow:0 0 0 3px rgba(2,2,8,.9),0 0 24px 2px rgba(109,31,255,.75),
             0 0 70px -8px rgba(109,31,255,.9)}
#gabyPill.en-nucleo:hover,#gabyPill.en-esfera:hover{
  border-color:#b98cff;
  box-shadow:0 0 0 3px rgba(2,2,8,.9),0 0 30px 4px rgba(139,48,255,.9),
             0 0 90px -6px rgba(109,31,255,1)}
#gabyPill.live{border-color:#00e676 !important;
  box-shadow:0 0 0 3px rgba(2,2,8,.9),0 0 26px 3px rgba(0,230,118,.8),
             0 0 80px -8px rgba(0,230,118,.9) !important}

/* lo esencial en letra: invisible en la cabina (queda bajo el pliegue),
   cierre digno en el teléfono */
.esencial{max-width:720px;margin:0 auto;padding:48px 22px 120px;color:var(--txt-3);
  font-size:.95rem;line-height:1.7}
.esencial h2{color:#fff;margin-bottom:14px;font-size:1.4rem}
.esencial ul{margin:14px 0;padding-left:20px}
.esencial li{margin:7px 0}
.esencial a{color:var(--vio)}
.esencial strong{color:var(--txt-2)}