/* =========================================================
   [ads com gustavo] — design system v3.0
   Papel branco, uma cor que decide.
   ========================================================= */

:root{
  /* --- Cor: acao --- */
  --azul-eletrico:#024AD8;
  --azul-profundo:#0E3191;
  --azul-suave:#C9E0FC;
  --azul-colchete-escuro:#296EF9;

  /* --- Cor: tinta e cinzas --- */
  --tinta:#1A1A1A;
  --carvao:#3D3D3D;
  --grafite:#636363;
  --nuvem:#F7F7F7;
  --nevoa:#E8E8E8;
  --branco:#FFFFFF;
  --rotulo-escuro:#C2C2C2;

  /* --- Cor: semanticas, uso restrito --- */
  --vermelho-fundo:#B3262B;
  --coral:#FF5050;
  --azul-tempestade:#356373;

  /* --- Tipografia --- */
  --fonte:"Inter",Arial,Helvetica,sans-serif;

  --display-xxl:72px;
  --display-xl:56px;
  --display-lg:44px;
  --display-md:32px;
  --display-sm:24px;
  --body-lg:18px;
  --body-md:16px;
  --caption-md:14px;
  --button-md:14px;
  --letra-miuda:12px;

  /* --- Raio: a assinatura estrutural --- */
  --raio-reto:4px;    /* botao e campo */
  --raio-macio:16px;  /* cartao e moldura de foto */

  /* --- Elevacao --- */
  --nivel-2:0 2px 8px rgba(26,26,26,.08);
  --nivel-3:0 8px 24px rgba(26,26,26,.12);

  /* --- Espaco --- */
  --respiro-secao:80px;
  --largura:1120px;
  --gutter:24px;
}

/* ========================= Base ========================= */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--fonte);
  font-size:var(--body-md);
  line-height:1.38;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* Tracking de -70 (1/1000 em) na pagina inteira.
   Precisa ser declarado por elemento, e nao so no body: letter-spacing em
   `em` resolve no elemento onde e DECLARADO e desce como comprimento
   absoluto. Declarado so no body, os 72px do hero herdariam -1,12px
   (0,07 x 16px) em vez dos -5,04px proprios. Com o seletor universal cada
   elemento recalcula sobre o proprio corpo.
   Os rotulos em caixa alta, botoes e pilulas mantem o tracking POSITIVO
   do DS: sao seletores de classe e vencem o `*` na especificidade. */
*{letter-spacing:-0.07em}

img{max-width:100%;height:auto;display:block}

a{color:var(--azul-eletrico);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{margin:0;font-weight:500}

p{margin:0}

ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--azul-eletrico);outline-offset:2px}

.container{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.secao{padding-block:var(--respiro-secao)}
.secao--branco{background:var(--branco)}
.secao--nuvem{background:var(--nuvem)}

/* ==================== Tipografia ==================== */

.display-xxl{font-size:var(--display-xxl);line-height:1.0;font-weight:500}
.display-lg{font-size:var(--display-lg);line-height:1.0;font-weight:500}
.display-md{font-size:var(--display-md);line-height:1.0;font-weight:500}
.display-sm{font-size:var(--display-sm);line-height:1.17;font-weight:500}

.body-lg{font-size:var(--body-lg);line-height:1.33;font-weight:400;color:var(--carvao)}
.body-md{font-size:var(--body-md);line-height:1.38;font-weight:400;color:var(--carvao)}
.caption{font-size:var(--caption-md);line-height:1.5;color:var(--grafite)}

/* ============== Quebra de linha: sem viuvas ==============
   `balance` em todo bloco de texto da pagina.

   Testei `pretty` antes e ele nao resolve aqui: o Chrome so trata como
   viuva a ultima linha de UMA palavra. No paragrafo de fechamento, que
   termina em "qualquer coisa.", `pretty` deixava as linhas em
   541/546/111px — a viuva ficava. `balance` devolveu 387/403/409px.

   Limite conhecido: os navegadores desligam o `balance` acima de cerca
   de 6 linhas, por custo de layout. Medido bloco a bloco em 1200px e em
   375px, nenhum texto desta pagina chega la — o mais longo (o h1 e a
   nota, no mobile) para em 6 linhas. Se o copy crescer bem alem do atual,
   revisar: o bloco que passar do teto perde o balance silenciosamente.

   Onde o navegador nao suporta, cai em `wrap` sem quebrar nada. */

h1,h2,h3,h4,
p,
.hero__sub,
.nota,
.cartao,
.etapas__nome,
.kpi__rotulo,
.kpis__nota,
.fluxo__no strong,
.fluxo__no span,
.fluxo__volta,
.garantia__lista li,
.garantia__lista li span,
.legenda-ilustrativa,
.rotulo{
  text-wrap:balance;
}

/* Rotulo em caixa alta com tracking — o efeito de instrumento do sistema */
.rotulo{
  font-size:var(--letra-miuda);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--grafite);
  margin:0;
}
.rotulo--escuro{color:var(--rotulo-escuro)}
.rotulo--azul{color:var(--azul-eletrico)}

