/* ==================================================
   Crédito. page-local styles
   Reusa colors_and_type.css e site.css. Prefixo: cr-
   ================================================== */

/* ============ Section shell ============ */
.cr-sec { padding: 120px 48px; }
.cr-sec--light { background: #fff; }
.cr-sec--gray  { background: #F8F9FC; }
.cr-sec--dark  {
  background: linear-gradient(180deg, #060814 0%, #0A0F22 100%);
  color: #fff;
}
.cr-sec__inner { max-width: 1280px; margin: 0 auto; }
.cr-sec__head { text-align: center; max-width: 820px; margin: 0 auto 64px; }
.cr-sec__kicker {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vaas-blue);
  margin-bottom: 16px;
}
.cr-sec--dark .cr-sec__kicker { color: var(--vaas-lime); }
/* Pílula de categoria: fundo arredondado para os eyebrows das seções.
   Usa currentColor, então adapta ao azul (seções claras) ou lime (seções escuras). */
.cr-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.cr-sec__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.04;
  margin: 0; color: var(--vaas-blue-deep);
  text-wrap: balance;
}
.cr-sec--dark .cr-sec__title { color: #fff; }
.cr-sec__title em { font-style: normal; color: var(--vaas-blue); }
.cr-sec--dark .cr-sec__title em { color: var(--vaas-lime); }
.cr-sec__title--left { text-align: left; }
.cr-sec__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55; color: var(--vaas-gray-700);
  margin: 22px auto 0; max-width: 720px;
  text-wrap: pretty;
}
.cr-sec--dark .cr-sec__sub { color: rgba(255,255,255,.72); }
.cr-sec__sub--left { text-align: left; margin-left: 0; }

/* ============ HERO ============ */
.cr-hero {
  position: relative;
  padding: 140px 48px 110px;
  background: var(--vaas-blue-deep);
  color: #fff; overflow: hidden;
}
.cr-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 480px at 80% 18%, rgba(205,255,41,.10), transparent 70%),
    radial-gradient(700px 420px at 8% 80%, rgba(4,52,244,.22), transparent 70%);
  pointer-events: none;
}
.cr-hero__inner {
  position: relative; z-index: 1;
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 72px;
  align-items: center;
}

/* ---- Texto (esquerda) ---- */
.cr-hero__txt { max-width: 600px; }
.cr-hero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 7px 12px; border-radius: 999px;
  margin-bottom: 26px;
}
.cr-hero__kicker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vaas-lime);
  box-shadow: 0 0 0 0 rgba(205,255,41,.6);
  animation: cr-pulse 1.8s infinite;
}
.cr-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.0;
  margin: 0; text-wrap: balance;
}
.cr-hero__title em { font-style: normal; color: var(--vaas-lime); }
.cr-hero__sub {
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.55; color: rgba(255,255,255,.72);
  margin: 26px 0 0; max-width: 540px;
  text-wrap: pretty;
}
.cr-hero__cta {
  display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap;
}
.cr-hero__tiles {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 580px;
}
.cr-hero__tile {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 18px 18px;
}
.cr-hero__tile-k {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em; line-height: 1;
}
.cr-hero__tile-k span {
  font-size: .65em;
  color: var(--vaas-lime);
  margin-left: 2px;
}
.cr-hero__tile-l {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: rgba(255,255,255,.55);
  margin-top: 10px; line-height: 1.45;
  text-transform: lowercase;
}

/* ---- Visual (direita). simulação ao vivo ---- */
.cr-hero__viz {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 18px;
  max-width: 560px;
  justify-self: end;
  width: 100%;
}

/* ============ SIDE LABELS. Sem / Com a VAAS ============ */
.cr-side { position: relative; display: flex; flex-direction: column; gap: 10px; }
.cr-side__label {
  display: inline-flex; align-items: center; gap: 9px;
  width: max-content;
  padding: 7px 13px 7px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em;
}
.cr-side__label b { font-weight: 800; letter-spacing: 0; }
.cr-side--off .cr-side__label {
  color: #FF8A7B;
  background: rgba(255,122,106,.10);
  border: 1px solid rgba(255,122,106,.28);
}
.cr-side--on .cr-side__label {
  color: var(--vaas-blue-deep);
  background: var(--vaas-lime);
  box-shadow: 0 10px 28px -10px rgba(205,255,41,.55);
}
.cr-side__label-x {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,122,106,.22);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0;
}
.cr-side__label-c {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--vaas-blue-deep);
  color: var(--vaas-lime);
}

/* ============ STUCK CARD. sua mesa, parada ============ */
.cr-stuck {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 20px 22px 18px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-areas:
    "head head"
    "client timer"
    "status timer"
    "queue queue";
  gap: 14px 18px;
  align-items: center;
  overflow: hidden;
}
.cr-stuck::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 12px,
      rgba(255,255,255,.018) 12px,
      rgba(255,255,255,.018) 13px
    );
  pointer-events: none;
}
.cr-stuck__head {
  grid-area: head;
  display: flex; justify-content: space-between; align-items: center;
}
.cr-stuck__tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; font-weight: 600;
  color: rgba(255,255,255,.55);
}
.cr-stuck__os {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .04em;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.05);
  padding: 3px 7px; border-radius: 3px;
}
.cr-stuck__client { grid-area: client; }
.cr-stuck__name {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.15;
  color: rgba(255,255,255,.92);
  margin-bottom: 4px;
}
.cr-stuck__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255,255,255,.5);
}
.cr-stuck__timer {
  grid-area: timer;
  text-align: right;
  border-left: 1px solid rgba(255,255,255,.10);
  padding-left: 18px;
  position: relative;
  z-index: 1;
}
.cr-stuck__timer-l {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .12em;
  color: rgba(255,255,255,.42);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cr-stuck__timer-v {
  font-family: var(--font-mono);
  font-size: 38px; font-weight: 600;
  color: #FF7A6A;
  letter-spacing: -.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(255,122,106,.25);
}
.cr-stuck__status {
  grid-area: status;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.04);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.06);
  width: max-content;
}
.cr-stuck__status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF7A6A;
  animation: cr-stuck-blink 1.6s infinite;
}
@keyframes cr-stuck-blink {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
.cr-stuck__queue {
  grid-area: queue;
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.cr-stuck__queue-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  overflow: hidden;
}
.cr-stuck__queue-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,122,106,.6), rgba(255,122,106,.95));
  border-radius: 999px;
}
.cr-stuck__queue-l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}

