/* Estilos de las páginas de proyecto en guillermofranco.dev/<slug>/.
   Se cargan después de /styles.css. Copiado de projects/_template/public/styles.css
   (componentes de proyecto) más lo propio de las páginas de proyecto académico. */

/* Enlace de vuelta a la web principal */
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap}
.back:hover{color:var(--ink)}

/* Hero de proyecto: logo + nombre */
.project-id{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.project-id img{width:52px;height:52px;border-radius:12px;border:1.5px solid var(--ink);background:var(--paper)}
.project-id .kind{font-size:14px;color:var(--muted)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#22a35a}

/* Capturas: marco tipo polaroid (escritorio) o teléfono */
.shot{position:relative;justify-self:center;width:100%;max-width:520px;background:var(--paper);padding:10px;border:1.5px solid var(--ink);border-radius:10px;box-shadow:5px 5px 0 var(--ink);transform:rotate(1.5deg)}
.shot img{width:100%;height:auto;border-radius:5px}
.shot figcaption{font-family:var(--hand);font-size:22px;text-align:center;margin-top:6px;color:var(--body)}
.phone{justify-self:center;width:100%;max-width:280px;padding:10px;border:1.5px solid var(--ink);border-radius:32px;background:var(--ink);box-shadow:5px 5px 0 rgba(17,20,24,.25);transform:rotate(2deg)}
.phone img{width:100%;height:auto;border-radius:24px}

/* Rejilla de funciones */
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.feature{padding:20px}
.feature .icon{font-size:26px;line-height:1;margin-bottom:10px}
.feature h3{font-size:17px;margin-bottom:6px}
.feature p{color:var(--body);font-size:15px;line-height:1.55}

/* Pasos numerados ("cómo funciona") */
.steps{list-style:none;display:grid;gap:14px;counter-reset:step;max-width:760px}
.steps li{position:relative;padding:16px 18px 16px 64px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:16px;top:14px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--hl);border:1.5px solid var(--ink);font-family:var(--display);font-weight:700}
.steps h3{font-size:16px}
.steps p{color:var(--body);font-size:15px;margin-top:4px}

/* Galería de capturas */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gallery figure{padding:8px}
.gallery img{width:100%;height:auto;border-radius:6px}
.gallery figcaption{font-size:13px;color:var(--muted);margin-top:6px;padding:0 4px 4px}

/* Bloque de texto largo */
.prose{max-width:68ch;color:var(--body);font-size:17px;line-height:1.7}
.prose p+p{margin-top:14px}

/* Páginas de proyecto en /<slug>/ */
.case .hero-grid.solo{grid-template-columns:1fr}
.case .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px}
.case .prose h3{font-family:var(--display);font-size:22px;letter-spacing:-.02em;color:var(--ink);margin:28px 0 8px}
.case .prose ul,.case .prose ol{padding-left:22px;margin:10px 0}
.case .prose li{margin:6px 0}
.case .prose code{font-size:.9em;background:#f1f2ee;border:1px solid #e1e2dc;border-radius:5px;padding:1px 5px}
.case .prose strong{color:var(--ink)}
.case .prose a{color:var(--accent)}
.case .figure{margin:28px 0;max-width:900px}
.case .figure img{width:100%;height:auto;border:1.5px solid var(--ink);border-radius:10px;background:var(--paper)}
.case .figure figcaption{font-size:14px;color:var(--muted);margin-top:8px}
@media (max-width:860px){.case .hero-grid{grid-template-columns:1fr}.case .shot{transform:none}}
@media (max-width:980px){.case .top nav{display:none}}