.elementor .hdm-stack{flex-wrap:nowrap;/* =========================================================
 HDM STACK RESPONSIVE
 Elementor Flexbox / Containers
 ========================================================= */


/* ---------------------------------------------------------
 1. CONTENEDOR PRINCIPAL
 --------------------------------------------------------- */

.hdm-stack {
  /* Valores predeterminados para computadora */
  --hdm-gap: 30px;
  --hdm-bottom-space: clamp(220px, 32vh, 380px);

  position: relative !important;
  isolation: isolate;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  gap: var(--hdm-gap) !important;

  /*
   * Sticky necesita overflow visible.
   * No usar hidden, auto, scroll o clip aquí.
   */
  overflow: visible !important;

  /*
   * Este espacio permite que la última tarjeta
   * termine correctamente su recorrido sticky.
   */
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: var(--hdm-bottom-space) !important;
  padding-left: 0 !important;

  margin-bottom: 0 !important;

  box-sizing: border-box !important;
}


/* ---------------------------------------------------------
 2. WRAPPER INTERNO DE ELEMENTOR
 Elementor puede agregar .e-con-inner automáticamente.
 --------------------------------------------------------- */

.hdm-stack > .e-con-inner {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  gap: var(--hdm-gap) !important;

  overflow: visible !important;

  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: var(--hdm-bottom-space) !important;
  padding-left: 0 !important;

  box-sizing: border-box !important;
}


/*
 * Cuando Elementor utiliza .e-con-inner,
 * el espacio inferior se coloca en ese wrapper
 * para no duplicarlo.
 */
.hdm-stack:has(> .e-con-inner) {
  gap: 0 !important;
  padding-bottom: 0 !important;
}


/* ---------------------------------------------------------
 3. CONFIGURACIÓN GENERAL DE LAS TARJETAS
 --------------------------------------------------------- */

.hdm-stack-card {
  position: sticky !important;

  top: var(--hdm-card-top, 100px) !important;

  align-self: stretch !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: auto !important;
  max-height: none !important;

  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;

  overflow: visible !important;

  box-sizing: border-box !important;

  /*
   * Evita que una transformación aplicada por Elementor
   * interfiera con position: sticky.
   */
  transform: none !important;
}


/* ---------------------------------------------------------
 4. TARJETAS EN COMPUTADORAS DE ESCRITORIO
 --------------------------------------------------------- */

.hdm-stack-1 {
  --hdm-card-top: 100px;
  z-index: 1 !important;
}

.hdm-stack-2 {
  --hdm-card-top: 115px;
  z-index: 2 !important;
}

.hdm-stack-3 {
  --hdm-card-top: 130px;
  z-index: 3 !important;
}

.hdm-stack-4 {
  --hdm-card-top: 145px;
  z-index: 4 !important;
}


/* ---------------------------------------------------------
 5. PROTECCIÓN PARA CONTENIDO MULTIMEDIA
 Evita desbordamiento horizontal.
 --------------------------------------------------------- */

.hdm-stack-card img,
.hdm-stack-card video,
.hdm-stack-card svg {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}

.hdm-stack-card iframe {
  max-width: 100% !important;
}


/* =========================================================
 LAPTOPS
 De 1025px a 1366px
 ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1366px) {

  .hdm-stack {
      --hdm-gap: 24px;
      --hdm-bottom-space: clamp(200px, 30vh, 330px);
  }

  .hdm-stack-1 {
      --hdm-card-top: 85px;
  }

  .hdm-stack-2 {
      --hdm-card-top: 97px;
  }

  .hdm-stack-3 {
      --hdm-card-top: 109px;
  }

  .hdm-stack-4 {
      --hdm-card-top: 121px;
  }
}


/* =========================================================
 TABLETS
 De 768px a 1024px
 ========================================================= */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  .hdm-stack {
      --hdm-gap: 20px;
      --hdm-bottom-space: clamp(190px, 32vh, 310px);
  }

  .hdm-stack-card {
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
  }

  .hdm-stack-1 {
      --hdm-card-top: 75px;
  }

  .hdm-stack-2 {
      --hdm-card-top: 85px;
  }

  .hdm-stack-3 {
      --hdm-card-top: 95px;
  }

  .hdm-stack-4 {
      --hdm-card-top: 105px;
  }
}


/* =========================================================
 TELÉFONOS GRANDES
 De 480px a 767px y mínimo 740px de altura
 Mantiene el efecto sticky.
 ========================================================= */

@media screen
and (min-width: 480px)
and (max-width: 767px)
and (min-height: 740px) {

  .hdm-stack {
      --hdm-gap: 16px;

      /*
       * svh responde mejor a la barra dinámica
       * de Chrome y Safari en teléfonos.
       */
      --hdm-bottom-space: clamp(240px, 42svh, 370px);
  }

  .hdm-stack-card {
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
  }

  .hdm-stack-1 {
      --hdm-card-top:
          calc(58px + env(safe-area-inset-top, 0px));
  }

  .hdm-stack-2 {
      --hdm-card-top:
          calc(63px + env(safe-area-inset-top, 0px));
  }

  .hdm-stack-3 {
      --hdm-card-top:
          calc(68px + env(safe-area-inset-top, 0px));
  }

  .hdm-stack-4 {
      --hdm-card-top:
          calc(73px + env(safe-area-inset-top, 0px));
  }
}


/* =========================================================
 TELÉFONOS PEQUEÑOS
 Hasta 479px
 Desactiva sticky para evitar contenido cortado.
 ========================================================= */

@media screen and (max-width: 479px) {

  .hdm-stack {
      --hdm-gap: 16px;
      --hdm-bottom-space: 0px;

      overflow: visible !important;

      padding-bottom: 0 !important;
      margin-bottom: 35px !important;
  }

  .hdm-stack > .e-con-inner {
      overflow: visible !important;

      padding-bottom: 0 !important;
  }

  .hdm-stack-card {
      position: relative !important;

      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      left: auto !important;

      z-index: auto !important;

      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;

      height: auto !important;
      min-height: auto !important;
      max-height: none !important;

      overflow: visible !important;

      transform: none !important;
  }
}


/* =========================================================
 TELÉFONOS DE POCA ALTURA
 Aunque sean anchos, desactiva sticky si la pantalla
 tiene menos de 740px de altura.
 ========================================================= */

@media screen and (max-width: 767px) and (max-height: 739px) {

  .hdm-stack {
      --hdm-gap: 16px;
      --hdm-bottom-space: 0px;

      overflow: visible !important;

      padding-bottom: 0 !important;
      margin-bottom: 35px !important;
  }

  .hdm-stack > .e-con-inner {
      overflow: visible !important;

      padding-bottom: 0 !important;
  }

  .hdm-stack-card {
      position: relative !important;

      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      left: auto !important;

      z-index: auto !important;

      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;

      height: auto !important;
      min-height: auto !important;
      max-height: none !important;

      overflow: visible !important;

      transform: none !important;
  }
}


/* =========================================================
 ACCESIBILIDAD
 Mantiene una visualización estable cuando el usuario
 solicita reducir animaciones.
 ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hdm-stack-card {
      scroll-behavior: auto !important;
  }
}\n}.elementor .yt-hero-shell{width:100%;min-width:0px;max-width:100%;overflow:hidden;display:block;}