/* secoes/home.css: seções da home (só o que é exclusivo delas).
   Cubotimize, layout novo (direção "Cubo"). Mobile first; pontos de quebra: 640, 960, 1200 px.
   Regras em kb/02-metodo-novo-layout.md: cores, fontes, espaços e tempos só via var(--…) de tokens.css. */

/* ---------- banner ---------- */
.banner {
  position: relative; overflow: hidden;
  padding-top: var(--e-6);
  background: var(--creme);
}
.banner::before {
  content: ""; position: absolute; inset: 0 0 0 30%;
  background-image: var(--grade-iso); background-position: 0 0;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--tinta) 45%);
  mask-image: linear-gradient(to right, transparent, var(--tinta) 45%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .banner::before { animation: grade-desliza var(--d-grade) linear infinite; }
}
@keyframes grade-desliza { to { background-position: var(--grade-passo-x) var(--grade-passo-y); } }
.banner__grade {
  position: relative;
  display: grid; gap: var(--e-5);
  grid-template-areas: "selo" "titulo" "lead" "acoes" "figura";
}
.banner__texto { display: contents; }
.selo {
  grid-area: selo; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-4) var(--e-1) var(--e-3);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--r-pilula);
  font-size: var(--fs-mini); font-weight: 800; line-height: 1.8;
}
.selo__cubo { width: 16px; }
.banner__titulo {
  grid-area: titulo;
  font-size: var(--fs-h1); font-weight: 900; line-height: 1.03; letter-spacing: -0.03em;
}
.banner__linha { display: block; }
.banner__destaque {
  color: var(--azul);
  text-decoration: underline; text-decoration-color: var(--verde);
  text-decoration-thickness: 0.12em; text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}
.banner__lead { grid-area: lead; font-size: var(--fs-grande); color: var(--tinta-2); max-width: 34rem; }
.banner__acoes { grid-area: acoes; display: grid; gap: var(--e-3); }

.banner__figura {
  grid-area: figura; position: relative;
  width: min(100%, 400px); justify-self: center;
  margin-top: var(--e-4);
}
/* no celular o cubo fica menor para os rótulos caberem em até duas linhas */
.cubo--banner { width: 50%; height: auto; overflow: visible; }
.banner__rotulos ul { display: block; }
.banner__rotulo { position: absolute; left: 55%; right: 0; transform: translateY(-50%); }
@media (min-width: 960px) {
  .cubo--banner { width: 58%; }
  .banner__rotulo { left: 62%; right: auto; }
}
.banner__rotulo--azul { top: 23%; }
.banner__rotulo--verde { top: 42%; }
.banner__rotulo--vermelho { top: 60.5%; }
.banner__rotulo::before {
  content: ""; position: absolute; right: 100%; top: 50%;
  width: var(--e-4); border-top: var(--traco) solid var(--tinta);
}
.banner__rotulo a {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--r-pilula);
  font-size: var(--fs-mini); font-weight: 800; line-height: 1.3; text-decoration: none;
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva);
}
.banner__rotulo a:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-p); }
.banner__rotulo-num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  flex-shrink: 0;   /* sem isso o círculo encolhia quando o rótulo quebra em duas linhas */
  color: var(--branco); font-size: var(--fs-micro); font-weight: 900;
}
.banner__rotulo--azul .banner__rotulo-num { background: var(--azul); }
.banner__rotulo--verde .banner__rotulo-num { background: var(--verde-escuro); }
.banner__rotulo--vermelho .banner__rotulo-num { background: var(--vermelho); }

/* Movimento do cubo. Três níveis de transformação, um por elemento, para não brigarem:
   .cubo__flutua   sobe e desce sozinho (animação contínua, cada camada num ritmo)
   .cubo__paralaxe acompanha o cursor (--cubo-x/--cubo-y, de -1 a 1, definidos pelo c.js)
   .cubo__camada   afasta as camadas no hover e destaca a camada do rótulo em foco
   A sombra respira junto (.cubo__sombra) e se projeta para o lado oposto ao cursor (.cubo__projecao). */
