/* =========================
    ORBITA (ORIGINAL)
========================= */

.orbit{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;

    animation:orbit-spin 35s linear infinite;
}

/* =========================
    NODOS (ORIGINAL DESKTOP)
========================= */

.node{
    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%, -50%)
    rotate(calc(45deg * var(--i)))
    translate(180px)
    rotate(calc(-45deg * var(--i)));

    text-align:center;
}

/* =========================
    CONTENIDO DEL NODO
========================= */

.node-content{
    display:flex;
    flex-direction:column;
    align-items:center;

    animation:counter-spin 35s linear infinite;
}

/* =========================
    CIRCULO
========================= */

.node-circle{
    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:white;
    color:#006872;

    border:1px solid #bdc9ca;

    box-shadow:0 6px 14px rgba(0,0,0,0.08);

    transition:all .35s ease;
}

/* =========================
    TEXTO
========================= */

.node-label{
    margin-top:6px;
    font-size:11px;
    text-transform:uppercase;
    color:#3e494a;
    letter-spacing:.05em;
}

/* =========================
    HOVER
========================= */

.node:hover .node-circle{
    transform:scale(1.2);
    background:#fd6c00;
    color:white;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

/* =========================
    ANIMACIONES
========================= */

@keyframes orbit-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

@keyframes counter-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(-360deg); }
}

/* =========================
    LINEAS DE ORBITA
========================= */

.orbit-line{
    position:absolute;
    border-radius:50%;
    border:2px dashed rgba(0,104,114,0.45);
    pointer-events:none;
}

/* ORBITA PRINCIPAL */
.orbit-line-1{
    width:360px;
    height:360px;
}

/* ORBITA EXTERIOR */
.orbit-line-2{
    width:420px;
    height:420px;
    opacity:.4;
}

/* =========================
    FIX SOLO MOBILE
========================= */

@media (max-width: 640px){

    /* CONTENEDOR */
    .relative.w-\[420px\]{
        width:280px !important;
        height:280px !important;
    }

    /*  AJUSTE CLAVE: radio más equilibrado */
    .node{
        transform:
        translate(-50%, -50%)
        rotate(calc(45deg * var(--i)))
        translate(120px)
        rotate(calc(-45deg * var(--i)));

        z-index:10;
    }

    /*  CENTRO MÁS PEQUEÑO */
    .absolute.w-40{
        width:100px !important;
        height:100px !important;
        z-index:1;
    }

    /* NODOS MÁS PEQUEÑOS */
    .node-circle{
        width:42px;
        height:42px;
    }

    /* TEXTO */
    .node-label{
        font-size:9px;
    }

    /* ÓRBITAS MÁS PEQUEÑAS */
    .orbit-line-1{
        width:200px;
        height:200px;
    }

    .orbit-line-2{
        width:260px;
        height:260px;
    }

}