/* ===========================================================
   A'CASTRO CONSULTORIA — LP ISO 9001 para empresas de vistoria
   Design system: BRIEFING/DESIGN-SYSTEM-ACASTRO.md
   =========================================================== */

:root{
  /* azuis da marca — medidos do logo e do site no ar */
  --azul-900:#001824;
  --azul-800:#00243C;
  --azul-700:#00486C;   /* COR DA MARCA */
  --azul-600:#005478;
  --azul-500:#046C90;

  /* acao */
  --prata:#C9D6DE;      /* PRATA da marca (swoosh do logo) */
  --prata-esc:#8E9BA3;
  --prata-metal:linear-gradient(145deg,#EDF2F5 0%,#AEBCC5 42%,#DDE5EA 66%,#8E9BA3 100%);

  /* claros */
  --claro:#EFF3F6;      /* azul-acinzentado: conversa com o prata do logo */
  --claro-2:#E4EBF0;
  --branco:#FFFFFF;
  --cinza-tx:#4A5560;
  --cinza-mrc:#909090;
  --linha:rgba(255,255,255,.14);

  /* ritmo */
  --gut:clamp(20px,5vw,64px);
  --maxw:1200px;
  --r-pill:999px;
  --r-card:18px;
  --h-topo:88px;      /* altura do header fixo */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--cinza-tx);
  background:var(--branco);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:1.05em 1.9em;border-radius:var(--r-pill);
  border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
  line-height:1;
}
.btn:hover{transform:translateY(-2px)}
/* Prata METALICO, nao prata chapado: o swoosh do logo ja' e' feito de
   dois tons (#909090 e #B4B4B4). O degrade repete essa leitura e evita
   que o botao morra como um cinza liso. */
.btn--acao{
  background:var(--prata-metal);
  color:var(--azul-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 6px 18px rgba(0,20,34,.26);
}
.btn--acao:hover{
  background:linear-gradient(145deg,#F7FAFC 0%,#C2CFD7 42%,#EBF1F5 66%,#A2AFB8 100%);
}
.btn--fantasma{background:transparent;color:var(--branco);border-color:rgba(255,255,255,.32)}
.btn--fantasma:hover{border-color:var(--branco)}
.btn--compacto{padding:.85em 1.5em;font-size:.85rem}
.btn .seta{flex:0 0 auto;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.btn:hover .seta{transform:translateX(4px)}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45;pointer-events:none;transform:none;
}

/* ---------- HEADER — vidro escuro ----------
   Fica sobre o hero escuro sem emenda e, quando rola para as secoes
   claras, o alpha alto segura o fundo escuro em vez de virar cinza. */
/* fixo e POR CIMA do hero: em sticky ele ocupava espaco no fluxo e o
   branco do body aparecia atras do vidro. */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(0,19,31,.76);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(201,214,222,.16);
  box-shadow:0 10px 34px rgba(0,10,20,.22);
}
/* navegador sem backdrop-filter: cai para opaco, nunca para ilegivel */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topo{background:rgba(0,19,31,.96)}
}
.topo__in{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.topo__marca img{height:58px;width:auto}
/* logo horizontal + frase de autoridade (pedido do cliente, 2026-09-15) */
.topo__id{display:flex;align-items:center;gap:22px;min-width:0}
.topo__marca{flex:0 0 auto}
.topo__id .topo__marca img{height:46px}
/* cliente achou a frase espremida (15/09 12:35): letra um pouco maior e mais
   altura no cabecalho. Em 16:09 pediu 3 linhas de novo (em 2 encostava no
   telefone): entrelinha menor para as 3 caberem sem crescer o cabecalho. */
.topo__tag{
  margin:0;padding-left:22px;border-left:1px solid rgba(201,214,222,.3);
  font-size:.66rem;font-weight:600;line-height:1.5;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.84);white-space:nowrap;
}
/* quebra fixa em 3 linhas pelo <br>: solta, sobrava "AUTOMOTIVO" sozinho numa 3a linha */
@media (min-width:1121px){ .topo__in{padding-block:18px} }
@media (max-width:1120px){ .topo__tag{display:none} }
/* celular: logo horizontal + botao na mesma linha so' cabem apertando os dois */
@media (max-width:520px){
  .topo__in{gap:12px}
  .topo__id .topo__marca img{height:28px}
  .topo__contato .btn--compacto{padding:.75em 1em;font-size:.72rem;white-space:nowrap}
  .topo__contato .btn--compacto .seta{display:none}
  /* 360px: logo + botao passavam 4px da tela */
  @media (max-width:380px){
    .topo__id .topo__marca img{height:25px}
    .topo__contato .btn--compacto{padding:.72em .8em;font-size:.68rem}
  }
  .hero__chip{font-size:.6rem;letter-spacing:.07em;padding:7px 12px 7px 10px;gap:7px}
  /* no celular o "|" sobrava pendurado no fim da 1a linha: vira quebra de linha */
  .hero__chip-sep{display:block;height:0;overflow:hidden;margin:0}
  .hero__chip > span{text-align:center}
}
.topo__contato{
  display:flex;align-items:center;gap:26px;
  font-size:.82rem;font-weight:600;color:rgba(255,255,255,.92);
}
.topo__contato span{display:block;font-weight:400;font-size:.8rem;color:rgba(255,255,255,.62)}
.topo__contato a:not(.btn){color:var(--branco);text-decoration:none}
.topo__contato a:not(.btn):hover{text-decoration:underline}
@media (max-width:860px){ .topo__contato .so-desktop{display:none} }

/* ---------- HERO — texto centralizado sobre o scanner ----------
   Pedido do dono (2026-09-15), a partir de uma referencia de hero com
   texto no centro da dobra. As faixas diagonais sairam daqui: com o
   piso em perspectiva e a grade do scan, viravam ruido. O visual
   inteiro do fundo mora em efeitos.css, bloco VARREDURA. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--branco);
  min-height:min(100svh,1000px);
  display:flex;align-items:center;
  padding-block:calc(clamp(30px,4vw,56px) + var(--h-topo)) clamp(44px,4.5vw,60px);
}
/* Foto de vistoria atras de tudo (2026-09-15). Pedido do dono: tem que
   existir, mas nao pode ser destaque. Por isso: desfoque, cor lavada para
   o azul da marca e um veu escuro mais fechado no centro, onde mora o texto.
   inset negativo + scale escondem a borda clara que o blur cria. */
.hero__foto{
  position:absolute;inset:-30px;z-index:-2;pointer-events:none;
  background:url("img/hero-vistoria.jpg") 70% 50% / cover no-repeat;
  filter:blur(2.5px) saturate(.6) brightness(.9);
  transform:scale(1.03);
}
/* veu fechado so' atras do texto; nas laterais a foto respira, para o
   tecnico e o carro serem reconheciveis mesmo desfocados */
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(46% 52% at 50% 46%, rgba(0,20,32,.7) 0%, rgba(0,20,32,.42) 60%, rgba(0,20,32,.08) 100%),
    linear-gradient(180deg, rgba(0,24,36,.45) 0%, rgba(0,24,36,.1) 40%, rgba(0,30,48,.55) 100%),
    linear-gradient(90deg, rgba(0,72,108,.18), rgba(0,72,108,.1));
}
@media (max-width:760px){ .hero__foto{background-position:78% 50%} }

.hero__centro{
  position:relative;z-index:1;width:100%;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* sombra atras do bloco de texto: o scan passa por baixo sem
   competir com a leitura */
.hero__centro::before{
  content:"";position:absolute;z-index:-1;left:50%;top:42%;
  width:min(1180px,130%);height:88%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(0,17,28,.78) 0%, rgba(0,17,28,.42) 58%, transparent 100%);
  pointer-events:none;
}

.hero__chip{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 26px;padding:8px 17px 8px 13px;border-radius:var(--r-pill);
  border:1px solid rgba(201,214,222,.28);
  background:rgba(0,24,36,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#DCE6EC;line-height:1;
}
.hero__chip svg{flex:0 0 16px;color:var(--prata)}

.hero h1{
  font-size:clamp(2.2rem,5.6vw,4.4rem);
  font-weight:800;line-height:1.04;letter-spacing:-.025em;
  margin:0 auto 24px;color:var(--branco);
  max-width:none;text-wrap:balance;
}
@media (min-width:620px){ .hero h1 em{white-space:nowrap} }
/* "Sua ECV precisa da" numa linha e "ISO 9001." sozinho embaixo (pedido do cliente) */
.hero__h1-a{display:block}
@media (min-width:380px){ .hero__h1-a{white-space:nowrap} }
@media (max-width:520px){ .hero h1{font-size:1.9rem} }
/* segunda frase do titulo, menor: "Nos cuidamos da estrutura para voce." */
.hero__h1-sub{
  display:block;margin-top:.22em;
  font-size:.52em;font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--branco);
}
.hero__chip-sep{margin-inline:.35em;color:rgba(201,214,222,.55);font-weight:400}
/* Prata chapado ficava perto demais do branco do resto do H1 e o
   destaque sumia. O degrade metalico (mesmo do swoosh do logo) separa
   por textura, nao por matiz — e ainda reforca a leitura de "selo". */
.hero h1 em{
  font-style:italic;font-weight:800;
  color:var(--prata); /* fallback se background-clip nao pegar */
  background:linear-gradient(158deg,#FFFFFF 0%,#9FB0BB 34%,#F4F8FA 56%,#8494A0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-right:.06em; /* o italico corta a ultima haste sem isso */
}
/* O SplitText envolve cada palavra num <span>. Sem repetir o degrade
   no span, o <em> fica com o fundo recortado em cima de nada e o texto
   herda o preenchimento transparente: o destaque some da tela. */
.hero h1 em .palavra{
  background:linear-gradient(158deg,#FFFFFF 0%,#9FB0BB 34%,#F4F8FA 56%,#8494A0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em,
  .hero h1 em .palavra{-webkit-text-fill-color:currentColor;background:none}
}

/* Barra vertical de apoio — elemento de marca real da A'Castro:
   aparece no hero do site no ar E no POST ISO do feed. Mantida por
   fidelidade a marca, mas desenhada como filete em degrade em vez
   da barra chapada de 3px (o default generico).                   */
.apoio{
  position:relative;padding-left:20px;margin:0 0 30px;
  font-size:clamp(.98rem,1.6vw,1.1rem);font-weight:400;line-height:1.6;
  color:rgba(255,255,255,.84);max-width:52ch;
}
.apoio::before{
  content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--prata) 0%,rgba(4,108,144,.9) 58%,rgba(4,108,144,0) 100%);
}

/* No hero centralizado a barra vertical da marca nao tem onde encostar:
   ela deita e vira filete acima do texto de apoio, mesmo degrade. */
/* 74ch: o texto do cliente cabe em 2 linhas no computador (em 56ch eram 3) */
.hero .apoio{
  padding:22px 0 0;margin:0 auto 34px;max-width:74ch;
  font-size:clamp(1rem,1.5vw,1.14rem);color:rgba(255,255,255,.86);
}
.hero .apoio::before{
  left:50%;right:auto;top:0;bottom:auto;width:84px;height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(4,108,144,0) 0%, rgba(4,108,144,.9) 22%, var(--prata) 50%, rgba(4,108,144,.9) 78%, rgba(4,108,144,0) 100%);
}

.hero__acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:16px}

/* "Fale com um especialista e descubra o caminho..." embaixo do botao */
.hero__nota{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:0 0 clamp(34px,4vw,48px);font-size:.86rem;color:rgba(255,255,255,.8);
}
.hero__nota svg{flex:0 0 20px;color:var(--prata)}
.hero__nota a{color:var(--branco);font-weight:600;text-decoration:underline;text-decoration-color:rgba(201,214,222,.5)}