.cubo--banner { --cubo-x: 0; --cubo-y: 0; --sombra-escala: 1; }
.cubo__camada,
.cubo__paralaxe,
.cubo__projecao { transition: transform var(--d-lenta) var(--curva), opacity var(--d-lenta) var(--curva); }
.cubo__sombra,
.cubo__projecao { transform-box: fill-box; transform-origin: center; }
.cubo__paralaxe {
  transform: translate(calc(var(--cubo-x) * var(--paralaxe-x)), calc(var(--cubo-y) * var(--paralaxe-y)));
}
.cubo__projecao {
  transform:
    translate(calc(var(--cubo-x) * var(--projecao-x)), calc(var(--cubo-y) * var(--projecao-y)))
    scale(var(--sombra-escala));
}
.banner__figura:hover .cubo--banner { --sombra-escala: 1.16; }
.banner__figura:hover .cubo__sombra { fill: var(--tinta-sombra-forte); }
.banner__figura:hover .cubo__camada--azul { transform: translateY(var(--afasta-1)); }
.banner__figura:hover .cubo__camada--verde { transform: translateY(var(--afasta-2)); }
.banner__figura:has(.banner__rotulo--azul a:hover, .banner__rotulo--azul a:focus-visible) .cubo__camada--azul,
.banner__figura:has(.banner__rotulo--verde a:hover, .banner__rotulo--verde a:focus-visible) .cubo__camada--verde,
.banner__figura:has(.banner__rotulo--vermelho a:hover, .banner__rotulo--vermelho a:focus-visible) .cubo__camada--vermelho {
  transform: translate(14px, -8px);
}
@media (prefers-reduced-motion: no-preference) {
  .cubo__flutua--1 { animation: flutua-1 var(--d-flutua) ease-in-out infinite; }
  .cubo__flutua--2 { animation: flutua-2 var(--d-flutua) ease-in-out infinite; }
  .cubo__flutua--3 { animation: flutua-3 var(--d-flutua) ease-in-out infinite; }
  .cubo__sombra { animation: sombra-respira var(--d-flutua) ease-in-out infinite; }
}
/* as camadas de cima sobem mais: o cubo "abre" e "fecha" devagar */
@keyframes flutua-1 { 50% { transform: translateY(-16px); } }
@keyframes flutua-2 { 50% { transform: translateY(-9px); } }
@keyframes flutua-3 { 50% { transform: translateY(-4px); } }
/* quando o cubo sobe, a sombra encolhe e clareia */
@keyframes sombra-respira { 50% { transform: scale(0.86); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .cubo__paralaxe, .cubo__projecao { transform: none; }
}

.provas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin-top: var(--e-7);
  background: var(--tinta-linha);
  border-block: var(--traco) solid var(--tinta);
}
.provas__item { display: flex; flex-direction: column; padding: var(--e-4) var(--e-3); background: var(--creme); }
.provas__valor { font-size: var(--fs-valor); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.provas__rotulo { font-size: var(--fs-pequena); color: var(--tinta-2); font-weight: 600; }

@media (min-width: 640px) {
  .banner { padding-top: var(--e-7); }
  .banner__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    grid-template-areas: "selo selo" "titulo titulo" "lead figura" "acoes figura";
    column-gap: var(--e-6);
    align-items: start;
  }
  .banner__figura { margin-top: 0; width: 100%; }
  .banner__acoes { display: flex; flex-wrap: wrap; }
  .provas__item { padding: var(--e-5) var(--e-5); }
}
@media (min-width: 960px) {
  .banner { padding-top: var(--e-8); }
  .banner__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-rows: auto auto 1fr 1fr;
    row-gap: var(--e-5);
  }
  .banner__lead { align-self: end; }
  .banner__acoes { align-self: start; padding-top: var(--e-2); }
  .banner__figura { margin-top: calc(-1 * var(--e-7)); }
  .banner__rotulo a { font-size: var(--fs-pequena); padding-right: var(--e-4); }
  .banner__rotulo-num { width: 28px; height: 28px; font-size: var(--fs-micro-2); }
  .banner__rotulo::before { width: var(--e-5); }
  .provas { margin-top: var(--e-6); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- soluções ---------- */
.solucoes__grade { display: grid; gap: var(--e-6); }
.solucoes__card {
  display: flex; flex-direction: column; gap: var(--e-4);
  padding: var(--e-5);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  box-shadow: var(--sombra-m);
  color: var(--branco);
}
.solucoes__card--azul { background: var(--azul); }
.solucoes__card--verde { background: var(--verde-escuro); }
.solucoes__card--vermelho { background: var(--vermelho); }
.solucoes__rotulo {
  display: inline-flex; align-items: center; gap: var(--e-2); align-self: start;
  padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1);
  background: var(--claro-fundo-2); border-radius: var(--r-pilula);
  font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
.solucoes__num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--branco); color: var(--tinta); font-size: var(--fs-micro); letter-spacing: 0;
}
.solucoes__titulo { font-size: var(--fs-card); font-weight: 900; line-height: 1.08; letter-spacing: -0.015em; }
.solucoes__quadro {
  aspect-ratio: 16 / 10; padding: var(--e-3);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--r-m);
  overflow: hidden;
}
.solucoes__quadro img { width: 100%; height: 100%; object-fit: contain; }
.solucoes__texto { font-size: var(--fs-base); }
.solucoes__lista { display: grid; gap: var(--e-2); font-weight: 700; font-size: var(--fs-pequena); }
.solucoes__lista li { display: flex; gap: var(--e-3); align-items: flex-start; line-height: 1.45; }
.solucoes__lista .icone {
  width: 22px; height: 22px; padding: 3px; border-radius: 50%;
  background: var(--branco); color: var(--tinta); stroke-width: 3;
}
.solucoes__link {
  display: inline-flex; align-items: center; gap: var(--e-2); align-self: start;
  margin-top: auto; padding: var(--e-3) var(--e-5);
  background: var(--branco); color: var(--tinta);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-pilula);
  font-weight: 800; font-size: var(--fs-pequena); text-decoration: none;
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva);
}
.solucoes__link:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-p); }
.solucoes__lista { margin-bottom: var(--e-3); }
/* galeria do BI: três imagens que se alternam com transição suave e zoom lento */
.galeria { position: relative; padding: 0; background: var(--branco); }
.galeria__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-galeria-troca) var(--curva), visibility var(--d-galeria-troca);
}
.galeria__slide--ativo { opacity: 1; visibility: visible; }
.galeria__slide img { width: 100%; height: 100%; object-fit: cover; }
.galeria__slide--contain img { object-fit: contain; }
.galeria__legenda {
  position: absolute; left: var(--e-3); bottom: var(--e-3); max-width: calc(100% - 120px);
  padding: var(--e-1) var(--e-3);
  background: var(--tinta); color: var(--branco); border-radius: var(--r-pilula);
  font-size: var(--fs-micro-2); font-weight: 800; line-height: 1.4;
}
.galeria__pontos { position: absolute; right: var(--e-3); bottom: var(--e-3); display: none; gap: var(--e-2); }
.js .galeria__pontos { display: flex; }
.galeria__ponto {
  width: 14px; height: 14px; padding: 0; cursor: pointer;
  border: var(--traco) solid var(--tinta); border-radius: 50%; background: var(--branco);
  transition: background-color var(--d-rapida), transform var(--d-rapida) var(--curva);
}
.galeria__ponto[aria-pressed="true"] { background: var(--tinta); transform: scale(1.15); }
/* no desktop o quadro não estica até a altura do texto: fica na proporção das imagens */
@media (min-width: 960px) {
  .galeria.solucoes__quadro { align-self: center; aspect-ratio: 16 / 10; min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .galeria__slide--ativo img { animation: galeria-zoom var(--d-galeria) ease-out both; }
  .galeria__slide--contain.galeria__slide--ativo img { animation-name: galeria-zoom-leve; }
}
@keyframes galeria-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes galeria-zoom-leve { from { transform: scale(0.98); } to { transform: scale(1.02); } }
@media (min-width: 640px) {
  .solucoes__card { padding: var(--e-6); }
}
/* dois cartões largos: texto de um lado, imagem grande do outro (alternando) */
@media (min-width: 960px) {
  .solucoes__grade { gap: var(--e-7); }
  .solucoes__card {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "rotulo quadro" "titulo quadro" "texto quadro" "lista quadro" "link quadro";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--e-7); row-gap: var(--e-4);
    padding: var(--e-7);
  }
  .solucoes__card:nth-child(even) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: "quadro rotulo" "quadro titulo" "quadro texto" "quadro lista" "quadro link";
  }
  .solucoes__rotulo { grid-area: rotulo; justify-self: start; }
  .solucoes__titulo { grid-area: titulo; font-size: var(--fs-h2); }
  .solucoes__quadro { grid-area: quadro; align-self: stretch; aspect-ratio: auto; min-height: 380px; }
  .solucoes__texto { grid-area: texto; font-size: var(--fs-grande); }
  .solucoes__lista { grid-area: lista; font-size: var(--fs-base); }
  .solucoes__link { grid-area: link; justify-self: start; align-self: end; }
}

