/* ── chales-familiares.css ── */

.hl-strip { background: var(--claret); padding: 3rem 4rem; display: flex; justify-content: center; gap: 6rem; flex-wrap: wrap; }
.hl-stat { text-align: center; }
.hl-stat-n { font-family: var(--serif); font-size: 3rem; color: var(--gold); font-weight: 700; line-height: 1; }
.hl-stat-l { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,236,.45); margin-top: .4rem; }

.intro-wrap { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 6rem; align-items: center; }
.intro-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.intro-mosaic img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.intro-mosaic img:first-child { grid-column: 1/-1; aspect-ratio: 16/7; }

.rooms-sec-alt { background: var(--sand); }
.rooms-inner { max-width: 1200px; margin: 0 auto; }
.rooms-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; margin-top: 3.5rem; }
.room-card { background: var(--ivory); }
.room-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.room-card-body { padding: 2rem; }
.room-card-nr { font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.room-card-name { font-family: var(--serif); font-size: 1.8rem; font-weight: 700; color: var(--claret); line-height: 1; margin-bottom: 1rem; }
.room-card-desc { font-size: .85rem; color: var(--text-mid); font-weight: 300; line-height: 1.8; margin-bottom: 1.5rem; }
.room-card-feats { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.8rem; }
.room-card-feat { font-size: .78rem; color: var(--text-mid); display: flex; align-items: center; gap: .5rem; }
.room-card-feat::before { content: '—'; color: var(--gold); }

.gallery-sec { background: var(--charcoal); }
.gallery-inner { max-width: 1200px; margin: 0 auto; }
.gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin-top: 3rem; }
.gallery-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: opacity .3s; }
.gallery-grid img:first-child { grid-column: 1/-1; aspect-ratio: 16/9; }
.gallery-grid img:hover { opacity: .8; }

@media (max-width: 960px) {
  .hl-strip { gap: 3rem; padding: 2.5rem 1.5rem; }
  .intro-wrap { grid-template-columns: 1fr; gap: 3rem; }
  .rooms-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } }