/* ==========================================================================
   RIC 2026 · Regional Investment Connect
   Sistema de diseño · Impact Hub Managua
   Paleta muestreada del deck oficial RIC 2026.
   Sin dependencias, sin build step. Compatible con hosting estático GoDaddy.
   ========================================================================== */

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

/* ------------------------------------------------------------------ TOKENS */
@layer tokens {
  :root {
    /* --- Marca RIC (valores exactos del deck) --- */
    --ric-indigo-950: #08012a;
    --ric-indigo-900: #0b0230;
    --ric-indigo-800: #130552; /* base oficial */
    --ric-indigo-700: #1b0b5e;
    --ric-indigo-600: #2a245c; /* superficie oficial */
    --ric-indigo-500: #3a3475;

    --ric-blue:    #2441e1;
    --ric-purple:  #991fa6;
    --ric-magenta: #e70d98;
    --ric-orange:  #f36b2e;
    --ric-amber:   #f59a1e;
    --ric-mint:    #c4e7e5;
    --ric-white:   #ffffff;

    /* Barra de gradiente oficial del deck */
    --ric-spectrum: linear-gradient(90deg,
      var(--ric-blue) 0%, var(--ric-purple) 18%, var(--ric-magenta) 34%,
      var(--ric-orange) 52%, var(--ric-amber) 66%, var(--ric-mint) 84%,
      var(--ric-white) 100%);

    /* --- Roles semánticos (tema oscuro por defecto) --- */
    --bg:            var(--ric-indigo-800);
    --bg-deep:       var(--ric-indigo-950);
    --surface:       color-mix(in oklab, var(--ric-indigo-600) 78%, transparent);
    --surface-2:     color-mix(in oklab, var(--ric-indigo-600) 92%, white 4%);
    --surface-solid: var(--ric-indigo-600);
    --line:          color-mix(in oklab, var(--ric-white) 14%, transparent);
    --line-strong:   color-mix(in oklab, var(--ric-white) 26%, transparent);

    --text:      #f4f2ff;
    --text-soft: color-mix(in oklab, #f4f2ff 72%, transparent);
    --text-mute: color-mix(in oklab, #f4f2ff 52%, transparent);
    --text-on-accent: #ffffff;

    /* Tinta para las superficies blancas que van sobre el degradado */
    --ink:       #16093f;
    --ink-soft:  color-mix(in oklab, #16093f 76%, transparent);
    --ink-mute:  color-mix(in oklab, #16093f 66%, transparent);
    --ink-line:  color-mix(in oklab, #16093f 13%, transparent);
    /* Texto que va DIRECTO sobre el degradado, sin superficie detrás */
    --on-ground: #ffffff;

    /* Blanco de las superficies. Translúcido: deja respirar el degradado. */
    --panel:      rgba(255,255,255,.955);
    --panel-soft: rgba(255,255,255,.88);
    --panel-glass: rgba(255,255,255,.14);

    --accent:      var(--ric-magenta);
    --accent-2:    var(--ric-blue);
    --accent-warm: var(--ric-orange);
    --accent-cool: var(--ric-mint);

    --focus: var(--ric-mint);

    /* --- Tipografía fluida --- */
    --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;

    --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --step--1: clamp(0.84rem, 0.81rem + 0.16vw, 0.94rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
    --step-2:  clamp(1.45rem, 1.30rem + 0.72vw, 1.95rem);
    --step-3:  clamp(1.75rem, 1.48rem + 1.32vw, 2.65rem);
    --step-4:  clamp(2.10rem, 1.62rem + 2.35vw, 3.60rem);
    --step-5:  clamp(2.55rem, 1.70rem + 4.10vw, 5.00rem);
    --step-6:  clamp(3.00rem, 1.50rem + 7.20vw, 7.20rem);

    /* --- Espacio --- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
    --sp-9: 6rem;     --sp-10: 8rem;
    --section-y: clamp(3rem, 1.9rem + 4.6vw, 6rem);
    --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
    --measure: 68ch;
    --max: 1240px;
    --max-wide: 1480px;

    /* --- Formas --- */
    --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-2xl: 42px;
    --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

    --shadow-sm: 0 1px 2px rgb(3 0 20 / .35);
    --shadow-md: 0 12px 28px -12px rgb(3 0 20 / .55);
    --shadow-lg: 0 32px 64px -28px rgb(3 0 20 / .70);
    --glow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent),
            0 18px 60px -20px color-mix(in oklab, var(--accent) 55%, transparent);

    /* --- Motion --- */
    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --dur-1: 140ms; --dur-2: 260ms; --dur-3: 480ms; --dur-4: 900ms;

    color-scheme: dark;
    scrollbar-color: var(--ric-indigo-500) transparent;
  }

  /* Tema claro — se activa con [data-theme="light"] */
  [data-theme="light"] .stat__num {
    background: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--ric-indigo-900)));
    -webkit-background-clip: text; background-clip: text;
  }

  [data-theme="light"] {
    --on-ground: #16093f;      /* ← faltaba: sin esto los títulos salían blancos sobre fondo claro */
    --bg: #f7f6fc;
    --bg-deep: #ffffff;
    --surface: #ffffff;
    --surface-2: #f0eefa;
    --surface-solid: #ffffff;
    --line: color-mix(in oklab, var(--ric-indigo-800) 12%, transparent);
    --line-strong: color-mix(in oklab, var(--ric-indigo-800) 26%, transparent);
    --text: var(--ric-indigo-900);
    --text-soft: color-mix(in oklab, var(--ric-indigo-900) 74%, transparent);
    --text-mute: color-mix(in oklab, var(--ric-indigo-900) 55%, transparent);
    --accent: #c9007f;
    --focus: var(--ric-blue);
    --shadow-md: 0 12px 28px -14px rgb(19 5 82 / .22);
    --shadow-lg: 0 32px 64px -30px rgb(19 5 82 / .28);
    color-scheme: light;
  }
}

/* ------------------------------------------------------------------- RESET */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { min-height: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  p, h1, h2, h3, h4, li { overflow-wrap: break-word; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  a { color: inherit; }
  :target { scroll-margin-top: 6rem; }
  ::selection { background: var(--ric-magenta); color: #fff; }
  :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
  [hidden] { display: none !important; }
}

/* -------------------------------------------------------------------- BASE */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--on-ground);
    background: var(--bg-deep);
    overflow-x: hidden;
    position: relative;
  }

  /* ── EL FONDO ──────────────────────────────────────────────────────────
     El degradado de marca, fijo detrás de toda la página. No usa
     background-attachment: fixed (que salta en iOS Safari) sino un
     pseudo-elemento en position: fixed, que es estable en todos lados.
     Capa 1 (::before): las manchas de color.
     Capa 2 (::after):  la trama diagonal del logo + el velo que baja la
                        luminancia lo suficiente para que el blanco se lea. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background:
      radial-gradient(130% 110% at 100%  0%, #ff8f42 0%, transparent 42%),
      radial-gradient(125% 115% at  82% 16%, #ff2aa4 0%, transparent 50%),
      radial-gradient(120% 125% at  50% 40%, #a927e0 0%, transparent 58%),
      radial-gradient(115% 115% at   2%  4%, #3555f5 0%, transparent 50%),
      radial-gradient(110% 100% at  88% 96%, #d5219b 0%, transparent 52%),
      radial-gradient(105%  95% at  10% 92%, #3b2ad0 0%, transparent 52%),
      linear-gradient(150deg, #2a0f86 0%, #3d0f92 30%, #5d1490 58%, #2b0b74 100%);
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
      repeating-linear-gradient(45deg,
        rgba(255,255,255,.06) 0 1.5px, transparent 1.5px 13px),
      linear-gradient(160deg,
        rgba(7,1,34,.52) 0%, rgba(7,1,34,.46) 42%,
        rgba(7,1,34,.44) 72%, rgba(7,1,34,.50) 100%);
  }

  /* Tema claro: el mismo degradado, luminoso y aireado. La tinta se invierte. */
  [data-theme="light"] body { color: var(--ink); background: #f6f4ff; }
  [data-theme="light"] body::before {
    z-index: -3;
    background:
      radial-gradient(135% 120% at 100%  2%, #ffd9b8 0%, transparent 42%),
      radial-gradient(130% 118% at  80% 20%, #ffc9e6 0%, transparent 50%),
      radial-gradient(125% 130% at  46% 34%, #e2ccfa 0%, transparent 56%),
      radial-gradient(120% 118% at   4%  6%, #c8d3fc 0%, transparent 50%),
      linear-gradient(150deg, #f4f0ff 0%, #f8f5ff 46%, #fffdfb 100%);
  }
  [data-theme="light"] body::after {
    background:
      repeating-linear-gradient(45deg,
        rgba(22,9,63,.045) 0 1.5px, transparent 1.5px 13px),
      linear-gradient(104deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 60%);
  }

  h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.028em;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); line-height: 1.2; }
  h4 { font-size: var(--step-1); line-height: 1.3; }
  p  { text-wrap: pretty; }

  strong, b { font-weight: 650; color: var(--text); }
  small { font-size: var(--step--1); }
  code, kbd { font-family: var(--font-mono); font-size: .9em; }
  hr { border: 0; height: 1px; background: var(--line); }
}

/* ------------------------------------------------------------------ LAYOUT */
@layer layout {
  .wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
  .wrap-wide { width: min(100% - var(--gutter) * 2, var(--max-wide)); margin-inline: auto; }
  .section { padding-block: var(--section-y); position: relative; }
  .section--tight { padding-block: clamp(2.2rem, 1.5rem + 3vw, 4rem); }
  .stack > * + * { margin-top: var(--flow, 1rem); }
  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: 1.1em; }

  .grid { display: grid; gap: var(--gap, var(--sp-5)); }
  .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
  .split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  @media (min-width: 62rem) { .split { grid-template-columns: 1.05fr .95fr; } .split--narrow { grid-template-columns: 1.3fr .7fr; } }

  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--sp-3)); align-items: center; }
  .between { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
  .center { text-align: center; margin-inline: auto; }
  .center > p { max-width: 58ch; margin-inline: auto; }
}

/* -------------------------------------------------------------- COMPONENTS */
@layer components {

  /* --- Barra espectro RIC (firma de marca del deck) --- */
  .spectrum {
    height: 6px; width: min(100%, 30rem); border-radius: 99px;
    background: var(--ric-spectrum);
    background-size: 200% 100%;
  }
  .spectrum--full { width: 100%; height: 4px; border-radius: 0; }
  .spectrum--thin { height: 3px; }

  /* --- Trama diagonal del logo RIC --- */
  .hatch {
    background-image: repeating-linear-gradient(45deg,
      currentColor 0 1.5px, transparent 1.5px 9px);
    opacity: .16;
  }

  /* --- Eyebrow / kicker --- */
  .eyebrow {
    font-family: var(--font-display);
    font-size: var(--step--1); font-weight: 650;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); display: inline-flex; align-items: center; gap: .6rem;
  }
  .eyebrow::before {
    content: ""; width: 1.6rem; height: 2px; border-radius: 2px;
    background: var(--ric-spectrum); flex: none;
  }
  .eyebrow--plain::before { display: none; }

  /* --- Botones --- */
  .btn {
    --btn-bg: var(--surface-2);
    --btn-fg: var(--text);
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .82em 1.5em; border-radius: 99px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
    letter-spacing: .01em; text-decoration: none; white-space: nowrap;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1px solid var(--line);
    transition: transform var(--dur-2) var(--ease-spring),
                box-shadow var(--dur-2) var(--ease),
                background-color var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
    position: relative; isolation: isolate; overflow: hidden;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn:active { transform: translateY(0) scale(.98); }
  .btn svg { width: 1.1em; height: 1.1em; flex: none; }

  .btn--primary {
    --btn-fg: #fff;
    background: linear-gradient(115deg, var(--ric-blue), var(--ric-purple) 42%, var(--ric-magenta));
    background-size: 200% 200%; border-color: transparent;
    box-shadow: 0 10px 34px -14px color-mix(in oklab, var(--ric-magenta) 80%, transparent);
  }
  .btn--primary:hover { background-position: 100% 50%; box-shadow: var(--glow); }
  .btn--warm { --btn-fg: #2b0d00; background: linear-gradient(115deg, var(--ric-amber), var(--ric-orange)); border-color: transparent; }
  .btn--ghost { background: transparent; border-color: var(--line-strong); }
  .btn--ghost:hover { background: var(--surface); border-color: var(--accent); }
  .btn--lg { padding: 1em 1.9em; font-size: var(--step-0); }
  .btn--sm { padding: .6em 1.1em; font-size: var(--step--2); }
  .btn--block { width: 100%; }

  /* Flecha que se desplaza al hover */
  .btn .arw { transition: transform var(--dur-2) var(--ease-out); }
  .btn:hover .arw { transform: translateX(3px); }

  /* --- Chips / badges --- */
  .chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .34em .85em; border-radius: 99px;
    font-size: var(--step--2); font-weight: 600; font-family: var(--font-display);
    letter-spacing: .04em;
    background: color-mix(in oklab, var(--accent) 16%, transparent);
    color: color-mix(in oklab, var(--accent) 92%, white);
    border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
  }
  [data-theme="light"] .chip:not(.chip--mint) { color: var(--accent); }
  .chip--mint  { --accent: var(--ric-mint); color: #0d3f3c; background: color-mix(in oklab, var(--ric-mint) 82%, transparent); border-color: transparent; }
  .chip--blue  { --accent: var(--ric-blue); }
  .chip--amber { --accent: var(--ric-amber); }
  .chip--live  { --accent: var(--ric-orange); }
  .chip--live::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 99px; background: currentColor;
    animation: pulse 1.8s var(--ease) infinite;
  }

  /* --- Card --- */
  .card {
    position: relative; padding: clamp(1.35rem, 1rem + 1.3vw, 2.1rem);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    backdrop-filter: blur(14px);
    transition: transform var(--dur-3) var(--ease-out),
                border-color var(--dur-2) var(--ease),
                box-shadow var(--dur-3) var(--ease);
    overflow: hidden;
  }
  .card::after {
    /* halo que sigue al cursor */
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
      color-mix(in oklab, var(--accent) 22%, transparent), transparent 62%);
    opacity: 0; transition: opacity var(--dur-3) var(--ease);
  }
  .card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
  .card:hover::after { opacity: 1; }
  .card > * { position: relative; z-index: 1; }
  .card__title { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: .5rem; }
  .card__kicker {
    font-family: var(--font-display); font-size: var(--step--2); font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .7rem;
  }
  .card p { color: var(--text-soft); font-size: var(--step--1); }
  .card--solid { background: var(--surface-solid); backdrop-filter: none; }
  .card--flat:hover { transform: none; }
  .card--accent {
    background: linear-gradient(150deg,
      color-mix(in oklab, var(--ric-blue) 26%, var(--surface-solid)),
      color-mix(in oklab, var(--ric-magenta) 16%, var(--surface-solid)));
    border-color: color-mix(in oklab, var(--ric-magenta) 30%, transparent);
  }
  /* Línea espectro superior opcional */
  .card--top::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--ric-spectrum); opacity: .9;
  }

  /* Colores temáticos de tarjeta (territorios RIC) */
  .t-capital    { --accent: var(--ric-magenta); }
  .t-mercados   { --accent: var(--ric-orange); }
  .t-talento    { --accent: var(--ric-amber); }
  .t-innovacion { --accent: var(--ric-blue); }
  .t-programas  { --accent: var(--ric-purple); }
  .t-ia         { --accent: var(--ric-mint); }

  /* Sobre el indigo oscuro, el azul y el púrpura puros de marca no alcanzan
     contraste AA como texto pequeño (2.5:1 y 2.7:1). Se aclaran SOLO para el
     rol de acento tipográfico; la paleta de marca sigue intacta para rellenos,
     degradados y la barra espectro. */
  .t-innovacion { --accent: #6b86ff; }
  .t-programas  { --accent: #c76fd6; }
  .chip--blue   { --accent: #6b86ff; }

  /* Acentos de territorio ajustados para contraste AA en tema claro */
  [data-theme="light"] .t-capital    { --accent: #c1007e; }
  [data-theme="light"] .t-mercados   { --accent: #c2470f; }
  [data-theme="light"] .t-talento    { --accent: #9a6100; }
  [data-theme="light"] .t-innovacion { --accent: #2036c0; }
  [data-theme="light"] .t-programas  { --accent: #8a1a96; }
  [data-theme="light"] .t-ia         { --accent: #0e6f6a; }


  /* --- Bento --- */
  .bento { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 52rem) { .bento { grid-template-columns: repeat(6, 1fr); } }
  .bento > * { grid-column: span 2; }
  @media (min-width: 52rem) {
    .b-3 { grid-column: span 3; } .b-2 { grid-column: span 2; }
    .b-4 { grid-column: span 4; } .b-6 { grid-column: span 6; }
    .b-tall { grid-row: span 2; }
  }

  /* --- Stat --- */
  .stat__num {
    font-family: var(--font-display); font-weight: 800;
    font-size: var(--step-4); line-height: 1;
    background: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--accent) 45%, var(--ric-white)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
  }
  .stat__label { font-size: var(--step--1); color: var(--text-soft); margin-top: .35rem; display: block; }
}

@layer components {

  /* ------------------------------------------------------------ SKIP LINK */
  .skip {
    position: fixed; top: .6rem; left: .6rem; z-index: 200;
    padding: .7em 1.1em; border-radius: var(--r-sm);
    background: var(--ric-magenta); color: #fff; font-weight: 600;
    transform: translateY(-160%); transition: transform var(--dur-2) var(--ease);
  }
  .skip:focus { transform: translateY(0); }

  /* ------------------------------------------------------------- PROGRESO */
  .scrollbar-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120;
    background: var(--ric-spectrum); transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
  }
  @supports (animation-timeline: scroll()) {
    .scrollbar-progress {
      transform: scaleX(0);
      animation: growProgress linear both;
      animation-timeline: scroll(root block);
    }
  }


  /* ═══════════════════════════════════════════════════════════════ AURORA ═══
     El degradado de la portada del deck RIC 2026, convertido en sistema.
     Manchas suaves de color en la paleta del espectro que derivan lentamente
     sobre el indigo base. Se usa en la cabecera de TODAS las páginas.
     Puro CSS: sin imágenes, sin librerías, ~0 KB de peso extra. */
  .aurora { display: none; }
  .aurora--legacy {
    position: absolute; inset: -20% -10% auto -10%; height: 150%;
    z-index: 0; pointer-events: none; overflow: hidden;
    /* Se desvanece hacia abajo para fundirse con el fondo de la página */
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  }
  .aurora--legacy::before, .aurora--legacy::after {
    content: ""; position: absolute; inset: -25%;
    background-repeat: no-repeat;
    will-change: transform;
  }
  /* Capa 1 — azul · púrpura · magenta (mitad izquierda del espectro) */
  .aurora--legacy::before {
    background-image:
      radial-gradient(38rem 28rem at 12% 18%, color-mix(in oklab, var(--ric-blue) 62%, transparent), transparent 66%),
      radial-gradient(32rem 26rem at 38% 6%,  color-mix(in oklab, var(--ric-purple) 55%, transparent), transparent 64%),
      radial-gradient(34rem 30rem at 66% 26%, color-mix(in oklab, var(--ric-magenta) 50%, transparent), transparent 66%);
    animation: auroraA 26s var(--ease) infinite alternate;
  }
  /* Capa 2 — naranja · ámbar · menta (mitad derecha del espectro) */
  .aurora--legacy::after {
    background-image:
      radial-gradient(30rem 24rem at 86% 10%, color-mix(in oklab, var(--ric-orange) 45%, transparent), transparent 64%),
      radial-gradient(26rem 22rem at 96% 40%, color-mix(in oklab, var(--ric-amber) 38%, transparent), transparent 62%),
      radial-gradient(30rem 26rem at 58% 62%, color-mix(in oklab, var(--ric-mint) 30%, transparent), transparent 66%);
    animation: auroraB 34s var(--ease) infinite alternate;
    opacity: .9;
  }
  /* Grano fino: evita el bandeado de los degradados en pantallas grandes */
  .aurora__grain {
    position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* Trama diagonal del logo, muy sutil, sobre la aurora */
  .aurora__hatch {
    position: absolute; inset: 0; opacity: .05; color: #fff;
    background-image: repeating-linear-gradient(45deg, currentColor 0 1.5px, transparent 1.5px 12px);
    mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
    -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
  }

  [data-theme="light"] .aurora::before { opacity: .34; }
  [data-theme="light"] .aurora::after  { opacity: .30; }
  [data-theme="light"] .aurora__hatch  { color: var(--ric-indigo-800); opacity: .07; }
  [data-theme="light"] .aurora__grain  { opacity: .03; }

  /* Cabecera de página con aurora */
  .page-head { position: relative; overflow: hidden; isolation: isolate; }
  .page-head > .wrap, .page-head > .wrap-wide { position: relative; z-index: 1; }

  /* Título de página con el degradado del espectro */
  /* El título va en color sólido sobre el degradado del fondo. Nada de
     background-clip aquí: si otra regla pinta un fondo y el texto queda
     sólido, el degradado aparece como un rectángulo detrás del título. */
  .grad-head,
  [data-theme="light"] .grad-head {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    animation: none;
  }
  .grad-head { color: var(--on-ground); }
  [data-theme="light"] .grad-head { color: var(--ink); }

  @keyframes auroraA {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
    100% { transform: translate3d(-2%, 4%, 0) scale(1.04); }
  }
  @keyframes auroraB {
    0%   { transform: translate3d(0,0,0) scale(1.04); }
    50%  { transform: translate3d(-4%, 3%, 0) scale(1); }
    100% { transform: translate3d(3%, -2%, 0) scale(1.09); }
  }
  @media (prefers-reduced-motion: reduce) {
    .aurora--legacy::before, .aurora--legacy::after { animation: none; }
    .grad-head { animation: none; }
  }


  /* ------------------------------------------------------------------ NAV */
  .nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(11,2,48,.42);
    backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  }
  .nav[data-stuck="true"] { border-bottom-color: rgba(255,255,255,.14); background: rgba(11,2,48,.72); }
  [data-theme="light"] .nav { background: rgba(255,255,255,.55); }
  [data-theme="light"] .nav[data-stuck="true"] { background: rgba(255,255,255,.82); border-bottom-color: var(--ink-line); }
  .nav__link { color: rgba(255,255,255,.74); }
  .nav__link:hover { color: #fff; background: rgba(255,255,255,.12); }
  .nav__link[aria-current="page"] { color: #fff; }
  [data-theme="light"] .nav__link { color: var(--ink-soft); }
  [data-theme="light"] .nav__link:hover,
  [data-theme="light"] .nav__link[aria-current="page"] { color: var(--ink); background: rgba(22,9,63,.06); }
  .nav__logo .logo-mark { color: #fff; }
  [data-theme="light"] .nav__logo .logo-mark { color: var(--ink); }
  .icon-btn { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.8); }
  .icon-btn:hover { border-color: rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.12); }
  [data-theme="light"] .icon-btn { border-color: var(--ink-line); color: var(--ink-soft); }
  [data-theme="light"] .icon-btn:hover { color: var(--ink); background: rgba(22,9,63,.06); }
  .lang { border-color: rgba(255,255,255,.28); }
  .lang button { color: rgba(255,255,255,.62); }
  [data-theme="light"] .lang { border-color: var(--ink-line); }
  [data-theme="light"] .lang button { color: var(--ink-mute); }
  .nav__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 4.5rem; }
  .nav__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
  .nav__logo .logo-mark { display: block; width: 5.4rem; color: var(--text); }
  .nav__logo .logo-mark svg { width: 100%; height: auto; display: block; }
  .nav__logo .logo-mark--full { width: 11.5rem; }
  @media (min-width: 48rem) { .nav__logo .logo-mark { width: 6.2rem; } }
  .nav__year {
    font-family: var(--font-display); font-weight: 800; font-size: var(--step--1);
    letter-spacing: .04em; padding: .18em .55em; border-radius: 6px;
    background: var(--ric-spectrum); color: #0b0230;
  }

  .nav__links { display: none; gap: .1rem; margin-inline: auto; }
  @media (min-width: 68rem) { .nav__links { display: flex; } }
  .nav__link {
    position: relative; padding: .55em .82em; border-radius: 99px;
    font-size: var(--step--1); font-weight: 500; color: var(--text-soft);
    text-decoration: none; white-space: nowrap;
    transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  }
  .nav__link:hover { color: var(--text); background: var(--surface); }
  .nav__link[aria-current="page"] { color: var(--text); font-weight: 600; }
  .nav__link[aria-current="page"]::after {
    content: ""; position: absolute; left: .82em; right: .82em; bottom: .18em; height: 2px;
    border-radius: 2px; background: var(--ric-spectrum);
  }

  .nav__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
  @media (min-width: 68rem) { .nav__actions { margin-left: 0; } }
  .nav__cta { display: none; }
  @media (min-width: 48rem) { .nav__cta { display: inline-flex; } }

  .icon-btn {
    display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem;
    border-radius: 99px; border: 1px solid var(--line); color: var(--text-soft);
    transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  }
  .icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface); }
  .icon-btn svg { width: 1.15rem; height: 1.15rem; }

  /* Selector de idioma */
  .lang { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
  .lang button {
    padding: .42em .8em; font-size: var(--step--2); font-weight: 700; font-family: var(--font-display);
    letter-spacing: .06em; color: var(--text-mute); transition: all var(--dur-1) var(--ease);
  }
  .lang button[aria-pressed="true"] { background: var(--ric-spectrum); color: #0b0230; }

  /* Menú móvil */
  .burger { display: inline-grid; }
  @media (min-width: 68rem) { .burger { display: none; } }
  .drawer {
    position: fixed; inset: 0; z-index: 150; display: grid; align-content: start;
    padding: 5.5rem var(--gutter) 2rem;
    background: rgba(9,2,42,.94);
    backdrop-filter: blur(22px);
    color: var(--on-ground);
    transform: translateY(-100%); visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), visibility var(--dur-3);
    overflow-y: auto;
  }
  .drawer[data-open="true"] { transform: translateY(0); visibility: visible; }
  .drawer a {
    font-family: var(--font-display); font-size: var(--step-2); font-weight: 600;
    padding: .5rem 0; text-decoration: none; border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
  }
  .drawer a span { color: var(--text-mute); font-size: var(--step--2); font-weight: 500; }
  .drawer__close { position: absolute; top: 1.4rem; right: var(--gutter); }


  /* ═════════════════════════════════════════════════════ CONSTELACIÓN ══
     El grafo de nodos del deck, vivo y compartido por todo el sitio.
     Va fija detrás del contenido, sobre el degradado: al desplazarte no se
     mueve, así que funciona como atmósfera y no como decoración de sección.
     La máscara la concentra en la mitad superior de la pantalla para que
     nunca compita con el texto de las tarjetas blancas. */
  .constellation {
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    opacity: .85;
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.35) 72%, transparent 96%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.35) 72%, transparent 96%);
  }
  .constellation canvas { width: 100%; height: 100%; display: block; }
  [data-theme="light"] .constellation { opacity: .55; }

  /* Sin JS o con movimiento reducido no queda ningún hueco visible:
     el fondo del degradado ya sostiene la página por sí solo. */

  /* ----------------------------------------------------------------- HERO */
  .hero { position: relative; padding-block: clamp(3rem, 2rem + 7vw, 7rem) clamp(3rem, 2rem + 5vw, 6rem); overflow: hidden; isolation: isolate; }
  /* .hero__canvas quedó obsoleto: la constelación ahora es global (.constellation) */
  .hero__inner { position: relative; z-index: 1; }
  .hero h1 {
    font-size: clamp(2.5rem, 1.55rem + 3.9vw, 4.6rem);
    font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  }
  .hero__lede { font-size: var(--step-1); color: var(--text-soft); max-width: 44ch; }

  .grad-text {
    background: linear-gradient(100deg, var(--ric-mint), var(--ric-magenta) 40%, var(--ric-amber) 78%, var(--ric-mint));
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 9s var(--ease) infinite;
  }

  /* Meta del evento */
  .meta { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); }
  .meta__item { display: grid; gap: .1rem; }
  .meta__k { font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
  .meta__v { font-family: var(--font-display); font-weight: 650; font-size: var(--step-0); }

  /* Cuenta regresiva */
  .countdown { display: flex; gap: .55rem; flex-wrap: wrap; }
  .cd {
    min-width: 4.4rem; padding: .7rem .55rem; text-align: center;
    border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
    backdrop-filter: blur(10px);
  }
  .cd b {
    display: block; font-family: var(--font-display); font-weight: 800;
    font-size: var(--step-2); line-height: 1; font-variant-numeric: tabular-nums;
  }
  .cd span { font-size: var(--step--2); color: var(--text-mute); letter-spacing: .1em; text-transform: uppercase; }

  /* --------------------------------------------------------- MARQUEE / TICKER */
  .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee__track { display: flex; gap: var(--sp-7); width: max-content; animation: slide 46s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 58s; }
  .marquee__item {
    display: flex; align-items: center; gap: .6rem; flex: none;
    font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
    color: var(--text-mute); letter-spacing: .04em; white-space: nowrap;
  }
  .marquee__item::after { content: "◆"; color: var(--accent); font-size: .55em; margin-left: var(--sp-4); opacity: .7; }
  .logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-5); align-items: center; }
  .logo-wall img {
    width: 100%; height: 3.2rem; object-fit: contain;
    filter: grayscale(1) brightness(1.9) contrast(.85); opacity: .62;
    transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .logo-wall img:hover { filter: none; opacity: 1; transform: scale(1.05); }
  [data-theme="light"] .logo-wall img { filter: grayscale(1) contrast(1.1); }
  [data-theme="light"] .logo-wall img:hover { filter: none; }

  /* ------------------------------------------------------------- TIMELINE */
  .timeline { display: grid; gap: 0; position: relative; }
  .timeline::before {
    content: ""; position: absolute; left: .58rem; top: .5rem; bottom: .5rem; width: 2px;
    background: linear-gradient(180deg, var(--ric-blue), var(--ric-magenta), var(--ric-amber), transparent);
    opacity: .5;
  }
  .tl-item { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--sp-4); padding-block: var(--sp-4); align-items: start; }
  .tl-dot {
    width: 1.2rem; height: 1.2rem; border-radius: 99px; margin-top: .35rem;
    background: var(--bg); border: 3px solid var(--accent); z-index: 1;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
  }
  .tl-item[data-done="true"] .tl-dot { background: var(--accent); }
  .tl-when { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); color: var(--accent); letter-spacing: .05em; text-transform: uppercase; }
  .tl-what { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; margin-top: .1rem; }
  .tl-note { font-size: var(--step--1); color: var(--text-soft); margin-top: .2rem; }

  /* ----------------------------------------------------------- ACORDEÓN */
  .acc { border-top: 1px solid var(--line); }
  .acc details { border-bottom: 1px solid var(--line); }
  .acc summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: 1.15rem 0; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
    transition: color var(--dur-1) var(--ease);
  }
  .acc summary::-webkit-details-marker { display: none; }
  .acc summary:hover { color: var(--accent); }
  .acc summary::after {
    content: ""; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 99px;
    border: 1px solid var(--line-strong);
    background:
      linear-gradient(currentColor, currentColor) center/ .62rem 1.6px no-repeat,
      linear-gradient(currentColor, currentColor) center/ 1.6px .62rem no-repeat;
    transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease);
  }
  .acc details[open] summary::after { transform: rotate(135deg); border-color: var(--accent); }
  .acc__body { padding-bottom: 1.3rem; color: var(--text-soft); max-width: var(--measure); font-size: var(--step--1); }
  .acc__body > * + * { margin-top: .7rem; }
}

