/**
 * Estilos para Widget Testimonios (Migración Embla)
 * Reemplaza estilos de SplideJS
 */

/* Estructura Embla (Crucial para funcionamiento) */
.agencia-testimonio-carousel {
    overflow: visible;
    /* Permitir que las flechas salgan del contenedor */
    width: 100%;
    position: relative;
}

.agencia-testimonio-carousel .embla__viewport {
    overflow: hidden;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

.agencia-testimonio-carousel .embla__container {
    display: flex;
    gap: 0;
}


/* ========================================================================
   BREAKOUT DINÁMICO (Paridad con Hero Slider Pro)
   Garantiza 100% de ancho sin anular los márgenes/paddings configurados en Elementor
   ======================================================================== */
.e-con:has(.agencia-testimonio-carousel),
.elementor-section:has(.agencia-testimonio-carousel) {
    max-width: none !important;
}

.elementor-widget-agencia_atomico_testimonios,
.elementor-widget-agencia_atomico_testimonios .elementor-widget-container,
.elementor-column:has(.agencia-testimonio-carousel),
.elementor-widget-wrap:has(.agencia-testimonio-carousel) {
    width: 100% !important;
    max-width: none !important;
}

/* Variables responsivas (fallback si Elementor no inyecta) */
@media (max-width: 1024px) {
    .elementor-widget-agencia_atomico_testimonios {
        --slides-per-view: 2;
        --grid-columns: 2;
    }
}

@media (max-width: 767px) {
    .elementor-widget-agencia_atomico_testimonios {
        --slides-per-view: 1;
        --grid-columns: 1;
    }
}

/* Ancho dinámico basado en var(--slides-per-view) */
.agencia-testimonio-carousel .embla__slide {
    position: relative;
    min-width: 0;
    flex: 0 0 calc(100% / var(--slides-per-view, 3));
    max-width: calc(100% / var(--slides-per-view, 3));
}

/* Grid dinámico */
.agencia-testimonios-grid {
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
}

/* Fix: Asegurar object-fit funciona */
.testimonio-avatar img {
    display: block;
    width: 100%;
    height: 100%;
}