/* ── Hero de caso de uso + ventana del agente (chat simulado) ───────────── */
.mb-usecase { padding: 80px 0; }
.mb-usecase + .mb-usecase { padding-top: 0; }
.mb-usecase-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }
.mb-usecase-copy { position: sticky; top: 120px; }
.mb-usecase-grid > * { min-width: 0; }
.mb-agent { min-width: 0; max-width: 100%; }
.mb-usecase--left .mb-usecase-copy { order: 2; }
.mb-usecase-eyebrow { display: inline-block; font: 600 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase; color: var(--mb-accent); margin-bottom: 16px; }
.mb-usecase-copy h2 { font: 700 clamp(28px, 3.2vw, 44px)/1.08 var(--default-font, "Manrope", sans-serif); letter-spacing: -.03em; color: var(--primary-color, #fff); margin: 0 0 18px; }
.mb-usecase-copy h2 span { color: var(--mb-accent); }
.mb-usecase-copy p { font-size: 16px; line-height: 1.6; color: var(--text-color, #a7aabb); margin: 0; max-width: 48ch; }
.mb-usecase-copy .btn-default { margin-top: 24px; }

.mb-agent {
  --ag-bg: #0b0b0c; --ag-ink: #f4f2ee; --ag-mute: #9a9da9; --ag-line: rgba(255,255,255,.09); --ag-cyan: #0ad5ff; --ag-red: #ff4a3d; --ag-green: #39d98a;
  background: var(--ag-bg); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden;
  color: var(--ag-ink); font-family: var(--default-font, "Manrope", sans-serif);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.9);
}
.mb-agent-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ag-line); background: rgba(255,255,255,.02); }
.mb-agent-dots { display: inline-flex; gap: 6px; }
.mb-agent-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.mb-agent-dots i:nth-child(2) { background: #febc2e; } .mb-agent-dots i:nth-child(3) { background: #28c840; }
.mb-agent-name { font-weight: 600; font-size: 14px; }
.mb-agent-replay { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--ag-line); background: transparent; color: var(--ag-mute); cursor: pointer; opacity: 0; transition: opacity .3s, color .2s; }
.mb-agent.is-done .mb-agent-replay { opacity: 1; }
.mb-agent-replay:hover { color: #fff; }
.mb-agent-model { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--ag-line); border-radius: 999px; font: 600 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .04em; }
.mb-agent-model i { width: 7px; height: 7px; border-radius: 50%; background: var(--ag-green); box-shadow: 0 0 8px var(--ag-green); }
.mb-agent-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.mb-agent [data-step] { animation: mb-blockin .35s ease both; }
.mb-agent [data-step].is-pending { display: none; }
@keyframes mb-blockin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mb-agent-q { align-self: flex-end; max-width: 86%; padding: 11px 14px; border-radius: 14px 14px 3px 14px; background: rgba(255,255,255,.1); font-size: 14.5px; line-height: 1.45; }
.mb-agent-censored { padding: 10px 12px; border: 1px solid rgba(10,213,255,.25); background: rgba(10,213,255,.06); border-radius: 12px; }
.mb-agent-censored-note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #bfeeff; }
.mb-agent-entities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mb-agent-entity { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 8px; background: rgba(0,0,0,.35); font-size: 11.5px; }
.mb-agent-entity b { font: 600 10px/1 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ag-mute); }
.mb-agent-entity s { color: #ff8f86; text-decoration-color: rgba(255,74,61,.9); }
.mb-agent-entity code { font: 500 11px/1 var(--mono, ui-monospace, monospace); color: var(--ag-cyan); }
.mb-agent-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ag-mute); }
.mb-agent-status-tools { opacity: .8; }
.mb-agent-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--ag-cyan); animation: mb-spin 1s linear infinite; }
.mb-agent-status.is-done .mb-agent-spinner { animation: none; border: 0; background: var(--ag-green); position: relative; }
.mb-agent-status.is-done .mb-agent-spinner::after { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3px; height: 6px; border: solid #0b0b0c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes mb-spin { to { transform: rotate(360deg); } }
.mb-agent-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-agent-tools:empty { display: none; }
.mb-agent-tool { display: inline-flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--ag-line); border-radius: 10px; background: rgba(255,255,255,.03); }
.mb-agent-tool-ic { color: var(--ag-cyan); margin-top: 1px; }
.mb-agent-tool-txt { display: flex; flex-direction: column; gap: 2px; }
.mb-agent-tool-txt b { font-size: 12px; font-weight: 600; }
.mb-agent-tool-txt em { font-style: normal; font-size: 11px; color: var(--ag-mute); }
.mb-agent-tool-txt code { font: 500 11px/1.3 var(--mono, ui-monospace, monospace); color: #bfeeff; }
.mb-agent-a { margin: 0; font-size: 15px; line-height: 1.55; min-height: 1.5em; }
.mb-agent-a.is-typing::after { content: "▍"; color: var(--ag-cyan); animation: mb-caret 1s steps(1) infinite; }
@keyframes mb-caret { 50% { opacity: 0; } }
.mb-agent-table { overflow-x: auto; border: 1px solid var(--ag-line); border-radius: 12px; }
.mb-agent-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mb-agent-table th { font: 600 10.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--ag-mute); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ag-line); white-space: nowrap; }
.mb-agent-table td { padding: 9px 12px; border-bottom: 1px solid var(--ag-line); white-space: nowrap; }
.mb-agent-table tr:last-child td { border-bottom: 0; }
.mb-agent-st { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 11px/1 var(--mono, ui-monospace, monospace); background: rgba(255,74,61,.15); color: var(--ag-red); }
.is-fixed .mb-agent-st, .is-ok .mb-agent-st { background: rgba(57,217,138,.15); color: var(--ag-green); }
.mb-agent-table td.mb-agent-st { display: table-cell; width: 20px; border-radius: 0; background: transparent; }
.mb-agent-table td.mb-agent-st::before { content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,74,61,.15); }
.mb-agent-table tr.is-fixed td.mb-agent-st::before { content: "✓"; background: rgba(57,217,138,.15); }
.mb-agent-table td.mb-agent-st { font-size: 0; }
.mb-agent-table td.mb-agent-st::before { font-size: 11px; }
.mb-agent-table tr.is-fixed td.mb-agent-st::before { color: var(--ag-green); }
.mb-agent-state { color: var(--ag-red); font: 600 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .06em; }
.is-fixed .mb-agent-state { color: var(--ag-green); }
.mb-agent-code { margin: 0; padding: 12px 14px; border-left: 2px solid var(--ag-cyan); border-radius: 0 10px 10px 0; background: #121214; overflow-x: auto; font: 500 12px/1.6 var(--mono, ui-monospace, monospace); color: #cfe9ff; white-space: pre; }
.mb-agent-coverage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.mb-agent-coverage li { display: flex; align-items: center; gap: 10px; }
.mb-agent-coverage li span:last-child { color: var(--ag-mute); }
.mb-agent-rule { padding: 12px 14px; border: 1px solid var(--ag-line); border-radius: 12px; background: rgba(255,255,255,.03); }
.mb-agent-rule p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.mb-agent-rule dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin: 0; }
.mb-agent-rule dl div { display: flex; gap: 8px; font-size: 12.5px; }
.mb-agent-rule dt { font: 600 10px/1.6 var(--mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ag-mute); }
.mb-agent-rule dd { margin: 0; }
.mb-agent-verdict { padding: 12px 14px; border: 1px solid rgba(255,74,61,.3); background: rgba(255,74,61,.07); border-radius: 12px; }
.mb-agent-verdict p { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: #ffd9d6; }
.mb-agent-verdict svg { flex: none; margin-top: 2px; color: var(--ag-red); }
.mb-agent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-agent-actions button { appearance: none; cursor: default; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--ag-ink); font: 600 12.5px/1 var(--default-font, "Manrope", sans-serif); }
.mb-agent-actions button.is-primary { background: #fff; color: #0a0a0a; border-color: #fff; }
.mb-agent-report { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px; border: 1px solid var(--ag-line); border-radius: 12px; background: rgba(255,255,255,.03); }
.mb-agent-doc { position: relative; width: 96px; height: 124px; border-radius: 4px; background: #fff; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 24px -10px rgba(0,0,0,.8); }
.mb-agent-doc-badge { align-self: flex-start; font: 700 6.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; color: #b45309; border: 1px solid #f59e0b; padding: 2px 3px; border-radius: 2px; margin-bottom: 4px; }
.mb-agent-doc i { display: block; height: 3px; border-radius: 2px; background: #c7c9d1; }
.mb-agent-doc i:first-of-type { background: #0a0a0a; height: 4px; width: 70%; }
.mb-agent-doc i:nth-of-type(3) { width: 85%; } .mb-agent-doc i:nth-of-type(5) { width: 60%; }
.mb-agent-doc-pages { margin-top: auto; font: 500 6.5px/1 var(--mono, ui-monospace, monospace); color: #9a9da9; }
.mb-agent-report-txt h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #fff; }
.mb-agent-report-txt ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ag-mute); }
.mb-agent-download { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 14px; border-radius: 999px; background: #fff; color: #0a0a0a !important; font: 600 12.5px/1 var(--mono, ui-monospace, monospace); text-decoration: none; transition: background .2s; }
.mb-agent-download:hover { background: var(--ag-cyan); }

@media (max-width: 991px) {
  .mb-usecase { padding: 56px 0; }
  .mb-usecase-grid { grid-template-columns: 1fr; gap: 24px; }
  .mb-usecase--left .mb-usecase-copy { order: 0; }
  .mb-usecase-copy { position: static; }
  .mb-usecase-copy p { max-width: none; }
}
@media (max-width: 575px) {
  .mb-agent-body { padding: 14px 12px 16px; }
  .mb-agent-q { max-width: 100%; font-size: 13.5px; }
  .mb-agent-a { font-size: 14px; }
  .mb-agent-table table { font-size: 12px; }
  .mb-agent-rule dl { grid-template-columns: 1fr; }
  .mb-agent-report { grid-template-columns: 1fr; }
  .mb-agent-doc { width: 80px; height: 104px; }
  .mb-agent-model { display: none; }
}