/* ============================================================
 * IntelMind Design Tokens v1 — 2026-05-25
 * Sistema UX unificado. Variables + utility classes opcionales.
 * Cargado globalmente via mu-plugin (intelmind-tokens-loader.php).
 * NO sobrescribe estilos existentes — solo añade base para nuevas URLs.
 * Patrón origen: imab-* (sobre-intelmind), im-up-* (upgrade), imdoc-*, imre-*
 * ============================================================ */

:root {
  /* === Paleta institucional === */
  --im-bg-page: #eef3f9;
  --im-text-primary: #0f172a;
  --im-text-heading: #0a2a5e;
  --im-text-body: #475569;
  --im-text-muted: #64748b;
  --im-text-aux: #94a3b8;
  --im-text-on-dark: #f0f8ff;
  --im-text-on-dark-soft: #cfe4f2;
  --im-text-on-dark-aux: #bfdaee;

  --im-accent-blue: #0f5f88;
  --im-accent-green: #0a7363;
  --im-accent-deep: #0a2a5e;

  --im-card-bg: #ffffff;
  --im-card-border: #e3ebf5;
  --im-card-border-strong: #d8e2f0;
  --im-bg-hover: #f4f8fc;
  --im-bg-soft: #ecf3fb;
  --im-bg-mint: #ecf6f3;

  /* === Gradientes corporativos === */
  --im-grad-hero: linear-gradient(135deg, #0a2a5e 0%, #0f5f88 48%, #0a7363 100%);
  --im-grad-hero-overlay: radial-gradient(circle at 80% 30%, rgba(255,255,255,.08) 0%, transparent 50%);
  --im-grad-btn-primary: linear-gradient(180deg, #3b82f6, #2563eb);
  --im-grad-btn-primary-hover: linear-gradient(180deg, #60a5fa, #2563eb);

  /* === Tipografía === */
  --im-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --im-fs-h1: clamp(24px, 3.6vw, 36px);
  --im-fs-h2: clamp(22px, 2.6vw, 28px);
  --im-fs-h3: 18px;
  --im-fs-body: 16px;
  --im-fs-small: 14px;
  --im-fs-tag: 11px;
  --im-lh-tight: 1.18;
  --im-lh-body: 1.6;
  --im-lh-prose: 1.75;

  /* === Spacing scale (escala progresiva) === */
  --im-sp-1: 4px;
  --im-sp-2: 8px;
  --im-sp-3: 12px;
  --im-sp-4: 16px;
  --im-sp-5: 20px;
  --im-sp-6: 24px;
  --im-sp-8: 32px;
  --im-sp-10: 40px;
  --im-sp-12: 48px;
  --im-sp-16: 64px;

  /* === Radii === */
  --im-radius-sm: 8px;
  --im-radius-md: 12px;
  --im-radius-lg: 14px;
  --im-radius-xl: 18px;
  --im-radius-2xl: 22px;
  --im-radius-pill: 30px;

  /* === Sombras === */
  --im-shadow-card: 0 4px 18px rgba(15, 95, 136, 0.06);
  --im-shadow-card-hover: 0 10px 26px rgba(15, 30, 60, 0.08);
  --im-shadow-hero: 0 14px 30px rgba(15, 30, 60, 0.16);
  --im-shadow-btn: 0 8px 20px rgba(0, 0, 0, 0.18);

  /* === Layout === */
  --im-container-max: 1100px;
  --im-section-max: 1052px;
  --im-prose-max: 920px;
  --im-hero-max: 820px;

  /* === Transitions === */
  --im-transition-fast: 0.12s;
  --im-transition: 0.15s;
  --im-transition-slow: 0.22s;
}

/* ============================================================
 * Utility classes opcionales (prefijo .im-*).
 * Para URLs nuevas. NO afecta a las existentes (imab-* / im-up-* etc.).
 * ============================================================ */

.im-wrap {
  background: var(--im-bg-page);
  padding: 0 0 64px;
  font-family: var(--im-font);
  color: var(--im-text-primary);
  line-height: var(--im-lh-body);
}
.im-wrap * { box-sizing: border-box; }

/* Hero */
.im-hero {
  background: var(--im-grad-hero);
  color: var(--im-text-on-dark);
  padding: 44px 24px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.im-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--im-grad-hero-overlay);
  pointer-events: none;
}
.im-hero-inner { max-width: var(--im-hero-max); margin: 0 auto; position: relative; }
.im-hero h1 {
  font-size: var(--im-fs-h1);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: var(--im-lh-tight);
  color: #fff;
  letter-spacing: -0.3px;
}
.im-hero p {
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--im-text-on-dark-soft);
  max-width: 720px;
  margin: 0 auto;
}

/* Breadcrumb */
.im-bc {
  max-width: var(--im-container-max);
  margin: 0 auto 12px;
  padding: 0 8px;
  font-size: 13px;
  color: var(--im-text-on-dark-aux);
  position: relative;
  z-index: 2;
}
.im-bc a { color: #fff; text-decoration: none; opacity: 0.85; }
.im-bc a:hover { text-decoration: underline; opacity: 1; }

/* Tag pill */
.im-tag {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--im-radius-pill);
  font-size: var(--im-fs-tag);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #fff;
}

/* Section container */
.im-section {
  max-width: var(--im-container-max);
  margin: 0 auto;
  padding: 52px 24px 0;
}
.im-section h2 {
  font-size: var(--im-fs-h2);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--im-text-heading);
  text-align: center;
  letter-spacing: -0.2px;
}
.im-section .im-lead {
  font-size: var(--im-fs-body);
  color: var(--im-text-body);
  text-align: center;
  max-width: 780px;
  margin: 0 auto 32px;
  line-height: 1.65;
}

