/* ==================================================================
   CORTEX — Landing oficial
   Lenguaje visual cálido y humano (inspiración Bizneo): base beige suave,
   acento verde esmeralda, azul de apoyo en degradados, navy profundo para
   texto y bloques oscuros, superficies blancas que flotan con sombras
   suaves y esquinas muy redondeadas. Tipografía redondeada y amable
   (Plus Jakarta Sans en títulos, Nunito Sans en cuerpo).
   ================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400..700;1,6..12,400..600&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

:root {
  --ink: #1e2941;         /* navy Bizneo: texto y bloques oscuros */
  --ink-2: #2b3a5c;
  --body: #45506a;
  --muted: #667085;       /* gris Bizneo */
  --faint: #8a94a6;
  --line: #e2e4e9;        /* grey-200 Bizneo */
  --line-soft: #ecebe6;   /* beige tenue para líneas/superficies suaves */
  --bg: #f7f6f3;          /* base beige cálida (firma Bizneo) */
  --bg-soft: #efede9;     /* beige medio para secciones alternas */

  /* Acento principal: verde esmeralda. --accent-mid es el verde claro de
     hero/degradados; --blue es el azul de apoyo (degradados, ilustraciones). */
  --accent: #1dac7c;
  --accent-deep: #16875f;
  --accent-soft: #d4f7e5;
  --accent-mid: #58cea2;
  --blue: #3d78ee;
  --blue-soft: #e3eefc;
  --green: #1dac7c;
  --green-deep: #16875f;
  --green-soft: #d4f7e5;
  --red: #e0587a;
  --red-deep: #c23e63;
  --red-soft: #fbe8f0;
  --amber: #f59c56;

  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --shadow-card: 0 1px 3px rgb(30 41 65 / 0.05);
  --shadow-premium: 0 10px 35px -8px rgb(30 41 65 / 0.09);
  --shadow-lift: 0 20px 50px -12px rgb(30 41 65 / 0.15);
  --shadow-pop: 0 32px 70px -20px rgb(30 41 65 / 0.26);
  --container: 1160px;
  --font: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-title: "Plus Jakarta Sans", var(--font);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 150px; }

body {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.6;
}

html, body { overflow-x: clip; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); color: var(--accent-deep); }

/* ---------- Utilidades ---------- */

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.section { padding: 128px 0; position: relative; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding: 96px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 20px; height: 1.5px; border-radius: 2px;
  background: var(--accent);
}
.eyebrow--center { justify-content: center; }

h1, h2, h3, h4 { font-family: var(--font-title); color: var(--ink); letter-spacing: -0.025em; line-height: 1.12; }

.h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 20ch;
  line-height: 1.08;
}
.h2--center { margin-left: auto; margin-right: auto; text-align: center; }
.h2 em { font-style: normal; color: var(--accent-deep); }
.grad {
  background: linear-gradient(100deg, var(--ink) 0%, var(--accent-deep) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lede {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 60ch;
}
.lede--center { margin-left: auto; margin-right: auto; text-align: center; }

.section-head { margin-bottom: 64px; max-width: 760px; }
.section-head--center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }

.btn--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { background: var(--ink-2); box-shadow: var(--shadow-premium); }

.btn--accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgb(62 99 245 / 0.5);
}
.btn--accent:hover { background: var(--accent-deep); }

/* Destello: una veta de luz cruza el botón al pasar el cursor, una sola vez por hover. */
.btn--primary, .btn--accent { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after, .btn--accent::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.22) 45%, rgb(255 255 255 / 0.22) 55%, transparent 70%);
  transform: translateX(-120%);
}
.btn--primary:hover::after, .btn--accent:hover::after { transform: translateX(120%); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

.btn--ghost { border-color: var(--line); color: var(--ink); background: #fff; box-shadow: var(--shadow-card); }
.btn--ghost:hover { border-color: var(--ink); background: #fff; }

.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--xl { height: 54px; padding: 0 30px; font-size: 16px; border-radius: 14px; }

/* ---------- Header (barra oscura) ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  /* Negro puro: mismo fondo que trae el propio logotipo, para que se fundan
     sin ninguna placa ni borde visible alrededor del PNG. */
  background: #000;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  transition: box-shadow 0.2s ease, background-color 0.3s ease;
}

/* Al hacer scroll la cabecera se hace mínima: la barra de utilidades se pliega,
   el logotipo y el padding encogen y el fondo pasa a negro translúcido con blur. */
.nav.is-scrolled {
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.8);
  background: rgb(0 0 0 / 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
}
.nav__utility { transition: max-height 0.3s ease, opacity 0.25s ease; max-height: 40px; overflow: hidden; }
.nav.is-scrolled .nav__utility { max-height: 0; opacity: 0; border-bottom-width: 0; }
.nav.is-scrolled .nav__inner { padding: 6px 0; }
.nav.is-scrolled .brand-block .brand__logo { height: 44px; }
.nav.is-scrolled .brand-block .nav__part { max-height: 0; opacity: 0; margin: 0; overflow: hidden; }

/* Barra de progreso de lectura: una veta fina bajo la cabecera, ancho = scroll. */
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 51; height: 2.5px; width: 0%; background: linear-gradient(90deg, var(--accent), var(--blue)); transition: width 0.1s linear; }

/* Barra superior, fina: "Now part of", idioma y acceso de clientes. */
.nav__utility { border-bottom: 1px solid rgb(255 255 255 / 0.07); }
.nav__utility-inner { display: flex; align-items: center; justify-content: flex-end; height: 30px; font-size: 12px; }
.nav__utility-right { display: flex; align-items: center; gap: 18px; }

.nav__inner { display: flex; align-items: center; gap: 26px; padding: 9px 0; transition: padding 0.3s ease; }

/* Columna, no fila: el dominio va DEBAJO del logotipo. Dentro de `.brand` solo hay el <img>
   y este dominio, así que cambiar la dirección no descoloca nada más. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex-shrink: 0; }
.brand__domain { color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
.footer__domain { color: var(--body); font-weight: 650; }
.brand__logo { height: 62px; width: auto; object-fit: contain; }
.brand__logo--lg { height: 104px; }

/* Cabecera: logotipo más grande, con "Now part of" apilado debajo (lo mueve
   script.js desde la barra de utilidades, donde vive el marcado original). */
.brand-block { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.brand-block .brand__logo { height: 66px; transition: height 0.3s ease; }
.brand-block .nav__part { font-size: 10.5px; padding-left: 1px; max-height: 20px; transition: max-height 0.3s ease, opacity 0.25s ease; }
/* El logotipo (LogotipoNegro.png) trae su propio fondo negro sólido, pensado
   para superficies oscuras: en la barra de navegación se apoya directamente,
   sin placa. En superficies claras (pie de página) se aloja sobre una placa
   oscura para no dejar un rectángulo negro suelto. */
.footer .brand { background: #000; border-radius: 10px; padding: 10px 16px; }

/* "| Now part of SerendipiaAgency.com", en la barra de utilidades. */
.nav__part {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: rgb(255 255 255 / 0.5);
  white-space: nowrap;
}
.nav__part a { color: rgb(255 255 255 / 0.82); font-weight: 600; transition: color 0.15s ease; }
.nav__part a:hover { color: #fff; }

/* Insignia "Now part of" del pie (con logo), fondo claro. */
.part-of {
  display: flex; align-items: center; gap: 8px; margin-top: 18px;
  font-size: 13px; color: var(--faint);
}
.part-of span { color: var(--line); }
.part-of img { height: 16px; width: auto; object-fit: contain; }

.nav__links { display: flex; gap: 30px; margin: 0 auto; font-size: 14.5px; font-weight: 500; color: rgb(255 255 255 / 0.72); }
.nav__links a { white-space: nowrap; transition: color 0.15s ease; }
.nav__links a:hover { color: #fff; }

.nav__cta { display: flex; gap: 14px; align-items: center; }

/* Selector de idioma (pastilla), en la barra de utilidades. */
.lang { display: inline-flex; background: rgb(255 255 255 / 0.08); border-radius: 999px; padding: 3px; }
.lang__opt {
  display: inline-flex; align-items: center;
  border: 0; background: transparent; color: rgb(255 255 255 / 0.55);
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 999px; cursor: pointer; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang__opt:hover { color: rgb(255 255 255 / 0.85); }
.lang__opt.is-active { background: rgb(255 255 255 / 0.16); color: #fff; }
.lang__opt[disabled] { cursor: default; opacity: 0.55; }

.nav__access { font-size: 12.5px; font-weight: 600; color: rgb(255 255 255 / 0.75); transition: color 0.15s ease; }
.nav__access:hover { color: #fff; }

.nav__burger {
  display: none; margin-left: auto; width: 42px; height: 42px;
  border: 1.5px solid rgb(255 255 255 / 0.18); background: transparent; border-radius: 12px; cursor: pointer; place-items: center;
}
.nav__burger svg { stroke: #fff; }

.nav__mobile { display: none; border-top: 1px solid rgb(255 255 255 / 0.08); background: rgb(9 15 27 / 0.98); padding: 12px 24px 20px; }
.nav__mobile a { display: block; padding: 13px 4px; font-size: 15px; font-weight: 600; color: rgb(255 255 255 / 0.85); border-bottom: 1px solid rgb(255 255 255 / 0.07); }
.nav__mobile a:last-child { border-bottom: 0; }
.nav.menu-open .nav__mobile { display: block; }

/* ---------- Hero ---------- */

.hero { padding: 216px 0 90px; overflow: clip; position: relative; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  width: 900px; height: 700px; top: -180px; left: 50%;
  margin-left: -450px;
  background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 62%);
  opacity: 0.7; pointer-events: none;
  animation: hero-drift 22s ease-in-out infinite;
}
@keyframes hero-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, 2%) scale(1.06); }
}

/* Aurora estilo Stripe: dos manchas de gradiente desenfocadas que derivan muy
   despacio tras el hero, más una retícula tenue que se desvanece radialmente.
   Solo se activa en las páginas que añaden .hero--aurora (la home). */
.hero--aurora::before { display: none; }
.hero__aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__aurora::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgb(11 31 58 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(11 31 58 / 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 25%, transparent 75%);
}
.hero__aurora i {
  position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.55;
  will-change: transform;
}
.hero__aurora i:nth-child(1) {
  width: 760px; height: 560px; top: -220px; left: 8%;
  background: radial-gradient(circle at 30% 40%, #b9f0d8 0%, #d9f6e8 45%, transparent 72%);
  animation: aurora-a 26s ease-in-out infinite;
}
.hero__aurora i:nth-child(2) {
  width: 680px; height: 520px; top: -160px; right: 2%;
  background: radial-gradient(circle at 60% 40%, #cfe2ff 0%, #e6eeff 50%, transparent 74%);
  animation: aurora-b 32s ease-in-out infinite;
}
@keyframes aurora-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(90px, 44px) scale(1.12); }
}
@keyframes aurora-b {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50% { transform: translate(-80px, 30px) scale(0.95); }
}

.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 6px 16px 6px 12px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-card);
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 3px rgb(20 174 107 / 0.16); }
.hero--center { text-align: center; }
.hero--center .hero__badge, .hero--center .hero__title, .hero--center .hero__sub, .hero--center .hero__actions { margin-left: auto; margin-right: auto; }

.hero__title {
  margin-top: 26px;
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 15ch;
  color: var(--ink);
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent) 0%, var(--blue) 115%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero__sub { margin-top: 26px; font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--muted); max-width: 60ch; }
.hero__sub strong { color: var(--ink); font-weight: 650; }

.hero__actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hero__note { margin-top: 18px; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; }
.hero__note::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--green); }

