/* =====================================================================
   KRAKEN STUDIO · Sitio público  (site.css)
   Encabezado, secciones de la landing, brand book y widget del chatbot.
   Depende de ks.css
   ===================================================================== */

/* ---------------------------------------------------------------------
   ENCABEZADO
   --------------------------------------------------------------------- */
.ks-header{
  position:sticky;top:0;z-index:900;height:var(--ks-header-h);
  background:rgba(17,34,60,.90);backdrop-filter:blur(14px) saturate(130%);
  border-bottom:1px solid var(--ks-line);
}
.ks-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,107,53,.75),transparent)
}
.ks-header-in{display:flex;align-items:center;gap:var(--ks-md);height:100%}
.ks-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* La marca no es cuadrada (proporción ~1.17:1): se fija el alto y el ancho
   queda automático para no deformar el logo. */
.ks-brand img.mark{height:40px;width:auto;max-width:120px}
.ks-brand .txt{display:flex;flex-direction:column;line-height:1}
.ks-brand .txt b{
  font-family:var(--ks-font-display);font-size:19px;letter-spacing:.14em;color:var(--ks-text);font-weight:700
}
.ks-brand .txt span{
  font-family:var(--ks-font-mono);font-size:9.5px;letter-spacing:.42em;color:var(--ks-accent);margin-top:3px
}
.ks-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.ks-nav a{
  padding:9px 13px;font-family:var(--ks-font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;
  color:var(--ks-muted-2);text-transform:uppercase;position:relative;transition:color .2s ease
}
.ks-nav a:hover,.ks-nav a.active{color:var(--ks-text)}
.ks-nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;background:var(--ks-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease
}
.ks-nav a:hover::after,.ks-nav a.active::after{transform:scaleX(1)}
.ks-header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ks-lang{display:flex;border:1px solid var(--ks-line-strong)}
.ks-lang a{
  padding:7px 10px;font-family:var(--ks-font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--ks-muted);background:transparent
}
.ks-lang a.on{background:var(--ks-accent);color:#111}
.ks-burger{display:none;background:transparent;border:1px solid var(--ks-line-strong);color:var(--ks-text);padding:9px 12px;cursor:pointer;font-family:var(--ks-font-mono);font-size:16px}
@media (max-width:1080px){
  .ks-nav{
    position:fixed;inset:var(--ks-header-h) 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--ks-primary);border-bottom:1px solid var(--ks-line);padding:10px 16px 20px;
    display:none;max-height:calc(100vh - var(--ks-header-h));overflow:auto;z-index:899
  }
  .ks-nav.open{display:flex}
  .ks-nav a{padding:14px 4px;font-size:13px;border-bottom:1px solid var(--ks-line)}
  .ks-burger{display:block}
  .ks-header-actions .ks-btn{display:none}
}

/* ---------------------------------------------------------------------
   FRANJAS DE SECCIÓN
   Alternan el tono para que la página no sea un bloque oscuro continuo.
   Son azul pizarra (no azul profundo casi negro) y llevan un halo suave
   de marca que aporta luz.
   --------------------------------------------------------------------- */
.ks-band-a{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(78,205,196,.07), transparent 62%),
    linear-gradient(180deg, transparent, var(--ks-band), transparent);
}
.ks-band-b{
  background:
    radial-gradient(800px 380px at 85% 10%, rgba(255,107,53,.06), transparent 60%),
    var(--ks-band);
}
.ks-band-c{
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(42,157,143,.06), transparent 62%),
    var(--ks-band-soft);
}

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.ks-hero{position:relative;padding:calc(var(--ks-xl) * .9) 0 var(--ks-xl);overflow:hidden}
.ks-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--ks-lg);align-items:center}
.ks-hero h1{margin-bottom:var(--ks-md)}
.ks-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--ks-md)}
.ks-hero-stats{display:flex;gap:var(--ks-lg);margin-top:var(--ks-lg);flex-wrap:wrap}
.ks-hero-stats div{position:relative;padding-left:14px}
.ks-hero-stats div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--ks-accent);opacity:.8}
.ks-hero-stats b{display:block;font-family:var(--ks-font-display);font-size:30px;line-height:1}
.ks-hero-stats span{font-family:var(--ks-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ks-muted)}
/* Marco del kraken emergiendo de una pantalla de código */
.ks-hero-visual{position:relative}
.ks-hero-frame{
  position:relative;border:1px solid var(--ks-line-strong);background:#151E2C;
  box-shadow:var(--ks-shadow);overflow:hidden;
}
.ks-hero-frame img{width:100%;aspect-ratio:1/1;object-fit:cover;opacity:.96}
.ks-hero-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,25,47,.14), rgba(17,17,17,.52)),
             repeating-linear-gradient(0deg, rgba(78,205,196,.05) 0 1px, transparent 1px 3px);
  pointer-events:none
}
.ks-code{
  position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  background:linear-gradient(180deg,transparent,rgba(21,28,38,.92) 45%);
  font-family:var(--ks-font-mono);font-size:11.5px;line-height:1.7;color:var(--ks-cyan)
}
.ks-code span{color:var(--ks-accent)}
.ks-code i{color:var(--ks-muted);font-style:normal}
.ks-hero-badge{
  position:absolute;left:-14px;top:26px;background:var(--ks-accent);color:#111;
  font-family:var(--ks-font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;
  padding:8px 12px;text-transform:uppercase;box-shadow:var(--ks-glow-accent)
}
@media (max-width:980px){
  .ks-hero-in{grid-template-columns:1fr}
  .ks-hero-visual{order:-1}
  .ks-hero-badge{left:10px}
}

/* Cinta de tecnologías */
.ks-marquee{
  border-top:1px solid var(--ks-line);border-bottom:1px solid var(--ks-line);
  background:rgba(34,52,82,.50);overflow:hidden;padding:14px 0
}
.ks-marquee-track{display:flex;gap:var(--ks-lg);align-items:center;width:max-content;animation:ks-marq 34s linear infinite}
.ks-marquee:hover .ks-marquee-track{animation-play-state:paused}
.ks-marquee span{
  font-family:var(--ks-font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ks-muted);
  display:inline-flex;align-items:center;gap:var(--ks-lg)
}
.ks-marquee span::after{content:"◆";color:var(--ks-accent);font-size:8px}
@keyframes ks-marq{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------------
   SERVICIOS
   --------------------------------------------------------------------- */
.ks-service{display:flex;flex-direction:column;gap:12px;min-height:100%}
.ks-service .ico{
  width:56px;height:56px;display:grid;place-items:center;font-size:24px;
  border:1px solid var(--ks-line-strong);background:linear-gradient(140deg,rgba(18,34,58,.92),rgba(58,68,80,.65));
  color:var(--ks-accent);position:relative
}
.ks-service .ico::before,.ks-service .ico::after{content:"";position:absolute;width:9px;height:9px;border-color:var(--ks-cyan)}
.ks-service .ico::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.ks-service .ico::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid}
.ks-service h3{margin:0}
.ks-service .tagline{font-family:var(--ks-font-mono);font-size:12px;color:var(--ks-cyan);letter-spacing:.04em}
.ks-service p{color:var(--ks-muted-2);font-size:15px;margin:0}
.ks-service ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ks-service li{position:relative;padding-left:22px;font-size:14px;color:var(--ks-muted-2)}
.ks-service li::before{
  content:"›";position:absolute;left:6px;top:-1px;color:var(--ks-emerald);font-weight:700
}
.ks-service .foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--ks-line);
  display:flex;justify-content:space-between;align-items:center;gap:10px
}
.ks-service .price{font-family:var(--ks-font-mono);font-size:13px;color:var(--ks-accent);font-weight:700}
.ks-service .accent-line{height:2px;width:100%;background:linear-gradient(90deg,var(--ks-accent),transparent)}

