/* ============================================================
   c6n.eu — Portafolio / Proyectos
   Estilos específicos de las páginas de caso (/proyectos/<slug>/).
   Se carga DESPUÉS de styles.css + article.css. Reutiliza sus tokens
   (--accent-*, --surface-glass, --border-*, --r-*) y el layout .article.
   ============================================================ */

/* ---------- Ficha de proyecto (cabecera de datos) ---------- */
.proj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 4px 0 28px;
}
.proj-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.proj-meta__item b { color: var(--text-primary); font-weight: 600; }
.proj-meta__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,.7);
}

/* ---------- Marco de navegador para los mockups ---------- */
.mockup-gallery {
  display: grid;
  gap: clamp(22px, 4vw, 40px);
  margin: 28px 0 36px;
}

.mockup {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--bg-secondary);
  box-shadow:
    0 24px 60px -24px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.02) inset;
}

/* Barra de navegador (chrome) — semáforo + barra de URL */
.mockup__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: linear-gradient(180deg, #16161a, #101013);
  border-bottom: 1px solid var(--border-subtle);
}
.mockup__dots { display: inline-flex; gap: 7px; flex-shrink: 0; }
.mockup__dots span {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
}
.mockup__dots span:nth-child(1) { background: #ff5f57; }
.mockup__dots span:nth-child(2) { background: #febc2e; }
.mockup__dots span:nth-child(3) { background: #28c840; }
.mockup__url {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border-subtle);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup__url::before { content: '🔒 '; opacity: .6; }
.mockup__tag {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-mid);
}

/* Viewport del mockup: mantiene la proporción del lienzo real y recorta.
   El iframe se renderiza al tamaño REAL del mockup (data-w × data-h, p. ej.
   1440×900) y un script lo escala con transform para encajarlo — así la
   composición no se rompe a anchos pequeños. Sin JS, el iframe ocupa el 100%
   (fallback responsivo aceptable). */
.mockup__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0a0b;
}
.mockup__viewport--desktop { aspect-ratio: 1440 / 900; }
.mockup__viewport--mobile  { aspect-ratio: 390 / 844; max-width: 390px; margin-inline: auto; }
.mockup__frame {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  transform-origin: 0 0;
  background: #0a0a0b;
}

/* Mockup móvil: se centra y estrecha para leerse como un teléfono */
.mockup--mobile {
  max-width: 380px;
  margin-inline: auto;
  border-radius: 30px;
}
.mockup--mobile .mockup__chrome { border-radius: 30px 30px 0 0; }

.mockup figcaption,
.mockup__cap {
  padding: 13px 18px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
}
.mockup__cap b { color: var(--text-primary); font-weight: 600; }

/* Nota de "datos ficticios" — honestidad visible */
.mockup__fiction {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(124,58,237,.14);
  border: 1px solid rgba(124,58,237,.3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  color: #c4b5fd;
  vertical-align: middle;
}

/* ---------- Hoja de especificaciones ----------
   2×2 fijo: con 4 fichas, auto-fit dejaba una fila coja (3+1) con celdas
   vacías visibles por el truco del gap de 1px. */
.spec-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0 30px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--border-subtle);
}
@media (max-width: 560px) {
  .spec-sheet { grid-template-columns: 1fr; }
}
.spec {
  padding: 16px 18px;
  background: var(--bg-secondary);
}
.spec__k {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.spec__v {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
}

/* ---------- Chips de stack / integraciones ---------- */
/* Los selectores .article ul / .article li de article.css (disc + padding)
   ganarían a una clase sola: se neutralizan aquí con mayor especificidad. */
.article ul.tech-chips,
.article ul.feature-list {
  list-style: none;
  padding-left: 0;
}
.article .tech-chips li,
.article .feature-list li {
  margin-bottom: 0;
}
.article .tech-chips li::marker,
.article .feature-list li::marker { content: ''; }
.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 28px;
  padding: 0;
  list-style: none;
}
.tech-chips li {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-secondary);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.tech-chips li:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--surface-glass-hover);
}

/* ---------- Bloque de features del caso ---------- */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 20px 0 30px;
  padding: 0;
  list-style: none;
}
.feature-list li {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
}
.feature-list li b {
  display: block;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 5px;
  font-weight: 600;
}
.feature-list li span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Estado vacío del hub ---------- */
.proj-empty {
  margin: 32px 0;
  padding: clamp(32px, 6vw, 56px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-glass);
  text-align: center;
}
.proj-empty h2 { margin: 0 0 10px; font-size: 20px; color: var(--text-primary); }
.proj-empty p { margin: 0 auto; max-width: 46ch; color: var(--text-secondary); font-size: 14.5px; }

/* ---------- Tarjeta de proyecto en el hub (extiende .hub-card) ---------- */
.hub-card__meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .mockup__url { font-size: 10.5px; }
  .mockup__tag { display: none; }
}