/* ============================================================
   DOSSIER "Cómo se construyó VOKLY" — one-pager técnico.
   Reutiliza los tokens del sistema (main.css) + acento cyan y
   glassmorphism (como la landing del workshop). Página pública
   noindex, dark single-theme (el mundo de marca de Vokly).
   ============================================================ */

:root {
  --ds-cyan:      #22D3EE;
  --ds-cyan-dim:  rgba(34, 211, 238, 0.12);
  --ds-cyan-glow: rgba(34, 211, 238, 0.35);
  --ds-line:      rgba(255, 255, 255, 0.10);
  --ds-ink-soft:  rgba(237, 237, 242, 0.78);
}

.ds-body { background-color: var(--bg-base); overflow-x: hidden; }

/* Glows ambientales */
.ds-glow {
  position: fixed; width: 520px; height: 520px; border-radius: 50%;
  filter: blur(140px); opacity: 0.4; pointer-events: none; z-index: 0;
}
.ds-glow--purple { top: -160px; left: -140px; background: var(--color-purple); }
.ds-glow--cyan   { bottom: -180px; right: -160px; background: var(--ds-cyan); opacity: 0.28; }

.ds-main { position: relative; z-index: 1; padding-bottom: 40px; }

/* Glass card base */
.ds-card, .ds-sec, .ds-layer, .ds-stat {
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--ds-line);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---- Tipografía compartida ---- */
.ds-eyebrow, .ds-kicker, .ds-layer__tag, .ds-card__tag, .ds-stat__label {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================ HERO */
.ds-hero { text-align: center; padding: 72px 20px 24px; max-width: 820px; }
.ds-hero__logo { height: 40px; width: auto; margin-bottom: 30px; }

.ds-eyebrow {
  display: inline-block;
  padding: 7px 15px; border-radius: 999px;
  background: var(--ds-cyan-dim); border: 1px solid var(--ds-cyan-glow);
  color: var(--ds-cyan); font-size: 0.74rem;
}
.ds-hero__title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.3rem, 6.5vw, 4rem);
  font-weight: 700; line-height: 1.06;
  text-wrap: balance;
  margin: 22px 0 20px; color: #fff;
}
.ds-hl { color: var(--color-yellow); text-shadow: 0 0 34px var(--color-yellow-glow); white-space: nowrap; }
.ds-hero__lead {
  font-size: 1.1rem; line-height: 1.65; color: var(--ds-ink-soft);
  max-width: 620px; margin: 0 auto;
}
.ds-hero__lead strong { color: #fff; }

/* ============================================================ STATS */
.ds-stats {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  max-width: 960px; padding: 32px 20px;
}
.ds-stat { padding: 20px 12px; text-align: center; }
.ds-stat__num {
  display: block;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--color-yellow); line-height: 1;
  text-shadow: 0 0 20px var(--color-yellow-glow);
  font-variant-numeric: tabular-nums;
}
.ds-stat__label { display: block; margin-top: 9px; font-size: 0.62rem; color: var(--ds-ink-soft); }

