/* ============================================================================
   SISTEMA DE DISEÑO · CEREBRO / TR0Y Studio
   ----------------------------------------------------------------------------
   Fuente de verdad: Troy-Brain/referencia/sistema-diseno-troy-brain.md
   Los colores NO se inventan aquí: se heredan del panel (_jarvis/ui/index.html)
   y cada uno tiene un significado asignado. Este archivo lo fija como contrato
   para la landing, el editor y el selector de voces, de modo que las tres
   superficies sean la misma casa.

   Reglas que este archivo hace cumplir:
   · Glow, no bordes duros.
   · Vidrio (backdrop-filter) sobre fondo translúcido.
   · Movimiento lento — el sistema respira, no vibra.
   · El ámbar es sagrado: solo marca lo que reclama al humano.
   · prefers-reduced-motion se respeta en todo.
   ========================================================================== */

:root{
  /* ---- Color por significado (no por decoración) ---------------------- */
  /* Subidos de tono en 2026-08-12: la paleta original era correcta pero
     pastel, y sobre el negro se apagaba — el sitio se veía apacible cuando lo
     que tiene que verse es encendido. Mismos significados, más voltaje.     */
  --node:#22e39b;    /* verde   · vivo, en marcha, sano                    */
  --node2:#3b8cff;   /* azul    · referencia, consulta, frío               */
  --amber:#ffb01f;   /* ámbar   · TE TOCA A TI — checkpoint humano         */
  --violet:#a97dff;  /* violeta · agentes y ejecución automática           */
  --gold:#ffd42e;    /* dorado  · ideas por madurar                        */

  /* ---- Energía del núcleo ---------------------------------------------
     El violeta eléctrico NO es un sexto color de dominio: es la ENERGÍA del
     núcleo. Solo aparece donde la inteligencia está pensando — el cerebro
     del hero, sus hilos y sus nodos. Fuera de ahí manda la paleta de arriba,
     donde cada color ya significa algo. El fondo nunca es violeta: el fondo
     es obsidiana y el violeta es lo que la ilumina.                       */
  --vio:#b98cff;     /* violeta claro · filo y texto encendido             */
  --vio-2:#7b3dff;   /* violeta hondo · masa de energía, halos             */
  --vio-rgb:185,140,255;
  --vio-2-rgb:123,61,255;

  /* Forma RGB de cada token, para componer sombras y vidrios sin duplicar
     el hex. Ej.: rgba(var(--node-rgb),.28)                                */
  --node-rgb:34,227,155;
  --node2-rgb:59,140,255;
  --amber-rgb:255,176,31;
  --violet-rgb:169,125,255;
  --gold-rgb:255,212,46;

  /* ---- Superficie ------------------------------------------------------ */
  --bg:#04070e;                /* fondo base de la landing (video detrás)   */
  --bg-panel:#05080f;
  --glass:rgba(9,17,32,.62);
  --glass-solid:rgba(6,12,24,.86);
  --line:rgba(140,175,215,.2);
  --line-fuerte:rgba(140,175,215,.34);

  /* ---- Texto ----------------------------------------------------------- */
  --txt:#f2f7ff;
  --txt-2:#dbe6f5;   /* párrafos sobre video                               */
  --txt-3:#c9d8ec;   /* texto dentro de cartas                             */
  --mut:#a8bcd8;     /* metadatos, secundario                              */
  --dim:#6d84a8;     /* terciario, numeración, sellos                      */

  /* ---- Tipografía ------------------------------------------------------ */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;

  /* Escala fluida — una sola progresión para todo el sitio.               */
  --t-xs:.64rem;
  --t-sm:.72rem;
  --t-cap:.82rem;
  --t-base:.94rem;
  --t-lead:clamp(1rem,1.7vw,1.18rem);
  --t-h3:clamp(1.05rem,2vw,1.25rem);
  --t-h2:clamp(1.75rem,4vw,3rem);
  --t-h1:clamp(2.1rem,5.4vw,4rem);

  --track-mono:.15em;   /* interletrado de las etiquetas monoespaciadas    */
  --track-kicker:.24em;

  /* ---- Espaciado (escala de 4) ----------------------------------------- */
  --e-1:4px;  --e-2:8px;  --e-3:13px; --e-4:18px;
  --e-5:26px; --e-6:34px; --e-7:48px; --e-8:64px;
  --pad-ch:clamp(20px,6vw,90px);   /* margen lateral de cada capítulo      */

  /* ---- Radios ---------------------------------------------------------- */
  --r-sm:9px; --r-md:11px; --r-lg:15px; --r-xl:22px; --r-full:999px;

  /* ---- Sombras --------------------------------------------------------- */
  --sh-carta:0 26px 54px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
  --sh-carta-alta:0 40px 78px -30px rgba(0,0,0,.95),0 0 0 1px rgba(var(--node-rgb),.3);
  --sh-btn:0 18px 38px -16px rgba(var(--vio-2-rgb),.85),inset 0 1px 0 rgba(255,255,255,.45);
  --sh-btn-alta:0 26px 52px -16px rgba(var(--vio-2-rgb),1);

  /* ---- Movimiento ------------------------------------------------------ */
  --v-rapida:.18s;   /* respuesta táctil: hover de botón                   */
  --v-media:.25s;    /* transformaciones cortas                            */
  --v-lenta:.4s;     /* apariciones, spotlights                            */
  --ease:cubic-bezier(.22,.61,.36,1);
  --respiracion:2.6s;  /* latido de los puntos vivos                       */
}