/* os tres pilares do hero sairam em 2026-09-22 (pedido do Alex); o CSS deles esta em
   `_versoes/2026-09-22-antes-alex-3/assets/base.css` */

/* ---------- faixa de numeros reais, logo abaixo do hero ---------- */
.numeros{background:var(--claro);padding-block:clamp(34px,4.5vw,52px)}
/* sem limite de largura: o cliente quer a frase numa linha so' no computador */
.numeros__rot{
  margin:0 auto clamp(22px,3vw,34px);max-width:none;text-align:center;text-wrap:balance;
  font-size:clamp(.92rem,1.4vw,1.02rem);font-weight:600;line-height:1.5;color:var(--azul-800);
}
.numeros__lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.numeros__lista li{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:6px 12px;
}
.numeros__lista li + li{border-left:1px solid rgba(0,72,108,.16)}
.numeros__lista b{
  font-size:clamp(2.1rem,4.4vw,3rem);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--azul-700);
}
.numeros__lista b i{font-style:normal;color:var(--prata-esc);margin-right:.04em}
.numeros__lista span{margin-top:10px;font-size:.9rem;font-weight:700;color:var(--azul-800)}
.numeros__lista small{margin-top:2px;font-size:.78rem;color:#5A6B78}
@media (max-width:760px){
  .numeros__lista{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .numeros__lista li:nth-child(3){border-left:0}
}

/* ---------- SELO DESENHADO — visual do hero ----------
   Substitui o cartao de vidro: um artefato desenhado, nao uma
   caixa fosca decorativa. E' aqui que mora o unico momento de
   movimento da pagina.                                          */
.selo{
  position:relative;display:grid;place-items:center;
  width:min(348px,76vw);aspect-ratio:1;margin-inline:auto;
}
.selo__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.selo__anel,.selo__anel-int{fill:none;stroke-linecap:round}
.selo__anel{
  stroke:var(--prata);stroke-width:2.5;
  stroke-dasharray:804.2;stroke-dashoffset:804.2;
  transform:rotate(-90deg);transform-origin:50% 50%;
  filter:drop-shadow(0 0 14px rgba(201,214,222,.35));
  animation:selo-risca 1.9s cubic-bezier(.16,1,.3,1) .25s forwards;
}
.selo__anel-int{
  stroke:rgba(255,255,255,.3);stroke-width:1;
  stroke-dasharray:703.7;stroke-dashoffset:703.7;
  transform:rotate(-90deg);transform-origin:50% 50%;
  animation:selo-risca 2.3s cubic-bezier(.16,1,.3,1) .5s forwards;
}
.selo__marcas line{
  stroke:rgba(201,214,222,.7);stroke-width:2;stroke-linecap:round;
  opacity:0;animation:selo-marca .7s ease-out 1.5s forwards;
}
@keyframes selo-risca{to{stroke-dashoffset:0}}
@keyframes selo-marca{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .selo__anel,.selo__anel-int{animation:none;stroke-dashoffset:0}
  .selo__marcas line{animation:none;opacity:1}
}

.selo__centro{text-align:center;padding-inline:8%}
.selo__marca{height:38px;width:auto;margin:0 auto 14px;opacity:.95}
.selo__norma{
  margin:0;color:var(--branco);
  font-size:clamp(2.7rem,7.6vw,3.9rem);font-weight:800;
  line-height:.92;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.selo__rot{
  margin:13px 0 0;font-size:.82rem;font-weight:600;
  letter-spacing:.01em;color:rgba(255,255,255,.7);
}

/* ---------- faixa de confianca ---------- */
.confianca{background:var(--claro);padding-block:clamp(30px,4vw,42px)}
.confianca__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,3vw,44px);text-align:center;
}
.confianca__rot{
  width:100%;text-align:center;margin:0 0 10px;
  font-size:.88rem;font-weight:600;letter-spacing:.005em;
  color:#4E6376;
}
.confianca__item{
  display:flex;align-items:center;gap:10px;
  font-size:.88rem;font-weight:600;color:var(--azul-700);
}
.confianca__item svg{flex:0 0 20px}

/* ===========================================================
   SUPERFICIES DO NAVEGADOR — o que nao desenhamos tambem e' design
   =========================================================== */
::selection{background:var(--prata);color:var(--azul-900)}
html{scrollbar-color:var(--azul-600) var(--claro);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--claro)}
::-webkit-scrollbar-thumb{background:var(--azul-600);border-radius:99px;border:3px solid var(--claro)}
::-webkit-scrollbar-thumb:hover{background:var(--azul-700)}
:focus-visible{
  outline:3px solid var(--prata);outline-offset:3px;border-radius:4px;
}
.hero :focus-visible,.modelo :focus-visible{outline-color:var(--prata)}
input,textarea,select{caret-color:var(--azul-500)}
a:not(.btn):not(.topo__marca){text-underline-offset:.22em;text-decoration-thickness:1.5px}
.tabular{font-variant-numeric:tabular-nums}

/* ===========================================================
   FATIA 2 — corpo
   =========================================================== */

.secao{padding-block:clamp(58px,7vw,100px)}
.secao--clara{background:var(--claro)}
.secao--branca{background:var(--branco)}

.cabeca{margin:0 0 clamp(36px,4.5vw,58px)}
.cabeca h2{
  margin:0 0 16px;color:var(--azul-900);
  font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;
  line-height:1.12;letter-spacing:-.025em;text-wrap:balance;
  max-width:19ch;
}
.cabeca--larga h2{max-width:26ch}
/* cabeca centralizada ("Clientes que confiam", pedido do Alex em 2026-09-22). O paragrafo
   fica mais estreito que o padrao de 66ch: centralizado, linha longa demais cansa o olho
   na volta de uma linha para a outra. */
.cabeca--centro{text-align:center}
.cabeca.cabeca--centro h2,.cabeca.cabeca--centro p{margin-inline:auto}
.cabeca.cabeca--centro p{max-width:58ch;text-wrap:balance}
/* "Clientes que confiam" (Alex, 2026-09-23): titulo em duas linhas fixas no computador
   (o <br class="quebra-desk"> depois de "vive a") e paragrafo mais largo, no maximo
   tres linhas de 1000px para cima. Sem teto de ch no titulo: a linha 1 tem 29 letras e
   nao cabia nos 26ch da cabeca larga. Numeros medidos no demanda.md, rodada de 23/09. */
.cabeca.cabeca--confianca h2{max-width:none}
.cabeca.cabeca--confianca p{max-width:60rem}
.cabeca p{
  margin:0;font-size:1.02rem;line-height:1.65;color:var(--cinza-tx);
  max-width:66ch;
}

/* ---------- comparacao antes / depois ----------
   Substitui a grade de cards iguais: o valor esta na COMPARACAO
   linha a linha, nao em tres caixas soltas.                     */
.comparo{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid rgba(0,72,108,.16);border-radius:var(--r-card);
  overflow:hidden;background:var(--branco);
}
.comparo__col{padding:clamp(22px,3vw,34px)}
.comparo__col + .comparo__col{
  background:linear-gradient(170deg,rgba(0,72,108,.05),rgba(0,72,108,.015));
  border-left:1px solid rgba(0,72,108,.16);
}
.comparo__tit{
  margin:0 0 22px;padding-bottom:16px;
  border-bottom:1px solid rgba(0,72,108,.14);
  font-size:.95rem;font-weight:700;line-height:1.35;
  display:flex;align-items:center;gap:10px;
}
.comparo__col:first-child .comparo__tit{color:#66707D}
.comparo__col:last-child  .comparo__tit{color:var(--azul-700)}
.comparo ul{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.comparo li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:.93rem;line-height:1.55;
}
.comparo li svg{flex:0 0 18px;margin-top:3px}
.comparo__col:first-child li{color:#5C6673}
.comparo__col:last-child  li{color:var(--azul-900);font-weight:500}
@media (max-width:720px){
  .comparo{grid-template-columns:1fr}
  .comparo__col + .comparo__col{border-left:0;border-top:1px solid rgba(0,72,108,.16)}
}

/* ---------- etapas (a ordem carrega informacao) ---------- */
.etapas{display:grid;counter-reset:passo;margin-top:6px}
.etapa{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2.5vw,28px);
  padding:clamp(22px,2.8vw,30px) 0;
  border-top:1px solid rgba(0,72,108,.13);
}
.etapa:last-child{border-bottom:1px solid rgba(0,72,108,.13)}
.etapa__n{
  counter-increment:passo;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--azul-700);color:var(--branco);
  font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums;
}
.etapa__n::before{content:counter(passo,decimal-leading-zero)}
.etapa h3{margin:0 0 8px;font-size:1.08rem;font-weight:700;color:var(--azul-900);line-height:1.3}
.etapa p{margin:0;font-size:.95rem;line-height:1.62;color:var(--cinza-tx);max-width:68ch}
@media (max-width:560px){
  .etapa{grid-template-columns:1fr;gap:14px}
  .etapa__n{width:40px;height:40px;font-size:.9rem}
}

/* ---------- modelo de preco (quebra escura) ---------- */
.modelo{
  background:
    radial-gradient(105% 130% at 90% 10%, rgba(201,214,222,.15) 0%, transparent 56%),
    linear-gradient(152deg, var(--azul-900) 0%, var(--azul-700) 100%);
  color:var(--branco);
}
.modelo__grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,70px);
  align-items:center;
}
@media (max-width:880px){ .modelo__grid{grid-template-columns:1fr;gap:38px} }
.modelo h2{
  margin:0 0 18px;color:var(--branco);
  font-size:clamp(1.7rem,3.6vw,2.45rem);font-weight:800;
  line-height:1.12;letter-spacing:-.025em;text-wrap:balance;max-width:20ch;
}
.modelo h2 em{font-style:italic;color:var(--prata)}
/* mirado na coluna de texto: se fosse `.modelo p` a especificidade
   (0,1,1) atropelaria as classes do cartao de preco (0,1,0).      */
.modelo__texto p{color:rgba(255,255,255,.82);font-size:1rem;line-height:1.68;margin:0 0 16px;max-width:58ch}
.modelo__texto p:last-child{margin-bottom:0}
.modelo strong{color:var(--branco);font-weight:700}

/* placeholder visivel — dado que o cliente ainda nao mandou */
.pend{
  color:#F5A524;
  background:rgba(250,168,40,.1);
  border:1px dashed rgba(250,168,40,.5);
  border-radius:8px;padding:.04em .34em;
  display:inline-block;
}

.cartao-preco{
  background:rgba(0,18,30,.5);
  border:1px solid rgba(255,255,255,.16);border-radius:20px;
  padding:clamp(28px,4vw,38px);text-align:center;
  box-shadow:0 22px 54px rgba(0,10,20,.45);
}
.cartao-preco__rot{
  font-size:.84rem;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.72);margin:0 0 14px;
}
.cartao-preco__valor{
  font-size:clamp(2.1rem,5vw,2.9rem);font-weight:800;color:var(--branco);
  line-height:1;letter-spacing:-.03em;margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.cartao-preco__obs{
  font-size:.87rem;color:rgba(255,255,255,.72);line-height:1.55;margin:0 0 24px;
}
.cartao-preco .btn{width:100%;justify-content:center}

/* ---------- escopo ---------- */
.grade-escopo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 clamp(28px,4vw,56px);
}
.escopo-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:17px 0;border-bottom:1px solid rgba(0,72,108,.11);
}
.escopo-item svg{flex:0 0 21px;margin-top:2px}
.escopo-item b{display:block;font-size:.97rem;font-weight:700;color:var(--azul-900);margin-bottom:4px}
.escopo-item span{font-size:.89rem;line-height:1.55;color:var(--cinza-tx);display:block}

