/* =========================================

   DOLLY BEATRIZ | LUXURY REAL ESTATE

   SECCIÓN: IMMERSIVE PROJECT COLLECTION

   Archivo: css/proyectos.css

   Este archivo controla exclusivamente:

   - Fondo inmersivo

   - Galería horizontal

   - Fotografías de proyectos

   - Proyecto seleccionado

   - Información editorial

   - Adaptación responsive

   ========================================= */

/* =========================================

   01. IDENTIDAD VISUAL DE PROYECTOS

   ========================================= */

.inmersive-projects {

  --projects-bg: var(--perla, #e8e9e5);

  --projects-text: var(--cafe, #33251f);

  --projects-secondary: var(--marron, #665443);

  --projects-accent: var(--arena, #d7c2a1);

  --projects-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  isolation: isolate;

  overflow: hidden;

  background: var(--projects-bg);

  color: var(--projects-text);

}

/* =========================================

   02. FONDO AMBIENTAL

   ========================================= */

.projects-ambient {

  position: absolute;

  inset: 0;

  z-index: -1;

  overflow: hidden;

  pointer-events: none;

}

.projects-ambient-media {

  position: absolute;

  inset: -8%;

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

  opacity: 0.12;

  filter: blur(45px) saturate(0.75);

  transform: scale(1.08);

  transition:

    opacity 900ms ease,

    transform 1600ms var(--projects-ease);

}


.projects-ambient-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(232, 233, 229, 0.55) 0%,
    rgba(232, 233, 229, 0.80) 45%,
    var(--projects-bg, #e8e9e5) 100%
  );
}


/* Se activa al cambiar de proyecto desde JS */

.projects-ambient.is-changing

.projects-ambient-media {

  opacity: 0;

  transform: scale(1.14);

}

/* =========================================

   03. ENCABEZADO EDITORIAL

   ========================================= */

.projects-header {

  position: relative;

  z-index: 1;

  max-width: 900px;

  margin-bottom: clamp(36px, 5vw, 72px);

}

.projects-header .etiqueta {

  color: var(--projects-secondary);

}

.projects-header h2 {

  max-width: 850px;

  font-size: clamp(40px, 5.5vw, 82px);

  line-height: 1.08;

  letter-spacing: -0.045em;

  color: var(--projects-text);

}

.projects-intro {

  max-width: 560px;

  margin-top: 24px;

  font-size: clamp(15px, 1.4vw, 18px);

  line-height: 1.85;

  color: var(--projects-secondary);

}

/* =========================================

   04. CONTENEDOR DE LA EXPERIENCIA

   ========================================= */

.projects-experience {

  position: relative;

  z-index: 1;

  width: 100%;

  min-width: 0;

}

/* =========================================

   05. GALERÍA HORIZONTAL

   ========================================= */

.projects-viewport {

  width: 100%;

  min-width: 0;

  overflow-x: auto;

  overflow-y: hidden;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  overscroll-behavior-x: contain;

  scrollbar-width: none;

  -ms-overflow-style: none;

  cursor: grab;

  touch-action: pan-x pan-y;

}

.projects-viewport::-webkit-scrollbar {

  display: none;

}

.projects-viewport.is-dragging {

  cursor: grabbing;

  scroll-snap-type: none;

  scroll-behavior: auto;

  user-select: none;

}

.projects-viewport:focus-visible {

  outline: 2px solid var(--projects-secondary);

  outline-offset: 4px;

}

.projects-track {

  display: flex;

  align-items: stretch;

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

  width: max-content;

  min-width: 100%;

  padding: 26px 0 32px;

}

/* =========================================

   06. TARJETAS ARQUITECTÓNICAS

   ========================================= */

.project-card {

  position: relative;

  flex: 0 0 clamp(230px, 30vw, 440px);

  min-width: 0;

  overflow: hidden;

  aspect-ratio: 4 / 5;

  background: var(--crema);

  scroll-snap-align: center;

  opacity: 0.68;

  transform: scale(0.95);

  transition:

    opacity 850ms var(--projects-ease),

    transform 850ms var(--projects-ease),

    box-shadow 850ms var(--projects-ease);

  cursor: pointer;

}

/* Proyecto seleccionado */

.project-card.is-active {

  opacity: 1;

  transform: scale(1);

  box-shadow:

    0 22px 55px rgb(51 37 31 / 14%);

}

/* Decoración discreta */

.project-card::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  border: 1px solid transparent;

  pointer-events: none;

  transition: border-color 600ms ease;

}

.project-card.is-active::after {

  border-color: rgb(215 194 161 / 65%);

}

/* =========================================

   07. IMÁGENES Y ROTACIÓN VISUAL

   ========================================= */

.project-media {

  position: absolute;

  inset: 0;

  overflow: hidden;

  background: var(--crema);

}

.project-image {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  transform: scale(1.06);

  transition:

    opacity 750ms ease,

    transform 3500ms linear;

  pointer-events: none;

  user-select: none;

}

.project-image.is-visible {

  opacity: 1;

}

/* Profundidad sutil solamente en el proyecto activo */

.project-card.is-active

.project-image.is-visible {

  transform: scale(1.12);

}

/* Capa para mejorar la lectura */

.project-media::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(

    to top,

    rgb(15 17 16 / 70%) 0%,

    rgb(15 17 16 / 15%) 35%,

    transparent 68%

  );

}

/* =========================================

   08. INFORMACIÓN EN LAS FOTOGRAFÍAS

   ========================================= */

.project-meta {

  position: absolute;

  inset: auto 0 0;

  z-index: 3;

  padding: clamp(20px, 3vw, 34px);

  color: var(--marfil);

}

.project-order {

  display: block;

  margin-bottom: 12px;

  font-size: 11px;

  letter-spacing: 0.18em;

  color: var(--arena);

}

.project-meta h3 {

  margin-bottom: 8px;

  font-size: clamp(25px, 2.5vw, 38px);

  line-height: 1.15;

  color: var(--marfil);

}

.project-meta p {

  font-size: 12px;

  letter-spacing: 0.04em;

  color: rgb(247 244 238 / 85%);

}

/* =========================================

   09. PANEL DE INFORMACIÓN ACTIVA

   ========================================= */

.project-panel {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  max-width: 800px;

  min-height: 235px;

  padding-top: 26px;

  border-top: 1px solid

    rgb(51 37 31 / 20%);

}

.project-panel-count {

  margin-bottom: 18px;

  font-size: 11px;

  letter-spacing: 0.2em;

  color: var(--projects-secondary);

}

.project-panel-title {

  margin-bottom: 14px;

  font-size: clamp(36px, 4vw, 64px);

  line-height: 1.1;

  color: var(--projects-text);

}

.project-panel-location {

  margin-bottom: 16px;

  font-size: 11px;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--projects-secondary);

}