/* ===========================================================================
   BASE
   ========================================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--txt);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:rgba(var(--node-rgb),.3)}

h1,h2{line-height:1.06;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:600}

.mono{font-family:var(--mono)}

/* Color sólido a propósito: el degradado recortado sobre texto
   (-webkit-background-clip:text) parpadea y desaparece cuando el elemento
   lleva transform 3D + filtros, porque el navegador lo re-rasteriza en cada
   frame. Sólido + resplandor = mismo carácter, sin parpadeo.

   Violeta, no verde: el realce del titular es la ENERGÍA de la inteligencia y
   tiene que ser el mismo acento en los diez capítulos. Con el hero en violeta
   y el resto en verde, el sitio se leía como dos sitios pegados.            */
.grad{color:#cdb8ff;
  text-shadow:0 0 30px rgba(var(--vio-2-rgb),.75),0 0 12px rgba(var(--vio-rgb),.5),0 2px 16px rgba(0,0,0,.9)}
/* Legibilidad: sombra real detrás del texto que va sobre el video. */
.ink{text-shadow:0 2px 18px rgba(0,0,0,.92),0 1px 4px rgba(0,0,0,.85)}

/* ===========================================================================
   ACCESIBILIDAD — visible al tabular, invisible al ratón
   ========================================================================= */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--node);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
.salta{
  position:absolute;left:var(--e-3);top:-100px;z-index:200;
  padding:12px 20px;border-radius:var(--r-md);font-weight:600;
  background:var(--node);color:var(--bg);transition:top var(--v-media) var(--ease);
}
.salta:focus-visible{top:var(--e-3)}
/* Texto solo para lectores de pantalla. */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===========================================================================
   PRIMITIVAS
   ========================================================================= */

/* --- Etiqueta de capítulo (kicker) ------------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:var(--track-kicker);
  text-transform:uppercase;color:var(--vio);margin-bottom:var(--e-4);
}
.kicker i{
  width:7px;height:7px;border-radius:50%;background:var(--vio);
  box-shadow:0 0 12px var(--vio);animation:latido var(--respiracion) ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.45;transform:scale(.7)}}

.lead{font-size:var(--t-lead);color:var(--txt-2);max-width:52ch;margin-top:var(--e-4)}

/* --- Botones ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-md);border:0;cursor:pointer;
  font-weight:600;font-size:var(--t-base);position:relative;overflow:hidden;
  transition:transform var(--v-media) var(--ease),box-shadow var(--v-lenta) var(--ease),
             border-color var(--v-media),color var(--v-media);
  will-change:transform;
}
/* El botón primario es la ENERGÍA de la casa, no un semáforo: va en violeta
   igual que el núcleo. El verde queda reservado para lo que de verdad
   significa verde — algo vivo y en marcha. */