/* ---------- aviso de pendencia (interno, sai antes de publicar) ---------- */
.aviso-pend{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:30px;padding:16px 19px;
  background:rgba(250,168,40,.1);
  border:1px dashed rgba(203,128,16,.5);border-radius:12px;
  font-size:.85rem;line-height:1.55;color:#7E5205;
}
.aviso-pend svg{flex:0 0 18px;margin-top:2px}
.modelo .aviso-pend{
  background:rgba(250,168,40,.12);border-color:rgba(250,168,40,.45);color:#FFD68F;
}

/* ===========================================================
   FATIA 3 — prova, formulario, duvidas, rodape
   =========================================================== */

/* ---------- depoimentos ----------
   Desde 2026-09-22 os tres cartoes sao avaliacoes reais do Google da
   A'Castro (fonte e criterio no comentario do index.html). A grade, o
   cartao preenchido e os ajustes medidos estao em "depoimentos
   preenchidos", mais abaixo. O esqueleto de estado vazio (linhas e
   avatar cinza) saiu nessa data: nenhum elemento usava mais. */
.provas{display:grid;gap:20px}
.prova{
  position:relative;padding:30px 28px 26px;
  border:1px dashed rgba(0,72,108,.28);border-radius:var(--r-card);
  background:rgba(0,72,108,.022);
  display:flex;flex-direction:column;gap:16px;min-height:210px;
}
.prova__aspas{
  font-size:2.6rem;line-height:.7;font-weight:800;
  color:rgba(0,72,108,.22);
}
.prova__pe{
  display:flex;align-items:center;gap:12px;
  padding-top:16px;border-top:1px solid rgba(0,72,108,.1);
}

/* ---------- formulario ---------- */
.form-secao{
  background:
    radial-gradient(100% 130% at 12% 8%, rgba(4,108,144,.4) 0%, transparent 58%),
    linear-gradient(165deg, var(--azul-900) 0%, var(--azul-700) 100%);
  color:var(--branco);
}
.form-grid{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,68px);
  align-items:start;
}
@media (max-width:900px){ .form-grid{grid-template-columns:1fr;gap:36px} }
/* Titulo e paragrafo dividem a mesma coluna e a mesma regra de quebra
   (`pretty`, que enche a linha e so' evita palavra sozinha). Antes o titulo
   tinha teto de 17ch com `balance` e o paragrafo 50ch: o paragrafo passava
   41px da linha mais longa do titulo em 1920 (medido em 22/09), o "fora" que
   o Alex marcou no audio de 16:34. So' a coluna comum ainda deixava ate' uma
   palavra de diferenca, porque o titulo quebra em palavra grande: o form.js
   (alinhaApoio) mede a linha mais longa do titulo e da' essa largura ao
   paragrafo e ao quadro de servicos. Sem JS fica a coluna comum. */
.form-secao .olho{color:rgba(201,214,222,.85)}
.form-secao h2{
  margin:0 0 18px;color:var(--branco);
  font-size:clamp(1.45rem,2.25vw,1.9rem);font-weight:800;
  line-height:1.14;letter-spacing:-.025em;text-wrap:pretty;
}
.form-secao h2 em{
  font-style:italic;color:var(--prata);
  background:linear-gradient(158deg,#FFFFFF 0%,#9FB0BB 34%,#F4F8FA 56%,#8494A0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding:.16em .06em 0 0;margin-top:-.16em;
}
.form-intro__apoio{color:rgba(255,255,255,.82);font-size:1rem;line-height:1.68;margin:0}
/* com o texto numa coluna so (ate 900px) a linha corria a tela toda */
@media (max-width:900px){ .form-intro h2{max-width:640px} .form-intro__apoio{max-width:640px} }
/* "ao lado" / "abaixo" no paragrafo: acompanha o mesmo corte de 900px do
   .form-grid, que e' onde o formulario desce para baixo do texto */
.onde-abaixo{display:none}
@media (max-width:900px){ .onde-lado{display:none} .onde-abaixo{display:inline} }

/* quadro de servicos: os 12 topicos da LP do credenciamento (pedido do Alex, 02/10),
   mesma ordem, mesmo texto, mesmos icones. A caixa de fora e' container de CSS e tem a
   largura da linha mais longa do titulo (form.js), entao quem escolhe o desenho e' a
   LARGURA DELA, nao a da tela.
   Duas formas, sempre 2 colunas (12 = 6 x 2, nunca cartao sozinho no fim):
   - caixa de 420px ou mais: cartao deitado, icone a' esquerda e texto a' direita. A
     conta que fixa o corte: "Recredenciamento" mede 131px em .82rem e "(conforme
     exigencias" 134px em .74rem; cada coluna de 420px de caixa da' 206px, menos 10 de
     padding de cada lado, 2 de borda, 36 de icone e 8 de vao = 140px de texto (folga
     minima de 6px).
   - de 310px a 419px de caixa: cartao em pe (icone em cima, texto centralizado), com o texto
     usando a largura inteira da celula: (caixa - 8 de vao) / 2 - 12 de padding - 2 de borda.
     Em 320px de caixa sao 142px, em 310px sao 137px, sempre acima dos 131px de
     "Recredenciamento" (folga minima de 6px, e o corte esta' em 310 por causa dela).
   - abaixo de 310px de caixa: 1 coluna, que e' onde 2 colunas deixariam menos de 137px.
   Palavra nunca e' partida por CSS. O "E muito mais" leva o simbolo da marca no lugar do icone. */
.servicos-caixa{container-type:inline-size;margin:clamp(28px,3vw,36px) 0 0}
.servicos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;
}
.servicos__item{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;
  padding:14px 6px 13px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.035);border:1px solid rgba(201,214,222,.16);
  transition:border-color .3s ease,background .3s ease;
}
@container (max-width:309px){ .servicos{grid-template-columns:minmax(0,1fr)} }
@container (min-width:420px){
  .servicos__item{
    display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:8px;row-gap:2px;
    align-items:start;align-content:center;text-align:left;padding:12px 10px;
  }
  .servicos__item .servicos__ic{grid-row:1 / span 2;align-self:center}
  .servicos__item .servicos__nome{grid-column:2;align-self:end}
  .servicos__item .servicos__det{grid-column:2;align-self:start}
}
/* a entrada (efeitos.js, escalonar) pesa (0,2,0) e troca a transicao inteira:
   aqui ela volta a somar borda e fundo. O card nao sobe no hover porque
   `.js [data-reveal].visivel` fixa transform:none; quem sobe e' o icone,
   igual aos resultados. */
.js .servicos__item[data-reveal]{
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),
    border-color .3s ease,background .3s ease;
}
.servicos__item:hover{background:rgba(201,214,222,.08);border-color:rgba(201,214,222,.42)}
.servicos__ic{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:0 0 36px;
  color:var(--prata);background:rgba(201,214,222,.07);border:1px solid rgba(201,214,222,.3);
  transition:background .3s ease,border-color .3s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.servicos__ic--logo{padding:7px;box-sizing:border-box}
.servicos__ic--logo img{width:100%;height:100%;object-fit:contain;display:block}
.servicos__item:hover .servicos__ic{background:rgba(201,214,222,.16);border-color:var(--prata);transform:translateY(-3px)}
.servicos__nome{font-size:.82rem;font-weight:700;line-height:1.3;color:var(--branco);margin:0}
.servicos__det{display:block;font-size:.74rem;line-height:1.35;color:rgba(255,255,255,.7);margin:0}
@media (prefers-reduced-motion:reduce){ .servicos__item:hover .servicos__ic{transform:none} }

/* cabeca do formulario, dentro do cartao */
.form-cabeca{margin:0 0 24px}
.form-cabeca .olho{margin:0 0 10px}
.form-cabeca h3{
  margin:0;font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:var(--branco);
}

.form-cartao{
  background:rgba(0,18,30,.55);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:clamp(24px,3.4vw,36px);
  box-shadow:0 22px 54px rgba(0,10,20,.45);
}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:540px){ .campos{grid-template-columns:1fr} }
.campo{display:flex;flex-direction:column;gap:7px}
.campo--full{grid-column:1 / -1}
.campo label{
  font-size:.83rem;font-weight:600;color:rgba(255,255,255,.86);
}
.campo label .opc{font-weight:400;color:rgba(255,255,255,.5)}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:.93rem;color:var(--branco);
  background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.2);border-radius:11px;
  padding:.78em .9em;width:100%;
  transition:border-color .18s ease,background .18s ease;
}
/* .42 dava 3.27:1 sobre o campo (medido no render). .64 sobe para ~5.4:1 */
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,255,255,.64)}
.campo textarea{resize:vertical;min-height:92px;line-height:1.5}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:rgba(255,255,255,.34)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--prata);background:rgba(255,255,255,.11);
}
.campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center;background-size:12px;
  padding-right:2.4em;
}
.campo select option{background:var(--azul-900);color:var(--branco)}
/* erro */
.campo.erro input,.campo.erro select{border-color:#FF8A6B;background:rgba(255,138,107,.09)}
.campo__erro{
  display:none;font-size:.79rem;color:#FFB39C;
  align-items:center;gap:6px;
}
.campo.erro .campo__erro{display:flex}
.campo input:disabled,.campo select:disabled{opacity:.5;cursor:not-allowed}

.form-cartao .btn{width:100%;justify-content:center;margin-top:22px}
.form-cartao .btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.form-nota{
  margin:16px 0 0;font-size:.8rem;line-height:1.5;
  color:rgba(255,255,255,.6);text-align:center;text-wrap:balance;
}
.form-nota svg{vertical-align:-2px;margin-right:3px;color:var(--prata)}
.form-ok{
  display:none;text-align:center;padding:28px 10px;
}
.form-ok svg{margin:0 auto 16px;color:var(--prata)}
.form-ok h3{margin:0 0 8px;font-size:1.2rem;font-weight:700;color:var(--branco)}
.form-ok p{margin:0;font-size:.94rem;color:rgba(255,255,255,.76);line-height:1.6}
.form-cartao.enviado form{display:none}
.form-cartao.enviado .form-ok{display:block}

/* ---------- CTA final + rodape ---------- */
.fecho{
  background:linear-gradient(150deg, var(--azul-700) 0%, var(--azul-900) 100%);
  color:var(--branco);text-align:center;
  padding-block:clamp(54px,6.5vw,86px);
}
.fecho h2{
  margin:0 auto 18px;color:var(--branco);
  font-size:clamp(1.6rem,3.5vw,2.35rem);font-weight:800;
  line-height:1.14;letter-spacing:-.025em;max-width:22ch;text-wrap:balance;
}
.fecho p{
  margin:0 auto 30px;max-width:52ch;
  color:rgba(255,255,255,.82);font-size:1rem;line-height:1.65;
}
.fecho__acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* Rodape reorganizado em 17/09 a pedido do Alex (print 17.41.48): os tres
   blocos distribuidos na largura toda, respiro igual entre eles, titulos das
   colunas na mesma linha de base e a marca reduzida ao simbolo (so' o "A"). */
.rodape{background:var(--azul-900);color:rgba(255,255,255,.66);padding-block:clamp(44px,5.4vw,64px) 24px}
/* a coluna da marca subiu de 1.35fr para 1.5fr em 2026-09-22: com a frase de
   autoridade em caixa alta, 1.35fr deixava 249px uteis e a linha mais longa
   ("Especialista em credenciamentos," em caixa alta) pede 269,6px, entao o
   desenho de 3 linhas do cliente virava 4. Medido no navegador, nao estimado. */
.rodape__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(32px,6vw,86px);row-gap:34px;align-items:start;
  padding-bottom:clamp(30px,3.4vw,40px);border-bottom:1px solid rgba(255,255,255,.12);
}
/* 1181px e' a largura que manda no rodape, e foi MEDIDA, nao chutada: abaixo dela a
   coluna da marca nao da' os 269,6px que a frase de autoridade em caixa alta pede, e o
   desenho de 3 linhas do cliente vira 4, e em 901px virava 6 com "automotivo" sozinha
   na ultima. Dai' para baixo a marca ocupa a linha inteira (onde a frase sobra de
   espaco) e as duas colunas de texto dividem a linha de baixo. 1181 e' o mesmo ponto
   de corte das etapas e do investimento, entao a pagina quebra toda no mesmo lugar. */
@media (max-width:1181px){
  .rodape__grid{grid-template-columns:1fr 1fr;row-gap:32px}
  .rodape__marca{grid-column:1 / -1}
}
@media (max-width:620px){ .rodape__grid{grid-template-columns:1fr;row-gap:30px} }
/* simbolo e frase de autoridade lado a lado, separados pelo filete da marca */
.rodape__marca-topo{display:flex;align-items:center;gap:clamp(16px,1.8vw,22px)}
.rodape__marca-topo img{
  flex:0 0 auto;height:56px;width:auto;margin:0;
}
/* frase de autoridade em caixa alta, as tres linhas do desenho do cliente */
.rodape__autoridade{
  margin:0;padding-left:clamp(16px,1.8vw,22px);border-left:1px solid rgba(255,255,255,.2);
  font-size:.72rem;font-weight:700;line-height:1.7;letter-spacing:.085em;
  text-transform:uppercase;color:var(--branco);
}
/* sem `text-wrap:balance` aqui: as tres linhas sao FIXAS por <br>, e balance briga
   com quebra fixa (mesmo motivo que tirou o balance do `.preco__lado p`, secao 32 do
   design system). Onde o <br> sai, no celular, o balance volta, la' embaixo. */
/* frase de posicionamento, abaixo da marca. Peso normal desde 2026-09-22: o Alex
   pediu sem negrito, "mais suave" (audio 16.40.46) */
.rodape__lema{
  margin:20px 0 0;max-width:42ch;
  font-size:.92rem;font-weight:400;line-height:1.6;color:var(--branco);
}
/* redes: so' Instagram e Facebook, os dois perfis que existem.
   `.rodape .x` e nao so' `.x`: `.rodape ul` pesa (0,1,1) e atropelaria display e gap. */
.rodape .rodape__redes{
  margin:20px 0 0;display:flex;gap:10px;
}
.rodape__redes a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  touch-action:manipulation;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.rodape__redes a:hover{
  color:var(--azul-900);background:var(--prata);border-color:var(--prata);
  transform:translateY(-2px);text-decoration:none;
}
.rodape h3{
  margin:0 0 16px;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--branco);
}
/* a lista comeca na mesma altura da frase de autoridade */
.rodape__col{padding-top:6px}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:.88rem;line-height:1.5}
.rodape__contato li,.rodape__solucoes li{display:grid;gap:2px;align-content:start}
.rodape .rodape__contato,.rodape .rodape__solucoes{gap:16px}
/* rotulo do par (WhatsApp:, E-mail:, Institucional:) e rotulo da solucao */
.rodape__rot,.rodape__solucoes b{
  color:rgba(255,255,255,.62);font-weight:600;font-size:.84rem;
}
.rodape__solucoes b{color:var(--branco);font-weight:700}
.rodape__solucoes span{color:rgba(255,255,255,.66)}
.rodape__contato a{color:var(--branco);word-break:break-word}
.rodape a:hover{color:var(--prata);text-decoration:underline}
.rodape__base{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  padding-top:clamp(20px,2.2vw,26px);font-size:.8rem;color:rgba(255,255,255,.5);
}
/* no celular a linha de copyright quebra em duas e deixava "reservados." sozinha
   (medido em 390 e 360, 2026-09-22). `balance` reparte as duas linhas. */
