/** Shopify CDN: Minification failed

Line 98:10 Unexpected "{"
Line 98:19 Expected ":"
Line 107:8 Unexpected "{"
Line 107:17 Expected ":"
Line 107:43 Unexpected "{"

**/


/* CSS from section stylesheet tags */
/* Estilos generales para la galería */
.custom-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas de igual tamaño */
  grid-template-rows: 1fr 1.5fr; /* Fila 1 (normal), Fila 2 reducida (25%-30%) */
  gap: 10px; /* Espacio entre los elementos */
  position: relative;
}

@media screen and (min-width: 750px) {  .custom-collage {
  max-height:80vh;
}
                                     }
  
.custom-collage__item {
  position: relative;
  overflow: hidden;
}

/* Bloque 1: A1, A2, B1, B2 */
.custom-collage__item--image1 {
  grid-column: 1 / span 2;   /* Ocupa las dos primeras columnas (A1, A2) */
  grid-row: 1 / span 2;      /* Ocupa las dos primeras filas (B1, B2) */
}

/* Bloque 2: C1 y D1 */
.custom-collage__item--image2 {
  grid-column: 3 / 5; /* Ocupa las columnas 3 y 4 (C1, D1) */
  grid-row: 1; /* Primera fila */
}

/* Bloque 3: C2 */
.custom-collage__item--image3 {
  grid-column: 3; /* Columna 3 */
  grid-row: 2; /* Segunda fila */
}

/* Bloque 4: D2 */
.custom-collage__item--image4 {
  grid-column: 4; /* Columna 4 */
  grid-row: 2; /* Segunda fila */
}

/* Imagen dentro de cada bloque */
.custom-collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

/* Efecto hover para aumentar tamaño */
.custom-collage__item:hover img {
  transform: scale(1.1);
}

/* Títulos */
.custom-collage__item h1, .custom-collage__item h2 {
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  z-index: 2;
  padding: 0; /* Eliminar padding */
  margin: 0; /* Eliminar márgenes adicionales */
  display: block; /* Asegurarse de que los títulos se muestren */
}

/* Ajuste específico para imagen 1 */
.custom-collage__item--image1 h1 {
  bottom: 5%;  /* Título de imagen 1 alineado al fondo con un poco de espacio */
  font-size: 6rem; /* Título grande para la imagen 1 */
  left: 50%;
  transform: translateX(-50%);  /* Centrado horizontal de la imagen 1 */
}

/* Centrado de títulos de otras imágenes (C1, C2, D1, D2) */
.custom-collage__item h2 {
  font-size: 3rem; /* Títulos más pequeños para las demás imágenes */
  top: 50%;  /* Centrado vertical */
  left: 50%; /* Centrado horizontal */
  transform: translate(-50%, -50%); /* Asegura el centrado perfecto */
}

/* Título de la sección */
.section-{{ section.id }}-padding {
  padding: 10rem 0; /* Padding de 10rem arriba y abajo */
}

.collage-wrapper-title {
  text-align: center;
  margin-bottom: 20px;
}

.color-{{ section.settings.color_scheme }} {
  /* Define color scheme classes */
  background-color: var(--color-primary);    
}

.add-pad {
  padding: 10rem 5rem !important;
}

/* Media Queries para diseño móvil */
@media (max-width: 768px) {
  .custom-collage {
    display: block; /* Los bloques se apilan uno debajo del otro */
  }

  .custom-collage__item {
    width: 100%; /* Los bloques ocupan todo el ancho */
    margin-bottom: 1rem; /* Espacio entre los bloques */
    aspect-ratio: 1; /* Mantener la proporción 1:1 */
  }

  /* Títulos para pantallas móviles */
  .custom-collage__item h1, .custom-collage__item h2 {
    font-size: 3rem; /* Títulos más pequeños en móviles */
    position: absolute; /* Mantener la posición absoluta para que estén sobre las imágenes */
    top: 50%; /* Centrado vertical */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Centrado perfecto */
    z-index: 3; /* Asegura que el título esté por encima de la imagen */
    padding: 0 1rem; /* Agregar un poco de espacio para el título */
    margin: 0; /* Asegurar que no haya márgenes que interfieran */
  }

  /* Ajuste específico para imagen 1 en móvil */
  .custom-collage__item--image1 h1 {
    font-size: 4rem; /* Título más pequeño en móvil */
    bottom: auto;  /* Eliminar el espaciado desde el fondo */
  }

  /* Títulos de otras imágenes también en 3rem en móvil */
  .custom-collage__item h2 {
    font-size: 4rem; /* Títulos en 3rem en móvil */
    top: 50%; /* Centrado vertical en móviles */
    transform: translate(-50%, -50%); /* Centrado perfecto en ambos ejes */
  }

  /* Reducir padding en la sección */
  .add-pad {
    padding: 5rem 2rem !important; /* Mitad de padding en móvil */
  }
}