/* ==========================================================================
   AREA UNITED · Parte 2 · 4.6 Los espacios
   Mosaico asimétrico (Sala 1 4:5 · Sala 2 3:4 · Exterior 3:4 · Descanso 1:1),
   banda del neón 21:9 y «UNITED» fantasma (único sitio con este recurso).
   ========================================================================== */

.p2-spaces {
  position: relative;
  overflow: hidden;
  padding-bottom: 0 !important;
}
.p2-spaces > .container { position: relative; z-index: 1; }

/* UNITED fantasma detrás del titular: #141414 sobre #0A0A0A, 18 vw */
.p2-spaces-ghost {
  position: absolute;
  left: -1vw;
  top: calc(var(--section-y) - 2vw);
  z-index: 0;
  font-size: clamp(120px, 18vw, 300px);
  line-height: .8;
  color: #141414;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.p2-spaces-head { position: relative; z-index: 1; }

/* --- Mosaico --- */
.p2-spaces-grid {
  display: grid;
  gap: 24px;
}
.p2-space { margin: 0; display: grid; gap: 14px; align-content: start; }
.p2-space-media {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
}
.p2-space--room1 .p2-space-media { aspect-ratio: 4 / 5; }
.p2-space--rest .p2-space-media { aspect-ratio: 1 / 1; }
.p2-space-media img { height: 100%; }
.p2-space-num {
  position: absolute;
  left: 20px; top: 18px;
  z-index: 2;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
}
.p2-space-name {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 2;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: .9;
  color: var(--white);
}
.p2-space-name small { font-size: .55em; color: var(--yellow); letter-spacing: .02em; }
.p2-space-name--sm { font-size: clamp(22px, 3vw, 28px); }
.p2-space-caption { display: grid; gap: 8px; }
.p2-space-caption p { color: var(--gray-text); font-size: 15px; max-width: 40ch; }

/* --- Tablet: dos columnas --- */
@media (min-width: 768px) {
  .p2-spaces-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .p2-space--rest { align-self: end; }
}

/* --- Escritorio: escalera asimétrica 5 / 4 / 3 columnas --- */
@media (min-width: 1024px) {
  .p2-spaces-grid {
    grid-template-columns: 5fr 4fr 3fr;
    grid-template-areas: "room1 room2 outdoor" "room1 room2 rest";
    gap: 32px 24px;
    align-items: start;
  }
  .p2-space--room1 { grid-area: room1; }
  .p2-space--room2 { grid-area: room2; padding-top: 64px; }
  .p2-space--outdoor { grid-area: outdoor; }
  .p2-space--rest { grid-area: rest; align-self: start; }
}