/* ===========================================================
   PAGINA · LP de credenciamento Detran-RJ
   Estrutura: hero > o que esta acontecendo > tamanho do mercado > para quem
   (+ faixa "seja qual for o seu perfil") > qual modelo combina (+ faixa
   "nossa experiencia mostra que") > por que a A'Castro Consultoria (grade
   de servicos, numeros, cartao + 3 tópicos, faixa "pronto para
   avancar?") > como sera o caminho > cadastro > FAQ > CTA final.
   Blocos 01 a 03 seguem a composicao dos 3 mockups do Alex; 04 a 09 levam a
   mesma linguagem: circulo azul-marinho com icone em traco champanhe,
   filete champanhe nos olhos, cartao branco com borda prata fina,
   faixa escura arredondada. Prata continua sendo a cor de acao.
   Rodada 3 (2026-09-27): blocos 04, 05 e 06 refeitos (audios do Alex de
   25/09) - a orbita do bloco 06 SAIU. Versao anterior (rodada 2, 23/09):
   _versoes/2026-09-24-site-rodada-2/. Versao antes disso (rodada 1, 15/09):
   _versoes/2026-09-15-site-rodada-1/
   =========================================================== */

/* ---------- regras de texto da casa (iguais a LP ISO 9001) ---------- */
h1,h2,h3,.olho,.btn{text-wrap:balance}
p,figcaption,li{text-wrap:pretty}
main,.rodape{text-wrap:pretty}

/* ---------- peca comum: circulo azul-marinho com icone champanhe ---------- */
.ic-circ{
  flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  color:var(--champanhe);
  background:radial-gradient(circle at 32% 28%, #0A3550 0%, var(--azul-900) 72%);
  box-shadow:inset 0 0 0 1px rgba(214,194,155,.28), 0 8px 18px -8px rgba(0,24,36,.55);
}
.escuro .ic-circ{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(214,194,155,.38)}

/* cartao desta LP: raio 16, borda prata fina, textura diagonal do "A" no canto */
.cartao-base,.dado,.perfil,.forma,.modelo{
  position:relative;isolation:isolate;border-radius:16px;background:var(--branco);
  border:1px solid rgba(142,155,163,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 36px -26px rgba(0,36,60,.35);
}
.perfil::before,.forma::before,.modelo::before{
  content:"";position:absolute;left:26px;top:-1px;width:36px;height:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,var(--champanhe-tinta),var(--champanhe));
}

/* borda viva e spotlight (efeitos.css) precisam do conteudo acima da luz */
[data-borda] > *{position:relative;z-index:1}
[data-borda] > .cartao__luz{position:absolute;z-index:2}

/* ===========================================================
   01 · HERO (mockup 01)
   =========================================================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;color:var(--branco);
  background:
    radial-gradient(70% 90% at 12% 30%, rgba(4,108,144,.28) 0%, transparent 60%),
    linear-gradient(180deg, var(--azul-900) 0%, #001B2A 100%);
}
.hero__palco{position:relative;isolation:isolate;padding-top:var(--h-topo)}
.hero__foto{position:absolute;top:0;right:0;bottom:0;width:min(68%,1320px);z-index:-2;overflow:hidden}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* veu continuo: o escuro do lado do texto se desfaz na foto, sem linha marcada,
   e desce para a faixa de numeros (gosto do dono: fade continuo) */
.hero__veu{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg, var(--azul-900) 0%, var(--azul-900) 30%, rgba(0,24,36,.9) 40%, rgba(0,24,36,.55) 52%, rgba(0,24,36,.18) 66%, rgba(0,24,36,0) 80%),
    linear-gradient(0deg, #001B2A 0%, rgba(0,27,42,.6) 12%, rgba(0,27,42,0) 32%),
    linear-gradient(180deg, rgba(0,19,31,.55) 0%, rgba(0,19,31,0) 22%);
}
/* risco de luz na diagonal do "A" (118 graus), do lado direito, como no mockup */
.hero__risco{
  position:absolute;top:-10%;bottom:-10%;right:7%;width:clamp(90px,11vw,170px);z-index:-1;pointer-events:none;
  transform:skewX(-28deg);
  background:linear-gradient(90deg, transparent 0%, rgba(239,227,198,.05) 30%, rgba(255,255,255,.13) 50%, rgba(239,227,198,.05) 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
}
.hero__in{padding-block:clamp(52px,6.2vw,96px) clamp(48px,5.4vw,84px)}
.hero__texto{max-width:760px}
.hero__chip{color:rgba(221,230,236,.92)}
.hero__sep{display:inline-block;margin-inline:.55em;color:var(--champanhe);opacity:.8}
.hero__h1{font-size:clamp(2.1rem,4.4vw,3.45rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:22px}
.hero__apoio{max-width:54ch;font-size:clamp(1rem,1.2vw,1.1rem);color:rgba(255,255,255,.86)}
.hero__acao{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:30px}
.hero__aviso{
  display:flex;align-items:center;gap:12px;margin:0;max-width:330px;
  padding-left:24px;border-left:1px solid rgba(214,194,155,.4);
  font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.82);
}
.hero__aviso svg{flex:0 0 24px;color:var(--champanhe)}
.hero .nota{margin-top:22px}

/* faixa de numeros */
.faixa{
  position:relative;background:linear-gradient(180deg,#001B2A 0%, #00141F 100%);
  border-top:1px solid rgba(214,194,155,.18);
  padding-block:clamp(26px,3vw,36px) clamp(18px,2vw,24px);
}
.faixa::before{
  content:"";position:absolute;top:-1px;left:50%;width:min(420px,60%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--champanhe),transparent);opacity:.7;
}
.faixa__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.56fr);gap:clamp(20px,3vw,44px);align-items:center}
.faixa__nums{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0}
.faixa__nums li{display:flex;align-items:center;gap:14px;padding-right:clamp(10px,2vw,28px)}
.faixa__nums li + li{padding-left:clamp(10px,2vw,28px);border-left:1px solid rgba(255,255,255,.12)}
.faixa__num{display:flex;flex-direction:column;gap:2px}
.faixa__num b{font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:800;line-height:1.1;color:var(--branco);letter-spacing:-.01em;white-space:nowrap}
.faixa__rot{font-size:.84rem;line-height:1.35;color:rgba(255,255,255,.72);white-space:nowrap}
.num-mais{margin-right:.08em}
.faixa__frase{margin:0;padding-left:clamp(20px,2.6vw,36px);border-left:1px solid rgba(214,194,155,.4);font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.86);text-wrap:balance}
.faixa__fonte{margin:18px 0 0;font-size:.7rem;color:rgba(255,255,255,.62)}
.faixa .aviso-pend{margin-top:18px}

/* ===========================================================
   02 · O QUE ESTA ACONTECENDO (mockup 02)
   =========================================================== */
.acontece{position:relative;overflow:hidden}
.acontece__topo{position:relative}
.acontece__foto{
  --recorte:polygon(16% 0,100% 0,100% 100%,0 100%);
  position:absolute;right:0;bottom:0;top:calc(-1 * clamp(64px,7.5vw,108px));width:42%;margin:0;
}
.acontece__foto picture{position:absolute;inset:0;clip-path:var(--recorte)}
.acontece__foto img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.acontece__fio{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.acontece__fio line{stroke:var(--champanhe);stroke-width:2;opacity:.9}
.acontece__cabeca{max-width:58%}
.acontece__cabeca .titulo,.mercado__cabeca .titulo{font-size:clamp(1.65rem,2.55vw,2.2rem)}
.acontece__cabeca .texto{max-width:64ch}
.acontece__ponte{margin:18px 0 0;font-size:.98rem;font-weight:600;color:var(--azul-800)}

.acontece__linha{
  display:grid;grid-template-columns:minmax(0,3.45fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);
  margin-top:clamp(36px,4vw,52px);align-items:start;
}
.etapas{--g:clamp(16px,1.8vw,24px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.etapa{position:relative}
.etapa__ic{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin-bottom:22px;color:var(--champanhe);
  background:radial-gradient(circle at 32% 28%, #0A3550 0%, var(--azul-900) 72%);
  box-shadow:inset 0 0 0 1px rgba(214,194,155,.28), 0 10px 22px -10px rgba(0,24,36,.55)}
.etapa__ic i{
  position:absolute;right:-4px;bottom:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-style:normal;font-size:.74rem;font-weight:800;color:var(--azul-900);
  background:var(--branco);box-shadow:0 0 0 1.5px var(--champanhe-tinta);
}
/* seta entre as etapas: sai do icone de cima e aponta para o proximo */
.etapa + .etapa::before{
  content:"";position:absolute;top:31px;left:calc(-100% - var(--g) + 80px);width:calc(100% + var(--g) - 96px);height:10px;margin-top:-4px;
  background:
    linear-gradient(90deg, rgba(214,194,155,.25), var(--champanhe-tinta)) left center / calc(100% - 8px) 1.5px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1l5 4-5 4' fill='none' stroke='%238A6B3C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 10px 10px no-repeat;
}
.etapa h3{margin:0 0 8px;font-size:1.02rem;font-weight:700;line-height:1.3;color:var(--azul-900)}
.etapa p{margin:0;font-size:.86rem;line-height:1.58;color:var(--cinza-2)}

.importante{padding:4px 0 4px clamp(20px,2.4vw,30px);border-left:1.5px solid var(--champanhe)}
.importante .importante__rot{display:flex;align-items:center;gap:10px;margin:0 0 36px;font-size:.98rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--champanhe-tinta)} /* especificidade maior que ".importante p" (senao o margin:0 dela ganha); respiro medido pra alinhar com o h3 "Proximos passos" */
.importante__rot svg{color:var(--champanhe-tinta);width:24px;height:24px}
.importante h3{margin:0 0 10px;font-size:1rem;font-weight:800;line-height:1.3;color:var(--azul-900);letter-spacing:-.01em}
.importante p{margin:0;font-size:.86rem;line-height:1.58;color:var(--cinza-2)}

/* faixa azul-marinho arredondada */
.frente{
  position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(40px,4.5vw,60px);border-radius:22px;
  padding:clamp(28px,3.2vw,40px) clamp(24px,3.4vw,44px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.62fr);gap:clamp(22px,3vw,40px);align-items:center;
  color:var(--branco);
  background:
    radial-gradient(60% 120% at 100% 50%, rgba(4,108,144,.34) 0%, transparent 62%),
    linear-gradient(120deg, var(--azul-800) 0%, var(--azul-900) 70%);
  box-shadow:0 30px 60px -36px rgba(0,24,36,.6);
}
.frente::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(118deg, rgba(201,214,222,.05) 0 1px, transparent 1px 16px);
  -webkit-mask-image:radial-gradient(70% 90% at 0% 0%, #000 0%, transparent 62%);
          mask-image:radial-gradient(70% 90% at 0% 0%, #000 0%, transparent 62%);
}
.frente__cab{display:flex;gap:20px;align-items:flex-start}
.frente__ic{flex:0 0 auto;color:var(--champanhe);margin-top:4px}
.frente .olho{margin-bottom:8px}
.frente__titulo{margin:0 0 10px;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.2}
.frente__texto{margin:0;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.82)}
.frente__lista{list-style:none;margin:0;padding:4px 0 4px clamp(20px,2.4vw,32px);border-left:1px solid rgba(214,194,155,.4);display:grid;gap:14px}
.frente__lista li{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.9)}
.frente__lista svg{flex:0 0 20px;margin-top:1px;color:var(--champanhe)}
.mapa--frente{align-self:center;z-index:-1;width:136%;max-width:none;margin-left:-22%;margin-right:clamp(-46px,-3.6vw,-26px)}

/* mapa do estado (malha do IBGE), brilho champanhe */
.mapa{position:relative;color:var(--champanhe)}
.mapa__svg{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 0 5px rgba(214,194,155,.55)) drop-shadow(0 0 16px rgba(214,194,155,.22))}
.mapa__capital{
  position:absolute;left:var(--cx);top:var(--cy);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:#FFF5DD;box-shadow:0 0 10px 3px rgba(239,227,198,.85);
}
.mapa__capital::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(239,227,198,.8);opacity:0}

