/* =========================================================================
   gregoriotorrealba.com — v5 (rediseño de septiembre de 2026)
   =========================================================================

   Dirección aprobada: estudio de arquitectura de datos. Grafito, vidrio
   ahumado, cian para conexiones y selección, naranja para la acción y la marca,
   y un bloque gris mineral (Especialización) como pausa visual.

   Tres reglas que atraviesan todo el fichero:

   1. CADA COLOR TIENE UNA FUNCIÓN. Naranja = acción y marca. Cian = conexión y
      selección. No hay morado, rosa ni degradados multicolor. Error y éxito
      llevan icono y texto además del color.
   2. EL CONTENIDO NACE VISIBLE. Lo que se oculta para un selector se oculta
      solo bajo `html.js`: sin JavaScript se ve todo.
   3. SIN `style=` EN EL HTML. La CSP no tiene 'unsafe-inline'.

   El HTML se sirve con data-theme="dark" (el tema publicado). :root tiene la
   paleta clara, que es la que queda si el visitante elige «Tema claro» en el
   panel Explorar.
   ========================================================================= */

/* ---- Tipografías autoalojadas ----------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-var.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */

:root {
  /* Paleta clara (se activa desde el interruptor de tema). */
  --bg: #F3F4F5;
  --surface: #FFFFFF;
  --raised: #E8EBEE;
  --text: #10171E;
  --muted: #4C5966;
  --border: rgba(16, 23, 30, 0.16);
  --border-strong: rgba(16, 23, 30, 0.28);
  --glass: rgba(255, 255, 255, 0.8);
  --glass-solid: #FFFFFF;
  --glass-border: rgba(16, 23, 30, 0.12);
  --glass-shadow: 0 18px 48px -24px rgba(16, 23, 30, 0.28);
  --line: #1A8CA0;           /* conexiones del grafo */
  --line-soft: rgba(16, 23, 30, 0.28);
  --link: #116071;           /* cian como TEXTO: el oscuro, legible */
  --accent: #F58A52;         /* relleno de botón y marca */
  --accent-text: #943C15;    /* naranja como TEXTO pequeño */
  --on-accent: #10171E;
  --focus: #116071;
  --error: #B3261E;
  --ok: #116071;
  --code-bg: #10171E;
  --code-text: #E6EDF2;
  --grid-line: rgba(16, 23, 30, 0.05);

  /* Malla del hero: mismos valores que la versión aprobada. En claro el azul
     aporta contraste cromático sobre el fondo; el factor de alfa compensa que a
     igual alfa rinde menos que el cian sobre grafito. */
  --malla-color: #1d4ed8;
  --malla-alfa: 1.7;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-h: 88px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --section-y: clamp(3.5rem, 7.5vw, 7rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 180ms;
  --t-panel: 260ms;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0B0E12;
  --surface: #171D24;
  --raised: #222C36;
  --text: #F1F3F5;
  --muted: #B7C1CA;
  --border: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.26);
  --glass: rgba(23, 29, 36, 0.82);
  --glass-solid: #171D24;
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  --line: #36C5DA;
  --line-soft: rgba(255, 255, 255, 0.24);
  --link: #36C5DA;
  --accent: #F58A52;
  --accent-text: #F58A52;
  --on-accent: #10171E;
  --focus: #36C5DA;
  --error: #FF9A8A;
  --ok: #36C5DA;
  --code-bg: #070A0D;
  --code-text: #D9E4EC;
  --grid-line: rgba(255, 255, 255, 0.04);
  --malla-color: #3ccaff;
  --malla-alfa: 1;
  color-scheme: dark;
}

/* ---- Base -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Compensa la cabecera fija en todo salto por ancla. */
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.is-locked body { overflow: hidden; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: color-mix(in srgb, var(--line) 35%, transparent); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sin scroll-margin: el desfase de la cabecera ya lo pone scroll-padding-top
   en html. Con los dos se sumaban y al saltar a una sección asomaban ~110 px
   de la anterior. */
.section { padding-block: var(--section-y); }
/* Las secciones de la portada miden como el hero: la pantalla menos la
   cabecera, con el contenido centrado. Al llegar por el menú cada una llena
   justo lo que se ve. Si el contenido es más alto, la sección crece. */
main > section.section {
  --sec-pad: clamp(1.5rem, 4.5vh, 4rem);
  display: grid;
  align-content: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--sec-pad);
}

/* ---- Tipografía común -------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--cyan { color: var(--link); }
.eyebrow--accent { color: var(--accent-text); }
.eyebrow--rule { display: flex; align-items: center; gap: 16px; }
.eyebrow--rule::after { content: ""; flex: 0 1 120px; height: 1px; background: var(--border-strong); }

.h2 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.3vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lead {
  margin-top: 16px;
  max-width: 60ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted);
}

.sec-head { max-width: 760px; }

/* ---- Botones y enlaces ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 0.975rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: #FF9C69; }
.btn--ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text); }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 1.025rem; }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 0.925rem; }
.btn__ico { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__ico { transform: translateX(3px); }

.ico { width: 20px; height: 20px; flex: none; }

.link-cta,
.link-ext {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  width: fit-content;
}
.link-cta { color: var(--accent-text); }
.link-cta .ico { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.link-cta:hover .ico { transform: translateX(3px); }
.link-ext { color: var(--text); border-bottom-color: var(--border-strong); }
.link-ext:hover { border-bottom-color: currentColor; }
.link-ext__ico { width: 16px; height: 16px; }

/* ---- Vidrio ------------------------------------------------------------ */

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
/* Sin backdrop-filter el vidrio se vuelve opaco: la lectura va primero. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
}

/* =========================================================================
   Cabecera
   ========================================================================= */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr { background: var(--bg); }
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }

.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
/* Logotipo «G»: una imagen por tema (ver brand.mjs), cuadrada. */
.brand__mark { display: block; width: 40px; height: 40px; flex: none; }
.brand__mark img { display: block; width: 100%; height: 100%; }
.brand__mark .logo-g__oscuro { display: none; }
:root[data-theme="dark"] .brand__mark .logo-g__claro { display: none; }
:root[data-theme="dark"] .brand__mark .logo-g__oscuro { display: block; }
.brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__desc {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.brand--static { display: flex; width: fit-content; margin-top: 28px; }


.hdr__nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); }
/* Separadores como en el boceto: TrustedLineage | Hablemos · Explorar | idioma. */
.hdr .btn--sm.hdr__cta { min-height: 46px; padding: 0 24px; font-size: 1rem; }
.hdr__cta { position: relative; margin-left: clamp(12px, 1.6vw, 22px); }
.hdr__cta::before { content: ""; position: absolute; left: calc(-1 * clamp(12px, 1.8vw, 26px) - clamp(6px, 0.8vw, 11px)); top: 22%; bottom: 22%; width: 1px; background: var(--border); }
.hdr__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
}
/* Flecha inclinada del boceto junto a «TrustedLineage». */
.hdr__link-ico { width: 17px; height: 17px; flex: none; }
.hdr__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.6);
  transform-origin: left;
  opacity: 0.5;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.hdr__link:hover::after,
.hdr__link[aria-current="true"]::after { transform: scaleX(1); opacity: 1; }
.hdr__link[aria-current="true"] { color: var(--link); }

.hdr__explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-size: 1.05rem;
  font-weight: 500;
}
.hdr__explore-ico { width: 18px; height: 18px; }
.hdr__explore-narrow { display: none; }

.lang { display: inline-flex; align-items: center; gap: 4px; padding-left: clamp(12px, 2vw, 24px); border-left: 1px solid var(--border); }
.lang__opt {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--muted);
}
.lang__opt[aria-current="page"] { color: var(--text); font-weight: 500; }
.lang__opt:hover { color: var(--text); }
.lang__sep { color: var(--border-strong); }

/* ---- Panel Explorar ---------------------------------------------------- */

.xp {
  width: min(1200px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.xp::backdrop {
  background: rgba(6, 8, 11, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.xp__box {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--glass-solid);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--glass-shadow);
}
.xp__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(12px, 2vw, 24px); }
.xp__loc { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); }
.xp__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.xp__close {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: none; font-weight: 500;
}
.xp__close .ico { width: 18px; height: 18px; }

.xp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.xp__list { border-top: 1px solid var(--border); }
.xp__list li { border-bottom: 1px solid var(--border); }
.xp__item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  grid-template-areas: "n label arrow" ". sum arrow";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: clamp(14px, 1.8vw, 22px) 12px clamp(14px, 1.8vw, 22px) 16px;
  text-decoration: none;
}
.xp__item::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--t-fast) var(--ease);
}
.xp__n { grid-area: n; font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted); }
.xp__label { grid-area: label; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.12; letter-spacing: -0.015em; }
.xp__sum { grid-area: sum; color: var(--muted); font-size: 0.975rem; }
.xp__arrow { grid-area: arrow; width: 22px; height: 22px; color: var(--muted); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.xp__item:hover::before, .xp__item:focus-visible::before, .xp__item.is-preview::before, .xp__item[aria-current="true"]::before { transform: scaleY(1); }
.xp__item:hover .xp__n, .xp__item:focus-visible .xp__n, .xp__item.is-preview .xp__n, .xp__item[aria-current="true"] .xp__n { color: var(--accent-text); }
.xp__item:hover .xp__arrow, .xp__item:focus-visible .xp__arrow, .xp__item.is-preview .xp__arrow { color: var(--accent-text); transform: translateX(3px); }

.xp__preview { padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--border); }
.xp__pv-n { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.16em; color: var(--link); }
.xp__pv-title { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.02; letter-spacing: -0.02em; }
.xp__pv-sum { margin-top: 12px; font-size: 1.25rem; color: var(--muted); max-width: 26ch; }
.xp__art { margin-top: clamp(20px, 3vw, 36px); }
.xp__art--graph, .xp__art--row { display: flex; align-items: center; gap: 0; }
.xp__flow {
  flex: 1 1 auto; min-width: 22px; max-width: 64px; height: 3px;
  background: radial-gradient(circle, rgba(79, 216, 236, 0.95) 1.2px, transparent 1.7px) 0 50% / 7px 3px repeat-x;
  filter: drop-shadow(0 0 3px rgba(54, 197, 218, 0.9));
  animation: flujo 1.1s linear infinite;
}
.xp__branch { display: grid; gap: 14px; margin-left: 26px; position: relative; }
.xp__branch::before {
  content: ""; position: absolute; left: -26px; top: 28px; bottom: 28px; width: 18px;
  border: 1.5px solid rgba(79, 216, 236, 0.7); border-left: 0; border-radius: 0 12px 12px 0;
  transform: scaleX(-1); transform-origin: center;
}
.xp__art--img img { width: 100%; max-width: 440px; height: auto; }
.xp__art--square img { max-width: 280px; }
/* Objetos del hero en la vista previa de TrustedLineage. */
.xp__piece { flex: none; width: 76px; height: 76px; object-fit: contain; }
.xp__piece--lg { width: 96px; height: 96px; }
.xp__piece--sm { width: 56px; height: 56px; }
.xp__art--photo { width: 180px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }

