/* ==========================================================================
   REFINED LIQUID GLASS CINEMATIC CAROUSEL
   - Formato más estrecho y estilizado (205px x 138px)
   - Biseles de cristal pulido con micro-reflexión especular superior
   - Sombra profunda tridimensional multicapa detrás de cada tarjeta
   - Fotos laterales visiblemente más pequeñas (escala 0.68x con suave desenfoque DOF)
   - Magnificación central cinematográfica progresiva (escala 1.12x con nitidez pura)
   - Desvanecimiento elegante en los extremos laterales
   ========================================================================== */

.hero-carousel-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  position: relative;
  z-index: 10;
  margin-top: 26px;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 12px 0 20px;
  /* Desvanecimiento progresivo y suave en los laterales */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  user-select: none;
  -webkit-user-select: none;
}

/* Viewport del carrusel */
.carousel-glass-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  cursor: grab;
  padding: 20px 0 24px;
  touch-action: pan-y;
}

.carousel-glass-viewport:active,
.carousel-glass-viewport.is-dragging {
  cursor: grabbing;
}

/* Pista de tarjetas en flex continuo */
.carousel-glass-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;
  will-change: transform;
  gap: 20px;
  padding: 0 32px;
  transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   TARJETA INDEPENDIENTE LIQUID GLASS (MÁS ESTRECHA Y REFINADA)
   ========================================================================== */
.liquid-glass-card {
  position: relative;
  flex-shrink: 0;
  width: 205px;
  height: 138px;
  border-radius: 17px;
  padding: 6px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.025) 60%,
    rgba(255, 255, 255, 0.01) 100%
  );
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* Sombra ambiental suave y orgánica (sin artefactos rectangulares) */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38),
              0 1px 4px rgba(0, 0, 0, 0.25),
              inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.40),
              inset 0 -1px 1px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  transform: translate3d(0, 0, 0) scale(0.68);
  opacity: 0.45;
}

/* Reflejo especular diagonal sobre el bisel de cristal */
.liquid-glass-card .glass-sheen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 17px;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0.03) 100%
  );
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Marco interior donde reside la fotografía */
.liquid-glass-card .glass-photo-frame {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #06060a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
              inset 0 2px 8px rgba(0, 0, 0, 0.75);
}

.liquid-glass-card .glass-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  filter: contrast(1.03) saturate(1.04);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s ease;
}

/* ==========================================================================
   REENCUADRE FOTOGRÁFICO DE ROSTROS Y COMPOSICIÓN CINEMATOGRÁFICA (01 - 16)
   Puntos focales calibrados individualmente para cada foto del carrusel,
   asegurando que los rostros, miradas, sonrisas y tiaras queden perfectamente
   encuadrados y nunca recortados por el aspecto panorámico de la tarjeta.
   ========================================================================== */
.liquid-glass-card img[src*="real-01"] { object-position: center 15%; }
.liquid-glass-card img[src*="real-02"] { object-position: center 30%; }
.liquid-glass-card img[src*="real-03"] { object-position: center 22%; }
.liquid-glass-card img[src*="real-04"] { object-position: 55% 35%; }
.liquid-glass-card img[src*="real-05"] { object-position: center 18%; }
.liquid-glass-card img[src*="real-06"] { object-position: 45% 14%; }
.liquid-glass-card img[src*="real-07"] { object-position: center 48%; }
.liquid-glass-card img[src*="real-08"] { object-position: 51% 25%; }
.liquid-glass-card img[src*="real-09"] { object-position: center 35%; }
.liquid-glass-card img[src*="real-10"] { object-position: center 18%; }
.liquid-glass-card img[src*="real-11"] { object-position: center 28%; }
.liquid-glass-card img[src*="real-12"] { object-position: center 50%; }
.liquid-glass-card img[src*="real-13"] { object-position: center 22%; }
.liquid-glass-card img[src*="real-14"] { object-position: center 38%; }
.liquid-glass-card img[src*="real-15"] { object-position: center 20%; }
.liquid-glass-card img[src*="real-16"] { object-position: center 10%; }

/* Estado activo central: máxima nitidez, iluminación especular y suave halo ámbar */
.liquid-glass-card.is-center-active {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48),
              0 0 22px rgba(255, 140, 30, 0.20),
              inset 0 1.2px 2px 0 rgba(255, 255, 255, 0.60),
              inset 0 -1px 1.5px 0 rgba(0, 0, 0, 0.30);
}

/* Hover sobre cualquier tarjeta en escritorio (dispositivos con cursor fino) */
@media (hover: hover) and (pointer: fine) {
  .liquid-glass-card:hover,
  .liquid-glass-card:focus-visible {
    border-color: rgba(255, 175, 75, 0.75);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.52),
                0 0 28px rgba(255, 140, 30, 0.30),
                inset 0 1.2px 2px 0 rgba(255, 255, 255, 0.70);
    outline: none;
    opacity: 1 !important;
  }

  .liquid-glass-card:hover .glass-photo-frame img {
    transform: scale(1.06);
    filter: contrast(1.05) saturate(1.06);
  }
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS (SMARTPHONES & TABLETS - MÍNIMO CONSUMO DE RECURSOS)
   ========================================================================== */
@media (max-width: 900px) {
  .hero-carousel-section {
    margin-top: 20px;
    margin-bottom: 16px;
    padding: 10px 0 16px;
  }

  .carousel-glass-viewport {
    padding: 16px 0 20px;
  }

  .liquid-glass-card {
    width: 172px;
    height: 116px;
    border-radius: 15px;
    padding: 5px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.38);
  }

  .carousel-glass-track {
    gap: 15px;
    padding: 0 18px;
  }
}

@media (max-width: 600px) {
  .hero-carousel-section {
    margin-top: 16px;
    margin-bottom: 12px;
    padding: 6px 0 12px;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 10%,
      black 90%,
      transparent 100%
    );
  }

  .carousel-glass-viewport {
    padding: 12px 0 16px;
  }

  .liquid-glass-card {
    width: 152px;
    height: 104px;
    border-radius: 13px;
    padding: 4px;
    /* Vidrio ultra-ligero para máxima fluidez en GPU de smartphone */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
  }

  .carousel-glass-track {
    gap: 11px;
    padding: 0 12px;
  }
}