/* Eleonora Morales — sistema de carruseles/galerías reutilizable
   Prefijo em- para no colisionar con estilos inline de cada página. */

/* ---------- HERO CAROUSEL (fade automático, foto completa + blur backdrop) ---------- */
.em-hero-carousel { position:absolute; inset:0; overflow:hidden; background:#0a0a0a; }
.em-hero-carousel__slide {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity 1.4s ease-in-out;
  will-change:opacity;
}
.em-hero-carousel__slide.is-active { opacity:1; }
/* backdrop: misma foto en blur llenando todo el frame */
.em-hero-carousel__slide::before {
  content:"";
  position:absolute; inset:-4%;
  background-image: var(--em-bg, none);
  background-size:cover;
  background-position:center;
  filter: blur(38px) brightness(.55) saturate(1.1);
  transform: scale(1.08);
  z-index:0;
}
/* foto principal: COMPLETA, nunca se corta la cara */
.em-hero-carousel__slide img {
  position:relative;
  z-index:1;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:100%;
  object-fit:contain;
  display:block;
}
.em-hero-carousel__dots {
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.5rem; z-index:5;
}
.em-hero-carousel__dot {
  width:7px; height:7px; border-radius:50%;
  border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.35); transition:background .3s, transform .3s;
}
.em-hero-carousel__dot.is-active { background:#fff; transform:scale(1.35); }

/* ---------- GALERÍA HORIZONTAL (scroll-snap + drag) ---------- */
.em-gallery { position:relative; }
.em-gallery__track {
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:2px 0 1.25rem;
  scrollbar-width:none;
  cursor:grab;
}
.em-gallery__track::-webkit-scrollbar { display:none; }
.em-gallery__track.is-dragging { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.em-gallery__item {
  flex:0 0 auto;
  width:clamp(220px, 24vw, 320px);
  aspect-ratio:3/4;
  scroll-snap-align:start;
  overflow:hidden;
  background:rgba(0,0,0,.04);
  border-radius:2px;
}
.em-gallery__item img {
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
  user-select:none; -webkit-user-drag:none;
}
.em-gallery__item:hover img { transform:scale(1.04); }
.em-gallery__arrows { display:flex; gap:.6rem; justify-content:flex-end; margin-top:.25rem; }
.em-gallery__arrow {
  width:42px; height:42px; border-radius:50%;
  border:1px solid currentColor; background:transparent; color:inherit;
  cursor:pointer; opacity:.55; transition:opacity .3s, background .3s, color .3s;
  display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
}
.em-gallery__arrow:hover { opacity:1; }

@media (max-width:640px) {
  .em-gallery__item { width:72vw; }
  .em-gallery__arrows { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .em-hero-carousel__slide { transition:none; }
  .em-gallery__track { scroll-behavior:auto; }
}