/* ============ VS. separador com badge de contraste ============ */
.cr-vs {
  display: flex; align-items: center; gap: 14px;
  padding: 0 4px;
}
.cr-vs__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205,255,41,.35), transparent);
}
.cr-vs__chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--vaas-lime);
  color: var(--vaas-blue-deep);
  padding: 7px 13px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 10px 26px -10px rgba(205,255,41,.5);
}

/* ============ LIVE CARD. concorrência com VAAS ============ */
.cr-live {
  background: #fff;
  border-radius: 16px;
  padding: 0;
  box-shadow:
    0 40px 100px -25px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cr-live__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,11,88,.025), transparent);
}
.cr-live__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6BBE5A;
  box-shadow: 0 0 0 0 rgba(107,190,90,.5);
  animation: cr-live-pulse 1.6s infinite;
}
@keyframes cr-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(107,190,90,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(107,190,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,190,90,0); }
}
.cr-live__l {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .14em; font-weight: 600;
  color: rgba(0,11,88,.55);
}
.cr-live__c {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  color: var(--vaas-blue);
  font-variant-numeric: tabular-nums;
}
.cr-live__rows {
  display: flex; flex-direction: column;
  flex: 1;
}
.cr-live__row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  animation: cr-live-rowin .42s cubic-bezier(.2,.8,.2,1) both;
}
.cr-live__row:last-child { border-bottom: none; }
@keyframes cr-live-rowin {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cr-live__row-l { min-width: 0; flex: 1; }
.cr-live__row-name {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -.005em;
  line-height: 1.15;
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-live__row-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,11,88,.5);
}
.cr-live__chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cr-live__chip--an {
  background: rgba(255,166,30,.12);
  color: #C77A0A;
}
.cr-live__chip-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: cr-live-blink .9s infinite;
}
@keyframes cr-live-blink {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
.cr-live__chip--aprov {
  background: rgba(107,190,90,.14);
  color: #4D8C3F;
  animation: cr-chip-pop .35s cubic-bezier(.2,.9,.3,1.4);
}
.cr-live__chip--mesa {
  background: var(--vaas-blue-10);
  color: var(--vaas-blue);
  animation: cr-chip-pop .35s cubic-bezier(.2,.9,.3,1.4);
}
.cr-live__chip--neg {
  background: rgba(255,90,90,.13);
  color: #C04444;
  animation: cr-chip-pop .35s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes cr-chip-pop {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* keyframe pulse. usado pelo kicker dot, badge e ticker */
@keyframes cr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(205,255,41,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(205,255,41,0); }
  100% { box-shadow: 0 0 0 0 rgba(205,255,41,0); }
}

/* ============================================================
   PROBLEMA. 3 dores em rows split (visual + texto)
   ============================================================ */
.cr-prob__rows { display: flex; flex-direction: column; gap: 80px; }
.cr-prob__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center;
}
.cr-prob__row--reverse > .cr-prob__visual { order: 2; }
.cr-prob__row--reverse > .cr-prob__copy   { order: 1; }

.cr-prob__visual {
  background: #FAFBFD;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  min-height: 320px;
  display: flex; flex-direction: column;
  justify-content: center;
}

.cr-prob__copy { padding: 8px 0; }
.cr-prob__num {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .1em;
  color: rgba(0,11,88,.35);
  margin-bottom: 14px;
}
.cr-prob__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vaas-blue);
  background: var(--vaas-blue-10);
  padding: 5px 10px; border-radius: 4px;
  margin-bottom: 18px;
}
.cr-prob__t {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--vaas-blue-deep);
  letter-spacing: -.015em; line-height: 1.18;
  margin: 0 0 16px;
  text-wrap: balance;
}
.cr-prob__d {
  font-size: 15.5px; line-height: 1.55;
  color: var(--vaas-gray-700);
  text-wrap: pretty; margin: 0 0 24px;
}
.cr-prob__stat {
  border-top: 1px dashed var(--border);
  padding-top: 16px;
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
}
.cr-prob__stat-k {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800;
  color: var(--vaas-blue);
  letter-spacing: -.02em; line-height: 1;
}
.cr-prob__stat-l {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .02em;
  color: var(--vaas-gray-700);
  line-height: 1.45;
  flex: 1;
}

