/* El texto largo de las herramientas gratis — spec 0824.
 *
 * La planilla de Excel (0824) y, desde la 0825, la orden de reparación y el
 * presupuesto llevan debajo un texto que explica el oficio y sus preguntas
 * frecuentes. Es UNA sola disposición para las tres páginas (regla 1.9): un
 * artículo angosto, legible, con los controles y la tarjeta del sistema.
 * Cero hex: todo sale de tokens.css. Sin franjas de color al costado (regla
 * del dueño): las preguntas se separan con el divisor neutro de 1 px.
 */

.gu-articulo {
  max-width: 1200px; margin: 0 auto;
  padding: 0 var(--tc-space-32) var(--tc-space-64);
}
.gu-cuerpo { max-width: 760px; display: flex; flex-direction: column; gap: var(--tc-space-32); }
.gu-seccion { display: flex; flex-direction: column; gap: var(--tc-space-12); }
.gu-seccion h2 {
  margin: 0; font-size: var(--tc-fs-h1); line-height: 1.3; letter-spacing: -0.01em;
  font-weight: var(--tc-weight-600); color: var(--tc-text);
}
.gu-seccion h3 { margin: var(--tc-space-8) 0 0; font-size: var(--tc-fs-h3); font-weight: var(--tc-weight-600); color: var(--tc-text); }
.gu-seccion p, .gu-seccion li { margin: 0; color: var(--tc-text); line-height: 1.7; }
.gu-seccion ul, .gu-seccion ol { margin: 0; padding-left: var(--tc-space-24); display: flex; flex-direction: column; gap: var(--tc-space-8); }
.gu-seccion a:not(.tc-btn) { color: var(--tc-primary-text); text-decoration: underline; text-underline-offset: 2px; }
.gu-articulo .tc-btn, .gu-descarga .tc-btn { text-decoration: none; }

/* La lista de columnas de la planilla: término y para qué sirve. */
.gu-columnas { margin: 0; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); border-top: 1px solid var(--tc-border); }
.gu-columnas dt, .gu-columnas dd { margin: 0; padding: var(--tc-space-8) 0; border-bottom: 1px solid var(--tc-border); line-height: 1.6; }
.gu-columnas dt { font-weight: var(--tc-weight-600); padding-right: var(--tc-space-16); }
.gu-columnas dd { color: var(--tc-text-muted); }

/* Las preguntas frecuentes: <details> nativo, sin JavaScript. */
.gu-preguntas { border-top: 1px solid var(--tc-border); }
.gu-preguntas details { border-bottom: 1px solid var(--tc-border); }
.gu-preguntas summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tc-space-16);
  min-height: var(--tc-touch-min); padding: var(--tc-space-12) 0;
  font-weight: var(--tc-weight-600); cursor: pointer; list-style: none;
}
.gu-preguntas summary::-webkit-details-marker { display: none; }
.gu-preguntas summary::after { content: "+"; font-size: var(--tc-fs-h2); color: var(--tc-text-muted); }
.gu-preguntas details[open] summary::after { content: "−"; }
.gu-preguntas details p { margin: 0 0 var(--tc-space-16); color: var(--tc-text); line-height: 1.7; }

/* La descarga, arriba, con la acción principal de la página. */
.gu-descarga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tc-space-12); }
.gu-descarga .tc-btn { min-height: var(--tc-touch-min); }

@media (max-width: 767px) {
  .gu-articulo { padding: 0 var(--tc-space-16) var(--tc-space-48); }
  .gu-columnas { grid-template-columns: minmax(0, 1fr); }
  .gu-columnas dt { border-bottom: 0; padding-bottom: 0; }
  .gu-descarga .tc-btn { width: 100%; }
}

/* Debajo de una herramienta (orden y presupuesto, spec 0825). En el teléfono la
 * barra fija de abajo (.pp-barra) tapaba el último renglón del texto (medido:
 * el último ítem terminaba en 796 y la barra empezaba en 771): el mismo margen
 * de 120 px que ya deja el formulario. Y al imprimir sale sólo la hoja: el
 * texto no va en la orden ni en el presupuesto del cliente. */
@media (max-width: 900px) {
  .gu-articulo--herramienta { padding-bottom: 120px; }
}
@media print {
  .gu-articulo--herramienta { display: none; }
}