/*
 * Fallback ajustado a las métricas reales de DM Sans, para que el swap de
 * Arial (sans-serif por defecto en Windows) a DM Sans no mueva el layout
 * (CLS). Los porcentajes salen de comparar las tablas OS/2 y hhea del
 * propio .woff que carga base.hubl.html contra las de Arimo (el clon
 * métricamente compatible de Arial que usa Google Fonts):
 *   DM Sans: unitsPerEm 1000, ascent 992, descent 310, lineGap 0, xAvgCharWidth 552
 *   Arial:   unitsPerEm 2048, ascent 1854, descent 434, lineGap 67, xAvgCharWidth 1191
 * Cualquier módulo que use 'DM Sans' debe listar esta fuente como segundo
 * valor de font-family, antes de sans-serif.
 */
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial');
  ascent-override: 104.51%;
  descent-override: 32.66%;
  line-gap-override: 0%;
  size-adjust: 94.92%;
}

/*
 * Tokens de DESIGN.md como variables CSS. Fuente de verdad: el YAML de
 * DESIGN.md; si cambia un valor allí, cambia aquí. Los módulos anteriores a
 * la web (LP, precios) siguen con sus hex fijos hasta que se migren.
 */
:root {
  /* Color */
  --color-brand: #6e5ee0;
  --color-brand-dark: #3c1a75;
  --color-brand-muted: #9a94b8;
  --color-ink-muted: #5a5a5a;
  --color-bg-page: #fafaff;
  --color-bg-surface: #ffffff;
  --color-accent-success: #03e196;
  --color-accent-success-ink: #0b3d2c;

  /* El oscuro de la maqueta de Precios (#2B2724) y el verde de sus botones
     sobre las bandas violetas. */
  --color-ink: #2b2724;          /* casi negro cálido de la maqueta: superficies oscuras puntuales */
  --color-on-ink: #ffffff;
  --color-on-ink-muted: #d9d4ce;
  --line-on-ink: rgba(255, 255, 255, 0.14);
  --color-cta-green: #00dc8c;    /* botón sobre las bandas violetas */
  --color-cta-green-ink: #1f1b18;

  /* Tintes de marca (fondos y bordes sutiles) */
  --tint-brand-06: rgba(110, 94, 224, 0.06);
  --tint-brand-08: rgba(110, 94, 224, 0.08);
  --tint-brand-10: rgba(110, 94, 224, 0.1);
  --tint-brand-14: rgba(110, 94, 224, 0.14);
  --tint-brand-20: rgba(110, 94, 224, 0.2);
  --tint-brand-32: rgba(110, 94, 224, 0.32);

  /* Superficie oscura (footer de la web, AgendaAsesor, VideoDestacado) */
  --color-dark-bg: #0f0b1e;
  --color-dark-bg-raised: #241a4a;
  --color-dark-ink: #f7f5ff;
  --color-dark-ink-muted: #c9c3e6;
  --color-dark-line: rgba(201, 195, 230, 0.16);

  /* Tipografía */
  --font-sans: 'DM Sans', 'DM Sans Fallback', sans-serif;

  /* Layout */
  --section-max-width: 1140px;
  --section-gutter: 32px;
  --section-gutter-mobile: 16px;

  /* Radios */
  --radius-pill: 999px;
  --radius-button: 10px;
  --radius-card-sm: 16px;
  --radius-card-md: 20px;
  --radius-container-lg: 24px;
  --radius-banner: 32px;

  /* Sombras */
  --shadow-card: 0 0 8.7px 2px rgba(110, 94, 224, 0.2);
  --shadow-card-soft: 0 0 8.7px 2px rgba(110, 94, 224, 0.14);
  --shadow-card-featured: 0 12px 32px rgba(110, 94, 224, 0.32);
  --shadow-toggle-active: 0 2px 8px rgba(60, 26, 117, 0.14);
  /* Paneles flotantes (megamenú): offset y blur, tinte de brand-dark. */
  --shadow-popover: 0 18px 48px rgba(60, 26, 117, 0.16),
    0 2px 6px rgba(60, 26, 117, 0.06);

  /* Degradados de marca: `--gradient-brand` en la tarjeta destacada;
     `--gradient-brand-deep` en el hero y la banda CTA. */
  --gradient-brand: linear-gradient(150deg, #3c1a75 0%, #6e5ee0 100%);
  --gradient-brand-deep: radial-gradient(120% 90% at 85% 0%, rgba(110, 94, 224, 0.5) 0%, rgba(110, 94, 224, 0) 62%),
    linear-gradient(165deg, #3c1a75 0%, #241a4a 100%);

  /* Texto y filetes sobre fondos de marca */
  --color-on-brand: #ffffff;
  --color-on-brand-muted: rgba(255, 255, 255, 0.82);
  --line-on-brand: rgba(255, 255, 255, 0.16);

  /* Movimiento: ease-out exponencial */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Acordeones (ComparisonTable): misma curva al abrir y al cerrar, la del
     acordeón de claude.com/es/pricing. En GSAP es `power1.inOut`. */
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  /* Alto de la barra de SiteHeader; site.hubl.html lo usa para el
     scroll-padding de las anclas. */
  --site-header-h: 68px;

  /* Alto del sub-nav de sección (SectionNav); entra en el scroll-padding de
     las páginas que lo usan. */
  --section-nav-h: 52px;

  /* Tintes de accent-success: la pill «tiempo real» de ComparisonTable
     (fondo al 14 %, borde al 32 %). */
  --tint-success-14: rgba(3, 225, 150, 0.14);
  --tint-success-32: rgba(3, 225, 150, 0.32);

  /* Teal de flowww connect (ConnectResumen en la portada, FlowwwConnect en
     Precios): trazos y borde del botón, degradado del paquete, fondos de
     iconos y operadores, filetes y resplandores de la tarjeta. */
  --color-connect-deep: #0b8580;
  --color-connect-mid: #1e9f98;
  --color-connect: #25b6ac;
  --color-connect-tint: #ddf6f5;
  --color-connect-line: #dcefef;
  --color-connect-glow: #e9f8f7;
  --color-on-connect-muted: #e6faf6; /* texto secundario sobre el degradado */

  /* Paleta de la campaña del monedero (diseño Monedero v2, 2026-10-29). La
     activa el interruptor `style.campaign_palette` de cada módulo (ver
     «Paleta de campaña en módulos» en DESIGN.md). Donde el valor ya era un
     token, es un alias. */
  --wallet-gradient: linear-gradient(135deg, #03e196 0%, #2cdfc0 55%, #8b7bff 140%); /* hero y banda final */
  --wallet-ink: var(--color-dark-bg);              /* #0f0b1e: superficies oscuras y texto sobre el degradado */
  --wallet-on-ink: var(--color-dark-ink);          /* #f7f5ff: texto sobre oscuro */
  --wallet-on-ink-muted: #b8b1d8;                  /* rótulos y unidades sobre oscuro */
  --wallet-on-ink-soft: #c2bbe2;                   /* texto secundario dentro de la caja recomendada */
  --wallet-line-on-ink: #2c2547;                   /* filetes sobre oscuro */
  --wallet-accent: var(--color-accent-success);    /* #03e196: palabra destacada, iconos y botón sobre oscuro */
  --wallet-pick-bg: #123b33;                       /* caja del plan recomendado: fondo */
  --wallet-pick-border: var(--color-accent-success); /* #03e196: caja del plan recomendado: borde */
  --wallet-heading: #16112b;                       /* titulares sobre claro */
  --wallet-text: #5e5878;                          /* texto secundario sobre claro */
  --wallet-line: #e3dff0;                          /* filetes sobre claro */
  --wallet-faq-icon: #e9e6f4;                      /* círculo del icono de una FAQ cerrada */
  --wallet-link: #047a54;                          /* enlaces y destacado en verde sobre claro */
  --wallet-link-hover: var(--wallet-heading);      /* #16112b */
  --wallet-glow-green: rgba(3, 225, 150, 0.28);    /* halos radiales detrás de la ilustración */
  --wallet-glow-violet: rgba(139, 123, 255, 0.22);
}

::selection {
  background: rgba(110, 94, 224, 0.22);
  color: var(--color-brand-dark);
}

body {
  padding: 0;
  margin: 0;
  font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
}