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

   PROYECTOS — ENCUADRE INMERSIVO OPTIMIZADO

   Archivo: css/proyectos-encuadre.css

   Objetivos:
   - Mayor fluidez al cambiar de proyecto
   - Mantener composición cinematográfica
   - Mantener fotografías principales y collage
   - Evitar animaciones costosas del ancho
   - Mejor rendimiento en móvil
   ===================================================== */

/* =========================================
   01. SECCIÓN PRINCIPAL
   ========================================= */

.inmersive-projects {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: stretch;

  width: 100%;
  min-height: 100svh;

  padding: 0 !important;
  overflow: hidden;

  background: var(--perla, #e8e9e5);
  color: var(--cafe, #33251f);
}

/* Mantener el diseño sin encabezado superior */

.inmersive-projects .projects-header {
  display: none !important;
}

/* =========================================
   02. AMBIENTACIÓN
   ========================================= */

.inmersive-projects .projects-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;

  pointer-events: none;
  overflow: hidden;
}

/* Reducimos el desenfoque costoso */

.inmersive-projects .projects-ambient-media {
  opacity: 0.055;
  filter: blur(22px) saturate(0.7);
}

/* Fondo perla */

.inmersive-projects .projects-ambient-overlay {
  background: linear-gradient(
    180deg,
    rgba(232, 233, 229, 0.92) 0%,
    rgba(232, 233, 229, 0.82) 50%,
    rgba(232, 233, 229, 0.92) 100%
  );
}

/* =========================================
   03. ESCENARIO CINEMATOGRÁFICO
   ========================================= */

.inmersive-projects .projects-experience {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(0, 1.75fr)
    minmax(300px, 0.9fr);

  align-items: center;

  gap: clamp(26px, 3vw, 52px);

  width: min(100%, 1500px);
  min-height: 100svh;

  margin: 0 auto;
  padding: clamp(24px, 3vw, 44px);

  background: transparent;
  border: none;
}

/* Sin decoraciones duplicadas */

.inmersive-projects .projects-experience::before,
.inmersive-projects .projects-experience::after {
  display: none !important;
}

/* =========================================
   04. ÁREA DESLIZABLE
   ========================================= */

.inmersive-projects .projects-viewport {
  display: flex;
  align-items: center;

  width: 100%;
  min-width: 0;

  height: 100%;
  min-height: 100svh;

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}

.inmersive-projects .projects-viewport::-webkit-scrollbar {
  display: none;
}

/* Contenedor horizontal */

.inmersive-projects .projects-track {
  display: flex;
  align-items: center;

  gap: clamp(16px, 2vw, 28px);

  width: max-content;
  min-width: 100%;
  height: 100%;

  padding: 0;
}

/* Espacio editorial en los extremos */

.inmersive-projects .projects-track::before,
.inmersive-projects .projects-track::after {
  content: "";
  flex: 0 0 clamp(12px, 3vw, 48px);
}

/* =========================================
   05. TARJETAS DE PROYECTOS
   ========================================= */

.inmersive-projects .project-card {
  position: relative;

  flex: 0 0 clamp(150px, 14vw, 220px);

  height: clamp(380px, 72vh, 700px);
  max-height: 72vh;

  aspect-ratio: auto;
  overflow: hidden;

  opacity: 0.38;
  transform: scale(0.92);

  /*
    No animamos flex-basis ni height.
    Evitamos recalcular continuamente
    el diseño del carrusel.
  */

  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 420ms ease;
}

/* Proyecto seleccionado */

.inmersive-projects .project-card.is-active {
  flex: 0 0 clamp(460px, 42vw, 720px);

  height: clamp(420px, 76vh, 760px);
  max-height: 76vh;

  opacity: 1;
  transform: scale(1);

  box-shadow:
    0 20px 48px rgba(51, 37, 31, 0.09);
}

/* Proyectos vecinos */

.inmersive-projects .project-card:not(.is-active) {
  opacity: 0.42;
  transform: scale(0.92);
}

/* =========================================
   06. FOTOGRAFÍAS PRINCIPALES
   ========================================= */

.inmersive-projects .project-card .project-media {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

/* Mantener fotografías encuadradas */

.inmersive-projects .project-card .project-image {
  height: 100%;
  object-fit: cover;

  backface-visibility: hidden;
}

/* Zoom ligero del proyecto activo */

.inmersive-projects
.project-card.is-active
.project-image.is-visible {
  transform: scale(1.025);
}

/* Sombra ligera */

.inmersive-projects .project-media::after {
  background: linear-gradient(
    to top,
    rgba(51, 37, 31, 0.16) 0%,
    rgba(51, 37, 31, 0.035) 36%,
    transparent 62%
  );
}

/* =========================================
   07. COLLAGE ARQUITECTÓNICO
   ========================================= */

.inmersive-projects .project-collage {
  z-index: 2;
}

/* Reservar espacio para las accesorias */

.inmersive-projects
.project-card.is-active
.project-image {
  width: calc(
    100% - var(--collage-width, 35%)
  );
}

.inmersive-projects .project-collage-photo {
  background: var(--crema, #eee9df);
}

.inmersive-projects .project-collage-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================================
   08. INFORMACIÓN INTERNA DE TARJETAS
   ========================================= */

.inmersive-projects .project-meta {
  display: none !important;
}

/* =========================================
   09. PANEL INFORMATIVO
   ========================================= */

.inmersive-projects .project-panel {
  align-self: center;
  justify-self: stretch;

  width: 100%;
  max-width: 430px;
  min-width: 0;

  min-height: auto;

  margin: 0;

  padding: clamp(20px, 2.3vw, 36px);

  border: 1px solid rgba(51, 37, 31, 0.08);

  background: linear-gradient(
    180deg,
    rgba(247, 244, 238, 0.65) 0%,
    rgba(247, 244, 238, 0.42) 100%
  );

  /*
    Eliminamos backdrop-filter.
    Su desenfoque se recalcula cuando
    cambia el fondo de la galería.
  */

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  box-shadow:
    0 15px 32px rgba(51, 37, 31, 0.06);
}

/* Contador */

.inmersive-projects .project-panel-count {
  margin-bottom: 22px;

  color: var(--marron, #665443);

  font-size: 11px;
  letter-spacing: 0.22em;
}

/* Nombre del proyecto */

.inmersive-projects .project-panel-title {
  margin-bottom: 16px;

  color: var(--cafe, #33251f);

  font-size: clamp(38px, 3.4vw, 64px);
  line-height: 1.06;

  letter-spacing: -0.04em;
}

/* Ubicación */

.inmersive-projects .project-panel-location {
  margin-bottom: 18px;

  color: var(--marron, #665443);

  font-size: 11px;
  letter-spacing: 0.18em;

  text-transform: uppercase;
}

/* Descripción */

.inmersive-projects .project-panel-summary {
  max-width: 360px;

  color: var(--marron, #665443);

  font-size: 15px;
  line-height: 1.8;
}


/* =========================================
   ACCESO A LAS PÁGINAS INDIVIDUALES
   ========================================= */

.inmersive-projects .project-panel-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
  width: fit-content;
  min-height: 44px;

  margin-top: 24px;
  padding: 8px 0 12px;

  color: var(--cafe, #33251f);
  border-bottom: none;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;

  opacity: 1;
  visibility: visible;

  transition: color 250ms ease;
}

.inmersive-projects .project-panel-link:visited {
  color: var(--cafe, #33251f);
}

.inmersive-projects .project-panel-link:hover {
  color: var(--marron, #665443);
}

.inmersive-projects .project-panel-link:focus-visible {
  outline: 2px solid var(--cafe, #33251f);
  outline-offset: 4px;
}

/* =========================================
   10. TABLET
   ========================================= */

@media (max-width: 1024px) {

  .inmersive-projects {
    min-height: auto;
  }

  .inmersive-projects .projects-experience {
    grid-template-columns: 1fr;

    min-height: auto;

    gap: 22px;
    padding: 22px;
  }

  .inmersive-projects .projects-viewport {
    min-height: auto;
    height: auto;
  }

  .inmersive-projects .projects-track {
    height: auto;
  }

  .inmersive-projects .project-card {
    flex: 0 0 min(64vw, 280px);

    height: clamp(320px, 58vw, 470px);
    max-height: none;

    opacity: 0.52;
    transform: scale(0.95);
  }

  .inmersive-projects .project-card.is-active {
    flex: 0 0 min(82vw, 420px);

    height: clamp(340px, 66vw, 520px);
    max-height: none;

    opacity: 1;
    transform: scale(1);
  }

  /* Panel simplificado en dispositivos táctiles */

  .inmersive-projects .project-panel {
    max-width: none;

    padding: 18px 0 0;

    border: none;
    background: transparent;

    box-shadow: none;
  }

  .inmersive-projects .project-panel-title {
    font-size: clamp(34px, 6vw, 52px);
  }

  .inmersive-projects .project-panel-summary {
    max-width: none;
  }

}

/* =========================================
   11. CELULAR
   ========================================= */

@media (max-width: 600px) {

  .inmersive-projects .projects-experience {
    padding: 16px;
    gap: 16px;
  }

  .inmersive-projects .project-card {
    flex: 0 0 68vw;

    height: min(110vw, 430px);
  }

  .inmersive-projects .project-card.is-active {
    flex: 0 0 84vw;

    height: min(118vw, 500px);
  }

  .inmersive-projects .project-panel-title {
    font-size: clamp(30px, 8vw, 42px);
  }

  .inmersive-projects .project-panel-summary {
    font-size: 14px;
    line-height: 1.7;
  }

}

/* =========================================
   12. MOVIMIENTO REDUCIDO
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .inmersive-projects .project-card,
  .inmersive-projects .project-image {
    transition: none !important;
    transform: none !important;
  }

}