/* ---------- ecossistema CuboPlus ---------- */
.cuboplus__rotulo { margin-bottom: var(--e-3); background: var(--vermelho); color: var(--branco); }
.cuboplus__logo { width: min(100%, 360px); height: auto; }
.cuboplus__grade { display: grid; gap: var(--e-5); }
.produto {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: calc(var(--e-5) + var(--traco-g)) var(--e-5) var(--e-5);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva);
}
.produto::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--traco-g);
  background: var(--produto-faixa);
}
.produto:hover { transform: translate(-4px, -4px); box-shadow: var(--sombra-m); }
.produto--link { --produto-faixa: var(--p-link); --produto-cor: var(--p-link-cor); }
.produto--trilha { --produto-faixa: var(--p-trilha); --produto-cor: var(--p-trilha-cor); }
.produto--lupa { --produto-faixa: var(--p-lupa); --produto-cor: var(--p-lupa-cor); }
.produto--sorteio { --produto-faixa: var(--p-sorteio); --produto-cor: var(--p-sorteio-cor); }
.produto__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.produto__nome { font-size: var(--fs-card); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.produto__marca {
  display: block; margin-bottom: var(--e-1);
  font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--produto-cor);
}
.produto__selo {
  flex-shrink: 0; padding: var(--e-1) var(--e-3);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-pilula);
  background: var(--tinta); color: var(--branco);
  font-size: var(--fs-micro-2); font-weight: 900; white-space: nowrap;
}
.produto__pilulas { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-1); flex-shrink: 0; }
/* categoria do produto: contorno na cor do produto (o selo de oferta é o preto) */
.produto__categoria {
  padding: var(--e-1) var(--e-3);
  border: var(--traco) solid var(--produto-cor); border-radius: var(--r-pilula);
  color: var(--produto-cor); background: var(--branco);
  font-size: var(--fs-micro-2); font-weight: 900; white-space: nowrap;
}
.produto__chamada { font-weight: 800; line-height: 1.35; }
.produto__texto { color: var(--tinta-2); font-size: var(--fs-pequena); }
.produto__lista { display: grid; gap: var(--e-2); margin-top: var(--e-1); font-size: var(--fs-pequena); font-weight: 700; }
.produto__lista li { display: flex; gap: var(--e-2); align-items: flex-start; line-height: 1.4; }
.produto__lista .icone { width: 18px; height: 18px; margin-top: 1px; color: var(--produto-cor); stroke-width: 3; }
.produto__clientes {
  padding: var(--e-3) var(--e-4); border-radius: var(--r-m); background: var(--creme);
  font-size: var(--fs-pequena); font-weight: 800; line-height: 1.4;
}
.produto__clientes span {
  display: block; font-size: var(--fs-micro-2); font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinta-2);
}
.produto__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); align-self: stretch;
  white-space: nowrap;
  margin-top: auto; padding: var(--e-3) var(--e-5);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-pilula);
  font-weight: 800; font-size: var(--fs-pequena); text-decoration: none;
  transition: background-color var(--d-rapida), color var(--d-rapida);
}
.produto__link:hover { background: var(--tinta); color: var(--branco); }
.produto__lista { margin-bottom: var(--e-3); }
@media (min-width: 640px) {
  .cuboplus__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cuboplus__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- segurança ---------- */
.secao--tinta { background: var(--tinta); color: var(--branco); }
.seguranca { position: relative; overflow: hidden; }
.seguranca::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grade-iso-clara);
  -webkit-mask-image: linear-gradient(to bottom left, var(--tinta), transparent 60%);
  mask-image: linear-gradient(to bottom left, var(--tinta), transparent 60%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .seguranca::before { animation: grade-desliza var(--d-grade) linear infinite; }
}
.seguranca :focus-visible { outline-color: var(--ciano); }
.seguranca__grade { position: relative; display: grid; gap: var(--e-7); }
.seguranca .titulo-secao__h2 { color: var(--branco); }
.seguranca__texto { margin-top: var(--e-4); font-size: var(--fs-grande); color: var(--claro-1); max-width: 34rem; }
.seguranca__h3 {
  margin-top: var(--e-6); margin-bottom: var(--e-3);
  font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--claro-2);
}
.seguranca__fornecedores { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.seguranca__fornecedores li {
  padding: var(--e-1) var(--e-4); border: var(--traco-fino) solid var(--claro-linha); border-radius: var(--r-pilula);
  background: var(--claro-fundo); font-weight: 800; font-size: var(--fs-pequena);
}
.seguranca__camadas { display: grid; gap: var(--e-3); }
.camada {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-4); align-items: start;
  padding: var(--e-4) var(--e-5);
  background: var(--claro-fundo); border: var(--traco-fino) solid var(--claro-linha); border-radius: var(--r-m);
  border-left: var(--traco-g) solid var(--azul-claro);
  transition: transform var(--d-rapida) var(--curva), background-color var(--d-rapida);
}
.camada:hover { transform: translateX(6px); background: var(--claro-fundo-2); }
.camada--verde { border-left-color: var(--verde); }
.camada--vermelho { border-left-color: var(--vermelho-claro); }
.camada__num { font-size: var(--fs-destaque); font-weight: 1000; line-height: 1.1; color: var(--claro-2); font-variant-numeric: tabular-nums; }
.camada__titulo { font-size: var(--fs-icone-texto); font-weight: 900; line-height: 1.3; }
.camada__texto { margin-top: var(--e-1); color: var(--claro-1); font-size: var(--fs-pequena); }
@media (min-width: 960px) {
  .seguranca__grade { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e-8); align-items: start; }
  .seguranca__intro { position: sticky; top: calc(var(--altura-cabecalho) + var(--e-6)); }
}