/* ===========================================================
   03 · TAMANHO DO MERCADO (mockup 03)
   =========================================================== */
.mercado{position:relative;background:var(--branco)}
.mercado__topo{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(64px,7.5vw,108px) clamp(48px,5vw,72px)}
.mercado__foto{position:absolute;top:0;right:0;bottom:0;width:64%;margin:0;z-index:-1}
.mercado__foto img{width:100%;height:100%;object-fit:cover;object-position:100% 30%}
/* fade continuo para o branco pela esquerda e por baixo: nenhuma borda marcada */
.mercado__foto picture{display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 46%), linear-gradient(180deg, #000 52%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 46%), linear-gradient(180deg, #000 52%, transparent 100%);
          mask-composite:intersect;
}
.mercado__cabeca{max-width:68%}
.mercado__cabeca .texto{max-width:none}
.mercado__rot{display:table;margin:clamp(30px,3.4vw,44px) 0 16px}
.dados{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dado{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px 22px 44px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
}
.dado .ic-circ{margin-bottom:14px}
.dado::before{
  content:"";position:absolute;left:22px;bottom:22px;width:30px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--champanhe-tinta),var(--champanhe));
}
.dado__num{font-size:clamp(1.45rem,2vw,1.75rem);font-weight:800;line-height:1.1;color:var(--azul-900);letter-spacing:-.015em;white-space:nowrap}
.dado__tit{font-size:1.06rem;font-weight:800;line-height:1.25;color:var(--azul-900)}
.dado__rot{font-size:.88rem;line-height:1.5;color:var(--cinza-2)}
.mercado__fonte{margin:16px 0 0;font-size:.7rem;color:var(--cinza-2);text-align:left}

/* faixa escura "por tras dos numeros" */
.oportunidade{
  position:relative;isolation:isolate;overflow:hidden;color:var(--branco);
  padding-block:clamp(40px,4.4vw,60px);
  background:
    radial-gradient(40% 120% at 70% 50%, rgba(4,108,144,.34) 0%, transparent 70%),
    linear-gradient(100deg, var(--azul-900) 0%, #002338 60%, var(--azul-900) 100%);
}
.oportunidade::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,194,155,.6),transparent);
}
.oportunidade__in{display:grid;grid-template-columns:auto minmax(230px,1.2fr) minmax(0,.8fr) minmax(190px,.72fr);gap:clamp(20px,3vw,40px);align-items:center}
.oportunidade__cab{display:flex;gap:18px;align-items:flex-start;padding-left:18px;border-left:2px solid var(--champanhe)}
.oportunidade__ic{flex:0 0 auto;color:var(--champanhe);margin-top:2px}
.oportunidade .olho{margin-bottom:6px;padding-left:0}
.oportunidade .olho::before{display:none}
.oportunidade__titulo{margin:0;font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.12;white-space:nowrap}
.oportunidade__texto{padding-left:clamp(18px,2.4vw,30px);border-left:1px solid rgba(255,255,255,.18);font-size:.95rem}
.mapa--grande{max-width:390px;justify-self:center;width:100%}
.oportunidade__selo{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.84)}
.oportunidade__selo svg{flex:0 0 26px;color:var(--champanhe)}
.oportunidade__selo b{display:block;color:var(--branco);font-weight:700}

/* ===========================================================
   04 · PARA QUEM
   Rodada 3 (27/09): 5 cartoes. Flex + wrap + justify-center, nao grid de
   3 colunas: com 5 itens uma grade de 3 colunas deixa 1 casa vazia na
   ultima linha; em flex a ultima linha (2 cartoes) fica centralizada,
   sem vazio sobrando de um so' lado (ficha, regra 20).
   =========================================================== */
/* Rita, 27/09: 760px so' dava 4 linhas no paragrafo (as 2 metades do "/" do
   copy quebravam de novo por dentro). 940px cabe as duas em 1 linha cada. */
.quem__cabeca{max-width:940px;margin:0 auto clamp(30px,3.6vw,46px);text-align:center}
.quem__cabeca .olho{display:inline-block}
.quem__cabeca .texto{margin:0 auto}
/* paragrafo novo do Alex (rodada 5): duas frases em dois paragrafos, como no
   print dele; respiro so' entre o 1o e o 2o texto. */
.quem__cabeca .texto + .texto{margin-top:10px}
/* Rodada 5 (29/09): 4 cartoes (Empresarios e Investidores viraram 1), grade
   de verdade em vez do flex-wrap da rodada anterior (esse existia so' pra
   nao deixar casa vazia com 5 itens; com 4, grade fecha certinho). */
.perfis{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr;gap:16px;max-width:420px}
.perfil{padding:32px 20px 30px;text-align:center}
.perfil .ic-circ{width:54px;height:54px;margin:0 auto 22px}
.perfil::before{left:50%;margin-left:-18px}
.perfil h3{margin:0 0 8px;font-size:1.01rem;font-weight:700;line-height:1.3;color:var(--azul-900)}
.perfil p{margin:0;font-size:.87rem;line-height:1.6;color:var(--cinza-2);text-wrap:balance}
/* 901px, nao 1101: e' onde .perfil sai de 1 coluna (empilhado) e vira grade
   de 4 (900px e' o ponto de corte do media query de celular).
   Rita (rodada 5, 2a volta): "Empresarios e Investidores" com nowrap
   estourava o cartao (228px de titulo contra ~214px de area util na 1440,
   pior ainda em 1024/901). Deixa quebrar (normal) e reserva 2 linhas de
   altura pro h3 dos 4 cartoes, com o texto centralizado nessa caixa: quem
   tem 1 linha so' fica centralizado, quem quebra em 2 nao empurra os
   vizinhos pra baixo - os 4 titulos ficam visualmente na mesma altura. */
@media (min-width:901px){
  .perfis{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
  .perfil h3{
    white-space:normal;display:flex;align-items:center;justify-content:center;
    min-height:2.6em;text-wrap:balance;
  }
}

/* faixa "seja qual for o seu perfil": mesma familia das outras faixas
   escuras arredondadas (02 e 03), num "card" de largura total */
.momento{padding-block:clamp(44px,5vw,64px)}
.momento__in{
  position:relative;isolation:isolate;overflow:hidden;border-radius:22px;
  padding:clamp(30px,3.4vw,44px) clamp(26px,3.6vw,46px);
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(16px,2.4vw,26px);
  color:var(--branco);
  background:
    radial-gradient(60% 130% at 100% 0%, rgba(4,108,144,.34) 0%, transparent 62%),
    linear-gradient(120deg, var(--azul-800) 0%, var(--azul-900) 70%);
  box-shadow:0 30px 60px -36px rgba(0,24,36,.6);
}
.momento__in::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(118deg, rgba(201,214,222,.05) 0 1px, transparent 1px 16px);
  -webkit-mask-image:radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 62%);
          mask-image:radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 62%);
}
.momento__ic{flex:0 0 auto;color:var(--champanhe)}
.momento__cab{flex:1 1 320px;min-width:0}
.momento__cab .olho{margin-bottom:8px}
.momento__titulo{margin:0;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.2}
/* rodada 5: texto A (topo) + observacao B (embaixo, com icone de alerta),
   as duas empilhadas na coluna da direita - por isso o basis/borda/padding
   saiu do .momento__texto e foi pro wrapper .momento__corpo. */
.momento__corpo{flex:1 1 320px;min-width:0;padding-left:clamp(20px,2.4vw,32px);border-left:1px solid rgba(214,194,155,.4);display:flex;flex-direction:column;gap:10px}
.momento__texto{margin:0;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.86)}
.momento__aviso{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.62)}
.momento__aviso svg{flex:0 0 16px;margin-top:2px;color:rgba(255,255,255,.55)}

/* ===========================================================
   05 · QUAL MODELO COMBINA COM O SEU PROJETO
   =========================================================== */
/* Rita, 28/09 (defeito 4): a grade "auto minmax(0,1fr)" lado a lado (titulo
   de 2 linhas com a linha do <em> larga vira o "auto"; o paragrafo herdava
   so' o que sobrava, ~274px em 1440) e' o mesmo bug ja' corrigido em
   .formas__cabeca (nota abaixo): titulo empilhado, texto embaixo com largura
   propria, pra caber nas 2 linhas do "/" do copy. */
.caminho__cabeca{margin-bottom:clamp(30px,3.6vw,46px)}
.caminho__cabeca .titulo{margin-bottom:14px}
.caminho__cabeca .texto{max-width:760px}
/* Rita, 27/09: o H2 de 3 linhas deste bloco e' largo (a maior linha tem quase 40
   caracteres no tamanho do titulo), e ao lado dele so' sobravam ~200px pro
   paragrafo de 148 caracteres, que ia a 5-6 linhas em vez das 2 que o copy pede
   (media so' ~30 caracteres por linha). Cabecalho empilhado (titulo a largura
   toda, texto+selo embaixo em vez de ao lado) da' ao paragrafo espaco de sobra
   pra caber nas 2 linhas do "/" do copy. */
.formas__cabeca{margin-bottom:clamp(30px,3.6vw,46px)}
.formas__cabeca .titulo{margin-bottom:20px}
.formas__col2{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(18px,2.4vw,28px)}
/* Rita, 27/09 (observacao): 640px ainda deixava o 1o trecho do "/" quebrar
   por dentro (3 linhas no total em vez de 2). 900px cabe o trecho inteiro
   numa linha so'. */
.formas__col2 .texto{flex:1 1 420px;max-width:900px}

/* Rita, 27/09: resumo/texto/contra/perfil alinhados nos tres cartoes, em 1440 e em
   390. A Consultoria tem 5 pros e nao tem "contra"; os outros dois tem 3 pros e
   "contra". Sem subgrid isso desalinha (a lista de pros mais alta empurra o resto
   so' naquele cartao). Com subgrid, as 3 colunas compartilham as MESMAS faixas de
   linha (cab/texto/pros/contra-ou-melhor/perfil): a faixa dos pros vira a altura do
   maior dos tres (a Consultoria, 5 itens), e os outros dois cartoes ganham a mesma
   altura de faixa ali, sobrando espaco em branco onde a lista deles e' mais curta,
   empurrando contra/perfil pra bater com os vizinhos. Sem suporte a subgrid
   (fallback), o cartao volta a ser flex coluna simples. */
