/* ==========================================================================
   KURVIAX Landing UI — PRD v0.3 · Dirección visual: Control Operativo Visible
   Paleta oficial: Ónix #0B0F14 · Grafito #1C232B · Cobre #C9822B
                   Blanco Técnico #F7F8F5 · Negro Control #111418
                   Gris Bitácora #737B84 · Marfil Sistema #ECE9E2
   ========================================================================== */

/* Fuentes oficiales KURVIAX, auto-alojadas (archivos oficiales de la marca,
   subconjunto latino en woff2 variable). Sin dependencia de Google Fonts. */
@font-face {
  font-family: "Sora";
  src: url("../assets/fonts/sora-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --onix: #0B0F14;
  --grafito: #1C232B;
  --cobre: #C9822B;
  --cobre-hover: #A96A1F;
  --blanco: #F7F8F5;
  --negro: #111418;
  --gris: #737B84;
  --marfil: #ECE9E2;
  --error: #9B3B2A;

  --font-display: "Sora", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container: 1240px;
  --radius-panel: 12px;
  --radius-card: 10px;
  --radius-field: 8px;

  --dur-micro: 200ms;
  --dur-press: 130ms;
  --dur-reveal: 520ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  /* Tokens semánticos de texto secundario (WCAG 2.2 AA).
     Derivados de la paleta oficial por opacidad — no introducen colores nuevos.
     Gris Bitácora #737B84 se conserva para bordes, nodos y trazos (umbral 3:1),
     pero NO como color de texto: solo alcanza 4.02:1 sobre Blanco Técnico,
     3.54:1 sobre Marfil y 4.48:1 sobre Ónix (mínimo exigido: 4.5:1). */
  --txt-2-claro: rgba(17, 20, 24, .62);    /* sobre Blanco Técnico 5.04:1 · sobre Marfil 4.71:1 */
  --txt-2-oscuro: rgba(247, 248, 245, .55); /* sobre Ónix 5.68:1 · sobre Grafito 5.35:1 */
  --borde-ui: rgba(17, 20, 24, .46);        /* controles sobre blanco 3.07:1 (WCAG 1.4.11) */
}

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

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 76px; } /* iguala la altura del header sólido; evita el hueco extra al anclar */

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font: 400 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; }

a { color: inherit; }

button { font-family: var(--font-body); cursor: pointer; }

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

/* Accesibilidad ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--cobre);
  color: var(--negro);
  font: 600 15px var(--font-body);
  padding: 12px 20px;
  border-radius: var(--radius-field);
  text-decoration: none;
  transition: top var(--dur-micro) var(--ease-out);
}
.skip-link:focus { top: 16px; }

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cobre);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Etiquetas de sección ---------------------------------------------------- */

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 12.5px var(--font-body);
  letter-spacing: 0.15em;
  color: var(--gris);
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--cobre);
}
.kicker--copper { color: var(--cobre); }

.section { padding: 112px 0; }
.section h2 { font-size: 44px; line-height: 52px; font-weight: 650; margin-top: 22px; max-width: 20ch; }
.section .lead { font-size: 19px; line-height: 31px; margin: 22px 0 0; max-width: 42em; }

.bg-blanco { background: var(--blanco); color: var(--negro); }
.bg-marfil { background: var(--marfil); color: var(--negro); }
.bg-grafito { background: var(--grafito); color: var(--blanco); }
.bg-onix { background: var(--onix); color: var(--blanco); }

.bg-blanco .lead, .bg-marfil .lead { color: rgba(17, 20, 24, .72); }
.bg-grafito .lead, .bg-onix .lead { color: rgba(247, 248, 245, .75); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--radius-field);
  font: 600 16px var(--font-body);
  padding: 15px 26px;
  border: 1px solid transparent;
  text-decoration: none;
  min-height: 48px;
  touch-action: manipulation;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              transform var(--dur-press) var(--ease-out),
              opacity var(--dur-micro) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

.btn--primary { background: var(--cobre); color: var(--negro); }
.btn--primary:hover { background: #D48F38; }
.btn--primary:disabled {
  background: #B27529;
  color: rgba(17, 20, 24, .75);
  cursor: default;
  transform: none;
}

.btn--ghost-dark {
  border-color: rgba(247, 248, 245, .35);
  color: var(--blanco);
  font-weight: 500;
  background: transparent;
}
.btn--ghost-dark:hover { border-color: var(--blanco); }

.btn--ghost-light {
  border-color: rgba(17, 20, 24, .28);
  color: var(--negro);
  font-weight: 500;
  background: #fff;
}
.btn--ghost-light:hover { border-color: var(--negro); }

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background-color var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-micro) var(--ease-out);
}
.site-header.is-solid {
  background: var(--onix);
  box-shadow: 0 1px 0 rgba(247, 248, 245, .08);
}

.site-header__inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 28px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a {
  font: 500 15px var(--font-body);
  color: rgba(247, 248, 245, .82);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-micro), border-color var(--dur-micro);
}
.site-nav a:hover { color: var(--blanco); }
.site-nav a.is-active { color: var(--blanco); border-bottom-color: var(--cobre); }

.site-header .btn { padding: 11px 20px; font-size: 15px; min-height: 44px; }

