:root {
  /* Paleta estilo PowerPoint, pero en NEGRO */
  --pp-orange: #1f1f1f;        /* acento principal (barra, selección) */
  --pp-orange-dark: #000000;
  --pp-orange-soft: #ececec;   /* tinte de selección claro */
  --danger: #e5484d;
  --canvas: #e6e6e6;      /* área gris detrás de la diapositiva */
  --panel: #f3f2f1;       /* paneles laterales */
  --panel-2: #ffffff;     /* inputs / diapositiva */
  --border: #d2d0ce;
  --border-soft: #e1dfdd;
  --text: #252423;
  --muted: #605e5c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--canvas);
  color: var(--text);
  font-family: "Calibri", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  background: var(--pp-orange);
  color: #fff;
}
.brand { display: flex; align-items: center; gap: 2px; font-weight: 600; font-size: 16px; letter-spacing: .2px; }
.home-btn { background: transparent; border: none; cursor: pointer; padding: 2px; border-radius: 6px; display: flex; align-items: center; }
.home-btn img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.home-btn:hover { background: rgba(255,255,255,.15); }
.logo {
  color: var(--pp-orange);
  background: #fff;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 4px;
  font-size: 13px;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.sep { width: 1px; height: 24px; background: rgba(255,255,255,.35); margin: 0 4px; }

/* ---------- Botones ---------- */
.btn {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: .12s;
}
.btn:hover { background: #faf9f8; border-color: #b3b0ad; }
.btn-primary { background: #fff; border-color: #fff; color: var(--pp-orange); font-weight: 600; }
.btn-primary:hover { background: #f3e3de; }
/* Botones dentro de la barra naranja */
.topbar .btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.15); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-small { padding: 4px 10px; font-size: 12px; }
.btn-block { width: 100%; margin-top: 8px; }

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  height: calc(100vh - 44px);
}
.panel { background: var(--panel); overflow-y: auto; }
.panel-left { border-right: 1px solid var(--border); }
.panel-right { border-left: 1px solid var(--border); padding: 16px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px;
}
.panel-head h2 { margin: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Lista de páginas ---------- */
.page-list { list-style: none; margin: 0; padding: 4px 8px 10px; border-bottom: 1px solid var(--border); }
.page-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 6px; border: 1px solid transparent; border-radius: 4px;
  cursor: pointer; margin-bottom: 2px;
}
.page-row:hover { background: #eae9e8; }
.page-row.active { background: var(--pp-orange-soft); border-color: var(--pp-orange); }
.page-thumb {
  width: 38px; height: 22px; border-radius: 3px; border: 1px solid var(--border);
  flex-shrink: 0; overflow: hidden; position: relative; background: #fff;
}
.page-row .p-idx { font-size: 12px; color: var(--muted); flex: 1; }
.page-row .p-del { color: var(--muted); font-size: 12px; padding: 2px 5px; border-radius: 3px; }
.page-row .p-del:hover { background: var(--danger); color: #fff; }

/* ---------- Lista de elementos ---------- */
.item-list { list-style: none; margin: 0; padding: 4px 8px; }
.item-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 2px;
  font-size: 12px;
}
.item-row:hover { background: #eae9e8; }
.item-row.active { background: var(--pp-orange-soft); border-color: var(--pp-orange); }
.item-row .idx { font-size: 11px; color: var(--muted); width: 18px; text-align: center; }
.item-row.child { margin-left: 16px; background: #fbfbfb; }
.item-row.child .idx { color: var(--pp-orange); }
.item-row .li-thumb { width: 26px; height: 18px; object-fit: cover; border-radius: 2px; border: 1px solid var(--border); flex-shrink: 0; }
.item-row .li-edit { flex: 1; min-width: 0; font: inherit; border: 1px solid var(--pp-orange); border-radius: 3px; padding: 1px 5px; background: #fff; color: var(--text); }
.item-row .li-edit:focus { outline: none; }
.item-row .txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-row .move { color: var(--muted); font-size: 12px; padding: 2px 4px; border-radius: 3px; }
.item-row .move:hover { background: var(--border); color: var(--text); }

/* ---------- Escenario / diapositiva ---------- */
.stage-wrap {
  display: flex; flex-direction: column;
  padding: 16px; gap: 12px;
  background: var(--canvas);
  overflow: hidden;
  min-height: 0;
}
.stage-area {
  flex: 1; min-height: 0; width: 100%;
  position: relative;
}
.stage {
  position: absolute; inset: 0; margin: auto;
  aspect-ratio: 16 / 9;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  border: 1px solid #c8c6c4;
}
.stage-inner { position: absolute; inset: 0; }
.hint { color: var(--muted); font-size: 12px; margin: 0; text-align: center; }

/* ---------- Línea de tiempo (multi-pista) ---------- */
.timeline {
  width: 100%; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px;
}
.tl-top { display: flex; align-items: center; gap: 12px; }
.tl-spacer { flex: 1; }
.tl-help { font-size: 11px; color: var(--muted); }
.tl-btn {
  background: var(--pp-orange); color: #fff; border: none;
  width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
  font-size: 12px; flex-shrink: 0;
}
.tl-btn:hover { background: #000; }
.tl-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 40px; }
.tl-dur { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.tl-total-input {
  width: 56px; text-align: center; font-size: 12px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; background: #fff; color: var(--text);
}
.tl-total-input:focus { outline: none; border-color: var(--pp-orange); }

.tl-body { display: flex; max-height: 180px; overflow-y: auto; border-top: 1px solid var(--border-soft); }
.tl-labels { width: 130px; flex-shrink: 0; }
.tl-tracks { position: relative; flex: 1; }

.tl-lane-label {
  height: 26px; display: flex; align-items: center; padding: 0 8px;
  font-size: 12px; color: var(--text); border-bottom: 1px solid var(--border-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.tl-lane-label.master { font-weight: 600; cursor: default; }
.tl-lane-label.active { background: var(--pp-orange-soft); font-weight: 600; }

.tl-lane {
  position: relative; height: 26px;
  border-bottom: 1px solid var(--border-soft); background: #f6f6f7;
}
.tl-lane.master { background: #e9e9eb; cursor: pointer; }
.tl-lane.active { background: #fff; box-shadow: inset 0 0 0 1px var(--pp-orange-soft); }

.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff2e88; left: 0; z-index: 6; pointer-events: none; box-shadow: 0 0 5px rgba(255,46,136,.9); }

/* Bloques de duración de animación de entrada/salida (arrastrables) */
.tl-anim { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; z-index: 1; cursor: ew-resize; }
.tl-anim:hover { filter: brightness(1.1); }
.tl-anim.in { background: rgba(6,214,160,.35); border: 1px solid rgba(6,214,160,.7); }
.tl-anim.out { background: rgba(229,72,77,.30); border: 1px solid rgba(229,72,77,.65); }

/* Clave (keyframe) en la pista */
.tl-key {
  position: absolute; top: 50%; width: 12px; height: 12px;
  background: #ffd166; border: 1.5px solid #333;
  transform: translate(-50%, -50%) rotate(45deg);
  cursor: grab; z-index: 3;
}
.tl-key:hover { background: #fff; }
.tl-key.sel { background: #ff2e88; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,46,136,.35); }

/* Controles de claves (inspector) */
.key-count { font-size: 12px; color: var(--muted); padding-top: 6px; }
.link-btn { background: none; border: none; color: var(--pp-orange); cursor: pointer; font-size: 12px; padding: 0; text-decoration: underline; }
.kf-val { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* Caja dentro de la diapositiva */
.stage-box {
  position: absolute;
  cursor: grab;
  user-select: none;
}
.stage-box.dragging { cursor: grabbing; }
.box-inner {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.box-text {
  width: 100%;
  padding: 8px 12px;
  line-height: 1.15;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Sin bordes cuando el elemento NO está seleccionado (diapositiva limpia) */

/* Caja seleccionada: borde sólido + tirador */
.stage-box.selected { outline: 2px solid var(--pp-orange); outline-offset: 0; z-index: 5; }
.stage-box .handle {
  position: absolute;
  width: 11px; height: 11px;
  margin: -6px 0 0 -6px;            /* centra el tirador en su punto */
  background: #fff;
  border: 2px solid var(--pp-orange);
  border-radius: 2px;
  display: none;
  z-index: 6;
}
.stage-box.selected .handle { display: block; }
/* Posiciones de los 8 tiradores */
.stage-box .h-nw { left: 0;   top: 0;   cursor: nwse-resize; }
.stage-box .h-n  { left: 50%; top: 0;   cursor: ns-resize; }
.stage-box .h-ne { left: 100%;top: 0;   cursor: nesw-resize; }
.stage-box .h-e  { left: 100%;top: 50%; cursor: ew-resize; }
.stage-box .h-se { left: 100%;top: 100%;cursor: nwse-resize; }
.stage-box .h-s  { left: 50%; top: 100%;cursor: ns-resize; }
.stage-box .h-sw { left: 0;   top: 100%;cursor: nesw-resize; }
.stage-box .h-w  { left: 0;   top: 50%; cursor: ew-resize; }

/* En reproducción no hay guías de edición */
.stage.playing .stage-box { cursor: default; }
.stage.playing .stage-box.selected { outline: none; }
.stage.playing .stage-box .handle { display: none; }

/* ---------- Propiedades ---------- */
.props-empty { color: var(--muted); text-align: center; padding: 30px 10px; line-height: 1.6; }
.group { border: 1px solid var(--border-soft); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; background: #fff; }
.group-title {
  font-size: 12px; color: var(--pp-orange); font-weight: 600; margin-bottom: 10px;
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
}
.group-title::after { content: "▾"; font-size: 10px; color: var(--muted); }
.group.collapsed .group-title { margin-bottom: 0; }
.group.collapsed .group-title::after { content: "▸"; }
.group.collapsed > *:not(.group-title) { display: none; }
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field-row { display: flex; gap: 12px; }
.field-row[hidden] { display: none; }
.field-row .field { flex: 1; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.field input[type="text"], .field textarea, .field select, .field input[type="number"] {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--pp-orange); }
.field textarea { resize: vertical; }
.field input[type="range"] { width: 100%; accent-color: var(--pp-orange); }
.field input[type="color"] {
  width: 100%; height: 34px; padding: 2px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.range-val { font-size: 11px; color: var(--muted); }

.divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.props-global h3 { margin: 0 0 12px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* Imagen dentro de un elemento */
.box-img { width: 100%; height: 100%; display: block; }

/* Título del inspector */
.inspector-title { margin: 0 0 4px; font-size: 15px; }

/* Avisos/tutoriales descartables (con X) */
.hint-box {
  display: flex; align-items: flex-start; gap: 8px;
  background: #f3f2f1; border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 8px 10px; margin: 0 0 14px; font-size: 12px; color: var(--muted);
}
.hint-box span { flex: 1; line-height: 1.4; }
.hint-x {
  background: transparent; border: none; color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0;
}
.hint-x:hover { color: var(--text); }

/* Botón-icono de descarga (barra superior) */
.icon-btn { display: flex; align-items: center; justify-content: center; padding: 7px 9px; }
.icon-btn svg { display: block; }

/* Menú desplegable (por si se reutiliza) */
.menu-wrap { position: relative; }
.caret { padding: 8px 11px; font-size: 12px; }
.more-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); min-width: 190px; z-index: 130; overflow: hidden;
}
.more-menu[hidden] { display: none; }
.more-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; padding: 11px 14px; font-size: 13px; cursor: pointer; color: var(--text);
}
.more-menu button:hover { background: #f0f0f0; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Menú contextual (clic derecho) */
.ctx-menu { position: fixed; z-index: 400; background: #1f1f1f; color: #fff; border: 1px solid #333; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.4); padding: 5px; min-width: 170px; }
.ctx-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: #eee; padding: 9px 12px; font-size: 13px; cursor: pointer; border-radius: 5px; }
.ctx-item:hover { background: rgba(255,255,255,.12); }
.ctx-item.disabled { opacity: .4; cursor: default; }
.ctx-sep { height: 1px; background: #3a3a3a; margin: 4px 6px; }

/* Overlay de exportación de video */
.export-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.export-card {
  background: #fff; border-radius: 10px; padding: 22px 26px;
  width: min(520px, 92vw); text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.export-msg { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.export-prev-wrap { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); }
.export-prev { width: 100%; height: 100%; display: block; object-fit: contain; }
.export-bar { height: 8px; background: #eee; border-radius: 5px; overflow: hidden; }
.export-fill { height: 100%; width: 0; background: var(--pp-orange); transition: width .1s linear; }
.export-note { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* ============ CAJA DE IA (chat + visión) ============ */
.ai-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px; border: none; border-radius: 24px;
  background: var(--pp-orange); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.36); background: #000; }
.ai-fab:active { transform: translateY(0); }
.ai-fab[hidden] { display: none; }
.ai-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 901;
  width: 380px; max-width: calc(100vw - 40px);
  height: min(620px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: #1b1b1b; color: #ececec;
  border: 1px solid #333; border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow: hidden;
}
.ai-panel[hidden] { display: none; }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #111; border-bottom: 1px solid #2a2a2a; }
.ai-title { font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.ai-head-actions { display: flex; gap: 4px; }
.ai-icon-btn { background: transparent; border: none; color: #cfcfcf; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center; }
.ai-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.ai-settings { padding: 12px 14px; background: #161616; border-bottom: 1px solid #2a2a2a; }
.ai-settings[hidden] { display: none; }
.ai-lbl { display: block; font-size: 11px; color: #9a9a9a; margin: 6px 0 4px; text-transform: uppercase; letter-spacing: .4px; }
.ai-inp { width: 100%; padding: 8px 10px; border: 1px solid #3a3a3a; border-radius: 6px; background: #0e0e0e; color: #ececec; font-size: 13px; }
.ai-inp:focus { outline: none; border-color: #666; }
.ai-settings-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ai-link { color: #7db3ff; font-size: 12px; text-decoration: none; }
.ai-link:hover { text-decoration: underline; }
.ai-hint { display: block; margin-top: 8px; color: #7c7c7c; font-size: 11px; }
.ai-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ai-msg.user { align-self: flex-end; background: var(--pp-orange); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.bot  { align-self: flex-start; background: #2a2a2a; color: #ececec; border-bottom-left-radius: 4px; }
.ai-msg.err  { align-self: flex-start; background: #3a1c1e; color: #ff9a9d; border: 1px solid #5a2a2d; }
.ai-msg.sys  { align-self: center; background: transparent; color: #7c7c7c; font-size: 11px; padding: 2px; }
.ai-msg img.ai-msg-img { max-width: 100%; border-radius: 8px; margin-top: 6px; display: block; }
.ai-typing { align-self: flex-start; color: #9a9a9a; font-size: 12px; font-style: italic; }
.ai-attach-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #161616; border-top: 1px solid #2a2a2a; }
.ai-attach-bar[hidden] { display: none; }
.ai-attach-thumb { width: 40px; height: 26px; object-fit: cover; border-radius: 4px; border: 1px solid #3a3a3a; }
.ai-attach-name { flex: 1; font-size: 12px; color: #bdbdbd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-compose { display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px; background: #111; border-top: 1px solid #2a2a2a; }
.ai-attach-btn { flex-shrink: 0; }
.ai-textarea { flex: 1; resize: none; max-height: 120px; padding: 9px 11px; border: 1px solid #3a3a3a; border-radius: 10px; background: #0e0e0e; color: #ececec; font: inherit; font-size: 13px; line-height: 1.4; }
.ai-textarea:focus { outline: none; border-color: #666; }
.ai-btn { border: 1px solid #3a3a3a; background: #2a2a2a; color: #ececec; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.ai-btn:hover { background: #333; }
.ai-btn-primary { background: #fff; color: #1b1b1b; border-color: #fff; font-weight: 600; }
.ai-btn-primary:hover { background: #e6e6e6; }
.ai-btn:disabled { opacity: .5; cursor: default; }
.ai-send { flex-shrink: 0; width: 40px; padding: 8px 0; text-align: center; }

/* ============ FONDOS ANIMADOS (ligeros, solo CSS) ============ */
#bgLayer { position: absolute; inset: 0; overflow: hidden; }
#bgLayer > * { position: absolute; inset: 0; }

/* Aurora: manchas de color a la deriva */
.bg-aurora { filter: blur(45px); }
.bg-aurora span {
  position: absolute; width: 46%; height: 46%; border-radius: 50%;
  opacity: .75; mix-blend-mode: screen;
  animation: auroraMove 14s ease-in-out infinite;
}
.bg-aurora span:nth-child(1) { background: #6d5efc; left: 4%; top: 8%; animation-delay: 0s; }
.bg-aurora span:nth-child(2) { background: #ff6b6b; right: 4%; top: 18%; animation-delay: -5s; }
.bg-aurora span:nth-child(3) { background: #22c1c3; left: 32%; bottom: 4%; animation-delay: -9s; }
@keyframes auroraMove {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(18%,12%) scale(1.25); }
  66% { transform: translate(-14%,16%) scale(.85); }
}

/* Degradado en movimiento */
.bg-waves {
  background: linear-gradient(-45deg, #6d5efc, #22c1c3, #ff6b6b, #6d5efc);
  background-size: 400% 400%;
  animation: waveShift 16s ease infinite;
}
@keyframes waveShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Burbujas subiendo */
.bg-bubbles span {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.35);
  animation-name: bubbleUp; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes bubbleUp {
  0% { top: 110%; opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .9; }
  100% { top: -20%; opacity: 0; }
}

/* Confeti cayendo */
.bg-confetti span {
  position: absolute; width: 9px; height: 9px;
  animation-name: confFall; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes confFall {
  0% { top: -12%; transform: rotate(0deg); }
  100% { top: 112%; transform: rotate(360deg); }
}

/* Estrellas / partículas titilando */
.bg-stars span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; animation-name: twinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes twinkle {
  0%,100% { opacity: .2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.8); }
}

/* Puntos en movimiento (patrón) */
.bg-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,.28) 2px, transparent 2px);
  background-size: 34px 34px;
  animation: dotsMove 6s linear infinite;
}
@keyframes dotsMove {
  from { background-position: 0 0; }
  to { background-position: 34px 34px; }
}

/* Nombre del proyecto en la barra */
.project-name { font-weight: 600; font-size: 17px; opacity: 1; margin-left: 0; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.project-name:hover { background: rgba(255,255,255,.12); }
.project-name[contenteditable="true"] { background: rgba(255,255,255,.18); outline: none; cursor: text; }

/* ============ OVERLAYS (modales / pantalla inicio) ============ */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.overlay[hidden] { display: none; }
.modal-overlay { background: rgba(0,0,0,.45); }

/* Modal genérico */
.modal {
  background: #fff;
  width: min(520px, 92vw);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--pp-orange); color: #fff;
  font-weight: 600; font-size: 15px;
}
.modal-close {
  background: transparent; border: none; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.modal-close:hover { opacity: .8; }

.vm-body { padding: 20px; }
.vm-foot { text-align: center; margin-top: 12px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; }
.choice {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  cursor: pointer;
  transition: .12s;
}
.choice:hover { border-color: var(--pp-orange); background: var(--pp-orange-soft); }
.choice-icon { font-size: 34px; }
.choice-title { font-weight: 600; font-size: 15px; }
.choice-desc { font-size: 12px; color: var(--muted); text-align: center; }

/* ============ PANTALLA DE INICIO (backstage) ============ */
.overlay.start { background: #fff; align-items: stretch; justify-content: stretch; }
.backstage { display: grid; grid-template-columns: 240px 1fr; width: 100%; height: 100%; }

/* Barra lateral izquierda (negra) */
.bs-rail {
  background: var(--pp-orange);
  color: #fff;
  padding: 22px 0;
  display: flex; flex-direction: column;
}
.bs-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px 24px;
}
.bs-logo { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; object-fit: cover; }
.bs-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-brand-name { font-size: 22px; font-weight: 700; line-height: 1.1; }
.bs-tagline { font-size: 11px; color: rgba(255,255,255,.55); font-style: italic; letter-spacing: .3px; }
.bs-nav {
  background: transparent; border: none; color: rgba(255,255,255,.85);
  text-align: left; padding: 11px 24px; font-size: 15px; cursor: pointer;
  border-left: 3px solid transparent;
}
.bs-nav:hover { background: rgba(255,255,255,.08); color: #fff; }
.bs-nav.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: #fff; font-weight: 600; }

/* Zona central */
.bs-main { padding: 34px 44px; overflow-y: auto; }
.bs-title { margin: 0 0 20px; font-size: 34px; font-weight: 300; color: #303030; }
.bs-search {
  width: 100%; max-width: 620px;
  padding: 9px 14px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px; margin-bottom: 28px;
}
.bs-search:focus { outline: none; border-color: var(--pp-orange); }
.bs-subtitle { margin: 30px 0 14px; font-size: 15px; font-weight: 600; color: #303030; }
.no-projects { color: var(--muted); padding: 16px 0; }

/* Rejilla de plantillas */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 22px 20px; }
.tpl-card { cursor: pointer; }
.tpl-thumb {
  aspect-ratio: 16 / 9; border-radius: 4px; border: 1px solid var(--border);
  overflow: hidden; position: relative;
  display: grid; place-items: center;
  transition: .12s;
}
.tpl-card:hover .tpl-thumb { border-color: var(--pp-orange); box-shadow: 0 4px 14px rgba(0,0,0,.18); transform: translateY(-2px); }
.tpl-thumb .tpl-preview { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.tpl-name { margin-top: 8px; font-size: 13px; color: #303030; }

/* Rejilla de vibes recientes */
.recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.project-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: .12s;
  background: #fff;
}
.project-card:hover { border-color: var(--pp-orange); box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.project-card .pc-thumb {
  width: 56px; height: 32px; border-radius: 4px;
  border: 1px solid var(--border); flex-shrink: 0;
  overflow: hidden; position: relative; background: #fff;
}
.project-card .pc-info { flex: 1; min-width: 0; }
.project-card .pc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-card .pc-meta { font-size: 11px; color: var(--muted); }
.project-card .pc-actions { display: flex; gap: 6px; }
.pc-btn {
  background: transparent; border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 7px; cursor: pointer; font-size: 11px; color: var(--text);
}
.pc-btn:hover { background: #eae9e8; }
.pc-btn.danger { color: var(--danger); border-color: var(--danger); }
.pc-btn.danger:hover { background: var(--danger); color: #fff; }

/* ============ MENÚ HAMBURGUESA + DRAWER ============ */
.hamburger {
  background: transparent; border: none; color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  padding: 2px 9px; border-radius: 4px; margin-right: 2px;
}
.hamburger:hover { background: rgba(255,255,255,.15); }

/* Capa transparente (solo para cerrar al hacer clic fuera; NO oscurece) */
.drawer { position: fixed; inset: 0; z-index: 200; background: transparent; }
.drawer[hidden] { display: none; }
.drawer-panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: 240px;
  background: #1f1f1f; color: #fff;
  display: flex; flex-direction: column; padding: 10px 0;
  box-shadow: 2px 0 24px rgba(0,0,0,.35);
}

/* Al abrir el menú, el contenido se desplaza a la derecha (no se oscurece) */
body { overflow-x: hidden; }
.topbar, .layout { transition: margin-left .2s ease; }
body.menu-open .topbar,
body.menu-open .layout { margin-left: 240px; }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 8px 18px 14px;
}
.drawer-brand-wrap { display: flex; flex-direction: column; gap: 2px; }
.drawer-brand { font-size: 20px; font-weight: 700; }
.drawer-tagline { font-size: 11px; color: rgba(255,255,255,.55); font-style: italic; letter-spacing: .3px; }
.drawer-close { background: transparent; border: none; color: #fff; font-size: 22px; cursor: pointer; }
.drawer-close:hover { opacity: .8; }
.drawer-item {
  background: transparent; border: none; color: rgba(255,255,255,.9);
  text-align: left; padding: 12px 20px; font-size: 14px; cursor: pointer;
}
.drawer-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.drawer-sep { height: 1px; background: rgba(255,255,255,.15); margin: 6px 14px; }

/* ============ LÍNEAS GUÍA (centrar al arrastrar) ============ */
.snap-guide { position: absolute; background: #ff2e88; pointer-events: none; z-index: 20; display: none; box-shadow: 0 0 4px rgba(255,46,136,.8); }
.snap-guide.v { top: 0; bottom: 0; width: 1px; left: 50%; }
.snap-guide.h { left: 0; right: 0; height: 1px; top: 50%; }

/* ============ DESPLEGABLES CON VISTA PREVIA ============ */
.playall-btn {
  display: block; width: calc(100% - 16px); margin: 0 8px 8px; padding: 9px 12px;
  background: #1f1f1f; color: #fff; border: none; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
  transition: .12s;
}
.playall-btn:hover { background: #333; }
.playall-btn.playing { background: var(--danger); }
.playall-btn.playing:hover { background: #c0392b; }

/* ---- Marca de agua ---- */
.watermark { position: absolute; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; text-align: center; line-height: 1.15; font-family: "Segoe UI", Arial, sans-serif; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.45); white-space: pre-wrap; }
.wm-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; cursor: pointer; }
.wm-seg { display: flex; gap: 6px; margin-bottom: 10px; }
.wm-type { flex: 1; padding: 6px; border: 1px solid var(--border); background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; }
.wm-type.on { background: #1f1f1f; color: #fff; border-color: #1f1f1f; }
#wmBody[hidden] { display: none; }

/* ---- Arrastrar y soltar imágenes ---- */
.drop-hover { outline: 3px dashed #6d5efc !important; outline-offset: -3px; background: rgba(109,94,252,.12) !important; }
#btnReplaceImage.drop-hover { border-color: #6d5efc; }

/* ---- Input para renombrar página (compacto y limpio) ---- */
.p-edit {
  flex: 1; min-width: 0; font: inherit; font-size: 12px;
  border: 1px solid #6d5efc; border-radius: 4px;
  padding: 2px 7px; background: #fff; color: var(--text);
}
.p-edit::placeholder { color: #b8b6c4; }
.p-edit:focus { outline: none; box-shadow: 0 0 0 2px rgba(109,94,252,.25); }

/* ---- Grupos de páginas + selección múltiple ---- */
.page-row.selected { outline: 2px solid #6d5efc; outline-offset: -2px; background: #e7e4fb; }
.page-row.in-group { margin-left: 14px; border-left: 2px solid #cfc9f5; }
.page-group-head {
  display: flex; align-items: center; gap: 6px; list-style: none;
  margin: 6px 8px 2px; padding: 5px 8px; background: #201a3a; color: #fff;
  border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; user-select: none;
}
.page-group-head:hover { background: #2c2350; }
.page-group-head .pg-caret { width: 12px; font-size: 10px; }
.page-group-head .pg-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-group-head .pg-count { background: rgba(255,255,255,.18); border-radius: 10px; padding: 0 7px; font-size: 11px; }
.page-group-head .pg-ungroup { opacity: .5; padding: 0 3px; }
.page-group-head .pg-ungroup:hover { opacity: 1; color: #ff8a8a; }

/* ---- Acordeón: elementos bajo la página seleccionada ---- */
.elements-section { margin: 2px 8px 10px; padding: 4px 0 6px; border-left: 3px solid #6d5efc; background: #eceaf6; border-radius: 0 8px 8px 0; }
.elements-section[hidden] { display: none; }
.elements-section .panel-head { padding: 6px 10px 4px; }
.elements-section .panel-head h2 { font-size: 11px; }
.elements-section .item-list { margin: 0; padding: 0 6px; }

/* ---- Sección "Formato final" (arriba de Páginas) ---- */
.final-entry {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 16px); margin: 10px 8px 4px; padding: 8px 10px;
  background: #1f1f1f; color: #fff; border: 2px solid transparent; border-radius: 8px;
  cursor: pointer; text-align: left; transition: .12s;
}
.final-entry:hover { background: #333; }
.final-entry.active { border-color: #6d5efc; }
.final-entry .fe-thumb {
  width: 46px; height: 30px; flex: none; border-radius: 4px; background: #000;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.final-entry .fe-text { display: flex; flex-direction: column; line-height: 1.2; }
.final-entry .fe-title { font-weight: 700; font-size: 13px; }
.final-entry .fe-sub { font-size: 11px; opacity: .6; }

/* ---- Formato final ---- */
.page-row.page-final { background: #1f1f1f; margin: 0 8px 8px; border-radius: 6px; }
.page-row.page-final .p-idx { color: #fff; font-weight: 600; }
.page-row.page-final .pf-thumb { display: flex; align-items: center; justify-content: center; font-size: 20px; background: #000; color: #fff; }
.page-row.page-final.active { outline: 2px solid #6d5efc; outline-offset: -2px; }
.page-row.page-final:hover { background: #333; }

.tl-lane.tl-video { background: #141026; }
.tl-vseg { position: absolute; top: 3px; bottom: 3px; box-sizing: border-box; border-right: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.tl-vseg span { font-size: 11px; color: #cfc9ff; pointer-events: none; }
.tl-vseg:nth-child(odd) { background: rgba(109,94,252,.30); }
.tl-vseg:nth-child(even) { background: rgba(34,193,195,.26); }
.tl-lane.tl-audiolane { background: #0e1524; }
.tl-clip { position: absolute; top: 4px; bottom: 4px; background: linear-gradient(#2ec26e,#1f9e55); border-radius: 4px; display: flex; align-items: center; padding: 0 6px; cursor: grab; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.tl-clip span { font-size: 11px; color: #fff; white-space: nowrap; pointer-events: none; }
.tl-clip:active { cursor: grabbing; }
.tl-aname { font-size: 12px; }

.fp-audio { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-top: 8px; background: #fafafa; }
.fp-a-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fp-a-name { font-weight: 600; font-size: 13px; }
.fp-a-del { background: none; border: none; cursor: pointer; font-size: 13px; }
.fp-a-lbl { display: block; font-size: 11px; color: var(--muted); margin: 6px 0 2px; }
.fp-a-lbl span { float: right; font-weight: 600; }
.fx-val { float: right; color: var(--muted); font-size: 11px; font-weight: 600; }
#bgFxField .field { margin-bottom: 10px; }
.pv-native { display: none !important; }
.pv-dd { position: relative; }
.pv-dd-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text);
  cursor: pointer; text-align: left;
}
.pv-dd-btn:hover { border-color: #9a9894; }
.pv-dd-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-caret { color: var(--muted); font-size: 10px; flex: none; }
.pv-dd-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 130;
  max-height: 300px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.24); padding: 4px;
}
.pv-dd-list[hidden] { display: none; }
.pv-dd-opt {
  padding: 7px 10px; font-size: 13px; border-radius: 4px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-dd-opt:hover, .pv-dd-opt.active { background: #ebeaff; color: #1f1f1f; }

/* =====================================================================
   FONDOS ANIMADOS EXTRA (94)
   ===================================================================== */
@keyframes vSpinZoom { 0%{transform:rotate(0deg) scale(.5);opacity:.3} 50%{transform:rotate(180deg) scale(1.2);opacity:.7} 100%{transform:rotate(360deg) scale(.5);opacity:.3} }
@keyframes vSpin     { to{transform:rotate(360deg)} }
@keyframes vSpinR    { to{transform:rotate(-360deg)} }
@keyframes vFall     { 0%{top:-12%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{top:112%;opacity:0} }
@keyframes vFallSway { 0%{top:-12%;transform:translateX(0) rotate(0);opacity:0} 10%{opacity:1} 50%{transform:translateX(28px) rotate(180deg)} 90%{opacity:1} 100%{top:112%;transform:translateX(-20px) rotate(360deg);opacity:0} }
@keyframes vRise     { 0%{top:112%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:-12%;opacity:0} }
@keyframes vRiseSway { 0%{top:112%;transform:translateX(0);opacity:0} 10%{opacity:.9} 50%{transform:translateX(24px)} 90%{opacity:.9} 100%{top:-12%;transform:translateX(-16px);opacity:0} }
@keyframes vTwinkle2 { 0%,100%{opacity:.15;transform:scale(.7)} 50%{opacity:1;transform:scale(1.4)} }
@keyframes vDrift    { 0%,100%{transform:translate(0,0)} 33%{transform:translate(6%,-4%)} 66%{transform:translate(-5%,5%)} }
@keyframes vBreathe  { 0%,100%{transform:scale(1);opacity:.55} 50%{transform:scale(1.25);opacity:.85} }
@keyframes vShiftH   { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes vShiftXY  { 0%{background-position:0% 0%} 50%{background-position:100% 100%} 100%{background-position:0% 0%} }
@keyframes vExpand   { 0%{transform:scale(0);opacity:.9} 100%{transform:scale(1);opacity:0} }
@keyframes vRainFall { 0%{transform:translateY(-120%)} 100%{transform:translateY(120%)} }
@keyframes vHue      { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }
@keyframes vScroll   { from{background-position:0 0} to{background-position:0 200px} }
@keyframes vScrollX  { from{background-position:0 0} to{background-position:200px 0} }
@keyframes vZoomIn   { 0%{transform:scale(.15);opacity:0} 20%{opacity:.8} 100%{transform:scale(1.6);opacity:0} }

/* ---- FIGURAS GIRANDO / ZOOM ---- */
.bg-triGiro span{position:absolute;width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-bottom:38px solid rgba(109,94,252,.5);animation-name:vSpinZoom;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-hexGiro span{position:absolute;width:56px;height:56px;background:rgba(34,193,195,.45);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);animation-name:vSpinZoom;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-pentaGiro span{position:absolute;width:56px;height:56px;background:rgba(255,209,102,.45);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);animation-name:vSpinZoom;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-poliZoom span{position:absolute;width:50px;height:50px;background:rgba(6,214,160,.4);clip-path:polygon(50% 0,90% 25%,90% 75%,50% 100%,10% 75%,10% 25%);animation-name:vSpinZoom;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-rombosGiro span{position:absolute;width:44px;height:44px;background:rgba(255,107,107,.45);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation-name:vSpinZoom;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-estrellasGiro span{position:absolute;width:52px;height:52px;background:rgba(255,209,102,.5);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation-name:vSpinZoom;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-cuadrosOrbita span{position:absolute;width:40px;height:40px;background:rgba(109,94,252,.4);animation-name:vSpinZoom;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-anillosZoom span{position:absolute;left:50%;top:50%;border:3px solid rgba(109,94,252,.5);border-radius:50%;transform:translate(-50%,-50%);width:60px;height:60px;animation:vZoomIn 6s linear infinite}
.bg-anillosZoom span:nth-child(2){animation-delay:-1s;border-color:rgba(34,193,195,.5)}
.bg-anillosZoom span:nth-child(3){animation-delay:-2s;border-color:rgba(255,107,107,.5)}
.bg-anillosZoom span:nth-child(4){animation-delay:-3s;border-color:rgba(255,209,102,.5)}
.bg-anillosZoom span:nth-child(5){animation-delay:-4s;border-color:rgba(109,94,252,.5)}
.bg-anillosZoom span:nth-child(6){animation-delay:-5s;border-color:rgba(34,193,195,.5)}
.bg-engranajes span{position:absolute;background:rgba(255,209,102,.35);clip-path:polygon(42% 0,58% 0,63% 10%,79% 6%,84% 21%,94% 37%,100% 42%,100% 58%,94% 63%,79% 79%,84% 84%,63% 90%,58% 100%,42% 100%,37% 90%,21% 84%,16% 79%,6% 63%,0 58%,0 42%,6% 37%,16% 21%,21% 16%,37% 10%);animation-name:vSpin;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-molinete{overflow:hidden}
.bg-molinete span{position:absolute;left:50%;top:50%;width:0;height:0;border-left:50vw solid transparent;border-top:50vh solid rgba(109,94,252,.18);transform-origin:0 0;animation:vSpin 14s linear infinite}
.bg-molinete span:nth-child(2){border-top-color:rgba(34,193,195,.18);transform:rotate(90deg)}
.bg-molinete span:nth-child(3){border-top-color:rgba(255,107,107,.18);transform:rotate(180deg)}
.bg-molinete span:nth-child(4){border-top-color:rgba(255,209,102,.18);transform:rotate(270deg)}

/* ---- PARTÍCULAS ---- */
.bg-lluvia span{position:absolute;top:-12%;width:2px;height:60px;background:linear-gradient(rgba(120,160,255,0),rgba(150,190,255,.7));animation-name:vRainFall;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-nieve span{position:absolute;border-radius:50%;background:rgba(255,255,255,.85);animation-name:vFallSway;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-luciernagas span{position:absolute;width:5px;height:5px;border-radius:50%;background:#c8ff9e;box-shadow:0 0 8px 2px rgba(160,255,120,.8);animation-name:vTwinkle2;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-bokeh{filter:blur(4px)}
.bg-bokeh span{position:absolute;border-radius:50%;opacity:.4;mix-blend-mode:screen;animation-name:vBreathe;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-polvoEstelar span{position:absolute;border-radius:50%;background:rgba(200,210,255,.8);animation-name:vTwinkle2;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-chispas span{position:absolute;top:110%;width:3px;height:3px;border-radius:50%;background:#ffb347;box-shadow:0 0 6px 2px rgba(255,150,60,.8);animation-name:vRise;animation-timing-function:ease-out;animation-iteration-count:infinite}
.bg-hojasOtono span,.bg-petalos span,.bg-plumas span,.bg-corazones span,.bg-notasMusica span{position:absolute;top:-12%;line-height:1;animation-name:vFallSway;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-globos span{position:absolute;border-radius:50% 50% 50% 50%/45% 45% 55% 55%;opacity:.75;animation-name:vRiseSway;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-dienteLeon span{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#fff 30%,rgba(255,255,255,.15) 70%);animation-name:vRiseSway;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-burbujasNeon span{position:absolute;border-radius:50%;border:2px solid #6d5efc;box-shadow:0 0 10px currentColor;animation-name:vRise;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-ceniza span{position:absolute;top:-12%;border-radius:50%;background:rgba(200,120,80,.6);box-shadow:0 0 4px rgba(255,120,60,.5);animation-name:vFallSway;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-estrellasFugaces span{position:absolute;width:120px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);border-radius:2px;transform:rotate(30deg);animation-name:vShoot;animation-timing-function:ease-in;animation-iteration-count:infinite}
@keyframes vShoot{0%{transform:translate(-40px,-40px) rotate(30deg);opacity:0}10%{opacity:1}70%{opacity:1}100%{transform:translate(60vw,60vh) rotate(30deg);opacity:0}}

/* ---- ESPACIO ---- */
.bg-campoEstrellas{background:#04060f}
.bg-campoEstrellas::before,.bg-campoEstrellas::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:2px;border-radius:50%;box-shadow:-120px -80px #fff,140px -60px #fff,-200px 40px #fff,90px 120px #fff,220px 90px #fff,-260px -140px #fff,180px -180px #fff,-80px 200px #fff,300px -40px #fff,-320px 60px #fff,60px -240px #fff,-160px -220px #fff;animation:vZoomIn 5s linear infinite}
.bg-campoEstrellas::after{animation-delay:-2.5s}
.bg-hiperespacio{background:radial-gradient(circle,#1a1550 0%,#05030f 70%);overflow:hidden}
.bg-hiperespacio::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.9) 0deg 1deg,transparent 1deg 8deg);-webkit-mask:radial-gradient(circle,transparent 8%,#000 30%);mask:radial-gradient(circle,transparent 8%,#000 30%);animation:vZoomIn 1.6s linear infinite}
.bg-nebulosa{filter:blur(40px)}
.bg-nebulosa span{position:absolute;width:60%;height:60%;border-radius:50%;mix-blend-mode:screen;opacity:.6;animation:vDrift 18s ease-in-out infinite}
.bg-nebulosa span:nth-child(1){background:#7b2ff7;left:5%;top:10%}
.bg-nebulosa span:nth-child(2){background:#ff2d95;right:5%;top:20%;animation-delay:-6s}
.bg-nebulosa span:nth-child(3){background:#2d9bff;left:25%;bottom:5%;animation-delay:-11s}
.bg-viaLactea{overflow:hidden}
.bg-viaLactea .band{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(180,160,255,.25) 50%,transparent 60%);filter:blur(14px);animation:vDrift 24s ease-in-out infinite}
.bg-viaLactea b{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:vTwinkle2 3s ease-in-out infinite}
.bg-constelaciones{background:#070b1c}
.bg-constelaciones::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#fff 1px,transparent 1.5px);background-size:70px 70px;opacity:.5;animation:vShiftXY 40s linear infinite}
.bg-constelaciones::after{content:"";position:absolute;inset:0;background-image:linear-gradient(60deg,rgba(150,180,255,.15) 1px,transparent 1px),linear-gradient(-60deg,rgba(150,180,255,.15) 1px,transparent 1px);background-size:70px 70px;animation:vShiftXY 40s linear infinite}
.bg-cometa span{position:absolute;left:-10%;top:20%;width:160px;height:4px;border-radius:4px;background:linear-gradient(90deg,rgba(120,200,255,0),#bfe6ff);box-shadow:0 0 12px #7cc4ff;animation:vComet 6s linear infinite}
@keyframes vComet{0%{transform:translate(-10vw,0) rotate(18deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(120vw,40vh) rotate(18deg);opacity:0}}
.bg-lluviaMeteoros span{position:absolute;width:90px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,0),#dfefff);transform:rotate(35deg);animation-name:vMeteor;animation-timing-function:ease-in;animation-iteration-count:infinite}
@keyframes vMeteor{0%{transform:translate(0,0) rotate(35deg);opacity:0}12%{opacity:1}100%{transform:translate(40vw,50vh) rotate(35deg);opacity:0}}
.bg-planetas .sun{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px;border-radius:50%;background:radial-gradient(circle,#ffe08a,#ff9f1c);box-shadow:0 0 30px #ffb347}
.bg-planetas span{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.12);border-radius:50%;transform:translate(-50%,-50%)}
.bg-planetas .o1{width:160px;height:160px;animation:vSpin 8s linear infinite}
.bg-planetas .o2{width:260px;height:260px;animation:vSpin 14s linear infinite}
.bg-planetas .o3{width:380px;height:380px;animation:vSpin 22s linear infinite}
.bg-planetas span b{position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#6d5efc}
.bg-planetas .o2 b{background:#22c1c3}
.bg-planetas .o3 b{background:#ff6b6b}
.bg-eclipse{background:radial-gradient(circle at 50% 45%,#1a1226 0%,#0a0810 60%)}
.bg-eclipse::before{content:"";position:absolute;left:50%;top:45%;width:220px;height:220px;margin:-110px;border-radius:50%;background:#0a0810;box-shadow:0 0 50px 18px rgba(255,180,120,.6),0 0 120px 40px rgba(255,120,80,.35);animation:vBreathe 8s ease-in-out infinite}
.bg-auroraBoreal{filter:blur(18px)}
.bg-auroraBoreal span{position:absolute;bottom:0;width:40%;height:80%;mix-blend-mode:screen;transform-origin:bottom;animation:vAurora 10s ease-in-out infinite}
.bg-auroraBoreal span:nth-child(1){left:5%;background:linear-gradient(to top,rgba(0,255,160,0),rgba(0,255,160,.5))}
.bg-auroraBoreal span:nth-child(2){left:35%;background:linear-gradient(to top,rgba(120,80,255,0),rgba(120,80,255,.5));animation-delay:-3s}
.bg-auroraBoreal span:nth-child(3){left:60%;background:linear-gradient(to top,rgba(0,200,255,0),rgba(0,200,255,.5));animation-delay:-6s}
@keyframes vAurora{0%,100%{transform:scaleY(1) skewX(0deg);opacity:.5}50%{transform:scaleY(1.2) skewX(12deg);opacity:.9}}
.bg-galaxia{background:radial-gradient(circle,#241a4a 0%,#060412 70%)}
.bg-galaxia::before,.bg-galaxia::after{content:"";position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(180,160,255,.5),transparent,rgba(120,200,255,.4),transparent);-webkit-mask:radial-gradient(circle,#000 5%,transparent 60%);mask:radial-gradient(circle,#000 5%,transparent 60%);animation:vSpin 26s linear infinite}
.bg-galaxia::after{animation-duration:40s;animation-direction:reverse;opacity:.6}
.bg-saturno i{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd9a0,#c98a3c);box-shadow:0 0 40px rgba(255,200,140,.4)}
.bg-saturno i::before{content:"";position:absolute;left:-40%;top:40%;width:180%;height:20%;border-radius:50%;border:6px solid rgba(255,220,170,.5);transform:rotate(-20deg)}
.bg-saturno{animation:vDrift 20s ease-in-out infinite}

/* ---- ONDAS ---- */
.bg-olasMar span{position:absolute;left:-50%;width:200%;height:60%;bottom:-30%;border-radius:45%;background:rgba(34,120,180,.4);animation:vSpin 12s linear infinite}
.bg-olasMar span:nth-child(2){bottom:-38%;background:rgba(20,90,150,.5);animation-duration:16s;animation-direction:reverse}
.bg-olasMar span:nth-child(3){bottom:-46%;background:rgba(12,60,110,.6);animation-duration:20s}
.bg-ecualizador span{position:absolute;bottom:0;width:2.6%;background:linear-gradient(to top,#6d5efc,#22c1c3);border-radius:3px 3px 0 0;transform-origin:bottom;height:100%;animation-name:vEq;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes vEq{0%{transform:scaleY(.1)}100%{transform:scaleY(1)}}
.bg-ondasConcentricas span{position:absolute;left:50%;top:50%;border:2px solid rgba(34,193,195,.5);border-radius:50%;transform:translate(-50%,-50%);animation:vExpandBig 4s linear infinite}
.bg-ondasConcentricas span:nth-child(2){animation-delay:-1s}
.bg-ondasConcentricas span:nth-child(3){animation-delay:-2s}
.bg-ondasConcentricas span:nth-child(4){animation-delay:-3s}
@keyframes vExpandBig{0%{width:0;height:0;opacity:.8}100%{width:140vw;height:140vw;opacity:0}}
.bg-senoidal{background:repeating-linear-gradient(180deg,transparent 0 28px,rgba(109,94,252,.25) 28px 30px);-webkit-mask:radial-gradient(circle,#000,transparent 80%);animation:vScroll 6s linear infinite}
.bg-ondulacion{background:radial-gradient(circle at 30% 30%,rgba(34,193,195,.3),transparent 40%),radial-gradient(circle at 70% 70%,rgba(109,94,252,.3),transparent 40%);background-size:200% 200%;animation:vShiftXY 12s ease-in-out infinite}
.bg-ripple span{position:absolute;border:2px solid rgba(120,200,255,.5);border-radius:50%;animation:vExpand 4s ease-out infinite}
.bg-ripple span:nth-child(1){left:30%;top:40%;width:200px;height:200px;margin:-100px}
.bg-ripple span:nth-child(2){left:65%;top:60%;width:160px;height:160px;margin:-80px;animation-delay:-1.5s}
.bg-ripple span:nth-child(3){left:50%;top:25%;width:220px;height:220px;margin:-110px;animation-delay:-2.8s}
.bg-bandera{background:repeating-linear-gradient(90deg,#6d5efc 0 40px,#22c1c3 40px 80px,#ff6b6b 80px 120px);background-size:200% 100%;-webkit-mask:radial-gradient(circle,#000,transparent 85%);animation:vShiftH 8s linear infinite,vWave 4s ease-in-out infinite}
@keyframes vWave{0%,100%{transform:skewY(0deg)}50%{transform:skewY(3deg)}}
.bg-seda{background:linear-gradient(120deg,#3a1a5a,#22135a,#4a1a4a,#22135a);background-size:300% 300%;filter:blur(2px);animation:vShiftXY 14s ease-in-out infinite}

/* ---- PLASMA / GRADIENTE ---- */
.bg-plasma{filter:blur(30px)}
.bg-plasma span{position:absolute;width:55%;height:55%;border-radius:50%;mix-blend-mode:screen;opacity:.7;animation:vDrift 12s ease-in-out infinite}
.bg-plasma span:nth-child(1){background:#7b2ff7;left:0;top:0}
.bg-plasma span:nth-child(2){background:#ff2d95;right:0;top:5%;animation-delay:-3s}
.bg-plasma span:nth-child(3){background:#2d9bff;left:10%;bottom:0;animation-delay:-6s}
.bg-plasma span:nth-child(4){background:#2dffb0;right:10%;bottom:5%;animation-delay:-9s}
.bg-lavaLamp{filter:blur(14px);overflow:hidden}
.bg-lavaLamp span{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 40%,#ff8a5c,#e0341c);mix-blend-mode:screen}
.bg-lavaLamp span:nth-child(1){left:15%;width:120px;height:120px;animation:vLava 11s ease-in-out infinite}
.bg-lavaLamp span:nth-child(2){left:45%;width:90px;height:90px;animation:vLava 14s ease-in-out infinite;animation-delay:-4s}
.bg-lavaLamp span:nth-child(3){left:70%;width:140px;height:140px;animation:vLava 16s ease-in-out infinite;animation-delay:-8s}
.bg-lavaLamp span:nth-child(4){left:30%;width:70px;height:70px;animation:vLava 9s ease-in-out infinite;animation-delay:-2s}
@keyframes vLava{0%{top:100%;transform:scale(1)}50%{transform:scale(1.3)}100%{top:-30%;transform:scale(1)}}
.bg-gradienteMuta{background:linear-gradient(-45deg,#6d5efc,#ff2d95,#22c1c3,#ffd166);background-size:400% 400%;animation:vShiftXY 18s ease infinite,vHue 30s linear infinite}
.bg-mallaGradiente{filter:blur(50px)}
.bg-mallaGradiente span{position:absolute;width:60%;height:60%;border-radius:40%;mix-blend-mode:screen;animation:vDrift 16s ease-in-out infinite}
.bg-mallaGradiente span:nth-child(1){background:#5b4bff;left:-10%;top:-10%}
.bg-mallaGradiente span:nth-child(2){background:#ff5b8a;right:-10%;top:0;animation-delay:-4s}
.bg-mallaGradiente span:nth-child(3){background:#22c1c3;left:0;bottom:-10%;animation-delay:-8s}
.bg-mallaGradiente span:nth-child(4){background:#ffd166;right:-10%;bottom:-10%;animation-delay:-12s}
.bg-respiracion{background:radial-gradient(circle,#22336e 0%,#0c1424 70%);animation:vBreathe 8s ease-in-out infinite}
.bg-humo{filter:blur(26px)}
.bg-humo span{position:absolute;bottom:-20%;width:50%;height:80%;border-radius:50%;background:rgba(180,180,190,.25);animation:vRise 14s ease-in-out infinite}
.bg-humo span:nth-child(1){left:5%}
.bg-humo span:nth-child(2){left:35%;animation-delay:-5s}
.bg-humo span:nth-child(3){left:60%;animation-delay:-9s}
.bg-niebla{filter:blur(30px)}
.bg-niebla span{position:absolute;inset:-20%;background:linear-gradient(90deg,transparent,rgba(200,205,215,.28),transparent);background-size:50% 100%;animation:vScrollX 22s linear infinite}
.bg-niebla span:nth-child(2){animation-duration:34s;animation-direction:reverse;opacity:.6}
.bg-tinta{filter:blur(20px)}
.bg-tinta span{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:vBreathe 10s ease-in-out infinite}
.bg-tinta span:nth-child(1){left:20%;top:25%;width:45%;height:45%;background:#3b2f8f}
.bg-tinta span:nth-child(2){right:15%;top:35%;width:40%;height:40%;background:#8f2f6f;animation-delay:-4s}
.bg-tinta span:nth-child(3){left:35%;bottom:10%;width:38%;height:38%;background:#2f6f8f;animation-delay:-7s}
.bg-acuarela{filter:blur(24px)}
.bg-acuarela span{position:absolute;border-radius:45%;opacity:.55;mix-blend-mode:screen;animation:vDrift 20s ease-in-out infinite}
.bg-acuarela span:nth-child(1){left:10%;top:15%;width:50%;height:50%;background:#ff9d6c}
.bg-acuarela span:nth-child(2){right:10%;top:25%;width:45%;height:45%;background:#6ca8ff;animation-delay:-6s}
.bg-acuarela span:nth-child(3){left:30%;bottom:10%;width:48%;height:48%;background:#9d6cff;animation-delay:-11s}
.bg-iridiscente{background:linear-gradient(120deg,#00c6ff,#7b2ff7,#ff2d95,#00c6ff);background-size:300% 300%;filter:saturate(1.3);animation:vShiftXY 12s ease infinite,vHue 20s linear infinite}

/* ---- TECH / DIGITAL ---- */
.bg-matrix span{position:absolute;top:0;color:#39ff14;font:bold 15px/1.05 monospace;letter-spacing:1px;writing-mode:vertical-rl;text-shadow:0 0 6px #0f0;white-space:nowrap;-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);animation-name:vRainFall;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-circuito{background:#04140f}
.bg-circuito::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,255,180,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,180,.2) 1px,transparent 1px);background-size:44px 44px;animation:vScroll 8s linear infinite}
.bg-circuito::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,255,180,.7) 2px,transparent 3px);background-size:44px 44px;animation:vScroll 8s linear infinite,vTwinkle2 2s ease-in-out infinite}
.bg-redNodos{background:#0a0f1e}
.bg-redNodos span{position:absolute;width:6px;height:6px;border-radius:50%;background:#22c1c3;box-shadow:0 0 8px #22c1c3;animation-name:vDrift;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bg-redNodos::before{content:"";position:absolute;inset:0;background-image:linear-gradient(60deg,rgba(34,193,195,.12) 1px,transparent 1px),linear-gradient(-60deg,rgba(34,193,195,.12) 1px,transparent 1px);background-size:80px 80px;animation:vShiftXY 30s linear infinite}
.bg-lineasNeon span{position:absolute;left:0;width:100%;height:2px;box-shadow:0 0 10px currentColor;animation:vNeonY 6s ease-in-out infinite}
.bg-lineasNeon span:nth-child(1){color:#6d5efc;background:#6d5efc;top:20%}
.bg-lineasNeon span:nth-child(2){color:#22c1c3;background:#22c1c3;top:40%;animation-delay:-1s}
.bg-lineasNeon span:nth-child(3){color:#ff2d95;background:#ff2d95;top:60%;animation-delay:-2s}
.bg-lineasNeon span:nth-child(4){color:#ffd166;background:#ffd166;top:80%;animation-delay:-3s}
.bg-lineasNeon span:nth-child(5){color:#06d6a0;background:#06d6a0;top:100%;animation-delay:-4s}
@keyframes vNeonY{0%,100%{transform:translateX(-15%);opacity:.5}50%{transform:translateX(15%);opacity:1}}
.bg-glitch span{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,45,149,.15),transparent);animation:vGlitch 3s steps(12) infinite}
.bg-glitch span:nth-child(2){background:linear-gradient(90deg,transparent,rgba(45,155,255,.15),transparent);animation-delay:-1s;animation-duration:2.3s}
.bg-glitch span:nth-child(3){background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.04) 3px 4px);animation:vScroll 5s linear infinite}
@keyframes vGlitch{0%{transform:translateX(0)}20%{transform:translateX(-6%)}40%{transform:translateX(5%)}60%{transform:translateX(-3%)}80%{transform:translateX(4%)}100%{transform:translateX(0)}}
.bg-flujoDatos span{position:absolute;left:-20%;height:1px;width:20%;background:linear-gradient(90deg,transparent,#00e0ff);box-shadow:0 0 6px #00e0ff;animation-name:vScrollLine;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes vScrollLine{0%{transform:translateX(0)}100%{transform:translateX(600%)}}
.bg-hexTech{background:#061412}
.bg-hexTech::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,255,190,.14) 2px,transparent 3px);background-size:50px 50px;animation:vScroll 10s linear infinite}
.bg-hexTech::after{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,transparent,rgba(0,255,190,.08),transparent);animation:vSpin 20s linear infinite}
.bg-scanlines{background:linear-gradient(#0a1a12,#040a06)}
.bg-scanlines::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,255,120,.08) 0 2px,transparent 2px 4px)}
.bg-scanlines i{position:absolute;left:0;width:100%;height:22%;background:linear-gradient(rgba(0,255,120,0),rgba(0,255,120,.18),rgba(0,255,120,0));animation:vScanBar 4s linear infinite}
@keyframes vScanBar{0%{top:-25%}100%{top:110%}}
.bg-binario span{position:absolute;top:0;color:rgba(120,200,255,.7);font:12px/1.1 monospace;writing-mode:vertical-rl;text-shadow:0 0 5px rgba(120,200,255,.6);animation-name:vRainFall;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-wireframe{background:#050a16}
.bg-wireframe::before{content:"";position:absolute;inset:-25%;background-image:linear-gradient(rgba(110,150,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(110,150,255,.25) 1px,transparent 1px);background-size:60px 60px;transform:perspective(300px) rotateX(60deg);animation:vScroll 6s linear infinite}
.bg-pixeles span{position:absolute;width:12px;height:12px;border-radius:2px;animation-name:vTwinkle2;animation-timing-function:steps(2);animation-iteration-count:infinite}
.bg-terminal{background:#020604;font:14px monospace}
.bg-terminal::before{content:"> _ ";position:absolute;left:6%;top:12%;color:#39ff14;text-shadow:0 0 6px #0f0;animation:vBlink 1s steps(1) infinite}
.bg-terminal::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,255,60,.05) 0 2px,transparent 2px 4px)}
@keyframes vBlink{50%{opacity:.2}}

/* ---- PERSPECTIVA / 3D ---- */
.bg-tunel span{position:absolute;left:50%;top:50%;border:2px solid rgba(120,140,255,.4);border-radius:8px;transform:translate(-50%,-50%);width:60px;height:60px;animation:vZoomIn 4s linear infinite}
.bg-tunel span:nth-child(2){animation-delay:-.66s;border-color:rgba(34,193,195,.4)}
.bg-tunel span:nth-child(3){animation-delay:-1.33s;border-color:rgba(255,45,149,.4)}
.bg-tunel span:nth-child(4){animation-delay:-2s;border-color:rgba(255,209,102,.4)}
.bg-tunel span:nth-child(5){animation-delay:-2.66s;border-color:rgba(120,140,255,.4)}
.bg-tunel span:nth-child(6){animation-delay:-3.33s;border-color:rgba(34,193,195,.4)}
.bg-rejillaSynth{overflow:hidden}
.bg-rejillaSynth .sky{position:absolute;inset:0 0 50% 0;background:linear-gradient(#12042a,#ff2d95 120%,#12042a);opacity:.5}
.bg-rejillaSynth .grid{position:absolute;left:-50%;right:-50%;bottom:0;height:55%;background-image:linear-gradient(rgba(255,45,149,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(120,80,255,.5) 1px,transparent 1px);background-size:60px 60px;transform:perspective(220px) rotateX(72deg);animation:vScroll 3s linear infinite}
.bg-tunelHex span{position:absolute;left:50%;top:50%;width:80px;height:80px;transform:translate(-50%,-50%);border:2px solid rgba(0,255,190,.4);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);animation:vZoomIn 4s linear infinite}
.bg-tunelHex span:nth-child(2){animation-delay:-.8s}
.bg-tunelHex span:nth-child(3){animation-delay:-1.6s}
.bg-tunelHex span:nth-child(4){animation-delay:-2.4s}
.bg-tunelHex span:nth-child(5){animation-delay:-3.2s}
.bg-vortice{background:conic-gradient(from 0deg,#0a0a1e,#3a2f8f,#0a0a1e,#8f2f6f,#0a0a1e);-webkit-mask:radial-gradient(circle,transparent 4%,#000 55%);animation:vSpin 14s linear infinite}
.bg-espiral{background:repeating-conic-gradient(from 0deg,#12102a 0deg 12deg,#3a2f8f 12deg 24deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 70%);animation:vSpin 18s linear infinite}
.bg-carretera{overflow:hidden}
.bg-carretera .road{position:absolute;left:30%;right:30%;bottom:0;top:45%;background:linear-gradient(#1a1a24,#2a2a3a);transform:perspective(160px) rotateX(55deg);transform-origin:bottom}
.bg-carretera .line{position:absolute;left:49.4%;bottom:0;width:1.2%;top:45%;background:repeating-linear-gradient(#ffd166 0 30px,transparent 30px 70px);transform:perspective(160px) rotateX(55deg);transform-origin:bottom;animation:vScroll 1.2s linear infinite}
.bg-tunelCuadros span{position:absolute;left:50%;top:50%;width:70px;height:70px;transform:translate(-50%,-50%) rotate(45deg);border:2px solid rgba(255,209,102,.4);animation:vTunelSpin 5s linear infinite}
.bg-tunelCuadros span:nth-child(2){animation-delay:-1s}
.bg-tunelCuadros span:nth-child(3){animation-delay:-2s}
.bg-tunelCuadros span:nth-child(4){animation-delay:-3s}
.bg-tunelCuadros span:nth-child(5){animation-delay:-4s}
@keyframes vTunelSpin{0%{transform:translate(-50%,-50%) scale(.1) rotate(0deg);opacity:0}20%{opacity:.9}100%{transform:translate(-50%,-50%) scale(2) rotate(90deg);opacity:0}}
.bg-hipnosis{background:repeating-radial-gradient(circle,#0a0a0a 0 18px,#e8e8e8 18px 36px);-webkit-mask:radial-gradient(circle,#000,transparent 80%);animation:vHypno 6s linear infinite}
@keyframes vHypno{0%{transform:scale(1)}100%{transform:scale(1.15)}}

/* ---- PAISAJES / PARALLAX ---- */
.bg-bosque i,.bg-montanas i,.bg-ciudad i,.bg-colinas i,.bg-dunas i,.bg-oceanoCapas i,.bg-pinos i,.bg-cordillera i{position:absolute;left:-20%;right:-20%;bottom:0;background-repeat:repeat-x;animation-name:vParallax;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes vParallax{from{transform:translateX(0)}to{transform:translateX(-80px)}}
.bg-bosque .l1{height:70%;background:linear-gradient(transparent,#0a1a12);-webkit-mask:repeating-linear-gradient(90deg,transparent 0 20px,#000 20px 30px,transparent 30px 60px);animation-duration:30s;opacity:.4}
.bg-bosque .l2{height:55%;background:#08150e;-webkit-mask:repeating-linear-gradient(90deg,transparent 0 14px,#000 14px 26px,transparent 26px 48px);animation-duration:20s;opacity:.7}
.bg-bosque .l3{height:40%;background:#050f0a;-webkit-mask:repeating-linear-gradient(90deg,transparent 0 10px,#000 10px 22px,transparent 22px 40px);animation-duration:12s}
.bg-montanas .m1{height:60%;background:#1c2740;clip-path:polygon(0 100%,15% 40%,35% 75%,55% 25%,75% 70%,100% 35%,100% 100%);animation-duration:40s;opacity:.6}
.bg-montanas .m2{height:48%;background:#141d33;clip-path:polygon(0 100%,20% 55%,45% 20%,65% 60%,85% 30%,100% 55%,100% 100%);animation-duration:26s;opacity:.8}
.bg-montanas .m3{height:34%;background:#0c1526;clip-path:polygon(0 100%,25% 45%,50% 80%,70% 35%,100% 65%,100% 100%);animation-duration:16s}
.bg-ciudad .c1{height:45%;background:#161a2e;-webkit-mask:repeating-linear-gradient(90deg,#000 0 30px,transparent 30px 34px,#000 34px 50px,transparent 50px 56px);animation-duration:44s;opacity:.6}
.bg-ciudad .c2{height:32%;background:#0e1120;-webkit-mask:repeating-linear-gradient(90deg,#000 0 24px,transparent 24px 30px,#000 30px 40px,transparent 40px 48px);animation-duration:24s}
.bg-ciudad::after{content:"";position:absolute;inset:0 0 32% 0;background:radial-gradient(circle at 50% 100%,rgba(255,160,80,.25),transparent 60%)}
.bg-colinas .h1{height:50%;background:#173322;border-radius:50% 50% 0 0/60% 60% 0 0;animation-duration:34s;opacity:.6}
.bg-colinas .h2{height:38%;background:#0f2618;border-radius:50% 50% 0 0/70% 70% 0 0;animation-duration:22s;opacity:.85}
.bg-colinas .h3{height:26%;background:#0a1c10;border-radius:50% 50% 0 0/80% 80% 0 0;animation-duration:14s}
.bg-dunas .d1{height:50%;background:#5a4420;border-radius:50% 50% 0 0/90% 90% 0 0;animation-duration:44s;opacity:.5}
.bg-dunas .d2{height:38%;background:#3f2f14;border-radius:60% 40% 0 0/90% 90% 0 0;animation-duration:28s;opacity:.75}
.bg-dunas .d3{height:26%;background:#2a1f0d;border-radius:40% 60% 0 0/90% 90% 0 0;animation-duration:16s}
.bg-oceanoCapas .w1{height:40%;background:#0a3a52;border-radius:45%;animation:vSpin 18s linear infinite;left:-50%;right:-50%;bottom:-15%;opacity:.5}
.bg-oceanoCapas .w2{height:34%;background:#072b40;border-radius:45%;animation:vSpin 24s linear infinite reverse;left:-50%;right:-50%;bottom:-18%;opacity:.75}
.bg-oceanoCapas .w3{height:28%;background:#051f30;border-radius:45%;animation:vSpin 30s linear infinite;left:-50%;right:-50%;bottom:-22%}
.bg-atardecer{background:linear-gradient(#2a1030,#7a2b4a 55%,#e0653a 80%,#ffb347)}
.bg-atardecer .sun{position:absolute;left:50%;bottom:22%;width:130px;height:130px;margin-left:-65px;border-radius:50%;background:radial-gradient(circle,#fff3b0,#ff8a3c);box-shadow:0 0 60px rgba(255,150,60,.6);animation:vSunPulse 8s ease-in-out infinite}
@keyframes vSunPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
.bg-lluviaCiudad .sky{position:absolute;inset:0;background:linear-gradient(#0a0e18,#141c30)}
.bg-lluviaCiudad::after{content:"";position:absolute;inset:40% 0 0 0;background:repeating-linear-gradient(90deg,rgba(120,140,220,.15) 0 26px,transparent 26px 34px,rgba(120,140,220,.15) 34px 50px,transparent 50px 60px);-webkit-mask:linear-gradient(#000,transparent 90%)}
.bg-lluviaCiudad span{position:absolute;top:-12%;width:1px;height:44px;background:linear-gradient(rgba(150,180,255,0),rgba(180,200,255,.6));animation-name:vRainFall;animation-timing-function:linear;animation-iteration-count:infinite}
.bg-pinos .p1{height:55%;background:#16283a;clip-path:polygon(0 100%,8% 30%,16% 100%,24% 20%,32% 100%,40% 35%,48% 100%,56% 25%,64% 100%,72% 30%,80% 100%,88% 22%,96% 100%);animation-duration:30s;opacity:.6}
.bg-pinos .p2{height:40%;background:#0e1c2a;clip-path:polygon(0 100%,10% 25%,20% 100%,30% 15%,40% 100%,50% 30%,60% 100%,70% 20%,80% 100%,90% 28%,100% 100%);animation-duration:16s}
.bg-pinos::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 2px);background-size:60px 60px;animation:vScroll 12s linear infinite;opacity:.5}
.bg-cordillera .c1{height:55%;background:linear-gradient(#3a2f6a,#1a1440);clip-path:polygon(0 100%,20% 30%,40% 70%,60% 20%,80% 65%,100% 40%,100% 100%);animation-duration:44s;opacity:.55}
.bg-cordillera .c2{height:42%;background:#221a4a;clip-path:polygon(0 100%,25% 45%,50% 15%,70% 55%,100% 30%,100% 100%);animation-duration:28s;opacity:.8}
.bg-cordillera .c3{height:30%;background:#150f30;clip-path:polygon(0 100%,30% 40%,55% 75%,80% 30%,100% 60%,100% 100%);animation-duration:16s}

/* ---- LUZ ---- */
.bg-rayosSol{background:radial-gradient(circle at 50% 0%,rgba(255,220,150,.4),transparent 55%)}
.bg-rayosSol::before{content:"";position:absolute;left:50%;top:-10%;width:180%;height:180%;transform:translateX(-50%);background:repeating-conic-gradient(from 0deg at 50% 0%,rgba(255,225,160,.18) 0deg 4deg,transparent 4deg 12deg);animation:vSpin 40s linear infinite}
.bg-spotlight{background:#080810}
.bg-spotlight::before{content:"";position:absolute;left:50%;top:-5%;width:60%;height:130%;margin-left:-30%;background:linear-gradient(rgba(255,255,240,.35),transparent 70%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);transform-origin:top center;animation:vSweep 7s ease-in-out infinite}
@keyframes vSweep{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
.bg-reflectores span{position:absolute;top:-5%;width:40%;height:130%;transform-origin:top center;mix-blend-mode:screen;clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);animation:vSweep 6s ease-in-out infinite}
.bg-reflectores span:nth-child(1){left:0;background:linear-gradient(rgba(255,45,149,.4),transparent 70%)}
.bg-reflectores span:nth-child(2){left:30%;background:linear-gradient(rgba(45,155,255,.4),transparent 70%);animation-delay:-2s;animation-duration:5s}
.bg-reflectores span:nth-child(3){left:60%;background:linear-gradient(rgba(45,255,160,.4),transparent 70%);animation-delay:-4s;animation-duration:7s}
.bg-lensFlare{background:radial-gradient(circle at 30% 40%,rgba(120,150,255,.35),transparent 40%)}
.bg-lensFlare::before{content:"";position:absolute;left:30%;top:40%;width:60px;height:60px;margin:-30px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,0));box-shadow:120px 90px 0 -14px rgba(255,180,120,.5),260px 200px 0 -20px rgba(120,200,255,.5),-80px -60px 0 -18px rgba(255,120,180,.5);animation:vFlare 10s ease-in-out infinite}
@keyframes vFlare{0%,100%{transform:translate(0,0) scale(1);opacity:.8}50%{transform:translate(30%,20%) scale(1.2);opacity:1}}
.bg-laser span{position:absolute;left:50%;top:50%;width:140%;height:3px;transform-origin:left center;box-shadow:0 0 12px currentColor;animation:vSpin 8s linear infinite}
.bg-laser span:nth-child(1){color:#ff2d95;background:#ff2d95}
.bg-laser span:nth-child(2){color:#2d9bff;background:#2d9bff;animation-delay:-2s;animation-duration:11s}
.bg-laser span:nth-child(3){color:#2dffb0;background:#2dffb0;animation-delay:-4s;animation-duration:9s}
.bg-laser span:nth-child(4){color:#ffd166;background:#ffd166;animation-delay:-6s;animation-duration:13s}
.bg-faro{background:radial-gradient(circle at 50% 55%,#12203a,#060a12 70%)}
.bg-faro::before{content:"";position:absolute;left:50%;top:55%;width:150%;height:40%;margin-left:-75%;transform-origin:left center;background:linear-gradient(90deg,rgba(255,240,200,.4),transparent 70%);clip-path:polygon(0 45%,100% 0,100% 100%,0 55%);animation:vSpin 6s linear infinite}

/* ---- PATRÓN / CALEIDOSCOPIO ---- */
.bg-caleidoscopio{background:conic-gradient(from 0deg,#6d5efc,#22c1c3,#ff2d95,#ffd166,#6d5efc);-webkit-mask:repeating-conic-gradient(from 0deg,#000 0deg 15deg,transparent 15deg 30deg);animation:vSpin 16s linear infinite,vHue 24s linear infinite}
.bg-lunares{background-image:radial-gradient(circle,rgba(255,255,255,.3) 6px,transparent 7px);background-size:48px 48px;animation:vShiftXY 10s linear infinite}