.gmo-gallery {
  --gmo-left-col: 45%;
  --gmo-middle-col: 33%;
  --gmo-right-col: 22%;
  --gmo-col-gap: 14px;
  --gmo-row-gap: 14px;

  --gmo-top-large-h: 255px;
  --gmo-small-h: 150px;
  --gmo-col-23-top-h: 202px;

  --gmo-left-bottom-a: 62%;
  --gmo-left-bottom-b: 38%;

  --gmo-cta-space: 38px;

  --gmo-right-fade-base: #3d0000;
  --gmo-right-fade-width: 95%;
  --gmo-right-fade-opacity: 0.72;

  /* Alturas configurables exclusivas para móvil */
  --gmo-mobile-hero-h: 220px;
  --gmo-mobile-left-bottom-h: 180px;
  --gmo-mobile-middle-h: 180px;
  --gmo-mobile-right-h: 180px;

  /*
   * ALTURA REAL DEL MOSAICO
   * La columna 1 manda.
   */
  --gmo-total-h: calc(
    var(--gmo-top-large-h) +
    var(--gmo-row-gap) +
    var(--gmo-small-h)
  );

  width: 100%;
  max-width: 1260px;
  padding: 16px 18px 12px;
  background: transparent;
  box-sizing: border-box;
  position: relative;
}

.gmo-gallery *,
.gmo-gallery *::before,
.gmo-gallery *::after {
  box-sizing: border-box;
}


/* =====================================================
   CONTENEDOR PRINCIPAL
   ===================================================== */

.gmo-main {
  display: grid;

  grid-template-columns:
    minmax(0, var(--gmo-left-col))
    minmax(0, var(--gmo-middle-col))
    minmax(
      0,
      calc(
        100% -
        var(--gmo-left-col) -
        var(--gmo-middle-col)
      )
    );

  gap: var(--gmo-col-gap);

  /*
   * IMPORTANTE:
   * el mosaico tiene exactamente la altura
   * calculada desde la columna 1.
   */
  height: var(--gmo-total-h);

  align-items: stretch;

  /*
   * El espacio del CTA ya no puede alterar
   * la altura de las columnas.
   */
  padding-bottom: 0;

  margin-bottom: calc(
    var(--gmo-cta-space) + 6px
  );
}


/* =====================================================
   COLUMNAS
   ===================================================== */

.gmo-col {
  min-width: 0;

  display: grid;

  gap: var(--gmo-row-gap);

  /*
   * Todas las columnas tienen exactamente
   * el alto del mosaico.
   */
  height: 100%;

  min-height: 0;
}


/* =====================================================
   COLUMNA 1
   ===================================================== */




/* =====================================================
   COLUMNAS 2 Y 3
   ===================================================== */

.gmo-col-middle,
.gmo-col-right {
  position: relative;

  /*
   * Arriba tiene el alto elegido.
   * Abajo ocupa TODO el espacio restante.
   */
  grid-template-rows:
    var(--gmo-col-23-top-h)
    minmax(0, 1fr);
}


/* =====================================================
   DOS FOTOS INFERIORES COLUMNA 1
   ===================================================== */

.gmo-left-bottom-wrap {
  display: grid;

  grid-template-columns:
    minmax(0, var(--gmo-left-bottom-a))
    minmax(0, var(--gmo-left-bottom-b));

  gap: var(--gmo-col-gap);

  min-height: 0;
  height: 100%;
}


/* =====================================================
   FOTOS
   ===================================================== */

.gmo-panel,
.gmo-right-photo {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: #170707;
}

.gmo-panel img,
.gmo-right-photo img,
.gmo-overlay-word {
  display: block;
  width: 100%;
  height: 100%;
}

.gmo-panel img,
.gmo-right-photo img {
  object-fit: cover;
}


/* =====================================================
   OVERLAY GENERAL DE FOTOS
   ===================================================== */

.gmo-panel::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(40, 0, 0, 0.18) 100%
  );

  pointer-events: none;
}


/* =====================================================
   DEGRADADO COLUMNA 3
   ===================================================== */

