/* ==========================================================================
   sectores-carousel.css — Componente "Carrusel de Sectores" (index.html)
   ==========================================================================
   Hoja de estilos EXCLUSIVA de la sección #sectores en index.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 y venta-animaciones.css: componente encapsulado bajo
   su propio prefijo BEM (.isa-carousel / .isa-sectores-lightbox) para
   evitar cualquier colisión con clases utilitarias o con carousel.js
   (que ya existe en el proyecto para otro componente distinto, en
   venta.html — este archivo NO lo toca ni depende de él).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Carrusel — viewport que muestra 3 imágenes a la vez
   -------------------------------------------------------------------------- */
.isa-carousel{
  position: relative;
}
.isa-carousel__viewport{
  overflow: hidden;
  border-radius: var(--radius-corp);
}
.isa-carousel__track{
  display: flex;
  gap: 1rem;
  /* La transición mueve el track con transform:translateX(), calculado en
     JS a partir del ancho real de una diapositiva — así el carrusel no se
     rompe sin importar cuántas imágenes (5, 8, 12...) traiga la lista. */
  transition: transform .5s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}

/* 3 diapositivas visibles en escritorio/tablet: cada una ocupa 1/3 del
   viewport menos los 2 huecos (gap) que quedan entre ellas. */
.isa-carousel__slide{
  flex: 0 0 calc((100% - 2rem) / 3);
  max-width: calc((100% - 2rem) / 3);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-corp);
  overflow: hidden;
  box-shadow: 0 10px 25px -8px rgba(5,63,135,.35);
}
.isa-carousel__slide-btn{
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.isa-carousel__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.isa-carousel__slide-btn:hover .isa-carousel__img,
.isa-carousel__slide-btn:focus-visible .isa-carousel__img{
  transform: scale(1.06);
}

/* Flechas de navegación */
.isa-carousel__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: background .2s ease, color .2s ease;
  z-index: 5;
}
.isa-carousel__nav:hover{ background: var(--color-secondary); color: #fff; }
.isa-carousel__nav--prev{ left: -1.25rem; }
.isa-carousel__nav--next{ right: -1.25rem; }
.isa-carousel__nav:disabled{ opacity: .35; cursor: default; pointer-events: none; }

@media (max-width: 1024px){
  .isa-carousel__nav--prev{ left: .5rem; }
  .isa-carousel__nav--next{ right: .5rem; }
}

/* En móvil, 3 columnas quedan demasiado angostas: 1.5 diapositivas visibles
   (la mitad de la 2ª asoma) da a entender que se puede seguir deslizando,
   sin necesitar un patrón de interacción distinto al de escritorio. */
@media (max-width: 640px){
  .isa-carousel__slide{
    flex: 0 0 calc((100% - 1rem) / 1.5);
    max-width: calc((100% - 1rem) / 1.5);
  }
  .isa-carousel__track{ gap: .75rem; }
}

/* --------------------------------------------------------------------------
   2. Lightbox — al hacer click, la imagen se ve 1.5x más grande que su
   tamaño mostrado en el carrusel (el cálculo exacto del 1.5x ocurre en JS,
   sobre el ancho/alto real ya renderizado de la diapositiva; aquí solo se
   define la transición de apertura/cierre y un tope de seguridad para que
   nunca se desborde en pantallas pequeñas).
   -------------------------------------------------------------------------- */
.isa-sectores-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-sectores-lightbox.hidden{
  display: flex !important; /* gana a .hidden{display:none} de utilities.css */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.isa-sectores-lightbox:not(.hidden){
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@keyframes isaSectoresLightboxPop{
  from{ opacity: 0; transform: scale(.85); }
  to{   opacity: 1; transform: scale(1);   }
}
.isa-sectores-lightbox__img{
  /* Tope de seguridad: si el 1.5x calculado en JS excediera la pantalla
     (ej. en móvil), estos máximos evitan que la imagen se desborde. */
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius-corp);
  box-shadow: 0 25px 60px rgba(0,0,0,.5);
}
.isa-sectores-lightbox:not(.hidden) .isa-sectores-lightbox__img{
  animation: isaSectoresLightboxPop .35s cubic-bezier(.34,1.56,.64,1) both;
}

.isa-sectores-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-sectores-lightbox__close:hover{ background: rgba(255,255,255,.25); }

/* --------------------------------------------------------------------------
   3. Accesibilidad — mismo criterio ya establecido en cronologiaISA.css /
   venta-animaciones.css: respeta prefers-reduced-motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .isa-carousel__track,
  .isa-carousel__img,
  .isa-sectores-lightbox,
  .isa-sectores-lightbox.hidden,
  .isa-sectores-lightbox:not(.hidden),
  .isa-sectores-lightbox__img{
    transition-duration: .01ms !important;
  }
  .isa-sectores-lightbox:not(.hidden) .isa-sectores-lightbox__img{
    animation: none !important;
  }
}