/* ==========================================================================
   Componente Modular: Info-grafía Circular de la Luna (3 de 12 Columnas)
   ========================================================================== */

:root {
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Tonos Originales Base */
    --color-amarillo: #FFD000;
    --color-azul: #0084FF;
    --color-rojo: #FF3B30;
    --color-verde: #34C759;
    --color-morado: #AF52DE;
    --color-naranja: #FF9500;
}

.servicios-header{
    position: absolute;
    z-index: 10;
    display: inline-flex;
    margin: 1rem;
    gap: 0.5rem;
}

/* Contenedor Principal Adaptable */
.moon-module-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Mantiene el contenedor perfectamente cuadrado */
    background-color: #0a0b10; /* Fondo oscuro por si la imagen tarda en cargar */
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 1. Imagen de Fondo de la Luna */
.moon-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/bg/servicios-traza_labranza.jpg'); 
    background-size: cover;
    background-position: center;
    opacity: 0.45; /* Estilo minimalista, que no sature el texto */
    z-index: 1;
    mix-blend-mode: luminosity; /* Aplica una estética integrada grisácea */
}

/* 2. Vector Ondas Triangulares (Capa Intermedia) */
.wave-vector-container {
    position: absolute;
    width: 57rem;
    height: 57rem;
    z-index: 2;
    pointer-events: none; /* No interfiere con los clicks o hovers */
    animation: rotation-slow 40s linear infinite reverse;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wave-vector-container svg {
    width: 100%;
    height: 100%;
    filter: blur(1px);
}

/* 3. Ícono Central */
.center-icon-node {
    position: absolute;
    z-index: 5;
    width: 36rem;
    height: 36rem;
    background: rgba(255, 255, 255, 0.08);   
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.4rem;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.15);
    pointer-events: none; /* Permite que el hover pase a través si los nodos se superponen ligeramente */
}

.center-icon-node #alternativas{
    width: 6rem;
}

.circle-node .item_servicios{
    width: 4rem;
}

/* 4. Elementos de la Circunferencia (Nodos Comunes) */
.circle-node {
    position: absolute;
    z-index: 4;
    width: 6.5rem;
    height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    /* Trigonometría CSS para posicionar en círculo */
    /* El radio se calcula al 35% del contenedor para un ajuste armónico perfecto */
    --radius: 116%;
    transform: translate(
        calc(var(--radius) * cos(var(--angle))),
        calc(var(--radius) * sin(var(--angle)))
    );
}

/* Estructura interna de cada nodo (Icono + Texto) */
.node-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: var(--transition-smooth);
    
    /* Estado Reposo: Color Pastel / Balance de blancos alto */
    filter: brightness(0.5) saturate(0.35);
}

.node-content i {
    font-size: 1.3rem;
    margin-bottom: 5px;
    transition: var(--transition-smooth);
}

.node-content span {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.9);
}

/* Estado INTERACTIVO (:hover) - Encendido al color original */
.circle-node:hover .node-content {
    filter: brightness(1) saturate(1.4);
    opacity: 1;
    transform: scale(1.12);
}

/* Inyección de color específico por elemento e iluminación */
.item-amarillo .node-content i { color: var(--color-amarillo); }
.item-amarillo:hover .node-content i { filter: drop-shadow(0 0 8px var(--color-amarillo)); }

.item-azul .node-content i { color: var(--color-azul); }
.item-azul:hover .node-content i { filter: drop-shadow(0 0 8px var(--color-azul)); }

.item-rojo .node-content i { color: var(--color-rojo); }
.item-rojo:hover .node-content i { filter: drop-shadow(0 0 8px var(--color-rojo)); }

.item-verde .node-content i { color: var(--color-verde); }
.item-verde:hover .node-content i { filter: drop-shadow(0 0 8px var(--color-verde)); }

.item-morado .node-content i { color: var(--color-morado); }
.item-morado:hover .node-content i { filter: drop-shadow(0 0 8px var(--color-morado)); }

.item-naranja .node-content i { color: var(--color-naranja); }
.item-naranja:hover .node-content i { filter: drop-shadow(0 0 8px var(--color-naranja)); }

/* Animación sutil de rotación de fondo para los vectores */
@keyframes rotation-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}