.gmo-right-photo::after {
  content: "";

  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: auto;

  width: var(--gmo-right-fade-width);

  opacity: var(--gmo-right-fade-opacity);

  background: linear-gradient(
    270deg,

    var(--gmo-right-fade-base) 0%,

    color-mix(
      in srgb,
      var(--gmo-right-fade-base) 88%,
      transparent
    ) 36%,

    color-mix(
      in srgb,
      var(--gmo-right-fade-base) 42%,
      transparent
    ) 72%,

    transparent 100%
  );

  pointer-events: none;
}


/* =====================================================
   IMAGEN GALERIA
   ===================================================== */

.gmo-overlay-word-wrap {
  position: absolute;

  inset: 0 -10px 0 auto;

  width: 100%;
  height: 100%;

  z-index: 3;

  pointer-events: none;

  display: flex;

  align-items: center;
  justify-content: flex-end;

  overflow: hidden;
}

.gmo-overlay-word {
  width: auto;

  height: 100%;

  max-width: none;
  max-height: 100%;

  object-fit: contain;

  object-position: center right;
}

.gmo-overlay-fallback {
  color: #ff3c38;

  writing-mode: vertical-rl;

  text-orientation: mixed;

  transform: rotate(180deg);

  font-size: clamp(
    42px,
    7vw,
    120px
  );

  line-height: 1;

  letter-spacing: 0.02em;

  font-weight: 700;
}


.gmo-mobile-vertical-span {
  display: none;
}

/* =====================================================
   CTA
   ===================================================== */

.gmo-cta-wrap {
  position: absolute;

  left: 38px;

  bottom: 10px;

  z-index: 5;
}

.gmo-cta {
  color: #ff4a42;

  text-decoration: none;

  font-size: 16px;

  line-height: 1.2;

  display: inline-flex;

  align-items: center;

  gap: 6px;
}

.gmo-cta:hover,
.gmo-cta:focus {
  text-decoration: underline;
}


/* =====================================================
   TABLET
   Mantiene exactamente la misma estructura.
   Solo reduce proporcionalmente.
   ===================================================== */

@media (max-width: 1024px) {

  .gmo-gallery {
    --gmo-col-gap: 10px;

    --gmo-row-gap: 10px;

    --gmo-top-large-h: 220px;

    --gmo-small-h: 130px;

    --gmo-col-23-top-h: 175px;

    padding: 14px 14px 12px;
  }

  .gmo-cta-wrap {
    left: 28px;

    bottom: 8px;
  }

  .gmo-cta {
    font-size: 14px;
  }
}


/* =====================================================
   MÓVIL
   ===================================================== */

