/* ══ ruktu.com — prosa y muebles de página ══
   Solo lo cargan las páginas de servicio y el blog; la home no lo necesita.

   El reset global de styles.css hace dos cosas que sirven para una landing de
   componentes y estorban para texto largo: `* { margin: 0 }` elimina el espacio
   entre párrafos, y `a { color: inherit; text-decoration: none }` deja los
   enlaces en el cuerpo del texto indistinguibles del texto. Aquí se corrigen
   ambas, pero SIEMPRE bajo .prose, para no mover ni un pixel de la home ni de
   los componentes (.product-card, .feature-list, .step, .contact-box). */

/* ── muebles de página ────────────────────────────────────────────── */

/* La nav mide 64px y es fija. En la home lo compensa .hero; aquí, .page. */
.page { padding-top: 64px; }

/* Con scroll-behavior:smooth y sin esto, cada ancla aterriza bajo la nav. */
html { scroll-padding-top: 80px; }
:target { scroll-margin-top: 80px; }

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 1.2rem;
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.45rem; color: var(--border-strong); }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--primary-soft); }
.breadcrumb [aria-current="page"] { color: var(--text); }

.page-title {
  font-size: clamp(1.9rem, 5vw, 3rem);
  margin-bottom: 0.9rem;
}
.page-lede {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 62ch;
  margin-bottom: 2rem;
}

/* ── el cuerpo del texto ──────────────────────────────────────────── */

.prose {
  max-width: 68ch;
  line-height: 1.75;
  font-size: 1.05rem;
  color: var(--text-dim);
}

/* El antídoto a `* { margin: 0 }`. Una sola regla devuelve el ritmo a todos
   los elementos sin tocar el reset, así que nada más del sitio se mueve. */
.prose > * + * { margin-top: 1.1em; }

.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose em { font-style: italic; }

/* h4/h5/h6 no tienen tipografía display en ninguna parte del sitio: la regla
   base solo cubre h1,h2,h3. Un post y un bloque de preguntas necesitan ambos. */
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.prose h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin-top: 2.4em; }
.prose h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); margin-top: 2em; }
.prose h4 { font-size: 1.08rem; margin-top: 1.8em; }
.prose h5, .prose h6 { font-size: 1rem; margin-top: 1.6em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

/* Sin esto los enlaces del cuerpo son invisibles, y con ellos se cae el
   enlazado interno del que depende toda la arquitectura del sitio. */
.prose a {
  color: var(--primary-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s;
}
.prose a:hover { color: var(--primary-faint); }

/* El reset pone padding:0, así que los marcadores se salen del contenedor. */
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--primary-soft); }
.prose li + li { margin-top: 0.5em; }
.prose li > ul, .prose li > ol { margin-top: 0.5em; }

.prose blockquote {
  border-left: 3px solid var(--border-strong);
  padding-left: 1.1rem;
  color: var(--text);
  font-style: italic;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}
.prose pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.prose pre code { background: none; border: 0; padding: 0; font-size: 0.88rem; }

/* El global ya da max-width:100% y display:block. Aquí solo el acabado.
   Toda imagen en prosa debe llevar width y height explícitos: no hay ninguna
   otra protección contra saltos de layout en el sitio. */
.prose img { border-radius: var(--radius-sm); border: 1px solid var(--border); }
.prose figure { margin-top: 1.6em; }
.prose figcaption {
  font-size: 0.85rem;
  color: var(--text-faint);
  text-align: center;
  margin-top: 0.6rem;
}

/* Aquí caen las tablas de precios. */
.prose .table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.prose th { color: var(--text); font-family: var(--font-display); font-weight: 600; }
.prose tbody tr:last-child td { border-bottom: 0; }

.prose hr { border: 0; border-top: 1px solid var(--border); margin-top: 2.4em; }

/* ── bloque de precios ────────────────────────────────────────────── */
/* Solo aparece cuando hay cifras reales que mostrar. */

.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3.5vw, 2rem);
}
.price-card .price-from {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--text);
}
.price-card .price-note { color: var(--text-faint); font-size: 0.88rem; margin-top: 0.5rem; }

/* ── índice del blog ──────────────────────────────────────────────── */

.post-grid { display: grid; gap: 1.2rem; }

.post-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--glow);
}
.post-card h2, .post-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.post-card p { color: var(--text-dim); font-size: 0.95rem; }

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.post-meta > * + *::before { content: "·"; margin-right: 0.5rem; color: var(--border-strong); }

/* ── fila de enlaces del footer ───────────────────────────────────── */
/* La columna vertebral del enlazado interno: cada página apunta a las demás. */

.footer-links { color: var(--text-faint); }
.footer-links a { color: var(--primary-soft); }
.footer-links a:hover { text-decoration: underline; }

/* ── enlace de idioma en páginas sin i18n.js ──────────────────────── */
/* Deliberadamente NO usa .lang-switch: si esta página cargara i18n.js, el
   script le reescribiría el texto y le colgaría un manejador que pelearía con
   el enlace. Los estilos se comparten desde styles.css. */

/* ── el único breakpoint real del sitio ───────────────────────────── */

@media (min-width: 768px) {
  .prose { font-size: 1.08rem; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── enlace de tarjeta a su página de servicio ────────────────────── */
/* Lo usa la home: es lo que la convierte en hub y lo que pasa autoridad
   a las páginas de servicio. Vive aquí porque index.html ya carga prose.css. */

.card-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary-soft);
  transition: color 0.2s, transform 0.2s;
}
.card-link:hover { color: var(--primary-faint); transform: translateX(3px); }