.btn.p{color:#0b0620;background:linear-gradient(135deg,#d9c4ff,var(--vio) 44%,var(--vio-2));box-shadow:var(--sh-btn);
  animation:latidoBtn 3.4s ease-in-out infinite}
.btn.p:hover{transform:translateY(-2px);box-shadow:var(--sh-btn-alta);animation-play-state:paused}
.btn.g{border:1px solid transparent;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn.g:hover{color:var(--vio)}
/* Latido de luz del botón primario: respira en reposo, se calma al pasar. */
@keyframes latidoBtn{
  0%,100%{box-shadow:0 18px 38px -16px rgba(var(--vio-2-rgb),.7),inset 0 1px 0 rgba(255,255,255,.45),0 0 0 0 rgba(var(--vio-rgb),0)}
  50%    {box-shadow:0 18px 40px -16px rgba(var(--vio-2-rgb),.95),inset 0 1px 0 rgba(255,255,255,.45),0 0 26px -2px rgba(var(--vio-rgb),.7)}
}
/* Borde holográfico animado del botón fantasma: un filo de luz recorre el
   contorno. Técnica de conic-gradient recortada al borde con máscara. */
.btn.g::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from 0deg,
    transparent 0deg,rgba(var(--vio-rgb),.95) 40deg,transparent 90deg,
    transparent 180deg,rgba(var(--node2-rgb),.85) 220deg,transparent 270deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:girarBorde 5s linear infinite;opacity:.55;transition:opacity var(--v-media)}
.btn.g:hover::before{opacity:1;animation-duration:2.2s}
/* Filo base tenue por debajo del borde animado, para que nunca se vea "sin marco". */
.btn.g::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--line);pointer-events:none}
@keyframes girarBorde{to{transform:rotate(360deg)}}

/* ---- Esquinas HUD reutilizables --------------------------------------------
   Cuatro corchetes de interfaz dibujados con gradientes (un solo elemento).
   Se aplican como overlay ::before en paneles y en el sello.               */
.hud-corners{
  --hud-c:var(--node);--hud-s:16px;--hud-t:1.5px;
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(var(--hud-c),var(--hud-c)) 0 0/var(--hud-s) var(--hud-t),
    linear-gradient(var(--hud-c),var(--hud-c)) 0 0/var(--hud-t) var(--hud-s),
    linear-gradient(var(--hud-c),var(--hud-c)) 100% 0/var(--hud-s) var(--hud-t),
    linear-gradient(var(--hud-c),var(--hud-c)) 100% 0/var(--hud-t) var(--hud-s),
    linear-gradient(var(--hud-c),var(--hud-c)) 0 100%/var(--hud-s) var(--hud-t),
    linear-gradient(var(--hud-c),var(--hud-c)) 0 100%/var(--hud-t) var(--hud-s),
    linear-gradient(var(--hud-c),var(--hud-c)) 100% 100%/var(--hud-s) var(--hud-t),
    linear-gradient(var(--hud-c),var(--hud-c)) 100% 100%/var(--hud-t) var(--hud-s);
  background-repeat:no-repeat;
  filter:drop-shadow(0 0 4px rgba(var(--node-rgb),.6));
}
/* Destello que barre el botón primario al pasar por encima. */
.btn.p::after,.cta::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);
}
.btn.p:hover::after,.cta:hover::after{left:135%}

