/* ============================================================
   Casa Badé — Lugares
   Se carga DESPUÉS de styles.css y hereda tokens, header, logo,
   nav, botones y footer. Todo lo propio va bajo .sala-verde /
   .antesala / .plano / .sala / .cartela / .riel / .pieza para no
   poder pisar la landing ni el blog.

   LA IDEA. El resto del sitio se lee sobre crema; aquí el verde
   profundo pasa a ser el suelo de una sala de exposición. No es
   un cambio de paleta, es el mismo verde de `.process` usado a
   toda página.

   LA FIRMA ES EL RIEL. Cada fila de fotografías cuelga de un
   filete horizontal por un cable vertical de 1px, como el sistema
   de colgado de una sala. Aquí NO hay arcos: el arco es un ALZADO
   y una sala se dibuja en PLANTA. Es la misma regla de escasez que
   gobierna `#para-quién` en la landing — el motivo se reserva para
   donde significa algo, y en esta página ese sitio es el logo.

   LA PÁGINA HABLA BAJO. Sigue siendo solo Poppins, pero aquí el
   peso baja: los titulares van en 300, no en el 700 de la landing,
   y las etiquetas en 500, no en 600. La landing tiene que convencer
   y por eso pesa; una sala solo tiene que rotular. Si un titular de
   esta página vuelve a 700, deja de ser una cartela y se convierte
   en un reclamo. Con 300 el tracking cerrado sobra: los titulares
   van a -0.01em, no al -0.02em de la landing.
   ============================================================ */

:root {
  /* El suelo de la sala y su antesala. Dos verdes, no uno: la
     antesala es más honda para que al entrar en la primera sala
     la vista suba de nivel. */
  --sala: #273323;          /* = --green del dossier */
  --sala-honda: #1b241a;

  /* Terracota aclarada SOLO para fondo oscuro. El --orange del
     dossier (#d05532) sobre este verde da 3,1:1 de contraste y no
     llega al mínimo de 4,5:1 en texto pequeño; este tono da 4,6:1.
     Úsalo para versalitas y microtexto, no repintes la marca. */
  --sala-acento: #e07a52;

  --sala-crema: #fff0d9;    /* = --beige */
  --sala-linea: rgba(255, 240, 217, 0.22);   /* el riel y los muros */
  --sala-tenue: rgba(255, 240, 217, 0.62);   /* texto secundario */
}

.sala-verde {
  background: var(--sala-honda);
  color: var(--sala-crema);
}

/* ---------- Antesala: el plano de la sala ----------
   Aquí no se explica nada. Un rótulo de sala y el directorio de lo
   que hay dentro: el barrio de cada entrada da todo el contexto que
   hace falta y las fotos hacen el resto. Si vuelve a aparecer un
   párrafo de introducción en esta sección, sobra.                */

.antesala {
  padding: 104px 0 96px;
  border-bottom: 1px solid var(--sala-linea);
}

/* Una sola palabra, en light y grande: el rótulo pintado sobre la
   pared de la entrada, no un titular que vende algo. */
.antesala__titulo {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.04;
}

.plano {
  list-style: none;
  margin: 54px 0 0;
  padding: 0;
}

.plano__fila { position: relative; }

/* El filete de cada fila se dibuja de izquierda a derecha al
   cargar: un muro que se levanta, no una lista que aparece. */
.plano__fila::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--sala-linea);
  transform: scaleX(0);
  transform-origin: left center;
  animation: muroDibuja 0.85s var(--ease) forwards;
}

.plano__fila:nth-child(1)::after { animation-delay: 0.30s; }
.plano__fila:nth-child(2)::after { animation-delay: 0.40s; }
.plano__fila:nth-child(3)::after { animation-delay: 0.50s; }
.plano__fila:nth-child(4)::after { animation-delay: 0.60s; }
.plano__fila:nth-child(5)::after { animation-delay: 0.70s; }
.plano__fila:nth-child(6)::after { animation-delay: 0.80s; }

@keyframes muroDibuja {
  to { transform: scaleX(1); }
}

.plano__link {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 28px;
  align-items: baseline;
  padding: 22px 0;
}

/* El relleno de terracota al posarse es el mismo gesto que
   `.list--survey` en la landing: la marca es la propia línea. */
.plano__link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--sala-acento);
  transition: width 0.45s var(--ease);
}

.plano__link:hover::before,
.plano__link:focus-visible::before { width: 100%; }

.plano__barrio {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sala-acento);
}

.plano__titulo {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  transition: transform 0.4s var(--ease);
}

.plano__link:hover .plano__titulo,
.plano__link:focus-visible .plano__titulo { transform: translateX(8px); }

.plano__cuenta {
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--sala-tenue);
}

/* ---------- La sala ---------- */

.sala {
  padding: 92px 0;
  background: var(--sala);
  border-bottom: 1px solid rgba(255, 240, 217, 0.1);
}

