/*
Theme Name:   Kadence Child (Mi Tema a Medida)
Description:  Tema hijo para gestionar banners y personalizaciones.
Author:       Tu Nombre
Template:     kadence
Version:      1.0.0
*/
/* --- ESTILOS PARA LOS CÍRCULOS ALEATORIOS --- */
.grid-circulos-aleatorios {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.circulo-item {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease; /* Efecto suave al pasar el ratón */
}

.circulo-item:hover {
    transform: scale(1.05); /* El círculo crece un poco al poner el cursor */
}

.circulo-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Fuerza a que sea un cuadrado perfecto */
    border-radius: 50%; /* Lo convierte en un círculo perfecto */
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra ligera */
}

/* Adaptación para Tablets (3 columnas en lugar de 6) */
@media (max-width: 900px) {
    .grid-circulos-aleatorios {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Adaptación para Móviles (2 columnas) */
@media (max-width: 600px) {
    .grid-circulos-aleatorios {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}