/* =========================================================
   ENS — Assessoria de Marketing Digital
   Estilos EXCLUSIVOS desta página.

   Os tokens (cores, raios, sombras, container), o header, o
   rodapé, os botões, a abertura, o aviso de cookies e o
   componente de FAQ vêm de styles.css, que carrega antes.
   Aqui não se redefine nada disso — só o que é próprio das
   12 dobras.

   Prefixo .asr- em tudo: styles.css e este arquivo convivem no
   mesmo documento e nenhum seletor daqui pode alcançar a home.
   ========================================================= */

/* ---------------------------------------------------------
   Peças comuns às dobras
   --------------------------------------------------------- */
/* o azul dos eyebrows (--blue) não passa no contraste sobre os
   fundos escuros; este é o mesmo azul claro do hero da home. */
.asr-eyebrow-claro { color: #6E93F2; }

/* o traço curto que a home usa em .problem .rule — aqui separa o
   enunciado das perguntas da conclusão que vem depois delas */
.asr-regra { width: 2.625rem; height: 3px; background: var(--red); border-radius: 3px; margin: 1.25rem 0; }

/* botão com seta: a seta anda para a direita no hover.
   .btn já é inline-flex com gap, então basta o ícone. */
.asr-btn-seta .ico { width: 1.05rem; height: 1.05rem; transition: transform .25s var(--ease-out); }
.asr-btn-seta:hover .ico { transform: translateX(4px); }

/* ---------------------------------------------------------
   VERMELHO — o da marca, sem tom intermediário

   Havia aqui um vermelho clareado (#FF5A60) para ganhar
   contraste sobre o fundo escuro. Saiu a pedido do cliente:
   ele lia como um vermelho lavado, não como o vermelho da ENS.
   Agora é --red (#E51E25) em toda a página, claro e escuro.

   Onde ele entra é sempre TÍTULO — texto grande e negrito, que
   passa com folga no contraste (limite de 3:1). O corpo de
   texto voltou ao branco, então não sobrou vermelho pequeno
   sobre escuro.
   --------------------------------------------------------- */
.asr-realce { color: var(--red); }       /* frase-chave dentro de H2 */

/* Ênfase em corpo de texto: de volta ao branco. Em vermelho, o negrito
   virava um bloco de destaque grande demais dentro do parágrafo — em
   três linhas seguidas (Dobra 5) competia com o próprio título. */
.asr-hero-lead strong { color: #DCE4F5; font-weight: 700; }
.asr-versus-texto p strong,
.asr-comercial-head p strong,
.asr-alternativa-texto p strong { color: #fff; font-weight: 700; }

/* =========================================================
   DOBRA 1 — HERO
   Texto à esquerda, painel à direita. O fundo é o mesmo preto do
   hero da home, então as duas páginas abrem com a mesma cor.
   ========================================================= */
.asr-hero {
  position: relative;
  background: #05070E;
  color: #fff;
  padding-top: clamp(112px, 11vw, 168px);
  padding-bottom: clamp(40px, 5vw, 78px);
  overflow: hidden;
}
/* brilho vermelho no canto superior direito — é o que impede o
   bloco de virar um retângulo preto chapado atrás do painel. */
.asr-hero::before {
  content: "";
  position: absolute; top: -18%; right: -8%;
  width: 58%; height: 90%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(229,30,37,.18), transparent 70%);
  pointer-events: none;
}

/* ---------------------------------------------------------
   AS LISTRAS DO CANTO

   No wireframe elas não são retas: são ARCOS concêntricos
   nascendo de um ponto fora da tela, no alto à direita, e
   abrindo para baixo e para a esquerda. Um repeating-radial-
   gradient com o centro fora do bloco é exatamente isso — e
   custa uma declaração, sem imagem e sem SVG.

   A máscara é o que impede o enfeite de virar poluição: as
   linhas só existem na faixa da direita e já sumiram bem
   antes de chegar na coluna de texto. Sobre o título elas
   nunca aparecem.
   --------------------------------------------------------- */
.asr-hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 116% -12%,
    transparent 0 44px,
    rgba(229,30,37,.34) 44px 45.4px,
    transparent 45.4px 90px);
  /* 250deg = opaco no alto à direita, dissolvendo para a esquerda
     e para baixo, no mesmo sentido em que os arcos se abrem */
  -webkit-mask-image: linear-gradient(250deg, #000 0%, rgba(0,0,0,.5) 30%, transparent 58%);
          mask-image: linear-gradient(250deg, #000 0%, rgba(0,0,0,.5) 30%, transparent 58%);
  /* entram depois da cortina de abertura, junto com o resto do hero.
     Uma vez só: nada aqui fica animando para sempre. */
  opacity: 0;
}
html:not(.intro-ativa) .asr-hero::after {
  animation: asr-listras 1.5s var(--ease-out) .35s forwards;
}
@keyframes asr-listras { to { opacity: 1; } }
.asr-hero-wrap {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: center;
}
.asr-hero-texto h1 {
  color: #fff;
  font-size: clamp(1.75rem, 2.85vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  overflow-wrap: break-word;
}
.asr-hero-lead {
  color: #A0ABC4;
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 1.66;
  max-width: 52ch;
  margin-bottom: .9rem;
}
.asr-hero-texto .btn { margin-top: 14px; }

.asr-hero-painel { position: relative; }

/* =========================================================
   O PAINEL DO HERO — desenhado, não fotografado

   Era um JPEG de 152 KB. Agora é HTML + SVG: pesa ~4 KB, é
   nítido em qualquer densidade de tela e, principalmente,
   REFLUI no celular — a imagem só encolhia até os números
   ficarem ilegíveis.

   Tudo aqui é ilustração: os números são de exemplo. Por isso
   o contentor é role="img" e nada de informação vive atrás do
   hover — os efeitos são enfeite de ponteiro, não conteúdo.

   O tamanho do texto vem de --u, um "passo" que acompanha a
   largura da tela. Assim o painel inteiro escala junto, como
   escalaria uma imagem, mas sem borrar.
   ========================================================= */
.pnl {
  /* medida-base em vw: funciona em qualquer navegador */
  --u: clamp(9px, .82vw, 13px);
  --pnl-linha-cor: rgba(255,255,255,.07);
  --pnl-cinza: #39404F;
  --pnl-cinza-esc: #333A49;
  display: grid;
  gap: calc(var(--u) * .85);
  padding: calc(var(--u) * 1.15);
  border-radius: 16px;
  background: linear-gradient(180deg, #0A0F18, #05070E);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}
/* Onde houver suporte, a medida passa a seguir a LARGURA DO PRÓPRIO
   PAINEL (cqw) em vez da largura da janela. É o que resolve o caso do
   tablet: ali o hero empilha, o painel dobra de largura e continuaria
   com a letra de antes — com vw ele não tem como saber que cresceu.
   Dentro de @supports porque um cqw não reconhecido invalidaria --u e
   levaria junto todos os calc() do painel. */
@supports (container-type: inline-size) {
  .asr-hero-painel { container-type: inline-size; }
  .pnl { --u: clamp(10.5px, 2.42cqw, 13.5px); }
}

/* ---------- os quatro indicadores ---------- */
.pnl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * .7); }
.pnl-kpi {
  padding: calc(var(--u) * .85) calc(var(--u) * .9);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--pnl-linha-cor);
  transition: border-color .25s ease, background-color .25s ease, transform .25s var(--ease-out);
}
.pnl-kpi-topo {
  display: flex; align-items: flex-start; gap: calc(var(--u) * .5);
  color: #C7D1E4; font-size: calc(var(--u) * 1.05); line-height: 1.25;
}
.pnl-kpi-topo .ico {
  width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9);
  flex: none; stroke-width: 1.5; color: #fff;
  transition: color .25s ease, transform .25s var(--ease-out);
}
.pnl-kpi-num {
  display: block; margin-top: calc(var(--u) * .55);
  color: #fff; font-size: calc(var(--u) * 1.95); font-weight: 800;
  letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
  /* "R$ 21,40" é o mais largo e quebrava em duas linhas, desalinhando
     a altura dos quatro cartões */
  white-space: nowrap;
}

/* ---------- cartões dos gráficos ---------- */
.pnl-meio { display: grid; grid-template-columns: 1.42fr 1fr; gap: calc(var(--u) * .85); }
.pnl-card {
  padding: calc(var(--u) * .9);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--pnl-linha-cor);
  transition: border-color .25s ease;
}
.pnl-card:hover { border-color: rgba(255,255,255,.16); }
.pnl-titulo { color: #E4EAF5; font-size: calc(var(--u) * 1.08); font-weight: 500; margin-bottom: calc(var(--u) * .7); }

/* ---------- gráfico de linha ---------- */
.pnl-linha-svg { width: 100%; height: calc(var(--u) * 10.5); display: block; overflow: visible; }
.pnl-grade line { stroke: rgba(255,255,255,.13); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; }
.pnl-eixo line { stroke: rgba(255,255,255,.22); stroke-width: 1; }
.pnl-curva {
  fill: none; stroke: var(--red); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;   /* o preserveAspectRatio="none" esticaria o traço */
  /* --traco só precisa ser MAIOR que o caminho; 1400 sobra com folga */
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.6s var(--ease-out) .25s;
}
.pnl-pontos circle {
  fill: var(--red); r: 3.4;
  opacity: 0;
  transition: opacity .3s ease, r .2s var(--ease-out);
}
.pnl-linha-svg:hover .pnl-pontos circle { r: 3.6; }
/* sem JS (ou antes da revelação) a curva já aparece pronta */
html:not(.js) .pnl-curva { stroke-dashoffset: 0; }
html:not(.js) .pnl-pontos circle { opacity: 1; }

/* ---------- rosca ---------- */
.pnl-rosca-corpo { display: flex; align-items: center; gap: calc(var(--u) * .8); }
.pnl-rosca-svg { width: calc(var(--u) * 8.6); height: calc(var(--u) * 8.6); flex: none; }
.pnl-fatias { transform: rotate(-90deg); transform-origin: 50% 50%; }
.pnl-fatia {
  fill: none; stroke-width: 16;
  opacity: 0; transform: scale(.82); transform-origin: 50% 50%;
  transition: opacity .5s ease, transform .5s var(--ease-out), stroke-width .2s ease;
}
/* dois cinzas bem separados: a 8rem de diâmetro, tons vizinhos
   viram uma fatia só */
.pnl-fatia.f1 { stroke: #2E3441; }
.pnl-fatia.f2 { stroke: #7C8598; }
.pnl-fatia.f3 { stroke: var(--red); }
.pnl-fatia.f4 { stroke: #8E1D22; }
html:not(.js) .pnl-fatia { opacity: 1; transform: none; }

.pnl-legenda { display: grid; gap: calc(var(--u) * .72); flex: 1; min-width: 0; }
.pnl-legenda li { display: flex; align-items: center; gap: calc(var(--u) * .55); }
.pnl-legenda i {
  width: calc(var(--u) * .72); height: calc(var(--u) * .72); border-radius: 999px; flex: none;
  transition: transform .2s var(--ease-out);
}
.pnl-legenda span {
  height: calc(var(--u) * .68); width: var(--w); border-radius: 999px;
  background: var(--pnl-cinza-esc);
  transition: background-color .2s ease;
}
.pnl-legenda .l1 i { background: #2E3441; }
.pnl-legenda .l2 i { background: #7C8598; }
.pnl-legenda .l3 i { background: var(--red); }
.pnl-legenda .l4 i { background: #8E1D22; }

/* LIGAÇÃO ROSCA <-> LEGENDA, sem uma linha de JS.
   :has() deixa o pai reagir ao hover de um filho, e daí alcançamos
   o irmão anterior (o SVG). Em navegador sem :has() simplesmente
   não acontece nada — o painel continua inteiro. */
.pnl-rosca-corpo:has(.l1:hover) .f1,
.pnl-rosca-corpo:has(.l2:hover) .f2,
.pnl-rosca-corpo:has(.l3:hover) .f3,
.pnl-rosca-corpo:has(.l4:hover) .f4 { stroke-width: 20; }
.pnl-legenda li:hover i { transform: scale(1.35); }
.pnl-legenda li:hover span { background: #4A5265; }

/* ---------- barras ---------- */
.pnl-barras-corpo {
  display: flex; align-items: flex-end; gap: calc(var(--u) * .28);
  height: calc(var(--u) * 8.2);
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 1px;
  /* três linhas pontilhadas, iguais às do gráfico ao lado. São três
     cópias da MESMA faixa em alturas diferentes: um só gradiente não
     pode ocupar três posições. */
  --pontilhado: linear-gradient(to right, rgba(255,255,255,.16) 0 2px, transparent 2px 6px);
  background-image: var(--pontilhado), var(--pontilhado), var(--pontilhado);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: 0 25%, 0 50%, 0 75%;
}
/* um nó por par: ::before é a barra vermelha, ::after a cinza atrás */
.pnl-par { position: relative; flex: 1 1 0; height: 100%; min-width: 0; }
.pnl-par::before, .pnl-par::after {
  content: ""; position: absolute; bottom: 0; border-radius: 1px;
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .75s var(--ease-out), background-color .2s ease;
}
.pnl-par::after  { left: 32%; right: -4%; height: var(--c); background: var(--pnl-cinza-esc); z-index: 0; }
.pnl-par::before { left: -4%; right: 32%; height: var(--r); background: var(--red);          z-index: 1; }
html:not(.js) .pnl-par::before, html:not(.js) .pnl-par::after { transform: scaleY(1); }
.pnl-par:hover::before { background: #FF3138; }
.pnl-par:hover::after  { background: var(--pnl-cinza); }

/* ---------- a entrada, quando o bloco aparece na tela ----------
   O .in vem do mesmo observador que revela o resto da página, então
   o painel só ganha vida quando alguém realmente o vê. */
.js .asr-hero-painel.in .pnl-curva { stroke-dashoffset: 0; }
.js .asr-hero-painel.in .pnl-pontos circle { opacity: 1; }
.js .asr-hero-painel.in .pnl-fatia { opacity: 1; transform: none; }
.js .asr-hero-painel.in .pnl-par::before,
.js .asr-hero-painel.in .pnl-par::after { transform: scaleY(1); }

/* os pontos da linha acendem atrás da curva que está sendo desenhada */
.js .asr-hero-painel.in .pnl-pontos circle:nth-child(n)   { transition-delay: .4s; }
.js .asr-hero-painel.in .pnl-pontos circle:nth-child(n+7) { transition-delay: .8s; }
.js .asr-hero-painel.in .pnl-pontos circle:nth-child(n+13){ transition-delay: 1.2s; }
/* as fatias entram uma a uma */
.js .asr-hero-painel.in .f1 { transition-delay: .30s; }
.js .asr-hero-painel.in .f2 { transition-delay: .42s; }
.js .asr-hero-painel.in .f3 { transition-delay: .54s; }
.js .asr-hero-painel.in .f4 { transition-delay: .66s; }
/* e as barras crescem da esquerda para a direita */
.js .asr-hero-painel.in .pnl-par:nth-child(3n+1)::before,
.js .asr-hero-painel.in .pnl-par:nth-child(3n+1)::after { transition-delay: .30s; }
.js .asr-hero-painel.in .pnl-par:nth-child(3n+2)::before,
.js .asr-hero-painel.in .pnl-par:nth-child(3n+2)::after { transition-delay: .42s; }
.js .asr-hero-painel.in .pnl-par:nth-child(3n)::before,
.js .asr-hero-painel.in .pnl-par:nth-child(3n)::after { transition-delay: .54s; }

/* ---------- resposta ao cursor ---------- */
.pnl-kpi:hover {
  background: rgba(255,255,255,.055);
  border-color: rgba(229,30,37,.45);
  transform: translateY(-2px);
}
.pnl-kpi:hover .ico { color: var(--red); transform: scale(1.08); }

/* ---------- o painel em telas estreitas ----------
   Aqui está o ganho real de não ser mais uma imagem: em vez de encolher
   até os números ficarem ilegíveis, o painel REORGANIZA — os quatro
   indicadores viram 2x2 e os dois gráficos do meio empilham. */
@media (max-width: 560px) {
  /* a 360px o rótulo do indicador caía para 8,6px — ilegível. O painel
     é ilustração, mas ilustração que ninguém lê não ilustra nada. */
  .pnl-kpi-topo { font-size: calc(var(--u) * 1.12); }
  .pnl-titulo   { font-size: calc(var(--u) * 1.12); }
  .pnl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pnl-meio { grid-template-columns: 1fr; }
  .pnl-linha-svg { height: calc(var(--u) * 9); }
}
@media (max-width: 430px) {
  /* 18 pares em 300px dariam barras de 16px: some com metade e o
     gráfico volta a ter ritmo em vez de virar um pente. */
  .pnl-par:nth-child(even) { display: none; }
  .pnl-kpi-num { font-size: calc(var(--u) * 1.85); }
}

/* =========================================================
   DOBRA 2 — O PROBLEMA
   ========================================================= */
.asr-problema { background: var(--paper); padding-block: clamp(26px, 3.1vw, 62px); }
.asr-problema-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: start;
}
.asr-problema h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.asr-problema-texto > p { color: var(--t-body); font-size: .92rem; line-height: 1.62; margin-bottom: .7rem; max-width: 46ch; }
/* PRECISAM do "> " do pai: sozinhos (.asr-problema-remate) eles têm
   especificidade 0-1-0 e perdiam para .asr-problema-texto > p, que é
   0-1-1. O remate ficava cinza em vez de vermelho — no wireframe ele é
   a linha vermelha que fecha a dobra. */
.asr-problema-texto > .asr-problema-fecho { color: var(--t-muted); }
.asr-problema-texto > .asr-problema-remate {
  color: var(--red); font-weight: 700; line-height: 1.5;
  margin-top: 1rem; max-width: 46ch;
}

/* as perguntas: lista com filete entre os itens, sem cartão.
   O ícone fica num selo claro para não competir com o texto. */
.asr-perguntas { display: grid; }
.asr-perguntas li {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(14px, 1.5vw, 20px) 0;
  color: var(--t-dark); font-weight: 600; font-size: .95rem; line-height: 1.45;
  border-bottom: 1px solid var(--line-l);
}
.asr-perguntas li:first-child { padding-top: 0; }
.asr-perguntas li:last-child { border-bottom: 0; padding-bottom: 0; }
.asr-p-ico {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px;
  display: grid; place-items: center;
  color: var(--red); background: rgba(229,30,37,.08);
  transition: background-color .25s ease, transform .25s var(--ease-out);
}
.asr-p-ico .ico { width: 1.4rem; height: 1.4rem; stroke-width: 1.7; }
.asr-perguntas li:hover .asr-p-ico { background: rgba(229,30,37,.14); transform: scale(1.06); }

/* =========================================================
   DOBRA 3 — A ASSESSORIA ENS (a cadeia)
   ========================================================= */
.asr-frentes { background: var(--ink-900); color: #fff; padding-block: clamp(30px, 3.6vw, 70px); }
.asr-frentes-head { text-align: center; max-width: 68ch; margin: 0 auto clamp(26px, 3.4vw, 54px); }
.asr-frentes-head h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.asr-frentes-head p { color: var(--t-light); font-size: .92rem; line-height: 1.62; margin-bottom: .6rem; }

/* O FIO DA CADEIA — a assinatura desta dobra.
   A tese da página é "conectar". Aqui o fio liga os cinco cartões e
   se DESENHA da esquerda para a direita quando o bloco entra na
   tela: a conexão acontece na frente de quem lê, em vez de ser
   afirmada por escrito.

   O fio é feito de SEGMENTOS, um por vão, e não de uma linha só
   atravessando a grade. Com uma linha só ela aparecia por dentro
   dos cartões (o fundo deles é translúcido) e o desenho lia como
   um risco por cima, não como uma ligação entre eles.

   --p e --g são a mesma medida do padding do cartão e do vão da
   grade: assim o segmento nasce exatamente no centro do ícone e
   preenche o vão inteiro, em qualquer largura de tela. */
.asr-cadeia {
  --g: clamp(12px, 1.6vw, 22px);
  --p: clamp(18px, 2vw, 26px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--g);
  list-style: none; padding: 0; margin: 0;
}

.asr-elo {
  position: relative; z-index: 1;
  text-align: center;
  padding: var(--p) clamp(12px, 1.4vw, 18px) calc(var(--p) + 4px);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  transition: border-color .3s ease, background-color .3s ease, transform .3s var(--ease-out);
}
/* o segmento vive no vão à direita de cada cartão (menos o último) */
.asr-elo:not(:last-child)::after {
  content: "";
  position: absolute; z-index: 0;
  top: calc(var(--p) + 1.7rem - 1px);   /* 1.7rem = metade do ícone */
  left: 100%; width: var(--g); height: 2px;
  background: linear-gradient(90deg, rgba(229,30,37,.6), rgba(110,147,242,.6));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.js .asr-cadeia.in .asr-elo::after,
html:not(.js) .asr-elo::after { transform: scaleX(1); }
/* os vãos acendem em sequência: o fio corre da esquerda para a direita */
.asr-cadeia.in .asr-elo:nth-child(1)::after { transition-delay: .20s; }
.asr-cadeia.in .asr-elo:nth-child(2)::after { transition-delay: .34s; }
.asr-cadeia.in .asr-elo:nth-child(3)::after { transition-delay: .48s; }
.asr-cadeia.in .asr-elo:nth-child(4)::after { transition-delay: .62s; }
.asr-elo:hover { border-color: rgba(229,30,37,.45); background: rgba(255,255,255,.06); transform: translateY(-4px); }
.asr-elo-ico {
  width: 3.4rem; height: 3.4rem; border-radius: 999px;
  display: grid; place-items: center; margin: 0 auto .9rem;
  color: var(--red);
  background: var(--ink-900);
  border: 1.5px solid rgba(229,30,37,.4);
  transition: transform .3s var(--ease-out), border-color .3s ease;
}
.asr-elo-ico .ico { width: 1.7rem; height: 1.7rem; stroke-width: 1.7; }
.asr-elo:hover .asr-elo-ico { transform: scale(1.08); border-color: var(--red); }
.asr-elo h3 { color: #fff; font-size: .98rem; margin-bottom: 8px; }
.asr-elo p { color: var(--t-dim); font-size: .8rem; line-height: 1.55; }

/* =========================================================
   DOBRA 4 — OS PILARES
   ========================================================= */
.asr-pilares { background: var(--paper); padding-block: clamp(26px, 3.1vw, 62px); }
.asr-pilares-h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: clamp(22px, 2.8vw, 44px); }
.asr-pilares-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  align-items: stretch;
}
.asr-pilar {
  display: flex; flex-direction: column;
  padding: clamp(16px, 1.8vw, 22px);
  background: #fff;
  border: 1px solid var(--line-l);
  border-radius: 16px;
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s var(--ease-out);
}
.asr-pilar:hover { border-color: #C6CEDC; box-shadow: var(--shadow-s); transform: translateY(-4px); }
/* o cabeçalho do cartão: ícone e título na mesma linha, como no
   wireframe. align-items:center e não flex-start — títulos de uma
   e de duas linhas ficam ambos alinhados ao ícone. */
.asr-pilar header {
  display: flex; align-items: center; gap: 11px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-l);
}
/* azul, e não vermelho: é o acento das seções claras desta página,
   o mesmo da caixa de remate da Dobra 6 e das etapas da Dobra 8. */
.asr-pilar-ico { flex: none; color: var(--blue); display: grid; place-items: center; }
.asr-pilar-ico .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.7; }
.asr-pilar h3 { font-size: .92rem; line-height: 1.3; }
.asr-pilar p { color: var(--t-muted); font-size: .82rem; line-height: 1.6; margin-bottom: .65rem; }
.asr-pilar p:last-child { margin-bottom: 0; }
/* usado só quando as páginas internas existirem (ver comentários no HTML) */
.asr-pilar-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto; padding-top: 12px; min-height: 44px;
  color: var(--red); font-weight: 700; font-size: .8rem;
  transition: gap .2s var(--ease-out);
}
.asr-pilar-link .ico { width: .95rem; height: .95rem; }
.asr-pilar-link:hover { gap: 11px; }

/* =========================================================
   DOBRA 5 — TRÁFEGO x ASSESSORIA
   ========================================================= */
.asr-versus { background: var(--ink-900); color: #fff; padding-block: clamp(28px, 3.4vw, 66px); }
.asr-versus-wrap {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4.4vw, 72px);
  align-items: center;
}
.asr-versus h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.asr-versus-texto p { color: var(--t-light); font-size: .92rem; line-height: 1.62; margin-bottom: .7rem; max-width: 50ch; }
.asr-versus-remate { color: #fff !important; font-weight: 700; margin-top: 1rem !important; }

/* O DIAGRAMA
   Os dois painéis NÃO têm a mesma largura de propósito: o da
   esquerda para em "leads gerados" e o da direita segue até a
   oportunidade. O comprimento é o argumento. */
.asr-diagrama {
  display: grid;
  grid-template-columns: minmax(0, .78fr) auto minmax(0, 1.55fr);
  gap: clamp(10px, 1.4vw, 18px);
  align-items: stretch;
}
.asr-escopo {
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column;
}
.asr-escopo--longo { border-color: rgba(229,30,37,.32); background: rgba(229,30,37,.05); }
.asr-escopo-titulo {
  color: #fff; font-weight: 800; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
}
.asr-escopo-sub { color: var(--t-dim); font-size: .78rem; margin-top: 4px; }
.asr-escopo-corpo {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 10px; margin-top: clamp(16px, 2vw, 24px);
}
.asr-no { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.asr-no-ico {
  width: 2.9rem; height: 2.9rem; border-radius: 999px;
  display: grid; place-items: center; flex: none;
  color: #fff; background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.16);
}
.asr-escopo--longo .asr-no-ico { color: var(--red); border-color: rgba(229,30,37,.45); background: rgba(229,30,37,.08); }
.asr-no-ico .ico { width: 1.4rem; height: 1.4rem; stroke-width: 1.7; }
/* A 1025 a coluna dá 100px e "Acompanhamento" pede 105. Em vez de
   deixar o rótulo invadir o vizinho, ele quebra com hífen: quem lê
   perde um traço, não a palavra do lado. */
.asr-no-rot {
  color: var(--t-light); font-size: .76rem; font-weight: 600; line-height: 1.3;
  -webkit-hyphens: auto; hyphens: auto;
  /* sem isto a rede acima é decorativa: o <li> é flex em coluna com
     align-items:center, então o rótulo recebe a largura do CONTEÚDO e
     transborda a célula em silêncio, que é exatamente o defeito antigo. */
  max-width: 100%;
}
/* a seta do painel curto: um traço com ponta, feito só em CSS */
.asr-seta-baixo {
  width: 2px; height: 26px; background: rgba(255,255,255,.22);
  position: relative; flex: none;
}
.asr-seta-baixo::after {
  content: ""; position: absolute; left: 50%; bottom: -1px;
  width: 7px; height: 7px; margin-left: -3.5px;
  border-right: 2px solid rgba(255,255,255,.22);
  border-bottom: 2px solid rgba(255,255,255,.22);
  transform: rotate(45deg);
}

/* o × entre os dois: não é decoração — marca que os escopos são
   diferentes, não equivalentes */
.asr-diagrama-x {
  align-self: center;
  width: 2rem; height: 2rem; border-radius: 999px;
  display: grid; place-items: center; flex: none;
  color: var(--red); background: rgba(229,30,37,.12);
}
.asr-diagrama-x .ico { width: 1.1rem; height: 1.1rem; stroke-width: 2.4; }

/* o fluxo do painel longo: quatro nós ligados por um fio que se
   desenha, igual à cadeia da Dobra 3 — mesma linguagem */
.asr-fluxo {
  /* minmax(0,1fr) e não 1fr: com 1fr o mínimo da coluna é o
     min-content, e "Acompanhamento" (palavra longa, indivisível)
     esticava a coluna até o diagrama vazar 87px para fora. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, .9vw, 12px);
  width: 100%; position: relative;
  list-style: none; padding: 0; margin: 0;
}
.asr-fluxo::before {
  content: ""; position: absolute; top: 1.45rem; left: 12%; right: 12%;
  height: 2px; background: rgba(229,30,37,.4);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .95s var(--ease-out) .2s;
}
.js .asr-fluxo.in::before,
html:not(.js) .asr-fluxo::before { transform: scaleX(1); }
.asr-fluxo li {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.asr-fluxo-legenda {
  margin-top: clamp(14px, 1.8vw, 20px);
  color: var(--t-light); font-size: .8rem; font-weight: 600; text-align: center;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,.10);
  width: 100%;
}

/* =========================================================
   DOBRA 6 — ESTRUTURA PERSONALIZADA
   ========================================================= */
.asr-estrutura { background: var(--paper-2); padding-block: clamp(26px, 3.1vw, 62px); }
.asr-estrutura-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 66px);
  align-items: start;
  margin-bottom: clamp(26px, 3.2vw, 50px);
}
.asr-estrutura h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.asr-estrutura-nota p { color: var(--t-muted); font-size: .9rem; line-height: 1.65; margin-bottom: .6rem; }

/* a lista de frentes: nome em destaque, descrição em seguida na
   mesma linha. Duas colunas no desktop — sete itens numa coluna só
   viraria uma torre. */
.asr-frentes-lista { border-top: 1px solid var(--line-l); padding-top: clamp(24px, 3vw, 40px); }
.asr-frentes-cue { color: var(--t-dark); font-weight: 700; font-size: .95rem; margin-bottom: 16px; }
.asr-frentes-lista ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(28px, 4vw, 64px);
}
.asr-frentes-lista li {
  color: var(--t-muted); font-size: .86rem; line-height: 1.55;
  padding-left: 16px; position: relative;
}
.asr-frentes-lista li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--red);
}
.asr-fr-nome { display: block; color: var(--t-dark); font-weight: 700; }
.asr-frentes-remate {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
  background: #fff; border: 1px solid var(--line-l);
  border-left: 3px solid var(--blue);
  border-radius: 12px;
  color: var(--t-body); font-size: .88rem; line-height: 1.6; font-weight: 600;
  max-width: 82ch;
}

/* =========================================================
   DOBRA 7 — MARKETING + COMERCIAL  (assinatura da página)

   As duas faixas dizem a mesma coisa por contraste: em cima o que
   a mídia entrega (número, barra, comparação), embaixo o que ela
   não entrega (pergunta, sem número). Por isso a faixa de cima é
   sólida e a de baixo é tracejada — a borda diz "isto aqui está
   em aberto" antes de qualquer palavra.
   ========================================================= */
.asr-comercial { background: var(--ink-850); color: #fff; padding-block: clamp(30px, 3.6vw, 70px); }
.asr-comercial-head { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 44px); }
.asr-comercial h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.asr-comercial-head p { color: var(--t-light); font-size: .92rem; line-height: 1.62; margin-bottom: .7rem; }

.asr-medida {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: stretch;
}
.asr-medida-faixa { padding: clamp(18px, 2.2vw, 28px); border-radius: 16px; }
.asr-medida-faixa--vista {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
}
.asr-medida-faixa--oculta {
  background: transparent;
  border: 1px dashed rgba(255,255,255,.24);
}
.asr-medida-rot {
  color: var(--t-dim); font-weight: 800; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: clamp(16px, 2vw, 22px);
}
.asr-medida-faixa--vista .asr-medida-rot { color: #6E93F2; }
.asr-medida-faixa--oculta .asr-medida-rot { color: var(--red); }

/* as barras: a de cima é o dobro da de baixo porque 50 é o dobro
   de 25 — a proporção é o dado, e ela vem do documento. */
.asr-barras { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.asr-barra { display: grid; grid-template-columns: 1fr; gap: 7px; }
.asr-barra-nome { color: var(--t-light); font-size: .8rem; font-weight: 600; }
.asr-barra-trilho {
  display: block; height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.asr-barra-nivel {
  display: block; height: 100%; border-radius: 999px;
  background: var(--red);
  width: var(--n);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--ease-out) .1s;
}
.js .asr-barras.in .asr-barra-nivel,
html:not(.js) .asr-barra-nivel { transform: scaleX(1); }
.asr-barra-val { color: #fff; font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* as incógnitas: sem número de propósito. Inventar "oportunidades"
   aqui seria fabricar resultado — e destruiria o argumento, que é
   justamente não se saber isso sem rastreamento. */
.asr-incognitas { display: grid; gap: 10px; }
.asr-incognitas li {
  display: flex; align-items: center; gap: 12px;
  color: var(--t-light); font-size: .86rem; line-height: 1.4; font-weight: 600;
}
.asr-inc-ico {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--red); background: rgba(229,30,37,.10);
}
.asr-inc-ico .ico { width: 1.05rem; height: 1.05rem; stroke-width: 1.9; }
/* A frase do documento ABRE a lista ("…perguntas como:"), entao ela fica
   acima das perguntas, e o tracejado passa a separar a introducao do que
   ela introduz. Antes o texto vinha depois da lista e tinha sido reescrito
   para "essas perguntas" — voltou a ser o do PDF. */
.asr-medida-intro {
  margin-bottom: clamp(14px, 1.8vw, 18px); padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,.18);
  color: var(--t-dim); font-size: .82rem; line-height: 1.55;
}
/* O painel esquerdo não tem nota: a única frase que havia ali era minha,
   não do documento, e saiu. Para ele não ficar com um vazio no rodapé,
   as barras se centram na altura que a faixa da direita determina —
   o espaço vira respiro, não buraco. Nada de texto de enchimento. */
.asr-medida-faixa { display: flex; flex-direction: column; }
.asr-barras { flex: 1; display: grid; align-content: center; }
.asr-incognitas { flex: 1; align-content: center; margin-bottom: 0; }
.asr-comercial-remate {
  margin-top: clamp(22px, 2.8vw, 38px);
  color: #fff; font-weight: 700; font-size: clamp(.95rem, 1.2vw, 1.08rem);
  line-height: 1.5; max-width: 62ch;
}

/* =========================================================
   DOBRA 8 — COMO FUNCIONA
   ========================================================= */
.asr-processo { background: var(--paper); padding-block: clamp(26px, 3.1vw, 62px); }
.asr-processo-head { margin-bottom: clamp(24px, 3vw, 46px); }
.asr-processo h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.asr-etapas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); list-style: none; padding: 0; margin: 0; }
.asr-etapas li {
  padding: clamp(16px, 1.8vw, 22px);
  background: #fff; border: 1px solid var(--line-l); border-radius: 16px;
  border-top: 3px solid var(--blue);
  transition: transform .28s var(--ease-out), box-shadow .28s ease;
}
.asr-etapas li:hover { transform: translateY(-4px); box-shadow: var(--shadow-s); }
.asr-etapa-num {
  display: block; color: var(--blue); font-weight: 800; font-size: 1.25rem;
  font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.asr-etapas h3 { font-size: .95rem; margin-bottom: 7px; }
.asr-etapas p { color: var(--t-muted); font-size: .82rem; line-height: 1.6; }

/* =========================================================
   DOBRA 9 — PARA QUEM É
   ========================================================= */
.asr-publico { background: var(--paper); border-top: 1px solid var(--line-l); padding-block: clamp(26px, 3.1vw, 62px); }
.asr-publico-wrap {
  display: grid; grid-template-columns: minmax(240px, 34%) 1fr;
  gap: clamp(22px, 3.4vw, 58px);
  align-items: start;
}
.asr-publico h2 { font-size: clamp(1.1rem, 1.85vw, 1.55rem); margin-bottom: 12px; }
.asr-publico-head p { color: var(--t-muted); font-size: .88rem; line-height: 1.55; }
/* .check-list vem de styles.css; aqui só as duas colunas e o
   tamanho de texto, que nesta página é maior que na home */
.asr-publico-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(24px, 3.4vw, 52px); }
.asr-publico-lista li { font-size: .88rem; line-height: 1.5; }

/* =========================================================
   DOBRA 10 — NEM SEMPRE VOCÊ PRECISA DE ASSESSORIA
   Bloco curto e honesto: ele existe para dizer "talvez não seja
   para você". Merece fundo escuro para não passar batido entre
   duas seções claras.
   ========================================================= */
.asr-alternativa { background: var(--ink-950); color: #fff; padding-block: clamp(26px, 3vw, 54px); }
.asr-alternativa-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(22px, 3.6vw, 60px);
  align-items: center;
}
.asr-alternativa h2 { color: #fff; font-size: clamp(1.15rem, 1.95vw, 1.62rem); }
.asr-alternativa-texto p { color: var(--t-light); font-size: .92rem; line-height: 1.62; margin-bottom: .7rem; max-width: 54ch; }
.asr-alternativa-texto .btn { margin-top: 12px; }

/* =========================================================
   DOBRA 12 — CTA FINAL
   ========================================================= */
.asr-cta {
  color: #fff;
  padding-block: clamp(32px, 4vw, 72px);
  border-top: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(72% 82% at 50% 0%, rgba(43,73,176,.16), transparent 60%),
    var(--ink-900);
}
.asr-cta-wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(26px, 4vw, 66px);
  align-items: center;
}
.asr-cta h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.asr-cta-texto p { color: var(--t-light); font-size: .92rem; line-height: 1.62; margin-bottom: .7rem; max-width: 56ch; }
.asr-cta-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.asr-cta-acoes .btn { min-height: 52px; }
.asr-cta-apoio { color: var(--t-dim); font-size: .84rem; line-height: 1.6; max-width: 42ch; }

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* ---------------------------------------------------------
   TABLET E ABAIXO (<= 1024)
   As grades de 5 colunas são o primeiro problema: a 1024px cada
   coluna fica com ~150px e o texto vira uma torre de uma palavra
   por linha. Aqui elas quebram e os fios horizontais somem —
   um fio ligando cartões que já não estão em linha mente.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .asr-hero { padding-top: clamp(96px, 14vw, 128px); }
  .asr-hero-wrap { grid-template-columns: 1fr; row-gap: clamp(26px, 4vw, 38px); }
  .asr-hero-texto h1 { font-size: clamp(1.7rem, 4.4vw, 2.2rem); }
  .asr-hero-lead { max-width: none; }
  .asr-hero-painel { order: 2; }

  .asr-problema-wrap { grid-template-columns: 1fr; row-gap: clamp(24px, 4vw, 34px); }
  .asr-problema-texto > p, .asr-problema-remate { max-width: none; }

  .asr-cadeia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asr-cadeia::before { display: none; }

  .asr-pilares-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .asr-versus-wrap { grid-template-columns: 1fr; row-gap: clamp(24px, 4vw, 36px); }
  .asr-versus-texto p { max-width: none; }
  /* o diagrama empilha: o × passa a ficar ENTRE os dois painéis,
     e o "vs" só faz sentido girado meia volta na vertical */
  .asr-diagrama { grid-template-columns: 1fr; }
  .asr-diagrama-x { justify-self: center; }
  .asr-escopo-corpo { flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; }
  .asr-escopo--curto .asr-seta-baixo { transform: rotate(-90deg); }

  .asr-estrutura-head { grid-template-columns: 1fr; row-gap: 18px; }

  .asr-medida { grid-template-columns: 1fr; }

  .asr-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .asr-publico-wrap { grid-template-columns: 1fr; row-gap: 22px; }

  .asr-alternativa-wrap { grid-template-columns: 1fr; row-gap: 18px; align-items: start; }

  .asr-cta-wrap { grid-template-columns: 1fr; row-gap: 22px; }
  .asr-cta-texto p { max-width: none; }
}

/* ---------------------------------------------------------
   CELULAR (<= 768)
   Nada de corpo de texto abaixo de ~15px e nenhum alvo de toque
   abaixo de 48px — as mesmas regras que a home aplica.
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .asr-hero { padding-top: 104px; padding-bottom: 40px; }
  .asr-hero-texto h1 { font-size: 1.85rem; line-height: 1.18; }

  .asr-problema, .asr-frentes, .asr-pilares, .asr-versus,
  .asr-estrutura, .asr-comercial, .asr-processo,
  .asr-publico, .asr-alternativa { padding-block: 46px; }

  .asr-problema h2, .asr-frentes-head h2, .asr-pilares-h2,
  .asr-versus h2, .asr-estrutura h2, .asr-comercial h2,
  .asr-processo h2, .asr-cta h2 { font-size: 1.42rem; line-height: 1.24; }
  .asr-publico h2, .asr-alternativa h2 { font-size: 1.3rem; line-height: 1.26; }

  .asr-hero-lead, .asr-problema-texto > p, .asr-frentes-head p,
  .asr-versus-texto p, .asr-estrutura-nota p, .asr-comercial-head p,
  .asr-alternativa-texto p, .asr-cta-texto p, .asr-publico-head p,
  .asr-elo p, .asr-pilar p, .asr-etapas p,
  .asr-frentes-lista li, .asr-cta-apoio { font-size: .95rem; }

  .asr-perguntas li { font-size: .95rem; gap: 13px; }
  .asr-p-ico { width: 2.5rem; height: 2.5rem; }

  /* a cadeia vira lista: ícone à esquerda, texto à direita. É o mesmo
     tratamento que a home dá aos .step. */
  .asr-cadeia { grid-template-columns: 1fr; gap: 11px; }
  .asr-elo {
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
    align-items: center; text-align: left;
    padding: 16px 18px;
  }
  .asr-elo-ico { grid-row: 1 / span 2; margin: 0; align-self: center; }
  .asr-elo h3 { margin-bottom: 4px; }
  .asr-elo p { max-width: none; margin-inline: 0; }

  .asr-pilares-grid { grid-template-columns: 1fr; }
  .asr-etapas { grid-template-columns: 1fr; }
  .asr-etapas li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
  .asr-etapa-num { grid-row: 1 / span 2; margin: 0; align-self: center; font-size: 1.4rem; }

  .asr-fluxo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .asr-fluxo::before { display: none; }

  .asr-frentes-lista ul { grid-template-columns: 1fr; }
  .asr-publico-lista { grid-template-columns: 1fr; }
  .asr-publico-lista li { font-size: .95rem; }

  .asr-comercial-remate { font-size: 1.05rem; }
}

@media (max-width: 560px) {
  .asr-hero-texto .btn, .asr-alternativa-texto .btn, .asr-cta-acoes .btn { width: 100%; }
  .asr-escopo-corpo { flex-direction: column; }
  .asr-escopo--curto .asr-seta-baixo { transform: none; }
}

@media (max-width: 480px) {
  .asr-hero-texto h1 { font-size: 1.62rem; }
  .asr-problema, .asr-frentes, .asr-pilares, .asr-versus,
  .asr-estrutura, .asr-comercial, .asr-processo,
  .asr-publico, .asr-alternativa { padding-block: 40px; }
  .asr-medida-faixa { padding: 16px; }
}

/* no celular o texto ocupa a largura toda: os arcos recuam para não
   passar por trás do título */
@media (max-width: 768px) {
  .asr-hero::after {
    background: repeating-radial-gradient(circle at 122% -8%,
      transparent 0 34px,
      rgba(229,30,37,.26) 34px 35.2px,
      transparent 35.2px 70px);
    -webkit-mask-image: linear-gradient(232deg, #000 0%, rgba(0,0,0,.42) 22%, transparent 44%);
            mask-image: linear-gradient(232deg, #000 0%, rgba(0,0,0,.42) 22%, transparent 44%);
  }
}

/* =========================================================
   FAIXAS INTERMEDIÁRIAS

   Duas descobertas ao medir a página de 360 a 1180px:

   1) De 1025 a ~1240 as grades de 5 colunas continuavam com 5
      colunas, mas cada cartão caía para ~180px. O texto virava
      uma palavra por linha e os rótulos do diagrama se
      SOBREPUNHAM. Não é estreito o bastante para o layout de
      tablet nem largo o bastante para o de desktop.

   2) De 561 a 768 tudo já era uma coluna só. Num tablet em pé
      isso deixa metade da tela vazia e obriga a rolar o dobro.

   Estas duas faixas cobrem exatamente esses vãos.
   ========================================================= */

/* ---- o fluxo do diagrama, em todo o desktop ----
   Com os dois escopos lado a lado o painel longo mede de 248px
   (1025) a 406px (1680). Quatro nós em linha dão colunas de 59 a
   81px; "Acompanhamento" pede 105 a 116px. Ou seja: não existe
   largura de desktop em que os quatro caibam lado a lado — a 1366
   os rótulos se sobrepunham 21px. Em 2x2 cada um recebe o dobro. */
@media (min-width: 1025px) {
  .asr-fluxo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .asr-fluxo::before { display: none; }   /* fio não liga o que não está em linha */
}

/* ---- 1025 a 1119: os 5px que faltavam à coluna ----
   Nessa faixa o painel longo mede 248px, a coluna fica com 100px e
   "Acompanhamento" pede 105. Deixar o rótulo escapar da célula foi o
   defeito antigo; quebrar a palavra no meio ("Acompanhament/o") é pior
   ainda — medido. Então quem cede é a folga interna do cartão: 6px de
   cada lado mais 5px do vão entre colunas devolvem 9px à coluna. */
@media (min-width: 1025px) and (max-width: 1119px) {
  .asr-escopo { padding: 12px; }
  .asr-fluxo  { column-gap: 4px; }
}

/* ---- desktop apertado: 1025 a 1240 ---- */
@media (min-width: 1025px) and (max-width: 1240px) {
  /* 5 pilares em 5 colunas dão 180px cada: "Rastreamento e
     inteligência comercial" ocupava quatro linhas só no título. */
  .asr-pilares-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}

/* ---- tablet em pé e celular deitado: 561 a 768 ---- */
@media (min-width: 561px) and (max-width: 768px) {
  .asr-cadeia       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asr-pilares-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asr-etapas       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asr-publico-lista     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asr-frentes-lista ul  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}