.rodape__base span{text-wrap:balance}

/* aviso interno sobre fundo escuro (bloco de preco e bloco do form) */
.modelo .aviso-pend,
.form-secao .aviso-pend{
  background:rgba(250,168,40,.12);border-color:rgba(250,168,40,.45);color:#FFD68F;
}
.form-secao .aviso-pend--solto{margin-top:34px}
.form-secao .aviso-pend b,.modelo .aviso-pend b{color:#EDF2F5}

.nao-quebra{white-space:nowrap}
.fecho h2{max-width:26ch}

/* ===========================================================
   FOTOGRAFIA  (gerada no Higgsfield, tratada para a paleta)
   =========================================================== */

/* ---------- hero SEM foto de fundo ----------
   Sem foto e, desde 2026-09-15, sem carro: o dono gostou do scanner
   e nao do veiculo. O fundo e' gradiente + a VARREDURA de efeitos.css,
   com um brilho no horizonte do piso em perspectiva. */
.hero{
  background:
    radial-gradient(80% 46% at 50% 60%, rgba(4,108,144,.36) 0%, transparent 72%),
    radial-gradient(120% 70% at 50% -10%, rgba(4,108,144,.3) 0%, transparent 60%),
    linear-gradient(180deg, var(--azul-900) 0%, #00243A 58%, #002C45 100%);
}

/* ---------- foto ao lado da cabeca de uma secao ---------- */
/* ===========================================================
   DESAFIOS — segundo bloco, "a dor da ECV sem consultoria"
   Texto da referencia do cliente (audio de 2026-09-15 11:36).
   =========================================================== */
/* 15/09 12:50: cliente pediu menos espaco entre as letras e mais respiro
   ate o titulo (estava colado). Vale para todos os "olhos" da pagina. */
.olho{
  margin:0 0 20px;font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--azul-600);
}
/* text-transform:uppercase come o "s" de ECVs e mostra "ECVS", que e' outra
   sigla. O "s" vai num span que anula a caixa alta (Rita, 2026-09-21). */
.sigla-s{text-transform:none}
/* .cabeca .olho e nao so' .olho: `.cabeca p{margin:0}` pesa mais e zerava o
   respiro ate o titulo, que era justamente a reclamacao do cliente */
.cabeca .olho{margin-bottom:20px}
/* 15/09 16:09: cliente pediu todos os "olhos" do mesmo tamanho. `.cabeca p`
   (1.02rem) e `.desafios__lista p` (.84rem) pesavam mais que .olho e cada
   um saia de um tamanho. .olho.olho ganha dos dois: todos no das secoes. */
.olho.olho{font-size:1.02rem}

/* PALAVRA SOZINHA NA ULTIMA LINHA (regra da casa; o Alex reclama sempre).
   Vale na pagina inteira, nao so' onde ele apontou: titulo equilibra as linhas,
   texto corrido evita a viuva. Onde a quebra e' fixa por <br> a regra nao manda
   (o <br> quebra de qualquer jeito), mas medir de novo depois de mexer. */
h1,h2,h3,.olho,.btn{text-wrap:balance}
p,figcaption,li{text-wrap:pretty}
/* quebra de linha que so' vale no computador ("pode" no comeco da 2a linha) */
@media (max-width:860px){ .quebra-desk{display:none} }
/* quebra de 3 linhas do titulo do investimento: so' vale enquanto a cabeca
   divide a linha com o cartao de preco (acima de 980px) */
@media (max-width:980px){ .quebra-invest{display:none} }
/* quebra de 3 linhas do texto ao lado do preco: so' na coluna estreita */
@media (max-width:520px){ .quebra-preco{display:none} }
/* as 3 linhas da frase de autoridade do rodape so' cabem enquanto a coluna da marca
   e' larga. Abaixo disso o <br> sai e o `balance` reparte sozinho, sem palavra
   sozinha. Ha' espaco em volta de cada <br> no HTML: escondido, nada gruda. */
/* No celular a coluna e' a tela inteira e ainda assim a linha mais longa nao cabia:
   o simbolo encolhe um ponto e o espacejamento da frase cai de .085em para .045em,
   e as 3 linhas do desenho voltam a partir de 375px (medido). Abaixo disso o <br>
   sai e o `balance` reparte, sem palavra sozinha. */
@media (max-width:420px){
  .rodape__marca-topo{gap:14px}
  .rodape__marca-topo img{height:48px}
  .rodape__autoridade{padding-left:14px;font-size:.7rem;letter-spacing:.045em}
}
@media (max-width:370px){
  .quebra-rodape{display:none}
  .rodape__autoridade{text-wrap:balance}
}
/* .cabeca .x e nao so' .x: `.cabeca p{margin:0}` pesa mais e zerava a margem */
.cabeca .desafios__destaque{
  position:relative;margin:22px 0 0;padding-left:18px;max-width:52ch;
  font-size:1rem;font-weight:600;line-height:1.55;color:var(--azul-700);
}
.desafios__destaque::before{
  content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--prata-esc),rgba(0,72,108,.6));
}
.cabeca h2 em{font-style:italic;color:var(--azul-600)}

/* foto com o cartao "nao e' apenas um selo" sobreposto */
.desafios__visual{position:relative}
.desafios__visual .secao__foto{aspect-ratio:4/3.1}
.desafios__selo{
  position:absolute;right:clamp(-10px,-1vw,0px);bottom:-26px;width:min(300px,72%);
  padding:22px 22px 18px;border-radius:16px;color:var(--branco);
  background:linear-gradient(160deg,rgba(0,36,60,.94),rgba(0,72,108,.9));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(201,214,222,.22);box-shadow:0 20px 44px rgba(0,20,34,.34);
}
.desafios__selo strong{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
.desafios__selo p{margin:8px 0 0;font-size:.74rem;font-weight:600;line-height:1.6;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.desafios__selo div{
  display:flex;gap:12px;align-items:center;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(201,214,222,.2);font-size:.84rem;line-height:1.45;
}
/* escudo maior a pedido do cliente (15/09 12:50) */
.desafios__selo svg{flex:0 0 42px;width:42px;height:42px;color:var(--prata)}

/* lista dos 6 desafios + cartao escuro de saida */
.desafios__corpo{
  display:grid;grid-template-columns:1.45fr 1fr;gap:0;margin-top:clamp(50px,6vw,74px);
  border-radius:var(--r-card);overflow:hidden;box-shadow:0 18px 44px rgba(0,26,44,.1);
}
.desafios__lista{background:var(--claro);padding:clamp(24px,3.4vw,40px)}
.desafios__lista .olho{margin-bottom:24px}
.desafios__lista ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:26px clamp(20px,3vw,36px);
}
.desafios__lista li{display:flex;gap:14px;align-items:flex-start}
.desafios__lista li > span{
  flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--branco);color:var(--azul-700);box-shadow:0 4px 12px rgba(0,40,64,.08);
}
.desafios__lista h3{margin:2px 0 4px;font-size:.98rem;font-weight:700;color:var(--azul-800)}
.desafios__lista p{margin:0;font-size:.86rem;line-height:1.5;color:#5A6B78}

.desafios__saida{
  padding:clamp(26px,3.6vw,44px);color:var(--branco);
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(201,214,222,.14) 0%, transparent 60%),
    linear-gradient(155deg,var(--azul-900) 0%,var(--azul-700) 100%);
}
.desafios__saida svg.alvo{color:var(--prata)}
.desafios__saida .olho{margin:14px 0 8px;color:rgba(201,214,222,.8)}
.desafios__saida h3{
  margin:0 0 14px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;
}
.desafios__saida h3 em{
  font-style:italic;color:var(--prata);
  background:linear-gradient(158deg,#FFFFFF 0%,#9FB0BB 34%,#F4F8FA 56%,#8494A0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em;
}
.desafios__saida > p{margin:0 0 24px;font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.86)}
.desafios__saida .hero__nota{justify-content:flex-start;margin:14px 0 0;font-size:.82rem;text-align:left}