@media (max-width: 767px) {

  .gmo-gallery {
    padding: 14px 14px 12px;
  }

  /*
   * En móvil sí se libera la altura fija.
   */
  .gmo-main {
    grid-template-columns: 1fr;

    height: auto;

    margin-bottom: 0;

    padding-bottom:
      calc(
        var(--gmo-cta-space) + 10px
      );
  }

  .gmo-col-left,
  .gmo-col-middle,
  .gmo-col-right {
    grid-template-rows: none;

    gap: 12px;

    height: auto;
  }

  .gmo-left-top {
    height: var(--gmo-mobile-hero-h, 220px);
  }

  .gmo-left-bottom-wrap,
  .gmo-col-middle,
  .gmo-col-right {
    grid-template-columns:
      1fr 1fr;
  }

  .gmo-left-bottom-a,
  .gmo-left-bottom-b {
    height: var(--gmo-mobile-left-bottom-h, 180px);
  }

  .gmo-middle-top,
  .gmo-middle-bottom {
    height: var(--gmo-mobile-middle-h, 180px);
  }

  .gmo-right-top,
  .gmo-right-bottom {
    height: var(--gmo-mobile-right-h, 180px);
  }

  .gmo-col-middle,
  .gmo-col-right {
    display: grid;

    gap: 12px;
  }

  .gmo-overlay-word-wrap {
    inset: 0 -6px 0 auto;

    width: 100%;

    height: 100%;
  }

  /* =====================================================
     OVERLAY GALERÍA · ORIENTACIÓN SOLO EN MÓVIL

     IMPORTANTE:
     el overlay y su degradado pertenecen a .gmo-col-right
     completa, es decir, al BLOQUE formado por las DOS últimas
     fotos. Nunca se calculan sobre una sola foto.
     ===================================================== */

  .gmo-col-right {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* Permite dimensionar la imagen horizontal con respecto
       al ancho real del conjunto de las dos fotos. */
    container-type: inline-size;
  }

  /* En móvil anulamos el degradado individual de cada foto.
     El degradado se dibuja una sola vez sobre el contenedor
     que incluye las DOS fotos. */
  .gmo-mobile-overlay-vertical .gmo-right-photo::after,
  .gmo-mobile-overlay-horizontal .gmo-right-photo::after {
    content: none !important;
    display: none !important;
  }


  /* -----------------------------
     VERTICAL · SOLO MÓVIL

     El overlay NO se limita a la cuarta fila.
     Ahora cubre la foto derecha de la tercera fila
     (.gmo-middle-bottom) y la foto derecha de la cuarta fila
     (.gmo-right-bottom), formando una sola franja vertical.
     ----------------------------- */

  .gmo-mobile-overlay-vertical .gmo-main {
    position: relative;
  }

  /* Oculta únicamente en móvil vertical el overlay original
     que vive dentro de la cuarta fila. */
  .gmo-mobile-overlay-vertical .gmo-col-right > .gmo-overlay-word-wrap {
    display: none !important;
  }

  /* El degradado de la cuarta fila también se desactiva:
     el nuevo span se encarga del degradado sobre ambas fotos. */
  .gmo-mobile-overlay-vertical .gmo-col-right::after {
    content: none !important;
    display: none !important;
  }

  .gmo-mobile-overlay-vertical .gmo-mobile-vertical-span {
    display: flex;
    position: absolute;

    /*
     * X:
     * segunda columna de las filas de dos fotos.
     * El gap interior móvil es 12px, por eso se suman 6px.
     */
    left: calc(50% + 6px);
    right: 0;

    /*
     * Y:
     * comienza exactamente donde inicia la tercera fila:
     * hero + gap interno columna 1 + fila inferior columna 1
     * + gap entre columnas/filas principales.
     */
    top: calc(
      var(--gmo-mobile-hero-h, 220px)
      + 12px
      + var(--gmo-mobile-left-bottom-h, 180px)
      + var(--gmo-col-gap)
    );

    /*
     * Abarca tercera + cuarta fila y el espacio entre ambas.
     */
    height: calc(
      var(--gmo-mobile-middle-h, 180px)
      + var(--gmo-col-gap)
      + var(--gmo-mobile-right-h, 180px)
    );

    z-index: 8;
    pointer-events: none;
    overflow: hidden;

    align-items: center;
    justify-content: flex-end;

    padding: 0 !important;
  }

  /* El mismo degradado lateral que ya tenía la versión vertical,
     pero aplicado una sola vez a las DOS fotos apiladas. */
  .gmo-mobile-overlay-vertical .gmo-mobile-vertical-span::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;

    width: var(--gmo-right-fade-width);
    height: 100%;

    z-index: 0;
    pointer-events: none;

    opacity: var(--gmo-right-fade-opacity);

    background: linear-gradient(
      270deg,
      var(--gmo-right-fade-base) 0%,
      color-mix(
        in srgb,
        var(--gmo-right-fade-base) 88%,
        transparent
      ) 36%,
      color-mix(
        in srgb,
        var(--gmo-right-fade-base) 42%,
        transparent
      ) 72%,
      transparent 100%
    );
  }

  .gmo-mobile-overlay-vertical .gmo-mobile-vertical-span-image {
    position: absolute;
    z-index: 1;

    top: 0;

    /*
     * La imagen original tiene un pequeño margen transparente
     * en su borde derecho. La desplazamos unos píxeles fuera
     * del contenedor para que la palabra GALERÍA quede
     * visualmente pegada al borde derecho.
     */
    right: -12px;

    bottom: 0;
    left: auto;

    display: block;

    width: auto;
    height: 100%;

    max-width: none;
    max-height: 100%;

    object-fit: contain;
    object-position: center right;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .gmo-mobile-overlay-vertical .gmo-mobile-vertical-span-fallback {
    position: relative;
    z-index: 1;

    color: #ff3c38;

    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);

    font-size: clamp(42px, 12vw, 82px);
    line-height: 1;
    letter-spacing: 0.02em;
    font-weight: 700;
  }


  /* -----------------------------
     HORIZONTAL
     También trabaja sobre el bloque COMPLETO de las dos
     últimas fotos. El degradado sube desde abajo.
     ----------------------------- */

  .gmo-mobile-overlay-horizontal .gmo-col-right::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;

    width: 100%;
    height: var(--gmo-right-fade-width);

    z-index: 2;
    pointer-events: none;

    opacity: var(--gmo-right-fade-opacity);

    background: linear-gradient(
      0deg,
      var(--gmo-right-fade-base) 0%,
      color-mix(
        in srgb,
        var(--gmo-right-fade-base) 88%,
        transparent
      ) 36%,
      color-mix(
        in srgb,
        var(--gmo-right-fade-base) 42%,
        transparent
      ) 72%,
      transparent 100%
    );
  }

  .gmo-mobile-overlay-horizontal .gmo-overlay-word-wrap {
    position: absolute;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block;

    overflow: hidden;
    z-index: 3;
  }

  /* La imagen original es vertical.
     Al girarla 90°, su ALTURA previa al giro se convierte
     en el ANCHO visual. Usamos 100cqw para que ese ancho
     visual equivalga al ancho REAL de las DOS fotos juntas. */
  .gmo-mobile-overlay-horizontal .gmo-overlay-word {
    position: absolute;

    left: 50%;
    top: 50%;

    width: auto !important;
    height: 100cqw !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain;
    object-position: center;

    transform:
      translate(-50%, -50%)
      rotate(90deg);

    transform-origin: center center;
  }

  /* Fallback para navegadores sin unidades de contenedor. */
  @supports not (height: 100cqw) {
    .gmo-mobile-overlay-horizontal .gmo-overlay-word {
      height: calc(100vw - 28px) !important;
    }
  }

  .gmo-mobile-overlay-horizontal .gmo-overlay-fallback {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;

    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: none;

    width: 100%;
    text-align: center;

    font-size: clamp(38px, 13vw, 74px);
    line-height: .95;
    padding: 0 12px;
  }

  .gmo-cta-wrap {
    left: 24px;

    bottom: 8px;
  }

  .gmo-cta {
    font-size: 14px;
  }
}
/* =====================================================
   VISOR / LIGHTBOX DE GALERÍA · FULLSCREEN
   ===================================================== */