/* Visual 1: tabs + sheet */
.cr-prob__tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cr-prob__tab {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--border);
  color: rgba(0,11,88,.55);
}
.cr-prob__tab--active {
  background: var(--vaas-blue-10);
  color: var(--vaas-blue);
  border-color: rgba(4,52,244,.15);
}
.cr-prob__tab--more { background: rgba(0,11,88,.06); border: none; }
.cr-prob__sheet {
  display: flex; flex-direction: column;
  font-family: var(--font-mono);
  font-size: 12px;
}
.cr-prob__sheet-row {
  display: grid; grid-template-columns: 28px 1fr 1fr;
  gap: 12px; align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,11,88,.06);
  color: var(--vaas-blue-deep);
}
.cr-prob__sheet-row > span:first-child { color: rgba(0,11,88,.4); }
.cr-prob__sheet-c { color: rgba(0,11,88,.7); }
.cr-prob__sheet-row--err { background: rgba(255,77,77,.05); }
.cr-prob__sheet-row--err .cr-prob__sheet-c:last-child { color: #C84A42; font-weight: 600; }
.cr-prob__sheet-row--cur { background: rgba(4,52,244,.04); }
.cr-prob__sheet-cursor {
  color: var(--vaas-blue);
  animation: cr-blink 1s infinite;
}
@keyframes cr-blink { 50% { opacity: 0; } }

/* Visual 2: bureau bars */
.cr-prob__bureau { display: flex; flex-direction: column; gap: 14px; }
.cr-prob__bureau-row {
  display: grid; grid-template-columns: 160px 1fr 50px;
  gap: 14px; align-items: center;
}
.cr-prob__bureau-l {
  font-size: 13px;
  color: var(--vaas-blue-deep);
}
.cr-prob__bureau-row--win .cr-prob__bureau-l b {
  color: var(--vaas-blue);
}
.cr-prob__bureau-bar {
  height: 14px;
  background: #ECEFF6;
  border-radius: 4px;
  overflow: hidden;
}
.cr-prob__bureau-fill { display: block; height: 100%; border-radius: 4px; }
.cr-prob__bureau-fill--low  { background: #E8716A; }
.cr-prob__bureau-fill--mid  { background: #F2A95C; }
.cr-prob__bureau-fill--high { background: var(--vaas-blue); }
.cr-prob__bureau-v {
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 600;
  text-align: right;
}
.cr-prob__bureau-v--low  { color: #C84A42; }
.cr-prob__bureau-v--mid  { color: #D08840; }
.cr-prob__bureau-v--high { color: var(--vaas-blue); }
.cr-prob__bureau-axis {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .04em;
  color: rgba(0,11,88,.45);
  margin-top: 6px;
  text-align: center;
}

/* Visual 3: sprint timeline */
.cr-prob__sprint { display: flex; flex-direction: column; gap: 24px; }
.cr-prob__sprint-line {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.cr-prob__sprint-line::before {
  content: ''; position: absolute;
  top: 6px; left: 6%; right: 6%;
  height: 2px; background: rgba(232,113,106,.3);
  z-index: 0;
}
.cr-prob__sprint-day {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.cr-prob__sprint-day::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #E8716A;
  margin-bottom: 8px;
  border: 3px solid #FAFBFD;
}
.cr-prob__sprint-day--start::before { background: #F2A95C; }
.cr-prob__sprint-day--end::before { background: #C84A42; }
.cr-prob__sprint-d {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--vaas-blue-deep);
}
.cr-prob__sprint-l {
  font-size: 11px; line-height: 1.35;
  color: var(--vaas-gray-700);
  margin-top: 4px;
}
.cr-prob__sprint-vaas {
  background: var(--vaas-blue-deep);
  color: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.cr-prob__sprint-vaas-tag {
  background: var(--vaas-lime);
  color: var(--vaas-blue-deep);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 9px;
  border-radius: 3px;
}
.cr-prob__sprint-vaas-l {
  font-size: 14px;
  color: rgba(255,255,255,.92);
}
.cr-prob__sprint-vaas-l b { color: var(--vaas-lime); }

/* ============================================================
   CARTEIRAS. showcase tabbed (estilo Beside)
   ============================================================ */
.cr-port__tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
  margin: 0 auto 28px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(0,11,88,.04);
  overflow-x: auto;
  scrollbar-width: none;
}
.cr-port__tabs::-webkit-scrollbar { display: none; }
.cr-port__tab {
  font-family: var(--font-sans);
  font-size: 14.5px; font-weight: 500;
  color: rgba(0,11,88,.55);
  background-color: transparent;
  border: none;
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.cr-port__tab:hover:not(.cr-port__tab--active) {
  color: var(--vaas-blue-deep);
}
.cr-port__tab.cr-port__tab--active {
  background-color: #000b58;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(0,11,88,.25);
}

.cr-port__stage {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 1px 2px rgba(0,11,88,.03);
}
.cr-port__stage-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 8px;
  align-items: stretch;
  min-height: 480px;
}

/* Sidebar (esquerda) */
.cr-port__side {
  padding: 38px 36px 36px;
  display: flex; flex-direction: column;
}
.cr-port__side-t {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 26px);
  font-weight: 700;
  color: var(--vaas-blue-deep);
  letter-spacing: -.015em; line-height: 1.2;
  margin: 0 0 12px;
}
.cr-port__side-d {
  font-size: 14.5px; line-height: 1.55;
  color: var(--vaas-gray-700);
  margin: 0 0 28px;
  text-wrap: pretty;
}

.cr-port__feats {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.cr-port__feats li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}
.cr-port__feat-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--vaas-blue-10);
  color: var(--vaas-blue);
  margin-top: 1px;
}
.cr-port__feat-l {
  font-size: 14px; font-weight: 600;
  color: var(--vaas-blue-deep);
  line-height: 1.3;
}
.cr-port__feat-d {
  font-size: 13px; line-height: 1.5;
  color: var(--vaas-gray-700);
  margin-top: 3px;
  text-wrap: pretty;
}

.cr-port__chips {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.cr-port__chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--vaas-blue-deep);
  background: rgba(0, 11, 88, 0.05);
  padding: 4px 9px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cr-port__regs {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.cr-port__regs-l {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cr-port__regs-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cr-port__reg {
  font-size: 11px;
  color: var(--fg-muted);
  padding: 0;
  background: none;
  border: 0;
}
.cr-port__reg + .cr-port__reg::before {
  content: "·";
  margin-right: 6px;
  color: var(--border);
}
.cr-port__mock-item-dot--warn { background: #f59e0b !important; }
  background: var(--vaas-blue-10);
  color: var(--vaas-blue-deep);
  padding: 4px 9px;
  border-radius: 4px;
}

/* Viz (direita) */
.cr-port__viz {
  background: #F4F5F9;
  border-radius: 14px;
  padding: 38px 36px 36px;
  display: flex; align-items: flex-start; justify-content: center;
  position: relative;
  overflow: hidden;
  animation: cr-port-fade .35s var(--ease-out) both;
}
@keyframes cr-port-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mockup base */
.cr-port__mock {
  width: 100%; max-width: 540px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: 0 10px 30px -16px rgba(0,11,88,.18);
  display: flex; flex-direction: column;
  gap: 14px;
}
.cr-port__mock-decision {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .02em;
}
.cr-port__mock-decision--ok {
  background: rgba(107,190,90,.12);
  color: #5BA34A;
}
.cr-port__mock-decision--mesa {
  background: rgba(91,141,239,.12);
  color: #4A75D8;
}
.cr-port__mock-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

/* Mockup. Consignado */
.cr-port__mock--consig { gap: 14px; }
.cr-port__mock-head {
  display: flex; justify-content: space-between; align-items: center;
}
.cr-port__mock-tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .12em; font-weight: 600;
  color: var(--vaas-blue);
}
.cr-port__mock-os {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .06em;
  color: rgba(0,11,88,.4);
  background: rgba(0,11,88,.05);
  padding: 3px 7px; border-radius: 3px;
}
.cr-port__mock-row {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cr-port__mock-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--vaas-blue-10);
  color: var(--vaas-blue);
  display: flex; align-items: center; justify-content: center;
}
.cr-port__mock-id { flex: 1; }
.cr-port__mock-name {
  font-size: 13.5px; font-weight: 600;
  color: var(--vaas-blue-deep);
}
.cr-port__mock-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,11,88,.5);
  margin-top: 2px;
}
.cr-port__mock-margin-l {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
  color: var(--vaas-gray-700);
  margin-bottom: 6px;
}
.cr-port__mock-margin-pct {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 700;
  color: var(--vaas-blue);
}
.cr-port__mock-margin-bar {
  height: 8px;
  background: #ECEFF6;
  border-radius: 999px;
  overflow: hidden;
}
.cr-port__mock-margin-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--vaas-blue), var(--vaas-lime));
  border-radius: 999px;
}
.cr-port__mock-margin-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,11,88,.55);
  margin-top: 6px;
}

