.elementor-21902 .elementor-element.elementor-element-6981b48{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-21902 .elementor-element.elementor-element-6981b48 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-21902 .elementor-element.elementor-element-6981b48 .elementor-divider-separator{width:100%;}.elementor-21902 .elementor-element.elementor-element-6981b48 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-21902 .elementor-element.elementor-element-3639130{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-21902 .elementor-element.elementor-element-3639130 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-21902 .elementor-element.elementor-element-3639130 .elementor-divider-separator{width:100%;}.elementor-21902 .elementor-element.elementor-element-3639130 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-21902 .elementor-element.elementor-element-e57fc13{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-21902 .elementor-element.elementor-element-e57fc13 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-21902 .elementor-element.elementor-element-e57fc13 .elementor-divider-separator{width:100%;}.elementor-21902 .elementor-element.elementor-element-e57fc13 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-21902 .elementor-element.elementor-element-0bf04d4{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-21902 .elementor-element.elementor-element-0bf04d4 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-21902 .elementor-element.elementor-element-0bf04d4 .elementor-divider-separator{width:100%;}.elementor-21902 .elementor-element.elementor-element-0bf04d4 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-21902 .elementor-element.elementor-element-5318c26{width:var( --container-widget-width, 103.559% );max-width:103.559%;--container-widget-width:103.559%;--container-widget-flex-grow:0;}.elementor-21902 .elementor-element.elementor-element-5318c26 > .elementor-widget-container{margin:360px 384px 360px 458px;padding:16px 50px 16px 16px;}/* Start custom CSS for html, class: .elementor-element-5318c26 */<style>
    /* --- 1. CONFIGURACIÓN DEL CONTENEDOR PRINCIPAL --- */
    .contenedor-sistema {
        position: relative;
        width: 100%;
        /* Altura: 2.8 veces el radio externo para dar aire arriba/abajo */
        height: calc(2.8 * var(--radio-ext)); 
        min-height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;
    }

    /* --- 2. VARIABLES DE TAMAÑO (CONFIGURA AQUÍ) --- */
    :root {
        --radio-ext: 16rem;  /* Radio órbita grande */
        --radio-int: 9rem;   /* Radio órbita pequeña */
    }

    /* --- 3. ESTRUCTURA COMPARTIDA (POSICIONAMIENTO) --- */
    /* Esto clava las órbitas y el núcleo en el centro absoluto */
    .orbita-posicion,
    .nucleo-central {
        position: absolute !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centrado matemático */
        display: grid;
        place-items: center;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1;
    }

    /* Tamaños específicos asignados por variable */
    .orbita-posicion.externa {
        width: calc(2 * var(--radio-ext));
        height: calc(2 * var(--radio-ext));
        z-index: 1;
        --radio-actual: var(--radio-ext); /* Variable local para cálculos */
    }

    .orbita-posicion.interna {
        width: calc(2 * var(--radio-int));
        height: calc(2 * var(--radio-int));
        z-index: 5;
        --radio-actual: var(--radio-int); /* Variable local para cálculos */
    }

    .nucleo-central {
        width: auto;
        height: auto;
        z-index: 10;
    }

   /* --- 4. ANIMACIÓN Y DISEÑO DEL CÍRCULO CSS --- */
    .orbita-giro {
        position: relative;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        
        /* DISEÑO DEL CÍRCULO (CSS PURO) */
        border: 5px solid #d1d5db; /* Color gris suave */
        border-radius: 50%;        /* Esto lo hace redondo */
        box-sizing: border-box;    /* Para que el borde no aumente el tamaño total */
        
        /*  sombra para darle volumen */
        /* box-shadow: 0 0 15px rgba(0,0,0,0.05); */

        /* La animación dura 90s, es lineal e infinita */
        animation: animacion-rotar 90s linear infinite forwards;
    }
    /* --- 5. SATÉLITES (LOGOS) --- */
    .satelite {
        position: absolute;
        display: grid;
        place-items: center;
        
        /* CÁLCULOS MATEMÁTICOS AUTOMÁTICOS */
        --d: calc(var(--i) / var(--total));
        --angulo-inicial: -0.25turn; /* Empezar a las 12 en punto */
        --giro-completo: 1turn;
        --angulo: calc((var(--giro-completo) * var(--d)) + var(--angulo-inicial));
        
        /* Fórmula mágica: Rota orbita -> Mueve al radio -> Contrarresta rotación del logo */
        transform: rotate(var(--angulo)) translate(var(--radio-actual)) rotate(calc(-1 * var(--angulo)));
    }

    .satelite img {
        /* Contrarresta el giro de la órbita principal para que el logo siempre mire arriba */
        animation: animacion-contrarrotar 90s linear infinite forwards;
        display: block;
        width: 100%; 
        height: auto;
    }

    /* --- 6. TAMAÑOS INDIVIDUALES DE LOGOS --- */
    
    /* Núcleo */
    .logo-centro { width: 5rem; }

    /* Externa */
    .satelite.ext-santander { width: 8rem; }
    .satelite.ext-ibm { width: 5rem; }
    .satelite.ext-paypal { width: 7rem; }
    .satelite.ext-barclays { width: 6rem; }
    .satelite.ext-mckinsey { width: 8rem; }
    .satelite.ext-bbva { width: 5rem; }
    .satelite.ext-caixa { width: 5rem; }
    .satelite.ext-accenture { width: 7rem; }

    /* Interna */
    .satelite.int-stanford { width: 6rem; }
    .satelite.int-iese { width: 5rem; }
    .satelite.int-mit { width: 4rem; }
    .satelite.int-harvard { width: 7rem; }
    .satelite.int-ie { width: 2.5rem; }


    /* --- 7. KEYFRAMES (ANIMACIONES) --- */
    @keyframes animacion-rotar {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-360deg); } /* Sentido antihorario */
    }

    @keyframes animacion-contrarrotar {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); } /* Sentido horario para compensar */
    }


    /* --- 8. RESPONSIVE (MÓVIL Y TABLET) --- */
    
    @media (max-width: 1024px) {
        :root {
            /* En pantallas pequeñas usamos % del ancho de pantalla (vw) */
            --radio-ext: 38vw; 
            --radio-int: 20vw;
        }
        .contenedor-sistema { height: 85vw; }

        /* Ajuste de tamaños de logos en móvil */
        .logo-centro { width: 12vw; }

        /* Externa Móvil */
        .satelite.ext-santander { width: 18vw; }
        .satelite.ext-ibm { width: 12vw; }
        .satelite.ext-paypal { width: 16vw; }
        .satelite.ext-barclays { width: 12vw; }
        .satelite.ext-mckinsey { width: 18vw; }
        .satelite.ext-bbva { width: 12vw; }
        .satelite.ext-caixa { width: 12vw; }
        .satelite.ext-accenture { width: 16vw; }

        /* Interna Móvil */
        .satelite.int-stanford { width: 14vw; }
        .satelite.int-iese { width: 10vw; }
        .satelite.int-mit { width: 8vw; }
        .satelite.int-harvard { width: 14vw; }
        .satelite.int-ie { width: 6vw; }
    }
</style>/* End custom CSS */