/* ===== acordeón líquido — 3 fotos, anchos constantes ===== */
.img-accordion{
  --h: clamp(360px, 46vw, 580px);
  /* ancho de cada panel oculto (izq y dcha) */
  --w-passive: clamp(120px, 18vw, 240px);
  /* el activo ocupa el resto exacto */
  --w-active: calc(100% - (2 * var(--w-passive)));

  position: relative;
  width: 100%;
  height: var(--h);
  overflow: hidden;          /* rectángulo limpio */
}

.img-accordion .swiper-wrapper{
  display:flex;
  gap:0;                     /* SIN huecos */
  height:100%;
}

/* panel base: todos nacen “estrechos” */
.img-accordion .swiper-slide{
  width:auto !important;
  flex: 0 0 var(--w-passive);  /* ancho fijo de los ocultos */
  min-width:0;
  height:100%;
  position:relative;
  overflow:hidden;
  border-radius:0;
  isolation:isolate;
  transition: flex-basis .55s cubic-bezier(.25,.85,.25,1);
  cursor:pointer;
}

/* el activo toma SIEMPRE el ancho grande calculado */
.img-accordion .swiper-slide.ia-slide-active,
.img-accordion .swiper-slide.ia-sticky{
  flex: 0 0 var(--w-active);
}

.img-accordion .swiper-slide img{
  width:100%; height:100%; object-fit:cover;
  transition:
    transform .55s cubic-bezier(.25,.85,.25,1),
    filter .35s ease, opacity .35s ease;
  filter: brightness(.9) blur(calc(var(--dist,0) * 5px));
  opacity: calc(1 - var(--dist,0) * .35);
}
.img-accordion .swiper-slide.ia-slide-active img,
.img-accordion .swiper-slide.ia-sticky img{
  filter: brightness(1) blur(0);
  transform: scale(1.04);
  opacity:1;
}

/* caption */
.img-accordion figcaption{
  position:absolute; inset:auto 0 0 0;
  padding: clamp(14px,1.6vw,20px);
  background: linear-gradient(to top,#00000073,transparent 60%);
  color:#e9f4ff;
  opacity:0; transform:translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.img-accordion .swiper-slide.ia-slide-active figcaption,
.img-accordion .swiper-slide.ia-sticky figcaption{
  opacity:1; transform:translateY(0);
}
.img-accordion figcaption h4{ margin:0 0 .2em 0; font-size:clamp(16px,2vw,22px); line-height:1.25; }
.img-accordion figcaption p{  margin:0; font-size:clamp(12px,1.2vw,15px); line-height:1.45; }

/* botón (opcional) abajo-izquierda del contenedor */
.ia-nav{
  position:absolute; left:16px; bottom:16px; z-index:3;
  border:0; border-radius:8px; padding:.5rem .7rem; cursor:pointer;
  background:#0f1419cc; color:#e9f4ff; font-size:18px;
  transition:background .25s ease;
}
.ia-nav:hover{ background:#0f1419; }
.ia-prev{ display:none; } /* dejamos solo “siguiente” */

/* — Responsive: móvil -> carrusel full ancho (sin acordeón) — */
@media (max-width: 900px){
  .img-accordion{
    --w-passive: 0px;
    --w-active: 100%;
    --h: clamp(260px, 56vw, 420px);
  }
  .img-accordion .swiper-slide{ flex:0 0 100%; }
}