/* PushPull_V3/css/post.css
   Estilos del ARTÍCULO de blog (/blog/<slug>/) — extraídos del main.css de
   la web en producción (sección "14 · BLOG" + proj-meta para la tabla de
   meta del post). Los tokens (--fg, --fg-soft, --border...) son los mismos
   en la V3, así que viajan tal cual. Cargar después de main.css. */

/* ==========================================================================
   14 · BLOG — artículo (/blog/<slug>/)
   El listado reutiliza work-list tal cual (sin CSS propio). Aquí solo vive
   la prosa del cuerpo del artículo: ancho de lectura cómodo, jerarquía de
   H2 y párrafos con --fg-soft (misma regla de legibilidad que el resto
   del sitio, techo ~19px).
   ========================================================================== */
.post {
  padding-inline: var(--gutter);
}

.post-body {
  max-width: 68ch;
  margin-inline: auto;
}

.post-body h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
}

.post-body p {
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.65;
  color: var(--fg-soft);
  margin-top: 1.2em;
}

.post-body p:first-child { margin-top: 0; }

.post-body strong { color: var(--fg); font-weight: 700; }

.post-body a {
  color: var(--fg-soft);
  text-decoration: underline;
  text-decoration-color: var(--border);
  transition: color 0.25s, text-decoration-color 0.25s;
}

.post-body a:hover {
  color: var(--accent-aqua);
  text-decoration-color: var(--accent-aqua);
}

/* --- Meta del hero — Cliente · Año · Rol, bajo el título -------------------- */
.proj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding-inline: var(--gutter);
}

.proj-meta__item {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.proj-meta__key {
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 500;
}

.proj-meta__val {
  font-size: clamp(15px, 1.3vw, 19px);
  color: var(--fg);
  font-weight: 500;
}

.proj-meta__val a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); transition: border-color 0.25s; }
.proj-meta__val a:hover { border-color: var(--accent-aqua); }

/* --- PLACEHOLDER DE CAPTURA -----------------------------------------------
   Hueco donde irá una imagen real. Mientras no exista, muestra una nota
   con el tipo de captura que pide. Sustituir el bloque entero por <img>
   cuando Mario suelte la imagen. */
.proj-shot {
  margin-inline: var(--gutter);
  margin-block: clamp(3rem, 6vw, 6rem);
}

.proj-shot__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 22px,
      rgba(240, 236, 228, 0.018) 22px 44px
    );
  overflow: hidden;
}

.proj-shot--tall .proj-shot__frame { aspect-ratio: 16 / 9; }

.proj-shot__note {
  max-width: 42ch;
  text-align: center;
  padding: 1.5rem;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.55;
  color: var(--fg-muted);
}

.proj-shot__tag {
  display: block;
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-magenta);
  margin-bottom: 0.8em;
}

/* Imagen real: sin borde (la foto ya define su propio límite visual) */
.proj-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.proj-shot:has(img) .proj-shot__frame { border: none; }

/* Vídeo embebido (ej. YouTube): mismo tratamiento que una imagen real */
.proj-shot iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.proj-shot:has(iframe) .proj-shot__frame { border: none; }

/* --- Cuando una sección de ficha necesita el gutter ------------------------ */
.proj-tech,
.proj-stack { padding-inline: var(--gutter); }

/* --- STACK — chips de tecnología (estáticos, legibles) --------------------- */
.proj-stack {
  padding-block: clamp(4rem, 7vw, 7rem);
}

.proj-stack__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.7rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.proj-stack__chip {
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--fg-soft);
  padding: 0.55em 1.1em;
  border: 1px solid var(--border);
  transition: color 0.25s, border-color 0.25s;
}

.proj-stack__chip:hover {
  color: var(--fg);
  border-color: var(--fg-subtle);
}

/* Acento "+" antes de cada chip, como en el resto del sitio */
.proj-stack__chip::before {
  content: '+';
  color: var(--accent-magenta);
  margin-right: 0.5em;
}

/* --- Diagrama vectorial dentro de un .proj-shot (ej. Hub & Spoke) ---------- */
.proj-diagram {
  width: 92%;
  height: auto;
  max-height: 90%;
}

.proj-figcaption {
  margin-top: 1rem;
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--fg-muted);
  line-height: 1.5;
  max-width: 60ch;
}

/* --- Botón "Ver todo el trabajo" (teaser de la home) ---------------------- */
.work__all-wrap {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--gutter);
}

/* --- Rejilla "Y más proyectos" al final de Work (home y /trabajo/) --------- */
.work-more {
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.work-more__head {
  display: block;
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
}

.work-more__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0 clamp(2rem, 4vw, 4rem);
}

.work-more__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 1.6vw, 1.15rem) 0;
  border-top: 1px solid var(--border);
  color: var(--fg-soft);
  text-decoration: none;
  transition: color 0.25s;
}

