/* ============================================================
   Persistencia Digital · sistema de diseño de las experiencias
   Un solo lugar para tokens y componentes: si algo cambia aquí,
   cambia en las cinco experiencias a la vez.
   ============================================================ */

:root {
  /* marca */
  --cyan: #4deeea;
  --blue: #3d5afe;
  --purple: #7b4de0;
  --magenta: #d94de8;
  --grad: linear-gradient(90deg, var(--cyan), var(--blue) 38%, var(--purple) 68%, var(--magenta) 100%);

  /* superficies */
  --bg: #060609;
  --bg-elev: #0c0c14;
  --surface: rgba(255, 255, 255, 0.035);
  --glass: rgba(8, 8, 14, 0.72);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* texto (contraste AA sobre --bg) */
  --fg: #f4f5fa;
  --fg-muted: #a8adc0;
  --fg-dim: #6f7488;

  /* ritmo de 8 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
  --radius: 20px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* alturas de toque mínimas */
  --tap: 44px;
}

/* ---------- base ---------- */
.pd body, body.pd {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.pd ::selection { background: rgba(77, 238, 234, 0.28); }
.pd :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
.pd button, .pd a { font-family: inherit; }
.pd button { cursor: pointer; }

/* ---------- barra de marca ---------- */
.pd-brand-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad); z-index: 100; pointer-events: none;
}

/* ---------- píldoras / chips ---------- */
.pd-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 999px; padding: 10px 18px;
  font-size: 14px; font-weight: 500; color: var(--fg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  min-height: var(--tap);
}
.pd-chip--sm { padding: 8px 14px; font-size: 12.5px; color: var(--fg-muted); min-height: 36px; }
.pd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex-shrink: 0; }

/* ---------- botones ---------- */
.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--tap); padding: 12px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; color: var(--fg);
  border: 1px solid var(--border-strong); background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease), filter 0.2s var(--ease);
  text-decoration: none;
}
.pd-btn:hover { border-color: rgba(77, 238, 234, 0.55); background: rgba(77, 238, 234, 0.08); transform: translateY(-1px); }
.pd-btn--primary {
  background: var(--grad); color: #06060c; font-weight: 700; border-color: transparent;
  min-height: 52px; padding: 15px 30px; font-size: 15.5px;
}
.pd-btn--primary:hover { filter: brightness(1.1); transform: translateY(-2px); background: var(--grad); }
.pd-btn--activo { border-color: var(--cyan); color: var(--cyan); background: rgba(77, 238, 234, 0.10); }
.pd-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- barra de opciones (shows, modelos, modos) ---------- */
.pd-bar {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  pointer-events: auto; padding: 0 var(--s2);
}

/* ---------- superposiciones de pantalla ---------- */
.pd-overlay {
  position: fixed; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center; pointer-events: none;
}
.pd-overlay > * { pointer-events: auto; }
.pd-overlay--top { top: 14px; }
.pd-overlay--bottom { bottom: 18px; }

/* ---------- volver ---------- */
.pd-back {
  position: fixed; top: 14px; left: 14px; z-index: 25;
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
  background: var(--glass); border: 1px solid var(--border);
  color: var(--fg-muted); font-size: 13.5px; font-weight: 500;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pd-back:hover { border-color: var(--border-strong); color: var(--fg); }
.pd-back svg { width: 15px; height: 15px; }

/* ---------- título de experiencia ---------- */
.pd-titulo {
  position: fixed; top: 68px; left: 0; right: 0; z-index: 20;
  text-align: center; pointer-events: none; padding: 0 var(--s3);
}
.pd-titulo h1 {
  font-size: clamp(17px, 2.3vw, 23px); font-weight: 700; color: var(--fg);
  letter-spacing: -0.015em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9);
}
.pd-titulo p {
  margin-top: 5px; font-size: 13.5px; color: var(--fg-muted);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

/* ---------- portada de inicio (visores AR) ---------- */
.pd-portada {
  position: fixed; inset: 0; z-index: 40;
  background: radial-gradient(60% 60% at 50% 40%, rgba(61, 90, 254, 0.14), transparent 70%), rgba(6, 6, 9, 0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3); text-align: center; padding: var(--s4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pd-portada h1 {
  font-size: clamp(22px, 5.5vw, 30px); font-weight: 750; letter-spacing: -0.025em;
  max-width: 17ch; line-height: 1.15; color: var(--fg);
}
.pd-portada p { color: var(--fg-muted); font-size: 15px; max-width: 34ch; line-height: 1.55; }
.pd-portada.oculto { display: none; }

/* ---------- cargador ---------- */
.pd-loader {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s3); color: var(--fg-muted); font-size: 14px; transition: opacity 0.6s var(--ease);
}
.pd-loader.hide, .pd-loader.done { opacity: 0; pointer-events: none; }
.pd-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.10); border-top-color: var(--cyan);
  animation: pd-spin 0.9s linear infinite;
}
@keyframes pd-spin { to { transform: rotate(360deg); } }
.pd-progreso { width: min(260px, 62vw); height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.pd-progreso i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 0.25s var(--ease); }

/* ---------- navegación por miniaturas (entre experiencias) ---------- */
.pd-minis { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pd-mini {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: 14px; text-decoration: none;
  background: var(--glass); border: 1px solid var(--border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  min-height: var(--tap);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}
.pd-mini:hover { border-color: rgba(77, 238, 234, 0.55); transform: translateY(-2px); background: rgba(77, 238, 234, 0.06); }
.pd-mini:hover .pd-mini-img img { transform: scale(1.08); }
.pd-mini-img {
  width: 52px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0;
  background: #0a0a12; border: 1px solid var(--border);
}
.pd-mini-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 0.4s var(--ease); }
.pd-mini-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-mini-txt b { font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.005em; white-space: nowrap; }
.pd-mini-txt span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim);
  white-space: nowrap;
}
.pd-mini--activa { border-color: var(--cyan); background: rgba(77, 238, 234, 0.10); }
.pd-mini--activa .pd-mini-txt b { color: var(--cyan); }

/* miniaturas compactas, para el celular */
.pd-minis--compacta .pd-mini { padding: 5px 12px 5px 5px; border-radius: 12px; }
.pd-minis--compacta .pd-mini-img { width: 42px; height: 28px; border-radius: 8px; }
.pd-minis--compacta .pd-mini-txt b { font-size: 12px; }
.pd-minis--compacta .pd-mini-txt span { display: none; }

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .pd *, .pd *::before, .pd *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}