/* Pro Effects — Sticky Image Section
   Arquitectura:
   1) .pe-sis__grid — 2 columnas (texto / imagen)
   2) .pe-sis__item — cada bloque de texto (min-height, flex-center content)
   3) .pe-sis__image-col — la caja STICKY con W/H propios (spans todas las rows)
   4) .pe-sis__frame — wrapper visual dentro de image-col (bg, border-radius)
   5) .pe-sis__image — dimensiones propias, centrada en el frame
   Las 4 dimensiones (item-h, col W, col H, img W, img H) son independientes. */

.pe-sis {
  --pe-sis-item-h:  80vh;
  --pe-sis-text-w:  45%;
  --pe-sis-gap:     64px;

  --pe-sis-frame-w: 100%;
  --pe-sis-frame-h: 80vh;

  --pe-sis-img-w:   100%;
  --pe-sis-img-h:   100%;

  width: 100%;
  position: relative;
  /* NO overflow:hidden — rompe position:sticky */
}

.pe-sis__grid {
  display: grid;
  grid-template-columns: var(--pe-sis-text-w) 1fr;
  gap: var(--pe-sis-gap);
}

/* ─── Items de texto ──────────────────────────────────────────────── */
.pe-sis__item {
  grid-column: 1;
  min-height: var(--pe-sis-item-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.pe-sis__eyebrow { display: inline-block; margin: 0 0 12px 0; }
.pe-sis__title   { margin: 0 0 16px 0; }
.pe-sis__desc    { margin: 0; }

.pe-sis__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  line-height: 1;
}
.pe-sis__btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.pe-sis__btn-icon svg { width: 1em; height: 1em; }
.pe-sis__btn--icon-before .pe-sis__btn-icon { order: -1; }

/* ─── Columna de imagen: STICKY, spans todas las filas ──────────────── */
.pe-sis[data-pe-side="right"] .pe-sis__image-col { grid-column: 2; }
.pe-sis[data-pe-side="left"]  .pe-sis__image-col { grid-column: 1; }
.pe-sis[data-pe-side="left"]  .pe-sis__item      { grid-column: 2; }

.pe-sis__image-col {
  grid-row: 1 / -1;                    /* spans todas las filas */
  align-self: start;                   /* no estira vertical → puede ser sticky */
  justify-self: center;                /* centrado horizontal en su col track */

  position: sticky;
  /* top = (item_h - frame_h)/2 → arranca centrado con primer item */
  top: calc((var(--pe-sis-item-h) - var(--pe-sis-frame-h)) / 2);

  width:      var(--pe-sis-frame-w);
  height:     var(--pe-sis-frame-h);
  max-width:  100%;
  max-height: 100vh;
}

/* ─── Frame: wrapper visual dentro de image-col ─────────────────────── */
.pe-sis__frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Elementor puede setear background, border-radius (overflow:hidden) aqui */
}

/* ─── Imagen: dimensiones puras, centrada en frame ──────────────────── */
.pe-sis__image {
  display: block;
  width:      var(--pe-sis-img-w);
  height:     var(--pe-sis-img-h);
  max-width:  100%;
  max-height: 100%;
  object-fit: cover;
}

/* ─── Empty state ───────────────────────────────────────────────────── */
.pe-sis--empty {
  padding: 48px 24px;
  text-align: center;
  color: rgba(0,0,0,0.5);
  border: 1px dashed rgba(0,0,0,0.15);
  border-radius: 8px;
}

/* ─── Responsive mobile ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pe-sis__grid { grid-template-columns: 1fr; }

  .pe-sis[data-pe-side="right"] .pe-sis__image-col,
  .pe-sis[data-pe-side="left"]  .pe-sis__image-col { grid-column: 1; grid-row: auto; }
  .pe-sis[data-pe-side="left"]  .pe-sis__item      { grid-column: 1; }

  .pe-sis__image-col {
    position: static;
    top: auto;
    align-self: auto;
    justify-self: stretch;
    height: auto;
    max-height: 70vh;
  }
  .pe-sis__image { height: auto; max-height: 70vh; }
  .pe-sis__item  { min-height: auto; padding: 48px 0; }
}