/* =====================================================================
   KRAKEN STUDIO · Sistema de diseño  (ks.css)
   Tokens, base, componentes, animaciones y utilidades.
   Compartido por el sitio público, el brand book y el panel interno.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root{
  /* ---- Paleta obligatoria de marca ---- */
  --ks-primary:#0A192F;          /* Azul profundo  · fondos, sidebar, headers */
  --ks-accent:#FF6B35;           /* Naranja vibrante · CTAs, alertas, badge urgente */
  --ks-emerald:#2A9D8F;          /* Verde esmeralda · métricas positivas, verificado */
  --ks-cyan:#4ECDC4;             /* Celeste metálico · datos informativos, intermedios */
  --ks-bg:#111111;               /* Negro grafito · el tono más profundo de la marca */
  --ks-surface:#2A2A2A;          /* Gris hierro · tarjetas y contenedores */
  --ks-text:#F0F0F0;             /* Blanco roto · texto */

  /* ---- Tonos derivados de superficie ----
     El sitio original era un bloque grafito demasiado oscuro. Estos tonos
     son mezclas de la propia paleta (grafito + azul profundo + un punto de
     blanco roto) que elevan la página sin salirse de la marca: el fondo
     respira y las tarjetas se separan con claridad. */
  --ks-bg-page:#1E2530;          /* fondo de página (grafito azulado) */
  --ks-bg-page-2:#171C24;        /* punto medio del degradado */
  --ks-surface-2:#272E38;        /* contenedores hundidos */
  --ks-surface-3:#2E3641;        /* contenedores medios */
  --ks-surface-4:#414B58;        /* elementos elevados y hover */
  --ks-card:#333B47;             /* tarjetas sobre el fondo elevado */
  --ks-input:#1B2129;            /* campos de formulario */
  --ks-band:rgba(58,80,116,.40); /* franjas de sección */
  --ks-band-soft:rgba(48,68,100,.28);

  /* ---- Líneas y texto secundario (más legibles) ---- */
  --ks-line:rgba(240,240,240,.17);
  --ks-line-strong:rgba(240,240,240,.30);
  --ks-muted:#ADB8C4;
  --ks-muted-2:#DDE1E6;
  --ks-danger:#e5484d;
  --ks-warn:#e9c46a;

  /* Tipografía */
  --ks-font-display:'Cinzel Decorative', Cinzel, Georgia, 'Times New Roman', serif;
  --ks-font-body:'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ks-font-mono:'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Espaciado (base 8) */
  --ks-xs:4px; --ks-sm:12px; --ks-md:24px; --ks-lg:48px; --ks-xl:80px;
  --ks-gutter:24px;
  --ks-radius:2px;               /* esquinas rectas: la marca es brutalista */

  /* Profundidad */
  --ks-shadow:0 18px 40px rgba(0,0,0,.45);
  --ks-glow-accent:0 0 0 1px rgba(255,107,53,.35), 0 10px 30px rgba(255,107,53,.18);
  --ks-glow-cyan:0 0 0 1px rgba(78,205,196,.35), 0 10px 30px rgba(78,205,196,.14);

  /* Texturas */
  --ks-hex:url('../img/brand/patron-hexagonos.svg');
  --ks-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --ks-header-h:72px;
}

/* ---------------------------------------------------------------------
   2. RESET Y BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--ks-header-h) + 16px)}
body{
  margin:0;
  /* Degradado de página: azul profundo arriba, grafito azulado al centro y
     el grafito de marca al final. Más luz que un negro plano. */
  background:
    radial-gradient(1200px 700px at 10% -8%, rgba(10,25,47,.85), transparent 62%),
    radial-gradient(900px 520px at 98% 6%, rgba(78,205,196,.06), transparent 60%),
    linear-gradient(180deg, var(--ks-bg-page) 0%, var(--ks-bg-page-2) 52%, #131820 100%);
  background-color:var(--ks-bg);
  color:var(--ks-text);
  font-family:var(--ks-font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Textura de "pergamino digital": ahora más tenue, para no apagar la página */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    var(--ks-noise),
    var(--ks-hex),
    radial-gradient(1100px 620px at 12% -10%, rgba(10,25,47,.55), transparent 62%),
    radial-gradient(900px 520px at 96% 8%, rgba(255,107,53,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 30%);
  background-size:200px 200px, 120px 120px, auto, auto, auto;
  opacity:.22;
  mix-blend-mode:normal;
}
body>*{position:relative;z-index:1}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--ks-cyan);text-decoration:none}
a:hover{color:var(--ks-accent)}
hr{border:0;border-top:1px solid var(--ks-line);margin:var(--ks-md) 0}
::selection{background:var(--ks-accent);color:#111}

/* Scrollbar metálico */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--ks-surface-2)}
*::-webkit-scrollbar-thumb{background:var(--ks-surface);border:2px solid var(--ks-surface-2)}
*::-webkit-scrollbar-thumb:hover{background:var(--ks-accent)}
*{scrollbar-color:var(--ks-surface) var(--ks-surface-2);scrollbar-width:thin}

