/* =========================================================
   ENS — Criação de Sites
   Estilos EXCLUSIVOS desta página.

   Tokens, header, rodapé, botões, abertura, aviso de cookies,
   .check-list e o componente de FAQ vêm de styles.css.

   Prefixo .st- em tudo: as quatro páginas do site convivem no
   mesmo styles.css e nenhum seletor daqui alcança as outras.

   O vocabulário visual (arcos vermelhos no canto, cartões com
   ícone vermelho, fio ligando etapas) é o mesmo das páginas de
   Assessoria e Landing Pages de propósito: são irmãs e precisam
   ler como um sistema.

   RESPONSIVO desde o começo, com o que a auditoria das páginas
   anteriores ensinou:
     · minmax(0,1fr) em toda grade larga — 1fr usa o min-content
       como mínimo, e uma palavra longa estica a coluna até vazar;
     · faixa 1025–1240, onde as grades de 5-6 colunas ficam com
       colunas estreitas demais;
     · faixa 561–768, onde uma coluna só desperdiça meia tela.
   ========================================================= */

/* ---------------------------------------------------------
   Peças comuns às dobras
   --------------------------------------------------------- */
.st-eyebrow-claro { color: #6E93F2; }
.st-realce { color: var(--red); }
.st-btn-seta .ico { width: 1.05rem; height: 1.05rem; transition: transform .25s var(--ease-out); }
.st-btn-seta:hover .ico { transform: translateX(4px); }

/* =========================================================
   DOBRA 1 — HERO
   ========================================================= */
.st-hero {
  position: relative;
  background: #05070E;
  color: #fff;
  padding-top: clamp(112px, 11vw, 168px);
  padding-bottom: clamp(40px, 5vw, 78px);
  overflow: hidden;
}
.st-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;
}
/* os arcos do canto, iguais aos das páginas irmãs */
.st-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);
  -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%);
  opacity: 0;
}
html:not(.intro-ativa) .st-hero::after {
  animation: st-arcos 1.5s var(--ease-out) .35s forwards;
}
@keyframes st-arcos { to { opacity: 1; } }

