/* =============================================================================
   central-riscos.css. Central de Riscos page (produto/central-riscos.html)
   ============================================================================= */

/* Hero ===================================================================== */
.cr-hero {
  position: relative;
  background: var(--vaas-blue-deep);
  color: #fff;
  padding: 160px 0 100px;
  overflow: hidden;
  isolation: isolate;
}
.cr-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 75% 25%, rgba(4,52,244,.22), transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 90%, rgba(206,255,41,.05), transparent 70%);
}
.cr-hero__bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 75% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 60% 55% at 75% 50%, #000 30%, transparent 80%);
}
.cr-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.cr-hero__copy { padding-top: 8px; }
.cr-hero__copy { padding-top: 8px; }
.cr-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 14px 0 24px;
  text-wrap: balance;
}
.cr-hero__title em { font-style: normal; color: var(--vaas-lime); }
.cr-hero__sub {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,.74);
  margin: 0 0 32px;
  max-width: 540px;
}
.cr-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero viz: target card with score evolution */
.cr-hero__viz {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  padding: 6px 18px 26px;
}
.cr-hero__target {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 22px 22px 20px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 40px 90px -25px rgba(0,0,0,.55);
  font-family: var(--font-display);
  color: rgba(255,255,255,.92);
  z-index: 2;
}
.cr-hero__target-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}
.cr-hero__target-crumb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.cr-hero__target-base {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vaas-blue);
  background: rgba(4,52,244,.15);
  padding: 3px 9px;
  border-radius: 3px;
  font-weight: 600;
}
.cr-hero__target-id { margin-bottom: 16px; }
.cr-hero__target-name {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.cr-hero__target-cnpj {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 3px;
}
.cr-hero__target-score-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border-radius: 4px;
  margin-bottom: 14px;
}
.cr-hero__target-score-l {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}
.cr-hero__target-score-v {
  display: flex; align-items: baseline; gap: 3px;
  margin-bottom: 6px;
}
.cr-hero__target-score-v b {
  font-size: 26px;
  font-weight: 700;
  color: #e54a7d;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cr-hero__target-score-v span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.4);
}
.cr-hero__target-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e54a7d;
  background: rgba(229,74,125,.15);
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 600;
}
.cr-hero__target-change-v {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #e54a7d;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cr-hero__chart {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  height: 90px;
  align-items: end;
  padding: 12px 4px 0;
  margin-bottom: 14px;
}
.cr-hero__chart-col {
  display: flex; flex-direction: column; align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
}
.cr-hero__chart-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 2px 2px 0 0;
  background: rgba(255,255,255,.2);
  animation: cr-bar-rise 700ms cubic-bezier(.2,.7,.2,1) backwards;
}
.cr-hero__chart-col--low .cr-hero__chart-bar  { background: #94d089; }
.cr-hero__chart-col--high .cr-hero__chart-bar { background: #f0a23a; }
.cr-hero__chart-col--crit .cr-hero__chart-bar { background: #e54a7d; box-shadow: 0 0 0 3px rgba(229,74,125,.15); }
@keyframes cr-bar-rise { from { transform: scaleY(0); transform-origin: bottom; } }
.cr-hero__chart-col:nth-child(1) .cr-hero__chart-bar { animation-delay: 100ms; }
.cr-hero__chart-col:nth-child(2) .cr-hero__chart-bar { animation-delay: 200ms; }
.cr-hero__chart-col:nth-child(3) .cr-hero__chart-bar { animation-delay: 300ms; }
.cr-hero__chart-col:nth-child(4) .cr-hero__chart-bar { animation-delay: 400ms; }
.cr-hero__chart-col:nth-child(5) .cr-hero__chart-bar { animation-delay: 500ms; }
.cr-hero__chart-d {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(255,255,255,.45);
}

.cr-hero__triggers {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cr-hero__triggers-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 6px;
}
.cr-hero__trigger {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
}
.cr-hero__trigger-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #e54a7d;
  animation: ia-blink 1.6s ease-in-out infinite;
}
.cr-hero__trigger b {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
}
.cr-hero__trigger em {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,.45);
  margin-top: 1px;
}

/* Floating accent */
.cr-hero__accent {
  position: absolute;
  top: -10px;
  right: -10px;
  background: rgba(35,56,18,.85);
  border: 1px solid rgba(206,255,41,.3);
  border-radius: 8px;
  padding: 10px 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.5);
  z-index: 3;
  transform: rotate(2deg);
  font-family: var(--font-display);
}
.cr-hero__accent-h {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vaas-lime);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.cr-hero__accent-h i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vaas-lime);
  animation: ia-blink 1.6s ease-in-out infinite;
}
.cr-hero__accent-v {
  font-family: var(--font-display);
  font-size: 13px;
  color: #fff;
  font-weight: 500;
}

@media (max-width: 1100px) {
  .cr-hero__inner { grid-template-columns: 1fr; gap: 56px; align-items: start; }
  .cr-hero__viz { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .cr-hero { padding: 120px 0 60px; }
  .cr-hero__target-score-row { grid-template-columns: 1fr; gap: 10px; }
}


/* Section base ============================================================ */
.cr-sec { padding: 120px 0; }
.pv-title--light { color: #fff !important; }
.pv-title--light em { color: var(--vaas-lime) !important; }
.pv-sub--light { color: rgba(255,255,255,.74) !important; }

/* =========================================================================
   CRWorkflow. workflow chain w/ Monitoring node highlighted
   ========================================================================= */
.cr-wf {
  background: #f8f5ed;
  color: var(--vaas-blue-deep);
  position: relative;
  overflow: hidden;
}
.cr-wf::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 20%, rgba(4,52,244,.04), transparent 60%);
}
.cr-wf > * { position: relative; z-index: 1; }
.cr-wf__head { max-width: 760px; margin-bottom: 36px; }
.cr-wf__stage {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
}
.cr-wf__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.55);
}
.cr-wf__bar-dots { display: flex; gap: 6px; }
.cr-wf__bar-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.cr-wf__bar-path { flex: 1; letter-spacing: 0.04em; }
.cr-wf__bar-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vaas-lime);
}
.cr-wf__bar-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vaas-lime); animation: ia-blink 1.6s ease-in-out infinite; }

