/* ============================================================
   krowdy — Tema reveal.js
   Identidad extraída de Template_krowdy.pptx
   Paleta: coral #F26F41 · ámbar #FFC107 · charcoal #2C2C2C
           slate #475569 · borde #E2E8F0 · indigo #4F46E5
   Tipografía: Plus Jakarta Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --k-coral:   #F26F41;
  --k-amber:   #FFC107;
  --k-charcoal:#2C2C2C;
  --k-slate:   #475569;   /* cuerpo */
  --k-slate-2: #64748B;   /* cuerpo suave */
  --k-ink:     #1E293B;   /* títulos */
  --k-border:  #E2E8F0;
  --k-border-2:#CBD5E1;
  --k-bg-soft: #F8FAFC;
  --k-indigo:  #4F46E5;
  --k-white:   #FFFFFF;
}

/* ---------- base ---------- */
.reveal {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 32px;
  color: var(--k-slate);
  font-weight: 400;
}
.reveal .slides { text-align: left; }
.reveal .slides section {
  padding: 64px 72px 56px 72px;
  height: 100%;
  box-sizing: border-box;
}

/* Barra tricolor superior (firma krowdy) */
.reveal .slides section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg,
      var(--k-coral) 0 33.33%,
      var(--k-amber) 33.33% 66.66%,
      var(--k-charcoal) 66.66% 100%);
  z-index: 20;
}

/* ---------- tipografía ---------- */
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--k-ink);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em 0;
  text-transform: none;
}
.reveal h1 { font-size: 2.15em; }
.reveal h2 { font-size: 1.55em; }
.reveal h3 { font-size: 1.05em; font-weight: 700; }
.reveal p  { line-height: 1.45; margin: 0 0 0.6em 0; }
.reveal strong { color: var(--k-ink); font-weight: 700; }
.reveal em { color: var(--k-slate); }
.reveal a { color: var(--k-indigo); text-decoration: none; }

/* Kicker / eyebrow */
.reveal .kicker {
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--k-coral);
  margin-bottom: 0.8em;
  display: block;
}

