/* ==========================================================================
   Crónicas de construcción — /proyectos/<slug>
   Depende de styles.css (tokens :root, tipografías, header/footer y las
   piezas de tarjeta: .project-badge, .project-title, .project-tag, tints,
   glows y rings). Como el blog, estas páginas son estáticas y en español
   canónico: sin main.js, sin toggle de idioma, sin data-reveal.
   ========================================================================== */

.pj-page { padding: 0 var(--pad-x) 96px; }
.pj-wrap { max-width: 880px; margin: 0 auto; }

/* ---- Portada: la tarjeta del proyecto, expandida en masthead -------------- */
.pj-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(44px, 9vh, 100px);
  min-height: clamp(380px, 54vh, 540px);
  margin-top: clamp(28px, 5vh, 56px);
  padding: clamp(26px, 4.5vw, 56px);
  border-radius: 14px;
}
.pj-hero-pilas {
  background: linear-gradient(118deg, #021845 0%, #012169 52%, #032c85 100%);
  box-shadow: 0 30px 80px -30px rgba(0, 5, 20, .8);
}
.pj-hero-mentor {
  background: linear-gradient(118deg, #2A0A1C 0%, #4E1026 55%, #6B1230 100%);
  box-shadow: 0 30px 80px -30px rgba(20, 0, 8, .8);
}
.pj-hero .project-topline,
.pj-hero .project-body { position: relative; }
a.project-domain { color: rgba(244, 241, 234, .65); }
a.project-domain:hover { color: var(--cream); }
.pj-standfirst {
  margin: 0;
  font: 400 clamp(15px, 1.35vw, 18px)/1.6 'Space Grotesk';
  color: rgba(244, 241, 234, .82);
  max-width: 52ch;
}
.pj-hero .project-tags { margin-top: 24px; }

/* ---- El producto, en evidencia (captura enmarcada) ------------------------ */
.pj-shot {
  margin-top: clamp(22px, 4vh, 40px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(1, 33, 105, .16);
  box-shadow: 0 30px 70px -34px rgba(1, 10, 34, .4);
  background: #fff;
}
.pj-shot-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #EDE9DF, #E6E1D5);
  border-bottom: 1px solid rgba(12, 16, 35, .08);
}
.pj-shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(12, 16, 35, .14); }
.pj-shot img { display: block; width: 100%; height: auto; }
.pj-shot-cap {
  margin: 12px 0 0;
  font: 500 11px/1.6 'Space Grotesk';
  letter-spacing: .18em;
  color: rgba(12, 16, 35, .5);
}
.pj-shot-cap a { color: rgba(12, 16, 35, .6); }
.pj-shot-cap a:hover { color: var(--wine); }

/* ---- Actos de la crónica --------------------------------------------------- */
.pj-sec { margin-top: clamp(46px, 7vh, 72px); display: flex; align-items: center; gap: 12px; }
.pj-sec-rule { width: 30px; height: 1px; flex: none; }
.pj-sec-label { font: 600 11px/1.5 'Space Grotesk'; letter-spacing: .22em; }
.pj-sec-causa .pj-sec-rule,
.pj-sec-estandar .pj-sec-rule { background: var(--wine); }
.pj-sec-causa .pj-sec-label,
.pj-sec-estandar .pj-sec-label { color: var(--wine); }
.pj-sec-obra .pj-sec-rule { background: var(--navy); }
.pj-sec-obra .pj-sec-label { color: var(--navy); }

.pj-claim {
  margin: 18px 0 0;
  font: italic 400 clamp(21px, 3.2vw, 27px)/1.42 'Instrument Serif';
  color: var(--navy);
  max-width: 44ch;
}

.pj-body { max-width: 64ch; }
.pj-body p { margin: 16px 0 0; font: 400 16.5px/1.8 'Space Grotesk'; color: rgba(12, 16, 35, .84); }
.pj-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(1, 33, 105, .35); }
.pj-body a:hover { text-decoration-color: var(--wine); }

/* ---- Ficha ------------------------------------------------------------------ */
.pj-ficha {
  margin-top: clamp(46px, 7vh, 66px);
  border-top: 1.5px solid var(--navy);
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px clamp(18px, 3vw, 40px);
}
.pj-ficha-label { font: 600 10.5px/1 'Space Grotesk'; letter-spacing: .2em; color: var(--wine); }
.pj-ficha-value { margin: 9px 0 0; font: 400 15px/1.55 'Space Grotesk'; color: rgba(12, 16, 35, .82); }

/* ---- Cierre: visita el producto / plantea tu causa -------------------------- */
.pj-cta {
  position: relative;
  overflow: hidden;
  margin-top: clamp(48px, 8vh, 80px);
  padding: clamp(28px, 4.5vw, 48px);
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pj-cta-pilas {
  background: linear-gradient(118deg, #021845 0%, #012169 52%, #032c85 100%);
  box-shadow: 0 24px 64px -28px rgba(0, 5, 20, .7);
}
.pj-cta-mentor {
  background: linear-gradient(118deg, #2A0A1C 0%, #4E1026 55%, #6B1230 100%);
  box-shadow: 0 24px 64px -28px rgba(20, 0, 8, .7);
}
.pj-cta-line {
  position: relative;
  margin: 0;
  font: italic 400 clamp(22px, 3vw, 30px)/1.3 'Instrument Serif';
  color: var(--cream);
  max-width: 22ch;
}
.pj-cta-buttons { position: relative; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Pie editorial ------------------------------------------------------------ */
.pj-footline {
  margin-top: clamp(48px, 8vh, 72px);
  border-top: 1px solid rgba(1, 33, 105, .25);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.pj-footline-brand { font: 400 11px/1.6 'Space Grotesk'; letter-spacing: .16em; color: rgba(12, 16, 35, .5); }
.pj-footline-next { font: 500 11px/1.6 'Space Grotesk'; letter-spacing: .16em; color: var(--wine); }
.pj-footline-next:hover { color: var(--navy); }

@media (max-width: 640px) {
  .pj-hero { min-height: 0; gap: 56px; }
  .pj-cta { padding: 28px 22px; }
  .pj-cta-buttons { width: 100%; }
  .pj-cta-buttons .btn-solid,
  .pj-cta-buttons .btn-ghost { width: 100%; box-sizing: border-box; text-align: center; }
}