.cta-short { display: none; }
@media (max-width: 720px) {
  .site-header .cta-full { display: none; }
  .site-header .cta-short { display: inline; }
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(247, 248, 245, .25);
  border-radius: var(--radius-field);
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.menu-toggle span {
  width: 18px;
  height: 2px;
  background: var(--blanco);
  transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  background: var(--onix);
  border-top: 1px solid rgba(247, 248, 245, .1);
  padding: 28px 20px 32px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  font: 600 22px/30px var(--font-display);
  color: var(--blanco);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247, 248, 245, .08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-menu nav a.is-active::after {
  content: "";
  width: 16px;
  height: 2px;
  background: var(--cobre);
}
.mobile-menu .btn { width: 100%; margin-top: 28px; }
.mobile-menu p {
  margin: 14px 0 0;
  font: 400 12.5px/19px var(--font-body);
  color: var(--gris);
  text-align: center;
}

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

.hero {
  background: var(--onix);
  color: var(--blanco);
  padding: 64px 0 96px;
  margin-top: -76px; /* el header sticky transparente se integra al hero */
  padding-top: calc(64px + 76px);
}

.hero__grid {
  display: grid;
  /* El mensaje recupera la columna ancha: el H1 es la impresión de 8 segundos. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero__badge {
  display: inline-block;
  border: 1px solid rgba(201, 130, 43, .55);
  color: var(--cobre);
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: 0.14em;
  padding: 7px 14px;
  border-radius: 999px;
  text-transform: uppercase;
}

.hero h1 {
  margin-top: 24px;
  /* Más grande y con mando que los 50px previos, sin empujar el CTA fuera del
     primer viewport 1440×900 (criterio de aceptación PRD §16). */
  font-size: clamp(44px, 3.4vw, 55px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--blanco);
  text-wrap: balance;
}

.hero__sub {
  margin: 24px 0 0;
  font-size: 19px;
  line-height: 31px;
  color: rgba(247, 248, 245, .78);
}

.hero__results {
  margin: 20px 0 0;
  font: 600 15px/24px var(--font-body);
  color: var(--blanco);
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero__trust {
  margin: 18px 0 0;
  font: 400 13.5px var(--font-body);
  color: var(--gris);
}

.hero__slogan {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(247, 248, 245, .12);
  display: flex;
  align-items: center;
  gap: 12px;
  font: 650 16px var(--font-display);
  color: var(--blanco);
}
.hero__slogan svg { flex: none; }

/* Hero — Núcleo de capacidad comercial ------------------------------------ */

.nucleo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.25fr) 44px minmax(0, 1fr);
  gap: 0;
  align-items: center;
}

.nucleo__col-label {
  font: 600 10.5px var(--font-body);
  letter-spacing: 0.16em;
  color: var(--gris);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.nucleo__inputs { display: flex; flex-direction: column; gap: 14px; }
.nucleo__inputs li {
  list-style: none;
  background: var(--grafito);
  border: 1px solid rgba(247, 248, 245, .14);
  border-radius: var(--radius-field);
  padding: 11px 14px;
  font: 500 14px var(--font-body);
  color: var(--blanco);
}
.nucleo__inputs, .nucleo__outputs { margin: 0; padding: 0; }

.nucleo__trace { align-self: stretch; display: flex; align-items: center; }
.nucleo__trace svg { width: 100%; height: 150px; overflow: visible; }
.nucleo__trace path {
  stroke: var(--cobre);
  stroke-width: 1.6;
  fill: none;
}

.trace-anim path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.trace-anim.is-drawn path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 620ms var(--ease-out);
}
.trace-anim.is-drawn path:nth-child(2) { transition-delay: 60ms; }
.trace-anim.is-drawn path:nth-child(3) { transition-delay: 120ms; }
.trace-anim--late.is-drawn path { transition-delay: 640ms; }
.trace-anim--late.is-drawn path:nth-child(2) { transition-delay: 700ms; }
.trace-anim--late.is-drawn path:nth-child(3) { transition-delay: 760ms; }

.nucleo__core {
  background: var(--grafito);
  border: 1px solid rgba(201, 130, 43, .55);
  border-radius: var(--radius-panel);
  padding: 20px 22px;
}
.nucleo__core-label {
  font: 600 11px var(--font-body);
  letter-spacing: 0.16em;
  color: var(--cobre);
  margin: 0 0 14px;
}
.nucleo__core ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nucleo__core li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 14px var(--font-body);
  color: var(--blanco);
}
.nucleo__core li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cobre);
  flex: none;
}

.nucleo__outputs { display: flex; flex-direction: column; gap: 18px; }
.nucleo__outputs li {
  list-style: none;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font: 400 13px/18px var(--font-body);
  color: rgba(247, 248, 245, .85);
}
.nucleo__outputs li svg { flex: none; margin-top: 5px; }

.nucleo__arrow { display: none; justify-content: center; padding: 10px 0; }

/* Resultados (franja conectada) ------------------------------------------- */

.results-track { margin-top: 64px; position: relative; }
.results-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 5px;
  height: 2px;
  background: linear-gradient(90deg, var(--cobre) 0%, var(--cobre) 82%, rgba(201, 130, 43, .25) 100%);
}
.results-track ol {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.results-track li { list-style: none; padding: 0 28px 0 0; }
.results-track li + li { padding-left: 28px; border-left: 1px solid rgba(17, 20, 24, .1); }
.results-track li:last-child { padding-right: 0; }

.results-track .dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cobre);
  border: 3px solid var(--blanco);
  position: relative;
}
.results-track .num { font: 600 13px var(--font-body); color: var(--gris); margin-top: 22px; }
.results-track h3 { font-size: 19px; line-height: 26px; font-weight: 600; margin-top: 10px; }
.results-track p { margin: 12px 0 0; font: 400 15px/24px var(--font-body); color: rgba(17, 20, 24, .7); }

/* Puntos ciegos ------------------------------------------------------------ */

.route { margin: 70px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.route li { list-style: none; position: relative; padding-right: 16px; }

.route .node {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--negro);
  position: relative;
  z-index: 1;
}
.route li.is-broken .node {
  background: transparent;
  border: 2px dashed var(--gris);
}
.route li.is-broken { opacity: .78; }
.route li.is-final { opacity: .55; }

/* conector entrante: sólido o discontinuo según continuidad */
.route li + li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(-100% + 22px);
  width: calc(100% - 8px);
  border-top: 2px solid var(--negro);
}
.route li + li.is-cut::before { border-top: 2px dashed var(--gris); }

.route .stage { display: block; font: 600 15px var(--font-body); color: var(--negro); margin-top: 14px; }
.route .issue {
  display: inline-block;
  margin: 10px 12px 0 0;
  border: 1px dashed var(--gris);
  border-radius: 6px;
  padding: 8px 10px;
  font: 500 12.5px/17px var(--font-body);
  color: var(--gris);
  background: rgba(247, 248, 245, .5);
}

.blindspot-questions {
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 40px;
}
.blindspot-questions li {
  list-style: none;
  border-top: 1px solid rgba(17, 20, 24, .18);
  padding: 16px 0 0;
  font: 500 16px/25px var(--font-body);
}

.pull-quote {
  margin: 64px 0 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 860px;
}
.pull-quote svg { flex: none; margin-top: 12px; }
.pull-quote p { margin: 0; font: 650 26px/36px var(--font-display); }

/* Capacidad comercial ------------------------------------------------------ */

.compare { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }

.compare__label {
  font: 600 13px var(--font-body);
  letter-spacing: 0.14em;
  color: var(--gris);
  margin: 0 0 24px;
}
.compare__label--copper { color: var(--cobre); }

.compare__scattered { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.compare__scattered li {
  list-style: none;
  border: 1px dashed rgba(115, 123, 132, .6);
  border-radius: var(--radius-field);
  padding: 14px 18px;
  font: 400 15.5px var(--font-body);
  color: rgba(247, 248, 245, .62);
}
.compare__scattered li:nth-child(1) { margin-right: 44px; }
.compare__scattered li:nth-child(2) { margin-left: 36px; }
.compare__scattered li:nth-child(3) { margin-right: 24px; }
.compare__scattered li:nth-child(4) { margin-left: 52px; }
.compare__scattered li:nth-child(5) { margin-right: 56px; }
.compare__scattered li:nth-child(6) { margin-left: 20px; }

.compare__connected { position: relative; padding-left: 26px; }
.compare__connected::before {
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--cobre);
}
.compare__connected ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.compare__connected li {
  list-style: none;
  position: relative;
  background: var(--onix);
  border: 1px solid rgba(247, 248, 245, .1);
  border-radius: var(--radius-field);
  padding: 14px 18px;
  font: 500 15.5px var(--font-body);
  color: var(--blanco);
}
.compare__connected li::before {
  content: "";
  position: absolute;
  left: -26px; top: 22px;
  width: 12px;
  height: 2px;
  background: var(--cobre);
}

