/* ============================================================
   base.css — Reset, variables de marca, tipografía, fondo
   ============================================================ */

:root {
  /* Marca */
  --bg:            #0A0F1C;
  --bg-soft:       #0e1526;
  --cyan:          #00D4FF;
  --violet:        #8B5CF6;
  --white:         #FFFFFF;

  /* Texto */
  --text:          #EAF1FF;
  --text-dim:      #9FB0CE;
  --text-faint:    #6b7a99;

  /* Superficies (glass) */
  --glass:         rgba(255, 255, 255, 0.04);
  --glass-strong:  rgba(255, 255, 255, 0.07);
  --stroke:        rgba(255, 255, 255, 0.10);
  --stroke-soft:   rgba(255, 255, 255, 0.06);

  /* Gradientes */
  --grad-main:     linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
  --grad-soft:     linear-gradient(135deg, rgba(0,212,255,.16), rgba(139,92,246,.16));
  --grad-text:     linear-gradient(120deg, #6fe9ff 0%, #b79bff 100%);

  /* Radios */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Sombras / glow */
  --shadow:        0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-soft:   0 10px 30px rgba(0, 0, 0, 0.35);
  --glow-cyan:     0 0 40px rgba(0, 212, 255, 0.35);
  --glow-violet:   0 0 40px rgba(139, 92, 246, 0.35);

  /* Layout */
  --pad: clamp(1.4rem, 4vw, 4.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

h1, h2, h3, h4, .display {
  font-family: "Sora", "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

button { font-family: inherit; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Texto con gradiente */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Conmutación de idioma ----
   Cada texto bilingüe se emite con dos <span class="lx" data-l="es|en">.
   Solo se muestra el que coincide con body[data-lang]. */
.lx { display: none; }
body[data-lang="es"] .lx[data-l="es"],
body[data-lang="en"] .lx[data-l="en"] { display: inline; }

/* Marcado por atributo (UI: menús, botones) */
[data-lang-en] { display: none; }
body[data-lang="en"] [data-lang-en] { display: inline; }
body[data-lang="en"] [data-lang-es] { display: none; }

/* ---- Modo exportación: oculta cromo y congela animaciones ---- */
body.is-exporting .controls,
body.is-exporting .progress,
body.is-exporting .sidebar,
body.is-exporting .sidebar__scrim { opacity: 0 !important; visibility: hidden !important; }
body.is-exporting .slide,
body.is-exporting .slide *,
body.is-exporting .orb { animation: none !important; transition: none !important; }

/* html2canvas no soporta background-clip:text → forzamos color sólido
   durante la captura para que los títulos con gradiente no salgan vacíos. */
body.is-exporting .grad-text { -webkit-text-fill-color: #EAF1FF !important; color: #EAF1FF !important; background: none !important; }
body.is-exporting .slide__title--q { -webkit-text-fill-color: var(--cyan) !important; color: var(--cyan) !important; background: none !important; }

/* ---- Fondo decorativo (orbes con glow) ---- */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.orb--cyan {
  width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(0,212,255,.55), transparent 70%);
  top: -14vw; left: -10vw;
  animation: float1 18s var(--ease) infinite alternate;
}
.orb--violet {
  width: 42vw; height: 42vw;
  background: radial-gradient(circle, rgba(139,92,246,.5), transparent 70%);
  bottom: -16vw; right: -8vw;
  animation: float2 22s var(--ease) infinite alternate;
}
.orb--deep {
  width: 30vw; height: 30vw;
  background: radial-gradient(circle, rgba(60,120,255,.28), transparent 70%);
  top: 40%; left: 55%;
  animation: float1 26s var(--ease) infinite alternate;
}
@keyframes float1 { to { transform: translate(6vw, 5vh) scale(1.1); } }
@keyframes float2 { to { transform: translate(-5vw, -4vh) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* Scrollbar sutil dentro de slides que lo necesiten */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 20px; }
::-webkit-scrollbar-track { background: transparent; }