.st-hero-wrap {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(28px, 4.2vw, 64px);
  align-items: center;
}
.st-hero-texto h1 {
  color: #fff;
  font-size: clamp(1.72rem, 2.62vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: 18px;
  overflow-wrap: break-word;
}
.st-hero-lead {
  color: #A0ABC4;
  font-size: clamp(.92rem, 1.02vw, 1.02rem);
  line-height: 1.66;
  max-width: 50ch;
  margin-bottom: .9rem;
}
.st-hero-lead strong { color: #DCE4F5; font-weight: 700; }
.st-hero-texto .btn { margin-top: 14px; }

/* ---------------------------------------------------------
   O MOCKUP DO HERO — desenhado, não fotografado
   --m é o passo de medida. Segue a largura do PRÓPRIO bloco
   (cqw) onde houver suporte: no tablet o hero empilha e a arte
   dobra de largura — com vw ela não teria como saber.
   --------------------------------------------------------- */
.st-hero-arte { position: relative; }
.st-mock { --m: clamp(7px, .62vw, 10px); position: relative; padding-bottom: calc(var(--m) * 2.4); }
@supports (container-type: inline-size) {
  .st-hero-arte { container-type: inline-size; }
  .st-mock { --m: clamp(7px, 1.72cqw, 10.5px); }
}

.st-janela {
  width: 84%;
  border-radius: calc(var(--m) * 1.2);
  overflow: hidden;
  background: #0A0F18;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
}
.st-janela-barra {
  display: flex; align-items: center; gap: calc(var(--m) * .55);
  padding: calc(var(--m) * .85) calc(var(--m) * 1.1);
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.st-ponto { width: calc(var(--m) * .78); height: calc(var(--m) * .78); border-radius: 999px; flex: none; }
.st-ponto.p1 { background: #E5484D; }
.st-ponto.p2 { background: #E5A23C; }
.st-ponto.p3 { background: #46A758; }
.st-url { flex: 1; height: calc(var(--m) * 1.05); border-radius: 999px; background: rgba(255,255,255,.07); margin-left: calc(var(--m) * .7); }

.st-janela-corpo { padding: calc(var(--m) * 1.15); display: grid; gap: calc(var(--m) * 1.05); }
.st-topo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--m) * 1); align-items: center; }
.st-foto {
  aspect-ratio: 4 / 3; border-radius: calc(var(--m) * .7);
  background: linear-gradient(135deg, #262C38, #1A1F29);
  position: relative;
}
.st-foto::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 34%; height: 26%; transform: translate(-50%,-50%);
  border-radius: calc(var(--m) * .25);
  background:
    radial-gradient(circle at 26% 32%, #4A5265 0 18%, transparent 19%),
    linear-gradient(to top right, transparent 44%, #4A5265 44% 62%, transparent 63%);
  border: 1px solid #4A5265;
}
.st-txt { display: grid; gap: calc(var(--m) * .5); }
.st-l { display: block; height: calc(var(--m) * .62); width: var(--w); border-radius: 999px; background: #333A49; }
/* .st-acao e não .st-cta: a seção da Dobra 9 se chama .st-cta e,
   vindo depois no arquivo, pintaria este botão com o fundo dela. */
.st-acao {
  display: block; height: calc(var(--m) * 1.5); width: 62%;
  border-radius: calc(var(--m) * .38);
  background: var(--red);
  margin-top: calc(var(--m) * .45);
  box-shadow: 0 calc(var(--m)*.5) calc(var(--m)*1.4) calc(var(--m)*-.6) rgba(229,30,37,.85);
}
.st-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--m) * .75); }
.st-cardm {
  display: grid; gap: calc(var(--m) * .42);
  padding: calc(var(--m) * .8);
  border-radius: calc(var(--m) * .6);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.st-ico {
  width: calc(var(--m) * 1.7); height: calc(var(--m) * 1.7);
  border-radius: calc(var(--m) * .35);
  border: 1.5px solid #4A5265;
  margin-bottom: calc(var(--m) * .2);
}

.st-fone {
  position: absolute; right: 0; bottom: 0;
  width: 24%;
  border-radius: calc(var(--m) * 1.5);
  background: #0A0F18;
  border: calc(var(--m) * .2) solid #262C38;
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.95);
  padding: calc(var(--m) * .75);
  padding-top: calc(var(--m) * 1.5);
}
.st-fone-notch {
  position: absolute; top: calc(var(--m) * .5); left: 50%; transform: translateX(-50%);
  width: 34%; height: calc(var(--m) * .5); border-radius: 999px; background: #262C38;
}
.st-fone-corpo { display: grid; gap: calc(var(--m) * .45); }
.st-foto--fone { aspect-ratio: 16 / 10; }
.st-acao--fone { width: 100%; height: calc(var(--m) * 1.25); }
.st-fone-icos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--m) * .35); margin-top: calc(var(--m) * .2); }
.st-fone-icos span { aspect-ratio: 1; border-radius: calc(var(--m) * .3); border: 1.2px solid #4A5265; }

/* =========================================================
   DOBRA 2 — PRESENÇA DIGITAL
   ========================================================= */
.st-presenca { background: var(--paper); padding-block: clamp(26px, 3.1vw, 62px); }
.st-presenca-wrap {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(26px, 4.2vw, 68px);
  align-items: center;
}

/* a ilustração do wireframe: navegador sob a lupa, com a curva de
   busca subindo ao lado. Os traços se desenham quando o bloco entra
   na tela — mesma gramática do resto do site. */
.st-lupa-svg { width: 100%; height: auto; display: block; }
.st-lupa-tracos, .st-lupa-vidro, .st-pr-itens {
  fill: none; stroke: var(--t-dark); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.st-lupa-vidro { stroke-width: 3.4; }
.st-lupa-tracos .st-cheio { fill: var(--t-dark); stroke: none; }
.st-lupa-barras { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* o traço se desenha; 900 é um comprimento com folga — só precisa
   ser MAIOR que o caminho real */
.js .st-lupa-svg .st-lupa-tracos,
.js .st-lupa-svg .st-lupa-vidro,
.js .st-lupa-svg .st-lupa-barras {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.5s var(--ease-out);
}
.js .st-lupa-svg.in .st-lupa-tracos { stroke-dashoffset: 0; transition-delay: .1s; }
.js .st-lupa-svg.in .st-lupa-vidro  { stroke-dashoffset: 0; transition-delay: .45s; }
.js .st-lupa-svg.in .st-lupa-barras { stroke-dashoffset: 0; transition-delay: .75s; }

.st-presenca h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.st-presenca-texto > p { color: var(--t-body); font-size: .92rem; line-height: 1.62; margin-bottom: .5rem; max-width: 58ch; }

/* as quatro perguntas: filete vertical entre elas, como no wireframe */
.st-perguntas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(22px, 2.6vw, 34px) 0;
}
.st-perguntas li {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-align: center; position: relative;
  padding: 0 clamp(8px, 1.2vw, 18px);
  color: var(--t-dark); font-weight: 700; font-size: .88rem; line-height: 1.35;
}
.st-perguntas li + li::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 1px; background: var(--line-l);
}
.st-p-ico {
  width: 2.7rem; height: 2.7rem; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  color: var(--red); background: rgba(229,30,37,.08);
  transition: background-color .25s ease, transform .25s var(--ease-out);
}
.st-p-ico .ico { width: 1.35rem; height: 1.35rem; stroke-width: 1.7; }
.st-perguntas li:hover .st-p-ico { background: rgba(229,30,37,.16); transform: scale(1.07); }

.st-presenca-fecho { color: var(--t-body); font-size: .92rem; line-height: 1.7; }
.st-presenca-fecho strong { color: var(--t-dark); font-weight: 700; }

/* =========================================================
   DOBRA 3 — ESTRATÉGIA ANTES DO DESENVOLVIMENTO
   ========================================================= */
.st-estrategia { background: var(--ink-900); color: #fff; padding-block: clamp(30px, 3.6vw, 68px); }
.st-estrategia-wrap {
  display: grid; grid-template-columns: minmax(230px, 30%) 1fr;
  gap: clamp(24px, 3.6vw, 56px);
  align-items: center;
}
.st-estrategia h2 { color: #fff; font-size: clamp(1.2rem, 2vw, 1.65rem); margin-bottom: 14px; }
.st-estrategia-head p { color: var(--t-light); font-size: .9rem; line-height: 1.62; }

/* CINCO ETAPAS EM SEQUÊNCIA. A numeração carrega informação (a ordem
   do projeto), então ela fica. O fio é feito de SEGMENTOS, um por
   vão: uma linha única atravessaria os cartões por dentro. --p e --g
   repetem o padding do cartão e o vão da grade, então o segmento
   nasce no centro exato do ícone, em qualquer largura. */
.st-etapas {
  --g: clamp(10px, 1.3vw, 18px);
  --p: clamp(16px, 1.8vw, 22px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--g);
  list-style: none; padding: 0; margin: 0;
}
.st-etapas li {
  position: relative; z-index: 1;
  padding: var(--p) clamp(11px, 1.2vw, 16px) calc(var(--p) + 4px);
  border-radius: 14px;
  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);
}
.st-etapas li:hover { border-color: rgba(229,30,37,.45); background: rgba(255,255,255,.06); transform: translateY(-4px); }
.st-etapas li:not(:last-child)::after {
  content: "";
  position: absolute; z-index: 0;
  top: calc(var(--p) + 1.4rem - 1px);      /* 1.4rem = metade do ícone */
  left: 100%; width: var(--g); height: 2px;
  background: rgba(229,30,37,.45);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .42s var(--ease-out);
}
.js .st-etapas.in li::after,
html:not(.js) .st-etapas li::after { transform: scaleX(1); }
.st-etapas.in li:nth-child(1)::after { transition-delay: .18s; }
.st-etapas.in li:nth-child(2)::after { transition-delay: .30s; }
.st-etapas.in li:nth-child(3)::after { transition-delay: .42s; }
.st-etapas.in li:nth-child(4)::after { transition-delay: .54s; }

.st-etapa-ico {
  width: 2.8rem; height: 2.8rem; border-radius: 999px;
  display: grid; place-items: center; margin-bottom: .75rem;
  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;
}
.st-etapa-ico .ico { width: 1.4rem; height: 1.4rem; stroke-width: 1.7; }
.st-etapas li:hover .st-etapa-ico { transform: scale(1.09); border-color: var(--red); }
.st-etapas h3 { color: #fff; font-size: .9rem; line-height: 1.3; margin-bottom: 7px; }
.st-num { color: var(--red); }
.st-etapas p { color: var(--t-dim); font-size: .79rem; line-height: 1.55; }

/* =========================================================
   DOBRA 4 — O QUE CONSIDERAMOS NA CRIAÇÃO
   ========================================================= */
.st-criacao { background: var(--paper); padding-block: clamp(26px, 3.1vw, 62px); }
.st-criacao-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(24px, 3vw, 44px); }
.st-criacao h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.st-criacao-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(11px, 1.4vw, 18px);
  align-items: stretch;
}
.st-item {
  display: flex; flex-direction: column;
  padding: clamp(16px, 1.8vw, 22px) clamp(12px, 1.4vw, 17px);
  text-align: center;
  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);
}
.st-item:hover { border-color: #C6CEDC; box-shadow: var(--shadow-s); transform: translateY(-4px); }
.st-item-ico {
  width: 3.1rem; height: 3.1rem; border-radius: 999px;
  display: grid; place-items: center; margin: 0 auto .8rem;
  color: var(--red);
  border: 1.5px solid rgba(229,30,37,.32);
  transition: transform .3s var(--ease-out), border-color .3s ease;
}
.st-item-ico .ico { width: 1.55rem; height: 1.55rem; stroke-width: 1.7; }
.st-item:hover .st-item-ico { transform: scale(1.08); border-color: var(--red); }
.st-item h3 { font-size: .9rem; line-height: 1.3; margin-bottom: 8px; }
/* o parêntese explicativo do documento em peso menor: é apoio, não
   parte do nome da frente */
.st-item h3 em { display: block; font-style: normal; font-weight: 500; font-size: .76rem; color: var(--t-muted); margin-top: 2px; }
.st-item p { color: var(--t-muted); font-size: .8rem; line-height: 1.55; }

/* =========================================================
   DOBRA 5 — O SITE NA AQUISIÇÃO  (assinatura da página)

   O documento diz que presença, autoridade, aquisição e conversão
   "podem fazer parte da MESMA estrutura digital". O diagrama diz
   isso sem afirmar: um único centro — o site — e as quatro pontas
   ligadas a ele. Passar o cursor em qualquer ponta acende os fios
   inteiros, porque a estrutura só existe junta.
   ========================================================= */
.st-aquisicao { background: var(--ink-900); color: #fff; padding-block: clamp(30px, 3.6vw, 70px); }
.st-aquisicao-wrap {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 66px);
  align-items: center;
}

.st-hub { position: relative; }
/* os fios ficam numa camada SVG por baixo: o traço em degrau não sai
   de um border, e em SVG ele acompanha o redimensionamento sozinho */
.st-hub-fios {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: rgba(255,255,255,.28);
  stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round;
  /* sem isto o preserveAspectRatio="none" esticaria o traço junto
     com as coordenadas e o tracejado sairia oval */
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke .3s ease;
}
.st-hub-grade {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  align-items: center; justify-items: center;
  row-gap: clamp(16px, 2.4vw, 30px);
}
.st-no--pr { grid-area: 1 / 1; }
.st-no--au { grid-area: 1 / 3; }
.st-centro { grid-area: 2 / 2; }
.st-no--aq { grid-area: 3 / 1; }
.st-no--co { grid-area: 3 / 3; }

.st-no { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.st-no-ico {
  width: 3.5rem; height: 3.5rem; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--red);
  background: var(--ink-900);
  border: 1.5px solid rgba(229,30,37,.42);
  transition: transform .28s var(--ease-out), border-color .28s ease, background-color .28s ease;
}
.st-no-ico .ico { width: 1.65rem; height: 1.65rem; stroke-width: 1.7; }
.st-no-rot { color: #fff; font-weight: 700; font-size: .88rem; }

/* o centro é o site: círculo maior com um mini-navegador dentro */
.st-centro {
  width: clamp(7.5rem, 11vw, 9.5rem); aspect-ratio: 1;
  border-radius: 999px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255,255,255,.3);
  background: var(--ink-900);
}
.st-centro-mini {
  width: 58%;
  display: grid; gap: .3rem;
  padding: .45rem;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,.5);
}
.st-mini-barra { display: flex; gap: .18rem; margin-bottom: .12rem; }
.st-mini-barra i { width: .22rem; height: .22rem; border-radius: 999px; background: rgba(255,255,255,.6); }
.st-mini-linha { height: .2rem; border-radius: 999px; background: rgba(255,255,255,.35); }
.st-mini-linha--curta { width: 62%; }
.st-mini-cta { height: .62rem; border-radius: 3px; background: var(--red); margin-top: .1rem; }