.xp__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  margin-top: clamp(16px, 2.4vw, 28px); padding-top: 16px;
  border-top: 1px solid var(--border);
}
.xp__method { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid currentColor; font-weight: 500; }
.xp__method .ico { width: 18px; height: 18px; }
.xp__theme {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: none; font-size: 0.925rem;
}
.xp__theme .ico { width: 18px; height: 18px; }
.xp__theme-light { display: none; }
:root:not([data-theme="dark"]) .xp__theme-dark { display: none; }
:root:not([data-theme="dark"]) .xp__theme-light { display: block; }
.xp__esc { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
/* El selector del panel solo hace falta cuando el de la cabecera se oculta. */
.xp__lang { display: none; }
.xp__lang .lang { padding-left: 0; border-left: 0; }

/* Arte decorativo común (panel, trayectoria). */
.art-edges path, .art-edges circle { fill: none; stroke: var(--line); stroke-width: 1.5; opacity: 0.75; }
.art-node rect, .art-node circle { fill: color-mix(in srgb, var(--line) 8%, transparent); stroke: var(--line); stroke-width: 1.2; opacity: 0.9; }
.art-node--focus rect, .art-node--focus circle { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.art-plane path { fill: color-mix(in srgb, var(--line) 7%, transparent); stroke: var(--line); stroke-width: 1.2; }
.art-link path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.art-dot circle { fill: var(--accent); }

/* Sin JavaScript el botón no abre nada: el panel se muestra como navegación
   normal bajo la cabecera, sin la vista previa. */
html:not(.js) .hdr__explore { display: none; }
html:not(.js) .xp {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  margin: 0;
}
html:not(.js) .xp__box { border-radius: 0; border-inline: 0; box-shadow: none; max-height: none; }
html:not(.js) .xp__top .xp__close,
html:not(.js) .xp__preview,
html:not(.js) .xp__theme,
html:not(.js) .xp__esc { display: none; }
html:not(.js) .xp__grid { grid-template-columns: 1fr; }

/* =========================================================================
   Hero (bocetos/02-hero.png)
   ========================================================================= */

/* El hero ocupa la primera pantalla y NO más: texto, panel, malla y firma
   tienen que verse sin desplazarse en un portátil. Por eso el titular y el
   panel escalan también con la altura de la ventana (vh), no solo con el
   ancho: con el ancho solo, a 1440 x 800 el hero se salía por abajo. */
.hero {
  position: relative;
  /* La malla es un canvas absoluto: el recorte evita que una sola partícula
     llegue a la sección siguiente. */
  overflow: clip;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h));
  /* Distancia del borde inferior del hero a la línea de la firma: la malla
     termina ahí. `0.56rem` es media caja de línea del texto de la firma. */
  --hero-pb: clamp(1rem, 2.6vh, 2rem);
  --firma: calc(var(--hero-pb) + 0.56rem);
  padding-top: clamp(1.5rem, 5vh, 4rem);
  padding-bottom: var(--hero-pb);
}
/* La malla vive en la franja inferior, bajo el contenido, como en el boceto.
   La ola es relativa al lienzo: cambiar su alto cambia su forma, así que el
   lienzo no se toca. Para que la firma vaya sobre fondo limpio, como en el
   boceto, la máscara solo apaga la franja de la firma (y 48 px de fundido encima). */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  height: 50%;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(40, 190, 255, 0.8)) drop-shadow(0 0 12px rgba(40, 170, 255, 0.35));
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--firma) + 12px), #000 calc(var(--firma) + 60px));
  mask-image: linear-gradient(to top, transparent calc(var(--firma) + 12px), #000 calc(var(--firma) + 60px));
}
:root:not([data-theme="dark"]) .wave { filter: none; }

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  gap: clamp(2rem, 3.2vw, 3.5rem);
  align-items: center;
}
.hero__copy { min-width: 0; }
/* El panel va arriba, no centrado: centrado se movía al cambiar de idioma,
   porque el texto en inglés ocupa una línea más que en español. */
.hero__grid > .hp { align-self: start; }
.hero__title {
  margin-top: clamp(14px, 2vh, 22px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, min(4.6vw, 8.6vh), 5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
/* El titular inglés es más largo («Understand the data platform your
   business depends on.»): por encima de 60 px pasa a cuatro líneas. Con ese
   máximo queda en tres desde 1536 px, como el español, que no cambia. */
html[lang="en"] .hero__title { font-size: clamp(2.5rem, min(4.6vw, 8.6vh), 3.75rem); }
.hero__sub {
  margin-top: clamp(16px, 2.6vh, 26px);
  font-size: clamp(1.0625rem, min(1.35vw, 2.4vh), 1.4rem);
  line-height: 1.4;
}
.hero__body {
  margin-top: clamp(12px, 2.2vh, 24px);
  font-size: clamp(1rem, min(1.2vw, 2.2vh), 1.25rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px 20px; margin-top: clamp(20px, 3.4vh, 36px); }
.btn--xl { min-height: clamp(52px, 6.4vh, 58px); padding: 0 34px; font-size: 1.075rem; }
.hero .btn--primary { box-shadow: 0 12px 34px -12px rgba(245, 138, 82, 0.75); }
.hero__ctas .btn--ghost { min-width: 196px; background: color-mix(in srgb, var(--bg) 50%, transparent); }
/* Hasta 1320 px los dos botones caben en fila con menos relleno. */
@media (max-width: 1320px) {
  .btn--xl { padding: 0 24px; }
  .hero__ctas { gap: 12px; }
  .hero__ctas .btn--ghost { min-width: 0; }
}
.hero__proof {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  padding-top: clamp(1.5rem, 6vh, 4rem);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__proof::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---- Panel ---------------------------------------------------------------- */

.hp { min-width: 0; padding: 0; border-radius: 22px; overflow: hidden; }
.hp__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: clamp(14px, 2.2vh, 22px) clamp(18px, 2vw, 30px);
  border-bottom: 1px solid var(--border);
}
.hp__label-top { font-size: 0.8125rem; }
.hp__pause {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 4px;
  border: 0; background: none; font-size: 0.95rem; color: var(--muted);
}
.hp__pause:hover { color: var(--text); }
.hp__pause-ico {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border-strong); border-radius: 50%;
}
.hp__pause-ico .ico { width: 16px; height: 16px; }
.hp__i-play { display: none; }
.hp__pause[aria-pressed="true"] .hp__i-pause { display: none; }
.hp__pause[aria-pressed="true"] .hp__i-play { display: block; }

.hp__stage {
  --art: clamp(84px, min(8.4vw, 14vh), 132px);
  /* Hueco entre la cadena y las salidas. Lo usan también las líneas que lo
     cruzan (flecha de la última pieza, flecha de una sola salida). */
  --sal: clamp(36px, 3.4vw, 52px);
  padding: clamp(18px, 3.4vh, 34px) clamp(16px, 2vw, 28px);
  background-color: color-mix(in srgb, var(--bg) 35%, transparent);
  background-image:
    radial-gradient(55% 60% at 45% 45%, rgba(40, 170, 255, 0.1), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}
.hp__slide + .hp__slide { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
/* Con JS los cuatro estados comparten celda: la altura es la del mayor y no
   hay saltos al cambiar. */
.js .hp__stage { display: grid; }
.js .hp__slide { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; transition: opacity var(--t-panel) ease, visibility var(--t-panel); }
.js .hp__slide:not([data-active]) { opacity: 0; visibility: hidden; }
/* La celda mide lo que el estado más alto; los demás van centrados en ella. */
.js .hp__slide { display: grid; align-content: center; }

.hp__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  padding: 0 clamp(8px, 1.4vw, 18px);
}
html:not(.js) .hp__tabs { display: none; }
.hp__tab {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: clamp(56px, 8vh, 72px); padding: 8px 6px;
  border: 0; background: none;
  font-size: 1rem; color: var(--muted);
}
.hp__tab + .hp__tab::before {
  content: ""; position: absolute; left: 0; top: 30%; bottom: 30%;
  width: 1px; background: var(--border);
}
.hp__tab::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 0;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transition: transform var(--t-fast) var(--ease);
}
.hp__tab[aria-selected="true"] { color: var(--accent-text); }
.hp__tab[aria-selected="true"]::after { transform: scaleX(1); }
.hp__tab:hover { color: var(--text); }
.hp__tab-ico { width: 26px; height: 26px; }

/* ---- Piezas de las escenas -------------------------------------------------- */

.hp__art { display: grid; place-items: center; width: var(--art); height: var(--art); flex: none; }
.hp__art img { width: 100%; height: 100%; object-fit: contain; }
.hp__art--tile .tile { width: 72%; height: 72%; border-radius: 22%; }
.hp__art--tile .tile__ico { width: 44%; height: 44%; }
.hp__art--card { width: calc(var(--art) * 0.62); height: calc(var(--art) * 0.62); }
.hp__art--ctl { width: calc(var(--art) * 0.56); height: calc(var(--art) * 0.56); }
.hp__art--core { width: calc(var(--art) * 1.15); height: calc(var(--art) * 1.15); }
.hp__art--core .tile, .hp__art--card .tile, .hp__art--ctl .tile { width: 84%; height: 84%; }
.tile--xl .tile__ico { width: 46%; height: 46%; }

.hp__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
}
.hp__sub { display: block; margin-top: 6px; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
/* Rótulos de la cadena: «TRANSFORMACIÓN» y «ALMACENAMIENTO» son palabras
   largas que no se pueden partir. Por debajo de 1600 px se quedaban a 2 px
   una de otra (1366) o se montaban (1280): se aprieta el espaciado y, en
   pantallas estrechas, el cuerpo. Por debajo de 1180 px el hero se apila
   (ver «Hero en tableta») y el panel tiene todo el ancho. */
/* Entre 1181 y 1440 px, antes que apretar más la letra, la cadena gana ancho:
   menos relleno lateral del panel y menos hueco hasta las salidas (la llave
   sigue teniendo sus 24 px). */
@media (max-width: 1440px) { .hp__stage { --sal: 32px; padding-inline: clamp(14px, 1.3vw, 20px); } }
@media (max-width: 1600px) { .hp__node .hp__label { letter-spacing: 0.06em; } }
@media (max-width: 1440px) { .hp__node .hp__label { font-size: 0.8125rem; letter-spacing: 0.04em; } }
@media (max-width: 1300px) { .hp__node .hp__label { font-size: 0.75rem; letter-spacing: 0.02em; } }
/* Cada detalle en una línea: si «Modelos analíticos» parte en dos y
   «Analytical models» no, el panel mide distinto en cada idioma y salta al
   cambiar. Por debajo de 1200 px ya no cabe sin rozar la columna vecina. */
@media (min-width: 1200px) { .hp__node .hp__sub { white-space: nowrap; } }

/* Cadena: tres piezas y, a la derecha, las tarjetas de salida. */
.hp__scene--chain {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr);
  column-gap: var(--sal);
  align-items: center;
}
.hp__chain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(18px, 2vw, 30px); }
.hp__node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; min-width: 0; }
/* Flujo entre piezas: hilera de puntos que avanza, con punta. */
.hp__node::after,
.hp__scene--outs1 .hp__outs::before {
  content: "";
  position: absolute;
  top: calc(var(--art) / 2 - 1.5px);
  left: calc(50% + var(--art) / 2 - 4px);
  width: calc(100% - var(--art) + clamp(18px, 2vw, 30px) - 4px);
  height: 3px;
  background: radial-gradient(circle, rgba(79, 216, 236, 0.95) 1.3px, transparent 1.8px) 0 50% / 8px 3px repeat-x;
  filter: drop-shadow(0 0 3px rgba(54, 197, 218, 0.95));
  animation: flujo8 1s linear infinite;
}
.hp__node:last-child::after {
  /* De la última pieza a las salidas: el hueco entre columnas. */
  /* Termina justo en la llave (borde exterior a 24 px de las tarjetas); con
     -14 px la atravesaba. */
  width: calc(50% - var(--art) / 2 + var(--sal) - 19px);
}
.hp__scene--outs1 .hp__node:last-child::after { display: none; }
/* Con una sola salida, la tarjeta se centra en la fila de ilustraciones, no
   en la columna entera: centrada en la columna (ilustración + rótulo +
   detalle) quedaba más baja que las piezas y que su propia flecha. */
