/* ─────────────────────────────────────────────────────────────
   Conferencia "Flujo de efectivo en tiempos de la IA"
   Sistema de diseño — financiero moderno, sobrio
   ───────────────────────────────────────────────────────────── */

:root {
  /* Paleta */
  --c-primary: #0A2540;     /* azul profundo */
  --c-secondary: #00D4A0;   /* verde IA */
  --c-accent: #F5A623;      /* ámbar alertas */
  --c-bg: #FFFFFF;
  --c-bg-soft: #F7F9FC;
  --c-bg-dark: #0F1729;
  --c-ink: #1A1A1A;
  --c-ink-soft: #6B7280;
  --c-line: #E5E9F0;
  --c-line-soft: #EEF1F6;

  /* Fuentes */
  --f-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala */
  --scale: 1;
}

* { box-sizing: border-box; }

section.slide {
  font-family: var(--f-body);
  color: var(--c-ink);
  background: var(--c-bg);
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-feature-settings: "ss01", "cv11", "tnum" 1;
}

/* Fondo oscuro alterno */
section.slide.dark {
  background: var(--c-bg-dark);
  color: #E8EEF7;
}
section.slide.dark .ink-soft { color: rgba(232,238,247,0.55); }
section.slide.dark .line { background: rgba(255,255,255,0.08); }
section.slide.dark .card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}

/* Tipografía */
.display {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
}
.heading {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.12;
}
.eyebrow {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.eyebrow .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-secondary);
  margin-right: 14px;
  vertical-align: middle;
  transform: translateY(-2px);
}
.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; }
.ink-soft { color: var(--c-ink-soft); }
.ink-primary { color: var(--c-primary); }
.ink-secondary { color: var(--c-secondary); }
.ink-accent { color: var(--c-accent); }

/* Layout */
.slide-padded {
  padding: 96px 120px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--c-ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.slide-header .brand-mark {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600;
}
.slide-header .brand-mark .glyph {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary) 50%, var(--c-secondary) 50%, var(--c-secondary) 100%);
}
.slide-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--c-ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.slide-footer .pagenum {
  font-feature-settings: "tnum" 1;
}

/* Tarjetas */
.card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 1px 0 rgba(10,37,64,0.02), 0 12px 32px -16px rgba(10,37,64,0.10);
}
.card.flush { padding: 0; overflow: hidden; }
.card-eyebrow {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* Líneas */
.rule {
  height: 1px;
  background: var(--c-line);
  width: 100%;
}

/* Pills / etiquetas */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.pill.solid {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.pill.secondary {
  background: rgba(0,212,160,0.12);
  border-color: rgba(0,212,160,0.35);
  color: #007a5e;
}
.pill.accent {
  background: rgba(245,166,35,0.12);
  border-color: rgba(245,166,35,0.4);
  color: #8a5a04;
}

/* Tablas */
table.clean {
  width: 100%;
  border-collapse: collapse;
  font-size: 22px;
}
table.clean th, table.clean td {
  padding: 22px 28px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}
table.clean th {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  font-weight: 600;
  border-bottom: 2px solid var(--c-ink);
}
table.clean tr:last-child td { border-bottom: 0; }
table.clean .col-em {
  background: var(--c-bg-soft);
}
table.clean td .num {
  font-family: var(--f-mono);
  font-feature-settings: "tnum" 1;
}

/* Big number */
.big-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 220px;
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-feature-settings: "tnum" 1;
}
.big-num .unit {
  font-size: 96px;
  font-weight: 700;
  vertical-align: top;
}

/* Bloque divider */
.block-divider {
  background: var(--c-primary);
  color: #fff;
}
.block-divider .block-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 440px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.05);
  position: absolute;
  right: 60px;
  bottom: -60px;
  pointer-events: none;
  z-index: 0;
}
.block-divider .slide-padded > * { position: relative; z-index: 1; }
.block-divider .block-tag {
  font-family: var(--f-mono);
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-secondary);
}

/* "Cómo piensa la IA" — bloque técnico */
.tech-bg {
  background: var(--c-bg-dark);
  color: #E8EEF7;
}
.tech-bg .ink-soft { color: rgba(232,238,247,0.55); }

/* Tokens visuales (tokenizador) */
.token {
  display: inline-block;
  padding: 12px 18px;
  margin: 6px 4px;
  border-radius: 10px;
  font-family: var(--f-mono);
  font-size: 32px;
  font-weight: 500;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.token.t-1 { background: rgba(0,212,160,0.18); border-color: rgba(0,212,160,0.45); color: #00D4A0; }
.token.t-2 { background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.45); color: #F5A623; }
.token.t-3 { background: rgba(108,164,255,0.18); border-color: rgba(108,164,255,0.45); color: #6CA4FF; }
.token.t-4 { background: rgba(232,116,225,0.18); border-color: rgba(232,116,225,0.4); color: #E874E1; }
.token.t-5 { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); color: #fff; }

/* Listas tipográficas */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bullet-list li {
  display: flex;
  gap: 22px;
  font-size: 26px;
  line-height: 1.4;
}
.bullet-list li .marker {
  flex-shrink: 0;
  width: 28px;
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-secondary);
  padding-top: 8px;
  letter-spacing: 0.08em;
}

/* Iconos minimal — círculo con glifo SVG */
.glyph-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--c-bg-soft);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line);
  color: var(--c-primary);
}
.glyph-icon.solid {
  background: var(--c-primary);
  color: var(--c-secondary);
  border-color: var(--c-primary);
}

/* Brand mark / logotipo */
.brand-glyph {
  width: 64px; height: 64px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-glyph div:nth-child(1) { background: var(--c-primary); }
.brand-glyph div:nth-child(2) { background: var(--c-secondary); }
.brand-glyph div:nth-child(3) { background: var(--c-accent); }
.brand-glyph div:nth-child(4) { background: var(--c-bg-dark); }

/* Utilidades */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; }
.gap-64 { gap: 64px; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.grid { display: grid; }
.mt-auto { margin-top: auto; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }

/* Editorial cover */
.cover {
  background: var(--c-bg-dark);
  color: #fff;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  height: 100%;
}
.cover .left {
  padding: 96px 96px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cover .right {
  position: relative;
  background:
    linear-gradient(180deg, rgba(15,23,41,0) 0%, rgba(15,23,41,0.55) 100%),
    var(--c-primary);
  overflow: hidden;
}
.cover .right .marbles {
  position: absolute;
  inset: 0;
}

/* Grid background lines for tech slides */
.gridbg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.gridbg.light {
  background-image:
    linear-gradient(rgba(10,37,64,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,37,64,0.04) 1px, transparent 1px);
}

/* Stat tiles */
.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat .num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-primary);
  font-feature-settings: "tnum" 1;
}
.stat .num .unit { font-size: 48px; }
.stat .lbl {
  font-family: var(--f-body);
  font-size: 18px;
  color: var(--c-ink-soft);
  line-height: 1.3;
}

/* Quote */
.quote {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 72px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Annotation labels */
.anno {
  font-family: var(--f-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-ink-soft);
}
section.slide.dark .anno, .tech-bg .anno {
  color: rgba(232,238,247,0.55);
}

/* Disclaimer */
.disclaimer {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
}
