/* ==========================================================================
   EFEX MEX — hoja de estilo de la landing
   --------------------------------------------------------------------------
   Registro: landing comercial B2B para clientes, en la línea de efex.com,
   adaptada a EFEX MEX: solo México, solo pesos. Marca tomada del sitio real
   de EFEX (azul #006BF8, DM Sans + Inter).

   TEMA OSCURO ÚNICO — deliberadamente sin rama prefers-color-scheme: light.
   El requisito es cero fondos claros; la única superficie clara legítima es
   el papel, y eso lo cubre @media print al final del archivo.

   Contrastes verificados (WCAG 2.1) contra --base #05070E:
     --text-1 #E9EDF7  14.4:1 peor caso   AAA
     --text-2 #AEB9D1   8.6:1 peor caso   AAA
     --text-3 #A6B2C7   5.1:1 peor caso   AA cuerpo (sobre nebulosa)
     --accent #0067EE   4.0:1             gráficos (3:1) — NO para texto
     --accent-text #3D95FF 5.6:1          AA cuerpo — enlaces
     --focus  #6FB2FF   7.6:1             AAA
   Etiqueta sobre relleno --accent: BLANCO 5.03:1 PASA. El azul del logo real
   es #0067EE; el #0877FF del sitio anterior nunca fue color de marca.

   Reglas de mantenimiento:
   - Los primitivos (--navy-*, --blue-*) solo se consumen desde tokens
     semánticos. Ninguna regla de componente los referencia directamente.
   - Sin valores de espaciado arbitrarios: usar la escala --s-*.
   - Radios de registro comercial: 8 / 14 / 22px y pill.
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ========================================================================== */
/* TOKENS                                                                      */
/* ========================================================================== */

@layer tokens {
  :root {
    color-scheme: dark;

    /* --- primitivos de marca (medidos del logo real) ------------------- */
    --navy-brand: #000c38;
    --blue-brand: #006bf8;

    /* --- escalera de sustrato ------------------------------------------ */
    --void: #02040c;
    --base: #05070e;
    --sunken: #04070f;
    --surface-1: #0a0e1a;
    --surface-2: #0e1529;
    --surface-3: #131c34;

    /* --- hairlines y bordes ------------------------------------------- */
    --rule-faint: rgba(148, 170, 214, 0.09);
    --rule: rgba(148, 170, 214, 0.14);
    --rule-strong: rgba(148, 170, 214, 0.24);
    --rule-lit: rgba(255, 255, 255, 0.05);
    --border-interactive: #5c6a8a;

    /* --- texto -------------------------------------------------------- */
    --text-0: #f4f7fd;
    --text-1: #e9edf7;
    --text-2: #aeb9d1;
    /* Aclarado de #7C89A6: sobre los nucleos mas brillantes de la nebulosa
       aquel caia a 3.12:1 y rompia AA. Con #A6B2C7 el peor caso queda en
       5.12:1 y sobre la base plana sube a 9.41:1. */
    --text-3: #a6b2c7;
    --text-4: #5b6780;

    /* --- acento -------------------------------------------------------- */
    --accent: var(--blue-brand);
    --accent-on: #ffffff;
    --accent-text: #3d95ff;
    --focus: #6fb2ff;

    /* --- latón: exclusivo del aparato regulatorio/legal ---------------- */
    --brass: #d8a657;
    --brass-rule: rgba(216, 166, 87, 0.34);

    /* --- marcadores de estado documental (sin semántica de color) ------ */
    --mark-full: var(--focus);
    --mark-half: var(--text-3);
    --mark-open: #43506e;

    /* --- tipografía --------------------------------------------------- */
    /* Fuentes reales de la marca EFEX, tomadas de efex.com. */
    --font-display: "DM Sans", Inter, system-ui, -apple-system, sans-serif;
    --font-sans: Inter, "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "DM Mono", Consolas, monospace;

    --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.75rem);
    --fs-h1: clamp(2.5rem, 1.7rem + 2.6vw, 3.5rem);
    --fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
    --fs-h3: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
    --fs-h4: 1.0625rem;
    --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
    --fs-body: 1.0625rem;
    --fs-body-sm: 0.9375rem;
    --fs-caption: 0.8125rem;
    --fs-label: 0.6875rem;
    --fs-data: 0.875rem;
    --fs-data-lg: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --fs-micro: 0.625rem;

    /* --- espaciado (base 4px) ------------------------------------------ */
    --s-1: 2px;
    --s-2: 4px;
    --s-3: 8px;
    --s-4: 12px;
    --s-5: 16px;
    --s-6: 20px;
    --s-7: 24px;
    --s-8: 32px;
    --s-9: 40px;
    --s-10: 48px;
    --s-11: 64px;
    --s-12: 80px;

    /* --- geometría ---------------------------------------------------- */
    --r-1: 8px;
    --r-2: 14px;
    --r-3: 22px;
    --r-pill: 999px;
    --chamfer: 14px;

    --w-content: 1224px;
    --w-wide: 1440px;
    --w-prose: 68ch;
    --gutter: clamp(20px, 4vw, 64px);
    --rail: 72px;
    --rail-gap: 32px;

    /* --- movimiento ---------------------------------------------------- */
    --dur-instant: 90ms;
    --dur-fast: 140ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
    --dur-reveal: 520ms;
    --ease-out: cubic-bezier(0.2, 0.7, 0.25, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- capas -------------------------------------------------------- */
    --z-header: 40;
    --z-drawer: 60;
    --z-progress: 70;
    --z-grain: 100;
  }
}

/* ========================================================================== */
/* BASE                                                                        */
/* ========================================================================== */

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

  html {
    /* Pintado explícito para que el área de overscroll no muestre blanco. */
    background: var(--base);
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    /* Transparente a proposito. El color base lo pinta html (arriba): si body
       tuviera fondo opaco, el campo espacial —que usa z-index: -1— quedaria
       pintado por detras de el y seria invisible. Es el motivo por el que la
       primera version del fondo no se veia en absoluto. */
    background: transparent;
    color: var(--text-1);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.7;
    font-variant-numeric: lining-nums;
    /* Antihalación: sobre casi-negro la tinta clara sangra. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }

  /* Grano de película: hace que el sustrato lea como material y no como
     valor hexadecimal. Archivo, no data-URI, para que la CSP pueda ser
     estricta (img-src 'self'). */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    background-image: url("/assets/brand/v1/grain.svg");
    background-repeat: repeat;
    opacity: 0.038;
    mix-blend-mode: soft-light;
  }

  body.is-locked {
    overflow: hidden;
  }

  h1,
  h2,
  h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-optical-sizing: auto;
    color: var(--text-1);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-h1);
    line-height: 1.06;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: var(--fs-h2);
    line-height: 1.1;
    letter-spacing: -0.016em;
  }

  h3 {
    font-size: var(--fs-h3);
    line-height: 1.22;
    letter-spacing: -0.012em;
  }

  /* Los títulos de tarjeta son aparato, no argumento: van en sans. */
  h4 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.004em;
    color: var(--text-1);
  }

  p {
    margin: 0;
    text-wrap: pretty;
    hyphens: manual;
  }

  a {
    color: var(--accent-text);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

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

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  ::selection {
    /* 9.8:1 — los defaults del navegador sobre oscuro suelen ser ilegibles. */
    background: #123a86;
    color: #f2f6ff;
  }

  /* El halo oscuro es imprescindible: --focus sobre un relleno azul da 1.86:1
     y sería invisible sin separador. */
  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(4, 7, 15, 0.9);
    border-radius: inherit;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  html {
    scrollbar-color: #2a3450 var(--sunken);
    scrollbar-width: thin;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--sunken);
  }

  ::-webkit-scrollbar-thumb {
    background: #2a3450;
    border-radius: 0;
    border-inline: 3px solid var(--sunken);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #3a4768;
  }

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

  .skip-link {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    z-index: calc(var(--z-grain) + 1);
    padding: var(--s-4) var(--s-6);
    background: var(--surface-3);
    border: 1px solid var(--border-interactive);
    border-radius: var(--r-2);
    color: var(--text-1);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    transform: translateY(-200%);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }
}

