.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-582 .elementor-element.elementor-element-3fbf32d .gallery-item .gallery-caption{display:none;}.elementor-582 .elementor-element.elementor-element-945f5a3 .gallery-item .gallery-caption{display:none;}/* Start custom CSS *//* 1. Forzar a que todos los contenedores intermedios de Elementor midan el 100% de ancho */
.galeria-ferri,
.galeria-ferri .elementor-image-gallery,
.galeria-ferri .gallery {
  width: 100% !important;
  max-width: 100% !important;
}

/* 2. Configurar la grilla principal */
.galeria-ferri .gallery {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important; /* Proporción 2/3 para la grande, 1/3 para las pequeñas */
  grid-template-rows: repeat(2, 190px) !important; /* Altura de cada fila (Total: 380px + gap) */
  gap: 12px !important;
  box-sizing: border-box !important;
}

/* 3. Ocultar imágenes a partir de la 4.ª */
.galeria-ferri .gallery-item:nth-child(n+4) {
  display: none !important;
}

/* 4. Resetear etiquetas <figure> de WordPress/Elementor */
.galeria-ferri .gallery-item {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 5. Asegurar que las imágenes llenen el contenedor completamente */
.galeria-ferri .gallery-icon,
.galeria-ferri .gallery-icon a,
.galeria-ferri .gallery-icon img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* 6. Asignación de posiciones en la grilla */
.galeria-ferri .gallery-item:nth-child(1) {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
}

.galeria-ferri .gallery-item:nth-child(2) {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
}

.galeria-ferri .gallery-item:nth-child(3) {
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
}

/* 7. Badge "+" cuando hay 4 o más imágenes */
.galeria-ferri .gallery-item:nth-child(4) ~ .gallery-item:nth-child(3)::after,
.galeria-ferri .gallery-item:nth-child(3):has(~ .gallery-item:nth-child(4))::after {
  content: "+" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #ffffff !important;
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  transition: background 0.2s ease !important;
}

.galeria-ferri .gallery-item:nth-child(3):has(~ .gallery-item:nth-child(4)):hover::after {
  background: rgba(0, 0, 0, 0.55) !important;
}

/* Responsive para móvil */
@media (max-width: 600px) {
  .galeria-ferri .gallery {
    grid-template-columns: 1fr !important;
    grid-template-rows: 220px repeat(2, 130px) !important;
  }
  
  .galeria-ferri .gallery-item:nth-child(1) { grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; }
  .galeria-ferri .gallery-item:nth-child(2) { grid-column: 1 / 2 !important; grid-row: 2 / 3 !important; }
  .galeria-ferri .gallery-item:nth-child(3) { grid-column: 1 / 2 !important; grid-row: 3 / 4 !important; }
}/* End custom CSS */