/* ──────────────────────────────────────────────────────────────
   Widget: Ecosystem / Sobre Nosotros
   Desktop: dos columnas — panel de texto (izq.) + anillo (der.)
   Mobile:  anillo nativo (238px, sin scale) + acordeón debajo
   Las posiciones de las imágenes se calculan en PHP como
   CSS custom properties (--ld/--td desktop, --lm/--tm mobile).
────────────────────────────────────────────────────────────── */

/* ── Título de sección ────────────────────────────────────── */
.beps-eco__section-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    color: #130F32;
    margin: 0 0 48px; /* default; Elementor responsive_control lo sobreescribe */
}

/* ── Layout principal ─────────────────────────────────────── */
.beps-ecosystem {
    display: flex;
    align-items: center;
    gap: 60px;
}

.beps-eco__left {
    flex: 1;
    min-width: 0;
}

.beps-eco__right {
    flex: 0 0 auto;
}

/* ── Panel izquierdo (desktop) ────────────────────────────── */

/* Paneles inactivos ocultos en desktop */
.beps-eco__panel:not(.beps-eco__panel--active) {
    display: none;
}

/* Fila: número + título */
.beps-eco__panel-header {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 16px;
}

.beps-eco__num {
    flex-shrink: 0;
    min-width: 56px;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.2;
    color: #130F32;
}

.beps-eco__title {
    flex: 1;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    color: #130F32;
    margin: 0;
}

/* Descripción alineada bajo el título */
.beps-eco__desc {
    padding-left: calc(56px + 24px);
    max-width: 660px;
    color: #49465B;
    line-height: 1.6;
}

.beps-eco__desc p       { margin: 0 0 12px; }
.beps-eco__desc p:last-child { margin-bottom: 0; }
.beps-eco__desc a       { color: inherit; text-decoration: underline; }

/* Botón del acordeón: oculto en desktop */
.beps-eco__acc-toggle {
    display: none;
}

/* ── Círculo ──────────────────────────────────────────────── */

/* Wrapper: pad(72) + ring(418) + pad(72) = 562px desktop */
.beps-eco__circle-wrap {
    position: relative;
    width: 562px;
}

.beps-eco__ring {
    position: absolute;
    left: 72px;
    top: 72px;
    width: 418px;
    height: 418px;
    border-radius: 50%;
    border: 1px solid #E8E8E8;
    pointer-events: none;
}

/* ── Imagen y etiqueta ────────────────────────────────────── */
.beps-eco__img-wrap {
    position: absolute;
    width: 143px;
    cursor: pointer;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
}

.beps-eco__img-wrap:focus-visible {
    outline: 2px solid #130F32;
    outline-offset: 4px;
    border-radius: 50%;
}

/* Frame con overflow:hidden garantiza el recorte circular */
.beps-eco__img-frame {
    display: block;
    width: 143px;
    height: 143px;
    border-radius: 50%;
    overflow: hidden;
    filter: grayscale(100%);
    transition: filter 0.3s ease, box-shadow 0.3s ease;
}

.beps-eco__img-wrap--active .beps-eco__img-frame {
    filter: none;
    box-shadow: 0px 4px 25.1px 9px #130F3224;
}

.beps-eco__img {
    display: block;
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    border-radius: 0;
}

.beps-eco__img--placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #E8E8E8;
}

.beps-eco__label {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    line-height: 21px;
    font-weight: 400;
    color: #130F32;
}

.beps-eco__img-wrap--active .beps-eco__label {
    font-weight: 600;
}

/* ── Responsive 1200px ────────────────────────────────────── */
@media (max-width: 1200px) {
    .beps-ecosystem {
        gap: 40px;
    }
}

/* ── Responsive 1024px ────────────────────────────────────── */
@media (max-width: 1024px) {
    .beps-eco__section-title {
        font-size: 34px;
        margin-bottom: 40px;
    }

    .beps-eco__num,
    .beps-eco__title {
        font-size: 24px;
    }

    .beps-ecosystem {
        gap: 28px;
        align-items: flex-start;
    }
}

