/**
 * Backlab Solutions Overview — intro, cinco soluções e fechamento do hub /solucoes/.
 * Sem JavaScript: o estado base e o estado final são o mesmo (mesma decisão do Método
 * e da Prova Social). Sequência editorial/estrutural; cada solução mantém o mesmo sistema
 * visual (traços finos, vector-effect non-scaling-stroke, turquesa como acento), diferenciada
 * apenas pela composição do glifo (estrutura, grid, vetores, pipeline, ciclo).
 */

section.bl-solutions-overview.bl-scope {
  position: relative;
  margin: 0;
  background-color: var(--bl-bg-primary, #080c0c);
  color: var(--bl-text-primary, #f5f8f7);
}

.bl-solutions-overview,
.bl-solutions-overview *,
.bl-solutions-overview *::before,
.bl-solutions-overview *::after {
  box-sizing: border-box;
}

.bl-solutions-overview__inner {
  padding-block: clamp(5rem, 8vw, 7.5rem) clamp(4rem, 6vw, 6rem);
}

.bl-solutions-overview__intro {
  max-inline-size: 78rem;
}

.bl-solutions-overview__eyebrow,
.bl-solutions-overview__closing-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--bl-text-secondary, #a8b4b1);
  font-size: clamp(.67rem, .64rem + .12vw, .78rem);
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.bl-solutions-overview__eyebrow::before,
.bl-solutions-overview__closing-eyebrow::before {
  inline-size: clamp(1.75rem, 3vw, 3.25rem);
  block-size: 1px;
  background: linear-gradient(90deg, var(--bl-color-brand, #3dbfb0), rgba(61, 191, 176, .15));
  content: '';
}

.bl-solutions-overview__intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .8fr);
  align-items: end;
  gap: clamp(2.5rem, 6vw, 7rem);
}

.bl-solutions-overview__headline {
  max-inline-size: 20ch;
  margin: 0;
  color: var(--bl-text-primary, #f5f8f7);
  font-family: inherit;
  font-size: var(--bl-type-page-h1, clamp(2.4rem, 1.4rem + 4.5vw, 5.2rem));
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.bl-solutions-overview__lead {
  max-inline-size: 40ch;
  margin: 0 0 .35rem;
  color: var(--bl-text-secondary, #a8b4b1);
  font-size: clamp(1rem, .94rem + .28vw, 1.15rem);
  line-height: 1.62;
}

/* Lista das cinco soluções: sequência editorial contínua, sem cards. */
.bl-solutions-overview__list {
  display: flex;
  flex-direction: column;
  margin: clamp(4.5rem, 7vw, 7rem) 0 0;
  padding: 0;
  border-block-start: 1px solid var(--bl-border, rgba(255, 255, 255, .08));
  list-style: none;
}

.bl-solutions-overview__item {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 6.5rem);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  border-block-end: 1px solid var(--bl-border, rgba(255, 255, 255, .08));
}

.bl-solutions-overview__item:nth-child(even) {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.05fr);
}

.bl-solutions-overview__item:nth-child(even) .bl-solutions-overview__content { order: 2; }
.bl-solutions-overview__item:nth-child(even) .bl-solutions-overview__visual { order: 1; }

.bl-solutions-overview__content { max-inline-size: 34rem; }

.bl-solutions-overview__meta {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
}

.bl-solutions-overview__number {
  color: var(--bl-color-brand, #3dbfb0);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
}

.bl-solutions-overview__phase {
  position: relative;
  padding-inline-start: .9rem;
  color: var(--bl-text-muted, #71807d);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.bl-solutions-overview__phase::before {
  position: absolute;
  inset: 50% auto auto 0;
  inline-size: .3rem;
  block-size: 1px;
  background: var(--bl-text-muted, #71807d);
  content: '';
}

.bl-solutions-overview__title {
  margin: 0;
  color: var(--bl-text-primary, #f5f8f7);
  font-family: inherit;
  font-size: var(--bl-type-section-h2, clamp(1.85rem, 1.1rem + 2.8vw, 3.4rem));
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.bl-solutions-overview__problem {
  max-inline-size: 32ch;
  margin: clamp(1.1rem, 1.8vw, 1.5rem) 0 0;
  color: var(--bl-text-secondary, #a8b4b1);
  font-size: clamp(1.02rem, .97rem + .2vw, 1.15rem);
  font-weight: 500;
  line-height: 1.55;
}

.bl-solutions-overview__description {
  max-inline-size: 36ch;
  margin: .9rem 0 0;
  color: var(--bl-text-secondary, #a8b4b1);
  font-size: .95rem;
  line-height: 1.65;
}

.bl-solutions-overview__capabilities {
  display: grid;
  gap: .5rem;
  margin: clamp(1.5rem, 2.4vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}

.bl-solutions-overview__capabilities li {
  position: relative;
  padding-inline-start: 1.1rem;
  color: var(--bl-text-secondary, #a8b4b1);
  font-size: .88rem;
  line-height: 1.5;
}

.bl-solutions-overview__capabilities li::before {
  position: absolute;
  inset: .5em auto auto 0;
  inline-size: .3rem;
  block-size: .3rem;
  background: rgba(61, 191, 176, .55);
  content: '';
}

/* CTA das soluções (Fase 12.1): área maior, hairline própria, presença comercial sem virar botão. */
.bl-solutions-overview .bl-solutions-overview__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-block-size: 3rem;
  margin-block-start: clamp(1.75rem, 2.6vw, 2.25rem);
  padding-inline: .1rem;
  border-block-start: 1px solid var(--bl-border, rgba(255, 255, 255, .08));
  color: var(--bl-text-primary, #f5f8f7);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 220ms ease, background-color 220ms ease, padding-inline-start 220ms var(--bl-ease-out, ease);
}

.bl-solutions-overview__cta::after {
  position: absolute;
  inset: -1px 0 auto 0;
  block-size: 1px;
  background: var(--bl-color-brand, #3dbfb0);
  content: '';
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--bl-ease-out, ease);
}

.bl-solutions-overview__cta svg { flex-shrink: 0; transition: transform 220ms var(--bl-ease-out, ease); }

.bl-solutions-overview__cta:focus-visible {
  outline: var(--bl-focus-width, 2px) solid var(--bl-color-brand, #3dbfb0);
  outline-offset: var(--bl-focus-offset, 4px);
  border-radius: var(--bl-radius-sm, .375rem);
}

@media (hover: hover) and (pointer: fine) {
  .bl-solutions-overview .bl-solutions-overview__cta:hover {
    padding-inline-start: .85rem;
    background: rgba(61, 191, 176, .04);
    color: var(--bl-color-brand-light, #6ed7cb);
  }

  .bl-solutions-overview__cta:hover::after { transform: scaleX(1); }
  .bl-solutions-overview__cta:hover svg { transform: translateX(5px); }
}

@media (max-width: 767px) {
  .bl-solutions-overview .bl-solutions-overview__cta {
    inline-size: 100%;
    justify-content: space-between;
    min-block-size: 3.25rem;
    border-block-end: 1px solid var(--bl-border, rgba(255, 255, 255, .08));
  }
}

/* Palco do visual: a moldura e o stage obedecem à mesma lógica nas cinco soluções. */
.bl-solutions-overview__visual {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(100%, 28rem);
  aspect-ratio: 1;
  min-block-size: clamp(300px, 28vw, 460px);
  padding: clamp(1rem, 3vw, 1.75rem);
  box-sizing: border-box;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--bl-border, rgba(255, 255, 255, .08));
  border-radius: var(--bl-radius-md, .75rem);
  background: linear-gradient(160deg, rgba(255, 255, 255, .014), transparent 60%);
  contain: layout paint;
}

/* O stage nunca depende de offsets por viewport: cada arte centraliza sua bounding box real. */
.bl-so-visual-stage {
  position: relative;
  display: grid;
  place-items: center;
  max-inline-size: 100%;
  max-block-size: 100%;
  transform-origin: center center;
}

.bl-so-visual-stage--identity { inline-size: min(88%, 22rem); aspect-ratio: 260 / 210; }
.bl-so-visual-stage--site { inline-size: 86%; aspect-ratio: 4 / 3; }
.bl-so-visual-stage--trafego { inline-size: 76%; aspect-ratio: 200 / 210; }
.bl-so-visual-stage--pipeline { inline-size: 92%; aspect-ratio: 10 / 7; }
.bl-so-visual-stage--cs { inline-size: 86%; aspect-ratio: 1; }

/* ---------- Marca: sistema de identidade em construção, sem logo ou nome Backlab ---------- */
.bl-so-identity {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.bl-so-identity__guides {
  stroke: rgba(245, 248, 247, .12);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}

.bl-so-identity__axis {
  stroke: rgba(61, 191, 176, .44);
  stroke-dasharray: none;
}

.bl-so-identity__element { transform-box: fill-box; transform-origin: center; }
.bl-so-identity__element rect { fill: rgba(245, 248, 247, .74); }
.bl-so-identity__element .bl-so-identity__muted { fill: rgba(245, 248, 247, .28); }
.bl-so-identity__circle { fill: rgba(61, 191, 176, .14); stroke: var(--bl-color-brand, #3dbfb0); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.bl-so-identity__circle-dot { fill: var(--bl-color-brand, #3dbfb0); }
.bl-so-identity__element .bl-so-identity__block { fill: rgba(61, 191, 176, .12); stroke: rgba(61, 191, 176, .62); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-identity__block-lines { stroke: rgba(61, 191, 176, .52); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-identity__element .bl-so-identity__module { fill: rgba(245, 248, 247, .1); stroke: rgba(245, 248, 247, .32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-identity__element .bl-so-identity__module:nth-child(2) { fill: rgba(61, 191, 176, .7); stroke: var(--bl-color-brand, #3dbfb0); }
.bl-so-identity__rule { stroke: rgba(245, 248, 247, .48); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bl-so-identity__rule--short { stroke: rgba(61, 191, 176, .75); }
.bl-so-identity__marker { stroke: var(--bl-color-brand-light, #6ed7cb); fill: var(--bl-bg-primary, #080c0c); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }

/* ---------- Sites: interface sendo construída ---------- */
.bl-so-site {
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: center;
}

.bl-so-site__frame {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border: 1px solid var(--bl-border, rgba(255, 255, 255, .1));
  border-radius: .5rem;
  background: var(--bl-surface-1, #0d1312);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
  transform-origin: 50% 50%;
  will-change: transform;
}

.bl-so-site__chrome {
  display: flex;
  gap: .3rem;
  padding: .5rem .6rem;
  border-block-end: 1px solid var(--bl-border, rgba(255, 255, 255, .08));
}

.bl-so-site__chrome i {
  display: block;
  inline-size: .4rem;
  block-size: .4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.bl-so-site__body {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: .85rem;
}

.bl-so-site__header {
  inline-size: 40%;
  block-size: .55rem;
  border-radius: .2rem;
  background: rgba(255, 255, 255, .1);
}

.bl-so-site__nav { display: flex; gap: .4rem; }
.bl-so-site__nav span { inline-size: 1.4rem; block-size: .3rem; border-radius: .15rem; background: rgba(255, 255, 255, .14); }

.bl-so-site__hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: start;
  gap: .6rem;
  margin-block-start: .3rem;
}

.bl-so-site__hero-text { display: flex; flex-direction: column; gap: .4rem; }
.bl-so-site__line { block-size: .38rem; border-radius: .15rem; background: rgba(255, 255, 255, .22); }
.bl-so-site__line--lg { inline-size: 92%; }
.bl-so-site__line--md { inline-size: 65%; background: rgba(255, 255, 255, .14); }
.bl-so-site__btn { inline-size: 2.4rem; block-size: .7rem; margin-block-start: .3rem; border-radius: .35rem; background: var(--bl-color-brand, #3dbfb0); }

.bl-so-site__hero-media {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(61, 191, 176, .25);
  border-radius: .3rem;
  background: linear-gradient(135deg, rgba(61, 191, 176, .22), rgba(61, 191, 176, .04));
}

.bl-so-site__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-block-start: .2rem; }
.bl-so-site__grid span { aspect-ratio: 1 / .7; border: 1px solid rgba(255, 255, 255, .08); border-radius: .25rem; background: rgba(255, 255, 255, .06); }

/* ---------- Tráfego Pago: funil de aquisição ---------- */
.bl-so-traf { inline-size: 100%; block-size: 100%; overflow: visible; }

.bl-so-traf__funnel {
  fill: rgba(61, 191, 176, .05);
  stroke: rgba(61, 191, 176, .55);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bl-so-traf__stem {
  fill: rgba(61, 191, 176, .05);
  stroke: rgba(61, 191, 176, .4);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.bl-so-traf__divider {
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}

.bl-so-traf__label {
  font-family: var(--bl-font-ui, sans-serif);
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: .04em;
  fill: var(--bl-text-muted, #71807d);
  text-transform: uppercase;
}

.bl-so-traf__label--accent { fill: var(--bl-color-brand, #3dbfb0); }
.bl-so-traf__node { fill: rgba(245, 248, 247, .55); }
.bl-so-traf__output { fill: var(--bl-color-brand-light, #6ed7cb); filter: drop-shadow(0 0 4px rgba(61, 191, 176, .6)); }

/* ---------- Estruturação Comercial: pipeline ---------- */
.bl-so-pipe { inline-size: 100%; block-size: 100%; overflow: visible; }
.bl-so-pipe__track { stroke: rgba(255, 255, 255, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-pipe__divider { stroke: rgba(255, 255, 255, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-pipe__stage-fill { fill: transparent; transition: fill 220ms ease; }

.bl-so-pipe__label {
  font-family: var(--bl-font-ui, sans-serif);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: .05em;
  fill: var(--bl-text-muted, #71807d);
  text-transform: uppercase;
  transition: fill 220ms ease;
}

.bl-so-pipe__label--accent { fill: var(--bl-color-brand, #3dbfb0); }
.bl-so-pipe__card { fill: rgba(245, 248, 247, .7); }
.bl-so-pipe__card[data-bl-so-pipe-card='3'] { fill: var(--bl-color-brand-light, #6ed7cb); }
.bl-so-pipe__badge-fill { fill: rgba(61, 191, 176, .12); stroke: var(--bl-color-brand, #3dbfb0); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-pipe__badge-check { fill: none; stroke: var(--bl-color-brand, #3dbfb0); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

@media (hover: hover) and (pointer: fine) {
  .bl-so-pipe__stage:hover .bl-so-pipe__stage-fill { fill: rgba(61, 191, 176, .05); }
  .bl-so-pipe__stage:hover .bl-so-pipe__label { fill: var(--bl-text-primary, #f5f8f7); }
}

/* ---------- Sucesso do Cliente: personagem de CS ---------- */
.bl-so-cs { inline-size: 100%; block-size: 100%; overflow: visible; }
.bl-so-cs__ring-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

.bl-so-cs__ring {
  fill: none;
  stroke: var(--bl-color-brand, #3dbfb0);
  stroke-width: 1.6;
  stroke-linecap: round;
  /* Circunferência real de um círculo r=52 (2 * PI * 52). Sem non-scaling-stroke aqui: junto com
     stroke-dasharray/dashoffset ele recalcula o comprimento do traço em unidades de tela e o laço
     fechava de forma incorreta (arco parcial em vez do círculo completo). */
  stroke-dasharray: 326.73;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
}

.bl-so-cs__body { fill: var(--bl-surface-3, #192522); stroke: rgba(61, 191, 176, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-cs__head { fill: var(--bl-surface-3, #192522); stroke: rgba(61, 191, 176, .4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bl-so-cs__headset, .bl-so-cs__headset-boom { fill: none; stroke: var(--bl-text-secondary, #a8b4b1); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bl-so-cs__headset-node, .bl-so-cs__headset-mic { fill: var(--bl-color-brand, #3dbfb0); }

.bl-so-cs__eye { fill: var(--bl-text-primary, #f5f8f7); }

.bl-so-cs__smile { fill: none; stroke: var(--bl-text-secondary, #a8b4b1); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bl-so-cs__bubble { opacity: .92; }
.bl-so-cs__bubble-fill { fill: var(--bl-surface-2, #121b19); stroke: rgba(255, 255, 255, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }

.bl-so-cs__bubble-dot {
  fill: var(--bl-color-brand, #3dbfb0);
  transform-box: fill-box;
  transform-origin: center;
}

.bl-so-cs__check-fill { fill: var(--bl-surface-1, #0d1312); stroke: var(--bl-color-brand-light, #6ed7cb); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.bl-so-cs__check-mark { fill: none; stroke: var(--bl-color-brand-light, #6ed7cb); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Fechamento: reaproveita a assinatura comercial, composição diferente da Signature da Home. */
.bl-solutions-overview__closing {
  border-block-start: 1px solid var(--bl-border, rgba(255, 255, 255, .08));
  background: var(--bl-surface-1, #0d1312);
}

.bl-solutions-overview__closing-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}

.bl-solutions-overview__closing-eyebrow { margin-block-end: clamp(1rem, 1.6vw, 1.5rem); }

.bl-solutions-overview__closing-headline {
  max-inline-size: 22ch;
  margin: 0;
  color: var(--bl-text-primary, #f5f8f7);
  font-family: inherit;
  font-size: var(--bl-type-section-h2, clamp(1.85rem, 1.1rem + 2.8vw, 3.4rem));
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.bl-solutions-overview__closing-text {
  max-inline-size: 30ch;
  margin: .9rem 0 0;
  color: var(--bl-text-secondary, #a8b4b1);
  font-size: 1rem;
  line-height: 1.6;
}

.bl-solutions-overview__closing-inner > :first-child,
.bl-solutions-overview__closing-inner > :nth-child(-n + 3) {
  flex: 1 1 28rem;
}

.bl-solutions-overview .bl-solutions-overview__closing-cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .55rem;
  min-block-size: 3.25rem;
  padding-inline: 1.6rem;
  border-radius: var(--bl-radius-sm, .375rem);
  background: var(--bl-color-brand, #3dbfb0);
  color: var(--bl-bg-deep, #050707);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 200ms var(--bl-ease-out, ease), background-color 200ms ease;
}

.bl-solutions-overview__closing-cta svg { transition: transform 200ms var(--bl-ease-out, ease); }

.bl-solutions-overview__closing-cta:focus-visible {
  outline: var(--bl-focus-width, 2px) solid var(--bl-color-brand, #3dbfb0);
  outline-offset: var(--bl-focus-offset, 4px);
}

@media (hover: hover) and (pointer: fine) {
  .bl-solutions-overview__closing-cta:hover {
    background: var(--bl-color-brand-light, #6ed7cb);
    transform: translateY(-1px);
  }

  .bl-solutions-overview__closing-cta:hover svg { transform: translateX(3px); }
}

@media (max-width: 1023px) {
  .bl-solutions-overview__intro-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .bl-solutions-overview__item,
  .bl-solutions-overview__item:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 2.5rem);
  }

  .bl-solutions-overview__item:nth-child(even) .bl-solutions-overview__content,
  .bl-solutions-overview__item:nth-child(even) .bl-solutions-overview__visual {
    order: initial;
  }

  .bl-solutions-overview__content { max-inline-size: 34rem; }

  .bl-solutions-overview__visual { inline-size: min(100%, 20rem); }
}

@media (max-width: 767px) {
  .bl-solutions-overview__inner {
    padding-block: clamp(4rem, 16vw, 5rem) clamp(3rem, 10vw, 4rem);
  }

  .bl-solutions-overview__headline {
    max-inline-size: 14ch;
  }

  .bl-solutions-overview__lead { max-inline-size: 30ch; }

  .bl-solutions-overview__list { margin-block-start: clamp(3.5rem, 14vw, 4.5rem); }

  .bl-solutions-overview__item { padding-block: clamp(3rem, 12vw, 3.75rem); }



  .bl-solutions-overview__problem,
  .bl-solutions-overview__description { max-inline-size: none; }

  .bl-solutions-overview__visual { inline-size: min(100%, 15rem); min-block-size: clamp(240px, 62vw, 300px); }
  .bl-so-visual-stage--identity { inline-size: 90%; }
  .bl-so-visual-stage--trafego { inline-size: 78%; }
  .bl-so-visual-stage--pipeline { inline-size: 94%; }
  .bl-so-visual-stage--cs { inline-size: 88%; }

  .bl-solutions-overview__closing-inner { flex-direction: column; align-items: flex-start; }

  /* flex: 1 1 28rem (regra acima, para o layout em linha do desktop) vira um flex-basis de
     ALTURA de 448px assim que a direção muda para coluna — eyebrow, headline e texto ficavam
     forçados a essa altura mínima cada, abrindo um vazio enorme antes do CTA final. */
  .bl-solutions-overview__closing-inner > :first-child,
  .bl-solutions-overview__closing-inner > :nth-child(-n + 3) {
    flex-basis: auto;
  }

  .bl-solutions-overview__closing-cta { inline-size: min(100%, 22rem); justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-solutions-overview__cta,
  .bl-solutions-overview__cta::after,
  .bl-solutions-overview__cta svg,
  .bl-solutions-overview__closing-cta,
  .bl-solutions-overview__closing-cta svg,
  .bl-so-pipe__stage-fill,
  .bl-so-pipe__label {
    transition-duration: .01ms;
  }
}

@media (forced-colors: active) {
  .bl-solutions-overview__list,
  .bl-solutions-overview__item,
  .bl-solutions-overview__visual,
  .bl-solutions-overview__closing {
    border-color: CanvasText;
  }

  .bl-solutions-overview__closing-cta { border: 1px solid ButtonText; }
}