/* ============================================================ SECTIONS */
.ds-section { max-width: 980px; padding: 52px 20px 8px; }
.ds-kicker { display: block; color: var(--color-purple); font-size: 0.78rem; margin-bottom: 12px; }
.ds-kicker--cyan { color: var(--ds-cyan); }
.ds-h2 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.3rem); color: #fff;
  text-wrap: balance; margin: 0 0 16px; line-height: 1.15;
}
.ds-section-lead { font-size: 1.05rem; line-height: 1.65; color: var(--ds-ink-soft); max-width: 720px; margin: 0 0 28px; }
.ds-section-lead strong { color: #fff; }
.ds-center { margin-left: auto; margin-right: auto; text-align: center; }

/* Dos columnas (texto + card) */
.ds-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: start; margin-bottom: 24px; }
.ds-prose p { font-size: 1.02rem; line-height: 1.7; color: var(--ds-ink-soft); margin: 0 0 16px; }
.ds-prose strong { color: #fff; }

/* Card genérica */
.ds-card { padding: 24px; }
.ds-card--accent { border-color: var(--color-purple-glow); box-shadow: 0 0 40px rgba(123,47,255,0.12); }
.ds-card__tag {
  display: inline-block; margin-bottom: 12px; font-size: 0.68rem;
  color: var(--ds-cyan);
  padding: 4px 10px; border-radius: 6px; background: var(--ds-cyan-dim);
}
.ds-card__title { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; color: #fff; margin: 0 0 10px; }
.ds-card p { font-size: 0.96rem; line-height: 1.55; color: var(--ds-ink-soft); margin: 0; }
.ds-card__foot { margin-top: 14px !important; font-size: 0.9rem !important; }

.ds-taglist { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.ds-taglist li {
  font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;
  padding: 6px 11px; border-radius: 8px;
  background: var(--color-yellow-dim); color: var(--color-yellow);
  border: 1px solid var(--color-yellow-glow);
}

.ds-cards { display: grid; gap: 16px; }
.ds-cards--3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================ STACK */
.ds-stack { display: flex; flex-direction: column; gap: 12px; }
.ds-layer { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 20px; padding: 18px 22px; }
.ds-layer__tag { color: var(--ds-cyan); font-size: 0.74rem; }
.ds-layer__body { font-size: 0.98rem; line-height: 1.55; color: var(--ds-ink-soft); }
.ds-layer__body strong { color: #fff; }
.ds-layer__body code, .ds-sec code, .ds-prose code {
  font-family: 'JetBrains Mono', monospace; font-size: 0.85em;
  background: rgba(123,47,255,0.16); color: #cdb6ff;
  padding: 1px 6px; border-radius: 5px;
}

/* ============================================================ SEGURIDAD */
.ds-sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ds-sec { padding: 20px 22px; border-left: 3px solid var(--ds-cyan); }
.ds-sec__title { font-family: 'Space Grotesk', sans-serif; font-size: 1.06rem; color: #fff; margin: 0 0 8px; }
.ds-sec p { font-size: 0.94rem; line-height: 1.55; color: var(--ds-ink-soft); margin: 0; }
.ds-sec em { color: var(--ds-cyan); font-style: normal; }

/* ============================================================ CHECK LIST */
.ds-check { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ds-check li {
  position: relative; padding-left: 30px;
  font-size: 0.98rem; line-height: 1.5; color: var(--ds-ink-soft);
}
.ds-check strong { color: #fff; }
.ds-check li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-yellow); box-shadow: 0 0 12px var(--color-yellow-glow);
}
.ds-check li::after {
  content: ""; position: absolute; left: 6px; top: 7px;
  width: 5px; height: 9px; border: solid #090A10; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ============================================================ CIERRE / FOOTER */
.ds-closing { text-align: center; padding-top: 60px; }
.ds-footer { text-align: center; padding: 56px 20px 16px; border-top: 1px solid var(--ds-line); margin-top: 48px; }
.ds-footer__logo { height: 30px; opacity: 0.85; }
.ds-footer__tag {
  margin: 12px 0 4px; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: 0.14em; color: var(--color-yellow); font-size: 0.9rem;
}
.ds-footer__meta { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--ds-ink-soft); margin: 0; }

/* ============================================================ RESPONSIVE */
@media (max-width: 780px) {
  .ds-stats { grid-template-columns: repeat(3, 1fr); }
  .ds-cols { grid-template-columns: 1fr; }
  .ds-cards--3 { grid-template-columns: 1fr; }
  .ds-sec-grid { grid-template-columns: 1fr; }
  .ds-layer { grid-template-columns: 1fr; gap: 8px; }
  .ds-hero { padding-top: 52px; }
}
@media (max-width: 420px) {
  .ds-stats { grid-template-columns: repeat(2, 1fr); }
}