/* ---------- método ---------- */
.metodo__passos { position: relative; display: grid; gap: var(--e-6); counter-reset: passo; }
/* linha que liga os passos: tracejado desenhado com gradiente (em vez de borda) para poder "andar" */
.metodo__passos::before {
  content: ""; position: absolute; top: var(--e-6); bottom: var(--e-6); left: 35px; width: var(--traco);
  background-image: repeating-linear-gradient(to bottom, var(--tinta) 0 var(--traco-trace), transparent var(--traco-trace) var(--traco-ciclo));
}
@media (prefers-reduced-motion: no-preference) {
  .metodo__passos::before { animation: tracejado-desce var(--d-tracejado) linear infinite; }
}
@keyframes tracejado-desce { to { background-position: 0 var(--traco-ciclo); } }
@keyframes tracejado-anda { to { background-position: var(--traco-ciclo) 0; } }
.metodo__passo {
  position: relative;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  column-gap: var(--e-5); align-items: start;
}
.metodo__marca { position: relative; grid-row: 1 / span 3; background: var(--creme); padding-block: var(--e-1); }
.cubo--passo { width: 72px; height: auto; overflow: visible; }   /* no hover a camada de cima sobe além do quadro do SVG */
.metodo__ok {
  position: absolute; top: 0; right: -6px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--verde); border: var(--traco) solid var(--tinta); color: var(--tinta);
}
.metodo__ok .icone { width: 16px; height: 16px; stroke-width: 3; }
.metodo__num {
  font-size: var(--fs-num); font-weight: 900; line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 2px var(--tinta);
}
.metodo__titulo { margin-top: var(--e-2); font-size: var(--fs-h3); font-weight: 900; line-height: 1.2; }
.metodo__texto { margin-top: var(--e-1); color: var(--tinta-2); }
@media (min-width: 640px) {
  .metodo__passos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); row-gap: var(--e-7); }
  .metodo__passos::before { display: none; }
  .metodo__passo { grid-template-rows: none; align-content: start; }
}
@media (min-width: 960px) {
  .metodo__passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metodo__passos::before {
    display: block; top: 72px; bottom: auto; left: var(--e-6); right: 25%; width: auto; height: var(--traco);
    background-image: repeating-linear-gradient(to right, var(--tinta) 0 var(--traco-trace), transparent var(--traco-trace) var(--traco-ciclo));
    animation-name: tracejado-anda;
  }
  .metodo__passo { grid-template-columns: 1fr; }
  .metodo__marca { grid-row: auto; justify-self: start; padding-inline: var(--e-3); margin-left: calc(-1 * var(--e-3)); margin-bottom: var(--e-4); }
  .cubo--passo { width: 104px; }
  .metodo__ok { width: 34px; height: 34px; right: 0; }
  .metodo__ok .icone { width: 18px; height: 18px; }
}

/* ---------- serviços ---------- */
.servicos__grade { display: grid; gap: var(--e-4); }
.servicos__card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--e-4); align-items: start;
  padding: var(--e-5);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva);
}
.servicos__card:hover { transform: translate(-4px, -4px); box-shadow: var(--sombra-m); }
.servicos__icone {
  display: grid; place-items: center; width: 56px; height: 56px; grid-row: 1 / span 2;
  border: var(--traco) solid var(--tinta); border-radius: var(--r-m); color: var(--branco);
}
.servicos__icone .icone { width: 28px; height: 28px; }
.servicos__card--azul .servicos__icone { background: var(--azul); }
.servicos__card--verde .servicos__icone { background: var(--verde-escuro); }
.servicos__card--vermelho .servicos__icone { background: var(--vermelho); }
.servicos__titulo { font-size: var(--fs-h3); font-weight: 900; line-height: 1.2; }
.servicos__texto { margin-top: var(--e-1); color: var(--tinta-2); }
@media (min-width: 640px) {
  .servicos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); }
  .servicos__card { display: block; padding: var(--e-6); }
  .servicos__icone { margin-bottom: var(--e-5); }
  .servicos__texto { margin-top: var(--e-2); }
}
@media (min-width: 960px) {
  .servicos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); }
}