/* Acentos de color utilitarios */
.reveal .coral  { color: var(--k-coral); }
.reveal .amber  { color: #E0A800; }
.reveal .indigo { color: var(--k-indigo); }
.reveal .muted  { color: var(--k-slate-2); }

/* ---------- PORTADA ---------- */
.reveal section.cover { display: flex; flex-direction: column; justify-content: center; }
.reveal section.cover .kicker { color: var(--k-coral); font-size: 0.6em; }
.reveal section.cover h1 { font-size: 1.95em; margin-bottom: 0.35em; }
.reveal section.cover .subtitle {
  font-size: 0.95em; color: var(--k-slate); max-width: 24em; line-height: 1.5;
}
.reveal section.cover .instructor {
  margin-top: 1.6em; font-size: 0.72em; color: var(--k-slate-2);
}
.reveal section.cover .instructor strong { color: var(--k-ink); }

/* ---------- SEPARADOR DE MÓDULO ---------- */
.reveal section.divider {
  background: var(--k-charcoal);
  display: flex; flex-direction: column; justify-content: center;
}
.reveal section.divider::before { opacity: 1; } /* barra sigue visible */
.reveal section.divider h2,
.reveal section.divider h1 { color: var(--k-white); }
.reveal section.divider .kicker { color: var(--k-amber); }
.reveal section.divider p { color: #CBD5E1; max-width: 26em; }
.reveal section.divider .block-num {
  font-size: 5em; font-weight: 800; color: rgba(255,255,255,0.08);
  line-height: 1; margin-bottom: -0.1em;
}

/* ---------- CARD OSCURA (cita/ancla) ---------- */
.reveal .darkcard {
  background: var(--k-charcoal);
  color: #E5E7EB;
  border-radius: 22px;
  padding: 44px 52px;
  font-size: 1.05em;
  line-height: 1.5;
}
.reveal .darkcard .q { font-size: 1.15em; font-weight: 500; font-style: italic; color: #fff; }
.reveal .darkcard .attr { margin-top: 0.8em; font-size: 0.7em; color: #94A3B8; font-style: normal; }

/* ---------- COMPARATIVA A/B (SQL vs GRAFO) ---------- */
.reveal .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 0.5em; }
.reveal .compare .col {
  border: 1.5px solid var(--k-border);
  border-radius: 18px;
  padding: 26px 28px;
  background: var(--k-white);
}
.reveal .compare .col.pain   { border-color: var(--k-border-2); background: var(--k-bg-soft); }
.reveal .compare .col.win    { border-color: var(--k-coral); box-shadow: 0 8px 30px -18px rgba(242,111,65,0.55); }
.reveal .compare .col h3 { display: flex; align-items: center; gap: 0.4em; margin-bottom: 0.5em; }
.reveal .compare .col .tag {
  font-size: 0.5em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.reveal .compare .col.pain .tag { background: #E2E8F0; color: #475569; }
.reveal .compare .col.win  .tag { background: var(--k-coral); color: #fff; }
.reveal .compare pre { margin: 0.4em 0 0 0; box-shadow: none; width: 100%; }

/* ---------- CÓDIGO ---------- */
.reveal pre {
  font-size: 0.5em; line-height: 1.4; border-radius: 12px;
  box-shadow: 0 6px 24px -14px rgba(0,0,0,0.35);
  background: #1E293B;
}
.reveal pre code {
  font-family: 'JetBrains Mono', monospace;
  padding: 18px 20px; border-radius: 12px; max-height: none;
  color: #E2E8F0;            /* texto claro por defecto (Cypher no se resalta) */
  background: #1E293B;
}
/* tokens legibles para lenguajes sin resaltado (p.ej. Cypher) */
.reveal pre code:not(.hljs) { color: #E2E8F0; }

/* ---------- LISTA CON ICONO LATERAL ---------- */
.reveal ul.krowdy, .reveal ol.krowdy { list-style: none; margin: 0.4em 0 0 0; }
.reveal ul.krowdy li, .reveal ol.krowdy li {
  position: relative; padding: 0 0 0.9em 1.8em; line-height: 1.4;
}
.reveal ul.krowdy li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 12px; height: 12px; border-radius: 4px; background: var(--k-coral);
}
.reveal ol.krowdy { counter-reset: k; }
.reveal ol.krowdy li::before {
  counter-increment: k; content: counter(k);
  position: absolute; left: 0; top: 0.05em;
  width: 1.3em; height: 1.3em; border-radius: 8px;
  background: var(--k-charcoal); color: #fff;
  font-size: 0.7em; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- 3 PILARES ---------- */
.reveal .pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 0.6em; }
.reveal .pillars .p {
  border: 1.5px solid var(--k-border); border-radius: 18px; padding: 26px 24px; background: #fff;
}
.reveal .pillars .p .n {
  width: 44px; height: 44px; border-radius: 12px; background: var(--k-bg-soft);
  border: 1.5px solid var(--k-border); display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--k-coral); font-size: 0.9em; margin-bottom: 0.6em;
}
.reveal .pillars .p h3 { margin-bottom: 0.3em; }
.reveal .pillars .p p { font-size: 0.72em; color: var(--k-slate); margin: 0; }

/* ---------- CHIP / badge de LAB, DEMO ---------- */
.reveal .chip {
  display: inline-block; font-size: 0.55em; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 999px; vertical-align: middle;
}
.reveal .chip.lab  { background: #FEF3C7; color: #B45309; }
.reveal .chip.demo { background: #E0E7FF; color: #4338CA; }
.reveal .chip.teoria { background: #F1F5F9; color: #475569; }

/* ---------- pie / numeración ---------- */
.reveal .slide-number { color: var(--k-slate-2); background: transparent; font-size: 16px; }
.reveal .footer {
  position: absolute; bottom: 22px; left: 72px; right: 72px;
  font-size: 0.42em; color: var(--k-slate-2); letter-spacing: 0.04em;
  display: flex; justify-content: space-between; align-items: center;
}

/* ---------- callout inline ---------- */
.reveal .callout {
  border-left: 4px solid var(--k-coral); background: var(--k-bg-soft);
  padding: 16px 22px; border-radius: 0 12px 12px 0; font-size: 0.8em; margin-top: 0.6em;
}

/* utilidades layout */
.reveal .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.reveal .center { text-align: center; }
.reveal .vcenter { display: flex; flex-direction: column; justify-content: center; height: 100%; }