/* =====================================================
   DOLLY BEATRIZ | LUXURY REAL ESTATE

   WALDORF ASTORIA — ESTILO CINEMATOGRÁFICO

   Archivo: css/waldorf-cinematico.css
   ===================================================== */

/* =========================================
   01. ESCENARIO AUDIOVISUAL
   ========================================= */

.detalle-waldorf .residencia-media {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #171513;
}

/* =========================================
   02. VIDEOS SUPERPUESTOS
   ========================================= */

.detalle-waldorf .residencia-media video.residencia-slide {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 650ms cubic-bezier(.22, 1, .36, 1),
    visibility 650ms ease;
}

/* =========================================
   03. VIDEO ACTIVO
   ========================================= */

.detalle-waldorf
.residencia-media video.residencia-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* =========================================
   04. TÍTULO DE PRESENTACIÓN
   ========================================= */

.detalle-waldorf .residencia-hero-contenido {
  opacity: 1;
  visibility: visible;

  transition:
    opacity 850ms cubic-bezier(.22, 1, .36, 1),
    visibility 850ms ease;
}

/* =========================================
   05. DESAPARICIÓN DEL TÍTULO
   ========================================= */

.detalle-waldorf
.residencia-hero-contenido.titulo-oculto {
  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}

/* =========================================
   06. INDICADORES DISCRETOS
   ========================================= */

.detalle-waldorf .residencia-indicadores {
  z-index: 5;
}

.detalle-waldorf .residencia-indicador {
  transition:
    opacity 300ms ease,
    background-color 300ms ease;
}

/* =========================================
   07. MÓVIL
   ========================================= */

@media (max-width: 640px) {
  .detalle-waldorf
  .residencia-media video.residencia-slide {
    object-position: center;
  }

  .detalle-waldorf .residencia-hero-contenido {
    max-width: calc(100% - 32px);
  }
}

/* =========================================
   08. MOVIMIENTO REDUCIDO
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .detalle-waldorf .residencia-media video.residencia-slide,
  .detalle-waldorf .residencia-hero-contenido,
  .detalle-waldorf .residencia-indicador {
    transition: none !important;
  }
}

/* =========================================
   WALDORF · REPRODUCCIÓN MÓVIL
   ========================================= */

/* Botón de respaldo para autoplay bloqueado */

.detalle-waldorf .residencia-reproducir {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 20;

  padding: 16px 28px;

  border: 1px solid rgba(215, 194, 161, 0.65);
  border-radius: 2px;

  background: rgba(36, 33, 31, 0.85);

  color: #f7f4ee;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;

  letter-spacing: 0.12em;
  text-transform: uppercase;

  cursor: pointer;

  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);

  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    opacity 300ms ease;
}

/* Respetar el atributo hidden */

.detalle-waldorf .residencia-reproducir[hidden] {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {

  .detalle-waldorf .residencia-reproducir:hover {
    background: rgba(51, 37, 31, 0.97);
    border-color: #d7c2a1;
  }

}

/* Presentación adaptada a móviles */

@media (max-width: 640px) {

  .detalle-waldorf .residencia-reproducir {
    width: max-content;
    max-width: calc(100% - 48px);

    padding: 15px 20px;
    font-size: 10px;

    text-align: center;
  }

}