/* Web Systems 3.1 · Página individual de proyecto
 * Este módulo se carga de forma condicional desde functions.php.
 */

/* Project detail */
.project-detail-head { position: relative; z-index: 2; min-height: 650px; display: grid; grid-template-columns: .76fr 1.24fr; gap: 65px; align-items: center; padding: 70px 0; }
.back-link { display: inline-block; margin-bottom: 28px; color: #7f8895; font-size: 9px; }
.project-detail-logo { width: 190px; max-height: 75px; display: block; margin: 31px 0 27px; object-fit: contain; object-position: left center; padding: 10px 14px; border-radius: 10px; background: white; }
.project-detail-copy h1 { max-width: 680px; font-size: clamp(43px, 4.5vw, 65px); }
.project-detail-media { position: relative; min-width: 0; }
.case-browser-large { overflow: hidden; border: 1px solid var(--line-dark); border-radius: 18px; background: #171b23; box-shadow: var(--shadow-dark); transform: perspective(1600px) rotateY(-2deg); }
.case-browser-large > div { height: 500px; overflow: hidden; background: white; }
.case-browser-large > div img { width: 100%; display: block; object-fit: cover; object-position: top; }
.project-detail-placeholder { min-height: 480px; display: grid; place-items: center; align-content: center; gap: 35px; padding: 70px; border: 1px solid var(--line-dark); border-radius: 18px; background: #f5f6f8; text-align: center; box-shadow: var(--shadow-dark); }
.project-detail-placeholder img { max-width: 340px; max-height: 130px; object-fit: contain; }
.project-detail-placeholder span { max-width: 380px; color: #6c737f; font-size: 10px; line-height: 1.6; }
.detail-live { top: auto; right: -12px; bottom: -12px; }
.project-story { background: var(--paper); }
.project-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.project-story article { position: relative; min-height: 400px; padding: 50px; background: var(--paper); }
.story-number { position: absolute; top: 32px; right: 32px; color: #b2b6bd; font-size: 9px; }
.project-story h2 { margin: 0; font-size: clamp(34px, 3.7vw, 50px); letter-spacing: -.045em; }
.project-story p { margin: 25px 0 0; color: var(--muted); font-size: 14px; line-height: 1.78; }
.project-system-section { background: white; }
.project-system-map { position: relative; min-height: 470px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(circle at center, #eaf0ff, #f7f8fa 50%, white 74%); }
.project-system-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-system-map > svg path { fill: none; stroke: rgba(46,89,255,.35); stroke-width: 1.2; stroke-dasharray: 5 6; }
.system-map-center { position: absolute; z-index: 2; width: 210px; height: 125px; left: 50%; top: 50%; display: grid; place-items: center; padding: 30px; transform: translate(-50%, -50%); border: 1px solid #becbfa; border-radius: 17px; background: white; box-shadow: var(--shadow); }
.system-map-center img { max-width: 165px; max-height: 70px; object-fit: contain; }
.system-map-node { position: absolute; z-index: 2; min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: 0 12px 30px rgba(13,22,45,.08); font-size: 9px; font-weight: 700; }
.system-map-node i { color: var(--blue); }
.system-map-node.node-1 { left: 7%; top: 13%; }.system-map-node.node-2 { left: 39%; top: 7%; }.system-map-node.node-3 { right: 6%; top: 13%; }.system-map-node.node-4 { left: 12%; bottom: 12%; }.system-map-node.node-5 { right: 10%; bottom: 11%; }
.project-outcomes { color: white; background: var(--ink); }
.project-outcomes-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 95px; align-items: center; }
.project-outcomes h2 { margin: 0; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.03; letter-spacing: -.052em; }
.project-outcomes p { margin: 22px 0 0; color: #9fa7b4; font-size: 13px; line-height: 1.72; }
.project-outcomes ol { margin: 0; padding: 0; border-top: 1px solid var(--line-dark); list-style: none; }
.project-outcomes li { min-height: 95px; display: grid; grid-template-columns: 55px 1fr; align-items: center; border-bottom: 1px solid var(--line-dark); }
.project-outcomes li span { color: #7894ff; font-size: 8px; }.project-outcomes li b { font-size: 15px; }
.related-projects { background: var(--paper); }
.related-project-grid { margin-top: 0; }

@media (max-width: 900px) {
  .project-detail-head { grid-template-columns: 1fr; gap: 50px; }
  .project-story-grid { grid-template-columns: 1fr; }
  .project-system-map { min-height: 590px; }
  .system-map-node.node-1 { left: 4%; top: 8%; }.system-map-node.node-2 { right: 4%; left: auto; top: 8%; }.system-map-node.node-3 { left: 4%; right: auto; top: auto; bottom: 8%; }.system-map-node.node-4 { right: 4%; left: auto; bottom: 8%; }.system-map-node.node-5 { left: 50%; right: auto; bottom: 2%; transform: translateX(-50%); }
  .project-system-map > svg { opacity: .45; }
}

@media (max-width: 640px) {
  .project-detail-head { min-height: 0; padding: 55px 0 70px; }
  .case-browser-large > div { height: 330px; }
  .project-detail-placeholder { min-height: 330px; padding: 40px; }
  .project-story article { min-height: 330px; padding: 34px; }
  .project-system-map { min-height: 630px; }
  .system-map-center { width: 170px; }
  .system-map-node { max-width: 150px; min-height: 43px; font-size: 7px; }
}