/* ===========================================================================
   Ficha de proyecto — davefx
   Solo lo que las utilidades del tema (.dfx-meta, .dfx-hairline-grid,
   .dfx-grid-bg, .dfx-tag) y theme.json no cubren.
   =========================================================================== */

/* --- Migas: metadato mono, tono apagado (no granate, no versalita) --------- */
.dfx-proy-breadcrumb {
  color: var(--wp--preset--color--muted);
  text-transform: none;
  letter-spacing: 0.02em;
  margin: 0;
}
.dfx-proy-breadcrumb a { color: var(--wp--preset--color--muted); text-decoration: none; }
.dfx-proy-breadcrumb a:hover { color: var(--wp--preset--color--contrast); }
.dfx-proy-breadcrumb__sep { color: var(--wp--preset--color--border); margin: 0 0.4em; }

/* --- Acciones del hero ----------------------------------------------------- */
.dfx-proy-actions { margin-top: var(--wp--preset--spacing--40); }

/* --- Ficha técnica --------------------------------------------------------- */
.dfx-proy-ficha {
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
}
.dfx-proy-ficha__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.dfx-proy-ficha__row:first-child { border-top: 0; }
.dfx-proy-ficha__label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
}
.dfx-proy-ficha__value {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  text-align: right;
}

/* --- Captura (banda a sangre + marco 16:9) --------------------------------- */
.dfx-proy-capband {
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-block: var(--wp--preset--spacing--60);
  margin: 0;
}
.dfx-proy-wrap {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--50);
}
.dfx-proy-capture { margin: 0; }
.dfx-proy-capture__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  overflow: hidden;
}
.dfx-proy-capture__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dfx-proy-capture__ph {
  width: 100%; height: 100%;
  background-color: #f4f5f7;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 10px,
    rgba(91, 98, 112, 0.06) 10px, rgba(91, 98, 112, 0.06) 11px
  );
}
.dfx-proy-capture__caption {
  position: absolute;
  left: 0; bottom: 0;
  max-width: 92%;
  padding: 0.4rem 0.7rem;
  background: var(--wp--preset--color--surface);
  border-top: 1px solid var(--wp--preset--color--border);
  border-right: 1px solid var(--wp--preset--color--border);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--muted);
}

/* --- Features (rejilla a hueso con numeración) ----------------------------- */
.dfx-proy-features-band { margin-block: var(--wp--preset--spacing--60); }
.dfx-proy-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dfx-proy-feature { padding: var(--wp--preset--spacing--50); }
.dfx-proy-feature__num {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.1em;
  margin: 0 0 0.9rem;
}
.dfx-proy-feature__title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--wp--preset--color--contrast);
}
.dfx-proy-feature__desc {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* --- Recursos: Instalación + Otros plugins (dos columnas) ------------------ */
.dfx-proy-recursos {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--60);
  margin-block: var(--wp--preset--spacing--60);
}
.dfx-proy-recursos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--70);
}
.dfx-proy-section-label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--x-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin: 0 0 var(--wp--preset--spacing--40);
}

/* Comando de instalación (code oscuro) */
.dfx-proy-cmd {
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: #1b2036;
  color: #e8eaef;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
.dfx-proy-cmd__prompt { color: var(--wp--preset--color--accent); }
.dfx-proy-note {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
  margin: var(--wp--preset--spacing--30) 0 0;
}

/* Otros plugins: lista a hueso */
.dfx-proy-related { list-style: none; margin: 0; padding: 0; }
.dfx-proy-related__item { margin: 0; border-top: 1px solid var(--wp--preset--color--border); }
.dfx-proy-related__item:first-child { border-top: 0; }
.dfx-proy-related__item a {
  display: block;
  padding: 0.9rem 0;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}
.dfx-proy-related__item a:hover { color: var(--wp--preset--color--accent); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .dfx-proy-features { grid-template-columns: 1fr !important; }
  .dfx-proy-recursos__grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }
}
@media (max-width: 782px) {
  .dfx-proy-ficha { margin-top: var(--wp--preset--spacing--40); }
}

/* Galería de capturas: varias imágenes a hueso (2 col, 1 en móvil) */
.dfx-proy-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dfx-proy-shot { margin: 0; }
.dfx-proy-shot img { display: block; width: 100%; height: auto; }
.dfx-proy-gallery__cap { margin-top: var(--wp--preset--spacing--30); }
@media (max-width: 700px) {
  .dfx-proy-gallery { grid-template-columns: 1fr; }
}