.work-more__item:hover { color: var(--fg); }

.work-more__txt {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.work-more__name {
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* El nombre usa el mismo efecto text-roll del menú (.nav__roll / .nav__char).
   El disparador del menú es .nav__link:hover; aquí lo dispara el item del grid. */
.work-more__item:hover .nav__char > span {
  transform: translateY(-100%);
}

.work-more__desc {
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg-muted);
  margin-top: 0.15em;
}

.work-more__arrow {
  color: var(--fg-subtle);
  transition: color 0.25s, transform 0.25s var(--ease-out-expo);
}

.work-more__item:hover .work-more__arrow {
  color: var(--accent-aqua);
  transform: translate(2px, -2px);
}

/* --- Fragmentos técnicos en línea (URLs, rutas) dentro de una ficha -------- */
.svc-item__desc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  color: var(--accent-aqua);
  background: rgba(240, 236, 228, 0.04);
  padding: 0.1em 0.4em;
  letter-spacing: 0;
  word-break: break-word;
}

/* --- PÁGINAS LEGALES — prosa sencilla, legible, sin adornos ----------------- */
.legal {
  padding-inline: var(--gutter);
  max-width: calc(75ch + var(--gutter) * 2);
}

.legal h2 {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 2.2em 0 0.7em;
}

.legal h2:first-child { margin-top: 0; }

.legal p,
.legal li {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--fg-soft);
  line-height: 1.7;
  margin-bottom: 1em;
}

.legal ul {
  list-style: none;
  padding-left: 1.4em;
  margin-bottom: 1em;
}

.legal li { margin-bottom: 0.5em; position: relative; }

.legal li::before {
  content: '+';
  position: absolute;
  left: -1.4em;
  color: var(--accent-magenta);
}

.legal a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.25s;
}

.legal a:hover { color: var(--accent-aqua); }

.legal strong { color: var(--fg); font-weight: 700; }

/* Aviso de borrador: que se vea que está pendiente de revisión */
.legal__draft {
  border: 1px solid var(--accent-magenta);
  padding: 1em 1.2em;
  margin-bottom: 2.5em;
  font-size: clamp(13px, 1vw, 15px) !important;
  color: var(--fg) !important;
}

/* ==========================================================================
   14b · BLOG — componentes de la guía SEO
   Bloques que usan los posts generados por el pipeline (Investigador →
   Redactor → Maquetador): "respuesta directa", subtítulos H3, listas,
   tablas comparativas, FAQ y línea de fuente. Tokens V3, compatible con
   modo claro/oscuro (color-mix sobre --fg). Cargar dentro de post.css.
   ========================================================================== */

/* --- Subtítulos H3 dentro del artículo ------------------------------------- */
.post-body h3 {
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--fg);
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 0.6rem;
}

/* --- Listas del artículo (mismo acento "+" que el resto del sitio) ---------- */
.post-body ul,
.post-body ol {
  margin-top: 1.2em;
  padding-left: 1.5em;
  color: var(--fg-soft);
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.65;
}
.post-body li { margin-top: 0.5em; }
.post-body ul { list-style: none; }
.post-body ul > li { position: relative; }
.post-body ul > li::before {
  content: '+';
  position: absolute;
  left: -1.5em;
  color: var(--accent-magenta);
}
.post-body ol { padding-left: 1.4em; }
.post-body ol > li::marker { color: var(--accent-aqua); }

/* --- Código inline en el cuerpo -------------------------------------------- */
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  color: var(--accent-aqua);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  padding: 0.1em 0.4em;
  letter-spacing: 0;
  word-break: break-word;
}

/* --- Bloque "respuesta directa" (fragmento destacado / citación IA) -------- */
.post-body .post-answer {
  margin-top: 1.6em;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.2rem, 2.4vw, 1.8rem);
  border-left: 3px solid var(--accent-aqua);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.6;
  color: var(--fg);
}

/* --- Tabla comparativa ----------------------------------------------------- */
.post-table-wrap {
  margin-top: 1.6em;
  overflow-x: auto;
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.5;
}
.post-body th,
.post-body td {
  text-align: left;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--border);
  color: var(--fg-soft);
  vertical-align: top;
}
.post-body th {
  color: var(--fg);
  font-weight: 700;
  border-bottom-color: var(--fg-subtle);
}
.post-body tbody tr:last-child td { border-bottom: none; }

/* --- Bloque FAQ ------------------------------------------------------------ */
.post-faq { margin-top: clamp(2.5rem, 5vw, 4rem); }
.post-faq__item {
  padding: 1.1em 0;
  border-bottom: 1px solid var(--border);
}
.post-faq__q {
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 0.5em;
}
.post-faq__a {
  color: var(--fg-soft);
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.65;
  margin: 0;
}

/* --- Línea de fuente al pie del artículo ----------------------------------- */
.post-source {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--fg-muted);
  line-height: 1.55;
}