.cr-wf__canvas { padding: 36px 28px 32px; overflow-x: auto; }
.cr-wf__chain {
  display: flex; align-items: center;
  flex-wrap: nowrap; min-width: max-content;
  margin: 0 auto; width: max-content; max-width: 100%;
}
.cr-wf__node {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(255,255,255,.85);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.cr-wf__node-ico {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  color: rgba(255,255,255,.7);
  flex: 0 0 22px;
}
.cr-wf__conn {
  flex: 0 0 32px;
  height: 1.5px;
  background-image: linear-gradient(to right, rgba(255,255,255,.25) 50%, transparent 50%);
  background-size: 7px 1.5px;
}
.cr-wf__node--cr {
  background: rgba(206,255,41,.12);
  border: 1.5px solid var(--vaas-lime);
  color: #fff;
  font-weight: 600;
  padding: 12px 18px;
  font-size: 14px;
  box-shadow: 0 0 0 4px rgba(206,255,41,.08), 0 12px 30px -8px rgba(206,255,41,.25);
  position: relative;
}
.cr-wf__node--cr::after {
  content: "";
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(206,255,41,.4);
}
.cr-wf__node--cr .cr-wf__node-ico {
  background: var(--vaas-lime);
  color: var(--vaas-blue-deep);
}
.cr-wf__conn--cr {
  background-image: linear-gradient(to right, rgba(206,255,41,.7) 50%, transparent 50%);
  background-size: 7px 1.5px;
  height: 2px;
}

.cr-wf__detail-row { display: flex; justify-content: center; margin-top: 32px; }
.cr-wf__detail {
  max-width: 560px;
  background: rgba(206,255,41,.04);
  border: 1px solid rgba(206,255,41,.25);
  border-radius: 6px;
  padding: 18px 22px 20px;
  font-family: var(--font-display);
}
.cr-wf__detail-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  color: var(--vaas-lime);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.cr-wf__detail-d {
  font-family: var(--font-display);
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,.7);
  margin: 0 0 14px;
}
.cr-wf__detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(206,255,41,.15);
}
.cr-wf__detail-field { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-display); }
.cr-wf__detail-field span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.cr-wf__detail-field b {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.92);
}
.cr-wf__cta {
  display: flex; align-items: center; gap: 24px;
  padding: 22px 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.cr-wf__cta:hover {
  background: rgba(206,255,41,.06);
  border-color: rgba(206,255,41,.3);
  transform: translateY(-1px);
}
.cr-wf__cta-l { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cr-wf__cta-l b {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  color: #fff; letter-spacing: -0.01em;
}
.cr-wf__cta-l span {
  font-family: var(--font-display);
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
}
.cr-wf__cta-arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vaas-lime);
  color: var(--vaas-blue-deep);
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  flex: 0 0 44px;
  transition: transform 200ms var(--ease-out);
}
.cr-wf__cta:hover .cr-wf__cta-arrow { transform: translateX(4px); }

/* =========================================================================
   CRBases. organization by base
   ========================================================================= */
