/* Wrapper de bolas */
.bolas-wrapper {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transition: all 0.5s ease;
}

/* Contenedor de cada bola */
.bola-container {
    position: relative;
    width: 150px;
    height: 150px;
    perspective: 1000px;
}

/* Tamaños específicos (1 pulgada = 96px en pantalla) */
.size-1 .bola-container {
    width: 96px;
    height: 96px;
}

.size-2 .bola-container {
    width: 120px;
    height: 120px;
}

.size-3 .bola-container {
    width: 144px;
    height: 144px;
}

.size-4 .bola-container {
    width: 168px;
    height: 168px;
}

.size-5 .bola-container {
    width: 192px;
    height: 192px;
}

.size-6 .bola-container {
    width: 216px;
    height: 216px;
}

.size-7 .bola-container {
    width: 240px;
    height: 240px;
}

.size-8 .bola-container {
    width: 264px;
    height: 264px;
}

.size-9 .bola-container {
    width: 288px;
    height: 288px;
}

.size-10 .bola-container {
    width: 312px;
    height: 312px;
}

/* Bola principal 3D */
.bola {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    overflow: hidden;
}

/* Efecto hover - bola se eleva y escala */
.size-15 .bola:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-25 .bola:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-35 .bola:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 2.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-45 .bola:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 2.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-55 .bola:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 2.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-65 .bola:hover {
    transform: translateY(-6px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 3.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-75 .bola:hover {
    transform: translateY(-6px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 3.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-85 .bola:hover {
    transform: translateY(-6px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 3.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-95 .bola:hover {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 4.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-105 .bola:hover {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 4.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-115 .bola:hover {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 4.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-125 .bola:hover {
    transform: translateY(-10px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 5.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-135 .bola:hover {
    transform: translateY(-10px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 5.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-145 .bola:hover {
    transform: translateY(-10px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 5.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-155 .bola:hover {
    transform: translateY(-12px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 6.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-165 .bola:hover {
    transform: translateY(-12px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 6.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-175 .bola:hover {
    transform: translateY(-12px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 6.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-185 .bola:hover {
    transform: translateY(-14px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 7.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-195 .bola:hover {
    transform: translateY(-14px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 7.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-205 .bola:hover {
    transform: translateY(-14px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 7.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-215 .bola:hover {
    transform: translateY(-16px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 8.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-225 .bola:hover {
    transform: translateY(-16px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 8.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-235 .bola:hover {
    transform: translateY(-16px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 8.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-245 .bola:hover {
    transform: translateY(-18px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 9.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-255 .bola:hover {
    transform: translateY(-18px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 9.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-265 .bola:hover {
    transform: translateY(-18px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 9.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-275 .bola:hover {
    transform: translateY(-20px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 10.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-285 .bola:hover {
    transform: translateY(-20px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 10.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-295 .bola:hover {
    transform: translateY(-20px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 10.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}
.size-300 .bola:hover {
    transform: translateY(-20px) scale(1.1);
    box-shadow: 
        0 40px 60px rgba(0, 0, 0, 0.5),
        0 0 0 10.5px rgba(255, 255, 255, 0.4),
        inset -25px -25px 50px rgba(0, 0, 0, 0.3),
        inset 15px 15px 40px rgba(255, 255, 255, 0.5);
}

/* Brillo principal */
.bola::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    width: 35%;
    height: 25%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 50%;
    transform: rotate(-30deg);
    filter: blur(3px);
    transition: all 0.4s ease;
}

.bola:hover::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.2) 100%);
    width: 40%;
    height: 30%;
    filter: blur(2px);
}

/* Segundo brillo */
.bola::after {
    content: '';
    position: absolute;
    bottom: 15%;
    right: 10%;
    width: 20%;
    height: 15%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(5px);
    transition: all 0.4s ease;
}

.bola:hover::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
    width: 25%;
    height: 20%;
}

/* Círculo central blanco */
.circulo-central {
    position: relative;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset -3px -3px 10px rgba(0, 0, 0, 0.1),
        inset 2px 2px 5px rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: all 0.4s ease;
}

.size-1 .circulo-central { width: 45px; height: 45px; }
.size-2 .circulo-central { width: 56px; height: 56px; }
.size-3 .circulo-central { width: 67px; height: 67px; }
.size-4 .circulo-central { width: 78px; height: 78px; }
.size-5 .circulo-central { width: 90px; height: 90px; }
.size-6 .circulo-central { width: 101px; height: 101px; }
.size-7 .circulo-central { width: 112px; height: 112px; }
.size-8 .circulo-central { width: 123px; height: 123px; }
.size-9 .circulo-central { width: 134px; height: 134px; }
.size-10 .circulo-central { width: 145px; height: 145px; }

.bola:hover .circulo-central {
    transform: scale(1.1);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.4),
        inset -4px -4px 10px rgba(0, 0, 0, 0.1),
        inset 3px 3px 7px rgba(255, 255, 255, 0.9);
}

/* Letra superior */
.letra {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.size-1 .letra { font-size: 10px; }
.size-2 .letra { font-size: 12px; }
.size-3 .letra { font-size: 14px; }
.size-4 .letra { font-size: 16px; }
.size-5 .letra { font-size: 18px; }
.size-6 .letra { font-size: 20px; }
.size-7 .letra { font-size: 22px; }
.size-8 .letra { font-size: 24px; }
.size-9 .letra { font-size: 26px; }
.size-10 .letra { font-size: 28px; }

.bola:hover .letra {
    color: #000;
    transform: translateY(-2px);
}

/* Número central - Tamaños dinámicos */
.numero {
    font-weight: 900;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    line-height: 1;
}

.size-1 .numero { font-size: 18px; }
.size-2 .numero { font-size: 22px; }
.size-3 .numero { font-size: 26px; }
.size-4 .numero { font-size: 30px; }
.size-5 .numero { font-size: 34px; }
.size-6 .numero { font-size: 38px; }
.size-7 .numero { font-size: 42px; }
.size-8 .numero { font-size: 46px; }
.size-9 .numero { font-size: 50px; }
.size-10 .numero { font-size: 54px; }

.bola:hover .numero {
    color: #000;
    transform: scale(1.1);
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

/* Anillos decorativos - Tamaños dinámicos */
.anillo-externo {
    position: absolute;
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 0.2),
        inset 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    transition: all 0.4s ease;
}

.size-1 .anillo-externo { width: 56px; height: 56px; }
.size-2 .anillo-externo { width: 70px; height: 70px; }
.size-3 .anillo-externo { width: 84px; height: 84px; }
.size-4 .anillo-externo { width: 98px; height: 98px; }
.size-5 .anillo-externo { width: 112px; height: 112px; }
.size-6 .anillo-externo { width: 126px; height: 126px; }
.size-7 .anillo-externo { width: 140px; height: 140px; }
.size-8 .anillo-externo { width: 154px; height: 154px; }
.size-9 .anillo-externo { width: 168px; height: 168px; }
.size-10 .anillo-externo { width: 182px; height: 182px; }

.bola:hover .anillo-externo {
    border-color: rgba(255, 255, 255);
    box-shadow: 
        0 0 15px rgba(255, 255, 255),
        inset 0 0 15px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.anillo-interno {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 0 5px rgba(255, 255, 255, 0.1),
        inset 0 0 5px rgba(0, 0, 0, 0.05);
    z-index: 3;
    transition: all 0.4s ease;
}

.size-1 .anillo-interno { width: 34px; height: 34px; }
.size-2 .anillo-interno { width: 42px; height: 42px; }
.size-3 .anillo-interno { width: 50px; height: 50px; }
.size-4 .anillo-interno { width: 59px; height: 59px; }
.size-5 .anillo-interno { width: 67px; height: 67px; }
.size-6 .anillo-interno { width: 76px; height: 76px; }
.size-7 .anillo-interno { width: 84px; height: 84px; }
.size-8 .anillo-interno { width: 92px; height: 92px; }
.size-9 .anillo-interno { width: 101px; height: 101px; }
.size-10 .anillo-interno { width: 109px; height: 109px; }

.bola:hover .anillo-interno {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 
        0 0 8px rgba(255, 255, 255, 0.3),
        inset 0 0 8px rgba(0, 0, 0, 0.05);
    transform: scale(1.2);
}

/* Colores de las bolas */
.bola-roja {
    background: linear-gradient(145deg, #ff4444, #cc0000, #990000);
}

.bola-azul {
    background: linear-gradient(145deg, #4488ff, #0066cc, #004499);
}

.bola-verde {
    background: linear-gradient(145deg, #44cc44, #00aa00, #007700);
}

.bola-amarilla {
    background: linear-gradient(145deg, #ffcc00, #ff9900, #cc6600);
}

.bola-morada {
    background: linear-gradient(145deg, #9966ff, #6633cc, #440099);
}

/* Animación de rotación sutil */
@keyframes rotacion {
    0%, 100% {
        transform: translateY(0) rotateY(0deg);
    }
    50% {
        transform: translateY(-5px) rotateY(5deg);
    }
}

.bola {
    animation: rotacion 3s ease-in-out infinite;
}

.bola:hover {
    animation: none;
}

/* Animación de brillo pulsante */
@keyframes brillo {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

.bola::before {
    animation: brillo 2s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .size-selector {
        gap: 5px;
        padding: 15px;
    }
    
    .size-btn {
        padding: 8px 15px;
        font-size: 14px;
    }
    
    .bolas-wrapper {
        gap: 15px;
    }
    
    /* Reducir tamaños en móviles */
    .size-7 .bola-container,
    .size-8 .bola-container,
    .size-9 .bola-container,
    .size-10 .bola-container {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 18px;
    }
    
    .size-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .contenedor {
        gap: 20px;
    }
    
    .bola-container {
        width: 120px;
        height: 120px;
    }
    
    .circulo-central {
        width: 55px;
        height: 55px;
    }
    
    .anillo-externo {
        width: 68px;
        height: 68px;
    }
    
    .anillo-interno {
        width: 42px;
        height: 42px;
    }
    
    .letra {
        font-size: 12px;
    }
    
    .numero {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .bola-container {
        width: 100px;
        height: 100px;
    }
    
    .circulo-central {
        width: 45px;
        height: 45px;
    }
    
    .anillo-externo {
        width: 55px;
        height: 55px;
    }
    
    .anillo-interno {
        width: 35px;
        height: 35px;
    }
    
    .letra {
        font-size: 10px;
    }
    
    .numero {
        font-size: 18px;
    }
}

/* Tamaños de bolas de 15px a 300px (de 10 en 10) */

/* ============================================
   CONTENEDORES DE BOLAS
   ============================================ */
.size-15 .bola-container { width: 15px; height: 15px; }
.size-25 .bola-container { width: 25px; height: 25px; }
.size-35 .bola-container { width: 35px; height: 35px; }
.size-45 .bola-container { width: 45px; height: 45px; }
.size-55 .bola-container { width: 55px; height: 55px; }
.size-65 .bola-container { width: 65px; height: 65px; }
.size-75 .bola-container { width: 75px; height: 75px; }
.size-85 .bola-container { width: 85px; height: 85px; }
.size-95 .bola-container { width: 95px; height: 95px; }
.size-105 .bola-container { width: 105px; height: 105px; }
.size-115 .bola-container { width: 115px; height: 115px; }
.size-125 .bola-container { width: 125px; height: 125px; }
.size-135 .bola-container { width: 135px; height: 135px; }
.size-145 .bola-container { width: 145px; height: 145px; }
.size-155 .bola-container { width: 155px; height: 155px; }
.size-165 .bola-container { width: 165px; height: 165px; }
.size-175 .bola-container { width: 175px; height: 175px; }
.size-185 .bola-container { width: 185px; height: 185px; }
.size-195 .bola-container { width: 195px; height: 195px; }
.size-205 .bola-container { width: 205px; height: 205px; }
.size-215 .bola-container { width: 215px; height: 215px; }
.size-225 .bola-container { width: 225px; height: 225px; }
.size-235 .bola-container { width: 235px; height: 235px; }
.size-245 .bola-container { width: 245px; height: 245px; }
.size-255 .bola-container { width: 255px; height: 255px; }
.size-265 .bola-container { width: 265px; height: 265px; }
.size-275 .bola-container { width: 275px; height: 275px; }
.size-285 .bola-container { width: 285px; height: 285px; }
.size-295 .bola-container { width: 295px; height: 295px; }
.size-300 .bola-container { width: 300px; height: 300px; }

/* ============================================
   CÍRCULOS CENTRALES (60% del contenedor)
   ============================================ */
.size-15 .circulo-central { width: 9px; height: 9px; }    /* 60% */
.size-25 .circulo-central { width: 15px; height: 15px; }    /* 60% */
.size-35 .circulo-central { width: 21px; height: 21px; }    /* 60% */
.size-45 .circulo-central { width: 27px; height: 27px; }    /* 60% */
.size-55 .circulo-central { width: 32px; height: 32px; }    /* 60% */
.size-65 .circulo-central { width: 39px; height: 39px; }    /* 60% */
.size-75 .circulo-central { width: 45px; height: 45px; }    /* 60% */
.size-85 .circulo-central { width: 51px; height: 51px; }    /* 60% */
.size-95 .circulo-central { width: 57px; height: 57px; }    /* 60% */
.size-105 .circulo-central { width: 63px; height: 63px; }   /* 60% */
.size-115 .circulo-central { width: 69px; height: 69px; }   /* 60% */
.size-125 .circulo-central { width: 75px; height: 75px; }   /* 60% */
.size-135 .circulo-central { width: 81px; height: 81px; }   /* 60% */
.size-145 .circulo-central { width: 87px; height: 87px; }   /* 60% */
.size-155 .circulo-central { width: 93px; height: 93px; }   /* 60% */
.size-165 .circulo-central { width: 99px; height: 99px; }   /* 60% */
.size-175 .circulo-central { width: 105px; height: 105px; } /* 60% */
.size-185 .circulo-central { width: 111px; height: 111px; } /* 60% */
.size-195 .circulo-central { width: 117px; height: 117px; } /* 60% */
.size-205 .circulo-central { width: 123px; height: 123px; } /* 60% */
.size-215 .circulo-central { width: 129px; height: 129px; } /* 60% */
.size-225 .circulo-central { width: 135px; height: 135px; } /* 60% */
.size-235 .circulo-central { width: 141px; height: 141px; } /* 60% */
.size-245 .circulo-central { width: 147px; height: 147px; } /* 60% */
.size-255 .circulo-central { width: 153px; height: 153px; } /* 60% */
.size-265 .circulo-central { width: 159px; height: 159px; } /* 60% */
.size-275 .circulo-central { width: 165px; height: 165px; } /* 60% */
.size-285 .circulo-central { width: 171px; height: 171px; } /* 60% */
.size-295 .circulo-central { width: 177px; height: 177px; } /* 60% */
.size-300 .circulo-central { width: 180px; height: 180px; } /* 60% */

/* ============================================
   ANILLOS EXTERNOS (75% del contenedor)
   ============================================ */
.size-15 .anillo-externo { width: 11.5px; height: 11.5px; }     /* 75% */
.size-25 .anillo-externo { width: 19px; height: 19px; }     /* 75% */
.size-35 .anillo-externo { width: 25px; height: 25px; }     /* 75% */
.size-45 .anillo-externo { width: 35px; height: 35px; }     /* 75% */
.size-55 .anillo-externo { width: 42px; height: 42px; }     /* 75% */
.size-65 .anillo-externo { width: 49px; height: 49px; }     /* 75% */
.size-75 .anillo-externo { width: 56px; height: 56px; }     /* 75% */
.size-85 .anillo-externo { width: 64px; height: 64px; }     /* 75% */
.size-95 .anillo-externo { width: 71px; height: 71px; }     /* 75% */
.size-105 .anillo-externo { width: 79px; height: 79px; }    /* 75% */
.size-115 .anillo-externo { width: 86px; height: 86px; }    /* 75% */
.size-125 .anillo-externo { width: 94px; height: 94px; }    /* 75% */
.size-135 .anillo-externo { width: 101px; height: 101px; }  /* 75% */
.size-145 .anillo-externo { width: 109px; height: 109px; }  /* 75% */
.size-155 .anillo-externo { width: 116px; height: 116px; }  /* 75% */
.size-165 .anillo-externo { width: 124px; height: 124px; }  /* 75% */
.size-175 .anillo-externo { width: 131px; height: 131px; }  /* 75% */
.size-185 .anillo-externo { width: 139px; height: 139px; }  /* 75% */
.size-195 .anillo-externo { width: 146px; height: 146px; }  /* 75% */
.size-205 .anillo-externo { width: 154px; height: 154px; }  /* 75% */
.size-215 .anillo-externo { width: 161px; height: 161px; }  /* 75% */
.size-225 .anillo-externo { width: 169px; height: 169px; }  /* 75% */
.size-235 .anillo-externo { width: 176px; height: 176px; }  /* 75% */
.size-245 .anillo-externo { width: 184px; height: 184px; }  /* 75% */
.size-255 .anillo-externo { width: 191px; height: 191px; }  /* 75% */
.size-265 .anillo-externo { width: 199px; height: 199px; }  /* 75% */
.size-275 .anillo-externo { width: 206px; height: 206px; }  /* 75% */
.size-285 .anillo-externo { width: 214px; height: 214px; }  /* 75% */
.size-295 .anillo-externo { width: 221px; height: 221px; }  /* 75% */
.size-300 .anillo-externo { width: 225px; height: 225px; }  /* 75% */

/* ============================================
   ANILLOS INTERNOS (55% del contenedor)
   ============================================ */
.size-15 .anillo-interno { width: 7px; height: 7px; }     /* 55% */
.size-25 .anillo-interno { width: 14px; height: 14px; }     /* 55% */
.size-35 .anillo-interno { width: 19px; height: 19px; }     /* 55% */
.size-45 .anillo-interno { width: 25px; height: 25px; }     /* 55% */
.size-55 .anillo-interno { width: 30px; height: 30px; }     /* 55% */
.size-65 .anillo-interno { width: 36px; height: 36px; }     /* 55% */
.size-75 .anillo-interno { width: 41px; height: 41px; }     /* 55% */
.size-85 .anillo-interno { width: 47px; height: 47px; }     /* 55% */
.size-95 .anillo-interno { width: 52px; height: 52px; }     /* 55% */
.size-105 .anillo-interno { width: 58px; height: 58px; }    /* 55% */
.size-115 .anillo-interno { width: 63px; height: 63px; }    /* 55% */
.size-125 .anillo-interno { width: 69px; height: 69px; }    /* 55% */
.size-135 .anillo-interno { width: 74px; height: 74px; }    /* 55% */
.size-145 .anillo-interno { width: 80px; height: 80px; }    /* 55% */
.size-155 .anillo-interno { width: 85px; height: 85px; }    /* 55% */
.size-165 .anillo-interno { width: 91px; height: 91px; }    /* 55% */
.size-175 .anillo-interno { width: 96px; height: 96px; }    /* 55% */
.size-185 .anillo-interno { width: 102px; height: 102px; }  /* 55% */
.size-195 .anillo-interno { width: 107px; height: 107px; }  /* 55% */
.size-205 .anillo-interno { width: 113px; height: 113px; }  /* 55% */
.size-215 .anillo-interno { width: 118px; height: 118px; }  /* 55% */
.size-225 .anillo-interno { width: 124px; height: 124px; }  /* 55% */
.size-235 .anillo-interno { width: 129px; height: 129px; }  /* 55% */
.size-245 .anillo-interno { width: 135px; height: 135px; }  /* 55% */
.size-255 .anillo-interno { width: 140px; height: 140px; }  /* 55% */
.size-265 .anillo-interno { width: 146px; height: 146px; }  /* 55% */
.size-275 .anillo-interno { width: 151px; height: 151px; }  /* 55% */
.size-285 .anillo-interno { width: 157px; height: 157px; }  /* 55% */
.size-295 .anillo-interno { width: 162px; height: 162px; }  /* 55% */
.size-300 .anillo-interno { width: 165px; height: 165px; }  /* 55% */

/* ============================================
   TAMAÑOS DE LETRA (Máximo 30px)
   Progresión proporcional de 3px a 32px
   ============================================ */
.size-15 .letra { font-size: 2px; margin-bottom: 1px; }
.size-25 .letra { font-size: 4px; margin-bottom: 1px; }
.size-35 .letra { font-size: 5px; }
.size-45 .letra { font-size: 6px; margin-bottom: 1px; }
.size-55 .letra { font-size: 7px; margin-bottom: 1px; }
.size-65 .letra { font-size: 8px; margin-bottom: 1px; }
.size-75 .letra { font-size: 9px; margin-bottom: 1px; }
.size-85 .letra { font-size: 10px; margin-bottom: 1px; }
.size-95 .letra { font-size: 11px; margin-bottom: 1px; }
.size-105 .letra { font-size: 12px; margin-bottom: 1px; }
.size-115 .letra { font-size: 13px; margin-bottom: 1px; }
.size-125 .letra { font-size: 14px; margin-bottom: 1px; }
.size-135 .letra { font-size: 15px; margin-bottom: 1px; }
.size-145 .letra { font-size: 16px; }
.size-155 .letra { font-size: 17px; }
.size-165 .letra { font-size: 18px; }
.size-175 .letra { font-size: 19px; }
.size-185 .letra { font-size: 20px; }
.size-195 .letra { font-size: 21px; }
.size-205 .letra { font-size: 22px; }
.size-215 .letra { font-size: 23px; }
.size-225 .letra { font-size: 24px; }
.size-235 .letra { font-size: 25px; }
.size-245 .letra { font-size: 26px; }
.size-255 .letra { font-size: 27px; }
.size-265 .letra { font-size: 28px; }
.size-275 .letra { font-size: 29px; }
.size-285 .letra { font-size: 30px; }
.size-295 .letra { font-size: 31px; }
.size-300 .letra { font-size: 32px; }

/* ============================================
   TAMAÑOS DE NÚMERO (Progresión proporcional)
   Escala de 3px a 90px
   ============================================ */
.size-15 .numero { font-size: 3px; }  
.size-25 .numero { font-size: 6px; }    
.size-35 .numero { font-size: 9px; }    
.size-45 .numero { font-size: 12px; }   
.size-55 .numero { font-size: 15px; }   
.size-65 .numero { font-size: 18px; }   
.size-75 .numero { font-size: 21px; }   
.size-85 .numero { font-size: 24px; }   
.size-95 .numero { font-size: 27px; }   
.size-105 .numero { font-size: 30px; }  
.size-115 .numero { font-size: 33px; }  
.size-125 .numero { font-size: 36px; }  
.size-135 .numero { font-size: 39px; }  
.size-145 .numero { font-size: 42px; }  
.size-155 .numero { font-size: 45px; }  
.size-165 .numero { font-size: 48px; }  
.size-175 .numero { font-size: 51px; }  
.size-185 .numero { font-size: 54px; }  
.size-195 .numero { font-size: 57px; }  
.size-205 .numero { font-size: 60px; }  
.size-215 .numero { font-size: 63px; }  
.size-225 .numero { font-size: 66px; }  
.size-235 .numero { font-size: 69px; }  
.size-245 .numero { font-size: 72px; }  
.size-255 .numero { font-size: 75px; }  
.size-265 .numero { font-size: 78px; }  
.size-275 .numero { font-size: 81px; }  
.size-285 .numero { font-size: 84px; }  
.size-295 .numero { font-size: 87px; }  
.size-300 .numero { font-size: 90px; }

/* ============================================
   BORDES DE ANILLOS EXTERNOS
   Progresión proporcional de 1px a 10px
   ============================================ */
.size-15 .anillo-externo { border: 0.7px solid rgba(255, 255, 255); }
.size-25 .anillo-externo { border: 1px solid rgba(255, 255, 255); }
.size-35 .anillo-externo { border: 1.5px solid rgba(255, 255, 255); }
.size-45 .anillo-externo { border: 1.5px solid rgba(255, 255, 255); }
.size-55 .anillo-externo { border: 2px solid rgba(255, 255, 255); }
.size-65 .anillo-externo { border: 2px solid rgba(255, 255, 255); }
.size-75 .anillo-externo { border: 3px solid rgba(255, 255, 255); }
.size-85 .anillo-externo { border: 3px solid rgba(255, 255, 255); }
.size-95 .anillo-externo { border: 4px solid rgba(255, 255, 255); }
.size-105 .anillo-externo { border: 4px solid rgba(255, 255, 255); }
.size-115 .anillo-externo { border: 4px solid rgba(255, 255, 255); }
.size-125 .anillo-externo { border: 5px solid rgba(255, 255, 255); }
.size-135 .anillo-externo { border: 5px solid rgba(255, 255, 255); }
.size-145 .anillo-externo { border: 5px solid rgba(255, 255, 255); }
.size-155 .anillo-externo { border: 6px solid rgba(255, 255, 255); }
.size-165 .anillo-externo { border: 6px solid rgba(255, 255, 255); }
.size-175 .anillo-externo { border: 6px solid rgba(255, 255, 255); }
.size-185 .anillo-externo { border: 7px solid rgba(255, 255, 255); }
.size-195 .anillo-externo { border: 7px solid rgba(255, 255, 255); }
.size-205 .anillo-externo { border: 7px solid rgba(255, 255, 255); }
.size-215 .anillo-externo { border: 8px solid rgba(255, 255, 255); }
.size-225 .anillo-externo { border: 8px solid rgba(255, 255, 255); }
.size-235 .anillo-externo { border: 8px solid rgba(255, 255, 255); }
.size-245 .anillo-externo { border: 9px solid rgba(255, 255, 255); }
.size-255 .anillo-externo { border: 9px solid rgba(255, 255, 255); }
.size-265 .anillo-externo { border: 9px solid rgba(255, 255, 255); }
.size-275 .anillo-externo { border: 10px solid rgba(255, 255, 255); }
.size-285 .anillo-externo { border: 10px solid rgba(255, 255, 255); }
.size-295 .anillo-externo { border: 10px solid rgba(255, 255, 255); }
.size-300 .anillo-externo { border: 10px solid rgba(255, 255, 255); }

.size-15 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-25 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-35 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-45 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-55 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-65 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-75 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-85 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-95 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-105 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-155 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-125 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-135 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-145 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-155 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-165 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-175 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-185 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 7px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-195 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 7px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-205 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 7px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-215 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-225 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-235 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-245 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 9px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-255 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 9px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-265 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 9px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-275 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-285 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-295 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }
.size-300 .bola { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(255, 255, 255, 0.3), inset -20px -20px 40px rgba(0, 0, 0, 0.3), inset 10px 10px 30px rgba(255, 255, 255, 0.4); }