/* ==========================================================================
   MAGIVERCOL DESIGN SYSTEM V6 · CARRUSEL PREMIUM — v3 (2 ago 2026)

   Diseñado para Magivercol. No es un plugin, no hay librerías: 0 dependencias.
   Todo sale de los tokens del sistema (--mg-*). Ni un color ajeno.

   v2 · A ANCHO COMPLETO ──────────────────────────────────────────────────
   Pedido: de lado a lado, sin márgenes, pegado al header. Cambios frente a v1:
     · fuera el contenedor de 840 px, el radio, el borde y el aura
     · fuera el hueco superior: el carrusel arranca donde acaba el header
     · los mandos pasan a ir superpuestos sobre la imagen, no debajo

   ALTURA ─────────────────────────────────────────────────────────────────
   A ancho completo, mantener 16:9 daría 864 px de alto en una pantalla de
   1536 px: el carrusel se comería la pantalla entera y el hero quedaría
   fuera de vista. Por eso en escritorio la altura es fluida y acotada:

       height: clamp(320px, 34vw, 560px)

   con object-fit:cover, que recorta por el centro sin deformar nada.
       1024 px de ancho  ->  348 px de alto
       1536 px de ancho  ->  522 px de alto
       1920 px de ancho  ->  560 px de alto (tope)

   En móvil no hace falta acotar nada: 16:9 completo, sin recorte añadido.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Contenedor a sangre, pegado al header
   -------------------------------------------------------------------------- */
body.mg .mg-carrusel{
  position:relative;
  width:100%;
  margin:0;
  padding:0;
  background:#0A0A0B;          /* el negro del sistema mientras carga */
}
body.mg .mg-carrusel__in{
  position:relative;
  width:100%;
}

/* El wrapper del tema mete un margen superior en todas las plantillas que no
   son el inicio; en el inicio con carrusel hay que anularlo para que quede
   realmente pegado al header. */
body.mg.template-home .mt-4:has(> .mg-carrusel:first-child){margin-top:0 !important}
body.mg .mg-carrusel:first-child{margin-top:0}

/* --------------------------------------------------------------------------
   2 · Ventana y pista
   El desplazamiento es un translate3d sobre la pista: una sola propiedad
   compuesta, sin reflow. Es lo que sostiene los 60 FPS.
   -------------------------------------------------------------------------- */
body.mg .mg-carrusel__win{
  position:relative;
  overflow:hidden;
  background:#0A0A0B;
  touch-action:pan-y;                    /* el swipe horizontal es nuestro */
}
body.mg .mg-carrusel__track{
  display:flex;
  will-change:transform;
  transform:translate3d(0,0,0);
}
body.mg .mg-carrusel__track.is-anim{
  transition:transform var(--mg-car-dur,500ms) cubic-bezier(.32,.72,0,1);
}

/* --------------------------------------------------------------------------
   3 · Cada banner — sin separación entre uno y otro
   -------------------------------------------------------------------------- */
body.mg .mg-carrusel__slide{
  flex:0 0 100%;
  min-width:0;
  display:block;
  position:relative;
  aspect-ratio:16 / 9;                   /* reserva el hueco: CLS 0 */
  background:#0A0A0B;
}
/* El punto focal lo decide cada banner con data-foco, porque cada arte tiene
   el logotipo en un sitio distinto. Sin data-foco, se recorta por el centro. */
body.mg .mg-carrusel__slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center var(--mg-foco,50%);
  display:block;
  -webkit-user-drag:none;
  user-select:none;
}
body.mg .mg-carrusel__slide[data-foco="arriba"] img{--mg-foco:0%}
body.mg .mg-carrusel__slide[data-foco="alto"]   img{--mg-foco:25%}
body.mg .mg-carrusel__slide[data-foco="bajo"]   img{--mg-foco:75%}
body.mg .mg-carrusel__slide[data-foco="abajo"]  img{--mg-foco:100%}

/* Los banners no son enlaces: no fingen serlo. */
body.mg .mg-carrusel__slide[data-sin-enlace]{cursor:default}

