/* DIGAAM · folha de estilo única. Sem framework, sem build. */

/* ---------- fonte hospedada no próprio domínio ---------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------- variáveis ---------- */
:root {
  /* escuro, o mesmo fundo em que a marca foi desenhada */
  --breu: #07090d;
  --noite: #0e1116;
  --noite-2: #131720;
  --linha: #1c222c;
  --linha-2: #28303c;
  --claro: #f3f0ea;      /* branco quente */
  --suave: #a7a49e;      /* texto secundário, quente */
  --suave-2: #8c8880;

  /* papel quente, onde o site respira */
  --papel: #f7f3ec;
  --papel-2: #efe9df;
  --tinta: #14161a;
  --tinta-2: #5c5b57;
  --linha-papel: #e0d8ca;

  /* as três partes da marca */
  --azul: #3f8cff;
  --verde: #2eb68f;
  --ciano: #67d8ff;
  --azul-tinta: #1f5fc0;   /* versões escuras, para texto em papel */
  --verde-tinta: #1e7a5e;

  --r: 20px;
  --r-sm: 14px;
  --maxw: 1120px;
  --gut: clamp(20px, 5vw, 48px);
  --sp: clamp(76px, 11vw, 132px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--breu);
  color: var(--claro);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration-color: var(--linha-2); text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--azul); }

:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--claro);
  color: var(--breu);
  padding: 12px 18px;
  z-index: 100;
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- a régua de três cores, o motivo que se repete ---------- */
.tres {
  display: flex;
  gap: 5px;
  width: 76px;
}
.tres i { height: 4px; flex: 1; border-radius: 99px; display: block; }
.tres i:nth-child(1) { background: var(--azul); }
.tres i:nth-child(2) { background: var(--verde); }
.tres i:nth-child(3) { background: var(--ciano); }
/* a régua cresce da esquerda para a direita, um traço de cada vez, quando a
   seção aparece. No herói ela cresce assim que a página abre. */