/* Rodada do cliente de 15/09 12:54 (vem depois das regras acima de proposito):
   - titulo de cada desafio em 1 linha e texto sempre em 3 (quebras fixas no HTML);
   - cartao escuro mais largo para "Voce nao precisa / enfrentar isso sozinho." caber em 2;
   - "A" da logo no lugar do alvo;
   - balao do "Fale com um especialista" alinhado com o texto, nao centralizado. */
.desafios__corpo{grid-template-columns:1.55fr 1fr}
.desafios__lista{padding:clamp(24px,3vw,34px)}
.desafios__lista li{gap:12px}
.desafios__lista li > span{flex:0 0 40px;height:40px}
.desafios__saida h3{font-size:clamp(1.35rem,2vw,1.5rem)}
.desafios__simbolo{display:block;width:52px;height:auto}
@media (min-width:861px){
  /* com o cartao mais estreito o botao quebrava em 2 linhas: trava em 1 e aperta o respiro lateral */
  .desafios__saida .btn{white-space:nowrap;padding-inline:1.35em}
  .desafios__lista h3,.desafios__lista p{white-space:nowrap}
  .desafios__lista h3{font-size:.95rem}
  .desafios__lista p{font-size:.84rem}
  .desafios__saida h3 em{white-space:nowrap}
}
.desafios__saida .hero__nota{align-items:flex-start}
.desafios__saida .hero__nota svg{margin-top:1px}
@media (max-width:980px){
  .desafios__corpo{grid-template-columns:1fr}
}
@media (max-width:620px){
  .desafios__lista ul{grid-template-columns:1fr}
  .desafios__selo{position:relative;right:auto;bottom:auto;width:auto;margin:-40px 14px 0}
}

/* ===========================================================
   METODOLOGIA — a roda da ISO 9001 (terceiro bloco, 2026-09-15)
   A roda em si e' desenhada por efeitos.js (funcao roda).
   =========================================================== */
.metodo__topo{
  display:grid;grid-template-columns:1.15fr .95fr;gap:clamp(30px,4.5vw,64px);align-items:center;
}
.metodo .cabeca{margin-bottom:0}
/* coluna mais larga + titulo um pouco menor: "Um sistema de gestao que" em
   italico pedia ~570px e quebrava em 3 linhas numa coluna de 470px */
.metodo .cabeca h2{max-width:none;font-size:clamp(1.7rem,3vw,2.2rem)}
.metodo .cabeca h2 em{display:block}
.cabeca .metodo__nota{
  display:flex;gap:14px;align-items:flex-start;margin:28px 0 0;padding-left:18px;
  border-left:2px solid rgba(142,155,163,.55);
  font-size:.95rem;line-height:1.6;color:var(--cinza-tx);
}
.metodo__nota svg{flex:0 0 32px;color:var(--prata-esc)}
.metodo__nota b{color:var(--azul-700)}