.compare__bridge {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 28px 0 22px;
  font: 600 12px var(--font-body);
  letter-spacing: 0.1em;
  color: var(--cobre);
}

.section-close {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(247, 248, 245, .12);
  font: 650 22px/32px var(--font-display);
  max-width: 760px;
}
.bg-blanco .section-close, .bg-marfil .section-close { border-top-color: rgba(17, 20, 24, .12); }

/* Cómo funciona — capas ---------------------------------------------------- */

.layers { margin-top: 64px; display: flex; flex-direction: column; }

.layer {
  border: 1px solid rgba(17, 20, 24, .14);
  border-radius: var(--radius-panel);
  padding: 26px 32px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.layer--core { background: var(--onix); border-color: var(--onix); }
.layer--capabilities { background: var(--marfil); }

.layer__head { flex: none; width: 190px; }
.layer__num {
  font: 600 11px var(--font-body);
  letter-spacing: 0.16em;
  color: var(--gris);
}
.layer--core .layer__num { color: var(--cobre); }
.layer__title { font: 600 18px var(--font-display); color: var(--negro); margin-top: 6px; }
.layer--core .layer__title { color: var(--blanco); }

.layer__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  border: 1px solid rgba(17, 20, 24, .2);
  border-radius: var(--radius-field);
  padding: 9px 16px;
  font: 500 14.5px var(--font-body);
  color: var(--negro);
  background: transparent;
}
.layer--capabilities .tag { background: var(--blanco); border-color: rgba(17, 20, 24, .14); }
.tag--dark {
  background: var(--grafito);
  border-color: rgba(247, 248, 245, .14);
  color: var(--blanco);
}
.tag--ia { border-color: rgba(201, 130, 43, .55); }

.layer__body { flex: 1; min-width: 0; }
.layer__kurvi {
  margin-top: 18px;
  border-top: 1px solid rgba(247, 248, 245, .12);
  padding-top: 16px;
  font: 400 14px/22px var(--font-body);
  color: rgba(247, 248, 245, .72);
}
.layer__kurvi strong { color: var(--cobre); font-weight: 600; }

.layer-arrow { display: flex; justify-content: center; padding: 6px 0; }

.how-close { margin-top: 44px; font: 650 20px/30px var(--font-display); }

/* Mapa problema → control -------------------------------------------------- */

.map { margin-top: 56px; }

/* Puente "de problema a control" fundido en Puntos ciegos (antes sección Mapa). */
.fold-bridge {
  margin: 60px 0 0;
  font: 650 22px/32px var(--font-display);
  letter-spacing: -0.01em;
  color: var(--negro);
  max-width: 24ch;
}
.map--compact { margin-top: 24px; }

.map__headings {
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr;
  gap: 0 12px;
  padding: 0 24px 14px;
  font: 600 11.5px var(--font-body);
  letter-spacing: 0.14em;
  color: var(--gris);
}

.map__row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr;
  gap: 0 12px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(17, 20, 24, .12);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.map__row:last-child { border-bottom: 0; }
.map__row:hover { background: rgba(247, 248, 245, .65); }

.map__row--featured {
  background: var(--blanco);
  border: 1px solid rgba(17, 20, 24, .16);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  margin-bottom: 4px;
}
.map__row--featured:hover { background: var(--blanco); }

.map__problem, .map__structure { font: 500 15.5px/23px var(--font-body); color: var(--negro); }
.map__row--featured .map__problem,
.map__row--featured .map__structure { font-weight: 600; font-size: 16px; }
.map__effect { font: 400 15.5px/23px var(--font-body); color: rgba(17, 20, 24, .72); }
.map__detail { margin: 6px 0 0; font: 400 13.5px/20px var(--font-body); color: var(--gris); }
.map__row svg { justify-self: center; }
.map__step-label { display: none; }

/* Control y confianza ------------------------------------------------------ */

.rules {
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.rules li {
  list-style: none;
  background: var(--grafito);
  border: 1px solid rgba(247, 248, 245, .1);
  border-radius: var(--radius-card);
  padding: 22px;
  transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.rules li:hover { border-color: rgba(201, 130, 43, .5); }
@media (hover: hover) and (pointer: fine) {
  .rules li:hover { transform: translateY(-2px); }
}
.rules .rule-num { font: 650 15px var(--font-display); color: var(--cobre); }
.rules h3 { margin-top: 12px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--blanco); }
.rules p { margin: 10px 0 0; font: 400 13.5px/21px var(--font-body); color: rgba(247, 248, 245, .7); }

.roles { margin-top: 64px; }
.roles__label {
  font: 600 12px var(--font-body);
  letter-spacing: 0.15em;
  color: var(--gris);
  margin-bottom: 18px;
}

.roles__tabs {
  display: flex;
  border-bottom: 1px solid rgba(247, 248, 245, .14);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.roles__tabs::-webkit-scrollbar { display: none; }
.roles__tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 13px 22px;
  font: 500 15px var(--font-body);
  color: var(--gris);
  white-space: nowrap;
  min-height: 48px;
  transition: color var(--dur-micro);
}
.roles__tabs button:hover { color: var(--blanco); }
.roles__tabs button[aria-selected="true"] {
  color: var(--blanco);
  font-weight: 600;
  border-bottom-color: var(--cobre);
}

.roles__panel {
  padding-top: 32px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.roles__panel[hidden] { display: none; }
.roles__panel svg { flex: none; margin-top: 9px; }
.roles__panel p {
  margin: 0;
  font: 600 24px/34px var(--font-display);
  color: var(--blanco);
  max-width: 760px;
}
.roles__panel.is-entering { animation: role-fade var(--dur-micro) var(--ease-out); }
@keyframes role-fade { from { opacity: 0; } to { opacity: 1; } }

/* Implementación ----------------------------------------------------------- */

.impl-track {
  margin: 60px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.impl-track::before {
  content: "";
  position: absolute;
  left: 24px; right: 24px; top: 7px;
  height: 2px;
  background: rgba(17, 20, 24, .15);
}
.impl-track li { list-style: none; padding: 0 28px 0 0; position: relative; }
.impl-track li + li { padding-left: 28px; }
.impl-track .dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--negro);
  position: relative;
  z-index: 1;
}
.impl-track li:first-child .dot { background: var(--cobre); }
.impl-track .num { margin-top: 20px; font: 600 13px var(--font-body); color: var(--gris); }
.impl-track h3 { margin-top: 8px; font-size: 19px; line-height: 26px; font-weight: 600; }
.impl-track p { margin: 12px 0 0; font: 400 15px/24px var(--font-body); color: rgba(17, 20, 24, .7); }

.impl-panels {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}

.impl-benefits {
  background: var(--marfil);
  border-radius: var(--radius-panel);
  padding: 32px 36px;
}
.impl-benefits__label {
  font: 600 12px var(--font-body);
  letter-spacing: 0.15em;
  color: var(--gris);
  margin-bottom: 20px;
}
.impl-benefits ul {
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}
.impl-benefits li {
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font: 400 15px/23px var(--font-body);
}
.impl-benefits li svg { flex: none; margin-top: 7px; }

.impl-note {
  border: 1px solid rgba(17, 20, 24, .2);
  border-radius: var(--radius-card);
  padding: 24px 26px;
}
.impl-note__label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font: 600 12px var(--font-body);
  letter-spacing: 0.12em;
  color: var(--gris);
}
.impl-note__label::before {
  content: "";
  width: 8px; height: 8px;
  border: 2px solid var(--gris);
  border-radius: 50%;
}
.impl-note p { margin: 0; font: 500 16px/25px var(--font-body); }