/* Mockup. CLT */
.cr-port__mock-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.cr-port__mock-tab {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500;
  color: rgba(0,11,88,.5);
  padding: 5px 9px;
  border-radius: 4px;
}
.cr-port__mock-tab--active {
  background: rgba(107,190,90,.14);
  color: #5BA34A;
}
.cr-port__mock-list { display: flex; flex-direction: column; }
.cr-port__mock-item {
  display: grid; grid-template-columns: 12px 1fr auto;
  gap: 10px; align-items: center;
  padding: 7px 0;
  font-size: 12.5px;
  border-bottom: 1px dashed rgba(0,11,88,.06);
}
.cr-port__mock-item:last-child { border-bottom: none; }
.cr-port__mock-item-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.cr-port__mock-item-dot--ok { background: #6BBE5A; }
.cr-port__mock-item-l { color: var(--vaas-blue-deep); }
.cr-port__mock-item-v {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(0,11,88,.7);
}

/* Mockup. Seguro Garantia */
.cr-port__mock-doc {
  position: relative;
  background: #F8F9FC;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.cr-port__mock-doc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cr-port__mock-doc-tag {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .08em; font-weight: 600;
  color: rgba(0,11,88,.55);
}
.cr-port__mock-doc-prog {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #5BA34A;
}
.cr-port__mock-doc-lines {
  display: flex; flex-direction: column; gap: 4px;
  position: relative; z-index: 0;
}
.cr-port__mock-doc-lines > span {
  display: block; height: 5px;
  background: rgba(0,11,88,.10);
  border-radius: 2px;
}
.cr-port__mock-doc-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}
.cr-port__mock-doc-pin {
  position: absolute;
  width: 28px; height: 18px;
  background: var(--vaas-blue);
  color: #fff;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 4px 10px -3px rgba(4,52,244,.4);
}
.cr-port__mock-kpi {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px 12px;
  background: #F8F9FC;
  border-radius: 6px;
}
.cr-port__mock-kpi-cell {
  display: flex; flex-direction: column;
  text-align: center;
  font-family: var(--font-mono);
}
.cr-port__mock-kpi-cell > span {
  font-size: 9.5px; letter-spacing: .04em;
  color: rgba(0,11,88,.5);
  margin-bottom: 2px;
}
.cr-port__mock-kpi-cell > b {
  font-size: 14px; font-weight: 700;
  color: var(--vaas-blue-deep);
  font-family: var(--font-display);
}
.cr-port__mock-kpi-good { color: #5BA34A !important; }

/* Mockup. PJ matriz */
.cr-port__mock--pj { gap: 12px; }
.cr-port__mock-pj-head {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cr-port__mock-pj-cnpj {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .06em;
  color: rgba(0,11,88,.5);
}
.cr-port__mock-pj-name {
  font-size: 13.5px; font-weight: 600;
  color: var(--vaas-blue-deep);
}
.cr-port__mock-matrix {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.cr-port__mock-matrix-cell {
  aspect-ratio: 1.6 / 1;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  position: relative;
}
.cr-port__mock-matrix-cell[data-q="aa"] { background: #6BBE5A; color: #fff; }
.cr-port__mock-matrix-cell[data-q="a"]  { background: #C5DC52; color: var(--vaas-blue-deep); }
.cr-port__mock-matrix-cell[data-q="b"]  { background: #F2D560; color: var(--vaas-blue-deep); }
.cr-port__mock-matrix-cell[data-q="c"]  { background: #F2A95C; color: #fff; }
.cr-port__mock-matrix-cell[data-q="d"]  { background: #E8716A; color: #fff; }
.cr-port__mock-matrix-cell--active {
  outline: 3px solid var(--vaas-blue);
  outline-offset: 2px;
  z-index: 1;
}
.cr-port__mock-pj-axes {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .04em;
  color: rgba(0,11,88,.45);
}

/* ============================================================
   PIPELINE. rail (cards conectados por →) + panel detalhado
   Espelha o estilo "arquitetura" da página de produto.
   ============================================================ */
.cr-arch__flow {
  max-width: 1240px;
  margin: 0 auto;
}
.cr-arch__rail {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.cr-arch__node {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
}
.cr-arch__node-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  font-family: inherit;
  position: relative;
  min-width: 130px;
}
.cr-arch__node-btn:hover {
  border-color: var(--vaas-blue);
  transform: translateY(-2px);
}
.cr-arch__node.is-active .cr-arch__node-btn {
  background: var(--vaas-blue);
  border-color: var(--vaas-blue);
  color: #fff;
}
.cr-arch__node-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--vaas-blue);
  font-weight: 500;
}
.cr-arch__node.is-active .cr-arch__node-num { color: var(--vaas-lime); }
.cr-arch__node-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.005em;
}
.cr-arch__node.is-active .cr-arch__node-label { color: #fff; }
.cr-arch__node-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-strong, #d0d5e0);
  transition: all 200ms;
}
.cr-arch__node.is-active .cr-arch__node-dot {
  background: var(--vaas-lime);
  box-shadow: 0 0 0 4px rgba(206, 255, 31, .25);
}
.cr-arch__node-arrow {
  margin: 0 8px;
  font-size: 18px;
  color: var(--border-strong, #d0d5e0);
  font-weight: 300;
}

.cr-arch__panel {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 48px;
  row-gap: 16px;
  align-items: start;
  padding: 48px;
  background: var(--vaas-gray-50, #f6f6f6);
  border: 1px solid var(--border);
  border-radius: 14px;
  animation: cr-arch-fade 320ms var(--ease-out);
}
@keyframes cr-arch-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cr-arch__panel-head {
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 32px;
  border-right: 1px solid var(--border);
  min-width: 140px;
}
.cr-arch__panel-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: -0.04em;
  color: var(--vaas-blue);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cr-arch__panel-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vaas-gray-700);
}
.cr-arch__panel-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--vaas-blue-deep);
  margin: 0;
  grid-column: 2;
}
.cr-arch__panel-desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--vaas-gray-700);
  margin: 0;
  grid-column: 2;
  max-width: 640px;
}
.cr-arch__panel-bullets {
  list-style: none;
  margin: 0; padding: 0;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cr-arch__panel-bullets li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px;
  color: var(--vaas-blue-deep);
}
.cr-arch__bullet-dot {
  width: 5px; height: 5px;
  background: var(--vaas-blue);
  flex-shrink: 0;
}

/* ============================================================
   DIFERENCIAIS. bento box (estilo Beside)
   ============================================================ */
.cr-diff__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}
.cr-diff__head .cr-sec__kicker { margin-bottom: 12px; }
.cr-diff__head .cr-sec__sub { margin-top: 18px; }
/* Header dos diferenciais centralizado: anula os modificadores --left. */
.cr-diff__head .cr-sec__title--left,
.cr-diff__head .cr-sec__sub--left { text-align: center; }
.cr-diff__head .cr-sec__sub--left { margin-left: auto; margin-right: auto; }