/* ---------------------------------------------------------------------
   3. TIPOGRAFÍA
   --------------------------------------------------------------------- */
h1,h2,h3,h4,h5{margin:0 0 var(--ks-sm);line-height:1.15;font-weight:700}
h1,h2{font-family:var(--ks-font-display);letter-spacing:.04em}
h1{font-size:clamp(34px,5.2vw,64px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-family:var(--ks-font-body);font-weight:600;font-size:clamp(19px,2vw,24px);letter-spacing:0}
h4{font-size:18px;font-weight:600}
p{margin:0 0 var(--ks-sm)}
h1 em,h2 em,h3 em{font-style:normal;color:var(--ks-accent);
  text-shadow:0 0 26px rgba(255,107,53,.35)}
.ks-lead{font-size:clamp(16px,1.35vw,19px);color:var(--ks-muted-2);max-width:70ch}
.ks-mono{font-family:var(--ks-font-mono);font-size:14px;font-weight:500}
.ks-label{
  font-family:var(--ks-font-mono);font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ks-accent);
  display:inline-flex;align-items:center;gap:10px;
}
.ks-label::before{content:"";width:32px;height:1px;background:var(--ks-accent);display:block;opacity:.7}
.ks-caption{font-size:13px;font-weight:300;color:var(--ks-muted)}
.ks-muted{color:var(--ks-muted)}
.text-emerald{color:var(--ks-emerald)}
.text-cyan{color:var(--ks-cyan)}
.text-accent{color:var(--ks-accent)}
.text-center{text-align:center}

/* ---------------------------------------------------------------------
   4. LAYOUT
   --------------------------------------------------------------------- */
.ks-container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--ks-md)}
.ks-container-wide{max-width:1500px}
.ks-section{padding:var(--ks-xl) 0;position:relative}
.ks-section-tight{padding:var(--ks-lg) 0}
.ks-section-head{max-width:760px;margin-bottom:var(--ks-lg)}
.ks-section-head.ks-center{margin-left:auto;margin-right:auto;text-align:center}
.ks-section-head.ks-center .ks-label{justify-content:center}
.ks-section-head.ks-center .ks-label::after{content:"";width:32px;height:1px;background:var(--ks-accent);opacity:.7}
.ks-grid{display:grid;gap:var(--ks-md)}
.ks-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ks-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ks-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ks-flex{display:flex;gap:var(--ks-sm);align-items:center}
.ks-between{display:flex;gap:var(--ks-sm);align-items:center;justify-content:space-between}
.ks-wrap{flex-wrap:wrap}
.ks-stack{display:flex;flex-direction:column;gap:var(--ks-sm)}
.ks-mt-0{margin-top:0}.ks-mt-1{margin-top:8px}.ks-mt-2{margin-top:16px}
.ks-mt-3{margin-top:24px}.ks-mt-4{margin-top:40px}
.ks-mb-0{margin-bottom:0}.ks-mb-1{margin-bottom:8px}.ks-mb-2{margin-bottom:16px}.ks-mb-3{margin-bottom:24px}
.ks-relative{position:relative}
.ks-sep{height:2px;border:0;background:
  linear-gradient(90deg,transparent,var(--ks-line-strong) 15%,var(--ks-line-strong) 85%,transparent);
  margin:var(--ks-lg) 0}