/* passar em QUALQUER ponta acende a estrutura inteira: ela só existe
   junta. :has() no contêiner alcança a camada de fios, que é irmã
   anterior; sem suporte, nada acontece. */
.st-hub:has(.st-no:hover) .st-hub-fios { stroke: rgba(229,30,37,.75); }
.st-hub:has(.st-no:hover) .st-no-ico { border-color: rgba(229,30,37,.75); }
.st-no:hover .st-no-ico { transform: scale(1.09); background: rgba(229,30,37,.12); }

.st-aquisicao h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); margin-bottom: 16px; }
.st-aquisicao-texto p { color: var(--t-light); font-size: .92rem; line-height: 1.62; margin-bottom: .7rem; max-width: 54ch; }
.st-aquisicao-texto p strong { color: #fff; font-weight: 700; }
.st-aquisicao-remate { color: #fff !important; font-weight: 700; margin-top: 1rem !important; }

/* =========================================================
   DOBRA 6 — QUAL ESTRUTURA
   ========================================================= */
.st-escolha { background: var(--paper-2); padding-block: clamp(26px, 3.1vw, 62px); }
.st-escolha-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(24px, 3vw, 42px); }
.st-escolha h2 { font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.st-escolha-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(13px, 1.7vw, 22px); align-items: stretch; }
.st-quadro {
  display: flex; flex-direction: column;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line-l);
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s var(--ease-out);
}
/* o quadro "Site" é o assunto da página: ganha a borda vermelha.
   Os outros dois são a comparação, não a oferta. */