.hp__scene--outs1 .hp__outs { align-self: start; margin-top: calc(var(--art) / 2); transform: translateY(-50%); }
@keyframes flujo8 { to { background-position: 8px 50%; } }

.hp__outs { position: relative; display: grid; gap: clamp(12px, 2vh, 20px); }
.hp__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: clamp(10px, 1.6vh, 16px) 16px;
  border: 1px solid rgba(79, 216, 236, 0.32);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(40, 170, 255, 0.1), rgba(10, 18, 26, 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hp__card .hp__label { font-size: 0.8125rem; }
.hp__card .hp__sub { margin-top: 4px; font-size: 0.8rem; line-height: 1.45; }
/* Dos salidas: la rama se abre en una llave que llega a cada tarjeta. Como
   en el boceto, las dos tarjetas se centran en la fila de ilustraciones, así
   la flecha entra por el centro de la llave. Para centrarlas hay que conocer
   su alto: cada tarjeta mide lo mismo (--card-h, lo que ocupa su texto o un
   90 % de la ilustración) y la escena reserva arriba lo que sobresalen. */
.hp__scene--outs2 {
  --card-h: max(100px, calc(var(--art) * 0.9));
  --outs-gap: clamp(12px, 2vh, 20px);
  --outs-h: calc(2 * var(--card-h) + var(--outs-gap));
  align-items: start;
  padding-top: max(0px, calc(var(--outs-h) / 2 - var(--art) / 2));
}
.hp__scene--outs2 .hp__outs { gap: var(--outs-gap); margin-top: calc(var(--art) / 2 - var(--outs-h) / 2); }
.hp__scene--outs2 .hp__card { min-height: var(--card-h); }
/* La llave se dibuja en dos mitades, una por tarjeta: cada una sale del
   CENTRO de su tarjeta (donde apunta su flecha) y llegan al centro del hueco,
   donde entra la línea. Así los extremos coinciden siempre con las flechas,
   midan lo que midan las tarjetas y el hueco. */
.hp__scene--outs2 .hp__card::after {
  content: "";
  position: absolute;
  left: -24px;
  width: 16px;
  border: 2px solid rgb(79, 216, 236);
  border-right: 0;
  filter: drop-shadow(0 0 4px rgba(54, 197, 218, 0.9));
  pointer-events: none;
}
.hp__scene--outs2 .hp__card:first-child::after {
  top: calc(50% - 1px);
  bottom: calc(-1 * var(--outs-gap) / 2 - 1px);
  border-bottom: 0;
  border-radius: 16px 0 0 0;
}
.hp__scene--outs2 .hp__card:last-child::after {
  top: calc(-1 * var(--outs-gap) / 2 - 1px);
  bottom: calc(50% - 1px);
  border-top: 0;
  border-radius: 0 0 0 16px;
}
.hp__scene--outs2 .hp__card::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: -9px;
  border: 5px solid transparent;
  border-left: 7px solid rgb(79, 216, 236);
  border-right: 0;
  filter: drop-shadow(0 0 3px rgba(54, 197, 218, 0.9));
}
.hp__scene--outs1 .hp__outs::before {
  top: 50%;
  left: calc(-1 * var(--sal) + 4px);
  width: calc(var(--sal) - 12px);
}
.hp__scene--outs1 .hp__outs::after {
  content: "";
  position: absolute;
  top: calc(50% - 3.5px);
  left: -10px;
  border: 5px solid transparent;
  border-left: 7px solid rgb(79, 216, 236);
  border-right: 0;
}
.hp__card--solo { border-color: rgba(245, 138, 82, 0.45); background: linear-gradient(160deg, rgba(245, 138, 82, 0.1), rgba(10, 18, 26, 0.6)); }

/* Núcleo: el objeto en el centro y cuatro controles asociados, sin flechas. */
.hp__scene--hub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(36px, 4vw, 64px);
  row-gap: clamp(14px, 2.4vh, 24px);
  align-items: center;
}
.hp__core { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; }
.hp__ring { display: contents; }
.hp__ctl {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: clamp(8px, 1.4vh, 14px) 14px;
  border: 1px solid rgba(79, 216, 236, 0.28);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(40, 170, 255, 0.08), rgba(10, 18, 26, 0.55));
}
.hp__ctl--1 { grid-column: 1; grid-row: 1; }
.hp__ctl--2 { grid-column: 3; grid-row: 1; }
.hp__ctl--3 { grid-column: 1; grid-row: 2; }
.hp__ctl--4 { grid-column: 3; grid-row: 2; }
.hp__ctl::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(36px, 4vw, 64px);
  border-top: 1.5px dashed rgba(79, 216, 236, 0.75);
}
.hp__ctl--1::after, .hp__ctl--3::after { left: 100%; }
.hp__ctl--2::after, .hp__ctl--4::after { right: 100%; }
.hp__ctl .hp__label { font-size: 0.8125rem; }
.hp__ctl .hp__sub { margin-top: 4px; font-size: 0.8rem; }

/* Tarjetas de salida y controles: el texto no puede salirse de la tarjeta.
   La columna de salidas mide 150-205 px y la cadena no puede ceder ancho (sus
   rótulos ya van al límite), así que se recorta lo que no es texto: relleno,
   hueco y el icono, que baja de tamaño sin deformarse. «OPERATIONS» pide unos
   90 px de caja; con el icono al 62 % había 47-80 px según el ancho. La llave y
   las flechas se apoyan en el borde de la tarjeta, no en su interior. */
.hp__card, .hp__ctl { padding-inline: 14px; gap: 12px; }
.hp__card .hp__label, .hp__ctl .hp__label { letter-spacing: 0.06em; }
.hp__card .hp__art--card { width: calc(var(--art) * 0.54); height: calc(var(--art) * 0.54); }
.hp__ctl .hp__art--ctl { width: calc(var(--art) * 0.5); height: calc(var(--art) * 0.5); }
@media (max-width: 1600px) {
  .hp__card, .hp__ctl { padding-inline: 12px; gap: 10px; }
  .hp__card .hp__art--card { width: calc(var(--art) * 0.5); height: calc(var(--art) * 0.5); }
  .hp__ctl .hp__art--ctl { width: calc(var(--art) * 0.46); height: calc(var(--art) * 0.46); }
}
@media (max-width: 1300px) {
  .hp__card, .hp__ctl { padding-inline: 10px; gap: 8px; }
  .hp__card .hp__label, .hp__ctl .hp__label { font-size: 0.75rem; letter-spacing: 0.02em; }
  .hp__card .hp__sub, .hp__ctl .hp__sub { font-size: 0.75rem; }
}

:root:not([data-theme="dark"]) .hp__card,
:root:not([data-theme="dark"]) .hp__ctl { background: rgba(255, 255, 255, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .hp__node::after, .hp__scene--outs1 .hp__outs::before { animation: none; }
}

/* ---- Loseta de vidrio ---------------------------------------------------
   La pieza visual común del rediseño: vidrio ahumado con canto luminoso y un
   icono con halo. Se usa en el panel del hero, la demo, el panel Explorar y la
   trayectoria. Es CSS puro: sin imágenes, se traduce y escala sin perder
   nitidez. */

.tile {
  --tile: 54, 197, 218;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: none;
  border: 1px solid rgba(var(--tile), 0.55);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(var(--tile), 0.34), transparent 60%),
    linear-gradient(160deg, rgba(var(--tile), 0.16), rgba(8, 22, 34, 0.55) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -10px 18px -12px rgba(var(--tile), 0.5),
    0 12px 30px -14px rgba(var(--tile), 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.25);
}
.tile::after {
  /* Reflejo del canto superior: el brillo que da volumen al vidrio. */
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 45%;
  border-radius: 15px 15px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}
.tile__ico {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  color: rgb(140, 232, 244);
  stroke-width: 1.7;
  filter: drop-shadow(0 0 5px rgba(var(--tile), 0.9));
}
.tile--accent { --tile: 245, 138, 82; }
.tile--accent .tile__ico { color: #FFC29E; }
.tile--lg { width: 84px; height: 84px; border-radius: 20px; }
.tile--lg .tile__ico { width: 40px; height: 40px; }
.tile--sm { width: 44px; height: 44px; border-radius: 12px; }
.tile--sm .tile__ico { width: 22px; height: 22px; }
:root:not([data-theme="dark"]) .tile {
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(var(--tile), 0.22), transparent 60%),
    linear-gradient(160deg, rgba(var(--tile), 0.12), rgba(255, 255, 255, 0.7) 70%);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(var(--tile), 0.7);
}
:root:not([data-theme="dark"]) .tile__ico { color: rgb(17, 96, 113); filter: none; }
:root:not([data-theme="dark"]) .tile--accent .tile__ico { color: #943C15; }

/* =========================================================================
   TrustedLineage (bocetos/03-trustedlineage.png)
   ========================================================================= */

/* Al llegar por el ancla, título, demo y llamada a la acción caben en una
   pantalla de portátil: menos aire arriba y el título escala con el alto. */
.tl {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 55%, var(--bg)) 0%, var(--bg) 70%);
}
.tl__head { max-width: 900px; }
.tl__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, min(6vw, 9vh), 5.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.tl__subtitle { margin-top: 8px; font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); line-height: 1.25; color: var(--muted); font-family: var(--font-display); font-weight: 400; }

/* Explorador ~75 % y texto ~25 %, separados por una línea, como el boceto. */
.tl__grid {
  display: grid;
  grid-template-columns: minmax(0, 72fr) minmax(0, 28fr);
  gap: clamp(1.5rem, 2.6vw, 2.75rem);
  /* El explorador va arriba y solo el texto se centra: centrados los dos, el
     explorador bajaba unos píxeles en español, cuyo texto es más largo. */
  align-items: start;
  margin-top: clamp(1.25rem, 3vh, 2.25rem);
}