/* ========================================================================== */
/* LAYOUT                                                                      */
/* ========================================================================== */

@layer layout {
  .container {
    width: min(100% - (var(--gutter) * 2), var(--w-content));
    margin-inline: auto;
  }

  .container--wide {
    width: min(100% - (var(--gutter) * 2), var(--w-wide));
  }

  /* Sin border-top: la hairline a todo el ancho cruzaba la pagina en cada
     cambio de seccion. El fondo y el padding-block ya separan; la linea solo
     agregaba ruido sobre el campo estelar. */
  .section {
    padding-block: clamp(72px, 8vw, 128px);
  }

  .section--sunken {
    background: var(--sunken);
  }

  .section--void {
    background: var(--void);
  }

  /* El riel §: aparato marginal, como en un prospecto o un estatuto. */
  .rail {
    display: grid;
    gap: var(--s-6);
  }

  .rail__mark {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .rail__mark b {
    color: var(--brass);
    font-weight: 500;
  }

  .prose {
    max-width: var(--w-prose);
  }

  .stack {
    display: grid;
    gap: var(--s-5);
  }

  .section-heading {
    display: grid;
    gap: var(--s-6);
    margin-bottom: var(--s-10);
  }

  .section-heading__deck {
    max-width: 62ch;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--text-2);
  }
}

/* ========================================================================== */
/* COMPONENTS                                                                  */
/* ========================================================================== */