/* ---------- depoimentos ---------- */
.depoimentos .titulo-secao { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-5); }
.depoimentos__controles { display: none; gap: var(--e-3); }
.js .depoimentos__controles { display: flex; }
.depoimentos__seta {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--branco); border: var(--traco) solid var(--tinta); cursor: pointer;
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva);
}
.depoimentos__seta:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-p); }
.depoimentos__pausa .icone--continuar,
.depoimentos__pausa[aria-pressed="true"] .icone--pausar { display: none; }
.depoimentos__pausa[aria-pressed="true"] .icone--continuar { display: block; }
.depoimentos__trilho {
  --recuo: max(var(--gutter), calc((100% - var(--largura)) / 2 + var(--gutter)));
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--recuo);
  padding: var(--e-1) var(--recuo) var(--e-5);
  scrollbar-width: thin; scrollbar-color: var(--tinta) transparent;
}
/* Duas linhas compartilhadas por todos os cartões (texto em cima, autor embaixo): com subgrid
   a linha divisória e o autor ficam na mesma altura em toda a faixa. */
.depoimentos__faixa {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 400px);
  grid-template-rows: 1fr auto; gap: var(--e-5);
  width: max-content;
}
/* com JS (site.js): a faixa passa sozinha e sem fim, movida por transform */
.depoimentos__trilho--auto {
  overflow: hidden; overflow: clip; scroll-snap-type: none; touch-action: pan-y;
  padding-bottom: var(--e-1);
}
.depoimentos__trilho--auto .depoimentos__faixa { will-change: transform; }
.depoimentos__card {
  position: relative; overflow: hidden;
  grid-row: span 2;
  display: grid; grid-template-rows: 1fr auto; row-gap: var(--e-4);
  padding: var(--e-6) var(--e-5) var(--e-5);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  scroll-snap-align: start;
}
@supports (grid-template-rows: subgrid) {
  .depoimentos__card { grid-template-rows: subgrid; }
}
.depoimentos__face {
  position: absolute; top: 0; right: 0; width: 72px; height: 72px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: var(--traco) solid var(--tinta);
}
.depoimentos__card--azul .depoimentos__face { background: var(--azul); }
.depoimentos__card--verde .depoimentos__face { background: var(--verde-escuro); }
.depoimentos__card--vermelho .depoimentos__face { background: var(--vermelho); }
.depoimentos__corpo { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.depoimentos__aspas {
  display: block; height: 0.5em; margin-bottom: var(--e-2);
  font-size: var(--fs-aspas); font-weight: 1000; line-height: 1; color: var(--azul);
}
.depoimentos__texto { font-size: var(--fs-base); overflow-wrap: anywhere; }
.js .depoimentos__texto--longo p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden;
}
.js .depoimentos__texto--aberto p { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.depoimentos__mais {
  display: none; align-self: start; padding: 0; background: none; border: 0; cursor: pointer;
  font-weight: 800; font-size: var(--fs-pequena); color: var(--azul);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.js .depoimentos__mais { display: inline-block; }
/* autor à esquerda, redes à direita na mesma linha (descem alinhadas à direita se não couberem) */
.depoimentos__pe {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-3);
  min-width: 0; padding-top: var(--e-4); border-top: var(--traco-fino) solid var(--tinta-linha);
}
.depoimentos__inicial {
  display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px;
  border: var(--traco) solid var(--tinta); border-radius: var(--r-p);
  color: var(--branco); font-weight: 900; font-size: var(--fs-grande);
}
.depoimentos__card--azul .depoimentos__inicial { background: var(--azul); }
.depoimentos__card--verde .depoimentos__inicial { background: var(--verde-escuro); }
.depoimentos__card--vermelho .depoimentos__inicial { background: var(--vermelho); }
.depoimentos__quem { flex: 1 1 150px; display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.depoimentos__nome { font-weight: 900; overflow-wrap: anywhere; }
.depoimentos__empresa { font-size: var(--fs-pequena); color: var(--tinta-2); }
.depoimentos__servico { margin-top: var(--e-1); font-size: var(--fs-mini); font-weight: 800; color: var(--azul); text-transform: uppercase; letter-spacing: 0.06em; }
.depoimentos__redes { display: flex; gap: var(--e-2); margin-left: auto; }
.depoimentos__redes a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: var(--traco) solid var(--tinta);
  transition: background-color var(--d-rapida), color var(--d-rapida);
}
.depoimentos__redes a:hover { background: var(--tinta); color: var(--branco); }
.depoimentos__redes .icone { width: 18px; height: 18px; }
.depoimentos__rodape { margin-top: var(--e-5); }

/* ---------- logos ---------- */
.logos__grupo { padding-block: var(--e-6); border-top: var(--traco) solid var(--tinta); }
.logos__grupo:last-child { padding-bottom: 0; }
.logos__rotulo {
  display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-5);
  font-size: var(--fs-h3); font-weight: 900;
}
.logos__marca { width: 14px; height: 14px; transform: rotate(45deg); border: var(--traco) solid var(--tinta); }
.logos__grupo--azul .logos__marca { background: var(--azul); }
.logos__grupo--verde .logos__marca { background: var(--verde-escuro); }
.logos__grupo--vermelho .logos__marca { background: var(--vermelho); }
.logos__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.logos__card {
  display: grid; place-items: center; aspect-ratio: 1; padding: var(--e-2);
  background: var(--branco); border: var(--traco-fino) solid var(--tinta-linha); border-radius: var(--r-m);
  transition: transform var(--d-rapida) var(--curva), box-shadow var(--d-rapida) var(--curva), border-color var(--d-rapida);
}
a.logos__card:hover { border-color: var(--tinta); transform: translate(-3px, -3px); box-shadow: var(--sombra-p); }
.logos__card img { width: 100%; max-width: 150px; }
@media (min-width: 640px) {
  .logos__grade { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-3); }
}
@media (min-width: 960px) {
  .logos__grupo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--e-6); align-items: start; }
  .logos__rotulo { margin-bottom: 0; padding-top: var(--e-3); }
  .logos__grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Qlik ---------- */