/* ---------------------------------------------------------------------
   PROCESO
   --------------------------------------------------------------------- */
.ks-process{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ks-md)}
.ks-process::before{
  content:"";position:absolute;left:0;right:0;top:26px;height:1px;
  background:linear-gradient(90deg,var(--ks-primary),var(--ks-cyan),var(--ks-emerald),var(--ks-accent),var(--ks-surface))
}
.ks-step{position:relative;padding-top:56px}
.ks-step .node{
  position:absolute;top:12px;left:0;width:30px;height:30px;display:grid;place-items:center;
  background:var(--ks-bg-page);border:2px solid var(--ks-accent);color:var(--ks-accent);
  font-family:var(--ks-font-mono);font-size:12px;font-weight:700;transform:rotate(45deg)
}
.ks-step .node b{transform:rotate(-45deg)}
.ks-step h4{margin:0 0 6px;font-family:var(--ks-font-body);font-size:17px}
.ks-step p{font-size:14px;color:var(--ks-muted);margin:0}
@media (max-width:1024px){
  .ks-process{grid-template-columns:1fr 1fr}
  .ks-process::before{display:none}
  .ks-step{padding-top:46px}
}
@media (max-width:640px){.ks-process{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   PORTAFOLIO
   --------------------------------------------------------------------- */
.ks-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--ks-md)}
.ks-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ks-md)}
.ks-work-item{position:relative;overflow:hidden;border:1px solid var(--ks-line);background:var(--ks-surface-3);display:block}
.ks-work-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.22,.8,.28,1), filter .4s ease;filter:saturate(.85) contrast(1.05)}
.ks-work-item:hover img{transform:scale(1.06)}
.ks-work-item .ov{
  position:absolute;inset:auto 0 0 0;padding:18px;
  background:linear-gradient(180deg,transparent,rgba(17,17,17,.94) 55%);
  display:flex;flex-direction:column;gap:4px
}
.ks-work-item .ov b{font-size:17px;color:var(--ks-text)}
.ks-work-item .ov small{font-family:var(--ks-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ks-accent)}
.ks-work-item .ov em{font-size:13px;color:var(--ks-muted-2);font-style:normal}
.ks-work-item .res{
  position:absolute;top:12px;right:12px;background:rgba(42,157,143,.92);color:#06231f;
  font-family:var(--ks-font-mono);font-size:11px;font-weight:700;padding:5px 9px
}
.ks-work-item .year{
  position:absolute;top:12px;left:12px;font-family:var(--ks-font-mono);font-size:11px;
  color:var(--ks-muted);background:rgba(17,17,17,.7);padding:4px 8px
}
@media (max-width:900px){.ks-work{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.ks-work{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   ESTUDIO / EQUIPO
   --------------------------------------------------------------------- */
.ks-about-in{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--ks-lg);align-items:center}
.ks-about-in.flip{grid-template-columns:.85fr 1.15fr}
.ks-about-media{position:relative;border:1px solid var(--ks-line);background:var(--ks-surface-3);overflow:hidden}
.ks-about-media img{width:100%;object-fit:cover}
.ks-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ks-sm);margin-top:var(--ks-md)}
.ks-value{padding:16px;border-left:2px solid var(--ks-emerald);background:rgba(42,157,143,.06)}
.ks-value b{display:block;font-size:15px;margin-bottom:4px}
.ks-value p{margin:0;font-size:13.5px;color:var(--ks-muted)}
.ks-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ks-md);margin-top:var(--ks-lg)}
.ks-member{text-align:center}
.ks-member .ks-avatar{margin:0 auto 12px}
.ks-member b{display:block;font-size:16px}
.ks-member small{font-family:var(--ks-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ks-accent)}
.ks-member p{font-size:13.5px;color:var(--ks-muted);margin-top:8px}
@media (max-width:1024px){
  .ks-about-in,.ks-about-in.flip{grid-template-columns:1fr}
  .ks-values{grid-template-columns:1fr}
  .ks-team{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------------------
   PRECIOS
   --------------------------------------------------------------------- */
.ks-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ks-md);align-items:stretch}
.ks-plan{display:flex;flex-direction:column;gap:14px;padding:var(--ks-md);position:relative;
  /* La etiqueta «Más elegido» va montada sobre el borde superior: la tarjeta
     no puede recortar el contenido o desaparece. */overflow:visible}
