/* ==========================================================================
   CASE STUDY — PROCESO (bloques nuevos)
   Usa las mismas variables que tokens-base.css (--color-black, --color-dark-blue,
   --color-blue, --color-gray, --color-white, --font-headings, --font-body).
   Se carga solo en single-proyecto, junto a proyecto-single.css.
   ========================================================================== */

.pg-fiche {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 32px 0;
  margin: 40px 0 64px;
  border-top: 1px solid var(--color-glass-border);
  border-bottom: 1px solid var(--color-glass-border);
}

.pg-fiche-item span {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 8px;
}

.pg-fiche-item p {
  font-family: var(--font-headings);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black);
  margin: 0;
}

.pg-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 80px;
}

.pg-problem-card {
  padding: 32px;
  border-radius: 16px;
  background: rgba(0, 126, 255, 0.04);
  border: 1px solid var(--color-glass-border);
}

.pg-problem-card h3 {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-dark-blue);
  margin: 0 0 12px;
}

.pg-findings-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}

.pg-findings-list li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-body);
  color: var(--color-black);
}

.pg-findings-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue);
}

/* Puente UX: la pieza que faltaba */
.pg-bridge {
  margin: 80px 0;
}

.pg-bridge-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-glass-border);
}

.pg-bridge-item:first-of-type {
  border-top: 1px solid var(--color-glass-border);
}

.pg-bridge-col span {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pg-bridge-col.pain span { color: #C93A3A; }
.pg-bridge-col.decision span { color: var(--color-dark-blue); }
.pg-bridge-col.why span { color: var(--color-gray); }

.pg-bridge-col img {
  margin-top: 12px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-glass-border);
}

/* Iteraciones */
.pg-iterations {
  margin: 80px 0;
}

.pg-iteration-item {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-glass-border);
  align-items: start;
}

.pg-iteration-version {
  font-family: var(--font-headings);
  font-weight: 700;
  color: var(--color-black);
}

.pg-iteration-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 6px;
  display: block;
}

/* Resultado / impacto */
.pg-results {
  margin: 80px 0;
  padding: 48px;
  border-radius: 20px;
  background: var(--color-black);
  color: var(--color-white);
}

.pg-results h2, .pg-results span { color: var(--color-white); }

.pg-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.pg-metric-card {
  padding: 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
}

.pg-metric-card .before {
  font-size: 13px;
  color: var(--color-gray);
  text-decoration: line-through;
}

.pg-metric-card .after {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-blue);
  display: block;
  margin-top: 4px;
}

.pg-results-text {
  font-family: var(--font-body);
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin-top: 16px;
}

/* Handoff */
.pg-handoff {
  margin: 80px 0;
  padding: 32px;
  border-left: 3px solid var(--color-blue);
  background: rgba(0,126,255,0.04);
}

.pg-handoff h2 {
  margin-top: 0;
}

/* CTA final del caso de estudio */
.pg-case-cta {
  margin: 96px 0 40px;
  padding: 56px 32px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(135deg, rgba(0,126,255,0.08), rgba(0,83,169,0.08));
}

.pg-case-cta h2 {
  margin-bottom: 8px;
}

.pg-case-cta .pg-case-cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

.pg-case-cta-email {
  font-family: var(--font-body);
  color: var(--color-dark-blue);
  text-decoration: underline;
  align-self: center;
}

@media (max-width: 900px) {
  .pg-fiche { grid-template-columns: repeat(2, 1fr); }
  .pg-problem-grid { grid-template-columns: 1fr; }
  .pg-bridge-item { grid-template-columns: 1fr; }
  .pg-iteration-item { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BLOQUES DE PROFUNDIDAD
   Restricciones · Antes/Después · Trade-off · Estados y accesibilidad ·
   Testimonios · Aprendizaje · Prototipo
   ========================================================================== */

.pg-constraints { margin: 64px 0; }
.pg-constraints-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pg-constraints-list li {
  font-family: var(--font-body); font-size: 13px; line-height: 1.4;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--color-glass-border);
  background: rgba(255,255,255,.03); color: var(--color-gray);
}

.pg-beforeafter { margin: 80px 0; }
.pg-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.pg-ba-item { margin: 0; }
.pg-ba-item img { width: 100%; border-radius: 14px; border: 1px solid var(--color-glass-border); display: block; }
.pg-ba-item figcaption { margin-top: 10px; font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-gray); }
.pg-ba-item--after figcaption { color: var(--color-blue); }
.pg-ba-text { margin-top: 20px; font-family: var(--font-body); line-height: 1.6; color: var(--color-gray); max-width: 70ch; }

.pg-tradeoff { margin: 80px 0; padding: 36px; border-radius: 18px; background: rgba(0,126,255,.05); border-left: 3px solid var(--color-blue); }
.pg-tradeoff-body { font-family: var(--font-body); line-height: 1.65; }

.pg-states { margin: 80px 0; }
.pg-states-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin-top: 26px; }
.pg-state-card { padding: 20px; border-radius: 14px; border: 1px solid var(--color-glass-border); background: rgba(255,255,255,.02); }
.pg-state-name { display: block; font-family: var(--font-headings); font-weight: 600; margin-bottom: 8px; }
.pg-state-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-gray); }
.pg-a11y { margin-top: 26px; font-family: var(--font-body); line-height: 1.65; color: var(--color-gray); max-width: 75ch; }