.cta{
  display:inline-flex;align-items:center;font-size:var(--t-cap);font-weight:600;
  padding:10px 18px;border-radius:var(--r-sm);color:var(--bg);position:relative;overflow:hidden;
  background:linear-gradient(135deg,#6bebb8,var(--node) 60%,#2fb184);
  box-shadow:0 12px 28px -14px rgba(var(--node-rgb),.75),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform var(--v-media) var(--ease),box-shadow var(--v-media) var(--ease);
  animation:latidoBtn 3.4s ease-in-out infinite;
}
.cta:hover{transform:translateY(-1px);animation-play-state:paused;
  box-shadow:0 14px 30px -12px rgba(var(--node-rgb),.9),inset 0 1px 0 rgba(255,255,255,.45),0 0 22px -4px rgba(var(--node-rgb),.6)}

/* --- Carta de vidrio ----------------------------------------------------
   --e y --e2 los define cada capítulo: así el vidrio recoge la luz del
   fotograma que tiene detrás en ese momento del viaje.                     */
.k{
  position:relative;border:1px solid rgba(var(--e,130,175,215),.3);
  border-radius:var(--r-lg);padding:var(--e-4) 17px;overflow:hidden;
  background:
    radial-gradient(120% 100% at 8% 0%,rgba(var(--e,70,211,154),.20),transparent 58%),
    radial-gradient(120% 100% at 100% 100%,rgba(var(--e2,77,163,255),.16),transparent 60%),
    linear-gradient(155deg,rgba(14,26,48,.88),rgba(5,10,20,.92));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--sh-carta);
  transform-style:preserve-3d;will-change:transform,opacity;
  transition:box-shadow var(--v-lenta) var(--ease);  /* el transform lo maneja el scroll */
}
.k .hd{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.k .ic{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(var(--node-rgb),.1);
}
.k .ic svg{width:17px;height:17px;stroke:var(--node);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.k h3{
  font-family:var(--mono);font-size:var(--t-sm);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--node);font-weight:600;
}
.k p{font-size:.9rem;color:var(--txt-3);line-height:1.5}
/* Variantes de color: el icono y el título toman el color del dominio. */
.k.b .ic{background:rgba(var(--node2-rgb),.1)}  .k.b .ic svg{stroke:var(--node2)}  .k.b h3{color:var(--node2)}
.k.v .ic{background:rgba(var(--violet-rgb),.1)} .k.v .ic svg{stroke:var(--violet)} .k.v h3{color:var(--violet)}
.k.a .ic{background:rgba(var(--amber-rgb),.1)}  .k.a .ic svg{stroke:var(--amber)}  .k.a h3{color:var(--amber)}
.k.d .ic{background:rgba(var(--gold-rgb),.1)}   .k.d .ic svg{stroke:var(--gold)}   .k.d h3{color:var(--gold)}
/* Spotlight que sigue al cursor. */
.k::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity var(--v-lenta) var(--ease);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(var(--e,70,211,154),.26),transparent 62%);
}
.k:hover::before{opacity:1}
.k:hover{box-shadow:var(--sh-carta-alta)}
/* Filo superior de luz: el borde del vidrio. */
.k::after{
  content:"";position:absolute;left:16%;right:16%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--e,70,211,154),.85),transparent);
}

/* --- Rejilla de cartas --------------------------------------------------- */
.deck{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3);margin-top:30px;
  perspective:900px;perspective-origin:50% 50%;transform-style:preserve-3d;
}
.deck.tri{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.deck,.deck.tri{grid-template-columns:1fr}}

/* --- Insignia ------------------------------------------------------------ */
.badge{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-full);
  border:1px solid rgba(var(--e,var(--node-rgb)),.4);background:rgba(var(--e,var(--node-rgb)),.1);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:rgb(var(--e,var(--node-rgb)));
}

/* ===========================================================================
   MOVIMIENTO REDUCIDO — se respeta en todas las superficies
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .k,.rise{opacity:1!important;transform:none!important;filter:none!important}
}