@layer components {
  /* --- etiquetas y chips -------------------------------------------- */

  .label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .micro {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .data {
    font-family: var(--font-mono);
    font-size: var(--fs-data);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.005em;
    color: var(--text-1);
  }

  /* Chip de estado de evidencia: el lenguaje visual central del sitio.
     Codifica el estado por peso de marcador, nunca por matiz — en una página
     sobre una autorización pendiente, un verde sería una afirmación de
     cumplimiento. */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-1);
    background: var(--surface-1);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-2);
    white-space: nowrap;
  }

  .chip::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
  }

  .chip--acreditado::before {
    background: var(--mark-full);
  }

  .chip--declarado::before {
    background: linear-gradient(135deg, var(--mark-half) 50%, transparent 50%);
    outline: 1px solid var(--mark-half);
    outline-offset: -1px;
  }

  .chip--diseno::before {
    background: linear-gradient(135deg, var(--mark-half) 50%, transparent 50%);
    outline: 1px solid var(--mark-half);
    outline-offset: -1px;
  }

  .chip--pendiente::before {
    outline: 1px solid var(--mark-open);
    outline-offset: -1px;
  }

  /* --- botones y enlaces -------------------------------------------- */

  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 44px;
    padding: var(--s-4) var(--s-6);
    border: 1px solid transparent;
    border-radius: var(--r-2);
    font-family: var(--font-sans);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    letter-spacing: -0.002em;
    transition: background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }

  /* Etiqueta blanca sobre el azul real del logo: 5.03:1, pasa AA. Sobre el
     #0877FF del sitio anterior habría fallado (4.12:1). */
  .button--primary {
    background: var(--accent);
    color: var(--accent-on);
    text-decoration: none;
  }

  .button--primary:hover {
    background: #0059d6;
    text-decoration: none;
  }

  .button--ghost {
    background: transparent;
    border-color: var(--border-interactive);
    color: var(--text-1);
  }

  .button--ghost:hover {
    background: var(--surface-2);
    border-color: var(--focus);
    text-decoration: none;
  }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding-block: var(--s-2);
    color: var(--accent-text);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-underline-offset: 5px;
    transition: text-decoration-color var(--dur-fast) var(--ease-out);
  }

  .text-link:hover {
    text-decoration-color: var(--accent-text);
  }

  .icon {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }

  /* --- barra de estado regulatorio ---------------------------------- */

  .statusbar {
    background: var(--void);
    border-bottom: 1px solid var(--rule);
  }

  .statusbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-5);
    min-height: 34px;
    padding-block: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .statusbar__mark {
    width: 5px;
    height: 5px;
    flex: none;
    background: var(--focus);
  }

  .statusbar__inner a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
    color: var(--accent-text);
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  /* --- progreso de lectura ------------------------------------------ */

  /* Progreso de lectura sin JavaScript. En un registro documental un
     indicador de lectura es apropiado; se oculta donde no hay soporte de
     animaciones guiadas por scroll en lugar de arrastrar un listener. */
  .progress {
    display: none;
  }

  @supports (animation-timeline: scroll()) {
    .progress {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--z-progress);
      height: 2px;
      width: 100%;
      transform-origin: 0 50%;
      background: var(--accent);
      pointer-events: none;
      animation: progress-grow linear;
      animation-timeline: scroll(root block);
    }
  }

  @keyframes progress-grow {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  /* --- header ------------------------------------------------------- */

  .header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(5, 7, 14, 0.72);
    backdrop-filter: blur(16px) saturate(120%);
    border-bottom: 1px solid var(--rule);
    transition: background-color var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }

  .header.is-scrolled {
    background: rgba(19, 28, 52, 0.86);
    border-bottom-color: var(--rule-strong);
  }

  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    min-height: 72px;
  }

  .brand {
    display: block;
    flex: none;
  }

  /* 196px es el piso práctico: el hairline de "MEX" mide 5px en un mark de
     725px, es decir 1.35px de dispositivo a DPR 1. No reducir. */
  .brand__mark {
    width: 196px;
    height: auto;
  }

  /* La variante de tinta navy existe solo para papel: en pantalla sería
     invisible sobre el sustrato oscuro, y visible duplicaría el logotipo. */
  .brand__mark--print {
    display: none;
  }

  .nav {
    display: none;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-7);
  }

  .nav__list a {
    display: block;
    padding-block: var(--s-4);
    color: var(--text-2);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out);
  }

  .nav__list a:hover {
    color: var(--text-1);
    border-bottom-color: var(--rule-strong);
  }

  .nav__cta {
    margin-left: auto;
  }

  .nav-toggle {
    display: grid;
    gap: 5px;
    margin-left: auto;
    padding: var(--s-4);
    min-width: 44px;
    min-height: 44px;
    align-content: center;
    justify-items: stretch;
    border: 1px solid var(--border-interactive);
    border-radius: var(--r-2);
  }

  .nav-toggle span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--text-1);
  }

  /* Cajón móvil: filas con índice, para que lea como tabla de contenidos. */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: none;
    background: rgba(2, 4, 12, 0.88);
  }

  .drawer.is-open {
    display: block;
  }

  .drawer__panel {
    margin-left: auto;
    width: min(420px, 100%);
    height: 100%;
    padding: var(--s-8) var(--s-7);
    background: var(--surface-3);
    border-left: 1px solid var(--rule-strong);
    overflow-y: auto;
  }

  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    margin-bottom: var(--s-8);
  }

  .drawer__close {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border-interactive);
    border-radius: var(--r-2);
    color: var(--text-1);
  }

  .drawer__list li + li {
    border-top: 1px solid var(--rule-faint);
  }

  .drawer__list a {
    display: flex;
    align-items: baseline;
    gap: var(--s-5);
    padding-block: var(--s-6);
    color: var(--text-1);
    font-size: var(--fs-h4);
    font-weight: 600;
    text-decoration: none;
  }

  .drawer__list span {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.16em;
    color: var(--text-3);
  }

  /* --- hero --------------------------------------------------------- */

  .hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(48px, 6vw, 88px) clamp(48px, 5vw, 80px);
    /* Translucido a proposito: el campo espacial vive en una capa fija detras
       de todo y un fondo opaco aqui lo taparia por completo. */
    background: transparent;
  }

  /* Retícula de módulo de 96px: lee como papel de dibujo técnico y justifica
     visualmente la alineación de todo lo demás. */

  .hero__inner {
    position: relative;
    display: grid;
    gap: clamp(40px, 5vw, 64px);
  }

  .hero__copy {
    display: grid;
    gap: var(--s-7);
    align-content: start;
  }

  .hero h1 {
    font-size: var(--fs-display);
    line-height: 1.02;
    letter-spacing: -0.024em;
    color: var(--text-0);
    /* Alineación óptica: las capitales redondas o diagonales al inicio de
       línea no asientan a ras del kicker sin este ajuste. */
    margin-left: -0.02em;
  }

  .hero__lead {
    max-width: 58ch;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--text-2);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-5) var(--s-7);
  }

  /* Chaflán a 45°: replica los cortes de plantilla de las letras E/F/X.
     Solo tres elementos en toda la página. Patrón de dos capas porque
     clip-path elimina el borde. */
  .plate {
    --chamfer-path: polygon(
      0 0,
      calc(100% - var(--chamfer)) 0,
      100% var(--chamfer),
      100% 100%,
      var(--chamfer) 100%,
      0 calc(100% - var(--chamfer))
    );
    clip-path: var(--chamfer-path);
    background: var(--rule-strong);
    padding: 1px;
  }

  .plate__inner {
    clip-path: var(--chamfer-path);
    background: var(--surface-1);
    box-shadow: inset 0 1px 0 var(--rule-lit);
  }

  /* --- cédula institucional (sustituye al dashboard ficticio) -------- */

  .cedula__head,
  .cedula__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-7);
    background: var(--surface-2);
  }

  .cedula__foot {
    background: transparent;
    border-top: 1px solid var(--rule);
  }

  .cedula__head b,
  .cedula__foot b {
    color: var(--brass);
    font-weight: 500;
  }

  .cedula__rows {
    display: grid;
  }

  .cedula__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1) var(--s-6);
    padding: var(--s-4) var(--s-7);
    border-top: 1px solid var(--rule-faint);
  }

  .cedula__row dt {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .cedula__row dd {
    margin: 0;
    font-size: var(--fs-body-sm);
    font-weight: 500;
    color: var(--text-1);
  }

  .cedula__row dd .data {
    font-size: var(--fs-body-sm);
  }

  .cedula__note {
    display: grid;
    gap: var(--s-3);
    margin: 0;
    padding: var(--s-6) var(--s-7);
    border-top: 1px solid var(--rule);
    border-left: 2px solid var(--brass-rule);
    font-size: var(--fs-caption);
    line-height: 1.55;
    color: var(--text-3);
  }

  /* --- franja de hechos -------------------------------------------- */

  .factstrip {
    border-block: 1px solid var(--rule);
  }

  .factstrip__grid {
    display: grid;
  }

  .factstrip__cell {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-6) 0;
  }

  .factstrip__cell + .factstrip__cell {
    border-top: 1px solid var(--rule-faint);
  }

  .factstrip__cell strong {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--text-1);
  }

  /* --- tarjetas ----------------------------------------------------- */

  .cards {
    display: grid;
    gap: var(--s-6);
  }

  .card {
    display: grid;
    gap: var(--s-5);
    align-content: start;
    padding: var(--s-7);
    background: var(--surface-1);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    /* Borde superior iluminado: hace que la superficie lea como fresada y no
       como dibujada. Es 5% de blanco, invisible si se busca de frente. */
    box-shadow: inset 0 1px 0 var(--rule-lit);
    transition: border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }

  .card:hover {
    background: var(--surface-2);
    border-color: var(--rule-strong);
  }

  .card p {
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: var(--text-2);
  }

  /* --- listas de definición / negativos ---------------------------- */

  .ledger {
    display: grid;
  }

  .ledger li {
    display: grid;
    gap: var(--s-3);
    padding-block: var(--s-6);
    border-top: 1px solid var(--rule-faint);
  }

  .ledger li:first-child {
    border-top: 0;
  }

  .ledger p {
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: var(--text-2);
  }

  .ledger--negative li {
    padding-left: var(--s-7);
    position: relative;
  }

  .ledger--negative li::before {
    content: "—";
    position: absolute;
    left: 0;
    font-family: var(--font-mono);
    color: var(--text-4);
  }

  /* --- tres-up de prospecto ---------------------------------------- */

  .threeup {
    display: grid;
    gap: var(--s-9);
  }

  .threeup__item {
    display: grid;
    gap: var(--s-5);
    align-content: start;
  }

  .threeup__num {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-4);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--rule);
  }

  .threeup p {
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: var(--text-2);
    max-width: 42ch;
  }

  /* --- tabla de control -------------------------------------------- */

  .table-wrap {
    overflow-x: auto;
  }

  .control-table {
    min-width: 720px;
  }

  .control-table th {
    padding: var(--s-4) var(--s-5);
    text-align: left;
    vertical-align: bottom;
    border-bottom: 1px solid var(--rule-strong);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .control-table td {
    padding: var(--s-5);
    vertical-align: top;
    border-bottom: 1px solid var(--rule-faint);
    font-size: var(--fs-body-sm);
    line-height: 1.55;
    color: var(--text-2);
  }

  .control-table tbody tr {
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  .control-table tbody tr:hover {
    background: var(--surface-1);
  }

  .control-table th:first-child,
  .control-table td:first-child {
    padding-left: var(--s-5);
    border-left: 3px solid transparent;
  }

  .control-table tbody tr:hover td:first-child {
    border-left-color: var(--accent);
  }

  .control-table td:first-child {
    font-weight: 600;
    color: var(--text-1);
  }

  .control-table .data {
    white-space: nowrap;
  }

  /* --- diagrama de arquitectura ------------------------------------ */

  .diagram {
    display: grid;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    background: var(--surface-1);
    box-shadow: inset 0 1px 0 var(--rule-lit);
    overflow: hidden;
  }

  .diagram__band {
    display: grid;
    gap: var(--s-5);
    padding: var(--s-7);
  }

  .diagram__band + .diagram__band {
    border-top: 1px solid var(--rule);
  }

  .diagram__nodes {
    display: grid;
    gap: var(--s-4);
  }

  .diagram__node {
    display: grid;
    place-items: center;
    min-height: 56px;
    padding: var(--s-4) var(--s-5);
    background: var(--surface-2);
    border: 1px solid var(--border-interactive);
    border-radius: var(--r-2);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    text-align: center;
    color: var(--text-2);
  }

  .diagram__node--primary {
    border-color: var(--accent-text);
    color: var(--text-1);
  }

  .diagram__cross {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-6);
    padding: var(--s-5) var(--s-7);
    border-top: 1px solid var(--brass-rule);
    background: var(--sunken);
  }

  .figure-note {
    display: grid;
    gap: var(--s-3);
    margin: var(--s-6) 0 0;
    padding-left: var(--s-5);
    border-left: 2px solid var(--brass-rule);
    font-size: var(--fs-caption);
    line-height: 1.55;
    color: var(--text-3);
  }

  /* --- ruta regulatoria -------------------------------------------- */

  .roadmap {
    display: grid;
    gap: var(--s-9);
    padding-left: var(--s-8);
    border-left: 1px solid var(--rule-strong);
  }

  .roadmap__item {
    position: relative;
    display: grid;
    gap: var(--s-4);
  }

  /* Rombo a 45°: la misma geometría de corte del logo. */
  .roadmap__item::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--s-8) - 5px);
    top: 6px;
    width: 9px;
    height: 9px;
    transform: rotate(45deg);
    background: var(--base);
    outline: 1px solid var(--mark-open);
    outline-offset: -1px;
  }

  .roadmap__item--done::before {
    outline-color: var(--focus);
  }

  .roadmap__item p {
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: var(--text-2);
    max-width: 62ch;
  }

  .roadmap__not {
    font-size: var(--fs-caption);
    color: var(--text-3);
  }

  .roadmap__not b {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-4);
    font-weight: 500;
  }

  /* --- aviso regulatorio ------------------------------------------- */

  .notice__inner {
    background: var(--sunken);
    border-left: 4px solid var(--brass);
    padding: clamp(28px, 4vw, 48px);
  }

  .notice__clauses {
    display: grid;
    gap: var(--s-7);
    margin-top: var(--s-8);
    counter-reset: clause;
  }

  .notice__clauses li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--s-5);
    counter-increment: clause;
  }

  .notice__clauses li::before {
    content: counter(clause, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--fs-data);
    color: var(--text-4);
  }

  .notice__clauses p {
    max-width: var(--w-prose);
    font-size: var(--fs-body-sm);
    line-height: 1.7;
    color: var(--text-2);
  }

  .notice__foot {
    margin-top: var(--s-8);
    padding-top: var(--s-5);
    border-top: 1px solid var(--rule);
  }

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

  .faq__items {
    display: grid;
  }

  .faq__items details {
    border-top: 1px solid var(--rule-faint);
  }

  .faq__items details:last-of-type {
    border-bottom: 1px solid var(--rule-faint);
  }

  .faq__items summary {
    display: flex;
    align-items: baseline;
    gap: var(--s-6);
    padding-block: var(--s-7);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--text-1);
  }

  .faq__items summary::-webkit-details-marker {
    display: none;
  }

  .faq__items summary::after {
    content: "+";
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--brass);
    transition: color var(--dur-instant) var(--ease-out);
  }

  .faq__items details[open] summary::after {
    content: "−";
  }

  .faq__items details > div {
    padding-bottom: var(--s-8);
  }

  .faq__items details p {
    max-width: var(--w-prose);
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--text-2);
  }

  /* --- contacto ----------------------------------------------------- */

  .channels {
    display: grid;
    border-top: 1px solid var(--rule);
  }

  .channels__row {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-7) 0;
    border-bottom: 1px solid var(--rule-faint);
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  .channels__row:hover {
    background: var(--surface-1);
  }

  .channels__row a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    color: var(--accent-text);
  }

  .channels__row p {
    font-size: var(--fs-caption);
    color: var(--text-3);
  }

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

  .cta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(72px, 8vw, 128px);
    background: var(--void);
  }

  .cta__bloom {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 103, 238, 0.08), transparent 62%);
    pointer-events: none;
  }

  .cta__inner {
    position: relative;
  }

  .cta__panel {
    display: grid;
    gap: var(--s-7);
    padding: clamp(32px, 5vw, 64px);
  }

  .cta h2 {
    max-width: 24ch;
    font-size: var(--fs-h1);
    color: var(--text-0);
  }

  /* --- footer ------------------------------------------------------- */

  .footer {
    background: var(--void);
    padding-block: var(--s-12) var(--s-8);
  }

  .footer__main {
    display: grid;
    gap: var(--s-10);
    padding-bottom: var(--s-10);
    border-bottom: 1px solid var(--rule-faint);
  }

  .footer__brand {
    display: grid;
    gap: var(--s-5);
    align-content: start;
  }

  .footer__brand p {
    max-width: 34ch;
    font-size: var(--fs-body-sm);
    color: var(--text-3);
  }

  .footer__cols {
    display: grid;
    gap: var(--s-9);
  }

  .footer__col h2 {
    margin-bottom: var(--s-5);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  .footer__col li + li {
    margin-top: var(--s-4);
  }

  .footer__col a {
    font-size: var(--fs-body-sm);
    color: var(--text-2);
  }

  .footer__col a:hover {
    color: var(--text-1);
  }

  .footer__legal {
    display: grid;
    gap: var(--s-5);
    padding-block: var(--s-9);
    border-bottom: 1px solid var(--rule-faint);
  }

  .footer__legal p {
    max-width: 92ch;
    font-size: var(--fs-caption);
    line-height: 1.65;
    color: var(--text-3);
  }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) var(--s-7);
    justify-content: space-between;
    padding-top: var(--s-8);
  }

  /* --- 404 ----------------------------------------------------------- */

  .page-404 {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
  }

  .page-404 main {
    display: grid;
    justify-items: start;
    gap: var(--s-6);
    max-width: 56ch;
    padding-block: var(--s-12);
  }

  .page-404 .brand {
    margin-bottom: var(--s-8);
  }

  .page-404 h1 {
    font-size: var(--fs-h1);
    color: var(--text-0);
  }

  .page-404__lead {
    font-size: var(--fs-lead);
    color: var(--text-2);
    margin-bottom: var(--s-5);
  }

  /* Marcador de dato pendiente de Jurídico. Imposible de pasar por alto. */
  .todo {
    padding: 0 var(--s-2);
    border-bottom: 1px dashed var(--brass);
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--brass);
    white-space: nowrap;
  }

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

  /* El reveal se arma solo cuando el JS confirma que puede desarmarlo. Sin
     esta condición, un JS bloqueado o fallido dejaría invisible todo el
     contenido bajo el hero. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--dur-reveal) var(--ease-entrance),
      transform var(--dur-reveal) var(--ease-entrance);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  [data-reveal-delay="1"] {
    transition-delay: 60ms;
  }

  [data-reveal-delay="2"] {
    transition-delay: 120ms;
  }

  [data-reveal-delay="3"] {
    transition-delay: 180ms;
  }
}

/* ========================================================================== */
/* UTILITIES                                                                   */
/* ========================================================================== */

