/* ============================================================
   For agents — agents.html · componentes scoped bajo .fsq-agents
   SIN estilos externos: todo se construye con los tokens del sistema
   (tokens.css) y hereda el tema claro/oscuro de cada sección vía
   variables (--bg-elevated, --line, --text, --text-muted, --accent…).
   ============================================================ */

/* — Trust pills (hero, sobre oscuro) — */
.fsq-agents .trust-row { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-8); }
.fsq-agents .trust-pill { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-caption); color: var(--text-muted); }
.fsq-agents .trust-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* — Fee tiers — */
.fsq-agents .fee-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); }
@media (max-width: 640px) { .fsq-agents .fee-tiers { grid-template-columns: 1fr; } }
.fsq-agents .fee-tier {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-6); text-align: center;
  box-shadow: var(--shadow-soft);
}
.fsq-agents .fee-tier--mid { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fsq-agents .fee-tier__size { font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: var(--sp-3); line-height: 1.4; }
.fsq-agents .fee-tier__amt { font-family: var(--font-display); font-weight: 600; font-size: 2.1rem; line-height: 1; color: var(--accent); letter-spacing: -.02em; }
.fsq-agents .fee-tier__when { font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--sp-2); }
.fsq-agents .fee-foot { margin-top: var(--sp-5); font-size: .95rem; color: var(--text-muted); max-width: var(--measure); }

/* — Grids de tarjetas (who / what) — */
.fsq-agents .ag-grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.fsq-agents .ag-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fsq-agents .ag-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .fsq-agents .ag-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fsq-agents .ag-grid--4, .fsq-agents .ag-grid--2 { grid-template-columns: 1fr; } }
.fsq-agents .ag-card {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow-soft);
}
.fsq-agents .ag-card__label { font-size: var(--fs-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-violet-text); margin-bottom: var(--sp-2); }
.fsq-agents .ag-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: var(--sp-2); line-height: 1.25; }
.fsq-agents .ag-card p { color: var(--text-muted); font-size: .95rem; max-width: none; }
.fsq-agents .ag-card__icon { width: 26px; height: 26px; margin-bottom: var(--sp-3); }
.fsq-agents .ag-card__icon svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* — How it works (pasos) — */
.fsq-agents .ag-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); margin-top: var(--sp-8); }
@media (max-width: 760px) { .fsq-agents .ag-steps { grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-6); } }
@media (max-width: 480px) { .fsq-agents .ag-steps { grid-template-columns: 1fr; } }
.fsq-agents .ag-step__num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--accent); margin-bottom: var(--sp-3); }
.fsq-agents .ag-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: var(--sp-2); line-height: 1.25; }
.fsq-agents .ag-step p { color: var(--text-muted); font-size: .95rem; max-width: none; }

/* — Callout (notas: notificación al dueño, Article 4) — */
.fsq-agents .ag-note {
  margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6);
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-left: 3px solid var(--c-slate); border-radius: var(--radius);
  font-size: .98rem; color: var(--text-muted); line-height: 1.7; max-width: none;
}
.fsq-agents .ag-note strong { color: var(--text); font-family: var(--font-display); font-weight: 600; }

/* — Lead de sección con ancho de medida cómoda — */
.fsq-agents .ag-intro { margin-top: var(--sp-4); }

/* — Formulario de agente (sección .fsq-submit.agents-form): todos los campos
   obligatorios → asterisco en las labels de campo (no en los checkboxes de consentimiento). */
.agents-form .field > label::after { content: " *"; color: var(--accent); }
.agents-form .field--optional > label::after { content: none; }