.cr-bases { background: #fff; }
.cr-bases__head { max-width: 760px; margin-bottom: 36px; }
.cr-bases__bullets {
  list-style: none; padding: 0;
  margin: 24px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.cr-bases__bullets li {
  display: flex; flex-direction: column; gap: 4px;
  padding-right: 14px;
  border-right: 1px solid rgba(0,11,88,.08);
  font-family: var(--font-display);
}
.cr-bases__bullets li:last-child { border-right: none; }
.cr-bases__bullets li b { font-size: 14px; font-weight: 600; color: var(--vaas-blue-deep); }
.cr-bases__bullets li span { font-size: 13.5px; color: rgba(0,11,88,.65); line-height: 1.45; }

.cr-bases__stage {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(0,11,88,.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,11,88,.18);
}
.cr-bases__sidebar {
  background: #fafbfc;
  border-right: 1px solid rgba(0,11,88,.08);
  padding: 18px 14px;
}
.cr-bases__sidebar-h {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 14px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.005em;
}
.cr-bases__list { list-style: none; padding: 0; margin: 0; }
.cr-bases__item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-display);
  text-align: left;
  transition: background 160ms var(--ease-out);
}
.cr-bases__item:hover { background: rgba(0,11,88,.04); }
.cr-bases__item--active { background: rgba(4,52,244,.08); }
.cr-bases__item-dot { width: 8px; height: 8px; border-radius: 50%; }
.cr-bases__item-dot--blue   { background: #5faaeb; }
.cr-bases__item-dot--violet { background: #b69ce8; }
.cr-bases__item-dot--green  { background: #94d089; }
.cr-bases__item-dot--amber  { background: #f0a23a; }
.cr-bases__item-dot--sky    { background: #4f7be0; }
.cr-bases__item-dot--rose   { background: #e54a7d; }
.cr-bases__item-dot--gray   { background: #b6bcd0; }
.cr-bases__item-l {
  font-size: 13px;
  color: var(--vaas-blue-deep);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.cr-bases__item-c {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(0,11,88,.5);
}
.cr-bases__item--active .cr-bases__item-c { color: var(--vaas-blue); font-weight: 600; }

.cr-bases__detail { padding: 24px 28px 28px; }
.cr-bases__detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}
.cr-bases__detail-head h3 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.cr-bases__detail-head > div span {
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(0,11,88,.55);
}
.cr-bases__detail-cta {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  padding: 8px 14px;
  background: var(--vaas-blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cr-bases__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.cr-bases__metric {
  padding: 14px 16px;
  background: #fafbfc;
  border: 1px solid rgba(0,11,88,.08);
  border-radius: 4px;
  font-family: var(--font-display);
}
.cr-bases__metric span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,11,88,.5);
  margin-bottom: 6px;
}
.cr-bases__metric b {
  font-size: 22px;
  font-weight: 700;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cr-bases__metric--crit b { color: #e54a7d; }

/* Per-base mini-dashboard */
.cr-bases__dash {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "line donut"
    "dec  donut";
  gap: 10px;
  animation: cr-bases-fade 280ms cubic-bezier(.2,.7,.2,1);
}
@keyframes cr-bases-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cr-bases__dash-card {
  background: #fff;
  border: 1px solid rgba(0,11,88,.08);
  border-radius: 6px;
  padding: 14px 16px;
  font-family: var(--font-display);
  display: flex; flex-direction: column;
}
.cr-bases__dash-card--line  { grid-area: line; }
.cr-bases__dash-card--donut { grid-area: donut; }
.cr-bases__dash-card--dec   { grid-area: dec; }
.cr-bases__dash-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,11,88,.5);
  margin-bottom: 10px;
}

.cr-bases__line { width: 100%; height: 90px; }
.cr-bases__line-foot {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(0,11,88,.45);
  margin-top: 4px;
}

.cr-bases__donut-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 4px;
}
.cr-bases__donut {
  width: 110px; height: 110px;
  border-radius: 50%;
  position: relative;
  display: grid; place-items: center;
}
.cr-bases__donut::after {
  content: "";
  position: absolute; inset: 18px;
  background: #fff;
  border-radius: 50%;
}
.cr-bases__donut-c {
  position: relative; z-index: 1;
  text-align: center;
  font-family: var(--font-display);
}
.cr-bases__donut-c b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vaas-blue-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cr-bases__donut-c span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,11,88,.45);
}
.cr-bases__donut-legend {
  list-style: none; padding: 0; margin: 0;
  width: 100%;
  display: flex; flex-direction: column; gap: 4px;
}
.cr-bases__donut-legend li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  font-family: var(--font-display);
  font-size: 11.5px;
  color: rgba(0,11,88,.65);
  border-bottom: 1px dashed rgba(0,11,88,.06);
}
.cr-bases__donut-legend li:last-child { border-bottom: none; }
.cr-bases__donut-legend i {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.cr-bases__donut-legend b {
  font-variant-numeric: tabular-nums;
  color: var(--vaas-blue-deep);
  font-weight: 600;
}

.cr-bases__dec-list {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cr-bases__dec-list li {
  display: grid;
  grid-template-columns: 80px 1fr 50px;
  gap: 10px;
  align-items: center;
}
.cr-bases__dec-l {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--vaas-blue-deep);
}
.cr-bases__dec-bar {
  height: 14px;
  border-radius: 2px;
  background: #fafbfc;
  border: 1px solid rgba(0,11,88,.06);
  overflow: hidden;
}
.cr-bases__dec-bar-fill {
  height: 100%;
  transition: width 300ms cubic-bezier(.2,.7,.2,1);
}
.cr-bases__dec-v {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
  .cr-bases__dash {
    grid-template-columns: 1fr;
    grid-template-areas: "line" "donut" "dec";
  }
}

@media (max-width: 980px) {
  .cr-bases__stage { grid-template-columns: 1fr; }
  .cr-bases__sidebar { border-right: none; border-bottom: 1px solid rgba(0,11,88,.08); }
  .cr-bases__bullets { grid-template-columns: 1fr; gap: 12px; }
  .cr-bases__bullets li { border-right: none; padding-right: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(0,11,88,.06); }
  .cr-bases__metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cr-bases__rules li { grid-template-columns: 1fr auto; }
  .cr-bases__rule-cat { grid-column: 1 / -1; }
}


/* =========================================================================
   CRInteligente. adaptive frequency
   ========================================================================= */
.cr-int {
  background: var(--vaas-blue-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cr-int::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 30%, rgba(206,255,41,.05), transparent 60%),
              radial-gradient(ellipse 50% 60% at 20% 80%, rgba(4,52,244,.18), transparent 60%);
}
.cr-int > * { position: relative; z-index: 1; }
.cr-int__head { max-width: 760px; margin-bottom: 36px; }
.cr-int__bullets {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-direction: column;
}
.cr-int__bullets li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-display);
}
.cr-int__bullets li:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.cr-int__bullets li b { font-size: 14px; font-weight: 600; color: #fff; }
.cr-int__bullets li span { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.5; }

.cr-int__panel {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 28px 28px 32px;
}
.cr-int__tiers {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 32px;
}
.cr-int__tier {
  padding: 16px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  font-family: var(--font-display);
}
.cr-int__tier--low  { border-color: rgba(148,208,137,.3); }
.cr-int__tier--med  { border-color: rgba(95,170,235,.3); }
.cr-int__tier--high { border-color: rgba(240,162,58,.3); }
.cr-int__tier--crit { border-color: rgba(229,74,125,.4); background: rgba(229,74,125,.08); }
.cr-int__tier-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.cr-int__tier-l { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.cr-int__tier-freq {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.6);
}
.cr-int__tier-bar {
  height: 5px; border-radius: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin-bottom: 10px;
}
.cr-int__tier-bar-fill { height: 100%; border-radius: 2px; transition: width 600ms; }
.cr-int__tier--low  .cr-int__tier-bar-fill { background: #94d089; }
.cr-int__tier--med  .cr-int__tier-bar-fill { background: #5faaeb; }
.cr-int__tier--high .cr-int__tier-bar-fill { background: #f0a23a; }
.cr-int__tier--crit .cr-int__tier-bar-fill { background: #e54a7d; }
.cr-int__tier-foot { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); }
.cr-int__tier-foot b {
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.cr-int__tier-foot span { font-size: 11px; color: rgba(255,255,255,.5); }

.cr-int__timeline-h {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.cr-int__timeline-list {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.cr-int__timeline-list::before {
  content: "";
  position: absolute;
  left: 5px; top: 4px; bottom: 4px;
  width: 1.5px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.15) 50%, transparent 50%);
  background-size: 1.5px 6px;
}
.cr-int__timeline-ev {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.cr-int__timeline-marker {
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  background: #fff;
  border: 2px solid rgba(255,255,255,.4);
  position: relative; z-index: 1;
}
.cr-int__timeline-ev--low  .cr-int__timeline-marker { background: #94d089; border-color: rgba(148,208,137,.4); }
.cr-int__timeline-ev--med  .cr-int__timeline-marker { background: #5faaeb; border-color: rgba(95,170,235,.4); }
.cr-int__timeline-ev--high .cr-int__timeline-marker { background: #f0a23a; border-color: rgba(240,162,58,.4); }
.cr-int__timeline-ev--crit .cr-int__timeline-marker {
  background: #e54a7d; border-color: rgba(229,74,125,.4);
  box-shadow: 0 0 0 4px rgba(229,74,125,.18);
}
.cr-int__timeline-body { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-display); }
.cr-int__timeline-date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,.5);
}
.cr-int__timeline-txt {
  font-size: 13.5px;
  color: rgba(255,255,255,.9);
  line-height: 1.4;
}

@media (max-width: 980px) {
  .cr-int__tiers { grid-template-columns: repeat(2, 1fr); }
  .cr-int__bullets li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 640px) {
  .cr-int__tiers { grid-template-columns: 1fr; }
}

/* =========================================================================
   CRDashboard. overview dashboard mockup
   ========================================================================= */
.cr-dash { background: #f6f6f7; }
.cr-dash__head { max-width: 760px; margin-bottom: 36px; }
.cr-dash__frame {
  background: #fff;
  border: 1px solid rgba(0,11,88,.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,11,88,.25);
}
.cr-dash__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0,11,88,.08);
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,11,88,.55);
}
.cr-dash__bar-dots { display: flex; gap: 6px; }
.cr-dash__bar-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d0d5e0; }
.cr-dash__bar-path { flex: 1; letter-spacing: 0.04em; }
.cr-dash__body { padding: 24px 28px 32px; }
.cr-dash__crumbs { font-family: var(--font-display); font-size: 12.5px; color: rgba(0,11,88,.5); margin-bottom: 6px; }
.cr-dash__crumbs b { color: var(--vaas-blue-deep); font-weight: 500; }
.cr-dash__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.cr-dash__filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 22px;
}
.cr-dash__filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid rgba(0,11,88,.12);
  border-radius: 3px;
  color: rgba(0,11,88,.65);
}
.cr-dash__filter--active { border-color: rgba(4,52,244,.4); color: var(--vaas-blue-deep); background: rgba(4,52,244,.03); }
.cr-dash__filter-chev { font-family: var(--font-mono); font-size: 9px; color: rgba(0,11,88,.4); }

.cr-dash__row { display: grid; gap: 12px; margin-bottom: 14px; }
.cr-dash__row--top { grid-template-columns: 1fr 2fr 1fr; }
.cr-dash__row--mid { grid-template-columns: 1.2fr 2fr; }
.cr-dash__row--bot { grid-template-columns: 1fr 2fr; }

.cr-dash__card {
  background: #fff;
  border: 1px solid rgba(0,11,88,.1);
  border-radius: 6px;
  padding: 14px 18px;
  font-family: var(--font-display);
  display: flex; flex-direction: column;
}
.cr-dash__card-h {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--vaas-blue-deep);
  margin-bottom: 12px;
}
.cr-dash__kpi-v {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--vaas-blue-deep);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cr-dash__kpi-d {
  font-family: var(--font-display);
  font-size: 11px;
  color: rgba(0,11,88,.5);
  margin-top: 4px;
}
.cr-dash__kpi-delta {
  font-family: var(--font-display);
  font-size: 11px;
  margin-top: 4px;
}
.cr-dash__kpi-delta--down { color: #c04068; }

.cr-dash__legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  color: rgba(0,11,88,.65);
}
.cr-dash__legend-i { display: inline-flex; align-items: center; gap: 6px; }
.cr-dash__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cr-dash__dot--orange { background: #f0a23a; }
.cr-dash__dot--rose   { background: #e54a7d; }
.cr-dash__dot--green  { background: #94d089; }
.cr-dash__dot--sky    { background: #5faaeb; }
.cr-dash__dot--blue   { background: #4f7be0; }
.cr-dash__dot--amber  { background: #f0a23a; }
.cr-dash__dot--gray   { background: #b6bcd0; }

.cr-dash__bars { display: flex; flex-direction: column; gap: 6px; }
.cr-dash__bar-row { display: flex; align-items: center; gap: 8px; }
.cr-dash__bar-fill { height: 16px; border-radius: 2px; }
.cr-dash__bar-fill--orange { background: #f0a23a; }
.cr-dash__bar-fill--rose   { background: #e54a7d; }
.cr-dash__bar-fill--green  { background: #94d089; }
.cr-dash__bar-v {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,11,88,.65);
  font-variant-numeric: tabular-nums;
}

.cr-dash__donut-wrap { display: flex; justify-content: center; padding: 6px 0 14px; }
.cr-dash__donut {
  width: 120px; height: 120px;
  border-radius: 50%;
  position: relative;
  display: grid; place-items: center;
}
.cr-dash__donut::after {
  content: "";
  position: absolute; inset: 18px;
  background: #fff; border-radius: 50%;
}
.cr-dash__donut-c { position: relative; z-index: 1; text-align: center; font-family: var(--font-display); }
.cr-dash__donut-c b {
  display: block;
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vaas-blue-deep);
  font-variant-numeric: tabular-nums;
}
.cr-dash__donut-c span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(0,11,88,.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cr-dash__donut-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cr-dash__donut-legend li {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 11.5px;
  color: rgba(0,11,88,.7);
}

.cr-dash__stacks { display: flex; flex-direction: column; gap: 10px; }
.cr-dash__stack-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: center;
}
.cr-dash__stack-l { font-family: var(--font-display); font-size: 12px; color: var(--vaas-blue-deep); }
.cr-dash__stack-bar { display: flex; height: 22px; border-radius: 3px; overflow: hidden; }
.cr-dash__stack-seg { height: 100%; display: block; }
.cr-dash__stack-seg--sky    { background: #5faaeb; }
.cr-dash__stack-seg--blue   { background: #4f7be0; }
.cr-dash__stack-seg--green  { background: #94d089; }
.cr-dash__stack-seg--amber  { background: #f0a23a; }
.cr-dash__stack-seg--rose   { background: #e54a7d; }

.cr-dash__line-chart { width: 100%; height: 80px; display: block; margin-top: 6px; }
.cr-dash__line-x {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9.5px;
  color: rgba(0,11,88,.5);
  margin-top: 4px;
}

@media (max-width: 980px) {
  .cr-dash__row--top { grid-template-columns: 1fr 1fr; }
  .cr-dash__row--mid { grid-template-columns: 1fr; }
  .cr-dash__row--bot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cr-dash__row--top { grid-template-columns: 1fr; }
  .cr-dash__filters { gap: 4px; }
  .cr-dash__filter { font-size: 11px; padding: 4px 8px; }
}

/* =========================================================================
   CRAlvo. target detail page
   ========================================================================= */
.cr-alvo {
  background: var(--vaas-blue-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cr-alvo::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 30%, rgba(182,156,232,.08), transparent 60%);
}
.cr-alvo > * { position: relative; z-index: 1; }
.cr-alvo__head { max-width: 760px; margin-bottom: 36px; }
.cr-alvo__bullets {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.cr-alvo__bullets li {
  display: flex; flex-direction: column; gap: 4px;
  padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,.1);
  font-family: var(--font-display);
}
.cr-alvo__bullets li:last-child { border-right: none; }
.cr-alvo__bullets li b { font-size: 14px; font-weight: 600; color: #fff; }
.cr-alvo__bullets li span { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.45; }

.cr-alvo__frame {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 40px 90px -25px rgba(0,0,0,.5);
  font-family: var(--font-display);
  color: var(--vaas-blue-deep);
}
.cr-alvo__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid rgba(0,11,88,.08);
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,11,88,.55);
}
.cr-alvo__bar-dots { display: flex; gap: 6px; }
.cr-alvo__bar-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d0d5e0; }
.cr-alvo__bar-path { flex: 1; letter-spacing: 0.04em; }
.cr-alvo__body { padding: 22px 28px 28px; }
.cr-alvo__crumbs { font-family: var(--font-display); font-size: 12.5px; color: rgba(0,11,88,.5); margin-bottom: 6px; }
.cr-alvo__crumbs b { color: var(--vaas-blue-deep); font-weight: 500; }
.cr-alvo__title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.cr-alvo__cnpj {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(0,11,88,.55);
}
.cr-alvo__tabs {
  display: flex; gap: 18px;
  margin: 18px 0 22px;
  border-bottom: 1px solid rgba(0,11,88,.08);
}
.cr-alvo__tab {
  font-family: var(--font-display);
  font-size: 13.5px;
  color: rgba(0,11,88,.55);
  padding: 0 0 10px;
  position: relative;
}
.cr-alvo__tab--active {
  color: var(--vaas-blue);
  font-weight: 500;
}
.cr-alvo__tab--active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--vaas-blue);
}
.cr-alvo__kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.cr-alvo__kpi {
  padding: 12px 14px;
  border: 1px solid rgba(0,11,88,.08);
  border-radius: 4px;
  font-family: var(--font-display);
}
.cr-alvo__kpi--crit { border-color: rgba(229,74,125,.3); background: rgba(229,74,125,.05); }
.cr-alvo__kpi span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0,11,88,.5);
  margin-bottom: 4px;
}
.cr-alvo__kpi b {
  font-size: 17px;
  font-weight: 700;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cr-alvo__kpi--crit b { color: #e54a7d; }

.cr-alvo__chart-wrap { margin-bottom: 24px; }
.cr-alvo__chart-h {
  display: block;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--vaas-blue-deep);
  margin-bottom: 10px;
}
.cr-alvo__chart { width: 100%; height: 140px; }
.cr-alvo__chart-x {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0,11,88,.5);
  margin-top: 4px;
}

.cr-alvo__hist-h {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--vaas-blue-deep);
  margin: 6px 0 10px;
}
.cr-alvo__hist {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
}
.cr-alvo__hist th, .cr-alvo__hist td {
  text-align: left;
  padding: 10px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(0,11,88,.06);
}
.cr-alvo__hist th {
  font-weight: 500;
  font-size: 11px;
  color: rgba(0,11,88,.55);
  background: #fafbfc;
}
.cr-alvo__cell--crit { color: #c04068; font-weight: 500; }
.cr-alvo__cell--ok   { color: #1b8b54; font-weight: 500; }

@media (max-width: 1100px) {
  .cr-alvo__kpis { grid-template-columns: repeat(3, 1fr); }
  .cr-alvo__bullets { grid-template-columns: 1fr; gap: 12px; }
  .cr-alvo__bullets li { border-right: none; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 12px; }
}
@media (max-width: 640px) {
  .cr-alvo__kpis { grid-template-columns: repeat(2, 1fr); }
  .cr-alvo__hist th, .cr-alvo__hist td { font-size: 11px; padding: 8px 6px; }
}

/* =========================================================================
   CRMesa. handoff to decision desk
   ========================================================================= */
.cr-mesa { background: #fff; }
.cr-mesa__head { max-width: 760px; margin-bottom: 32px; }
.cr-mesa__panel {
  background: #fff;
  border: 1px solid rgba(0,11,88,.1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,11,88,.2);
  margin-bottom: 28px;
}
.cr-mesa__panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(0,11,88,.08);
  background: #fafbfc;
}
.cr-mesa__panel-head h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--vaas-blue-deep);
  margin: 0;
  letter-spacing: -0.01em;
}
.cr-mesa__panel-head > div span {
  font-family: var(--font-display);
  font-size: 12.5px;
  color: rgba(0,11,88,.5);
}
.cr-mesa__panel-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vaas-blue);
  font-weight: 600;
  background: rgba(4,52,244,.08);
  padding: 4px 10px;
  border-radius: 3px;
}
.cr-mesa__list { list-style: none; padding: 0; margin: 0; }
.cr-mesa__item {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(0,11,88,.06);
  font-family: var(--font-display);
}
.cr-mesa__item:last-child { border-bottom: none; }
.cr-mesa__item--active { background: rgba(229,74,125,.04); }
.cr-mesa__item-l { display: flex; flex-direction: column; gap: 3px; }
.cr-mesa__item-base {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vaas-blue);
  background: rgba(4,52,244,.08);
  padding: 2px 7px;
  border-radius: 2px;
  align-self: flex-start;
  margin-bottom: 4px;
}
.cr-mesa__item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.005em;
}
.cr-mesa__item-cnpj { font-family: var(--font-mono); font-size: 11px; color: rgba(0,11,88,.5); }
.cr-mesa__item-mid { display: flex; flex-direction: column; gap: 3px; }
.cr-mesa__item-trigger {
  font-size: 13px;
  color: var(--vaas-blue-deep);
  font-weight: 500;
}
.cr-mesa__item-when { font-family: var(--font-mono); font-size: 10.5px; color: rgba(0,11,88,.5); }
.cr-mesa__item-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cr-mesa__item-score {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #e54a7d;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cr-mesa__item-score em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #e54a7d;
  margin-left: 4px;
}
.cr-mesa__item-cls {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c04068;
  font-weight: 600;
  background: rgba(229,74,125,.12);
  padding: 3px 8px;
  border-radius: 2px;
}

.cr-mesa__cta {
  display: flex; align-items: center; gap: 24px;
  padding: 22px 28px;
  background: var(--vaas-blue-deep);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.cr-mesa__cta:hover {
  background: #001078;
  transform: translateY(-1px);
}
.cr-mesa__cta-l { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cr-mesa__cta-l b {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600; color: #fff;
}
.cr-mesa__cta-l span {
  font-family: var(--font-display);
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.4;
}
.cr-mesa__cta-arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vaas-lime);
  color: var(--vaas-blue-deep);
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-display);
  flex: 0 0 44px;
  transition: transform 200ms var(--ease-out);
}
.cr-mesa__cta:hover .cr-mesa__cta-arrow { transform: translateX(4px); }

@media (max-width: 980px) {
  .cr-mesa__item { grid-template-columns: 1fr; gap: 8px; }
  .cr-mesa__item-r { align-items: flex-start; }
}


/* Hero radar. compact version of v-radar from the home */
/* Radar lives in the right column of the hero, like other product heros */
.cr-hero__radar {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0 auto;
}
/* Make the center card smaller than on the home */
.cr-hero__radar .v-radar__center-card {
  padding: 14px 16px !important;
  min-width: 0;
  max-width: 230px;
}
.cr-hero__radar .v-radar__center-kicker {
  font-size: 9.5px !important;
}
.cr-hero__radar .v-radar__center-title {
  font-size: 16px !important;
}
.cr-hero__radar .v-radar__center-sub {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  margin: 4px 0 8px !important;
}
.cr-hero__radar .v-radar__center-stats {
  gap: 14px !important;
}
.cr-hero__radar .v-radar__center-stats b {
  font-size: 18px !important;
}
.cr-hero__radar .v-radar__center-stats span {
  font-size: 9.5px !important;
}
.cr-hero__radar .v-radar__evt-body {
  font-size: 10.5px;
  padding: 6px 8px;
  max-width: 150px;
}
.cr-hero__radar .v-radar__evt-type { font-size: 9.5px; }
.cr-hero__radar .v-radar__evt-subject { font-size: 11px; }
.cr-hero__radar .v-radar__evt-risk { font-size: 9.5px; }

@media (max-width: 980px) {
  .cr-hero__radar { max-width: 380px; }
  .cr-hero__radar .v-radar__center-card { max-width: 200px; }
}


/* Fade the left side of the radar so it doesn't fight the copy */
.cr-hero__radar::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--vaas-blue-deep) 0%, rgba(0,11,88,.7) 25%, transparent 55%);
  z-index: 4;
  pointer-events: none;
}
.cr-hero__radar .v-radar__center-card { max-width: 280px; }

