/*! TLV2 — roles.css (Gate C2 listo / Phase B 100%)
    - Solo variables de ROL (neutrales) leyendo tokens.
    - Estados expuestos como variables (hover/focus/active/disabled).
    - Sin selectores de componentes (solo :root).
    - Precedencia del sistema:
      _tl_page_vars (persistido) > presets (constructor) > defaults (este archivo)
*/

/* =========================================================
   Roles de texto, superficies, CTA, Focus, Hero, Modal
   ========================================================= */
:root{
/* -------- Aliases canónicos (roles base) --------
   Nota: estos roles son "view" sobre tokens (color/radius) para que QA y componentes
   consulten siempre --role-* aunque el dial escriba --color-* / --radius.

   D1 / emitter canónico:
   - el runtime ya no debería leerse como `page_vars.* -> bloque`,
     sino como `state.page_vars.* -> css.php -> tokens fuente -> roles -> consumidores`.
   - los únicos bridges/compat vigentes para esta capa son los declarados en `css.php`
     (`--tl-radius`, `--tl-elevation`, `--tl-card-elevation` y el accent legacy named map).
*/
/*
  DS v0.3 — normalización canónica
  - Lee diales por landing desde el emitter vigente: --color-primary / --color-accent / --radius
  - `surface` entra por tokens dedicados de componente: --color-surface-elevated / --color-surface-elevated-2
  - NO consume aliases legacy `--surface` ni `--color-surface` en runtime activo
  - Evita que --role-* quede “unset” si el dial no está definido (fallbacks)
*/
--role-primary: var(--color-primary, oklch(0.62 0.15 255));
--role-surface: var(--role-surface-base);
--role-radius: var(--radius, var(--role-radius-base));

/* -------- Shape family (D4) --------
   `radius` gobierna solo consumidores autorizados.
   - cards / paneles surfaced
   - CTA y controles autorizados
   - shell e inputs del modal
   No gobierna pills/círculos/avatares (`999px` / `50%`). */
--role-shape-radius-base: var(--role-radius, 28px);
--role-card-radius: clamp(12px, calc(var(--role-shape-radius-base) * 0.72), 24px);
--role-card-radius-prominent: clamp(14px, calc(var(--role-shape-radius-base) * 0.80), 28px);
--role-cta-radius: clamp(10px, calc(var(--role-shape-radius-base) * 0.55), 20px);
--role-input-radius: clamp(8px, calc(var(--role-shape-radius-base) * 0.50), 16px);
--role-modal-radius: clamp(12px, calc(var(--role-shape-radius-base) * 0.68), 24px);
--role-modal-radius-mobile: clamp(10px, calc(var(--role-shape-radius-base) * 0.58), 20px);

/* --role-accent se define más abajo con un fallback estable (oklch) */
--role-fg: var(--color-fg, var(--color-text-0));

/* -------- Gradientes canónicos para overlays CTA (usados por presets) -------- */
--overlay-gradient-desktop: linear-gradient(135deg,
  oklch(0.70 0.10 210 / 0.18) 0%,
  oklch(0.70 0.10 210 / 0.00) 70%
);
--overlay-gradient-mobile: linear-gradient(180deg,
  oklch(0.70 0.10 210 / 0.22) 0%,
  oklch(0.70 0.10 210 / 0.00) 100%
);

  /* -------- Overlays CTA (desktop/móvil) — defaults --------
     Desktop: sólido (none)
     Mobile : gradiente por defecto
  */
  --role-cta-overlay-desktop: none;
  --role-cta-overlay-mobile: linear-gradient(180deg,
    oklch(0.70 0.10 210 / 0.22) 0%,
    oklch(0.70 0.10 210 / 0.00) 100%
  );

  /* -------- Texto / on-* (slice P5 runtime) -------- */
  --role-on-surface: var(--color-on-surface, var(--color-text-0));
  --role-on-surface-muted: var(--color-on-surface-muted, var(--color-text-muted));
  --role-on-primary: var(--color-on-primary, #ffffff);
  --role-on-accent: var(--color-on-accent, #ffffff);
  --role-on-elevated: var(--color-on-elevated, var(--role-on-surface, var(--color-text-0)));
  --role-on-media: var(--color-on-media, var(--role-on-primary, #ffffff));

  --role-heading-color: var(--role-on-surface);
  --role-body-color:    var(--role-on-surface);
  --role-muted-color:   var(--role-on-surface-muted);

  /* CROMA-FAM-01 — aliases canónicos de foreground
     Mantienen compat con docs/consumers legacy sin volver a abrir una
     segunda autoridad fuera de heading/body/muted. */
  --role-text: var(--role-body-color);
  --role-text-strong: var(--role-heading-color);
  --role-text-muted: var(--role-muted-color);

  /* Aliases útiles para FG genérico / compat */
  --role-fg: var(--role-on-surface);
  --role-ink: var(--role-on-surface);

/* -------- Foreground context defaults (FDN-S18-P6A) --------
   Autoridad:
   - el contexto efectivo publica foreground/chrome semántico;
   - los consumidores leen ese contexto antes del role global;
   - no abre freedom por bloque ni mini-themes nuevos. */
--role-context-surface: var(--role-surface-base, #ffffff);
--role-context-on: var(--role-shell-foreground, var(--role-on-surface, var(--color-text-0)));
--role-context-on-muted: var(--role-shell-muted, var(--role-on-surface-muted, var(--color-text-muted)));
--role-context-heading: var(--role-context-on);
--role-context-body: var(--role-context-on);
--role-context-border: var(--role-shell-border, var(--role-border-color, oklch(0.82 0.02 200)));
--role-context-divider: color-mix(
  in oklch,
  var(--role-context-border) 58%,
  transparent
);
--role-context-link: var(--role-primary, oklch(0.62 0.15 255));
--role-context-text: var(--role-context-body);
--role-context-text-strong: var(--role-context-heading);
--role-context-text-muted: var(--role-context-on-muted);

/* F2-S2 / Paso A — aliases explícitos de root copy.
   Congelan ownership semántico sin abrir nuevos diales ni duplicar authority. */
--role-context-root-heading: var(--role-context-heading);
--role-context-root-body: var(--role-context-body);
--role-context-root-muted: var(--role-context-on-muted);
--role-context-root-subtitle: var(--role-context-root-muted);
--role-context-root-list: var(--role-context-root-body);
/* FG-AUTH-ROOT-01 — source of truth semántica de root copy.
   roles.css posee estos rails; components-map solo bridgea a consumers
   y landing no debe republicar aliases globales de contexto/root copy. */
--role-context-root-copy-heading: var(--role-context-root-heading);
--role-context-root-copy-body: var(--role-context-root-body);
--role-context-root-copy-muted: var(--role-context-root-muted);
--role-context-root-copy-subtitle: var(--role-context-root-subtitle);
--role-context-root-copy-list: var(--role-context-root-list);

--role-context-elevated-surface: var(--role-surface-elevated, #ffffff);
--role-context-elevated-surface-2: var(--role-surface-family-surface-2, var(--role-surface-2, var(--role-context-elevated-surface)));
--role-context-on-elevated: var(--role-on-elevated, var(--role-context-on));
--role-context-on-elevated-muted: color-mix(
  in oklch,
  var(--role-context-on-elevated) 93%,
  var(--role-context-elevated-surface) 7%
);

--role-context-button-secondary-surface: var(--role-context-neutral-family-surface, var(--role-context-panel-neutral-surface, color-mix(
  in oklch,
  var(--role-context-elevated-surface) 92%,
  var(--role-context-surface) 8%
)));
--role-context-button-secondary-foreground: var(--role-context-on, var(--role-context-on-elevated));
--role-context-button-secondary-border: color-mix(
  in oklch,
  var(--role-context-panel-neutral-border) 86%,
  var(--role-accent, oklch(0.72 0.09 240)) 14%
);
--role-context-button-secondary-shadow: 0 8px 18px -18px rgba(12,18,28,.22), 0 1px 2px rgba(12,18,28,.04);
--role-context-button-secondary-surface-hover: color-mix(
  in oklch,
  var(--role-context-button-secondary-surface) 92%,
  var(--role-surface-family-surface-2, var(--role-context-elevated-surface)) 8%
);
--role-context-button-secondary-foreground-hover: var(--role-context-button-secondary-foreground);
--role-context-button-secondary-border-hover: color-mix(
  in oklch,
  var(--role-context-panel-neutral-border) 80%,
  var(--role-accent, oklch(0.72 0.09 240)) 20%
);
--role-context-button-secondary-shadow-hover: 0 12px 24px -18px rgba(12,18,28,.28), 0 2px 5px rgba(12,18,28,.06);
--role-context-button-secondary-surface-active: color-mix(
  in oklch,
  var(--role-context-button-secondary-surface) 88%,
  var(--role-surface-family-surface-2, var(--role-context-elevated-surface)) 12%
);
--role-context-button-secondary-foreground-active: var(--role-context-button-secondary-foreground);
--role-context-button-secondary-border-active: var(--role-context-button-secondary-border-hover);
--role-context-button-secondary-shadow-active: 0 8px 18px -18px rgba(12,18,28,.22), 0 1px 2px rgba(12,18,28,.04);

--role-context-neutral-family-surface: var(--role-chroma-neutral-surface-rail, color-mix(
  in oklch,
  var(--role-context-surface) 95%,
  var(--role-primary, oklch(0.62 0.15 255)) 5%
));
--role-context-neutral-family-border: var(--role-chroma-neutral-border-rail, color-mix(
  in oklch,
  var(--role-context-border) 82%,
  var(--role-primary, oklch(0.62 0.15 255)) 18%
));
--role-context-neutral-family-shadow: inset 0 1px 0 rgba(255,255,255,.34);

--role-context-eyebrow-neutral-surface: var(--role-context-neutral-family-surface);
--role-context-eyebrow-neutral-foreground: var(--role-eyebrow-neutral-foreground);
--role-context-eyebrow-neutral-border: var(--role-context-neutral-family-border);
--role-context-eyebrow-neutral-shadow: var(--role-context-neutral-family-shadow);

/* CARD-SHELL-AUTHORITY-01 — la family neutral vive aquí; las secciones solo ajustan shell + weights. */
--role-context-card-shell-surface: var(--role-shell-surface, var(--role-context-surface));
--role-context-card-shell-border: var(--role-shell-border, var(--role-context-border));
--role-context-card-neutral-family-surface-weight: 100%;
--role-context-card-neutral-shell-surface-weight: 0%;
--role-context-card-neutral-family-surface-2-weight: 100%;
--role-context-card-neutral-shell-surface-2-weight: 0%;
--role-context-card-neutral-family-border-weight: 100%;
--role-context-card-neutral-shell-border-weight: 0%;
--role-context-card-neutral-surface: color-mix(
  in oklch,
  var(--role-context-elevated-surface) var(--role-context-card-neutral-family-surface-weight),
  var(--role-context-card-shell-surface) var(--role-context-card-neutral-shell-surface-weight)
);
--role-context-card-neutral-surface-2: color-mix(
  in oklch,
  var(--role-context-elevated-surface-2) var(--role-context-card-neutral-family-surface-2-weight),
  var(--role-context-card-shell-surface) var(--role-context-card-neutral-shell-surface-2-weight)
);
--role-context-card-neutral-border: color-mix(
  in oklch,
  var(--role-context-border) var(--role-context-card-neutral-family-border-weight),
  var(--role-context-card-shell-border) var(--role-context-card-neutral-shell-border-weight)
);
--role-context-card-neutral-shadow: var(--role-surface-family-shadow, var(--role-elevation-family-card, var(--role-card-elevation)));
--role-context-card-neutral-shadow-hover: var(--role-elevation-family-card-hover, var(--role-context-card-neutral-shadow));
--role-context-card-neutral-highlight: var(--role-surface-family-highlight, inset 0 1px 0 rgba(255,255,255,.08));
--role-context-card-neutral-rail: none;
--role-context-card-neutral-heading: var(--role-context-on-elevated);
--role-context-card-neutral-body: var(--role-context-on-elevated);
--role-context-card-neutral-muted: var(--role-context-on-elevated-muted);
/* FG-AUTH-CARD-01 — source of truth semántica de neutral card copy.
   Los consumers de card leen estos rails; landing no debe recocinarlos como authority. */
--role-context-card-neutral-copy-heading: var(--role-context-card-neutral-heading);
--role-context-card-neutral-copy-body: var(--role-context-card-neutral-body);
--role-context-card-neutral-copy-muted: var(--role-context-card-neutral-muted);
--role-context-card-neutral-emphasis: color-mix(
  in oklch,
  var(--role-context-card-neutral-heading) 72%,
  var(--role-accent, oklch(0.72 0.09 240)) 28%
);
--role-context-card-neutral-copy-emphasis: var(--role-context-card-neutral-emphasis);
--role-context-border-strong: color-mix(
  in oklch,
  var(--role-context-border) 68%,
  var(--role-accent, oklch(0.72 0.09 240)) 32%
);
--role-context-focus-ring: color-mix(
  in oklch,
  var(--role-focus-ring-color, var(--role-primary, oklch(0.62 0.13 210))) 20%,
  transparent
);
--role-context-divider-color: var(--role-context-divider);
--role-context-chrome-border: var(--role-context-border);
--role-context-chrome-divider: var(--role-context-divider);
--role-context-chrome-border-strong: var(--role-context-border-strong);
--role-context-chrome-focus-ring: var(--role-context-focus-ring);

--role-context-eyebrow-accent-surface: var(--role-chroma-accent-soft-surface-rail, color-mix(
  in oklch,
  var(--role-context-surface) 78%,
  var(--role-accent, oklch(0.72 0.09 240)) 22%
));
--role-context-eyebrow-accent-foreground: var(--role-eyebrow-accent-foreground);
--role-context-eyebrow-accent-border: var(--role-chroma-accent-soft-border-rail, color-mix(
  in oklch,
  var(--role-context-border) 42%,
  var(--role-accent, oklch(0.72 0.09 240)) 58%
));
--role-context-eyebrow-accent-dot: var(--role-chroma-accent-dot-rail, color-mix(
  in oklch,
  var(--role-accent, oklch(0.72 0.09 240)) 82%,
  white 18%
));
--role-context-eyebrow-accent-dot-shadow: var(--role-chroma-accent-dot-shadow-rail, 0 0 0 4px color-mix(
  in oklch,
  var(--role-accent, oklch(0.72 0.09 240)) 24%,
  transparent
));
--role-context-eyebrow-accent-shadow: inset 0 1px 0 rgba(255,255,255,.34);

--role-context-badge-featured-surface: var(--role-chroma-accent-strong-surface-rail, color-mix(
  in oklch,
  var(--role-context-surface) 71%,
  var(--role-accent, oklch(0.72 0.09 240)) 29%
));
--role-context-badge-featured-foreground: var(--role-badge-featured-foreground);
--role-context-badge-featured-border: var(--role-chroma-accent-strong-border-rail, color-mix(
  in oklch,
  var(--role-context-border) 28%,
  var(--role-accent, oklch(0.72 0.09 240)) 72%
));
--role-context-badge-featured-shadow:
  inset 0 1px 0 rgba(255,255,255,.18),
  0 6px 14px color-mix(
    in oklch,
    var(--role-context-badge-featured-surface) 18%,
    transparent
  );

/* CARD-SHELL-AUTHORITY-02 — featured hereda family shared y solo acepta modulación local controlada. */
--role-context-card-featured-shell-surface: var(--role-context-card-shell-surface);
--role-context-card-featured-shell-border: var(--role-context-card-shell-border);
--role-context-card-featured-base-surface: color-mix(
  in oklch,
  var(--role-context-card-neutral-surface) 76%,
  var(--role-accent, oklch(0.72 0.09 240)) 24%
);
--role-context-card-featured-surface: color-mix(
  in oklch,
  var(--role-context-card-featured-base-surface) var(--role-context-card-featured-base-surface-weight, 100%),
  var(--role-context-card-featured-shell-surface) var(--role-context-card-featured-shell-surface-weight, 0%)
);
--role-context-card-featured-surface-2: color-mix(
  in oklch,
  color-mix(
    in oklch,
    var(--role-context-card-featured-surface) 88%,
    white 12%
  ) var(--role-context-card-featured-base-surface-2-weight, 100%),
  var(--role-context-card-featured-shell-surface) var(--role-context-card-featured-shell-surface-2-weight, 0%)
);
--role-context-card-featured-border: color-mix(
  in oklch,
  color-mix(
    in oklch,
    var(--role-context-border) 18%,
    var(--role-accent, oklch(0.72 0.09 240)) 82%
  ) var(--role-context-card-featured-base-border-weight, 100%),
  var(--role-context-card-featured-shell-border) var(--role-context-card-featured-shell-border-weight, 0%)
);
--role-context-card-featured-shadow: var(--role-card-featured-shadow, 0 20px 46px -24px color-mix(in oklch, black 50%, transparent), 0 14px 30px -18px color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 34%, transparent));
--role-context-card-featured-shadow-hover: var(--role-card-featured-shadow-hover, 0 26px 58px -28px color-mix(in oklch, black 56%, transparent), 0 18px 38px -22px color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 42%, transparent));
--role-context-card-featured-highlight: var(--role-card-featured-highlight, inset 0 1px 0 rgba(255,255,255,.62));
--role-context-card-featured-rail: linear-gradient(
  90deg,
  color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 86%, white 14%) 0%,
  color-mix(in oklch, var(--role-primary, oklch(0.62 0.15 255)) 36%, var(--role-accent, oklch(0.72 0.09 240)) 64%) 58%,
  color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 28%, transparent) 100%
);
--role-context-card-featured-heading: var(--role-card-featured-heading, var(--role-context-card-neutral-heading));
--role-context-card-featured-body: var(--role-card-featured-body, var(--role-context-card-neutral-body));
--role-context-card-featured-muted: var(--role-card-featured-muted, var(--role-context-card-neutral-muted));
--role-context-card-featured-emphasis: var(--role-card-featured-emphasis, color-mix(
  in oklch,
  var(--role-accent, oklch(0.72 0.09 240)) 56%,
  var(--role-context-card-featured-heading) 44%
));

--role-context-card-gradient-surface: color-mix(
  in oklch,
  var(--role-context-card-neutral-surface) 97%,
  white 3%
);
--role-context-card-gradient-surface-2: color-mix(
  in oklch,
  var(--role-context-card-neutral-surface-2) 98%,
  transparent
);
--role-context-card-gradient-border: color-mix(
  in oklch,
  var(--role-context-border) 54%,
  transparent
);
--role-context-card-gradient-shadow: var(--role-card-gradient-shadow, var(--role-context-card-neutral-shadow));
--role-context-card-gradient-highlight: var(--role-card-gradient-highlight, inset 0 1px 0 rgba(255,255,255,.42));
--role-context-card-gradient-rail: linear-gradient(
  90deg,
  color-mix(in oklch, var(--role-primary, oklch(0.62 0.15 255)) 76%, white) 0%,
  color-mix(in oklch, var(--role-accent, oklch(0.62 0.18 320)) 66%, white) 55%,
  color-mix(in oklch, var(--role-context-border) 22%, transparent) 100%
);
--role-context-card-gradient-focus-ring: var(--role-context-focus-ring);
--role-context-card-gradient-heading: var(--role-context-card-neutral-heading);
--role-context-card-gradient-body: var(--role-context-card-neutral-body);
--role-context-card-gradient-muted: var(--role-context-card-neutral-muted);

--role-context-panel-neutral-surface: color-mix(
  in oklch,
  var(--role-context-elevated-surface) 92%,
  var(--role-context-surface) 8%
);
--role-context-panel-neutral-border: color-mix(
  in oklch,
  var(--role-context-border) 58%,
  transparent
);
--role-context-panel-neutral-highlight: var(--role-surface-family-highlight, inset 0 1px 0 rgba(255,255,255,.18));
--role-context-chip-neutral-surface: color-mix(
  in oklch,
  var(--role-context-panel-neutral-surface) 94%,
  var(--role-surface-family-surface-2, var(--role-context-elevated-surface)) 6%
);
--role-context-chip-neutral-border: color-mix(
  in oklch,
  var(--role-context-border) 72%,
  transparent
);
--role-context-chip-neutral-foreground: var(--role-context-on-elevated, var(--role-context-on));
--role-context-chip-neutral-highlight: var(--role-context-panel-neutral-highlight, inset 0 1px 0 rgba(255,255,255,.18));
--role-context-chip-neutral-shadow: none;
--role-context-chip-neutral-surface-hover: color-mix(
  in oklch,
  var(--role-context-chip-neutral-surface) 90%,
  var(--role-context-elevated-surface) 10%
);
--role-context-chip-neutral-border-hover: color-mix(
  in oklch,
  var(--role-context-chip-neutral-border) 88%,
  var(--role-accent, oklch(0.72 0.09 240)) 12%
);
--role-context-chip-neutral-foreground-hover: var(--role-context-chip-neutral-foreground);
--role-context-chip-neutral-surface-active: color-mix(
  in oklch,
  var(--role-context-chip-neutral-surface) 84%,
  var(--role-context-elevated-surface) 16%
);
--role-context-chip-neutral-border-active: var(--role-context-chip-neutral-border-hover);
--role-context-chip-neutral-foreground-active: var(--role-context-chip-neutral-foreground);


/* -------- Media presentation v0.1 (VA1-C2 / Lote C) --------
   Primitive canónica para media-shell en bloques itemized.
   - shape = square | soft | round
   - shell = integrated | outline | surface
   Authority única: roles.css publica la recipe perceptual base.
   components-map.css bridgea consumo; landing.css solo resuelve footprint local. */
--role-media-shape-square: 0px;
--role-media-shape-soft: clamp(14px, calc(var(--role-card-radius, 18px) * 0.85), 22px);
--role-media-shape-round: 999px;

--role-media-shell-integrated-surface: transparent;
--role-media-shell-integrated-border: transparent;
--role-media-shell-integrated-shadow: none;
--role-media-shell-integrated-highlight: none;
--role-media-shell-integrated-foreground: var(--role-icon-shell-neutral-foreground, var(--role-context-on, var(--role-on-surface, currentColor)));
--role-media-shell-integrated-pad: 0rem;
--role-media-shell-integrated-content-scale: 100%;

--role-media-shell-outline-surface: transparent;
--role-media-shell-outline-border: color-mix(
  in oklch,
  var(--role-border-color, rgba(0,0,0,.12)) 78%,
  var(--role-context-elevated-surface, #fff) 22%
);
--role-media-shell-outline-shadow: none;
--role-media-shell-outline-highlight: none;
--role-media-shell-outline-foreground: var(--role-context-on, var(--role-on-surface, currentColor));
--role-media-shell-outline-pad: clamp(.16rem, .18vw + .12rem, .24rem);
--role-media-shell-outline-content-scale: 72%;

--role-media-shell-surface-surface: color-mix(
  in oklch,
  var(--role-context-elevated-surface, #fff) 92%,
  white 8%
);
--role-media-shell-surface-border: color-mix(
  in oklch,
  var(--role-border-color, rgba(0,0,0,.12)) 62%,
  var(--role-context-elevated-surface, #fff) 38%
);
--role-media-shell-surface-shadow: 0 22px 42px -28px color-mix(in oklch, black 18%, transparent), 0 8px 16px -12px color-mix(in oklch, black 10%, transparent);
--role-media-shell-surface-highlight: inset 0 1px 0 rgba(255,255,255,.74);
--role-media-shell-surface-foreground: var(--role-context-on-elevated, var(--role-on-elevated, var(--role-on-surface, currentColor)));
--role-media-shell-surface-pad: clamp(.22rem, .22vw + .14rem, .32rem);
--role-media-shell-surface-content-scale: 68%;

--role-icon-shell-neutral-surface: color-mix(
  in oklch,
  var(--role-context-chip-neutral-surface, var(--role-context-panel-neutral-surface, var(--role-surface-family-surface, #fff))) 90%,
  white 10%
);
--role-icon-shell-neutral-border: color-mix(
  in oklch,
  var(--role-context-chip-neutral-border, var(--role-context-panel-neutral-border, var(--role-surface-family-border, rgba(0,0,0,.12)))) 84%,
  white 16%
);
--role-icon-shell-neutral-foreground: var(--role-context-chip-neutral-foreground, var(--role-context-on-elevated, var(--role-context-on, var(--role-on-surface, currentColor))));
--role-icon-shell-neutral-highlight: var(--role-context-chip-neutral-highlight, inset 0 1px 0 rgba(255,255,255,.18));
--role-icon-shell-neutral-shadow: 0 10px 22px -18px color-mix(in oklch, black 16%, transparent);


  /* -------- Superficies base -------- */
  --role-surface-base:      var(--color-surface-0, #ffffff);
  --role-surface-section:   var(--color-surface-1, #f7f7f9);
  --role-surface-alt:       var(--color-surface-2, #f0f1f5);
  --role-surface-2:         var(--color-surface-elevated-2, var(--role-surface-alt));

  /* Superficie elevada para cards (fuente única para packs/testimonios/faq/etc.)
     Nota GVC v0.1: el dial `surface` solo entra por esta familia, NO por canvas/sections. */
  --role-surface-elevated:  var(--color-surface-elevated, color-mix(in oklch, var(--role-surface-base) 98%, white 2%));

  /* D2 — surface family explícita (token-first)
     - `surface` gobierna la familia neutral/elevada
     - canvas/base/section siguen fuera
     - modal deriva color/borde desde esta familia y deja la profundidad a roles de dominio especial */
  --role-surface-family-surface: var(--role-surface-elevated, #ffffff);
  --role-surface-family-surface-2: color-mix(
    in oklch,
    var(--role-surface-family-surface, #ffffff) 96%,
    var(--color-surface-elevated-2, var(--role-surface-family-surface, #ffffff)) 4%
  );
  --role-surface-family-fill-start: var(--role-surface-family-surface);
  --role-surface-family-fill-end: var(--role-surface-family-surface-2);
  --role-surface-family-border: color-mix(
    in oklch,
    var(--role-border-color, rgba(0,0,0,.14)) 64%,
    transparent
  );
  --role-surface-family-shadow: var(--role-elevation-family-card, var(--role-card-elevation));
  --role-surface-family-highlight: inset 0 1px 0 rgba(255,255,255,.18);

  /* Neutral family explícita (sin pasar por surface-elevated) */
  --role-neutral-family-surface: var(--role-chroma-neutral-surface-rail, color-mix(
    in oklch,
    var(--role-surface-base, #ffffff) 95%,
    var(--role-primary, oklch(0.62 0.15 255)) 5%
  ));
  --role-neutral-family-border: var(--role-chroma-neutral-border-rail, color-mix(
    in oklch,
    var(--role-border-color, rgba(0,0,0,.14)) 82%,
    var(--role-primary, oklch(0.62 0.15 255)) 18%
  ));
  --role-neutral-family-shadow: inset 0 1px 0 rgba(255,255,255,.34);

  /* Bordes suaves y fuertes */
  --role-border-color:      var(--color-border, oklch(0.82 0.02 200));
  --role-border-strong:     color-mix(in oklch, var(--role-border-color) 70%, black);

  /* -------- Buttons secundarios (familia neutral / N3 Buttons) -------- */
  --role-button-secondary-surface: var(--role-neutral-family-surface, color-mix(
    in oklch,
    var(--role-surface-base, #ffffff) 95%,
    var(--role-primary, oklch(0.62 0.15 255)) 5%
  ));
  --role-button-secondary-foreground: var(--role-on-surface, var(--role-heading-color, var(--color-text-0, #111827)));
  --role-button-secondary-border: color-mix(
    in oklch,
    var(--role-surface-family-border, var(--role-border-color, rgba(0,0,0,.12))) 86%,
    var(--role-accent, oklch(0.72 0.09 240)) 14%
  );
  --role-button-secondary-shadow: 0 8px 18px -18px rgba(12,18,28,.22), 0 1px 2px rgba(12,18,28,.04);
  --role-button-secondary-surface-hover: color-mix(
    in oklch,
    var(--role-button-secondary-surface) 92%,
    var(--role-surface-family-surface-2, var(--role-surface-alt, #f0f1f5)) 8%
  );
  --role-button-secondary-foreground-hover: var(--role-button-secondary-foreground);
  --role-button-secondary-border-hover: color-mix(
    in oklch,
    var(--role-surface-family-border, var(--role-border-color, rgba(0,0,0,.12))) 80%,
    var(--role-accent, oklch(0.72 0.09 240)) 20%
  );
  --role-button-secondary-shadow-hover: 0 12px 24px -18px rgba(12,18,28,.28), 0 2px 5px rgba(12,18,28,.06);
  --role-button-secondary-surface-active: color-mix(
    in oklch,
    var(--role-button-secondary-surface) 88%,
    var(--role-surface-family-surface-2, var(--role-surface-alt, #f0f1f5)) 12%
  );
  --role-button-secondary-foreground-active: var(--role-button-secondary-foreground);
  --role-button-secondary-border-active: var(--role-button-secondary-border-hover);
  --role-button-secondary-shadow-active: 0 8px 18px -18px rgba(12,18,28,.22), 0 1px 2px rgba(12,18,28,.04);
  --role-button-secondary-surface-disabled: oklch(0.93 0 0);
  --role-button-secondary-foreground-disabled: oklch(0.70 0 0);
  --role-button-secondary-border-disabled: oklch(0.88 0 0);

  /* -------- Shared primitive ownership (VC1-A) --------
   `roles.css` es la autoridad de recipe shared para eyebrow/badge, chip/marker,
   card family, media-shell family y panel-neutral. Bridges y geometry viven fuera.
   ----------------------------------------------------------------------------- */

  /* -------- Eyebrows / badges (N3 Eyebrows) -------- */
  --role-eyebrow-neutral-surface: var(--role-neutral-family-surface);
  --role-eyebrow-neutral-foreground: var(--role-on-surface, var(--color-text-0, #111827));
  --role-eyebrow-neutral-border: var(--role-neutral-family-border);
  --role-eyebrow-neutral-shadow: var(--role-neutral-family-shadow);

  /* -------- Accent family (D3) --------
     Superficies/ornamentos identitarios que NO deben apropiarse del CTA primario. */
  --role-accent-family-surface: var(--role-chroma-accent-soft-surface-rail, color-mix(
    in oklch,
    var(--role-surface-base, #ffffff) 78%,
    var(--role-accent, oklch(0.72 0.09 240)) 22%
  ));
  --role-accent-family-surface-2: var(--role-chroma-accent-strong-surface-rail, color-mix(
    in oklch,
    var(--role-surface-base, #ffffff) 71%,
    var(--role-accent, oklch(0.72 0.09 240)) 29%
  ));
  --role-accent-family-foreground: var(--role-on-surface, var(--role-ink, currentColor));
  --role-accent-family-border: var(--role-chroma-accent-soft-border-rail, color-mix(
    in oklch,
    var(--role-border-color, rgba(0,0,0,.14)) 42%,
    var(--role-accent, oklch(0.72 0.09 240)) 58%
  ));
  --role-accent-family-dot: var(--role-chroma-accent-dot-rail, color-mix(
    in oklch,
    var(--role-accent, oklch(0.72 0.09 240)) 82%,
    white 18%
  ));
  --role-accent-family-dot-shadow: var(--role-chroma-accent-dot-shadow-rail, 0 0 0 4px color-mix(
    in oklch,
    var(--role-accent, oklch(0.72 0.09 240)) 24%,
    transparent
  ));

  --role-eyebrow-accent-surface: var(--role-accent-family-surface);
  --role-eyebrow-accent-foreground: var(--role-accent-family-foreground);
  --role-eyebrow-accent-border: var(--role-accent-family-border);
  --role-eyebrow-accent-dot: var(--role-accent-family-dot);
  --role-eyebrow-accent-dot-shadow: var(--role-accent-family-dot-shadow);
  --role-eyebrow-accent-shadow: inset 0 1px 0 rgba(255,255,255,.34);

  --role-badge-featured-surface: var(--role-chroma-accent-strong-surface-rail, var(--role-accent-family-surface-2));
  --role-badge-featured-foreground: var(--role-accent-family-foreground);
  --role-badge-featured-border: var(--role-chroma-accent-strong-border-rail, color-mix(
    in oklch,
    var(--role-border-color, rgba(0,0,0,.14)) 28%,
    var(--role-accent, oklch(0.72 0.09 240)) 72%
  ));
  --role-badge-featured-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 6px 14px color-mix(
      in oklch,
      var(--role-badge-featured-surface) 18%,
      transparent
    );

  /* -------- Cards / panels / surfaces (N3.3 Cards/Panels/Surfaces) -------- */
  --role-card-neutral-surface: var(--role-surface-family-surface, #ffffff);
  --role-card-neutral-surface-2: var(--role-surface-family-surface-2, color-mix(
    in oklch,
    var(--role-card-neutral-surface) 98%,
    white 2%
  ));
  --role-card-neutral-border: var(--role-surface-family-border, color-mix(
    in oklch,
    var(--role-border-color, rgba(0,0,0,.14)) 64%,
    transparent
  ));
  --role-card-neutral-shadow: var(--role-surface-family-shadow, var(--role-elevation-family-card, var(--role-card-elevation)));
  --role-card-neutral-shadow-hover: var(--role-elevation-family-card-hover, var(--role-card-neutral-shadow));

  --role-card-neutral-highlight: var(--role-surface-family-highlight, inset 0 1px 0 rgba(255,255,255,.08));
  --role-card-neutral-rail: none;

  --role-card-featured-surface: color-mix(
    in oklch,
    var(--role-surface-family-surface, #fff) 82%,
    var(--role-accent, oklch(0.72 0.09 240)) 18%
  );
  --role-card-featured-surface-2: color-mix(
    in oklch,
    var(--role-card-featured-surface) 91%,
    white 9%
  );
  --role-card-featured-border: color-mix(
    in oklch,
    var(--role-border-color, rgba(0,0,0,.14)) 28%,
    var(--role-accent, oklch(0.72 0.09 240)) 72%
  );
  --role-card-featured-shadow: var(--role-elevation-family-card-featured, 0 18px 42px -24px color-mix(in oklch, black 46%, transparent), 0 12px 28px -18px color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 26%, transparent));
  --role-card-featured-shadow-hover: var(--role-elevation-family-card-hover, 0 24px 54px -28px color-mix(in oklch, black 52%, transparent), 0 18px 36px -22px color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 32%, transparent));
  --role-card-featured-highlight: inset 0 1px 0 rgba(255,255,255,.56);
  --role-card-featured-rail: linear-gradient(90deg, color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 82%, white 18%) 0%, color-mix(in oklch, var(--role-primary, oklch(0.62 0.15 255)) 34%, var(--role-accent, oklch(0.72 0.09 240)) 66%) 58%, color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 22%, transparent) 100%);
  --role-card-featured-heading: var(--role-context-card-neutral-heading, var(--role-heading-color));
  --role-card-featured-body: var(--role-context-card-neutral-body, var(--role-body-color));
  --role-card-featured-muted: var(--role-context-card-neutral-muted, var(--role-muted-color));
  --role-card-featured-emphasis: color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 56%, var(--role-card-featured-heading) 44%);

  --role-card-gradient-surface: color-mix(
    in oklch,
    var(--role-surface-family-surface, #fff) 97%,
    white 3%
  );
  --role-card-gradient-surface-2: color-mix(
    in oklch,
    var(--role-surface-family-surface-2, var(--role-surface-2, var(--role-surface, #fff))) 98%,
    transparent
  );
  --role-card-gradient-border: color-mix(
    in oklch,
    var(--role-border-color, rgba(0,0,0,.14)) 54%,
    transparent
  );
  --role-card-gradient-shadow:
    0 1px 0 rgba(255,255,255,.58) inset,
    0 1px 0 color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.14)) 16%, transparent) inset,
    var(--role-elevation-family-card-subtle, 0 10px 22px -18px color-mix(in oklch, black 18%, transparent), 0 2px 5px -3px color-mix(in oklch, black 10%, transparent));
  --role-card-gradient-highlight: inset 0 1px 0 rgba(255,255,255,.42);
  --role-card-gradient-rail-start: color-mix(in oklch, var(--role-primary, oklch(0.62 0.15 255)) 76%, white);
  --role-card-gradient-rail-mid: color-mix(in oklch, var(--role-accent, oklch(0.62 0.18 320)) 66%, white);
  --role-card-gradient-rail: linear-gradient(
    90deg,
    var(--role-card-gradient-rail-start) 0%,
    var(--role-card-gradient-rail-mid) 55%,
    color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.14)) 22%, transparent) 100%
  );
  --role-card-gradient-focus-ring: color-mix(in oklch, var(--role-primary, oklch(0.62 0.15 255)) 16%, transparent);

  /* Modal owners read runtime aliases first; css.php provides runtime values and these fall back
     to family defaults only when the modal runtime policy is intentionally absent. */
  --role-surface-modal-surface: var(--role-surface-modal-surface-runtime, var(--role-surface-family-surface, #fff));
  --role-surface-modal-surface-2: var(--role-surface-modal-surface-2-runtime, var(--role-surface-family-surface-2, var(--role-surface-modal-surface, #fff)));
  --role-surface-modal-border: var(--role-surface-modal-border-runtime, var(--role-surface-family-border, rgba(0,0,0,.12)));
  --role-surface-modal-shadow: var(--role-surface-modal-shadow-runtime, var(--role-elevation-family-modal, var(--role-modal-elevation)));
  --role-surface-modal-highlight: var(--role-surface-modal-highlight-runtime, var(--role-surface-family-highlight, inset 0 1px 0 rgba(255,255,255,.42)));

  /* -------- Hero media frame (default coherente, override local permitido) -------- */
  --role-hero-media-frame-fill: color-mix(
    in oklch,
    var(--role-surface-elevated, #ffffff) 82%,
    var(--role-accent, oklch(0.62 0.18 320))
  );

  /* -------- Buttons primarios (semilla canónica / N3 cierre) -------- */
  --role-button-primary-surface: var(--color-primary, #0a84ff);
  --role-button-primary-foreground: var(--role-on-primary, #ffffff);
  --role-button-primary-border: color-mix(
    in oklch,
    var(--role-button-primary-surface) 85%,
    black
  );

  /* -------- CTA especies derivadas (FDN-S7-S3) -------- */
  --role-cta-card-select-surface: var(--role-button-primary-surface);
  --role-cta-card-select-foreground: var(--role-button-primary-foreground);
  --role-cta-card-select-border: var(--role-button-primary-border);
  --role-cta-card-select-shadow: 0 10px 22px -20px color-mix(in oklch, var(--role-primary, black) 22%, transparent);
  --role-cta-card-select-shadow-hover: 0 14px 26px -20px color-mix(in oklch, var(--role-primary, black) 28%, transparent);
  --role-cta-card-select-shadow-active: 0 8px 18px -18px color-mix(in oklch, var(--role-primary, black) 20%, transparent);
  --role-cta-card-select-min-h: 44px;
  --role-cta-card-select-pad-x: 18px;
  --role-cta-card-select-radius: var(--role-cta-radius, var(--radius-cta, 12px));

  --role-cta-submit-surface: var(--role-button-primary-surface);
  --role-cta-submit-foreground: var(--role-button-primary-foreground);
  --role-cta-submit-border: var(--role-button-primary-border);
  --role-cta-submit-shadow: 0 18px 34px -22px color-mix(in oklch, var(--role-primary, black) 30%, transparent);
  --role-cta-submit-shadow-hover: 0 22px 40px -24px color-mix(in oklch, var(--role-primary, black) 36%, transparent);
  --role-cta-submit-shadow-active: 0 12px 24px -20px color-mix(in oklch, var(--role-primary, black) 24%, transparent);
  --role-cta-submit-min-h: 50px;
  --role-cta-submit-pad-x: 20px;
  --role-cta-submit-radius: var(--role-cta-radius, var(--radius-cta, 12px));

  /* -------- CTA (superficie, texto y borde base) -------- */
  --role-cta-surface: var(--role-button-primary-surface);
  /* Texto sobre CTA: usa el color "on accent" global (blanco por defecto) */
  --role-cta-foreground: var(--role-button-primary-foreground);
  --role-cta-border:  var(--role-button-primary-border);

  /* -------- CTA (estados — superficie/fg/borde) -------- */
  /* Hover: superficie ligeramente más clara, borde estable */
  --role-cta-surface-hover:   color-mix(
    in oklch,
    var(--role-cta-surface) 90%,
    white
  );
  --role-cta-foreground-hover:        var(--role-cta-foreground);
  --role-cta-border-hover:            var(--role-cta-border);

  /* Focus: alias del estado hover (visual coherente) */
  --role-cta-surface-focus:           var(--role-cta-surface-hover);
  --role-cta-foreground-focus:        var(--role-cta-foreground);
  --role-cta-border-focus:            var(--role-cta-border);

  /* Active: un poco más oscuro que el base */
  --role-cta-surface-active:  color-mix(
    in oklch,
    var(--role-cta-surface) 88%,
    black
  );
  --role-cta-foreground-active:       var(--role-cta-foreground);
  --role-cta-border-active:   color-mix(
    in oklch,
    var(--role-cta-border) 88%,
    black
  );

  /* Disabled */
  --role-cta-surface-disabled:        oklch(0.90 0 0);
  --role-cta-foreground-disabled:     oklch(0.70 0 0);
  --role-cta-border-disabled:         oklch(0.88 0 0);

  /* -------- CTA (sombras: base + alias por estado) --------
     Nota: por defecto neutro; presets pueden elevar (shadow-2/3).
  */
  --role-cta-shadow:           none;
  --role-cta-shadow-hover:     none;
  --role-cta-shadow-active:    none;
  --role-cta-shadow-focus:     none;

  /* -------- Focus ring global -------- */
  --role-focus-ring-color: var(--tlv2-ring, var(--color-primary-strong, oklch(0.62 0.13 210)));
  --role-focus-ring-width: 2px;
  --role-focus-ring-offset: 2px;

  /* -------- Hero -------- */
  --role-surface-hero: var(--role-surface-section);
  --role-hero-fg:      var(--role-on-surface, var(--role-heading-color));

  /* -------- Modal -------- */
  --role-modal-surface: #ffffff;
  --role-modal-surface-image: none;
  --role-modal-fg: var(--role-modal-fg-runtime, var(--role-on-elevated, var(--role-fg, #111)));
  --role-context-modal-surface: var(--role-surface-modal-surface, var(--role-surface-family-surface, #ffffff));
  --role-context-modal-surface-2: var(--role-surface-modal-surface-2, var(--role-surface-family-surface-2, var(--role-context-modal-surface)));
  --role-context-modal-border: var(--role-surface-modal-border, var(--role-surface-family-border, rgba(0,0,0,.12)));
  --role-context-modal-border-soft: color-mix(
    in oklch,
    var(--role-context-modal-border) 56%,
    transparent
  );
  --role-context-modal-shadow: var(--role-surface-modal-shadow, var(--role-elevation-family-modal, var(--role-modal-elevation)));
  --role-context-modal-highlight: var(--role-surface-modal-highlight, inset 0 1px 0 rgba(255,255,255,.42));
  --role-context-modal-foreground: var(--role-modal-fg, var(--role-on-elevated, var(--role-fg, #111)));
  --role-context-modal-muted: color-mix(
    in oklch,
    var(--role-context-modal-foreground) 74%,
    var(--role-context-modal-surface) 26%
  );
  --role-context-modal-overlay-bg: var(--role-modal-overlay-bg, rgba(0,0,0,.55));
  --role-context-modal-close-surface: var(--role-modal-close-surface, rgba(0,0,0,.06));
  --role-context-modal-close-surface-hover: var(--role-modal-close-surface-hover, rgba(0,0,0,.08));
  --role-context-modal-close-icon: var(--role-modal-close-icon, rgba(0,0,0,.60));
  --role-context-modal-copy-surface: linear-gradient(
    180deg,
    color-mix(in oklch, var(--role-context-modal-surface-2) 98%, white 2%) 0%,
    var(--role-context-modal-surface) 100%
  );
  --role-context-modal-copy-border: var(--role-context-modal-border-soft);
  --role-context-modal-copy-foreground: color-mix(
    in oklch,
    var(--role-context-modal-foreground) 86%,
    white 14%
  );
  --role-context-modal-microcopy-surface: color-mix(
    in oklch,
    var(--role-context-modal-surface) 98%,
    white 2%
  );
  --role-context-modal-microcopy-border: color-mix(
    in oklch,
    var(--role-context-modal-border-soft) 70%,
    transparent
  );
  --role-context-modal-microcopy-foreground: var(--role-context-modal-muted);
  --role-context-modal-preview-surface: color-mix(
    in oklch,
    var(--role-context-modal-surface) 96%,
    var(--role-context-modal-surface-2) 4%
  );
  --role-context-modal-preview-border: var(--role-context-modal-border-soft);
  --role-context-modal-preview-note-surface: color-mix(
    in oklch,
    var(--role-context-modal-surface) 90%,
    var(--role-context-modal-surface-2) 10%
  );
  --role-context-modal-preview-note-border: color-mix(
    in oklch,
    var(--role-context-modal-border) 36%,
    transparent
  );
  --role-context-modal-field-surface: color-mix(
    in oklch,
    var(--role-context-modal-surface) 94%,
    white 6%
  );
  --role-context-modal-field-surface-hover: color-mix(
    in oklch,
    var(--role-context-modal-field-surface) 94%,
    var(--role-context-modal-surface-2) 6%
  );
  --role-context-modal-field-border: color-mix(
    in oklch,
    var(--role-context-modal-border) 72%,
    transparent
  );
  --role-context-modal-field-border-strong: color-mix(
    in oklch,
    var(--role-primary, oklch(0.62 0.15 255)) 42%,
    var(--role-context-modal-field-border) 58%
  );
  --role-context-modal-field-foreground: var(--role-context-modal-foreground);
  --role-context-modal-field-label: color-mix(
    in oklch,
    var(--role-context-modal-foreground) 88%,
    var(--role-context-modal-surface) 12%
  );
  --role-context-modal-field-placeholder: color-mix(
    in oklch,
    var(--role-context-modal-muted) 84%,
    transparent
  );
  --role-context-modal-field-ring: color-mix(
    in oklch,
    var(--role-primary, oklch(0.62 0.15 255)) 22%,
    transparent
  );
  --role-context-modal-field-ring-outline: var(--role-focus-ring-color, var(--role-primary, oklch(0.62 0.13 210)));
  --role-context-modal-field-shadow: none;
  --role-context-modal-field-radius: var(--role-input-radius, 12px);
  --role-context-modal-field-pad-y: 12px;
  --role-context-modal-field-pad-x: 14px;
  --role-context-modal-field-font: 14px;
  --role-context-modal-choice-surface: color-mix(
    in oklch,
    var(--role-context-modal-surface) 88%,
    var(--role-context-modal-surface-2) 12%
  );
  --role-context-modal-choice-surface-hover: color-mix(
    in oklch,
    var(--role-context-modal-choice-surface) 94%,
    var(--role-primary, oklch(0.62 0.15 255)) 6%
  );
  --role-context-modal-choice-surface-selected: color-mix(
    in oklch,
    var(--role-primary, oklch(0.62 0.15 255)) 7%,
    var(--role-context-modal-surface) 93%
  );
  --role-context-modal-choice-border: color-mix(
    in oklch,
    var(--role-context-modal-border) 58%,
    transparent
  );
  --role-context-modal-choice-border-hover: color-mix(
    in oklch,
    var(--role-primary, oklch(0.62 0.15 255)) 35%,
    var(--role-context-modal-choice-border) 65%
  );
  --role-context-modal-choice-border-selected: var(--role-context-modal-field-border-strong);
  --role-context-modal-choice-shadow: none;
  --role-context-modal-choice-shadow-hover: 0 10px 20px -18px color-mix(in oklch, var(--role-primary, black) 20%, transparent);
  --role-context-modal-choice-shadow-selected: 0 0 0 1px color-mix(in oklch, var(--role-primary, oklch(0.62 0.15 255)) 35%, transparent);
  --role-context-modal-choice-ring: color-mix(
    in oklch,
    var(--role-context-modal-field-ring-outline) 40%,
    transparent
  );
  --role-context-modal-choice-foreground: var(--role-context-modal-foreground);
  --role-context-modal-choice-muted: var(--role-context-modal-muted);
  /* F2-S2 / Paso A — aliases explícitos de foreground modal.
     Mantienen un owner único para body/microcopy/labels/placeholders. */
  --role-context-modal-body: var(--role-context-modal-copy-foreground, var(--role-context-modal-foreground));
  --role-context-modal-microcopy: var(--role-context-modal-microcopy-foreground, var(--role-context-modal-muted));
  --role-context-modal-label: var(--role-context-modal-field-label, var(--role-context-modal-foreground));
  --role-context-modal-placeholder: var(--role-context-modal-field-placeholder, var(--role-context-modal-muted));
  --role-context-modal-choice-thumb-surface: color-mix(
    in oklch,
    var(--role-context-modal-surface) 96%,
    white 4%
  );
  --role-context-modal-arming-mask-surface: var(--role-context-modal-surface, #ffffff);
  /* shape family values already declared arriba; no redefinir con fijo aquí */
  /*
    Elevation family (D5)
    - Promueve profundidad a familia explícita, sin retirar bridges/compat todavía.
    - Cards y modal consumen familia; cleanup final retira aliases muertos.
  */
  --role-elevation-family-card: var(--role-card-elevation);
  --role-elevation-family-card-hover: var(--role-pack-card-elevation-hover, var(--role-elevation-family-card));
  --role-elevation-family-card-featured: var(--role-pack-card-elevation-featured, var(--role-elevation-family-card));
  --role-elevation-family-card-subtle: 0 10px 22px -18px color-mix(in oklch, black 18%, transparent), 0 2px 5px -3px color-mix(in oklch, black 10%, transparent);
  --role-elevation-family-modal: var(--role-modal-elevation);
  /*
    Elevaciones por rol (defaults).

    Regla de contrato:
    - NO dependemos de un alias global tipo --elevation (porque rompe los fallbacks).
    - La API pública ya no expone `page_vars.elevation`; la profundidad vive en roles de dominio especial y defaults internos.
  */
  --role-modal-elevation: var(--shadow-modal-soft, var(--shadow-modal-medium, 0 10px 30px rgba(0,0,0,.18)));
  /* Packs cards (elevación base) */
  --role-pack-card-elevation: var(--shadow-5, var(--shadow-3, 0 8px 24px rgba(0,0,0,.06)));
  /* Packs cards — estados (sombras base por token; no dependen del dial por ahora) */
  --role-pack-card-elevation-featured: var(--shadow-4, 0 10px 30px rgba(0,0,0,.09));
  --role-pack-card-elevation-hover: var(--shadow-5, 0 14px 40px rgba(0,0,0,.12));
  /* Cards genéricas (Garantía/Testimonios/FAQ/CTA Final) */
  --role-card-elevation: var(--shadow-3, 0 10px 30px rgba(0,0,0,.06));
  --role-modal-padding: 2rem;
  --role-modal-padding-mobile: 1rem;
  --role-modal-card-padding: 1.25rem;
  --role-modal-card-padding-mobile: 1rem;

  /* Close button */
  --role-modal-close-size: 40px;
  --role-modal-close-radius: 999px;
  --role-modal-close-surface: rgba(0,0,0,.06);
  --role-modal-close-surface-hover: rgba(0,0,0,.08);
  --role-modal-close-icon: rgba(0,0,0,.60);

  /* Acción principal vs acento decorativo (D3)
     - primary gobierna action family
     - accent gobierna accent/identity family
     - cualquier bridge explícito debe declararse por rol consumidor */
  --role-accent: var(--color-accent, oklch(0.62 0.18 320));
}