/* iwp-tokens.css — GENERADO desde el tokens.json del sistema de diseño
   https://claude.ai/artifact/Sope1Effn2c6b7gZ1KjLqp
   No editar a mano: se regenera. Cárgalo ANTES de iwp-bundle.css.

   Tema: la web es clara en todas sus páginas, así que el tema oscuro NO se
   activa por preferencia del sistema; queda disponible con [data-theme="dark"]
   para no dejar la portada en oscuro y las otras 18 páginas en claro. */

:root {
  --font-sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --surface: #ffffff;
  --surface-sunken: #f2faf6;
  --surface-raised: #ffffff;
  --surface-mint: #e4f6ec;
  --surface-ink: #1d1f1f;
  --surface-brand: #eef1fc;
  --surface-gold: #f7f4dc;
  --surface-night: #0d0f0f;
  --ink: #14191b;
  --ink-muted: #4b5a55;
  --ink-subtle: #5f6d68;
  --on-ink: #ffffff;
  --on-brand: #ffffff;
  --on-ink-muted: #c3ccc7;
  --brand: #2f357f;
  --brand-bright: #2b6fa8;
  --mint-ink: #0f5b39;
  --mint-on-night: #74dcac;
  --gold-ink: #6b5618;
  --action: #1d1f1f;
  --on-action: #ffffff;
  --line: #e2eae5;
  --line-strong: #7c8c86;
  --line-on-ink: #3a3d3d;
  --focus: #2b6fa8;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(20, 25, 27, 0.04);
  --shadow-menu: 0 18px 48px rgba(20, 25, 27, 0.12);
  --shadow-lift: 0 8px 24px rgba(20, 25, 27, 0.08);
}

[data-theme="dark"] {
  --surface: #0f1412;
  --surface-sunken: #141a17;
  --surface-raised: #1a211d;
  --surface-mint: #16392a;
  --surface-ink: #05090a;
  --surface-brand: #1b1f36;
  --surface-gold: #2e2a12;
  --surface-night: #0d0f0f;
  --ink: #edf3ef;
  --ink-muted: #aebab4;
  --ink-subtle: #94a29c;
  --on-ink: #ffffff;
  --on-brand: #171a2e;
  --on-ink-muted: #c3ccc7;
  --brand: #a9b2f2;
  --brand-bright: #7cc1ea;
  --mint-ink: #74dcac;
  --mint-on-night: #74dcac;
  --gold-ink: #e3d08a;
  --action: #eaf2ed;
  --on-action: #101614;
  --line: #29312d;
  --line-strong: #7d8b85;
  --line-on-ink: #232827;
  --focus: #7cc1ea;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-menu: 0 18px 48px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.55);
}

/* Clases de tipografía: una por estilo declarado en tokens.json. */
.display-2xl { font-family: var(--font-sans); font-size: 80px; line-height: 78px; font-weight: 600; letter-spacing: -3px; }
.display-xl { font-family: var(--font-sans); font-size: 56px; line-height: 58px; font-weight: 600; letter-spacing: -1.6px; }
.display-l { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -1px; }
.display-m { font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.6px; }
.stat { font-family: var(--font-sans); font-size: 44px; line-height: 44px; font-weight: 600; letter-spacing: -1.2px; }
.heading-l { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
.heading-m { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; }
.heading-s { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; }
.lead-xl { font-family: var(--font-sans); font-size: 23px; line-height: 34px; font-weight: 400; }
.body-l { font-family: var(--font-sans); font-size: 19px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 400; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; }
.badge { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; }

/* Los display grandes vienen en px fijos del sistema. A 1160px (el ancho de
   diseño) el valor es EXACTAMENTE el declarado; por debajo escalan, porque un
   titular de 80px no cabe en 375px. Solo se toca el tamaño, no el peso. */
.display-2xl { font-size: clamp(38px, 6.90vw, 80px); line-height: 1.02; }
.display-xl { font-size: clamp(32px, 4.83vw, 56px); line-height: 1.06; }
.display-l { font-size: clamp(27px, 3.45vw, 40px); line-height: 1.1; }
.display-m { font-size: clamp(23px, 2.59vw, 30px); line-height: 1.2; }
.stat { font-size: clamp(32px, 3.79vw, 44px); line-height: 1.0; }
.lead-xl { font-size: clamp(18px, 1.98vw, 23px); line-height: 1.48; }
.body-l { font-size: clamp(17px, 1.64vw, 19px); line-height: 1.58; }

/* Reset mínimo: el bundle da por hecho que el contenedor no trae márgenes
   del navegador. Las listas del propio bundle ya se resetean solas.

   VA EN :where() A PROPÓSITO. Escrito como `.iwp-root p` tendría
   especificidad (0,1,1) y ganaría a `.iwp-scene__lead` (0,1,0), que es
   una regla del sistema: mataba el `margin: 24px auto 0` de TODAS las
   entradillas y las descentraba 200px. :where() vale 0, así que
   sustituye al margen del navegador y a nada más. */
:where(.iwp-root) :where(h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, ul, ol, dl) { margin: 0; }
:where(.iwp-root) :where(figure) { padding: 0; }