.ks-sep-claw{
  height:40px;background-image:url('../img/brand/separador-garra.svg');
  background-repeat:no-repeat;background-position:center;background-size:contain;
  margin:var(--ks-lg) 0;opacity:.9;
}

/* ---------------------------------------------------------------------
   5. BOTONES (biselados, esquinas cortadas, efecto forja)
   --------------------------------------------------------------------- */
.ks-btn{
  --btn-bg:var(--ks-accent);--btn-fg:#111111;--btn-line:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--ks-font-mono);font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;line-height:1;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.28), inset -1px -1px 0 rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
  text-decoration:none;white-space:nowrap;
}
.ks-btn:hover{color:#111;transform:translateY(-2px);box-shadow:var(--ks-glow-accent), inset 1px 1px 0 rgba(255,255,255,.3)}
.ks-btn:active{transform:translateY(0)}
.ks-btn:disabled,.ks-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.ks-btn-ghost{--btn-bg:transparent;--btn-fg:var(--ks-cyan);--btn-line:var(--ks-cyan)}
.ks-btn-ghost:hover{--btn-bg:rgba(78,205,196,.10);color:var(--ks-cyan);box-shadow:var(--ks-glow-cyan), inset 1px 1px 0 rgba(255,255,255,.08)}
.ks-btn-dark{--btn-bg:var(--ks-surface);--btn-fg:var(--ks-text);--btn-line:var(--ks-line)}
.ks-btn-dark:hover{--btn-bg:var(--ks-surface-4);color:var(--ks-text);box-shadow:0 0 0 1px var(--ks-line-strong)}
.ks-btn-emerald{--btn-bg:var(--ks-emerald);--btn-fg:#06231f}
.ks-btn-sm{padding:9px 16px;font-size:11px}
.ks-btn-lg{padding:17px 34px;font-size:14px}
.ks-btn-block{width:100%}
.ks-btn-icon{padding:9px 11px}

/* ---------------------------------------------------------------------
   6. TARJETAS "circuito desgastado"
   --------------------------------------------------------------------- */
.ks-card{
  position:relative;background:var(--ks-card);border:1px solid var(--ks-line);
  padding:var(--ks-md);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* vetas tipo madera de barco, muy tenues */
.ks-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px),
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 45%);
  mask-image:linear-gradient(180deg, #000 0 26%, transparent 60%);
}
/* trazas de circuito en las esquinas */
.ks-card::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:34px;height:34px;pointer-events:none;
  border-right:2px solid var(--ks-emerald);border-bottom:2px solid var(--ks-emerald);opacity:.45;
}
.ks-card>*{position:relative;z-index:1}
.ks-card:hover{transform:translateY(-4px);border-color:rgba(255,107,53,.45);box-shadow:var(--ks-shadow)}
.ks-card-flat{background:var(--ks-surface-2)}
.ks-card-accent{border-top:2px solid var(--ks-accent)}
.ks-card-cyan{border-top:2px solid var(--ks-cyan)}
.ks-card-emerald{border-top:2px solid var(--ks-emerald)}
.ks-card-clamp{overflow:hidden}
/* esquinas reforzadas (clamped) */
.ks-clamped{position:relative}
.ks-clamped::before,.ks-clamped::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;border-color:var(--ks-accent);
}
.ks-clamped::before{top:0;left:0;border-top:3px solid;border-left:3px solid}
.ks-clamped::after{bottom:0;right:0;border-bottom:3px solid;border-right:3px solid}

/* partículas al hacer hover */
.ks-particles{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease}
.ks-card:hover .ks-particles,.ks-hoverable:hover .ks-particles{opacity:1}
.ks-particles i{
  position:absolute;width:3px;height:3px;background:var(--ks-cyan);border-radius:50%;
  animation:ks-float 3.4s linear infinite;
}
.ks-particles i:nth-child(1){left:12%;top:70%;animation-delay:0s}
.ks-particles i:nth-child(2){left:34%;top:80%;animation-delay:.7s;background:var(--ks-accent)}
.ks-particles i:nth-child(3){left:58%;top:66%;animation-delay:1.4s}
.ks-particles i:nth-child(4){left:78%;top:78%;animation-delay:2.1s;background:var(--ks-emerald)}
.ks-particles i:nth-child(5){left:90%;top:60%;animation-delay:2.8s}
@keyframes ks-float{
  0%{transform:translateY(0) scale(.6);opacity:0}
  30%{opacity:.9}
  100%{transform:translateY(-70px) scale(1.1);opacity:0}
}