.project-panel-summary {

  max-width: 550px;

  font-size: 15px;

  line-height: 1.85;

  color: var(--projects-secondary);

}

.project-panel-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 24px;
  padding-bottom: 8px;
  border-bottom: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--projects-text);
  text-decoration: none;
  transition: color 300ms ease;
}

.project-panel-link::after {
  content: "↗";
  margin-left: 28px;
  font-size: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .project-panel-link:hover {
    color: var(--projects-secondary);
  }
}


.project-panel-link::after {
  content: none;
  display: none;
}
@media (hover: hover) and (pointer: fine) {

  .project-panel-link:hover {

    color: var(--projects-secondary);

    border-color: var(--projects-text);

  }

}

/* =========================================

   10. ADAPTACIÓN PARA TABLETS

   ========================================= */

@media (max-width: 1024px) {

  .project-card {

    flex-basis: clamp(240px, 44vw, 390px);

  }

  .projects-header h2 {

    font-size: clamp(40px, 6vw, 65px);

  }

}

/* =========================================

   11. ADAPTACIÓN PARA CELULARES

   ========================================= */

@media (max-width: 760px) {

  .inmersive-projects {

    padding-inline: 22px;

  }

  .projects-header {

    margin-bottom: 28px;

  }

  .projects-header h2 {

    font-size: clamp(36px, 9vw, 50px);

  }

  .projects-intro {

    font-size: 15px;

  }

  .project-card {

    flex-basis: min(78vw, 360px);

    aspect-ratio: 4 / 5;

  }

  .projects-track {

    gap: 14px;

    padding-block: 16px 24px;

  }

  .project-panel {

    min-height: 265px;

    padding-top: 22px;

  }

  .project-panel-title {

    font-size: clamp(32px, 8vw, 46px);

  }

  .project-panel-summary {

    font-size: 14px;

  }

  .projects-ambient-media {

    filter: blur(38px) saturate(0.65);

    opacity: 0.09;

  }

}

/* =========================================

   12. ACCESIBILIDAD

   ========================================= */

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

  .projects-viewport {

    scroll-behavior: auto;

  }

  .project-card,

  .project-image,

  .projects-ambient-media,

  .project-panel-link {

    transition: none !important;

  }

  .project-card,

  .project-card.is-active {

    transform: none;

  }

  .project-image,

  .project-card.is-active

  .project-image.is-visible {

    transform: none;

  }

}

/* =========================================

   AJUSTES DE INTERACCIÓN INMERSIVA

   ========================================= */

/* Permite centrar también el primer y último proyecto */

.projects-track::before,

.projects-track::after {

  content: "";

  flex: 0 0 max(

    12px,

    calc((100vw - min(30vw, 440px)) / 2 - var(--margen))

  );

}

@media (max-width: 1024px) {

  .projects-track::before,

  .projects-track::after {

    flex-basis: 22vw;

  }

}

@media (max-width: 760px) {

  .projects-track::before,

  .projects-track::after {

    flex-basis: 10vw;

  }

}

/* Evita seleccionar texto durante el arrastre */

.projects-viewport.is-dragging,

.projects-viewport.is-dragging * {

  user-select: none;

}

/* Las imágenes no interceptan el mouse */

.project-media,

.project-media img {

  pointer-events: none;

}

/* Oculta el enlace si el proyecto no tiene página */

.project-panel-link[hidden] {

  display: none !important;

}

/* Hace más clara la selección con teclado */

.project-card:focus-visible {

  outline: 2px solid var(--cafe);

  outline-offset: 4px;

}

/* =========================================
   DELANO — TÍTULO CINEMATOGRÁFICO
   ========================================= */

/* Estado inicial */

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

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

/* Desaparecer después de 2 segundos */

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

  pointer-events: none;
}

/* Respetar preferencias de accesibilidad */

@media (prefers-reduced-motion: reduce) {
  .residencia-hero-contenido {
    transition: none !important;
  }
}