@layer utilities {
  .u-serif {
    font-family: var(--font-display);
  }

  .u-quiet {
    color: var(--text-3);
  }

  .u-brass {
    color: var(--brass);
  }

  .u-nowrap {
    white-space: nowrap;
  }
}

/* ========================================================================== */
/* RESPONSIVE — mobile-first, tres puntos de quiebre                          */
/* ========================================================================== */

@media (min-width: 48rem) {
  .cedula__row {
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: baseline;
  }

  .factstrip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .factstrip__cell {
    padding: var(--s-6) var(--s-6) var(--s-6) 0;
  }

  .factstrip__cell + .factstrip__cell {
    border-top: 0;
  }

  .factstrip__cell + .factstrip__cell {
    border-left: 1px solid var(--rule-faint);
    padding-left: var(--s-6);
  }

  .factstrip__cell:nth-child(3) {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule-faint);
  }

  .factstrip__cell:nth-child(4) {
    border-top: 1px solid var(--rule-faint);
  }

  .cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diagram__nodes {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .section-heading {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-9);
  }

  .footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__col + .footer__col {
    padding-left: var(--s-7);
    border-left: 1px solid var(--rule-faint);
  }
}

@media (min-width: 64rem) {
  .nav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--s-7);
  }

  .nav-toggle {
    display: none;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
    align-items: start;
  }

  .factstrip__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .factstrip__cell:nth-child(n) {
    border-top: 0;
    border-left: 1px solid var(--rule-faint);
    padding-left: var(--s-6);
  }

  .factstrip__cell:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .threeup {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-8);
  }

  .threeup__item + .threeup__item {
    padding-left: var(--s-8);
    border-left: 1px solid var(--rule-faint);
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-10);
  }

  .split > * + * {
    padding-left: var(--s-10);
    border-left: 1px solid var(--rule-faint);
  }

  .faq__layout {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--s-10);
    align-items: start;
  }

  .footer__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--s-11);
  }
}

@media (min-width: 80rem) {
  /* El riel § solo aparece cuando hay espacio real fuera de la retícula. */
  .rail {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    gap: var(--rail-gap);
  }

  .rail__mark {
    padding-top: var(--s-2);
    border-right: 1px solid var(--rule-faint);
    min-height: 100%;
  }

  .cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ========================================================================== */
/* PREFERENCIAS                                                                */
/* ========================================================================== */

@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;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .progress {
    display: none;
  }
}