.sala:nth-of-type(even) { background: var(--sala-honda); }

.sala__inner {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 56px;
}

/* ---------- La cartela ----------
   El texto de pared: se queda quieto mientras pasan las piezas,
   igual que te quedas leyendo la cartela y mueves los ojos por el
   muro. Necesita que la columna estire (por eso el grid NO lleva
   align-items: start) o el sticky no tiene recorrido.            */

.cartela {
  position: sticky;
  top: 108px;
  padding-top: 4px;
}

.cartela__titulo {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cartela__regla {
  width: 46px;
  height: 2px;
  margin: 20px 0;
  background: var(--sala-acento);
}

.cartela__lugar {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--sala-tenue);
}

/* ---------- El riel y las piezas ----------
   Los tres rieles de cada sala llevan 2, 3 y 1 pieza. La última
   cuelga sola y es la vista general del espacio, el plano más
   abierto de la serie. Ese orden es el mismo en las cinco salas a
   propósito — una sala tiene un criterio de colgado, no una
   composición distinta por pared.                                */

.sala__muro { min-width: 0; }

.riel {
  position: relative;
  display: grid;
  gap: 26px;
  padding-top: 40px;
  margin-top: 58px;
}

.riel:first-child { margin-top: 0; }

.riel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sala-linea);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease);
}

.riel--par { grid-template-columns: 1fr 1.34fr; }
.riel--trio { grid-template-columns: repeat(3, 1fr); }
.riel--cierre { justify-items: center; }

/* La pieza de cierre se cuelga sola y centrada. Una apaisada ocupa
   casi todo el muro; una vertical no debe estirarse hasta ahí o
   pierde la escala de un cuadro colgado. */
.riel--cierre .pieza--ancha { width: 84%; }
.riel--cierre .pieza--alta { width: 46%; }

.pieza {
  position: relative;
  margin: 0;
  align-self: start;
}

/* El cable del que cuelga la pieza. */
.pieza::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  width: 1px;
  height: 40px;
  background: var(--sala-linea);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.45s var(--ease) 0.3s;
}

.pieza img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(255, 240, 217, 0.05);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* Los tops de una fila cuadran y los bajos no: es el colgado real
   de una sala, no una retícula de tarjetas. Nada se recorta. */
.riel.is-colgado::before { transform: scaleX(1); }
.riel.is-colgado .pieza::before { transform: scaleY(1); }

.riel.is-colgado .pieza img {
  opacity: 1;
  transform: none;
}

.riel .pieza:nth-child(1) img { transition-delay: 0.34s; }
.riel .pieza:nth-child(2) img { transition-delay: 0.46s; }
.riel .pieza:nth-child(3) img { transition-delay: 0.58s; }

/* ---------- Salida ---------- */

.salida {
  padding: 104px 0 112px;
  text-align: center;
  background: var(--sala-honda);
}

.salida h2 {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.salida p {
  max-width: 46ch;
  margin: 20px auto 32px;
  font-weight: 300;
  color: var(--sala-tenue);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .sala__inner {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  /* Sin columna lateral el sticky no tiene sentido: la cartela
     pasa a ser el encabezado del muro. */
  .cartela {
    position: static;
    padding-bottom: 4px;
  }

  .cartela__regla { margin: 16px 0; }
  .plano__link { grid-template-columns: 150px 1fr auto; gap: 20px; }
}

@media (max-width: 700px) {
  .antesala { padding: 68px 0 76px; }
  .sala { padding: 68px 0; }
  .salida { padding: 76px 0 84px; }

  /* Una columna: en el móvil el muro se recorre de arriba abajo,
     así que cada pieza cuelga de su propio riel. */
  .riel--par,
  .riel--trio { grid-template-columns: 1fr; }

  .riel { gap: 34px; margin-top: 44px; }
  .riel--cierre .pieza--ancha,
  .riel--cierre .pieza--alta { width: 100%; }

  /* Con una sola columna el cable central queda descolgado de la
     rejilla; se ancla al borde izquierdo, que es donde está el
     muro en móvil. */
  .pieza::before { left: 22px; }
  .riel--par .pieza:not(:first-child)::before,
  .riel--trio .pieza:not(:first-child)::before { display: none; }

  .plano__link {
    grid-template-columns: 1fr auto;
    gap: 4px 20px;
    padding: 18px 0;
  }

  .plano__barrio { grid-row: 1; grid-column: 1; }
  .plano__cuenta { grid-row: 1; grid-column: 2; }
  .plano__titulo { grid-row: 2; grid-column: 1 / -1; }
}

/* ---------- Movimiento reducido ----------
   La sala se ve entera y quieta: los rieles y los cables ya están
   dibujados, las piezas ya están colgadas.                       */

@media (prefers-reduced-motion: reduce) {
  .plano__fila::after,
  .riel::before,
  .pieza::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .pieza img,
  .plano__titulo,
  .plano__link::before {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}