/* Queen Hair — conteúdo e galeria reais, setembro 2026 */
.reveal {
  opacity: 1;
  transform: none;
}

.hair-scroll-layer {
  width: 100%;
  height: 110svh;
  right: 0;
  overflow: hidden;
}

.hair-scroll-layer picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hair-scroll-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  filter: saturate(.9) contrast(1.04) brightness(.74);
}

@media (min-width: 741px) {
  .hair-scroll-layer img {
    transform: none !important;
  }
}

.hair-scroll-layer::before {
  background:
    linear-gradient(90deg, #070707 0%, rgba(7,7,7,.97) 16%, rgba(7,7,7,.7) 34%, rgba(7,7,7,.12) 63%, rgba(7,7,7,.02) 100%),
    linear-gradient(180deg, rgba(7,7,7,.08) 0%, rgba(7,7,7,0) 62%, #070707 100%);
}

.service-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-card {
  min-height: 410px;
}

.service-card h3 {
  margin-top: 2.8rem;
}

.service-list {
  display: grid;
  gap: .55rem;
  margin: 1.35rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.64);
  font-size: .9rem;
  line-height: 1.55;
  list-style: none;
}

.service-list li::before {
  content: "—";
  margin-right: .55rem;
  color: #d9ad52;
}

.service-list strong {
  color: rgba(255,255,255,.86);
  font-weight: 600;
}

.care-note {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
  margin-top: clamp(4rem, 8vw, 8rem);
  padding: clamp(2rem, 5vw, 5rem);
  border: 1px solid rgba(217,173,82,.35);
  background: linear-gradient(135deg, rgba(217,173,82,.1), rgba(255,255,255,.02));
}

.care-note h3 {
  margin: 1rem 0 0;
  color: #fff;
  font-family: "Italiana", serif;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.02;
}

.care-note h3 em { color: #d9ad52; font-style: italic; }
.care-note > p:last-child { margin: 0; color: rgba(255,255,255,.72); font-size: clamp(1rem,1.35vw,1.2rem); line-height: 1.8; }

.results-intro {
  max-width: 38rem;
  margin: 1.5rem auto 0;
  text-align: center;
  color: rgba(255,255,255,.65);
  font-size: 1rem;
  line-height: 1.75;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(3rem, 6vw, 6rem);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.13);
}

.showcase-card {
  position: relative;
  aspect-ratio: 4 / 5;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #101010;
}

.showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transform: scale(1.002);
  transition: transform .7s cubic-bezier(.2,.65,.25,1), filter .7s ease;
}

.showcase-card::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.84));
  pointer-events: none;
}

.showcase-card:hover img { transform: scale(1.045); filter: saturate(1.08); }

.showcase-card figcaption {
  position: absolute;
  z-index: 1;
  right: 1.4rem;
  bottom: 1.35rem;
  left: 1.4rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .3rem .8rem;
  color: #fff;
}

.showcase-card figcaption span {
  grid-row: 1 / 3;
  color: #d9ad52;
  font-size: .72rem;
  letter-spacing: .14em;
}

.showcase-card figcaption strong { font-family: "Italiana", serif; font-size: clamp(1.35rem,2vw,2rem); font-weight: 400; }
.showcase-card figcaption small { color: rgba(255,255,255,.7); font-size: .73rem; letter-spacing: .12em; text-transform: uppercase; }

.showcase-cta {
  display: flex;
  aspect-ratio: 4 / 5;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(2rem,4vw,4rem);
  background: #111;
}

.showcase-cta h3 {
  margin: auto 0;
  color: #fff;
  font-family: "Italiana", serif;
  font-size: clamp(2rem,4vw,4.2rem);
  font-weight: 400;
  line-height: 1.03;
}

.before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(3rem, 6vw, 6rem);
}

.comparison-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.14);
  background: #111;
}

.comparison-card header {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .35rem .25rem 1rem;
}

.comparison-card header span {
  color: #d9ad52;
  font-size: .7rem;
  letter-spacing: .15em;
}

.comparison-card h3 {
  margin: 0;
  color: #fff;
  font-family: "Italiana", serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 400;
}

.comparison-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.comparison-shot {
  position: relative;
  aspect-ratio: 4 / 5;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #050505;
  cursor: zoom-in;
}

.comparison-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  transition: transform .45s ease, filter .45s ease;
}

.comparison-shot:hover img,
.comparison-shot:focus-visible img {
  transform: scale(1.035);
  filter: brightness(1.06);
}

.comparison-shot > span {
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  padding: .35rem .58rem;
  color: #050505;
  background: #d9ad52;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.before-after-grid .showcase-cta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: .65fr 1fr auto;
  aspect-ratio: auto;
  min-height: 300px;
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
}

.before-after-grid .showcase-cta h3 { margin: 0; }

.gallery-lightbox {
  width: min(92vw, 980px);
  max-width: none;
  height: min(90vh, 980px);
  max-height: none;
  margin: auto;
  padding: 2.75rem 1rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(217,173,82,.4);
  background: #090909;
  color: #fff;
}

.gallery-lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.gallery-lightbox::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(8px); }

.gallery-lightbox img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.gallery-lightbox p {
  margin: .75rem 0 0;
  color: rgba(255,255,255,.78);
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.gallery-lightbox-close {
  position: absolute;
  z-index: 2;
  top: .35rem;
  right: .65rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1020px) {
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 740px) {
  .hair-scroll-layer {
    width: 100%;
    height: 100svh;
    background: #070707;
  }
  .hair-scroll-layer picture { height: 58svh; }
  .hair-scroll-layer img {
    object-fit: contain;
    object-position: 50% top;
    filter: saturate(.88) contrast(1.04) brightness(.7);
  }
  .hair-scroll-layer::before {
    background:
      linear-gradient(180deg, rgba(7,7,7,.03) 0%, rgba(7,7,7,.05) 34%, #070707 58%, #070707 100%),
      linear-gradient(90deg, rgba(7,7,7,.22), rgba(7,7,7,0) 50%, rgba(7,7,7,.16));
  }
  .hero-copy { padding-top: 54svh; }
  .hero h1 { font-size: clamp(3.1rem, 15vw, 4.7rem); }
  .hero-lead { max-width: 100%; }
  .hero-proof { max-width: 100%; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .service-card h3 { margin-top: 2rem; }
  .care-note { grid-template-columns: 1fr; gap: 2rem; }
  .showcase-grid { grid-template-columns: 1fr; gap: 1px; }
  .showcase-card, .showcase-cta { width: 100%; aspect-ratio: 4 / 5; }
  .before-after-grid { grid-template-columns: 1fr; gap: 1rem; }
  .comparison-card { padding: .7rem; }
  .before-after-grid .showcase-cta {
    grid-column: auto;
    display: flex;
    min-height: 430px;
    aspect-ratio: 4 / 5;
  }
  .gallery-lightbox { width: 96vw; height: 86vh; padding-inline: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card img { transition: none; }
}