.ks-plan.hl{border-color:rgba(255,107,53,.60);background:linear-gradient(180deg,rgba(255,107,53,.09),transparent 42%),var(--ks-card);box-shadow:var(--ks-glow-accent)}
.ks-plan .badge-top{
  position:absolute;top:-12px;left:var(--ks-md);background:var(--ks-accent);color:#111;
  font-family:var(--ks-font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 10px;text-transform:uppercase
}
.ks-plan .amount{font-family:var(--ks-font-display);font-size:40px;line-height:1}
.ks-plan .amount small{font-family:var(--ks-font-mono);font-size:12px;color:var(--ks-muted);letter-spacing:.1em;display:block;margin-top:6px}
.ks-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.ks-plan li{position:relative;padding-left:24px;font-size:14.5px;color:var(--ks-muted-2)}
.ks-plan li::before{content:"✓";position:absolute;left:2px;color:var(--ks-emerald);font-weight:700}
@media (max-width:980px){.ks-plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* ---------------------------------------------------------------------
   TESTIMONIOS Y FAQ
   --------------------------------------------------------------------- */
.ks-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ks-md)}
.ks-quote blockquote{margin:0;font-size:16px;color:var(--ks-text);line-height:1.7}
.ks-quote blockquote::before{content:"❝";display:block;font-size:30px;color:var(--ks-accent);line-height:.6;margin-bottom:8px}
.ks-quote .who{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--ks-line)}
.ks-quote .who b{display:block;font-size:14.5px}
.ks-quote .who small{color:var(--ks-muted);font-size:12.5px}
@media (max-width:820px){.ks-quotes{grid-template-columns:1fr}}