.hero__kpis { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-premium); }
.hero__kpi { padding: 26px 24px; background: #fff; }
.hero__kpi b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero__kpi span { font-size: 13px; color: var(--muted); margin-top: 4px; display: block; }

.hero__sectors { margin-top: 40px; display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap; font-size: 13px; color: var(--faint); font-weight: 550; }
.hero__sectors .label { font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }

/* Mockup de producto (CSS puro) */

.mock {
  margin-top: 72px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.mock__bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); background: var(--bg-soft); }
.mock__bar i { width: 11px; height: 11px; border-radius: 999px; }
.mock__bar i:nth-child(1) { background: #ffb4ab; }
.mock__bar i:nth-child(2) { background: #ffd9a0; }
.mock__bar i:nth-child(3) { background: #a9e8c0; }
.mock__bar .url { margin-left: 12px; flex: 1; max-width: 380px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 12px; color: var(--faint); display: flex; align-items: center; padding: 0 14px; }
.mock__body { display: grid; grid-template-columns: 220px 1fr 320px; min-height: 470px; }
.mock__body > * { min-width: 0; }

.mock__side { border-right: 1px solid var(--line-soft); padding: 18px 14px; background: #fff; }
.mock__side .logo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 750; color: var(--ink); margin-bottom: 18px; }
.mock__side .logo i { width: 22px; height: 22px; border-radius: 7px; background: var(--ink); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.mock__nav-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--faint); margin: 14px 8px 6px; }
.mock__item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mock__item i { width: 13px; height: 13px; border-radius: 5px; background: var(--line); }
.mock__item.active { background: var(--accent-soft); color: var(--accent-deep); }
.mock__item.active i { background: var(--accent); }

.mock__main { padding: 26px 28px; background: #fff; }
.mock__main h4 { font-size: 16px; font-weight: 750; color: var(--ink); letter-spacing: -0.01em; }
.mock__main .sub { font-size: 12px; color: var(--faint); margin-top: 3px; }

.mock__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.mock__stat { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px; background: var(--bg-soft); }
.mock__stat span { font-size: 10.5px; color: var(--muted); font-weight: 650; }
.mock__stat b { display: block; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin-top: 2px; }
.mock__stat em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--green-deep); }

.mock__rows { margin-top: 18px; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.mock__rowhead, .mock__row { display: grid; grid-template-columns: 2.4fr 1fr 1fr 0.9fr; gap: 8px; align-items: center; padding: 9px 14px; font-size: 11.5px; }
.mock__rowhead { background: var(--bg-soft); color: var(--faint); font-weight: 700; font-size: 10.5px; border-bottom: 1px solid var(--line-soft); }
.mock__row { border-bottom: 1px solid var(--line-soft); color: var(--body); }
.mock__row:last-child { border-bottom: 0; }
.mock__row .doc { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); }
.mock__row .doc i { width: 18px; height: 18px; border-radius: 6px; background: var(--bg-soft); border: 1px solid var(--line-soft); }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2.5px 9px; font-size: 10px; font-weight: 700; width: fit-content; }
.chip i { width: 5px; height: 5px; border-radius: 999px; }
.chip--ok { background: var(--green-soft); color: var(--green-deep); }
.chip--ok i { background: var(--green); }
.chip--proc { background: var(--accent-soft); color: var(--accent-deep); }
.chip--proc i { background: var(--accent); }
.chip--muted { background: var(--line-soft); color: var(--muted); }
.chip--muted i { background: var(--faint); }

