/* === Estilos para imagen responsive === */

.lemon-responsive-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 100px;
}

.lemon-responsive-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  transform-origin: center center;
  min-width: 100%;
}

/* Por defecto, imagen normal sin position absolute */
.lemon-responsive-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover;
  transform-origin: center center;
  opacity: 1 !important;
  visibility: visible !important;
  min-width: 100%;
}

/* CORRECCIÓN CRÍTICA: Aspect ratio con máxima especificidad */
.lemon-responsive-image.has-aspect-ratio {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  overflow: hidden !important;
  min-width: 100px;
}

/* Aspect ratios usando padding-bottom */
.lemon-responsive-image.has-aspect-ratio[data-aspect-ratio="1/1"] {
  padding-bottom: 100% !important;
}

.lemon-responsive-image.has-aspect-ratio[data-aspect-ratio="4/3"] {
  padding-bottom: 75% !important;
}

.lemon-responsive-image.has-aspect-ratio[data-aspect-ratio="3/2"] {
  padding-bottom: 66.666% !important;
}

.lemon-responsive-image.has-aspect-ratio[data-aspect-ratio="16/9"] {
  padding-bottom: 56.25% !important;
}

.lemon-responsive-image.has-aspect-ratio[data-aspect-ratio="21/9"] {
  padding-bottom: 42.857% !important;
}

.lemon-responsive-image.has-aspect-ratio[data-aspect-ratio="3/4"] {
  padding-bottom: 133.333% !important;
}

.lemon-responsive-image.has-aspect-ratio[data-aspect-ratio="2/3"] {
  padding-bottom: 150% !important;
}

.lemon-responsive-image.has-aspect-ratio[data-aspect-ratio="9/16"] {
  padding-bottom: 177.777% !important;
}

/* Imagen dentro del contenedor con aspect ratio */
.lemon-responsive-image.has-aspect-ratio img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* === MARGIN EXPAND EFFECT CON TRANSFORM === */

/* Asegurar que el contenedor permita el scaling */
.lemon-responsive-image-wrapper[data-scroll-effect="margin_expand"] {
  overflow: hidden !important;
}

.lemon-responsive-image-wrapper[data-scroll-effect="margin_expand"] .lemon-responsive-image {
  width: 100% !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

.lemon-responsive-image-wrapper[data-scroll-effect="margin_expand"] .lemon-responsive-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transform-origin: center center !important;
  will-change: transform !important;
}

/* === ANIMACIONES BÁSICAS === */

