/* Módulo «rooms»: tres paneles de foto altos (Doble, Doble pequeña, Estudio).
   Escritorio: en fila; el panel bajo el ratón o con foco de teclado crece y su velo se aclara (solo CSS).
   Móvil y tableta: apilados a todo el ancho; el velo se aclara en el panel centrado (.is-lit, rooms.js).
   index.html enlaza esta hoja dentro del propio bloque: sin JS se ve igual. Colores y tipo de tokens.css
   (con valor de reserva por si un token aún no está). */

#habitaciones { background: var(--negro, #000); color: var(--blanco, #fff); }

.mod--rooms {
  --rp-negro: var(--negro, #000);
  --rp-blanco: var(--blanco, #fff);
  --rp-sobre: rgba(255, 255, 255, 0.84);      /* texto secundario encima de foto con velo */
  --rp-fd: var(--f-display, 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif);
  --rp-ft: var(--f-text, 'Satoshi', 'Helvetica Neue', Arial, sans-serif);
  --rp-filtro: var(--foto-filtro, brightness(0.78) saturate(0.7));
  --rp-filtro-a: var(--foto-filtro-activa, brightness(0.95) saturate(0.95));
  --rp-velo: var(--velo, rgba(0, 0, 0, 0.4));   /* negro translúcido del filtro (tokens) */
  --rp-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --rp-d: 600ms;
  --rp-grow: 1.85;                             /* cuánto crece el panel activo frente a los otros */
  --rp-pad: clamp(20px, 2.1vw, 34px);
}

/* ---------- Fila (escritorio) ---------- */
.rp {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(8px, 0.9vw, 12px);
  height: clamp(500px, 70vh, 800px);
  container-type: inline-size;
}
.rp__panel {
  position: relative; flex: 1 1 0; min-width: 0;
  overflow: hidden; isolation: isolate;
  border-radius: var(--r-card, 24px);
  background: #0d0d0d;
  transition: flex-grow var(--rp-d) var(--rp-ease);
}

.rp__media { position: absolute; inset: 0; z-index: 0; display: block; cursor: pointer; }
.rp__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--rp-focus, 50% 50%);
  filter: var(--rp-filtro);
  transition: filter var(--rp-d) var(--rp-ease), transform 1.2s var(--rp-ease);
}
/* Velo plano (se aclara al activarse) y degradado fijo abajo para la letra. */
.rp__panel::before, .rp__panel::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.rp__panel::before { inset: 0; background: var(--rp-velo); opacity: 1; transition: opacity var(--rp-d) var(--rp-ease); }
.rp__panel::after {
  left: 0; right: 0; bottom: 0; height: 70%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.6) 34%, rgba(0, 0, 0, 0) 100%);
}

.rp__body {
  position: absolute; z-index: 2; left: 0; bottom: 0;
  /* Ancho fijo = el del panel estrecho: el texto no se recoloca mientras el panel crece o encoge. */
  width: 100%; width: calc(100cqw / (2 + var(--rp-grow)));
  box-sizing: border-box; padding: var(--rp-pad);
  display: grid; justify-items: start; gap: 14px;
  color: var(--rp-blanco);
  pointer-events: none;   /* el clic en la foto llega al enlace de debajo */
}
.rp__body a, .rp__body button { pointer-events: auto; }
.rp__name {
  margin: 0;
  font-family: var(--rp-fd); font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.75rem); line-height: 1; letter-spacing: -0.03em;
  text-wrap: balance;
}
.rp__specs {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
  font-family: var(--rp-ft); font-size: var(--t-sm, 0.9375rem); font-weight: 500; line-height: 1.4;
  color: var(--rp-sobre);
}
.rp__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.rp__actions .btn { padding-inline: 1.1rem; }

/* ---------- Estado activo ---------- */
.rp__panel:hover::before, .rp__panel:has(:focus-visible)::before, .rp__panel.is-lit::before { opacity: 0.2; }
.rp__panel:hover .rp__media img, .rp__panel:has(:focus-visible) .rp__media img, .rp__panel.is-lit .rp__media img {
  filter: var(--rp-filtro-a); transform: scale(1.03);
}
@media (min-width: 1000px) and (hover: hover) {
  .rp__panel:hover, .rp__panel:has(:focus-visible) { flex-grow: var(--rp-grow); }
}
/* Portátil pequeño: el activo crece menos, así los estrechos aún caben los dos botones en una línea. */
@media (min-width: 1000px) and (max-width: 1279.98px) {
  .mod--rooms { --rp-grow: 1.5; --rp-pad: 20px; }
  .rp__actions .btn { padding-inline: 0.9rem; }
}
/* Fila en pantalla táctil grande: sin ratón no hay panel activo (los tres iguales); velo algo más claro. */
@media (min-width: 1000px) and (hover: none) {
  .mod--rooms { --rp-grow: 1; }
  .rp__panel::before { opacity: 0.6; }
}

/* ---------- Apilados (tableta, móvil y móvil en horizontal) ---------- */
@media (max-width: 999.98px), (max-height: 500px) and (pointer: coarse) {
  .rp { flex-direction: column; height: auto; gap: 10px; container-type: normal; }
  .rp__panel { flex: none; aspect-ratio: 3 / 2; }
  .rp__body { width: 100%; }
}
@media (max-width: 760px) {
  /* Casi a sangre: 8 px de margen y radio, como el resto de tarjetas. */
  .rp { margin-inline: calc(8px - var(--gutter, 16px)); }
  .rp__panel { aspect-ratio: 4 / 5; border-radius: 22px; }
  .rp__body { padding: 22px 20px 26px; gap: 12px; }
  .rp__name { font-size: clamp(2rem, 9vw, 2.5rem); }
  .rp__specs { font-size: var(--t-md, 1rem); }
}
@media (max-height: 500px) and (pointer: coarse) {
  .rp__panel { aspect-ratio: 16 / 7; }
  .rp__body { padding-left: max(var(--rp-pad), env(safe-area-inset-left, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .rp__panel, .rp__panel::before, .rp__media img { transition: none; }
  .rp__panel:hover .rp__media img, .rp__panel:has(:focus-visible) .rp__media img, .rp__panel.is-lit .rp__media img { transform: none; }
}