/* =========================================================================
   Carrusel de Contenedores — WebsMéxico
   Variables globales (se sobrescriben desde Ajustes → Carrusel):
   --wm-car-nd / --wm-car-nt / --wm-car-nm  visibles escritorio / tablet / móvil
   --wm-car-gap   separación
   --wm-car-color color de flechas
   --wm-car-bg    fondo de flechas
   ========================================================================= */

.wm-car-wrap{
  position:relative;
  padding-left:40px !important;
  padding-right:40px !important;
}

.wm-car-track{
  --wm-car-n:var(--wm-car-nd-local, var(--wm-car-nd, 4));
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:var(--wm-car-gap-local, var(--wm-car-gap, 12px)) !important;
  width:100%;
  min-width:0;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.wm-car-track::-webkit-scrollbar{display:none}

.wm-car-track > *{
  flex:0 0 calc((100% - (var(--wm-car-n) - 1) * var(--wm-car-gap-local, var(--wm-car-gap, 12px))) / var(--wm-car-n)) !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  scroll-snap-align:start;
}

/* ---------- Flechas ---------- */
.wm-car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--wm-car-bg, #fff);
  color:var(--wm-car-color, #1b5e3b);
  font-size:15px;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  cursor:pointer;
  transition:filter .12s, transform .12s;
}
.wm-car-btn:hover{filter:brightness(.95)}
.wm-car-btn:active{transform:translateY(-50%) scale(.92)}
.wm-car-btn:focus-visible{outline:2px solid var(--wm-car-color, #1b5e3b); outline-offset:2px}
.wm-car-btn[hidden]{display:none}
.wm-car-prev{left:4px}
.wm-car-next{right:4px}

/* Sin desborde o sin flechas: se recupera el espacio lateral */
.wm-car-wrap.wm-car-sin-desborde,
.wm-car-wrap.wm-car-sin-flechas{
  padding-left:0 !important;
  padding-right:0 !important;
}
.wm-car-wrap.wm-car-sin-flechas .wm-car-btn{display:none}

/* ---------- Tablet (breakpoint de Elementor) ---------- */
@media (max-width:1024px){
  .wm-car-track{--wm-car-n:var(--wm-car-nt-local, var(--wm-car-nt, 4))}
}

/* ---------- Móvil (breakpoint de Elementor) ---------- */
@media (max-width:767px){
  .wm-car-track{--wm-car-n:var(--wm-car-nm-local, var(--wm-car-nm, 4))}
  .wm-car-wrap{padding-left:30px !important; padding-right:30px !important}
  .wm-car-btn{width:26px; height:26px; font-size:13px}
  .wm-car-prev{left:2px}
  .wm-car-next{right:2px}
}

@media (prefers-reduced-motion:reduce){
  .wm-car-track{scroll-behavior:auto}
}