.cr-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: 18px;
}
.cr-bento__card {
  grid-column: span 4;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 26px 26px 24px;
  display: flex; flex-direction: column;
  min-height: 320px;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.cr-bento__card:hover {
  border-color: rgba(4,52,244,.25);
  transform: translateY(-2px);
}
.cr-bento__card--wide  { grid-column: span 5; }
.cr-bento__card--xwide { grid-column: span 7; }
.cr-bento__card--full  { grid-column: span 12; }

/* Clients grid 3-col quando o card ocupa a linha inteira */
.cr-bento__card--full .cr-bento__clients {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  padding: 6px 18px;
}
.cr-bento__card--full .cr-bento__client {
  padding: 16px 0;
  border-bottom: none;
  border-right: 1px solid var(--border);
  padding-right: 18px;
}
.cr-bento__card--full .cr-bento__client:last-child { border-right: none; padding-right: 0; }

/* Card "Análise de balanço" em largura total: copy à esquerda,
   exemplo visual ampliado à direita. */
.cr-bento__card--ia {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  column-gap: 44px;
  align-items: center;
}
.cr-bento__ia-copy { align-self: center; }
.cr-bento__ia-copy .cr-bento__d { margin-bottom: 0; max-width: 42ch; }
.cr-bento__viz--ia {
  margin-top: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 40px 44px;
  min-height: 248px;
}
.cr-bento__viz--ia .cr-dv-ia {
  grid-template-columns: 1fr 48px 1fr;
  gap: 6px;
}
.cr-bento__viz--ia .cr-dv-ia-doc { padding: 20px 20px; gap: 10px; border-radius: 8px; }
.cr-bento__viz--ia .cr-dv-ia-doc-tag { font-size: 11px; margin-bottom: 6px; }
.cr-bento__viz--ia .cr-dv-ia-doc-line { height: 8px; border-radius: 3px; }
.cr-bento__viz--ia .cr-dv-ia-arrow svg { width: 40px; height: 18px; }
.cr-bento__viz--ia .cr-dv-ia-out { padding: 18px 18px; gap: 7px; font-size: 14px; border-radius: 8px; }
.cr-bento__viz--ia .cr-dv-ia-out-row { padding: 5px 0; }
.cr-bento__viz--ia .cr-dv-ia-out-acc { font-size: 12.5px; padding: 6px 8px; margin-top: 8px; }
@media (max-width: 1000px) {
  .cr-bento__card--ia { grid-template-columns: 1fr; row-gap: 22px; }
  .cr-bento__viz--ia { min-height: 0; padding: 28px; }
}
@media (max-width: 1000px) {
  .cr-bento__card--full .cr-bento__clients { grid-template-columns: 1fr; padding: 8px 16px; }
  .cr-bento__card--full .cr-bento__client {
    padding: 14px 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
  }
  .cr-bento__card--full .cr-bento__client:last-child { border-bottom: none; }
}

.cr-bento__head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 10px;
}
.cr-bento__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--vaas-blue-deep);
  flex-shrink: 0;
}
.cr-bento__t {
  font-family: var(--font-display);
  font-size: 16.5px; font-weight: 700;
  color: var(--vaas-blue-deep);
  letter-spacing: -.005em; line-height: 1.25;
  margin: 0;
}
.cr-bento__d {
  font-size: 13.5px; line-height: 1.55;
  color: var(--vaas-gray-700);
  margin: 0 0 22px;
  text-wrap: pretty;
  max-width: 38ch;
}

.cr-bento__viz {
  margin-top: auto;
  background: #FAFBFD;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 22px 20px;
  min-height: 150px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Sources list (card "calibrados para o Brasil") ---- */
.cr-bento__sources {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
.cr-bento__sources li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.cr-bento__src-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vaas-blue);
  margin-left: 3px;
}
.cr-bento__src-l {
  color: var(--vaas-blue-deep);
  font-weight: 500;
}
.cr-bento__src-meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .02em;
  color: rgba(0,11,88,.5);
}

.cr-bento__stat {
  margin-top: auto;
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.cr-bento__stat-k {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 800;
  color: var(--vaas-blue);
  letter-spacing: -.03em; line-height: 1;
}
.cr-bento__stat-k span {
  color: var(--vaas-lime);
  font-size: .7em;
  margin-left: 1px;
}
.cr-bento__stat-l {
  font-size: 13px; line-height: 1.45;
  color: var(--vaas-gray-700);
  flex: 1;
}

/* ---- Clients (card "em produção") ---- */
.cr-bento__clients {
  margin-top: auto;
  background: #FAFBFD;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 8px 16px;
}
.cr-bento__client {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cr-bento__client:last-child { border-bottom: none; }
.cr-bento__client-name {
  font-size: 14.5px; font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -.005em;
}
.cr-bento__client-vert {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,11,88,.5);
  margin-top: 4px;
}
.cr-bento__client-tag {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .06em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.cr-bento__client-tag--ok {
  background: rgba(107,190,90,.14);
  color: #5BA34A;
}
.cr-bento__client-tag--ok::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6BBE5A;
  margin-right: 6px;
  vertical-align: middle;
  animation: cr-pulse 1.8s infinite;
}

/* ---- Visual: speed (gauge bar) */
.cr-dv-speed {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.cr-dv-speed-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--vaas-blue-deep);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
}
.cr-dv-speed-pill b {
  color: var(--vaas-lime);
  font-family: var(--font-mono);
  font-size: 14px;
}
.cr-dv-speed-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vaas-lime);
  animation: cr-pulse 1.6s infinite;
}
.cr-dv-speed-bar {
  position: relative;
  width: 100%;
  height: 12px;
  background: #ECEFF6;
  border-radius: 6px;
  overflow: visible;
}
.cr-dv-speed-bar-fill {
  display: block;
  width: 8%;
  height: 100%;
  background: linear-gradient(90deg, var(--vaas-blue), var(--vaas-lime));
  border-radius: 6px;
  animation: cr-speedfill 1.4s var(--ease-out) infinite alternate;
}
@keyframes cr-speedfill {
  from { width: 4%; }
  to   { width: 12%; }
}
.cr-dv-speed-bar-tick {
  position: absolute;
  top: -6px; bottom: -6px;
  width: 2px;
  background: var(--vaas-blue-deep);
}
.cr-dv-speed-foot {
  width: 100%;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(0,11,88,.45);
}

