.main-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    min-height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    /* overflow: visible permite que elementos como los brazos sobresalgan libremente */
    overflow: visible;
}

/* El Rombo Degradado de Fondo */
.diamond-bg {
    position: absolute;
    width: 360px;
    height: 360px;
    /* Degradado replicando los tonos: morado -> blanco -> amarillo/naranja */
    background: linear-gradient(135deg, #a78bfa 0%, #ddd6fe 25%, #fdfbf7 50%, #fef08a 75%, #fca5a5 100%);
    border-radius: 80px;
    transform: rotate(45deg);
    z-index: 1;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Imagen de la Chica */
.jumping-lady {
    position: absolute;
    z-index: 2;
    width: 100%;
    max-width: 650px;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* pointer-events en none asegura que no interfiera con interacciones futuras si las hubiese */
    pointer-events: none;
    /* Filtro ligero para integrar mejor los colores si es necesario */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
}

/* Contenedor del Ícono Circular */
.icon-circle {
    position: absolute;
    z-index: 3;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid #8b3dff;
    /* Borde morado */
    bottom: 12%;
    right: 28%;
    /* Posicionado justo por la rodilla según el diseño */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    box-shadow: 0 10px 20px rgba(139, 61, 255, 0.2);
}

/* El fondo dinámico del círculo (forma de onda) */
.icon-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #8b3dff;
    /* clip-path crea el corte curvo dejando la esquina inferior derecha transparente */
    clip-path: circle(72% at 15% 15%);
    z-index: 0;
}

/* Estilos para el SVG del bailarín */
.icon-circle svg {
    position: relative;
    z-index: 1;
    width: 80%;
    height: 80%;
}

.hero-shape-container {
    perspective: 1000px;
}
.hero-rhombus {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #e0e7ff 0%, #fff7ed 100%);
}
.glass-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}
.course-card-img {
    aspect-ratio: 1/1;
    object-fit: cover;
}
.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}