/* Visible en mobile+tablet; oculto en desktop (>=1200px) */
.my-mobile-carousel { display:block; width:100%; }
@media (min-width:1200px){ .my-mobile-carousel{ display:none !important; } }

/* === VIEWPORT con Fallback === */
.my-mobile-carousel .mmc-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:16px;
  /* Si el navegador soporta aspect-ratio, úsalo */
  aspect-ratio: 4 / 3; /* mobile por defecto */
}
/* Fallback (altura) con padding-top si aspect-ratio no aplica / fue pisado */
.my-mobile-carousel .mmc-viewport::before{
  content:""; display:block; padding-top:75%; /* 4:3 = 75% */
}
/* En tablet usamos 16:9 */
@media (min-width:768px) and (max-width:1199px){
  .my-mobile-carousel .mmc-viewport{ border-radius:18px; aspect-ratio:16/9; }
  .my-mobile-carousel .mmc-viewport::before{ padding-top:56.25%; } /* 16:9 */
}

/* El contenido real ocupa TODO el viewport (encima del pseudo) */
.my-mobile-carousel .mmc-viewport > *{
  position:absolute; inset:0; /* top/right/bottom/left:0 */
}

/* === TRACK (ul) === */
.my-mobile-carousel .mmc-track{
  display:flex; width:100%; height:100%;
  margin:0 !important; padding:0 !important; list-style:none !important;
  gap:0 !important; column-gap:0 !important; row-gap:0 !important;
  will-change:transform; transition:transform 300ms ease; touch-action:pan-y;
  box-sizing:border-box;
}

/* === SLIDE (li) === */
.my-mobile-carousel .mmc-slide{
  flex:0 0 100%; max-width:100%; height:100%;
  overflow:hidden; position:relative; box-sizing:border-box;
}

/* === IMG === */
.my-mobile-carousel .mmc-img,
.my-mobile-carousel .mmc-slide img{
  display:block !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  margin:0 !important; border:0; border-radius:inherit;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}

/* Dots */
.my-mobile-carousel .mmc-dots{
  position:relative; /* fuera del overlay absoluto */
  inset:auto;        /* para que quede debajo del viewport */
  display:flex; gap:8px; justify-content:center; align-items:center;
  margin-top:10px;
}
.my-mobile-carousel .mmc-dots button{
  width:8px; height:8px; border-radius:999px; border:none;
  background:rgba(0,0,0,.25); padding:0;
}
.my-mobile-carousel .mmc-dots button[aria-current="true"]{
  width:24px; background:rgba(0,0,0,.6);
}

/* Fallback sin JS: scroll-snap */
.no-js .my-mobile-carousel .mmc-track{ overflow-x:auto; scroll-snap-type:x mandatory; }
.no-js .my-mobile-carousel .mmc-slide{ scroll-snap-align:center; }

/* Blindaje por estilos globales del tema */
.my-mobile-carousel ul, .my-mobile-carousel li{
  margin:0 !important; padding:0 !important; list-style:none !important;
}

/* Si Elementor marcó el widget como oculto en tablet/mobile, forzamos visibilidad */
@media (max-width:1199px){
  .elementor-widget-shortcode.elementor-hidden-tablet .my-mobile-carousel,
  .elementor-widget-shortcode.elementor-hidden-phone .my-mobile-carousel{
    display:block !important;
  }
}