/* =========================================================
   formas.css · Cosmic Tribu
   Librería de figuras simples para los productos (sitio y Taller).
   Cada figura es:  <div class="orb-box"><div class="orb f-NOMBRE"><i></i><i></i></div></div>
   Colores: variables --a, --b, --c en el .orb (vienen de "colores" del JSON).
   Efectos: clase fx-NOMBRE en el .orb-box (orbes) o en el .media (imágenes).
   ========================================================= */

.orb-box{position:relative;height:170px;display:grid;place-items:center}
.orb{
  --a:#ff2bd6; --b:#3a0f6a; --c:#00f0ff;
  position:relative;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff 0 4%,var(--a) 28%,var(--b) 76%);
  box-shadow:0 0 40px -6px var(--a),inset -10px -14px 24px rgba(0,0,0,.45)
}
.orb>i{position:absolute;display:block}
.orb::before,.orb::after,.orb>i::before,.orb>i::after{content:'';position:absolute;display:block}
/* Las figuras compuestas dibujan con sus piezas, no con el fondo del .orb */
.orb.f-polvo,.orb.f-cinturon,.orb.f-luna,.orb.f-estrella,.orb.f-cometa,.orb.f-cristal,.orb.f-hongo,
.orb.f-cactus,.orb.f-planta,.orb.f-ojo,.orb.f-piramide,.orb.f-portal,.orb.f-cohete,
.orb.f-triangulo,.orb.f-orbitas,.orb.f-monton,.orb.f-nube,.orb.f-chispas,.orb.f-destello,.orb.f-explosion,
.orb.f-lluvia,.orb.f-brote,.orb.f-suculenta,.orb.f-cuadritos,.orb.f-planta-magica,.orb.f-cometa-estelar,.orb.f-cometa-lluvia,.orb.f-cartucho,
.orb.f-gomitas,.orb.f-chocolate,.orb.f-brownie,.orb.f-paleta,.orb.f-dulce,.orb.f-dulcero,.orb.f-charola{background:none;box-shadow:none;border-radius:0}

/* ---------- Esfera (por defecto) ---------- */
/* usa el estilo base del .orb */

/* ---------- Polvo ---------- */
.orb.f-polvo{width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,var(--a) 1.5px,transparent 2.2px) 0 0/11px 11px,radial-gradient(circle,var(--b) 1px,transparent 1.8px) 5px 6px/9px 9px;
  -webkit-mask:radial-gradient(circle,#000 45%,transparent 70%);mask:radial-gradient(circle,#000 45%,transparent 70%);
  animation:fo-girar 30s linear infinite}

/* ---------- Anillo (tipo Saturno) ---------- */
.orb.f-anillo::after{left:-36px;right:-36px;top:39px;height:18px;border-radius:50%;border:3px solid var(--c);transform:rotate(-16deg);box-shadow:0 0 12px -2px var(--c)}