.qlik .titulo-secao__h2 { color: var(--branco); }
.qlik__topo { display: grid; gap: var(--e-7); align-items: center; }
.qlik__texto { margin-top: var(--e-4); font-size: var(--fs-grande); color: var(--claro-1); max-width: 36rem; }
.qlik__recursos { display: grid; gap: var(--e-3); margin-top: var(--e-6); }
.qlik__recursos li { display: flex; align-items: center; gap: var(--e-3); font-weight: 700; }
.qlik__recursos .icone {
  width: 24px; height: 24px; padding: 4px; border-radius: 50%;
  background: var(--verde); color: var(--tinta); stroke-width: 3;
}
.qlik__quadro {
  padding: var(--e-2); background: var(--branco); overflow: hidden;
  border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  box-shadow: var(--sombra-quadro);
}
/* a foto tem margem branca: amplia a partir do canto do logo, para o "Qlik" não ser cortado */
.qlik__quadro img { width: 100%; transform: scale(var(--qlik-zoom)); transform-origin: 8% 18%; }
.qlik__subtitulo { margin-top: var(--e-8); margin-bottom: var(--e-5); font-size: var(--fs-h3); font-weight: 900; }
.qlik__mercado { display: grid; gap: var(--e-4); }
.qlik__card {
  padding: var(--e-5) var(--e-5) var(--e-6);
  background: var(--claro-fundo); border: var(--traco-fino) solid var(--claro-linha); border-radius: var(--r-g);
  border-top: var(--traco-g) solid var(--azul-claro);
  color: var(--claro-1);
}
.qlik__card--verde { border-top-color: var(--verde); }
.qlik__card--vermelho { border-top-color: var(--vermelho-claro); }
.qlik__fonte { display: block; margin-bottom: var(--e-2); font-size: var(--fs-destaque); font-weight: 900; color: var(--branco); line-height: 1.2; }
@media (min-width: 640px) {
  .qlik__recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); }
}
@media (min-width: 960px) {
  .qlik__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-7); }
  .qlik__mercado { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
}

/* ---------- academia ---------- */
.academia__grade { display: grid; gap: var(--e-5); }
.academia__card {
  display: flex; flex-direction: column;
  padding: var(--e-5) var(--e-5) var(--e-4);
  background: var(--branco); border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  transition: box-shadow var(--d-rapida) var(--curva), transform var(--d-rapida) var(--curva);
}
.academia__card:hover { transform: translate(-3px, -3px); box-shadow: var(--sombra-m); }
.academia__nivel {
  display: block; font-size: var(--fs-nivel); font-weight: 1000; line-height: 0.9; letter-spacing: -0.05em;
}
.academia__card--azul .academia__nivel { color: var(--azul); }
.academia__card--verde .academia__nivel { color: var(--verde-escuro); }
.academia__card--vermelho .academia__nivel { color: var(--vermelho); }
.academia__card--marinho .academia__nivel { color: var(--marinho); }
.academia__titulo { margin-top: var(--e-4); font-size: var(--fs-h4); font-weight: 900; line-height: 1.2; }
.academia__resumo { margin-top: var(--e-2); color: var(--tinta-2); font-size: var(--fs-pequena); }
.academia__resumo { margin-bottom: var(--e-4); }
.academia__card > .academia__topicos { margin-bottom: var(--e-5); font-size: var(--fs-pequena); color: var(--tinta-2); }
.academia__topicos { display: grid; gap: var(--e-1); }
.academia__topicos li { position: relative; padding-left: var(--e-4); line-height: 1.45; }
.academia__topicos li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px;
  transform: rotate(45deg); background: var(--azul);
}
.academia__botao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  margin-top: auto; padding-top: var(--e-3);
  border-top: var(--traco) dashed var(--tinta-linha);
  font-weight: 800; font-size: var(--fs-pequena); text-decoration: none;
}
.academia__botao .icone {
  width: 30px; height: 30px; padding: 5px; flex-shrink: 0;
  border: var(--traco) solid var(--tinta); border-radius: 50%;
  transition: transform var(--d-rapida) var(--curva), background-color var(--d-rapida), color var(--d-rapida);
}
.academia__botao:hover .icone { transform: translateX(3px); background: var(--tinta); color: var(--branco); }