@layer components {

  /* ------------------------------------------------------------ PRICING */
  .tier {
    position: relative; display: flex; flex-direction: column; gap: var(--sp-4);
    padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
    border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
    backdrop-filter: blur(14px);
    transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease), box-shadow var(--dur-3) var(--ease);
  }
  .tier:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
  .tier--featured {
    border-color: color-mix(in oklab, var(--ric-magenta) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--ric-magenta) 35%, transparent), var(--shadow-lg);
  }
  .tier--featured::before {
    content: attr(data-flag); position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
    padding: .25em .9em; border-radius: 99px; white-space: nowrap;
    font-family: var(--font-display); font-size: var(--step--2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: var(--ric-spectrum); color: #0b0230;
  }
  .tier__name { font-family: var(--font-display); font-size: var(--step--1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .tier__price { font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
  .tier__price sup { font-size: .42em; font-weight: 600; vertical-align: super; margin-right: .1em; color: var(--text-mute); }
  .tier__slots { font-size: var(--step--2); color: var(--text-mute); letter-spacing: .04em; }
  .tier__list { display: grid; gap: .62rem; font-size: var(--step--1); color: var(--text-soft); margin-top: auto; }
  .tier__list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start; }
  .tier__list li::before {
    content: ""; width: 1rem; height: 1rem; margin-top: .28rem; border-radius: 99px; flex: none;
    background: color-mix(in oklab, var(--accent) 22%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 70%, transparent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 78%; background-position: center; background-repeat: no-repeat;
  }
  .tier__list li[data-no]::before {
    background-image: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); background-color: transparent;
  }
  .tier__list li[data-no] { color: var(--text-mute); }

  /* ------------------------------------------------------------- TABLA */
  .table-scroll { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
  table.matrix { width: 100%; border-collapse: collapse; min-width: 44rem; font-size: var(--step--1); }
  table.matrix th, table.matrix td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
  table.matrix thead th {
    background: var(--surface-2); font-family: var(--font-display); font-weight: 700;
    font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
  }
  table.matrix tbody th { font-weight: 500; color: var(--text-soft); }
  table.matrix td { text-align: center; font-family: var(--font-display); font-weight: 600; }
  table.matrix tbody tr:hover { background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
  table.matrix tbody tr:last-child td, table.matrix tbody tr:last-child th { border-bottom: 0; }
  .yes { color: var(--ric-mint); } .no { color: var(--text-mute); }

  /* --------------------------------------------------------- FORMULARIOS */
  .form { display: grid; gap: var(--sp-5); }
  .fieldset { display: grid; gap: var(--sp-4); border: 0; padding: 0; }
  .fieldset > legend {
    font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
    padding: 0 0 .2rem; margin-bottom: .4rem;
  }
  .field { display: grid; gap: .4rem; }
  .field > label, .field > .lbl {
    font-size: var(--step--1); font-weight: 600; font-family: var(--font-display); letter-spacing: .01em;
  }
  .field .hint { font-size: var(--step--2); color: var(--text-mute); }
  .req { color: var(--ric-magenta); }

  .input, .select, .textarea {
    width: 100%; padding: .82em 1em; border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--bg-deep) 55%, transparent);
    border: 1px solid var(--line); color: var(--text);
    font-size: var(--step--1); font-family: inherit;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  }
  [data-theme="light"] .input, [data-theme="light"] .select, [data-theme="light"] .textarea { background: #fff; }
  .input::placeholder, .textarea::placeholder { color: var(--text-mute); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
  .input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 24%, transparent);
  }
  .textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
  .select {
    appearance: none; padding-right: 2.6em; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23928bbd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9em center; background-size: 1.05em;
  }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: #ff6b8a; box-shadow: 0 0 0 3px rgb(255 107 138 / .18);
  }
  .err { font-size: var(--step--2); color: #ff9db1; min-height: 1.1em; }
  [data-theme="light"] .err { color: #c02a4a; }

  .row { display: grid; gap: var(--sp-4); }
  @media (min-width: 44rem) { .row-2 { grid-template-columns: 1fr 1fr; } .row-3 { grid-template-columns: repeat(3, 1fr); } }

  /* Opciones tipo tarjeta (radio / checkbox) */
  .opts { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
  .opt { position: relative; display: block; cursor: pointer; }
  .opt input { position: absolute; opacity: 0; width: 0; height: 0; }
  .opt__box {
    display: grid; gap: .25rem; height: 100%;
    padding: .9rem 1rem; border-radius: var(--r-md);
    background: color-mix(in oklab, var(--bg-deep) 42%, transparent);
    border: 1px solid var(--line);
    transition: all var(--dur-2) var(--ease);
  }
  [data-theme="light"] .opt__box { background: #fff; }
  .opt:hover .opt__box { border-color: var(--line-strong); transform: translateY(-1px); }
  .opt input:focus-visible + .opt__box { box-shadow: var(--ring); }
  .opt input:checked + .opt__box {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 15%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent);
  }
  .opt__t { font-family: var(--font-display); font-weight: 650; font-size: var(--step--1); }
  .opt__d { font-size: var(--step--2); color: var(--text-mute); line-height: 1.45; }

  /* Consentimiento */
  .consent { display: grid; grid-template-columns: 1.15rem 1fr; gap: .8rem; align-items: start; font-size: var(--step--2); color: var(--text-soft); }
  .consent input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .18rem; accent-color: var(--ric-magenta); }

  /* Honeypot */
  .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

  /* Pasos */
  .steps { display: flex; gap: .5rem; flex-wrap: wrap; }
  .steps li {
    display: flex; align-items: center; gap: .45rem;
    font-size: var(--step--2); color: var(--text-mute); font-family: var(--font-display); font-weight: 600;
  }
  .steps li b {
    display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 99px;
    border: 1px solid var(--line-strong); font-size: var(--step--2);
  }
  .steps li[aria-current="step"] { color: var(--text); }
  .steps li[aria-current="step"] b { background: var(--ric-spectrum); color: #0b0230; border-color: transparent; }

  /* Estado del formulario */
  .form-status { padding: 1rem 1.15rem; border-radius: var(--r-md); font-size: var(--step--1); border: 1px solid var(--line); }
  .form-status[data-kind="ok"] { border-color: color-mix(in oklab, var(--ric-mint) 55%, transparent); background: color-mix(in oklab, var(--ric-mint) 14%, transparent); }
  .form-status[data-kind="err"] { border-color: #ff6b8a55; background: rgb(255 107 138 / .10); }
  .form-status[data-kind="busy"] { border-color: var(--line-strong); background: var(--surface); }

  /* ------------------------------------------------------------ RIC MATCH */
  .match { position: relative; overflow: hidden; }
  .match__q { display: grid; gap: var(--sp-4); }
  .match__result { display: grid; gap: var(--sp-4); }
  .match__pill {
    display: inline-flex; align-items: center; gap: .5rem; padding: .4em 1em; border-radius: 99px;
    background: var(--ric-spectrum); color: #0b0230;
    font-family: var(--font-display); font-weight: 700; font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase;
  }


  /* ══════════════════════════════════════════════════ SUPERFICIES BLANCAS ══
     Sobre el degradado, el contenido denso vive en paneles blancos: ahí el
     texto es tinta oscura y se lee sin esfuerzo. El truco es redefinir los
     tokens de texto DENTRO del panel — como las custom properties heredan,
     todo lo que esté adentro cambia de color solo, sin tocar cada regla. */
  .panel,
  .card,
  .tier,
  .acc,
  .table-scroll,
  .match {
    --accent: #c1007e;
    --text: var(--ink);
    --text-soft: var(--ink-soft);
    --text-mute: var(--ink-mute);
    --line: var(--ink-line);
    --line-strong: color-mix(in oklab, var(--ink) 24%, transparent);
    --surface: rgba(255,255,255,.72);
    --surface-2: rgba(255,255,255,.86);
    color: var(--ink);
  }

  .card, .tier, .match {
    background: var(--panel);
    border-color: rgba(255,255,255,.6);
    box-shadow: 0 1px 2px rgba(10,2,44,.10), 0 18px 40px -22px rgba(10,2,44,.45);
    backdrop-filter: blur(6px);
  }
  .card:hover, .tier:hover {
    border-color: rgba(255,255,255,.9);
    box-shadow: 0 1px 2px rgba(10,2,44,.10), 0 30px 60px -26px rgba(10,2,44,.55);
  }
  .card--solid { background: #fff; }

  /* Los acentos de territorio usan sus valores de alto contraste:
     sobre blanco son los mismos que ya validamos para el tema claro. */
  .card.t-capital,    .tier.t-capital,    .t-capital    .card { --accent: #c1007e; }
  .card.t-mercados,   .tier.t-mercados,   .t-mercados   .card { --accent: #c2470f; }
  .card.t-talento,    .tier.t-talento,    .t-talento    .card { --accent: #9a6100; }
  .card.t-innovacion, .tier.t-innovacion, .t-innovacion .card { --accent: #2036c0; }
  .card.t-programas,  .tier.t-programas,  .t-programas  .card { --accent: #8a1a96; }
  .card.t-ia,         .tier.t-ia,         .t-ia         .card { --accent: #0e6f6a; }

  /* La tarjeta destacada conserva el degradado, con texto blanco */
  .card--accent {
    --text: #fff;
    --text-soft: rgba(255,255,255,.82);
    --text-mute: rgba(255,255,255,.62);
    --line: rgba(255,255,255,.22);
    --line-strong: rgba(255,255,255,.4);
    --accent: var(--ric-mint);
    color: #fff;
    background: linear-gradient(142deg, #2b1580 0%, #4a1180 42%, #7d0f6b 100%);
    border-color: rgba(255,255,255,.24);
    backdrop-filter: none;
  }
  .card--accent .card__kicker { color: var(--ric-mint); }
  .card--accent .stat__num,
  .cta-band .stat__num {
    background: none; -webkit-text-fill-color: #fff; color: #fff;
  }
  .card--accent .stat__label,
  .cta-band .stat__label { color: rgba(255,255,255,.72); }
  .card--accent .tier__list li::before {
    background-color: rgba(255,255,255,.2);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
  }
  .card--accent a { color: var(--ric-mint); }

  /* Acordeón y tabla: paneles blancos completos */
  .acc {
    background: var(--panel); border-radius: var(--r-lg);
    padding: 0 clamp(1.1rem, .8rem + 1.1vw, 1.9rem);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 18px 40px -24px rgba(10,2,44,.45);
    backdrop-filter: blur(6px);
  }
  .acc details:last-child { border-bottom: 0; }
  .table-scroll { background: var(--panel); border-color: rgba(255,255,255,.6); backdrop-filter: blur(6px); }
  table.matrix thead th { background: #f3f0ff; }
  table.matrix tbody tr:hover { background: #faf8ff; }
  .yes { color: #0e6f6a; }

  /* Campos de formulario dentro de un panel blanco */
  .card .input, .card .select, .card .textarea,
  .panel .input, .panel .select, .panel .textarea {
    background: #fff;
    border-color: color-mix(in oklab, var(--ink) 18%, transparent);
    color: var(--ink);
  }
  .card .opt__box, .panel .opt__box { background: #fbfaff; }
  .card .opt input:checked + .opt__box,
  .panel .opt input:checked + .opt__box {
    background: color-mix(in oklab, var(--accent) 10%, #fff);
  }
  .card .select, .panel .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23716a9c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  }
  .card .err, .panel .err { color: #c02a4a; }
  .card .form-status[data-kind="ok"] { background: #eafaf7; border-color: #9fdcd2; color: #0b4f48; }
  .card .form-status[data-kind="err"] { background: #fdeef1; border-color: #f0b4c1; color: #8c1230; }
  .card .form-status[data-kind="busy"] { background: #f4f2ff; border-color: var(--ink-line); }

  /* ── Texto que va DIRECTO sobre el degradado ───────────────────────────── */
  .section > .wrap > .eyebrow,
  .section h1, .section h2,
  .hero h1, .hero__lede,
  .page-head h1 { color: var(--on-ground); }
  .section > .wrap > p,
  .section > .wrap > .lede,
  .split > div > p, .split > div > .lede,
  .center > p { color: color-mix(in oklab, var(--on-ground) 82%, transparent); }
  [data-theme="light"] .section > .wrap > .eyebrow,
  [data-theme="light"] .page-head .eyebrow { color: var(--accent); }

  /* Botón fantasma sobre el degradado */
  .btn--ghost { border-color: rgba(255,255,255,.42); color: var(--on-ground); }
  .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.75); }
  [data-theme="light"] .btn--ghost { border-color: color-mix(in oklab, var(--ink) 26%, transparent); color: var(--ink); }
  [data-theme="light"] .btn--ghost:hover { background: rgba(255,255,255,.7); }
  /* Dentro de un panel blanco vuelve a tinta oscura */
  .card .btn--ghost, .panel .btn--ghost, .acc .btn--ghost,
  .tier .btn--ghost, .match .btn--ghost, .table-scroll .btn--ghost {
    border-color: color-mix(in oklab, var(--ink) 22%, transparent);
    color: var(--ink);
    background: transparent;
  }
  .card .btn--ghost:hover, .tier .btn--ghost:hover,
  .acc .btn--ghost:hover, .match .btn--ghost:hover {
    background: #f4f2ff; border-color: var(--accent); color: var(--accent);
  }

  /* Chips sobre el degradado: vidrio blanco */
  .section > .wrap > .cluster > .chip,
  .page-head .chip, .hero .chip {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.34);
    color: #fff;
    backdrop-filter: blur(8px);
  }
  .hero .chip--mint, .page-head .chip--mint {
    background: rgba(255,255,255,.9); color: #0d3f3c; border-color: transparent;
  }
  [data-theme="light"] .section > .wrap > .cluster > .chip,
  [data-theme="light"] .page-head .chip, [data-theme="light"] .hero .chip {
    background: rgba(255,255,255,.72); border-color: rgba(22,9,63,.12); color: var(--ink);
  }

  /* Línea de tiempo sobre el degradado */
  .tl-when { color: color-mix(in oklab, var(--on-ground) 88%, transparent); }
  .tl-what { color: var(--on-ground); }
  .tl-note { color: color-mix(in oklab, var(--on-ground) 68%, transparent); }
  .tl-dot  { background: rgba(255,255,255,.16); border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
  [data-theme="light"] .tl-when { color: var(--accent); }
  [data-theme="light"] .tl-what { color: var(--ink); }
  [data-theme="light"] .tl-note { color: var(--ink-mute); }
  [data-theme="light"] .tl-dot  { background: #fff; border-color: var(--accent); }

  /* Cifras: blancas sobre el degradado, con acento dentro de panel */
  .stat__num { background: none; -webkit-text-fill-color: currentColor; color: var(--on-ground); }
  .card .stat__num, .panel .stat__num {
    background: linear-gradient(120deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--ink)));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  [data-theme="light"] .stat__num { color: var(--ink); }

  /* Marquesina y logos sobre el degradado */
  .marquee__item { color: rgba(255,255,255,.72); }
  [data-theme="light"] .marquee__item { color: var(--ink-mute); }

  /* -------------------------------------------------------------- GALERÍA */
  .gallery { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 56rem) { .gallery { grid-template-columns: repeat(4, 1fr); } }
  .gallery figure { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
  .gallery img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
    transition: transform var(--dur-4) var(--ease-out), filter var(--dur-3) var(--ease);
    filter: saturate(.85) contrast(1.03);
  }
  .gallery figure:hover img { transform: scale(1.05); filter: none; }
  .gallery figcaption {
    position: absolute; inset: auto 0 0 0; padding: 1.6rem .9rem .7rem;
    font-size: var(--step--2); font-weight: 600; font-family: var(--font-display);
    color: #fff; letter-spacing: .04em;
    background: linear-gradient(transparent, rgb(8 1 42 / .88));
  }
  .gallery figure::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: inherit;
  }

  /* --------------------------------------------------------------- FOOTER */
  .footer {
    border-top: 1px solid rgba(255,255,255,.14);
    margin-top: var(--sp-8);
    background: rgba(9,2,42,.55);
    backdrop-filter: blur(16px);
    color: var(--on-ground);
  }
  .footer h4 { color: rgba(255,255,255,.55); }
  .footer a { color: rgba(255,255,255,.78); }
  .footer a:hover { color: var(--ric-mint); }
  .footer .soft, .footer .muted, .footer__bottom { color: rgba(255,255,255,.58); }
  .footer .nav__logo .logo-mark { color: #fff; }
  .footer .social a { border-color: rgba(255,255,255,.24); }
  .footer .btn--ghost { border-color: rgba(255,255,255,.34); color: #fff; }
  [data-theme="light"] .footer {
    background: rgba(255,255,255,.6); border-top-color: var(--ink-line); color: var(--ink);
  }
  [data-theme="light"] .footer h4 { color: var(--ink-mute); }
  [data-theme="light"] .footer a { color: var(--ink-soft); }
  [data-theme="light"] .footer .soft,
  [data-theme="light"] .footer .muted,
  [data-theme="light"] .footer__bottom { color: var(--ink-mute); }
  [data-theme="light"] .footer .nav__logo .logo-mark { color: var(--ink); }
  [data-theme="light"] .footer .social a { border-color: var(--ink-line); }
  [data-theme="light"] .footer .btn--ghost { border-color: var(--ink-line); color: var(--ink); }
  .footer__grid { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); }
  @media (min-width: 52rem) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
  .footer h4 { font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: .9rem; font-weight: 700; }
  .footer ul { display: grid; gap: .55rem; list-style: none; padding: 0; margin: 0; }
  .footer a { color: var(--text-soft); text-decoration: none; font-size: var(--step--1); transition: color var(--dur-1) var(--ease); }
  .footer a:hover { color: var(--accent); }
  .footer__bottom {
    border-top: 1px solid var(--line); padding-block: var(--sp-5);
    display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
    font-size: var(--step--2); color: var(--text-mute);
  }
  .social { display: flex; gap: .5rem; }
  .social a { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 99px; border: 1px solid var(--line); }
  .social a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
  .social svg { width: 1.05rem; height: 1.05rem; }

  /* -------------------------------------------------------------- CTA BAND */
  .cta-band {
    position: relative; overflow: hidden; border-radius: var(--r-2xl);
    padding: clamp(2.2rem, 1.5rem + 3.4vw, 4.5rem) clamp(1.4rem, 1rem + 2.6vw, 3.5rem);
    background: linear-gradient(125deg, var(--ric-indigo-700), var(--ric-indigo-800) 55%, #35095e);
    border: 1px solid color-mix(in oklab, var(--ric-magenta) 26%, transparent);
    box-shadow: var(--shadow-lg);
    color: #f4f2ff;
  }
  .cta-band::before {
    content: ""; position: absolute; inset: 0; opacity: .1; color: #fff;
    background-image: repeating-linear-gradient(45deg, currentColor 0 1.5px, transparent 1.5px 11px);
    mask-image: linear-gradient(200deg, #000 5%, transparent 55%);
  }
  .cta-band > * { position: relative; }
  .cta-band h2 { color: #fff; }
  .cta-band p { color: color-mix(in oklab, #fff 78%, transparent); }
}

/* ------------------------------------------------------------------ MOTION */
@layer motion {
  @keyframes shimmer   { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  @keyframes slide     { to { transform: translateX(-50%); } }
  @keyframes pulse     { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
  @keyframes growProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes floatY    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes revealUp  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes revealIn  { from { opacity: 0; } to { opacity: 1; } }

  /* Revelado al hacer scroll.
     REGLA DE ORO: el contenido es visible por defecto. Solo se oculta cuando
     el JS confirmó que está corriendo (html[data-js="on"]) y hay un observador
     capaz de volver a mostrarlo. Sin JS, con JS fallido, en impresión o en
     lectores de pantalla, todo se ve. Nunca dependemos de una función
     experimental de CSS para que el sitio sea legible. */
  .reveal { opacity: 1; }

  @media (prefers-reduced-motion: no-preference) {
    html[data-js="on"] .reveal { opacity: 0; }
    html[data-js="on"] .reveal.is-in { animation: revealUp var(--dur-4) var(--ease-out) both; }
    html[data-js="on"] .reveal[data-reveal="fade"].is-in { animation-name: revealIn; }
  }

  /* Parallax decorativo del arte del hero: puramente estético, nunca
     afecta la legibilidad del contenido. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .drift { animation: driftUp linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
      @keyframes driftUp { from { transform: translateY(3%); } to { transform: translateY(-5%); } }
    }
  }

  .float { animation: floatY 7s var(--ease) infinite; }

  /* Transiciones entre páginas */
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: revealIn var(--dur-2) var(--ease) reverse; }
    ::view-transition-new(root) { animation: revealUp var(--dur-3) var(--ease-out); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; animation: none !important; }
    .marquee__track { animation: none !important; }
    @view-transition { navigation: none; }
  }
}

/* --------------------------------------------------------------- UTILIDADES */
@layer utilities {
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .muted { color: var(--text-mute); }
  .soft  { color: var(--text-soft); }
  .lede  { font-size: var(--step-1); color: var(--text-soft); }
  .small { font-size: var(--step--1); }
  .tiny  { font-size: var(--step--2); }
  .mono  { font-family: var(--font-mono); }
  .upper { text-transform: uppercase; letter-spacing: .12em; }
  .nowrap{ white-space: nowrap; }
  .fw-6  { font-weight: 600; }
  .disp  { font-family: var(--font-display); }

  .mt-0{margin-top:0} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
  .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
  .mt-7{margin-top:var(--sp-7)} .mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)}
  .mb-6{margin-bottom:var(--sp-6)} .mb-7{margin-bottom:var(--sp-7)}
  .gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)} .gap-6{gap:var(--sp-6)}
  .full { width: 100%; } .relative { position: relative; }
  /* .lazy-section queda como gancho semántico. NO usamos content-visibility:
     rompe Ctrl+F, la impresión y el revelado por scroll a cambio de una
     ganancia de rendimiento marginal en un sitio de este tamaño. */
  .lazy-section { contain: layout style; }
  .rounded { border-radius: var(--r-lg); overflow: hidden; }
  .ratio-16-9 { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
  .ratio-4-3  { aspect-ratio: 4/3;  object-fit: cover; width: 100%; }
  .ratio-1-1  { aspect-ratio: 1;    object-fit: cover; width: 100%; }
  .print-only { display: none; }

  /* ═══════════════════════════════════════════════════ ÁREAS TÁCTILES ══
     En móvil, todo lo que se toca necesita al menos 44×44 px reales.
     Donde el control debe verse pequeño, se agranda el área con un
     pseudo-elemento invisible en lugar de inflar el diseño. */
  @media (pointer: coarse), (max-width: 48rem) {
    .icon-btn { width: 2.75rem; height: 2.75rem; }
    .lang button { padding: .62em 1em; min-height: 2.75rem; }
    .lang { align-items: stretch; }
    .btn--sm { padding: .72em 1.2em; min-height: 2.75rem; }
    .nav__link { min-height: 2.75rem; display: inline-flex; align-items: center; }
    .footer a, .drawer a { min-height: 2.5rem; display: flex; align-items: center; }
    .social a { width: 2.75rem; height: 2.75rem; }

    /* Casilla de consentimiento: el área táctil cubre toda la fila */
    .consent { position: relative; padding-block: .35rem; align-items: center; }
    .consent input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin-top: 0; }
    .consent::after {
      content: ""; position: absolute; inset: -.35rem; pointer-events: none;
    }
    /* La etiqueta entera es el objetivo: 44 px de alto mínimo */
    .opt__box { min-height: 3rem; align-content: center; }
    summary { min-height: 3rem; }
    .cd { min-width: 4.6rem; }
  }

}

/* ------------------------------------------------------------------ PRINT */
@media print {
  .nav, .footer, .drawer, .scrollbar-progress, .hero__canvas, .marquee { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card, .tier { break-inside: avoid; border: 1px solid #ccc !important; }
  .print-only { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}