/* ---- Visual: ia (doc → out) */
.cr-dv-ia {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.cr-dv-ia-doc {
  background: #F8F9FC;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.cr-dv-ia-doc-tag {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .08em; font-weight: 600;
  color: rgba(0,11,88,.5);
  margin-bottom: 4px;
}
.cr-dv-ia-doc-line {
  height: 5px;
  background: rgba(0,11,88,.12);
  border-radius: 2px;
}
.cr-dv-ia-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--vaas-blue);
}
.cr-dv-ia-out {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  box-shadow: 0 8px 20px -10px rgba(4,52,244,.18);
}
.cr-dv-ia-out-row {
  display: flex; justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(0,11,88,.07);
}
.cr-dv-ia-out-row:last-of-type { border-bottom: none; }
.cr-dv-ia-out-row > span { color: rgba(0,11,88,.6); }
.cr-dv-ia-out-row > b { color: var(--vaas-blue-deep); }
.cr-dv-ia-out-acc {
  margin-top: 6px;
  padding: 4px 6px;
  background: rgba(107,190,90,.14);
  color: #5BA34A;
  border-radius: 3px;
  font-size: 10px;
  text-align: center;
  letter-spacing: .04em;
}

/* ---- Visual: BR (globo + lista) */
.cr-dv-br {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: center;
  width: 100%;
}
.cr-dv-br-globe {
  position: relative;
  width: 130px; height: 130px;
}
.cr-dv-br-globe-bg {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(4,52,244,.18), transparent 60%),
    radial-gradient(circle at 60% 60%, rgba(205,255,41,.12), transparent 60%),
    var(--vaas-blue-deep);
  border: 1px solid rgba(255,255,255,.04);
}
.cr-dv-br-globe-bg::after {
  content: '';
  position: absolute; inset: 14%;
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 50%;
}
.cr-dv-br-pin {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vaas-lime);
  box-shadow: 0 0 0 0 rgba(205,255,41,.6);
  animation: cr-pulse 2s infinite;
}
.cr-dv-br-pin--1 { top: 30%; left: 38%; animation-delay: 0s; }
.cr-dv-br-pin--2 { top: 45%; left: 55%; animation-delay: .3s; }
.cr-dv-br-pin--3 { top: 58%; left: 32%; animation-delay: .6s; }
.cr-dv-br-pin--4 { top: 38%; left: 62%; animation-delay: .9s; }
.cr-dv-br-pin--5 { top: 70%; left: 50%; animation-delay: 1.2s; }
.cr-dv-br-pin--6 { top: 22%; left: 50%; animation-delay: 1.5s; }
.cr-dv-br-list {
  display: flex; flex-direction: column; gap: 6px;
}
.cr-dv-br-list > span {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--vaas-blue-10);
  color: var(--vaas-blue-deep);
  padding: 5px 9px;
  border-radius: 4px;
}

/* ---- Visual: nocode (rules editor) */
.cr-dv-nc {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
}
.cr-dv-nc-rule {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.cr-dv-nc-if {
  font-weight: 700;
  color: rgba(0,11,88,.45);
  letter-spacing: .04em;
}
.cr-dv-nc-if--then { color: var(--vaas-blue); }
.cr-dv-nc-pill {
  background: var(--vaas-blue-10);
  color: var(--vaas-blue-deep);
  padding: 3px 7px;
  border-radius: 3px;
}
.cr-dv-nc-pill--editing {
  background: var(--vaas-lime);
  color: var(--vaas-blue-deep);
  font-weight: 700;
  position: relative;
}
.cr-dv-nc-pill--editing::after {
  content: '|';
  margin-left: 2px;
  animation: cr-blink 1s infinite;
}
.cr-dv-nc-pill--out {
  background: var(--vaas-blue-deep);
  color: var(--vaas-lime);
  font-weight: 600;
}
.cr-dv-nc-op { color: rgba(0,11,88,.55); font-weight: 700; }
.cr-dv-nc-rule--then { background: #F8F9FC; }
.cr-dv-nc-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(0,11,88,.5);
  padding-top: 4px;
}
.cr-dv-nc-status {
  display: flex; align-items: center; gap: 6px;
}
.cr-dv-nc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6BBE5A;
}

/* ---- Visual: audit (timeline) */
.cr-dv-audit {
  display: flex; flex-direction: column;
  width: 100%;
}
.cr-dv-audit-head {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cr-dv-audit-tag {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .1em; font-weight: 600;
  color: rgba(0,11,88,.5);
}
.cr-dv-audit-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,11,88,.06);
}
.cr-dv-audit-step--end { border-bottom: none; }
.cr-dv-audit-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(0,11,88,.45);
}
.cr-dv-audit-l {
  font-size: 12px;
  color: var(--vaas-blue-deep);
}
.cr-dv-audit-l b { color: var(--vaas-blue); }
.cr-dv-audit-foot {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0,11,88,.45);
  text-align: center;
}

