/* =========================================================
   PÁGINA RESIDENCIA (Museo Lázaro Galdiano)
   Cabecera + imagen destacada + cuerpo a dos columnas +
   galería. Maquetada con texto de muestra, lista para
   sustituir por el contenido definitivo.
   ========================================================= */

/* =====================================================
   1) CABECERA
   ===================================================== */
.res-header {
  padding-top: clamp(8rem, 14vw, 13rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
  padding-inline: var(--gutter);
}
.res-header__inner {
  max-width: 1100px;
  margin-inline: auto;
}
.res-header__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-800);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-display);
  margin-top: var(--space-4);
  max-width: 16ch;
}
.res-header__lead {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: rgba(26, 39, 50, 0.85);
  max-width: 44ch;
}

/* =====================================================
   2) IMAGEN DESTACADA — banda full-width
   ===================================================== */
.res-hero-img {
  margin-top: clamp(2rem, 5vw, 4rem);
  width: 100%;
  height: clamp(280px, 48vw, 560px);
  overflow: hidden;
}
.res-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* =====================================================
   3) CUERPO — dos columnas
   ===================================================== */
.res-body {
  padding-block: clamp(4rem, 8vw, 8rem);
}
.res-body__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.res-body__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-600);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-display);
  margin-bottom: var(--space-5);
}
.res-body__col p {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.65;
  color: rgba(26, 39, 50, 0.85);
  max-width: 54ch;
}
.res-body__col p + p { margin-top: var(--space-5); }
.res-body__cta { margin-top: var(--space-6); align-self: flex-start; }

/* ---- Enlaces al museo (tarjetas) ---- */
.res-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.res-link {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-7) var(--space-5) var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.res-link:hover,
.res-link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(208, 80, 88, 0.45);
}
.res-link__label {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-coral-soft);
}
.res-link__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-400);
  line-height: var(--lh-snug);
  color: var(--color-display);
}
.res-link__desc {
  font-family: var(--font-body);
  font-size: var(--fs-200);
  line-height: var(--lh-normal);
  color: var(--color-muted);
}
.res-link__arrow {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: var(--fs-300);
  color: var(--color-coral-soft);
  transition: transform var(--dur-base) var(--ease-out);
}
.res-link:hover .res-link__arrow { transform: translate(2px, -2px); }

/* =====================================================
   4) GALERÍA
   ===================================================== */
.res-gallery {
  padding-block: 0 clamp(5rem, 10vw, 10rem);
}
.res-gallery__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.res-gallery__item {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-ink);
}
.res-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.res-gallery__item:hover img { transform: scale(1.03); }

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .res-body__inner { grid-template-columns: 1fr; }
  .res-header__title { font-size: var(--fs-700); }
  .res-gallery__inner { grid-template-columns: 1fr; }
}