/* Corekitect - Core de Automatizaciones */

/* Look "Aurora Chatkitect": claro, redondeado, de índigo a violeta con un toque rosa en el texto destacado.
   Los logos no se tocan: el anillo C sigue con su degradé teal. */
:root {
  --ink: #1e293b;
  --text: #475569;
  --muted: #64748b;
  --ground: #ffffff;
  --card: #ffffff;
  --tint: #f8fafc;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --panel: #1e1b4b;        /* superficies oscuras: torre de control */
  --footer: #0f172a;
  --brand: #4f46e5;        /* índigo: enlaces, etiquetas, íconos */
  --brand-2: #7c3aed;      /* violeta */
  --soft: #eef2ff;         /* fondo de píldoras y chips */
  --soft-ink: #4338ca;
  --ok: #059669;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --grad: linear-gradient(90deg, #4f46e5, #7c3aed);                        /* barras y medidores */
  --grad-btn: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);            /* botones */
  --grad-core: linear-gradient(145deg, #4f46e5 0%, #6d28d9 100%);           /* el núcleo y los paneles destacados */
  --flow: linear-gradient(120deg, #4f46e5 0%, #6d28d9 25%, #7e22ce 50%, #6d28d9 75%, #4f46e5 100%); /* degradé que fluye: botones y tarjetas del núcleo */
  --flow-text: linear-gradient(90deg, #4f46e5 0%, #7c3aed 25%, #db2777 50%, #7c3aed 75%, #4f46e5 100%); /* texto destacado que fluye */
  --motion: 1;             /* multiplica la duración de los degradés en movimiento (más lento con "reducir movimiento") */
  --cur-arrow: auto;       /* cursores: los reemplaza el bloque de cursor propio y los anima initCursor (main.js) */
  --cur-hand: pointer;
  --sh: 0 12px 28px -12px rgba(79, 70, 229, .25), 0 2px 6px rgba(15, 23, 42, .05);
  --sh-sm: 0 1px 3px rgba(15, 23, 42, .06);
  --sh-lg: 0 24px 48px -20px rgba(79, 70, 229, .35), 0 4px 12px rgba(15, 23, 42, .06);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%234f46e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --c-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 16.93A8 8 0 1 1 18.3 7.07' fill='none' stroke='%23000' stroke-width='3.2'/%3E%3C/svg%3E"); /* la C del logo como marca de etiquetas y carga */

  --f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-label: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --r: 12px;       /* botones y controles */
  --r-card: 18px;
  --r-sm: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-util: 34px; /* fila de accesos a la app, arriba de la barra (solo en escritorio) */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -.025em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.12; font-weight: 800; letter-spacing: -.035em; }
h3 { font-size: 1.12rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }
p { margin: 0; }
strong { color: var(--ink); font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Etiqueta en píldora, con la C del logo como marca */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; align-self: flex-start; justify-self: start; padding: 6px 14px 6px 11px; border-radius: 999px; background: var(--soft); color: var(--soft-ink); font-family: var(--f-label); font-size: .82rem; font-weight: 600; line-height: 1.3; }
.eyebrow::before { content: ""; width: 13px; height: 13px; flex: none; background: var(--brand); -webkit-mask: var(--c-glyph) center / contain no-repeat; mask: var(--c-glyph) center / contain no-repeat; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--f-display); font-weight: 600; font-size: .96rem; letter-spacing: -.01em; line-height: 1.2;
  padding: .95em 1.5em; border-radius: var(--r); border: 1px solid transparent; cursor: var(--cur-hand);
  transition: transform .2s var(--ease), box-shadow .2s, background-color .2s, border-color .2s, color .2s;
}
.btn .ico { transition: transform .25s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn--primary { position: relative; isolation: isolate; overflow: hidden; overflow: clip; overflow-clip-margin: 1px; color: #fff; background: var(--flow) 50% 50% / 300% 300%; box-shadow: 0 10px 24px -10px rgba(99, 102, 241, .8); }
/* el degradé del botón fluye en una capa de triple ancho que se desliza (transform: lo resuelve el compositor, sin repintar) */
.btn--primary::before { content: ""; position: absolute; inset: -1px auto -1px -1px; z-index: -1; width: calc(300% + 2px); background: var(--flow); pointer-events: none; animation: flow-x calc(7s * var(--motion)) ease-in-out infinite alternate; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(99, 102, 241, .9); }
.btn--ghost, .btn--outline { color: var(--ink); background: var(--card); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn--ghost:hover, .btn--outline:hover { color: var(--brand); border-color: #c7d2fe; }
.btn--sm { padding: .7em 1.15em; font-size: .9rem; box-shadow: none; }

/* Navegación */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid #eef0f6; }
.nav__bar { width: min(1200px, 100%); margin-inline: auto; padding: 12px clamp(16px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { flex: none; }
.nav__logo img { height: 42px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); margin-left: auto; font-size: .95rem; font-weight: 500; color: var(--ink); }
.nav__links a:not(.btn):hover { color: var(--brand); }
.nav__links .btn { white-space: nowrap; }
/* "Más": las secciones que no entran en la barra, en un desplegable con el mismo aspecto que el del idioma */
.nav__more { position: relative; }
.nav__more-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: var(--cur-hand); }
.nav__more-btn .ico { width: 16px; height: 16px; transition: transform .2s; }
.nav__more-btn:hover, .nav__more.is-open .nav__more-btn { color: var(--brand); }
.nav__more.is-open .nav__more-btn .ico { transform: rotate(180deg); }
.nav__more-menu { display: none; position: absolute; left: 50%; top: calc(100% + 16px); z-index: 70; min-width: 220px; padding: 6px; translate: -50% 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-lg); transform-origin: 50% 0; animation: ctx-in .14s ease-out; }
.nav__more.is-open .nav__more-menu { display: flex; flex-direction: column; }
.nav__more-menu a { padding: 10px 12px; border-radius: 10px; font-family: var(--f-display); font-weight: 600; font-size: .92rem; line-height: 1.2; white-space: nowrap; }
.nav__more-menu a:hover, .nav__more-menu a:focus-visible { background: var(--soft); outline: none; }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); cursor: var(--cur-hand); padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav__toggle span { width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s, opacity .25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Accesos a la app (estado del servicio e inicio de sesión): fila fina arriba de la barra, alineada con ella. Al bajar
   (.is-scrolled, main.js) el encabezado sube su alto y la barra vuelve a quedar sola: scroll-padding-top y los sticky no
   cambian. Por debajo de 1100 px la fila se oculta y los mismos enlaces (.nav__app) aparecen dentro del menú */
.nav { transition: transform .25s var(--ease); }
.nav__util { height: var(--nav-util); border-bottom: 1px solid #eef0f6; }
.nav__util-in { width: min(1200px, 100%); height: 100%; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.nav__util a { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1; color: var(--text); transition: color .2s, background-color .2s; }
.nav__util a:hover { color: var(--soft-ink); background: var(--soft); }
.nav__util .ico, .nav__app .ico { width: 16px; height: 16px; color: var(--brand); }
.nav__links .nav__app { display: none; }
.nav.is-scrolled { transform: translateY(calc(-1 * var(--nav-util))); }
.nav.is-scrolled:has(.nav__util :focus-visible) { transform: none; } /* con el teclado, la fila vuelve a la vista */

/* Selector de tema (claro / oscuro / sistema) */
.theme { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint); }
.theme button { display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .95rem; }
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed="true"] { background: var(--card); color: var(--brand); box-shadow: var(--sh-sm), 0 0 0 1px var(--line); }

/* Selector de idioma (js/i18n.js): píldora con el globo y el código; la lista se abre debajo, alineada a la derecha */
.lang { position: relative; flex: none; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint); color: var(--ink); font-family: var(--f-label); font-weight: 700; font-size: .8rem; letter-spacing: .06em; line-height: 1; cursor: var(--cur-hand); transition: border-color .2s, background-color .2s; }
.lang__btn .ico { width: 18px; height: 18px; color: var(--brand); }
.lang__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: transform .2s var(--ease); }
.lang__btn:hover, .lang.is-open .lang__btn { border-color: #c7d2fe; background: var(--card); }
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 196px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-lg); transform-origin: 100% 0; animation: ctx-in .14s ease-out; }
.lang__menu[hidden] { display: none; }
.lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: 10px; font-family: var(--f-display); font-weight: 600; font-size: .92rem; line-height: 1.2; color: var(--ink); }
.lang__menu a::after { content: attr(hreflang); font-family: var(--f-label); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lang__menu a:hover, .lang__menu a:focus-visible { background: var(--soft); color: var(--soft-ink); outline: none; }
.lang__menu a[aria-current="true"] { color: var(--brand); }
.lang__menu a[aria-current="true"]::after { content: ""; width: 16px; height: 16px; background: var(--check) center / contain no-repeat; }
html:not(.js) .lang { display: none; }
/* fuera del español la página espera oculta a su diccionario (unas décimas; a los 3 s se muestra igual) */
html.i18n-wait { background: var(--ground); }
html.i18n-wait body { visibility: hidden; }

/* Cada logo tiene su versión en negativo (images/<nombre>-logo-dark.png): en tema oscuro se muestra esa, sin placas blancas */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

/* ── Tema oscuro: lo resuelve el script del <head> (preferencia guardada o la del equipo) ── */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef2ff;
  --text: #cbd5e1;
  --muted: #94a3b8;
  --ground: #0b1020;
  --tint: #0f1529;
  --card: #141b33;
  --line: #252f4a;
  --line-2: #334166;
  --panel: #1a1840;
  --footer: #070b17;
  --brand: #a5b4fc;
  --brand-2: #c4b5fd;
  --soft: rgba(129, 140, 248, .14);
  --soft-ink: #c7d2fe;
  --ok: #34d399;
  --ok-soft: rgba(16, 185, 129, .13);
  --warn: #fbbf24;
  --warn-soft: rgba(245, 158, 11, .12);
  --grad: linear-gradient(90deg, #818cf8, #c084fc);
  --flow-text: linear-gradient(90deg, #a5b4fc 0%, #c4b5fd 25%, #f9a8d4 50%, #c4b5fd 75%, #a5b4fc 100%);
  --sh: 0 16px 32px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-lg: 0 28px 56px -24px rgba(0, 0, 0, .8);
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23a5b4fc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] .nav { background: rgba(11, 16, 32, .74); border-bottom-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .nav__util { border-bottom-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] .btn--ghost:hover, [data-theme="dark"] .btn--outline:hover { border-color: #4f46e5; }
[data-theme="dark"] .lang__btn:hover, [data-theme="dark"] .lang.is-open .lang__btn { border-color: #4f46e5; }
[data-theme="dark"] .demo__fallback strong { color: var(--ink); }

/* Hero: claro, con auroras lavanda y rosa */
.hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, var(--ground) 100%),
    radial-gradient(620px 440px at 88% 18%, rgba(221, 214, 254, .95), rgba(221, 214, 254, 0) 70%),
    radial-gradient(560px 420px at 72% 96%, rgba(251, 207, 232, .8), rgba(251, 207, 232, 0) 70%),
    radial-gradient(640px 400px at 4% 0%, rgba(233, 213, 255, .7), rgba(233, 213, 255, 0) 70%),
    var(--ground);
  padding-block: calc(clamp(116px, 13vw, 156px) + var(--nav-util)) clamp(64px, 8vw, 100px); /* + la fila de accesos del encabezado */
}
[data-theme="dark"] .hero {
  background:
    linear-gradient(180deg, rgba(11, 16, 32, 0) 72%, var(--ground) 100%),
    radial-gradient(620px 440px at 88% 18%, rgba(99, 102, 241, .28), rgba(99, 102, 241, 0) 70%),
    radial-gradient(560px 420px at 72% 96%, rgba(219, 39, 119, .16), rgba(219, 39, 119, 0) 70%),
    radial-gradient(640px 400px at 4% 0%, rgba(139, 92, 246, .22), rgba(139, 92, 246, 0) 70%),
    var(--ground);
}

.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hero h1 { color: var(--ink); font-size: clamp(2.3rem, 4.8vw, 3.8rem); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; }
.hero h1 em { font-style: normal; background: var(--flow-text) 0% 50% / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow calc(8s * var(--motion)) ease-in-out infinite alternate; }
.hero__lead { font-size: clamp(1.05rem, 1.35vw, 1.18rem); max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Núcleo del hero: la C del logo apunta su abertura a un producto por latido (2,1 s) y sale un pulso por ese cable.
   Un solo ritmo; los productos no se mueven. JS (initHub) gira .ring, marca .is-on / .is-fire y alterna .b1/.b2 para reiniciar el latido. */
.hub { width: min(100%, 600px); margin-inline: auto; padding: clamp(10px, 2vw, 22px) clamp(10px, 2vw, 22px) clamp(14px, 2vw, 20px); border-radius: 32px; background: linear-gradient(160deg, rgba(255, 255, 255, .92) 0%, rgba(245, 243, 255, .92) 100%); border: 1px solid #e9e5ff; box-shadow: var(--sh); }
[data-theme="dark"] .hub { background: linear-gradient(160deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%); border-color: rgba(255, 255, 255, .1); }
.hub__frame { position: relative; }
.hub__stage { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.hub__halo { position: absolute; left: 26.667%; top: 26.667%; width: 46.667%; height: 46.667%; pointer-events: none; }
.hub__flash, .hub__spin { position: absolute; inset: 0; border-radius: 50%; }
.hub__flash { opacity: .34; }
.hub__spin { background: conic-gradient(from 0deg, #818cf8, #a78bfa, #f472b6, #c084fc, #6366f1, #818cf8); filter: blur(36px); animation: spin 18s linear infinite; }
.hub.b1 .hub__flash { animation: haloA 2.1s var(--ease); }
.hub.b2 .hub__flash { animation: haloB 2.1s var(--ease); }
.hub .guide { fill: none; stroke: rgba(79, 70, 229, .12); stroke-width: 1; }
.hub .guide--dash { stroke: rgba(79, 70, 229, .18); stroke-dasharray: 2 7; }
.hub .wire { fill: none; stroke: rgba(79, 70, 229, .26); stroke-width: 1.5; }
.hub .spoke--early .wire { stroke: rgba(100, 116, 139, .32); stroke-dasharray: 3 5; }
.hub .pulse { fill: none; stroke: #7c3aed; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 16 84; stroke-dashoffset: 16; opacity: 0; }
.hub .spoke--early .pulse { stroke: #f59e0b; }
[data-theme="dark"] .hub .guide { stroke: rgba(165, 180, 252, .12); }
[data-theme="dark"] .hub .wire { stroke: rgba(165, 180, 252, .28); }
[data-theme="dark"] .hub .spoke--early .wire { stroke: rgba(148, 163, 184, .3); }
[data-theme="dark"] .hub .pulse { stroke: #c4b5fd; }
.hub .spoke.is-on .pulse { animation: pulse .62s cubic-bezier(.35, 0, .25, 1) .3s both; }
.hub .ring { transform-box: view-box; transform-origin: 300px 300px; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.hub .ring.is-follow { transition-duration: .4s; transition-timing-function: var(--ease); }
.hub .c { fill: none; stroke: url(#hubC); stroke-width: 26; }
.hub .core { transform-box: view-box; transform-origin: 300px 300px; }
.hub.b1 .core { animation: beatA .8s var(--ease); }
.hub.b2 .core { animation: beatB .8s var(--ease); }
.hub .hl { stroke-width: 3; stroke-linecap: round; opacity: .9; }
.hub .hub-ring { fill: none; stroke: url(#hubCore); stroke-width: 3.5; }
.hub .hub-disc { fill: url(#hubCore); }
.hub .node circle { transform-box: fill-box; transform-origin: center; }
.hub .node.is-fire circle { animation: fire .8s var(--ease) .12s; }
.hub .disc { fill: var(--card); stroke: var(--line); stroke-width: 1.25; filter: drop-shadow(0 6px 10px rgba(79, 70, 229, .14)); }
[data-theme="dark"] .hub .disc { stroke: rgba(255, 255, 255, .1); filter: none; }
.hub .ack { fill: none; stroke: url(#hubAck); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset .25s ease; }
.hub .ack--l { stroke-dasharray: 238.8; stroke-dashoffset: 238.8; }
.hub .ack--s { stroke-dasharray: 219.9; stroke-dashoffset: 219.9; }
.hub .prod--early .ack { stroke: #f59e0b; }
.hub .prod.is-on .ack { stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.3, 0, .2, 1) .8s; }
.hub .prod--early image { opacity: .75; }
.hub text { font-family: var(--f-display); text-anchor: middle; }
.hub .name { font-size: 15px; font-weight: 600; fill: var(--text); transition: fill .3s; }
.hub .prod.is-on .name { fill: var(--ink); }
.hub .dot { font-size: 12px; }
.hub .dot--live { fill: #10b981; }
.hub .dot--early { fill: #f59e0b; }
.hub .verb { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; fill: var(--brand); opacity: 0; transition: opacity .2s; }
.hub .prod--early .verb { fill: #d97706; }
[data-theme="dark"] .hub .prod--early .verb { fill: #fbbf24; }
.hub .prod.is-on .verb { opacity: 1; transition: opacity .35s ease .9s; }
.hub a { outline: none; }
.hub a:focus-visible .disc { stroke: var(--brand); stroke-width: 2.5; }
.hub__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 6px; font-size: .84rem; color: var(--muted); }
.hub__legend span { display: inline-flex; align-items: center; gap: .55em; }
.hub__legend i { width: 8px; height: 8px; border-radius: 50%; }
.hub__legend .is-live { background: #10b981; }
.hub__legend .is-early { background: #f59e0b; }

@keyframes pulse { 0% { stroke-dashoffset: 16; opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes beatA { 0% { transform: scale(1); } 28% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes beatB { 0% { transform: scale(1); } 28% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes fire { 0% { transform: scale(1); } 30% { transform: scale(1.55); } 100% { transform: scale(1); } }
@keyframes haloA { 0% { opacity: .3; transform: scale(.94); } 14% { opacity: .8; transform: scale(1.05); } 100% { opacity: .34; transform: scale(1); } }
@keyframes haloB { 0% { opacity: .3; transform: scale(.94); } 14% { opacity: .8; transform: scale(1.05); } 100% { opacity: .34; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.is-off, .is-off::before { animation-play-state: paused !important; }
@keyframes flow-x { from { transform: translateX(0); } to { transform: translateX(-66.667%); } }
@keyframes aurora { 0% { transform: translate3d(-8%, -6%, 0) rotate(0deg); } 50% { transform: translate3d(6%, 4%, 0) rotate(10deg) scale(1.08); } 100% { transform: translate3d(-3%, 7%, 0) rotate(-8deg) scale(1.03); } }
@keyframes blink { 0%, 100% { opacity: 1; } 45% { opacity: .45; } 70% { opacity: 1; } }

/* Secciones */
.section { padding-block: clamp(64px, 8vw, 112px); }
.section--tint { background: var(--tint); }
.section__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.section__head .eyebrow { grid-column: 1 / -1; }
.section__head > p:not(.eyebrow) { max-width: 52ch; }

/* Lista con tilde en círculo suave */
.checks li, .product__list li, .desk__group li { position: relative; }
.checks li::before, .product__list li::before, .desk__group li::before { content: ""; position: absolute; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--soft) var(--check) center / 13px no-repeat; }

/* Clientes: banda con los logos que un Global Admin edita en la app (initClients en main.js).
   Son logos de terceros sin versión en negativo: van sobre placas blancas también en el tema oscuro (si no, los oscuros
   no se leen). main.js fija el tamaño de cada logo (--w y --h, en px) para que todos pesen parecido sea cual sea su forma.
   Si no entran en una fila pasan a una cinta continua, que se detiene con el mouse encima o con el foco;
   con "reducir movimiento" no hay cinta: se acomodan en varias filas. */
.clients { padding-block: clamp(44px, 5.5vw, 72px); }
.clients__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.clients__inner .eyebrow { align-self: center; }
.clients h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.clients__lead { font-size: .98rem; text-wrap: balance; }
.clients__viewport { width: 100%; margin-top: clamp(14px, 2.2vw, 24px); }
.clients__track { display: flex; justify-content: center; }
.clients__list { --gap: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.clients__logo { flex: none; display: grid; place-items: center; height: 92px; min-width: 148px; padding: 0 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-sm); transition: border-color .2s, box-shadow .2s; }
.clients__logo:hover { border-color: #c7d2fe; box-shadow: var(--sh); }
.clients__logo img { width: calc(var(--w, 120) * 1px); height: calc(var(--h, 44) * 1px); object-fit: contain; }
/* sin logo, el nombre: hasta tres líneas (el completo queda en el title) */
.clients__logo span { max-width: 15ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; font-family: var(--f-display); font-weight: 700; font-size: .95rem; line-height: 1.25; letter-spacing: -.01em; color: #1e293b; text-wrap: balance; }
[data-theme="dark"] .clients__logo { border-color: transparent; box-shadow: none; }
[data-theme="dark"] .clients__logo:hover { box-shadow: 0 0 0 3px rgba(165, 180, 252, .45); }
/* cinta: la pista lleva la lista y una copia (aria-hidden); se corre una copia entera y vuelve a empezar sin salto */
.clients__viewport.is-marquee { padding-block: 6px; overflow: hidden; overflow: clip; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.is-marquee .clients__track { width: max-content; justify-content: flex-start; animation: marquee var(--marquee, 30s) linear infinite; }
.is-marquee .clients__list { flex-wrap: nowrap; padding-right: var(--gap); }
.is-marquee:hover .clients__track, .is-marquee:focus-within .clients__track { animation-play-state: paused; }
.is-marquee .clients__list:focus-visible { outline-offset: -3px; border-radius: var(--r-card); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Plataforma */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
.split__copy { display: flex; flex-direction: column; gap: 20px; }
.checks { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.checks li { padding-left: 32px; color: var(--ink); }
.checks li::before { top: calc(.825em - 10px); }

.stack { display: flex; flex-direction: column; }
.stack__layer { border-radius: var(--r-card); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.stack__label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stack__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stack__chips span { font-family: var(--f-display); font-weight: 600; font-size: .86rem; padding: .4em .85em; border-radius: 999px; }
.stack__layer--products { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh); }
.stack__layer--products .stack__chips span { color: var(--ink); background: var(--tint); border: 1px solid var(--line); }
.stack__layer--products b { font-weight: 600; color: var(--brand); }
.stack__layer--core { background: var(--flow) 0% 50% / 300% 300%; color: #fff; box-shadow: var(--sh-lg); animation: flow calc(12s * var(--motion)) ease-in-out infinite alternate; }
.stack__layer--core .stack__label { color: #eef2ff; }
.stack__core-title { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; }
.stack__core-title img { width: 48px; padding: 5px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .3); }
.stack__layer--core .stack__chips span { color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); font-weight: 500; }
.stack__layer--cloud { background: var(--card); border: 1px dashed var(--line-2); }
.stack__cloud { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; color: var(--ink); }
.stack__cloud .ico { color: var(--brand); width: 1.4em; height: 1.4em; }
.stack__wire { align-self: center; width: 2px; height: 26px; border-radius: 2px; background: linear-gradient(#c7d2fe, #a78bfa); }

/* Productos */
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.product { background: var(--card); border-radius: var(--r-card); padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line); box-shadow: var(--sh); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.product:hover { transform: translateY(-2px); border-color: #c7d2fe; box-shadow: var(--sh-lg); }
[data-theme="dark"] .product:hover { border-color: #3b3f7a; }
.product__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.product__logo { height: 72px; width: auto; }
.product h3 { font-size: clamp(1.2rem, 1.9vw, 1.42rem); }
.product__list { display: flex; flex-direction: column; gap: 10px; font-size: .97rem; }
.product__list li { padding-left: 30px; }
.product__list li::before { top: calc(.8em - 10px); }
.product__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* Propkitect (próximamente): la grilla queda con 5 productos, así que el quinto ocupa toda la fila. Desde 861 px el texto va a la
   izquierda y la lista a la derecha; debajo de eso la grilla es de una columna y la tarjeta se apila como las demás. */
.product--wide { grid-column: 1 / -1; }
@media (min-width: 861px) {
  .product--wide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); row-gap: 16px; align-content: start; }
  .product--wide > .product__head, .product--wide > h3, .product--wide > p { grid-column: 1; }
  .product--wide > .product__list { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .product--wide > .product__foot { grid-column: 1 / -1; }
}
.powered { display: inline-flex; align-items: center; gap: .5em; font-size: .85rem; color: var(--muted); }
.powered b { color: var(--ink); font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: .5em; font-size: .8rem; font-weight: 600; padding: .32em .8em; border-radius: 999px; white-space: nowrap; }
.status--live { color: var(--ok); background: var(--ok-soft); }
.status--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--soon { color: var(--warn); background: var(--warn-soft); }
.link { display: inline-flex; align-items: center; gap: .4em; font-family: var(--f-display); font-weight: 600; font-size: .94rem; color: var(--brand); }
.link:hover { color: var(--brand-2); }
.link .ico { transition: transform .25s var(--ease); }
.link:hover .ico { transform: translateX(4px); }

/* Módulos (Dockitect, Voicekitect, Datakitect): disponibles como los productos, en tarjetas más compactas de a tres */
.mods__note { margin-top: clamp(40px, 4vw, 56px); max-width: 70ch; font-size: .98rem; }
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.mod { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh); padding: 24px; display: flex; flex-direction: column; gap: 12px; font-size: .95rem; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.mod:hover { transform: translateY(-2px); border-color: #c7d2fe; box-shadow: var(--sh-lg); }
[data-theme="dark"] .mod:hover { border-color: #3b3f7a; }
.mod__logo { height: 46px; width: auto; align-self: flex-start; }
.mod h3 { font-size: 1.1rem; }
.mod .product__list { font-size: .93rem; gap: 8px; }
.mod__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* Soluciones */
.sols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.sol { grid-column: span 2; padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 12px; font-size: .97rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-sm); }
.sol--wide { grid-column: span 3; }
.sol blockquote { margin: 0 0 4px; font-size: .92rem; line-height: 1.5; font-style: italic; color: var(--muted); }
.sol h3 { font-size: 1.3rem; }
.sol__flow { font-size: .88rem; line-height: 1.7; color: var(--soft-ink); padding: 12px 14px; background: var(--soft); border-radius: 12px; }
.sol__tag { margin-top: auto; align-self: flex-start; padding: .35em .9em; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--muted); }
.sol__tag b { color: var(--brand); font-weight: 700; }
.sol--accent { background: var(--flow) 0% 50% / 300% 300%; border-color: transparent; color: #e0e7ff; box-shadow: var(--sh-lg); animation: flow calc(12s * var(--motion)) ease-in-out infinite alternate; }
.sol--accent h3 { color: #fff; }
.sol--accent blockquote { color: #eef2ff; }
.sol--accent .sol__tag { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: .85rem; font-weight: 600; padding: .3em .8em; border-radius: 999px; background: var(--soft); color: var(--soft-ink); }

/* Torre de control */
.pillars { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pillars li { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; font-size: .96rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.pillars h3 { font-size: 1.02rem; }

.tower { margin: 0; color: #c7d2fe; border-radius: var(--r-card); overflow: hidden; overflow: clip; position: sticky; top: 96px; isolation: isolate; background: var(--panel); box-shadow: var(--sh-lg); }
/* aurora: luces que derivan detrás del contenido (solo transform, sin repintar) */
.tower::before, .section--dark::before, .cta::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; animation: aurora calc(18s * var(--motion)) ease-in-out infinite alternate; }
.tower::before { background: radial-gradient(26% 28% at 70% 26%, rgba(139, 92, 246, .6), rgba(139, 92, 246, 0) 70%), radial-gradient(24% 26% at 32% 66%, rgba(79, 70, 229, .5), rgba(79, 70, 229, 0) 70%), radial-gradient(18% 20% at 58% 50%, rgba(219, 39, 119, .22), rgba(219, 39, 119, 0) 70%); }
[data-theme="dark"] .tower { box-shadow: var(--sh-lg), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.tower__bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: .86rem; font-weight: 600; color: #e0e7ff; }
.tower__bar em { margin-left: auto; font-style: normal; font-weight: 500; font-size: .8rem; padding: .2em .7em; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #c7d2fe; }
.tower__dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); animation: blink 2.4s ease-in-out infinite; }
.tower__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 14px 4px; }
.tower__kpis > div { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 2px; }
.tower__kpis b { font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.tower__kpis span { font-size: .84rem; }
.tower__rows { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; font-size: .86rem; }
.tower__row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3em; align-items: center; gap: 12px; }
.tower__row i { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; }
.tower__row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, #818cf8, #c084fc 60%, #f472b6); }
.tower__row b { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; text-align: right; }
.tower__alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 14px 14px; padding: 12px 14px; border-radius: 12px; font-size: .86rem; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .2); }
.tower__alert .ico { color: #fcd34d; margin-top: 2px; }
.tower__alert b { color: #fcd34d; font-weight: 600; }

.hil { margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 3vw, 32px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hil__copy { display: flex; flex-direction: column; gap: 12px; font-size: .98rem; }
.hil__copy h3 { font-size: 1.35rem; }
.hil__flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: hil; }
.hil__flow li { position: relative; padding: 12px 14px; font-size: .95rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); font-family: var(--f-display); font-weight: 700; color: var(--ink); display: flex; flex-direction: column; gap: 1px; }
.hil__flow span { font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.hil__flow li.is-human { background: var(--grad-btn); color: #fff; border-color: transparent; }
.hil__flow li.is-human span { color: #e0e7ff; }
/* entre paso y paso, un chevrón dibujado con bordes */
.hil__flow li:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 50%; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); z-index: 1; color: var(--line-2); }

/* Capacidades */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cap { display: flex; flex-direction: column; gap: 8px; font-size: .97rem; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-sm); }
.cap > .ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--soft); color: var(--brand); margin-bottom: 8px; }

/* Industrias */
.verts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vert { padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 8px; font-size: .96rem; }

.desk { margin-top: clamp(32px, 4vw, 48px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh); overflow: hidden; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
.desk__head { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--line); font-size: .98rem; background: linear-gradient(160deg, #ffffff 0%, #f5f3ff 100%); }
[data-theme="dark"] .desk__head { background: linear-gradient(160deg, rgba(129, 140, 248, .1) 0%, rgba(129, 140, 248, .02) 100%); }
.desk__head h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -.03em; }
.desk__kicker { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
/* pastilla de estado (p. ej. "Próximamente"): el encabezado es una columna flex, sin esto la pastilla se estira a todo el ancho */
.desk__head .status { align-self: flex-start; }
.desk__head .powered { margin-top: auto; padding-top: 12px; display: block; line-height: 1.7; }
.desk__head .powered img { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.desk__head .powered b { color: var(--brand); }
.desk__group { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 8px 24px; padding: 20px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.desk__group:last-child { border-bottom: 0; }
.desk__group h4 { font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--muted); padding-top: .45em; }
.desk__group ul { display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.desk__group li { padding-left: 30px; }
.desk__group li::before { top: calc(.825em - 10px); }
/* Detalle de un producto: va pegado a la grilla de tarjetas */
.desk--products { margin-top: 20px; }

/* Azure: banda en degradé de índigo a violeta */
.section--dark { position: relative; isolation: isolate; overflow: hidden; overflow: clip; color: #eef2ff; background: linear-gradient(135deg, #312e81 0%, #4c1d95 100%); }
.section--dark::before { background: radial-gradient(24% 34% at 74% 30%, rgba(219, 39, 119, .34), rgba(219, 39, 119, 0) 70%), radial-gradient(26% 38% at 30% 68%, rgba(99, 102, 241, .55), rgba(99, 102, 241, 0) 70%), radial-gradient(20% 30% at 52% 42%, rgba(167, 139, 250, .16), rgba(167, 139, 250, 0) 70%); animation-duration: calc(24s * var(--motion)); }
.section--dark h2 { color: #fff; }
.section--dark .eyebrow { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .16); }
.section--dark .eyebrow::before { background: #c7d2fe; }
.azure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.azure__copy { display: flex; flex-direction: column; gap: 20px; }
.azure__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.azure__facts > div { padding: 22px; display: flex; flex-direction: column; gap: 6px; border-radius: var(--r-card); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.azure__facts dt { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: #fff; }
.azure__facts dd { margin: 0; font-size: .93rem; color: #eef2ff; }
/* Dónde quedan los datos: el núcleo arriba, un cable por producto y la región de la empresa con lo que guarda cada uno.
   Los cables (SVG) solo van con las 8 columnas (Chatkitect ocupa dos); en pantallas angostas queda un cable recto (.res__wire). */
.res { --res-pad: clamp(14px, 2vw, 24px); --res-gap: 12px; margin: clamp(48px, 6vw, 80px) 0 0; display: flex; flex-direction: column; align-items: center; }
.res__head { margin-bottom: 26px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.res__head h3 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -.03em; }
.res__head p { font-size: .98rem; color: #e0e7ff; text-wrap: balance; }
.res__core { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; background: #fff; color: #475569; font-size: .95rem; line-height: 1.35; box-shadow: 0 14px 30px -14px rgba(15, 10, 60, .6); } /* colores fijos: la píldora es blanca también en tema oscuro */
.res__core img { width: 40px; height: 40px; }
.res__core b { font-family: var(--f-display); font-weight: 800; color: #1e293b; letter-spacing: -.02em; }
.res__wires { display: block; width: calc(100% - 2 * var(--res-pad)); height: auto; overflow: visible; }
.res__wires path { fill: none; stroke: rgba(199, 210, 254, .42); stroke-width: 1.3; }
.res__pulses path { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 14 86; stroke-dashoffset: 14; opacity: 0; animation: res-flow calc(3s * var(--motion)) cubic-bezier(.4, 0, .3, 1) infinite; }
.res__wire { display: none; width: 2px; height: 30px; border-radius: 2px; background: linear-gradient(#fff, #fff) 0 -12px / 100% 12px no-repeat, rgba(199, 210, 254, .42); animation: res-drop calc(3s * var(--motion)) cubic-bezier(.4, 0, .3, 1) infinite; }
.res__region { width: 100%; padding: var(--res-pad); display: flex; flex-direction: column; gap: 18px; border: 1.5px dashed rgba(199, 210, 254, .5); border-radius: 24px; background: rgba(15, 10, 60, .16); }
.res__data { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--res-gap); }
.res__data li { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 14px; text-align: center; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.res__data .res__wide { flex-grow: 2; } /* Chatkitect guarda más cosas: doble ancho */
.res__data li::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: calc(var(--res-pad) + 1.5px); margin-left: -1px; background: rgba(199, 210, 254, .42); } /* sigue el cable desde el borde de la región hasta la tarjeta */
.res__data img { width: 40px; height: 40px; padding: 4px; border-radius: 12px; background: #fff; }
.res__data b { font-family: var(--f-display); font-weight: 700; font-size: .92rem; letter-spacing: -.01em; color: #fff; }
.res__data span { font-size: .8rem; line-height: 1.4; color: #e0e7ff; text-wrap: balance; }
.res__tag { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; font-size: .86rem; color: #c7d2fe; text-align: center; }
.res__pill { display: inline-flex; align-items: center; gap: 8px; padding: .4em .95em; border-radius: 999px; background: #fff; color: #1e293b; font-family: var(--f-display); font-weight: 700; }
.res__pill .ico { color: #4f46e5; }
.res__note { max-width: 72ch; margin-top: 16px; display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; color: #c7d2fe; }
.res__note .ico { margin-top: .15em; }
@keyframes res-flow { 0% { stroke-dashoffset: 14; opacity: 0; } 8% { opacity: 1; } 55% { stroke-dashoffset: -86; opacity: 1; } 60%, 100% { stroke-dashoffset: -86; opacity: 0; } }
@keyframes res-drop { 0% { background-position: 0 -12px, 0 0; } 55%, 100% { background-position: 0 30px, 0 0; } }

/* Método */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.steps li { display: flex; flex-direction: column; gap: 8px; font-size: .96rem; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-sm); }
.steps__n { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 12px; background: var(--grad-btn); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; box-shadow: 0 8px 18px -8px rgba(99, 102, 241, .8); }

.audit { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.audit figcaption { font-size: .97rem; }
.audit figcaption strong { display: block; font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.audit__scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh); }
.audit table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .93rem; font-variant-numeric: tabular-nums; }
.audit th { font-weight: 600; font-size: .8rem; letter-spacing: .02em; color: var(--muted); text-align: left; padding: 13px 18px; background: var(--tint); border-bottom: 1px solid var(--line); }
.audit td { padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.audit tr:last-child td { border-bottom: 0; }
.meter { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: var(--soft); margin-right: 10px; vertical-align: middle; position: relative; overflow: hidden; }
.meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: var(--grad); }
.prio { display: inline-block; font-size: .8rem; font-weight: 600; padding: .25em .75em; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); color: var(--muted); }
.prio--alta { color: var(--ok); background: var(--ok-soft); border-color: transparent; }

/* Preguntas */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.faq__head { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; transition: box-shadow .2s, border-color .2s; }
.faq details[open] { border-color: #c7d2fe; box-shadow: var(--sh); }
[data-theme="dark"] .faq details[open] { border-color: #3b3f7a; }
.faq summary { cursor: var(--cur-hand); list-style: none; padding: 18px 60px 18px 20px; position: relative; font-family: var(--f-display); font-weight: 700; font-size: 1.04rem; letter-spacing: -.015em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); font-weight: 500; font-size: 1.15rem; line-height: 1; color: var(--brand); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 20px 20px; max-width: 64ch; font-size: .98rem; }

/* CTA: tarjeta en degradé */
.cta { position: relative; isolation: isolate; overflow: hidden; overflow: clip; width: calc(min(1200px, 100%) - 2 * clamp(16px, 4vw, 40px)); padding: clamp(32px, 5vw, 60px); border-radius: 28px; color: #e0e7ff;
  background: var(--flow) 0% 50% / 300% 300%; box-shadow: var(--sh-lg); animation: flow calc(14s * var(--motion)) ease-in-out infinite alternate;
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 20px clamp(32px, 6vw, 96px); align-items: center; }
.cta::before { background: radial-gradient(24% 36% at 76% 26%, rgba(244, 114, 182, .32), rgba(244, 114, 182, 0) 70%), radial-gradient(22% 34% at 24% 72%, rgba(129, 140, 248, .26), rgba(129, 140, 248, 0) 70%); }
.cta__icon { display: none; }
.cta h2 { grid-column: 1; color: #fff; }
.cta p { grid-column: 1; max-width: 58ch; color: #fff; }
.cta__actions { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 12px; }
.cta .btn--primary { background: #fff; color: #4338ca; box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .5); }
.cta .btn--primary::before { content: none; }
.cta .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.cta .btn--outline:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

/* Footer */
.footer { background: var(--footer); color: #94a3b8; font-size: .93rem; padding-block: 60px 26px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 16px; max-width: 36ch; }
.footer__logo img { height: 56px; width: auto; }
.footer nav { display: flex; flex-direction: column; gap: 9px; }
.footer h4 { font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #e2e8f0; margin-bottom: 6px; }
.footer nav a:hover { color: #c7d2fe; }
.footer__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .85rem; }
.footer__marks { margin-top: 14px; font-size: .78rem; line-height: 1.65; text-wrap: pretty; }

/* Animaciones al entrar en pantalla (solo con JS; sin JS todo se ve en su estado final) */
.tw__rest { visibility: hidden; }
.tw.is-typing .tw__done::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -.12em; border-radius: 2px; background: var(--brand); animation: caret .7s steps(1) infinite; }
.sol--accent .tw.is-typing .tw__done::after { background: #fff; }
@keyframes caret { 50% { opacity: 0; } }
.js .sol > p, .js .sol > .chips, .js .sol > .sol__tag { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.js .sol.is-typed > p, .js .sol.is-typed > .chips, .js .sol.is-typed > .sol__tag { opacity: 1; transform: none; }
.js .sol.is-typed > .sol__flow { transition-delay: .15s; }
.js .sol.is-typed > .sol__tag { transition-delay: .3s; }

.js .tower__row i::after, .js .meter::after { width: 0; transition: width 1.1s var(--ease); }
.js .tower.is-in .tower__row i::after, .js .audit.is-in .meter::after { width: var(--v); }
.js .tower__row:nth-child(2) i::after, .js .audit tr:nth-child(2) .meter::after { transition-delay: .15s; }
.js .tower__row:nth-child(3) i::after, .js .audit tr:nth-child(3) .meter::after { transition-delay: .3s; }
.js .tower__row:nth-child(4) i::after, .js .audit tr:nth-child(4) .meter::after { transition-delay: .45s; }
.js .tower__alert { opacity: 0; transition: opacity .5s ease 1.5s; }
.js .tower.is-in .tower__alert { opacity: 1; }

/* Human + AI: pendiente en gris; lo hecho en verde con tilde; la persona, en degradé */
.js .hil__flow li { color: var(--muted); background: var(--tint); border-color: var(--line); transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s; }
.js .hil__flow li span { color: var(--muted); transition: color .35s; }
.js .hil__flow li span::after { content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .3em; vertical-align: -.08em; background: currentColor; -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; opacity: 0; transition: opacity .35s; }
.js .hil__flow li.is-done { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.js .hil__flow li.is-done span { color: var(--ok); }
.js .hil__flow li.is-done span::after { opacity: 1; }
.js .hil__flow li.is-human.is-done, .js .hil__flow li.is-human.is-active { background: var(--grad-btn); color: #fff; border-color: transparent; }
.js .hil__flow li.is-human.is-done span, .js .hil__flow li.is-human.is-active span { color: #e0e7ff; }
.js .hil__flow li.is-active { color: var(--ink); background: var(--card); border-color: var(--brand); box-shadow: 0 0 0 3px var(--soft); }

/* tarjetas que suben apenas al entrar (el contenido siempre está visible) */
.js .steps > li, .js .caps > .cap, .js .verts > .vert { transform: translateY(14px); transition: transform .7s var(--ease); }
.js .is-in > li, .js .is-in > .cap, .js .is-in > .vert { transform: none; }
.js .is-in > :nth-child(2) { transition-delay: .1s; }
.js .is-in > :nth-child(3) { transition-delay: .2s; }
.js .is-in > :nth-child(4) { transition-delay: .3s; }
.js .is-in > :nth-child(5) { transition-delay: .4s; }
.js .is-in > :nth-child(6) { transition-delay: .5s; }

.js .stack__wire { transform: scaleY(0); transform-origin: top; transition: transform .5s ease .3s; }
.js .stack__layer--core, .js .stack__layer--cloud { opacity: 0; transform: translateY(-8px); transition: opacity .5s ease, transform .5s ease; }
.js .stack.is-in .stack__wire { transform: none; }
.js .stack.is-in .stack__wire:nth-of-type(4) { transition-delay: 1s; }
.js .stack.is-in .stack__layer--core { opacity: 1; transform: none; transition-delay: .6s; }
.js .stack.is-in .stack__layer--cloud { opacity: 1; transform: none; transition-delay: 1.3s; }

/* Cursor propio: flecha con el degradé de la marca; sobre lo clicable, la C del logo con su centro.
   Todo lo clicable usa var(--cur-hand); initCursor (main.js) hace girar el degradé cambiando las dos variables. */
html { cursor: var(--cur-arrow); }
a, button, summary, label, select, input[type="checkbox"], input[type="radio"], [role="button"], [role="menuitem"] { cursor: var(--cur-hand); }
input:not([type]), input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], textarea { cursor: text; }
@media (hover: hover) and (pointer: fine) {
  :root { --cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='.55' y2='1' gradientTransform='rotate%280 .5 .5%29'%3E%3Cstop offset='0' stop-color='%236366F1'/%3E%3Cstop offset='.55' stop-color='%237C3AED'/%3E%3Cstop offset='1' stop-color='%23DB2777'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='0' y1='0' x2='1' y2='1' gradientTransform='rotate%280 .5 .5%29'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.5' stop-color='%23E0E7FF'/%3E%3Cstop offset='1' stop-color='%23FBCFE8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 5 L6 25.5 L11.2 20.6 L14.6 28.4 L18.4 26.8 L15.1 19.2 L22.3 19 Z' fill='%231E1B4B' opacity='.28' transform='translate%281.2 1.5%29'/%3E%3Cpath d='M6 5 L6 25.5 L11.2 20.6 L14.6 28.4 L18.4 26.8 L15.1 19.2 L22.3 19 Z' fill='url%28%23g%29' stroke='url%28%23e%29' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 6 5, auto; --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0' gradientTransform='rotate%280 .5 .5%29'%3E%3Cstop offset='0' stop-color='%234F46E5'/%3E%3Cstop offset='.55' stop-color='%237C3AED'/%3E%3Cstop offset='1' stop-color='%23C026D3'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='0' y1='0' x2='1' y2='1' gradientTransform='rotate%280 .5 .5%29'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.5' stop-color='%23E0E7FF'/%3E%3Cstop offset='1' stop-color='%23FBCFE8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M23.49 21.85A9.5 9.5 0 1 1 23.49 10.15' fill='none' stroke='%231E1B4B' stroke-opacity='.28' stroke-width='7.4' transform='translate%28.8 1.2%29'/%3E%3Cpath d='M23.49 21.85A9.5 9.5 0 1 1 23.49 10.15' fill='none' stroke='url%28%23e%29' stroke-width='7.4'/%3E%3Cpath d='M23.49 21.85A9.5 9.5 0 1 1 23.49 10.15' fill='none' stroke='url%28%23g%29' stroke-width='4.2'/%3E%3Ccircle cx='16' cy='16' r='3.3' fill='url%28%23g%29' stroke='url%28%23e%29' stroke-width='1.5'/%3E%3C/svg%3E") 16 16, pointer; }
}

/* Menú contextual propio: el logo, la acción principal y dos accesos con la C como marca (siempre oscuro: usa el logo en negativo) */
.ctx { position: fixed; z-index: 100; width: 280px; padding: 8px; background: linear-gradient(160deg, #1e1b4b 0%, #0f172a 100%); color: #c7d2fe; border: 1px solid rgba(165, 180, 252, .18); border-radius: 16px; box-shadow: 0 24px 48px -18px rgba(15, 23, 42, .6); display: flex; flex-direction: column; gap: 6px; transform-origin: var(--ox, 0) var(--oy, 0); animation: ctx-in .14s ease-out; }
.ctx[hidden] { display: none; }
.ctx__head { padding: 8px 8px 12px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ctx__head img { height: 32px; width: auto; }
.ctx__cta { width: 100%; justify-content: space-between; padding: .8em 1em; font-size: .9rem; }
.ctx__cta:hover { transform: none; }
.ctx__item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 9px 36px; border-radius: 10px; font-family: var(--f-display); font-weight: 600; font-size: .92rem; line-height: 1.3; color: #eef2ff; transition: background-color .15s; }
.ctx__item::before { content: ""; position: absolute; left: 11px; top: 11px; width: 14px; height: 14px; background: #a5b4fc; -webkit-mask: var(--c-glyph) center / contain no-repeat; mask: var(--c-glyph) center / contain no-repeat; }
.ctx__item small { font-family: var(--f-body); font-weight: 400; font-size: .78rem; color: #a5b4fc; }
.ctx__item:hover, .ctx__item:focus-visible { background: rgba(165, 180, 252, .12); outline: none; }
@keyframes ctx-in { from { opacity: 0; transform: scale(.94); } }

/* Modal "Agenda una demo" */
.demo { width: min(820px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--text); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(30, 27, 75, .55); }
.demo[open] { display: flex; flex-direction: column; animation: ctx-in .18s ease-out; }
.demo::backdrop { background: rgba(30, 27, 75, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.demo__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; background: var(--grad-core); flex: none; }
.demo__bar img { padding: 3px; border-radius: 8px; background: #fff; box-sizing: content-box; }
.demo__bar h2 { font-weight: 600; font-size: .92rem; letter-spacing: 0; color: #fff; }
.demo__close { margin-left: auto; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: transparent; color: #fff; font-size: 1.4rem; line-height: 1; }
.demo__close:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.demo__body { overflow-y: auto; overscroll-behavior: contain; min-height: 240px; }
.demo__status { padding: 48px 24px; text-align: center; font-size: .9rem; color: var(--muted); }
.spinner { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -4px; background: var(--brand); -webkit-mask: var(--c-glyph) center / contain no-repeat; mask: var(--c-glyph) center / contain no-repeat; animation: spin 1.1s linear infinite; }
.demo__frame { display: block; width: 100%; height: 70vh; border: 0; }
.demo__frame[hidden], .demo__fallback[hidden], .demo__status[hidden] { display: none; }
.demo__fallback { padding: 40px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
body.has-demo { overflow: hidden; }

/* Aviso de cookies: tarjeta flotante abajo a la izquierda. Lo muestra main.js hasta que se cierra
   (sin JS no aparece, y sin JS el sitio tampoco guarda nada en el navegador) */
.cookies { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 12px 18px; width: min(640px, calc(100% - 32px)); padding: 14px 14px 14px 18px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-lg); font-size: .86rem; line-height: 1.55; animation: cookies-in .35s var(--ease); }
.cookies[hidden] { display: none; }
.cookies p { flex: 1; min-width: 0; text-wrap: pretty; }
.cookies .btn { flex: none; }
@keyframes cookies-in { from { opacity: 0; transform: translateY(14px); } }
@media print { .cookies { display: none; } }

/* Responsive */
@media (max-width: 980px) {
  .hero__grid, .split, .azure, .hil, .audit, .faq, .section__head, .cta { grid-template-columns: minmax(0, 1fr); }
  .cta__actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .desk__head { border-right: 0; border-bottom: 1px solid var(--line); }
  .faq__head { position: static; }
  .tower { position: relative; top: auto; } /* sin sticky, pero sigue recortando su aurora (::before): con static desbordaba la página en móvil; top: auto para que no baje 96 px */
  .hub { width: min(100%, 540px); }
  .caps, .verts, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol, .sol--wide { grid-column: span 6; }
  .mods { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Menú: entre 1101 y 1240 px los enlaces se juntan un poco; por debajo de 1100 px (con el selector de idioma
   la fila completa ya no entra en ningún idioma) pasa al botón de menú */
@media (max-width: 1240px) {
  .nav__links { gap: 18px; }
}
@media (max-width: 1100px) {
  :root { --nav-util: 0px; } /* sin la fila de accesos: el hero y el encabezado quedan como antes */
  .nav__util { display: none; }
  .nav__links .nav__app { display: flex; align-items: center; gap: 10px; }
  .nav__toggle { display: flex; order: 2; }
  .nav__bar { flex-wrap: wrap; column-gap: 10px; }
  /* arriba a la derecha quedan el idioma y el botón del menú; los enlaces se abren en la fila de abajo */
  .nav .lang { order: 1; margin-left: auto; }
  .nav .lang__btn { height: 44px; padding: 0 12px 0 11px; border-radius: var(--r); background: var(--card); }
  .nav__links { order: 3; margin-left: 0; display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; }
  .nav__links.is-open { display: flex; }
  .nav__links a:not(.btn) { padding: 12px 0; border-top: 1px solid var(--line); }
  .nav__links .btn { margin-top: 10px; }
  .nav__links .theme { align-self: flex-start; margin-top: 12px; }
  /* "Más" se abre: sus enlaces quedan como filas del menú, sin botón */
  .nav__more, .nav__more .nav__more-menu, .nav__more.is-open .nav__more-menu { display: contents; }
  .nav__more-btn { display: none; }
  .nav__more-menu a { font: inherit; border-radius: 0; white-space: normal; }
  .nav__more-menu a:hover, .nav__more-menu a:focus-visible { background: none; }
}
@media (max-width: 1100px) {
  /* datos por región: Chatkitect en una fila y el resto de a 3, con un solo cable recto */
  .res__wires, .res__data li::before { display: none; }
  .res__wire { display: block; }
  .res__data { flex-wrap: wrap; justify-content: center; }
  .res__data li { flex: 0 0 calc((100% - 2 * var(--res-gap)) / 3); }
  .res__data .res__wide { flex-basis: 100%; }
  .res__data li:last-child { flex-basis: 100%; } /* Propkitect: con 8 productos quedaba uno suelto en la última fila */
}
@media (max-width: 860px) {
  .products { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .res__data li { flex-basis: calc((100% - var(--res-gap)) / 2); }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .nav__logo img { height: 36px; }
  /* el SVG se achica a la mitad: los textos del núcleo crecen para seguir legibles (~12 px en pantalla) */
  .hub { width: 100%; padding: 6px 4px 12px; border-radius: 24px; }
  .hub .name { font-size: 22px; }
  .hub .dot { font-size: 16px; }
  .hub .verb { font-size: 16px; letter-spacing: .12em; transform: translateY(8px); }
  /* con la fuente de 22 px las etiquetas de los dos productos de arriba en diagonal (Flowkitect, Propkitect) vuelven a tocar el cable:
     se corren 24 px más hacia afuera de lo que ya trae el SVG (14) / at 22px the two upper-diagonal labels touch the wire again: 24 more units outward */
  .hub a[href="#flowkitect"] .name { transform: translateX(24px); }
  .hub a[href="#flowkitect"] .verb { transform: translate(24px, 8px); }
  .hub a[href="#propkitect"] .name { transform: translateX(-24px); }
  .hub a[href="#propkitect"] .verb { transform: translate(-24px, 8px); }
  .hub__spin { filter: blur(22px); }
  .caps, .verts, .steps, .azure__facts { grid-template-columns: minmax(0, 1fr); }
  .hil__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hil__flow li:nth-child(2)::after { display: none; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .desk__group { grid-template-columns: minmax(0, 1fr); }
  .product__logo { height: 56px; }
  .clients__list { --gap: 12px; }
  .clients__logo { height: 78px; min-width: 0; padding: 0 20px; }
  .clients__logo img { width: calc(var(--w, 120) * .82px); height: calc(var(--h, 44) * .82px); }
  .tower__row { grid-template-columns: 7.5em minmax(0, 1fr) 3em; }
  .cta { border-radius: 22px; }
  .cookies { flex-direction: column; align-items: stretch; }
  .cookies p { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* se apaga lo envolvente (giro continuo del halo, scroll suave, desplazamientos); el latido del núcleo sigue, más pausado (2,8 s en initHub) */
  html { scroll-behavior: auto; }
  .nav { transition: none; }
  .hub__spin { animation: none; }
  .hub.b1 .hub__flash, .hub.b2 .hub__flash { animation-duration: 2.8s; }
  .spinner { animation-duration: 2.4s; }
  .btn--primary:hover, .product:hover, .mod:hover { transform: none; }
  /* los degradés en movimiento siguen (pedido explícito del cliente), más lentos */
  :root { --motion: 1.8; }
  .js .steps > li, .js .caps > .cap, .js .verts > .vert { transform: none; transition: none; }
  .cookies { animation: none; }
}