/* Galería de proyectos — tema oscuro */

:root {
  --fondo: #0c0f13;
  --panel: #141a21;
  --panel-alto: #1b232c;
  --borde: #26303b;
  --texto: #e7ecf2;
  --tenue: #8d9aab;
  --acento: #35d399;
  --acento-tenue: #1d7f5d;
  --radio: 12px;
  --ancho: 1180px;
  --sombra: 0 18px 40px -22px rgba(0, 0, 0, .9);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: .85em;
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: .1em .4em;
  word-break: break-all;
}

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

.fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.tenue { color: var(--tenue); }

/* ------------------------------------------------------------------ cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(12, 15, 19, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}

.cabecera .fila { height: 62px; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  letter-spacing: -.01em;
  font-size: 1.05rem;
}

.marca-punto {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 12px var(--acento);
}

.nav { display: flex; gap: 6px; flex-wrap: wrap; }

.nav a {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: .92rem;
  color: var(--tenue);
  border: 1px solid transparent;
  transition: .16s;
}

.nav a:hover { color: var(--texto); background: var(--panel); }

.nav a.activo { color: var(--acento); border-color: var(--acento-tenue); background: rgba(53, 211, 153, .08); }

/* ------------------------------------------------------------------- portada */
.portada { padding: 62px 24px 34px; }

.etiqueta {
  margin: 0 0 10px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
}

.portada h1,
.encabezado-proyecto h1 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -.025em;
}

.entrada { margin: 0; max-width: 68ch; color: #b9c4d2; font-size: 1.06rem; }

.meta { margin: 14px 0 0; color: var(--tenue); font-size: .88rem; }

/* --------------------------------------------------------- tarjetas de portada */
.rejilla-proyectos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 26px;
  padding-bottom: 70px;
}

.tarjeta-proyecto {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}

.tarjeta-proyecto:hover {
  transform: translateY(-3px);
  border-color: var(--acento-tenue);
  box-shadow: var(--sombra);
}

.tarjeta-imagen { aspect-ratio: 16 / 9; background: #0a0d11; overflow: hidden; }

.tarjeta-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sin-imagen {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--tenue);
  font-size: .85rem;
  background: repeating-linear-gradient(45deg, #10151b, #10151b 12px, #131a21 12px, #131a21 24px);
}

.tarjeta-cuerpo { padding: 20px 22px 24px; }

.tarjeta-cuerpo h2 { margin: 0 0 8px; font-size: 1.28rem; letter-spacing: -.015em; }

.tarjeta-cuerpo p { margin: 0; color: #aeb9c7; font-size: .95rem; }

.tarjeta-cuerpo .meta { margin-top: 12px; font-size: .82rem; }

/* ------------------------------------------------------------- encabezado ficha */
.encabezado-proyecto { padding: 46px 24px 8px; }

.encabezado-proyecto .etiqueta a { color: var(--tenue); }

.encabezado-proyecto .etiqueta a:hover { color: var(--acento); }

/* ---------------------------------------------------------------- galería */
.bloque-grupo { padding: 30px 24px 12px; }

.titulo-grupo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
  font-weight: 600;
}

.titulo-grupo::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

.cuenta {
  order: -1;
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  color: var(--acento);
  font-size: .78rem;
  letter-spacing: 0;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.pieza {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .16s, transform .16s;
}

.pieza:hover,
.pieza:focus-visible { border-color: var(--acento-tenue); transform: translateY(-2px); outline: none; }

.pieza img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #0a0d11;
  display: block;
}

.pieza figcaption { padding: 10px 12px 12px; display: grid; gap: 3px; }

.pieza-titulo { font-size: .9rem; font-weight: 550; overflow-wrap: anywhere; }

.pieza-meta { font-size: .76rem; color: var(--tenue); }

/* -------------------------------------------------------------------- vídeos */
.rejilla-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 18px;
}

.video {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
}

.video video {
  width: 100%;
  display: block;
  background: #05070a;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.video figcaption { padding: 11px 14px 14px; display: grid; gap: 3px; }

@media (max-width: 700px) {
  .rejilla-videos { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- documentación */
.lista-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.lista-docs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 9px;
  transition: .16s;
}

.lista-docs a:hover { border-color: var(--acento-tenue); background: var(--panel-alto); }

.doc-titulo { font-weight: 550; }

.doc-formato {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid var(--acento-tenue);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.articulo { padding: 46px 24px 70px; max-width: 900px; }

.articulo h1 { margin: 0 0 10px; font-size: clamp(1.6rem, 3.6vw, 2.3rem); letter-spacing: -.02em; }

.doc-html {
  width: 100%;
  height: 78vh;
  margin-top: 22px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
}

/* ------------------------------------------------------------- markdown */
.markdown {
  margin-top: 26px;
  padding: 28px 30px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.markdown h1, .markdown h2, .markdown h3 { line-height: 1.25; letter-spacing: -.015em; }

.markdown h2 { margin-top: 34px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }

.markdown h3 { margin-top: 26px; }

.markdown a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }

.markdown img { max-width: 100%; border-radius: 8px; }

.markdown pre {
  background: #0a0d11;
  border: 1px solid var(--borde);
  border-radius: 9px;
  padding: 16px;
  overflow-x: auto;
}

.markdown code { background: none; border: none; padding: 0; font-size: .88em; }

.markdown pre code { font-size: .85rem; }

.markdown table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .9rem; }

.markdown th, .markdown td { border: 1px solid var(--borde); padding: 8px 11px; text-align: left; }

.markdown th { background: var(--panel-alto); }

.markdown blockquote {
  margin: 18px 0;
  padding: 4px 18px;
  border-left: 3px solid var(--acento-tenue);
  color: var(--tenue);
}

.markdown hr { border: none; border-top: 1px solid var(--borde); margin: 30px 0; }

/* ------------------------------------------------------------------- avisos */
.aviso {
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: 9px;
  color: #b9c4d2;
  margin: 0 0 40px;
}

/* --------------------------------------------------------------- visor */
.visor {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(5, 7, 10, .94);
  backdrop-filter: blur(6px);
}

.visor[hidden] { display: none; }

.visor figure { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: 100%; }

.visor img {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--borde);
}

.visor figcaption { color: var(--tenue); font-size: .88rem; text-align: center; }

.visor-cerrar {
  position: absolute;
  top: 18px; right: 22px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--texto);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.visor-cerrar:hover { border-color: var(--acento-tenue); color: var(--acento); }

/* --------------------------------------------------------------------- pie */
.pie {
  border-top: 1px solid var(--borde);
  padding: 26px 0;
  color: var(--tenue);
  font-size: .84rem;
}

@media (max-width: 620px) {
  .contenedor { padding: 0 16px; }
  .portada, .encabezado-proyecto, .bloque-grupo { padding-left: 16px; padding-right: 16px; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .articulo { padding: 30px 16px 60px; }
  .markdown { padding: 20px 18px; }
}