.js .rev .tres i,
.js .heroi .tres i { transform: scaleX(0); transform-origin: left center; }
.js .rev.vis .tres i,
.js .heroi .tres i { animation: cresce 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.js .rev.vis .tres i:nth-child(1), .js .heroi .tres i:nth-child(1) { animation-delay: 0.1s; }
.js .rev.vis .tres i:nth-child(2), .js .heroi .tres i:nth-child(2) { animation-delay: 0.26s; }
.js .rev.vis .tres i:nth-child(3), .js .heroi .tres i:nth-child(3) { animation-delay: 0.42s; }
@keyframes cresce { to { transform: none; } }

/* ---------- a barra de avanço: três traços que enchem conforme a página rola ---------- */
.avanco {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  display: flex;
  gap: 4px;
  z-index: 60;
  pointer-events: none;
}
.avanco i { flex: 1; display: block; transform: scaleX(0); transform-origin: left center; }
.avanco i:nth-child(1) { background: var(--azul); }
.avanco i:nth-child(2) { background: var(--verde); }
.avanco i:nth-child(3) { background: var(--ciano); }

/* ---------- marca ---------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.marca__simbolo { width: 32px; height: 32px; flex: none; }
.marca__texto {
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: 0.19em;
  text-indent: 0.19em;
  line-height: 1;
}

/* ---------- topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--breu);
  border-bottom: 1px solid var(--linha);
}
.topo__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
}
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); }
.nav a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--suave);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--claro); }
.nav__email { display: none; }
@media (min-width: 900px) { .nav__email { display: inline; } }
@media (max-width: 560px) {
  .nav .nav__item { display: none; }
  .nav .nav__item--keep { display: inline; }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.14s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primario { background: var(--azul); color: #07090d; }
.btn--primario:hover { background: #5c9dff; }
.btn--fantasma { border-color: var(--linha-2); color: var(--claro); }
.btn--fantasma:hover { border-color: var(--suave-2); background: var(--noite); }
.btn--papel { background: var(--tinta); color: var(--papel); }
.btn--papel:hover { background: #2a2d33; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ---------- herói ---------- */
.heroi {
  padding-block: clamp(56px, 9vw, 104px) clamp(56px, 9vw, 100px);
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .heroi { grid-template-columns: 1.25fr 0.75fr; } }
.heroi__marca { display: grid; place-items: center; }
.heroi__marca svg { width: clamp(190px, 26vw, 280px); height: auto; }
.selo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--suave);
  margin-bottom: 26px;
}
.heroi h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.35rem);
  max-width: 18ch;
}
.heroi__lead {
  margin-top: 24px;
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.18rem);
  color: var(--suave);
}
.heroi__acoes { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/* a marca se monta em três tempos, só quando há javascript: a haste chega pela
   esquerda, os dois arcos entram pela direita e encaixam. Unidades em px dentro
   do SVG valem como unidades do viewBox. */
.js .monta > * { opacity: 0; transform-box: fill-box; transform-origin: center; }
.js .monta > *:nth-child(1) { transform: translateX(-7px); }
.js .monta > *:nth-child(2) { transform: translate(6px, -5px) rotate(10deg); }
.js .monta > *:nth-child(3) { transform: translate(6px, 5px) rotate(-10deg); }
.js .monta.vis > *:nth-child(1) { animation: chega 0.75s 0.05s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.js .monta.vis > *:nth-child(2) { animation: chega 0.75s 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.js .monta.vis > *:nth-child(3) { animation: chega 0.75s 0.54s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes chega { to { opacity: 1; transform: none; } }

/* ---------- a faixa das seis palavras, correndo devagar ---------- */
.faixa {
  overflow: hidden;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.faixa__trilho { display: flex; width: max-content; animation: corre 44s linear infinite; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
.faixa__grupo {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  white-space: nowrap;
}
.faixa b {
  font-size: clamp(1.15rem, 2.3vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--claro);
}
.faixa i { font-style: normal; font-weight: 800; color: var(--suave-2); }
.faixa__regua { display: block; width: 36px; height: 4px; border-radius: 99px; }
.faixa__regua--verde { background: var(--verde); }
.faixa__regua--ciano { background: var(--ciano); }
.faixa__regua--azul { background: var(--azul); }
@keyframes corre { to { transform: translateX(-50%); } }


/* ---------- o palco: a marca solta, que gira de D para arco ao rolar ----------
   Em tela larga e com JavaScript, a marca do herói sai do fluxo, fica parada na
   tela e vai girando 90 graus enquanto a página rola até "Como trabalhamos",
   onde pousa como arco, com AM na base, ao lado do título. Depois desce junto
   com o título. Sem JavaScript, em tela estreita ou com movimento reduzido, a
   marca fica no herói como sempre. */
.palco { position: relative; }
.palco__marca { display: none; }
.secao.palco__pouso { padding-bottom: 0; }
.secao.secao--continua { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) {
  .js .palco__marca {
    display: block;
    position: sticky;
    top: 74px;
    height: 520px;
    pointer-events: none;
    z-index: 5;
  }
  /* o herói sobe por cima do espaço da caixa fixa; a caixa precisa ter altura
     real (sem margem negativa) para o sticky soltar no fim do palco */
  .js .palco .heroi { margin-top: -520px; }
  .palco__trilho { position: relative; height: 100%; }
  .palco__giro { position: absolute; right: 5%; top: 176px; width: 280px; height: 280px; }
  .palco__roda {
    width: 100%; height: 100%;
    transform: rotate(calc(var(--p, 0) * -90deg));
    will-change: transform;
  }
  .palco__roda svg { width: 100%; height: 100%; }
  .palco__par {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    opacity: calc((var(--p, 0) - 0.72) * 3.6);
    transform: translateY(calc((1 - var(--p, 0)) * 10px));
  }
  .palco__par--di { left: 26px; top: 14px; color: var(--verde); }
  .palco__par--ga { right: 26px; top: 14px; color: var(--ciano); }
  .palco__par--am { left: 50%; top: 238px; transform: translateX(-50%); color: var(--azul); }
  .js .heroi__marca--fluxo { visibility: hidden; }
  .palco__pouso .secao__cabeca { max-width: min(60ch, calc(100% - 360px)); }

  /* quando pousa, acende: halo atrás nas três cores, luz de contorno em cada
     parte e brilho nas letras. Tudo com transição, para parecer que liga. */
  .palco__giro::before {
    content: "";
    position: absolute;
    inset: -140px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.9s ease;
    /* sem filter: o degradê já nasce macio, e assim não há camada de blur
       deixando borda visível sobre o fundo escuro */
    background:
      radial-gradient(circle at 30% 40%, rgba(46, 182, 143, 0.55), rgba(46, 182, 143, 0) 32%),
      radial-gradient(circle at 70% 40%, rgba(103, 216, 255, 0.5), rgba(103, 216, 255, 0) 32%),
      radial-gradient(circle at 50% 66%, rgba(63, 140, 255, 0.6), rgba(63, 140, 255, 0) 34%);
  }
  .palco__giro.pousou::before { opacity: 0.75; }
  .palco__roda svg path { transition: filter 0.9s ease; }
  .palco__roda svg path:nth-child(1) { color: var(--azul); }
  .palco__roda svg path:nth-child(2) { color: var(--verde); }
  .palco__roda svg path:nth-child(3) { color: var(--ciano); }
  .palco__giro.pousou .palco__roda svg path { filter: drop-shadow(0 0 2.4px currentColor); }
  .palco__par { transition: opacity 0.4s ease, transform 0.4s ease, text-shadow 0.9s ease; }
  .palco__giro.pousou .palco__par { text-shadow: 0 0 14px currentColor, 0 0 34px currentColor; }
}

/* ---------- seções ---------- */
.secao { padding-block: var(--sp); border-top: 1px solid var(--linha); }
.secao__cabeca { max-width: 60ch; margin-bottom: clamp(38px, 5vw, 58px); }
.secao__rotulo {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--suave-2);
  margin: 16px 0 18px;
}
.secao h2 { font-size: clamp(1.6rem, 3.3vw, 2.3rem); }
.secao__intro { margin-top: 18px; color: var(--suave); }

/* ---------- grade de cartões ---------- */
.grade { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grade { grid-template-columns: repeat(4, 1fr); } }
.cartao {
  background: var(--noite);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  padding: clamp(22px, 2.6vw, 28px);
}
/* cartões, princípios e produtos sobem um pouco ao passar o mouse, e entram
   um depois do outro, não todos de uma vez */
.cartao, .principio, .produto { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease; }
.js .cartao.rev.vis:hover, .js .principio.rev.vis:hover, .js .produto.rev.vis:hover,
.cartao:hover, .principio:hover, .produto:hover { transform: translateY(-4px); border-color: var(--linha-2); }
.js .grade .rev:nth-child(2), .js .principios .rev:nth-child(2), .js .produtos-lista .rev:nth-child(2) { transition-delay: 0.1s; }
.js .grade .rev:nth-child(3), .js .principios .rev:nth-child(3) { transition-delay: 0.2s; }
.js .grade .rev:nth-child(4) { transition-delay: 0.3s; }
.cartao h3 { font-size: 1.1rem; letter-spacing: -0.015em; }
.cartao p { margin-top: 12px; color: var(--suave); font-size: 0.9688rem; }
.cartao__ponto {
  width: 10px; height: 10px; border-radius: 99px;
  background: var(--azul); margin-bottom: 18px;
}
.cartao:nth-child(2) .cartao__ponto { background: var(--verde); }
.cartao:nth-child(3) .cartao__ponto { background: var(--ciano); }
.cartao:nth-child(4) .cartao__ponto { background: var(--suave-2); }
@media (min-width: 1040px) { .cartao h3 { min-height: 2.24em; } }

/* ---------- produto ---------- */
.produtos-lista { display: grid; gap: 14px; }
.produto {
  background: var(--noite);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  padding: clamp(26px, 3.6vw, 44px);
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .produto { grid-template-columns: 1.15fr 1fr; } }
.produto h3 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: 0.02em; }
.produto__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--suave-2);
  margin-bottom: 14px;
}
.produto__tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--verde);
}
.produto--b .produto__tag::before { background: var(--ciano); }
.produto__sub { margin-top: 10px; font-size: 1.1rem; font-weight: 600; }
.produto__corpo { margin-top: 16px; color: var(--suave); }
.produto__corpo p + p { margin-top: 14px; }
.produto__acoes { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.ficha { display: grid; gap: 18px; align-content: start; }
.ficha__item { border-top: 1px solid var(--linha-2); padding-top: 14px; }
.ficha__rotulo {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--suave-2);
  margin-bottom: 7px;
}
.ficha__valor { font-size: 0.9375rem; color: var(--suave); }
.aviso {
  margin-top: 24px;
  border-left: 2px solid var(--azul);
  padding: 4px 0 4px 18px;
  color: var(--claro);
  font-size: 0.9375rem;
  font-weight: 600;
}
.aviso span { display: block; margin-top: 6px; font-weight: 400; color: var(--suave); }

