/*
 * landing-tokens.css — v3 (alineado con el sistema REAL del landing)
 * Font stack: SF Pro Display (system) — NO Google Sans
 * Headings: weight 300 (light) tipo Stripe/landing — NO bold
 * Cargar después de tailwind.css
 */

:root {
  --paper: #ffffff;
  --paper-2: #fafafa;
  --paper-3: #f5f5f5;
  --ink: #0A2540;
  --ink-2: #4A5A78;
  --ink-3: #687385;
  --ink-4: #8A95A8;
  --rule: #E5E7EB;
  --rule-soft: #EFF2F6;

  --accent: #4BC056;
  --accent-2: #3DA847;
  --accent-ink: #2F8537;
  --accent-soft: #E8F7EB;

  --brand-blue: #016DFF;
  --brand-blue-dark: #0156CC;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 0 #E5E7EB;
  --shadow-2: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(0,0,0,0.08);
  --shadow-3: 0 2px 6px rgba(0,0,0,0.05), 0 16px 48px -12px rgba(0,0,0,0.12);

  /* Font stack REAL del landing — SF Pro Display, sistema Apple */
  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --body: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ============================================================
 * BODY — SF Pro Display, 15px, ink #0A2540, tabular-nums
 * ============================================================ */
html { scroll-behavior: smooth; }

html body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--body) !important;
  font-feature-settings: 'ss01', 'cv11', 'tnum' !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
 * HEADINGS — weight light (300) tipo Stripe/landing
 * Tamaños exactos del landing
 * ============================================================ */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--display) !important;
  color: var(--ink) !important;
  text-wrap: balance;
}

/* H1 — Hero principal */
html body h1 {
  font-size: clamp(36px, 5vw, 52px) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

/* H2 — Sección principal */
html body h2 {
  font-size: clamp(28px, 3.6vw, 38px) !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}

/* H3 — Subsección / card title */
html body h3 {
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
}

/* H4 — labels o cards menores */
html body h4 {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================
 * Override de Tailwind utility classes en HEADINGS
 * (las páginas internas usan font-bold + text-3xl/text-4xl)
 * ============================================================ */
html body h1.font-bold,
html body h2.font-bold,
html body h3.font-bold,
html body .font-bold {
  font-weight: 500 !important;
}

html body .text-2xl { font-size: 24px !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; }
html body .text-3xl { font-size: clamp(28px, 3.6vw, 38px) !important; font-weight: 300 !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; }
html body .text-4xl { font-size: clamp(34px, 4.4vw, 44px) !important; font-weight: 300 !important; line-height: 1.1 !important; letter-spacing: -0.028em !important; }
html body .text-5xl { font-size: clamp(40px, 5.2vw, 52px) !important; font-weight: 300 !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; }

/* ============================================================
 * PÁRRAFOS — color ink-2, line-height respirado
 * ============================================================ */
html body p {
  color: var(--ink-2) !important;
  line-height: 1.6 !important;
}

html body p.text-sm,
html body .text-sm {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

html body p.text-xs,
html body .text-xs {
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* ============================================================
 * COLORES — override Tailwind brand/subtle
 * ============================================================ */
html body .text-brand { color: var(--ink) !important; }
html body .text-subtle { color: var(--ink-3) !important; }
html body .text-primary { color: var(--brand-blue) !important; }
html body .text-error { color: #C24A2E !important; }
html body .text-success { color: var(--accent-ink) !important; }

/* ============================================================
 * BORDES y SUPERFICIES
 * ============================================================ */
html body .border-border { border-color: var(--rule) !important; }
html body .border-border-light { border-color: var(--rule-soft) !important; }

html body .bg-white { background-color: var(--paper) !important; }
html body .bg-surface { background-color: var(--paper-3) !important; }

/* Quita grid Excel-style — incompatible con look limpio del landing */
html body .bg-grid-section {
  background-color: var(--paper) !important;
  background-image: none !important;
}

/* Badges eyebrow */
html body .bg-red-50 { background-color: #FDEEEA !important; }
html body .bg-green-50 { background-color: var(--accent-soft) !important; }
html body .bg-blue-50 { background-color: #E8F0FE !important; }

/* ============================================================
 * CARDS — sombras y radius del landing
 * ============================================================ */
html body .shadow-gc {
  box-shadow: var(--shadow-2) !important;
}
html body .shadow-gc-lg {
  box-shadow: var(--shadow-3) !important;
}
html body .shadow-gc-xl {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 32px 80px -16px rgba(0,0,0,0.16) !important;
}

html body .rounded-gc {
  border-radius: var(--radius-lg) !important;
}

html body .card-lift {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 200ms ease !important;
}
html body .card-lift:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-3) !important;
  border-color: #D7DADD !important;
}

/* ============================================================
 * CTAs — botón verde con weight 500
 * ============================================================ */
html body .bg-primary { background-color: var(--accent) !important; }
html body .hover\:bg-primary-dark:hover { background-color: var(--accent-2) !important; }
html body .bg-primary-light { background-color: var(--accent-soft) !important; }

html body a.bg-primary,
html body button.bg-primary {
  font-family: var(--display) !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.005em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(0,0,0,0.08) !important;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}
html body a.bg-primary:hover,
html body button.bg-primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(75, 192, 86, 0.28) !important;
}

/* ============================================================
 * ICONOS coloreados
 * ============================================================ */
html body .icon-blue {
  background-color: #E8F0FE !important;
  color: var(--brand-blue) !important;
}
html body .icon-purple {
  background-color: #EFEDFB !important;
  color: #6E56CF !important;
}
html body .icon-green {
  background-color: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
}

/* ============================================================
 * NUMS tabulares
 * ============================================================ */
html body [class*="kpi"],
html body [class*="price"],
html body [class*="metric"],
html body .font-tnum,
html body .tabular-nums {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' !important;
}

/* ============================================================
 * SECCIONES — padding respirado
 * ============================================================ */
html body main section {
  padding-top: clamp(64px, 8vw, 112px) !important;
  padding-bottom: clamp(64px, 8vw, 112px) !important;
}

/* ============================================================
 * INPUTS / FORMS
 * ============================================================ */
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body textarea,
html body select {
  font-family: var(--body) !important;
  font-size: 14.5px !important;
  letter-spacing: -0.005em !important;
  border-color: var(--rule) !important;
  border-radius: 10px !important;
  color: var(--ink) !important;
}
html body input:focus,
html body textarea:focus,
html body select:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(1, 109, 255, 0.18) !important;
  outline: none !important;
}

/* ============================================================
 * font-sans Tailwind → forzado a SF Pro stack
 * ============================================================ */
html body .font-sans {
  font-family: var(--body) !important;
}