/* Stats Carousel Mobile — CSS base
   Solo actúa por debajo de 767px. No toca absolutamente nada en desktop.
   El JS toma el control fino del ancho de cada card vía inline styles
   (mayor especificidad posible), pero este CSS evita que se vea el layout
   roto de Elementor (grid 2 columnas) durante el instante entre que carga
   la página y que el JS termina de correr. */

@media (max-width: 767px) {
  .stats-carousel-track.e-con {
    display: block !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .stats-carousel-track .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  /* Ancho de fallback por card en puro CSS: evita el flash (FOUC) de las
     5 cards comprimidas en columnas angostas con texto cortado durante
     el instante entre que carga la página y que carousel-v6.js termina
     de calcular el ancho exacto vía sizeCards(). El JS usa
     min(containerWidth*0.7, 215px) — en casi cualquier ancho de mobile
     real (>172px) el tope de 215px es el que gana, así que el fallback
     usa directamente 215px fijo para que no haya salto visual cuando
     el JS toma el control. */
  .stats-carousel-track .e-con-inner > .e-con {
    flex: 0 0 215px !important;
    width: 215px !important;
    min-width: 215px !important;
    max-width: 215px !important;
    box-sizing: border-box !important;
    margin-right: 12px !important;
    margin-left: 0 !important;
  }
}