.asdasd {
  background: #0193AD;
  font-family: sans-serif;
  padding-top: 2rem;
  padding-bottom: 2rem;
  /* Agregamos overflow hidden aquí si .content-wrapper no lo tiene globalmente */
  overflow: hidden;
}

.content-wrapper {
  /* Asumiendo que tienes una clase global para limitar el ancho */
  max-width: 1200px; /* O el ancho que uses */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px; /* Espaciado lateral */
  padding-right: 15px;
  box-sizing: border-box;
}

.contenedor-principal-xyz123 {
  /* Ya no necesita margin: 0 auto si usa content-wrapper */
  overflow: hidden; /* Mantenemos por si acaso */
}

/* Columnas */
.columna-izquierda-abc456 {
  width: 100%;
  float: none;
  padding: 20px 0 0 0; /* Ajustado padding */
  box-sizing: border-box;
  line-height: 1;
  color: white;
}

.columna-derecha-def789 {
  width: 100%;
  float: none;
  padding: 0 0 20px 0; /* Ajustado padding */
  box-sizing: border-box;
  line-height: normal;
  color: white;
   /* El font-size ya se aplica desde <style> */
}

.titulo-principal-ghi012 {
  font-size: 40px; /* Considera usar rem/em para accesibilidad */
  margin-bottom: 10px;
  color: white;
}

@media (min-width: 768px) {
  .contenedor-principal-xyz123 {
    display: flex;
    /* Eliminamos padding de las columnas internas y lo ponemos en el wrapper si es necesario */
    /* padding: 20px; */
    box-sizing: border-box;
  }

  .columna-izquierda-abc456 {
    width: 30%;
    padding: 0 20px 0 0; /* Espacio a la derecha */
     float: none; /* No necesario con flex */
  }

  .columna-derecha-def789 {
    width: 70%; /* Ajustado para sumar 100% con la izquierda */
    padding: 0 0 0 20px; /* Espacio a la izquierda */
     float: none; /* No necesario con flex */
  }
}

/* Slider */
.slider-contenedor-jkl345 {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 2rem; /* Añadir espacio arriba */
}

.slider-imagenes-mno678 {
  display: flex;
  transition: transform 0.5s ease-in-out;
  /* Ancho total dinámico basado en el número de imágenes */
  /* Asumiendo que quieres mostrar 3 imágenes a la vez (imagenesVisibles = 3 en JS) */
  /* El ancho total debe ser (NumeroTotalDeImagenes / ImagenesVisibles) * 100% */
  /* Usamos HubL para obtener el número total de imágenes */
  {% set num_images = module.columns|length %}
  {% if num_images > 0 %}
    /* Calculamos el ancho basado en 3 imágenes visibles */
    width: calc(100% *  / 3);
  {% else %}
    width: 100%; /* Fallback si no hay imágenes */
  {% endif %}
  /* Si el JS calcula imagenesVisibles dinámicamente, este cálculo podría ser diferente */
  /* Pero como el JS tiene imagenesVisibles = 3 hardcodeado, esto debería funcionar */
}

.slider-imagen-pqr901 {
  /* Cada imagen debe ocupar 1/3 del ancho del contenedor visible */
  width: calc(100% / 3);
  flex-shrink: 0; /* Evita que las imágenes se encojan */
  height: auto;
  display: block;
  /* Usar padding en lugar de margin para evitar cálculos complejos con box-sizing */
  padding-right: 10px; /* Espacio entre imágenes */
  box-sizing: border-box; /* Padding incluido en el ancho */
  cursor: pointer;
}

.slider-imagen-pqr901:last-child {
  padding-right: 0; /* Sin espacio a la derecha para la última imagen */
}

/* Dots del Slider */
.slider-dots-contenedor-stu234 {
  text-align: center;
  margin-top: 15px; /* Más espacio */
}

.slider-dot-vwx567 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Transición suave */
}

.slider-dot-vwx567:hover,
.slider-dot-vwx567.active {
  background-color: #333; /* O un color que contraste mejor */
}

/* Clearfix (ya no es necesario con Flexbox en .contenedor-principal-xyz123) */
/* .clearfix-yza890::after { ... } puede eliminarse si no se usa en otro lugar */

/* Media Queries */
@media (max-width: 767px) {
  .slider-dots-contenedor-stu234 {
    /* Quizás quieras mostrarlos también en móvil? Si no, mantenlo */
     display: none;
  }
  .columna-izquierda-abc456,
  .columna-derecha-def789 {
    /* Restablecer padding para móvil si se quitó antes */
    padding: 0;
  }
  .columna-derecha-def789{
     padding-top: 10px; /* Añadir un poco de espacio si es necesario */
  }

  /* En móvil quizás quieras mostrar menos imágenes? (Ej: 1 o 2) */
  /* Si quieres mostrar solo 1 imagen en móvil: */
  /*
  .slider-imagenes-mno678 {
     width: calc(100% *  / 1); // N / 1 = N
  }
  .slider-imagen-pqr901 {
    width: calc(100% / 1); // 100%
    padding-right: 0; // Sin padding si solo hay una visible
  }
  // IMPORTANTE: Si cambias las imágenes visibles en móvil, el JS
  // también necesitaría saberlo para calcular el translateX y los dots correctamente.
  // Dado que no podemos cambiar el JS, es mejor mantener 3 visibles
  // o aceptar que el cálculo de movimiento/dots será incorrecto en móvil
  // si cambias el ancho aquí. Mantendremos 3 por consistencia con el JS.
  */
}

        /* Lightbox Styles */
        .lightbox-rsv678 { /* Clase única para Lightbox */
            display: none;
            position: fixed;
            z-index: 1000;
            padding-top: 0;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.8);
        }

        .lightbox-contenido-zab234 { /* Clase única para contenido de Lightbox */
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            max-height: 80%;
          position: relative; 
          top:10em;
        }


        .cerrar-lightbox-wxy901 { /* Clase única para cerrar Lightbox */
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }

        .cerrar-lightbox-wxy901:hover,
        .cerrar-lightbox-wxy901:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        @media (max-width: 700px) {
            .lightbox-contenido-zab234 {
                width: 100%;
            }
        }