.ks-faq-list{max-width:900px;margin:0 auto;border-top:1px solid var(--ks-line)}
.ks-faq-item{border-bottom:1px solid var(--ks-line)}
.ks-faq-q{
  width:100%;display:flex;gap:var(--ks-sm);align-items:center;justify-content:space-between;text-align:left;
  padding:20px 4px;background:transparent;border:0;color:var(--ks-text);cursor:pointer;
  font-family:var(--ks-font-body);font-size:17px;font-weight:600
}
.ks-faq-q:hover{color:var(--ks-accent)}
.ks-faq-q i{
  flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--ks-line-strong);
  color:var(--ks-accent);font-style:normal;font-size:15px;transition:transform .25s ease
}
.ks-faq-item.open .ks-faq-q i{transform:rotate(45deg);border-color:var(--ks-accent)}
.ks-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.ks-faq-a>div{padding:0 4px 22px;color:var(--ks-muted-2);font-size:15px;max-width:78ch}
.ks-faq-item.open .ks-faq-a{max-height:640px}

/* ---------------------------------------------------------------------
   CTA Y CONTACTO
   --------------------------------------------------------------------- */
.ks-cta{position:relative;overflow:hidden;border-top:1px solid var(--ks-line);border-bottom:1px solid var(--ks-line);
  background:radial-gradient(800px 340px at 50% 120%,rgba(255,107,53,.18),transparent 62%),rgba(34,52,82,.48)}
