/* =============================================================
   WEB STUDIO — soften.css
   Capa de "premium redondeado" para los conceptos de portfolio.
   Se carga DESPUÉS de que cada página redefina sus --tokens
   (colores/tipografía/--radius) en un <style> propio.
   ============================================================= */

:root {
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 1px 2px rgba(20, 15, 10, .04), 0 10px 28px -8px rgba(20, 15, 10, .16);
}

/* Cards: de grilla con hairline a cards sueltas con aire y sombra */
.card-grid {
  background: transparent;
  border: 0;
  gap: 1.4rem;
}
.card-grid > * {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.p-card, .price-card {
  border-radius: var(--radius);
}
.price-card.is-featured { box-shadow: var(--shadow-soft); }

/* Imágenes y placeholders */
.media-block {
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-100);
}
.media-photo {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.media-photo.is-tall { aspect-ratio: 3 / 4; }
.media-photo.is-wide { aspect-ratio: 16 / 9; }

/* Botones y pills: mucho más redondos */
.btn { border-radius: 999px; }
.filter-pill, .tag-pill, .price-tag, .portfolio-tag {
  border-radius: 999px;
}
.form-field input, .form-field select {
  border-radius: var(--radius-sm);
}

/* Header y banner ligeramente redondeados en los bordes internos */
.preview-banner { border-bottom: 1px solid var(--line); }

/* Fotos en grilla simple (galerías) */
.photo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 640px) { .photo-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* Suaviza el grid-12 general: line color ya viene tenue desde cada página */
.grid-12 { border-radius: 0; }