/* ============ PRECIOS ============ */

.price-title {
  margin-bottom: 14px;
}

/* Pilates (más contenido: 3 tarifas + promo) a la izquierda; los demás
   servicios, más cortos, apilados a la derecha. La columna de la derecha se
   estira (align-items: stretch, el valor por defecto de grid) para igualar el
   alto total de la de Pilates, y reparte ese alto de más entre sus 3 tarjetas
   (justify-content: space-between) en vez de dejarlo todo junto al final. */
.price-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}

.price-grid-secondary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.price-card {
  background: var(--crema);
  border: 1px solid #e8e2d5;
  border-radius: 14px;
  padding: 26px 28px;
}

.price-card h3 {
  font-size: 22px;
  margin-bottom: 14px;
  color: var(--teal-dark);
}

.price-card-muted {
  background: #fff;
  border-style: dashed;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(28, 43, 51, .08);
  font-size: 15.5px;
  color: #2c3a42;
}

.price-row:last-of-type {
  border-bottom: none;
}

.price-row strong {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--teal-dark);
  white-space: nowrap;
}

.price-note {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--gris);
  text-align: left;
  font-style: italic;
}

/* caja de promoción — misma lógica visual que la tarjeta del centro (verde
   oscuro con texto claro), para que destaque dentro de la tarjeta de Pilates */
.promo-box {
  background: var(--teal-dark);
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: 20px;
}

.promo-label {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--arena-light);
  font-weight: 700;
  margin-bottom: 8px;
}

.promo-headline {
  color: #fff;
  font-size: 16.5px;
  font-weight: 500;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  text-align: left;
}

.promo-box .price-row {
  color: #e7efee;
  border-bottom-color: rgba(255, 255, 255, .14);
}

.promo-box .price-row strong {
  color: #fff;
}

.promo-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #b9c7c6;
  text-align: left;
  font-style: italic;
}

.price-cta-wrap {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.price-cta-ghost {
  font-weight: 600;
  color: var(--teal-dark);
}

.price-cta-ghost:hover {
  color: var(--teal);
}

@media (max-width: 760px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
}

/* ============ NAVBAR FIX ============
   .navbar (nav.css) nace transparente con texto claro y solo se vuelve sólida
   (.scrolled, vía nav.js al pasar 40px de scroll) — pensado para páginas con
   una foto/hero oscuro detrás del todo. Esta página no tiene hero: el fondo
   bajo la barra es el --crema claro de .section, así que al volver a scrollY=0
   (nav.js quita .scrolled) el texto claro queda invisible sobre fondo claro.
   Aquí la barra va SIEMPRE sólida, sin depender del scroll. */
.navbar {
  background-color: var(--oscuro) !important;
}