.modelos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.modelo{display:flex;flex-direction:column;gap:14px;padding:30px 26px 26px;grid-row:span 5}
@supports (grid-template-rows:subgrid){
  .modelo{display:grid;grid-template-rows:subgrid;row-gap:14px}
}
/* rodada 6 (29/09): pedido do Alex, "nao conseguimos evidenciar visualmente que a
   melhor opcao e' a consultoria". O cartao vira azul-marinho da marca, texto claro,
   e cresce por `transform:scale` (nao mexendo em `grid-template-columns`): scale e'
   so' pintura, nao redistribui largura entre colunas nem empurra os vizinhos - a
   ficha do Pipe ja' registrou duas vezes nesta pagina que mexer numa coluna estraga
   a vizinha (subgrid, 27/09). translateY + scale juntos sobem e aumentam o cartao
   ~10px pra cada lado (gap entre colunas e' 20px, sobra folga, sem encostar no
   vizinho). No celular (abaixo de 901px) o cartao continua azul, mas sem crescer:
   as duas media queries de `.modelo--destaque{transform:none}` (900px e 600px)
   zeram o scale junto, porque e' a mesma propriedade `transform`. */
.modelo--destaque{
  position:relative;z-index:2;
  transform:translateY(-16px) scale(1.055);transform-origin:center bottom;
  border-color:rgba(214,194,155,.4);color:var(--branco);
  background:linear-gradient(120deg, var(--azul-800) 0%, var(--azul-900) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 34px 64px -28px rgba(0,10,20,.55);
}
/* filhos com cor propria pensada pra cartao branco (DS: cor de marca sobre cor de
   marca falha contraste) precisam de variante escopada pro fundo azul-marinho. */
.modelo--destaque .ic-circ{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(214,194,155,.4)}
.modelo--destaque .modelo__nome{color:var(--branco)}
.modelo--destaque .modelo__resumo{color:rgba(255,255,255,.78)}
.modelo--destaque .modelo__texto{color:rgba(255,255,255,.86)}
.modelo--destaque .modelo__pros li{color:rgba(255,255,255,.88)}
.modelo--destaque .modelo__pros svg{color:var(--champanhe)}
.modelo--destaque .modelo__perfil{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.82)}
.modelo--destaque .modelo__perfil svg{color:var(--champanhe)}
.modelo--destaque .modelo__perfil b{color:var(--branco)}
.modelo__badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:1;
  display:flex;align-items:center;gap:6px;padding:.42em .95em;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--azul-900);background:var(--prata-metal);
  box-shadow:0 8px 18px -8px rgba(0,24,36,.4);
}
.modelo__cab{display:flex;gap:14px;align-items:flex-start}
.modelo__cab .ic-circ{width:44px;height:44px}
.modelo__nome{margin:0;font-size:1rem;font-weight:800;letter-spacing:.01em;color:var(--azul-900)}
/* rodada 6 (29/09): "Marca + Suporte do Franqueador" e "Responsabilidade integral +
   Autonomia" deixavam 1 palavra sozinha na ultima linha em 1024 e 360 (detector de
   palavra sozinha). text-wrap:pretty (herdado de "p") nao evita, balance evita. */
.modelo__resumo{margin:3px 0 0;font-size:.82rem;font-weight:600;color:var(--azul-600);text-wrap:balance}
.modelo__texto{margin:0;font-size:.87rem;line-height:1.6;color:var(--cinza-2)}
/* Rita, 27/09: com subgrid a faixa dos pros vira a altura do cartao mais alto
   (a Consultoria, 5 itens); sem align-content:start, o grid espalha os itens
   dos cartoes mais curtos pra preencher a faixa toda (gap vira variavel em vez
   dos 8px fixos). align-content:start mantem os itens colados no topo, com o
   sobra de espaco no rodape' da faixa, nao entre eles. */
.modelo__pros{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.modelo__pros li{display:flex;gap:8px;align-items:flex-start;font-size:.84rem;line-height:1.45;color:var(--cinza-tx)}
.modelo__pros svg{flex:0 0 16px;margin-top:2px;color:var(--azul-600)}
.modelo__contra,.modelo__perfil{
  display:flex;gap:8px;align-items:flex-start;margin:0;padding-top:14px;
  border-top:1px solid rgba(142,155,163,.28);font-size:.82rem;line-height:1.5;color:var(--cinza-2);
}
/* margin-top:auto tirado (27/09): com subgrid, a faixa do perfil ja' e'
   compartilhada entre os tres cartoes; a margem automatica empurrava o texto
   pro RODAPE' da faixa em vez do topo, e cada cartao com um texto de tamanho
   diferente comecava a linha numa altura diferente (medido: 19,6px de
   diferenca entre Franquia e Por conta propria em 1440px). Sem a margem, o
   `align-items:flex-start` do proprio flex interno basta. */
.modelo__contra svg{flex:0 0 16px;margin-top:2px;color:#B3742A}
.modelo__perfil svg{flex:0 0 16px;margin-top:2px;color:var(--champanhe-tinta)}
.modelo__perfil b{color:var(--azul-900);font-weight:700}
/* rodada 6 (29/09): no lugar do "contra" vazio da Consultoria (pedido principal do
   Alex: "evidenciar visualmente que a melhor opcao e' a consultoria"), caixa
   dourada com trofeu. Nao reusa `.modelo__contra` (que e' so' filete no topo): aqui
   e' um bloco cheio, com fundo proprio. Ocupa a mesma faixa do subgrid (4o filho de
   5, mesma posicao de `.modelo__contra` nos outros dois cartoes). */
.modelo__melhor{
  display:flex;justify-content:center;text-align:center;margin:0;padding:14px 16px;border-radius:12px;
  background:var(--champanhe-metal);color:var(--azul-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.modelo__melhor-tx{margin:0;font-size:.86rem;line-height:1.5}
.modelo__melhor-tx b{display:block;margin-bottom:2px;font-size:.94rem;font-weight:800}

/* Rita, 29/09 (volta 2): entre 901 e ~1180px a Consultoria ficava bem mais alta que
   os vizinhos - a lista de 5 pros (mais longa que a dos outros dois cartoes) quebrava
   quase toda em 2 linhas nessa coluna estreita, inclusive "Pagamento unico (sem
   royalties)", que o Alex encurtou de proposito pra caber numa so'. Como as 3 colunas
   compartilham a MESMA faixa (subgrid), o excesso virava buraco vazio nos cartoes
   vizinhos entre os pros e o alerta. Nessa faixa: sem scale (o cartao real ja' e' mais
   estreito, ampliar so' pioraria a quebra), padding e fonte da lista mais apertados so'
   na Consultoria, e a caixa dourada tambem mais compacta. Medido: a linha mais longa da
   lista precisa de ~283,5px sem quebrar; com este ajuste a coluna util passa a ter
   ~272px, cabe numa linha so'. E o cartao elevado + o selo "A melhor opcao" quase
   encostavam na ultima linha do paragrafo de abertura: respiro maior so' aqui. */
@media (min-width:901px) and (max-width:1180px){
  .formas__cabeca{margin-bottom:clamp(64px,9vw,88px)}
  .modelo--destaque{transform:translateY(-8px);padding:24px 14px 20px}
  .modelo--destaque .modelo__pros{gap:6px}
  .modelo--destaque .modelo__pros li{gap:6px}
  /* volta 3 (Rita): letra da lista igual a dos vizinhos (menor no destaque invertia a
     hierarquia); a largura vem da coluna do meio mais larga. Caixa dourada nao estica
     com o subgrid (sobrava vazio embaixo dela): align-self:start */
  .modelos{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr)}
  .modelo--destaque .modelo__pros svg{flex-basis:14px}
  .modelo--destaque .modelo__melhor{padding:10px 12px;gap:8px;align-self:start}
}

/* rodada 6 (29/09): CTA final do bloco 05, no lugar da faixa "Nossa experiencia
   mostra que" (saiu inteira, pedido do Alex, print 16.06.37). Secao clara
   (.secao--clara): o botao segue a regra de fundo claro (DS secao 27),
   `.btn--escuro`, nao o `.btn--acao` prata do hero - prata sobre fundo claro
   some (mesmo bug que a secao 27 ja' documentou); mesmo formato/raio/seta do
   botao, so' muda a cor pelo fundo. */
.formas__final{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(40px,4.4vw,58px)}
/* Rita, 29/09 (volta 2): o `max-width:52ch` forcava a quebra em 2 linhas mesmo no
   computador (a frase inteira + icone passa pouco de 52ch, e a pagina tem sobra
   de largura de sobra pra caber numa linha so'). `display:inline-flex` dentro de
   um flex column vira `flex` bloco-nivel de qualquer jeito (filho de flex e'
   "blockificado"), mas como o pai usa `align-items:center` (nao `stretch`), a
   caixa ja' encolhe pro proprio conteudo sozinha - o max-width que atrapalhava,
   tirado. `text-align:left` no lugar do `justify-content:center`: quando o texto
   quebra (celular), cada linha comeca colada no icone em vez de centralizar por
   dentro do proprio texto e deixar o icone sozinho preso na margem esquerda. */
.formas__final .nota{margin:16px 0 0;text-align:left}

/* ===========================================================
   06 · POR QUE A A'CASTRO CONSULTORIA
   Rodada 3 (27/09): a orbita sai; entram a grade de 12 servicos, os
   numeros + cartao escuro, os diferenciais e a avaliacao real.
   =========================================================== */
.porque{
  position:relative;isolation:isolate;overflow:hidden;color:var(--branco);
  background:
    radial-gradient(70% 55% at 50% 58%, rgba(4,108,144,.3) 0%, transparent 64%),
    linear-gradient(168deg, var(--azul-900) 0%, #002338 55%, var(--azul-900) 100%);
}
.porque::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(118deg, rgba(201,214,222,.045) 0 1px, transparent 1px 28px);
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 68%);
          mask-image:radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 68%);
}
/* Rita, 27/09: 820px dava 4 linhas (as 2 metades do "/" do copy quebravam de
   novo); alvo e' 3 (copy: "Texto (3 linhas no computador)"). 900px deixa a
   segunda metade numa linha so' e a primeira (mais longa) em 2. */
.porque__cabeca{text-align:center;max-width:900px;margin:0 auto}
.porque__cabeca .olho{display:inline-block}
.porque__cabeca .texto{margin-inline:auto}

/* numeros (linha inteira, 4 colunas) e, embaixo, o cartao de pessoas com os 3
   topicos de check ao lado (rodada 7). Os numeros ficam sempre numa linha
   propria: lado a lado com o cartao apertava a coluna do numero para 154px
   em 1440 e o rotulo ia a 4 linhas */
.porque__marco{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  margin:clamp(34px,4vw,50px) auto 0;
}
.placar{list-style:none;margin:0;padding:0;max-width:980px;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
.placar li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 12px;text-align:center}
.placar li + li{border-left:1px solid rgba(214,194,155,.3)}
.placar b{font-size:clamp(1.9rem,3vw,2.5rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--branco)}
.placar b .num-mais{color:var(--champanhe)}
.placar li > span{margin-top:8px;font-size:.9rem;font-weight:700;line-height:1.4;color:rgba(255,255,255,.9)}
.placar br.quebra-cel{display:none}
.placar small{font-size:.78rem;line-height:1.4;color:rgba(255,255,255,.62)}
/* rodada 7 (Alex, 30/09): o cartao escuro sobe pra esquerda (antes ficava
   centralizado, com vazio dos dois lados) e os 3 diferenciais ficam ao lado
   dele, na mesma borda dos 4 numeros (980px, o mesmo max-width do placar). */
.porque__base{display:flex;align-items:center;gap:clamp(24px,3vw,44px);width:100%;max-width:980px}
.porque__card{
  display:flex;gap:14px;align-items:center;flex:1 1 0;min-width:0;width:100%;
  padding:20px 22px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
}
.porque__card p{margin:0;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.82)}
.porque__card .ic-circ{flex:0 0 auto}

