/* =====================================================================
   CHUVEIRO — HERO EFFECT (duas imagens, tamanho cheio da section)
   ===================================================================== */

#chuveiroHero {
  position: relative;
  width: 100%;
  /* fallback enquanto a imagem carrega — o JS troca isso pela
     proporção real da imagem assim que ela é lida */
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  background: #ffffff !important;
  overflow: hidden;
}

.chuveiro-hero__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.chuveiro-hero__layer-base,
.chuveiro-hero__layer-hint,
.chuveiro-hero__layer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.chuveiro-hero__layer-base   { z-index: 1; }
.chuveiro-hero__layer-hint   { z-index: 2; }
.chuveiro-hero__layer-canvas { z-index: 3; }

/* imagem 01: base, sempre 100% visível, preenche a section inteira */
.chuveiro-hero__layer-base img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.chuveiro-hero__layer-hint canvas {
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply;
}

.chuveiro-hero__layer-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------------
   transição da base da imagem 01 pro branco (sem depender da cor dela):
   primeiro um degradê suave puxando pro branco, depois uma onda por cima
   pra fechar a transição com uma borda com forma, não uma linha reta
   --------------------------------------------------------------------- */
.chuveiro-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  min-height: 140px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 70%, #ffffff 100%);
}

.chuveiro-hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 5;
  line-height: 0;
  pointer-events: none;
}
.chuveiro-hero__wave svg {
  display: block;
  width: 100%;
  height: 90px;
}

@media (max-width: 768px) {
  #chuveiroHero { max-height: 100vh; }
  .chuveiro-hero__fade { height: 32%; min-height: 100px; }
  .chuveiro-hero__wave svg { height: 50px; }
}

.tpserv__icon i {
  font-size: 32px;
  color: var(--ochre, #2d6ec4);
}
.tpserv__price {
  color: var(--ochre, #2d6ec4);
  font-weight: 800;
}
.tpserv__desc {
  color: var(--cream-dim, #3d5a80);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.5rem 0 1rem;
}

.tp-about-schedule-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream, #1a2d4a);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tp-about-schedule-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.tp-about-schedule-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-subtle, rgba(45,110,196,0.09));
  font-size: 0.9rem;
  color: var(--cream-dim, #3d5a80);
}
.tp-about-schedule-list li span:last-child {
  font-weight: 600;
  color: var(--ochre, #2d6ec4);
}

.tp-about-amenities-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1rem;
  margin: 0 0 2rem;
  padding: 0;
}
.tp-about-amenities-list li {
  font-size: 0.85rem;
  color: var(--cream-dim, #3d5a80);
}
.tp-about-amenities-list li i {
  color: var(--ochre, #2d6ec4);
  margin-right: 0.4rem;
}

.tp-about-cta-deg i {
  color: var(--ochre, #2d6ec4);
  margin-right: 0.4rem;
}
.tp-about-map-link {
  font-weight: 700;
  color: var(--ochre, #2d6ec4);
  white-space: nowrap;
}
.tp-about-map-link i { margin-left: 4px; font-size: 0.8em; }

@media (max-width: 576px) {
  .tp-about-amenities-list { grid-template-columns: 1fr; }
}