/* ---------- princípios, um por cor ---------- */
.principios { display: grid; gap: 16px 30px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .principios { grid-template-columns: repeat(3, 1fr); } }
.principio { border-top: 3px solid var(--linha-2); padding-top: 22px; }
.principio:nth-child(1) { border-color: var(--verde); }
.principio:nth-child(2) { border-color: var(--ciano); }
.principio:nth-child(3) { border-color: var(--azul); }
.principio__par {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--suave-2);
  margin-bottom: 10px;
}
.principio:nth-child(1) .principio__par { color: var(--verde); }
.principio:nth-child(2) .principio__par { color: var(--ciano); }
.principio:nth-child(3) .principio__par { color: var(--azul); }
.principio h3 { font-size: 1.0625rem; }
.principio p { margin-top: 12px; color: var(--suave); font-size: 0.9688rem; }

/* ---------- a seção de papel, onde o site esquenta ---------- */
.papel {
  background: var(--papel);
  color: var(--tinta);
  border-top: 0;
}
.papel a { color: var(--azul-tinta); }
.papel .tres i:nth-child(1) { background: var(--azul-tinta); }
.papel .tres i:nth-child(2) { background: var(--verde-tinta); }
.papel .tres i:nth-child(3) { background: #1c7b99; }
.papel .secao__rotulo { color: var(--tinta-2); }
.papel .secao__intro,
.papel p { color: var(--tinta-2); }
.nome { display: grid; gap: clamp(34px, 5vw, 64px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .nome { grid-template-columns: 1.05fr 0.95fr; } }
.nome__texto { max-width: 52ch; }
.nome__texto h2 { color: var(--tinta); }
.nome__texto h2 + p { margin-top: 22px; }
.nome__texto p + p { margin-top: 16px; }
.nome__moldura { position: relative; }
.nome__moldura::before {
  content: "";
  position: absolute;
  inset: -26px;
  border-radius: 44px;
  filter: blur(38px);
  opacity: 0.42;
  background:
    radial-gradient(circle at 18% 16%, var(--verde) 0 16%, transparent 44%),
    radial-gradient(circle at 82% 16%, var(--ciano) 0 16%, transparent 44%),
    radial-gradient(circle at 50% 92%, var(--azul) 0 20%, transparent 50%);
}
.nome__marca {
  position: relative;
  z-index: 1;
  background: var(--breu);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 26px;
  padding: clamp(30px, 4vw, 46px) clamp(24px, 3vw, 38px);
  display: grid;
  justify-items: center;
  gap: 26px;
  overflow: hidden;
  isolation: isolate;
}
.nome__marca::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: blur(24px);
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 50%, rgba(46, 182, 143, 0.26), transparent 30%),
    radial-gradient(circle at 72% 50%, rgba(103, 216, 255, 0.26), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(63, 140, 255, 0.32), transparent 32%);
}
.arco__lado b { text-shadow: 0 0 18px currentColor; }
.nome__marca svg { width: 100%; height: auto; }