.mock__aside { border-left: 1px solid var(--line-soft); background: var(--bg-soft); padding: 22px 20px; }
.mock__aside h5 { font-size: 12px; font-weight: 750; color: var(--ink); }
.mock__chat { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.bubble { border-radius: 14px; padding: 10px 13px; font-size: 11.5px; line-height: 1.55; max-width: 92%; }
.bubble--q { background: var(--ink); color: #dce5f2; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble--a { background: #fff; border: 1px solid var(--line); color: var(--body); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: var(--shadow-card); }
.bubble--a .src { display: block; margin-top: 7px; font-size: 9.5px; color: var(--faint); border-top: 1px dashed var(--line); padding-top: 6px; }

/* ---------- Captura real enmarcada (browser frame + tilt 3D) ---------- */
/* .shot envuelve una captura real del producto en un marco de navegador. Dentro de un
   .shot-wrap con perspectiva, la variante .shot--tilt entra ligeramente tumbada y se
   endereza cuando su .reveal contenedor recibe .in (mismo observer, sin JS extra). */

.shot-wrap { perspective: 1600px; }
.shot {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.shot__bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); background: var(--bg-soft); }
.shot__bar i { width: 10px; height: 10px; border-radius: 999px; }
.shot__bar i:nth-child(1) { background: #ffb4ab; }
.shot__bar i:nth-child(2) { background: #ffd9a0; }
.shot__bar i:nth-child(3) { background: #a9e8c0; }
.shot__bar .url { margin-left: 10px; flex: 1; max-width: 340px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--line); font-size: 11px; color: var(--faint); display: flex; align-items: center; padding: 0 12px; }
.shot img, .shot video { display: block; width: 100%; background: var(--bg-soft); }

/* Vídeo de producto sin marco de navegador (b-roll/animación), para secciones donde el
   contenido ya lleva su propia cabecera — reutiliza el borde/sombra/radio de .shot. */
.video-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-premium); overflow: hidden; }
.video-card video { display: block; width: 100%; background: var(--bg-soft); }
.video-card__caption { margin-top: 12px; font-size: 13px; color: var(--muted); font-style: italic; }

.shot--tilt {
  transform: rotateX(11deg) scale(0.97);
  transform-origin: 50% 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in .shot--tilt { transform: none; }

/* Chips flotantes sobre la captura del hero (fuente citada, 24/7…). */
.shot-wrap { position: relative; }
.shot-float {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px;
  background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow-lift); border: 1px solid var(--line);
}
.shot-float svg { color: var(--accent-deep); flex-shrink: 0; }
.shot-float--tl { top: 26px; left: -18px; }
.shot-float--br { bottom: 34px; right: -14px; }
@media (max-width: 900px) {
  .shot-float { display: none; }
}

/* ---------- Features alternadas (captura real + copy que vende) ---------- */

.features { display: grid; gap: clamp(56px, 8vw, 104px); }
.feature { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.feature--flip .feature__copy { order: 2; }
.feature--flip .feature__visual { order: 1; }
.feature__copy .eyebrow { margin-bottom: 14px; }
.feature__title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; max-width: 18ch; }
.feature__text { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 48ch; }
.feature__text strong { color: var(--ink); font-weight: 650; }
.feature__checks { margin-top: 22px; display: grid; gap: 11px; }
.feature__checks li { list-style: none; display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.feature__checks li::before {
  content: "✓"; flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 19px; height: 19px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 11px; font-weight: 800;
  transform: translateY(3px);
}
.feature__checks b { color: var(--ink); font-weight: 700; }
.feature__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; font-size: 14.5px; font-weight: 700; color: var(--accent-deep); }
.feature__more svg { transition: transform 0.2s ease; }
.feature__more:hover svg { transform: translateX(4px); }
.feature__visual .shot { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.feature__visual:hover .shot { transform: translateY(-6px) scale(1.012); box-shadow: 0 40px 90px -24px rgb(15 23 42 / 0.32); }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 28px; }
  .feature--flip .feature__copy { order: 1; }
  .feature--flip .feature__visual { order: 2; }
}

/* ---------- Marcas / logos de confianza ---------- */

.trust { margin-top: 80px; }
.trust__label { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 26px; }
.trust__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 20px; }
.trust__row .engine { opacity: 0.85; }

/* ---------- Demo de chat en teléfono (usado en "Capacidades") ---------- */

.phone {
  width: 260px;
  border-radius: 34px;
  background: var(--ink);
  padding: 12px;
  box-shadow: var(--shadow-pop, 0 24px 60px -12px rgb(15 23 42 / 0.25));
  position: relative;
}
.phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; border-radius: 0 0 12px 12px; background: var(--ink); z-index: 1; }
.phone__screen { background: #fff; border-radius: 24px; overflow: hidden; padding-top: 22px; min-height: 360px; }
.phone__bar { padding: 0 16px 10px; font-size: 11px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }
.phone .mock__chat { padding: 14px 14px 18px; }

.hook__badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
}
.hook__badge svg { color: var(--accent-deep); flex-shrink: 0; }
.hook__badge--top { top: 54px; right: 4px; }
.hook__badge--bottom { bottom: 96px; left: -8px; }

.hook__stat {
  position: absolute;
  bottom: 20px;
  right: -68px;
  width: 150px;
  padding: 18px 20px;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
  background: var(--accent-deep);
  color: #fff;
  box-shadow: var(--shadow-pop, 0 24px 60px -12px rgb(15 23 42 / 0.25));
}
.hook__stat b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.hook__stat span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; opacity: 0.92; }
.hook__stat em { font-style: normal; opacity: 0.75; }

/* ---------- Capturas de producto ---------- */

.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.screen-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.screen-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.screen-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--bg-soft); }
.screen-card__body { padding: 20px 22px 24px; }
.screen-card__body b { display: block; font-size: 15.5px; font-weight: 750; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.screen-card__body p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

@media (max-width: 900px) {
  .screens { grid-template-columns: 1fr; }
}

/* ---------- Problema (pains + coste) ---------- */

.pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pain { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 26px; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pain:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pain b { display: block; font-size: 15.5px; font-weight: 750; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.pain p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.pain .n { font-size: 12px; font-weight: 800; color: var(--accent-deep); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--accent-soft); margin-bottom: 16px; }

/* ---------- El conocimiento (asset) ---------- */

.asset { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.asset__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.asset__cell { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card); font-size: 14px; font-weight: 650; color: var(--ink); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.asset__cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-premium); }
.asset__cell i { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); flex-shrink: 0; display: grid; place-items: center; }
.asset__cell i svg { color: var(--accent-deep); }

/* ---------- Diagrama (flujo) ---------- */