/* ---------------------------------------------------------------------
   7. ETIQUETAS, BADGES Y ESTADOS
   --------------------------------------------------------------------- */
.ks-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  font-family:var(--ks-font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(240,240,240,.06);border:1px solid var(--ks-line);color:var(--ks-muted-2);
}
.ks-badge-accent{background:rgba(255,107,53,.14);border-color:rgba(255,107,53,.45);color:var(--ks-accent)}
.ks-badge-emerald{background:rgba(42,157,143,.14);border-color:rgba(42,157,143,.45);color:var(--ks-emerald)}
.ks-badge-cyan{background:rgba(78,205,196,.14);border-color:rgba(78,205,196,.45);color:var(--ks-cyan)}
.ks-badge-danger{background:rgba(229,72,77,.16);border-color:rgba(229,72,77,.5);color:#ff9ea1}
.ks-badge-muted{opacity:.75}
.ks-pulse{position:relative}
.ks-pulse::after{
  content:"";position:absolute;inset:-1px;border:1px solid currentColor;
  animation:ks-pulse 1.9s ease-out infinite;pointer-events:none;
}
@keyframes ks-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.ks-pip{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.ks-pip-green{background:var(--ks-emerald);box-shadow:0 0 8px rgba(42,157,143,.8)}
.ks-pip-orange{background:var(--ks-accent);box-shadow:0 0 8px rgba(255,107,53,.85)}
.ks-pip-cyan{background:var(--ks-cyan);box-shadow:0 0 8px rgba(78,205,196,.8)}
.ks-pip-gray{background:#8f9097}
.ks-dot-accent{color:var(--ks-accent)}
.ks-dot-emerald{color:var(--ks-emerald)}
.ks-dot-cyan{color:var(--ks-cyan)}
.ks-chip{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;font-family:var(--ks-font-mono);
  font-size:11px;background:var(--ks-surface-2);border:1px solid var(--ks-line);color:var(--ks-muted-2);
  cursor:default;
}
.ks-chip-active{border-color:var(--ks-accent);color:var(--ks-accent);background:rgba(255,107,53,.10)}
.ks-star{color:var(--ks-accent)}

/* ---------------------------------------------------------------------
   8. FORMULARIOS
   --------------------------------------------------------------------- */
.ks-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--ks-sm)}
.ks-field>label{
  font-family:var(--ks-font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ks-muted)
}
.ks-input,.ks-select,.ks-textarea{
  width:100%;padding:11px 12px;background:var(--ks-input);color:var(--ks-text);
  border:1px solid var(--ks-line);border-bottom:2px solid var(--ks-line-strong);
  font-family:var(--ks-font-body);font-size:15px;border-radius:0;outline:none;
  transition:border-color .2s ease, box-shadow .25s ease;
  -webkit-appearance:none;appearance:none;
}
.ks-textarea{min-height:110px;resize:vertical;line-height:1.55}
.ks-select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ks-cyan) 50%),linear-gradient(135deg,var(--ks-cyan) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;
}
.ks-select option{background:var(--ks-surface-2);color:var(--ks-text)}
.ks-input::placeholder,.ks-textarea::placeholder{color:#8B95A1}
.ks-input:focus,.ks-select:focus,.ks-textarea:focus{
  border-color:var(--ks-accent);border-bottom-color:var(--ks-accent);
  box-shadow:0 12px 24px -14px rgba(255,107,53,.85)
}
.ks-input.is-invalid,.ks-textarea.is-invalid,.ks-select.is-invalid{border-color:var(--ks-danger)}
.ks-help{font-size:12px;color:var(--ks-muted)}
.ks-error{font-size:12px;color:#ff9ea1}
.ks-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ks-muted-2);cursor:pointer}
.ks-check input{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:0 0 auto;margin-top:1px;
  border:1px solid var(--ks-line-strong);background:var(--ks-input);cursor:pointer;position:relative;
}
.ks-check input:checked{background:var(--ks-accent);border-color:var(--ks-accent)}
.ks-check input:checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#111;font-size:13px;font-weight:700}
.ks-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.ks-switch input{position:absolute;opacity:0;width:0;height:0}
.ks-switch i{width:44px;height:22px;background:var(--ks-input);border:1px solid var(--ks-line-strong);position:relative;transition:.22s flex}
.ks-switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#5c6570;transition:.22s}
.ks-switch input:checked+i{background:rgba(255,107,53,.18);border-color:var(--ks-accent)}
.ks-switch input:checked+i::after{left:24px;background:var(--ks-accent)}
.ks-switch span{font-size:14px;color:var(--ks-muted-2)}
.ks-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--ks-sm)}
.ks-form-grid .ks-span-2{grid-column:1 / -1}