.tl__aside {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  align-self: center;
  padding: 8px 0 8px clamp(20px, 2.2vw, 36px);
  border-left: 1px solid var(--border);
}
.tl__headline { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.1vw, 2.35rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.tl__body { color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.tl__cta { width: 100%; justify-content: center; margin-top: 6px; }
.tl__visit { font-size: 1.0625rem; }
/* Captura real: el boceto no la dibuja, pero el encargo pide conservarla.
   Va al pie, como enlace secundario. Las condiciones del producto se quitaron:
   su enlace repetía «Visitar TrustedLineage» (la misma dirección). */
.tl__more { display: grid; gap: 8px; width: 100%; padding-top: 14px; border-top: 1px solid var(--border); }
.tl__shot {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; min-height: 32px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text); font-size: 0.925rem; font-weight: 500; text-decoration: none;
}
.tl__shot:hover { border-bottom-color: currentColor; }
.tl__shot-ico { width: 18px; height: 18px; color: var(--link); }

/* ---- Explorador ---------------------------------------------------------- */

.tlx { position: relative; overflow: hidden; }
.tlx__bar {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  padding: 0 clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--border);
}
.tlx__glyph { width: 22px; height: 22px; color: var(--link); }
.tlx__tabs { display: flex; gap: 4px; }
/* Separador entre el icono y las pestañas, como en el boceto. */
.tlx__glyph + .tlx__tabs { padding-left: 12px; border-left: 1px solid var(--border); }
.tlx__tab {
  position: relative;
  min-height: 54px; padding: 0 18px;
  border: 0; background: none;
  color: var(--muted); font-size: 1rem; font-weight: 500;
}
.tlx__tab::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--line);
  box-shadow: 0 0 10px var(--line);
  transform: scaleX(0); transition: transform var(--t-fast) var(--ease);
}
.tlx__tab[aria-selected="true"] { color: var(--text); }
.tlx__tab[aria-selected="true"]::after { transform: scaleX(1); }
.tlx__tab:hover { color: var(--text); }
.tlx__badge {
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Grafo y detalle: lado a lado a partir de 1320 px, como en el boceto; por
   debajo el detalle baja para no estrechar los nodos. */
.tlx__body { margin: 16px clamp(16px, 2vw, 20px) 0; }
@media (min-width: 1320px) {
  .tlx__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.36fr);
    gap: 16px;
    align-items: stretch;
  }
}

