/* ==========================================================================
   Páginas de cada masaje (masaje-*-murcia.html) — 11-oct-2026
   Existen para el SEO: cada una ataca una búsqueda («masaje tántrico Murcia»,
   «masaje a cuatro manos Murcia»…) con texto propio, sin cargar la home, que
   se queda corta a propósito. Mismo sistema que la home; las tarifas reutilizan
   .tarifas / .tarifa de main.css.
   ========================================================================== */

/* ── Entrada ───────────────────────────────────────────────────────────── */

.masaje-hero {
  /* La cabecera es fija: el primer bloque deja su hueco arriba. */
  padding-block: calc(var(--sp-6) + var(--sp-3)) var(--sp-5);
}

.masaje-hero__titulo {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  max-width: 14ch;
  margin-bottom: var(--sp-3);
}
.masaje-hero__titulo em { font-style: italic; color: var(--c-gold-soft); }

.masaje-hero__entrada {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  max-width: 44ch;
  margin-bottom: var(--sp-4);
}

.masaje-hero__acciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}


/* ── Foto a sangre ─────────────────────────────────────────────────────── */

/* El fondo de espera (el degradado del proyecto) lo pone main.css. */
.masaje-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.masaje-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.08);
}
.masaje-foto::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--velo-galeria);
}


/* ── Texto ─────────────────────────────────────────────────────────────── */

.masaje-cuerpo { padding-block: var(--sp-seccion); }

.masaje-bloque + .masaje-bloque {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: var(--borde);
}

.masaje-bloque h2 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-display);
  max-width: 16ch;
  margin-bottom: var(--sp-3);
}

.masaje-bloque p {
  color: var(--c-muted);
  max-width: var(--medida);
}
.masaje-bloque p + p { margin-top: var(--sp-2); }
.masaje-bloque p b { color: var(--c-text); font-weight: 500; }
.masaje-bloque p a { color: var(--c-text); }
.masaje-bloque p a:hover { color: var(--c-gold-soft); }

.masaje-bloque .tarifas { margin-bottom: var(--sp-3); max-width: var(--medida); }
.tarifa__nombre { display: grid; }
.tarifa__nombre small { font-size: var(--fs-small); color: var(--c-muted); }

.masaje-bloque .boton { margin-top: var(--sp-3); }


/* ── Otros masajes ─────────────────────────────────────────────────────── */

.masaje-otros {
  padding-block: var(--sp-5);
  border-top: var(--borde);
}
.masaje-otros ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-3);
}


/* ══ Tablet ════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  .masaje-hero__acciones { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .masaje-foto { aspect-ratio: 21 / 9; }
}


/* ══ Escritorio ════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .masaje-hero { padding-block-start: calc(var(--sp-7) + var(--sp-2)); }

  /* Asimetría 5/7: el titular a la izquierda, el texto a la derecha. */
  .masaje-bloque {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-5);
    align-items: start;
  }
  .masaje-bloque h2 { margin-bottom: 0; }
}