/* ---- Visual: prod (live stack) */
.cr-dv-prod {
  width: 100%;
  display: flex; flex-direction: column; gap: 14px;
}
.cr-dv-prod-stack {
  display: flex; flex-direction: column; gap: 6px;
}
.cr-dv-prod-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.cr-dv-prod-name {
  font-size: 13px; font-weight: 600;
  color: var(--vaas-blue-deep);
}
.cr-dv-prod-tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 3px;
}
.cr-dv-prod-tag--ok {
  background: rgba(107,190,90,.16);
  color: #5BA34A;
}
.cr-dv-prod-foot {
  background: var(--vaas-blue-deep);
  color: #fff;
  padding: 12px 14px;
  border-radius: 6px;
  text-align: center;
}
.cr-dv-prod-foot-k {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800;
  color: var(--vaas-lime);
  letter-spacing: -.02em;
  line-height: 1;
}
.cr-dv-prod-foot-l {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .04em;
  color: rgba(255,255,255,.6);
  margin-top: 6px;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1100px) {
  .cr-hero { padding: 120px 32px 90px; }
  .cr-hero__inner { grid-template-columns: 1fr; gap: 64px; }
  .cr-hero__viz { height: auto; max-width: 560px; margin: 0 auto; width: 100%; justify-self: center; }
  .cr-stuck { grid-template-columns: 1fr; grid-template-areas: "head" "client" "timer" "status" "queue"; }
  .cr-stuck__timer { border-left: 0; padding-left: 0; text-align: left; }
  .cr-sec { padding: 90px 32px; }
  .cr-prob__row, .cr-prob__row--reverse { grid-template-columns: 1fr; gap: 32px; }
  .cr-prob__row--reverse > .cr-prob__visual,
  .cr-prob__row--reverse > .cr-prob__copy { order: initial; }
  .cr-port__stage-grid { grid-template-columns: 1fr; min-height: 0; }
  .cr-port__side { padding: 32px 28px 28px; }
  .cr-port__viz { min-height: 380px; padding: 28px; }
  .cr-arch__rail { align-items: stretch; }
  .cr-arch__node { flex-direction: column; }
  .cr-arch__node-arrow { transform: rotate(90deg); margin: 4px 0; }
  .cr-arch__node-btn { width: 100%; }
  .cr-arch__panel {
    grid-template-columns: 1fr;
    padding: 32px 28px;
  }
  .cr-arch__panel-head {
    grid-row: auto;
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0 0 18px;
  }
  .cr-arch__panel-num { font-size: 48px; }
  .cr-arch__panel-title,
  .cr-arch__panel-desc,
  .cr-arch__panel-bullets { grid-column: 1; }

  .cr-bento { grid-template-columns: repeat(6, 1fr); }
  .cr-bento__card { grid-column: span 3; min-height: 280px; }
  .cr-bento__card:nth-child(3) { grid-column: span 6; }
  .cr-bento__card--wide,
  .cr-bento__card--xwide { grid-column: span 6; }
  .cr-bento__card--full  { grid-column: span 6; }
}
@media (max-width: 720px) {
  .cr-hero { padding: 100px 20px 80px; }
  .cr-sec { padding: 72px 20px; }
  .cr-hero__tiles { grid-template-columns: 1fr 1fr; gap: 10px; max-width: none; }
  .cr-hero__tile-k { font-size: 26px; }
  .cr-stuck { padding: 18px 18px 16px; }
  .cr-stuck__timer-v { font-size: 32px; }
  .cr-stuck__name { font-size: 17px; }
  .cr-live__row { padding: 10px 14px; }
  .cr-live__head { padding: 11px 14px; }
  .cr-live__row-name { font-size: 13.5px; }
  .cr-live__chip { font-size: 10px; padding: 4px 8px; }
  .cr-arch__node-btn { min-width: 0; padding: 12px 14px; }
  .cr-arch__node-label { font-size: 13px; }
  .cr-arch__panel { padding: 24px 20px; }
  .cr-arch__panel-title { font-size: 22px; }
  .cr-arch__panel-desc { font-size: 14.5px; }
  .cr-prob__sprint-line { grid-template-columns: 1fr 1fr; gap: 16px; }
  .cr-prob__sprint-line::before { display: none; }
  .cr-prob__bureau-row { grid-template-columns: 110px 1fr 44px; gap: 8px; }
  .cr-port__viz { min-height: 340px; padding: 22px; }
  .cr-port__side { padding: 26px 22px 22px; }
  .cr-port__tabs { gap: 4px; padding: 4px; }
  .cr-port__tab { padding: 9px 14px; font-size: 13px; }

  .cr-bento { grid-template-columns: 1fr; }
  .cr-bento__card,
  .cr-bento__card--wide,
  .cr-bento__card--xwide,
  .cr-bento__card--full { grid-column: span 1; min-height: 0; padding: 22px 20px 20px; }
  .cr-bento__viz { padding: 18px 16px; }

  .cr-dv-br { grid-template-columns: 1fr; }
  .cr-dv-br-globe { margin: 0 auto; }
  .cr-dv-ia { grid-template-columns: 1fr; }
  .cr-dv-ia-arrow { transform: rotate(90deg); }
}

/* ============ CALCULADORA DE ECONOMIA (nativa) ============ */
.cr-calc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 120px 48px;
  background: var(--vaas-blue);
  color: #fff;
}
.cr-calc__bg-pic { display: none; }
.cr-calc__bg-pic .cr-calc__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}
.cr-calc::after { display: none; }
.cr-calc__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.cr-calc__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.cr-calc__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vaas-lime);
  margin-bottom: 20px;
  padding: 6px 12px;
  border: 1px solid rgba(205,255,41,.4);
  border-radius: 999px;
}
.cr-calc__kicker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vaas-lime);
  box-shadow: 0 0 10px var(--vaas-lime);
}
.cr-calc__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.cr-calc__title em {
  font-style: normal;
  color: var(--vaas-lime);
}
.cr-calc__sub {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  margin: 0;
}

/* --- Panel --- */
.cr-calc__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(0,11,88,.55), 0 16px 32px -12px rgba(0,11,88,.35);
}

/* --- Inputs (left) --- */
.cr-calc__inputs {
  padding: 40px 40px 44px;
  background: #fff;
  color: var(--vaas-blue-deep);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cr-calc__inputs-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vaas-gray-700);
}
/* Distribui os campos por toda a altura do painel, alinhando o rodapé
   esquerdo com o CTA do resultado à direita. */