/* "nossas solucoes para ECVs": grade de 12 quadradinhos */
/* rodada 7 (Alex, 30/09): titulo e subtitulo a' esquerda; titulo em 1 linha e
   subtitulo em 2 no computador (o <br class="quebra-desk"> do HTML marca o
   corte; abaixo de 861px o navegador quebra sozinho). */
.servicos__cabeca{text-align:left;max-width:none;margin:clamp(56px,6vw,80px) 0 0}
.servicos__cabeca .olho{display:inline-block}
.servicos__titulo{margin:0 0 12px;font-size:clamp(1.5rem,2.1vw,1.85rem)}
.servicos__cabeca .texto{max-width:none;margin:0;text-wrap:pretty}
/* Rita, 27/09: mesma altura em cada fileira (esticar os cartoes, nao
   align-items:start) pra o titulo comecar sempre na mesma linha, com ou sem
   detalhe embaixo. Como o icone tem altura fixa e o `.servico` e' coluna sem
   `justify-content` (fica no topo por padrao), esticar so' engorda o rodape
   vazio do cartao mais baixo, sem espalhar o titulo dele. */
.servicos{
  list-style:none;margin:clamp(28px,3.2vw,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:14px;
}
.servico{
  display:flex;flex-direction:column;gap:10px;padding:20px 18px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
}
.servico .ic-circ{width:42px;height:42px}
.servico{justify-content:flex-start}
.servico b{font-size:.92rem;font-weight:700;line-height:1.32;color:var(--branco)}
.servico__det{display:block;margin-top:2px;font-size:.78rem;line-height:1.4;color:rgba(255,255,255,.62)}
.servico__logo{padding:10px}
.servico__logo img{width:100%;height:100%;object-fit:contain}

/* faixa "pronto para avancar?": linha simples com fio no topo, sem card
   dark-on-dark (o resto do bloco ja e' escuro) */
.avancar{border-top:1px solid rgba(214,194,155,.22);margin-top:clamp(50px,5.4vw,72px);padding-top:clamp(40px,4.4vw,56px);padding-bottom:clamp(6px,1vw,12px)}
.avancar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 32px}
.avancar__in > div{flex:1 1 380px;min-width:0}
.avancar .olho{margin-bottom:8px}
.avancar__titulo{margin:0 0 10px;font-size:clamp(1.35rem,1.9vw,1.65rem)}
.avancar__texto{max-width:52ch}
.avancar .btn{flex:0 0 auto}

/* ===========================================================
   07 · COMO SERA O CAMINHO (rodada 8, 01/10: trilha do Alex)
   Trilha vertical com espinha central: card de vidro a esquerda e a direita,
   alternados, ligados por um no na espinha. No celular a espinha vai para a
   esquerda e todos os cards ficam do mesmo lado. "Inicio" e "Fim" sao marcos
   nas pontas (li.marco), sem texto de card. Filhos do ol: 1 = Inicio,
   2 a 8 = passos 1 a 7 (passo 1 e' nth-child(2), logo "par" = card a esquerda).
   Movimento (efeitos.js, bloco TRILHA): a espinha enche e cada passo acende
   conforme a rolagem, uma vez. Sem JS ou com movimento reduzido nao entra a
   classe .vivo e tudo aparece no estado final (espinha cheia, nos acesos).
   Variaveis: --esp largura da coluna da espinha, --sobe quanto um card sobe
   por cima do vizinho do outro lado, --topo/--base onde a espinha comeca e
   termina (centro dos pinos dos marcos).
   =========================================================== */
.secao--branca.caminho{
  background:
    radial-gradient(52% 26% at 8% 30%, rgba(4,108,144,.11), transparent 72%),
    radial-gradient(46% 24% at 94% 62%, rgba(214,194,155,.30), transparent 72%),
    radial-gradient(40% 18% at 20% 92%, rgba(4,108,144,.08), transparent 72%),
    var(--branco);
}
/* Alex, 02/10: cabecalho da trilha centralizado */
.caminho__cabeca{text-align:center}
.caminho__cabeca .olho{display:inline-block}
.caminho__cabeca .texto{max-width:920px;margin-left:auto;margin-right:auto}
.trilha{
  --esp:84px;--sobe:46px;--topo:46px;--base:48px;--prog:1;
  position:relative;list-style:none;margin:6px 0 0;padding:0;
  display:flex;flex-direction:column;
}
/* espinha: trilho fixo e preenchimento que cresce com a rolagem */
.trilha::before,.trilha::after{
  content:"";position:absolute;left:50%;top:var(--topo);bottom:var(--base);width:3px;margin-left:-1.5px;border-radius:3px;
}
.trilha::before{background:rgba(0,72,108,.13)}
.trilha::after{
  background:linear-gradient(180deg,var(--champanhe-tinta),var(--champanhe) 55%,var(--azul-500));
  transform-origin:top center;transform:scaleY(var(--prog));
  box-shadow:0 0 14px rgba(214,194,155,.55);
}

/* marcos Inicio / Fim (no DOM o pino vem antes do rotulo) */
.marco{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px}
.marco--inicio{flex-direction:column-reverse}
.marco__rot{
  display:inline-flex;align-items:center;height:28px;padding:0 16px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.marco--inicio .marco__rot{color:var(--branco);background:var(--azul-900);box-shadow:0 0 0 1.5px var(--champanhe),0 8px 18px -8px rgba(0,36,60,.6)}
.marco--fim .marco__rot{color:var(--azul-900);background:var(--champanhe-claro);box-shadow:0 0 0 1.5px var(--champanhe),0 8px 18px -8px rgba(138,107,60,.55)}
.marco__pino{display:grid;place-items:center;border-radius:50%;box-sizing:border-box}
.marco--inicio .marco__pino{width:16px;height:16px;background:var(--azul-900);box-shadow:0 0 0 3px var(--branco),0 0 0 4.5px var(--champanhe)}
.marco--fim .marco__pino{
  width:30px;height:30px;color:var(--champanhe-tinta);background:var(--branco);
  box-shadow:0 0 0 1.5px rgba(138,107,60,.45),0 0 0 6px var(--branco);
}
.marco--fim .marco__pino svg{display:block}

/* passo: [card] [no] [vazio] ou [vazio] [no] [card] */
.passo{display:grid;grid-template-columns:minmax(0,1fr) var(--esp) minmax(0,1fr);margin-top:calc(var(--sobe) * -1 + 12px)}
.passo:nth-child(2){margin-top:22px}
.marco--fim{margin-top:22px}
.passo__no{
  grid-column:2;grid-row:1;justify-self:center;align-self:start;margin-top:30px;position:relative;z-index:2;
  width:22px;height:22px;border-radius:50%;box-sizing:border-box;
  background:var(--azul-900);border:2.5px solid var(--champanhe);
  box-shadow:0 0 0 5px var(--branco),0 0 0 9px rgba(214,194,155,.32);
}
.passo__card{
  grid-row:1;position:relative;min-height:132px;box-sizing:border-box;
  padding:22px 28px 24px;border-radius:20px;
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(236,242,246,.6));
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,72,108,.09),0 22px 44px -26px rgba(0,36,60,.42);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;
}
.passo:nth-child(even) .passo__card{grid-column:1}
.passo:nth-child(odd) .passo__card{grid-column:3}
/* haste que liga o card ao no */
.passo__card::before{
  content:"";position:absolute;top:40px;width:calc(var(--esp) / 2 - 11px);height:2px;
}
.passo:nth-child(even) .passo__card::before{left:100%;background:linear-gradient(270deg,var(--champanhe-tinta),var(--champanhe))}
.passo:nth-child(odd) .passo__card::before{right:100%;background:linear-gradient(90deg,var(--champanhe-tinta),var(--champanhe))}
.passo__card:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(138,107,60,.45),0 0 0 5px rgba(214,194,155,.2),0 28px 50px -24px rgba(0,36,60,.5);
}
.passo__num{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
  font-size:1.9rem;font-weight:800;line-height:1;letter-spacing:.01em;color:var(--champanhe-tinta);
}
.passo__num::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,rgba(138,107,60,.5),transparent)}
.passo h3{margin:0 0 8px;font-size:1.02rem;font-weight:800;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:var(--azul-900)}
.passo p{margin:0;font-size:.95rem;line-height:1.58;color:var(--cinza-2);text-wrap:pretty}
/* Alex, 02/10: o bege do ultimo passo saiu, card final em azul da marca */
.passo--final .passo__card{
  background:linear-gradient(150deg,var(--azul-700),var(--azul-900));
  border-color:rgba(214,194,155,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(214,194,155,.4),0 22px 44px -22px rgba(0,36,60,.65);
}
.passo--final .passo__card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(214,194,155,.6),0 0 0 5px rgba(214,194,155,.18),0 28px 50px -22px rgba(0,36,60,.7)}
.passo--final .passo__num{color:var(--champanhe)}
.passo--final .passo__num::after{background:linear-gradient(90deg,rgba(214,194,155,.6),transparent)}
.passo--final h3{color:var(--branco)}
.passo--final p{color:rgba(255,255,255,.8)}

/* celular: espinha na esquerda, cards todos do mesmo lado */
@media (max-width:860px){
  .trilha{--esp:46px;--topo:14px;--base:15px}
  .trilha::before,.trilha::after{left:calc(var(--esp) / 2)}
  .marco,.marco--inicio{flex-direction:row;align-items:center;gap:12px}
  .marco--inicio .marco__pino{margin-left:calc(var(--esp) / 2 - 8px)}
  .marco--fim .marco__pino{margin-left:calc(var(--esp) / 2 - 15px)}
  .passo,.passo:nth-child(2){margin-top:16px;grid-template-columns:var(--esp) minmax(0,1fr)}
  .passo:nth-child(2){margin-top:20px}
  .passo__no{grid-column:1;margin-top:28px}
  .passo:nth-child(n) .passo__card{grid-column:2;min-height:0;padding:20px 20px 22px}
  .passo:nth-child(n) .passo__card::before{left:-13px;right:auto;width:13px;top:38px;background:linear-gradient(90deg,var(--champanhe),var(--champanhe-tinta))}
  .trilha.vivo .passo:nth-child(odd){--dx:-30px}
  .passo__num{font-size:1.6rem}
  .passo h3{font-size:.94rem;letter-spacing:.03em;text-wrap:balance}
  .passo p{text-wrap:balance}
}