/* --------------------------------------------------------------------------
   4 · Flechas — Botón Ghost V6, ahora sobre la imagen
   -------------------------------------------------------------------------- */
body.mg .mg-carrusel__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 2px 6px -1px rgba(0,0,0,.14),0 8px 22px -12px rgba(0,0,0,.6);
  color:var(--mg-ink);
  cursor:pointer;
  opacity:0;
  transition:opacity .3s ease,background .25s ease,transform .18s ease;
  z-index:3;
}
body.mg .mg-carrusel__in:hover .mg-carrusel__nav,
body.mg .mg-carrusel__nav:focus-visible{opacity:1}
body.mg .mg-carrusel__nav:hover{background:#fff}
body.mg .mg-carrusel__nav:active{transform:translateY(-50%) scale(.94)}
body.mg .mg-carrusel__nav--prev{left:24px}
body.mg .mg-carrusel__nav--next{right:24px}
body.mg .mg-carrusel__nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}

/* --------------------------------------------------------------------------
   5 · Indicadores — superpuestos, sobre un velo que garantiza el contraste
   Barras, no puntos: el activo se alarga y se rellena con el tiempo que
   queda de autoplay. Es el detalle que separa esto de un slider genérico.
   -------------------------------------------------------------------------- */
body.mg .mg-carrusel__dots{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:7px;
  padding:34px 0 16px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.42));
  pointer-events:none;                   /* el velo no bloquea el swipe */
}
body.mg .mg-carrusel__dot{
  pointer-events:auto;
  position:relative;
  width:22px;
  height:4px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.42);
  cursor:pointer;
  overflow:hidden;
  transition:width .42s var(--mg-ease-pill),background .3s ease;
}
body.mg .mg-carrusel__dot:hover{background:rgba(255,255,255,.6)}
body.mg .mg-carrusel__dot.is-on{width:46px;background:rgba(255,255,255,.34)}
body.mg .mg-carrusel__dot.is-on::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  border-radius:999px;
  background:#fff;
  transform-origin:left;
  transform:scaleX(0);
}
body.mg .mg-carrusel__dot.is-on.is-corriendo::after{
  animation:mgCarProgreso var(--mg-car-int,3000ms) linear forwards;
}
body.mg .mg-carrusel__dot:focus-visible{outline:2px solid #fff;outline-offset:3px}

@keyframes mgCarProgreso{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --------------------------------------------------------------------------
   6 · Altura acotada en escritorio
   -------------------------------------------------------------------------- */
@media (min-width:860px){
  body.mg .mg-carrusel__slide{
    aspect-ratio:auto;
    height:clamp(340px, 38vw, 620px);
  }
}

@media (max-width:859px){
  body.mg .mg-carrusel__nav{display:none}        /* en móvil manda el swipe */
  body.mg .mg-carrusel__dots{padding:26px 0 12px;gap:6px}
  body.mg .mg-carrusel__dot{width:18px;height:3.5px}
  body.mg .mg-carrusel__dot.is-on{width:34px}
}

/* --------------------------------------------------------------------------
   7 · El hero, más cerca del carrusel
   Con el carrusel a sangre encima, el aire de arriba del hero se ve enorme
   y la frase "Entrega inmediata" queda flotando sola. Medido en producción:
   34 px de hueco en móvil, 78 px en escritorio.
   Solo se acorta cuando el hero va justo detrás del carrusel; en cualquier
   otra página el hero conserva su respiración original.
   -------------------------------------------------------------------------- */
body.mg .mg-carrusel + .mg-hero{
  padding-top:36px;
}
@media (max-width:859px){
  body.mg .mg-carrusel + .mg-hero{padding-top:14px}
}

/* --------------------------------------------------------------------------
   8 · Accesibilidad
   -------------------------------------------------------------------------- */
body.mg .mg-carrusel__slide:focus-visible{
  outline:2px solid var(--mg-blue);
  outline-offset:-4px;
}
@media (prefers-reduced-motion:reduce){
  body.mg .mg-carrusel__track.is-anim{transition:none}
  body.mg .mg-carrusel__dot.is-on.is-corriendo::after{animation:none;transform:scaleX(1)}
}