/* El escape de accesibilidad real no es un tema claro, es forced-colors. */
@media (forced-colors: active) {
  body::after,
  .cta__bloom {
    display: none;
  }

  .card,
  .plate__inner,
  .diagram,
  .diagram__node,
  .notice__inner {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .button--primary {
    border: 1px solid ButtonText;
  }
}

@media (max-width: 51.25rem) {
  /* El grano cuesta pintado en scroll móvil y no aporta a ese tamaño. */
  body::after {
    display: none;
  }
}

/* ========================================================================== */
/* IMPRESIÓN — un regulador imprimirá esta página                              */
/* ========================================================================== */

@media print {
  /* La ventaja de los tokens de dos niveles: la inversión a tinta sobre papel
     son ~14 declaraciones, no 357 anulaciones. */
  :root {
    color-scheme: light;
    --void: #ffffff;
    --base: #ffffff;
    --sunken: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #ffffff;
    --text-0: #000000;
    --text-1: #14161c;
    --text-2: #2b3038;
    --text-3: #4a5058;
    --text-4: #6b7078;
    --rule-faint: #d5d8dd;
    --rule: #b9bdc4;
    --rule-strong: #8d939c;
    --rule-lit: transparent;
    --border-interactive: #8d939c;
    --accent: #0044b8;
    --accent-text: #0044b8;
    --brass: #7a5a1e;
    --brass-rule: #a8884f;
  }

  @page {
    size: A4;
    margin: 18mm 16mm;
  }

  html,
  body {
    background: #fff !important;
    color: #14161c !important;
  }

  *,
  *::before,
  *::after {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
  }

  body::after,
  .cta__bloom,
  .statusbar,
  .header,
  .drawer,
  .progress,
  .nav-toggle,
  .cta {
    display: none !important;
  }

  body {
    font-family: var(--font-display);
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .section {
    padding-block: 10mm;
    border-top: 1px solid var(--rule);
  }

  .brand__mark--screen {
    display: none !important;
  }

  .brand__mark--print {
    display: block !important;
    width: 52mm;
  }

  /* Los reveals no deben ocultar contenido en papel. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* La cédula es lo más útil de la hoja impresa: se imprime como tabla. */
  .plate,
  .plate__inner {
    clip-path: none !important;
    padding: 0;
    border: 1px solid var(--rule-strong);
  }

  .cedula__row {
    border-top: 1px solid var(--rule-faint);
  }

  /* Todas las respuestas de la FAQ deben aparecer impresas. */
  details,
  details > div {
    display: block !important;
  }

  .faq__items summary::after {
    content: "" !important;
  }

  /* El aviso regulatorio nunca se oculta en impresión. */
  .notice__inner {
    border-left: 3px solid var(--brass);
  }

  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-family: var(--font-mono);
    font-size: 8pt;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  .card,
  .notice__inner,
  .roadmap__item,
  .control-table tr,
  .threeup__item {
    break-inside: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  .print-provenance {
    display: block !important;
    margin-top: 8mm;
    padding-top: 3mm;
    border-top: 1px solid var(--rule);
  }
}

.print-provenance {
  display: none;
}

/* ==========================================================================
   REGISTRO COMERCIAL — componentes de la landing
   Añadidos sobre la base anterior: una página que vende necesita presencia,
   profundidad y foco en el beneficio del cliente.
   ========================================================================== */

@layer components {
  /* --- aurora del hero: profundidad sin fondos claros ------------------- */
  .aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .aurora {
    display: none;
  }

  .aurora::before,
  .aurora::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
  }

  .aurora::before {
    width: 780px;
    height: 780px;
    top: -300px;
    right: -180px;
    background: radial-gradient(circle, rgba(0, 107, 248, 0.24), transparent 68%);
  }

  .aurora::after {
    width: 620px;
    height: 620px;
    bottom: -320px;
    left: -160px;
    background: radial-gradient(circle, rgba(0, 107, 248, 0.16), transparent 70%);
  }

  /* --- píldora de encabezado ------------------------------------------- */
  .pill {
    display: inline-flex;
    justify-self: start;
    width: fit-content;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-pill);
    background: rgba(0, 107, 248, 0.08);
    font-size: var(--fs-caption);
    font-weight: 500;
    color: var(--text-2);
  }

  .pill b {
    color: var(--accent-text);
    font-weight: 600;
  }

  /* --- botones de venta ------------------------------------------------- */
  .button {
    border-radius: var(--r-pill);
    padding: var(--s-5) var(--s-8);
    font-size: var(--fs-body);
    min-height: 52px;
  }

  .button--primary {
    background: linear-gradient(180deg, #1a7cff, var(--accent));
    box-shadow: 0 10px 30px -10px rgba(0, 107, 248, 0.7);
  }

  .button--primary:hover {
    background: linear-gradient(180deg, #3d92ff, #0060e0);
  }

  /* --- métrica grande --------------------------------------------------- */
  .metric strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, var(--text-0), #7fb0ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .metric span {
    display: block;
    margin-top: var(--s-4);
    font-size: var(--fs-body-sm);
    color: var(--text-2);
  }

  /* --- tarjeta de producto --------------------------------------------- */
  .product {
    position: relative;
    display: grid;
    gap: var(--s-5);
    align-content: start;
    padding: var(--s-8);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    box-shadow: inset 0 1px 0 var(--rule-lit);
    transition: transform var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }

  .product:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 107, 248, 0.55);
  }

  .product__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-1);
    background: rgba(0, 107, 248, 0.19);
    border: 1px solid rgba(0, 107, 248, 0.32);
    color: var(--accent-text);
  }

  .product__icon .icon {
    width: 22px;
    height: 22px;
    stroke-width: 1.6;
  }

  .product h3 {
    font-size: 1.3rem;
  }

  .product p {
    font-size: var(--fs-body-sm);
    line-height: 1.62;
    color: var(--text-2);
  }

  .product__more {
    margin-top: var(--s-2);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--accent-text);
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
  }

  /* --- visual de producto en el hero ----------------------------------- */
  .app {
    position: relative;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-3);
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 var(--rule-lit);
    overflow: hidden;
  }

  .app__bar {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.02);
  }

  .app__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rule-strong);
  }

  .app__body {
    display: grid;
    gap: var(--s-6);
    padding: var(--s-7);
  }

  .app__row {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    padding: var(--s-5);
    border: 1px solid var(--rule-faint);
    border-radius: var(--r-1);
    background: var(--sunken);
  }

  .app__row strong {
    font-size: var(--fs-body-sm);
    font-weight: 600;
  }

  .app__row small {
    display: block;
    font-size: var(--fs-caption);
    color: var(--text-3);
  }

  .app__amount {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
    white-space: nowrap;
  }

  .app__badge {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--r-1);
    background: rgba(0, 107, 248, 0.14);
    border: 1px solid rgba(0, 107, 248, 0.3);
    color: var(--accent-text);
  }

  .app__note {
    padding: var(--s-4) var(--s-7) var(--s-6);
    font-size: var(--fs-caption);
    color: var(--text-3);
  }

  /* --- casos de uso ---------------------------------------------------- */
  .usecase {
    display: grid;
    gap: var(--s-5);
    align-content: start;
    padding: var(--s-8);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--surface-1);
    transition: border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }

  .usecase:hover {
    background: var(--surface-2);
    border-color: rgba(0, 107, 248, 0.45);
  }

  .usecase h3 {
    font-size: 1.2rem;
  }

  .usecase p {
    font-size: var(--fs-body-sm);
    line-height: 1.62;
    color: var(--text-2);
  }

  /* --- pasos ------------------------------------------------------------ */
  .steps {
    display: grid;
    gap: var(--s-7);
    counter-reset: step;
  }

  .step {
    position: relative;
    display: grid;
    gap: var(--s-4);
    padding: var(--s-8) var(--s-7) var(--s-7);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: var(--surface-1);
    counter-increment: step;
  }

  .step::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: transparent;
    background: linear-gradient(180deg, var(--accent-text), rgba(0, 107, 248, 0.35));
    -webkit-background-clip: text;
    background-clip: text;
  }

  .step p {
    font-size: var(--fs-body-sm);
    color: var(--text-2);
  }

  /* --- banda de confianza ---------------------------------------------- */
  .assurance {
    display: grid;
    gap: var(--s-5);
    padding: var(--s-8);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  }

  .assurance .icon {
    width: 26px;
    height: 26px;
    color: var(--accent-text);
    stroke-width: 1.6;
  }

  .assurance p {
    font-size: var(--fs-body-sm);
    line-height: 1.62;
    color: var(--text-2);
  }

  /* --- CTA de cierre ---------------------------------------------------- */
  .closer {
    display: grid;
    gap: var(--s-7);
    justify-items: center;
    text-align: center;
    padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 72px);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-3);
    background:
      radial-gradient(circle at 50% 0%, rgba(0, 107, 248, 0.28), transparent 62%),
      linear-gradient(180deg, var(--surface-2), var(--surface-1));
  }

  .closer h2 {
    max-width: 22ch;
    color: var(--text-0);
  }

  .closer p {
    max-width: 56ch;
    font-size: var(--fs-lead);
    color: var(--text-2);
  }
}