/* o passo nunca some: apagado (.55) ate o gatilho a 90% da tela, a entrada so' acende */
/* movimento: so' com JS e sem prefers-reduced-motion (a classe .vivo vem do efeitos.js) */
@media (prefers-reduced-motion:no-preference){
  .trilha.vivo::after{transition:transform .25s linear}
  .trilha.vivo .passo{opacity:.55;transform:translateX(var(--dx,-30px));transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  .trilha.vivo .passo:nth-child(odd){--dx:30px}
  .trilha.vivo .passo.on{opacity:1;transform:none}
  .trilha.vivo .passo:not(.on) .passo__no{background:var(--branco);border-color:rgba(0,72,108,.3);box-shadow:0 0 0 5px var(--branco)}
  .trilha.vivo .passo__no{transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}
  .trilha.vivo .passo.on .passo__no{animation:no-acende .9s ease-out 1}
  @keyframes no-acende{0%{box-shadow:0 0 0 5px var(--branco),0 0 0 4px rgba(214,194,155,.7)}100%{box-shadow:0 0 0 5px var(--branco),0 0 0 16px rgba(214,194,155,0)}}
  .trilha.vivo:not(.fim) .marco--fim .marco__pino{color:rgba(138,107,60,.4)}
  .trilha.vivo .marco--fim .marco__pino{transition:color .4s ease,background .4s ease,box-shadow .4s ease}
  .trilha.vivo.fim .marco--fim .marco__pino{color:var(--branco);background:var(--champanhe-tinta);box-shadow:0 0 0 1.5px var(--champanhe),0 0 0 6px var(--branco),0 0 22px rgba(214,194,155,.8)}
}
@media (prefers-reduced-motion:reduce){
  .passo__card{transition:none}
  .passo__card:hover{transform:none}
}

/* ===========================================================
   FAIXA "VOCÊ NÃO CAMINHA SOZINHO" (fecha o bloco 07)
   Rodada 4, correcao da Rita (defeitos 6 e 14): largura cheia do .wrap (a
   960px estreita deixava borda fora da grade de cima e ~340px vazios a'
   direita em 1440, medido); e composicao em linha (titulo+texto+botao a'
   esquerda, grade 2x2 dos 4 itens a' direita), pra nao repetir a pilha
   vertical do cartao escuro do bloco 08 (olho+titulo, paragrafo, lista,
   botao, tudo empilhado) em 3 superficies escuras seguidas.
   =========================================================== */
.acompanha{
  position:relative;isolation:isolate;overflow:hidden;color:var(--branco);
  padding-block:clamp(52px,5.6vw,76px);
  background:
    radial-gradient(55% 130% at 0% 0%, rgba(4,108,144,.34) 0%, transparent 62%),
    linear-gradient(150deg, var(--azul-900) 0%, #00263E 100%);
}
.acompanha::before{
  content:"";position:absolute;top:0;left:50%;width:min(420px,60%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--champanhe),transparent);opacity:.7;
}
/* 2a volta da Rita (28/09, N5): coluna do titulo era 260-300px, larga demais
   estreita pra "A A'Castro Consultoria esta com voce." (38 caracteres) numa
   linha so' no tamanho de titulo - saia em 3-4 linhas contra as 2 que o copy
   pede (a frase quebra em 2 pelo "/": "Voce nao caminha sozinho." + a frase
   do <em>). Coluna bem mais larga (340-460) e titulo um pouco menor fecham
   as 2 linhas do copy sem quebrar "A'Castro Consultoria" no meio (nao-quebra
   nos dois nomes agora, HTML). Prova: faixa-07-acompanha-1440.png e -390.png. */
.acompanha__in{display:grid;grid-template-columns:minmax(340px,460px) minmax(0,1fr);gap:clamp(28px,3.6vw,48px);align-items:center}
.acompanha__col{max-width:460px}
.acompanha__ic{
  display:inline-flex;color:var(--champanhe);margin-bottom:16px;
}
.acompanha__titulo{margin:0 0 14px;font-size:clamp(1.28rem,1.85vw,1.56rem);line-height:1.25}
/* N4: "itens da faixa nao menores que o paragrafo dela" - paragrafo e itens
   da grade 2x2 no mesmo tamanho (.9rem), os dois acima do piso de .86rem. */
.acompanha__texto{margin:0 0 clamp(24px,2.8vw,30px);font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.86)}
.acompanha__cta{display:flex}
/* grade 2x2, nao lista vertical (essa e' a diferenca de "cara" com o
   .form-intro do bloco 08): cada item vira um bloco com filete e fundo
   sutil, icone em cima do texto (centro geometrico de verdade, ficha do
   Pipe 2026-09-27), pra nao sobrar vazio no lado direito da faixa. */
.acompanha__lista{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;align-content:start;
}
/* align-items:stretch (nao flex-start): o <span> e' item de flex em coluna,
   e sem stretch ele encolhe pro proprio conteudo em vez de usar a largura
   cheia do tile, o que fazia o texto quebrar de forma imprevisivel (medido:
   um item com 307px de texto natural, tile de 272px, span renderizando so'
   264px e ficando numa linha so', texto pra fora da caixa). */
.acompanha__lista li{
  display:flex;flex-direction:column;align-items:stretch;gap:10px;
  padding:14px 13px 16px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
}
.acompanha__lista svg{flex:0 0 auto;color:var(--champanhe)}
/* N4: item da faixa nao fica abaixo de .86rem em nenhuma largura nem menor
   que o paragrafo (.acompanha__texto, .9rem) - igual nos dois, piso comum. */
.acompanha__lista span{font-size:.9rem;line-height:1.4;color:rgba(255,255,255,.92)}

/* ===========================================================
   08 · CADASTRO (painel escuro + cartao branco)
   =========================================================== */
.form-divide{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:18px;align-items:stretch}
.form-intro{
  position:relative;isolation:isolate;overflow:hidden;border-radius:20px;
  padding:clamp(26px,3vw,38px);color:var(--branco);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(4,108,144,.45) 0%, transparent 60%),
    linear-gradient(160deg, var(--azul-800) 0%, var(--azul-900) 100%);
}
.form-intro .texto{margin-bottom:22px}
/* Rita, 28/09 (defeito 7): "Conte com a A'Castro Consultoria" (33 caracteres)
   nao cabia numa linha so' na coluna do painel (~451px em 1440 com o clamp
   antigo), e quebrava bem no meio do nome ("A'Castro" ia pra 1a linha,
   "Consultoria" sozinha na 2a) - ficha regra 1 quer o nome inteiro junto.
   2a volta da Rita (28/09, observacao): o H2 do painel (~23,7px) ficava quase
   do mesmo tamanho do titulo do cartao de formulario ao lado (~22,7px) -
   hierarquia achatada. Clamp maior (piso e teto sobem) da' 1,6px de diferenca
   nas colunas mais estreitas (901-1024) e 3,2px em 1181+, sem voltar a
   quebrar em 3 linhas em nenhuma largura (medido 901 a 1800, floor testado
   por busca binaria: 1.3rem e' o maior valor seguro antes de 901px virar
   3 linhas). */
.form-intro .titulo{font-size:clamp(1.3rem,2vw,1.62rem)}
.form-intro .texto{font-size:.94rem}
/* Rodada 4 (28/09): 4 beneficios do mockup, lista vertical com filete entre
   eles (em vez da grade 2x2 de .diferenciais: a coluna do form-intro e'
   estreita demais pra 2 colunas com titulo+texto). ic-circ menor (38px, a
   variante padrao e' 48px) pra caber ao lado do titulo em 1 linha. */
.beneficios{list-style:none;margin:22px 0;padding:0}
.beneficios li{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
.beneficios li:first-child{padding-top:0}
.beneficios li:last-child{padding-bottom:0}
.beneficios li + li{border-top:1px solid rgba(214,194,155,.22)}
.beneficios .ic-circ{width:38px;height:38px}
.beneficios b{display:block;margin-bottom:2px;font-size:.9rem;font-weight:700;color:var(--branco)}
.beneficios p{margin:0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.72)}
.form-intro__zap{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.86)}
.form-intro__zap svg{flex:0 0 20px;margin-top:3px;color:var(--champanhe)}
.form-intro__zap a{color:var(--branco);text-decoration:underline;text-decoration-color:rgba(214,194,155,.6)}
/* Rita, 28/09 (defeito 9): 420px a .38 de opacidade cobria os beneficios 3 e
   4 e a linha do WhatsApp por baixo, atrapalhando a leitura. Bem menor, mais
   apagado e preso no canto inferior direito (a maior parte fica cortada pelo
   overflow:hidden do .form-intro), pra nao cruzar nenhuma linha de texto. */
.mapa--form{position:absolute;z-index:-1;right:-16%;bottom:-20%;width:min(200px,34%);opacity:.14;pointer-events:none}
/* terceiro mapa (nao esta no mockup): parado, sem desenho de entrada e sem sombra,
   para nao somar custo de pintura ao painel do formulario (revisao da Rita, 23/09) */
.mapa--form .mapa__svg{filter:none}
/* Rita, 28/09 (defeito 8): align-items:stretch do .form-divide esticava o
   cartao ate' a altura do painel ao lado, e sobrava ~130px de branco vazio
   embaixo do cadeado (o painel tem mais conteudo: beneficios + zap). O H2 e
   o texto do painel encolheram pra 2 linhas (defeito 7), o que ja' reduz a
   diferenca; o que sobrar vira respiro ANTES do botao (flex column com
   margin-top:auto nele), nao vazio DEPOIS da nota - button+nota ancoram no
   rodape' do cartao, que parece proposital em vez de quebrado. */
.form-cartao{
  display:flex;flex-direction:column;
  border-radius:20px;background:var(--branco);border:1px solid rgba(142,155,163,.32);
  box-shadow:0 30px 60px -34px rgba(0,36,60,.45);padding:clamp(22px,2.8vw,34px);
}
.form-cartao .olho{margin-bottom:10px}
.form-cartao__titulo{margin:0 0 22px;font-size:clamp(1.2rem,1.7vw,1.42rem);font-weight:800;line-height:1.25;color:var(--azul-900);letter-spacing:-.01em}
/* .form-cartao form, nao #form-cadastro: seletor por ID tem especificidade
   maior que ".form-cartao.enviado form"/".form-cartao.falhou form" (que
   escondem o form nesses 2 estados) e vencia sempre, deixando o formulario
   visivel por cima do "Cadastro feito" (achado testando os 3 estados). */
.form-cartao form{display:flex;flex-direction:column;flex:1}
/* respiro minimo garantido (22px, o mesmo de antes) mesmo se a altura do
   cartao bater exatinho com o conteudo; o que sobrar da altura esticada
   vai todo pro margin-top:auto do botao, empurrando botao+nota pro rodape'. */
