/* Casos verticais: regras de negócio primeiro, prontas para pessoas e agentes. */
.vx-ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 30px; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--rule); }
.vx-ficha > div { background: #fff; padding: 14px 16px; }
.vx-ficha b { display: block; color: var(--ink-4); font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; }
.vx-ficha span { display: block; margin-top: 6px; color: var(--ink); font-size: 14px; line-height: 1.45; }
.vx-ficha .vx-seen { background: var(--brand-pale); }
.vx-ficha .vx-seen span { color: var(--brand-deep); font-family: var(--font-brand); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.vx-ficha .vx-seen small { display: block; margin-top: 3px; color: var(--brand); font-size: 12px; }
@media (max-width: 720px) { .vx-ficha { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .vx-ficha { grid-template-columns: 1fr; } }

.vx-agent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 14px; padding: 12px 16px; border: 1px dashed var(--rule-2); border-radius: 12px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.vx-agent b { color: var(--ink-2); }
.vx-agent a { font-family: var(--font-mono); font-size: 12px; color: var(--brand); border: 1px solid var(--brand-mint); border-radius: 100px; padding: 6px 12px; background: #fff; white-space: nowrap; }

.vx-rules { list-style: none; counter-reset: r; display: flex; flex-direction: column; gap: 0; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.vx-rules > li { counter-increment: r; position: relative; padding: 18px 0 18px 52px; border-bottom: 1px solid var(--rule); font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.vx-rules > li::before { content: "R" counter(r); position: absolute; left: 0; top: 18px; min-width: 34px; padding: 3px 0; border-radius: 7px; background: var(--ink); color: var(--lime); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; text-align: center; }
.vx-rules > li > b:first-child { color: var(--ink); }
.vx-rules .table-scroll { margin: 14px 0 4px; }
.content code { font-family: var(--font-mono); font-size: .86em; background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 5px; padding: 1px 5px; color: var(--ink); white-space: nowrap; }
.content td code { white-space: normal; word-break: break-word; }

.vx-traps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vx-trap { padding: 16px 18px; border: 1px solid #f0d9b5; border-radius: 14px; background: #fdf8ef; }
.vx-trap h3 { margin: 0 !important; color: var(--ink) !important; font-family: var(--font-brand); font-size: 16px !important; font-weight: 700; letter-spacing: -.01em; }
.vx-trap p { margin: 7px 0 0 !important; color: var(--ink-2); font-size: 14px !important; line-height: 1.55 !important; }
.vx-trap .vx-fix { color: var(--brand-deep); }
.vx-trap .vx-fix::before { content: "Como evitar: "; font-weight: 600; }
@media (max-width: 680px) { .vx-traps { grid-template-columns: 1fr; } }

.vx-proof { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--brand); background: var(--brand-pale); border-radius: 0 10px 10px 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.vx-proof b { color: var(--brand-deep); }

.vx-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vx-check li { position: relative; padding: 13px 16px 13px 46px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.vx-check li::before { content: ""; position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; border: 2px solid var(--brand); border-radius: 4px; }

.vx-ctx { margin-top: 6px; }
.vx-ctx .codewin-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #2a2a28; }
.vx-ctx .codewin-bar .file { margin-left: 8px; color: #c9c7c1; font-family: var(--font-mono); font-size: 12px; }
.vx-copy { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: #e1f96c; background: transparent; border: 1px solid #4a4a46; border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.vx-copy:hover { border-color: #e1f96c; }
.vx-ctx pre { white-space: pre-wrap; }
.vx-ctx .ph { color: #ffb27a; }

.vx-qs { display: flex; flex-direction: column; gap: 8px; }
.vx-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; font-size: 15.5px; color: var(--ink); line-height: 1.45; }
.vx-q button { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 7px; padding: 5px 9px; cursor: pointer; }
.vx-q button:hover, .vx-q button.done { color: var(--brand); border-color: var(--brand); background: #fff; }

.vx-grid2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vx-card { padding: 16px 18px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; }
.vx-card b { display: block; color: var(--brand); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.vx-card p { margin: 7px 0 0 !important; font-size: 14px !important; line-height: 1.55 !important; color: var(--ink-2); }
@media (max-width: 720px) { .vx-grid2 { grid-template-columns: 1fr; } }

.vx-rel { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-rel a, .vx-rel span { font-family: var(--font-mono); font-size: 12.5px; border: 1px solid var(--rule); border-radius: 100px; padding: 7px 13px; color: var(--ink-2); background: #fff; }
.vx-rel span { color: var(--ink-4); border-style: dashed; }
.vx-rel a:hover { border-color: var(--brand); color: var(--brand); }

/* Hub da indústria */
.vx-hub-head { padding-top: 52px; }
.vx-hub-head h1 { font-family: var(--font-brand); font-weight: 800; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.05; letter-spacing: -.035em; color: var(--ink); margin-top: 14px; }
.vx-hub-head p { font-size: 19px; line-height: 1.55; color: var(--ink-3); margin-top: 14px; max-width: 62ch; }
.vx-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px; }
.vx-stats div b { display: block; font-family: var(--font-brand); font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.vx-stats div span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); }
.vx-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.vx-item { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.vx-item .n { font-family: var(--font-brand); font-size: 22px; font-weight: 700; color: var(--brand); letter-spacing: -.02em; }
.vx-item .n small { display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.vx-item h3 { margin: 0; font-family: var(--font-brand); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.vx-item p { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); line-height: 1.45; }
.vx-item .st { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); border: 1px dashed var(--rule-2); border-radius: 100px; padding: 4px 10px; white-space: nowrap; }
a.vx-item:hover h3 { color: var(--brand); }
a.vx-item .st { color: var(--brand); border: 1px solid var(--brand-mint); background: var(--brand-pale); }
.vx-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vx-track .vx-card b::before { content: attr(data-step) " · "; }
@media (max-width: 720px) { .vx-track { grid-template-columns: 1fr; } .vx-item { grid-template-columns: 52px minmax(0, 1fr); } .vx-item .st { grid-column: 2; justify-self: start; } }

/* Tabelas de regra: quebram linha em vez de rolar */
.content .vx-table > table { min-width: 0; width: 100%; table-layout: auto; }
.content .vx-table th, .content .vx-table td { white-space: normal; vertical-align: top; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; }
.content .vx-table td code { white-space: normal; word-break: break-all; font-size: 12px; }
.content .vx-table td:first-child { font-family: var(--font-mono); font-size: 11.5px; min-width: 190px; }
.vx-item .vx-lvl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); line-height: 1.3; }
.vx-item .vx-lvl[data-l="Muito usado"] { color: var(--brand); }
.vx-item .vx-lvl[data-l="Comum"] { color: var(--ink-2); }
.vx-item { grid-template-columns: 96px minmax(0, 1fr) auto; }

/* ===== v2: resumo executivo + detalhado ===== */
.vx2 { background: var(--bg); }
.v2-in { max-width: 960px; margin: 0 auto; padding-inline: 24px; }
.v2-hero { padding-block: 40px 28px; }
.v2-crumb { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); }
.v2-crumb a { color: var(--ink-3); }
.v2-chip { display: inline-block; margin-top: 18px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); background: var(--brand-pale); border-radius: 100px; padding: 4px 11px; }
.v2-hero h1 { font-family: var(--font-brand); font-size: clamp(32px, 4.8vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 14px 0 0; color: var(--ink); text-wrap: balance; }
.v2-hook { font-size: 19px; line-height: 1.55; color: var(--ink-3); margin: 14px 0 0; max-width: 60ch; }
.v2-meta { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 1px; margin-top: 26px; background: var(--rule); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.v2-meta > div { background: #fff; padding: 12px 16px; }
.v2-meta b { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.v2-meta span { display: block; margin-top: 5px; font-size: 14px; color: var(--ink); }
.uso { display: inline-flex !important; align-items: center; gap: 5px; color: var(--brand); }
.uso i { display: inline-block; width: 18px; height: 6px; border-radius: 3px; background: currentColor; opacity: .18; }
.uso i.on { opacity: 1; }
.uso em { font-style: normal; font-weight: 600; margin-left: 4px; color: var(--ink); }
@media (max-width: 640px) { .v2-meta { grid-template-columns: 1fr; } }

.v2-switch-bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.v2-switch-bar .v2-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; flex-wrap: wrap; }
.v2-switch { display: inline-flex; padding: 4px; background: var(--bg-elev); border-radius: 12px; gap: 4px; }
.v2-switch a { padding: 8px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.v2-switch a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.v2-agentbtn { font-family: var(--font-mono); font-size: 12px; font-weight: 600; background: var(--ink); color: var(--lime); border: 0; border-radius: 9px; padding: 9px 14px; cursor: pointer; }

.v2-view { padding-block: 8px 24px; }
.v2-h { font-family: var(--font-brand); font-size: 24px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); margin: 44px 0 14px; }
.v2-sub { margin: -6px 0 16px; color: var(--ink-3); font-size: 15px; }
.v2-lead { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin: 36px 0 0; max-width: 68ch; }
.v2-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.v2-solves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v2-solves li { position: relative; padding: 14px 16px 14px 46px; background: #fff; border: 1px solid var(--rule); border-radius: 12px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.v2-solves li::before { content: "✓"; position: absolute; left: 16px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 11px; display: grid; place-items: center; font-weight: 700; }
.v2-why { margin-top: 44px; padding: 20px; border-radius: 16px; background: var(--ink); color: #e8e6e1; }
.v2-why b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
.v2-why p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) { .v2-two { grid-template-columns: 1fr; } .v2-why { margin-top: 0; } }

.v2-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v2-q { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; font-family: var(--font-brand); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); letter-spacing: -.01em; }
.v2-q::before { content: "“"; font-size: 30px; line-height: .5; color: var(--brand); }
.v2-q button { align-self: flex-start; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-3); background: var(--bg-elev); border: 1px solid var(--rule); border-radius: 7px; padding: 5px 9px; cursor: pointer; }
.v2-q button:hover { color: var(--brand); border-color: var(--brand); }
@media (max-width: 640px) { .v2-qs { grid-template-columns: 1fr; } }

.v2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 44px; }
.v2-box { padding: 20px; border: 1px solid var(--rule); border-radius: 16px; background: #fff; }
.v2-box h3 { margin: 0 0 10px; font-family: var(--font-brand); font-size: 18px; font-weight: 700; }
.v2-box ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.v2-box-get { background: var(--brand-pale); border-color: var(--brand-mint); }
@media (max-width: 640px) { .v2-cols { grid-template-columns: 1fr; } }

.v2-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v2-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v2-card { padding: 16px 18px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; }
.v2-card b { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.v2-card p { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 760px) { .v2-grid3, .v2-grid2 { grid-template-columns: 1fr; } }

.v2-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 44px; padding: 22px 24px; border: 1px solid var(--brand); border-radius: 18px; background: #fff; }
.v2-cta b { font-family: var(--font-brand); font-size: 20px; }
.v2-cta p { margin: 6px 0 0; max-width: 56ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.v2-cta-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-btn { display: inline-block; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; border: 1px solid var(--ink); cursor: pointer; }
.v2-btn-ghost { background: #fff; color: var(--ink); border-color: var(--rule); }
.v2-lime { background: var(--lime); color: var(--ink); border-color: var(--lime); font-size: 13px; padding: 8px 14px; }

.vx2 code { font-family: var(--font-mono); font-size: .85em; background: rgba(0,0,0,.055); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.v2-contrast-h { display: grid; grid-template-columns: 44px 1fr 1.3fr; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); padding-bottom: 8px; }
.v2-contrast { display: grid; grid-template-columns: 44px 1fr 1.3fr; border-top: 1px solid var(--rule); }
.v2-contrast .n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); padding: 16px 0; }
.v2-contrast .bad { padding: 16px 18px; background: #fbefed; color: #8a2d27; font-size: 14px; line-height: 1.5; }
.v2-contrast .bad::before { content: "✕  "; font-weight: 700; }
.v2-contrast .good { padding: 16px 18px; background: var(--brand-pale); }
.v2-contrast .good b { display: block; color: var(--ink); font-size: 15.5px; }
.v2-contrast .good p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 760px) { .v2-contrast, .v2-contrast-h { grid-template-columns: 1fr; } .v2-contrast-h { display: none; } .v2-contrast .n { padding: 10px 0 4px; } }

.v2-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.v2-map div { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
.v2-map b { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--ink-3); overflow-wrap: anywhere; }
.v2-map span { display: block; margin-top: 5px; font-family: var(--font-brand); font-size: 17px; font-weight: 700; color: var(--ink); }
.v2-map small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--brand); overflow-wrap: anywhere; }

.v2-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 2px solid var(--ink); }
.v2-defs div { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.v2-defs dt { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.v2-defs dd { margin: 3px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 640px) { .v2-defs { grid-template-columns: 1fr; } }

.v2-trap { padding: 16px 18px; border: 1px solid #f0d9b5; border-radius: 14px; background: #fdf8ef; }
.v2-trap b { font-family: var(--font-brand); font-size: 16px; color: var(--ink); }
.v2-trap p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.v2-trap .fix { color: var(--brand-deep); }
.v2-trap .fix::before { content: "Como evitar: "; font-weight: 600; }
.v2-proof { margin-top: 12px; padding: 14px 16px; border-left: 3px solid var(--brand); background: var(--brand-pale); border-radius: 0 10px 10px 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.v2-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v2-check li { position: relative; padding: 13px 16px 13px 46px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.v2-check li::before { content: ""; position: absolute; left: 16px; top: 15px; width: 15px; height: 15px; border: 2px solid var(--brand); border-radius: 4px; }

.v2-pack { border-radius: 18px; overflow: hidden; background: #1a1a19; border: 1px solid #2e2e2b; }
.v2-pack-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 10px 10px 0; border-bottom: 1px solid #2e2e2b; }
.v2-pack-tabs button, .v2-pack-tabs a { background: none; border: 0; color: #8f8e89; font-family: var(--font-mono); font-size: 12px; padding: 9px 12px; border-radius: 8px 8px 0 0; cursor: pointer; }
.v2-pack-tabs button.on { background: #262624; color: #fff; }
.v2-pack-tabs a { margin-left: auto; color: var(--lime); }
.v2-pane { margin: 0; padding: 18px 20px; max-height: 420px; overflow: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; color: #d8d6d0; }
.v2-pack-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #2e2e2b; }
.v2-pack-foot span { font-size: 12.5px; color: #8f8e89; }
.v2-related { padding-bottom: 60px; }
.v2-switch-bar { top: 64px; }
.v2-q:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ===== v3: mais visual, com ícones ===== */
.v3 .ic { flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.v3-hero { padding-block: 36px 30px; background: radial-gradient(120% 140% at 100% 0%, var(--brand-pale) 0%, transparent 55%), var(--bg); border-bottom: 1px solid var(--rule); }
.v3-hero-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); gap: 36px; align-items: end; }
.v3-tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 5px 12px 5px 5px; border-radius: 100px; background: #fff; border: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.v3-tag em { font-style: normal; color: var(--ink-4); }
.v3-tagi { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--lime); }
.v3-hero h1 { font-family: var(--font-brand); font-size: clamp(32px, 4.8vw, 50px); font-weight: 800; letter-spacing: -.035em; line-height: 1.03; margin: 14px 0 0; color: var(--ink); text-wrap: balance; }
.v3-facts { display: flex; flex-direction: column; gap: 8px; }
.v3-facts > div { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; }
.v3-fi { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-pale); color: var(--brand); }
.v3-facts b { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.v3-facts > div > span:last-child { font-size: 14px; color: var(--ink); line-height: 1.35; }
@media (max-width: 800px) { .v3-hero-in { grid-template-columns: 1fr; } }

.v2-switch a { display: inline-flex; align-items: center; gap: 7px; }
.v2-agentbtn { display: inline-flex; align-items: center; gap: 7px; }

.v3-h { display: flex; align-items: flex-start; gap: 12px; margin: 48px 0 16px; }
.v3-h h2 { margin: 0; font-family: var(--font-brand); font-size: 24px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); line-height: 1.2; }
.v3-h p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-3); }
.v3-hi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--lime); flex: 0 0 auto; }

.v3-flow { display: flex; align-items: stretch; gap: 0; margin-top: 34px; }
.v3-node { flex: 1 1 0; padding: 16px; background: #fff; border: 1px solid var(--rule); border-radius: 16px; }
.v3-ni { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-pale); color: var(--brand); margin-bottom: 10px; }
.v3-node:last-of-type .v3-ni { background: var(--lime); color: var(--ink); }
.v3-node b { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.v3-node p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink); font-weight: 500; }
.v3-arrow { display: grid; place-items: center; width: 28px; color: var(--ink-4); flex: 0 0 28px; }
@media (max-width: 760px) { .v3-flow { flex-direction: column; } .v3-arrow { transform: rotate(90deg); width: auto; height: 22px; flex-basis: 22px; } }

.v3-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v3-solve { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.v3-solve .v3-ii { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; flex: 0 0 auto; }
.v2-why { position: relative; }
.v3-whyi { color: var(--lime); margin-bottom: 8px; display: block; }
.v2-why b { display: block; }

.v3-chart { margin-top: 36px; padding: 22px 24px; background: #fff; border: 1px solid var(--rule); border-radius: 18px; }
.v3-chart-h { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.v3-chart-h b { font-family: var(--font-brand); font-size: 18px; color: var(--ink); }
.v3-chart-h p { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }
.v3-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-pale); border-radius: 100px; padding: 5px 10px; white-space: nowrap; }
.v3-bar { display: grid; grid-template-columns: 190px 1fr 70px; gap: 12px; align-items: center; padding: 7px 0; }
.v3-bar .l { font-size: 14px; color: var(--ink-2); }
.v3-bar .track { height: 18px; background: var(--bg-elev); border-radius: 6px; overflow: hidden; }
.v3-bar .track i { display: block; height: 100%; border-radius: 6px; }
.v3-bar .v { font-family: var(--font-mono); font-size: 13px; text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.v3-bad .track i { background: #d9534f; } .v3-warn .track i { background: var(--amber); } .v3-good .track i { background: var(--brand); }
.v3-good .l { font-weight: 600; color: var(--ink); }
.v3-chart-n { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--rule); font-size: 14px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 600px) { .v3-bar { grid-template-columns: 1fr 64px; } .v3-bar .track { grid-column: 1 / -1; grid-row: 2; } }

.v2-q { position: relative; }
.v2-q::before { content: none; }
.v3-qi { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-pale); color: var(--brand); }
.v2-q button { display: inline-flex; align-items: center; gap: 6px; }
.v2-q button.done { color: var(--brand); border-color: var(--brand); }

.v2-box h3 { display: flex; align-items: center; gap: 9px; }
.v2-box h3 .ic { color: var(--brand); }
.v3-li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.v3-li .v3-ii { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-elev); color: var(--ink-2); flex: 0 0 auto; margin-top: -3px; }
.v2-box-get .v3-li .v3-ii { background: #fff; color: var(--brand); }

.v3-act { padding: 18px; background: #fff; border: 1px solid var(--rule); border-radius: 16px; }
.v3-ai { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--ink); color: var(--lime); margin-bottom: 12px; }
.v3-var .v3-ai { background: var(--brand-pale); color: var(--brand); width: 40px; height: 40px; }
.v3-act b { display: block; font-family: var(--font-brand); font-size: 16px; color: var(--ink); }
.v3-act p { margin: 5px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.v2-cta { align-items: center; }
.v3-ctai { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--brand); color: var(--lime); flex: 0 0 auto; }
.v3-ctat { flex: 1 1 300px; }
.v2-btn { display: inline-flex; align-items: center; gap: 8px; }

.v3-problem { display: flex; gap: 14px; margin-top: 34px; padding: 20px 22px; border-radius: 16px; background: #fbefed; border: 1px solid #f2d3cf; }
.v3-pi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #d9534f; color: #fff; flex: 0 0 auto; }
.v3-problem b { font-family: var(--font-brand); font-size: 17px; color: #6e2520; }
.v3-problem p { margin: 5px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.v2-contrast-h span { display: inline-flex; align-items: center; gap: 6px; }
.v2-contrast .bad { display: flex; gap: 10px; align-items: flex-start; }
.v2-contrast .bad::before { content: none; }
.v3-xi { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d9534f; color: #fff; flex: 0 0 auto; margin-top: -1px; }
.v2-contrast .good { position: relative; padding-left: 50px; }
.v2-contrast .good::before { content: ""; position: absolute; left: 18px; top: 17px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat; }

.v3-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.v3-mapc { display: flex; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; }
.v3-mi { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-pale); color: var(--brand); flex: 0 0 auto; }
.v3-mapc b { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--ink-4); overflow-wrap: anywhere; line-height: 1.4; }
.v3-mapc span:not(.v3-mi) { display: block; margin-top: 3px; font-family: var(--font-brand); font-size: 16px; font-weight: 700; color: var(--ink); }
.v3-mapc small { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--brand); overflow-wrap: anywhere; }
.v3-mapc:last-child .v3-mi { background: var(--bg-elev); color: var(--ink-3); }

.v3-trh { display: flex; align-items: center; gap: 8px; color: #b26b00; }
.v2-trap .fix { display: flex; gap: 8px; align-items: flex-start; }
.v2-trap .fix::before { content: none; }
.v2-trap .fix .ic { margin-top: 3px; }
.v2-proof { display: flex; gap: 12px; align-items: flex-start; }
.v2-proof .ic { color: var(--brand); margin-top: 2px; }
.v2-pack-tabs button, .v2-pack-tabs a { display: inline-flex; align-items: center; gap: 7px; }

/* Uso: barras verticais crescentes, cor por nível */
.v3-uso { display: inline-flex !important; align-items: flex-end; gap: 9px; }
.v3-uso em { font-style: normal; font-weight: 600; color: var(--ink); line-height: 1; }
.v3-sig { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.v3-sig i { display: block; width: 6px; border-radius: 2px; background: var(--bg-deep); }
.v3-sig i:nth-child(1) { height: 7px; } .v3-sig i:nth-child(2) { height: 12px; } .v3-sig i:nth-child(3) { height: 18px; }
.v3-sig-1 i.on { background: #e1a33e; }
.v3-sig-2 i.on { background: #3963ee; }
.v3-sig-3 i.on { background: #097860; }

/* Sem faixas: hero se dissolve no fundo e o seletor flutua */
.v3-hero { border-bottom: 0; padding-bottom: 8px; }
.v2-switch-bar { background: transparent; backdrop-filter: none; border-bottom: 0; pointer-events: none; padding-top: 10px; }
.v2-switch-bar .v2-in { pointer-events: none; }
.v2-switch-bar .v2-switch, .v2-switch-bar .v2-agentbtn { pointer-events: auto; }
.v2-switch { background: #fff; border: 1px solid var(--rule); box-shadow: 0 10px 28px -18px rgba(26,26,25,.45); }
.v2-switch a.on { background: var(--ink); color: #fff; box-shadow: none; }
.v2-agentbtn { box-shadow: 0 10px 28px -16px rgba(26,26,25,.6); }
.v2-switch-bar { background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 72%, rgba(250,249,247,0) 100%); padding-bottom: 18px; }

/* ===== Hubs de indústria ===== */
.v3-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.v3-legend span { display: inline-flex; align-items: flex-end; gap: 8px; }
.v3-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v3-pick { display: flex; flex-direction: column; padding: 20px; background: #fff; border: 1px solid var(--rule); border-radius: 18px; color: var(--ink); transition: border-color .15s, transform .15s; }
.v3-pick:hover { border-color: var(--brand); transform: translateY(-2px); }
.v3-pick b { font-family: var(--font-brand); font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
.v3-pick p { margin: 8px 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-3); flex: 1; }
.v3-go { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--brand); }
@media (max-width: 820px) { .v3-picks { grid-template-columns: 1fr; } }
.v3-rows { display: flex; flex-direction: column; gap: 8px; padding-bottom: 60px; }
.v3-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; color: var(--ink); }
.v3-row:not(.ready) { background: transparent; border-style: dashed; }
.v3-row.ready:hover { border-color: var(--brand); }
.v3-rl { display: inline-flex; align-items: flex-end; gap: 8px; }
.v3-rl em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); line-height: 1; }
.v3-rt b { display: block; font-family: var(--font-brand); font-size: 16px; }
.v3-rt span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-3); }
.v3-rs { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.v3-row.ready .v3-rs { color: var(--brand); font-weight: 600; }
@media (max-width: 700px) { .v3-row { grid-template-columns: 1fr; gap: 6px; } }
.v3-inds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-block: 34px 60px; }
.v3-ind { display: flex; flex-direction: column; padding: 22px; background: #fff; border: 1px solid var(--rule); border-radius: 18px; color: var(--ink); transition: border-color .15s, transform .15s; }
.v3-ind:hover { border-color: var(--brand); transform: translateY(-2px); }
.v3-ind b { font-family: var(--font-brand); font-size: 20px; letter-spacing: -.015em; }
.v3-ind p { margin: 8px 0 16px; font-size: 14px; line-height: 1.5; color: var(--ink-3); flex: 1; }
.v3-cnt { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); }
.v3-cnt em { font-style: normal; color: var(--brand); font-weight: 600; }
@media (max-width: 860px) { .v3-inds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .v3-inds { grid-template-columns: 1fr; } }

/* Hub: os mais usados em destaque */
.v3-bigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3-row.big { grid-template-columns: 1fr; gap: 10px; align-content: start; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--rule); border-style: solid; border-radius: 18px; box-shadow: 0 18px 40px -34px rgba(26,26,25,.5); }
.v3-row.big .v3-rt b { font-size: 19px; letter-spacing: -.015em; line-height: 1.25; }
.v3-row.big .v3-rt span { font-size: 14.5px; margin-top: 5px; }
.v3-row.big .v3-rs { margin-top: 4px; }
.v3-row.big.ready { border-color: var(--brand-mint); background: linear-gradient(160deg, var(--brand-pale), #fff 55%); }
.v3-row.big.ready:hover { border-color: var(--brand); transform: translateY(-2px); }
.v3-row.big { transition: border-color .15s, transform .15s; }
.v3-rows .v3-row { padding: 11px 16px; }
@media (max-width: 700px) { .v3-bigs { grid-template-columns: 1fr; } }
.v3-row { grid-template-columns: minmax(0, 1fr) auto; }
.v3-row.big { grid-template-columns: 1fr; }
.v3-bigs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .v3-bigs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .v3-bigs { grid-template-columns: 1fr; } }

/* No celular, só a marca, o botão e o seletor de idioma cabem no topo. */
@media (max-width: 520px) { .header-nav a.mono { display: none; } }

/* Selo de caso testado com agente, abaixo do hook. */
.v3-tested { display: inline-flex; align-items: center; gap: 8px; cursor: help; margin-top: 14px; padding: 6px 12px 6px 8px; border: 1px solid var(--brand-mint); border-radius: 999px; background: var(--brand-pale); color: var(--brand-deep); font-size: 12.5px; line-height: 1.35; }
.v3-tested .ic { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--brand); color: #fff; }
.v3-tested b { font-weight: 600; }
.v3-tested span { color: var(--ink-3); }