/* Enfase por peso, nunca por italico */
.enfase{font-weight:500;color:var(--tinta)}

/* ==================== Marca ====================
   A marca e um SVG de 293x36 (proporcao 8,14:1). Ela sai do fluxo de
   texto do DS e passa a ser imagem, entao a unica medida que a governa
   e a ALTURA — a largura vem da proporcao.

   Duas versoes de arquivo, nao um filtro: sobre Tinta a marca inteira
   inverte para Branco e o bloco troca Azul Eletrico por Azul Colchete
   Escuro (#296EF9), a mesma regra que os colchetes ja seguiam. Um
   invert() de CSS levaria o azul junto e devolveria laranja. */

.marca{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  /* A marca nunca encolhe contra o botao do cabecalho: a altura e o
     contrato, e um shrink deformaria a leitura de "[ADS]". */
  flex-shrink:0;
}
.marca:hover{text-decoration:none}

.marca__logo{
  display:block;
  height:26px;
  width:auto;
}

/* ==================== Botoes ==================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding-inline:22px;
  border:1px solid transparent;
  border-radius:var(--raio-reto);
  font-family:var(--fonte);
  font-size:var(--button-md);
  font-weight:600;
  line-height:1.4;
  letter-spacing:.7px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{text-decoration:none}

/* Primario: a unica peca solida em azul eletrico */
.btn--primario{background:var(--azul-eletrico);color:var(--branco)}
.btn--primario:hover,.btn--primario:active{background:var(--azul-profundo)}

/* Terciario: contorno em fio, texto tinta — nao consome cota de azul */
.btn--contorno{background:transparent;border-color:var(--nevoa);color:var(--tinta)}
.btn--contorno:hover{border-color:var(--tinta)}

/* Sobre faixa escura: botao branco com texto tinta */
.btn--claro{background:var(--branco);color:var(--tinta)}
.btn--claro:hover{background:var(--nevoa)}

/* ==================== Header ==================== */

.header{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--branco);
  border-bottom:1px solid var(--nevoa);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
}

/* ============ Topo fixo: faixa de aviso + cabecalho ============
   O sticky sobe para o wrapper para que a faixa e o cabecalho grudem
   juntos, sem numero magico de altura: se o texto da faixa quebrar em
   duas linhas no telefone, o cabecalho desce junto sozinho.

   O .header segue sticky no index, que nao tem wrapper; aqui dentro
   ele volta a static para nao competir com o pai. */

.topo-fixo{position:sticky;top:0;z-index:20}
.topo-fixo .header{position:static}

/* Faixa em tinta: azul e reservado ao CTA, entao a promessa se afirma
   pela superficie escura, e nao pela cor de acao. */