/* ---------------------------------------------------------------------
   9. ANIMACIONES DE ENTRADA
   --------------------------------------------------------------------- */
.ks-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.28,1)}
.ks-reveal.is-in{opacity:1;transform:none}
.ks-reveal-d1{transition-delay:.08s}.ks-reveal-d2{transition-delay:.16s}
.ks-reveal-d3{transition-delay:.24s}.ks-reveal-d4{transition-delay:.32s}
.ks-seal{animation:ks-seal .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes ks-seal{0%{transform:scale(0) rotate(-25deg);opacity:0}70%{transform:scale(1.18) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.ks-waves{display:inline-flex;gap:3px;align-items:flex-end;height:12px}
.ks-waves i{width:3px;height:5px;background:var(--ks-cyan);animation:ks-wave 1.1s ease-in-out infinite}
.ks-waves i:nth-child(2){animation-delay:.15s}
.ks-waves i:nth-child(3){animation-delay:.3s}
@keyframes ks-wave{0%,100%{height:4px;opacity:.5}50%{height:12px;opacity:1}}
.ks-confetti{position:fixed;inset:0;pointer-events:none;z-index:9000;overflow:hidden}
.ks-confetti i{position:absolute;top:-12px;width:8px;height:12px;opacity:.95;animation:ks-fall 2s cubic-bezier(.3,.7,.6,1) forwards}
@keyframes ks-fall{to{transform:translateY(102vh) rotate(540deg);opacity:0}}
.ks-spin{animation:ks-spin 1s linear infinite}
@keyframes ks-spin{to{transform:rotate(360deg)}}
.ks-skeleton{background:linear-gradient(90deg,var(--ks-surface-2),var(--ks-surface),var(--ks-surface-2));background-size:200% 100%;animation:ks-skel 1.4s linear infinite}
@keyframes ks-skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .ks-reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------------------
   10. ORNAMENTOS
   --------------------------------------------------------------------- */
.ks-glyph{
  width:120px;height:120px;background-image:url('../img/brand/isotipo-kraken.svg');
  background-size:contain;background-repeat:no-repeat;opacity:.16;pointer-events:none;
}
.ks-watermark{
  position:absolute;right:-60px;top:-40px;width:340px;height:340px;
  background-image:url('../img/brand/isotipo-kraken.svg');background-size:contain;
  background-repeat:no-repeat;opacity:.05;pointer-events:none;
}
.ks-scanline{
  position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--ks-cyan),transparent);
  opacity:.35;animation:ks-scan 6s linear infinite;
}
@keyframes ks-scan{0%{top:0}100%{top:100%}}
.ks-avatar{
  display:grid;place-items:center;background:linear-gradient(140deg,var(--ks-primary),#123);
  border:1px solid var(--ks-line-strong);color:var(--ks-accent);
  font-family:var(--ks-font-mono);font-weight:700;flex:0 0 auto;overflow:hidden;
}
.ks-avatar img{width:100%;height:100%;object-fit:cover}
.ks-avatar-40{width:40px;height:40px;font-size:14px}
.ks-avatar-56{width:56px;height:56px;font-size:18px}
.ks-avatar-88{width:88px;height:88px;font-size:26px}
.ks-avatar-120{width:120px;height:120px;font-size:34px}
.ks-meter{position:relative;width:112px;height:112px;flex:0 0 auto}
.ks-meter svg{transform:rotate(-90deg)}
.ks-meter circle{fill:none;stroke-width:9;stroke-linecap:butt}
.ks-meter .track{stroke:rgba(240,240,240,.10)}
.ks-meter .bar{transition:stroke-dashoffset .9s cubic-bezier(.22,.8,.28,1)}
.ks-meter b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--ks-font-mono);font-size:24px;font-weight:700;color:var(--ks-text)
}
.ks-bar{height:9px;background:rgba(240,240,240,.08);overflow:hidden}
.ks-bar>i{display:block;height:100%;transition:width .8s cubic-bezier(.22,.8,.28,1)}
.ks-hex-art{
  background-image:var(--ks-hex);background-size:120px 120px;background-repeat:repeat;
}
.ks-empty{
  padding:var(--ks-lg) var(--ks-md);text-align:center;color:var(--ks-muted);
  border:1px dashed var(--ks-line-strong);font-family:var(--ks-font-mono);font-size:13px
}