.diagram { max-width: 900px; margin: 0 auto; }
.dg-tier { display: grid; gap: 12px; }
.dg-tier--sources { grid-template-columns: repeat(4, 1fr); }
.dg-tier--outputs { grid-template-columns: repeat(3, 1fr); }
.dg-node { border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: 15px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: center; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.dg-node:hover { transform: translateY(-3px); box-shadow: var(--shadow-premium); }
.dg-node span { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.dg-core { margin: 0 auto; border-radius: var(--radius-lg); background: var(--ink); color: #fff; padding: 26px 48px; text-align: center; width: fit-content; box-shadow: var(--shadow-lift); }
.dg-core b { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.dg-core span { display: block; font-size: 12.5px; color: #9db0c9; margin-top: 4px; }
.dg-link { display: flex; justify-content: center; padding: 8px 0; }
.dg-link svg { color: var(--accent); opacity: 0.6; }
.dg-label { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--faint); margin: 26px 0 12px; text-transform: uppercase; }

/* ---------- Fuentes (chips) ---------- */

.sources { display: flex; flex-wrap: wrap; gap: 10px; max-width: 940px; }
.source { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-card); transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
.source:hover { transform: translateY(-3px); background: var(--accent-soft); border-color: rgb(62 99 245 / 0.3); color: var(--accent-deep); }

/* ---------- Onboarding (timeline) ---------- */

.service { margin-top: 80px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.service h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; max-width: 18ch; }
.service > div > p { margin-top: 16px; font-size: 16px; color: var(--muted); max-width: 46ch; }
.timeline { display: grid; gap: 0; position: relative; }
.tl { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: 26px; position: relative; }
.tl:last-child { padding-bottom: 0; }
.tl::before { content: ""; position: absolute; left: 21px; top: 40px; bottom: -4px; width: 2px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl i { font-style: normal; font-size: 14px; font-weight: 800; color: #fff; width: 44px; height: 44px; border-radius: 999px; background: var(--ink); display: grid; place-items: center; z-index: 1; }
.tl b { display: block; font-size: 16px; font-weight: 750; color: var(--ink); }
.tl p { font-size: 14px; color: var(--muted); margin-top: 3px; }

/* ---------- Capacidades (rejilla estática, usada en las páginas de sector) ---------- */

.uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.use {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 28px;
  box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.use:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.use b { display: block; font-size: 16px; font-weight: 750; color: var(--ink); letter-spacing: -0.01em; }
.use p { margin-top: 7px; font-size: 13.5px; color: var(--muted); line-height: 1.62; }
.use .tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 4px 10px; margin-bottom: 14px; }

/* ---------- Capacidades interactivas (home): pestañas arriba, texto + teléfono grande abajo ---------- */

.uses-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 40px 0 0; }
.uses-tab {
  border: 1px solid var(--line); background: #fff; color: var(--muted); font: inherit;
  border-radius: 999px; padding: 10px 20px; font-size: 13.5px; font-weight: 650;
  cursor: pointer; transition: all 0.18s ease;
}
.uses-tab:hover { border-color: var(--ink); color: var(--ink); }
.uses-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow-premium); }

.uses-panel-area { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 48px; }
.uses-panel-area__copy .tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 4px 10px; margin-bottom: 18px; }
.uses-panel-area__copy h3 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.uses-panel-area__copy p { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 46ch; }

.uses-panel-area__visual { position: relative; justify-self: center; padding: 20px 96px 20px 44px; }

.use-panel { display: none; }
.use-panel.is-active { display: contents; }

.phone--lg { width: 320px; }
.phone--lg .phone__screen { min-height: 440px; }

@media (max-width: 1020px) {
  .uses-panel-area { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .uses-panel-area__copy p { margin-left: auto; margin-right: auto; }
  .uses-panel-area__visual { padding: 20px 32px 0; display: flex; flex-direction: column; align-items: center; }
  .hook__badge--bottom { left: 4px; }
  .hook__stat { position: static; margin: 20px auto 0; width: 200px; border-radius: var(--radius-lg); }
}

/* ---------- Demo interactiva de configuración (pestañas clicables) ---------- */

.demo__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; }
.demo__tab {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 650;
  cursor: pointer; transition: all 0.18s ease;
}
.demo__tab:hover { border-color: var(--ink); color: var(--ink); }
.demo__tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow-premium); }

.demo__frame { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-pop); overflow: hidden; }
.demo__bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); background: var(--bg-soft); }
.demo__bar i { width: 10px; height: 10px; border-radius: 999px; }
.demo__bar i:nth-child(1) { background: #ffb4ab; }
.demo__bar i:nth-child(2) { background: #ffd9a0; }
.demo__bar i:nth-child(3) { background: #a9e8c0; }
.demo__bar .url { margin-left: 10px; flex: 1; max-width: 380px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--line); font-size: 11px; color: var(--faint); display: flex; align-items: center; padding: 0 12px; }

.demo__body { display: grid; grid-template-columns: 200px 1fr 260px; min-height: 460px; }
.demo__side { border-right: 1px solid var(--line-soft); background: var(--bg-soft); padding: 18px 12px; }
.demo__side-group { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 14px 10px 6px; }
.demo__side-group:first-child { margin-top: 2px; }
.demo__side-item { padding: 7px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 650; color: var(--muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.demo__side-item:hover { background: #fff; color: var(--ink); }
.demo__side-item.is-current { background: var(--accent-soft); color: var(--accent-deep); }

.demo__main { padding: 28px 32px; }
.demo__panel { display: none; }
.demo__panel.is-active { display: block; animation: sacb-fade-panel 0.25s ease; }
@keyframes sacb-fade-panel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.demo__field { margin-bottom: 20px; }
.demo__field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.04em; }
.demo__input { border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font-size: 14px; color: var(--ink-2); background: var(--bg-soft); }
.demo__chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 700; background: var(--line-soft); color: var(--ink-2); }
.demo__chip--accent { background: var(--accent-soft); color: var(--accent-deep); }
.demo__chip--ok { background: var(--green-soft); color: var(--green-deep); font-size: 11px; padding: 4px 10px; }
.demo__chip--proc { background: var(--accent-soft); color: var(--accent-deep); font-size: 11px; padding: 4px 10px; }

.demo__avatar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.demo__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--accent-soft); font-size: 18px; }
.demo__dot { width: 8px; height: 8px; border-radius: 999px; }
.demo__dot--ok { background: var(--green); }

.demo__sliders { display: grid; gap: 16px; margin-bottom: 20px; }
.demo__slider { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.demo__slider b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.demo__track { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.demo__track i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

.demo__toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.demo__toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px 7px 8px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.demo__toggle i { width: 26px; height: 15px; border-radius: 999px; background: var(--line); position: relative; flex-shrink: 0; }
.demo__toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 999px; background: #fff; transition: transform 0.15s ease; }
.demo__toggle.is-on { color: var(--ink); border-color: var(--accent); }
.demo__toggle.is-on i { background: var(--accent); }
.demo__toggle.is-on i::after { transform: translateX(11px); }

.demo__stat-row { display: flex; gap: 28px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }
.demo__stat-row div { display: flex; flex-direction: column; }
.demo__stat-row b { font-size: 22px; font-weight: 800; color: var(--ink); }
.demo__stat-row span { font-size: 12px; color: var(--muted); }

.demo__doclist { display: grid; gap: 8px; }
.demo__docrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg-soft); font-size: 13px; color: var(--ink-2); font-weight: 600; }

.demo__channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.demo__channel { border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: center; color: var(--faint); }
.demo__channel b { display: block; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.demo__channel span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.demo__channel.is-on { border-color: var(--green); background: var(--green-soft); }
.demo__channel.is-on b { color: var(--ink); }
.demo__channel.is-on span { color: var(--green-deep); }

.demo__note { margin-top: 18px; text-align: center; font-size: 12px; color: var(--faint); }

/* Rasgos de personalidad: mucho más numerosos que un slider suelto, en tarjetas de 2 columnas
   (refleja el panel real: formalidad, empatía, humor, precisión, nivel comercial...). */
.demo__traits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-bottom: 22px; }
.demo__trait { font-size: 12.5px; }
.demo__trait-head { display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; color: var(--ink-2); }
.demo__trait-head b { font-variant-numeric: tabular-nums; color: var(--accent-deep); font-weight: 800; }
.demo__trait p { margin: 3px 0 8px; font-size: 11.5px; color: var(--faint); line-height: 1.4; }

/* Aside "Estado del agente": esfera neuronal animada + métricas en vivo, presente en todas las
   pestañas para que se note que el panel real siempre tiene mucho más pasando por debajo. */
.demo__aside { border-left: 1px solid var(--line-soft); background: var(--bg-soft); padding: 20px 18px; }
.demo__aside-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 750; color: var(--ink); }
.demo__brain { width: 100%; height: 132px; display: block; margin: 12px 0 14px; }
.demo__aside-bars { display: grid; gap: 11px; margin-bottom: 18px; }
.demo__aside-bar { font-size: 11px; }
.demo__aside-bar-head { display: flex; align-items: baseline; justify-content: space-between; color: var(--muted); font-weight: 650; margin-bottom: 4px; }
.demo__aside-bar-head b { color: var(--ink-2); font-weight: 700; }
.demo__aside-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.demo__aside-stats div { display: flex; flex-direction: column; align-items: center; }
.demo__aside-stats b { font-size: 15px; font-weight: 800; color: var(--ink); }
.demo__aside-stats span { font-size: 9.5px; color: var(--faint); font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; }
.demo__aside-summary { display: grid; gap: 9px; }
.demo__aside-summary div { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; }
.demo__aside-summary span { color: var(--faint); }
.demo__aside-summary b { color: var(--ink-2); font-weight: 700; }