@media (max-width: 1100px) {
  .cr-hero { min-height: auto; padding-bottom: 60px; }
  .cr-hero__radar { opacity: .35; }
  .cr-hero__radar .v-radar__evt { display: none; }
  .cr-hero__radar::before { background: linear-gradient(180deg, var(--vaas-blue-deep) 0%, transparent 30%, transparent 70%, var(--vaas-blue-deep) 100%); pointer-events: none; }
}


/* Hero radar motion. faster sweep (the yellow arm) + subtle dashed-ring drift */
.cr-hero__radar .v-radar__sweep { animation-duration: 6s !important; }

/* Hide flat cross lines — they fight the 3D dish look on the white surface */
.cr-hero__radar .v-radar__cross { display: none; }

/* Bring ring 4 just inside the circle so it doesn't graze the white edge */
.cr-hero__radar .v-radar__ring--4 { width: 80% !important; }

.cr-hero__radar .v-radar__ring--4 {
  animation: cr-radar-drift 60s linear infinite;
  transform-origin: center;
}
@keyframes cr-radar-drift {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}



@media (prefers-reduced-motion: reduce) {
  .cr-hero__radar .v-radar__ring--4 { animation: none; }
}




@media (max-width: 1100px) {
  .cr-hero__inner { grid-template-columns: 1fr; gap: 56px; align-items: start; }
  .cr-hero__radar { max-width: 420px; }
}


