/* Pro Effects — Vertical Scroll Stepper
   Widget: vertical-scroll-stepper
   Principio: fuerza solo mecánica. Pin via ScrollTrigger (no CSS sticky).
   Overflow hidden SOLO en máscaras internas (título, párrafo, eyebrow, botón).
   Todos los textos apilados en el mismo grid cell → altura = máx. */

.pe-vss {
  --pe-vss-bar-active: #fff;
  --pe-vss-bar-inactive: rgba(255,255,255,0.2);
  --pe-vss-bar-w: 2px;
  --pe-vss-seg-gap: 8px;
  --pe-vss-bar-h: 40vh;
  --pe-vss-left: 42%;
  --pe-vss-gap: 48px;
  --pe-vss-pad-x: 80px;
  --pe-vss-b-w: 72%;
  --pe-vss-b-h: 55vh;
  --pe-vss-a-w: 36%;
  --pe-vss-a-h: 45vh;
  --pe-vss-a-ox: -40px;
  --pe-vss-a-oy: -48px;
  --pe-vss-img-radius: 0px;
  --pe-vss-progress: 0;

  position: relative;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: auto var(--pe-vss-left) 1fr;
  align-items: center;
  gap: var(--pe-vss-gap);
  padding: 0 var(--pe-vss-pad-x);
  box-sizing: border-box;
  isolation: isolate;
  overflow: visible;
  color: inherit;
}

.pe-vss--empty {
  display: block;
  padding: 40px;
  text-align: center;
  opacity: 0.6;
  font-style: italic;
}

/* ─── Barra: modo segmentos ──────────────────────────────────────────────── */
.pe-vss__bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--pe-vss-seg-gap);
  height: var(--pe-vss-bar-h);
  width: var(--pe-vss-bar-w);
}

.pe-vss__bar--hidden {
  width: 0;
  height: 0;
  gap: 0;
}

.pe-vss__seg {
  width: var(--pe-vss-bar-w);
  flex: 1 1 0;
  background: var(--pe-vss-bar-inactive);
  border-radius: calc(var(--pe-vss-bar-w) / 2);
  transition: background 0.35s ease, transform 0.35s ease;
  transform-origin: center;
}

.pe-vss__seg.is-active {
  background: var(--pe-vss-bar-active);
}

/* ─── Barra: modo progresivo ─────────────────────────────────────────────── */
.pe-vss__bar--progress {
  position: relative;
  display: block;
  height: var(--pe-vss-bar-h);
  width: var(--pe-vss-bar-w);
  gap: 0;
}

.pe-vss__bar--progress .pe-vss__bar-track {
  position: absolute;
  inset: 0;
  background: var(--pe-vss-bar-inactive);
  border-radius: calc(var(--pe-vss-bar-w) / 2);
}

.pe-vss__bar--progress .pe-vss__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--pe-vss-bar-active);
  border-radius: calc(var(--pe-vss-bar-w) / 2);
  transform-origin: top;
  transform: scaleY(var(--pe-vss-progress, 0));
  will-change: transform;
}

/* ─── Texto: layout general ──────────────────────────────────────────────── */
.pe-vss__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  max-width: 100%;
}

