/* Compact CRM story: find a contact, understand the history, see the next action. */
.content-section.draft-crm { padding-top:48px; padding-bottom:44px; }
.crm-layout { display:grid; grid-template-columns:.9fr 1.2fr; align-items:center; gap:40px; }
.crm-copy .eyebrow { color:#a7bcec; font-size:10px; letter-spacing:1.6px; margin:0 0 19px; }
.crm-copy h2 { font-size:clamp(30px,2.65vw,38px); line-height:1.2; letter-spacing:-.045em; }
.crm-copy h2 span { color:#b6c4e1; }
.crm-intro { color:#bac7d9; font-size:14px; line-height:1.8; margin:18px 0 0; max-width:470px; }
.crm-benefits { list-style:none; padding:0; margin:18px 0; display:grid; gap:11px; }
.crm-benefits li { display:flex; align-items:center; gap:10px; color:#dce5f2; font-size:12px; line-height:1.5; }
.crm-benefits svg,.crm-cta svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; flex:none; }
.crm-benefits svg { color:#9dbbeb; }
.crm-scope { color:#9facbf; font-size:12px; line-height:1.75; margin:0 0 12px; max-width:400px; }
.crm-copy .crm-cta { display:inline-flex; gap:14px; align-items:center; min-height:44px; color:#cfddfa; font-size:13px; }
.crm-workspace { margin:0; min-width:0; border:1px solid #a4bdea40; border-radius:16px; overflow:hidden; background:linear-gradient(140deg,#182231,#0e1623); box-shadow:0 18px 60px #0002; }
.crm-workspace svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.crm-workspace-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 19px; }
.crm-workspace-brand { display:flex; align-items:center; gap:9px; }
.crm-workspace-brand img { width:24px; height:24px; }
.crm-workspace-brand strong { font-size:13px; font-weight:500; color:#e1eaf6; }
.crm-example-badge { font-size:9px; letter-spacing:1px; padding:4px 6px; border:1px solid #9fbbe128; border-radius:4px; color:#9cacbf; }
.crm-source-strip { display:flex; flex-wrap:wrap; gap:7px 17px; border-top:1px solid #a1bfdf16; border-bottom:1px solid #a1bfdf16; padding:9px 19px; background:#060c151f; }
.crm-source-strip span { display:flex; align-items:center; gap:5px; font-size:10px; color:#b4c5d8; line-height:1.5; }
.crm-source-strip span:nth-child(2) svg { color:#93ceb7; }
.crm-source-strip span:nth-child(3) svg { color:#dcba7c; }
.crm-source-strip span:nth-child(4) svg { color:#c6a5d4; }
.crm-source-strip svg { width:13px; height:13px; color:#96b9dd; }
.crm-list-heading { display:grid; grid-template-columns:1fr 116px; padding:9px 40px 6px 20px; font-size:9px; line-height:1.5; letter-spacing:.8px; color:#8fabc1; }
.crm-leads { list-style:none; padding:0 10px; margin:0; display:grid; gap:3px; }
.crm-lead { appearance:none; width:100%; display:grid; grid-template-columns:minmax(0,1fr) 116px 12px; align-items:center; gap:8px; padding:7px 9px; margin:0; border:1px solid transparent; border-radius:8px; color:inherit; background:none; font:inherit; text-align:left; cursor:pointer; transition:border-color .18s,background .18s; }
.crm-lead:disabled { cursor:default; opacity:1; }
.crm-lead:hover:not(:disabled),.crm-lead.is-selected { border-color:#98b9ec50; background:#91baff0e; }
.crm-lead.is-selected { box-shadow:inset 2px 0 #9ebdec; }
.crm-lead:focus-visible { outline:2px solid #a9daff; outline-offset:1px; }
.crm-person { display:flex; align-items:center; gap:9px; min-width:0; }
.crm-person strong { display:block; font-size:12px; line-height:1.5; color:#e1e9f4; font-weight:500; }
.crm-person small { display:block; font-size:10px; line-height:1.5; color:#94adbf; }
.crm-avatar { width:31px; height:33px; border-radius:9px; display:grid; place-items:center; font-size:10px; flex:none; border:1px solid #95b9eb2e; color:#b7d1f6; background:#6894d317; }
.crm-avatar-daniel { color:#b8d8ca; background:#61ae8e14; border-color:#96d4b32b; }
.crm-avatar-sofia { color:#d8bfe9; background:#a27acd17; border-color:#c6a4de2b; }
.crm-stage { display:inline-flex; align-items:center; gap:5px; font-size:10px; line-height:1.5; color:#b5cbe7; white-space:nowrap; }
.crm-stage i { width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.crm-stage-new { color:#e6c997; }
.crm-stage-booked { color:#9ed2b9; }
.crm-lead .crm-lead-arrow { width:12px; height:12px; color:#8da8c6; opacity:.35; }
.crm-lead.is-selected .crm-lead-arrow { opacity:1; }
.crm-contact-detail { margin:8px 19px 0; padding:10px 14px; border:1px solid #9dbce446; border-radius:9px; background:linear-gradient(115deg,#22344b,#1a283a); }
.crm-detail-label { display:block; font-size:9px; line-height:1.5; letter-spacing:.8px; color:#adc9e3; }
.crm-detail-note p { margin:4px 0 8px; font-size:11px; line-height:1.6; color:#d5e1ed; min-height:18px; }
.crm-next-action { display:flex; align-items:center; gap:8px; border-top:1px solid #a8cbea25; padding-top:8px; }
.crm-task-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:#b4ccf012; color:#bfd7f5; flex:none; }
.crm-next-action small { display:block; font-size:9px; line-height:1.6; letter-spacing:.55px; color:#9eb9cf; }
.crm-next-action strong { display:block; font-size:11px; line-height:1.6; font-weight:500; color:#e2edf8; }
.crm-task-owner { margin-left:auto; padding-left:10px; border-left:1px solid #aec8e52b; text-align:right; flex:none; font-size:10px; line-height:1.5; color:#d0e0f0; }
.crm-task-owner small { font-size:9px; letter-spacing:.55px; margin-bottom:2px; }
.crm-workspace figcaption { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; padding:10px 19px; color:#91a8bc; font-size:9px; line-height:1.5; }
.crm-select-hint { display:inline-flex; align-items:center; gap:5px; color:#b7cce4; }
.crm-select-hint[hidden] { display:none; }
.crm-select-hint svg { width:11px; height:11px; }
@media(min-width:761px) and (max-width:1050px) { .crm-layout { grid-template-columns:.95fr 1.2fr; gap:26px; } .crm-copy h2 { font-size:31px; } .crm-lead { grid-template-columns:minmax(0,1fr) 98px 10px; gap:5px; } .crm-list-heading { grid-template-columns:1fr 98px; padding-right:35px; } .crm-workspace-header,.crm-source-strip { padding-left:15px; padding-right:15px; } .crm-source-strip { gap:7px 11px; } .crm-contact-detail { margin-left:15px; margin-right:15px; } .crm-workspace figcaption { padding-left:15px; padding-right:15px; } }
@media(max-width:760px) { .crm-layout { grid-template-columns:minmax(0,1fr); gap:25px; } .crm-copy h2 { font-size:32px; max-width:490px; } .crm-copy .eyebrow { margin-bottom:16px; } .crm-intro { margin-top:15px; } .crm-benefits { gap:9px; margin:15px 0; } .crm-scope { margin-bottom:8px; } .crm-workspace { width:100%; max-width:600px; justify-self:center; } }
@media(max-width:420px) { .crm-workspace-header { padding:14px 12px; } .crm-workspace-brand strong { font-size:12px; } .crm-source-strip { padding:10px 12px; gap:7px 11px; } .crm-source-strip span { font-size:10px; } .crm-leads { padding:0 7px; } .crm-lead { grid-template-columns:minmax(0,1fr) 87px 10px; gap:5px; padding:9px 6px; } .crm-list-heading { padding-left:15px; padding-right:33px; grid-template-columns:1fr 87px; } .crm-stage { font-size:10px; } .crm-person { gap:7px; } .crm-person strong { font-size:12px; } .crm-person small { font-size:10px; } .crm-avatar { width:28px; height:30px; } .crm-contact-detail { margin:9px 12px 0; padding:12px; } .crm-detail-note p { font-size:11px; min-height:36px; } .crm-next-action strong { font-size:11px; } .crm-workspace figcaption { padding:11px 12px; font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .crm-lead { transition:none; } }
.motion-paused .crm-lead { transition:none; }
/* Statuses and task ownership may wrap in translated and enlarged text. */
.crm-stage { white-space:normal; }
.crm-workspace-brand { min-width:0; }
.crm-example-badge { flex:none; }
@media(max-width:420px) {
  html[lang="es"] .crm-next-action { flex-wrap:wrap; }
  html[lang="es"] .crm-task-owner { flex-basis:100%; margin-left:36px; padding-left:0; border-left:0; text-align:left; }
}