/* ---------- Cinturón (tres estrellas alineadas) ---------- */
.orb.f-cinturon{width:140px;height:80px;border-radius:40px;border:1px dashed var(--b);
  background:
    radial-gradient(circle at 25% 64%,#fff 0 4px,var(--a) 5px,transparent 13px),
    radial-gradient(circle at 50% 50%,#fff 0 4px,var(--a) 5px,transparent 13px),
    radial-gradient(circle at 75% 36%,#fff 0 4px,var(--a) 5px,transparent 13px),
    linear-gradient(135deg,#1b0a33,#0a0414)}

/* ---------- Agujero negro ---------- */
.orb.f-agujero{background:radial-gradient(circle,#000 0 32%,transparent 34%),conic-gradient(var(--a),var(--b),var(--c),var(--a));
  box-shadow:0 0 50px -4px var(--b);animation:fo-girar 7s linear infinite}

/* ---------- Frasco ---------- */
.orb.f-frasco{width:68px;height:98px;border-radius:16px 16px 30px 30px;margin-top:14px;
  background:linear-gradient(180deg,var(--a),var(--b) 55%,var(--c));
  box-shadow:0 0 40px -6px var(--b),inset 0 6px 0 rgba(255,255,255,.35),inset 8px 0 0 rgba(255,255,255,.12);
  animation:fo-tono 9s linear infinite}
.orb.f-frasco::before{left:10px;right:10px;top:-14px;height:14px;border-radius:5px 5px 2px 2px;background:rgba(244,234,213,.85)}

/* ---------- Frasco clásico (el original de la v1: sin tapa, el tono gira) ---------- */
.orb.f-frasco-clasico{width:68px;height:98px;border-radius:16px 16px 30px 30px;
  background:linear-gradient(180deg,var(--a),var(--b) 55%,var(--c));
  box-shadow:0 0 40px -6px var(--b),inset 0 6px 0 rgba(255,255,255,.35);
  animation:fo-tono 9s linear infinite}

/* ---------- Carta astral ---------- */
.orb.f-carta{width:110px;height:110px;
  background:repeating-conic-gradient(from 0deg,var(--a) 0 1.5deg,transparent 1.5deg 30deg),radial-gradient(circle,#1a0b2e 0 58%,var(--b) 59% 62%,#1a0b2e 63%);
  box-shadow:0 0 30px -8px var(--a);animation:fo-girar 24s linear infinite}
.orb.f-carta::after{content:'✶';inset:0;display:grid;place-items:center;color:var(--c);font-size:34px;line-height:1}

/* ---------- Planeta con luna ---------- */
.orb.f-planeta-luna>i:first-child{inset:-24px;border-radius:50%;border:1px dashed rgba(244,234,213,.2);animation:fo-girar 7s linear infinite}
.orb.f-planeta-luna>i:first-child::before{width:20px;height:20px;border-radius:50%;top:-10px;left:calc(50% - 10px);
  background:radial-gradient(circle at 35% 35%,#fff 0 12%,var(--c) 62%);box-shadow:0 0 12px var(--c)}

/* ---------- Luna ---------- */
.orb.f-luna{width:96px;height:96px;border-radius:50%;box-shadow:inset 22px -10px 0 0 var(--a);
  filter:drop-shadow(0 0 14px var(--a));animation:fo-mecer 7s ease-in-out infinite}
.orb.f-luna>i:first-child{width:9px;height:9px;border-radius:50%;right:-24px;top:4px;background:var(--c);box-shadow:0 0 10px var(--c);animation:fo-titilar 2.6s ease-in-out infinite}
.orb.f-luna>i:last-child{width:5px;height:5px;border-radius:50%;right:-4px;top:-16px;background:var(--b);box-shadow:0 0 8px var(--b);animation:fo-titilar 3.4s ease-in-out infinite reverse}

/* ---------- Estrella ---------- */
.orb.f-estrella{width:110px;height:110px;filter:drop-shadow(0 0 14px var(--a));animation:fo-titilar 3s ease-in-out infinite}
.orb.f-estrella::before{inset:0;background:radial-gradient(circle at 50% 52%,#fff 0 9%,var(--a) 34%,var(--b) 82%);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.orb.f-estrella::after{inset:-16px;border-radius:50%;border:2px solid var(--c);opacity:.45}

/* ---------- Cometa ---------- */
.orb.f-cometa{width:130px;height:100px;transform:rotate(-28deg)}
.orb.f-cometa::before{right:20px;top:36px;width:112px;height:28px;border-radius:50%;background:linear-gradient(to left,var(--a),transparent 92%);filter:blur(1px)}
.orb.f-cometa>i:first-child{right:24px;top:47px;width:92px;height:8px;border-radius:4px;background:linear-gradient(to left,var(--b),transparent)}
.orb.f-cometa>i:last-child{right:24px;top:41px;width:70px;height:4px;border-radius:2px;background:linear-gradient(to left,var(--c),transparent);animation:fo-estela 1.6s ease-in-out infinite}
.orb.f-cometa::after{right:4px;top:34px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,var(--a) 64%);box-shadow:0 0 24px var(--a)}

/* ---------- Cometa con destellos ---------- */
.orb.f-cometa-estelar{width:140px;height:110px;transform:rotate(-28deg)}
.orb.f-cometa-estelar::before{right:22px;top:40px;width:122px;height:30px;border-radius:50%;background:linear-gradient(to left,var(--a),transparent 92%);filter:blur(1px)}
.orb.f-cometa-estelar>i:first-child{right:26px;top:52px;width:104px;height:6px;border-radius:3px;background:linear-gradient(to left,var(--b),transparent);animation:fo-estela 1.6s ease-in-out infinite}
.orb.f-cometa-estelar>i:first-child::before,.orb.f-cometa-estelar>i:first-child::after,.orb.f-cometa-estelar>i:last-child::before{clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:fo-titilar 2s ease-in-out infinite}
.orb.f-cometa-estelar>i:first-child::before{left:32px;top:-24px;width:18px;height:18px;background:radial-gradient(circle,#fff 0 40%,var(--c) 80%);animation-delay:-.6s}
.orb.f-cometa-estelar>i:first-child::after{left:4px;top:10px;width:14px;height:14px;background:radial-gradient(circle,#fff 0 40%,var(--b) 80%);animation-delay:-1.3s}
.orb.f-cometa-estelar>i:last-child{inset:0;animation:fo-brillo 1.8s ease-in-out infinite;
  background:radial-gradient(circle at 10% 50%,var(--c) 0 1.5px,transparent 2.5px),radial-gradient(circle at 22% 36%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 30% 64%,var(--b) 0 2px,transparent 3px),
    radial-gradient(circle at 44% 40%,var(--c) 0 1.5px,transparent 2.5px),radial-gradient(circle at 54% 66%,#fff 0 1px,transparent 2px),radial-gradient(circle at 64% 34%,var(--b) 0 1.5px,transparent 2.5px)}
.orb.f-cometa-estelar>i:last-child::before{left:96px;top:8px;width:26px;height:26px;background:radial-gradient(circle,#fff 0 40%,var(--c) 80%);animation-delay:-.2s}
.orb.f-cometa-estelar::after{right:6px;top:38px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#fff 0 24%,var(--a) 66%);box-shadow:0 0 26px var(--a),0 0 8px #fff}

/* ---------- Lluvia de cometas ---------- */
.orb.f-cometa-lluvia{width:130px;height:120px;filter:drop-shadow(0 0 6px var(--a))}
.orb.f-cometa-lluvia::before,.orb.f-cometa-lluvia::after,.orb.f-cometa-lluvia>i{height:10px;opacity:0;
  background:radial-gradient(circle at calc(100% - 5px) 50%,#fff 0 2px,var(--a) 3.5px,transparent 6px),
    linear-gradient(90deg,transparent,var(--b) 70%,var(--a)) 0 50%/calc(100% - 5px) 3px no-repeat;
  animation:fo-fugaz 2.8s ease-in infinite}
.orb.f-cometa-lluvia::before{left:8px;top:22px;width:92px}
.orb.f-cometa-lluvia::after{left:28px;top:62px;width:72px;animation-delay:-1s;animation-duration:2.4s;
  background:radial-gradient(circle at calc(100% - 5px) 50%,#fff 0 2px,var(--c) 3.5px,transparent 6px),
    linear-gradient(90deg,transparent,var(--c) 70%,#fff) 0 50%/calc(100% - 5px) 3px no-repeat}
.orb.f-cometa-lluvia>i:first-child{left:0;top:92px;width:62px;animation-delay:-1.8s;animation-duration:3.1s}
.orb.f-cometa-lluvia>i:last-child{left:52px;top:4px;width:54px;animation-delay:-2.4s;animation-duration:2.6s;
  background:radial-gradient(circle at calc(100% - 5px) 50%,#fff 0 2px,var(--c) 3.5px,transparent 6px),
    linear-gradient(90deg,transparent,var(--c) 70%,#fff) 0 50%/calc(100% - 5px) 3px no-repeat}

/* ---------- Portal ---------- */
.orb.f-portal{width:116px;height:116px;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,var(--c) 14%,transparent 44%)}
.orb.f-portal::before{inset:0;border-radius:50%;border:4px dashed var(--a);box-shadow:0 0 16px var(--a),inset 0 0 16px var(--a);animation:fo-girar 10s linear infinite}
.orb.f-portal::after{inset:17px;border-radius:50%;border:3px solid var(--b);border-top-color:transparent;box-shadow:0 0 12px var(--b);animation:fo-girar 5s linear infinite reverse}
.orb.f-portal>i:first-child{inset:33px;border-radius:50%;border:2px dotted var(--c);animation:fo-girar 3.5s linear infinite}

/* ---------- Cartucho ---------- */
.orb.f-cartucho{width:46px;height:128px;transform:rotate(-12deg)}
.orb.f-cartucho::before{left:13px;top:0;width:20px;height:19px;border-radius:7px 7px 3px 3px;background:linear-gradient(90deg,var(--c),#fff 40%,var(--c));box-shadow:0 0 10px -2px var(--c)}
.orb.f-cartucho>i:first-child{left:6px;top:18px;width:34px;height:76px;border-radius:6px;border:2px solid rgba(244,234,213,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0 20%,var(--a) 20%,var(--b));box-shadow:0 0 30px -6px var(--a),inset 0 0 8px rgba(255,255,255,.15)}
.orb.f-cartucho>i:first-child::before{left:4px;top:6px;width:5px;height:60px;border-radius:3px;background:rgba(255,255,255,.3)}
.orb.f-cartucho>i:first-child::after{left:13px;top:2px;width:4px;height:70px;border-radius:2px;background:rgba(244,234,213,.35)}
.orb.f-cartucho>i:last-child{left:4px;top:93px;width:38px;height:22px;border-radius:4px 4px 8px 8px;background:repeating-linear-gradient(180deg,#d8cfe6 0 3px,#8e83a3 3px 5px);box-shadow:0 0 12px -4px var(--c)}
.orb.f-cartucho>i:last-child::before,.orb.f-cartucho>i:last-child::after{border-radius:50%;background:rgba(255,255,255,.65);animation:fo-burbuja 3.2s ease-in infinite}
.orb.f-cartucho>i:last-child::before{left:10px;top:-14px;width:6px;height:6px}
.orb.f-cartucho>i:last-child::after{left:23px;top:-10px;width:4px;height:4px;animation-delay:-1.6s}
.orb.f-cartucho::after{left:15px;top:114px;width:16px;height:10px;border-radius:0 0 4px 4px;background:#b4a8c6}

/* ---------- Gota ---------- */
.orb.f-gota{width:78px;height:78px;margin-top:22px;border-radius:0 50% 50% 50%;transform:rotate(45deg);
  background:radial-gradient(circle at 60% 60%,var(--a) 18%,var(--b) 120%);box-shadow:0 0 38px -6px var(--a),inset 3px 3px 0 rgba(255,255,255,.25)}
.orb.f-gota>i:first-child{width:12px;height:22px;border-radius:50%;left:24px;top:22px;background:rgba(255,255,255,.55);transform:rotate(-45deg)}

/* ---------- Cristal ---------- */
.orb.f-cristal{width:62px;height:118px;filter:drop-shadow(0 0 14px var(--a))}
.orb.f-cristal::before,.orb.f-cristal::after,.orb.f-cristal>i{clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%)}
.orb.f-cristal::before{inset:0;background:linear-gradient(160deg,var(--a),var(--b))}
.orb.f-cristal::after{inset:0;background:linear-gradient(200deg,rgba(255,255,255,.6),transparent 65%);clip-path:polygon(50% 0,50% 100%,0 78%,0 22%)}
.orb.f-cristal>i:first-child{left:-30px;bottom:0;width:30px;height:58px;background:linear-gradient(170deg,var(--c),var(--b))}
.orb.f-cristal>i:last-child{right:-26px;bottom:4px;width:26px;height:46px;background:linear-gradient(190deg,var(--c),var(--b))}

/* ---------- Botella ---------- */
.orb.f-botella{width:62px;height:84px;margin-top:34px;border-radius:18px 18px 24px 24px;border:2px solid rgba(244,234,213,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0 20%,var(--a) 20%,var(--b));
  box-shadow:0 0 34px -6px var(--a),inset 7px 0 0 rgba(255,255,255,.16)}
.orb.f-botella::before{width:24px;height:28px;left:17px;top:-29px;border:2px solid rgba(244,234,213,.5);border-bottom:0;border-radius:6px 6px 0 0;background:rgba(244,234,213,.08)}
.orb.f-botella::after{width:20px;height:12px;left:19px;top:-40px;border-radius:4px;background:var(--c);box-shadow:0 0 10px var(--c)}
.orb.f-botella>i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);animation:fo-burbuja 3s ease-in infinite}
.orb.f-botella>i:first-child{left:16px;bottom:10px}
.orb.f-botella>i:last-child{left:36px;bottom:18px;width:4px;height:4px;animation-delay:-1.4s}

/* ---------- Cápsula ---------- */
.orb.f-capsula{width:118px;height:46px;border-radius:23px;transform:rotate(-28deg);
  background:linear-gradient(90deg,var(--a) 0 50%,var(--b) 50%);box-shadow:0 0 32px -6px var(--a),inset 0 -8px 12px rgba(0,0,0,.25)}
.orb.f-capsula::after{left:14px;right:14px;top:8px;height:7px;border-radius:4px;background:rgba(255,255,255,.35)}
.orb.f-capsula>i:first-child{width:10px;height:10px;right:-14px;top:-14px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);animation:fo-titilar 2.4s ease-in-out infinite}

/* ---------- Píldora viva (colores que fluyen y cambian de tono) ---------- */
.orb.f-pildora{width:66px;height:124px;border-radius:33px;transform:rotate(-18deg);
  background:linear-gradient(180deg,var(--a),var(--b),var(--c),var(--a)) 0 0/100% 300%;
  box-shadow:0 0 44px -6px var(--b),inset 0 8px 0 rgba(255,255,255,.35),inset 10px 0 0 rgba(255,255,255,.12),inset 0 -12px 18px rgba(0,0,0,.22);
  animation:fo-fluir 6s ease-in-out infinite alternate,fo-tono 12s linear infinite}
.orb.f-pildora::before{left:0;right:0;top:calc(50% - 1px);height:2px;background:rgba(13,6,24,.3)}
.orb.f-pildora::after{left:12px;top:16px;width:9px;height:42px;border-radius:5px;background:rgba(255,255,255,.45)}
.orb.f-pildora>i:first-child{width:5px;height:12px;left:14px;bottom:22px;border-radius:3px;background:rgba(255,255,255,.25)}

/* ---------- Vinilo ---------- */
.orb.f-vinilo{width:116px;height:116px;background:repeating-radial-gradient(circle,#0b0613 0 2px,#1f1333 2.5px 4px);
  box-shadow:0 0 36px -8px var(--a),inset 0 0 0 2px rgba(255,255,255,.06);animation:fo-girar 4s linear infinite}
.orb.f-vinilo::before{inset:38px;border-radius:50%;background:radial-gradient(circle,var(--a) 0 55%,var(--b))}
.orb.f-vinilo::after{width:8px;height:8px;left:54px;top:54px;border-radius:50%;background:#0d0618}
.orb.f-vinilo>i:first-child{inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 18%,rgba(255,255,255,.13) 24%,transparent 30% 68%,rgba(255,255,255,.08) 74%,transparent 80%)}
.orb.f-vinilo>i:last-child{width:7px;height:7px;left:48px;top:42px;border-radius:50%;background:var(--c)}

/* ---------- Hongo ---------- */
.orb.f-hongo{width:116px;height:116px;filter:drop-shadow(0 0 12px var(--a))}
.orb.f-hongo::before{left:40px;top:62px;width:36px;height:50px;border-radius:12px 12px 16px 16px;background:linear-gradient(90deg,rgba(244,234,213,.65),rgba(244,234,213,.95) 45%,rgba(244,234,213,.6))}
.orb.f-hongo::after{left:0;top:12px;width:116px;height:62px;border-radius:58px 58px 14px 14px/52px 52px 14px 14px;
  background:
    radial-gradient(circle at 28% 42%,var(--c) 0 6px,transparent 7px),
    radial-gradient(circle at 60% 26%,var(--c) 0 8px,transparent 9px),
    radial-gradient(circle at 80% 58%,var(--c) 0 5px,transparent 6px),
    radial-gradient(circle at 46% 66%,var(--c) 0 4px,transparent 5px),
    linear-gradient(180deg,var(--a),var(--b))}
.orb.f-hongo>i{width:5px;height:5px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);opacity:0;animation:fo-espora 4s ease-out infinite}
.orb.f-hongo>i:first-child{left:20px;top:20px}
.orb.f-hongo>i:last-child{left:88px;top:14px;animation-delay:-2s}

/* ---------- Cactus ---------- */
.orb.f-cactus{width:110px;height:118px;filter:drop-shadow(0 0 10px var(--a))}
.orb.f-cactus::before{left:42px;top:10px;width:26px;height:104px;border-radius:13px 13px 4px 4px;background:linear-gradient(90deg,var(--b),var(--a) 45%,var(--b))}
.orb.f-cactus>i:first-child{left:14px;top:36px;width:32px;height:40px;border:12px solid var(--a);border-top:0;border-right:0;border-radius:0 0 0 18px}
.orb.f-cactus>i:first-child::before{left:-12px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--a)}
.orb.f-cactus>i:last-child{right:14px;top:24px;width:30px;height:34px;border:12px solid var(--a);border-top:0;border-left:0;border-radius:0 0 18px 0}
.orb.f-cactus>i:last-child::before{right:-12px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--a)}
.orb.f-cactus::after{left:47px;top:0;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--c) 60%);box-shadow:0 0 12px var(--c);animation:fo-titilar 3s ease-in-out infinite}

/* ---------- Planta ---------- */
.orb.f-planta{width:110px;height:120px;filter:drop-shadow(0 0 10px var(--a));transform-origin:50% 100%;animation:fo-mecer 5s ease-in-out infinite}
.orb.f-planta::before{left:30px;bottom:0;width:50px;height:30px;border-radius:4px 4px 16px 16px;background:linear-gradient(180deg,var(--b),rgba(13,6,24,.85))}
.orb.f-planta>i:first-child{left:53px;top:30px;width:5px;height:62px;border-radius:3px;background:var(--a)}
.orb.f-planta>i:first-child::before{left:-50px;top:20px;width:52px;height:28px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,var(--a),var(--b));transform:rotate(-18deg)}
.orb.f-planta>i:first-child::after{left:2px;top:2px;width:52px;height:28px;border-radius:100% 0 100% 0;background:linear-gradient(225deg,var(--a),var(--b));transform:rotate(18deg)}
.orb.f-planta::after{left:47px;top:16px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--c) 62%);box-shadow:0 0 14px var(--c)}

/* ---------- Ojo ---------- */
.orb.f-ojo{width:120px;height:70px;animation:fo-parpadeo 6s ease-in-out infinite}
.orb.f-ojo::before{left:-18px;right:-18px;top:-36px;bottom:-36px;
  background:repeating-conic-gradient(var(--a) 0 2deg,transparent 2deg 15deg);
  -webkit-mask:radial-gradient(closest-side,transparent 74%,#000 76% 92%,transparent 94%);mask:radial-gradient(closest-side,transparent 74%,#000 76% 92%,transparent 94%);opacity:.85}
.orb.f-ojo>i:first-child{left:25px;top:0;width:70px;height:70px;border-radius:75% 0;transform:rotate(45deg);border:3px solid var(--a);background:#12051f;box-shadow:0 0 18px var(--a)}
.orb.f-ojo>i:last-child{left:42px;top:17px;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,#05010a 0 28%,var(--c) 32%,var(--b) 80%);box-shadow:0 0 12px var(--c)}
.orb.f-ojo>i:last-child::after{left:9px;top:8px;width:7px;height:7px;border-radius:50%;background:#fff}

/* ---------- Pirámide ---------- */
.orb.f-piramide{width:130px;height:112px;filter:drop-shadow(0 0 12px var(--a))}
.orb.f-piramide::before{left:0;bottom:0;width:65px;height:90px;clip-path:polygon(100% 0,100% 100%,0 100%);background:linear-gradient(170deg,var(--a),var(--b))}
.orb.f-piramide::after{right:0;bottom:0;width:65px;height:90px;clip-path:polygon(0 0,100% 100%,0 100%);background:linear-gradient(190deg,var(--b),rgba(13,6,24,.92))}
.orb.f-piramide>i:first-child{left:50px;top:-6px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,var(--c) 62%);box-shadow:0 0 20px var(--c);animation:fo-titilar 3.2s ease-in-out infinite}
.orb.f-piramide>i:last-child{left:-24px;right:-24px;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent,var(--c),transparent)}

/* ---------- Cohete ---------- */
.orb.f-cohete{width:120px;height:130px;transform:rotate(32deg)}
.orb.f-cohete::before{left:49px;top:92px;width:22px;height:34px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;
  background:linear-gradient(180deg,var(--c),var(--b) 70%,transparent);box-shadow:0 8px 18px -4px var(--b);transform-origin:50% 0;animation:fo-flama .35s ease-in-out infinite alternate}
.orb.f-cohete>i{top:66px;width:17px;height:32px;background:var(--a)}
.orb.f-cohete>i:first-child{left:28px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.orb.f-cohete>i:last-child{left:75px;clip-path:polygon(0 0,100% 100%,0 100%)}
.orb.f-cohete::after{left:42px;top:8px;width:36px;height:88px;border-radius:50% 50% 14px 14px/60% 60% 14px 14px;
  background:
    radial-gradient(circle at 50% 42%,var(--c) 0 8px,rgba(244,234,213,.95) 9px 11px,transparent 12px),
    linear-gradient(180deg,var(--a) 0 20%,transparent 20%),
    linear-gradient(90deg,#c9bfd8,#f4ead5 45%,#b4a8c6);
  box-shadow:0 0 22px -6px var(--a)}

/* ---------- Cuadro ---------- */
.orb.f-cuadro{width:84px;height:84px;border-radius:14px;background:linear-gradient(135deg,var(--a),var(--b));
  box-shadow:0 0 36px -6px var(--a),inset 0 0 0 2px rgba(255,255,255,.12);animation:fo-mecer 8s ease-in-out infinite}
.orb.f-cuadro::after{inset:15px;border-radius:8px;border:2px solid var(--c);opacity:.85}
.orb.f-cuadro>i:first-child{width:16px;height:16px;border-radius:4px;right:-30px;top:-20px;background:var(--c);box-shadow:0 0 10px var(--c);transform:rotate(24deg)}

/* ---------- Cuadritos (varios cuadros pequeños) ---------- */
.orb.f-cuadritos{width:120px;height:120px}
.orb.f-cuadritos::before,.orb.f-cuadritos::after,.orb.f-cuadritos>i,.orb.f-cuadritos>i::before,.orb.f-cuadritos>i::after{border-radius:4px;animation:fo-cuadrito 5s ease-in-out infinite}
.orb.f-cuadritos::before{left:16px;top:20px;width:22px;height:22px;background:var(--a);box-shadow:0 0 12px -2px var(--a);animation-duration:5.5s}
.orb.f-cuadritos::after{left:78px;top:12px;width:16px;height:16px;background:var(--c);box-shadow:0 0 10px -2px var(--c);animation-duration:4.2s;animation-delay:-1.5s}
.orb.f-cuadritos>i:first-child{left:46px;top:46px;width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 16px -2px var(--b);animation-duration:7s}
.orb.f-cuadritos>i:first-child::before{left:-32px;top:38px;width:14px;height:14px;background:var(--b);box-shadow:0 0 10px -2px var(--b);animation-duration:4.6s;animation-delay:-2s}
.orb.f-cuadritos>i:first-child::after{left:46px;top:-14px;width:18px;height:18px;background:var(--a);box-shadow:0 0 10px -2px var(--a);animation-duration:5.8s;animation-delay:-.8s}
.orb.f-cuadritos>i:last-child{left:84px;top:74px;width:18px;height:18px;background:var(--c);box-shadow:0 0 10px -2px var(--c);animation-duration:6.2s;animation-delay:-3s}
.orb.f-cuadritos>i:last-child::before{left:-64px;top:14px;width:12px;height:12px;background:var(--a);box-shadow:0 0 8px -2px var(--a);animation-duration:3.8s;animation-delay:-1s}
.orb.f-cuadritos>i:last-child::after{left:-28px;top:-52px;width:10px;height:10px;background:var(--b);box-shadow:0 0 8px -2px var(--b);animation-duration:4.4s;animation-delay:-2.6s}

/* ---------- Rectángulo ---------- */
.orb.f-rectangulo{width:64px;height:112px;border-radius:12px;transform:rotate(-8deg);background:linear-gradient(180deg,var(--a),var(--b));
  box-shadow:0 0 36px -6px var(--a),inset 6px 0 0 rgba(255,255,255,.14)}
.orb.f-rectangulo::after{left:10px;right:10px;top:46px;height:8px;border-radius:4px;background:var(--c);box-shadow:0 0 10px var(--c)}
.orb.f-rectangulo>i:first-child{left:10px;right:24px;top:62px;height:5px;border-radius:3px;background:rgba(255,255,255,.35)}

/* ---------- Triángulo ---------- */
.orb.f-triangulo{width:116px;height:104px;filter:drop-shadow(0 0 14px var(--a));animation:fo-mecer 7s ease-in-out infinite}
.orb.f-triangulo::before{inset:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(180deg,var(--a),var(--b))}
.orb.f-triangulo::after{left:37px;right:37px;top:50px;bottom:12px;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--c)}

/* ---------- Elipse ---------- */
.orb.f-elipse{width:124px;height:72px;border-radius:50%;background:radial-gradient(ellipse at 35% 30%,#fff 0 5%,var(--a) 32%,var(--b) 80%);
  box-shadow:0 0 38px -6px var(--a),inset -10px -10px 20px rgba(0,0,0,.4)}
.orb.f-elipse::after{inset:-12px -20px;border-radius:50%;border:2px solid var(--c);opacity:.6}

/* ---------- Órbitas (tipo átomo) ---------- */
.orb.f-orbitas{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,var(--a) 13%,transparent 22%);animation:fo-girar 16s linear infinite}
.orb.f-orbitas::before,.orb.f-orbitas::after,.orb.f-orbitas>i:first-child{left:0;right:0;top:34px;height:52px;border-radius:50%}
.orb.f-orbitas::before{border:2px solid var(--b);transform:rotate(30deg);box-shadow:0 0 10px -2px var(--b)}
.orb.f-orbitas::after{border:2px solid var(--c);transform:rotate(-30deg);box-shadow:0 0 10px -2px var(--c)}
.orb.f-orbitas>i:first-child{border:2px solid var(--a);transform:rotate(90deg);box-shadow:0 0 10px -2px var(--a)}
.orb.f-orbitas>i:first-child::before{width:10px;height:10px;border-radius:50%;left:-5px;top:21px;background:var(--c);box-shadow:0 0 10px var(--c)}

/* ---------- Montón (polvo apilado) ---------- */
.orb.f-monton{width:130px;height:110px}
.orb.f-monton::before{left:4px;right:4px;bottom:6px;height:14px;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(4px)}
.orb.f-monton>i:first-child{left:10px;right:10px;bottom:12px;height:64px;border-radius:50% 50% 14px 14px/100% 100% 14px 14px;
  background:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.7px) 0 0/7px 7px,linear-gradient(180deg,var(--a),var(--b));
  box-shadow:0 0 30px -8px var(--a)}
.orb.f-monton>i:last-child{width:5px;height:5px;left:60px;top:26px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c),-22px 14px 0 -1px var(--a),20px 8px 0 -1px var(--c);animation:fo-espora 3.6s ease-out infinite}
.orb.f-monton::after{width:10px;height:10px;left:76px;top:30px;background:#fff;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:fo-titilar 2.2s ease-in-out infinite}

/* ---------- Nube (polvo suave) ---------- */
.orb.f-nube{width:130px;height:110px}
.orb.f-nube::before{inset:0;filter:blur(7px);animation:fo-nube 7s ease-in-out infinite;
  background:radial-gradient(circle at 32% 56%,var(--a) 0 18%,transparent 40%),radial-gradient(circle at 60% 40%,var(--b) 0 20%,transparent 44%),radial-gradient(circle at 70% 66%,var(--c) 0 14%,transparent 38%)}
.orb.f-nube::after{inset:8px;opacity:.9;
  background:radial-gradient(circle at 22% 40%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 48% 26%,#fff 0 1.5px,transparent 2.3px),radial-gradient(circle at 74% 34%,#fff 0 1px,transparent 1.8px),
    radial-gradient(circle at 38% 72%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 66% 78%,#fff 0 1.5px,transparent 2.3px),radial-gradient(circle at 86% 58%,#fff 0 1px,transparent 1.8px)}

/* ---------- Chispas (polvo que titila) ---------- */
.orb.f-chispas{width:124px;height:124px}
.orb.f-chispas::before,.orb.f-chispas::after,.orb.f-chispas>i:first-child,.orb.f-chispas>i:last-child{inset:0}
.orb.f-chispas::before{animation:fo-titilar 2.4s ease-in-out infinite;
  background:radial-gradient(circle at 18% 30%,var(--a) 0 3px,transparent 4.5px),radial-gradient(circle at 52% 14%,var(--a) 0 2px,transparent 3.5px),radial-gradient(circle at 80% 44%,var(--a) 0 3px,transparent 4.5px),radial-gradient(circle at 40% 78%,var(--a) 0 2.5px,transparent 4px)}
.orb.f-chispas::after{animation:fo-titilar 3.1s ease-in-out infinite reverse;
  background:radial-gradient(circle at 30% 52%,var(--b) 0 2.5px,transparent 4px),radial-gradient(circle at 68% 26%,var(--b) 0 2px,transparent 3.5px),radial-gradient(circle at 74% 74%,var(--b) 0 3px,transparent 4.5px),radial-gradient(circle at 12% 70%,var(--b) 0 2px,transparent 3.5px)}
.orb.f-chispas>i:first-child{animation:fo-titilar 1.9s ease-in-out infinite;animation-delay:-.8s;
  background:radial-gradient(circle at 50% 46%,#fff 0 3px,var(--c) 4px,transparent 7px),radial-gradient(circle at 88% 20%,var(--c) 0 2px,transparent 3.5px),radial-gradient(circle at 58% 92%,var(--c) 0 2px,transparent 3.5px)}
.orb.f-chispas>i:last-child{inset:auto;width:18px;height:18px;left:76px;top:60px;background:#fff;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 6px var(--c));animation:fo-titilar 2.8s ease-in-out infinite}

/* ---------- Destello ---------- */
.orb.f-destello{width:110px;height:110px;filter:drop-shadow(0 0 12px var(--a));animation:fo-titilar 2.6s ease-in-out infinite}
.orb.f-destello::before{inset:0;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);background:radial-gradient(circle,#fff 0 9%,var(--a) 30%,var(--b) 72%)}
.orb.f-destello>i{clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:fo-titilar 2s ease-in-out infinite}
.orb.f-destello>i:first-child{width:30px;height:30px;right:-14px;top:-8px;background:var(--c);animation-delay:-.7s}
.orb.f-destello>i:last-child{width:20px;height:20px;left:-8px;bottom:4px;background:var(--b);animation-delay:-1.3s}

/* ---------- Explosión ---------- */
.orb.f-explosion{width:116px;height:116px;filter:drop-shadow(0 0 14px var(--a))}
.orb.f-explosion>i{inset:6px;border-radius:50%;border:3px solid var(--a);opacity:0;animation:fo-onda 2.4s ease-out infinite}
.orb.f-explosion>i:last-child{border-color:var(--c);animation-delay:-1.2s}
.orb.f-explosion::before{inset:0;clip-path:polygon(50.0% 0.0%,55.9% 20.6%,69.1% 3.8%,66.7% 25.1%,85.4% 14.6%,74.9% 33.3%,96.2% 30.9%,79.4% 44.1%,100.0% 50.0%,79.4% 55.9%,96.2% 69.1%,74.9% 66.7%,85.4% 85.4%,66.7% 74.9%,69.1% 96.2%,55.9% 79.4%,50.0% 100.0%,44.1% 79.4%,30.9% 96.2%,33.3% 74.9%,14.6% 85.4%,25.1% 66.7%,3.8% 69.1%,20.6% 55.9%,0.0% 50.0%,20.6% 44.1%,3.8% 30.9%,25.1% 33.3%,14.6% 14.6%,33.3% 25.1%,30.9% 3.8%,44.1% 20.6%);background:radial-gradient(circle,#fff 0 10%,var(--c) 28%,var(--a) 58%,var(--b));animation:fo-latido 1.2s ease-in-out infinite}
.orb.f-explosion::after{inset:30px;clip-path:polygon(62.9% 1.7%,63.0% 27.5%,85.4% 14.6%,72.5% 37.0%,98.3% 37.1%,76.0% 50.0%,98.3% 62.9%,72.5% 63.0%,85.4% 85.4%,63.0% 72.5%,62.9% 98.3%,50.0% 76.0%,37.1% 98.3%,37.0% 72.5%,14.6% 85.4%,27.5% 63.0%,1.7% 62.9%,24.0% 50.0%,1.7% 37.1%,27.5% 37.0%,14.6% 14.6%,37.0% 27.5%,37.1% 1.7%,50.0% 24.0%);background:radial-gradient(circle,#fff 0 30%,var(--c))}

/* ---------- Lluvia ---------- */
.orb.f-lluvia{width:120px;height:124px}
.orb.f-lluvia::before{left:12px;right:12px;top:0;height:62px;filter:drop-shadow(0 0 12px var(--a));
  background:radial-gradient(circle at 28% 68%,var(--a) 0 19px,transparent 20px),radial-gradient(circle at 54% 50%,var(--a) 0 25px,transparent 26px),radial-gradient(circle at 78% 68%,var(--b) 0 17px,transparent 18px),
    linear-gradient(var(--a),var(--b)) 50% 100%/78% 22px no-repeat}
.orb.f-lluvia::after{left:22px;right:22px;top:64px;height:60px;
  background:linear-gradient(to bottom,var(--c) 0 45%,transparent 45%) 6% 0/2px 26px repeat-y,
    linear-gradient(to bottom,var(--b) 0 45%,transparent 45%) 34% 9px/2px 26px repeat-y,
    linear-gradient(to bottom,var(--c) 0 45%,transparent 45%) 64% 4px/2px 26px repeat-y,
    linear-gradient(to bottom,var(--b) 0 45%,transparent 45%) 94% 15px/2px 26px repeat-y;
  -webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent);animation:fo-lluvia .9s linear infinite}

/* ---------- Brote ---------- */
.orb.f-brote{width:110px;height:110px;transform-origin:50% 100%;animation:fo-mecer 6s ease-in-out infinite}
.orb.f-brote::before{left:22px;right:22px;bottom:6px;height:24px;border-radius:50% 50% 8px 8px/100% 100% 8px 8px;background:linear-gradient(180deg,var(--b),rgba(13,6,24,.9))}
.orb.f-brote>i:first-child{left:53px;top:44px;width:5px;height:48px;border-radius:3px;background:var(--a);box-shadow:0 0 10px -2px var(--a)}
.orb.f-brote>i:first-child::before{left:-36px;top:-12px;width:40px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));transform:rotate(-24deg);box-shadow:0 0 14px -4px var(--a)}
.orb.f-brote>i:first-child::after{left:1px;top:-20px;width:40px;height:24px;border-radius:50%;background:linear-gradient(225deg,var(--a),var(--b));transform:rotate(24deg);box-shadow:0 0 14px -4px var(--a)}
.orb.f-brote>i:last-child{width:7px;height:9px;left:30px;top:30px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--c);box-shadow:0 0 8px var(--c);animation:fo-titilar 3s ease-in-out infinite}

/* ---------- Planta con destellos ---------- */
.orb.f-planta-magica{width:116px;height:120px;filter:drop-shadow(0 0 10px var(--a))}
.orb.f-planta-magica::before{left:33px;bottom:0;width:50px;height:30px;border-radius:4px 4px 16px 16px;background:linear-gradient(180deg,var(--b),rgba(13,6,24,.9))}
.orb.f-planta-magica>i:first-child{left:56px;top:34px;width:5px;height:58px;border-radius:3px;background:var(--a);transform-origin:50% 100%;animation:fo-mecer 5s ease-in-out infinite}
.orb.f-planta-magica>i:first-child::before{left:-46px;top:18px;width:48px;height:26px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,var(--a),var(--b));transform:rotate(-16deg)}
.orb.f-planta-magica>i:first-child::after{left:3px;top:2px;width:48px;height:26px;border-radius:100% 0 100% 0;background:linear-gradient(225deg,var(--a),var(--b));transform:rotate(16deg)}
.orb.f-planta-magica::after{left:50px;top:18px;width:17px;height:17px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--c) 62%);box-shadow:0 0 14px var(--c);animation:fo-titilar 3s ease-in-out infinite}
.orb.f-planta-magica>i:last-child{inset:0;animation:fo-brillo 2.6s ease-in-out infinite;
  background:radial-gradient(circle at 18% 22%,#fff 0 1.5px,var(--c) 2.5px,transparent 4px),radial-gradient(circle at 92% 48%,#fff 0 1.5px,var(--a) 2.5px,transparent 4px),radial-gradient(circle at 70% 6%,#fff 0 1px,var(--c) 2px,transparent 3.5px)}
.orb.f-planta-magica>i:last-child::before,.orb.f-planta-magica>i:last-child::after{clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:fo-titilar 2.2s ease-in-out infinite;filter:drop-shadow(0 0 4px var(--c))}
.orb.f-planta-magica>i:last-child::before{left:84px;top:6px;width:24px;height:24px;background:radial-gradient(circle,#fff 0 30%,var(--c) 75%)}
.orb.f-planta-magica>i:last-child::after{left:6px;top:36px;width:18px;height:18px;background:radial-gradient(circle,#fff 0 30%,var(--c) 75%);animation-delay:-1.1s}

/* ---------- Suculenta ---------- */
.orb.f-suculenta{width:116px;height:116px}
.orb.f-suculenta::before{left:30px;right:30px;bottom:2px;height:30px;border-radius:4px 4px 14px 14px;background:linear-gradient(180deg,var(--b),rgba(13,6,24,.9))}
.orb.f-suculenta>i:first-child{left:16px;right:16px;top:0;height:84px;clip-path:polygon(50.0% 0.0%,59.3% 21.5%,79.4% 9.5%,74.3% 32.4%,97.6% 34.5%,80.0% 50.0%,97.6% 65.5%,74.3% 67.6%,79.4% 90.5%,59.3% 78.5%,50.0% 100.0%,40.7% 78.5%,20.6% 90.5%,25.7% 67.6%,2.4% 65.5%,20.0% 50.0%,2.4% 34.5%,25.7% 32.4%,20.6% 9.5%,40.7% 21.5%);background:radial-gradient(circle,var(--c) 0 10%,var(--a) 45%,var(--b));filter:drop-shadow(0 0 10px var(--a))}
.orb.f-suculenta>i:last-child{left:35px;right:35px;top:19px;height:46px;clip-path:polygon(69.1% 3.8%,69.8% 30.2%,96.2% 30.9%,78.0% 50.0%,96.2% 69.1%,69.8% 69.8%,69.1% 96.2%,50.0% 78.0%,30.9% 96.2%,30.2% 69.8%,3.8% 69.1%,22.0% 50.0%,3.8% 30.9%,30.2% 30.2%,30.9% 3.8%,50.0% 22.0%);background:radial-gradient(circle,#fff 0 12%,var(--c) 40%,var(--a));animation:fo-girar 40s linear infinite}

/* =========================================================
   Dulces
   ========================================================= */
/* ---------- Gomitas (ositos) ---------- */
.orb.f-gomitas{width:120px;height:110px}
.orb.f-gomitas::before,.orb.f-gomitas>i{width:44px;height:58px;opacity:.9;background:radial-gradient(circle at 44% 20%,rgba(255,255,255,.75) 0 2.5px,transparent 3.5px),
    radial-gradient(circle at 28% 9%,var(--g) 0 5px,transparent 5.5px),radial-gradient(circle at 72% 9%,var(--g) 0 5px,transparent 5.5px),
    radial-gradient(circle at 50% 24%,var(--g) 0 11.5px,transparent 12px),
    radial-gradient(ellipse 15px 16px at 50% 62%,var(--g) 0 98%,transparent 100%),
    radial-gradient(circle at 17% 50%,var(--g) 0 5.5px,transparent 6px),radial-gradient(circle at 83% 50%,var(--g) 0 5.5px,transparent 6px),
    radial-gradient(circle at 30% 88%,var(--g) 0 6.5px,transparent 7px),radial-gradient(circle at 70% 88%,var(--g) 0 6.5px,transparent 7px);filter:drop-shadow(0 0 7px var(--g));animation:fo-rebote 2.4s ease-in-out infinite}
.orb.f-gomitas::before{--g:var(--a);--r:-14deg;left:4px;top:44px}
.orb.f-gomitas>i:first-child{--g:var(--b);--r:0deg;left:38px;top:14px;animation-delay:-.8s}
.orb.f-gomitas>i:last-child{--g:var(--c);--r:14deg;left:72px;top:46px;animation-delay:-1.6s}

/* ---------- Tableta de chocolate ---------- */
.orb.f-chocolate{width:80px;height:112px;transform:rotate(-10deg)}
.orb.f-chocolate::before{left:5px;top:4px;width:70px;height:96px;border-radius:6px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 24px),repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,transparent 2px 23.3px),
    linear-gradient(135deg,rgba(255,255,255,.18),rgba(0,0,0,.4)),var(--a);
  -webkit-mask:radial-gradient(circle 15px at 100% 0,transparent 97%,#000 100%);mask:radial-gradient(circle 15px at 100% 0,transparent 97%,#000 100%);
  box-shadow:0 0 26px -8px var(--a)}
.orb.f-chocolate>i:first-child{inset:0}
.orb.f-chocolate>i:first-child::before{left:54px;top:-10px;width:26px;height:26px;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);background:radial-gradient(circle,#fff 0 35%,var(--c) 80%);animation:fo-titilar 2.4s ease-in-out infinite}
.orb.f-chocolate>i:first-child::after{left:-14px;top:30px;width:17px;height:17px;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);background:radial-gradient(circle,#fff 0 35%,var(--c) 80%);animation:fo-titilar 2.4s ease-in-out infinite;animation-delay:-1.2s}
.orb.f-chocolate>i:last-child{left:2px;top:50px;width:76px;height:10px;background:linear-gradient(90deg,#b4a8c6,#f4ead5 50%,#b4a8c6);
  clip-path:polygon(0 40%,8% 0,16% 40%,24% 0,32% 40%,40% 0,48% 40%,56% 0,64% 40%,72% 0,80% 40%,88% 0,96% 40%,100% 20%,100% 100%,0 100%)}
.orb.f-chocolate::after{left:1px;top:57px;width:78px;height:54px;border-radius:2px 2px 6px 6px;
  background:linear-gradient(180deg,transparent 38%,var(--c) 38% 52%,transparent 52%),linear-gradient(135deg,var(--b),rgba(13,6,24,.6)),var(--b);
  box-shadow:0 0 22px -8px var(--b)}

/* ---------- Brownie ---------- */
.orb.f-brownie{width:116px;height:96px}
.orb.f-brownie>i:first-child{left:10px;top:42px;width:96px;height:44px;border-radius:4px 4px 8px 8px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 3px,transparent 3px 11px),linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5)),var(--a);box-shadow:0 0 26px -8px var(--a)}
.orb.f-brownie::before{left:8px;top:16px;width:100px;height:32px;border-radius:12px 12px 4px 4px;
  background:radial-gradient(circle at 20% 40%,rgba(255,255,255,.25) 0 2px,transparent 3px),radial-gradient(circle at 60% 30%,rgba(255,255,255,.2) 0 2px,transparent 3px),
    linear-gradient(170deg,rgba(255,255,255,.22),rgba(0,0,0,.2)),var(--a)}
/* aroma: 5 hilitos (2 de ellos son copias con drop-shadow) */
.orb.f-brownie>i:first-child::before,.orb.f-brownie>i:first-child::after,.orb.f-brownie>i:last-child::after{width:18px;height:46px;border:4px solid transparent;border-left-color:rgba(244,234,213,.85);border-radius:50%;opacity:0;animation:fo-aroma 3.2s ease-out infinite;filter:blur(.8px) drop-shadow(0 0 4px var(--c))}
.orb.f-brownie>i:first-child::before{left:2px;top:-66px;filter:drop-shadow(44px 8px 0 rgba(244,234,213,.7)) blur(.8px) drop-shadow(0 0 4px var(--c))}
.orb.f-brownie>i:first-child::after{left:22px;top:-74px;animation-delay:-1.1s;filter:drop-shadow(44px 10px 0 rgba(244,234,213,.7)) blur(.8px) drop-shadow(0 0 4px var(--c))}
.orb.f-brownie>i:last-child::after{left:84px;top:-42px;height:40px;animation-delay:-2.1s}
.orb.f-brownie>i:last-child{left:8px;top:16px;width:100px;height:32px;animation:fo-brillo 2.2s ease-in-out infinite;
  background:radial-gradient(circle at 16% 50%,var(--b) 0 3px,transparent 4px),radial-gradient(circle at 34% 28%,var(--c) 0 2.5px,transparent 3.5px),radial-gradient(circle at 50% 62%,var(--b) 0 3px,transparent 4px),
    radial-gradient(circle at 68% 34%,var(--c) 0 3px,transparent 4px),radial-gradient(circle at 84% 60%,var(--b) 0 2.5px,transparent 3.5px),radial-gradient(circle at 42% 46%,#fff 0 1.5px,transparent 2.5px)}
.orb.f-brownie::after{left:88px;top:2px;width:16px;height:16px;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);background:radial-gradient(circle,#fff 0 35%,var(--c) 80%);animation:fo-titilar 2.6s ease-in-out infinite}

/* ---------- Paleta de remolino ---------- */
.orb.f-paleta{width:92px;height:138px}
.orb.f-paleta::before{left:42px;top:82px;width:8px;height:54px;border-radius:4px;background:linear-gradient(90deg,#d8cfe6,#f4ead5 50%,#c9bfd8)}
.orb.f-paleta>i:first-child{left:2px;top:0;width:88px;height:88px;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 7px,rgba(255,255,255,.22) 7px 9px),conic-gradient(var(--a),var(--b),var(--c),var(--a),var(--b),var(--c),var(--a));
  box-shadow:0 0 34px -6px var(--b),inset -8px -10px 18px rgba(0,0,0,.25);animation:fo-girar 6s linear infinite}
.orb.f-paleta>i:last-child{left:16px;top:12px;width:22px;height:12px;border-radius:50%;background:rgba(255,255,255,.5);transform:rotate(-30deg)}
.orb.f-paleta::after{left:36px;top:84px;width:20px;height:10px;background:var(--c);clip-path:polygon(0 0,50% 40%,100% 0,100% 100%,50% 60%,0 100%)}

/* ---------- Dulce envuelto ---------- */
.orb.f-dulce{width:124px;height:110px;transform:rotate(-14deg)}
.orb.f-dulce::before,.orb.f-dulce>i:first-child{top:31px;width:38px;height:48px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 7px),linear-gradient(90deg,var(--b),var(--a))}
.orb.f-dulce::before{left:0;clip-path:polygon(0 0,100% 38%,100% 62%,0 100%,14% 50%)}
.orb.f-dulce>i:first-child{right:0;clip-path:polygon(100% 0,0 38%,0 62%,100% 100%,86% 50%);background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 7px),linear-gradient(270deg,var(--b),var(--a))}
.orb.f-dulce>i:last-child{left:32px;top:33px;width:60px;height:44px;border-radius:50%;
  background:repeating-linear-gradient(60deg,transparent 0 8px,var(--c) 8px 12px),radial-gradient(circle at 35% 30%,#fff 0 6%,var(--a) 42%,var(--b));
  box-shadow:0 0 30px -6px var(--a),inset -6px -8px 14px rgba(0,0,0,.25)}
.orb.f-dulce>i:last-child::before{left:-16px;top:9px;width:92px;height:26px;border-radius:50%;border:1.5px solid var(--c);opacity:.8;z-index:-1;transform:rotate(65deg);box-shadow:0 0 8px -1px var(--c)}
.orb.f-dulce>i:last-child::after{left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,var(--c));box-shadow:0 0 10px 2px var(--c);
  offset-path:path('M10.56,-19.69 A46,13 65 1,1 49.44,63.69 A46,13 65 1,1 10.56,-19.69');offset-rotate:0deg;offset-anchor:50% 50%;animation:fo-orbita 3.2s linear infinite}
.orb.f-dulce::after{left:46px;top:38px;width:14px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);transform:rotate(-20deg)}

/* ---------- Dulcero (frasco con varios dulces) ---------- */
.orb.f-dulcero{width:122px;height:132px}
.orb.f-dulcero::before{left:76px;top:16px;width:5px;height:50px;border-radius:3px;background:#f4ead5;transform:rotate(14deg)}
.orb.f-dulcero>i:first-child{left:18px;top:44px;width:84px;height:84px;border-radius:16px 16px 28px 28px;border:2px solid rgba(244,234,213,.55);
  background:radial-gradient(circle at 24% 80%,var(--a) 0 10px,transparent 11px),radial-gradient(circle at 50% 84%,var(--b) 0 11px,transparent 12px),radial-gradient(circle at 76% 78%,var(--c) 0 10px,transparent 11px),
    radial-gradient(circle at 36% 60%,var(--c) 0 9px,transparent 10px),radial-gradient(circle at 63% 61%,var(--a) 0 9px,transparent 10px),radial-gradient(ellipse 12px 8px at 48% 42%,var(--b) 0 98%,transparent 100%),
    rgba(255,255,255,.05);
  box-shadow:0 0 30px -8px var(--b),inset 7px 0 0 rgba(255,255,255,.14)}
.orb.f-dulcero>i:first-child::before{left:6px;top:-11px;width:68px;height:12px;border-radius:6px;background:var(--c);box-shadow:0 0 10px -2px var(--c)}
.orb.f-dulcero>i:first-child::after{left:44px;top:-46px;width:32px;height:32px;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 4px,rgba(255,255,255,.22) 4px 5px),conic-gradient(var(--a),var(--b),var(--c),var(--a),var(--b),var(--c),var(--a));animation:fo-girar 6s linear infinite}
.orb.f-dulcero>i:last-child{left:2px;top:88px;width:24px;height:32px;border-radius:3px;transform:rotate(-14deg);
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 2px,transparent 2px 10.6px),repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 2px,transparent 2px 12px),linear-gradient(135deg,rgba(255,255,255,.15),rgba(0,0,0,.45)),var(--b)}
.orb.f-dulcero>i:last-child::after{left:96px;top:-70px;width:16px;height:16px;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);background:radial-gradient(circle,#fff 0 35%,var(--c) 80%);animation:fo-titilar 2.4s ease-in-out infinite}
.orb.f-dulcero::after{left:12px;top:36px;width:12px;height:12px;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);background:radial-gradient(circle,#fff 0 35%,var(--a) 80%);animation:fo-titilar 2.4s ease-in-out infinite;animation-delay:-1.2s}

/* ---------- Charola de dulces ---------- */
.orb.f-charola{width:140px;height:128px}
.orb.f-charola::before{inset:0;background:radial-gradient(ellipse 1.6px 8px at 8px 58px,#fff,var(--c) 45%,transparent),radial-gradient(ellipse 8px 1.6px at 8px 58px,#fff,var(--c) 45%,transparent),radial-gradient(ellipse 1.6px 6px at 96px 6px,#fff,var(--b) 45%,transparent),radial-gradient(ellipse 6px 1.6px at 96px 6px,#fff,var(--b) 45%,transparent),radial-gradient(ellipse 1.6px 9px at 132px 70px,#fff,var(--c) 45%,transparent),radial-gradient(ellipse 9px 1.6px at 132px 70px,#fff,var(--c) 45%,transparent),radial-gradient(ellipse 1.6px 5px at 70px 108px,#fff,var(--b) 45%,transparent),radial-gradient(ellipse 5px 1.6px at 70px 108px,#fff,var(--b) 45%,transparent);animation:fo-brillo 2.8s ease-in-out infinite}
/* brownie */
.orb.f-charola>i:first-child{left:16px;top:66px;width:46px;height:36px;border-radius:6px 6px 4px 4px;
  background:radial-gradient(circle at 20% 22%,var(--b) 0 2.5px,transparent 3.5px),radial-gradient(circle at 48% 14%,var(--c) 0 2.5px,transparent 3.5px),radial-gradient(circle at 76% 24%,var(--b) 0 2.5px,transparent 3.5px),
    linear-gradient(180deg,rgba(255,255,255,.2) 0 30%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.45)),var(--a);box-shadow:0 0 20px -8px var(--a)}
/* cuadrito de chocolate */
.orb.f-charola>i:first-child::before{left:56px;top:14px;width:26px;height:26px;border-radius:3px;transform:rotate(12deg);
  background:linear-gradient(90deg,transparent 46%,rgba(0,0,0,.35) 46% 54%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(0,0,0,.35) 46% 54%,transparent 54%),linear-gradient(135deg,rgba(255,255,255,.2),rgba(0,0,0,.4)),var(--a)}
/* dulce envuelto */
.orb.f-charola>i:first-child::after{left:74px;top:-6px;width:54px;height:24px;transform:rotate(-18deg);
  clip-path:polygon(0 0,30% 32%,36% 8%,64% 8%,70% 32%,100% 0,94% 50%,100% 100%,70% 68%,64% 92%,36% 92%,30% 68%,0 100%,6% 50%);
  background:repeating-linear-gradient(60deg,transparent 0 5px,rgba(255,255,255,.55) 5px 7px),linear-gradient(90deg,var(--b),var(--c) 30% 70%,var(--b))}
/* paleta: palito y remolino */
.orb.f-charola>i:last-child{left:30px;top:22px;width:5px;height:50px;border-radius:3px;background:linear-gradient(90deg,#d8cfe6,#f4ead5 50%,#c9bfd8);transform:rotate(-12deg);transform-origin:50% 100%}
.orb.f-charola>i:last-child::before{left:-17px;top:-34px;width:40px;height:40px;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 4px,rgba(255,255,255,.25) 4px 5.5px),conic-gradient(var(--c),var(--b),var(--a),var(--c),var(--b),var(--a),var(--c));
  box-shadow:0 0 20px -4px var(--b);animation:fo-girar 6s linear infinite}
/* osito de gomita */
.orb.f-charola>i:last-child::after{left:42px;top:12px;width:36px;height:46px;--r:8deg;opacity:.9;background:radial-gradient(circle at 44% 20%,rgba(255,255,255,.75) 0 2px,transparent 3px),
    radial-gradient(circle at 28% 9%,var(--b) 0 4px,transparent 4.5px),radial-gradient(circle at 72% 9%,var(--b) 0 4px,transparent 4.5px),
    radial-gradient(circle at 50% 24%,var(--b) 0 9px,transparent 9.5px),
    radial-gradient(ellipse 12px 13px at 50% 62%,var(--b) 0 98%,transparent 100%),
    radial-gradient(circle at 17% 50%,var(--b) 0 4.5px,transparent 5px),radial-gradient(circle at 83% 50%,var(--b) 0 4.5px,transparent 5px),
    radial-gradient(circle at 30% 88%,var(--b) 0 5px,transparent 5.5px),radial-gradient(circle at 70% 88%,var(--b) 0 5px,transparent 5.5px);filter:drop-shadow(0 0 6px var(--b));animation:fo-rebote 2.4s ease-in-out infinite}
.orb.f-charola::after{left:118px;top:20px;width:16px;height:16px;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);background:radial-gradient(circle,#fff 0 35%,var(--c) 80%);animation:fo-titilar 2.6s ease-in-out infinite}

/* =========================================================
   Movimiento propio de cada figura
   ========================================================= */
@keyframes fo-girar{to{transform:rotate(360deg)}}
@keyframes fo-tono{to{filter:hue-rotate(360deg)}}
@keyframes fo-fluir{to{background-position:0 100%}}
@keyframes fo-fugaz{0%{transform:rotate(30deg) translateX(-34px);opacity:0}18%{opacity:1}70%{opacity:1}100%{transform:rotate(30deg) translateX(46px);opacity:0}}
@keyframes fo-rebote{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}}
@keyframes fo-orbita{0%{offset-distance:0%;z-index:-1}50%{offset-distance:50%;z-index:-1}50.01%{z-index:1}100%{offset-distance:100%;z-index:1}}
@keyframes fo-aroma{0%{opacity:0;translate:0 10px;scale:1 .6}35%{opacity:.9}100%{opacity:0;translate:4px -18px;scale:1.3 1.1}}
@keyframes fo-brillo{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fo-cuadrito{0%,100%{transform:translateY(0) rotate(0);opacity:1}50%{transform:translateY(-6px) rotate(35deg);opacity:.75}}
@keyframes fo-mecer{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes fo-titilar{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.88)}}
@keyframes fo-estela{0%,100%{opacity:.4;transform:scaleX(.8)}50%{opacity:1;transform:scaleX(1)}}
@keyframes fo-parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes fo-flama{from{transform:scaleY(.8)}to{transform:scaleY(1.15)}}
@keyframes fo-burbuja{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-44px);opacity:0}}
@keyframes fo-espora{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(6px,-36px);opacity:0}}
@keyframes fo-nube{0%,100%{transform:scale(.95);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes fo-onda{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes fo-latido{0%,100%{transform:scale(.94)}50%{transform:scale(1.05)}}
@keyframes fo-lluvia{to{background-position:6% 26px,34% 35px,64% 30px,94% 41px}}

/* =========================================================
   Efectos elegibles (campo "efecto" del JSON)
   ========================================================= */
/* Sobre orbes: se mueve la caja completa */
.orb-box.fx-flotar{animation:fo-fx-flotar 6s ease-in-out infinite}
.orb-box.fx-respirar{animation:fo-fx-respirar 5.5s ease-in-out infinite}
.orb-box.fx-deriva{animation:fo-fx-deriva 11s ease-in-out infinite}
.orb-box.fx-pulso{animation:fo-fx-pulso 3.2s ease-in-out infinite}
.orb-box.fx-arcoiris{animation:fo-fx-arcoiris 8s ease-in-out infinite}
@keyframes fo-fx-flotar{0%,100%{transform:translateY(5px)}50%{transform:translateY(-9px)}}
@keyframes fo-fx-respirar{0%,100%{transform:scale(.94)}50%{transform:scale(1.07)}}
@keyframes fo-fx-deriva{0%,100%{transform:translate(0,0)}25%{transform:translate(10px,-6px)}75%{transform:translate(-10px,6px)}}
@keyframes fo-fx-pulso{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.4) saturate(1.3)}}
@keyframes fo-fx-arcoiris{0%,100%{filter:hue-rotate(-40deg)}50%{filter:hue-rotate(40deg)}}

/* Sobre imágenes: la imagen se agranda un poco para que no se vean bordes al moverse */
.media.fx-flotar img.ok{animation:fo-img-flotar 6s ease-in-out infinite}
.media.fx-respirar img.ok{animation:fo-img-respirar 5.5s ease-in-out infinite}
.media.fx-deriva img.ok{animation:fo-img-deriva 16s ease-in-out infinite}
.media.fx-pulso img.ok{animation:fo-fx-pulso 3.2s ease-in-out infinite}
.media.fx-arcoiris img.ok{animation:fo-fx-arcoiris 8s ease-in-out infinite}
@keyframes fo-img-flotar{0%,100%{transform:scale(1.1) translateY(-2.6%)}50%{transform:scale(1.1) translateY(2.6%)}}
@keyframes fo-img-respirar{0%,100%{transform:scale(1.02)}50%{transform:scale(1.1)}}
@keyframes fo-img-deriva{0%,100%{transform:scale(1.15) translate(-2.6%,1.6%)}50%{transform:scale(1.15) translate(2.6%,-1.6%)}}

@media (prefers-reduced-motion:reduce){
  .orb-box,.orb,.orb>i,.orb::before,.orb::after,.orb>i::before,.orb>i::after,.media img{animation:none!important}
}