/* Mismas forma, materia y cadencia que la portada. Todo queda dentro del componente. */
.cromaya-generation-art { position:relative; display:block; flex:none; width:min(260px,100%); aspect-ratio:1; margin:auto; isolation:isolate; pointer-events:none; }
.cromaya-generation-art > span { position:absolute; display:block; }
.cromaya-generation-art .generation-grid { inset:8%; border:1px solid #ffffff18; border-radius:50%; }
.generation-grid::before,.generation-grid::after { content:''; position:absolute; background:#ffffff14; }
.generation-grid::before { width:1px; top:-12%; bottom:-12%; left:50%; }
.generation-grid::after { height:1px; left:-12%; right:-12%; top:50%; }
.cromaya-generation-art .generation-halo { inset:22%; border-radius:50%; background:#a0d0b926; filter:blur(24px); animation:generation-halo 5.2s ease-in-out infinite; }
.cromaya-generation-art :is(.generation-orbit-one,.generation-orbit-two) { inset:13%; border:1px solid #add8bf4f; border-radius:50%; }
.generation-orbit-one { transform:rotateX(72deg) rotate(-24deg); animation:generation-orbit 14s linear infinite; }
.cromaya-generation-art .generation-orbit-two { inset:24% 2%; border-color:#f7f0dd26; transform:rotateY(68deg) rotate(20deg); animation:generation-orbit-two 17s linear infinite; }
.generation-orbit-one::after,.generation-orbit-two::after { content:''; position:absolute; width:5px; height:5px; top:50%; right:-3px; border-radius:50%; background:#b9dec9; box-shadow:0 0 8px #b9dec980; }
.generation-orbit-two::after { width:3px; height:3px; background:#f1eee6; }
.cromaya-generation-art .generation-shadow { left:22%; right:18%; bottom:14%; height:9%; border-radius:50%; background:#020908ab; filter:blur(10px); animation:generation-shadow 5.2s ease-in-out infinite; }
.cromaya-generation-art .generation-object { left:25%; top:15%; width:51%; height:68%; border-radius:49% 51% 47% 53%/38% 44% 56% 62%; background:radial-gradient(ellipse at 30% 24%,#f5f0e5 0,#e3e8d9 22%,#9bbca8 45%,#587063 67%,#263a31 90%); box-shadow:inset -10px -8px 14px #10251c80,inset 6px 5px 10px #ffffffb3,10px 9px 22px #0009; transform:rotate(-25deg); animation:generation-float 5.2s ease-in-out infinite; }
.generation-object::before { content:''; position:absolute; inset:3%; border-radius:inherit; border:1px solid #fafff26b; }
.generation-opening { display:block; position:absolute; inset:28% 17% 27%; border-radius:50%; background:radial-gradient(ellipse at 65% 20%,#4f6e60,#172820 55%,#0b1611 78%); box-shadow:inset 4px 4px 8px #0b140da9,0 0 1px 5px #e3e8d31f; border:2px solid #a7c6ae90; }
.cromaya-generation-art.is-compact { width:52px; }
.cromaya-generation-panel { width:min(420px,100%); margin:30px auto; padding:24px 24px 30px; border-radius:24px; background:radial-gradient(circle at 60% 35%,#30423b,#17201b 75%); color:#f1eee6; }
.cromaya-generation-panel > p { margin-top:12px; }
.cromaya-generation-panel .muted { color:#c1cec3; }
.canvas-generation-overlay .cromaya-generation-art { width:112px; margin:0; }
.q-img:has(.cromaya-generation-art) { background:#17201b; }
@keyframes generation-float { 0%,100% { transform:translate3d(0,0,0) rotate(-25deg); } 50% { transform:translate3d(4%,-6%,0) rotate(-19deg); } }
@keyframes generation-orbit { from { transform:rotateX(72deg) rotate(-24deg); } to { transform:rotateX(72deg) rotate(336deg); } }
@keyframes generation-orbit-two { from { transform:rotateY(68deg) rotate(20deg); } to { transform:rotateY(68deg) rotate(380deg); } }
@keyframes generation-halo { 0%,100% { opacity:.65; transform:scale(.9); } 50% { opacity:1; transform:scale(1.18); } }
@keyframes generation-shadow { 0%,100% { opacity:.7; transform:scale(.88); } 50% { opacity:1; transform:translateX(4px) scale(1.08); } }
.cromaya-generation-art > span { animation-delay:var(--generation-phase,0s); }
@media(prefers-reduced-motion:reduce) { .cromaya-generation-art > span { animation:none!important; } }