.st-quadro--foco { border-color: rgba(229,30,37,.35); }
.st-quadro:hover { border-color: #C6CEDC; box-shadow: var(--shadow-s); transform: translateY(-4px); }
.st-quadro--foco:hover { border-color: rgba(229,30,37,.6); }
.st-quadro header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-l);
}
.st-quadro-ico { flex: none; color: var(--red); display: grid; place-items: center; }
.st-quadro-ico .ico { width: 1.7rem; height: 1.7rem; stroke-width: 1.7; }
.st-quadro h3 { font-size: 1.05rem; }
.st-quadro p { color: var(--t-muted); font-size: .88rem; line-height: 1.62; margin-bottom: .6rem; }
.st-quadro p strong { color: var(--t-dark); font-weight: 700; }
.st-quadro-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 14px; min-height: 44px;
  color: var(--red); font-weight: 700; font-size: .84rem;
  transition: gap .2s var(--ease-out);
}
.st-quadro-link .ico { width: 1rem; height: 1rem; flex: none; }
.st-quadro-link:hover { gap: 12px; }
.st-quadro-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }

.st-escolha-remate {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(18px, 2.2vw, 28px);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
  background: #fff; border: 1px solid var(--line-l); border-radius: 14px;
  color: var(--t-body); font-size: .9rem; line-height: 1.6;
}
.st-escolha-remate strong { color: var(--t-dark); font-weight: 700; }
.st-remate-ico { flex: none; color: var(--red); display: grid; place-items: center; }
.st-remate-ico .ico { width: 1.5rem; height: 1.5rem; }

