/* ---------- 6. O ESPECIALISTA ---------- */
.k { color: var(--ink); font-weight: 560; }
mark.hl2 { background: var(--accent-soft); color: inherit; padding: .05em .25em; border-radius: .25em; }

.spec { position: relative; padding-top: var(--s-9); }
.spec .sec-head { margin-bottom: var(--s-8); }

/* chatbot x agente */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.vs-col { display: grid; justify-items: center; gap: var(--s-6); }
.vs-who { display: grid; justify-items: center; gap: var(--s-3); text-align: center; font-size: var(--t-lg); color: var(--ink-2); max-width: 22rem; }
.vs-tag { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ink-3); border-radius: 999px; padding: .2rem .75rem; }
.vs-tag.good { color: var(--accent); border-color: var(--accent); }
.vs-who b { color: var(--ink); }
.vs-who .g { color: var(--accent); }
.phone-s { width: min(18.5rem, 100%); height: 40rem; min-height: 0; }
.sys-chip.stuck { background: var(--danger-soft); color: var(--danger); }
.vs-punch-wrap { padding: var(--s-9) 0 var(--s-8); text-align: center; }
.vs-punch { font-size: clamp(2rem, 1.3rem + 3.4vw, 4rem); }

/* seis capacidades: linhas editoriais, sem cartões */
.caps-wrap { padding-bottom: var(--s-9); }
.cap-intro { display: flex; align-items: center; gap: var(--s-4); justify-content: center; margin-bottom: var(--s-7); font-size: var(--t-lg); color: var(--ink-2); }
.cap-intro .dots { color: var(--accent); }
.caps { display: grid; }
.cap { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.cap::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.cap:last-child { border-bottom: 1px solid var(--line); }
.cap-head { display: flex; align-items: baseline; gap: var(--s-5); }
.cap-n { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; letter-spacing: -.04em; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color var(--d-slow) ease; }
.cap h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--t-h3); line-height: 1.1; }
.cap-body { display: grid; gap: var(--s-4); color: var(--ink-2); }
.cap-body p { text-wrap: pretty; max-width: 38rem; }
.cap-body b { color: var(--ink); }
.cap-body .g { color: var(--accent); }
.cap-body .resolve { color: var(--ink-2); padding-top: var(--s-2); }
.cap-body .resolve b { color: var(--accent); }
@media (hover: hover) { .cap:hover::after { transform: scaleX(1); } .cap:hover .cap-n { color: var(--accent); } }
.closing { text-align: center; margin: var(--s-9) auto 0; max-width: 18em; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); }

/* multimídia */
.mm { position: relative; padding: var(--s-9) 0 0; }
.mm .sec-head { margin-bottom: var(--s-8); }
.mm-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.mm-text { display: grid; gap: var(--s-6); justify-items: start; }
.mm-lead { font-size: var(--t-lg); color: var(--ink-2); max-width: 32rem; text-wrap: pretty; }
.mm-lead b { color: var(--ink); } .mm-lead .g { color: var(--accent); }
.formats { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.formats li { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: -.02em; padding: .35rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-3); transition: color var(--d-base) ease, border-color var(--d-base) ease, background-color var(--d-base) ease, transform var(--d-base) var(--ease-out); }
.formats li.on { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.mm-phone { margin: 0; display: grid; justify-items: center; }
.mm-phone img { width: min(100%, 24rem); height: auto; border-radius: 1.25rem; box-shadow: var(--shadow-panel); }
.mm-close-wrap { padding: var(--s-9) 0 var(--s-10); }

.aud { display: flex; align-items: center; gap: .55rem; min-width: 11rem; }
.aud-play { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.aud-play svg { width: .9rem; height: .9rem; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 1.4rem; }
.wave i { width: 3px; border-radius: 2px; background: var(--accent); height: 40%; transform-origin: 50% 50%; }
.wave i:nth-child(3n) { height: 85%; } .wave i:nth-child(4n+1) { height: 65%; } .wave i:nth-child(5n) { height: 30%; } .wave i:nth-child(7n) { height: 100%; }
.aud small, .vid small { color: var(--ink-3); font-size: .6875rem; }
.img-ph { display: grid; place-items: center; width: 10rem; height: 6.2rem; border-radius: .5rem; background: linear-gradient(150deg, var(--accent-soft), var(--bg-sunken)); color: var(--accent); }
.img-ph svg { width: 2rem; height: 2rem; }
.msg.out.img, .msg.out.vid { padding: .3rem; }
.vid-ph { position: relative; display: grid; place-items: center; width: 10rem; height: 6.2rem; border-radius: .5rem; background: linear-gradient(200deg, var(--bg-sunken), var(--accent-soft)); }
.vid-play { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.vid-play svg { width: 1rem; height: 1rem; }
.msg.out.vid small { display: block; text-align: right; padding: .15rem .25rem 0; }

@media (max-width: 56rem) {
  .vs { grid-template-columns: 1fr; gap: var(--s-8); }
  .cap { grid-template-columns: 1fr; gap: var(--s-4); }
  .mm-stage { grid-template-columns: 1fr; }
}
.vs-who { min-height: 7.25rem; align-content: start; }

/* celular do chatbot: borda levemente avermelhada */
.vs-col.bot .phone { border-color: color-mix(in oklab, var(--danger) 55%, var(--line-strong)); background: color-mix(in oklab, var(--danger) 14%, var(--bg-sunken)); }