.cr-calc__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.cr-calc__field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cr-calc__field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--vaas-blue-deep);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.cr-calc__field-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--vaas-gray-700);
  text-transform: none;
}
.cr-calc__field-row {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.cr-calc__field-row:focus-within {
  border-color: var(--vaas-blue);
  box-shadow: 0 0 0 4px rgba(4,52,244,.10);
}
.cr-calc__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vaas-blue-tint, rgba(4,52,244,.04));
  border: 0;
  color: var(--vaas-blue);
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.cr-calc__step:last-child {
  border-right: 0;
  border-left: 1px solid var(--border);
}
.cr-calc__step:hover { background: var(--vaas-blue); color: #fff; }
.cr-calc__step:disabled {
  opacity: .4;
  cursor: not-allowed;
  background: transparent;
  color: var(--vaas-gray-700);
}
.cr-calc__field-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
}
.cr-calc__field-value input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--vaas-blue-deep);
  padding: 18px 0;
  letter-spacing: -0.01em;
}
.cr-calc__field-value input::placeholder {
  font-family: var(--font-sans, var(--font-mono));
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--vaas-gray-700);
  opacity: .65;
}
.cr-calc__field-row--empty { border-style: dashed; }
.cr-calc__field-affix {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--vaas-gray-700);
  font-weight: 500;
}

/* --- Result (right) --- */
.cr-calc__result {
  padding: 40px 40px 44px;
  background: var(--vaas-blue-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cr-calc__result::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(4,52,244,.35) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(205,255,41,.10) 0%, transparent 60%);
  z-index: -1;
}
.cr-calc__result-tag {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vaas-lime);
  padding: 5px 10px;
  border: 1px solid rgba(205,255,41,.4);
  border-radius: 999px;
}
.cr-calc__result-hero { display: flex; flex-direction: column; gap: 8px; }
.cr-calc__result-eyebrow {
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.cr-calc__result-amount {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.2vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vaas-lime);
  font-variant-numeric: tabular-nums;
}

/* Resumo compacto: custo atual + economia anual */
.cr-calc__summary {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.12);
}
.cr-calc__sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.cr-calc__sum-row:last-child { border-bottom: 0; }
.cr-calc__sum-label {
  font-size: 14.5px;
  color: rgba(255,255,255,.78);
}
.cr-calc__sum-value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.cr-calc__sum-value--accent { color: var(--vaas-lime); }

.cr-calc__cta {
  margin-top: 4px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cr-calc__legal {
  max-width: 720px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .cr-calc { padding: 80px 32px; }
  .cr-calc__head { margin-bottom: 40px; }
  .cr-calc__panel { grid-template-columns: 1fr; }
  .cr-calc__inputs { padding: 32px; }
  .cr-calc__result { padding: 32px; }
}
@media (max-width: 720px) {
  .cr-calc { padding: 64px 20px; }
  .cr-calc__title { font-size: 30px; }
  .cr-calc__inputs { padding: 28px 22px; gap: 18px; }
  .cr-calc__result { padding: 28px 22px; }
  .cr-calc__result-amount { font-size: 42px; }
  .cr-calc__field-value input { font-size: 16px; padding: 11px 0; }
  .cr-calc__cta { align-self: stretch; justify-content: center; }
}

/* ============================================================
   CTA FINAL (crédito). chevron-tape azul apontando para a direita
   ============================================================ */
.crc-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(440px, 40vw, 660px);
  padding: 72px 9%;
  text-align: center;
  background-color: #0c3cf6;
  background-image: url('../assets/credito-cta-chevron.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.crc-cta__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 20px;
}
.crc-cta__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.crc-cta__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.crc-cta__title-lime { color: var(--vaas-lime); }
.crc-cta__title-white { color: #fff; }
.crc-cta__sub {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: rgba(255,255,255,.86);
  max-width: 600px;
  margin: 0 auto 36px;
  text-wrap: pretty;
}
.crc-cta__row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .crc-cta { min-height: 0; padding: 64px 26px; background-size: cover; }
}
@media (max-width: 560px) {
  .crc-cta { padding: 52px 22px; }
  .crc-cta__row { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   CALLOUT DE MATERIAL (estudo de caso) após a calculadora.
   Mesmo padrão do callout de ebook da página de IA.
   ============================================================ */
.cr-ebook-sec { padding: 80px 24px 100px; }
.cr-ebook {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 52px 52px 48px;
  background: var(--vaas-blue-deep);
  color: #fff;
  border-radius: 16px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cr-ebook::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(205,255,41,.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 80%, rgba(4,52,244,.4), transparent 60%);
}
.cr-ebook > * { position: relative; z-index: 1; }
.cr-ebook__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vaas-lime);
  background: rgba(205,255,41,.12);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 18px;
}
.cr-ebook__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.12; margin: 0 0 14px; text-wrap: balance;
}
.cr-ebook__sub { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0 0 20px; }
.cr-ebook__bullets { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 8px; }
.cr-ebook__bullets li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.5;
}
.cr-ebook__bullets li::before { content: "+"; color: var(--vaas-lime); font-family: var(--font-mono); }
.cr-ebook__cta { display: inline-flex; align-self: flex-start; }
.cr-ebook__r { display: grid; place-items: center; }
.cr-ebook__img {
  display: block; width: 100%; max-width: 300px; height: auto;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: transform 220ms var(--ease-out);
}
.cr-ebook:hover .cr-ebook__img { transform: translateY(-3px); }
@media (max-width: 860px) {
  .cr-ebook { grid-template-columns: 1fr; gap: 30px; padding: 36px 24px; }
  .cr-ebook__r { order: -1; }
  .cr-ebook__img { max-width: 200px; }
}

/* ============================================================
   AVATAR (logo do cliente em formato de bola) nos depoimentos.
   Clientes anonimizados por setor: usamos um monograma tintado.
   ============================================================ */
.v-testi-feature__id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.v-testi-feature__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--vaas-blue);
  background: rgba(4, 52, 244, 0.10);
  box-shadow: inset 0 0 0 1px rgba(4, 52, 244, 0.16);
}

/* Bola menor na lista lateral de cases. Scoped to credito page to avoid bleed. */
.v-testi--credito .v-testi-feature__client {
  grid-template-columns: 3px 36px 1fr;
  align-items: center;
  column-gap: 12px;
}
.v-testi-feature__client-avatar {
  grid-row: 1 / 3;
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--vaas-gray-700, #555);
  background: var(--vaas-gray-100, #eef1f7);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.v-testi-feature__client--active .v-testi-feature__client-avatar {
  background: var(--vaas-blue);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--vaas-blue);
}
@media (max-width: 560px) {
  .v-testi-feature__avatar { width: 40px; height: 40px; font-size: 13px; }
}