.tlx__graph {
  position: relative;
  display: grid;
  /* La columna de «normalizar_pedidos», el identificador más largo, es algo
     más ancha: con cuatro iguales era el único que se partía a 1536 px. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 1.9vw, 36px);
  row-gap: clamp(28px, 4.6vh, 52px);
  align-items: center;
  padding: 46px clamp(12px, 1.4vw, 18px) 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Retícula muy tenue: da plano de trabajo, no se lee como una gráfica. */
  background-color: color-mix(in srgb, var(--bg) 55%, transparent);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* La pregunta de cada vista, como rótulo del plano en vez de fila propia. */
.tlx__prompt {
  position: absolute; top: 16px; left: 18px; right: 18px; z-index: 1;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.tlx__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; filter: drop-shadow(0 0 3px rgba(54, 197, 218, 0.55)); }
:root:not([data-theme="dark"]) .tlx__edges { filter: none; }
.tlx__edge { fill: none; stroke: var(--line-soft); stroke-width: 1.5; transition: stroke var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.tlx__edge--inferred { stroke-dasharray: 5 5; }
.tlx__edge.is-on { stroke: var(--line); stroke-width: 2; }
.tlx__edge.is-dim { opacity: 0.5; }
.tlx__arrow { fill: var(--line-soft); }
.tlx__arrow--on { fill: var(--line); }

/* Icono ENCIMA del texto: el identificador usa todo el ancho del nodo y solo
   se corta por el guion bajo (<wbr>), nunca a mitad de palabra. */
.tlx__node {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "ico" "id" "desc";
  row-gap: 4px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(40, 170, 255, 0.07), var(--surface) 55%);
  text-align: left;
  transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
:root:not([data-theme="dark"]) .tlx__node { background: var(--surface); }
.tlx__node-tile { grid-area: ico; width: 36px; height: 36px; border-radius: 10px; margin-bottom: 4px; }
.tlx__node-tile .tile__ico { width: 18px; height: 18px; }
.tlx__node[aria-pressed="true"] .tlx__node-tile { --tile: 245, 138, 82; }
.tlx__node[aria-pressed="true"] .tlx__node-tile .tile__ico { color: #FFC29E; }
:root:not([data-theme="dark"]) .tlx__node[aria-pressed="true"] .tlx__node-tile .tile__ico { color: #943C15; }
.tlx__node-id { grid-area: id; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.tlx__node-desc { grid-area: desc; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.tlx__node:hover { border-color: var(--line); }
.tlx__node[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 32px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tlx__node.is-related { border-color: var(--line); box-shadow: 0 0 18px -8px var(--line); }
/* Atenuado, no apagado: el resto del recorrido sigue leyéndose. */
.tlx__node.is-dim { opacity: 0.62; }

.tlx__node[data-node="pedidos_raw"] { grid-column: 1; grid-row: 1 / span 2; }
.tlx__node[data-node="normalizar_pedidos"] { grid-column: 2; grid-row: 1 / span 2; }
.tlx__node[data-node="pedidos_curados"] { grid-column: 3; grid-row: 1 / span 2; }
.tlx__node[data-node="ventas_diarias"] { grid-column: 4; grid-row: 1; }
.tlx__node[data-node="informe_ventas"] { grid-column: 4; grid-row: 2; }

/* Resumen textual de las relaciones: se ve sin JS (no hay líneas) y queda para
   lectores de pantalla con JS. */
.tlx__summary { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }
.js .tlx__summary {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Detalle ------------------------------------------------------------- */

.tlx__detail {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
/* Lado a lado, el detalle no marca el alto: mide lo que el grafo (que tiene
   sitio para el detalle de Dependencias) y, si la evidencia no cabe, se
   desplaza por dentro. Sin esto el explorador crecía 180 px al pasar a
   Evidencia y la sección saltaba. */
@media (min-width: 1320px) {
  .tlx__body .tlx__graph { min-height: 392px; }
  .tlx__body .tlx__detail { margin-top: 0; height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
}
.tile--xs { width: 36px; height: 36px; flex: none; border-radius: 10px; }
.tile--xs .tile__ico { width: 18px; height: 18px; }
.tlx__d-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.tlx__d-tile { --tile: 245, 138, 82; width: 42px; height: 42px; }
.tlx__d-tile .tile__ico { width: 22px; height: 22px; color: #FFC29E; }
:root:not([data-theme="dark"]) .tlx__d-tile .tile__ico { color: #943C15; }
.tlx__d-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.tlx__d-desc { margin-top: 2px; color: var(--muted); font-size: 0.85rem; }
.tlx__d-sec { padding: 10px 14px 12px; }
.tlx__d-sec + .tlx__d-sec { border-top: 1px solid var(--border); }
.tlx__d-head { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tlx__d-list { display: grid; gap: 8px; margin-top: 8px; }
.tlx__d-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 46px; padding: 5px 10px 5px 6px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--text); text-align: left;
  transition: border-color var(--t-fast) var(--ease);
}
.tlx__d-sec > .tlx__d-item { margin-top: 8px; }
button.tlx__d-item:hover { border-color: var(--line); }
.tlx__d-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tlx__d-id { font-size: 0.875rem; font-weight: 600; overflow-wrap: break-word; }
.tlx__d-sub { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
/* En las filas, la descripción en dos líneas como mucho: completa ya está
   en el nodo. */
.tlx__d-item .tlx__d-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tlx__d-chev { width: 16px; height: 16px; flex: none; color: var(--muted); }
button.tlx__d-item:hover .tlx__d-chev { color: var(--text); }
.tlx__d-rel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tlx__d-rel button {
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: none;
  font-family: var(--font-mono); font-size: 0.8rem;
}
.tlx__d-rel button[aria-pressed="true"] { border-color: var(--line); color: var(--link); }
.tlx__d-empty { margin-top: 10px; color: var(--muted); font-size: 0.9rem; }
.tlx__status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.85rem; color: var(--link);
}
.tlx__status .ico { width: 16px; height: 16px; }
.tlx__status--inferred { border-color: var(--accent); border-style: dashed; color: var(--accent-text); }
.tlx__file { margin-top: 14px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.tlx__code {
  margin-top: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre;
}
.tlx__infer-note { margin-top: 10px; font-size: 0.925rem; }
.tlx__review { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }

/* ---- Pie: ventajas con separadores y aviso de ejemplo --------------------- */

.tlx__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 16px;
  padding: 12px clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--border);
  /* En una línea en los dos idiomas: en dos, el explorador medía 35 px más en
     español y la sección saltaba al cambiar de idioma. */
  font-size: 0.8125rem;
  color: var(--muted);
}
.tlx__benefits { display: flex; flex-wrap: wrap; gap: 8px 0; }
.tlx__benefits li { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--text); }
.tlx__benefits li:first-child { padding-left: 0; }
.tlx__benefits li + li { border-left: 1px solid var(--border); }
.tlx__b-ico { width: 18px; height: 18px; color: var(--link); }
.tlx__note { display: inline-flex; align-items: center; gap: 8px; }
.tlx__note-ico { width: 18px; height: 18px; }
/* Por debajo de 1480 px las ventajas y el aviso no caben juntos en español
   (sí en inglés): el aviso baja de línea en los dos, para que midan igual. */
@media (max-width: 1479px) { .tlx__note { flex-basis: 100%; } }
@media (max-width: 640px) {
  .tlx__benefits { flex-direction: column; gap: 8px; }
  .tlx__benefits li, .tlx__benefits li + li { padding: 0; border: 0; }
}

/* ---- Captura real ------------------------------------------------------- */

.shot {
  width: min(1200px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: clamp(12px, 2vw, 20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
}
.shot::backdrop { background: rgba(6, 8, 11, 0.72); }
.shot__fig img { width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; }
.shot__fig figcaption { margin-top: 12px; font-size: 0.925rem; color: var(--muted); }
.shot__close {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: none; font-weight: 500;
}
.shot__close .ico { width: 18px; height: 18px; }

/* =========================================================================
   Especialización (gris mineral)
   ========================================================================= */

/* El bloque mineral es claro en los dos temas: redefine sus propios tokens y
   todo lo de dentro los hereda. */
.spec {
  --text: #10171E;
  --muted: #4C5966;
  --border: rgba(16, 23, 30, 0.18);
  --border-strong: rgba(16, 23, 30, 0.3);
  --link: #116071;
  --accent-text: #943C15;
  --focus: #116071;
  --line: #116071;
  background-color: #E5E6E4;
  background-image:
    linear-gradient(rgba(16, 23, 30, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 23, 30, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  color: var(--text);
  color-scheme: light;
}
:root:not([data-theme="dark"]) .spec { border-block: 1px solid rgba(16, 23, 30, 0.1); }

.spec__grid {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: clamp(2rem, 3vw, 3.5rem);
  /* Arriba y no centrado: al abrir un área la columna crece y, centrada, la
     ilustración bajaría a cada clic. */
  align-items: start;
}
.spec__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, min(3.9vw, 7.8vh), 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.spec__title-l { display: block; }
.spec__intro { margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.3rem); line-height: 1.45; }

/* Lista: línea vertical a la izquierda (naranja en el área abierta) y
   separadores que empiezan donde empieza el texto, como en el boceto. */
.spec__areas { margin-top: clamp(24px, 4vh, 40px); border-left: 1px solid var(--border-strong); }
.spec__area { position: relative; }
.spec__area + .spec__area::after {
  content: ""; position: absolute; top: 0; left: 30px; right: 0;
  height: 1px; background: var(--border);
}
.spec__area::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; z-index: 1;
  width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-panel) var(--ease);
}
.spec__area.is-open::before { transform: scaleY(1); }
/* Al pasar por un área cerrada (o llegar con el teclado), la línea se ilumina
   en azul: se ve en qué área estás antes de abrirla. La abierta sigue naranja. */
.spec__area:not(.is-open):hover::before,
.spec__area:not(.is-open):has(.spec__btn:focus-visible)::before { transform: scaleY(1); background: #1F9FBF; }
.spec__h { font: inherit; }
.spec__btn {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  grid-template-areas: "dot label chev" ". short short";
  align-items: center;
  column-gap: 22px;
  width: 100%;
  min-height: 68px;
  padding: 14px 4px 14px 30px;
  border: 0;
  background: none;
  text-align: left;
}
.spec__dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transition: background var(--t-fast) var(--ease); }
.spec__label {
  grid-area: label;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.spec__short { grid-area: short; margin-top: 6px; color: var(--muted); font-size: 1.0625rem; line-height: 1.45; }
.spec__chev { grid-area: chev; width: 20px; height: 20px; color: var(--muted); transition: transform var(--t-fast) var(--ease); }
.spec__btn[aria-expanded="true"] .spec__label { color: var(--text); font-weight: 600; }
.spec__btn[aria-expanded="true"] .spec__dot { background: var(--accent); }
.spec__btn[aria-expanded="true"] .spec__chev { transform: rotate(180deg); }
.js .spec__btn[aria-expanded="false"] .spec__short { display: none; }
.spec__btn:hover .spec__label { color: var(--text); }
.spec__btn:hover .spec__dot { background: var(--text); }

.spec__panel { padding: 4px 4px 26px 60px; }
.js .spec__panel[data-closed] { display: none; }
.spec__dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.spec__dl dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); }
.spec__dl dd { margin-top: 6px; font-size: 0.95rem; line-height: 1.55; }
/* «Qué recibes»: icono, línea y texto, en una tarjeta clara como el boceto. */
.spec__deliv {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 20px;
  margin-top: 20px; padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 30px -22px rgba(16, 23, 30, 0.45);
}
.spec__deliv-ico { width: 30px; height: 30px; color: var(--text); }
.spec__deliv p { padding-left: 20px; border-left: 1px solid var(--border); font-size: 1rem; }
.spec__deliv-label { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.spec__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px; min-height: 40px;
  border-bottom: 1px solid currentColor;
  color: var(--text); font-weight: 500; text-decoration: none;
}
.spec__cta-ico { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.spec__cta:hover .spec__cta-ico { transform: translateX(3px); }

/* La ilustración acompaña al leer un área abierta. */
.spec__fig { position: sticky; top: calc(var(--header-h) + 24px); }
.spec__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.spec__marks { position: absolute; inset: 0; pointer-events: none; }
.spec__mark {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.spec__mark::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px rgba(245, 138, 82, 0.28);
}
.spec__mark span {
  padding: 5px 10px;
  border-radius: 999px;
  background: #10171E;
  color: #F1F3F5;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
/* Anclas sobre la zona izquierda de cada capa: lejos de las placas de la
   derecha, que son parte de la ilustración y no se tapan. */
.spec__mark--l0 { left: 20%; top: 18%; }
.spec__mark--l1 { left: 14%; top: 44%; }
.spec__mark--l2 { left: 10%; top: 66%; }
.spec__fig[data-focus="governance"] [data-mark-area="governance"],
.spec__fig[data-focus="ai"] [data-mark-area="ai"],
.spec__fig[data-focus="operations"] [data-mark-area="operations"] { opacity: 1; transform: none; }
/* Arquitectura enseña el conjunto: la ilustración entera, sin marcadores. */

/* =========================================================================
   Método
   ========================================================================= */

/* Las más densas, con algo menos de aire, para caber en 1536x864. */
main > section.mth, main > section.tl, main > section.trj, main > section.ct { --sec-pad: clamp(1.25rem, 3.4vh, 3.5rem); }
/* Como el boceto, las láminas empiezan a la altura del título: la columna
   derecha ocupa cabecera y pasos. .mth__grid se disuelve en la rejilla. */
.mth > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  grid-template-areas: "head side" "main side";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 4vw, 4rem);
}
.mth__head { grid-area: head; }
.mth__grid { display: contents; }
.mth__main { grid-area: main; margin-top: clamp(20px, 3vh, 36px); }
.mth__side { grid-area: side; }
.mth__heading {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, min(3.9vw, 7.8vh), 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.mth__heading-l { display: block; }
.mth__intro { margin-top: 14px; color: var(--muted); font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.3rem); line-height: 1.45; }


/* Pasos: círculos unidos por una línea que se desvanece en los extremos; el
   tramo hasta el paso elegido va en naranja. */
.mth__tabs {
  --paso: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 720px;
}
.mth__tabs[data-step-active="1"] { --paso: 1; }
.mth__tabs[data-step-active="2"] { --paso: 2; }
.mth__tabs[data-step-active="3"] { --paso: 3; }
.mth__tabs::before,
.mth__tabs::after { content: ""; position: absolute; top: 26px; height: 1px; pointer-events: none; }
.mth__tabs::before {
  left: -4%; right: -4%;
  background: linear-gradient(90deg, transparent, var(--border-strong) 8%, var(--border-strong) 92%, transparent);
}
.mth__tabs::after {
  left: 12.5%; width: calc(var(--paso) * 25%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: width var(--t-panel) var(--ease);
}
.mth__tab {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 4px 4px;
  border: 0; background: none; color: var(--text);
}
.mth__num {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--bg);
  font-size: 1.05rem; font-weight: 500;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mth__tab-label { font-size: 1.0625rem; font-weight: 500; }
.mth__tab[aria-selected="true"] { color: var(--accent-text); }
.mth__tab[aria-selected="true"] .mth__tab-label { font-weight: 600; }
.mth__tab[aria-selected="true"] .mth__num {
  border-color: var(--accent); color: var(--accent-text);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 22px -4px color-mix(in srgb, var(--accent) 80%, transparent);
}
.mth__tab:hover .mth__num { border-color: var(--text); }

.mth__panel { margin-top: clamp(20px, 3.4vh, 36px); }
.mth__panel + .mth__panel { border-top: 1px solid var(--border); padding-top: 24px; }
.js .mth__panel + .mth__panel { border-top: 0; padding-top: 0; }
/* Con JS los cuatro paneles comparten celda: la sección mide lo que el más
   alto y no salta al cambiar de paso. Los ocultos van con visibility, que
   también los saca del árbol de accesibilidad. */
.js .mth__main { display: grid; grid-template-rows: auto auto; }
.js .mth__panel { grid-row: 2; grid-column: 1; }
.js .mth__panel:not([data-active]) { visibility: hidden; }
.mth__title {
  max-width: 13ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, min(3.8vw, 6.4vh), 3.6rem); line-height: 1.02; letter-spacing: -0.04em;
  text-wrap: balance;
}
.mth__title::before { content: ""; display: block; width: 56px; height: 3px; margin-bottom: clamp(14px, 2.2vh, 24px); background: var(--accent); }
.mth__body { margin-top: 14px; max-width: 36ch; color: var(--muted); font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.45; }
.mth__deliv { display: flex; align-items: flex-start; gap: 22px; margin-top: clamp(18px, 2.6vh, 28px); }
.mth__deliv-ico { width: 34px; height: 34px; flex: none; color: var(--muted); }
.mth__deliv p { padding-left: 22px; border-left: 1px solid var(--border-strong); font-size: 1.125rem; line-height: 1.45; }
.mth__deliv-label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); }

/* Pantallas bajas (portátiles de 768 px o menos de alto): títulos y pasos
   algo más pequeños para que entregable y enlace sigan a la vista. */
@media (min-width: 901px) and (max-height: 820px) {
  .mth__heading { font-size: clamp(2.1rem, min(3.9vw, 6.6vh), 3.8rem); }
  .mth__intro { margin-top: 10px; font-size: 1.0625rem; }
  .mth__num { width: 44px; height: 44px; font-size: 0.95rem; }
  .mth__tabs::before, .mth__tabs::after { top: 22px; }
  .mth__tab-label { font-size: 1rem; }
  .mth__title { font-size: clamp(1.9rem, min(3.8vw, 5.6vh), 3.6rem); }
  .mth__body { font-size: 1.0625rem; }
  .mth__deliv p { font-size: 1rem; }
}

/* ---- Documentos de vidrio y enlace --------------------------------------- */

.mth__side { position: relative; display: flex; flex-direction: column; }
.mth__cta {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 12px; min-height: 44px;
  border-bottom: 1px solid var(--accent);
  color: var(--text); font-size: 1.0625rem; font-weight: 500; text-decoration: none;
}
.mth__cta-ico { width: 18px; height: 18px; color: var(--accent); transition: transform var(--t-fast) var(--ease); }
.mth__cta:hover .mth__cta-ico { transform: translateX(3px); }

/* Tres láminas apiladas en perspectiva. Decorativo. */
.mth__docs { position: relative; flex: 1; min-height: clamp(420px, 60vh, 620px); perspective: 1600px; }
.mth__docset { position: absolute; inset: 0; transition: opacity var(--t-panel) ease, visibility var(--t-panel); }
.mth__docset:not([data-active]) { opacity: 0; visibility: hidden; }
html:not(.js) .mth__docset:not([data-active]) { display: none; }
.mth__doc {
  position: absolute;
  width: 78%; height: 44%;
  padding: 22px 28px;
  border: 1px solid rgba(79, 216, 236, 0.55);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 80% at 20% 0%, rgba(54, 197, 218, 0.2), transparent 60%),
    linear-gradient(160deg, rgba(34, 60, 78, 0.78), rgba(12, 20, 28, 0.88));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 30px -6px rgba(54, 197, 218, 0.5),
    0 40px 60px -30px rgba(0, 0, 0, 0.8);
  color: #F1F3F5;
  transform: rotateX(54deg) rotateZ(-33deg);
  transform-style: preserve-3d;
}
.mth__doc--1 { top: 2%; left: 20%; }
.mth__doc--2 { top: 28%; left: 10%; }
.mth__doc--3 { top: 54%; left: 0; }
/* Esquina doblada en la lámina de arriba. */
.mth__doc--1::after {
  content: ""; position: absolute; top: -1px; right: -1px;
  width: 38px; height: 38px;
  border-bottom-left-radius: 6px;
  background: linear-gradient(225deg, var(--bg) 50%, rgba(79, 216, 236, 0.35) 50%);
}
.mth__doc-title { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.mth__doc-title::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 10px; background: var(--accent); }
.mth__doc-body {
  position: absolute; left: 28px; right: 28px; top: 78px; bottom: 22px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: center;
}
/* Tres piezas unidas por una línea discontinua; la del medio, en naranja. */
.mth__doc-fig { position: relative; display: flex; align-items: center; justify-content: space-between; }
.mth__doc-fig::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 50%;
  border-top: 1px dashed rgba(79, 216, 236, 0.6);
}
.mth__piece {
  position: relative;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border: 1px solid rgba(79, 216, 236, 0.6);
  border-radius: 12px;
  background: rgba(10, 30, 44, 0.85);
  box-shadow: 0 0 16px -4px rgba(54, 197, 218, 0.6);
}
.mth__piece:nth-child(2) { border-color: rgba(245, 138, 82, 0.75); box-shadow: 0 0 16px -4px rgba(245, 138, 82, 0.7); }
.mth__piece-ico { width: 28px; height: 28px; color: rgb(140, 232, 244); filter: drop-shadow(0 0 5px rgba(54, 197, 218, 0.9)); }
.mth__piece:nth-child(2) .mth__piece-ico { color: #FFC29E; filter: drop-shadow(0 0 5px rgba(245, 138, 82, 0.9)); }
.mth__doc-lines {
  align-self: stretch;
  /* Renglones: cada uno con un trazo cian corto al principio y el resto gris. */
  background:
    repeating-linear-gradient(180deg, rgba(79, 216, 236, 0.65) 0 2px, transparent 2px 16px) 0 0 / 18% 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(241, 243, 245, 0.2) 0 2px, transparent 2px 16px) 26% 0 / 74% 100% no-repeat;
  border-radius: 2px;
}

/* =========================================================================
   Experiencia
   ========================================================================= */

.trj { position: relative; isolation: isolate; overflow: clip; border-top: 1px solid var(--border); }
.trj > .wrap { position: relative; z-index: 1; }
.trj__heading {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  /* «Criterio construido» va en una línea: con 3.9vw / 3.8rem medía 21-25 px
     más que su columna y se metía en el hueco de la tarjeta. */
  font-size: clamp(2.2rem, min(3.6vw, 7vh), 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
/* Cada mitad en una línea. La primera puede pasar por encima de la columna
   de la tarjeta: la tarjeta empieza más abajo, como en el boceto. */
.trj__heading-l { display: block; white-space: nowrap; }
.trj__intro { margin-top: 16px; max-width: 44ch; color: var(--muted); font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.3rem); line-height: 1.45; }

/* Texto y línea de ámbitos a la izquierda (~35 %); tarjeta a la derecha,
   alineada abajo con la línea. */
.trj__grid {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  gap: clamp(2rem, 3.4vw, 3.5rem);
  align-items: end;
}

/* Línea de ámbitos: un trazo vertical que pasa por los nodos; en el ámbito
   elegido el tramo va en naranja y el nodo se enciende. */
.trj__tabs { position: relative; margin-top: clamp(24px, 4vh, 40px); }
.trj__tabs::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.trj__tab {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas: "node label" ". sum";
  column-gap: 28px;
  align-items: center;
  width: 100%;
  padding: clamp(12px, 2vh, 20px) 0;
  border: 0; background: none; text-align: left;
}
.trj__tab::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0;
  width: 3px; border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: scaleY(0);
  transition: transform var(--t-panel) var(--ease);
}
.trj__tab[aria-selected="true"]::before { transform: scaleY(1); }
.trj__node {
  position: relative; z-index: 1;
  grid-area: node;
  width: 28px; height: 28px;
  border: 1.5px solid var(--border-strong); border-radius: 50%;
  background: var(--bg);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.trj__tab-label { grid-area: label; font-size: clamp(1.125rem, 0.95rem + 0.4vw, 1.3rem); font-weight: 500; }
.trj__tab-sum { grid-area: sum; margin-top: 4px; color: var(--muted); font-size: 1rem; }
.trj__tab[aria-selected="true"] .trj__tab-label { color: var(--accent-text); font-weight: 600; }
.trj__tab[aria-selected="true"] .trj__node {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 6px, var(--bg) 7px);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 18px -2px color-mix(in srgb, var(--accent) 80%, transparent);
}
.trj__tab:hover .trj__node { border-color: var(--text); }
.trj__tab:hover .trj__tab-label { color: var(--text); }
.trj__tab[aria-selected="true"]:hover .trj__tab-label { color: var(--accent-text); }

/* ---- Tarjeta del ámbito --------------------------------------------------- */

.trj__card { padding: clamp(26px, 3.6vh, 44px) clamp(24px, 2vw, 40px); }
.trj__panel {
  display: grid;
  /* Texto e ilustración casi a partes iguales: con la ilustración al 64 % la
     columna de texto se quedaba en 204-227 px y cada fila iba a tres o cuatro
     líneas. La ilustración no baja de ~350 px, donde sus rótulos se leen. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas: "title title" "sum sum" "dl art";
  column-gap: clamp(16px, 1.6vw, 28px);
  align-items: center;
  /* Los tres ámbitos comparten celda (la tarjeta no cambia de alto). Título y
     resumen quedan fijos arriba; lo que le sobra al ámbito más corto va a la
     fila de abajo, donde las tres filas se reparten el alto y la ilustración
     se centra, en vez de dejar un hueco al pie. */
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
}
.trj__panel .trj__dl { align-self: stretch; align-content: space-evenly; }
.trj__panel .trj__art { align-self: center; }
/* Las filas ceden su icono antes que el texto su anchura: con el icono de
   56 px y 20 px de hueco se iban 76 px de cada línea. */
.trj__row { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
.trj__row-ico { padding: 11px; }
@media (max-width: 1500px) { .trj__row dd { font-size: 1rem; } }
/* Título y resumen a todo el ancho; debajo, filas a la izquierda y la
   ilustración, grande, a la derecha (sus rótulos tienen que leerse). */
.trj__panel-copy { display: contents; }
.trj__title { grid-area: title; }
.trj__sum { grid-area: sum; }
.trj__dl { grid-area: dl; }
.trj__art { grid-area: art; }
.trj__panel + .trj__panel { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); }
.js .trj__panel + .trj__panel { margin-top: 0; padding-top: 0; border-top: 0; }
/* Con JS los tres ámbitos comparten celda: la tarjeta no cambia de alto. */
.js .trj__card { display: grid; }
.js .trj__panel { grid-area: 1 / 1; }
.js .trj__panel:not([data-active]) { visibility: hidden; }
.trj__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, min(2.4vw, 5vh), 2.5rem); line-height: 1.05; letter-spacing: -0.03em;
  text-wrap: balance;
}
.trj__title::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: clamp(16px, 2.6vh, 24px); background: var(--accent); }
.trj__sum { margin-top: 12px; color: var(--muted); font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.25rem); line-height: 1.4; }
.trj__dl { display: grid; gap: clamp(14px, 2.4vh, 24px); margin-top: clamp(20px, 3.4vh, 32px); }
.trj__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "ico dt" "ico dd"; column-gap: 20px; align-items: center; }
.trj__row-ico {
  grid-area: ico;
  box-sizing: content-box;
  width: 24px; height: 24px; padding: 15px;
  border: 1px solid rgba(79, 216, 236, 0.4); border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(54, 197, 218, 0.16), transparent);
  color: rgb(140, 232, 244);
  filter: drop-shadow(0 0 4px rgba(54, 197, 218, 0.35));
}
:root:not([data-theme="dark"]) .trj__row-ico { color: var(--link); filter: none; }
.trj__row dt { grid-area: dt; align-self: end; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); }
.trj__row dd { grid-area: dd; align-self: start; margin-top: 4px; font-size: 1.0625rem; line-height: 1.4; }
.trj__nw { white-space: nowrap; }
.trj__art { justify-self: center; }
.trj__art--tiles {
  display: grid; grid-template-columns: repeat(2, auto); gap: 26px; align-items: center; justify-items: center;
  padding: 28px;
  background: radial-gradient(closest-side, rgba(54, 197, 218, 0.14), transparent);
}
.trj__art--img img { width: 100%; max-width: 480px; }
.trj__art--own { justify-self: stretch; }
.trj__art--own img { max-width: none; height: auto; }