.form-cartao form .campos{margin-bottom:22px}
.form-cartao .btn{width:100%;justify-content:center;margin-top:auto;padding-inline:1.2em}
.form-nota{display:block;margin:14px 0 0;font-size:.8rem;line-height:1.5;color:var(--cinza-2);text-align:center}
.form-nota svg{display:inline-block;vertical-align:-3px;margin-right:6px;color:var(--champanhe-tinta)}
.form-ok,.form-falha{display:none;text-align:center;padding:48px 12px}
.form-ok svg{margin:0 auto 16px;color:var(--azul-700)}
.form-falha svg{margin:0 auto 14px;color:#B3261E}
.form-ok h3,.form-falha h3{margin:0 0 8px;font-size:1.25rem;font-weight:800;color:var(--azul-900)}
.form-ok p,.form-falha p{margin:0 auto;max-width:40ch;font-size:.95rem;line-height:1.6;color:var(--cinza-tx)}
.form-cartao .form-falha .btn{width:auto;margin-top:20px}
.form-cartao.enviado form,.form-cartao.falhou form{display:none}
.form-cartao.enviado .form-ok,.form-cartao.falhou .form-falha{display:block}
.campo label{transition:color .2s ease}
.campo:focus-within label{color:var(--azul-600)}

/* ===========================================================
   09 · FAQ + cartao escuro "Mais seguranca e suporte especializado"
   =========================================================== */
/* rodada 2: titulo em uma linha (copy), centralizado; bloco centralizado
   centraliza tudo (ficha, regra 20) */
.duvidas__cabeca{max-width:860px;margin:0 auto clamp(30px,3.4vw,44px);text-align:center}
.duvidas__cabeca .olho{display:inline-block}
.duvidas__cabeca .titulo{margin:0 0 14px}
.duvidas__cabeca .texto{text-wrap:balance}
.duvidas__cabeca .texto a{color:var(--azul-700);font-weight:600;text-decoration:underline;text-decoration-color:rgba(0,72,108,.4)}
/* Rodada 4 (28/09): cartao escuro ao lado das perguntas (mockup do Alex); na
   rodada 7 as perguntas viraram 1 por linha. Grid, nao flex: 1 coluna de
   perguntas + 1 coluna de cartao com largura propria. (align-items:start em .duvidas saiu na 2a volta,
   N10 - ver comentario junto da regra .duvidas, mais abaixo.)
   Rita, 28/09 (defeitos 10, 11, 12, 14): a coluna do cartao era 280-360px, a
   mesma receita visual do cartao escuro do bloco 08 (.form-intro, radial-
   gradient) - com esses dois problemas juntos, os itens (33-41 caracteres)
   iam a' 2 linhas e o texto (133 caracteres) a' 5, e o cartao ficava ~150px
   mais alto que a grade de perguntas. Coluna mais larga (320-420; a 420 cabe 1
   linha por item sem encolher fonte) + fundo solido (cor unica, sem gradiente)
   com filete no topo (em vez do glow radial do 08) + classe propria .seguranca
   sem .form-intro (2a volta, N8) deixam o cartao mais compacto e com cara
   diferente do painel do 08. 420 vale de 1181px pra cima (rodada 7: a
   coluna de 380 foi tentada pra dar largura as perguntas e reprovada: item
   quebrava, paragrafo ia a 4 linhas e partia "A'Castro / Consultoria"; a
   coluna das perguntas absorve o que sobra e as que nao cabem em 1 linha
   quebram balanceadas); a faixa 901-1180 empilha o cartao ABAIXO da grade de
   perguntas em vez de encolher a fonte (2a volta, N4/N6: 420 ali orfanava
   "liberado?" na pergunta 1, achado no detector de palavra sozinha em
   1024px; empilhar devolve a coluna toda pras perguntas e da' largura de
   sobra pro cartao, sem furar o piso de .86rem). */
.duvidas-divide{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:28px;align-items:start}
/* 2a volta da Rita (28/09, N10): align-items:start tirado (era pra nao
   esticar um <details> FECHADO ate' a altura do vizinho; na grade de 2
   colunas isso deixava perguntas da mesma fileira com alturas diferentes -
   ficha 17). Na rodada 7 a grade virou 1 pergunta por linha: cada linha tem
   a altura da propria pergunta, e uma pergunta aberta so' empurra as de
   baixo, sem esticar nenhuma vizinha. */
/* rodada 7 (Alex, 30/09): uma pergunta por linha, cada caixa na largura da coluna */
.duvidas{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;text-align:left}
.duvida{display:flex;flex-direction:column}
.duvida summary{flex:0 0 auto}
/* balance em toda largura de desktop (nao so' abaixo de 860px como o
   .duvida__q generico da base.css): pergunta que nao cabe em 1 linha quebra
   em 2 linhas equilibradas, sem palavra sozinha na ultima. */
.duvidas .duvida__q{text-wrap:balance}
/* 2a volta da Rita (28/09, N8): classe propria, sem .form-intro (o HTML
   tinha as duas classes, "mesma receita visual" do painel do 08). Todo o
   que .form-intro dava (posicionamento, recorte, raio, respiro, cor base)
   agora mora aqui, self-contained. */
.seguranca{
  position:relative;isolation:isolate;overflow:hidden;border-radius:20px;
  align-self:start;padding:clamp(20px,2.4vw,28px);color:var(--branco);
}
/* fundo REALMENTE solido (uma cor so', sem gradiente) + filete no topo, bem
   diferente do degrade radial+diagonal do painel do 08 (.form-intro): o
   comentario antigo ja' dizia "fundo solido" mas o codigo era um gradiente
   nas mesmas duas cores do 08 (azul-800 a azul-900) - trocado pela cor mais
   escura da dupla, sem gradiente nenhum. */
.seguranca{
  background:var(--azul-900);
}
.seguranca::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,var(--champanhe-tinta),var(--champanhe));
}
.duvidas-divide .seguranca__titulo{font-size:clamp(1.1rem,1.4vw,1.28rem)}
/* a regra global ".titulo em{white-space:nowrap}" (>=861px) supoe container
   largo; o cartao aqui e' estreito. "e suporte especializado." (a frase
   inteira do <em>, sem quebra por decisao do copy) vazava pela borda direita
   do cartao a 1.5rem (medido em 1440px); com white-space:normal ela quebrava
   em 2 linhas e sobrava "especializado." sozinha na ultima (medido em 1181,
   1440 e 1800). Fonte menor mantem a frase inteira numa linha so', como o
   copy pede (2 linhas no total: "mais seguranca" + a frase do em). */
.duvidas-divide .seguranca__titulo em{white-space:nowrap}
.duvidas-divide .seguranca__texto{margin-bottom:20px;font-size:.9rem}
.seguranca__lista li{font-size:.88rem}
.seguranca__lista svg{color:var(--champanhe)}
.seguranca__lista span{color:rgba(255,255,255,.88)}
.duvidas-secao .aviso-pend{max-width:880px;margin-inline:auto}
.duvida{
  position:relative;overflow:hidden;border-radius:14px;background:var(--branco);
  border:1px solid rgba(142,155,163,.32);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.duvida::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;opacity:0;transition:opacity .25s ease;
  background:linear-gradient(180deg,var(--champanhe),var(--azul-500));
}
.duvida:hover{border-color:rgba(4,108,144,.3)}
.duvida[open]{border-color:rgba(4,108,144,.34);box-shadow:0 18px 36px -28px rgba(0,36,60,.4)}
.duvida[open]::before{opacity:1}
.duvida summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 20px 18px 22px;font-size:1rem;font-weight:700;line-height:1.4;color:var(--azul-900);
}
.duvida summary::-webkit-details-marker{display:none}
.duvida summary:hover{color:var(--azul-600)}
.duvida__q{flex:1 1 auto;min-width:0}
.duvida__mais{
  flex:0 0 32px;width:32px;height:32px;border-radius:50%;position:relative;
  background:var(--claro);border:1px solid rgba(0,72,108,.22);
  transition:background .25s ease,border-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.duvida__mais::before,.duvida__mais::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;
  border-radius:2px;background:var(--azul-700);transition:background .25s ease;
}
.duvida__mais::after{transform:rotate(90deg)}
.duvida[open] .duvida__mais{background:var(--azul-700);border-color:var(--azul-700);transform:rotate(45deg)}
.duvida[open] .duvida__mais::before,.duvida[open] .duvida__mais::after{background:var(--branco)}
.duvida__corpo{margin:0;padding:0 22px 20px;max-width:70ch;text-wrap:pretty;font-size:.95rem;line-height:1.68;color:var(--cinza-tx)}

/* ===========================================================
   CTA FINAL
   =========================================================== */
.fecho{
  position:relative;isolation:isolate;overflow:hidden;color:var(--branco);text-align:center;
  padding-block:clamp(64px,7vw,100px);
  background:
    radial-gradient(60% 90% at 50% 110%, rgba(4,108,144,.42) 0%, transparent 65%),
    linear-gradient(160deg, var(--azul-900) 0%, #002C45 100%);
}
.fecho::before{
  content:"";position:absolute;top:0;left:50%;width:min(520px,70%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--champanhe),transparent);opacity:.7;
}
.fecho__risco{
  position:absolute;top:-10%;bottom:-10%;left:12%;width:clamp(80px,9vw,150px);z-index:-1;pointer-events:none;
  transform:skewX(-28deg);
  background:linear-gradient(90deg, transparent 0%, rgba(239,227,198,.04) 30%, rgba(255,255,255,.09) 50%, rgba(239,227,198,.04) 70%, transparent 100%);
}
.fecho__in{max-width:1100px}
.fecho .titulo{margin:0 auto 18px;font-size:clamp(1.7rem,3vw,2.3rem)}
.fecho .texto{max-width:none;margin:0 auto 30px;text-wrap:balance}
/* ate' 1000px a quebra fixa sai e o balance reparte o texto em 3 linhas (em 880 a 2a linha
   deixava "experiencia." sozinha) */
@media (max-width:1000px){.fecho .texto br{display:none}}
.fecho__acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ===========================================================
   RESPONSIVO
   =========================================================== */
