/* ============================================
   HABITACION SINGLE — Estilos específicos
   Depende de style.css (incluye .breadcrumb,
   .section-header)
   ============================================ */

/* Gallery hero */
.gallery-hero { padding-top: 5rem; background: var(--cream); }
.gallery-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.75rem; height: 520px;
}
.gallery-main {
  grid-row: span 2;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb { border-radius: 0; overflow: hidden; position: relative; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform 0.3s; }
.gallery-thumb:hover img { transform: scale(1.04); }
.gallery-thumb:first-of-type { border-radius: 0 var(--radius-lg) 0 0; }
.gallery-thumb:last-of-type { border-radius: 0 0 var(--radius-lg) 0; position: relative; }
.gallery-more {
  position: absolute; inset: 0;
  background: rgba(30,61,52,0.65);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: 1.125rem; font-weight: 500;
  cursor: pointer; transition: background 0.2s;
}
.gallery-more:hover { background: rgba(30,61,52,0.45); }

/* Room content layout */
.room-content {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 4rem; align-items: start;
  padding: 4rem 0 6rem;
}

/* Tabs */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.tab {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem; font-weight: 500;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all 0.2s;
  background: none;
  border-top: none; border-left: none; border-right: none;
}
.tab.active,
.tab:hover { color: var(--ink); border-bottom-color: var(--gold); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Booking widget */
.booking-widget {
  position: sticky; top: 7rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 2rem;
}
.bw-price {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem;
}
.bw-price span { font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--muted); }
.bw-compare { font-size: 0.8125rem; color: var(--muted); text-decoration: line-through; margin-bottom: 1.25rem; }
.bw-divider { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }
.bw-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.bw-dates-field {
  background: var(--cream); border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  border: 1.5px solid transparent;
  cursor: pointer; transition: border-color 0.2s;
}
.bw-dates-field:hover { border-color: var(--gold); }
.bw-dates-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; }
.bw-dates-val { font-size: 0.9rem; font-weight: 500; }
.bw-guests {
  background: var(--cream); border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem; cursor: pointer;
}
.bw-guests-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bw-guests-val { font-size: 0.9rem; font-weight: 500; }
.bw-include { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.bw-include-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-soft); }
.bw-include-item i { color: var(--gold); font-size: 0.75rem; width: 14px; }
.bw-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.bw-total-label { font-size: 0.875rem; color: var(--ink-soft); }
.bw-total-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.bw-guarantee { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 1rem; }

/* Amenities grid */
.amenities-full { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.amenity-full {
  display: flex; align-items: center; gap: 0.625rem;
  background: var(--cream); border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.875rem; color: var(--ink-soft);
}
.amenity-full i { color: var(--gold); font-size: 0.9rem; width: 16px; }

/* Related */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.related-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden; transition: transform 0.25s;
}
.related-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.related-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.related-card-body { padding: 1.25rem; }
.related-price { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
.related-price span { font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; color: var(--muted); }