@media (min-width: 48rem) {
  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6);
  }

  .metrics-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-8);
  }
}

@media (min-width: 64rem) {
  .grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
  }

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
  }
}

/* ==========================================================================
   PASADA DE UI/UX — más presencia, profundidad y respuesta al cursor
   El registro documental anterior dejó filetes sueltos, marcadores en dorado
   y superficies casi planas. Aquí se corrige todo eso.
   ========================================================================== */

@layer components {
  /* --- el dorado era del registro regulatorio: fuera de la landing ------ */
  .faq__items summary::after,
  .notice__inner .label,
  .cedula__head b,
  .cedula__foot b {
    color: var(--accent-text);
  }

  /* --- encabezados de sección: deck alineado arriba, no colgando -------- */
  .section-heading {
    gap: var(--s-7);
    margin-bottom: var(--s-9);
  }

  .section-heading h2 {
    max-width: 22ch;
  }

  /* Degradado sutil en los titulares: da profundidad sin ensuciar. */
  .section-heading h2,
  .hero h1,
  .closer h2 {
    background: linear-gradient(170deg, var(--text-0) 30%, #93b7ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* --- tarjetas: superficie más viva y respuesta al cursor -------------- */
  .card,
  .product,
  .usecase,
  .assurance,
  .step {
    position: relative;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
      var(--surface-1);
    border-color: var(--rule-strong);
    border-radius: var(--r-3);
    isolation: isolate;
  }

  /* Halo azul que sigue al cursor sobre la tarjeta. */
  .product::after,
  .usecase::after,
  .assurance::after,
  .step::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(
      420px circle at var(--mx, 50%) var(--my, 0%),
      rgba(0, 107, 248, 0.16),
      transparent 62%
    );
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }

  .product:hover::after,
  .usecase:hover::after,
  .assurance:hover::after,
  .step:hover::after {
    opacity: 1;
  }

  .card:hover,
  .usecase:hover,
  .assurance:hover,
  .step:hover {
    border-color: rgba(0, 107, 248, 0.5);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
      var(--surface-2);
  }

  /* --- iconos de producto con más presencia ---------------------------- */
  .product__icon,
  .assurance > .icon:first-child {
    width: 54px;
    height: 54px;
    border-radius: var(--r-2);
    background: linear-gradient(160deg, rgba(0, 107, 248, 0.28), rgba(0, 107, 248, 0.08));
    border: 1px solid rgba(0, 107, 248, 0.4);
    box-shadow: 0 8px 24px -12px rgba(0, 107, 248, 0.8);
  }

  .assurance > .icon:first-child {
    display: block;
    padding: 14px;
    box-sizing: border-box;
    color: var(--accent-text);
  }

  .product__icon .icon {
    width: 24px;
    height: 24px;
  }

  .product h3,
  .usecase h3,
  .assurance h3 {
    font-size: 1.25rem;
    letter-spacing: -0.015em;
  }

  /* --- métricas: más impacto ------------------------------------------- */
  .metrics-row {
    padding: var(--s-9) 0;
    border-block: 1px solid var(--rule);
  }

  .metric {
    position: relative;
    padding-left: var(--s-7);
  }

  .metric::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), transparent);
  }

  /* --- FAQ rediseñada: tarjetas, no filetes sueltos -------------------- */
  .faq__items {
    display: grid;
    gap: var(--s-4);
  }

  .faq__items details {
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      var(--surface-1);
    transition: border-color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }

  .faq__items details:last-of-type {
    border-bottom: 1px solid var(--rule-strong);
  }

  .faq__items details:hover {
    border-color: rgba(0, 107, 248, 0.45);
  }

  .faq__items details[open] {
    border-color: rgba(0, 107, 248, 0.55);
    background:
      radial-gradient(600px circle at 0% 0%, rgba(0, 107, 248, 0.1), transparent 60%),
      var(--surface-2);
  }

  .faq__items summary {
    gap: var(--s-6);
    padding: var(--s-7);
    font-size: 1.15rem;
    line-height: 1.4;
    border-radius: var(--r-2);
  }

  .faq__items summary:hover {
    color: var(--text-0);
  }

  /* Marcador circular en azul de marca, no un signo suelto en dorado. */
  .faq__items summary::after {
    content: "";
    flex: none;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid var(--rule-strong);
    background:
      linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat;
    color: var(--accent-text);
    transition: transform var(--dur-base) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      background-size var(--dur-base) var(--ease-out);
  }

  .faq__items details[open] summary::after {
    content: "";
    transform: rotate(180deg);
    border-color: rgba(0, 107, 248, 0.6);
    background:
      linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 0 11px no-repeat;
  }

  .faq__items details > div {
    padding: 0 var(--s-7) var(--s-7);
  }

  .faq__items details p {
    font-size: var(--fs-body-sm);
    line-height: 1.72;
    max-width: 74ch;
  }

  /* Apertura animada; se desactiva con prefers-reduced-motion más abajo. */
  @supports (interpolate-size: allow-keywords) {
    .faq__items details::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size var(--dur-base) var(--ease-out),
        content-visibility var(--dur-base) allow-discrete;
    }

    .faq__items details[open]::details-content {
      block-size: auto;
    }
  }

  /* --- pasos: conectados y numerados con más peso --------------------- */
  .step {
    padding: var(--s-8) var(--s-7);
  }

  .step::before {
    font-size: 2.5rem;
  }

  /* --- cierre: borde con degradado animado ---------------------------- */
  .closer {
    border-color: transparent;
    background:
      radial-gradient(circle at 50% -10%, rgba(0, 107, 248, 0.34), transparent 60%),
      linear-gradient(180deg, var(--surface-2), var(--surface-1));
    box-shadow: 0 0 0 1px var(--rule-strong), 0 40px 100px -40px rgba(0, 107, 248, 0.55);
  }

  /* --- ritmo vertical: menos aire muerto ------------------------------ */
  .section {
    padding-block: clamp(56px, 6vw, 96px);
  }

  /* --- visual de producto: filas con más vida -------------------------- */
  .app__row {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
      var(--sunken);
    border-color: var(--rule);
    transition: border-color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }

  .app__row:hover {
    border-color: rgba(0, 107, 248, 0.45);
    transform: translateX(3px);
  }

  .app {
    border-radius: var(--r-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__items details::details-content {
    transition: none !important;
  }

  .product::after,
  .usecase::after,
  .assurance::after,
  .step::after {
    display: none;
  }
}

@layer components {
  /* --- legibilidad: el cuerpo estaba demasiado apagado para una landing -- */
  .product p,
  .usecase p,
  .assurance p,
  .step p,
  .card p,
  .faq__items details p,
  .section-heading__deck {
    color: #c3cee2;
  }

  /* --- superficies con más definición ---------------------------------- */
  .product,
  .usecase,
  .assurance,
  .step,
  .faq__items details {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.016)),
      var(--surface-1);
  }

  /* --- el deck del encabezado, con filete de acento -------------------- */
  .section-heading__deck {
    padding-left: var(--s-7);
    border-left: 2px solid rgba(0, 107, 248, 0.5);
  }

  /* --- banda de beneficios (sustituye MXN / 1 / MX) -------------------- */
  .benefit {
    display: grid;
    gap: var(--s-4);
    padding-left: var(--s-7);
    position: relative;
  }

  .benefit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent), transparent);
  }

  .benefit strong {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    background: linear-gradient(170deg, var(--text-0), #8fb5f0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .benefit span {
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: #c3cee2;
  }

  .benefit-band {
    padding: var(--s-9) 0;
    border-block: 1px solid var(--rule);
  }

  /* --- FAQ: pregunta un poco más grande y respuesta más separada -------- */
  .faq__items summary {
    font-size: 1.22rem;
  }

  .faq__items details[open] summary {
    padding-bottom: var(--s-5);
  }

  /* --- nav con subrayado animado --------------------------------------- */
  .nav__list a {
    position: relative;
    border-bottom: 0;
  }

  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .nav__list a:hover::after {
    transform: scaleX(1);
  }

  /* --- botón con micro-respuesta --------------------------------------- */
  .button {
    transition: background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }

  .button--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px -10px rgba(0, 107, 248, 0.85);
  }

  .button--primary:active {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__list a::after,
  .button--primary:hover {
    transition: none;
    transform: none;
  }
}

@layer components {
  /* --- el enlace de la tarjeta al pie, aunque el texto sea más corto ---- */
  .product {
    grid-template-rows: auto auto 1fr auto;
  }

  .product__more {
    align-self: end;
  }

  .usecase {
    grid-template-rows: auto 1fr auto;
  }

  .usecase .product__more {
    align-self: end;
  }

  /* --- degradado de titular menos agresivo: la segunda línea se apagaba -- */
  .section-heading h2,
  .hero h1,
  .closer h2,
  .benefit strong {
    background: linear-gradient(168deg, var(--text-0) 62%, #a9c5ee);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

@layer components {
  /* La píldora se alinea a la izquierda por defecto; en el cierre centrado
     debe seguir al resto del bloque. */
  .closer .pill {
    justify-self: center;
  }
}

/* ==========================================================================
   MÓVIL — corrección de desbordamiento horizontal
   La fila del visual de producto tenía el importe en nowrap y el bloque de
   texto sin min-width: 0, así que su ancho mínimo excedía el viewport y
   arrastraba toda la página, cortando titulares y sacando el botón de menú
   de la pantalla.
   ========================================================================== */

@layer components {
  /* Sin esto, un hijo flex no baja de su ancho de contenido. */
  .app__row > div {
    min-width: 0;
  }

  .app__row strong,
  .app__row small {
    overflow-wrap: anywhere;
  }

  .app__amount {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hero__copy,
  .hero__inner > * {
    min-width: 0;
  }

  .hero h1 {
    overflow-wrap: break-word;
  }
}

@media (max-width: 47.99rem) {
  .app__row {
    flex-wrap: wrap;
  }

  .app__row > div {
    flex: 1 1 60%;
  }

  .app__amount {
    margin-left: 0;
    flex: 1 1 100%;
    padding-left: calc(36px + var(--s-5));
    font-size: var(--fs-caption);
  }

  .statusbar__inner a {
    margin-left: 0;
  }

  .benefit,
  .section-heading__deck {
    padding-left: var(--s-5);
  }
}

/* ==========================================================================
   FAQ v2 — un solo bloque compacto en lugar de seis tarjetas voluminosas
   ========================================================================== */

@layer components {
  .faq__items {
    gap: 0;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-3);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      var(--surface-1);
    overflow: hidden;
  }

  .faq__items details,
  .faq__items details:last-of-type,
  .faq__items details[open] {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .faq__items details + details {
    border-top: 1px solid var(--rule-faint);
  }

  .faq__items details[open] {
    background: linear-gradient(90deg, rgba(0, 107, 248, 0.09), transparent 55%);
  }

  .faq__items details:hover:not([open]) {
    background: rgba(255, 255, 255, 0.022);
  }

  /* Barra de acento en el ítem abierto: marca la posición sin engordar la fila. */
  .faq__items details[open] > summary {
    box-shadow: inset 2px 0 0 var(--accent);
  }

  .faq__items summary {
    gap: var(--s-5);
    padding: var(--s-5) var(--s-6);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--text-1);
    border-radius: 0;
    transition: color var(--dur-fast) var(--ease-out);
  }

  .faq__items details[open] summary {
    padding-bottom: var(--s-4);
    color: var(--text-0);
  }

  /* Marcador más pequeño y sin círculo: el círculo de 30px inflaba la fila. */
  .faq__items summary::after {
    width: 18px;
    height: 18px;
    border: 0;
    background:
      linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    color: var(--text-3);
  }

  .faq__items summary:hover::after {
    color: var(--accent-text);
  }

  .faq__items details[open] summary::after {
    color: var(--accent-text);
    background:
      linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center / 0 100% no-repeat;
  }

  .faq__items details > div {
    padding: 0 calc(var(--s-6) + var(--s-8)) var(--s-6) var(--s-6);
  }

  .faq__items details p {
    font-size: var(--fs-body-sm);
    line-height: 1.68;
    color: #bcc8de;
    max-width: 68ch;
  }
}

/* ==========================================================================
   DINAMISMO — movimiento con propósito, no decoración
   Todo lo de aquí se apaga en prefers-reduced-motion al final del bloque.
   ========================================================================== */

@layer components {
  /* --- resplandor que respira detrás del hero ------------------------- */
  .aurora::before {
    animation: drift 18s var(--ease-in-out) infinite alternate;
  }

  .aurora::after {
    animation: drift 24s var(--ease-in-out) infinite alternate-reverse;
  }

  @keyframes drift {
    from {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.75;
    }
    to {
      transform: translate3d(-70px, 50px, 0) scale(1.12);
      opacity: 1;
    }
  }

  /* --- la retícula se desliza lentamente: da sensación de sistema vivo -- */


  /* --- borde superior de las tarjetas que se ilumina al acercarse ------ */
  .product,
  .usecase,
  .step,
  .assurance {
    overflow: hidden;
  }

  .product::before,
  .usecase::before,
  .step::before,
  .assurance::before {
    pointer-events: none;
  }

  .product::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 107, 248, 0.9), transparent);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }

  .product:hover::before {
    opacity: 1;
  }

  /* --- el visual de producto flota apenas ------------------------------ */
  .app {
    animation: float-soft 9s var(--ease-in-out) infinite alternate;
  }

  @keyframes float-soft {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(0, -12px, 0);
    }
  }

  /* --- pulso en el icono activo de la primera fila --------------------- */
  .app__row:first-child .app__badge::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 1px solid rgba(0, 107, 248, 0.55);
    animation: ping 2.6s var(--ease-out) infinite;
  }

  .app__badge {
    position: relative;
  }

  @keyframes ping {
    0% {
      transform: scale(0.85);
      opacity: 0.9;
    }
    70%,
    100% {
      transform: scale(1.35);
      opacity: 0;
    }
  }

  /* --- brillo que recorre el CTA principal ---------------------------- */
  .button--primary {
    position: relative;
    overflow: hidden;
  }

  .button--primary::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    left: -60%;
    background: linear-gradient(
      100deg,
      transparent,
      rgba(255, 255, 255, 0.28),
      transparent
    );
    transform: skewX(-18deg);
  }

  .button--primary:hover::after {
    animation: sheen 700ms var(--ease-out);
  }

  @keyframes sheen {
    to {
      left: 130%;
    }
  }

  /* --- números de paso: contador visual con línea de progreso --------- */
  .step {
    overflow: visible;
  }

  .step::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
    opacity: 1;
    z-index: 1;
  }

  .step:hover::after {
    transform: scaleX(1);
  }

  /* --- entrada escalonada con desplazamiento lateral en rejillas ------- */
  .grid-4 > [data-reveal],
  .grid-3 > [data-reveal] {
    transition-duration: 620ms;
  }

  /* --- foco de acento que sigue al scroll en el cierre ---------------- */
  .closer {
    position: relative;
    overflow: hidden;
  }

  .closer::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    width: 120%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(0, 107, 248, 0.14) 60deg,
      transparent 140deg,
      transparent 360deg
    );
    animation: spin-slow 22s linear infinite;
    pointer-events: none;
  }

  @keyframes spin-slow {
    to {
      transform: translateX(-50%) rotate(360deg);
    }
  }

  .closer > * {
    position: relative;
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before,
  .aurora::after,
  .app,
  .app__row:first-child .app__badge::after,
  .closer::before {
    animation: none !important;
  }

  .button--primary::after {
    display: none;
  }

  .step::after {
    transition: none;
  }
}