/* Hero radar disc — translucent glass on the dark navy section. */
.cr-hero__radar {
  /* Force a perfect circle even when the grid cell stretches taller. */
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important; /* override v-radar's min-height: 560px */
  justify-self: end;
  align-self: center;

  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 55%, rgba(255,255,255,.015) 100%);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 30px 80px -20px rgba(0,0,0,.55),
    inset 0 36px 60px -36px rgba(255,255,255,.45),
    inset 0 -28px 50px -28px rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* Subtle inner glow (above the rings)  */
.cr-hero__radar { overflow: visible; }
.cr-hero__radar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.16) 0%, transparent 35%),
    radial-gradient(circle at 70% 90%, rgba(4,52,244,.18) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* 3D-feel rings: brighter strokes, multiple shadows so they read like a dish. */
.cr-hero__radar .v-radar__ring {
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.cr-hero__radar .v-radar__ring--1 { border-color: rgba(255,255,255,.32) !important; }
.cr-hero__radar .v-radar__ring--2 { border-color: rgba(255,255,255,.22) !important; }
.cr-hero__radar .v-radar__ring--3 { border-color: rgba(255,255,255,.18) !important; }
.cr-hero__radar .v-radar__ring--4 {
  border-color: rgba(255,255,255,.12) !important;
  border-style: dashed;
  width: 86% !important;
}

/* Sweep arm color — lime against the translucent disc */
.cr-hero__radar .v-radar__sweep-beam {
  background: conic-gradient(
    from 270deg at 50% 100%,
    rgba(206,255,31,0) 0deg,
    rgba(206,255,31,.45) 45deg,
    rgba(206,255,31,.85) 80deg,
    rgba(206,255,31,0) 92deg
  ) !important;
  filter: blur(.5px);
}


/* Cream variant overrides for CRWorkflow */
.cr-wf .pv-eyebrow--light { color: var(--vaas-blue) !important; }
.cr-wf .pv-title--light { color: var(--vaas-blue-deep) !important; }
.cr-wf .pv-title--light em { color: var(--vaas-blue) !important; }
.cr-wf .pv-sub--light { color: rgba(0,11,88,.65) !important; }

/* Stage chrome on cream */
.cr-wf__stage {
  background: #fff;
  border: 1px solid rgba(26,24,27,.1);
  box-shadow: 0 30px 80px -30px rgba(40,28,8,.18);
}
.cr-wf__bar {
  background: #fafbfc;
  border-bottom: 1px solid rgba(0,11,88,.08);
  color: rgba(0,11,88,.55);
}
.cr-wf__bar-dots i { background: #d0d5e0; }
.cr-wf__bar-state { color: #1b8b54; }
.cr-wf__bar-state::before { background: #2bb673; }

/* Pill nodes on white surface */
.cr-wf__node {
  background: #fafbfc;
  border-color: rgba(0,11,88,.12);
  color: var(--vaas-blue-deep);
}
.cr-wf__node-ico {
  background: rgba(4,52,244,.08);
  color: var(--vaas-blue);
}
.cr-wf__conn {
  background-image: linear-gradient(to right, rgba(0,11,88,.22) 50%, transparent 50%);
}
/* AI/Monitoring node: keep lime accent */
.cr-wf__node--cr {
  background: rgba(206,255,41,.18);
  border: 1.5px solid var(--vaas-lime);
  color: var(--vaas-blue-deep);
  box-shadow: 0 0 0 4px rgba(206,255,41,.12), 0 12px 30px -8px rgba(206,255,41,.3);
}
.cr-wf__node--cr::after {
  border-top-color: rgba(206,255,41,.55);
}
.cr-wf__node--cr .cr-wf__node-ico {
  background: var(--vaas-lime);
  color: var(--vaas-blue-deep);
}
.cr-wf__conn--cr {
  background-image: linear-gradient(to right, rgba(206,255,41,.85) 50%, transparent 50%);
}

/* Detail card on cream */
.cr-wf__detail {
  background: #fff;
  border: 1px solid rgba(206,255,41,.4);
  box-shadow: 0 12px 30px -12px rgba(40,28,8,.1);
}
.cr-wf__detail-h { color: var(--vaas-blue-deep); }
.cr-wf__detail-h svg { color: var(--vaas-blue); }
.cr-wf__detail-d { color: rgba(0,11,88,.65); }
.cr-wf__detail-grid { border-top-color: rgba(0,11,88,.08); }
.cr-wf__detail-field span { color: rgba(0,11,88,.5); }
.cr-wf__detail-field b { color: var(--vaas-blue-deep); }

/* CTA on cream */
.cr-wf__cta {
  background: #fff;
  border-color: rgba(26,24,27,.1);
  color: var(--vaas-blue-deep);
}
.cr-wf__cta:hover {
  background: var(--vaas-blue-deep);
  border-color: var(--vaas-blue-deep);
  color: #fff;
}
.cr-wf__cta-l b { color: var(--vaas-blue-deep); }
.cr-wf__cta-l span { color: rgba(0,11,88,.65); }
.cr-wf__cta:hover .cr-wf__cta-l b { color: #fff; }
.cr-wf__cta:hover .cr-wf__cta-l span { color: rgba(255,255,255,.65); }


/* CRWorkflow. clickable monitoring pill + aligned detail card */
button.cr-wf__node {
  cursor: pointer;
  font-family: var(--font-display);
}
button.cr-wf__node--cr { transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out); }
button.cr-wf__node--cr:hover { transform: translateY(-1px); }

/* Chevron inside the monitoring pill */
.cr-wf__node-chev {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vaas-blue-deep);
  transition: transform 200ms var(--ease-out);
  opacity: .7;
  line-height: 1;
  margin-left: 2px;
}
.cr-wf__node-chev--up { transform: rotate(180deg); }
.cr-wf__node--open::after { display: none; }  /* hide the static down-arrow when expanded */

/* Detail card: align under the monitoring pill (rightmost node).
   The chain centers in the canvas, so right-align the detail card. */
.cr-wf__detail-row {
  justify-content: flex-end !important;
  margin-top: 24px !important;
  animation: cr-wf-fade 240ms cubic-bezier(.2,.7,.2,1);
}
@keyframes cr-wf-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cr-wf__detail {
  position: relative;
}
/* Connector arrow from monitoring pill down to detail card */
.cr-wf__detail::before {
  content: "";
  position: absolute;
  top: -12px; right: 60px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(206,255,41,.5);
}

@media (max-width: 720px) {
  .cr-wf__detail-row { justify-content: center !important; }
  .cr-wf__detail::before { right: 50%; transform: translateX(50%); }
}


/* CRWorkflow. interface chrome (top bar + step tabs + add-step button) */
.cr-wf__topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding: 20px 28px 12px;
}
.cr-wf__topbar-l {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.cr-wf__topbar-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.01em;
}
.cr-wf__topbar-draft {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  background: rgba(0,11,88,.06);
  color: rgba(0,11,88,.65);
  border-radius: 999px;
}
.cr-wf__topbar-publish {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  background: var(--vaas-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  opacity: .45;
  cursor: not-allowed;
}

.cr-wf__steptabs {
  display: flex; gap: 20px;
  padding: 0 28px;
  border-bottom: 1px solid rgba(0,11,88,.08);
  overflow-x: auto;
}
.cr-wf__steptab {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: rgba(0,11,88,.55);
  padding: 8px 0 12px;
  position: relative;
  white-space: nowrap;
  flex: 0 0 auto;
}
.cr-wf__steptab--active {
  color: var(--vaas-blue);
  font-weight: 500;
}
.cr-wf__steptab--active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--vaas-blue);
}
.cr-wf__steptab-x {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(0,11,88,.4);
  margin-left: 2px;
}

/* Canvas with dotted background like the real interface */
.cr-wf__canvas {
  position: relative;
  background-color: #fcfcfd;
  background-image: radial-gradient(rgba(0,11,88,.08) 1px, transparent 1px);
  background-size: 16px 16px;
  padding: 56px 28px 40px;
}

.cr-wf__addstep {
  position: absolute;
  top: 14px;
  right: 28px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
  background: var(--vaas-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Bigger pill nodes mirroring the real interface */
.cr-wf__node {
  padding: 12px 18px !important;
  font-size: 14px !important;
  gap: 10px;
  min-width: 200px;
  justify-content: flex-start;
  width: auto;
  flex: 0 0 auto;
}
.cr-wf__node-lbl { flex: 1; text-align: left; }
.cr-wf__node-ico {
  width: 26px !important; height: 26px !important;
  border-radius: 5px;
  flex: 0 0 26px !important;
}

/* Active monitoring pill: blue stroke like the reference (Reprovação automática) */
.cr-wf__node--cr {
  background: #fff !important;
  border: 1.5px solid var(--vaas-blue) !important;
  color: var(--vaas-blue-deep) !important;
  box-shadow: 0 0 0 4px rgba(4,52,244,.06), 0 12px 30px -8px rgba(4,52,244,.18) !important;
}
.cr-wf__node--cr::after { display: none; }
.cr-wf__node--cr .cr-wf__node-ico {
  background: rgba(4,52,244,.1) !important;
  color: var(--vaas-blue) !important;
}
.cr-wf__node-chev {
  color: var(--vaas-blue);
  opacity: 1;
  margin-left: 4px;
}
.cr-wf__conn--cr {
  background-image: linear-gradient(to right, rgba(4,52,244,.5) 50%, transparent 50%) !important;
  height: 1.5px !important;
}

/* Detail card aligned under the monitoring (last/right) pill, with name/description rows */
.cr-wf__detail-row {
  justify-content: flex-end !important;
  margin-top: 18px !important;
}
.cr-wf__detail {
  max-width: 460px;
  width: 100%;
  background: #fff !important;
  border: 1px solid rgba(0,11,88,.08) !important;
  border-radius: 8px;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 12px 30px -12px rgba(0,11,88,.15) !important;
}
.cr-wf__detail::before { display: none; }
.cr-wf__detail-section {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,11,88,.45);
  padding: 14px 18px 8px;
}
.cr-wf__detail-section--gap {
  padding-top: 18px;
  border-top: 1px solid rgba(0,11,88,.06);
  margin-top: 4px;
}
.cr-wf__detail-row-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 8px 18px;
  font-family: var(--font-display);
}
.cr-wf__detail-row-item:last-child { padding-bottom: 16px; }
.cr-wf__detail-row-item b {
  font-size: 13px;
  font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.cr-wf__detail-row-item span {
  font-size: 12.5px;
  color: rgba(0,11,88,.6);
  line-height: 1.4;
}

@media (max-width: 980px) {
  .cr-wf__node { min-width: 0; }
  .cr-wf__steptabs { gap: 14px; }
  .cr-wf__detail-row-item { grid-template-columns: 1fr; gap: 2px; }
  .cr-wf__detail-row-item b { font-size: 12.5px; }
}
@media (max-width: 720px) {
  .cr-wf__topbar { padding: 16px 18px 10px; }
  .cr-wf__steptabs { padding: 0 18px; }
  .cr-wf__canvas { padding: 56px 18px 32px; }
  .cr-wf__detail { max-width: 100%; }
}

/* CRWorkflow — minimalist vertical chain on mobile.
   Mirrors the treatment on /produto.html (.pv-wf-flow) so the steps
   stack with dashed vertical connectors instead of scrolling horizontally. */
@media (max-width: 980px) {
  /* Hide the "+ Adicionar etapa" affordance and let the canvas size to content */
  .cr-wf__addstep { display: none !important; }
  .cr-wf__canvas {
    padding: 24px 18px 28px !important;
    overflow: visible !important;
    background-image: none !important;
    background-color: #fcfcfd !important;
    border-top: 1px dashed rgba(0,11,88,.1);
    border-bottom: 1px dashed rgba(0,11,88,.1);
  }

  /* Vertical chain */
  .cr-wf__chain {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 0 !important;
  }
  .cr-wf__node {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    white-space: normal !important;
  }
  .cr-wf__node-lbl {
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /* Vertical dashed connectors between nodes */
  .cr-wf__conn {
    width: 1.5px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 auto !important;
    background-image: linear-gradient(to bottom, rgba(0,11,88,.22) 50%, transparent 50%) !important;
    background-size: 1.5px 5px !important;
  }
  .cr-wf__conn--cr {
    background-image: linear-gradient(to bottom, rgba(4,52,244,.5) 50%, transparent 50%) !important;
  }

  /* Active node: drop the down-arrow indicator (chevron + detail card already show state) */
  .cr-wf__node--cr::after { display: none !important; }

  /* Detail card sits full-width below the chain, no arrow needed */
  .cr-wf__detail-row {
    justify-content: stretch !important;
    margin-top: 14px !important;
  }
  .cr-wf__detail {
    max-width: 100% !important;
    width: 100% !important;
  }
  .cr-wf__detail::before { display: none !important; }
}


/* Alvo evolution chart polish */
.cr-alvo__chart { height: 180px !important; width: 100%; display: block; }
.cr-alvo__chart-x {
  padding: 0 12px;
}


/* Dashboard line chart polish */
.cr-dash__line-chart { height: 100px !important; }
.cr-dash__line-x { padding: 0 8px; margin-top: 6px; }


/* Dashboard line chart. full-width, HTML dots aligned with x-axis labels */
.cr-dash__line-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: 6px;
}
.cr-dash__line-chart {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.cr-dash__line-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #9d8bf0;
  transform: translate(-50%, -50%);
  margin-top: 8px;
  z-index: 1;
}
.cr-dash__line-dot--last {
  width: 10px; height: 10px;
  box-shadow: 0 0 0 6px rgba(157,139,240,.18);
}
.cr-dash__line-x {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9.5px;
  color: rgba(0,11,88,.5);
  margin-top: 4px;
  padding: 0;
}
.cr-dash__line-x span:first-child { transform: translateX(0); }
.cr-dash__line-x span:last-child { transform: translateX(0); }


/* Alvo line chart. full-width, HTML dots aligned with x-axis labels */
.cr-alvo__chart-area {
  position: relative;
  width: 100%;
  height: 200px;
  margin-top: 6px;
}
.cr-alvo__chart {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.cr-alvo__chart-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #9d8bf0;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.cr-alvo__chart-dot--last {
  width: 12px; height: 12px;
  box-shadow: 0 0 0 7px rgba(157,139,240,.18);
}
.cr-alvo__chart-x {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(0,11,88,.5);
  margin-top: 4px;
  padding: 0;
}


/* === Alvo chart, polished card === */
.cr-alvo__chart-card {
  margin: 24px 0;
  padding: 22px 24px 18px;
  background: #fafbfc;
  border: 1px solid rgba(0,11,88,.08);
  border-radius: 8px;
}
.cr-alvo__chart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.cr-alvo__chart-h {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.005em;
}
.cr-alvo__chart-legend {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(0,11,88,.55);
}
.cr-alvo__chart-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #9d8bf0;
}

.cr-alvo__chart-grid {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: stretch;
}
.cr-alvo__chart-y {
  display: flex; flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0,11,88,.4);
  text-align: right;
  padding-bottom: 12px;
}
.cr-alvo__chart-area {
  position: relative;
  width: 100%;
  height: 200px;
}
.cr-alvo__chart {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  overflow: visible;
}
.cr-alvo__chart-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #9d8bf0;
  transform: translate(-50%, -50%);
  margin-top: 10px;
  z-index: 1;
}
.cr-alvo__chart-dot--last {
  width: 14px; height: 14px;
  box-shadow: 0 0 0 7px rgba(157,139,240,.18);
  z-index: 2;
}
.cr-alvo__chart-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--vaas-blue-deep);
  color: #fff;
  font-family: var(--font-display);
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  display: flex; align-items: baseline; gap: 6px;
  box-shadow: 0 8px 20px -6px rgba(0,11,88,.3);
}
.cr-alvo__chart-tip::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--vaas-blue-deep);
}
.cr-alvo__chart-tip b {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cr-alvo__chart-tip em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,.6);
}

.cr-alvo__chart-xrow {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  margin-top: 6px;
}
.cr-alvo__chart-y-spacer { display: block; }
.cr-alvo__chart-x {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0,11,88,.5);
}
.cr-alvo__chart-x span {
  width: 0;
  white-space: nowrap;
  text-align: center;
  transform: translateX(-50%);
  position: relative;
}
.cr-alvo__chart-x span:first-child { transform: none; text-align: left; }
.cr-alvo__chart-x span:last-child  { transform: translateX(-100%); text-align: right; }

@media (max-width: 720px) {
  .cr-alvo__chart-card { padding: 18px 16px 14px; }
  .cr-alvo__chart-grid { grid-template-columns: 36px 1fr; gap: 8px; }
  .cr-alvo__chart-xrow { grid-template-columns: 36px 1fr; gap: 8px; }
  .cr-alvo__chart-x span { font-size: 9px; }
}