@media (max-width: 1140px) {
  .demo__body { grid-template-columns: 200px 1fr; }
  .demo__aside { display: none; }
}
@media (max-width: 760px) {
  .demo__body { grid-template-columns: 1fr; }
  .demo__side { display: none; }
  .demo__main { padding: 22px 18px; }
  .demo__slider { grid-template-columns: 90px 1fr 34px; font-size: 12px; }
  .demo__traits { grid-template-columns: 1fr; }
  .demo__channels { grid-template-columns: repeat(2, 1fr); }
  .demo__stat-row { gap: 18px; flex-wrap: wrap; }
}

/* ---------- Cerebros ---------- */

.brains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.brainc { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 28px; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.brainc:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.brainc header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.brainc b { font-size: 16px; font-weight: 750; color: var(--ink); }
.brainc p { font-size: 13.5px; color: var(--muted); }
.brainc .qs { margin-top: 14px; display: grid; gap: 7px; }
.brainc .q { font-size: 12.5px; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 12px; }

/* ---------- Split (canales / motores) ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.plainlist { display: grid; gap: 10px; }
.plainlist li { list-style: none; display: flex; gap: 14px; align-items: baseline; padding: 15px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.plainlist li:hover { transform: translateX(5px); box-shadow: var(--shadow-premium); }
.plainlist b { font-size: 15px; font-weight: 750; color: var(--ink); white-space: nowrap; }
.plainlist span { font-size: 13.5px; color: var(--muted); }

.engines { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.engine { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 20px; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; box-shadow: var(--shadow-card); transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; }
.engine:hover { transform: translateY(-3px); background: var(--accent-soft); border-color: rgb(62 99 245 / 0.3); }

.advantages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; }
.adv { border-radius: var(--radius); padding: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.adv b { display: block; font-size: 15px; font-weight: 750; color: var(--ink); }
.adv p { margin-top: 6px; font-size: 13px; color: var(--body); line-height: 1.6; }

/* ---------- Control / Gobierno ---------- */

.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.control { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.control:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.control b { display: block; font-size: 15.5px; font-weight: 750; color: var(--ink); }
.control b::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 999px; background: var(--accent); margin-bottom: 14px; }
.control p { margin-top: 7px; font-size: 13.5px; color: var(--muted); line-height: 1.62; }

/* ---------- Calculadora ROI ---------- */

.calc-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.calc-preset {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.calc-preset:hover { border-color: var(--accent); }
.calc-preset.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.calc { border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; box-shadow: var(--shadow-premium); }
.calc__inputs { padding: 48px; display: grid; gap: 30px; align-content: start; }
.calc__field label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; font-weight: 650; color: var(--ink); margin-bottom: 12px; }
.calc__field output { font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.calc__field input[type="range"] { width: 100%; height: 6px; appearance: none; -webkit-appearance: none; background: var(--line); border-radius: 999px; outline: none; cursor: pointer; }
.calc__field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px; background: var(--accent); border: 4px solid #fff; box-shadow: 0 2px 8px rgb(15 23 42 / 0.3); transition: transform 0.15s ease; }
.calc__field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.calc__field input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 999px; background: var(--accent); border: 4px solid #fff; box-shadow: 0 2px 8px rgb(15 23 42 / 0.3); }
.calc__results { background: var(--ink); color: #fff; padding: 48px; display: grid; gap: 8px; align-content: center; }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.calc__row span { font-size: 13.5px; color: #9db0c9; }
.calc__row b { font-size: 19px; font-weight: 750; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__row--total { border-bottom: 0; padding-top: 22px; }
.calc__row--total span { color: #cfe6ff; font-weight: 650; }
.calc__row--total b { font-size: clamp(28px, 3.2vw, 36px); font-weight: 800; color: #fff; }
.calc__note { font-size: 11.5px; color: #7f93ad; margin-top: 14px; line-height: 1.6; }

/* ---------- Antes / Después ---------- */

#comparativa .h2, #comparison .h2 { max-width: 32ch; }

.vsplit { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.vsplit__card {
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 8px 28px 20px;
}
.vsplit__card--before { background: linear-gradient(180deg, var(--red-soft) 0%, #fff 130px); }
.vsplit__card--after { background: linear-gradient(180deg, var(--green-soft) 0%, #fff 130px); }

.vsplit__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 10px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.vsplit__badge--before { background: var(--red); }
.vsplit__badge--after { background: var(--green); }

.vsplit__row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.vsplit__row:last-child { border-bottom: 0; }
.vsplit__row b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.vsplit__row p { margin-top: 2px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.vsplit__icon { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: 999px; }
.vsplit__icon--before { background: var(--red-soft); color: var(--red-deep); }
.vsplit__icon--after { background: var(--green-soft); color: var(--green-deep); }
.vsplit__card--before .vsplit__row b { color: var(--red-deep); }
.vsplit__card--after .vsplit__row b { color: var(--green-deep); }

.vsplit__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--accent-deep);
  box-shadow: var(--shadow-lift);
  z-index: 1;
}

@media (max-width: 800px) {
  .vsplit { grid-template-columns: 1fr; }
  .vsplit__arrow { position: static; transform: rotate(90deg); margin: -4px auto; }
}

/* ---------- Hub de Soluciones por sector ---------- */
/* Cada tarjeta lleva su acento sectorial vía --sc/--sc-soft (inline en el HTML):
   tiñe el icono y la veta superior al hover, sin salirse del lenguaje sobrio. */

.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sector-grid--featured { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }

.sector-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; padding: 26px; box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.sector-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--sc, var(--accent)), transparent 85%);
  opacity: 0; transition: opacity 0.25s ease;
}
.sector-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.sector-card:hover::before { opacity: 1; }

.sector-card__tile {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--sc-soft, var(--accent-soft)); color: var(--sc, var(--accent-deep));
  margin-bottom: 16px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sector-card:hover .sector-card__tile { transform: scale(1.08) rotate(-3deg); }

.sector-card b { display: block; font-size: 16px; font-weight: 750; color: var(--ink); letter-spacing: -0.01em; }
.sector-card p { margin-top: 7px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.sector-card__tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.sector-card__tags span {
  font-size: 11px; font-weight: 650; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}

.sector-card .go {
  margin-top: auto; padding-top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--sc, var(--accent-deep));
}
.sector-card .go svg { transition: transform 0.2s ease; }
.sector-card:hover .go svg { transform: translateX(4px); }

/* Destacadas: más grandes y con más aire. */
.sector-card--featured { padding: 34px 32px; }
.sector-card--featured b { font-size: 20px; }
.sector-card--featured p { font-size: 14.5px; max-width: 52ch; }
.sector-card--featured .sector-card__tile { width: 52px; height: 52px; border-radius: 14px; }

@media (max-width: 1020px) {
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .sector-grid, .sector-grid--featured { grid-template-columns: 1fr; }
}

/* Nube de sectores (teaser en la home): pastillas con punto de color. */
.sector-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; margin: 0 auto; }
.sector-pill {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 11px 20px; font-size: 14px; font-weight: 650; color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.sector-pill i { width: 8px; height: 8px; border-radius: 999px; background: var(--sc, var(--accent)); flex-shrink: 0; }
.sector-pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-premium); border-color: var(--sc, var(--accent)); }

/* Banda CTA oscura, reutilizable al cierre de páginas hub. */
.cta-band {
  position: relative; overflow: clip; text-align: center;
  background: var(--ink); color: #fff;
  border-radius: var(--radius-xl); padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px);
  box-shadow: var(--shadow-pop);
}
.cta-band::before {
  content: ""; position: absolute; width: 640px; height: 640px; top: -300px; left: 50%; margin-left: -320px;
  border-radius: 50%; background: radial-gradient(circle, rgb(62 99 245 / 0.45), transparent 68%);
  filter: blur(30px); pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .eyebrow { color: #8fa6ff; }
.cta-band .eyebrow::before { background: #8fa6ff; }
.cta-band h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; max-width: 24ch; margin: 0 auto; }
.cta-band .lede { color: #a7bad2; margin-left: auto; margin-right: auto; }
.cta-band__actions { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Testimonios / prueba social ---------- */

.tstis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tsti { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 30px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.tsti__quote { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); font-weight: 500; }
.tsti__metric { margin: 20px 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-deep); }
.tsti__who { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.tsti__who i { width: 40px; height: 40px; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 750; flex-shrink: 0; }
.tsti__who b { display: block; font-size: 13.5px; font-weight: 750; color: var(--ink); }
.tsti__who span { font-size: 12.5px; color: var(--muted); }

/* ---------- Enterprise / seguridad / governance grids ---------- */

.ent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ent__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ent__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.ent__item b { display: block; font-size: 15px; font-weight: 750; color: var(--ink); margin-bottom: 7px; }
.ent__item p { font-size: 13.5px; color: var(--muted); line-height: 1.62; }
.ent__item i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); margin-bottom: 16px; }
.ent__item i svg { color: var(--accent-deep); }

.disclaimer { margin-top: 40px; padding: 22px 26px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 88ch; }
.disclaimer strong { color: var(--ink-2); font-weight: 650; }

.link-more { font-size: 14px; font-weight: 650; color: var(--accent-deep); text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* ---------- Mockup del Governance Center ---------- */

.gov-mock { margin-top: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: var(--shadow-premium); display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.gov-mock__score { display: flex; align-items: center; gap: 14px; padding-right: 28px; border-right: 1px solid var(--line-soft); }
.gov-mock__score svg { flex-shrink: 0; }
.gov-mock__score div { position: relative; }
.gov-mock__score b { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.gov-mock__score span { font-size: 12px; color: var(--muted); font-weight: 650; }
.gov-mock__score p { margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.gov-mock__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gov-mock__log { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.gov-mock__entry { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--body); }
.gov-mock__entry span { margin-left: auto; font-size: 11.5px; color: var(--faint); }
.gov-mock__entry i { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; background: var(--green); }
.gov-mock__entry i.warn { background: var(--amber); }

/* ---------- Diagrama "qué ocurre cuando preguntas" ---------- */

.flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 4px; }
.flow__step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 112px; padding: 14px 8px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.flow__step i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-deep); margin-bottom: 8px; }
.flow__step b { font-size: 12.5px; font-weight: 750; color: var(--ink); }
.flow__step span { margin-top: 2px; font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.flow__arrow { color: var(--faint); font-size: 16px; padding: 0 2px; }
/* Paso destacado (CORTEX): reglas después de las base para que ganen con la misma especificidad. */
.flow__step--core { background: var(--ink); border-color: var(--ink); }
.flow__step--core i { background: rgb(255 255 255 / 0.12); color: #fff; }
.flow__step--core b { color: #fff; }
.flow__step--core span { color: #a7bad2; }

/* ---------- Recursos ---------- */

.resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.resource { display: block; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 28px; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.resource:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.resource .kind { font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); }
.resource b { display: block; margin-top: 12px; font-size: 16.5px; font-weight: 750; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; }
.resource p { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.resource .go { margin-top: 16px; font-size: 13px; font-weight: 650; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 6px; }

/* Miniatura del artículo del blog: sangra hasta el borde de la tarjeta (el padding de
   .resource es de 28px), en vez de vivir dentro del área de contenido con margen. */
.resource__thumb { display: block; width: calc(100% + 56px); margin: -28px -28px 16px -28px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; aspect-ratio: 16 / 5; object-fit: cover; }

/* Teaser de un único artículo, a todo el ancho, en vez de la rejilla de 3 columnas. */
.resource--wide { max-width: 640px; margin: 0 auto; text-align: center; padding: 36px 40px; }
.resource--wide b { font-size: 20px; }
.resource--wide p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.resource--wide .go { justify-content: center; }

/* ---------- FAQ ---------- */

.faq { max-width: 860px; margin: 0 auto; }
.faq__group { margin-bottom: 44px; }
.faq__group h3 { font-size: 12px; font-weight: 800; letter-spacing: 0.09em; color: var(--accent-deep); margin-bottom: 14px; text-transform: uppercase; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--shadow-card); transition: box-shadow 0.2s ease; }
.faq details[open] { box-shadow: var(--shadow-premium); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 22px; font-size: 15.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--accent); transition: transform 0.18s ease; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 46px 20px 22px; font-size: 14.5px; color: var(--muted); line-height: 1.7; max-width: 72ch; }

/* ---------- Pregunta a Cortex (widget real embebido) ---------- */
/* El chat de esta sección ya no es una reimplementación a mano: es el propio widget
   embebible que se genera desde el panel de control (apps/widget), montado en modo
   "embedded" (Fase 8 del configurador) dentro de #askcx-widget-target. Toda la apariencia
   (colores, cabecera, animaciones, sugerencias...) se controla desde ese mismo panel, no
   desde este CSS — así la demo es siempre fiel a lo que cualquier cliente puede configurar. */

/* Más ancho que el resto de bloques de contenido y fluido según la resolución (hasta 900px
   en pantallas grandes, se ajusta solo en móvil) — el chat es el protagonista de la sección. */
.askcx { position: relative; max-width: min(900px, 94vw); margin: 0 auto; }
/* IMPORTANTE: este contenedor aloja el host real del widget embebido (Shadow DOM). Nunca le
   apliques `transform` (ni siquiera scale(1)/identidad): cualquier valor de transform distinto
   de "none" convierte el elemento en el contenedor de posicionamiento de sus descendientes
   `position: fixed` — y el propio widget usa position:fixed a pantalla completa en móvil. El
   resultado es que ese fixed se recorta al tamaño de este contenedor en vez de al viewport real,
   dejando la cabecera visible pero el resto del chat (mensajes y caja de texto) recortado fuera
   de la vista. La entrada "wow" se limita por tanto a opacidad, nunca a escala/transform.
   (Bug real reportado en producción: cabecera visible, cuerpo del chat en negro sin contenido.) */
.askcx__embed {
  position: relative; z-index: 1;
  min-height: 420px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-pop);
  opacity: 0;
  transition: opacity 1s ease;
}
/* Halo ambiental detrás del panel: se enciende junto con el resto del "reveal" al hacer scroll,
   igual que la aurora del hero — refuerza que esta sección es el punto culminante de la página. */
.askcx::before {
  content: ""; position: absolute; inset: -70px; z-index: 0;
  background:
    radial-gradient(45% 55% at 25% 15%, rgb(29 172 124 / 0.22), transparent 70%),
    radial-gradient(45% 55% at 80% 85%, rgb(61 120 238 / 0.18), transparent 72%);
  filter: blur(46px);
  opacity: 0;
  transition: opacity 1.2s ease 0.15s;
  pointer-events: none;
}
.askcx.in::before { opacity: 1; }
.askcx.in .askcx__embed { opacity: 1; }

.askcx__legal { max-width: min(900px, 94vw); margin: 16px auto 0; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--faint); }

/* ---------- CTA final ---------- */

.final { position: relative; overflow: clip; background: var(--ink); color: #fff; border-radius: var(--radius-xl); padding: clamp(44px, 6vw, 84px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; box-shadow: var(--shadow-pop); }
.final::before { content: ""; position: absolute; width: 620px; height: 620px; top: -260px; right: -160px; border-radius: 50%; background: radial-gradient(circle, rgb(62 99 245 / 0.4), transparent 68%); filter: blur(30px); pointer-events: none; }
.final > * { position: relative; z-index: 1; }
.final h2 { color: #fff; font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; line-height: 1.05; }
.final .lede { color: #a7bad2; }
.final__points { margin-top: 28px; display: grid; gap: 12px; }
.final__points li { list-style: none; display: flex; gap: 11px; font-size: 14.5px; color: #cdd9e8; align-items: baseline; }
.final__points li::before { content: "✓"; color: #6ee7c7; font-weight: 800; }

.form { background: #fff; border-radius: var(--radius-lg); padding: 32px; display: grid; gap: 14px; color: var(--body); box-shadow: var(--shadow-pop); }
.form h3 { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.form p { font-size: 13px; color: var(--muted); margin-top: -8px; }
.form label { font-size: 12.5px; font-weight: 700; color: var(--ink); display: grid; gap: 6px; }
.form input, .form select, .form textarea { font: inherit; font-size: 14px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--ink); background: #fff; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.form textarea { resize: vertical; min-height: 74px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form button { margin-top: 4px; }
.form .alt { font-size: 12.5px; color: var(--muted); text-align: center; }
.form .alt a { color: var(--accent-deep); font-weight: 700; }
.form__ok { padding: 40px 24px; text-align: center; }
.form__ok b { display: block; font-size: 18px; color: var(--ink); font-weight: 800; }
.form__ok p { margin-top: 8px; font-size: 14px; color: var(--muted); }
.form__ok .tick { width: 52px; height: 52px; border-radius: 999px; background: var(--green-soft); display: grid; place-items: center; margin: 0 auto 16px; }

/* ---------- Cierre emocional ---------- */

.closing { padding: 64px 0; }
.closing__text { max-width: 46ch; margin: 0 auto; text-align: center; font-size: clamp(20px, 2.6vw, 28px); font-weight: 650; letter-spacing: -0.01em; line-height: 1.5; color: var(--ink-2); }
.closing__text span { display: block; margin: 6px 0; color: var(--ink); font-weight: 800; }

/* ---------- Centro de contacto ---------- */

.contact-center { background: var(--bg-soft); border-radius: var(--radius-xl); padding: clamp(44px, 6vw, 84px) clamp(24px, 5vw, 64px); }
.contact-center__body { margin-top: 8px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.contact-center__cards { display: grid; gap: 12px; align-content: start; }
.contact-card { text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.contact-card i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-deep); margin-bottom: 10px; }
.contact-card b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.contact-card p { margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.contact-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.contact-card.is-active i { background: var(--accent); color: #fff; }

.agenda { border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 14px; }
.agenda__label { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.agenda__slots { display: flex; gap: 8px; flex-wrap: wrap; }
.agenda__slot { font-size: 12.5px; font-weight: 650; color: var(--body); background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.agenda__slot:hover { border-color: var(--accent); color: var(--accent-deep); }
.agenda__slot.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; }

.contact-center__direct { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.contact-center__direct a { color: var(--accent-deep); font-weight: 700; }
.contact-center__direct span[aria-hidden] { color: var(--faint); }

/* ---------- CTA flotante ---------- */

.floating-cta { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.floating-cta__card { width: 300px; max-width: calc(100vw - 40px); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 22px 22px 20px; position: relative; opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none; transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.floating-cta.is-visible .floating-cta__card { opacity: 1; transform: none; pointer-events: auto; }
.floating-cta.is-minimized .floating-cta__card { display: none; }
.floating-cta__min { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--faint); transition: background 0.15s ease, color 0.15s ease; }
.floating-cta__min:hover { background: var(--bg-soft); color: var(--ink); }
.floating-cta__card b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); max-width: 22ch; letter-spacing: -0.01em; }
.floating-cta__card p { margin-top: 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.floating-cta__actions { margin-top: 14px; display: grid; gap: 8px; }
.floating-cta__pill { display: none; align-items: center; gap: 9px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; border-radius: 999px; padding: 12px 18px; box-shadow: var(--shadow-pop); }
.floating-cta.is-minimized .floating-cta__pill { display: inline-flex; }
.floating-cta:not(.is-visible) .floating-cta__pill { display: none; }
.floating-cta__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 3px rgb(20 174 107 / 0.25); }

/* ---------- Aviso de cookies ---------- */

.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 16px 20px; display: flex; justify-content: center; transform: translateY(120%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.cookie-banner.is-visible { transform: none; }
.cookie-banner__card { width: 100%; max-width: 860px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); border: 1px solid var(--line-soft); padding: 18px 22px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cookie-banner__text { flex: 1 1 380px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.cookie-banner__text a { color: var(--accent-deep); font-weight: 600; }
.cookie-banner__actions { flex: 0 0 auto; margin-left: auto; }
.cookie-banner__text--short { display: none; }

/* ---------- Footer ---------- */

.footer { padding: 72px 0 48px; border-top: 1px solid var(--line-soft); margin-top: 0; background: #fff; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__brand p { margin-top: 12px; font-size: 13.5px; color: var(--muted); max-width: 34ch; }
.footer__links { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.footer__col a { display: block; font-size: 13.5px; color: var(--muted); padding: 4px 0; transition: color 0.15s ease; }
.footer__col a:hover { color: var(--accent-deep); }
.footer__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); line-height: 1.7; text-align: justify; }

/* ---------- Artículos (blog) ---------- */

.article { max-width: 760px; margin: 0 auto; padding: 196px 24px 40px; }
.article__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
.article h1 { margin-top: 16px; font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.article__meta { margin-top: 18px; font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.article__hero { display: block; width: 100%; margin-top: 28px; border-radius: var(--radius-lg); aspect-ratio: 1200 / 630; object-fit: cover; box-shadow: var(--shadow-card); }
.article__body { margin-top: 40px; font-size: 17px; line-height: 1.75; color: var(--body); }
.article__body .diagram { margin: 32px auto; }
.article__body img { max-width: 100%; border-radius: var(--radius); }
.article__body h2 { margin: 44px 0 16px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.article__body h3 { margin: 32px 0 12px; font-size: 20px; font-weight: 750; }
.article__body p { margin: 0 0 18px; }
.article__body ul, .article__body ol { margin: 0 0 20px; padding-left: 22px; }
.article__body li { margin-bottom: 8px; }
.article__body strong { color: var(--ink); font-weight: 650; }
.article__body a { color: var(--accent-deep); font-weight: 600; }
.article__body blockquote { margin: 24px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); color: var(--ink-2); font-size: 19px; font-style: italic; }
.article__cta { margin-top: 48px; padding: 32px; border-radius: var(--radius-lg); background: var(--ink); color: #fff; box-shadow: var(--shadow-premium); }
.article__cta b { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.article__cta p { margin: 8px 0 18px; color: #a7bad2; font-size: 14.5px; }
.article__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 650; color: var(--accent-deep); margin-bottom: 8px; }

/* ---------- Blog: breadcrumbs, layout con TOC, tags, relacionados ---------- */

.breadcrumbs { max-width: 760px; margin: 0 auto; padding: 160px 24px 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breadcrumbs a { color: var(--muted); font-weight: 600; }
.breadcrumbs a:hover { color: var(--accent-deep); }
.breadcrumbs span[aria-hidden] { color: var(--faint); }
.breadcrumbs .is-current { color: var(--ink); font-weight: 650; }

.blog-layout { max-width: 1100px; margin: 0 auto; padding: 0 24px 40px; display: grid; grid-template-columns: 1fr 240px; gap: 56px; align-items: start; }
.blog-layout .article { max-width: none; margin: 0; padding: 40px 0 0; }
.blog-toc { position: sticky; top: 120px; }
.blog-toc__title { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.blog-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; border-left: 2px solid var(--line); }
.blog-toc a { display: block; padding: 2px 0 2px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13px; color: var(--muted); line-height: 1.4; }
.blog-toc a:hover, .blog-toc a.is-active { color: var(--accent-deep); border-left-color: var(--accent); font-weight: 650; }
.blog-toc-mobile { display: none; }

.article__tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.article__tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 12px; font-weight: 650; color: var(--body); }
.article__tag:hover { border-color: var(--accent); color: var(--accent-deep); }

.article__share { margin-top: 24px; display: flex; align-items: center; gap: 10px; }
.article__share span { font-size: 12.5px; color: var(--muted); font-weight: 650; }
.article__share a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); color: var(--body); }
.article__share a:hover { border-color: var(--accent); color: var(--accent-deep); }

.article__faq { margin-top: 48px; }
.article__faq h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; }
.article__faq details { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px; background: #fff; }
.article__faq summary { cursor: pointer; font-weight: 650; color: var(--ink); font-size: 15px; list-style: none; }
.article__faq summary::-webkit-details-marker { display: none; }
.article__faq summary::after { content: "+"; float: right; font-weight: 800; color: var(--accent-deep); }
.article__faq details[open] summary::after { content: "−"; }
.article__faq p { margin-top: 10px; color: var(--body); font-size: 14.5px; line-height: 1.65; }

.related { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.related h2 { font-size: 20px; font-weight: 800; margin-bottom: 20px; }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.blog-hero { padding: 196px 24px 0; text-align: center; }
.blog-filters { max-width: 1160px; margin: 32px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.blog-filters a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 650; color: var(--body); background: #fff; }
.blog-filters a:hover { border-color: var(--accent); color: var(--accent-deep); }
.blog-filters a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.blog-search { max-width: 480px; margin: 24px auto 0; }
.blog-search input { width: 100%; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); font: inherit; font-size: 14px; }
.blog-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-toc { display: none; }
  .blog-toc-mobile { display: block; margin: 32px 0 0; }
  .blog-toc-mobile summary { cursor: pointer; font-weight: 700; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); list-style: none; }
  .blog-toc-mobile summary::-webkit-details-marker { display: none; }
  .blog-toc-mobile ol { list-style: none; padding: 12px 16px 4px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .blog-toc-mobile a { font-size: 13.5px; color: var(--muted); }
  .related__grid { grid-template-columns: 1fr; }
}

/* ---------- Brillo que sigue al cursor (tarjetas) ---------- */
/* .js-glow lo añade script.js a las tarjetas elegibles; --gx/--gy los actualiza en cada
   movimiento del ratón. Solo con puntero fino (ratón): en táctil no hay cursor que seguir. */
@media (hover: hover) and (pointer: fine) {
  .js-glow { position: relative; isolation: isolate; }
  .js-glow::before {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 50%), rgb(62 99 245 / 0.10), transparent 72%);
    opacity: 0; transition: opacity 0.25s ease;
  }
  .js-glow:hover::before { opacity: 1; }
  .js-glow > * { position: relative; z-index: 1; }
}

/* ---------- Animaciones ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal--left { transform: translateX(-36px); }
.reveal--right { transform: translateX(36px); }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .section { padding: 96px 0; }
  .mock__body { grid-template-columns: 200px 1fr; }
  .mock__aside { display: none; }
  .pains { grid-template-columns: repeat(2, 1fr); }
  .uses, .brains, .controls, .tstis, .resources { grid-template-columns: repeat(2, 1fr); }
  .ent { grid-template-columns: repeat(2, 1fr); }
  .split, .service, .asset { grid-template-columns: 1fr; gap: 44px; }
  .final { grid-template-columns: 1fr; gap: 44px; }
  .contact-center__body { grid-template-columns: 1fr; gap: 32px; }
  .hero__kpis { grid-template-columns: repeat(4, 1fr); }
  .gov-mock { grid-template-columns: 1fr; }
  .gov-mock__score { border-right: none; border-bottom: 1px solid var(--line-soft); padding-right: 0; padding-bottom: 20px; }
  .gov-mock__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 96px; }
  .nav__utility { display: none; }
  .nav__links, .nav__part, .lang, .nav__access, .nav__cta .btn { display: none; }
  .nav__burger { display: grid; }
  .hero { padding: 132px 0 64px; }
  .article { padding-top: 132px; }
  .hero__kpis { grid-template-columns: repeat(2, 1fr); }
  .mock__body { grid-template-columns: 1fr; }
  .mock__side { display: none; }
  .mock__main { padding: 20px 16px; }
  .mock__stats { grid-template-columns: repeat(2, 1fr); }
  .mock__rows { overflow-x: auto; }
  .mock__rowhead, .mock__row { min-width: 520px; }
  .calc { grid-template-columns: 1fr; }
  .calc__inputs, .calc__results { padding: 30px 24px; }
  .pains, .uses, .brains, .controls, .advantages, .ent, .tstis, .resources, .asset__grid { grid-template-columns: 1fr; }
  .dg-tier--sources { grid-template-columns: repeat(2, 1fr); }
  .dg-tier--outputs { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 44px; }
  .faq details p { padding-right: 22px; }
  .article__body { font-size: 16px; }
  .contact-center { padding: 40px 20px; border-radius: var(--radius-lg); }
  .contact-center__direct { flex-direction: column; gap: 4px; }
  .footer__links { gap: 36px 40px; }
  .askcx__embed { min-height: 380px; }

  /* CTA flotante: barra compacta que ocupa solo el ancho necesario, sin invadir la pantalla. */
  .floating-cta { right: 12px; bottom: 12px; left: auto; }
  .floating-cta__card { width: min(280px, calc(100vw - 24px)); padding: 18px 18px 16px; }

  /* Aviso de cookies: mucho más compacto en móvil — texto corto en una sola línea + botón chico. */
  .cookie-banner { padding: 8px; }
  .cookie-banner__card { padding: 10px 10px 10px 16px; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; border-radius: var(--radius-lg); }
  .cookie-banner__text { flex: 1 1 auto; font-size: 11.5px; line-height: 1.35; }
  .cookie-banner__text--full { display: none; }
  .cookie-banner__text--short { display: inline; }
  .cookie-banner__text a { display: inline; margin-left: 4px; white-space: nowrap; }
  .cookie-banner__actions { margin-left: 0; flex: 0 0 auto; }
  .cookie-banner__actions .btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; }

  /* Antes/Después: filas en 2 columnas para acortar el scroll en móvil. */
  .vsplit__card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 8px 16px 16px; }
  .vsplit__badge { grid-column: 1 / -1; }
  .vsplit__row { flex-direction: column; gap: 8px; padding: 14px 0; }
  .vsplit__icon { width: 32px; height: 32px; }
  .vsplit__icon svg { width: 16px; height: 16px; }
  .vsplit__row b { font-size: 13px; }
  .vsplit__row p { font-size: 12px; line-height: 1.45; }

  .gov-mock__grid { grid-template-columns: repeat(2, 1fr); }
  .flow__step { width: 92px; padding: 12px 6px; }
  .flow__arrow { display: none; }
}