/* Pantallas bajas (1366 x 768): la sección tiene 680 px útiles. Se recorta el
   aire vertical, no la ilustración ni el cuerpo del texto. */
@media (min-width: 901px) and (max-height: 800px) {
  .trj__card { padding-block: 22px; }
  .trj__title::before { margin-bottom: 14px; }
  .trj__dl { margin-top: 18px; }
  .trj__tabs { margin-top: 20px; }
  .trj__tab { padding-block: 12px; }
}

/* ---- Organizaciones: una sola línea, repartidas, con separadores --------- */

.trj__orgs { margin-top: clamp(28px, 5vh, 56px); padding-top: clamp(18px, 3vh, 28px); border-top: 1px solid var(--border); }
@media (min-width: 901px) and (max-height: 800px) { .trj__orgs { margin-top: 22px; padding-top: 16px; } }
.trj__orgs ul { display: flex; flex-wrap: nowrap; margin-top: 16px; }
.trj__orgs li {
  flex: 1 1 auto;
  padding: 0 clamp(8px, 1.2vw, 24px);
  border-left: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.55rem + 0.55vw, 1.25rem);
  text-align: center;
  white-space: nowrap;
}
.trj__orgs li:first-child { padding-left: 0; border-left: 0; text-align: left; }
.trj__orgs li:last-child { padding-right: 0; text-align: right; }
/* Donde ya no caben en una línea, en filas sin separadores (un separador al
   principio de fila quedaba suelto). */
@media (max-width: 1100px) {
  .trj__orgs ul { flex-wrap: wrap; gap: 10px 28px; }
  .trj__orgs li, .trj__orgs li:first-child, .trj__orgs li:last-child { flex: none; padding: 0; border-left: 0; text-align: left; }
}

/* =========================================================================
   Perfil
   ========================================================================= */

.abt {
  border-top: 1px solid var(--border);
  /* Brillo naranja arriba a la derecha y abajo a la izquierda, y dos arcos
     finos, como el boceto. Todo decorativo y en el fondo. */
  background:
    radial-gradient(circle at 104% 42%, transparent 0 29rem, rgba(245, 138, 82, 0.16) 29rem calc(29rem + 1px), transparent calc(29rem + 1.5px)),
    radial-gradient(circle at 104% 42%, transparent 0 38rem, rgba(245, 138, 82, 0.08) 38rem calc(38rem + 1px), transparent calc(38rem + 1.5px)),
    radial-gradient(42rem 28rem at 100% 0%, rgba(245, 138, 82, 0.13), transparent 70%),
    radial-gradient(30rem 24rem at 0% 100%, rgba(245, 138, 82, 0.08), transparent 70%);
}
:root:not([data-theme="dark"]) .abt { background: radial-gradient(42rem 28rem at 100% 0%, rgba(245, 138, 82, 0.1), transparent 70%); }

