feat: Ajuste de ejecucion de ruleta, aplicacion de CC

src/components/game/Ruleta/RuletaSVG.tsx

@@ -71,8 +71,8 @@ export default function RuletaSVG({ categorias, rotacion, isSpinning, onClick }:
   return (
     <div className="relative flex flex-col items-center justify-center w-full select-none">
 
-      {/* ─── Puntero (fuera del SVG, fijo arriba) ─── */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 z-20" style={{ marginTop: '35px' }}>
+      {/* ─── Puntero ─── */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 z-20" style={{ marginTop: '0px' }}>
         <img
           src="./img/indicador.png"
           alt="Indicador"
@@ -81,7 +81,7 @@ export default function RuletaSVG({ categorias, rotacion, isSpinning, onClick }:
         />
       </div>
 
-      {/* ─── SVG principal (ruleta + anillo + soporte) ─── */}
+      {/* ─── SVG principal ─── */}
       <svg
         viewBox={`0 0 ${VIEWBOX_W} ${VIEWBOX_H}`}
         onClick={!isSpinning ? onClick : undefined}
@@ -101,7 +101,8 @@ export default function RuletaSVG({ categorias, rotacion, isSpinning, onClick }:
         {/* ══════ GRUPO GIRATORIO: Segmentos + centro ══════ */}
         <g
           style={{
-            transformOrigin: `${CX}px ${CY}px`,
+            transformBox: 'fill-box',
+            transformOrigin: 'center center',
             transform: `rotate(${rotacion}deg)`,
             transition: 'transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99)',
           }}
@@ -120,7 +121,8 @@ export default function RuletaSVG({ categorias, rotacion, isSpinning, onClick }:
             const textOffsetX = i === 0 ? 0 : i === 1 ? -40 : i === 2 ? 30 : i === 3 ? 38 : 0
             const textOffsetY = i === 0 ? -45 : i === 1 ? 10 : i === 3 ? -12 : 0
             const textPos = { x: textPosRaw.x + textOffsetX, y: textPosRaw.y + textOffsetY }
-            const imgSize = 60
+            const imgSize = i === 1 ? 58 : i === 2 ? 95 : i === 3 ? 88 : 70
+            const imgOffsetY = i === 0 ? 12 : i === 3 ? 15 : 0
 
             /* Imágenes por segmento */
             const imgs = ['agua.png', 'residuos.png', 'energia.png', 'movilidad.png']
@@ -142,7 +144,7 @@ export default function RuletaSVG({ categorias, rotacion, isSpinning, onClick }:
                 <image
                   href={`./img/${imgs[i]}`}
                   x={imgCenter.x - imgSize / 2}
-                  y={imgCenter.y - imgSize / 2}
+                  y={imgCenter.y - imgSize / 2 + imgOffsetY}
                   width={imgSize}
                   height={imgSize}
                   preserveAspectRatio="xMidYMid meet"