.roda{position:relative;width:100%;max-width:560px;margin-inline:auto}
/* sem JS: a lista vira grade legivel */
.roda__itens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.roda__itens li{padding:14px 16px;border-radius:12px;background:var(--claro);font-size:.86rem;color:var(--cinza-tx)}
.roda__itens b{display:block;color:var(--azul-800);font-size:.95rem}
/* com JS: a lista sai da tela, mas continua para leitor de tela */
.roda.montada .roda__itens{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
/* hidden, nao visible: a caixa do anel girando contava como largura da pagina no
   celular. Anel (r 272) e ponto (ate 276,5) cabem na area de 560 do desenho. */
.roda svg{display:block;width:100%;height:auto;overflow:hidden}
.roda__anel{fill:none;stroke:url(#roda-anel);stroke-width:2}
.roda__ponto{fill:var(--azul-500)}
.roda__giro{transform-box:view-box;transform-origin:280px 280px;animation:roda-giro 26s linear infinite}
@keyframes roda-giro{to{transform:rotate(360deg)}}
.roda__seg{cursor:pointer}
.roda__seg path{fill:#0C3A56;stroke:var(--branco);stroke-width:3;transition:fill .35s ease}
.roda__seg:nth-child(odd) path{fill:#0A3350}
.roda__seg.ativo path{fill:var(--azul-500)}
.roda__icone{fill:none;stroke:var(--prata);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.roda__seg.ativo .roda__icone{stroke:var(--branco)}
.roda__rotulo{fill:var(--branco);font:700 15px/1 'Montserrat',system-ui,sans-serif;text-anchor:middle}
.roda__centro > circle:first-child{fill:var(--azul-900)}
.roda__centro-anel{fill:none;stroke:var(--prata);stroke-width:1.5;stroke-opacity:.55}
.roda__iso{fill:var(--branco);font:800 34px/1 'Montserrat',system-ui,sans-serif;text-anchor:middle;letter-spacing:-1px}
.roda__sgq{fill:rgba(255,255,255,.8);font:500 13px/1 'Montserrat',system-ui,sans-serif;text-anchor:middle}
.roda__legenda{
  min-height:3.4em;margin:18px auto 0;max-width:34ch;text-align:center;
  font-size:.95rem;line-height:1.5;color:var(--cinza-tx);
}
.roda__legenda b{display:block;color:var(--azul-800);font-size:1.02rem}
@media (prefers-reduced-motion:reduce){ .roda__giro{animation:none} .roda__seg path{transition:none} }

@media (max-width:900px){
  .metodo__topo{grid-template-columns:1fr}
}

/* ===========================================================
   RESULTADOS — faixa azul centralizada (15/09 16:26)
   Juntou "Como a ISO 9001 se aplica" + "Resultados". Mesmo desenho
   do hero: texto, beneficios, botao prata e balao do especialista,
   tudo no centro. O fundo animado mora em efeitos.css.
   =========================================================== */
.resultados{
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--branco);text-align:center;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(4,108,144,.42) 0%, transparent 70%),
    linear-gradient(165deg,var(--azul-900) 0%,var(--azul-800) 52%,var(--azul-700) 100%);
}
.resultados__in{display:flex;flex-direction:column;align-items:center}
.resultados .olho{color:rgba(201,214,222,.85)}
.resultados h2{
  margin:0 0 18px;color:var(--branco);
  font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;
}
.resultados h2 em{
  font-style:italic;color:var(--prata);
  background:linear-gradient(158deg,#FFFFFF 0%,#9FB0BB 34%,#F4F8FA 56%,#8494A0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em;
}
/* 15/09 17:54: em 64ch o texto virava um bloco de 3 linhas ("quadradao").
   Mais largura + quebra fixa no meio deixam 2 linhas distribuidas no computador. */
.resultados__apoio{
  margin:0 auto;max-width:min(940px,100%);text-wrap:balance;
  font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.65;color:rgba(255,255,255,.8);
}
/* beneficios: icone, titulo em 1 linha e texto em 2, todos iguais */
.resultados__lista{
  list-style:none;margin:clamp(40px,5vw,58px) 0 clamp(36px,4.5vw,50px);padding:0;width:100%;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.resultados__lista li{padding-inline:clamp(10px,1.6vw,20px);font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.74)}
.resultados__lista li + li{border-left:1px solid rgba(201,214,222,.16)}
.resultados__lista b{display:block;margin-bottom:4px;font-size:1rem;font-weight:700;color:var(--branco)}
.resultados__ic{
  position:relative;display:grid;place-items:center;width:62px;height:62px;margin:0 auto 16px;
  border-radius:50%;color:var(--prata);
  background:rgba(201,214,222,.07);border:1px solid rgba(201,214,222,.3);
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s ease,border-color .35s ease;
}
.resultados__lista li:hover .resultados__ic{transform:translateY(-4px);background:rgba(201,214,222,.16);border-color:var(--prata)}
.resultados .hero__acoes{margin-bottom:16px}
.resultados .hero__nota{margin:0;color:rgba(255,255,255,.8)}
.resultados :focus-visible{outline-color:var(--prata)}
/* a quebra fixa so' vale onde a linha inteira cabe; abaixo disso o texto se vira */
@media (max-width:1099px){ .quebra-lg{display:none} }
@media (min-width:1180px){ .resultados__lista b,.resultados__lista li > span:last-child{white-space:nowrap} }
@media (max-width:1179px){
  .resultados__lista{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px;max-width:720px}
  .resultados__lista li:nth-child(3){border-left:0}
}
@media (max-width:480px){
  .resultados__lista{grid-template-columns:1fr;row-gap:30px}
  .resultados__lista li + li{border-left:0}
}
/* 1 linha ate' 360px (em 2 sobrava "funciona" sozinha). Letra e respiro menores
   para caber; se o texto do botao crescer, medir de novo em 360 e 320. */
@media (max-width:520px){
  .resultados .btn{white-space:nowrap;font-size:.88rem;padding-inline:1.4em;justify-content:center}
}

.secao__topo{
  display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(28px,4.5vw,60px);align-items:center;
  margin-bottom:clamp(34px,4.5vw,54px);
}
.secao__topo .cabeca{margin-bottom:0}
@media (max-width:860px){
  .secao__topo{grid-template-columns:1fr;gap:28px}
}
.secao__foto{
  margin:0;border-radius:var(--r-card);overflow:hidden;
  position:relative;box-shadow:0 18px 44px rgba(0,26,44,.18);
}
.secao__foto img{width:100%;height:100%;object-fit:cover;display:block}
/* filete prata no topo: amarra a foto ao resto do sistema */
.secao__foto::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--prata-metal);
}

/* ---------- galpao ao fundo do bloco de preco ---------- */
.modelo{
  background:
    linear-gradient(118deg,
      rgba(0,20,32,.96) 0%,
      rgba(0,26,42,.93) 42%,
      rgba(0,40,62,.82) 100%),
    url("img/galpao.jpg") center 52% / cover no-repeat,
    linear-gradient(152deg, var(--azul-900) 0%, var(--azul-700) 100%);
}
@media (max-width:880px){
  .modelo{
    background:
      linear-gradient(180deg, rgba(0,20,32,.96) 0%, rgba(0,30,48,.93) 100%),
      url("img/galpao.jpg") center / cover no-repeat,
      linear-gradient(152deg, var(--azul-900), var(--azul-700));
  }
}

/* ===========================================================
   RESULTADOS — placar + grafico de barras
   Decisoes da skill dataviz:
   · Os tres numeros de manchete sao STAT TILES, nao um grafico
     de tres barras (um numero por categoria nao e' comparacao).
   · As quatro barras medem A MESMA coisa (ganho %) em categorias
     diferentes -> escala SEQUENCIAL de UMA cor. Quatro cores
     trataria magnitude como identidade, que e' o erro classico.
   · Rotulo direto em toda barra (sao quatro, cabe) + tabela
     alternativa, entao a leitura nunca depende so' da cor.
   =========================================================== */
.placar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;margin-bottom:clamp(40px,5vw,64px);
}
.placar__item{
  background:var(--branco);border:1px solid rgba(0,72,108,.13);
  border-radius:var(--r-card);padding:26px 24px;
}
.placar__n{
  display:block;font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;
  color:var(--azul-700);line-height:1;letter-spacing:-.03em;
  margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.placar__item p{margin:0;font-size:.9rem;line-height:1.5;color:var(--cinza-tx)}

.grafico{margin:0}
.grafico__tit{
  margin:0 0 4px;font-size:1.05rem;font-weight:700;color:var(--azul-900);
}
.grafico__sub{margin:0 0 30px;font-size:.88rem;color:var(--cinza-tx)}

.barras{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,2.5vw,30px);
  align-items:end;height:260px;
  border-bottom:1px solid rgba(0,72,108,.22);
  /* espaco para os rotulos, que ficam FORA do fluxo (ver .barra__rot) */
  margin-bottom:62px;
}
.barra{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;
}

/* precisa vir DEPOIS de .barra{height:100%}: mesma especificidade, quem
   vem por ultimo vence. No celular o pai e' height:auto, entao 100%
   colapsava a barra para 1px e a haste sumia. */
@media (max-width:620px){
  .barras{
    grid-template-columns:repeat(2,1fr);
    height:auto;row-gap:88px;margin-bottom:64px;border-bottom:0;
  }
  .barra{height:170px;border-bottom:1px solid rgba(0,72,108,.22)}
}
.barra__haste{
  position:relative;width:100%;
  /* flex-shrink padrao esmagava a haste ate' 0 quando haste + rotulo
     passavam da altura da barra. Sem encolher, a altura em % vale. */
  flex:0 0 auto;
  height:0;                          /* o JS sobe ate' o valor */
  border-radius:5px 5px 0 0;
  background:linear-gradient(180deg, var(--azul-500) 0%, var(--azul-700) 100%);
  transition:height 1.1s cubic-bezier(.16,1,.3,1);
  min-height:0;
}
/* sem dado: contorno tracejado no lugar de barra cheia — nao inventa altura */
.barra--vazia .barra__haste{
  height:48px;background:repeating-linear-gradient(
    135deg, rgba(0,72,108,.05) 0 7px, transparent 7px 14px);
  border:1px dashed rgba(0,72,108,.3);border-bottom:0;
}
.barra__n{
  position:absolute;left:0;right:0;text-align:center;
  font-size:.95rem;font-weight:800;color:var(--azul-700);
  font-variant-numeric:tabular-nums;
  transition:bottom 1.1s cubic-bezier(.16,1,.3,1);
  bottom:52px;
}
/* fora do fluxo: nao disputa altura com a haste */
.barra__rot{
  position:absolute;top:calc(100% + 11px);left:0;right:0;
  margin:0;font-size:.8rem;line-height:1.35;
  color:var(--cinza-tx);text-align:center;
}
.barra:hover .barra__haste{filter:brightness(1.12)}

.grafico__tabela{margin-top:26px;font-size:.86rem}
.grafico__tabela summary{
  cursor:pointer;color:var(--azul-700);font-weight:600;
  padding:8px 0;
}
.grafico__tabela table{border-collapse:collapse;margin-top:10px;width:100%;max-width:460px}
.grafico__tabela th,.grafico__tabela td{
  text-align:left;padding:8px 12px 8px 0;
  border-bottom:1px solid rgba(0,72,108,.12);
}
.grafico__tabela th{font-weight:700;color:var(--azul-900)}
.grafico__tabela td:last-child{font-variant-numeric:tabular-nums;text-align:right}
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ===========================================================
   MARCACAO DE DADO DE EXEMPLO
   Kit generico, hoje sem uso na pagina (em 2026-09-22 os depoimentos
   viraram avaliacoes reais do Google e nao ha dado inventado de pe').
   Serve para marcar numero ou texto provisorio SO' enquanto se aprova
   o layout. A tarja e' proposital e inequivoca: se alguem publicar
   sem trocar, o erro salta aos olhos em vez de passar batido.
   Para publicar: troque o conteudo e remova a classe .exemplo.
   =========================================================== */
.exemplo{position:relative}
.exemplo::before{
  content:"EXEMPLO";
  position:absolute;top:10px;right:10px;z-index:3;
  font-size:.58rem;font-weight:800;letter-spacing:.12em;
  color:#7E5205;background:rgba(250,168,40,.92);
  border-radius:5px;padding:3px 7px;
  box-shadow:0 2px 8px rgba(0,10,20,.2);
  pointer-events:none;
}
.exemplo--escuro::before{background:rgba(250,168,40,.95);color:#4A3000}

/* faixa de aviso no topo da secao com dado de exemplo */
.tarja-exemplo{
  display:flex;align-items:center;gap:10px;
  margin:0 0 24px;padding:11px 16px;
  background:repeating-linear-gradient(135deg,
    rgba(250,168,40,.16) 0 12px, rgba(250,168,40,.08) 12px 24px);
  border:1px dashed rgba(203,128,16,.6);border-radius:10px;
  font-size:.83rem;font-weight:600;color:#7E5205;
}
.tarja-exemplo svg{flex:0 0 17px}

/* ===========================================================
   FILEIRA DE LOGOS DE CLIENTES (prova social, 2026-09-22)
   Pedido do Alex no audio 17.11.48, logos recebidos no mesmo
   dia. Tres no ar (DEKRA, Especialista, Smart Vist), a
   PREVENCAR esperando arquivo. Regra de ouro daqui: a fileira
   e' AGNOSTICA A QUANTIDADE em toda largura, nunca sobra casa
   vazia, e logo de cliente nao e' retocado nem deformado.
   =========================================================== */
.logos{margin:0 0 clamp(34px,4vw,50px)}
.logos__olho{margin-bottom:18px;text-align:center}
/* ESTEIRA. O dono pediu em 2026-09-22: logos em preto e branco, passando de lado.
   Resolve de quebra o defeito que custou duas voltas de revisao, porque numa faixa continua
   nao existe "ultima linha", entao nao existe casa vazia em largura nenhuma, nem numero preso
   a quantidade. E' animacao de CSS, sem JavaScript, entao vale na versao sem JS que a pagina
   testa. */
.logos__esteira{
  display:flex;overflow:hidden;
  border:1px solid rgba(0,72,108,.12);border-radius:var(--r-card);
  background:rgba(255,255,255,.5);
  /* as pontas somem em vez de cortar o logo na borda do cartao */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.logos__fila{
  list-style:none;margin:0;padding:0;flex:0 0 auto;
  display:flex;align-items:center;
  animation:esteira-logos var(--esteira-dur,18s) linear infinite;
}
/* -100% e' a largura de UM grupo. Como os seis sao iguais, a volta nao tem emenda visivel.
   DURACAO: ~6s por logo. Com 3 logos, 18s. Chegando mais logos o grupo engorda, entao suba a
   duracao na mesma proporcao, senao a esteira acelera sozinha. */
@keyframes esteira-logos{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* Pausa para quem quiser ler um logo. O `:focus-within` so' vale porque a esteira leva
   `tabindex="0"` e `role="group"` no HTML: fileira de <img> sem link nao recebe foco, e sem
   isso a regra seria morta e este comentario seria promessa falsa de acessibilidade.
   Apontado pela Rita em 2026-09-22. No toque nao ha' pausa, e quem precisa de verdade esta
   coberto pelo `prefers-reduced-motion` la' embaixo. */
.logos__esteira:hover .logos__fila,
.logos__esteira:focus-within .logos__fila{animation-play-state:paused}
.logos__esteira:focus-visible{
  outline:2px solid var(--azul-600,#00486c);outline-offset:3px;
}

.logos__item{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:92px;padding:16px 34px;
}

/* PRETO E BRANCO, e por que um deles leva um numero a mais.
   `grayscale(1)` sozinho leva o Smart Vist, que e' amarelo, para cinza 162, e sobre o fundo
   da fileira ele some. (Os 2,28:1 que se citava aqui, e o 1,91:1 da tentativa em que o seletor
   do brilho nao aplicava, sao do metodo antigo de medicao e ficam so' como historia; ver o
   comentario de especificidade mais abaixo.)
   Cinza medio da TINTA de cada arquivo depois do grayscale, medido no proprio PNG (pixel
   opaco, luminancia 0,2126 / 0,7152 / 0,0722), remedido em 2026-09-22:
     DEKRA 100   |   Especialista 97   |   Smart Vist 162
   Entao so' o Smart Vist leva brilho. O arquivo usa `brightness(.58)`, que o poe em 94, na
   mesma faixa dos outros dois. Nao e' retoque de marca: e' a mesma normalizacao optica da
   altura, agora no eixo do tom, e sai junto com o preto e branco se um dia a cor voltar.
   NA TELA, que e' o que vale: medido em 1920px com escala 3x, num item inteiro dentro da
   faixa e fora dos 7% de fade das pontas, o cinza medio da tinta sai em 121 (DEKRA), 113
   (Especialista) e 116 (Smart Vist), com contraste de 4,13:1, 4,64:1 e 4,44:1. Piso: 3,0:1.
   O FUNDO DA CONTA E' 249, que e' o cartao (`rgba(255,255,255,.5)` sobre a secao clara), e
   nao 255: o branco de 255 que aparece dentro do recorte e' desenho do proprio logo (contorno
   de adesivo do Especialista, vazados do Smart Vist). Medir contra ele infla o numero, foi o
   que aconteceu na primeira conta destes dois (4,88 e 4,67). Apontado pela Rita em 2026-09-22.
   LOGO NOVO: meca o cinza da tinta do ARQUIVO; passando de ~120, ponha o brilho que o traz
   para a faixa de 95 a 105, e depois confira o contraste no pixel RENDERIZADO, fora do fade
   da ponta, nunca so' no arquivo. */
.logos__item img{
  width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1);
}

/* PESO OPTICO: cada logo entra pela altura do NOME, nao pela caixa.
   Igualar os tres pela mesma altura de caixa dava todo o peso a DEKRA, que e' so' palavra, e
   espremia a linha "VISTORIA VEICULAR" dos outros dois ate' ficar ilegivel. A caixa nao e' o
   que o olho mede. Razao do nome sobre a altura total, medida em cada arquivo:
     DEKRA 100% (uma linha)   |   Especialista 54%   |   Smart Vist 71%
   Mirando o nome em ~27px: 28 x 1,00 = 28  |  46 x 0,54 = 25  |  40 x 0,71 = 28.
   A linha de apoio cai em 12px e 10px, que se leem.
   LOGO NOVO: meca a razao do nome dele e ponha o `max-height` que poe o nome em ~27px. Piso
   da linha de apoio: 9px. Nunca resolva esticando, achatando ou retocando marca de terceiro. */
/* `.logos__item img` pesa (0,1,1) e atropelaria um `.logos__img--x` sozinho, que pesa
   (0,1,0): foi assim que o brilho do Smart Vist deixou de aplicar na primeira tentativa e
   ele ficou em 1,91:1. Por isso os tres carregam o elemento no seletor. */
.logos__item img.logos__img--dekra{max-height:28px}
.logos__item img.logos__img--especialista{max-height:46px}
.logos__item img.logos__img--smartvist{max-height:40px;filter:grayscale(1) brightness(.58)}

/* CELULAR. Medido em 2026-09-22, com os tamanhos do computador: em 390px o item do
   Especialista ocupava 211px de uns 340px uteis, 62% da janela para uma marca so', entao
   nunca cabia uma vizinha inteira ao lado e as duas outras passavam sempre em pedaco. O
   efeito lia como corte, nao como movimento. Reduzindo logo e respiro, passam a caber duas
   marcas inteiras, e o corte da ponta volta a ler como "continua".
   Os tamanhos saem da mesma conta do computador, com a linha de apoio no piso de 9px:
     DEKRA 24 (nome 24)  |  Especialista 39 (nome 21, apoio 10)  |  Smart Vist 36 (nome 26, apoio 9) */
@media (max-width:620px){
  .logos__item{min-height:74px;padding:12px 14px}
  .logos__item img.logos__img--dekra{max-height:24px}
  .logos__item img.logos__img--especialista{max-height:39px}
  .logos__item img.logos__img--smartvist{max-height:36px}
}

/* Quem pede menos movimento ve a fileira parada: a esteira congela, as copias somem e sobra
   um grupo so', centralizado e quebrando linha se precisar. Sem isso a pessoa ficaria com
   seis copias enfileiradas dentro de uma faixa cortada. */
@media (prefers-reduced-motion:reduce){
  .logos__esteira{
    -webkit-mask-image:none;mask-image:none;
    flex-wrap:wrap;justify-content:center;
  }
  .logos__fila{animation:none;flex-wrap:wrap;justify-content:center}
  .logos__fila[aria-hidden="true"]{display:none}
}

/* ---------- depoimentos preenchidos ---------- */
.prova--cheia{
  background:var(--branco);
  border:1px solid rgba(0,72,108,.14);
  border-style:solid;
}
.prova__texto{
  flex:1;margin:0;text-wrap:pretty;font-size:.94rem;line-height:1.65;color:var(--cinza-tx);
}
.prova__nome{display:block;font-size:.9rem;font-weight:700;color:var(--azul-900)}
.prova__cargo{display:block;font-size:.8rem;color:var(--cinza-tx);margin-top:2px}

/* Avaliacoes reais do Google (2026-09-22). Cinco ajustes medidos no navegador:
   1. O "“" e' um <p> de 2.6rem e herdava a margem padrao de paragrafo (1em = 41,6px
      em cima e embaixo): abria um buraco de ~75px entre as aspas e o texto.
   2. Grade fixa em vez de auto-fit: com minmax(260px) a grade virava 2 + 1 entre 561 e
      ~800px (terceiro cartao sozinho, casa vazia do lado) e 3 colunas de ~270px entre
      ~800 e 1024, onde "Santos", "Google" e "agilidade." caiam sozinhos na ultima linha.
      Agora: uma coluna ate' 999px, tres colunas de 1000px em diante (em 900 e 960 as
      tres colunas ainda deixavam "empresa." e "agilidade." sozinhas).
   3. Nome e assinatura em balance, para quebrar em duas linhas parelhas quando a coluna
      aperta, nunca deixando uma palavra sozinha.
   4. Coluna unica com teto de largura: sem ele o cartao ocupava a largura toda e o texto
      do depoimento corria, medido em 2026-09-22, ate' 112 caracteres por linha em 999px,
      105 em 960px e 85 em 768px. Com o teto de 40rem o maximo medido e' 76. Desde
      2026-09-22 a cabeca da secao e' centralizada (pedido do Alex), entao a coluna do
      teto tambem fica no centro, com sobra igual dos dois lados; o texto de dentro do
      cartao continua alinhado a' esquerda. Presa a' esquerda ela devolvia o vazio a'
      direita que o Alex pediu para acabar (Rita, 2026-09-22). */
.prova__aspas{margin:0}
.prova__nome,.prova__cargo{text-wrap:balance}
/* (a grade fixa de 3 colunas e o teto de 40rem sairam em 2026-09-23: viraram o
   carrossel, logo abaixo, que guarda a mesma conta de 3 por vez de 1000px para cima) */
/* 5. Entre 1000 e ~1100px o nome "Thiago Sousa dos Santos" quebra em duas linhas e o pe'
      daquele cartao sobe 23px: o fio de cima dele saia desalinhado dos vizinhos. Com
      subgrid as tres faixas (aspas, texto, pe') sao da grade de fora, entao o pe' mais
      alto dita a faixa dos tres e o fio fica na mesma altura em todos. */
@supports (grid-template-rows:subgrid){
  .prova--cheia{display:grid;grid-row:1 / span 3;grid-template-rows:subgrid;row-gap:16px}
}

/* CARROSSEL DE AVALIACOES (Alex, audio 10.38.14 de 2026-09-23: 6 ou 7 com setas).
   E' uma faixa com rolagem lateral nativa e encaixe por cartao; as setas so' mandam a
   faixa andar um cartao. Por isso funciona no dedo, no trackpad, no teclado (a faixa
   recebe foco) e sem JS, quando as setas nem aparecem e a barra de rolagem fica a
   mostra. 3 por vez de 1000px para cima, na mesma largura da grade antiga (que foi
   medida sem palavra sozinha em 1000, 1050 e 1100). Abaixo, um por vez com a ponta do
   seguinte aparecendo, teto de 36rem, para a linha nao passar de ~70 caracteres.
   Os cartoes da mesma faixa tem a mesma altura (a linha da grade e' uma so'). */
.provas{
  display:grid;grid-auto-flow:column;grid-template-rows:auto 1fr auto;
  grid-auto-columns:min(36rem,86%);gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:3px;
  padding:4px 3px 14px;margin:-4px -3px 0;
  scrollbar-width:thin;scrollbar-color:rgba(0,72,108,.3) transparent;
}
@media (min-width:1000px){ .provas{grid-auto-columns:calc((100% - 40px) / 3)} }
.prova{scroll-snap-align:start}
.provas:focus-visible{outline:2px solid var(--azul-600);outline-offset:2px;border-radius:var(--r-card)}
.js .provas{scrollbar-width:none}
.js .provas::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:no-preference){ .provas{scroll-behavior:smooth} }

.depo__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.depo__nav[hidden]{display:none}
.depo__seta{
  display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;
  border:1px solid rgba(0,72,108,.28);background:var(--branco);color:var(--azul-700);
  cursor:pointer;touch-action:manipulation;box-shadow:0 4px 14px rgba(0,24,36,.06);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
}
.depo__seta--ant svg{transform:scaleX(-1)}
.depo__seta:hover:not([aria-disabled="true"]){
  background:var(--azul-700);border-color:var(--azul-700);color:var(--branco);
  transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,72,108,.22);
}
.depo__seta:focus-visible{outline:2px solid var(--azul-600);outline-offset:3px}
.depo__seta[aria-disabled="true"]{opacity:.38;cursor:default;box-shadow:none}
.depo__pontos{display:flex;align-items:center;gap:8px}
.depo__pontos i{
  display:block;width:8px;height:8px;border-radius:99px;background:rgba(0,72,108,.22);
  transition:width .3s cubic-bezier(.16,1,.3,1),background .3s ease;
}
.depo__pontos i.ativo{width:24px;background:var(--azul-700)}
@media (prefers-reduced-motion:reduce){
  .depo__seta,.depo__pontos i{transition:none}
  .depo__seta:hover:not([aria-disabled="true"]){transform:none}
}
.prova__inicial{
  width:40px;height:40px;border-radius:50%;flex:0 0 40px;
  display:grid;place-items:center;
  background:var(--azul-700);color:var(--branco);
  font-weight:800;font-size:.95rem;
}

/* ===========================================================
   SELO DE IMPLANTACAO
   A medalha e' DESENHADA em SVG, nao uma imagem gerada: fica
   nitida em qualquer tela, pesa quase nada e o texto dentro dela
   pode ser trocado sem refazer arte.
   =========================================================== */
.selo-secao{
  background:
    radial-gradient(90% 80% at 76% 34%, rgba(4,108,144,.3) 0%, transparent 62%),
    linear-gradient(160deg, var(--azul-900) 0%, #00243A 52%, var(--azul-900) 100%);
  color:var(--branco);overflow:hidden;
}
.selo-grid{
  display:grid;grid-template-columns:1.02fr 1fr;
  gap:clamp(32px,5vw,70px);align-items:center;
}
@media (max-width:900px){ .selo-grid{grid-template-columns:1fr;gap:40px} }
.selo-secao h2{
  margin:0 0 18px;color:var(--branco);
  font-size:clamp(1.7rem,3.6vw,2.45rem);font-weight:800;
  line-height:1.12;letter-spacing:-.025em;max-width:18ch;text-wrap:balance;
}
.selo-secao h2 em{
  font-style:italic;
  background:linear-gradient(158deg,#FFFFFF 0%,#9FB0BB 36%,#F4F8FA 58%,#8494A0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--prata);
}
.selo-secao > .wrap > div > p{
  color:rgba(255,255,255,.84);font-size:1rem;line-height:1.68;
  margin:0 0 22px;max-width:54ch;
}
.selo-secao strong{color:var(--branco);font-weight:700}

/* ---------- a medalha ---------- */
.medalha{
  position:relative;width:min(360px,82%);margin-inline:auto;
  filter:drop-shadow(0 26px 44px rgba(0,10,20,.55));
}
.medalha svg{width:100%;height:auto;display:block;overflow:visible}
.medalha__marca{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  width:34%;opacity:.96;pointer-events:none;
}
/* giro lento e discreto: uma medalha parada fica morta */
.medalha__disco{
  transform-origin:50% 44%;
  animation:medalha-gira 9s ease-in-out infinite;
}
@keyframes medalha-gira{
  0%,100%{transform:rotate(-2.2deg)}
  50%    {transform:rotate(2.2deg)}
}
.medalha__brilho{
  animation:medalha-brilha 5.5s ease-in-out infinite;
  transform-origin:50% 44%;
}
@keyframes medalha-brilha{
  0%,100%{opacity:.18}
  50%    {opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .medalha__disco,.medalha__brilho{animation:none}
}

/* ===========================================================
   MODO LIMPO  (?limpo=1)
   Esconde toda marcacao interna para apresentar ao cliente.
   Sem o parametro, as marcacoes continuam visiveis — o padrao
   e' ver os bastidores, nao escondê-los.
   =========================================================== */
html.limpo .aviso-pend,
html.limpo .tarja-exemplo{display:none!important}
html.limpo .exemplo::before{display:none!important}
/* Pendencia nossa nao e' recado pro cliente. A regra antiga so' tirava o estilo de
   badge, e o texto continuava legivel na base do rodape, no lugar exato onde o modelo
   do Alex pede Politica de Privacidade e Termos de Uso. Some de vez, como toda outra
   marcacao interna. Apontado pela Rita em 2026-09-22. */
html.limpo .pend{display:none!important}

/* Secao de prova social sem nenhuma prova real: some inteira na versao do cliente.
   Cabeca de pe' num bloco vazio e' pior que secao ausente. Apontado pela Rita em
   2026-09-22, ao ver que esconder so' os cartoes deixava a afirmacao sem lastro. */
html.limpo .secao--sem-prova{display:none!important}

/* 360px: titulo de 3 palavras e botao longo nao cabiam em 1 linha e deixavam a
   ultima palavra sozinha. Um ponto a menos de letra resolve sem mudar o texto. */
@media (max-width:380px){
  .desafios__lista h3{font-size:.85rem}
  .btn{font-size:.88rem;padding-inline:1.25em}
}

/* ===========================================================
   COMO A CERTIFICACAO ACONTECE, 6 etapas (16/09 12:08)
   Referencia do cliente em 2 colunas: numero, icone, titulo,
   frase curta, texto e caixa de resultado. Layout nosso: sem a
   foto do carro, azul no lugar do dourado.
   =========================================================== */
.passos__topo{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,80px);
  align-items:end;margin-bottom:clamp(36px,4.5vw,58px);
}
.passos__topo .cabeca{margin:0}
.passos__topo .cabeca h2{max-width:none}
.passos__lema{
  margin:0 0 6px;padding-left:24px;border-left:2px solid var(--prata-esc);
  font-size:.8rem;font-weight:600;line-height:2;letter-spacing:.24em;text-transform:uppercase;
  color:var(--azul-700);white-space:nowrap;
}
@media (max-width:900px){
  .passos__topo{grid-template-columns:1fr;align-items:start}
  .passos__lema{white-space:normal;letter-spacing:.16em}
}

.passos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,72px);
}
.passo{
  display:grid;grid-template-columns:56px auto minmax(0,1fr);grid-template-rows:auto 1fr auto;
  column-gap:clamp(14px,1.8vw,22px);align-items:start;
  padding:clamp(26px,3vw,36px) clamp(0px,1vw,12px);border-top:1px solid rgba(0,72,108,.13);
}
/* o cabecalho se desfaz na grade: numero, icone e titulo viram as 3 colunas */
.passo__cab{display:contents}
.passo__cab > div{align-self:center;margin-bottom:16px}
.passo__n,.passo__ic{align-self:center;margin-bottom:16px}
.passo__n{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--azul-800);color:var(--branco);
  font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums;
  box-shadow:0 8px 18px rgba(0,36,60,.22);
  transition:background .3s ease,color .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.passo:hover .passo__n{background:var(--prata);color:var(--azul-900);transform:scale(1.06)}
.passo__ic{
  display:grid;place-items:center;height:48px;padding-left:clamp(14px,1.8vw,22px);
  border-left:1px solid rgba(142,155,163,.55);color:var(--azul-800);
}
.passo h3{margin:0 0 3px;font-size:1.12rem;font-weight:700;line-height:1.3;color:var(--azul-900)}
.passo__sub{margin:0;font-size:.92rem;font-weight:500;line-height:1.45;color:var(--azul-700)}
/* 17/09 (Alex): titulo e subtitulo da etapa em UMA linha. Acima de 900px as
   etapas ficam em 2 colunas e a coluna do titulo e' a estreita: e' aqui que
   quebrava. Abaixo disso o cartao ocupa a largura toda e o texto se vira. */
@media (min-width:1181px){
  .passo h3,.passo__sub{white-space:nowrap}
}
/* 360px: "Mapeamento dos processos" e "Implantacao e treinamento" caiam em
   duas linhas. Letra um pouco menor so' no celular estreito. */
@media (max-width:400px){
  .passo h3{font-size:1.02rem}
  .passo__sub{font-size:.86rem}
}
/* 17/09 (Alex): texto e faixa de resultado alinhados ao NUMERO, nao ao titulo.
   Ganha ~130px de largura e o corpo fecha em 3 linhas nos seis cartoes. */
.passo__txt{
  grid-column:1 / -1;margin:0 0 18px;
  font-size:.93rem;line-height:1.65;color:var(--cinza-tx);
}
.passo__res{
  display:flex;align-items:flex-start;gap:10px;
  grid-column:1 / -1;margin:0;padding:12px 16px;
  border-radius:10px;background:rgba(0,72,108,.07);
  font-size:.84rem;line-height:1.5;color:var(--azul-900);
}
.passo__res svg{flex:0 0 18px;margin-top:1px;color:var(--azul-700)}
.passo__res b{font-weight:700}
/* 21/09: as etapas ficam lado a lado so' enquanto a pagina esta' na largura
   cheia (wrap de 1200). Abaixo de 1181 cada etapa ocupa a linha inteira: em
   1121-1180 a faixa "Resultado:" da etapa 05 faltavam 20px para caber em uma
   linha, e o jeito certo de resolver e' dar largura, nao encurtar a ressalva.
   Mesmo ponto de corte do bloco de investimento. */
@media (max-width:1180px){ .passos{grid-template-columns:1fr} }
@media (max-width:560px){
  .passo{grid-template-columns:46px minmax(0,1fr)}
  .passo__ic{display:none}
  .passo__n{width:46px;height:46px;font-size:1rem}
}

.passos__fecho{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;
  gap:clamp(18px,2.2vw,28px);margin-top:clamp(30px,4vw,48px);
  padding:clamp(26px,3.4vw,40px) clamp(22px,3vw,40px);border-radius:var(--r-card);
  color:var(--branco);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(4,108,144,.4) 0%, transparent 70%),
    linear-gradient(160deg,var(--azul-900) 0%,var(--azul-800) 100%);
  box-shadow:0 22px 48px rgba(0,20,34,.2);
}
.passos__fecho-ic{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  color:var(--prata);border:1px solid rgba(201,214,222,.35);background:rgba(201,214,222,.06);
}
.passos__fecho-tit{
  margin:0;padding-left:clamp(18px,2.2vw,28px);border-left:1px solid rgba(201,214,222,.3);white-space:nowrap;
  font-size:clamp(.88rem,1.15vw,.97rem);font-weight:700;line-height:1.6;letter-spacing:.02em;
  text-transform:uppercase;
}
.passos__fecho-txt{
  margin:0;padding-left:clamp(18px,2.2vw,28px);border-left:1px solid rgba(201,214,222,.2);
  font-size:.86rem;line-height:1.65;color:rgba(255,255,255,.78);
}
@media (max-width:1100px){
  .passos__fecho{grid-template-columns:1fr}
  .passos__fecho-tit,.passos__fecho-txt{padding-left:0;border-left:0;white-space:normal}
  .passos__fecho-tit br{display:none}
}

/* ===========================================================
   INVESTIMENTO + O QUE ESTA INCLUSO + CTA (16/09 12:09)
   Substitui preco de volume, selo de implantacao e escopo.
   =========================================================== */
.invest{padding-bottom:clamp(50px,6vw,84px)}
.invest__topo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(30px,4vw,48px);align-items:center;
  padding-bottom:clamp(36px,4.5vw,54px);margin-bottom:clamp(30px,4vw,44px);
  border-bottom:1px solid rgba(0,72,108,.13);
}
.invest__topo .cabeca{margin:0}
.invest__topo .cabeca h2{max-width:none;font-size:clamp(1.6rem,2.7vw,2rem)}

.preco{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;
  padding:clamp(24px,2.6vw,34px);border-radius:var(--r-card);
  background:linear-gradient(170deg,#FFFFFF 0%,var(--claro) 100%);
  border:1px solid rgba(0,72,108,.16);box-shadow:0 18px 44px rgba(0,36,60,.1);
}
.preco__valor{padding-right:clamp(14px,1.8vw,24px)}
.preco__rot{margin:0 0 10px;font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--azul-700)}
.preco__num{
  margin:0;font-size:clamp(2.1rem,3.1vw,2.5rem);font-weight:800;line-height:1;letter-spacing:-.035em;
  color:var(--azul-900);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.preco__moeda{font-size:.5em;letter-spacing:0;vertical-align:.55em}
.preco__per{margin-left:.12em;font-size:.42em;font-weight:500;letter-spacing:0;color:var(--prata-esc)}
.preco__desc{margin:12px 0 18px;font-size:.95rem;color:var(--cinza-tx)}
.preco__parc{display:flex;align-items:center;gap:12px;margin:0;font-size:.92rem;font-weight:600;color:var(--azul-900)}
.preco__parc svg{flex:0 0 26px;color:var(--azul-700)}
.preco__lado{
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding-left:clamp(16px,2vw,24px);border-left:1px solid rgba(0,72,108,.14);
}
.preco__lado svg{flex:0 0 auto;color:var(--azul-700)}
.preco__lado p{margin:0;font-size:.88rem;line-height:1.7;color:var(--cinza-tx)}
.preco__lado b{color:var(--azul-900);font-weight:700}
.preco__lado b:first-child{display:block}
/* 17/09: o texto do cartao fecha em 3 linhas so' com ~210px de coluna.
   Abaixo de 1180 a cabeca sai de cima do cartao e o cartao usa a largura toda. */
@media (max-width:1180px){ .invest__topo{grid-template-columns:1fr} }
@media (max-width:520px){
  .preco{grid-template-columns:1fr}
  .preco__valor{padding-right:0}
  .preco__lado{flex-direction:row;align-items:center;margin-top:22px;padding:22px 0 0;border-left:0;border-top:1px solid rgba(0,72,108,.14)}
  .preco__lado svg{width:36px;height:36px}
}

.invest__olho{margin-bottom:28px}
.incluso{
  list-style:none;margin:0;padding:clamp(24px,2.6vw,34px) clamp(18px,2.2vw,28px);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-radius:var(--r-card);background:var(--claro);border:1px solid rgba(0,72,108,.1);
}
/* texto por baixo do icone: com o icone ocupando coluna, sobravam ~150px e 5 linhas */
.incluso li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 12px;align-items:center;align-content:start;
  padding:4px clamp(10px,1.3vw,18px);
}
.incluso li:first-child{padding-left:0}
.incluso li + li{border-left:1px solid rgba(0,72,108,.13)}
.incluso__ic{color:var(--azul-700);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.incluso li:hover .incluso__ic{transform:translateY(-3px)}
.incluso li > div{display:contents}
.incluso p{grid-column:1 / -1}
.incluso h3{margin:0;font-size:.9rem;font-weight:700;line-height:1.3;color:var(--azul-900)}
/* balance em toda largura: com pretty, palavra longa ("necessarios.", "certificador.")
   caia sozinha na ultima linha das colunas estreitas (Rita, 16/09) */
.incluso p,.passo__res span,.passo__sub{text-wrap:balance}
.preco__lado p{text-wrap:normal}
.incluso p{margin:0;font-size:.84rem;line-height:1.6;color:var(--cinza-tx)}
/* 3 + 2 deixava casa vazia (Rita, 16/09): abaixo de 1080 vira lista de linhas */
@media (max-width:1080px){
  .incluso{grid-template-columns:1fr;row-gap:0;padding-block:8px}
  .incluso li,.incluso li:first-child{padding:18px 0;border-left:0}
  .incluso h3 br{display:none}
  .incluso li + li{border-left:0;border-top:1px solid rgba(0,72,108,.13)}
  .incluso h3{margin-top:2px}
}

/* CTA: galpao de vistoria a direita, texto e botao sobre o azul */
.cta-esp{
  position:relative;color:var(--branco);
  padding-block:clamp(56px,6.5vw,90px);
  background:
    linear-gradient(90deg,var(--azul-900) 0%,rgba(0,24,36,.97) 40%,rgba(0,24,36,.72) 72%,rgba(0,24,36,.45) 100%),
    url("img/galpao.jpg") right 50% / auto 130% no-repeat,
    var(--azul-900);
}
.cta-esp__in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(30px,5vw,70px);align-items:center;
}
.cta-esp .olho{color:rgba(201,214,222,.85)}
.cta-esp h2{
  margin:0 0 18px;font-size:clamp(1.5rem,2.3vw,1.8rem);font-weight:800;line-height:1.15;letter-spacing:-.025em;
}
.cta-esp__texto > p:last-child{margin:0;max-width:56ch;font-size:1rem;line-height:1.65;color:rgba(255,255,255,.8)}
/* 17/09 (Alex): o botao ganha a largura do conjunto dos tres selos e fica
   centralizado com eles. A coluna e' `auto` no grid, entao quem manda na
   largura sao os selos; `stretch` estica so' o botao ate' essa medida. */
.cta-esp__acao{display:flex;flex-direction:column;align-items:stretch;gap:26px}
.cta-esp__acao > .btn{justify-content:center;text-align:center}
.cta-esp__selos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;row-gap:14px}
.cta-esp__selos li{
  display:flex;align-items:center;gap:9px;padding-inline:14px;white-space:nowrap;
  font-size:.76rem;line-height:1.35;color:rgba(255,255,255,.84);
}
.cta-esp__selos li:first-child{padding-left:0}
.cta-esp__selos li + li{border-left:1px solid rgba(201,214,222,.25)}
.cta-esp__selos svg{flex:0 0 24px;color:var(--prata)}
.cta-esp :focus-visible{outline-color:var(--prata)}
@media (max-width:900px){
  .cta-esp{
    background:
      linear-gradient(180deg,rgba(0,24,36,.97) 0%,rgba(0,24,36,.9) 100%),
      url("img/galpao.jpg") center / cover no-repeat,
      var(--azul-900);
  }
  .cta-esp__in{grid-template-columns:1fr}
  /* coluna inteira: sem teto o botao esticaria a largura toda da pagina */
  .cta-esp__acao{max-width:520px}
}
@media (max-width:520px){
  .cta-esp__selos{flex-direction:column;gap:14px}
  .cta-esp__selos li,.cta-esp__selos li + li{padding:0;border-left:0;white-space:normal}
  .cta-esp__selos br{display:none}
}