/* ═══════════════════════════════════════════════════════════════════════════
   RealFluencers: design system (tokens + componentes base)
   ───────────────────────────────────────────────────────────────────────────
   Fuente de verdad: https://realfluencers.co/ (Elementor kit post-7.css).
   Snapshot: 12 nov 2026. Se revisa con el skill auditoria-marca-realfluencers.

   Reglas:
   - Prefijo --ds-* para no chocar con styles.css (--brand, --ink, --paper...)
     ni con rf-brand.css (--rf-*). i18n.js depende de --brand, --line, --muted y
     --paper: este archivo NO las toca.
   - Se carga ANTES de styles.css y rf-brand.css. Por sí solo no cambia nada
     visible: solo declara tokens y clases .ds-* que nadie usa todavía.
   - Colores de estado de la app (--ok, --error, --draft-*, --errbox-*, --cat-*)
     son funcionales y siguen viviendo en styles.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color ─────────────────────────────────────────────────────────────── */
  --ds-primary:     #0D1425;   /* e-global primary: azul casi negro, texto fuerte */
  --ds-black:       #020407;   /* fondo base del sitio */
  --ds-section:     #141414;   /* bloques alternos */
  --ds-surface-dk:  #161616;   /* fondo del CTA neón */
  --ds-navy:        #0B2C4B;   /* azul noche: bordes de chip, secundarios */
  --ds-accent:      #009BDF;   /* azul de marca: links, acentos, etiquetas */
  --ds-accent-hov:  #01A5ED;   /* hover del accent */
  --ds-neon:        #E7FD01;   /* neón: solo highlights y CTA puntual */
  --ds-text:        #183149;   /* texto sobre fondo claro */
  --ds-white:       #FFFFFF;
  --ds-white-74:    rgba(255, 255, 255, .74);  /* texto secundario sobre oscuro */
  --ds-white-63:    rgba(255, 255, 255, .63);  /* texto de chip sobre oscuro */
  --ds-black-42:    rgba(2, 4, 7, .42);        /* fondo de chip sobre oscuro */

  /* ── Gradiente ─────────────────────────────────────────────────────────── */
  --ds-grad:      radial-gradient(at 100% 100%, #009BDF 0%, #020407 62%);
  --ds-grad-soft: radial-gradient(at 100% 100%, #009BDF 33%, #020407 73%);

  /* ── Tipografía ────────────────────────────────────────────────────────── */
  --ds-font-head: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-text: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-num:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala escritorio (Elementor). Títulos en peso 500, no 800. */
  --ds-fs-display: 62px;   /* secondary */
  --ds-fs-h1:      50px;   /* primary */
  --ds-fs-h2:      38px;
  --ds-fs-h3:      32px;
  --ds-fs-h4:      24px;
  --ds-fs-lead:    20px;
  --ds-fs-body:    16px;
  --ds-fs-btn:     14px;
  --ds-fs-small:   12px;
  --ds-fs-num:     64px;   /* cifras grandes, Inter 600 */

  --ds-fw-head:    500;
  --ds-fw-text:    400;
  --ds-fw-accent:  600;

  --ds-lh-head:    1.13;
  --ds-lh-text:    1.3;

  /* ── Forma ─────────────────────────────────────────────────────────────── */
  --ds-radius-sm:   16px;   /* chips */
  --ds-radius:      20px;   /* tarjetas */
  --ds-radius-lg:   30px;   /* bloques grandes */
  --ds-pill:        100px;  /* botones */

  --ds-glow:        0 6px 31px rgba(255, 255, 255, .55);
  --ds-shadow:      0 2px 10px rgba(13, 20, 37, .06), 0 10px 30px rgba(13, 20, 37, .07);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --ds-ancho-corp:  1140px;  /* contenedor del sitio corporativo */
  --ds-ancho:       1220px;  /* contenedor de la app y la landing */
  --ds-ancho-xl:    1400px;  /* grids de resultados */
  --ds-gutter:      24px;
}

/* Escala tablet / móvil (mismos cortes que Elementor) */
@media (max-width: 1024px) {
  :root {
    --ds-fs-display: 60px; --ds-fs-h1: 48px; --ds-fs-h2: 32px;
    --ds-fs-h3: 28px; --ds-fs-h4: 22px; --ds-fs-lead: 22px; --ds-fs-num: 50px;
  }
}
@media (max-width: 767px) {
  :root {
    --ds-fs-display: 32px; --ds-fs-h1: 30px; --ds-fs-h2: 22px;
    --ds-fs-h3: 20px; --ds-fs-h4: 19px; --ds-fs-lead: 17px;
    --ds-fs-body: 13px; --ds-fs-num: 36px;
  }
}

/* ═══ Componentes base (opt-in: solo aplican con clase .ds-*) ═══════════════ */

.ds-wrap {
  max-width: var(--ds-ancho);
  margin: 0 auto;
  padding: 0 var(--ds-gutter);
}
.ds-wrap--xl { max-width: var(--ds-ancho-xl); }

/* Botones: siempre píldora */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: var(--ds-pill);
  font-family: var(--ds-font-text);
  font-size: var(--ds-fs-btn);
  font-weight: var(--ds-fw-accent);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
/* Blanco con glow: CTA principal sobre fondo oscuro */
.ds-btn--light {
  background: var(--ds-white);
  border-color: var(--ds-white);
  color: var(--ds-primary);
  box-shadow: var(--ds-glow);
}
.ds-btn--light:hover { background: var(--ds-accent-hov); border-color: var(--ds-accent-hov); color: var(--ds-white); }

/* Outline blanco: secundario sobre fondo oscuro */
.ds-btn--outline {
  background: transparent;
  border: 2px solid var(--ds-white);
  color: var(--ds-white);
}
.ds-btn--outline:hover { background: var(--ds-white); color: var(--ds-primary); }

/* Azul: primario sobre fondo claro (app interna) */
.ds-btn--accent {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-white);
}
.ds-btn--accent:hover { background: var(--ds-accent-hov); border-color: var(--ds-accent-hov); }

/* CTA neón: uso puntual (Contáctanos) */
.ds-btn--neon {
  background: var(--ds-surface-dk);
  color: var(--ds-neon);
  padding: 10px 12px;
  font-size: var(--ds-fs-small);
}
.ds-btn--neon:hover { background: var(--ds-neon); color: var(--ds-surface-dk); }

/* Chip de sugerencia (búsqueda con IA) */
.ds-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--ds-navy);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-black-42);
  color: var(--ds-white-63);
  font-family: var(--ds-font-text);
  font-size: var(--ds-fs-small);
  font-weight: var(--ds-fw-accent);
}

/* Tarjeta */
.ds-card {
  border-radius: var(--ds-radius);
  background: var(--ds-white);
  box-shadow: var(--ds-shadow);
}
.ds-card--dark { background: var(--ds-section); color: var(--ds-white); box-shadow: none; }

/* Etiqueta sobre título ("Mapeo", "Estrategia"...) */
.ds-eyebrow {
  font-family: var(--ds-font-text);
  font-size: var(--ds-fs-small);
  font-weight: var(--ds-fw-accent);
  color: var(--ds-accent);
}

/* Sección con gradiente de marca */
.ds-grad { background: var(--ds-grad); color: var(--ds-white); }