.aviso{
  background:var(--tinta);
  /* Faixa em altura dobrada: 14px de texto e 26px de respiro levam a
     caixa de ~37px para ~74px. O tamanho sobe acima da letra-miuda do
     rotulo, mas fica abaixo do body — a faixa afirma sem gritar. */
  padding:26px var(--gutter);
  font-size:var(--caption-md);
  margin:0;
  text-align:center;
}
.aviso__forte{color:var(--branco)}

/* ==================== Hero ==================== */

.hero{padding-block:96px 88px;background:var(--branco)}
.hero__conteudo{max-width:780px;margin-inline:auto;text-align:center}
.hero h1{margin-bottom:24px}
.hero h1 span{display:block}
/* A garantia se separa por espaco: o DS proibe 700 no display e italico
   fora de nota legal, entao a enfase se resolve na composicao. */
.hero h1 span+span{margin-top:.3em}
.hero__sub{margin-inline:auto;max-width:660px;margin-bottom:32px}
.hero__acoes{display:flex;justify-content:center}

/* ==================== Ticker ====================
   Faixa enxuta em tinta. As logos de cliente sao brancas
   em fundo transparente e exigem superficie escura. */

.ticker{
  background:var(--tinta);
  /* A faixa passa a respeitar o mesmo ritmo de respiro das demais secoes. */
  padding-block:var(--respiro-secao);
  overflow:hidden;
}
.ticker__rotulo{text-align:center;margin-bottom:36px}

.ticker__janela{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.ticker__trilha{
  display:flex;
  width:max-content;
  /* 45s para 8 logos mantem ~34px/s, a mesma velocidade dos 6 originais. */
  animation:desliza 45s linear infinite;
  will-change:transform;
}
.ticker__janela:hover .ticker__trilha{animation-play-state:paused}

.ticker__set{display:flex;flex-shrink:0}

.ticker__item{
  position:relative;
  width:190px;
  height:64px;
  flex-shrink:0;
  overflow:hidden;
}
/* A imagem e posicionada pelo centro da TINTA do logo, nao pelo centro
   do canvas: cada PNG traz uma quantidade diferente de respiro
   transparente em volta da marca. */
.ticker__item img{
  position:absolute;
  left:50%;
  top:50%;
  max-width:none;
  display:block;
}

/* Calibragem por logo — medida a partir do bounding box de alfa de cada
   arquivo. A tinta de todos normaliza em 30px de altura optica (ou 150px
   de largura, nas wordmarks largas), e o brilho sobe nos cinzas para que
   pesem como os brancos puros sobre Tinta. */
.logo--ayam img{width:151.3px;height:151.3px;margin-left:-74.0px;margin-top:-75.4px}
.logo--hamkke img{width:276.1px;height:84.7px;margin-left:-137.8px;margin-top:-39.3px}
.logo--inepes img{width:142.9px;height:142.9px;margin-left:-71.4px;margin-top:-71.4px;filter:brightness(1.31)}
.logo--proteauto img{width:144.2px;height:144.2px;margin-left:-71.5px;margin-top:-72.1px;filter:brightness(1.63)}
/* renovaderme e uma wordmark de traco fino (tinta de 379x32 num canvas de
   600x600). Reduzida para 150px de largura, o downscale dilui o alfa das
   hastes e ela compunha a 77 de luminancia media, pico 113 — nunca chegava
   ao branco. brightness() nao resolve isso (o pixel ja e branco; o que falta
   e opacidade). Empilhar drop-shadow de deslocamento e desfoque zero
   recompoe a silhueta sobre si mesma e devolve o alfa: media 155, pico 250. */
.logo--renovaderme img{
  width:237.5px;height:237.5px;margin-left:-117.5px;margin-top:-118.5px;
  filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff);
}
.logo--vetdomus img{width:95.2px;height:95.2px;margin-left:-48.6px;margin-top:-46.4px;filter:brightness(1.06)}

