/* Página dedicada ao Karaokê */
.karaoke-hero {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 56px clamp(24px, 5vw, 64px);
  border: 1px solid rgba(115, 220, 255, .3);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 28%, rgba(41, 182, 246, .24), transparent 34%),
    radial-gradient(circle at 88% 15%, rgba(198, 79, 217, .24), transparent 32%),
    linear-gradient(120deg, #071827, #102b4a 48%, #35205d 100%);
  box-shadow: 0 22px 50px rgba(9, 52, 86, .28);
}

.karaoke-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(4, 15, 28, .22), rgba(8, 23, 40, .64) 48%, rgba(21, 13, 42, .94) 72%);
  pointer-events: none;
}

.karaoke-hero-art {
  position: absolute;
  inset: 0 auto 0 0;
  width: 61%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.karaoke-hero-content {
  position: relative;
  z-index: 2;
  width: min(48%, 540px);
  margin-left: auto;
}

.karaoke-hero .eyebrow { color: #73dcff; }
.karaoke-hero h1 {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
}
.karaoke-hero p:not(.eyebrow) {
  max-width: 520px;
  margin-top: 14px;
  color: #d6eaf5;
}

.karaoke-primary-button {
  margin-top: 22px;
  color: #0b2940;
  background: linear-gradient(90deg, #73dcff, #f4b5cc 58%, #dba4ff);
  box-shadow: 0 10px 28px rgba(41, 182, 246, .28);
}

.karaoke-room {
  min-height: 340px;
  padding: 0;
  overflow: hidden;
  border: none;
  box-shadow: var(--shadow-lift);
}
.karaoke-room img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: center;
}

.karaoke-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.karaoke-highlight {
  padding: 17px 14px;
  border: 1px solid rgba(41, 182, 246, .25);
  border-radius: 14px;
  text-align: center;
  background: rgba(15, 52, 80, .08);
}
.karaoke-highlight strong {
  display: block;
  color: #1976a8;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
}
.karaoke-highlight span {
  display: block;
  margin-top: 3px;
  color: var(--ink-dim);
  font-size: .78rem;
}
html[data-theme="dark"] .karaoke-highlight {
  background: rgba(41, 182, 246, .08);
}
html[data-theme="dark"] .karaoke-highlight strong { color: #73dcff; }

.karaoke-gallery {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 18px;
}
.karaoke-gallery figure {
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.karaoke-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}
.karaoke-gallery figure:last-child img { object-position: center 44%; }

.karaoke-booking-section { background: transparent; }

@media (max-width: 800px) {
  .karaoke-hero {
    min-height: 610px;
    align-items: flex-end;
    padding: 330px 24px 38px;
  }
  .karaoke-hero::before {
    background: linear-gradient(0deg, rgba(9, 9, 24, .98) 0%, rgba(10, 18, 35, .87) 46%, rgba(9, 22, 39, .1) 78%);
  }
  .karaoke-hero-art {
    width: 100%;
    height: 370px;
    object-position: center top;
  }
  .karaoke-hero-content {
    width: 100%;
    margin: 0;
    text-align: center;
  }
  .karaoke-hero .eyebrow { justify-content: center; }
  .karaoke-hero p:not(.eyebrow) { margin-inline: auto; }
  .karaoke-highlights { grid-template-columns: 1fr; }
  .karaoke-gallery { grid-template-columns: 1fr; }
  .karaoke-gallery figure { min-height: 280px; }
  .karaoke-gallery figure:last-child { max-height: 520px; }
}

@media (max-width: 480px) {
  .karaoke-hero {
    min-height: 570px;
    padding: 300px 20px 32px;
  }
  .karaoke-hero-art { height: 330px; }
  .karaoke-hero h1 { font-size: 1.85rem; }
  .karaoke-primary-button { width: 100%; }
}