/* ==========================================================================
   Paradarum CDN — guías / guides
   Estilos de artículo sobre los tokens de styles.css (se carga después).
   Páginas estáticas por idioma: sin i18n.js, sin JS de scroll.
   ========================================================================== */

/* Nav de guía: hairline siempre visible (no hay main.js en estas páginas) */
.nav.static-line { border-bottom-color: var(--line); }

/* Enlace a la versión en el otro idioma (nav) */
.lang-alt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 4px 6px;
  border-radius: var(--r-sm);
}
.lang-alt:hover { color: var(--ink); }

/* ---- Artículo ----------------------------------------------------------- */
.guide-main { padding-block: 56px 96px; }
@media (min-width: 900px) { .guide-main { padding-block: 72px 128px; } }

.guide-article { max-width: 720px; }

.guide-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 2.25rem;
}
.guide-back:hover { color: var(--coral); }

.guide-article h1 {
  font-size: clamp(2.125rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  margin-bottom: 0.5em;
}
.guide-intro {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 38em;
  margin-bottom: 2.5rem;
}
.guide-article h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  margin: 2.4em 0 0.6em;
}
.guide-article h3 { font-size: 1.1875rem; margin: 1.8em 0 0.5em; }
.guide-article ul, .guide-article ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.guide-article li { margin-bottom: 0.5em; }
.guide-article li::marker { color: var(--ink-soft); }

/* Código inline y bloques (los bloques reutilizan .snippet-dark) */
.guide-article code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  overflow-wrap: anywhere;
}
.guide-article .snippet-dark { margin: 1.4rem 0 1.6rem; }
.guide-article .snippet-dark code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

/* Nota: hairline, sin colorines */
.guide-note {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  margin: 1.4rem 0 1.6rem;
  font-size: 0.9375rem;
}
.guide-note p { margin: 0; }
.guide-note .k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

/* Tablas pequeñas (planes, qué cachear) — scrollean dentro, la página no */
.guide-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  overflow-x: auto;
  margin: 1.4rem 0 1.6rem;
}
.guide-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.guide-table th, .guide-table td {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.guide-table thead th {
  border-top: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.guide-table tbody th[scope="row"] {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.guide-table td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* CTA sobrio al final del artículo */
.guide-cta {
  margin-top: 4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 30px;
}
.guide-cta h2 { font-size: 1.375rem; margin: 0 0 0.35em; }
.guide-cta p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0 0 1.25em; }
.guide-cta .hero-note { color: var(--ink-soft); margin-top: 0.9rem; }

/* Enlaces a la documentación relacionada */
.guide-docs { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1.75rem; }
.guide-docs h2 {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 0.9em;
}
.guide-docs ul { list-style: none; margin: 0; padding: 0; }
.guide-docs li { margin-bottom: 0.6em; }
.guide-docs .doc-note { color: var(--ink-soft); }

/* ---- Listado de guías (guias/index.html · guides/index.html) ------------ */
.guide-list { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 16px; }
.guide-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 28px 24px;
}
.guide-card .cap-label { margin-bottom: 8px; }
.guide-card h2 { font-size: 1.375rem; margin: 0 0 0.4em; }
.guide-card h2 a { color: var(--ink); }
.guide-card h2 a:hover { color: var(--coral); }
.guide-card p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }

.guide-lang-note {
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* ---- Footer mínimo ------------------------------------------------------- */
.guide-footer .footer-bottom { border-top: 0; padding-top: 0; }