/* o símbolo deitado: dois arcos em cima, a base embaixo */
.arco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 14px 18px;
  width: 100%;
  max-width: 330px;
}
/* as letras são o protagonista do ladrilho: tipo de exibição, na cor do par */
.arco__lado b {
  display: block;
  font-size: clamp(2.6rem, 7vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
  font-variant-numeric: lining-nums;
}
/* a mesma régua curta do resto do site, na cor do par, amarra letra e palavra */
.arco__lado b::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: currentColor;
  margin-top: 12px;
}
.arco__lado span {
  display: block;
  margin-top: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--suave);
}
.arco__lado--di { text-align: left; }
.arco__lado--di b { color: var(--verde); }
.arco__lado--ga { text-align: right; }
.arco__lado--ga b { color: var(--ciano); }
.arco__lado--ga b::after { margin-left: auto; }
.arco__marca { grid-column: 1 / -1; }
.arco__lado--am {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 2px;
}
.arco__lado--am b { color: var(--azul); }
.arco__lado--am b::after { margin-inline: auto; }

/* as seis palavras, corridas, na seção de papel */
.nome__acrostico {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 22px;
}
/* cada par é uma peça só: assim a quebra de linha nunca larga um ponto sozinho */
.nome__par {
  display: inline-flex;
  white-space: nowrap;
}
.nome__par > span {
  font-size: clamp(1rem, 2.1vw, 1.16rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.nome__par:nth-child(1) > span::first-letter { color: var(--verde-tinta); }
.nome__par:nth-child(2) > span::first-letter { color: #1c7b99; }
.nome__par:nth-child(3) > span::first-letter { color: var(--azul-tinta); }
/* o separador vai no fim, senão ele vira a primeira letra e rouba a cor */
.nome__par > span:not(:last-child)::after {
  content: "·";
  color: #c7bda9;
  margin: 0 10px;
  font-weight: 800;
}


.iniciais {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px 26px;
  justify-content: center;
  align-items: center;
}
.nome__marca { gap: 22px; }
.inicial { display: grid; justify-items: center; gap: 9px; }
.inicial b {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--claro);
}
.inicial i { width: 26px; height: 4px; border-radius: 99px; display: block; }
.inicial:nth-child(1) i { background: var(--azul); }
.inicial:nth-child(2) i { background: var(--verde); }
.inicial:nth-child(3) i { background: var(--ciano); }
.nome__nota {
  font-size: 0.84rem;
  color: var(--suave-2);
  text-align: center;
  max-width: 30ch;
  line-height: 1.5;
}

/* ---------- contato ---------- */
.contato { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 820px) { .contato { grid-template-columns: 1.1fr 1fr; } }
.contato__email {
  display: inline-block;
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--claro);
  text-decoration: none;
  border-bottom: 2px solid var(--azul);
  padding-bottom: 3px;
  word-break: break-word;
}
.contato__email:hover { color: var(--ciano); border-color: var(--ciano); }
.contato__nota { margin-top: 22px; color: var(--suave); max-width: 46ch; }
.dados { display: grid; gap: 16px; align-content: start; }
.dados__item { border-top: 1px solid var(--linha); padding-top: 14px; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); padding-block: clamp(48px, 7vw, 72px) 44px; }
.rodape__topo {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  align-items: flex-start;
}
.rodape__links { display: flex; flex-wrap: wrap; gap: 22px; }
.rodape__links a { font-size: 0.9375rem; font-weight: 600; color: var(--suave); text-decoration: none; }
.rodape__links a:hover { color: var(--claro); }
.rodape__legal {
  margin-top: clamp(34px, 5vw, 52px);
  padding-top: 26px;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--suave);
}
.rodape__legal strong { color: var(--claro); font-weight: 700; }
.rodape__copy { margin-top: 20px; font-size: 0.8125rem; color: var(--suave-2); }