.pg-quotes { margin: 80px 0; display: grid; gap: 24px; }
.pg-quote { margin: 0; padding: 30px 34px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--color-glass-border); }
.pg-quote p { margin: 0; font-family: var(--font-headings); font-size: clamp(17px,2vw,22px); line-height: 1.5; }
.pg-quote cite { display: block; margin-top: 14px; font-family: var(--font-body); font-size: 12px; font-style: normal; color: var(--color-gray); }

.pg-learning { margin: 80px 0; padding: 36px; border-radius: 18px; border: 1px dashed var(--color-glass-border); }
.pg-learning-body { font-family: var(--font-body); line-height: 1.65; color: var(--color-gray); max-width: 75ch; }

.pg-proto { margin: 60px 0; text-align: center; }

@media (max-width: 900px) {
  .pg-ba-grid { grid-template-columns: 1fr; }
  .pg-tradeoff, .pg-learning { padding: 24px; }
}

/* ==========================================================================
   CTA FINAL DEL CASO DE ESTUDIO — mismo lenguaje que el contacto de la home
   (kicker + titular grande + email como enlace grande subrayado)
   ========================================================================== */
.pg-case-cta {
  position: relative;
  margin: 96px 0 0;
  padding: clamp(70px,12vw,160px) 34px;
  border-top: 1px solid var(--color-glass-border);
  text-align: center;
  background: none;
  border-radius: 0;
}
.pg-case-cta__inner { max-width: 1200px; margin: 0 auto; }
.pg-case-cta__kicker {
  display: block; margin-bottom: 16px;
  font-family: var(--font-body); font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-blue);
}
.pg-case-cta h2 {
  margin: 0;
  font-family: var(--font-headings);
  font-size: clamp(32px,6vw,92px); line-height: .98; letter-spacing: -.02em;
}
.pg-case-cta__mail {
  display: inline-flex; align-items: center; gap: 18px;
  margin-top: clamp(30px,4vw,54px);
  font-family: var(--font-headings); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(20px,3vw,44px);
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 10px;
  transition: color .4s ease, border-color .4s ease;
}
.pg-case-cta__mail span { font-size: .7em; }
.pg-case-cta__mail:hover { color: var(--color-blue); border-color: var(--color-blue); }

@media (max-width: 900px) {
  .pg-case-cta { padding-left: 20px; padding-right: 20px; }
  .pg-case-cta__mail { font-size: clamp(16px,5vw,24px); gap: 10px; word-break: break-word; }
}

/* ==========================================================================
   GALERÍA DE MOCKUPS / WIREFRAMES — margen superior e inferior
   ========================================================================== */
.pg-showcase-grid,
.pg-wireframes-grid {
  margin-top: clamp(40px,6vw,80px) !important;
  margin-bottom: clamp(40px,6vw,80px) !important;
}

/* ==========================================================================
   TIPOGRAFÍA DE LAS PÁGINAS DE PROYECTO
   Unifica los casos de estudio con el sistema de la home:
     titulares  -> Bricolage Grotesque
     cuerpo     -> Space Mono
     acentos    -> Instrument Serif
   Antes usaban Inter + Cascadia Code, lo que hacía que al pasar de la home a
   un caso de estudio pareciera otra web.
   ========================================================================== */
body.single-proyecto {
  --font-headings: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Space Mono', 'Cascadia Code', monospace;
  --font-serif: 'Instrument Serif', serif;
}

/* Titulares -> Bricolage (gana a la regla global `body h1..h6 -> Inter`
   que tokens-base aplica con !important para el resto del sitio) */
body.single-proyecto h1,
body.single-proyecto h2,
body.single-proyecto h3,
body.single-proyecto h4,
body.single-proyecto .pg-case-hero-title,
body.single-proyecto .pg-card-title,
body.single-proyecto .pg-metric__val,
body.single-proyecto .pg-hm-metric__val,
body.single-proyecto .pg-case-cta h2,
body.single-proyecto .pg-case-cta__mail,
body.single-proyecto .pg-quote p,
body.single-proyecto .pg-state-name,
body.single-proyecto .pg-fiche-item p {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  letter-spacing: -.02em;
}

/* Cuerpo, etiquetas y metadatos -> Space Mono */
body.single-proyecto .pg-project,
body.single-proyecto .pg-project p,
body.single-proyecto .pg-project li,
body.single-proyecto .pg-project span,
body.single-proyecto .pg-project div,
body.single-proyecto .pg-project a,
body.single-proyecto .pg-section-title span,
body.single-proyecto .pg-fiche-item span,
body.single-proyecto .pg-constraints-list li,
body.single-proyecto .pg-ba-item figcaption,
body.single-proyecto .pg-step__tags,
body.single-proyecto .pg-case-cta__kicker {
  font-family: 'Space Mono', 'Cascadia Code', monospace !important;
}

/* Los titulares dentro de .pg-project vuelven a mandar sobre la regla de cuerpo */
body.single-proyecto .pg-project h1,
body.single-proyecto .pg-project h2,
body.single-proyecto .pg-project h3,
body.single-proyecto .pg-project h4 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
}

/* Acento serif itálico, igual que en la home */
body.single-proyecto .pg-serif,
body.single-proyecto .pg-hm-serif {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic;
  font-weight: 400;
}