/* Página de piercing: texto corto + mosaico de joyería + llamada a escribir. */

.pier-lead { color: var(--color-text-muted); max-width: 52ch; margin: 0 auto; text-wrap: pretty; }

/* Mosaico: 3 columnas con alturas distintas para que no se lea como cuadrícula de catálogo.
   Las fotos son verticales; las celdas anchas recortan por el centro, donde está la joya. */
.pier-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(220px, 30vw, 400px);
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.pier-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.pier-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
/* Pie de foto sobre un degradado que nace de la propia foto: sin panel opaco encima. */
.pier-foto figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  background: linear-gradient(to top, rgba(5, 5, 5, .78), transparent);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .pier-foto:hover img { transform: scale(1.05); }
}

.pier-a { grid-row: span 2; }
.pier-d { grid-column: span 2; }

/* Móvil: 2 columnas; la primera foto a todo el ancho abre el mosaico. */
@media (max-width: 700px) {
  .pier-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 52vw; }
  .pier-a { grid-column: span 2; grid-row: span 1; }
  .pier-a img { object-position: 50% 62%; }
  .pier-d { grid-column: span 2; }
  .pier-g { grid-column: span 2; }
}

.pier-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 54ch;
  margin: var(--space-8) auto 0;
  text-align: center;
}
.pier-cta h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); }
.pier-cta p { margin: 0; color: var(--color-text-muted); text-wrap: pretty; }
.pier-cta-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

/* Servicios con precio: foto + texto, sin tarjeta con borde. */
.pier-paquetes { margin-top: var(--space-8); }
.pier-paquetes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-7) var(--space-6); }
.pier-paquete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5); align-items: center; }
.pier-paquete img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.pier-paquete-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.pier-paquete h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); }
.pier-paquete p { margin: 0; color: var(--color-text-muted); text-wrap: pretty; }
.pier-paquete .pier-incluye { color: var(--color-gold-bright); font-size: var(--text-sm); }
.pier-paquete .pier-precio { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-gold); line-height: 1.1; margin-top: var(--space-2); }
.pier-nota { max-width: 60ch; margin: var(--space-7) auto 0; text-align: center; color: var(--color-text-muted); text-wrap: pretty; }
@media (max-width: 520px) {
  .pier-paquete { grid-template-columns: 1fr; }
  .pier-paquete img { aspect-ratio: 4 / 3; }
}