@media (min-width: 640px) {
  .academia__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .academia__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- quem somos ---------- */
.sobre__h3 { margin-bottom: var(--e-5); font-size: var(--fs-mini); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }

/* trajetória horizontal: no celular vira faixa rolável com encaixe; a partir de 960 px, seis colunas */
.linha {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 280px); gap: var(--e-5);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-bottom: var(--e-4);
  scrollbar-width: thin; scrollbar-color: var(--tinta) transparent;
}
.linha__item { position: relative; padding-top: var(--e-7); scroll-snap-align: start; }
/* trecho da linha que liga um marco ao próximo (atravessa o espaço entre colunas) */
.linha__item::after {
  content: ""; position: absolute; left: 0; right: calc(-1 * var(--e-5)); top: 10px; height: 4px;
  /* camada 1: brilho nas cores do cubo (anima); camada 2: a linha de 2 px */
  background:
    linear-gradient(90deg, transparent 0 38%, var(--azul-claro) 44%, var(--verde) 50%, var(--vermelho-claro) 56%, transparent 62% 100%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) 0 50% / 100% var(--traco) no-repeat;
}
.linha__item:last-child::after {
  right: 0;
  background: repeating-linear-gradient(to right, var(--tinta) 0 var(--traco-trace), transparent var(--traco-trace) var(--traco-ciclo)) 0 50% / 100% var(--traco) no-repeat;
}
.linha__item:nth-child(1) { --pulso: 0s; }
.linha__item:nth-child(2) { --pulso: 0.8s; }
.linha__item:nth-child(3) { --pulso: 1.6s; }
.linha__item:nth-child(4) { --pulso: 2.4s; }
.linha__item:nth-child(5) { --pulso: 3.2s; }
.linha__item:nth-child(6) { --pulso: 4s; }
@media (prefers-reduced-motion: no-preference) {
  .linha__item::after { animation: linha-pulso var(--d-pulso) linear var(--pulso) infinite; }
  .linha__item:last-child::after { animation: tracejado-anda var(--d-tracejado) linear infinite; }
  .linha__item::before { animation: marco-pulso var(--d-pulso) ease-out var(--pulso) infinite; }
}
/* o brilho atravessa o trecho no primeiro terço do ciclo e some; os atrasos encadeiam os trechos */
@keyframes linha-pulso {
  0% { background-position: 100% 0, 0 50%; }
  30%, 100% { background-position: 0% 0, 0 50%; }
}
@keyframes marco-pulso {
  0%, 100% { transform: rotate(45deg) scale(1); }
  6% { transform: rotate(45deg) scale(1.35); }
  14% { transform: rotate(45deg) scale(1); }
}
.linha__item::before {
  content: ""; position: absolute; left: 2px; top: 4px; z-index: 1; width: 16px; height: 16px;
  transform: rotate(45deg); border: var(--traco) solid var(--tinta); background: var(--azul);
}
.linha__item--verde::before { background: var(--verde-escuro); }
.linha__item--vermelho::before { background: var(--vermelho); }
.linha__ano { display: block; font-size: var(--fs-ano); font-weight: 1000; line-height: 1; letter-spacing: -0.03em; }
.linha__item--azul .linha__ano { color: var(--azul); }
.linha__item--verde .linha__ano { color: var(--verde-escuro); }
.linha__item--vermelho .linha__ano { color: var(--vermelho); }
.linha__texto { margin-top: var(--e-2); color: var(--tinta-2); font-size: var(--fs-pequena); }
.sobre__mvv { display: grid; gap: var(--e-4); margin-top: var(--e-8); }
.sobre__bloco {
  padding: var(--e-6) var(--e-5);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  color: var(--branco);
}
.sobre__bloco--azul { background: var(--azul); }
.sobre__bloco--verde { background: var(--verde-escuro); }
.sobre__bloco--vermelho { background: var(--vermelho); }
.sobre__bloco-titulo { margin-bottom: var(--e-3); font-size: var(--fs-bloco); font-weight: 900; line-height: 1.1; }
@media (min-width: 640px) {
  .linha { grid-auto-columns: min(44%, 280px); }
}
@media (min-width: 960px) {
  .linha {
    grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible; padding-bottom: 0;
  }
  .sobre__mvv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
  .sobre__bloco { padding: var(--e-6); }
}

/* ---------- compliance ---------- */
.compliance { padding-top: 0; }
.compliance__faixa {
  display: grid; gap: var(--e-6);
  padding: var(--e-6) var(--e-5);
  background: var(--creme); border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
}
.compliance__texto { margin-top: var(--e-4); color: var(--tinta-2); max-width: 34rem; }
.compliance__lista { display: grid; gap: var(--e-3); align-content: start; }
.compliance__lista li {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3) var(--e-4); background: var(--branco); border: var(--traco-fino) solid var(--tinta-linha); border-radius: var(--r-m);
  font-weight: 700; line-height: 1.4;
}
.compliance__check {
  display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; margin-top: -1px;
  border-radius: 50%; background: var(--verde); border: var(--traco) solid var(--tinta); color: var(--tinta);
}
.compliance__check .icone { width: 14px; height: 14px; stroke-width: 3.5; }
.compliance__canal {
  display: grid; gap: var(--e-4); justify-items: start;
  padding-top: var(--e-6); border-top: var(--traco) dashed var(--tinta);
  font-weight: 700;
}
.compliance__escudo {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--vermelho); color: var(--branco); border: var(--traco) solid var(--tinta);
}
.compliance__escudo .icone { width: 26px; height: 26px; }
@media (min-width: 640px) {
  .compliance__faixa { padding: var(--e-7) var(--e-6); }
}
@media (min-width: 960px) {
  .compliance__faixa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e-7); padding: var(--e-8) var(--e-7) var(--e-7); }
  .compliance__canal {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-5);
  }
}