/* ---------- página de texto ---------- */
.texto { padding-block: clamp(56px, 8vw, 88px); max-width: 72ch; }
.texto h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
.texto__meta { margin-top: 18px; color: var(--suave-2); font-size: 0.875rem; }
.texto h2 { font-size: clamp(1.18rem, 2.4vw, 1.42rem); margin-top: clamp(40px, 5vw, 54px); }
.texto h3 { font-size: 1.0625rem; margin-top: 30px; }
.texto p, .texto li { color: var(--suave); }
.texto p { margin-top: 16px; }
.texto ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 9px; }
.texto a { color: var(--claro); font-weight: 600; }
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--suave);
  text-decoration: none;
}
.voltar:hover { color: var(--claro); }

/* ---------- revelação ao rolar ----------
   Sem javascript nada some: a classe .js só existe se o script rodou. */
.js .rev { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
.js .rev.vis { opacity: 1; transform: none; }

/* o ladrilho do arco se monta quando entra na tela: primeiro a base, depois
   cada arco apoia nela, e por fim as letras. A mesma ordem da história. */
.js .arco__marca path { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.5); }
.js .nome__moldura.vis .arco__marca path:nth-child(1) { animation: brota 0.7s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.js .nome__moldura.vis .arco__marca path:nth-child(2) { animation: brota 0.7s 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.js .nome__moldura.vis .arco__marca path:nth-child(3) { animation: brota 0.7s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes brota { to { opacity: 1; transform: none; } }
.js .arco__lado { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.js .nome__moldura.vis .arco__lado { opacity: 1; transform: none; }
.js .nome__moldura.vis .arco__lado--am { transition-delay: 0.45s; }
.js .nome__moldura.vis .arco__lado--di { transition-delay: 0.75s; }
.js .nome__moldura.vis .arco__lado--ga { transition-delay: 0.95s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rev { opacity: 1; transform: none; transition: none; }
  .js .monta > *, .js .arco__marca path, .js .arco__lado { opacity: 1; transform: none; }
  .js .monta.vis > *, .js .nome__moldura.vis .arco__marca path { animation: none; }
  .js .rev .tres i, .js .heroi .tres i { transform: none; animation: none; }
  .faixa__trilho { animation: none; }
  .js .palco__marca { display: none; }
  .js .heroi__marca--fluxo { visibility: visible; }
  .cartao:hover, .principio:hover, .produto:hover { transform: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.mb { margin-bottom: 26px; }