/* ---------------------------------------------------------------------
   11. TABLAS
   --------------------------------------------------------------------- */
.ks-table-wrap{overflow-x:auto;border:1px solid var(--ks-line);background:var(--ks-surface-2)}
table.ks-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.ks-table th{
  text-align:left;padding:12px 14px;font-family:var(--ks-font-mono);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ks-muted);
  background:var(--ks-primary);border-bottom:1px solid var(--ks-line);white-space:nowrap
}
.ks-table td{padding:11px 14px;border-bottom:1px solid var(--ks-line);vertical-align:middle}
.ks-table tbody tr:hover{background:rgba(255,255,255,.028)}
.ks-table tbody tr:last-child td{border-bottom:0}
.ks-table .ks-num{font-family:var(--ks-font-mono);text-align:right;white-space:nowrap}

/* ---------------------------------------------------------------------
   12. HELPERS DE MARCA PARA EL BRAND BOOK
   --------------------------------------------------------------------- */
.ks-swatch{border:1px solid var(--ks-line);background:var(--ks-surface-2);overflow:hidden}
.ks-swatch .chip{height:104px;display:grid;place-items:end start;padding:10px}
.ks-swatch .chip span{font-family:var(--ks-font-mono);font-size:11px;letter-spacing:.1em;color:rgba(17,17,17,.75)}
.ks-swatch .meta{padding:12px 14px}
.ks-swatch .meta b{display:block;font-size:15px}
.ks-swatch .meta code{font-family:var(--ks-font-mono);font-size:12px;color:var(--ks-cyan)}
.ks-swatch .meta small{display:block;color:var(--ks-muted);font-size:12px;margin-top:4px}
.ks-logo-box{
  background:var(--ks-surface-2);border:1px solid var(--ks-line);padding:var(--ks-md);
  display:grid;place-items:center;min-height:190px;position:relative;overflow:hidden
}
.ks-logo-box.alt{background:#0A192F}
.ks-logo-box.light{background:#e9e9e6}
.ks-logo-box small{
  position:absolute;left:12px;bottom:10px;font-family:var(--ks-font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ks-muted)
}
.ks-type-row{display:flex;gap:var(--ks-md);align-items:baseline;border-bottom:1px solid var(--ks-line);padding:14px 0;flex-wrap:wrap}
.ks-type-row .tag{font-family:var(--ks-font-mono);font-size:11px;color:var(--ks-muted);min-width:170px;letter-spacing:.1em}

/* ---------------------------------------------------------------------
   13. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  :root{--ks-xl:64px;--ks-lg:40px}
  .ks-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ks-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  :root{--ks-xl:48px;--ks-lg:32px;--ks-md:16px}
  .ks-cols-2,.ks-cols-3,.ks-cols-4{grid-template-columns:1fr}
  .ks-form-grid{grid-template-columns:1fr}
  .ks-btn{width:100%;justify-content:center}
  .ks-btn-inline{width:auto}
  body::before{opacity:.34}
}
@media print{
  body{background:#fff;color:#000}
  body::before{display:none}
  .ks-btn{display:none}
}