/* ─── Máscaras (eyebrow, title, desc, button) — todas usan grid apilado ──── */
.pe-vss__eyebrow-mask,
.pe-vss__title-mask,
.pe-vss__desc-mask,
.pe-vss__btn-mask {
  overflow: hidden;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.pe-vss__eyebrow-mask > *,
.pe-vss__title-mask > *,
.pe-vss__desc-mask > *,
.pe-vss__btn-mask > * {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

/* Todos los items comparten la MISMA celda, así que cada máscara mide lo que mide
   su elemento más alto. Dónde se coloca el sobrante decide si se ve un hueco:

   - Eyebrow y título se alinean ABAJO: así terminan siempre a la misma altura y la
     separación hasta el párrafo es constante, mida lo que mida el título.
   - Párrafo y botón se alinean ARRIBA: si se alinearan abajo, un párrafo corto
     dejaría el hueco justo debajo del título — que es exactamente el problema que
     se quería evitar, movido de sitio. */
.pe-vss__eyebrow-mask > *,
.pe-vss__title-mask > * { align-self: end; }

.pe-vss__desc-mask > *,
.pe-vss__btn-mask > *   { align-self: start; }

/* El botón dentro de la máscara: justify según text-align del text container */
.pe-vss__btn-mask {
  justify-items: start; /* default left; JS no modifica esto */
}

/* Alineaciones automáticas desde el text-align del padre */
.pe-vss__text[style*="center"] .pe-vss__btn-mask { justify-items: center; }
.pe-vss__text[style*="right"]  .pe-vss__btn-mask { justify-items: end; }

/* ─── Tipografía base ────────────────────────────────────────────────────── */
/* Solo propiedades estructurales. Tipografía (font-family, size, weight,
   line-height, letter-spacing, text-transform) se delega a los controles
   Typography de Elementor para respetar la elección del usuario. */
.pe-vss__eyebrow {
  margin: 0;
  display: block;
}

.pe-vss__title {
  margin: 0;
  display: block;
}

.pe-vss__desc {
  margin: 0;
  display: block;
}

/* Texto encima de los slots animados (que usan z-index 10..19) */
.pe-vss__text {
  position: relative;
  z-index: 20;
}

/* ─── Líneas split (generadas por JS) ──────────────────────────────────────
   Estrategia de clip: recorte vertical a nivel de línea (overflow: clip con
   overflow-clip-margin absorbe ascenders/descenders), y libertad horizontal
   para que palabras largas no se recorten. Fallback overflow: hidden para
   navegadores sin overflow: clip. */
.pe-vss__line {
  display: block;
  line-height: inherit;
  padding: 0.1em 0;
  margin: -0.1em 0;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 0.15em;
}

.pe-vss__line-inner {
  display: block;
  will-change: transform;
  line-height: inherit;
  /* Permite que palabras largas con hyphens se quiebren naturalmente
     cuando exceden el ancho del mask. 'anywhere' solo actúa si no hay
     otra oportunidad de break (prefiere espacios y hyphens primero). */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

/* ─── Botón ──────────────────────────────────────────────────────────────── */
.pe-vss__btn {
  will-change: transform;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
}

.pe-vss__btn--icon-before {
  flex-direction: row-reverse;
}

.pe-vss__btn-icon {
  display: inline-flex;
  align-items: center;
}

.pe-vss__btn-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ─── Media: slots apilados ──────────────────────────────────────────────── */
.pe-vss__media {
  position: relative;
  width: 100%;
  height: 60vh;
  max-height: 720px;
}

.pe-vss__slot {
  position: absolute;
  inset: 0;
}

.pe-vss__img-b {
  position: absolute;
  bottom: 0;
  right: 0;
  width: var(--pe-vss-b-w);
  height: var(--pe-vss-b-h);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--pe-vss-img-radius);
  will-change: clip-path;
}

.pe-vss__img-a {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(var(--pe-vss-a-ox), var(--pe-vss-a-oy));
  width: var(--pe-vss-a-w);
  height: var(--pe-vss-a-h);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--pe-vss-img-radius);
  z-index: 1;
  will-change: clip-path;
}

.pe-vss__slot--solo .pe-vss__img-b {
  width: 100%;
  right: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pe-vss {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 40px 20px;
    gap: 20px;
    height: auto;
    min-height: 100vh;
  }
  /* La barra acompaña al TEXTO, no a las imágenes: se limita a la fila 1 (donde
     va el texto) en vez de cruzar también la fila de la media. Y su alto no puede
     ser un valor fijo —`60vh` no tiene por qué coincidir con lo que mide el
     texto—, así que se estira a esa fila. En escritorio no cambia nada: allí la
     barra sí es un elemento de tamaño fijo gobernado por `--pe-vss-bar-h`. */
  .pe-vss__bar, .pe-vss__bar--progress {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    align-self: stretch;
  }
  /* Colocación EXPLÍCITA de texto y media.

     Antes la barra ocupaba `grid-row: 1 / 3`, es decir la columna 1 en las dos
     filas, y eso empujaba a la media a la columna 2 por descarte. Al limitar la
     barra a la fila 1 quedó libre la celda (fila 2, columna 1) y la media se
     auto-colocó ahí: una columna `auto`, estrecha, donde las imágenes quedaban
     reducidas a una rendija. Con las posiciones declaradas ya no depende del
     azar del auto-placement. */
  .pe-vss__text  { grid-column: 2; grid-row: 1; gap: 16px; }
  .pe-vss__media { grid-column: 2; grid-row: 2; }

  /* Control "Imágenes en móvil = Encima del texto": intercambia las dos filas.
     La barra se queda con el texto, que es a lo que acompaña. */
  /* El orden de las imágenes se combina con la POSICIÓN del stepper: cada
     disposición usa un número de filas distinto, así que la regla tiene que saber
     en cuál está. Los selectores llevan las dos clases (especificidad 0,2,0) para
     ganar siempre a las reglas de posición, que llevan una sola (0,1,0), sin
     depender del orden en que aparezcan en la hoja. */

  /* Barra a la izquierda: 2 filas. Imágenes arriba, texto y barra abajo. */
  .pe-vss--media-top.pe-vss--bar-left-m .pe-vss__media { grid-row: 1; }
  .pe-vss--media-top.pe-vss--bar-left-m .pe-vss__text  { grid-row: 2; }
  .pe-vss--media-top.pe-vss--bar-left-m .pe-vss__bar,
  .pe-vss--media-top.pe-vss--bar-left-m .pe-vss__bar--progress { grid-row: 2; }

  /* Barra abajo: 3 filas. Solo se intercambian imágenes y texto; la barra se
     queda en la tercera, que es su sitio. */
  .pe-vss--media-top.pe-vss--bar-bottom-m .pe-vss__media { grid-row: 1; }
  .pe-vss--media-top.pe-vss--bar-bottom-m .pe-vss__text  { grid-row: 2; }
  .pe-vss__title { font-size: clamp(28px, 7vw, 40px); }
  /* El alto lo marcan las IMÁGENES, no un número fijo.

     Las dos son absolutas dentro de este contenedor (así se solapan), por lo que
     no le dan altura propia y hacía falta reservarla a mano. Pero cualquier valor
     fijo miente: con imágenes pequeñas sobraba espacio y empujaba el texto fuera
     de la pantalla; con imágenes grandes se quedaba corto.

     `max()` de los dos controles de alto hace que el contenedor mida exactamente
     lo que mide la imagen más alta, sea cual sea el valor que ponga el usuario. */
  .pe-vss__media {
    height: max(var(--pe-vss-b-h), var(--pe-vss-a-h));
    min-height: 0;
  }
  /* Red de seguridad contra el solape con el texto: la imagen pequeña se desplaza
     con translate negativo (por defecto -40px/-48px) para montarse sobre la grande.
     En escritorio eso cae dentro del hueco de la retícula; en móvil, con el texto
     justo encima, se salía. Los valores móviles de esos controles ya vienen a 0,
     y este contain evita que cualquier ajuste manual invada la fila vecina. */
  .pe-vss__media { contain: paint; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-vss__slot,
  .pe-vss__img-a,
  .pe-vss__img-b,
  .pe-vss__btn {
    transition: none;
  }
}


/* ─── Móvil sin animación: los pasos, uno debajo de otro ───────────────────
   Lo construye el JS moviendo los nodos existentes a bloques por item
   (.pe-vss__stack-item). Aquí solo se deshace el layout pensado para superponer:
   el contenedor deja de ser una retícula de 3 columnas de alto fijo, y los slots
   dejan de ser capas absolutas para ocupar su sitio en el flujo. */
.pe-vss--stacked {
  display: block;
  height: auto;
  min-height: 0;
  grid-template-columns: none;
  padding: 40px 20px;
}
/* La barra es un indicador de progreso del scroll animado: sin animación no
   representa nada. */
.pe-vss--stacked .pe-vss__bar,
.pe-vss--stacked .pe-vss__bar--progress { display: none; }

.pe-vss__stack { display: flex; flex-direction: column; gap: 64px; }
.pe-vss__stack-item { display: flex; flex-direction: column; gap: 16px; }

/* Las máscaras recortaban las líneas para la animación; fuera de la pila ya no
   hay máscara, así que el texto fluye normal. */
.pe-vss__stack-item .pe-vss__title,
.pe-vss__stack-item .pe-vss__eyebrow,
.pe-vss__stack-item .pe-vss__desc { opacity: 1; transform: none; }

/* El slot vuelve al flujo. Sus dos imágenes siguen siendo absolutas dentro de
   él, así que necesita una altura propia: sin ella colapsaría a cero. */
.pe-vss__stack-item .pe-vss__slot {
  position: relative;
  inset: auto;
  height: 46vh;
  min-height: 260px;
  margin-top: 8px;
  opacity: 1 !important;
}
.pe-vss__stack-item .pe-vss__img-a,
.pe-vss__stack-item .pe-vss__img-b { clip-path: none !important; }

/* ─── Visibilidad por dispositivo ──────────────────────────────────────────
   El PHP imprime el elemento si lo quiere algún dispositivo y lo marca con
   estas clases para los que no. Breakpoints de Elementor por defecto. */
@media (min-width: 1025px) { .pe-vss .pe-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .pe-vss .pe-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .pe-vss .pe-hide-mobile { display: none !important; } }

/* ─── Posición del stepper (control responsive) ────────────────────────────
   El render emite SIEMPRE una clase por dispositivo (…-bottom / …-left para
   tablet y móvil, y --bar-bottom para escritorio). Cada breakpoint aplica solo
   la suya, así que un valor de móvil puede contradecir al de escritorio sin
   depender del orden de las reglas.

   "Debajo": la retícula pasa de columna-de-barra + contenido a contenido arriba
   y barra abajo. La barra invierte su eje: su alto pasa a ser grosor, su ancho
   pasa a ser longitud, y el relleno de progreso avanza en horizontal. */

@media (min-width: 1025px) {
  .pe-vss--bar-bottom { grid-template-columns: var(--pe-vss-left) 1fr; grid-template-rows: 1fr auto; }
  .pe-vss--bar-bottom .pe-vss__text  { grid-column: 1; grid-row: 1; }
  .pe-vss--bar-bottom .pe-vss__media { grid-column: 2; grid-row: 1; }
  .pe-vss--bar-bottom .pe-vss__bar,
  .pe-vss--bar-bottom .pe-vss__bar--progress {
    grid-column: 1 / -1; grid-row: 2;
    flex-direction: row; width: 100%; height: var(--pe-vss-bar-w); align-self: center;
  }
  .pe-vss--bar-bottom .pe-vss__seg { width: auto; height: var(--pe-vss-bar-w); }
  .pe-vss--bar-bottom .pe-vss__bar-fill { transform-origin: left; transform: scaleX(var(--pe-vss-progress, 0)); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .pe-vss--bar-bottom-t { grid-template-columns: var(--pe-vss-left) 1fr; grid-template-rows: 1fr auto; }
  .pe-vss--bar-bottom-t .pe-vss__text  { grid-column: 1; grid-row: 1; }
  .pe-vss--bar-bottom-t .pe-vss__media { grid-column: 2; grid-row: 1; }
  .pe-vss--bar-bottom-t .pe-vss__bar,
  .pe-vss--bar-bottom-t .pe-vss__bar--progress {
    grid-column: 1 / -1; grid-row: 2;
    flex-direction: row; width: 100%; height: var(--pe-vss-bar-w); align-self: center;
  }
  .pe-vss--bar-bottom-t .pe-vss__seg { width: auto; height: var(--pe-vss-bar-w); }
  .pe-vss--bar-bottom-t .pe-vss__bar-fill { transform-origin: left; transform: scaleX(var(--pe-vss-progress, 0)); }
}

@media (max-width: 767px) {
  /* Debajo: tres filas, todo a una columna. */
  .pe-vss--bar-bottom-m { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .pe-vss--bar-bottom-m .pe-vss__text  { grid-column: 1; grid-row: 1; }
  .pe-vss--bar-bottom-m .pe-vss__media { grid-column: 1; grid-row: 2; }
  .pe-vss--bar-bottom-m .pe-vss__bar,
  .pe-vss--bar-bottom-m .pe-vss__bar--progress {
    grid-column: 1; grid-row: 3;
    flex-direction: row; width: 100%; height: var(--pe-vss-bar-w); align-self: center;
  }
  .pe-vss--bar-bottom-m .pe-vss__seg { width: auto; height: var(--pe-vss-bar-w); }
  .pe-vss--bar-bottom-m .pe-vss__bar-fill { transform-origin: left; transform: scaleX(var(--pe-vss-progress, 0)); }

  /* Izquierda: restaura la columna de barra aunque escritorio esté "debajo". */
  .pe-vss--bar-left-m { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .pe-vss--bar-left-m .pe-vss__bar,
  .pe-vss--bar-left-m .pe-vss__bar--progress {
    grid-column: 1; grid-row: 1;
    flex-direction: column; width: var(--pe-vss-bar-w); height: auto; align-self: stretch;
  }
  .pe-vss--bar-left-m .pe-vss__seg { width: var(--pe-vss-bar-w); height: auto; }
  .pe-vss--bar-left-m .pe-vss__bar-fill { transform-origin: top; transform: scaleY(var(--pe-vss-progress, 0)); }
  .pe-vss--bar-left-m .pe-vss__text  { grid-column: 2; grid-row: 1; }
  .pe-vss--bar-left-m .pe-vss__media { grid-column: 2; grid-row: 2; }
}