/* Estados iniciales para animaciones básicas - SOLO cuando la animación está activa */
.lemon-image-animated:not(.animation-triggered) {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.lemon-image-animated.animation-triggered {
  opacity: 1 !important;
  transform: translateY(0);
}

/* Animaciones específicas */
.lemon-fadeIn:not(.animation-triggered) {
  transform: none;
  opacity: 0;
}

.lemon-fadeIn.animation-triggered {
  opacity: 1 !important;
}

.lemon-fadeInUp:not(.animation-triggered) {
  transform: translateY(30px);
  opacity: 0;
}

.lemon-fadeInUp.animation-triggered {
  transform: translateY(0);
  opacity: 1 !important;
}

.lemon-fadeInLeft:not(.animation-triggered) {
  transform: translateX(-30px);
  opacity: 0;
}

.lemon-fadeInLeft.animation-triggered {
  transform: translateX(0);
  opacity: 1 !important;
}

.lemon-fadeInRight:not(.animation-triggered) {
  transform: translateX(30px);
  opacity: 0;
}

.lemon-fadeInRight.animation-triggered {
  transform: translateX(0);
  opacity: 1 !important;
}

.lemon-slideInLeft:not(.animation-triggered) {
  transform: translateX(-50px);
  opacity: 0;
}

.lemon-slideInLeft.animation-triggered {
  transform: translateX(0);
  opacity: 1 !important;
}

.lemon-slideInRight:not(.animation-triggered) {
  transform: translateX(50px);
  opacity: 0;
}

.lemon-slideInRight.animation-triggered {
  transform: translateX(0);
  opacity: 1 !important;
}

.lemon-slideInUp:not(.animation-triggered) {
  transform: translateY(50px);
  opacity: 0;
}

.lemon-slideInUp.animation-triggered {
  transform: translateY(0);
  opacity: 1 !important;
}

/* IMPORTANTE: Si no hay animación, la imagen debe ser visible inmediatamente */
.lemon-responsive-image-wrapper:not(.lemon-image-animated) img {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* CORRECCIÓN MÓVIL: Asegurar que las imágenes se muestren correctamente en móvil */
@media (max-width: 767px) {
  .lemon-responsive-image-wrapper {
    min-width: 100px;
    width: 100%;
  }

  /* Si no se especifica ancho, usar 100% por defecto en móvil */
  .lemon-responsive-image-wrapper:not([style*="width"]) {
    width: 100% !important;
  }

  .lemon-responsive-image {
    width: 100%;
    min-width: 100px;
  }

  /* CORRECCIÓN CRÍTICA: Asegurar que object-fit funcione en móvil */
  .lemon-responsive-image img {
    width: 100% !important;
    min-width: 100px;
    height: auto !important;
    /* IMPORTANTE: Mantener object-fit en móvil */
    object-fit: inherit !important;
  }

  /* CORRECCIÓN CRÍTICA: Para aspect ratio en móvil, forzar height: 0 */
  .lemon-responsive-image.has-aspect-ratio {
    width: 100% !important;
    min-width: 100px;
    height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* CORRECCIÓN CRÍTICA: Asegurar que las imágenes con aspect ratio mantengan object-fit */
  .lemon-responsive-image.has-aspect-ratio img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* CORRECCIÓN ADICIONAL: Forzar herencia correcta en móvil */
@media (max-width: 767px) {
  /* Cuando el wrapper tiene ancho en porcentaje, asegurar que funcione */
  .lemon-responsive-image-wrapper[style*="width"][style*="%"] {
    min-width: 50px; /* Ancho mínimo absoluto */
  }

  /* Cuando el wrapper tiene ancho en vw, asegurar que funcione */
  .lemon-responsive-image-wrapper[style*="width"][style*="vw"] {
    min-width: 50px; /* Ancho mínimo absoluto */
  }

  /* Si el ancho es muy pequeño, establecer un mínimo razonable */
  .lemon-responsive-image-wrapper[style*="width: 0"] {
    width: 100% !important;
  }
}

/* CORRECCIÓN CRÍTICA: Responsive aspect ratios - TABLET */
@media (max-width: 1024px) and (min-width: 768px) {
  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="1/1"] {
    padding-bottom: 100% !important;
    height: 0 !important;
  }

  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="4/3"] {
    padding-bottom: 75% !important;
    height: 0 !important;
  }

  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="3/2"] {
    padding-bottom: 66.666% !important;
    height: 0 !important;
  }

  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="16/9"] {
    padding-bottom: 56.25% !important;
    height: 0 !important;
  }

  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="21/9"] {
    padding-bottom: 42.857% !important;
    height: 0 !important;
  }

  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="3/4"] {
    padding-bottom: 133.333% !important;
    height: 0 !important;
  }

  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="2/3"] {
    padding-bottom: 150% !important;
    height: 0 !important;
  }

  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="9/16"] {
    padding-bottom: 177.777% !important;
    height: 0 !important;
  }

  /* CORRECCIÓN: Cuando tablet es "Original", no aplicar aspect ratio */
  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="original"] {
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-tablet="original"] img {
    position: relative !important;
    height: auto !important;
  }
}

/* CORRECCIÓN CRÍTICA: Responsive aspect ratios - MÓVIL CON MÁXIMA ESPECIFICIDAD */
@media (max-width: 767px) {
  /* FORZAR ASPECT RATIOS MÓVILES CON MÁXIMA PRIORIDAD */
  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="1/1"] {
    padding-bottom: 100% !important;
    height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="1/1"] img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="4/3"] {
    padding-bottom: 75% !important;
    height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="4/3"] img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="3/2"] {
    padding-bottom: 66.666% !important;
    height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="3/2"] img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="16/9"] {
    padding-bottom: 56.25% !important;
    height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="16/9"] img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="21/9"] {
    padding-bottom: 42.857% !important;
    height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="21/9"] img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="3/4"] {
    padding-bottom: 133.333% !important;
    height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="3/4"] img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="2/3"] {
    padding-bottom: 150% !important;
    height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="2/3"] img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="9/16"] {
    padding-bottom: 177.777% !important;
    height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="9/16"] img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* CORRECCIÓN CRÍTICA: Cuando mobile es "Original", no aplicar aspect ratio */
  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="original"] {
    height: auto !important;
    padding-bottom: 0 !important;
  }

  .elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio[data-aspect-ratio-mobile="original"] img {
    position: relative !important;
    height: auto !important;
    object-fit: inherit !important;
  }
}

/* CORRECCIÓN FINAL: Sobrescribir cualquier CSS de tema que interfiera */
.elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio {
  height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.elementor-widget-lemon-image .lemon-responsive-image.has-aspect-ratio img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}