/* ==========================================================================
   FONDO ESPACIAL CON PARALLAX
   --------------------------------------------------------------------------
   Las nebulosas son gradientes radiales, no imagenes. Es la decision de
   rendimiento central y se tomo midiendo, no por gusto:

   - Primera version: cuatro capas de bitmap (dos nebulosas pre-difuminadas,
     estrellas y vineta). Cada subconjunto renderizaba en ~2 s, pero las cuatro
     juntas llevaban al rasterizador de 2 s a mas de 60 s por fotograma, con
     resultados inconsistentes entre ejecuciones. El limite era el numero de
     capas compuestas simultaneas, no el peso de los archivos.
   - Version definitiva: los gradientes radiales pesan cero bytes, se
     rasterizan una vez, se cachean y se componen en GPU. Un campo de nebulosa
     hecho de gradientes es mas barato que cualquier textura, y ademas quita
     70 KB de descarga.
   - Solo el campo de estrellas sigue siendo un bitmap, porque la luz puntual
     tiene que quedar nitida y un mosaico de 512 px comprime a 2.5 KB.

   Reglas que se mantienen: ninguna transformacion animada lleva scale()
   (obliga a re-rasterizar el subarbol); solo se anima transform; y el
   movimiento corre en animation-timeline: scroll(), es decir en el hilo del
   compositor, con respaldo de requestAnimationFrame en app.js donde no hay
   soporte.
   ========================================================================== */

@layer components {
  .space {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    background: var(--base);
  }

  /* Nebulosa Y estrellas, todo en gradientes CSS sobre UN solo elemento.
     Cero bytes de descarga y una sola rasterizacion.

     Por que asi y no con imagenes: la primera version usaba cuatro capas de
     bitmap y el rasterizador se desplomaba; la segunda dejaba el campo de
     estrellas como textura repetida en su propia capa promovida, y a
     1340x860 pasaba de 5 s a mas de 40 s por fotograma. Apilar todo como
     background-image del mismo elemento lo resuelve: las estrellas son
     gradientes radiales de 1 px repetidos en un mosaico, las nubes son
     gradientes grandes, y el navegador rasteriza el conjunto una vez.

     El orden importa: las estrellas van primero (encima) para que se vean
     sobre las nubes. */
  .space__nebula {
    position: absolute;
    inset: -22% -8%;
    transform: translate3d(0, 0, 0);
    background-image:
      /* campo de estrellas: mosaico de 220 px. Los puntos de 1 px al 50 % de
         alfa eran invisibles en pantalla; van a 1.5-2.5 px y alfa alta. */
      radial-gradient(2px 2px at 18px 32px, rgba(226, 236, 255, 0.85), transparent 100%),
      radial-gradient(1.5px 1.5px at 142px 12px, rgba(214, 232, 255, 0.9), transparent 100%),
      radial-gradient(2px 2px at 71px 96px, rgba(240, 246, 255, 0.85), transparent 100%),
      radial-gradient(1.5px 1.5px at 196px 58px, rgba(170, 210, 255, 0.95), transparent 100%),
      radial-gradient(2px 2px at 39px 168px, rgba(240, 246, 255, 0.9), transparent 100%),
      radial-gradient(1.5px 1.5px at 168px 138px, rgba(232, 240, 255, 0.75), transparent 100%),
      radial-gradient(2px 2px at 98px 204px, rgba(190, 220, 255, 0.9), transparent 100%),
      radial-gradient(1.5px 1.5px at 208px 192px, rgba(240, 246, 255, 0.85), transparent 100%),
      radial-gradient(2px 2px at 124px 62px, rgba(150, 200, 255, 0.8), transparent 100%),
      radial-gradient(2px 2px at 26px 112px, rgba(232, 240, 255, 0.75), transparent 100%),
      radial-gradient(1.5px 1.5px at 82px 22px, rgba(214, 232, 255, 0.8), transparent 100%),
      radial-gradient(1.5px 1.5px at 186px 96px, rgba(240, 246, 255, 0.85), transparent 100%),
      radial-gradient(2px 2px at 54px 214px, rgba(232, 240, 255, 0.7), transparent 100%),
      radial-gradient(1.5px 1.5px at 146px 176px, rgba(170, 210, 255, 0.8), transparent 100%),
      /* nubes: seis nucleos difusos, azul de marca con violeta frio al fondo */
      radial-gradient(38% 30% at 78% 12%, rgba(0, 107, 248, 0.34), transparent 68%),
      radial-gradient(30% 26% at 18% 26%, rgba(74, 62, 168, 0.24), transparent 70%),
      radial-gradient(46% 34% at 52% 52%, rgba(0, 92, 214, 0.20), transparent 72%),
      radial-gradient(26% 22% at 88% 62%, rgba(96, 174, 255, 0.17), transparent 70%),
      radial-gradient(34% 28% at 12% 78%, rgba(58, 46, 148, 0.24), transparent 72%),
      radial-gradient(52% 40% at 60% 92%, rgba(0, 107, 248, 0.14), transparent 74%);
    background-repeat:
      repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
      no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size:
      220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
      auto, auto, auto, auto, auto, auto;
  }

  /* Vineta en el propio contenedor, sin gastar una capa: mantiene limpio el
     centro y protege el contraste del texto. */
  .space__vignette {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(125% 95% at 50% 4%, transparent 12%, rgba(5, 7, 14, 0.34) 52%, rgba(5, 7, 14, 0.62) 100%),
      linear-gradient(180deg, transparent 0%, rgba(5, 7, 14, 0.06) 62%, rgba(5, 7, 14, 0.34) 100%);
  }

  /* Velo en las secciones para no perder legibilidad sobre el campo. */
  .section--sunken,
  .footer {
    background-color: rgba(4, 7, 15, 0.62);
  }

  .cta {
    background-color: rgba(2, 4, 12, 0.66);
  }

  @supports (animation-timeline: scroll()) {
    .space__nebula {
      animation-name: rise;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      will-change: transform;
    }

    .space__nebula {
      --rise: -14%;
    }
  }

  @keyframes rise {
    to {
      transform: translate3d(0, var(--rise, 0), 0);
    }
  }
}

@media (max-width: 47.99rem) {
  .space__nebula {
    animation: none !important;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .space__nebula {
    animation: none !important;
    will-change: auto;
  }
}

@media print {
  .space {
    display: none !important;
  }
}

@layer components {
  /* El texto del hero es el unico bloque grande que se apoya directamente en
     el campo espacial, sin tarjeta que lo respalde. Se le da un lecho oscuro
     propio, difuminado, para que su contraste no dependa de donde caigan las
     nubes ni las estrellas. Es mas fiable que bajar la intensidad del fondo
     hasta hacerlo invisible, que fue el error de la version anterior. */
  .hero__copy {
    position: relative;
    isolation: isolate;
  }

  .hero__copy::before {
    content: "";
    position: absolute;
    inset: -6% -12% -8% -10%;
    z-index: -1;
    border-radius: 50% / 40%;
    background: radial-gradient(
      68% 58% at 42% 50%,
      rgba(3, 5, 12, 0.92) 0%,
      rgba(3, 5, 12, 0.72) 52%,
      transparent 100%
    );
    pointer-events: none;
  }

  /* Los encabezados de seccion tambien viven sobre el campo. */
  .section-heading {
    position: relative;
    isolation: isolate;
  }

  .section-heading::before {
    content: "";
    position: absolute;
    inset: -18% -6%;
    z-index: -1;
    border-radius: 50% / 44%;
    background: radial-gradient(
      62% 60% at 40% 50%,
      rgba(3, 5, 12, 0.86) 0%,
      rgba(3, 5, 12, 0.6) 56%,
      transparent 100%
    );
    pointer-events: none;
  }
}