/* Ajustes exclusivos de la subpágina de Cuidado corporal.
   El sistema visual base vive en rostro.css para mantener todas las subpáginas unificadas. */

.body-care-page {
  --bod-sand-soft: #f3ede5;
}

.body-care-page .harm-hero {
  grid-template-columns: minmax(0, 1.14fr) minmax(400px, .86fr);
}

.body-care-page .harm-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.9rem, 4vw, 4.35rem);
  line-height: .99;
  text-wrap: balance;
}

.body-care-page .harm-hero-subtitle {
  max-width: 690px;
  text-wrap: pretty;
}

.bod-hero-visual { min-height: 650px; }

.bod-hero-visual img {
  object-position: 62% center;
}

.bod-section-index {
  margin: 0 0 18px;
  color: var(--harm-gold-deep);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.bod-section-heading { max-width: 820px; }

.bod-catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.bod-procedure-card {
  min-height: 400px;
  grid-template-columns: minmax(190px, .92fr) minmax(0, 1.08fr);
}

.bod-procedure-card .harm-procedure-image { min-height: 400px; }

.bod-procedure-card .harm-procedure-copy {
  padding: clamp(28px, 3vw, 40px);
}

.bod-procedure-card .harm-procedure-copy h3 {
  font-size: clamp(1.85rem, 2.5vw, 2.5rem);
  text-wrap: balance;
}

.bod-procedure-card .harm-procedure-copy > p:not(.harm-card-index) {
  text-wrap: pretty;
}

.bod-procedure-sand { background: var(--bod-sand-soft); }

.bod-image-reduccion img {
  object-position: 50% 30%;
}

.bod-image-reafirmacion img {
  object-position: center;
}

.bod-image-drenaje img {
  object-position: center;
}

.bod-image-bienestar img {
  object-position: 50% 22%;
}

/* Depilación láser cierra la retícula: al ser el único servicio sin valoración previa
   ocupa la fila completa, y su fotografía apaisada aprovecha el ancho extra. */
.bod-procedure-laser { grid-column: 1 / -1; }

.bod-procedure-laser .harm-procedure-image { min-height: 320px; }

.bod-image-laser img { object-position: 50% 45%; }

.bod-philosophy {
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 255, 255, .7), transparent 33%),
    var(--bod-sand-soft);
}

.bod-philosophy .harm-safety-intro > p:last-child {
  max-width: 600px;
  text-wrap: pretty;
}

.bod-philosophy .harm-safety-list p { max-width: 560px; }

.bod-conversion-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 255, 255, .64), transparent 44%),
    var(--harm-sand);
}

.bod-conversion-card::before,
.bod-conversion-card::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(197, 168, 128, .17);
  border-radius: 50%;
  pointer-events: none;
}

.bod-conversion-card::before {
  width: 340px;
  height: 340px;
  left: -170px;
  top: -190px;
}

.bod-conversion-card::after {
  width: 260px;
  height: 260px;
  right: -120px;
  bottom: -160px;
}

.bod-conversion-card > * {
  position: relative;
  z-index: 1;
}

.bod-conversion-card h2 { max-width: 19ch; }

@media (max-width: 1180px) {
  .body-care-page .harm-hero {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
  }

  .body-care-page .harm-hero h1 {
    font-size: clamp(2.6rem, 4vw, 3.4rem);
  }

  .bod-catalog-grid { grid-template-columns: 1fr; }

  .bod-procedure-card {
    min-height: 350px;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  }

  .bod-procedure-card .harm-procedure-image { min-height: 350px; }
}

@media (max-width: 820px) {
  .body-care-page .harm-hero { grid-template-columns: 1fr; }

  .body-care-page .harm-hero h1 {
    max-width: 13ch;
    font-size: clamp(2.9rem, 10vw, 4.3rem);
  }

  .bod-hero-visual { min-height: auto; }

  .bod-procedure-card {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .bod-procedure-card .harm-procedure-image {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px) {
  .body-care-page .harm-hero h1 {
    max-width: 100%;
    font-size: clamp(2.6rem, 12vw, 3.5rem);
  }

  .body-care-page .harm-eyebrow { max-width: 34ch; }

  .bod-procedure-card .harm-procedure-copy h3 { font-size: 1.95rem; }

  .bod-conversion-card .harm-button { width: min(100%, 360px); }
}