/* ============================================================
   tokens.css — Sistema visual extraído de cindercapacitaciones.com
   Landing Grúa Horquilla · Cinder Capacitaciones
   Reusa SOLO el sistema visual. Ver design-tokens.json.
   ============================================================ */

:root {
  /* --- Navy / fondos oscuros --- */
  --navy-900: #0e1c31; /* hero, tramo más oscuro */
  --navy-800: #182135; /* fondo de página */
  --navy-700: #0D1526; /* texto sobre botones claros */

  /* --- Acentos --- */
  --teal: #33D3B8;
  --teal-light: #7FF3E4;
  --teal-alt: #3EDBE2;
  --teal-dark: #12b3a0; /* acento en secciones claras */
  --blue: #3EACE2;

  /* --- WhatsApp --- */
  --wa: #25D366;
  --wa-hover: #1ebe5b;
  --wa-text: #182135;

  /* --- Secciones claras (spotlight) --- */
  --light-top: #ffffff;
  --light-bottom: #f4f7fb;
  --light-text: #152131;
  --light-muted: #51617a;

  /* --- Texto sobre oscuro --- */
  --white: #ffffff;
  --on-dark-strong: rgba(255, 255, 255, 0.85);
  --on-dark-body: rgba(255, 255, 255, 0.80);
  --on-dark-muted: rgba(255, 255, 255, 0.60);

  /* --- Bordes --- */
  --border-dark: rgba(255, 255, 255, 0.08);
  --border-dark-strong: rgba(255, 255, 255, 0.12);
  --border-teal: rgba(51, 211, 184, 0.25);

  /* --- Radios --- */
  --radius-base: 0.625rem;
  --radius-btn: 0.75rem;
  --radius-card: 1rem;
  --radius-pill: 9999px;

  /* --- Sombras --- */
  --shadow-frame: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  --shadow-cta: 0 12px 26px rgba(18, 179, 160, 0.28);
  --shadow-float: 0 40px 60px rgba(21, 33, 49, 0.22);

  /* --- Tipografía --- */
  --font-heading: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  /* --- Gradientes --- */
  --grad-headline: linear-gradient(90deg, var(--teal), var(--blue), var(--teal));
  --grad-stat: linear-gradient(90deg, var(--teal), var(--white), var(--blue));
  --grad-light: linear-gradient(180deg, var(--light-top) 0%, var(--light-bottom) 100%);

  /* --- Layout --- */
  --container: 1120px;
  --nav-h: 64px;
}