@media (max-width:1100px){
  .faixa__in{grid-template-columns:1fr}
  .faixa__frase{padding-left:0;border-left:0;max-width:62ch}
  .oportunidade__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mapa--grande{max-width:335px}
  .frente{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .mapa--frente{display:none}
  .dados{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .acontece__linha{grid-template-columns:1fr}
  .importante{max-width:680px}
  .importante .importante__rot{margin-bottom:12px} /* empilhado: o respiro que alinha com "Proximos passos" so' vale lado a lado */
}
@media (max-width:900px){
  .form-divide{grid-template-columns:1fr}
  .acompanha__in{grid-template-columns:1fr}
  .acompanha__col{max-width:none}
  .acompanha__lista{grid-template-columns:1fr}
  .duvidas-divide{grid-template-columns:1fr}
  .duvidas{grid-template-columns:1fr}
  /* celular: o cartao ocupa a coluna ate' 460px, com respiro menor (18px).
     Os itens (38/41 caracteres) nao cabem numa linha em 360/390: quebram so'
     nos grupos nao-quebra do HTML ("Atualizações do Detran-RJ" / "e da
     legislação"), pelo sentido, na fonte cheia (.88rem, piso de .86rem - N4).
     "A'Castro Consultoria" fica inteiro (nao-quebra) e o paragrafo corre em 4
     linhas nessa largura. */
  .seguranca{max-width:460px;margin-inline:auto;padding:18px}
  /* H2 e texto do painel 08 iguais ao ajuste do 1440 (quebra fixa fora,
     fonte um pouco menor), senao ficam 3-4 linhas no celular (medido) */
  /* observacao da 2a volta (H2 do painel vs titulo do cartao) tambem vale no
     celular: 1.32rem (empilhado, coluna cheia, sem risco de quebrar em 3
     linhas) contra os 1.2rem de piso do .form-cartao__titulo logo abaixo. */
  .form-intro:not(.seguranca) .titulo{font-size:1.32rem}
  .form-intro:not(.seguranca) .texto{font-size:.88rem}
  /* minmax(0,1fr), nao 1fr puro: item de grid tem min-width:auto por padrao e
     nao encolhe abaixo do min-content do texto de dentro (achado: o cartao
     "vazava" 24px da tela em 360px por causa disso, so' apareceu depois que
     o cartao virou grid com subgrid). */
  .modelos{grid-template-columns:minmax(0,1fr);max-width:460px;margin-inline:auto}
  .modelo--destaque{order:-1;transform:none}
  .formas__col2 .texto{flex-basis:100%}
  .momento__corpo{padding-left:0;border-left:0}
  .placar{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .placar li:nth-child(3){border-left:0}
  .servicos{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Rita, 27/09 (2): a mesma "Recredenciamento" que estourava em 2 colunas
     tambem estoura na faixa de 3 colunas logo depois da quebra pra 601px
     (medido: -12px de folga em 601, -6,3px em 620; some sozinho a partir de
     ~645px, quando o cartao ja' e' largo o bastante). Padding horizontal
     menor aqui da' a folga que falta nessa faixa estreita, sem mexer no
     tamanho da letra (sobra de espaco em 768/860/900 fica generosa, sem
     efeito colateral). */
  .servico{padding-left:8px;padding-right:8px}
}
@media (max-width:860px){
  .secao{padding-block:64px}
  .titulo,.olho,.duvida__q,.fecho .texto{text-wrap:balance}
  /* hero: a foto vira faixa no alto e o texto desce sobre o escuro */
  .hero__foto{left:0;bottom:auto;width:100%;height:min(52vh,420px)}
  .hero__foto img{object-position:70% 50%}
  .hero__veu{background:linear-gradient(180deg, rgba(0,19,31,.55) 0%, rgba(0,24,36,.15) 22%, rgba(0,24,36,.55) 58%, var(--azul-900) 100%);height:min(52vh,420px);bottom:auto}
  .hero__risco{display:none}
  .hero__in{padding-top:min(24vh,190px)}
  .hero__aviso{padding-left:0;border-left:0;max-width:none}
  /* no celular o "|" do olho do hero sobrava pendurado no fim da 1a linha: vira quebra (igual a LP ISO 9001) */
  .hero__sep{display:block;height:0;overflow:hidden;margin:0}
  /* 02: a foto sobe para o topo, recortada em diagonal embaixo */
  .acontece__foto{position:relative;top:auto;width:auto;height:240px;margin:calc(-1 * 64px) 0 32px}
  .acontece__foto{--recorte:polygon(0 0,100% 0,100% 82%,0 100%)}
  .acontece__fio{display:none}
  .acontece__cabeca{max-width:none}
  .etapas{grid-template-columns:1fr;gap:26px}
  .etapa{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px}
  .etapa__ic{grid-row:span 2;margin-bottom:0}
  .etapa + .etapa::before{display:none}
  .frente{grid-template-columns:1fr}
  .frente__lista{padding-left:0;border-left:0;padding-top:22px;border-top:1px solid rgba(214,194,155,.3)}
  /* 03: o Cristo sobe para o topo e o texto desce */
  .mercado__topo{padding-top:0}
  .mercado__foto{position:relative;width:auto;height:280px;margin-bottom:28px}
  .mercado__foto picture{
    -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 55%, transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add;
  }
  .mercado__cabeca{max-width:none}
  .oportunidade__in{grid-template-columns:1fr}
  .oportunidade__texto{padding-left:0;border-left:0}
  .mapa--grande{max-width:355px;justify-self:start}
}
@media (max-width:600px){
  .faixa__nums{grid-template-columns:1fr;gap:16px}
  .faixa__nums li,.faixa__nums li + li{padding:0;border-left:0}
  .dados{grid-template-columns:1fr}
  .acompanha__cta .btn{width:100%;justify-content:center}
  .placar b{font-size:1.9rem}
  /* rotulos em 2 linhas pelo sentido (as 4 celulas iguais); nowrap em 1 linha
     passava da area util da celula em 360/390 (rodada 7, Rita) */
  .placar li > span{font-size:.8rem}
  .placar br.quebra-cel{display:inline}
  .placar small{font-size:.74rem;white-space:nowrap}
  .form-cartao{padding:24px 18px}
  .form-cartao .btn{padding-inline:.9em}
  .hero__acao .btn{width:100%;justify-content:center}
  .servicos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* Rita, 27/09 (2): "Recredenciamento" (16 letras, 1 palavra so') nao cabia
     na coluna util do cartao em 2 colunas (117px util contra 146,9px de
     palavra em 360). `hyphens`/`word-break` partiam a palavra do produto e
     foram reprovados. Aqui a coluna ganha espaco por 3 lados (padding
     horizontal do cartao 18->6px, gap do grid 14->10px) e o titulo perde um
     pouco de tamanho (.92->.84rem, ainda maior que o .78rem do subtitulo).
     Medido: folga de 8,8px sobrando em 360 (pior caso), palavra inteira numa
     linha so', mesma altura por fileira, sem coluna a menos. */
  .servico{padding-left:6px;padding-right:6px}
  .servico b{font-size:.84rem}
  .avancar__in{justify-content:center;text-align:center}
  .avancar__in > div{flex-basis:100%}
  .avancar .btn{margin-inline:auto}
  /* flex-basis vira altura quando a direcao troca pra coluna: sem isso o
     cab e o texto (basis 320px) esticavam ~320px de altura cada, abrindo um
     vao enorme entre o titulo e o paragrafo (medido no celular) */
  .momento__in{flex-direction:column;text-align:left}
  .momento__cab,.momento__corpo{flex:1 1 auto}
  .modelo--destaque{transform:none}
}
/* celular: o CTA "Quero acompanhar o credenciamento" (33 caracteres) nao cabia
   em uma linha em 390 e 360 (medido). Letra um ponto menor e, abaixo de 440px,
   a seta sai do botao principal: botao em duas linhas e' defeito da casa. */
@media (max-width:480px){
  main .btn{font-size:.88rem;padding-inline:1.2em}
}
@media (max-width:440px){
  main .btn .seta{display:none}
  .form-cartao .btn{font-size:.8rem;letter-spacing:0}
}
@media (max-width:380px){ .form-cartao{padding:22px 14px} }
@media (max-width:380px){
  main .btn{font-size:.84rem;padding-inline:1em}
  .hero__h1{font-size:1.95rem}
  /* 2a volta da Rita (28/09, N4): a fonte de etapa e item nao encolhe mais
     abaixo do piso de .86rem/.88rem nem em 360px (era .8/.77rem aqui). Em
     360-380 a etapa 7 (85 caracteres) e os itens mais longos do cartao do 09
     podem fechar 1 linha a mais que os irmaos nessa largura minima - medido
     e escrito como ressalva no relatorio da rodada, nao escondido. */
}

/* ===========================================================
   Rodada 3 da Rita (23/09): linhas pedidas pelo copy e pelo mockup no computador.
   - faixa "Para te manter um passo a frente": cada item da lista em 1 linha, texto em 3,
     mapa menor e encostado a direita;
   - caixa "Importante": titulo em 2 linhas (coluna de 300px; etapas com texto .83rem
     para seguirem em 3 linhas);
   - faixa "Por tras dos numeros": paragrafo em 3 linhas, selo sem palavra sozinha.
   Medido em 1181, 1280, 1440 e 1800. Abaixo de 1241 a caixa desce para baixo das
   etapas, e abaixo de 1181 as duas faixas escuras usam o layout de 2 colunas.
   =========================================================== */
/* 2a volta da Rita (28/09, N4/N6): 420px de coluna pro cartao escuro do 09
   (valor de 1181+) orfanava "liberado?" na pergunta 1 nessa faixa, e encolher
   a fonte do cartao pra .72rem furava o piso de .86rem. Em vez de encolher a
   letra, o cartao desce para BAIXO da grade de perguntas (largura plena) so'
   nessa faixa - a grade de perguntas ganha a coluna toda de volta (sem
   orfao) e o cartao ganha largura de sobra pros itens caberem em 1 linha na
   fonte cheia (.88rem, regra geral de `.seguranca__lista li`, sem override). */
@media (min-width:901px) and (max-width:1180px){
  .duvidas-divide{grid-template-columns:1fr}
  .seguranca{max-width:640px;margin-inline:auto}
}
/* achado na varredura final (detector por segmento): a coluna do titulo da
   faixa "Voce nao caminha sozinho" widening pra 340-460 (N5, acima) apertou
   demais a grade 2x2 dos 4 itens nessa faixa de largura - "Acompanhamento do
   pedido no Detran-RJ" ia a 3 linhas e "Detran-RJ" (nao-quebra) sobrava
   sozinho na ultima em 901-911px. Coluna do titulo mais estreita so' aqui
   (280-380, ainda cabe o titulo em 2 linhas, medido) devolve espaco pra
   grade de itens: nenhum item passa de 2 linhas e nenhum orfao entre 901 e
   1180 (medido de 10 em 10px). */
@media (min-width:901px) and (max-width:1180px){
  .acompanha__in{grid-template-columns:minmax(280px,380px) minmax(0,1fr)}
  .acompanha__col{max-width:380px}
}
@media (min-width:1101px){
  .frente{padding-inline:28px;column-gap:22px;grid-template-columns:minmax(385px,1fr) max-content minmax(0,200px)}
  .frente__cab{gap:14px}
  .frente__texto{font-size:.9rem}
  .frente__lista{padding-left:22px}
  .frente__lista li{font-size:.88rem;white-space:nowrap}
  /* pedido do Alex (rodada 5): maior de verdade, sangrando na lateral do
     cartao e um pouco atras do texto (nao mais "menor, nao encosta"). */
  .mapa--frente{justify-self:end;width:190%;max-width:none;margin-left:-46%;margin-right:clamp(-40px,-3vw,-22px)}
  .acontece__linha{grid-template-columns:minmax(0,1fr) 300px;gap:28px}
  .etapas{--g:18px}
  .etapa p{font-size:.83rem}
  .importante{padding-left:20px}
  .importante h3{font-size:.92rem;letter-spacing:-.015em;text-wrap:balance}
  /* Rita (rodada 5, 2a volta): 260px de mapa + 214px de selo espremiam o
     texto pra 6 linhas. Mapa volta pra 200px (piso pedido pelo Alex) e selo
     pra 160px (com nao-quebra no rabo pra nao sobrar 1 palavra); texto
     media 3 linhas em 1280 e 1440 (4 no limite estreito de 1101-1180, onde
     o grid vira 2 colunas por causa da regra logo abaixo). */
  .oportunidade__in{grid-template-columns:auto minmax(0,1fr) minmax(0,200px) 160px;gap:16px}
  .oportunidade__cab{gap:14px}
  .oportunidade__titulo{font-size:clamp(1.4rem,1.75vw,1.6rem)}
  .oportunidade__texto{font-size:.9rem;padding-left:22px}
  .oportunidade__selo > span{text-wrap:balance}
  .mapa--grande{max-width:420px}
}
@media (min-width:1101px) and (max-width:1180px){
  .frente{grid-template-columns:minmax(0,1fr) max-content}
  .mapa--frente{display:none}
  .oportunidade__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mapa--grande{max-width:335px}
}
@media (min-width:1101px) and (max-width:1240px){
  .acontece__linha{grid-template-columns:1fr}
  .importante{max-width:680px}
  /* etapas largas: o texto fica na medida da 1440 para as tres terem 3 linhas */
  .etapa p{max-width:236px}
}
/* cartoes das 3 formas: em 861-1100 a coluna estreita dava 4/4/3 linhas */
@media (min-width:861px) and (max-width:1100px){ .forma p{font-size:.84rem} }
/* 360: titulo do CTA final em 4 linhas (era 5), etapas 3/3/3 (eram 4/3/4) e
   paragrafo da faixa "Por tras dos numeros" em 3 linhas (eram 4) */
@media (max-width:380px){
  .fecho .titulo{font-size:1.6rem}
  .etapa p{font-size:.82rem}
  .oportunidade .oportunidade__texto{font-size:.88rem}
}
/* Rita (rodada 5, 3a volta): selo "Rio de Janeiro" numa coluna de 160px ia a 5
   linhas. A partir de 1181px o selo desce pra baixo do mapa, na mesma coluna de
   300px: medido texto do cartao 3 linhas, selo 3 (com o titulo), mapa 220px,
   em 1440, 1280 e 1181. Entre 1101 e 1180 vale a grade de 2 colunas acima. */
@media (min-width:1181px){
  .oportunidade__in{grid-template-columns:auto minmax(0,1fr) 300px;gap:8px 28px}
  .oportunidade__cab{grid-column:1;grid-row:1/span 2}
  .oportunidade__texto{grid-column:2;grid-row:1/span 2}
  .mapa--grande{grid-column:3;grid-row:1;align-self:end;justify-self:center;width:220px}
  .oportunidade__selo{grid-column:3;grid-row:2;align-self:start;justify-self:stretch}
  .oportunidade__selo > span{text-wrap:wrap}
}

/* rodada 7: cartao + 3 diferenciais do bloco 06 empilham no celular/tablet
   estreito (lado a lado o cartao ficava com 52px em 360) */
@media (max-width:860px){
  .porque__base{flex-direction:column;align-items:stretch;gap:20px}
  .porque__card{flex:none}
}

/* legenda do placar em 1 linha com 8px ou mais de folga ate' a area util da celula (360: 3px a .74rem) */
@media (max-width:400px){
  .placar small{font-size:.7rem}
}

/* Rodada 8, ajustes finos do Alex (01/10): titulo dos cartoes de perfil em 1 linha a partir de 1241px (menos recuo lateral e letra .9rem; abaixo disso a coluna e' estreita demais e o titulo segue em ate 2 linhas), e menos vao abaixo dos cartoes. */
@media (min-width:1241px){
  .perfil{padding-inline:12px}
  .perfil h3{font-size:.9rem;min-height:0}
}
.secao.quem{padding-bottom:clamp(48px,4.6vw,66px)}
/* caixa Importante: lado a lado (1241+) o texto termina na mesma linha dos textos das 3 etapas; empilhada (ate 1240) volta ao respiro curto */
@media (max-width:1240px){.importante .importante__rot{margin-bottom:12px}}

/* Rodada 8, volta da Rita (item 11): de 901 a 1240 os 4 cartoes de perfil viram grade 2x2 (4 colunas deixavam "Empresarios e Investidores" em 2 linhas e o cartao ECVs em 4); titulo em 1 linha e mesmo numero de linhas de texto nos 4 */
@media (min-width:901px) and (max-width:1240px){
  .perfis{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
  .perfil h3{min-height:0}
}

/* Rodada 8, volta da Rita (trilha, celular): ate 400px a espinha e o recuo do cartao ficam mais estreitos e o titulo de todos os cartoes cabe em 1 linha (era 2 em "Organizar a documentacao" e "Protocolar e acompanhar"), e a linha de texto de 27 caracteres ("Protocolamos e acompanhamos") cabe sem deixar palavra sozinha */
@media (max-width:400px){
  .trilha{--esp:38px}
  .passo:nth-child(n) .passo__card{padding:18px 15px 20px}
  .passo h3{font-size:.8rem;letter-spacing:.01em}
}

/* Rodada 8, volta da Rita (item 8): etapa 3 fecha em 3 linhas sem terminar em "oficial da" (letra .012em mais justa so na linha larga) */
@media (min-width:1101px){ .etapa p{letter-spacing:-.012em} }

/* Rodada 8, volta da Rita (item 10): em 360 os 4 cartoes de perfil fecham no mesmo numero de linhas (recuo 10px e corpo .82rem) */
@media (max-width:380px){ .perfil{padding-inline:10px} .perfil p{font-size:.82rem} }

/* Rodada 8, volta da Rita (trilha, 861 a 1000): cartao com 2 linhas de texto nos 7 passos (corpo .88rem, recuo 16px) */
@media (min-width:861px) and (max-width:1000px){
  .passo p{font-size:.88rem}
  .passo:nth-child(n) .passo__card{padding-inline:16px}
}

/* Rodada 8, volta 3 da Rita (item 2): de 1241 para cima os 4 cartoes de perfil fecham em 3 linhas sem conector no fim. Cartao 2 quebra em "Esteja a frente / e aproveite as oportunidades / em um mercado em crescimento." (a linha mais larga fica a 8,6px da borda; antes de mexer no layout eram 5px ou "as" no fim da linha 1); recuo lateral 6px, vao de 8px entre cartoes, letra -.016em e o cartao 4 com texto mais estreito para nao cair em 2 linhas */
@media (min-width:1241px){
  .perfis{gap:8px}
  .perfil{padding-inline:6px}
  .perfil p{letter-spacing:-.016em}
  .perfil:nth-child(4) p{max-width:16em;margin-inline:auto}
}

/* Rodada 8, volta 3 da Rita (item 4): em 1025 a 1100 a etapa 2 fecha em 3 linhas como as outras (texto na medida de 300px) */
@media (min-width:1025px) and (max-width:1100px){ .etapa:nth-child(2) p{max-width:300px} }

/* Rodada 8, volta 3 da Rita (item 1): a partir de 561px o paragrafo do hero tem 56ch (era 54ch) para "Prepare-se para a proxima" fechar a linha de "transferencia." sem terminar em "para a" */
@media (min-width:561px){ .hero__apoio{max-width:56ch} }


/* ===========================================================
   Rodada 8, frente 4 (Alex, 01/10, segunda leva de ajustes finos)
   =========================================================== */
/* 4d: o balao "Fale com um especialista" desce para baixo do botao; o pe do conjunto
   alinha com o pe do texto da esquerda (align-items:flex-end). width:min-content faz a
   nota ter a largura do botao (o botao nao quebra, entao e' o min-content do conjunto). */
.avancar__in{align-items:flex-end}
.avancar__acao{display:grid;justify-items:start;width:min-content;flex:0 0 auto}
.avancar__acao .nota{margin:14px 0 0;font-size:.9rem}
@media (max-width:600px){
  .avancar__acao{width:100%;justify-items:center}
}

/* 4e (>= 901px): a grade dos 4 quadrados sobe ate' o "olho" e desce ate' o pe do botao.
   O topo e' o do olho (o icone do escudo fica acima, 34px + 16px de margem); os
   quadrados crescem por altura igual e o conteudo fica no meio de cada um. */
@media (min-width:901px){
  .acompanha__in{align-items:stretch}
  .acompanha__lista{margin-top:50px;grid-auto-rows:1fr}
  .acompanha__lista li{justify-content:center;padding-block:18px}
}

/* 4f: a linha do WhatsApp desce para o pe do painel (o que sobra de altura vai para
   cima dela) e nunca fica a menos de 34px da lista de beneficios. */
.form-intro{display:flex;flex-direction:column}
.form-intro .beneficios{margin-bottom:34px}
.form-intro__zap{margin-top:auto}

/* 4g: a caixa azul cresce ate' o pe da ultima pergunta e recebe os 3 topicos que saíram
   de "Experiencia e suporte". Os 3 ficam colados no pe da caixa. */
.seguranca{display:flex;flex-direction:column}
.seguranca__lista{margin-bottom:20px}
.seguranca__checks{margin-top:auto;gap:12px;padding-top:18px;border-top:1px solid rgba(214,194,155,.22)}
.seguranca__checks li{align-items:center;font-size:.92rem;font-weight:600;line-height:1.35;color:var(--branco)}
.seguranca__checks svg{flex:0 0 22px;margin-top:0;color:var(--champanhe)}
@media (min-width:1181px){
  .duvidas-divide{align-items:stretch}
  .seguranca{align-self:stretch}
}

/* 4a.2: em 360 o subtitulo "Responsabilidade + Autonomia" (211px) nao cabia em 1 linha na coluna de 208px; recuo lateral do cartao 26 -> 22px da 216px. */
@media (max-width:380px){ .modelo{padding-inline:22px} }

/* 4a.1: sem o selo ao lado, o paragrafo do cabecalho ficou em 2 linhas e o cartao elevado da Consultoria (translateY -16 + scale) encostava nele; mais respiro so' onde o cartao eleva (1181+). */
@media (min-width:1181px){ .formas__cabeca{margin-bottom:clamp(60px,5.2vw,76px)} }

/* 4e: em 901-924 a grade 2x2 fica estreita e o item 3 ia a 3 linhas ("Acompanhamento / do pedido / no Detran-RJ"); recuo lateral menor so' nessa faixa fecha em 2 linhas. */
@media (min-width:901px) and (max-width:924px){ .acompanha__lista li{padding-inline:6px} }

/* 4g/4h (Rita): com o JS ligado a caixa azul tem a altura do FAQ fechado e acompanha a rolagem no topo, em vez de esticar e abrir vao escuro quando as respostas abrem. */
@media (min-width:1181px){ .seguranca--fixa{align-self:start;position:sticky;top:96px} }


/* 4d celular: icone colado ao texto (grupo centralizado, texto a esquerda), como no bloco 4a. */
@media (max-width:600px){ .avancar__nota{width:fit-content;max-width:100%;text-align:left} }