/** Shopify CDN: Minification failed

Line 32:0 Unexpected "{"
Line 32:1 Expected identifier but found "%"
Line 38:0 Unexpected "{"
Line 38:1 Expected identifier but found "%"
Line 54:0 Unexpected "{"
Line 54:1 Expected identifier but found "%"

**/

/* =========================================================================
   1. ESTILOS BASE Y CONDICIONALES (Se aplican siempre, a menos que se anulen)
   ========================================================================= */

/* Estilos de la imagen base */
img {
  display: block;
  max-width: 100%;
}

/* Contenedor del Slider (Before/After) */
.contenedor {
  display: grid;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  --position: 50%; /* Variable CSS para la posición inicial del slider */
}

/* Ancho del Contenedor del Slider (Depende de si hay contenido lateral) */
{% if section.settings.show_content == true %}
  /* Si hay contenido lateral, el ancho se calculará con Flexbox en desktop */
  .contenedor {
    /* En móvil siempre es 100%, esta regla solo afecta si falla el Flexbox */
    width: 100%; 
  }
{% else %}
  /* Si NO hay contenido lateral, el slider ocupa todo el ancho y se centra */
  .ba_main {
    justify-content: center;
    align-items: center;
  }
  .contenedor {
    width: 100%; /* Ocupará todo el ancho dentro del ba_main */
    margin: 0 auto;
  } 
  @media screen and (min-width: 768px) {
    .contenedor {
      /* Le damos un ancho máximo cuando está solo */
      width: 50%;
    }
  }
{% endif %}

.image-contenedor {
  max-width: 1200px;
}

/* Estilos de las imágenes */
.ba_main .slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  max-height: 700px;
}

/* Imagen "Antes" con estilo condicional Liquid */
.before_img {
  position: absolute;
  inset: 0;
  width: var(--position);

}

/* Insignias */
.before_badge, .after_badge {
  z-index: 99 !important;
  position: absolute;
  bottom: 15px;
  background: #fff;
  padding: 0 5px;
  border-radius: 5px;
  color: #000;
}
.before_badge {
  left: 15px;
}
.after_badge {
  right: 15px;
}

/* Slider y botón */
.ba-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.ba_main .ba-slider:focus-visible ~ .slider-button {
  outline: 5px solid black;
  outline-offset: 3px;
}

.ba_main .slider-line {
  position: absolute;
  inset: 0;
  width: .2rem;
  height: 100%;
  background-color: #fff;
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
}

.ba_main .slider-button {
  position: absolute;
  background-color: #fff !important;
  color: black;
  padding: .5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}

/* Contenido del lado derecho (Estilos de texto) */
.ba_content_right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; /* Centrado en móvil por defecto */
  padding: 20px;
  box-sizing: border-box;
}
.ba_content_right h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.8em;
}
.ba_content_right p {
  line-height: 1.6;
  font-size: 1.1em;
}
.before_after-paragraph p {
  margin-top: 5px; /* (Ajuste de margen anterior) */
  line-height: 1.2; /* Valor recomendado: 1.2 es más apretado que el 1.6 predeterminado */
  font-size: 1.1em;
}
.ba_content_right p {
  /* Ya tenías line-height: 1.6, redúcelo */
  line-height: 1.2; /* Cambiar de 1.6 a 1.2 o 1.3 lo hará más compacto */
  font-size: 1.1em;
}

/* =========================================================================
   2. LAYOUT RESPONSIVE
   ========================================================================= */

/* 📱 MOBILE FIRST: Estilos que se aplican a todas las pantallas */
.ba_main {
  display: flex;
  flex-direction: column; /* Apila el contenido y el slider en móvil */
  gap: 30px; 
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; 
  /* Padding general para móvil */
  padding: 0 20px; /* Consolidamos el padding de 15px y 20px */
}

/* En móvil, los hijos directos ocupan el ancho completo */
.ba_main > .ba_content_right,
.ba_main > .contenedor.before_after {
  width: 100%;
}

/* 💻 DESKTOP: Media Query para activar las 2 columnas (a partir de 768px) */
@media screen and (min-width: 768px) {
  .ba_main {
    flex-direction: row; /* Coloca el contenido y el slider uno al lado del otro */
    align-items: flex-center;
    padding: 0 5rem; /* El padding de 5rem para desktop */
  }

  /* Regla para dividir el ancho entre las dos columnas */
  .ba_main > .ba_content_right,
  .ba_main > .contenedor.before_after {
    /* Asigna el 50% de ancho a cada columna, menos la mitad del gap */
    flex-basis: calc(50% - 15px);
    flex-direction: column;
    width: auto;
  }

  /* Estilo de alineación para desktop */
  .ba_content_right {
    text-align: right;
    flex-direction: column;
    /* Si el texto es corto, puedes centrarlo verticalmente */
    /* align-self: center; */ 
  }
}