/* Card blanca */
.im-card {
  background: var(--im-card-bg);
  border: 1px solid var(--im-card-border-strong);
  border-radius: var(--im-radius-xl);
  padding: 24px;
  color: var(--im-text-primary);
  transition: transform var(--im-transition), border-color var(--im-transition), box-shadow var(--im-transition);
}
.im-card:hover {
  transform: translateY(-2px);
  border-color: var(--im-accent-blue);
  box-shadow: var(--im-shadow-card-hover);
}
.im-card h3 {
  font-size: var(--im-fs-h3);
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--im-text-heading);
}
.im-card p {
  font-size: 14.8px;
  color: var(--im-text-body);
  margin: 0 0 12px;
  line-height: 1.65;
}

/* Botones */
.im-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  transition: transform var(--im-transition-fast), box-shadow var(--im-transition-fast);
  border: 0;
  cursor: pointer;
  font-family: var(--im-font);
}
.im-btn:hover { transform: translateY(-1px); box-shadow: var(--im-shadow-btn); }
.im-btn-primary { background: var(--im-grad-btn-primary); color: #fff; }
.im-btn-primary:hover { background: var(--im-grad-btn-primary-hover); }
.im-btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* FAQ accordion */
.im-faq-item {
  background: var(--im-card-bg);
  border: 1px solid var(--im-card-border);
  border-radius: var(--im-radius-lg);
  overflow: hidden;
  transition: border-color var(--im-transition), box-shadow var(--im-transition);
  margin-bottom: 12px;
}
.im-faq-item:hover { border-color: var(--im-text-on-dark-aux); }
.im-faq-item details { padding: 0; }
.im-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--im-text-heading);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  user-select: none;
}
.im-faq-item summary::-webkit-details-marker { display: none; }
.im-faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--im-accent-blue);
  font-weight: 300;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.im-faq-item details[open] summary::after { transform: rotate(45deg); }
.im-faq-item .im-faq-a {
  padding: 0 22px 22px;
  font-size: 14.8px;
  color: var(--im-text-body);
  line-height: 1.7;
  border-top: 1px solid #f0f4f9;
  padding-top: 18px;
  margin-top: 0;
}
.im-faq-item .im-faq-a strong { color: var(--im-text-heading); }
.im-faq-item .im-faq-a a {
  color: var(--im-accent-blue);
  font-weight: 600;
  text-decoration: none;
}

/* CTA final */
.im-cta-final {
  max-width: var(--im-section-max);
  margin: 0 auto;
  background: var(--im-grad-hero);
  color: #fff;
  text-align: center;
  padding: 52px 28px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.im-cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 100%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.im-cta-final h2 { color: #fff; margin: 0 0 12px; font-size: clamp(22px, 3vw, 28px); }
.im-cta-final p {
  color: var(--im-text-on-dark-soft);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto 24px;
}
.im-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* === Responsive base — móvil seguro === */
@media (max-width: 768px) {
  .im-section { padding: 36px 18px 0; }
  .im-card { padding: 18px; }
  .im-hero { padding: 36px 18px; }
  .im-cta-final { padding: 36px 18px; }
}