/* Championsys CRM — deck theme
 *
 * Adapts the Reveal.js pitch deck to the 2026 site redesign. The deck was
 * built against a slate + violet palette with Inter and Outfit; the public
 * site uses the tokens defined in landing.css with self-hosted Manrope.
 *
 * This file only re-skins. It does not touch slide structure or markup, so a
 * content edit in the deck keeps working without changes here.
 *
 * Loaded last in <head> so it wins over the deck's own inline <style> blocks.
 * Tailwind utility colours are remapped separately in the tailwind.config
 * block injected next to the CDN script.
 */

/* ── Type ─────────────────────────────────────────────────────────────────
   Self-hosted, identical to the site. Replaces the Google Fonts request for
   Inter and Outfit, so the deck no longer depends on a third-party host and
   renders in the same typeface as the page that links to it. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/site/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/site/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────────
   Mirrors the :root block in landing.css. Kept as its own copy so the deck
   stays a standalone document that renders correctly if opened directly. */
:root {
  --bg: #e7ebf4;
  --ink: #252a3a;
  --ink2: #3a4056;
  --muted: #8b90a3;
  --faint: #adb2c2;
  --line: rgba(20, 22, 50, 0.07);
  --card: #fff;
  --coral: #f2704f;
  --coral2: #f9a68c;
  --navy: #2a2d4a;
  --dark: #1a1c33;
  --dark2: #242844;
  --blue: #5b8def;
  --violet: #8b7cf0;
  --plum: #b16ad0;
  --green: #16a34a;
  --font: 'Manrope', -apple-system, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --sh-sm: 0 1px 3px rgba(35, 37, 68, 0.06);
  --sh: 0 14px 36px rgba(35, 37, 68, 0.09);
  --sh-lg: 0 30px 70px rgba(20, 22, 50, 0.16);
  --r: 24px;

  /* Reveal's own variables */
  --r-background-color: transparent;
  --r-main-font: var(--font);
  --r-heading-font: var(--font);
  --r-main-color: var(--ink);
  --r-heading-color: var(--ink);
  --r-selection-background-color: var(--coral);
  --r-selection-color: #fff;
}

body {
  background-color: var(--bg);
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.reveal,
.reveal p,
.reveal li,
.reveal td,
.reveal th,
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--font);
}

/* El color va envuelto en :where() para que su especificidad sea cero y
   cualquier utilidad de Tailwind lo gane. Sin esto, `.reveal h3` (0,1,1) le
   ganaba a `.text-white` (0,1,0) y los títulos claros sobre paneles oscuros
   quedaban pintados en tinta oscura, ilegibles contra su propio fondo.
   El resto de propiedades sí se mantiene con especificidad normal: la
   tipografía del deck debe seguir al sistema del sitio en todos los casos. */
:where(.reveal) :where(h1, h2, h3, h4) {
  color: var(--ink);
}
/* Solo `p`, nunca `li`. Las listas dentro de paneles oscuros no llevan clase
   de color propia: heredan la del panel. Fijarles un color aquí rompe esa
   herencia y las deja en tinta oscura sobre fondo oscuro. */
:where(.reveal) :where(p) {
  color: var(--ink2);
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.reveal p {
  font-weight: 500;
  line-height: 1.62;
  text-wrap: pretty;
}

/* ── Background ───────────────────────────────────────────────────────────
   The deck's two floating blobs are replaced by the site's mesh gradient and
   grid overlay, so a slide and a page section share the same ground. */
.blob-1,
.blob-2 {
  display: none !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 8% 2%, rgba(91, 141, 239, 0.22), transparent 62%),
    radial-gradient(50% 42% at 92% 0%, rgba(139, 124, 240, 0.22), transparent 64%),
    radial-gradient(58% 50% at 74% 88%, rgba(242, 112, 79, 0.14), transparent 62%),
    var(--bg);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(20, 22, 50, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 50, 0.032) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ── Components ───────────────────────────────────────────────────────────
   The deck's own utility classes, re-pointed at the site's tokens. */

.brand-gradient {
  background: linear-gradient(135deg, var(--violet), var(--coral));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Eyebrow pill. The site uses an uppercase coral label, not a violet chip. */
.brand-badge {
  background: rgba(242, 112, 79, 0.1);
  color: var(--coral);
  border: 1px solid rgba(242, 112, 79, 0.22);
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

.icon-container {
  background: linear-gradient(150deg, var(--blue), var(--violet));
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(91, 141, 239, 0.28);
}
.icon-container svg {
  color: #fff;
}

/* ── Tables ───────────────────────────────────────────────────────────────
   Matches .doc-tbl on the site: no heavy borders, uppercase muted headers. */
/* Mismo criterio que en los títulos: los colores van con especificidad cero
   para que una tabla dentro de un panel oscuro pueda seguir usando sus
   propias utilidades de color sin que este tema se las pise. */
:where(.reveal) :where(table) {
  background: var(--card);
}
:where(.reveal) :where(th) {
  color: var(--muted);
}
:where(.reveal) :where(td) {
  color: var(--ink2);
}

.reveal table {
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.reveal th {
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.reveal td {
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.reveal tr:last-child td {
  border-bottom: 0;
}

/* ── Calls to action ──────────────────────────────────────────────────────
   Coral primary and navy secondary, the same pair the site uses. */
.reveal a.btn-primary,
.reveal .cta-primary,
.reveal a[href*='register'] {
  background: var(--coral);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  transition: transform 0.2s, box-shadow 0.25s;
}
.reveal a.btn-primary:hover,
.reveal .cta-primary:hover,
.reveal a[href*='register']:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(242, 112, 79, 0.38);
  color: #fff;
}

.reveal a {
  color: var(--violet);
}
.reveal a:hover {
  color: var(--coral);
}

/* Dark panels adopt the site's near-black navy rather than Tailwind slate. */
.reveal .bg-slate-900,
.reveal .bg-slate-800 {
  background-color: var(--dark) !important;
}

/* Reveal's progress bar and controls follow the accent colour. */
.reveal .progress {
  color: var(--coral);
}
.reveal .controls {
  color: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .reveal a.btn-primary,
  .reveal .cta-primary {
    transition: none;
  }
  .glass-card:hover {
    transform: none;
  }
}