/* Os dois arquivos webp ja vem cortados no ink (sem respiro no canvas) e
   sao lockups com linha de apoio, entao normalizam em 34px de altura para
   que a palavra principal pese como as demais marcas. */
.logo--summit img{width:95.7px;height:34.0px;margin-left:-47.8px;margin-top:-17.0px}
/* segsmart.webp e colorido sobre base escura (luminancia media 46): sobre
   Tinta daria 1,05:1 de contraste. brightness(0) invert(1) o achata em
   silhueta branca — o motivo interno do icone e recorte transparente,
   entao o desenho se preserva. E a versao negativa que o arquivo nao traz. */
.logo--segsmart img{width:118.0px;height:34.0px;margin-left:-59.0px;margin-top:-17.0px;filter:brightness(0) invert(1)}

@keyframes desliza{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ==================== Reconhecimento ==================== */

.reconhecimento h2{margin-bottom:40px;max-width:820px}
.cartoes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.cartao{
  background:var(--branco);
  border:1px solid var(--nevoa);
  border-radius:var(--raio-macio);
  padding:28px;
  font-size:var(--body-lg);
  line-height:1.33;
  color:var(--tinta);
}
/* .cartao--fecha existia quando o 5o item nao era fala. Agora os cinco
   sao falas e recebem o mesmo tratamento em Tinta. */

/* ==================== O sistema ==================== */

.sistema__cabecalho{max-width:840px;margin-bottom:40px}
.sistema__cabecalho h2{margin-bottom:20px}

/* Barra de pesquisa: campo, nao pilula. Uma por tela. */
.barra-pesquisa{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:520px;
  height:52px;
  padding-inline:18px;
  margin-bottom:48px;
  border:1px solid var(--nevoa);
  border-radius:var(--raio-reto);
  background:var(--branco);
  font-size:var(--body-md);
  color:var(--azul-eletrico);
  font-weight:500;
}
.barra-pesquisa svg{flex-shrink:0;color:var(--grafite)}

.etapas{border-top:1px solid var(--nevoa)}
.etapas li{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:20px;
  align-items:baseline;
  padding-block:24px;
  border-bottom:1px solid var(--nevoa);
}
.etapas__numero{
  font-size:var(--caption-md);
  font-weight:500;
  color:var(--grafite);
  letter-spacing:.5px;
}
.etapas__nome{
  font-size:var(--display-sm);
  font-weight:500;
  color:var(--tinta);
}

.nota{
  margin-top:40px;
  padding:32px;
  background:var(--nuvem);
  border-radius:var(--raio-macio);
  font-size:var(--body-lg);
  line-height:1.33;
  color:var(--carvao);
  max-width:860px;
}

/* ==================== Demonstracao ==================== */

.demo__cabecalho{max-width:860px;margin-bottom:56px}

.bloco{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:56px;
  align-items:center;
  padding-block:48px;
  border-top:1px solid var(--nevoa);
}
.bloco:first-of-type{border-top:0;padding-top:0}
/* No bloco invertido o visual assume a coluna 1, entao as fracoes
   trocam de lado para que o visual continue sendo o lado largo. */
.bloco--invertido{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.bloco--invertido .bloco__texto{order:2}
.bloco--invertido .bloco__visual{order:1}
.bloco__texto h3{font-size:var(--display-sm);line-height:1.17;margin-bottom:16px}

.moldura{
  background:var(--branco);
  border:1px solid var(--nevoa);
  border-radius:var(--raio-macio);
  box-shadow:var(--nivel-2);
  padding:24px;
}
.legenda-ilustrativa{
  margin-top:12px;
  font-size:var(--letra-miuda);
  color:var(--grafite);
  letter-spacing:.3px;
}

/* --- Mockup 1: relatorio --- */
.tabela-wrap{overflow-x:auto}
table.relatorio{
  width:100%;
  min-width:460px;
  border-collapse:collapse;
  font-size:var(--caption-md);
}
table.relatorio th{
  text-align:left;
  font-size:var(--letra-miuda);
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--grafite);
  padding:10px 12px;
  border-bottom:1px solid var(--nevoa);
  white-space:nowrap;
}
table.relatorio td{
  padding:14px 12px;
  border-bottom:1px solid var(--nevoa);
  color:var(--carvao);
  white-space:nowrap;
}
table.relatorio tr:last-child td{border-bottom:0}
table.relatorio td.num{text-align:right;font-weight:500;color:var(--tinta)}
table.relatorio th.num{text-align:right}

/* Tags de palavra-chave: colchete azul = exata, aspas = frase, sem sinal = ampla */
.tag{font-weight:500;color:var(--tinta)}
.tag b{font-weight:500;color:var(--azul-eletrico)}

/* Resultado positivo nao e verde: pilula azul-suave, texto azul-profundo */
.pilula{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:var(--azul-suave);
  color:var(--azul-profundo);
  font-size:var(--letra-miuda);
  font-weight:500;
  letter-spacing:.2px;
  white-space:nowrap;
}

/* --- Mockup 2: dashboard --- */
/* 2x2 e nao 4 colunas: a 4 por linha a coluna oferece 93px e a palavra
   "OPORTUNIDADES" mede 112px sozinha — nenhum rotulo com ela cabe, e o
   piso tipografico do DS (12px) nao deixa reduzir a letra. */
.kpis{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}
.kpis__nota{
  font-size:var(--letra-miuda);
  color:var(--grafite);
  letter-spacing:.3px;
  margin-bottom:24px;
}
.kpi{
  border:1px solid var(--nevoa);
  border-radius:var(--raio-macio);
  padding:16px;
}
.kpi__rotulo{
  font-size:var(--letra-miuda);
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--grafite);
  margin-bottom:10px;
  line-height:1.3;
}
.kpi__valor{
  font-size:26px;
  font-weight:500;
  color:var(--tinta);
  line-height:1;
  margin-bottom:10px;
}
.grafico__topo{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.legenda-serie{display:flex;gap:16px;font-size:var(--letra-miuda);color:var(--grafite)}
.legenda-serie span{display:inline-flex;align-items:center;gap:6px}
.legenda-serie i{display:block;width:14px;height:3px;border-radius:2px}
.legenda-serie .atual{background:var(--azul-eletrico)}
.legenda-serie .anterior{background:var(--azul-tempestade)}

/* --- Mockup 3: fluxo --- */
.fluxo{
  display:flex;
  align-items:stretch;
  gap:8px;
}
.fluxo__seta{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  color:var(--grafite);
  font-size:15px;
  line-height:1;
}
.fluxo__no{
  flex:1 1 0;
  min-width:0;
  border:1px solid var(--nevoa);
  border-radius:var(--raio-macio);
  padding:16px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.fluxo__no strong{font-size:var(--caption-md);font-weight:500;color:var(--tinta)}
.fluxo__no span{font-size:var(--letra-miuda);color:var(--grafite);line-height:1.4}
.fluxo__volta{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--nevoa);
  font-size:var(--letra-miuda);
  color:var(--azul-profundo);
  font-weight:500;
  text-align:center;
  letter-spacing:.2px;
}

/* ==================== Assinatura ==================== */

.assinatura__grid{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:48px;
  align-items:center;
  max-width:940px;
}
/* Moldura de 16px, nunca mascara circular */
.retrato{
  border-radius:var(--raio-macio);
  overflow:hidden;
  border:1px solid var(--nevoa);
}
.retrato img{width:100%;height:auto;display:block}
.assinatura__texto p+p{margin-top:16px}

/* ==================== Garantia ==================== */

.garantia h2{margin-bottom:32px;max-width:760px}
.garantia__lista{border-top:1px solid var(--nevoa);max-width:820px}
.garantia__lista li{
  padding-block:20px;
  border-bottom:1px solid var(--nevoa);
  font-size:var(--body-lg);
  color:var(--tinta);
  font-weight:500;
}
.garantia__lista li span{
  display:block;
  margin-top:6px;
  font-size:var(--caption-md);
  font-weight:400;
  color:var(--grafite);
}

/* ==================== Fechamento e rodape ==================== */

.fechamento{background:var(--tinta);color:var(--branco);padding-block:var(--respiro-secao)}
.fechamento h2{color:var(--branco);margin-bottom:12px;max-width:720px}
.fechamento p{color:var(--rotulo-escuro);margin-bottom:32px;max-width:620px;font-size:var(--body-lg);line-height:1.33}

.rodape{
  background:var(--tinta);
  color:var(--rotulo-escuro);
  padding-bottom:48px;
}
.rodape__linha{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.rodape a{color:var(--rotulo-escuro);text-decoration:none}
.rodape a:hover{color:var(--branco);text-decoration:underline}
/* O sublinhado do rodape e para link de texto. A marca e imagem: o
   seletor .rodape a:hover venceria .marca:hover na especificidade. */
.rodape .marca:hover{text-decoration:none}
.rodape__miuda{font-size:var(--letra-miuda);color:var(--rotulo-escuro);letter-spacing:.2px}

/* ==================== Pagina: diagnostico ====================
   A landing do relatorio gratuito (diagnostico.html) reaproveita hero,
   cartoes, nota, assinatura e fechamento. So o que segue nao existia. */

/* Olho acima do h1: 16px o separa sem quebrar o bloco do titulo */
.hero__olho{margin-bottom:16px}
/* Reforco abaixo do botao. Mais estreito que o .hero__sub de proposito:
   e nota de rodape do CTA, nao um segundo subtitulo. */
.hero__reforco{margin-top:16px;margin-inline:auto;max-width:560px}

.relatorio__cabecalho{max-width:840px;margin-bottom:40px}
.relatorio__cabecalho h2{margin-bottom:20px}

/* Cartao numerado: o numero e rotulo de instrumento, nao display.
   Se ele virasse numeral grande, disputaria com o titulo do cartao. */
.cartao__numero{
  display:block;
  font-size:var(--letra-miuda);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.9px;
  color:var(--grafite);
  margin-bottom:10px;
}
.cartao__titulo{
  font-size:var(--display-sm);
  line-height:1.17;
  font-weight:500;
  color:var(--tinta);
  margin:0 0 10px;
}
.cartao__texto{
  font-size:var(--body-md);
  line-height:1.38;
  font-weight:400;
  color:var(--carvao);
  margin:0;
}

/* Inversao para quando .nota cair numa faixa nuvem: as duas superficies
   sao a mesma, e sem isto o painel sumiria no fundo. Hoje sem uso: o
   relatorio do diagnostico voltou para faixa branca. */
.nota--branca{background:var(--branco);border:1px solid var(--nevoa)}

.acoes-centro{display:flex;justify-content:center;margin-top:40px}

/* A assinatura do index resolve estes dois valores em style inline.
   Aqui eles sao classe. */
.assinatura__rotulo{margin-bottom:12px}
.assinatura__lead{color:var(--tinta)}

/* ==================== Responsivo ==================== */

@media (max-width:960px){
  :root{--display-xxl:52px;--display-lg:36px;--display-md:28px}
  .marca__logo{height:23px}
  .bloco{grid-template-columns:minmax(0,1fr);gap:32px}
  .bloco--invertido .bloco__texto,
  .bloco--invertido .bloco__visual{order:initial}
  .cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .assinatura__grid{grid-template-columns:240px minmax(0,1fr);gap:32px}
}

@media (max-width:640px){
  :root{
    --display-xxl:38px;
    --display-lg:30px;
    --display-md:24px;
    --display-sm:20px;
    --body-lg:17px;
    --respiro-secao:48px;
    --gutter:20px;
  }
  .hero{padding-block:56px 48px}
  .hero__acoes .btn{width:100%}
  .acoes-centro .btn{width:100%}
  .header__inner{min-height:64px}
  /* No telefone a frase quebra em duas linhas: o tracking aperta e o
     respiro cede de 26 para 16px, senao o topo fixo come a dobra. */
  .aviso{padding-block:16px;letter-spacing:.6px}
  /* 19px de altura da 155px de largura: exatamente a caixa que a
     wordmark em texto ocupava, entao o cabecalho no telefone nao
     ganha nem um pixel de conflito com o botao. */
  .marca__logo{height:19px}
  .cartoes{grid-template-columns:minmax(0,1fr)}
  .cartao{padding:22px;font-size:var(--body-md)}
  .fluxo{flex-direction:column}
  .fluxo__seta{justify-content:center;transform:rotate(90deg)}
  .assinatura__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  /* width explicito: com justify-items:center a moldura vira fit-content
     e a imagem em width:100% colapsaria para zero. */
  .retrato{width:100%;max-width:260px}
  .moldura{padding:16px}
  .nota{padding:24px}
  .etapas li{grid-template-columns:40px minmax(0,1fr);gap:12px}
  /* A largura do slot fica: a tinta mais larga mede 150px e nao pode ser cortada. */
  .ticker__item{width:176px;height:56px}
  .ticker__rotulo{margin-bottom:28px}
  .fechamento .btn{width:100%}
}

/* ============= Mobile: composicao centralizada =============
   No mobile a pagina inteira se resolve em eixo unico e centrado.
   A tabela de relatorio e a excecao deliberada: e um artefato de dado
   que rola na horizontal, e centrar coluna de numero destruiria a
   leitura de relatorio. */

@media (max-width:640px){

  .reconhecimento h2,
  .sistema__cabecalho,
  .sistema__cabecalho h2,
  .relatorio__cabecalho,
  .demo__cabecalho,
  .garantia h2,
  .fechamento h2,
  .fechamento p,
  .nota,
  .cartao,
  .bloco__texto,
  .assinatura__texto,
  .legenda-ilustrativa,
  .kpis__nota,
  .kpi{
    text-align:center;
  }

  /* blocos com teto de largura passam a centralizar a propria caixa */
  .sistema__cabecalho,
  .relatorio__cabecalho,
  .demo__cabecalho,
  .nota,
  .garantia__lista,
  .fechamento h2,
  .fechamento p,
  .barra-pesquisa,
  .retrato{
    margin-inline:auto;
  }

  /* barra de pesquisa: campo centrado, conteudo centrado */
  .barra-pesquisa{justify-content:center}

  /* etapas: numero acima do nome, em coluna unica */
  .etapas li{
    grid-template-columns:minmax(0,1fr);
    gap:6px;
    justify-items:center;
    text-align:center;
  }

  /* garantia: titulo e apoio centrados sobre os fios */
  .garantia__lista li{text-align:center}

  /* painel: rotulo e legenda de serie empilham centrados */
  .grafico__topo{justify-content:center;text-align:center}
  .legenda-serie{justify-content:center;flex-wrap:wrap}

  /* assinatura: foto e texto no mesmo eixo */
  .assinatura__grid{justify-items:center}

  /* fechamento e rodape */
  .fechamento .container{display:flex;flex-direction:column;align-items:center}
  .rodape__linha{flex-direction:column;align-items:center;text-align:center}
}

/* ==================== Movimento reduzido ==================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .ticker__trilha{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
  .ticker__set--clone{display:none}
  .ticker__set{flex-wrap:wrap;justify-content:center}
  .ticker__janela{-webkit-mask-image:none;mask-image:none}
}