/* ── Mobile ≤ 768px — acordeón ────────────────────────────── */
@media (max-width: 768px) {

    /* Título de sección (tamaño; margen lo controla Elementor) */
    .beps-eco__section-title {
        font-size: 28px;
        line-height: 1.25;
    }

    /* Círculo arriba, acordeón abajo */
    .beps-ecosystem {
        flex-direction: column-reverse;
        gap: 0;
        align-items: center;
    }

    /* Right: círculo centrado, sin recorte de imágenes */
    .beps-eco__right {
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: visible; /* NUNCA overflow:hidden, clips las imágenes */
        margin-bottom: 40px; /* separación entre círculo y acordeón */
    }

    /* Círculo mobile nativo: 238px ring + pad 49px cada lado = 336px wrapper
       El pad = img_h + 8 garantiza 8px de margen en todos los bordes */
    .beps-eco__circle-wrap {
        width: 336px;
        height: var(--wrap-h-m) !important; /* altura calculada en PHP */
        transform: none !important;
        margin-bottom: 0 !important;
    }

    /* Anillo mobile: 238px, centrado en el wrapper de 336px */
    .beps-eco__ring {
        left: 49px;
        top: 49px;
        width: 238px;
        height: 238px;
    }

    /* Posiciones mobile desde CSS custom properties (calculadas en PHP) */
    .beps-eco__img-wrap {
        width: 82px;
        left: var(--lm) !important;
        top:  var(--tm) !important;
    }

    /* Imagen 82x82 en mobile */
    .beps-eco__img-frame {
        width: 82px;
        height: 82px;
    }

    /* Etiqueta más pequeña — más ancha que el círculo (82px), centrada */
    .beps-eco__label {
        font-size: 11px;
        line-height: 14px;
        margin-top: 5px;
        width: 110px;
        margin-left: -14px; /* (82 - 110) / 2 */
    }

    /* Left: ancho completo */
    .beps-eco__left {
        width: 100%;
        text-align: left;
    }

    /* ── Acordeón ──────────────────────────────────────────── */

    /* Todos los paneles visibles como filas */
    .beps-eco__panel,
    .beps-eco__panel:not(.beps-eco__panel--active) {
        display: block !important;
        border-top: 1px solid #E8E8E8;
        border-bottom: none;
    }

    .beps-eco__panel:first-child {
        border-top: none !important;
    }

    .beps-eco__panel:last-child,
    .beps-eco__panel:last-of-type {
        border-bottom: none !important;
    }

    /* Cabecera: fila clickeable */
    .beps-eco__panel-header {
        align-items: center;
        gap: 12px;
        padding: 16px 0;
        margin-bottom: 0;
        cursor: pointer;
    }

    .beps-eco__num {
        min-width: 40px;
        font-size: 24px;
        font-weight: 300;
    }

    .beps-eco__title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
    }

    /* Botón +/− visible en mobile */
    .beps-eco__acc-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        flex-shrink: 0;
        background: none;
        border: none;
        padding: 4px 0 4px 8px;
        cursor: pointer;
        color: #130F32;
        line-height: 1;
    }

    .beps-eco__acc-icon::before {
        content: '+';
        font-size: 22px;
        font-weight: 300;
        display: block;
        line-height: 1;
    }

    .beps-eco__panel--active .beps-eco__acc-icon::before {
        content: '−';
    }

    /* Descripción: oculta por defecto, visible en panel activo */
    .beps-eco__desc {
        display: none;
        padding-left: calc(40px + 12px);
        max-width: 100%;
        padding-bottom: 16px;
        font-size: 14px;
        line-height: 1.55;
    }

    .beps-eco__panel--active .beps-eco__desc {
        display: block;
    }
}

/* ── Mobile ≤ 480px ───────────────────────────────────────── */
@media (max-width: 480px) {

    .beps-eco__section-title {
        font-size: 24px;
    }

    .beps-eco__right {
        margin-bottom: 80px;
    }
}