.ks-cta-in{text-align:center;max-width:820px;margin:0 auto}
.ks-cta .ks-btn{margin:6px}
.ks-contact-in{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--ks-lg)}
.ks-contact-side{display:flex;flex-direction:column;gap:var(--ks-md)}
.ks-contact-item{display:flex;gap:14px;align-items:flex-start}
.ks-contact-item .ic{
  width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--ks-line-strong);color:var(--ks-cyan);font-size:16px
}
.ks-contact-item b{display:block;font-family:var(--ks-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ks-muted)}
.ks-contact-item span{font-size:15px;color:var(--ks-text)}
.ks-form-status{margin-top:14px;padding:13px 15px;border:1px solid var(--ks-line);font-size:14px;display:none}
.ks-form-status.show{display:block}
.ks-form-status.ok{border-color:rgba(42,157,143,.5);background:rgba(42,157,143,.10);color:#9fe8dd}
.ks-form-status.err{border-color:rgba(229,72,77,.5);background:rgba(229,72,77,.10);color:#ffb3b5}
@media (max-width:900px){.ks-contact-in{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   PIE
   --------------------------------------------------------------------- */
.ks-footer{background:#161C25;border-top:1px solid var(--ks-line);padding:var(--ks-lg) 0 var(--ks-md);margin-top:var(--ks-xl)}
.ks-footer-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--ks-md)}
.ks-footer h5{font-family:var(--ks-font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ks-accent);margin:0 0 14px}
.ks-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ks-footer li a{font-size:14px;color:var(--ks-muted-2)}
.ks-footer li a:hover{color:var(--ks-accent)}
.ks-footer .social{display:flex;gap:10px;margin-top:16px}
.ks-footer .social a{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ks-line-strong);
  color:var(--ks-muted-2);font-family:var(--ks-font-mono);font-size:12px
}
.ks-footer .social a:hover{border-color:var(--ks-accent);color:var(--ks-accent)}
.ks-news{display:flex;gap:8px;margin-top:10px}
.ks-news input{flex:1;padding:10px 12px;background:var(--ks-input);border:1px solid var(--ks-line);color:var(--ks-text);font-size:14px;outline:none}
.ks-news input:focus{border-color:var(--ks-accent)}
.ks-footer-bottom{
  margin-top:var(--ks-lg);padding-top:var(--ks-md);border-top:1px solid var(--ks-line);
  display:flex;justify-content:space-between;gap:var(--ks-sm);flex-wrap:wrap;
  font-size:13px;color:var(--ks-muted)
}
@media (max-width:900px){.ks-footer-in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ks-footer-in{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   WIDGET DEL CHATBOT
   --------------------------------------------------------------------- */
.ks-chat-fab{
  position:fixed;right:22px;bottom:22px;z-index:1200;width:60px;height:60px;padding:0;
  display:grid;place-items:center;background:var(--ks-accent);border:1px solid rgba(255,255,255,.25);
  cursor:pointer;box-shadow:0 14px 34px rgba(255,107,53,.34);
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px))
}
/* El botón del chat es naranja: el logo entra en grafito, igual que el texto
   de los botones naranjas (.ks-btn usa #111111). Así nunca se pierde el
   contraste, sea cual sea el color del logo. */
.ks-chat-fab img{height:32px;width:auto;filter:brightness(0)}
/* Indicador de estado del botón del chat.
   Sobre el naranja de marca ni el esmeralda ni el blanco alcanzan 3:1, así
   que el punto es un disco grafito (7,4:1) con el color de estado en el
   núcleo: se ve siempre y el color sigue comunicando. */
.ks-chat-fab .state{
  position:absolute;top:7px;right:7px;width:14px;height:14px;border-radius:50%;
  background:#111111;border:2px solid #111111
}
.ks-chat-fab .state::after{
  content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:#2A9D8F
}
.ks-chat-fab .state.hand::after{background:var(--ks-cyan)}
.ks-chat-fab:hover{transform:translateY(-2px)}
.ks-chat-fab .close-x{color:#111;font-size:24px;font-weight:700;font-family:var(--ks-font-mono);display:none;line-height:1}
.ks-chat-fab.is-open .ic{display:none}
.ks-chat-fab.is-open .close-x{display:block}
.ks-chat-fab .ic{display:block;line-height:0}

.ks-chat{
  position:fixed;right:22px;bottom:96px;z-index:1201;width:380px;max-width:calc(100vw - 32px);
  background:var(--ks-primary);border:1px solid var(--ks-line-strong);border-top:3px solid var(--ks-accent);
  box-shadow:0 26px 60px rgba(0,0,0,.6);display:none;flex-direction:column;
  max-height:min(640px, calc(100vh - 130px));overflow:hidden
}
.ks-chat.open{display:flex;animation:ks-chat-in .28s cubic-bezier(.22,.8,.28,1)}
@keyframes ks-chat-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ks-chat-head{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--ks-line);background:rgba(26,35,48,.55)}
.ks-chat-head .av{width:38px;height:38px;display:grid;place-items:center;background:rgba(255,107,53,.14);border:1px solid rgba(255,107,53,.4)}
.ks-chat-head .av img{height:22px;width:auto}
.ks-chat-head b{display:block;font-size:14.5px}
.ks-chat-head small{display:flex;align-items:center;gap:6px;font-family:var(--ks-font-mono);font-size:10.5px;color:var(--ks-emerald);letter-spacing:.06em}
.ks-chat-head .x{margin-left:auto;background:transparent;border:0;color:var(--ks-muted);font-size:20px;cursor:pointer;line-height:1}
.ks-chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:240px}
.ks-msg{max-width:86%;padding:11px 13px;font-size:14.5px;line-height:1.55;position:relative;animation:ks-msg-in .26s ease both}
@keyframes ks-msg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ks-msg.bot{background:rgba(54,64,78,.95);border:1px solid var(--ks-line);align-self:flex-start;border-left:2px solid var(--ks-cyan)}
.ks-msg.bot.gray{background:var(--ks-surface);border-left-color:#8f9097;color:var(--ks-muted-2)}
.ks-msg.bot.hand{background:rgba(255,107,53,.16);border-color:rgba(255,107,53,.55);border-left-color:var(--ks-accent);animation:ks-msg-in .26s ease both, ks-handoff 1.6s ease-in-out 2}
@keyframes ks-handoff{0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,0)}50%{box-shadow:0 0 0 5px rgba(255,107,53,.16)}}
.ks-msg.user{background:rgba(10,25,47,.95);border:1px solid var(--ks-line-strong);align-self:flex-end;border-right:2px solid var(--ks-accent)}
.ks-msg.sys{align-self:center;background:transparent;border:1px dashed var(--ks-line-strong);font-family:var(--ks-font-mono);font-size:11.5px;color:var(--ks-muted);max-width:100%;text-align:center}
.ks-msg .meta{display:flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--ks-font-mono);font-size:10.5px;color:var(--ks-muted)}
.ks-verified{
  display:inline-flex;align-items:center;gap:5px;color:var(--ks-emerald);cursor:help
}
.ks-verified b{
  display:grid;place-items:center;width:15px;height:15px;border:1px solid var(--ks-emerald);
  font-size:10px;line-height:1
}
.ks-msg .src{margin-top:6px;font-size:12px;color:var(--ks-cyan);display:none}
.ks-msg .src.show{display:block}
.ks-replies{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.ks-reply{
  padding:8px 12px;background:transparent;border:1px solid var(--ks-cyan);color:var(--ks-cyan);
  font-family:var(--ks-font-mono);font-size:11.5px;cursor:pointer;transition:.2s
}
.ks-reply:hover{background:rgba(78,205,196,.12)}
.ks-reply.primary{border-color:var(--ks-accent);color:var(--ks-accent)}
.ks-reply.primary:hover{background:rgba(255,107,53,.14)}
.ks-chat-foot{border-top:1px solid var(--ks-line);padding:10px 12px;background:rgba(26,35,48,.5)}
.ks-chat-form{display:flex;gap:8px}
.ks-chat-form input{
  flex:1;padding:11px 12px;background:var(--ks-input);border:1px solid var(--ks-line);color:var(--ks-text);
  font-size:14.5px;outline:none;font-family:var(--ks-font-body)
}
.ks-chat-form input:focus{border-color:var(--ks-accent)}
.ks-chat-form button{
  padding:0 16px;background:var(--ks-accent);border:0;color:#111;font-family:var(--ks-font-mono);
  font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.08em
}
.ks-chat-legal{font-size:10.5px;color:var(--ks-muted);margin-top:8px;text-align:center;font-family:var(--ks-font-mono)}
.ks-typing{display:inline-flex;gap:4px;align-items:flex-end;height:14px}
.ks-typing i{width:5px;height:5px;background:var(--ks-cyan);border-radius:50%;animation:ks-typ 1s ease-in-out infinite}
.ks-typing i:nth-child(2){animation-delay:.15s}
.ks-typing i:nth-child(3){animation-delay:.3s}
@keyframes ks-typ{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}
@media (max-width:520px){
  .ks-chat{right:8px;left:8px;bottom:88px;width:auto}
  .ks-chat-fab{right:14px;bottom:14px}
}

/* ---------------------------------------------------------------------
   BRAND BOOK
   --------------------------------------------------------------------- */
.ks-bb-hero{padding:var(--ks-xl) 0 var(--ks-lg);border-bottom:1px solid var(--ks-line);
  background:radial-gradient(900px 400px at 20% 0%,rgba(10,25,47,.9),transparent 60%)}
.ks-bb-nav{position:sticky;top:var(--ks-header-h);z-index:80;
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ks-line);padding:10px 0;overflow-x:auto;background:rgba(24,32,43,.94)}
.ks-bb-nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;white-space:nowrap}
.ks-bb-nav a{padding:8px 12px;font-family:var(--ks-font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ks-muted);border:1px solid transparent}
.ks-bb-nav a:hover,.ks-bb-nav a.on{color:var(--ks-accent);border-color:rgba(255,107,53,.4)}
.ks-bb-block{padding:var(--ks-lg) 0;border-bottom:1px solid var(--ks-line)}
.ks-bb-block h2{font-size:clamp(22px,2.6vw,32px)}
.ks-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ks-sm)}
@media (max-width:900px){.ks-swatches{grid-template-columns:1fr 1fr}}
.ks-mockups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ks-md)}
.ks-mockups .ks-card{padding:0}
.ks-mockups img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--ks-line)}
.ks-mockups .cap{padding:12px 14px}
.ks-mockups .cap b{display:block;font-size:14.5px}
.ks-mockups .cap small{color:var(--ks-muted);font-size:12px}
@media (max-width:980px){.ks-mockups{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ks-mockups{grid-template-columns:1fr}}
.ks-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ks-rules li{display:flex;gap:10px;font-size:14.5px;color:var(--ks-muted-2);padding:10px 12px;border:1px solid var(--ks-line);background:var(--ks-surface-2)}
.ks-rules li.no{border-color:rgba(229,72,77,.35)}
.ks-rules .mk{color:var(--ks-emerald);font-weight:700}
.ks-rules li.no .mk{color:#ff9ea1}
@media (max-width:720px){.ks-rules{grid-template-columns:1fr}}
.ks-flow{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding-bottom:8px}
.ks-flow-step{
  flex:1 0 170px;min-width:170px;background:var(--ks-surface-2);border:1px solid var(--ks-line);
  border-top:3px solid var(--ks-cyan);padding:14px;position:relative
}
.ks-flow-step b{display:block;font-size:14.5px;margin-bottom:6px}
.ks-flow-step small{font-family:var(--ks-font-mono);font-size:11px;color:var(--ks-muted);display:block;line-height:1.6}
.ks-flow-step .n{font-family:var(--ks-font-mono);font-size:11px;color:var(--ks-accent);letter-spacing:.12em}
.ks-flow-arrow{display:grid;place-items:center;color:var(--ks-accent);font-size:18px;flex:0 0 auto}
.ks-flow-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}
.ks-flow-rail span{font-family:var(--ks-font-mono);font-size:11px;color:var(--ks-muted);border-top:1px dashed var(--ks-line-strong);padding-top:8px}
.ks-spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ks-md)}
@media (max-width:900px){.ks-spec{grid-template-columns:1fr}}
.ks-confidence{display:flex;flex-direction:column;gap:10px}
.ks-confidence div{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ks-muted-2)}

