/* ZG: carrusel — comportamiento y flechas compartidos.
   --------------------------------------------------------------------
   Acompaña a zg-carousel.js. Vive en el plugin y no inline en los
   bloques por el mismo motivo que el header: el optimizador mutila el
   CSS inline y el page builder no siempre lo respeta.

   Cada bloque conserva su propio aspecto (tamaños, marco de las fotos,
   máscara de los bordes). Aquí solo está lo que comparten todos:
   el mecanismo de scroll y los controles. */

/* --- Viewport: el contenedor que scrollea --------------------------- */
[data-zg-carousel-viewport] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  /* Barra oculta: el desplazamiento se comunica con las flechas y con
     el propio movimiento, no con una barra gris cruzando la galería. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-zg-carousel-viewport]::-webkit-scrollbar { display: none; }

/* El snap solo entra cuando manda el usuario. Durante el automático
   pelearía contra el scroll que empuja el JS y produciría temblor. */
[data-zg-carousel].is-manual [data-zg-carousel-viewport] {
  scroll-snap-type: x mandatory;
}
[data-zg-carousel].is-manual [data-zg-carousel-track] > * {
  scroll-snap-align: start;
}

/* Arrastre con ratón en escritorio. */
[data-zg-carousel] [data-zg-carousel-viewport] { cursor: grab; }
[data-zg-carousel].is-dragging [data-zg-carousel-viewport] {
  cursor: grabbing;
  scroll-behavior: auto;
}
/* Durante el arrastre, que no se seleccione el texto de las tarjetas. */
[data-zg-carousel].is-dragging [data-zg-carousel-track] {
  user-select: none;
}
/* NADA de `touch-action` aquí. Un contenedor con overflow-x: auto ya
   reparte bien los gestos: horizontal desplaza la tira, vertical hace
   scroll de la página. Forzar `pan-x` BLOQUEA el scroll vertical cuando
   el dedo empieza sobre el carrusel — en móvil, quien apoye el pulgar
   en la tira se queda sin poder bajar por la página. */

/* Foco visible: requisito de accesibilidad y el viewport es enfocable. */
[data-zg-carousel-viewport]:focus-visible {
  outline: 2px solid var(--zg-oro-rosa, #B76E79);
  outline-offset: 4px;
}

/* --- Flechas -------------------------------------------------------- */
.zg-car__nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 24px);
  padding-inline: clamp(20px, 5vw, 100px);
}
.zg-car__arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(183, 110, 121, 0.4);
  border-radius: 50%;
  color: var(--zg-texto, #1C1C1A);
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease,
              color 220ms ease, opacity 220ms ease;
}
.zg-car__arrow:hover:not(:disabled) {
  background: var(--zg-oro-rosa, #B76E79);
  border-color: var(--zg-oro-rosa, #B76E79);
  color: #FFF;
}
.zg-car__arrow:focus-visible {
  outline: 2px solid var(--zg-oro-rosa, #B76E79);
  outline-offset: 3px;
}
.zg-car__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.zg-car__arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* En móvil las flechas se centran: hay menos ancho y el pulgar llega
   mejor al centro que a una esquina. */
@media (max-width: 600px) {
  .zg-car__nav { justify-content: center; }
}