/* ============================================
   ANIMACIÓN HOVER PARA EXPAND ITEMS
   ============================================ */

.expand-items {
  transition: none;
  height: 650px;
}

.expand-item,
.expand-item-2,
.expand-item-3 {
  width: 33.3333% !important;
  height: 650px !important;
  max-height: 650px !important;
  transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer;
  flex-shrink: 0 !important;
}

/* Cuando se hace hover sobre un item, se expande */
.expand-item:hover,
.expand-item-2:hover,
.expand-item-3:hover {
  width: 50% !important;
  height: 650px !important;
  max-height: 650px !important;
}

/* Cuando el contenedor tiene hover en cualquier item, los otros se contraen */
.expand-items:has(.expand-item:hover) .expand-item:not(:hover),
.expand-items:has(.expand-item-2:hover) .expand-item-2:not(:hover),
.expand-items:has(.expand-item-3:hover) .expand-item-3:not(:hover) {
  width: 25% !important;
  height: 650px !important;
  max-height: 650px !important;
}

.expand-items:has(.expand-item:hover) .expand-item-2:not(.expand-item:hover),
.expand-items:has(.expand-item:hover) .expand-item-3:not(.expand-item:hover),
.expand-items:has(.expand-item-2:hover) .expand-item:not(.expand-item-2:hover),
.expand-items:has(.expand-item-2:hover) .expand-item-3:not(.expand-item-2:hover),
.expand-items:has(.expand-item-3:hover) .expand-item:not(.expand-item-3:hover),
.expand-items:has(.expand-item-3:hover) .expand-item-2:not(.expand-item-3:hover) {
  width: 25% !important;
  height: 650px !important;
  max-height: 650px !important;
}

/* Ocultar el texto por defecto - IMPORTANTE: solo visible con hover */
.expand-item .expand-text-box,
.expand-item-2 .expand-text-box,
.expand-item-3 .expand-text-box {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.6s ease-out 0.3s;
}

/* Ocultar los márgenes del texto y aplicar transform inicial */
.expand-margins,
.expand-margins-2,
.expand-margins-3 {
  transform: translateY(30px) !important;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

/* Mostrar el texto SOLO cuando se hace hover sobre la imagen específica */
.expand-item:hover .expand-text-box {
  opacity: 1 !important;
  pointer-events: auto;
}

.expand-item-2:hover .expand-text-box {
  opacity: 1 !important;
  pointer-events: auto;
}

.expand-item-3:hover .expand-text-box {
  opacity: 1 !important;
  pointer-events: auto;
}

/* Animar el texto hacia arriba cuando se hace hover sobre cada imagen */
.expand-item:hover .expand-margins {
  transform: translateY(0) !important;
}

.expand-item-2:hover .expand-margins-2 {
  transform: translateY(0) !important;
}

.expand-item-3:hover .expand-margins-3 {
  transform: translateY(0) !important;
}

/* Media queries para responsive */
@media screen and (max-width: 991px) {
  .expand-items {
    height: auto;
  }
  
  .expand-item,
  .expand-item-2,
  .expand-item-3 {
    height: 350px !important;
    max-height: 350px !important;
  }
}

@media screen and (max-width: 767px) {
  .expand-items {
    height: auto;
  }
  
  .expand-item,
  .expand-item-2,
  .expand-item-3 {
    width: 100% !important;
    height: 350px !important;
    max-height: 350px !important;
  }
  
  .expand-text-box {
    opacity: 1;
  }
  
  .expand-margins,
  .expand-margins-2,
  .expand-margins-3 {
    transform: translateY(0);
  }
}