/* ---------- contato ---------- */
.contato { position: relative; overflow: hidden; background: var(--azul); color: var(--branco); }
.contato::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grade-iso-clara);
  -webkit-mask-image: linear-gradient(to bottom right, var(--tinta), transparent 70%);
  mask-image: linear-gradient(to bottom right, var(--tinta), transparent 70%);
  pointer-events: none;
}
.contato__grade { position: relative; display: grid; gap: var(--e-7); }
.contato .titulo-secao__h2 { color: var(--branco); }
.contato__texto { margin-top: var(--e-4); font-size: var(--fs-grande); color: var(--claro-1); max-width: 30rem; }
.contato__dados { display: grid; gap: var(--e-4); margin-top: var(--e-6); }
.contato__dados li { display: flex; gap: var(--e-4); align-items: center; line-height: 1.4; font-weight: 700; }
.contato__dados small {
  display: block; font-size: var(--fs-mini); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--claro-2);
}
.contato__dados a { text-decoration: none; overflow-wrap: anywhere; }
.contato__dados a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contato__icone {
  display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px;
  background: var(--branco); color: var(--azul);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-m);
}
.contato__form {
  display: grid; gap: var(--e-4);
  padding: var(--e-5); background: var(--branco); color: var(--tinta);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  box-shadow: var(--sombra-g);
}
.contato__dupla { display: grid; gap: var(--e-4); }
.contato__enviar { width: 100%; margin-top: var(--e-2); }
@media (min-width: 640px) {
  .contato__form { padding: var(--e-6); }
  .contato__dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contato__enviar { width: auto; justify-self: start; }
}
@media (min-width: 960px) {
  .contato__grade { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e-8); align-items: start; }
  .contato__form { padding: var(--e-7) var(--e-6); }
}


/* ---------- segurança: etiqueta do produto que já funciona assim ---------- */
.camada__exemplo {
  display: inline-block; margin-top: var(--e-2); padding: 2px var(--e-3);
  border: var(--traco-fino) solid var(--claro-linha); border-radius: var(--r-pilula);
  font-size: var(--fs-micro-2); font-weight: 800; letter-spacing: 0.04em; color: var(--ciano);
}

/* ---------- contato: fundo em movimento ---------- */
.contato__cubos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.contato__cubo { position: absolute; height: auto; opacity: 0.22; }
.contato__cubo--1 { width: 120px; right: 6%; top: 10%; }
.contato__cubo--2 { width: 64px; right: 32%; bottom: 8%; }
.contato__cubo--3 { width: 90px; left: -20px; bottom: 18%; }
.contato__cubo--4 { width: 44px; left: 38%; top: 6%; }
@media (prefers-reduced-motion: no-preference) {
  .contato::before { animation: grade-desliza var(--d-grade) linear infinite reverse; }
  .contato__cubo { animation: cubo-deriva 11s ease-in-out infinite alternate; }
  .contato__cubo--2 { animation-duration: 8s; animation-delay: -3s; }
  .contato__cubo--3 { animation-duration: 13s; animation-delay: -6s; }
  .contato__cubo--4 { animation-duration: 9s; animation-delay: -2s; }
}
@keyframes cubo-deriva {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--deriva-x), var(--deriva-y)); }
}

/* ---------- entradas animadas (método e trajetória) ----------
   Só com JS e sem prefers-reduced-motion; o c.js põe .revelado quando a lista entra na tela. */
.metodo__passo:nth-child(1), .linha__item:nth-child(1) { --atraso: 0ms; }
.metodo__passo:nth-child(2), .linha__item:nth-child(2) { --atraso: 180ms; }
.metodo__passo:nth-child(3), .linha__item:nth-child(3) { --atraso: 360ms; }
.metodo__passo:nth-child(4), .linha__item:nth-child(4) { --atraso: 540ms; }
.linha__item:nth-child(5) { --atraso: 720ms; }
.linha__item:nth-child(6) { --atraso: 900ms; }
/* no hover, as camadas do cubo do passo se afastam um pouco */
.metodo__passo:hover .cubo--passo .cubo__camada--azul { transform: translateY(-14px); }
.metodo__passo:hover .cubo--passo .cubo__camada--verde { transform: translateY(-7px); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-revelar] > li {
    opacity: 0; transform: translateY(28px);
    transition: opacity var(--d-revela) var(--curva) var(--atraso), transform var(--d-revela) var(--curva) var(--atraso);
  }
  .js [data-revelar].revelado > li { opacity: 1; transform: none; }

  /* cubos do método: cada camada cai no lugar, uma depois da outra */
  .js .metodo__passos[data-revelar] .cubo--passo .cubo__camada {
    opacity: 0; transform: translateY(-60px);
    transition: opacity 500ms var(--curva), transform 700ms cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  .js .metodo__passos[data-revelar] .cubo__camada--vermelho { transition-delay: calc(var(--atraso) + 250ms); }
  .js .metodo__passos[data-revelar] .cubo__camada--verde { transition-delay: calc(var(--atraso) + 450ms); }
  .js .metodo__passos[data-revelar] .cubo__camada--azul { transition-delay: calc(var(--atraso) + 650ms); }
  .js .metodo__passos[data-revelar].revelado .cubo--passo .cubo__camada { opacity: 1; transform: none; }
  .js .metodo__passos[data-revelar].revelado .metodo__passo:hover .cubo__camada--azul { transform: translateY(-14px); transition-delay: 0ms; }
  .js .metodo__passos[data-revelar].revelado .metodo__passo:hover .cubo__camada--verde { transform: translateY(-7px); transition-delay: 0ms; }

  /* a linha pontilhada que liga os passos se desenha da esquerda para a direita */
  .js .metodo__passos[data-revelar]::before { transform: scaleY(0); transform-origin: top; transition: transform 1400ms var(--curva) 200ms; }
  @media (min-width: 960px) {
    .js .metodo__passos[data-revelar]::before { transform: scaleX(0); transform-origin: left; }
  }
  .js .metodo__passos[data-revelar].revelado::before { transform: none; }

  /* o check do último passo aparece por último */
  .js .metodo__passos[data-revelar] .metodo__ok { transform: scale(0); transition: transform 400ms cubic-bezier(0.3, 1.6, 0.5, 1) 1500ms; }
  .js .metodo__passos[data-revelar].revelado .metodo__ok { transform: none; }
}