/* Mamute Pro Digital — estilos da página. O motor (scrollcraft.css) dá a base; aqui fica a marca e a composição. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 600 900; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dmsans.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}

:root {
  --verde: #97EC04;
  --verde-claro: #ADF53A;
  --preto: #0A0A09;
  --grafite: #141413;
  --card: #1B1B19;
  --papel: #F2F3EE;
  --texto-claro: #D4D5CD;      /* texto secundário no escuro */
  --texto-suave: #9C9D95;      /* terciário no escuro */
  --texto-escuro-suave: #4C4E46; /* secundário no claro */
  --linha-escura: #262624;
  --linha-clara: rgba(10, 10, 9, 0.14);
  --topo-h: 68px;
  --raio: 24px;

  --sc-canvas: var(--preto);
  --sc-surface: var(--card);
  --sc-ink: #FFFFFF;
  --sc-ink-soft: var(--texto-claro);
  --sc-accent: var(--verde);
  --sc-accent-ink: var(--preto);
  --sc-font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text: "DM Sans", system-ui, sans-serif;
  --sc-shadow-color: 60 8% 2%;
}

html { scroll-padding-top: calc(var(--topo-h) + 12px); }
body { background: var(--preto); color: #FFFFFF; }
.sc-grain { opacity: 0.045; }

/* ------------------------------------------------------------ utilidades -- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--verde); color: var(--preto); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.pular:focus { top: 12px; }

.titulo {
  font-family: var(--sc-font-display);
  font-weight: 850; font-stretch: 82%;
  line-height: 0.95; letter-spacing: -0.025em; word-spacing: 0.06em;
  text-wrap: balance; margin: 0;
}
.titulo--grande { font-size: clamp(2.5rem, 1.3rem + 5vw, 6.4rem); }
.rotulo {
  margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde);
}
.texto-suave { color: var(--texto-claro); margin: 0; max-width: 40ch; }

/* A caixa verde dos posts da Mamute: a palavra-chave ganha um fundo verde e letra preta. */
mark.caixa {
  position: relative; z-index: 0; display: inline-block;
  background: none; color: inherit; white-space: nowrap;
  padding: 0 0.1em; margin: 0 -0.02em;
}
mark.caixa::before {
  content: ""; position: absolute; z-index: -1;
  inset: -0.05em -0.01em 0.02em; background: var(--verde); border-radius: 0.06em;
  transform: scaleX(0); transform-origin: left center;
}
mark.caixa.marcada { color: var(--preto); }
mark.caixa.marcada::before { transform: scaleX(1); }
.intro mark.caixa::before { transition: transform 520ms var(--sc-ease-out); }
.intro mark.caixa { transition: color 200ms ease 160ms; }

.caixa-voo {
  position: fixed; left: 0; top: 0; z-index: 50;
  width: 100px; height: 100px; background: var(--verde); border-radius: 3px;
  transform-origin: 0 0; opacity: 0; pointer-events: none; will-change: transform;
}

/* --------------------------------------------------------------- botões -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.75em 1.35em; border-radius: 999px;
  font: 700 1rem/1 var(--sc-font-text); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--verde { background: var(--verde); color: var(--preto); }
.btn--preto { background: var(--preto); color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) {
  .btn--verde:hover { background: var(--verde-claro); transform: translateY(-2px); }
  .btn--preto:hover { background: #26261F; transform: translateY(-2px); }
}
.btn--grande { min-height: 56px; font-size: 1.05rem; padding: 1em 1.7em; }
.btn--enorme { min-height: 72px; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem); padding: 1.05em 2.2em; }
/* o botão final: a caixa verde pousa nele e vira o próprio botão */
.btn--alvo { background: var(--verde); color: var(--preto); }
.com-movimento .btn--alvo.espera:not(.marcada) { background: transparent; color: var(--verde); border-color: var(--verde); }
@media (hover: hover) and (pointer: fine) { .btn--alvo:hover { background: var(--verde-claro); color: var(--preto); transform: translateY(-2px); } }

/* ---------------------------------------------------------------- topo -- */
.topo { position: fixed; inset: 0 0 auto; z-index: 60; }
.topo__barra {
  height: var(--topo-h); display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem);
  padding-inline: clamp(16px, 3vw, 44px); background: var(--preto); border-bottom: 1px solid var(--linha-escura);
}
.topo__logo { display: block; flex: none; }
.topo__logo img { height: 34px; width: auto; }
.topo__nav { display: flex; gap: clamp(1rem, 2vw, 2.1rem); margin-left: auto; }
.topo__nav a {
  color: var(--texto-claro); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  padding: 0.4rem 0; background: linear-gradient(var(--verde), var(--verde)) left bottom / 0 2px no-repeat;
  transition: color 160ms ease, background-size 220ms var(--sc-ease-out);
}
.topo__nav a:hover, .topo__nav a:focus-visible { color: #FFFFFF; background-size: 100% 2px; }
.topo__cta { flex: none; }
.topo__menu { display: none; }
.topo__progresso[data-sc-progress] { position: absolute; inset: auto 0 -1px 0; height: 2px; }

.menu-celular {
  position: fixed; inset: var(--topo-h) 0 0; z-index: 59; background: var(--preto);
  padding: 2rem clamp(16px, 5vw, 32px) 2.5rem; display: flex; flex-direction: column; justify-content: space-between;
}
.menu-celular[hidden] { display: none; }
.menu-celular nav { display: flex; flex-direction: column; }
.menu-celular nav a {
  font-family: var(--sc-font-display); font-weight: 850; font-stretch: 82%; font-size: clamp(2.2rem, 10vw, 3.2rem);
  line-height: 1.12; letter-spacing: -0.025em; color: #FFFFFF; text-decoration: none; padding: 0.15rem 0;
  border-bottom: 1px solid var(--linha-escura);
}

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: max(100svh, 640px); padding-top: var(--topo-h);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--preto);
}
.hero__fundo { position: absolute; inset: -4% 0 -4% 0; z-index: -3; will-change: transform; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: saturate(0.85); }
/* sombra só onde o texto fica (coluna da esquerda e base dos números) */
.hero__sombra {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,9,0.94) 0%, rgba(10,10,9,0.86) 36%, rgba(10,10,9,0.35) 62%, rgba(10,10,9,0.15) 100%),
    linear-gradient(0deg, rgba(10,10,9,0.9) 0%, rgba(10,10,9,0) 32%);
}
/* a faixa verde inclinada, como as pernas do M da logo */
.hero__faixa {
  position: absolute; z-index: -1; right: 8vw; bottom: 0; width: 27vw; height: 74%;
  background: var(--verde); transform-origin: bottom center; will-change: transform;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.hero__time {
  position: absolute; z-index: 1; right: -2vw; bottom: 0; width: min(56vw, 1060px);
  pointer-events: none; will-change: transform; transform-origin: bottom center;
}
.hero__time img { width: 100%; height: auto; }
.hero__copy {
  position: relative; z-index: 2; max-width: min(62vw, 980px);
  padding: clamp(3rem, 10vh, 7.5rem) var(--sc-gutter) 0;
}
.hero__titulo {
  font-family: var(--sc-font-display); font-weight: 900; font-stretch: 80%;
  font-size: clamp(3.1rem, 0.9rem + 7.2vw, 9.2rem); line-height: 0.9; letter-spacing: -0.03em; word-spacing: 0.07em;
  margin: 0 0 0.32em;
}
.hero__titulo .linha { display: block; overflow: hidden; padding: 0.09em 0.06em 0.06em; margin: -0.09em -0.06em -0.06em; }
.hero__titulo .linha > span { display: inline-block; }
.com-movimento .hero__titulo .linha > span { transform: translateY(108%); animation: subir 900ms var(--sc-ease-out) forwards; }
.com-movimento .hero__titulo .linha:nth-child(2) > span { animation-delay: 90ms; }
.com-movimento .hero__titulo .linha:nth-child(3) > span { animation-delay: 180ms; }
@keyframes subir { to { transform: none; } }
.hero__sub { max-width: 36ch; color: var(--texto-claro); font-size: var(--sc-t-lg); line-height: 1.45; margin: 0 0 2rem; text-wrap: pretty; }
.com-movimento .hero__sub, .com-movimento .hero__copy .btn { opacity: 0; animation: aparecer 700ms var(--sc-ease-out) 420ms forwards; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero__numeros {
  position: relative; z-index: 2; margin: 0; display: flex; gap: clamp(1.5rem, 3.5vw, 3.5rem);
  padding: 2.5rem var(--sc-gutter) clamp(1.75rem, 4vh, 3rem); max-width: min(56vw, 900px);
}
.hero__numeros > div { min-width: 0; }
.hero__numeros dt {
  font-family: var(--sc-font-display); font-weight: 900; font-stretch: 80%;
  font-size: clamp(2.4rem, 1.4rem + 2.6vw, 4rem); line-height: 1; color: var(--verde); letter-spacing: -0.03em;
}
.hero__numeros dd { margin: 0.4rem 0 0; color: var(--texto-claro); font-size: 0.92rem; line-height: 1.35; max-width: 17ch; }

/* ------------------------------------------------------------ clientes -- */
.clientes { background: var(--papel); color: var(--preto); padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
.clientes__titulo {
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 85%;
  font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; max-width: 24ch;
}
.faixa { overflow: hidden; margin-top: 2rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.faixa__trilho { display: flex; gap: 1rem; width: max-content; list-style: none; margin: 0; padding: 0.5rem 0; }
.com-movimento .faixa__trilho { animation: correr 48s linear infinite; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
.faixa li {
  flex: none; width: 210px; height: 118px; background: #FFFFFF; border-radius: 18px;
  display: grid; place-items: center; padding: 14px 24px; box-shadow: var(--sc-e1);
}
.faixa img { max-height: 86px; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: 0.78; transition: filter 240ms ease, opacity 240ms ease; }
.faixa li:hover img { filter: none; opacity: 1; }

/* ------------------------------------------------------------ história -- */
.historia { background: var(--preto); padding: var(--sc-section) 0 clamp(5rem, 9vw, 9rem); }
.historia__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 1.6rem; align-items: end; }
.historia__grade .rotulo { grid-column: 1 / -1; }
.historia__grade h2 { grid-column: 1 / span 8; }
.historia__texto { grid-column: 9 / span 4; color: var(--texto-claro); }
.historia__texto p { margin: 0; }

.linha-tempo { list-style: none; margin: clamp(4rem, 8vw, 7rem) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.linha-tempo__trilho { position: absolute; left: 0; right: 0; top: 7px; height: 3px; background: var(--linha-escura); border-radius: 2px; }
.linha-tempo__trilho span { position: absolute; inset: 0; background: var(--verde); border-radius: 2px; transform-origin: left center; transform: scaleX(var(--lt, 0)); }
.marco { position: relative; padding-top: 2.4rem; }
.marco::before {
  content: ""; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%;
  background: var(--preto); border: 3px solid #3A3A37; transition: background-color 300ms ease, border-color 300ms ease;
}
.marco__ano {
  display: block; font-family: var(--sc-font-display); font-weight: 900; font-stretch: 78%;
  font-size: clamp(3rem, 1.4rem + 4.2vw, 6.2rem); line-height: 0.9; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px #6A6B63; transition: color 400ms ease, -webkit-text-stroke-color 400ms ease;
}
.marco__txt { display: block; margin-top: 0.8rem; color: var(--texto-claro); max-width: 20ch; line-height: 1.4; }
.marco.ativo::before { background: var(--verde); border-color: var(--verde); }
.marco.ativo .marco__ano { color: var(--verde); -webkit-text-stroke-color: var(--verde); }
.sem-movimento .marco .marco__ano { color: var(--verde); -webkit-text-stroke-color: var(--verde); }
.sem-movimento .linha-tempo__trilho span { transform: none; }

/* ---------------------------------------------------------- Mamu (pico) -- */
.mamu { position: relative; height: 240svh; background: var(--preto); }
.mamu__palco {
  position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate;
  background: var(--preto); color: #FFFFFF; transition: background-color 0ms;
}
.mamu.cheio .mamu__palco { background: var(--verde); color: var(--preto); }
.mamu__titulo {
  position: absolute; z-index: 3; left: var(--sc-gutter); top: calc(var(--topo-h) + clamp(1.5rem, 6vh, 4rem));
  font-family: var(--sc-font-display); font-weight: 850; font-stretch: 82%;
  font-size: clamp(2rem, 1rem + 3vw, 3.8rem); line-height: 0.98; letter-spacing: -0.025em; word-spacing: 0.06em; margin: 0; max-width: 12ch;
}
.mamu.cheio .mamu__titulo mark.caixa { color: var(--preto); }
.mamu__raios {
  position: absolute; inset: -60%; z-index: -1; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(10,10,9,0.07) 0deg 7deg, transparent 7deg 20deg);
}
.mamu.cheio .mamu__raios { opacity: 1; transition: opacity 600ms ease; }
.com-movimento .mamu.cheio .mamu__raios { animation: girar 90s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.mamu__gigante {
  position: absolute; z-index: 0; left: 50%; bottom: -0.12em; margin: 0;
  font-family: var(--sc-font-display); font-weight: 900; font-stretch: 75%;
  font-size: clamp(9rem, 34vw, 34rem); line-height: 0.8; letter-spacing: -0.06em; color: var(--preto);
  transform: translateX(-50%); white-space: nowrap; opacity: 0; will-change: transform, opacity; user-select: none;
}
.mamu__fig { position: absolute; z-index: 1; left: 50%; bottom: 0; margin: 0; width: min(34vw, 520px); will-change: transform; transform: translateX(-50%); }
.mamu__fig img { width: 100%; height: auto; }
.mamu__legenda {
  position: absolute; z-index: 3; left: var(--sc-gutter); bottom: clamp(1.25rem, 4vh, 2.5rem); margin: 0;
  padding: 0.55rem 0.95rem; border-radius: 999px; background: var(--preto); color: #FFFFFF;
  font-weight: 700; font-size: 0.9rem; opacity: 0; transition: opacity 400ms ease;
}
.mamu.cheio .mamu__legenda { opacity: 1; }
.mamu__balao {
  position: absolute; z-index: 2; left: calc(50% + min(13vw, 200px)); top: calc(var(--topo-h) + 20vh);
  max-width: 19ch; margin: 0; padding: 1.1rem 1.35rem 1.2rem; border-radius: 28px 28px 28px 6px;
  background: #FFFFFF; color: var(--preto); box-shadow: var(--sc-e3);
  font-family: var(--sc-font-display); font-weight: 800; font-stretch: 90%;
  font-size: clamp(1.15rem, 0.85rem + 0.95vw, 1.75rem); line-height: 1.08; letter-spacing: -0.015em;
  transform-origin: 0 100%; opacity: 0; will-change: transform, opacity;
}
.mamu__balao strong { font-weight: 900; }
.mamu__balao::after { content: ""; position: absolute; left: -10px; bottom: 0; border: 12px solid transparent; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; }

/* ----------------------------------------------------------- propósito -- */
.proposito { background: var(--grafite); padding: var(--sc-section) 0; }
.proposito__topo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.proposito__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pilar { background: var(--card); border-radius: var(--raio); padding: clamp(1.6rem, 3vw, 2.8rem); box-shadow: var(--sc-edge), var(--sc-e2); }
.pilar h3 {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.4rem;
  font: 700 0.82rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde);
}
.pilar h3::before { content: ""; width: 26px; height: 17px; background: var(--verde); -webkit-mask: url("/img/simbolo-mamute.svg") center / contain no-repeat; mask: url("/img/simbolo-mamute.svg") center / contain no-repeat; }
.pilar p, .pilar li {
  font-family: var(--sc-font-display); font-weight: 750; font-stretch: 90%;
  font-size: clamp(1.45rem, 1rem + 1.5vw, 2.4rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
.pilar--missao { grid-column: 1 / span 7; }
.pilar--visao { grid-column: 8 / span 5; }
.pilar--valores { grid-column: 1 / -1; }
.pilar--valores ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.pilar--valores li { font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.75rem); padding-top: 1rem; border-top: 2px solid var(--verde); }

/* ------------------------------------------------------------ serviços -- */
.servicos { background: var(--papel); color: var(--preto); padding: var(--sc-section) 0; }
.servicos__titulo { max-width: 15ch; }
.servicos__corpo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.servicos__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha-clara); }
.servico {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.45rem; align-items: center;
  padding: clamp(1.5rem, 3.2vw, 2.4rem) 0; border-bottom: 1px solid var(--linha-clara);
}
.servico__midia { display: none; }
.servico__nome {
  grid-column: 1 / -1; margin: 0; font-family: var(--sc-font-display); font-weight: 850; font-stretch: 82%;
  font-size: clamp(2rem, 0.9rem + 3.3vw, 4.3rem); line-height: 0.95; letter-spacing: -0.03em; color: #7E8078;
  transition: color 260ms ease;
}
.servico.ativo .servico__nome { color: var(--preto); }
.servico__desc { margin: 0; color: var(--texto-escuro-suave); }
.servico__cta {
  font-weight: 700; font-size: 0.95rem; color: var(--preto); text-decoration: none; white-space: nowrap;
  padding: 0.7em 1.15em; border-radius: 999px; border: 1.5px solid currentColor;
  transition: background-color 160ms ease, border-color 160ms ease, transform 140ms var(--sc-ease-out);
}
.servico__cta:active { transform: scale(0.97); }
.servico.ativo .servico__cta, .servico__cta:hover { background: var(--verde); border-color: var(--verde); }
.servicos__painel { position: sticky; top: calc(var(--topo-h) + 2rem); }
.servicos__tela { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: #0E0E0D; box-shadow: var(--sc-e3); }
.servicos__tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 450ms var(--sc-ease-out); }
.servicos__tela video.ativo { opacity: 1; }
.servicos__ajuda { display: flex; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem); }
.servicos__ajuda p { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-stretch: 85%; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); letter-spacing: -0.02em; }

/* ----------------------------------------------------------- e-commerce -- */
.ecommerce { background: var(--preto); padding: var(--sc-section) 0; }
.ecommerce__titulo { max-width: 17ch; }
.ecommerce__corpo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.ecommerce__tela { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: #0E0E0D; border: 1px solid var(--linha-escura); box-shadow: var(--sc-e3); }
.ecommerce__tela > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ecommerce__tela video { opacity: 0; transition: opacity 300ms ease; }
.ecommerce__tela video.pronto { opacity: 1; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.passo { padding: 1.15rem 1.4rem; border-radius: 20px; border: 1px solid var(--linha-escura); transition: background-color 320ms ease, border-color 320ms ease, transform 320ms var(--sc-ease-out); }
.passo h3 { margin: 0 0 0.3rem; font-family: var(--sc-font-display); font-weight: 800; font-stretch: 88%; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); letter-spacing: -0.015em; color: #FFFFFF; transition: color 320ms ease; }
.passo p { margin: 0; color: var(--texto-suave); transition: color 320ms ease; }
.passo.ativo { background: var(--verde); border-color: var(--verde); transform: translateX(-6px); }
.passo.ativo h3, .passo.ativo p { color: var(--preto); }
.ecommerce__cta { margin-top: clamp(2rem, 4vw, 3rem); }

/* ----------------------------------------------------------------- time -- */
.time { background: linear-gradient(180deg, #DFF6C6 0%, #EEF4E6 30%, var(--papel) 70%); color: var(--preto); padding: var(--sc-section) 0 clamp(3.5rem, 7vw, 6rem); }
.time__topo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.time__topo p { margin: 0; color: var(--texto-escuro-suave); max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.45; }
.time__grade {
  list-style: none; margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding: 0 var(--sc-gutter); max-width: var(--sc-maxw);
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2.5rem 1.25rem;
}
.pessoa { grid-column: span 2; }
.pessoa:nth-child(5) { grid-column: 2 / span 2; }
.pessoa:nth-child(even) { margin-top: 3rem; }
.pessoa picture { display: block; overflow: hidden; border-radius: 22px; box-shadow: var(--sc-e2); background: #D7EFC4; }
.pessoa img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 500ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .pessoa:hover img { transform: scale(1.04); } }
.pessoa__nome { margin: 0.9rem 0 0; font-family: var(--sc-font-display); font-weight: 800; font-stretch: 88%; font-size: 1.15rem; letter-spacing: -0.01em; }
.pessoa__cargo { margin: 0.15rem 0 0; color: var(--texto-escuro-suave); font-size: 0.92rem; }

/* ---------------------------------------------------------- fechamento -- */
.final {
  position: relative; isolation: isolate; overflow: clip; background: var(--preto);
  min-height: max(100svh, 860px); padding-top: clamp(4rem, 12vh, 8rem);
}
.final__cena { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.final__sol {
  position: absolute; left: 50%; bottom: 0; width: min(110vw, 1500px); aspect-ratio: 1; border-radius: 50%;
  background: var(--verde); transform: translate(-50%, var(--sol, 72%)); will-change: transform;
}
.final__time { position: absolute; left: 50%; bottom: 0; width: min(50vw, 820px); transform: translateX(-58%); }
.final__mamu { position: absolute; bottom: 0; left: calc(50% + min(15vw, 250px)); width: min(15vw, 230px); }
.final__time img, .final__mamu img { width: 100%; height: auto; }
.final__copy { position: relative; text-align: center; }
.final__titulo {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); font-family: var(--sc-font-display); font-weight: 900; font-stretch: 78%;
  font-size: clamp(4rem, 0.8rem + 11vw, 12.5rem); line-height: 0.9; letter-spacing: -0.03em; word-spacing: 0.06em;
}

/* --------------------------------------------------------------- rodapé -- */
.rodape { background: var(--preto); color: var(--texto-claro); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; border-top: 1px solid var(--linha-escura); }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.rodape__marca img { height: 44px; width: auto; }
.rodape__marca p { margin: 1.2rem 0 0; line-height: 1.5; }
.rodape__col h2 { margin: 0 0 1rem; font: 700 0.8rem/1 var(--sc-font-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde); }
.rodape__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.rodape__col a { color: #FFFFFF; text-decoration: none; overflow-wrap: anywhere; }
.rodape__col a:hover { text-decoration: underline; text-decoration-color: var(--verde); text-underline-offset: 4px; }
.rodape__base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linha-escura); font-size: 0.85rem; color: var(--texto-suave); }
.rodape__base p { margin: 0; }
.credito a { color: inherit; text-decoration: none; }
.credito a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------- WhatsApp flutuante -- */
.zap-flutuante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde); color: var(--preto); box-shadow: var(--sc-e3);
  transition: transform 180ms var(--sc-ease-out), opacity 220ms ease;
}
.zap-flutuante:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .zap-flutuante:hover { transform: translateY(-3px); } }
.zap-flutuante.escondido { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* ============================================================ celular ==== */
@media (max-width: 1080px) {
  .topo__nav { display: none; }
  .topo__cta { margin-left: auto; }
}
@media (max-width: 860px) {
  :root { --topo-h: 62px; }
  .topo__logo img { height: 30px; }
  .topo__cta { display: none; }
  .topo__menu {
    display: inline-flex; align-items: center; gap: 0.6rem; margin-left: auto; min-height: 44px; padding: 0 0.2rem 0 0.9rem;
    background: none; border: 0; color: #FFFFFF; font-weight: 700; cursor: pointer;
  }
  .topo__menu-ico { position: relative; width: 26px; height: 14px; display: block; }
  .topo__menu-ico i { position: absolute; left: 0; right: 0; height: 2px; background: var(--verde); transition: transform 200ms var(--sc-ease-out); }
  .topo__menu-ico i:first-child { top: 2px; } .topo__menu-ico i:last-child { bottom: 2px; }
  .topo__menu[aria-expanded="true"] .topo__menu-ico i:first-child { transform: translateY(4px) rotate(45deg); }
  .topo__menu[aria-expanded="true"] .topo__menu-ico i:last-child { transform: translateY(-4px) rotate(-45deg); }

  .hero { min-height: 0; justify-content: flex-start; }
  .hero__copy { max-width: none; padding-top: 2.2rem; }
  .hero__titulo { font-size: clamp(2.9rem, 13.6vw, 4.6rem); }
  .hero__sub { font-size: 1.05rem; margin-bottom: 1.5rem; }
  .hero__time { position: relative; right: auto; width: 112%; margin: 0.5rem 0 0 -6%; }
  .hero__faixa { right: 18vw; width: 54vw; height: 34%; bottom: 168px; }
  .hero__sombra { background: linear-gradient(180deg, rgba(10,10,9,0.92) 0%, rgba(10,10,9,0.8) 46%, rgba(10,10,9,0.25) 70%, rgba(10,10,9,0.95) 100%); }
  .hero__numeros { max-width: none; gap: 1rem; padding: 1.4rem var(--sc-gutter) 1.8rem; background: var(--preto); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__numeros dd { font-size: 0.8rem; }

  .historia__grade h2, .historia__texto { grid-column: 1 / -1; }
  .linha-tempo { grid-template-columns: 1fr; gap: 2.2rem; padding-left: 2.4rem; }
  .linha-tempo__trilho { left: 7px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .linha-tempo__trilho span { transform-origin: center top; transform: scaleY(var(--lt, 0)); }
  .marco { padding-top: 0; }
  .marco::before { left: -2.4rem; top: 0.4rem; }

  .mamu { height: 210svh; }
  .mamu__fig { width: min(78vw, 400px); }
    .mamu__balao { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--topo-h) + 9.5rem); max-width: 22ch; }
  .mamu__gigante { bottom: 34vh; font-size: 40vw; }

  .proposito__topo { grid-template-columns: 1fr; }
  .pilar--missao, .pilar--visao { grid-column: 1 / -1; }
  .pilar--valores ul { grid-template-columns: 1fr 1fr; }

  .servicos__corpo { grid-template-columns: 1fr; }
  .servicos__painel { display: none; }
  .servico__midia { display: block; grid-column: 1 / -1; margin-bottom: 1rem; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #0E0E0D; }
  .servico__midia video { width: 100%; height: 100%; object-fit: cover; }
  .servico__nome { color: var(--preto); }
  .servico { grid-template-columns: 1fr; }
  .servico__cta { justify-self: start; margin-top: 0.6rem; }

  .ecommerce__corpo { grid-template-columns: 1fr; }
  .passo.ativo { transform: none; }

  .time__topo { grid-template-columns: 1fr; }
  .time__grade {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64vw; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; overscroll-behavior-x: contain;
  }
  .pessoa, .pessoa:nth-child(5) { grid-column: auto; scroll-snap-align: start; }
  .pessoa:nth-child(even) { margin-top: 0; }

  .final { min-height: max(100svh, 700px); }
  .final__time { width: 118vw; transform: translateX(-52%); }
  .final__mamu { left: auto; right: 2vw; width: 27vw; }
  .final__sol { width: 150vw; }

  .rodape__grade { grid-template-columns: 1fr; gap: 2rem; }
  .rodape__base { flex-direction: column; }
}
@media (max-width: 380px) {
  .pilar--valores ul { grid-template-columns: 1fr; }
}

/* ======================================================= sem movimento ==== */
@media (prefers-reduced-motion: reduce) {
  .faixa__trilho { flex-wrap: wrap; justify-content: center; width: auto; padding-inline: var(--sc-gutter); }
  .faixa { -webkit-mask-image: none; mask-image: none; }
  .mamu { height: auto; }
  .mamu__palco { position: relative; height: auto; min-height: max(100svh, 760px); background: var(--verde); color: var(--preto); }
  .mamu__gigante { opacity: 1; }
  .mamu__balao { opacity: 1; }
  .mamu__raios { opacity: 1; }
}