/* Validación privada ------------------------------------------------------- */

.stages {
  margin: 60px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}
.stages::before {
  content: "";
  position: absolute;
  left: 24px; right: 24px; top: 8px;
  height: 2px;
  background: rgba(17, 20, 24, .15);
}
.stages li { list-style: none; padding: 0 40px 0 0; position: relative; }
.stages li + li { padding-left: 40px; }
.stages .stage-marker { display: flex; align-items: center; gap: 10px; }
.stages .dot {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.stages li:nth-child(1) .dot { background: var(--cobre); }
.stages li:nth-child(2) .dot { border: 2px solid var(--gris); }
.stages li:nth-child(3) .dot { border: 2px dashed var(--gris); }
.stages .here {
  font: 600 11px var(--font-body);
  letter-spacing: 0.14em;
  background: var(--negro);
  color: var(--blanco);
  padding: 4px 10px;
  border-radius: 999px;
}
.stages h3 { margin-top: 18px; font-size: 20px; font-weight: 600; }
.stages p { margin: 10px 0 0; font: 400 15.5px/24px var(--font-body); color: rgba(17, 20, 24, .72); }

.stage-footer {
  margin-top: 56px;
  border-top: 1px solid rgba(17, 20, 24, .14);
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.stage-footer p { margin: 0; font: 600 17px var(--font-body); }
.microsignals { display: flex; gap: 22px; flex-wrap: wrap; margin: 0; padding: 0; }
.microsignals li {
  list-style: none;
  font: 500 14px var(--font-body);
  color: var(--gris);
  display: flex;
  align-items: center;
  gap: 7px;
}
.microsignals li::before {
  content: "";
  width: 10px;
  height: 2px;
  background: var(--cobre);
}

/* Formulario de registro --------------------------------------------------- */

.register-wrap { padding-bottom: 112px; }

.register {
  background: var(--onix);
  color: var(--blanco);
  border-radius: var(--radius-panel);
  display: grid;
  grid-template-columns: 400px 1fr;
  overflow: hidden;
}

.register__context { padding: 52px 44px; }
.register__context h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 40px;
  font-weight: 650;
  color: var(--blanco);
}
.register__context .lead { font-size: 16px; line-height: 26px; color: rgba(247, 248, 245, .72); margin-top: 18px; }
.register__context ul { margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.register__context li {
  list-style: none;
  font: 500 14px var(--font-body);
  color: rgba(247, 248, 245, .75);
  display: flex;
  align-items: center;
  gap: 9px;
}
.register__context li::before { content: ""; width: 10px; height: 2px; background: var(--cobre); }
.register__privacy {
  margin: 40px 0 0;
  border-top: 1px solid rgba(247, 248, 245, .14);
  padding-top: 18px;
  font: 400 13px/20px var(--font-body);
  color: var(--gris);
}

.register__form { background: var(--blanco); color: var(--negro); padding: 52px 56px; }

/* Stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
}
.stepper li { list-style: none; display: flex; align-items: center; gap: 8px; }
.stepper .connector { flex: 1; height: 2px; background: rgba(17, 20, 24, .12); transition: background-color var(--dur-micro); }
.stepper .connector.is-done { background: var(--cobre); }
.stepper .step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--gris);
  color: var(--gris);
  font: 600 13px var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background-color var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);
}
.stepper .step-name { font: 500 14px var(--font-body); color: var(--gris); white-space: nowrap; }
.stepper li.is-active .step-dot { background: var(--cobre); border-color: var(--cobre); color: var(--negro); }
.stepper li.is-active .step-name { color: var(--negro); font-weight: 600; }
.stepper li.is-done .step-dot { background: var(--negro); border-color: var(--negro); color: transparent; }
.stepper li.is-done .step-dot::after {
  content: "";
  width: 12px; height: 6px;
  background: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8" fill="none"><path d="M1 6h4l3-4h7" stroke="%23C9822B" stroke-width="2"/></svg>');
}
.stepper li.is-done .step-name { color: var(--negro); }

/* Pasos */
.form-step { margin-top: 36px; display: flex; flex-direction: column; gap: 22px; }
.form-step[hidden] { display: none; }
.form-step.is-entering { animation: step-in var(--dur-micro) var(--ease-out); }
@keyframes step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.field label, .field .field-label {
  display: block;
  font: 600 14px var(--font-body);
  color: var(--negro);
  margin-bottom: 8px;
}
.field .optional { font: 400 12.5px var(--font-body); color: var(--gris); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  border: 1px solid rgba(17, 20, 24, .28);
  border-radius: var(--radius-field);
  min-height: 48px;
  padding: 0 16px;
  font: 400 16px var(--font-body);
  color: var(--negro);
  background: #fff;
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
}
.field textarea { padding: 12px 16px; min-height: 96px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" fill="none"><path d="M1 1l5 5 5-5" stroke="%23737B84" stroke-width="1.8"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.field :is(input, select, textarea):focus {
  outline: none;
  border: 2px solid var(--cobre);
  box-shadow: 0 0 0 3px rgba(201, 130, 43, .18);
}

.field.has-error :is(input, select, textarea) { border: 2px solid var(--error); }
.field-error {
  display: none;
  margin-top: 7px;
  align-items: center;
  gap: 7px;
  font: 500 13px var(--font-body);
  color: var(--error);
}
.field.has-error .field-error { display: flex; }
.field-error::before {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  background: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><circle cx="7" cy="7" r="6" stroke="%239B3B2A" stroke-width="1.6"/><path d="M7 3.6v4" stroke="%239B3B2A" stroke-width="1.6"/><circle cx="7" cy="10" r=".9" fill="%239B3B2A"/></svg>');
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Chips (radio / checkbox) */
.chips { border: 0; margin: 0; padding: 0; }
.chips legend {
  display: block;
  font: 600 14px var(--font-body);
  color: var(--negro);
  margin-bottom: 8px;
  padding: 0;
}
.chips legend .optional { font: 400 12.5px var(--font-body); color: var(--gris); }
.chips__list { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(17, 20, 24, .28);
  border-radius: 999px;
  padding: 11px 20px;
  font: 500 14.5px var(--font-body);
  color: var(--negro);
  background: #fff;
  min-height: 44px;
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
}
.chip:hover span { border-color: var(--negro); }
.chip input:focus-visible + span { outline: 3px solid var(--cobre); outline-offset: 2px; }
.chip input:checked + span {
  border: 2px solid var(--cobre);
  padding: 10px 19px;
  font-weight: 600;
}
.chip input:checked + span::before {
  content: "";
  width: 15px; height: 8px;
  background: no-repeat center / contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8" fill="none"><path d="M1 6h4l3-4h7" stroke="%23C9822B" stroke-width="1.7"/></svg>');
}
.chips.has-error .chip span { border-color: var(--error); }

/* Consentimiento */
.consent { display: flex; gap: 12px; align-items: flex-start; position: relative; }
.consent input {
  appearance: none;
  flex: none;
  width: 20px; height: 20px;
  border: 2px solid rgba(17, 20, 24, .4);
  border-radius: 5px;
  margin: 2px 0 0;
  cursor: pointer;
  background: #fff;
  transition: background-color var(--dur-micro), border-color var(--dur-micro);
}
.consent input:checked {
  background: var(--cobre) no-repeat center / 12px 6px
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8" fill="none"><path d="M1 6h4l3-4h7" stroke="%23111418" stroke-width="2"/></svg>');
  border-color: var(--cobre);
}
.consent label { font: 400 13.5px/20px var(--font-body); color: var(--negro); cursor: pointer; }
.consent.has-error input { border-color: var(--error); }
.consent .field-error { width: 100%; }

.form-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 4px; }
.form-nav .btn { font-size: 15px; padding: 14px 28px; }
.form-nav .btn--submit { min-width: 206px; }

/* Confirmación / error general */
.form-result { text-align: center; padding: 8px 0; }
.form-result[hidden] { display: none; }
.form-result .result-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--cobre);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-result--error .result-icon { border-color: var(--error); }
.form-result h3 { margin-top: 22px; font-size: 28px; line-height: 35px; font-weight: 650; }
.form-result > p { margin: 14px auto 0; font: 400 15.5px/24px var(--font-body); color: rgba(17, 20, 24, .72); max-width: 46em; }

.result-summary {
  margin-top: 28px;
  background: var(--marfil);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.result-summary dt { font: 600 11px var(--font-body); letter-spacing: 0.1em; color: var(--gris); text-transform: uppercase; }
.result-summary dd { margin: 4px 0 0; font: 500 14.5px var(--font-body); color: var(--negro); }
.result-summary div { margin: 0; }

.form-result .btn { margin-top: 28px; }

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

.faq { max-width: 820px; margin: 0 auto; }
.faq .kicker { justify-content: center; }
.faq h2 { text-align: center; margin-left: auto; margin-right: auto; font-size: 40px; line-height: 48px; }

.faq__list { margin-top: 56px; border-top: 1px solid rgba(17, 20, 24, .14); }

.faq__item { border-bottom: 1px solid rgba(17, 20, 24, .14); }
.faq__trigger {
  width: 100%;
  background: none;
  border: 0;
  padding: 24px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  text-align: left;
  min-height: 44px;
}
.faq__trigger .q { font: 600 17px/24px var(--font-body); color: var(--negro); }
.faq__trigger .hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px var(--font-body);
  color: var(--gris);
  flex: none;
  white-space: nowrap;
}
.faq__trigger .hint svg { transition: transform 260ms var(--ease-out); }
.faq__item.is-open .hint svg { transform: rotate(180deg); }
.faq__item.is-open .hint { color: var(--negro); }

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms var(--ease-out);
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer > div { overflow: hidden; }
.faq__answer p {
  margin: 0;
  padding: 0 4px 24px;
  font: 400 15.5px/24px var(--font-body);
  color: rgba(17, 20, 24, .75);
  max-width: 60ch;
}

/* CTA final + footer ------------------------------------------------------- */

.final { padding: 112px 0 0; }
.final__cta { text-align: center; max-width: 820px; margin: 0 auto; }
.final__cta h2 { color: var(--blanco); margin: 0 auto; }
.final__cta p { margin: 22px 0 0; font: 400 18px/29px var(--font-body); color: rgba(247, 248, 245, .75); }
.final__cta .btn { margin-top: 32px; font-size: 17px; padding: 16px 34px; }
.final__cta .microcopy { margin: 16px 0 0; font: 400 13.5px var(--font-body); color: var(--gris); }

.site-footer {
  margin-top: 96px;
  border-top: 1px solid rgba(247, 248, 245, .12);
  padding: 44px 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.site-footer .brand img { height: 26px; }
.site-footer__id p {
  margin: 18px 0 0;
  font: 400 14px/22px var(--font-body);
  color: rgba(247, 248, 245, .7);
  max-width: 34em;
}
.site-footer__slogan {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 14px var(--font-display);
  color: var(--blanco);
}
.site-footer__links { display: flex; gap: 36px; flex-wrap: wrap; margin: 0; padding: 0; }
.site-footer__links li { list-style: none; }
.site-footer__links span {
  font: 500 14px var(--font-body);
  color: rgba(247, 248, 245, .72);
  border-bottom: 1px dashed var(--gris);
  padding-bottom: 2px;
}
.site-footer__note { margin: 0; font: 400 13px var(--font-body); color: var(--gris); }

/* Scroll reveal ------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive — tablet ≤ 1024
   ========================================================================== */

@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .section { padding: 88px 0; }
  .section h2 { font-size: 36px; line-height: 44px; }

  .site-nav { display: none; }
  .menu-toggle { display: flex; }
  .site-header__inner { height: 64px; }
  .hero { margin-top: -64px; padding-top: calc(64px + 64px); padding-bottom: 72px; }
  .site-header .btn { padding: 10px 18px; font-size: 14px; }

  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero h1 { font-size: 44px; line-height: 50px; max-width: 16ch; }

  .results-track ol { grid-template-columns: 1fr 1fr; gap: 40px 0; }
  .results-track::before { display: none; }
  .results-track li { border-left: 0 !important; padding: 0 24px 0 0 !important; }

  .rules { grid-template-columns: repeat(2, 1fr); }
  .impl-track { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .impl-track::before { display: none; }
  .impl-panels { grid-template-columns: 1fr; }

  .register { grid-template-columns: 1fr; }
  .register__form { padding: 44px 36px; }

  .blindspot-questions { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Responsive — móvil ≤ 720
   ========================================================================== */

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .section h2 { font-size: 31px; line-height: 38px; }
  .section .lead { font-size: 16px; line-height: 26px; }

  .site-header__inner { height: 60px; }
  .hero { margin-top: -60px; padding-top: calc(44px + 60px); padding-bottom: 56px; }
  .brand img { height: 24px; }

  .hero h1 { font-size: 40px; line-height: 46px; margin-top: 20px; }
  .hero__sub { font-size: 17px; line-height: 27px; margin-top: 18px; }
  .hero__ctas { flex-direction: column; margin-top: 24px; }
  .hero__ctas .btn { width: 100%; }
  .hero__trust { text-align: center; }
  .hero__badge { font-size: 10px; letter-spacing: 0.12em; }

  /* Núcleo vertical */
  .nucleo { display: flex; flex-direction: column; align-items: stretch; }
  .nucleo__trace { display: none; }
  .nucleo__arrow { display: flex; }
  .nucleo__inputs { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .nucleo__inputs li { padding: 8px 12px; font-size: 13px; }
  .nucleo__core ul { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; }
  .nucleo__core li { font-size: 13px; }
  .nucleo__outputs { gap: 9px; margin-top: 0; }
  .nucleo__outputs li { align-items: center; font-size: 13.5px; }
  .nucleo__outputs li svg { margin-top: 0; }

  /* Resultados: lista vertical con riel */
  .results-track { margin-top: 36px; position: relative; padding-left: 22px; }
  .results-track::before {
    display: block;
    left: 5px; right: auto; top: 6px; bottom: 6px;
    width: 2px; height: auto;
    background: var(--cobre);
  }
  .results-track ol { display: flex; flex-direction: column; gap: 26px; }
  .results-track li { padding: 0 !important; position: relative; }
  .results-track .dot { position: absolute; left: -22px; top: 5px; margin-left: -5px; }
  .results-track .num { margin-top: 0; }
  .results-track h3 { font-size: 18px; line-height: 24px; }

  /* Ruta de puntos ciegos: vertical */
  .route { display: flex; flex-direction: column; margin-top: 36px; padding-left: 24px; }
  .route li { padding: 0 0 22px; }
  .route .node { position: absolute; left: -24px; top: 4px; }
  .route li + li::before {
    left: -19px;
    top: auto;
    bottom: calc(100% - 4px);
    width: 0;
    height: 18px;
    border-top: 0;
    border-left: 2px solid var(--negro);
  }
  .route li + li.is-cut::before { border-left: 2px dashed var(--gris); }
  .blindspot-questions { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .pull-quote { margin-top: 36px; }
  .pull-quote p { font-size: 21px; line-height: 29px; }
  .pull-quote svg { display: none; }

  /* Comparador apilado */
  .compare { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .compare__bridge { display: flex; }
  .compare__scattered li { margin-left: 0 !important; }
  .compare__scattered li:nth-child(odd) { margin-right: 24px !important; }
  .compare__scattered li:nth-child(even) { margin-right: 0 !important; margin-left: 20px !important; }

  /* Capas */
  .layer { flex-direction: column; gap: 14px; padding: 16px 18px; }
  .layer__head { width: auto; }
  .tag { padding: 7px 11px; font-size: 12.5px; }

  /* Mapa: bloques verticales */
  .map__headings { display: none; }
  .map__row, .map__row--featured {
    display: block;
    padding: 16px 18px;
  }
  .map__row > svg { display: none; }
  .map__step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 5px;
    font: 600 10px var(--font-body);
    letter-spacing: 0.13em;
    color: var(--cobre);
  }
  .map__step-label::before {
    content: "";
    width: 10px; height: 16px;
    background: no-repeat center / contain
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" fill="none"><path d="M5 0v11M1.5 8.5L5 13l3.5-4.5" stroke="%23C9822B" stroke-width="1.6"/></svg>');
  }
  .map__step-label--effect { color: var(--gris); }

  .rules { grid-template-columns: 1fr; }
  .roles__panel p { font-size: 20px; line-height: 29px; }

  .impl-track { grid-template-columns: 1fr; gap: 32px; }
  .impl-benefits ul { grid-template-columns: 1fr; }
  .impl-benefits { padding: 24px 20px; }

  .stages { display: flex; flex-direction: column; gap: 32px; }
  .stages::before { display: none; }
  .stages li { padding: 0 !important; }

  .register__context { padding: 36px 24px; }
  .register__context h2 { font-size: 26px; line-height: 33px; }
  .register__form { padding: 36px 20px; }
  .grid-2 { grid-template-columns: 1fr; }
  .stepper .step-name { display: none; }
  .stepper li.is-active .step-name { display: inline; }
  .form-nav { flex-wrap: wrap; }
  .form-nav .btn { flex: 1; }
  .result-summary { grid-template-columns: 1fr; }

  .faq h2 { font-size: 28px; line-height: 35px; }
  .faq__trigger .q { font-size: 15.5px; line-height: 22px; }

  .final { padding-top: 64px; }
  .final__cta h2 { font-size: 31px; line-height: 38px; }
  .final__cta .btn { width: 100%; }
  .site-footer { margin-top: 64px; flex-direction: column; gap: 28px; }
  .site-footer__links { flex-direction: column; gap: 14px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .trace-anim path { stroke-dashoffset: 0; }
  .btn:hover { transform: none; }
}

/* ==========================================================================
   MOTION PREMIUM v2 — Capa aditiva (contenida, B2B)
   Todo se activa con body.js-motion (JS presente y sin reduced-motion).
   Sin JS o con reduced-motion, la landing se ve exactamente como V1.
   ========================================================================== */

/* --- 0. Barra de progreso de scroll (control operativo visible) ---------- */
.kx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cobre), #E0A54E);
  z-index: 300;
  pointer-events: none;
  will-change: transform;
}

/* --- 1. Profundidad del hero (tonal, sin glow de cobre) -------------------
   El cobre es señal de acción, no decoración (PRD §10: "No usar glow").
   La profundidad se construye con grafito tonal sobre ónix, no con un halo. */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 2; }
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -25%; right: -12%;
  width: 760px; height: 760px;
  background: radial-gradient(circle at center, rgba(28,35,43,.85), rgba(28,35,43,0) 60%);
  pointer-events: none;
}
/* Malla de rejilla decorativa retirada: la profundidad del hero es tonal (grafito
   sobre ónix), no una cuadrícula genérica. Si más adelante se quiere textura
   técnica, resolverla con el motivo propio (Trazo de Control), no con un grid. */
/* La profundidad tonal del hero es estática: sin resplandor que respire. */

/* --- 2. Entrada escalonada del hero -------------------------------------- */
body.js-motion .hero__badge,
body.js-motion .hero h1,
body.js-motion .hero__sub,
body.js-motion .hero__results,
body.js-motion .hero__ctas,
body.js-motion .hero__trust,
body.js-motion .hero__slogan,
body.js-motion .nucleo {
  opacity: 0;
  transform: translateY(16px);
}
body.js-motion.hero-in .hero__badge,
body.js-motion.hero-in .hero h1,
body.js-motion.hero-in .hero__sub,
body.js-motion.hero-in .hero__results,
body.js-motion.hero-in .hero__ctas,
body.js-motion.hero-in .hero__trust,
body.js-motion.hero-in .hero__slogan,
body.js-motion.hero-in .nucleo {
  animation: kx-hero-in 520ms var(--ease-out) forwards;
}
body.js-motion.hero-in .hero__badge   { animation-delay: 40ms; }
body.js-motion.hero-in .hero h1        { animation-delay: 90ms; }
body.js-motion.hero-in .hero__sub      { animation-delay: 150ms; }
body.js-motion.hero-in .hero__results  { animation-delay: 200ms; }
body.js-motion.hero-in .hero__ctas     { animation-delay: 250ms; }
body.js-motion.hero-in .hero__trust    { animation-delay: 300ms; }
body.js-motion.hero-in .hero__slogan   { animation-delay: 350ms; }
body.js-motion.hero-in .nucleo         { animation-delay: 300ms; }
@keyframes kx-hero-in {
  to { opacity: 1; transform: none; }
}

/* --- 3. Núcleo vivo: solo el pulso discreto del indicador ----------------- */
.nucleo__core { position: relative; }
.nucleo__core-label { position: relative; display: flex; align-items: center; }
body.js-motion .nucleo__core-label::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--cobre);
  box-shadow: 0 0 0 0 rgba(201,130,43,.55);
  animation: kx-pulse 2.4s var(--ease-out) infinite;
}
/* Entradas del núcleo: micro-lift al pasar el cursor */
.nucleo__inputs li { transition: border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.nucleo__inputs li:hover { border-color: rgba(201,130,43,.5); }
@media (hover: hover) and (pointer: fine) {
  .nucleo__inputs li:hover { transform: translateX(3px); }
}

/* --- 4. CTA primario: barrido de luz + empuje --------------------------- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-217%) skewX(-18deg);
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  body.js-motion .btn--primary:hover::after { animation: kx-sheen 450ms var(--ease-out); }
}
@keyframes kx-sheen { to { transform: translateX(217%) skewX(-18deg); } }

/* --- 5. Rieles de continuidad que se dibujan al entrar (solo desktop) ---- */
@media (min-width: 1025px) {
  body.js-motion .results-track.kx-rail::before,
  body.js-motion .impl-track.kx-rail::before,
  body.js-motion .stages.kx-rail::before {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 900ms var(--ease-out);
  }
  body.js-motion .results-track.kx-rail.is-drawn::before,
  body.js-motion .impl-track.kx-rail.is-drawn::before,
  body.js-motion .stages.kx-rail.is-drawn::before {
    transform: scaleX(1);
  }
}

/* --- 6. Realce de interacción en tarjetas clave -------------------------- */
.results-track li, .impl-track li { transition: transform var(--dur-micro) var(--ease-out); }
.map__row--featured { transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.map__row--featured:hover { box-shadow: 0 6px 24px rgba(17,20,24,.08); border-color: rgba(201,130,43,.45); }

/* --- 7. Respeto absoluto a movimiento reducido -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kx-progress { display: none; }
  body.js-motion .hero__badge,
  body.js-motion .hero h1,
  body.js-motion .hero__sub,
  body.js-motion .hero__results,
  body.js-motion .hero__ctas,
  body.js-motion .hero__trust,
  body.js-motion .hero__slogan,
  body.js-motion .nucleo { opacity: 1; transform: none; animation: none; }
  body.js-motion .hero::before,
  body.js-motion .nucleo__core,
  body.js-motion .nucleo__core-label::after { animation: none; }
  body.js-motion .results-track.kx-rail::before,
  body.js-motion .impl-track.kx-rail::before,
  body.js-motion .stages.kx-rail::before { transform: none; transition: none; }
}

/* ==========================================================================
   ACCESIBILIDAD Y CALIDAD v3 — Capa aditiva
   Correcciones de contraste (WCAG 2.2 AA), área táctil, layout de tablet
   y rendimiento de animación. No altera copy, paleta ni tipografías.
   ========================================================================== */

/* --- A. Contraste de texto secundario ------------------------------------
   Sustituye `color: var(--gris)` allí donde el gris funciona como TEXTO.
   Los usos de --gris como borde, nodo o trazo se conservan intactos. */

/* A.1 — sobre fondos claros (Blanco Técnico / Marfil) */
.kicker,
.results-track .num,
.route .issue,
.layer__num,
.map__headings,
.map__detail,
.impl-track .num,
.impl-benefits__label,
.impl-note__label,
.microsignals li,
.stepper .step-name,
.stepper .step-dot,
.field .optional,
.chips legend .optional,
.result-summary dt,
.faq__trigger .hint { color: var(--txt-2-claro); }

/* A.2 — sobre fondos oscuros (Ónix / Grafito) */
.mobile-menu p,
.hero__trust,
.nucleo__col-label,
.compare__label,
.roles__label,
.roles__tabs button,
.register__privacy,
.final__cta .microcopy,
.site-footer__note { color: var(--txt-2-oscuro); }

/* A.3 — Modificadores y estados que deben seguir ganando.
   Van después porque tienen la misma especificidad (una clase) que las reglas
   de arriba: sin esto, las variantes en cobre sobre fondo oscuro quedarían
   pintadas con el color de texto claro y resultarían ilegibles. */
.kicker--copper { color: var(--cobre); }
.compare__label--copper { color: var(--cobre); }
.roles__tabs button:hover,
.roles__tabs button[aria-selected="true"] { color: var(--blanco); }

/* --- B. Contraste de bordes de control (WCAG 1.4.11 · 3:1) ----------------
   rgba(17,20,24,.28) sobre blanco solo alcanza 1.88:1. */
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea { border-color: var(--borde-ui); }

.chip span { border-color: var(--borde-ui); }
.consent input { border-color: var(--borde-ui); }

/* El foco y el error conservan prioridad visual */
.field :is(input, select, textarea):focus { border-color: var(--cobre); }
.field.has-error :is(input, select, textarea) { border-color: var(--error); }
.chips.has-error .chip span { border-color: var(--error); }
.consent.has-error input { border-color: var(--error); }
.chip input:checked + span { border-color: var(--cobre); }

/* --- C. Botón primario en estado de carga --------------------------------
   El texto "Registrando…" es información, no adorno: debe leerse.
   rgba(17,20,24,.75) sobre #B27529 daba 3.53:1; el negro sólido da 4.81:1. */
.btn--primary:disabled { color: var(--negro); }

/* --- D. Área táctil de la navegación (WCAG 2.2 SC 2.5.8 · mín. 24×24) -----
   Los enlaces medían 23 px de alto. Se amplía el área activa sin mover nada. */
.site-nav a { position: relative; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* --- E. Pestañas por rol: afordancia de desplazamiento --------------------
   El contenedor tiene overflow-x:auto con la barra oculta; en móvil 4 de las
   5 pestañas quedan fuera de vista sin ninguna señal. Sombras de scroll que
   aparecen solo cuando hay contenido oculto de ese lado. */
.roles__tabs {
  background:
    linear-gradient(90deg, var(--onix) 40%, rgba(11, 15, 20, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(90deg, rgba(11, 15, 20, 0), var(--onix) 60%) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(201, 130, 43, .5), rgba(201, 130, 43, 0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(201, 130, 43, .5), rgba(201, 130, 43, 0)) right center / 16px 100% no-repeat scroll;
  scroll-snap-type: x proximity;
}
.roles__tabs button { scroll-snap-align: start; }

/* --- F. Layout de tablet: ruta y mapa ------------------------------------
   Entre 721 y 1024 px la ruta mantenía 7 columnas: a 768 px cada columna
   medía 85 px con etiquetas de hasta 98 px ("Cotización sin próxima acción").
   El mapa mantenía 5 columnas: la de problema quedaba en 168 px.
   Se adelanta el apilado vertical de ambos al breakpoint de tablet. */
@media (max-width: 1024px) {
  .route {
    display: flex;
    flex-direction: column;
    margin-top: 36px;
    padding-left: 24px;
    grid-template-columns: none;
  }
  .route li { padding: 0 0 22px; }
  .route .node { position: absolute; left: -24px; top: 4px; }
  .route li + li::before {
    left: -19px;
    top: auto;
    bottom: calc(100% - 4px);
    width: 0;
    height: 18px;
    border-top: 0;
    border-left: 2px solid var(--negro);
  }
  .route li + li.is-cut::before { border-left: 2px dashed var(--gris); }

  .map__headings { display: none; }
  .map__row, .map__row--featured { display: block; padding: 18px 22px; }
  .map__row > svg { display: none; }
  .map__step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 5px;
    font: 600 10px var(--font-body);
    letter-spacing: 0.13em;
    color: var(--txt-2-claro);
  }
  .map__step-label::before {
    content: "";
    width: 10px; height: 16px;
    background: no-repeat center / contain
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" fill="none"><path d="M5 0v11M1.5 8.5L5 13l3.5-4.5" stroke="%23C9822B" stroke-width="1.6"/></svg>');
  }
}

/* --- G. Rendimiento de las animaciones perpetuas -------------------------
   `kx-core-breathe` y `kx-pulse` animaban box-shadow en bucle infinito, lo que
   fuerza repintado continuo fuera del compositor. Se reescriben con opacity y
   transform sobre pseudo-elementos: mismo resultado visual, sin repintado. */

/* El núcleo se define por su borde de cobre y su fondo grafito, no por un halo.
   Se retira el resplandor de cobre que respiraba (cobre = señal, no decoración). */
body.js-motion .nucleo__core { animation: none; }

/* El punto indicador conserva su aspecto; el anillo pasa a ser transform */
body.js-motion .nucleo__core-label::after {
  box-shadow: none;
  animation: none;
}
body.js-motion .nucleo__core-label::before {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: rgba(201, 130, 43, .45);
  pointer-events: none;
  animation: kx-pulse-ring 2.4s var(--ease-out) infinite;
}
@keyframes kx-pulse-ring {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.6); opacity: 0; }
  100% { transform: scale(3.6); opacity: 0; }
}

/* Fuera de pantalla no hay nada que animar: se detiene el trabajo del hilo */
body.js-motion .hero.kx-idle::before,
body.js-motion .kx-idle .nucleo__core::after,
body.js-motion .kx-idle .nucleo__core-label::before { animation-play-state: paused; }

/* --- H. Movimiento reducido: cobertura de la capa nueva ------------------ */
@media (prefers-reduced-motion: reduce) {
  body.js-motion .nucleo__core::after,
  body.js-motion .nucleo__core-label::before { animation: none; opacity: 0; }
  .roles__tabs { scroll-snap-type: none; }
}

/* ==========================================================================
   Narrativa por capítulos: cronología del miedo → control (neuroventas)
   ========================================================================== */

/* Marcador de capítulo: número en cobre + tema. Reusa el lenguaje del kicker. */
.chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 12.5px var(--font-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 6px;
}
.chapter .ch-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(201, 130, 43, .5);
  border-radius: 999px;
  color: var(--cobre);
  font-size: 12px;
  letter-spacing: 0.08em;
}
/* En secciones oscuras el borde del número necesita algo más de presencia. */
.bg-onix .chapter, .bg-grafito .chapter { color: rgba(247, 248, 245, .55); }

/* La frase-miedo: la voz interna del cliente, antes de la salida (el H2). */
.fear {
  font: 500 21px/31px var(--font-body);
  max-width: 24ch;
  margin: 16px 0 0;
  opacity: .9;
}
.fear strong { font-weight: 600; }
.section .fear + h2 { margin-top: 14px; }

/* Beat de Kurvi: su momento propio, pero dentro de KURVIAX (panel grafito). */
.kurvi {
  margin-top: 52px;
  padding: 34px 36px;
  background: var(--grafito);
  color: var(--blanco);
  border: 1px solid rgba(201, 130, 43, .4);
  border-radius: var(--radius-panel);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 28px 44px;
  align-items: center;
}
.kurvi__label {
  display: flex; align-items: center; gap: 10px;
  font: 700 12px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cobre); margin: 0 0 14px;
}
.kurvi__label img { width: 26px; height: 26px; }
.kurvi h3 { font: 650 28px/34px var(--font-display); margin: 0; letter-spacing: -0.01em; }
.kurvi p { margin: 16px 0 0; font-size: 17px; line-height: 27px; color: rgba(247, 248, 245, .82); }
.kurvi__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.kurvi__chips span {
  font: 500 13.5px var(--font-body); color: var(--blanco);
  padding: 6px 12px; border: 1px solid rgba(247, 248, 245, .18); border-radius: 999px;
}
.kurvi__guard {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px; padding-top: 20px;
  border-top: 1px solid rgba(247, 248, 245, .12);
  font-size: 15px; line-height: 22px; color: rgba(247, 248, 245, .78);
}
.kurvi__guard svg { flex: none; }

@media (max-width: 900px) {
  .kurvi { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .fear { font-size: 19px; line-height: 28px; max-width: none; }
}