.gmo-open-lightbox {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

html.gmo-lightbox-open,
body.gmo-lightbox-open {
  overflow: hidden !important;
}

.gmo-lightbox[hidden] {
  display: none !important;
}

/*
 * Se inserta directamente en <body> y usa el z-index máximo práctico
 * para quedar por encima de header, footer, sticky bars y Elementor.
 */
.gmo-lightbox {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483647 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  background: #000;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  isolation: isolate;
  transition: opacity .18s ease, visibility .18s ease;
}

.gmo-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

/*
 * Reservamos solo dos franjas laterales discretas para navegación.
 * La imagen aprovecha todo el resto del viewport y nunca se recorta.
 */
.gmo-lightbox-stage {
  position: relative;
  width: calc(100dvw - 112px);
  height: calc(100dvh - 24px);
  max-width: none;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.gmo-lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Cerrar siempre queda por encima del fondo, no sobre la zona útil de imagen. */
.gmo-lightbox-close,
.gmo-lightbox-nav {
  position: fixed !important;
  z-index: 3;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.gmo-lightbox-close {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.72);
  font-size: 38px;
  line-height: 1;
  font-weight: 300;
}

/*
 * Flechas en los laterales negros, fuera del área reservada a la foto.
 * Así nunca tapan la imagen.
 */
.gmo-lightbox-nav {
  top: 50%;
  width: 56px;
  height: 96px;
  padding: 0;
  transform: translateY(-50%);
  background: transparent;
  font-size: 54px;
  line-height: 1;
  font-weight: 200;
  opacity: .9;
}

.gmo-lightbox-prev { left: 0; }
.gmo-lightbox-next { right: 0; }

.gmo-lightbox-close:hover,
.gmo-lightbox-close:focus-visible {
  background: rgba(255,255,255,.16);
}

.gmo-lightbox-nav:hover,
.gmo-lightbox-nav:focus-visible {
  background: rgba(255,255,255,.08);
}

/* Ya no se muestra contador ni texto sobre la fotografía. */
.gmo-lightbox-counter {
  display: none !important;
}

@media (max-width: 767px) {
  .gmo-lightbox-stage {
    width: 100dvw;
    height: 100dvh;
    padding: 0 4px;
  }

  .gmo-lightbox-image {
    max-width: 100%;
    max-height: 100%;
  }

  .gmo-lightbox-close {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    font-size: 34px;
    background: rgba(0,0,0,.72);
  }

  /* En móvil las zonas son estrechas y semitransparentes; además funciona swipe. */
  .gmo-lightbox-nav {
    width: 42px;
    height: 72px;
    font-size: 44px;
    background: rgba(0,0,0,.20);
  }

  .gmo-lightbox-prev { left: 0; }
  .gmo-lightbox-next { right: 0; }
}

/* =====================================================
   MOSAICO DESLIZANTE AUTOMÁTICO
   Mantiene cada panel dentro de sus dimensiones originales.
   La imagen entrante se desplaza de izquierda a derecha.
   ===================================================== */
.gmo-mosaic-autoplay .gmo-panel,
.gmo-mosaic-autoplay .gmo-right-photo {
  isolation: isolate;
}

.gmo-mosaic-autoplay .gmo-panel > img,
.gmo-mosaic-autoplay .gmo-right-photo > img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gmo-slide-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  z-index: 1 !important;
  transform: translateX(-102%);
  transition: transform var(--gmo-slide-duration, 700ms) cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  pointer-events: none;
}

.gmo-slide-image.is-entering {
  transform: translateX(0);
}

.gmo-slide-current-exit {
  transform: translateX(102%);
  transition: transform var(--gmo-slide-duration, 700ms) cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .gmo-slide-image,
  .gmo-slide-current-exit {
    transition-duration: 1ms !important;
  }
}

/* =====================================================
   DOS MODOS DE MOVIMIENTO DEL MOSAICO
   ===================================================== */
.gmo-mosaic-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* OPCIÓN 1 · Los cuadros permanecen fijos y cambian las 7 fotos. */
.gmo-motion-fixed .gmo-panel,
.gmo-motion-fixed .gmo-right-photo {
  isolation: isolate;
}

/* OPCIÓN 2 · Se desplaza el mosaico completo. */
.gmo-motion-flow .gmo-mosaic-viewport {
  isolation: isolate;
}

.gmo-motion-flow .gmo-flow-page {
  width: 100%;
  flex: 0 0 100%;
  will-change: transform, opacity;
}

.gmo-motion-flow .gmo-flow-current {
  position: relative;
  z-index: 1;
  transform: translateX(0);
}

.gmo-motion-flow .gmo-flow-next {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateX(-104%);
  transition: transform var(--gmo-slide-duration, 700ms) cubic-bezier(.22,.61,.36,1);
}

.gmo-motion-flow .gmo-flow-next.gmo-flow-enter {
  transform: translateX(0);
}

.gmo-motion-flow .gmo-flow-current.gmo-flow-exit {
  transform: translateX(104%);
  transition: transform var(--gmo-slide-duration, 700ms) cubic-bezier(.22,.61,.36,1);
}

/*
 * Los mosaicos posteriores pueden variar de proporción sin modificar
 * la altura total del widget ni los gaps configurados por el usuario.
 */
@media (min-width: 768px) {
  .gmo-motion-flow .gmo-flow-variant-1 {
    grid-template-columns: minmax(0, 39%) minmax(0, 35%) minmax(0, calc(26% - (2 * var(--gmo-col-gap))));
  }

  .gmo-motion-flow .gmo-flow-variant-1 .gmo-left-bottom-wrap {
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  }

  .gmo-motion-flow .gmo-flow-variant-1 .gmo-col-middle,
  .gmo-motion-flow .gmo-flow-variant-1 .gmo-col-right {
    grid-template-rows: minmax(0, 58%) minmax(0, 42%);
  }

  .gmo-motion-flow .gmo-flow-variant-2 {
    grid-template-columns: minmax(0, 50%) minmax(0, 27%) minmax(0, calc(23% - (2 * var(--gmo-col-gap))));
  }

  .gmo-motion-flow .gmo-flow-variant-2 .gmo-left-bottom-wrap {
    grid-template-columns: minmax(0, 67%) minmax(0, 33%);
  }

  .gmo-motion-flow .gmo-flow-variant-2 .gmo-col-middle,
  .gmo-motion-flow .gmo-flow-variant-2 .gmo-col-right {
    grid-template-rows: minmax(0, 43%) minmax(0, 57%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gmo-motion-flow .gmo-flow-next,
  .gmo-motion-flow .gmo-flow-current.gmo-flow-exit {
    transition-duration: 1ms !important;
  }
}


/* =====================================================
   AJUSTE v1.5.1 · OVERLAY DERECHO FIJO EN MODO FLOW
   Solo el mosaico de fondo se desplaza.
   ===================================================== */
.gmo-motion-flow .gmo-flow-page .gmo-col-right > .gmo-overlay-word-wrap {
  visibility: hidden;
}

.gmo-motion-flow .gmo-flow-fixed-overlay {
  position: absolute !important;
  z-index: 30 !important;
  margin: 0 !important;
  pointer-events: none !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

.gmo-motion-flow .gmo-flow-fixed-overlay .gmo-overlay-word {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* =====================================================
   AJUSTE v1.5.2 · SOMBRA FIJA DEL OVERLAY DERECHO
   En modo flow el degradado queda anclado debajo del overlay fijo,
   mientras las fotografías continúan desplazándose por detrás.
   ===================================================== */
.gmo-motion-flow .gmo-flow-page .gmo-right-photo::after {
  content: none !important;
}

.gmo-motion-flow .gmo-flow-fixed-shadow {
  position: absolute !important;
  z-index: 24 !important;
  margin: 0 !important;
  pointer-events: none !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  overflow: hidden;
}

.gmo-motion-flow .gmo-flow-fixed-shadow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--gmo-right-fade-width);
  opacity: var(--gmo-right-fade-opacity);
  background: linear-gradient(
    270deg,
    var(--gmo-right-fade-base) 0%,
    color-mix(in srgb, var(--gmo-right-fade-base) 88%, transparent) 36%,
    color-mix(in srgb, var(--gmo-right-fade-base) 42%, transparent) 72%,
    transparent 100%
  );
}


/* =====================================================
   AJUSTE v1.5.3 · DEGRADADO MÓVIL COMPLETAMENTE FIJO
   En flow + móvil vertical, el degradado que pertenece al span
   móvil se anula porque esa capa viaja con el slider. La única
   sombra visible es .gmo-flow-fixed-shadow, cuya geometría se
   calcula sobre el mismo span que contiene la palabra GALERÍA.
   ===================================================== */
@media (max-width: 767px) {
  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-flow-page .gmo-mobile-vertical-span::before {
    content: none !important;
    display: none !important;
  }

  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-flow-fixed-shadow {
    position: absolute !important;
    z-index: 24 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}
\n\n/* =====================================================
   AJUSTE v1.5.4 · SOLO MÓVIL
   - La palabra/imagen GALERÍA vertical permanece fija en modo flow.
   - La copia que forma parte de cada página móvil se oculta para que no viaje.
   - La extensión de la sombra fija puede regularse de forma independiente.
   ===================================================== */
@media (max-width: 767px) {
  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-flow-page .gmo-mobile-vertical-span {
    visibility: hidden !important;
  }

  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-flow-fixed-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    padding: 0 !important;
    visibility: visible !important;
  }

  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-flow-fixed-overlay .gmo-mobile-vertical-span-image {
    position: absolute !important;
    z-index: 1 !important;
    top: 0 !important;
    right: -12px !important;
    bottom: 0 !important;
    left: auto !important;
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center right !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-flow-fixed-shadow::after {
    width: var(--gmo-mobile-fixed-shadow-size, 95%) !important;
  }
}

/* =====================================================
   AJUSTE v1.5.6 · SOLO MÓVIL
   El overlay vertical (imagen GALERÍA) y SU sombra forman una
   única capa fija. El slider pasa por detrás. PC/tablet intactos.
   ===================================================== */
@media (max-width: 767px) {
  /* Las copias internas del slider no deben viajar visibles. */
  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-flow-page .gmo-mobile-vertical-span {
    visibility: hidden !important;
  }

  /* La copia fija creada fuera de la página del slider queda siempre visible. */
  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-mosaic-viewport > .gmo-flow-fixed-overlay.gmo-mobile-vertical-span {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
    padding: 0 !important;
    z-index: 30 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  /* La sombra nace del propio overlay fijo: nunca pertenece a las fotos móviles. */
  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-mosaic-viewport > .gmo-flow-fixed-overlay.gmo-mobile-vertical-span::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: var(--gmo-mobile-fixed-shadow-size, 95%) !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: var(--gmo-mobile-fixed-shadow-opacity, .72) !important;
    background: linear-gradient(
      270deg,
      var(--gmo-mobile-fixed-shadow-color, #3d0000) 0%,
      color-mix(in srgb, var(--gmo-mobile-fixed-shadow-color, #3d0000) 88%, transparent) 36%,
      color-mix(in srgb, var(--gmo-mobile-fixed-shadow-color, #3d0000) 42%, transparent) 72%,
      transparent 100%
    ) !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* La imagen overlay se mantiene por encima de su propia sombra. */
  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-mosaic-viewport > .gmo-flow-fixed-overlay .gmo-mobile-vertical-span-image {
    position: absolute !important;
    z-index: 1 !important;
    top: 50% !important;
    right: var(--gmo-mobile-overlay-right, -12px) !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: auto !important;
    height: var(--gmo-mobile-overlay-height, 100%) !important;
    max-width: none !important;
    max-height: 120% !important;
    object-fit: contain !important;
    object-position: center right !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    animation: none !important;
  }

  /* En móvil vertical no usamos la sombra separada de flow: evita cualquier salto. */
  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-mosaic-viewport > .gmo-flow-fixed-shadow {
    display: none !important;
  }
}

/* =====================================================
   AJUSTE v1.5.7 · SOLO MÓVIL
   Refuerzo visual del overlay fijo. La corrección principal está
   en JS; estas reglas solo garantizan que el clon fijo quede por
   encima del slider y que su sombra permanezca visible.
   ===================================================== */
@media (max-width: 767px) {
  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-mosaic-viewport {
    isolation: isolate;
  }

  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-mosaic-viewport > .gmo-flow-fixed-overlay.gmo-mobile-vertical-span {
    z-index: 80 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-mosaic-viewport > .gmo-flow-fixed-overlay.gmo-mobile-vertical-span::before {
    display: block !important;
    visibility: visible !important;
  }

  .gmo-motion-flow.gmo-mobile-overlay-vertical .gmo-mosaic-viewport > .gmo-flow-fixed-overlay.gmo-mobile-vertical-span > .gmo-mobile-vertical-span-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
  }
}

/* =====================================================
   AJUSTE EXCLUSIVO MÓVIL · 3 FILAS
   - PC y tablet permanecen sin cambios.
   - Se elimina visualmente la cuarta fila (.gmo-col-right).
   - El overlay vertical pasa de filas 3+4 a filas 2+3.
   ===================================================== */
@media (max-width: 767px) {
  /* La antigua cuarta fila ya no se muestra en móvil. */
  .gmo-gallery .gmo-col-right {
    display: none !important;
  }

  /* El overlay móvil comienza en la fila 2 (bloque inferior de columna 1)
     y termina al final de la fila 3 (columna middle). */
  .gmo-mobile-overlay-vertical .gmo-mobile-vertical-span {
    top: calc(
      var(--gmo-mobile-hero-h, 220px)
      + 12px
    ) !important;

    height: calc(
      var(--gmo-mobile-left-bottom-h, 180px)
      + var(--gmo-col-gap)
      + var(--gmo-mobile-middle-h, 180px)
    ) !important;
  }
}