/* =========================================================
   DOBRA 7 — PARA QUEM FAZ SENTIDO
   ========================================================= */
.st-publico { background: var(--ink-950); color: #fff; padding-block: clamp(28px, 3.4vw, 64px); }
.st-publico-wrap {
  display: grid; grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 62px);
  align-items: center;
}
.st-prancheta-svg { width: 100%; max-width: 15rem; height: auto; display: block; margin-inline: auto; }
.st-prancheta-svg > rect { fill: none; stroke: #fff; stroke-width: 3; }
.st-pr-itens { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.js .st-prancheta-svg .st-pr-itens {
  stroke-dasharray: 700; stroke-dashoffset: 700;
  transition: stroke-dashoffset 1.4s var(--ease-out) .3s;
}
.js .st-prancheta-svg.in .st-pr-itens { stroke-dashoffset: 0; }

.st-publico h2 { color: #fff; font-size: clamp(1.18rem, 2vw, 1.68rem); margin-bottom: 12px; }
.st-publico-head p { color: var(--t-light); font-size: .9rem; line-height: 1.6; margin-bottom: clamp(16px, 2vw, 24px); }
/* .check-list vem de styles.css; aqui só as duas colunas e a cor —
   lá ela vive sobre fundo claro */
.st-publico-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px clamp(22px, 3vw, 44px); }
.st-publico-lista li { color: var(--t-light); font-size: .9rem; line-height: 1.5; }

/* =========================================================
   DOBRA 8 — FAQ
   Duas colunas, como no wireframe. align-items:start é o que
   impede um item aberto de esticar o vizinho da mesma linha.
   ========================================================= */
.st-faq .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 14px; }

/* =========================================================
   DOBRA 9 — CTA FINAL
   ========================================================= */
.st-cta {
  color: #fff;
  padding-block: clamp(30px, 3.8vw, 68px);
  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);
}
.st-cta-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) auto;
  gap: clamp(22px, 3.4vw, 52px);
  align-items: center;
}
.st-cta h2 { color: #fff; font-size: clamp(1.2rem, 2.08vw, 1.75rem); }
.st-cta-meio p { color: var(--t-light); font-size: .9rem; line-height: 1.62; margin-bottom: .6rem; }
.st-cta-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.st-cta-acoes .btn { min-height: 52px; }

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

/* ---- desktop apertado: 1025 a 1240 ----
   As grades de 5 e 6 colunas aqui ficariam com ~150px por coluna e
   o texto viraria uma palavra por linha. */
@media (min-width: 1025px) and (max-width: 1240px) {
  .st-criacao-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .st-etapas li::after { display: none; }   /* fio não liga o que quebrou de linha */
  .st-estrategia-wrap { grid-template-columns: 1fr; row-gap: clamp(22px, 3vw, 32px); }
}

/* ---- tablet e abaixo: <= 1024 ---- */
@media (max-width: 1024px) {
  .st-hero { padding-top: clamp(96px, 14vw, 128px); }
  .st-hero-wrap { grid-template-columns: 1fr; row-gap: clamp(26px, 4vw, 38px); }
  .st-hero-texto h1 { font-size: clamp(1.7rem, 4.4vw, 2.2rem); }
  .st-hero-lead { max-width: none; }
  .st-hero-arte { order: 2; }

  .st-presenca-wrap { grid-template-columns: 1fr; row-gap: clamp(24px, 3.6vw, 34px); }
  .st-lupa-svg { max-width: 22rem; margin-inline: auto; }
  .st-presenca-texto > p { max-width: none; }

  .st-estrategia-wrap { grid-template-columns: 1fr; row-gap: clamp(22px, 3vw, 32px); }
  .st-etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .st-etapas li::after { display: none; }

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

  .st-aquisicao-wrap { grid-template-columns: 1fr; row-gap: clamp(26px, 4vw, 36px); }
  .st-hub { max-width: 30rem; margin-inline: auto; width: 100%; }
  .st-aquisicao-texto p { max-width: none; }

  .st-publico-wrap { grid-template-columns: 1fr; row-gap: clamp(22px, 3vw, 30px); }
  .st-prancheta-svg { max-width: 11rem; }

  .st-faq .faq-list { grid-template-columns: 1fr; }

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

/* ---- tablet em pé e celular deitado: 561 a 768 ----
   Uma coluna só desperdiça metade da tela nessa faixa. */
@media (min-width: 561px) and (max-width: 768px) {
  .st-criacao-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-etapas       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-escolha-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-publico-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-perguntas    { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .st-perguntas li:nth-child(3)::before { display: none; }
}

/* ---- celular: <= 768 ---- */
@media (max-width: 768px) {
  .st-hero { padding-top: 104px; padding-bottom: 40px; }
  .st-hero-texto h1 { font-size: 1.85rem; line-height: 1.18; }
  /* os arcos recuam: aqui o texto ocupa a largura toda */
  .st-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%);
  }

  .st-presenca, .st-estrategia, .st-criacao,
  .st-aquisicao, .st-escolha, .st-publico { padding-block: 46px; }

  .st-presenca h2, .st-estrategia h2, .st-criacao h2,
  .st-aquisicao h2, .st-escolha h2, .st-cta h2 { font-size: 1.42rem; line-height: 1.24; }
  .st-publico h2 { font-size: 1.3rem; line-height: 1.26; }

  .st-hero-lead, .st-presenca-texto > p, .st-presenca-fecho,
  .st-estrategia-head p, .st-aquisicao-texto p, .st-quadro p,
  .st-publico-head p, .st-cta-meio p, .st-etapas p, .st-item p,
  .st-escolha-remate { font-size: .95rem; }

  /* as etapas viram lista: ícone à esquerda, texto à direita */
  .st-etapas { grid-template-columns: 1fr; gap: 11px; }
  .st-etapas li {
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
    align-items: center; padding: 16px 18px;
  }
  .st-etapa-ico { grid-row: 1 / span 2; margin: 0; align-self: center; }

  .st-criacao-grid { grid-template-columns: 1fr; }
  .st-item {
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
    align-items: center; text-align: left;
  }
  .st-item-ico { grid-row: 1 / span 2; margin: 0; align-self: center; }

  .st-escolha-grid { grid-template-columns: 1fr; }
  .st-escolha-remate { align-items: flex-start; }

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

  /* as quatro perguntas empilham: o filete vertical vira horizontal */
  .st-perguntas { grid-template-columns: 1fr; }
  .st-perguntas li {
    flex-direction: row; align-items: center; gap: 14px; text-align: left;
    padding: 15px 0; border-bottom: 1px solid var(--line-l);
  }
  .st-perguntas li::before { display: none !important; }
  .st-perguntas li:last-child { border-bottom: 0; }
  .st-perguntas li br { display: none; }
}

@media (max-width: 560px) {
  .st-hero-texto .btn, .st-cta-acoes .btn { width: 100%; }
  .st-cta-acoes { align-items: stretch; }
  /* o celular do mockup sai: a 330px ele encobriria metade da janela */
  .st-fone { display: none; }
  .st-janela { width: 100%; }
  .st-mock { padding-bottom: 0; }
  /* o diagrama fica apertado demais em 3 colunas nessa largura */
  .st-centro { width: clamp(6rem, 26vw, 8rem); }
  .st-no-ico { width: 3rem; height: 3rem; }
  .st-no-rot { font-size: .8rem; }
}

@media (max-width: 480px) {
  .st-hero-texto h1 { font-size: 1.62rem; }
  .st-presenca, .st-estrategia, .st-criacao,
  .st-aquisicao, .st-escolha, .st-publico { padding-block: 40px; }
}