/* Sección de confianza / verificación en servicios */
.ks-trust{display:flex;gap:var(--ks-md);flex-wrap:wrap;margin-top:var(--ks-md)}
.ks-trust div{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ks-muted-2)}

/* ---------------------------------------------------------------------
   MOCKUPS EN VIVO DEL CRM (usados en el brand book)
   Son componentes reales reducidos, no imágenes.
   --------------------------------------------------------------------- */
.ks-mock{border:1px solid var(--ks-line-strong);background:var(--ks-bg-page-2);overflow:hidden}

/* ---------------------------------------------------------------------
   La maqueta del CRM refleja el PANEL REAL, que es claro (barra lateral azul
   profunda + área de trabajo clara). En vez de duplicar reglas se redefinen
   aquí los tokens solo para la maqueta: todo lo que hay dentro la obedece y
   el brand book sigue mostrando lo que el cliente ve de verdad.
   --------------------------------------------------------------------- */
.ks-mock{
  --ks-bg-page:#f4f8fb; --ks-bg-page-2:#ffffff; --ks-surface:#ffffff;
  --ks-surface-2:#ffffff; --ks-surface-3:#eef4f9; --ks-surface-4:#e2eaf3;
  --ks-card:#ffffff; --ks-input:#ffffff;
  --ks-line:#dbe4ee; --ks-line-strong:#c9d8e6;
  --ks-text:#0f172a; --ks-muted:#57677c; --ks-muted-2:#334155;
}
.ks-mock-side{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.26) 55%,rgba(0,0,0,.42) 100%),var(--ks-primary);
  border-right:0
}
.ks-mock-side span{color:#B9C8DA}
.ks-mock-side span.on{color:#fff;background:rgba(255,107,53,.18)}
.ks-mock-main{background:var(--ks-bg-page)}
.ks-mock .ks-card{box-shadow:0 6px 24px rgba(15,23,42,.08)}

.ks-mock-top{
  height:52px;display:flex;align-items:center;gap:12px;padding:0 14px;
  background:var(--ks-bg-page-2);border-bottom:1px solid var(--ks-line);font-size:13px
}
.ks-mock-logo{width:26px;height:26px;background:url('../img/brand/isotipo-kraken.svg') center/contain no-repeat;flex:0 0 auto}
.ks-mock-search{
  flex:1;max-width:340px;padding:7px 11px;background:var(--ks-input);border:1px solid var(--ks-line);
  color:var(--ks-muted);font-size:12.5px;font-family:var(--ks-font-mono)
}
.ks-mock-body{display:flex;min-height:340px}
.ks-mock-side{
  width:186px;flex:0 0 auto;background:var(--ks-primary);border-right:1px solid var(--ks-line);
  padding:12px 0;display:flex;flex-direction:column
}
.ks-mock-side span{
  padding:9px 14px;font-family:var(--ks-font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--ks-muted);text-transform:uppercase;position:relative
}
.ks-mock-side span.on{color:var(--ks-text);background:rgba(255,255,255,.045)}
.ks-mock-side span.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--ks-accent)}
.ks-mock-main{flex:1;min-width:0;padding:16px;background:var(--ks-bg-page-2)}
.ks-mock-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ks-line);overflow-x:auto}
.ks-mock-tabs span{
  padding:9px 13px;font-family:var(--ks-font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ks-muted);white-space:nowrap
}
.ks-mock-tabs span.on{color:var(--ks-accent);border-bottom:2px solid var(--ks-accent)}
.ks-timeline{display:flex;flex-direction:column;gap:12px}
.ks-timeline>div{display:flex;gap:10px;align-items:flex-start}
.ks-timeline b{display:block;font-size:14px;font-weight:600}
.ks-timeline small{display:block;font-size:12px;color:var(--ks-muted)}
.ks-kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.ks-kanban-col{flex:0 0 232px;min-width:232px;background:var(--ks-surface-2);border:1px solid var(--ks-line)}
.ks-kanban-head{
  display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;
  background:var(--ks-primary);border-bottom:2px solid var(--ks-line);font-size:13px
}
.ks-kanban-head .ks-mono{font-size:10.5px;color:var(--ks-muted)}
.ks-lead-card{
  display:flex;gap:10px;padding:12px;margin:10px;background:var(--ks-card);
  border:1px solid var(--ks-line);border-left:4px solid #8f9097;position:relative
}
.ks-lead-card.temp-hot{border-left-color:var(--ks-accent)}
.ks-lead-card.temp-warm{border-left-color:var(--ks-cyan)}
.ks-lead-card.temp-cold{border-left-color:#8f9097}
.ks-kanban-drop{
  margin:0 10px 12px;padding:12px;border:1px dashed rgba(255,107,53,.55);text-align:center;
  font-family:var(--ks-font-mono);font-size:11px;color:var(--ks-accent)
}
.ks-seq{display:flex;flex-direction:column;gap:6px}
.ks-seq span{
  padding:7px 11px;font-size:12.5px;border-left:3px solid var(--ks-line-strong);
  background:var(--ks-surface-2);color:var(--ks-muted-2)
}
.ks-seq span.done{border-left-color:var(--ks-emerald)}
.ks-seq span.pending{border-left-color:#8f9097;color:var(--ks-muted)}
.ks-seq span.overdue{border-left-color:#e5484d;color:#ffb3b5}
.ks-inbox{display:flex;flex-direction:column;border:1px solid var(--ks-line);background:var(--ks-surface-2)}
.ks-inbox-row{display:flex;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--ks-line)}
.ks-inbox-row:last-child{border-bottom:0}
.ks-inbox-row.on{background:rgba(255,107,53,.07);border-left:2px solid var(--ks-accent)}
.ks-inbox-row b{display:block;font-size:13.5px}
.ks-inbox-row small{display:block;font-size:12px;color:var(--ks-muted)}
.ks-chart{display:flex;align-items:flex-end;gap:3px;height:132px}
.ks-chart i{flex:1;min-width:3px;background:var(--ks-emerald);opacity:.9;border-radius:1px 1px 0 0}
.ks-chat-demo{
  display:grid;place-items:center;min-height:250px;padding:16px;margin-top:12px;
  background:
    linear-gradient(180deg, rgba(18,34,58,.6), rgba(26,34,46,.9)),
    var(--ks-hex);
  background-size:auto, 90px 90px;
  border:1px dashed var(--ks-line-strong)
}
.ks-chat-demo-panel{
  width:100%;max-width:320px;background:var(--ks-primary);border:1px solid var(--ks-line-strong);
  border-top:3px solid var(--ks-accent);padding:14px;display:flex;flex-direction:column;gap:10px
}
.ks-chat-demo-panel .ks-msg{max-width:100%;font-size:13px}
.ks-brandbook ul.ks-rules{margin:0}