/* Retrato ~40 % y texto ~60 %, como el boceto. */
.abt__grid { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.abt__photo {
  /* Casi todo el alto visible, sin pasarse: el ancho sale del alto de la
     pantalla con la proporción del retrato (4:5) más el marco. */
  width: 100%;
  max-width: min(600px, calc((100svh - var(--header-h) - 2 * var(--sec-pad, 3rem)) * 0.8 - 20px));
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  box-shadow: 0 0 50px -14px rgba(245, 138, 82, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.abt__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }

.abt__heading {
  margin-top: 20px;
  max-width: 10em;
  font-family: var(--font-display);
  font-weight: 700;
  /* Misma escala que los títulos de Método, Experiencia y Especialización. */
  font-size: clamp(2.3rem, min(3.9vw, 7.8vh), 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.abt__heading-l { display: block; }
.abt__nw { white-space: nowrap; }
.abt__p {
  margin-top: clamp(16px, 2.6vh, 26px);
  max-width: 46ch;
  /* Como el cuerpo de Método y Experiencia: mismo tamaño, interlineado y gris. */
  color: var(--muted);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.45;
}
.abt__heading + .abt__p { margin-top: clamp(20px, 3.4vh, 32px); }
/* Firma manuscrita y, debajo, el descriptor de la marca, como el boceto. */
.abt__sig { display: grid; justify-items: start; gap: 10px; margin-top: clamp(22px, 3.6vh, 36px); }
.abt__firma {
  display: block;
  width: clamp(280px, 28vw, 520px);
  /* Proporción del trazo, sin el margen transparente de la imagen: contenido
     de 2100 x 358 px dentro de 2170 x 725 (con 8 px de aire). */
  aspect-ratio: 2100 / 358;
  background-color: var(--text);
  -webkit-mask: url("/assets/img/brand/firma.webp") 78.57% 58.86% / 103.333% auto no-repeat;
  mask: url("/assets/img/brand/firma.webp") 78.57% 58.86% / 103.333% auto no-repeat;
}
.abt__sig-desc { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.abt__cta { margin-top: clamp(16px, 2.6vh, 24px); }
/* Pantallas bajas: firma y espacios algo menores para seguir cabiendo. */
@media (min-width: 901px) and (max-height: 820px) {
  .abt__firma { width: clamp(260px, 22vw, 400px); }
  .abt__sig { margin-top: 18px; gap: 6px; }
  /* La misma reducción que Método en pantallas bajas: igual en toda la página. */
  .abt__heading { font-size: clamp(2.1rem, min(3.9vw, 6.6vh), 3.8rem); }
  .abt__p { font-size: 1.0625rem; }
}

/* =========================================================================
   Contacto y pie
   ========================================================================= */

/* Contacto y pie caben juntos en una pantalla, como el boceto: la sección
   mide lo visible menos el pie (84 px, fijo en .ftr). */
main > section.ct { --sec-pad: clamp(1rem, 2.6vh, 2.5rem); min-height: calc(100svh - var(--header-h) - 84px); }
/* El fondo isométrico de la ilustración sobresale a propósito; la sección lo
   recorta para que en una columna no cree scroll horizontal. */
.ct { overflow-x: clip; border-top: 1px solid var(--border); background: radial-gradient(60rem 30rem at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); }
.ct__grid { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: clamp(2rem, 4vw, 4.5rem); }
/* Título a la escala del hero y de TrustedLineage, como el boceto; debajo, la
   frase en la tipografía de titulares. */
.ct__title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  /* Misma escala que los títulos de Método, Experiencia y Perfil; así
     «Let's talk about your data.» también cabe en una línea. */
  font-size: clamp(2.2rem, min(3.9vw, 6.6vh), 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.ct__intro { margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.65rem); line-height: 1.25; color: var(--muted); }
.ct__aside { display: flex; flex-direction: column; align-self: stretch; padding: 12px 0 0 clamp(0px, 3.4vw, 56px); border-left: 1px solid var(--border); }
.ct__list { display: grid; gap: 14px; margin-top: 20px; }
.ct__list li { display: flex; align-items: center; gap: 16px; font-size: 1.0625rem; }
.ct__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--border-strong); overflow-wrap: anywhere; }
.ct__list a:hover { border-bottom-color: currentColor; }
.ct__ico { width: 24px; height: 24px; color: var(--link); }
.ct__ico--accent { color: var(--accent-text); }
.ct__ext { width: 16px; height: 16px; }
/* La ilustración, abajo y alineada con el final del formulario. Detrás, el
   fondo del boceto: una retícula isométrica muy tenue (diagonales a 30° y
   alguna vertical) y, sobre ella, puntos cian en tresbolillo agrupados en dos
   manchas (izquierda y abajo a la derecha) que se desvanecen. Decorativo. */
.ct__art { position: relative; isolation: isolate; display: block; margin-top: auto; padding-top: 20px; }
.ct__art::before,
.ct__art::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
/* Retícula isométrica. */
.ct__art::after {
  inset: -18% -14% -10% -16%;
  background-image:
    repeating-linear-gradient(30deg, rgba(79, 216, 236, 0.075) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(150deg, rgba(79, 216, 236, 0.075) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(79, 216, 236, 0.05) 0 1px, transparent 1px 92px);
  -webkit-mask-image: radial-gradient(62% 58% at 52% 58%, #000 35%, transparent 100%);
  mask-image: radial-gradient(62% 58% at 52% 58%, #000 35%, transparent 100%);
}
/* Puntos en tresbolillo, en dos manchas. */
.ct__art::before {
  inset: -6% -10% -8% -12%;
  background-image:
    radial-gradient(circle, rgba(92, 222, 246, 0.9) 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(92, 222, 246, 0.9) 1.1px, transparent 1.7px);
  background-size: 26px 30px;
  background-position: 0 0, 13px 15px;
  -webkit-mask-image: radial-gradient(16% 30% at 8% 46%, #000 20%, transparent 100%), radial-gradient(20% 22% at 90% 88%, #000 20%, transparent 100%);
  mask-image: radial-gradient(16% 30% at 8% 46%, #000 20%, transparent 100%), radial-gradient(20% 22% at 90% 88%, #000 20%, transparent 100%);
}
:root:not([data-theme="dark"]) .ct__art::before {
  background-image:
    radial-gradient(circle, rgba(17, 96, 113, 0.55) 1.1px, transparent 1.7px),
    radial-gradient(circle, rgba(17, 96, 113, 0.55) 1.1px, transparent 1.7px);
}
:root:not([data-theme="dark"]) .ct__art::after { opacity: 0.6; }
.ct__art img { width: 100%; max-width: 540px; height: auto; }
/* La propia es casi cuadrada: ocupa solo el hueco entre la lista y el final
   del formulario (contain: size hace que no estire la columna) y se encaja
   entera, sin recortes, abajo. */
.ct__art--own { flex: 1 1 auto; min-height: 220px; contain: size; }
.ct__art--own img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; }

/* ---- Formulario ------------------------------------------------------------ */

.form { margin-top: clamp(14px, 2.4vh, 26px); }
/* Las intenciones van encima; los campos, en la tarjeta de vidrio. */
.form__card { margin-top: clamp(10px, 1.6vh, 16px); padding: clamp(14px, 2vh, 26px) clamp(18px, 2vw, 30px); }
.intents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; border: 0; }
.intent { position: relative; display: block; cursor: pointer; }
.intent__radio { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.intent__box {
  display: grid; gap: 4px;
  height: 100%;
  padding: clamp(7px, 0.9vh, 14px) 18px clamp(7px, 0.9vh, 14px) 54px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.intent__label { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
.intent__desc { font-size: 0.9rem; color: var(--muted); }
.intent__radio:checked + .intent__box { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.intent__radio:focus-visible + .intent__box { outline: 2px solid var(--focus); outline-offset: 3px; }
.intent:hover .intent__box { border-color: var(--text); }
.intent__radio:checked + .intent__box:hover { border-color: var(--accent); }

.form__summary {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid var(--error); border-radius: var(--r-sm);
  color: var(--error);
}
.form__summary-ico { width: 20px; height: 20px; }

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.5vh, 16px) 20px; }
.field { min-width: 0; }
.field--wide { grid-column: 1 / -1; }
/* El área de consulta comparte fila con Empresa cuando se ve (consultoría o
   sin JS): así el formulario no cambia de alto al cambiar de intención. */
.form__grid:has([data-topic-field]:not([hidden])) .field--company { grid-column: auto; }
.field__label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 0.95rem; }
.field__req { margin-left: 3px; color: var(--accent-text); }
.field__opt { margin-left: 4px; font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.field__input {
  width: 100%;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}
.field__input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.field__input:hover { border-color: var(--text); }
.field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.field__input--area { height: clamp(64px, 7.5vh, 104px); min-height: 64px; resize: vertical; }
.field__select { position: relative; }
.field__select select { appearance: none; padding-right: 44px; }
.field__caret { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.field__err { display: none; align-items: center; gap: 8px; margin-top: 8px; color: var(--error); font-size: 0.9rem; }
.field__err .ico { width: 18px; height: 18px; }
.field.is-error .field__input { border-color: var(--error); }
.field.is-error .field__err { display: flex; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  margin-top: clamp(10px, 1.5vh, 18px);
  font-size: 0.875rem;
  color: var(--muted);
}
.form__consent .field__err { grid-column: 2; }
.field__check { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.form__consent a { color: var(--text); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(12px, 1.8vh, 22px); }
.form__foot .btn { min-height: clamp(44px, 5.4vh, 52px); }
/* Portátiles de 880 px de alto o menos: textos del formulario algo más
   apretados para que contacto y pie sigan cabiendo juntos. */
@media (min-width: 901px) and (max-height: 880px) {
  .ct__intro { margin-top: 4px; font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.4rem); }
  .field__label { margin-bottom: 4px; font-size: 0.9rem; }
  .field__input { min-height: 42px; padding-block: 8px; }
  .form__consent { font-size: 0.8125rem; line-height: 1.45; }
  .intent__desc { font-size: 0.85rem; }
}
.form__response { display: inline-flex; align-items: center; gap: 10px; padding-left: 24px; border-left: 1px solid var(--border); font-size: 0.925rem; color: var(--muted); }
.form__status { margin-top: 18px; font-size: 0.975rem; }
.form__status:empty { display: none; }
.form__status > .ico, .form__status .ico { display: inline-block; vertical-align: -4px; width: 20px; height: 20px; margin-right: 8px; }
.form__status--ok { color: var(--ok); }
.form__status--error { color: var(--error); }
.form__status a { color: inherit; }
.form.is-sending [data-submit] { opacity: 0.7; cursor: progress; }

/* ---- Pie -------------------------------------------------------------------- */

.ftr { --ftr-h: 84px; display: grid; align-items: center; min-height: var(--ftr-h); border-top: 1px solid var(--border); padding-block: 12px; }
.ftr__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.ftr__nav ul { display: flex; flex-wrap: wrap; }
.ftr__nav li + li { border-left: 1px solid var(--border); }
.ftr__nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 clamp(12px, 2vw, 22px); text-decoration: none; font-size: 0.925rem; }
.ftr__nav a:hover { text-decoration: underline; }
.ftr__nav .ico { width: 14px; height: 14px; }
.ftr__legal { font-size: 0.875rem; color: var(--muted); }

/* =========================================================================
   Páginas de apoyo (privacidad, gracias, 404)
   ========================================================================= */

.section__title { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; }
.legal .wrap { max-width: calc(820px + 2 * var(--gutter)); }
.legal__updated { margin-top: 12px; color: var(--muted); font-size: 0.925rem; }
.legal__block { margin-top: 36px; }
.legal__h { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
.legal__block p { margin-top: 10px; color: var(--muted); }
.legal__back { margin-top: 44px; }
.legal__back a, .legal a { color: var(--link); }
.notfound { min-height: 70vh; display: grid; align-items: center; padding-block: var(--section-y); }
.notfound__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 12vw, 9rem); line-height: 1; color: var(--accent-text); }
.notfound__block { margin-top: 32px; max-width: 640px; }
.notfound__block .btn { margin-top: 20px; }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1180px) {
  .hdr__link { display: none; }
  /* Hero en tableta: texto arriba y panel debajo a todo el ancho. En dos
     columnas el panel no cabía: a 1024 px las tarjetas de salida se salían
     por la derecha y los rótulos se partían a mitad de palabra. */
  .hero__grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .wave { top: 58%; height: 42%; }
  .hero__copy { max-width: 640px; }
  .hero__proof { margin-top: clamp(4rem, 10vw, 7rem); }
}

@media (max-width: 1080px) {
  .tl__grid { grid-template-columns: 1fr; }
    /* En una columna el texto va debajo de la demo: la línea pasa arriba. */
  .tl__aside { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--border); max-width: 640px; }
  .tl__cta { width: auto; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .hdr__cta { display: none; }
  .hdr__explore-wide { display: none; }
  .hdr__explore-narrow { display: inline; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 1.125rem; }

  .hero__grid, .spec__grid, .mth__grid, .trj__grid, .abt__grid, .ct__grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  main > section.section { min-height: 0; padding-block: var(--section-y); }
  /* En una columna la ilustración de Contacto recupera su tamaño natural. */
  .ct__art--own { flex: none; min-height: 0; contain: none; max-width: 420px; }
  .ct__art--own img { height: auto; }
  .wave { top: 58%; height: 42%; }
  .hero__copy { max-width: 640px; }
  .hero__proof { margin-top: clamp(5rem, 16vw, 8rem); }
  .trj__grid { align-items: start; }
  /* Tableta: la tarjeta va a todo el ancho; el texto gana un poco y la
     ilustración se queda en ~300 px, como en móvil. */
  .trj__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .ct__aside { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 28px; }
  /* Móvil, como 09-responsive: título, ilustración y áreas. La columna de
     texto se disuelve en la rejilla para poder colocar la imagen en medio
     sin duplicarla. */
  .spec__copy { display: contents; }
  .spec__grid { row-gap: 0; }
  .spec__fig { position: static; order: 1; max-width: 640px; margin-top: 24px; }
  .spec__areas { order: 2; }
  .mth > .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main" "side"; }
  .mth__side { margin-top: 32px; }
  .mth__docs { flex: none; min-height: 380px; max-width: 600px; }
  .mth__cta { align-self: flex-start; }
  .abt__photo { max-width: 360px; }
  .abt__heading { max-width: none; }
  .xp__grid { grid-template-columns: 1fr; }
  .xp__preview { display: none; }
}

@media (max-width: 760px) {
  .tlx__graph {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    row-gap: 34px;
    column-gap: 16px;
  }
  .tlx__node[data-node="pedidos_raw"] { grid-column: 1 / -1; grid-row: 1; }
  .tlx__node[data-node="normalizar_pedidos"] { grid-column: 1 / -1; grid-row: 2; }
  .tlx__node[data-node="pedidos_curados"] { grid-column: 1 / -1; grid-row: 3; }
  .tlx__node[data-node="ventas_diarias"] { grid-column: 1; grid-row: 4; }
  .tlx__node[data-node="informe_ventas"] { grid-column: 2; grid-row: 4; }
  .tlx__node[data-node="pedidos_raw"],
  .tlx__node[data-node="normalizar_pedidos"],
  .tlx__node[data-node="pedidos_curados"] { justify-self: center; width: min(100%, 300px); }
  .tlx__badge { margin-left: 0; }

  /* En una columna, lo que le sobra al ámbito más corto va al pie de la
     tarjeta: si cae bajo el resumen, el hueco hasta las filas cambia de
     una pestaña a otra. */
  /* En una columna la tarjeta toma el alto de cada ámbito: solo se ve el
     activo, sin reservar el alto del más largo ni dejar hueco al pie. */
  .trj__panel { grid-template-columns: 1fr; grid-template-areas: "art" "title" "sum" "dl"; grid-template-rows: none; }
  .trj__panel .trj__dl { align-content: start; }
  .js .trj__panel:not([data-active]) { display: none; }
  .trj__row { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .trj__row-ico { padding: 7px; }
  .trj__art { justify-self: start; }
  .trj__art--own { justify-self: stretch; margin-bottom: 12px; }
  .trj__art--img img { max-width: 320px; }
  .trj__heading-l { white-space: normal; }
}

@media (max-width: 640px) {
  /* Panel del hero en móvil: cada pieza en fila (ilustración a la izquierda,
     rótulo a la derecha) y el flujo bajando entre ellas; las salidas debajo. */
  .hp__stage { --art: 64px; }
  /* En una columna las tarjetas tienen ancho de sobra: su icono recupera la
     proporción original respecto a las piezas. */
  .hp__card .hp__art--card { width: calc(var(--art) * 0.62); height: calc(var(--art) * 0.62); }
  .hp__ctl .hp__art--ctl { width: calc(var(--art) * 0.56); height: calc(var(--art) * 0.56); }
  .hp__scene--chain { grid-template-columns: 1fr; row-gap: 22px; }
  .hp__chain { grid-template-columns: 1fr; row-gap: 22px; }
  .hp__node { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; }
  .hp__node .hp__label, .hp__node .hp__sub { grid-column: 2; }
  .hp__node .hp__art { grid-row: 1 / span 2; }
  .hp__node::after, .hp__node:last-child::after {
    top: calc(var(--art) + 2px); left: calc(var(--art) / 2 - 1.5px);
    width: 3px; height: 18px;
    background: radial-gradient(circle, rgba(79, 216, 236, 0.95) 1.3px, transparent 1.8px) 50% 0 / 3px 6px repeat-y;
    animation: flujo-v6 1s linear infinite;
  }
  .hp__scene--outs1 .hp__node:last-child::after { display: block; }
  .hp__scene--outs1 .hp__outs { margin-top: 0; transform: none; }
  .hp__scene--outs2 { padding-top: 0; }
  .hp__scene--outs2 .hp__outs { margin-top: 0; }
  .hp__scene--outs2 .hp__card { min-height: 0; }
  @keyframes flujo-v6 { to { background-position: 50% 6px; } }
  .hp__scene--outs2 .hp__card::after, .hp__scene--outs2 .hp__card::before,
  .hp__scene--outs1 .hp__outs::before, .hp__scene--outs1 .hp__outs::after { display: none; }
  .hp__scene--hub { grid-template-columns: 1fr 1fr; grid-template-rows: auto; column-gap: 12px; row-gap: 12px; }
  .hp__core { grid-column: 1 / -1; grid-row: 1; }
  .hp__ctl--1, .hp__ctl--2, .hp__ctl--3, .hp__ctl--4 { grid-column: auto; grid-row: auto; }
  .hp__ctl::after { display: none; }
  .hp__tab + .hp__tab::before { display: none; }

  .hp__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp__tab { justify-content: flex-start; padding-inline: 12px; }

  .hero__ctas .btn { width: 100%; }
  .intents, .form__grid { grid-template-columns: 1fr; }
  .form__response { padding-left: 0; border-left: 0; }
  .mth__tabs::before, .mth__tabs::after { top: 22px; }
  .mth__num { width: 44px; height: 44px; font-size: 0.95rem; }
  .mth__tab-label { font-size: 0.85rem; }
  .mth__docs { min-height: 260px; }
  .mth__doc { padding: 12px 16px; }
  .mth__doc-title { font-size: 0.9rem; }
  .mth__doc-title::after { margin-top: 6px; }
  .mth__doc-body { left: 16px; right: 16px; top: 46px; bottom: 12px; gap: 12px; }
  .mth__piece { width: 32px; height: 32px; border-radius: 8px; }
  .mth__piece-ico { width: 18px; height: 18px; }
  .mth__doc--1::after { width: 22px; height: 22px; }
  .spec__panel { padding-left: 44px; }
  .spec__dl { grid-template-columns: 1fr; }
  .spec__btn { column-gap: 16px; padding-left: 20px; }
  .spec__area + .spec__area::after { left: 20px; }
  .spec__mark span { font-size: 0.75rem; padding: 4px 8px; }
  .xp__esc { display: none; }
  .ftr { min-height: 0; padding-block: 24px; }
  .ftr__in { flex-direction: column; align-items: flex-start; }
  .ftr__nav li:first-child a { padding-left: 0; }
}

@media (max-width: 560px) {
  .hdr .lang { display: none; }
  .xp__lang { display: block; }
}

@media (max-width: 420px) {
  .brand__desc { display: none; }
  .brand { gap: 10px; }
  .brand__name { font-size: 1rem; }

  /* A 320-420 px los controles de Gobierno van en una columna. */
  .hp__scene--hub { grid-template-columns: 1fr; }
  .hp__ctl { padding: 10px 12px; }

  /* «TrustedLineage» es una sola palabra sin cortes: a 320 px y 44 px de
     cuerpo no cabe y empujaba la página 8 px de lado. */
  .tl__title { font-size: 10.4vw; }

  /* Demo: las tres vistas ocupan la fila entera y la etiqueta baja debajo. */
  .tlx__glyph { display: none; }
  .tlx__glyph + .tlx__tabs { padding-left: 0; border-left: 0; }
  .tlx__tabs { flex: 1 1 100%; justify-content: space-between; }
  .tlx__tab { padding: 0 8px; }
  .lang { padding-left: 10px; }
  .hdr__nav { gap: 8px; }
  .tlx__node { padding: 10px; }
}

/* ---- Enlaces subrayados: el mismo gesto en toda la página -----------------
   La referencia es «TrustedLineage» en la cabecera (.hdr__link): línea de 1 px
   al 60 % del enlace (texto + flecha, ~75 % del texto) y a media opacidad; al
   pasar el cursor o llegar con el teclado se completa al 100 %. La línea queda
   2,4 px por debajo del texto, como allí: el texto va centrado en la caja y la
   mitad de su área mide ~0,615 em en IBM Plex Sans (medido), así que la línea
   cae a 50 % + 0,615 em + 2,4 px. Sustituye los bordes y subrayados que había. */
.link-cta, .link-ext, .xp__method, .tl__shot, .spec__cta, .mth__cta, .ct__list a,
.form__consent a {
  position: relative;
  border-bottom: 0;
  text-decoration: none;
}
.form__consent a { display: inline-block; }
.link-cta::after, .link-ext::after, .xp__method::after, .tl__shot::after, .spec__cta::after, .mth__cta::after, .ct__list a::after,
.form__consent a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(50% + 0.615em + 2.4px);
  height: 1px;
  background: currentColor;
  transform: scaleX(0.6);
  transform-origin: left;
  opacity: 0.5;
  pointer-events: none;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
:is(.link-cta, .link-ext, .xp__method, .tl__shot, .spec__cta, .mth__cta, .ct__list a, .form__consent a):is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  opacity: 1;
}

/* ---- Movimiento reducido ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}