/* ==========================================================================
   servicios-galeria.css — Galerías de imágenes de servicios-integrales.html
   ==========================================================================
   Hoja de estilos EXCLUSIVA de servicios-integrales.html. No modifica ni
   depende de ningún selector de components.css ni de utilities.css — mismo
   criterio ya establecido en el proyecto para cronologiaISA.css,
   venta-animaciones.css y sectores-carousel.css: componente encapsulado
   bajo su propio prefijo BEM, sin tocar CSS compartido.

   Dos estructuras distintas, cada una para la mitad de los 6 servicios:
     .isa-galeria-pila   → "Pila en abanico"     (servicios PARES: 02/04/06)
     .isa-galeria-cinta  → "Cinta de miniaturas" (servicios NONES: 01/03/05)
   Ambas rotan solas y comparten un mismo lightbox (.isa-servicios-lightbox)
   que amplía la imagen al DOBLE de su tamaño mostrado (cálculo en JS).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ESTRUCTURA A — "Pila en abanico" (servicios pares)
   -------------------------------------------------------------------------- */
.isa-galeria-pila{
  position: relative;
  max-width: 26rem;
  width: 100%;
  margin: 0 auto;
}
.isa-galeria-pila__stack{
  position: relative;
  aspect-ratio: 4 / 3;
}
.isa-galeria-pila__item{
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-corp);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 14px 30px -10px rgba(5,63,135,.35);
  /* z-index cambia con .35s de retraso para que la foto que se va hacia
     atrás no "atraviese" visualmente a la que pasa al frente. */
  transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .7s ease, z-index 0s .35s;
}
.isa-galeria-pila__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4 posiciones visibles del abanico (frente → fondo); si hay más de 4
   fotos, las adicionales quedan en pos-hidden y entran a la rotación
   igual que las demás — el JS reordena las clases, no el DOM. */
.isa-galeria-pila__item.pos-0{ transform: rotate(0deg)   translate(0, 0)       scale(1);   opacity: 1;   z-index: 4; }
.isa-galeria-pila__item.pos-1{ transform: rotate(-6deg)  translate(-10px, 8px) scale(.96); opacity: .9;  z-index: 3; }
.isa-galeria-pila__item.pos-2{ transform: rotate(5deg)   translate(12px, 14px) scale(.93); opacity: .72; z-index: 2; }
.isa-galeria-pila__item.pos-3{ transform: rotate(-3deg)  translate(-6px, 20px) scale(.9);  opacity: .5;  z-index: 1; }
.isa-galeria-pila__item.pos-hidden{ opacity: 0; pointer-events: none; z-index: 0; transition: opacity .4s ease; }

/* Insignia con el ícono del servicio: conserva el lenguaje visual del
   ícono original sin perderlo de golpe al pasar a fotografía real. */
.isa-galeria-pila__badge{
  position: absolute;
  top: -.9rem;
  left: -.9rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  border: 3px solid #fff;
  z-index: 5;
}

/* --------------------------------------------------------------------------
   2. ESTRUCTURA B — "Cinta de miniaturas" (servicios nones)
   -------------------------------------------------------------------------- */
.isa-galeria-cinta{
  max-width: 26rem;
  width: 100%;
  margin: 0 auto;
}
.isa-galeria-cinta__featured{
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-corp);
  overflow: hidden;
  box-shadow: 0 14px 30px -10px rgba(5,63,135,.35);
}
.isa-galeria-cinta__feature-btn{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.isa-galeria-cinta__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.isa-galeria-cinta__img.is-active{ opacity: 1; }

.isa-galeria-cinta__badge{
  position: absolute;
  top: .85rem;
  left: .85rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  z-index: 2;
  pointer-events: none;
}

.isa-galeria-cinta__thumbs{
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: 1rem;
}
.isa-galeria-cinta__thumb{
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: .55;
  background-size: cover;
  background-position: center;
  transition: opacity .2s ease, border-color .2s ease;
}
.isa-galeria-cinta__thumb.is-active{
  opacity: 1;
  border-color: var(--color-accent);
}
.isa-galeria-cinta__thumb:hover{ opacity: .85; }

/* Modificador "destacada": usado en casos-de-exito.html para el bloque de
   "Proyecto Destacado" (pasteurizador), donde la galería ocupa todo el
   ancho de su columna (en vez del max-width:26rem por defecto) y usa una
   altura fija en vez de aspect-ratio, igual que el bloque de imagen fijo
   que sustituye (h-64 en móvil, 450px en escritorio). */
.isa-galeria-cinta--destacada{ max-width: none; margin: 0; }
.isa-galeria-cinta--destacada .isa-galeria-cinta__featured{ aspect-ratio: auto; height: 16rem; border-radius: 0; }
@media (min-width: 1024px){
  .isa-galeria-cinta--destacada .isa-galeria-cinta__featured{ height: 450px; }
}

/* --------------------------------------------------------------------------
   3. Lightbox compartido — abre la imagen clicada al DOBLE (2x) de su
   tamaño mostrado. El 2x exacto se calcula en JS sobre el ancho/alto real
   ya renderizado; aquí solo la transición y un tope de seguridad para no
   desbordar en pantallas chicas (mismo criterio que sectores-carousel.css
   de index.html, ajustado de 1.5x a 2x).
   -------------------------------------------------------------------------- */
.isa-servicios-lightbox{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(5,15,30,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  transition: opacity .3s ease, visibility 0s linear 0s;
}
.isa-servicios-lightbox.hidden{
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.isa-servicios-lightbox:not(.hidden){
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@keyframes isaServiciosLightboxPop{
  from{ opacity: 0; transform: scale(.85); }
  to{   opacity: 1; transform: scale(1);   }
}
.isa-servicios-lightbox__img{
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius-corp);
  box-shadow: 0 25px 60px rgba(0,0,0,.5);
}
.isa-servicios-lightbox:not(.hidden) .isa-servicios-lightbox__img{
  animation: isaServiciosLightboxPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.isa-servicios-lightbox__close{
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .2s ease;
}
.isa-servicios-lightbox__close:hover{ background: rgba(255,255,255,.25); }

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
  .isa-galeria-pila,
  .isa-galeria-cinta{ max-width: 20rem; }
  .isa-galeria-pila__badge{ width: 2.75rem; height: 2.75rem; font-size: 1.15rem; top: -.7rem; left: -.7rem; }
}

/* --------------------------------------------------------------------------
   5. Accesibilidad — respeta prefers-reduced-motion (mismo criterio ya
   establecido en cronologiaISA.css / venta-animaciones.css /
   sectores-carousel.css): sin auto-rotación ni animaciones de transición.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .isa-galeria-pila__item,
  .isa-galeria-cinta__img,
  .isa-servicios-lightbox,
  .isa-servicios-lightbox.hidden,
  .isa-servicios-lightbox:not(.hidden),
  .isa-servicios-lightbox__img{
    transition-duration: .01ms !important;
  }
  .isa-servicios-lightbox:not(.hidden) .isa-servicios-lightbox__img{
    animation: none !important;
  }
}