/* ==========================================================================
   Consistem — LP de apresentação da nova marca
   Tokens extraídos do Figma "[NOVO] Portal Consistem" + Consistem Brand Book
   ========================================================================== */

:root{
  /* cores — brandbook p.51-52 + tokens Figma */
  --grafite:      #2e2e30;   /* Pantone 419 C */
  --branco:       #ffffff;
  --coral:        #df5241;   /* Pantone 7597 C */
  --amarelo:      #ebaf2d;   /* Pantone 7549 C */
  --grafite-300:  #757275;   /* token Figma: Cores Consistem/Grafite/grafite-300 */
  --cinza-050:    #f6f6f7;
  --cinza-100:    #ececed;
  --cinza-200:    #dedee0;

  /* tipografia — DM Sans, títulos tracking -20 (=-0.02em), lh 1.0 */
  --ff: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --track-tight: -0.02em;

  /* raios — arestas apenas levemente suavizadas, nunca 90° rígidos */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* layout — todo o conteúdo da página vive nesta mesma caixa */
  --wrap: 1440px;
  --gut: clamp(20px, 4.5vw, 64px);
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--ff);
  font-weight:400;
  font-size:17px;
  line-height:1.5;                       /* corpo: entrelinha 1,5 — brandbook p.55 */
  color:var(--grafite);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

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

/* ==========================================================================
   PRELOADER — símbolo Consistem se desenhando, obrigatório na entrada do site.
   Duração fixa (~5.7s), independente da velocidade de carregamento. Ao final,
   sobe como uma cortina (translateY) liberando a hero por baixo.
   Origem: snippets/preloader-logo-consistem.html
   ========================================================================== */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--grafite);
  animation: preloaderOut 1s cubic-bezier(.65,0,.35,1) 4.8s forwards;
  will-change:transform;
}
.preloader__stage{ display:block; width:100%; height:100%; }

.preloader .gline{
  fill:none;
  stroke:url(#glineFade);
  stroke-width:1.4;
  stroke-dasharray:6 7;
  transform-box:fill-box;
}
.preloader .gline--v{ transform-origin:50% 100%; transform:scaleY(0); }
.preloader .gline--h{ transform-origin:0% 50%;   transform:scaleX(0); }
@keyframes growV{ to{ transform:scaleY(1); } }
@keyframes growH{ to{ transform:scaleX(1); } }

/* saída das guias: mesmo mecanismo de scale da entrada, ponto de ancoragem
   trocado — verticais encolhem pro topo, horizontais pra direita. */
@keyframes exitV{
  from{ transform:scaleY(1); transform-origin:50% 0%; }
  to{   transform:scaleY(0); transform-origin:50% 0%; }
}
@keyframes exitH{
  from{ transform:scaleX(1); transform-origin:100% 50%; }
  to{   transform:scaleX(0); transform-origin:100% 50%; }
}

/* traço 1: o anel, na espessura real da marca (comprimento real do path
   medido via getTotalLength(), ~1289) */
.preloader .ring{
  fill:none;
  stroke:#fff;
  stroke-width:43;
  stroke-dasharray:1289;
  stroke-dashoffset:1289;
  animation: drawRing 1.8s cubic-bezier(.65,0,.35,1) 1s forwards;
}
@keyframes drawRing{ to{ stroke-dashoffset:0; } }

/* traço 2: o "S" interno, mesma espessura do anel, some começa quando o
   traço do anel termina (comprimento real ~460) */
.preloader .inner{
  fill:none;
  stroke:#fff;
  stroke-width:43;
  stroke-linecap:round;
  stroke-dasharray:460;
  stroke-dashoffset:460;
  animation: drawInner 1.3s cubic-bezier(.65,0,.35,1) 2.8s forwards;
}
@keyframes drawInner{ to{ stroke-dashoffset:0; } }

/* saída: cortina — o preloader inteiro desliza pra cima e libera a hero */
@keyframes preloaderOut{ to{ transform:translateY(-100%); visibility:hidden; } }

@media (prefers-reduced-motion: reduce){
  .preloader{ animation:none; opacity:0; visibility:hidden; }
  .hero__icon, .hero__title, .hero__sub, .hero__cta{ opacity:1; transform:none; animation:none; }
}

/* container único da página — hero, seções, CTA e rodapé usam a mesma caixa */
.wrap,
.ft__in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}

/* ---------- tipografia utilitária ---------- */

/* Escala unificada por pedido do cliente: cada nível (H2, texto de apoio)
   tem UM tamanho só na página inteira, em vez do valor que cada frame do
   Figma trazia individualmente (o Figma tinha indo de 34 a 64px pra H2,
   e de 14 a 20px pra texto de apoio, entre seções). Peso/cor continuam
   variando por seção — isso é estilo, não tamanho. */
.h2, .dim__h2, .evol__h2, .idv__h2, .logoanim__h2, .foto__h2, .cta__t, .final__t{
  font-size:clamp(28px, 4vw, 48px);
  line-height:1.1;
}
@media (max-width:860px){
  .h2, .dim__h2, .evol__h2, .idv__h2, .logoanim__h2, .foto__h2, .cta__t, .final__t{
    font-size:36px;
  }
}

.sec__sub, .sec__body p, .manifesto__body p:not(.lead), .dim__sub, .dim__d,
.evol__body p, .idv__sub, .logoanim__sub, .typc__body, .foto__sub p,
.final__s, .cta__s, .ft__tag{
  font-size:16px; line-height:1.45;
}

.h2{
  font-weight:600; letter-spacing:var(--track-tight);
  margin:0;
  text-wrap:balance;
}
.h3{
  font-size:clamp(21px, 2.2vw, 26px);
  font-weight:600; line-height:1.15; letter-spacing:var(--track-tight);
  margin:0;
}
.lead{ font-size:clamp(19px, 2vw, 24px); }

.eyebrow{
  margin:0 0 18px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral);
}

/* ---------- botões (Figma: bg #df5241, r12, 32/16, SemiBold) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 32px; border-radius:var(--r-md);
  font-weight:600; font-size:17px; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn--sm{ padding:8px 20px; font-size:12px; border-radius:var(--r-sm); }
.btn--coral{ background:var(--coral); color:#fff; }
.btn--coral:hover{ background:#c9432f; }
.btn--ghost{ border-color:var(--coral); color:#fff; }
.btn--ghost:hover{ background:var(--coral); }
.btn:active{ transform:translateY(1px); }


/* ==========================================================================
   HERO
   ========================================================================== */
/* hero fixo no topo: as seções seguintes sobem por cima dele */
.hero{
  position:sticky; top:0; z-index:0;
  isolation:isolate; overflow:hidden;
  height:100vh; height:100svh;
  background:var(--grafite);
  border-radius:0 0 48px 48px;
}
/* tudo que vem depois rola sobre o hero e precisa de fundo opaco
   (.final não é mais sticky, não precisa da exceção que tinha aqui) */
main > *:not(.hero){ position:relative; z-index:1; }
/* ícone e copy centralizados na tela */
.hero__in{
  max-width:var(--wrap); margin-inline:auto;
  padding:clamp(36px,5vw,56px) var(--gut);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(40px,7vw,72px);
  height:100%; text-align:center;
}
/* wrapper do ícone: só ele recebe a inclinação 3D (JS escreve o transform) */
.hero__icon{
  width:clamp(160px,22vw,320px);
  perspective:600px;
}
.hero__icon img{
  display:block; width:100%; height:auto;
  transition:transform .2s ease-out, filter .2s ease-out;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.28));
  will-change:transform, filter;
}
.hero__copy{ display:flex; flex-direction:column; align-items:center; }
/* uma linha só: o tamanho encolhe com a viewport pra caber sem quebrar
   (em telas muito estreitas ainda pode quebrar — é o fallback natural) */
.hero__title{
  margin:0;
  font-size:clamp(17px, 4.4vw, 56px);
  font-weight:600; line-height:1.02; letter-spacing:var(--track-tight);
  color:#fff;
}
/* "Confiança não se declara" — Regular; ". Se constrói." herda o SemiBold do h1 (Figma 955:4331) */
.hero__title--reg{ font-weight:400; }
.hero__title--muted{ color:rgba(255,255,255,.55); }
.hero__sub{
  margin:clamp(20px,3vw,28px) 0 0; max-width:74ch;
  font-size:clamp(17px,1.7vw,20px); color:rgba(255,255,255,.72);
  text-wrap:balance;
}
.hero__cta{
  margin-top:clamp(28px,4vw,36px);
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}

/* entrada da hero: fade-in-up leve, acompanhando a cortina do preloader.
   A cortina (preloaderOut, 4.8s→5.8s) descobre a tela de baixo pra cima —
   por isso o CTA (base) entra primeiro e o ícone (topo) por último. */
.hero__icon, .hero__title, .hero__sub, .hero__cta{
  opacity:0; transform:translateY(20px);
  animation: heroReveal .7s cubic-bezier(.4,0,.2,1) forwards;
}
.hero__cta{   animation-delay:4.85s; }
.hero__sub{   animation-delay:5.05s; }
.hero__title{ animation-delay:5.25s; }
.hero__icon{  animation-delay:5.45s; }
@keyframes heroReveal{ to{ opacity:1; transform:translateY(0); } }

/* ==========================================================================
   SEÇÕES
   ========================================================================== */
.sec{ padding-block:clamp(72px,10vw,128px); }
.sec--light{ background:var(--branco); }
.sec--soft{ background:var(--cinza-050); }
.sec--dark{ background:var(--grafite); color:#fff; }

.sec__head{ max-width:62ch; margin-bottom:clamp(40px,5vw,64px); }
.sec__sub{ margin:20px 0 0; color:var(--grafite-300); }
.sec--dark .sec__sub{ color:rgba(255,255,255,.65); }
/* variante com vários parágrafos (sec__sub cobre só um <p>) */
.sec__body{ margin-top:20px; }
.sec__body p{ margin:0 0 16px; color:var(--grafite-300); }
.sec__body p:last-child{ margin-bottom:0; }
.sec--dark .sec__body p{ color:rgba(255,255,255,.65); }

/* ---------- manifesto (Figma 955:4335) ---------- */
.manifesto{
  display:grid; grid-template-columns:47% 1fr; gap:clamp(28px,4.4vw,56px);
  align-items:start;
}
/* "Não abandonamos o que construímos." — Regular; o resto herda o SemiBold do .h2 */
.manifesto__lead-reg{ font-weight:400; }
.manifesto__lead .h2{ line-height:1.08; }
.manifesto__body p{ margin:0 0 18px; color:var(--grafite-300); }
.manifesto__body .lead{ color:var(--grafite); line-height:1.12; }
/* três pilares — grid de ilustração + título + texto + fio (Figma 621:4442) */
.pilares{
  margin-top:clamp(48px,6vw,80px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,56px);
}
.pilar{ display:flex; flex-direction:column; }
.pilar img{
  width:clamp(120px,13vw,180px); height:auto; margin-bottom:clamp(20px,2.5vw,32px);
}
.pilar h3{
  margin:0 0 12px; font-size:clamp(20px,1.9vw,24px); font-weight:600;
  letter-spacing:var(--track-tight); text-wrap:balance;
}
.pilar p{
  margin:0 0 clamp(20px,2.5vw,28px);
  color:var(--grafite-300); font-size:16px;
}
.pilar p:last-child{ flex:1; }        /* alinha os fios na base das colunas */
.pilar::after{
  content:""; display:block; height:1px; background:var(--cinza-200);
}

/* ---------- composição de boxes sobre fotografia (Figma 955:4343) ----------
   Geometria em % medida sobre o frame original (1280×546). Cada box sobe numa
   velocidade diferente conforme o scroll; --p (0→1) é escrito pelo JS. */
.comp{
  --p:0;
  position:relative; margin-top:clamp(48px,6vw,64px);
  aspect-ratio:1280/546;
  max-height:640px;
}
.comp__foto{
  position:absolute; inset:0; margin:0;
  border-radius:16px; overflow:hidden;
}
.comp__foto img{ width:100%; height:100%; object-fit:cover; }

/* box só de contorno, sobre a foto */
/* a moldura fica parada: é ela que emoldura o rosto */
.comp__outline{
  position:absolute; left:26.64%; top:calc(7.69% + 50px); width:46.72%; height:66.48%;
  z-index:1;
  border:1.5px solid #fff;
  border-radius:8px;
}

/* box coral sólido — largura pelo conteúdo, mas sempre cruzando a moldura */
.comp__coral{
  position:absolute; left:20.63%; top:calc(22.34% + 50px); z-index:2;
  min-width:16%;
  margin:0; display:flex; align-items:center;
  background:var(--coral); color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(12px,1.2vw,14px) clamp(14px,1.6vw,18px);
  font-weight:500; letter-spacing:var(--track-tight);
  font-size:clamp(15px,1.4vw,20px); line-height:1.2;
  transform:translateY(calc(var(--p) * -150px));
}

/* box branco com ícone, dentro da moldura da foto (sem transbordar) */
.comp__branca{
  position:absolute; left:61.48%; top:calc(51.47% + 50px); z-index:2;
  min-width:24%; max-width:34%;
  margin:0; display:flex; align-items:center; gap:clamp(10px,1.2vw,18px);
  background:var(--branco); color:var(--grafite);
  border-radius:var(--r-lg);
  padding:clamp(14px,1.8vw,20px) clamp(16px,2.2vw,24px);
  box-shadow:0 14px 40px rgba(46,46,48,.16);
  font-weight:500; letter-spacing:var(--track-tight);
  font-size:clamp(15px,1.4vw,20px); line-height:1.2;
  transform:translateY(calc(var(--p) * -240px));
}
.comp__branca img{ width:clamp(22px,2.2vw,32px); height:auto; flex:none; }

@media (prefers-reduced-motion: reduce){
  .comp__coral, .comp__branca, .idv-ui{ transform:none; }
}

/* ---------- Manifesto — mobile (Figma 1018:855) ----------
   Composição própria em pé (380×546, não é a mesma caixa do desktop
   encolhida) — por isso a caixa e as posições das tags são redeclaradas
   aqui, escopadas a #manifesto para não afetar a composição da seção
   Identidade visual, que reusa as mesmas classes .comp. */
@media (max-width:860px){
  #manifesto{ padding-block:64px; }
  #manifesto .manifesto{ gap:24px; }
  #manifesto .eyebrow{ margin-bottom:24px; }
  #manifesto .manifesto__body .lead{ font-size:24px; }

  #manifesto .comp{ margin-top:64px; aspect-ratio:380/546; max-height:none; }
  #manifesto .comp__outline{ left:10.789%; top:7.692%; width:78.421%; height:75.824%; }
  #manifesto .comp__coral{ left:6.053%; top:11.172%; padding:14px 18px; font-size:16px; }
  #manifesto .comp__branca{
    left:31.316%; top:63.553%; padding:20px 24px; gap:24px; font-size:16px;
    min-width:0; max-width:none;
  }
  #manifesto .comp__branca img{ width:31px; height:32px; }
}

/* ==========================================================================
   ASSINATURA: as 4 dimensões — diagrama do brandbook p.7
   Estado base = tudo visível e sem trava. O JS adiciona .is-scrolly para
   pinar o painel e revelar uma dimensão por etapa de scroll.
   ========================================================================== */
.dim{ background:var(--branco); }
.dim__track{ position:relative; }
.dim__panel{ padding-block:clamp(72px,10vw,120px); }

/* 300vh pros 4 passos (50vh de scroll por dimensão, inclui o entra-em-cena
   de 100vh) + 40vh de espera no fim: o painel continua sticky depois de
   revelar a 4ª dimensão, e é a seção Evolução (a próxima, sempre com
   z-index:1) que sobe e cobre o painel — em vez de soltar o sticky e os
   dois rolarem juntos a partir daí. O JS usa um span fixo pros 4 passos
   (não a altura real do track), então essa espera extra não muda o ritmo
   de troca entre as dimensões. Espera curta de propósito: só o suficiente
   pra ler a 4ª dimensão — mais que isso e o scroll fica "morto" na tela por
   tempo demais, passando a sensação de página travada ou de fim de
   conteúdo. Pelo mesmo motivo, cada uma das 4 etapas também é curta: span
   grande por etapa deixa scroll sobrando depois da troca instantânea de
   dimensão, e essa sobra é lida como uma "cauda" antes da próxima trocar. */
.dim.is-scrolly .dim__track{ height:340vh; }
.dim.is-scrolly .dim__panel{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  /* gap maior / padding menor que antes: em telas mais baixas (ex. notebook
     ~768px de altura) o texto da última dimensão e o bloco Confiança
     quase se tocavam — isso troca "altura de respiro" de padding pra gap,
     sem mudar o total ocupado dentro do 100svh */
  gap:clamp(32px,4.5vw,64px);
  padding-block:clamp(20px,2.5vw,32px);
}

/* texto à esquerda, diagrama à direita */
.dim__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,72px); align-items:center;
  min-height:0;                      /* deixa o grid encolher dentro do painel */
}
.dim__viz{ order:2; min-width:0; }

/* --- diagrama --- */
.dimsvg{
  width:100%; height:auto; overflow:visible;
  max-height:min(46svh, 460px);      /* nunca empurra o painel além da tela */
}
.dimsvg circle{ fill:none; stroke:var(--grafite); stroke-width:1.4; }
.dimsvg line{ stroke:var(--grafite); stroke-width:1.4; }
.dimsvg__lead{ stroke:var(--grafite-300); stroke-width:1; }
.dimsvg__dot{ fill:var(--coral); stroke:none; }
.dimsvg text{
  font-family:var(--ff); font-size:30px; font-weight:600;
  letter-spacing:var(--track-tight); fill:var(--grafite);
}

/* O sistema inteiro fica sempre em cena: as dimensões ainda não reveladas
   ficam fantasmas, e cada etapa as traz à frente. Evita o vazio no topo
   quando só o primeiro círculo está aceso. */
.dimsvg__d{ transform-box:view-box; transform-origin:300px 520px; }
.dim.is-scrolly .dimsvg__d{
  opacity:.16;
  transition:opacity .55s ease;
}
.dim.is-scrolly .dimsvg__d.is-on{ opacity:1; }
.dim.is-scrolly .dimsvg__d .dimsvg__dot{
  opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center;
  transition:opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.dim.is-scrolly .dimsvg__d.is-on .dimsvg__dot{ opacity:1; transform:none; }

/* a dimensão em exibição vem em coral — separa a atual das já vistas
   e das que ainda vêm */
.dimsvg__d circle,
.dimsvg__d text,
.dimsvg__d .dimsvg__lead{
  transition:stroke .45s ease, fill .45s ease, stroke-width .45s ease;
}
.dim.is-scrolly .dimsvg__d.is-current circle{ stroke:var(--coral); stroke-width:2; }
.dim.is-scrolly .dimsvg__d.is-current .dimsvg__lead{ stroke:var(--coral); }
.dim.is-scrolly .dimsvg__d.is-current text{ fill:var(--coral); }

/* --- texto --- */
.dim__copy{ min-width:0; }
.dim__h2{
  margin:0; font-weight:600;
  letter-spacing:var(--track-tight);
  max-width:22ch; text-wrap:balance;
}
.dim__sub{
  margin:16px 0 0; max-width:46ch;
  color:var(--grafite-300);
}

.dim__cards{ margin-top:clamp(22px,2.6vw,34px); }
.dim__card{ padding:0; }

/* contador: deixa explícito que o conteúdo troca */
.dim__n{
  margin:0 0 4px; display:flex; align-items:baseline; gap:2px;
  font-variant-numeric:tabular-nums; letter-spacing:var(--track-tight);
}
.dim__n b{ font-size:clamp(26px,2.6vw,34px); font-weight:600; color:var(--coral); line-height:1; }
.dim__n i{ font-style:normal; font-size:14px; color:var(--grafite-300); }

.dim__card h3{
  margin:0 0 8px; font-size:clamp(26px,3vw,36px); font-weight:600;
  line-height:1.05; letter-spacing:var(--track-tight);
}
.dim__d{ margin:0; color:var(--grafite-300); max-width:46ch; }
.dim:not(.is-scrolly) .dim__card + .dim__card{ margin-top:36px; }

/* empilhadas no mesmo espaço: só a ativa aparece, sem pular altura */
.dim.is-scrolly .dim__cards{ display:grid; }
.dim.is-scrolly .dim__card{
  grid-area:1 / 1; pointer-events:none;
  opacity:0; transform:translateY(26px);
  transition:opacity .32s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.dim.is-scrolly .dim__card.is-active{
  opacity:1; transform:none; pointer-events:auto;
  transition-delay:.1s;                 /* entra depois que a anterior sai */
}
/* a que sai desce, para a troca ficar legível */
.dim.is-scrolly .dim__card:not(.is-active){ transform:translateY(-22px); }

/* progresso: barras que preenchem */
.dim__prog{
  list-style:none; display:flex; gap:10px;
  margin:clamp(28px,3.5vw,44px) 0 0; padding:0;
}
.dim__prog li{
  width:56px; height:2px; background:var(--cinza-200); overflow:hidden;
}
.dim__prog li span{
  display:block; height:100%; width:0; background:var(--coral);
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}
.dim__prog li.is-on span{ width:100%; }
.dim:not(.is-scrolly) .dim__prog{ display:none; }

/* --- a base: sempre visível, sustenta as quatro dimensões ---
   box grafite, ecoando a linha de base do diagrama */
.dim__base{
  background:var(--grafite); color:#fff;
  border-radius:var(--r-md);
  padding:clamp(20px,2.2vw,28px) clamp(24px,2.8vw,36px);
  display:flex; align-items:baseline; gap:clamp(14px,2vw,26px); flex-wrap:wrap;
}
.dim__base__name{
  margin:0; font-size:clamp(24px,2.6vw,32px); font-weight:600;
  letter-spacing:var(--track-tight);
}
.dim__base__txt{
  margin:0; color:rgba(255,255,255,.6); font-size:clamp(15px,1.3vw,17px);
}

/* ---------- evolução com segurança (Figma 1018:697) ----------
   fundo = imagem única (hélice de DNA pontilhada já posicionada, exportada
   do próprio Figma) cobrindo a seção; conteúdo em 2 colunas por cima: texto
   + uma segunda imagem (foto do chão de fábrica com as barras coral já
   recortadas nela, Figma 1018:701) — sem geometria manual, os dois PNGs já
   vêm prontos do design. */
/* imagem travada em 1440px (tamanho nativo) e centralizada — nunca escala
   pra cima em telas maiores, senão o pontilhado da hélice perde nitidez
   (ficou borrado em monitor ultrawide com background-size:cover). O resto
   da seção é preenchido só pela cor sólida. Um degradê nas laterais da
   própria imagem funde a quina dela com a cor sólida, sem corte seco. */
.evol{
  position:relative; overflow:hidden;
  background:var(--grafite) url("assets/img/evol-bg-dna.webp") top center/1440px auto no-repeat;
}
.evol::before{
  content:""; pointer-events:none;
  position:absolute; top:0; left:50%; height:100%; width:1440px;
  transform:translateX(-50%);
  background:linear-gradient(to right,
    var(--grafite) 0%, transparent 7%,
    transparent 93%, var(--grafite) 100%);
}
.evol__in{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:clamp(32px,4.5vw,56px);
}
.evol__copy{ flex:1 1 480px; max-width:560px; }
.evol__h2{
  margin:0; font-weight:600;
  letter-spacing:var(--track-tight);
}
/* "faz parte do nosso" — Regular; o resto herda o SemiBold do h2 */
.evol__h2-reg{ font-weight:400; }
.evol__body{ margin-top:clamp(24px,3vw,32px); }
.evol__body p{
  margin:0 0 18px; color:rgba(255,255,255,.72);
}
.evol__body p:last-child{ margin-bottom:0; }

.evol__photo{
  flex:0 1 auto; width:min(43.6vw,628px); height:auto;
}

/* ---------- evolução com segurança — mobile (Figma 1018:871 + 1027:1061) ----------
   Empilha (a troca pra column já é feita na seção RESPONSIVO mais abaixo);
   aqui só o que muda de fato em relação ao desktop: tamanhos de texto que a
   fluidez do clamp() não alcança no mobile, o espaçamento entre os blocos,
   e a foto — que no Figma mobile é um recorte PRÓPRIO da composição
   (mais fechado, sem a sobra de moldura do recorte desktop), trocada via
   <picture> no HTML. O fundo pontilhado também troca de arquivo: no
   desktop é o mesmo PNG de 1440px width; no mobile é um recorte já
   finalizado (evol-bg-dna-mobile.webp, 420×1119, exportado do frame
   1027:1061 com o fade para o grafite já embutido na própria imagem —
   por isso nenhum gradiente extra é necessário aqui, só ancorar na base). */
@media (max-width:860px){
  #evolucao{
    padding-block:64px;
    background-image:url("assets/img/evol-bg-dna-mobile.webp");
    background-position:bottom center; background-size:100% auto;
  }
  #evolucao .evol__in{ gap:40px; }
  #evolucao .evol__copy{ width:100%; max-width:none; }
  #evolucao .evol__body{ margin-top:48px; }
  #evolucao .evol__photo{ width:100%; height:auto; }
}

/* ---------- identidade visual: intro (Figma 1007:501) ----------
   cabeçalho grande e centralizado, com a palavra "clareza" destacada em
   badge coral inline; embaixo, a MESMA composição/paralaxe de .comp usada
   no Manifesto (brandbook p.58) — só a foto, o texto do tag coral e o
   card branco (ícones + logo, no lugar do ícone+texto) mudam. */
.idv__head{
  max-width:1104px; margin:0 auto clamp(40px,5vw,48px); text-align:center;
}
.idv__h2{
  margin:0; font-weight:400;
  letter-spacing:var(--track-tight); color:var(--grafite);
}
.idv__h2-tag{
  display:inline-block; background:var(--coral); color:#fff;
  font-weight:700; padding:.05em .26em; border-radius:var(--r-md);
}
.idv__sub{
  margin:20px 0 0; color:var(--grafite-300);
  letter-spacing:var(--track-tight);
}

/* composição refeita (Figma 1018:813): proporção própria 1280×635 (mais alta
   que o .comp do Manifesto, senão cortava a foto) — outline e tag coral só
   mudam de altura relativa, a largura já bate com o .comp compartilhado. */
.comp--idv{ aspect-ratio:1280/635; }
.comp--idv .comp__outline{ top:calc(16.32% + 50px); height:57.17%; }
.comp--idv .comp__coral{ left:69.77%; top:calc(56.47% + 50px); }

/* card com os ícones (busca/upload/pasta) + logo: uma única imagem exportada
   do Figma (1018:817) — evita reconstruir ícones/máscaras na mão. Mesma
   mecânica de paralaxe (--p) do card branco do Manifesto (.comp__branca). */
.idv-ui{
  position:absolute; left:13.75%; top:calc(29.54% + 50px); z-index:2;
  width:25.86%; height:auto; display:block;
  filter:drop-shadow(0 14px 40px rgba(46,46,48,.16));
  transform:translateY(calc(var(--p) * -240px));
}

/* ---------- identidade visual: intro — mobile (Figma 1018:883) ----------
   Cabeçalho fica alinhado à esquerda no mobile (o desktop centraliza — no
   Figma mobile o texto é left, apesar do "items-center" do container, porque
   as caixas de texto já nascem com min-width:100%). A composição também é
   proporção própria (380×467), com contorno/tag/card recalculados — não é o
   card do Manifesto encolhido, o Figma redesenhou as posições. */
@media (max-width:860px){
  #identidade{ padding-block:64px; }
  #identidade .idv__head{ text-align:left; margin-bottom:48px; }

  #identidade .comp--idv{ aspect-ratio:380/467; }
  #identidade .comp--idv .comp__outline{ left:14.474%; top:11.991%; width:71.316%; height:64.882%; }
  #identidade .comp--idv .comp__coral{
    left:63.684%; top:60.386%; padding:12px; font-size:16px; line-height:20px;
  }
  #identidade .idv-ui{ left:4.474%; top:15.203%; width:50%; }
}

/* ---------- logotipo: sinal + animação de scroll (Figma 1010:522) ----------
   Cabeçalho estático (Regular 48px, centralizado — diferente do padrão
   SemiBold das outras seções). Abaixo, o bloco escuro do Figma foi trocado
   por uma sequência de 128 imagens que desenha o lockup completo (símbolo +
   "Consistem"), avançando frame a frame conforme o scroll: a faixa
   (.logoanim__track) é bem mais alta que a tela, e o palco
   (.logoanim__pin) fica sticky no topo enquanto ela rola por baixo — a
   mesma mecânica de "painel travado" da seção Dimensões (.dim__track/
   .dim__panel), só que pintando uma imagem por vez em vez de trocar classes. */
.logoanim__head{
  max-width:720px; margin:0 auto clamp(40px,5vw,56px); text-align:center;
}
.logoanim__h2{
  margin:0; font-weight:400;
  letter-spacing:var(--track-tight); color:var(--grafite);
}
.logoanim__sub{
  margin:14px 0 0; color:rgba(46,46,48,.7);
}

.logoanim__track{ position:relative; height:800vh; }
.logoanim__pin{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center;
}
.logoanim__stage{
  position:relative; width:100%; aspect-ratio:1280/665;
  border-radius:24px; overflow:hidden; background:var(--grafite);
}
.logoanim__frame{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}

@media (prefers-reduced-motion: reduce){
  .logoanim__track{ height:auto; }
  .logoanim__pin{ position:relative; top:auto; height:auto; padding-block:clamp(24px,4vw,40px); }
}

@media (max-width:860px){
  .logoanim__track{ height:560vh; }
  .logoanim__stage{ border-radius:16px; }
}

/* ---------- logotipo — mobile (Figma 1018:895) ----------
   Diferença real em relação ao desktop: lá só o palco escuro trava na tela
   (.logoanim__pin em volta só do estágio); no Figma mobile é a seção
   INTEIRA que trava — título e card grudados, sobem juntos até o desenho
   terminar. O JS (logoanimHead) move o cabeçalho para dentro do painel
   sticky nesse breakpoint; aqui só o CSS resultante dessa nova posição:
   o wrap do painel empilha em coluna com o espaçamento do frame, e o
   próprio card muda de proporção (quase quadrado, não a faixa larga do
   desktop) — por isso troca pra object-fit:contain: o frame já nasce em
   grafite quase idêntico ao fundo do card, então a "barra" da letterbox
   não aparece. */
@media (max-width:860px){
  #logotipo{ padding-block:64px; }
  #logotipo .logoanim__pin > .wrap{ display:flex; flex-direction:column; gap:48px; }
  #logotipo .logoanim__head{ max-width:none; margin:0; text-align:left; }
  #logotipo .logoanim__stage{ aspect-ratio:380/374; }
  /* cover em vez de contain: medi o frame_058 (logo final) e a margem em
     volta do lockup é generosa (~25% da largura, ~41% da altura do
     frame), então cover ainda deixa uma sobra segura nas bordas (~17px)
     sem cortar o logo — e o lockup passa a ocupar bem mais da caixa do
     que o "contain" (que ficava pequeno demais, sobrando grafite em
     excesso), sem precisar mudar a proporção da caixa. */
  #logotipo .logoanim__frame{ object-fit:cover; }
}

/* ---------- tipografia e cores (Figma 1010:546) ----------
   2 cards lado a lado: especime tipográfico (texto real, não imagem — pra
   mostrar a DM Sans de verdade) e grade de cores da marca. */
.typc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(16px,2vw,24px);
}
.typc__card{
  background:var(--cinza-050); border-radius:var(--r-xl); min-width:0;
  padding:clamp(18px,2.2vw,28px);
  display:flex; flex-direction:column; gap:clamp(16px,2vw,20px);
}
.typc__title .eyebrow{ margin-bottom:4px; }
.typc__h3{
  margin:0; font-size:21px; font-weight:600;
  letter-spacing:-0.015em; color:var(--grafite);
}
.typc__body{ margin:0; color:var(--grafite-300); }

/* especime: Aa + amostra de caracteres + lista de pesos, tudo dentro de um
   SVG (viewBox 572×308) em vez de texto em HTML solto — texto real (dá pra
   selecionar, usa a DM Sans de verdade), mas como todo o layout interno é
   fixo em coordenadas do viewBox e escala junto com a caixa, nunca mais
   estoura pra fora dela em nenhuma largura de tela. */
.typc__media{
  background:#fff; border-radius:var(--r-lg);
  aspect-ratio:572/308; overflow:hidden;
}
.typc__media svg{ display:block; width:100%; height:100%; }

/* grade de cores: coluna larga (grafite/branco) + coluna estreita (coral/amarelo) */
.typc__swatches{
  aspect-ratio:572/308; border-radius:var(--r-lg); overflow:hidden;
  display:grid; grid-template-columns:3fr 1fr; grid-template-rows:1fr 1fr; gap:12px;
}
.typc__sw{ border-radius:var(--r-sm); }
.typc__sw--b{ border:1px solid var(--cinza-200); }

/* ---------- tipografia e cores — mobile (Figma 1018:916) ----------
   O breakpoint aqui era 760px (os outros da página usam 860 — ver seção
   RESPONSIVO); corrigido pra 860 pra bater com o resto. O especime (SVG)
   não precisa de ajuste próprio de mobile — escala junto com a caixa. */
@media (max-width:860px){
  .typc{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .typc__card{ padding:28px; gap:20px; }
}

/* ---------- fotografia (Figma 1010:562) ----------
   3 colunas de alturas diferentes; align-items:center no .foto faz o
   escalonado sozinho (cada coluna centraliza na altura da mais alta —
   sem precisar de offset manual). --p (0→1, mesmo mecanismo do .comp) é
   escrito pelo JS; cada coluna recebe uma velocidade de parallax diferente. */
.foto{
  --p:0;
  display:flex; align-items:center; gap:clamp(24px,3vw,40px);
}
.foto__col{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; gap:clamp(20px,2.4vw,32px);
  will-change:transform;
}
.foto__col--1{ gap:clamp(36px,4.8vw,64px); transform:translateY(calc(var(--p) * -70px)); }
.foto__col--2{ transform:translateY(calc(var(--p) * 60px)); }
.foto__col--3{ transform:translateY(calc(var(--p) * -100px)); }

.foto__title{ display:flex; flex-direction:column; gap:4px; }
.foto__h2{
  margin:0; font-weight:600;
  letter-spacing:var(--track-tight); color:var(--grafite);
  max-width:340px;
}

.foto__img{ margin:0; border-radius:var(--r-lg); overflow:hidden; }
.foto__img img{ display:block; width:100%; height:100%; object-fit:cover; }
.foto__img--gestora{ aspect-ratio:400/666; }
.foto__img--analista{ aspect-ratio:400/306; }
.foto__img--agro{ aspect-ratio:400/391; }
.foto__img--operador{ aspect-ratio:400/306; }
.foto__img--executivo{ aspect-ratio:400/293; }
.foto__img--fabrica{ aspect-ratio:400/268; }

.foto__sub{ padding-block:clamp(16px,2vw,24px); }
.foto__sub p{ margin:0 0 20px; color:var(--grafite); }
.foto__sub p:last-child{ margin-bottom:0; }

@media (prefers-reduced-motion: reduce){
  .foto__col{ transform:none; }
}

/* ---------- fotografia — mobile (Figma 1027:1091) ----------
   O Figma mobile não empilha as fotos como o desktop: texto todo junto no
   topo, fotos numa fileira só, mais larga que a tela — pedido explícito do
   cliente foi transformar essa fileira num carrossel automático (as fotos
   nunca param, sem seta/indicador), mantendo as alturas "orgânicas" de cada
   foto (nenhuma é igual à outra, como no Figma). A trilha é o conjunto de
   6 fotos duplicado uma vez, andando de 0 a -50%: como a segunda cópia é
   idêntica à primeira, o ponto em que -50% termina é visualmente idêntico
   ao início — por isso o loop não tem costura. */
.foto-mobile{ display:none; }

@media (max-width:860px){
  .foto{ display:none; }

  .foto-mobile{
    display:flex; flex-direction:column; gap:32px;
  }
  .foto-mobile__head{ display:flex; flex-direction:column; gap:4px; }
  .foto-mobile__head .eyebrow{ margin-bottom:0; }
  .foto-mobile__sub{ padding-block:0; margin-top:28px; }

  /* mask em vez de só overflow:hidden: as fotos que cruzam a borda do
     viewport somem em direção ao branco da seção, em vez do corte seco */
  .foto-mobile__viewport{
    overflow:hidden; width:100%;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .foto-mobile__track{
    display:flex; align-items:center; gap:20px; width:max-content;
    animation:fotoMobileScroll 36s linear infinite;
  }

  .foto-mobile__item{
    flex:none; margin:0; width:min(60vw,260px);
    border-radius:6px; overflow:hidden;
  }
  .foto-mobile__item img{ display:block; width:100%; height:100%; object-fit:cover; }
  .foto-mobile__item--gestora{ aspect-ratio:239/290; }
  .foto-mobile__item--agro{ aspect-ratio:239/234; }
  .foto-mobile__item--analista{ aspect-ratio:239/313; }
  .foto-mobile__item--operador{ aspect-ratio:239/248; }
  .foto-mobile__item--fabrica{ aspect-ratio:239/347; }
  .foto-mobile__item--executivo{ aspect-ratio:239/186; }
}

@keyframes fotoMobileScroll{ to{ transform:translateX(-50%); } }

@media (max-width:860px) and (prefers-reduced-motion: reduce){
  /* em vez de ficar parado numa foto só pra sempre, troca o loop automático
     por rolagem manual — todo o conteúdo real ainda fica alcançável */
  .foto-mobile__track{ animation:none; }
  .foto-mobile__viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .foto-mobile__item{ scroll-snap-align:start; }
  .foto-mobile__viewport{ scroll-snap-type:x proximity; }
}

/* ---------- identidade final (Figma 1010:563 desktop + 1027:971 mobile) ----------
   Era sticky (mesmo mecanismo do .hero, trocado por pedido: ficava estranho
   travar a tela só pra uma frase). Agora é uma seção comum, com o texto
   entrando via o mesmo .reveal/IntersectionObserver usado no resto da
   página (data-reveal no HTML) — sem trava de scroll, em desktop e mobile. */
.final{
  --p:0;
  background:var(--branco);
  height:70vh; height:70svh;
  padding-block:clamp(110px,16vw,220px);
  display:flex; align-items:center; justify-content:center;
}
.final__in{ max-width:800px; padding-inline:var(--gut); text-align:center; }
/* parallax leve: título e texto de apoio andam a velocidades diferentes
   enquanto a seção passa pela tela — mesmo --p (0→1) que .comp/.foto já usam */
.final__t{
  margin:0; font-weight:400;
  letter-spacing:var(--track-tight); color:var(--grafite);
  transform:translateY(calc(var(--p) * -28px));
}
.final__t b{ font-weight:700; }
.final__s{
  margin:14px 0 0; color:rgba(46,46,48,.7);
  transform:translateY(calc(var(--p) * -12px));
}

/* ---------- identidade final — mobile (Figma 1027:971) ---------- */
@media (max-width:860px){
  .final__s{ margin-top:24px; }
}

/* ---------- pontilhismo ---------- */
/* A ilustração se comporta como um fundo à esquerda: fora do fluxo, com
   object-fit:contain (que nunca corta). --illo é a faixa reservada a ela e
   alimenta tanto o tamanho da imagem quanto o padding do texto, para os dois
   não saírem de sincronia. */
.stipple{
  --illo:clamp(190px,20vw,280px);
  --illo-gap:clamp(16px,2vw,28px);
  position:relative; overflow:hidden;
  margin-top:var(--gut);
  border-radius:var(--r-lg);
  background:var(--cinza-050);
  min-height:300px;
}
.stipple__bg{
  position:absolute; left:0; top:0;
  width:var(--illo); height:100%;
  object-fit:contain; object-position:left center;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.stipple__txt{
  position:relative;
  padding:clamp(26px,3vw,40px);
  padding-left:calc(var(--illo) + var(--illo-gap));
  display:flex; flex-direction:column; justify-content:center;
  min-height:300px;
}
.stipple__txt p:not(.eyebrow){ margin:16px 0 0; color:var(--grafite-300); font-size:16px; }

/* ---------- CTA final: bloco contido (Figma 955:4424 desktop + 1027:1049 mobile) ----------
   Card com aspect-ratio fixo (fiel ao frame: 1280×445 desktop, 380×589 mobile — não é
   o mesmo card com proporção diferente, o Figma desenhou os dois separadamente, então
   a foto muda de tratamento (crop manual no desktop, cover simples no mobile) e o
   conteúdo muda de posição (centrado à esquerda no desktop, ancorado na base no mobile). */
.cta{
  background:var(--branco);
  padding-block:clamp(48px,6.667vw,96px);
}
.cta__card{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:20px; background:var(--grafite);
  aspect-ratio:1280/445;
}
.cta__bg{
  position:absolute; left:0; top:-7.89%; width:100%; height:155.33%;
  max-width:none; object-fit:cover; z-index:-2;
}
.cta__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(82.05deg, rgba(46,46,48,.9) 12.092%, rgba(46,46,48,.045) 77.646%);
}
.cta__box{
  position:absolute; left:5.9375%; top:50%; width:48.4375%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  color:#fff;
}
.cta__t{
  margin:0; width:70.32%;
  font-weight:600;
  letter-spacing:var(--track-tight);
}
.cta__s{
  margin:0; width:69.35%;
  color:rgba(255,255,255,.85);
}

@media (max-width:860px){
  .cta{ padding-block:clamp(40px,15.24vw,64px); }
  .cta__card{
    aspect-ratio:380/589;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:8.42%;
  }
  .cta__bg{ left:0; top:0; width:100%; height:100%; }
  .cta__scrim{
    background:linear-gradient(38.31deg, rgba(46,46,48,.9) 31.028%, rgba(46,46,48,.045) 67.98%);
  }
  .cta__box{ position:static; width:100%; transform:none; }
  .cta__t{ width:100%; }
  .cta__s{ width:100%; }
  .cta__btn{ width:100%; }
}

/* ==========================================================================
   ECOSSISTEMA CONSISTEM — bento (Figma 1010:597 "Identidade Final" desktop
   + 1027:1006 mobile). As duas composições são desenhos diferentes, não uma
   reduzida a partir da outra — por isso cada caixa tem sua própria posição
   em % por breakpoint, todas sobre um container com o aspect-ratio exato do
   frame (assim o conjunto escala sem distorcer nenhuma imagem).
   ========================================================================== */
.eco-sec{ padding-block:clamp(48px,5.6vw,80px); }

.eco{
  --eco-rb: 18.928px;                 /* raio das caixas grandes */
  --eco-rs: 16px;                     /* raio das duas caixas pequenas */
  --tag-fs: clamp(20px, 2.277vw, 32.792px);
  --erp-fs: clamp(30px, 3.615vw, 52.054px);
  position:relative;
  width:100%;
  aspect-ratio: 1272.7765 / 629.3527;
}
.eco__item{ position:absolute; overflow:hidden; border-radius:var(--eco-rb); }
.eco__item img{ display:block; }

/* logo — Consistem símbolo centrado sobre grafite */
.eco__logo{
  left:0; top:0; width:23.611%; height:47.75%;
  background:var(--grafite);
  display:flex; align-items:center; justify-content:center;
}
.eco__logo img{ width:70.08%; height:auto; }

/* foto industrial — cover simples, sem geometria manual */
.eco__foto img{ width:100%; height:100%; object-fit:cover; }
.eco__foto{ left:25.842%; top:0; width:41.457%; height:47.75%; }

/* ícone do banco de dados — sangra por cima da caixa (top negativo), contido pelo overflow:hidden */
.eco__dados{ left:69.489%; top:0; width:30.511%; height:47.75%; background:var(--cinza-050); }
.eco__dados-img{
  position:absolute; left:8.842%; top:-3.148%; width:82.32%; height:106.3%;
  max-width:none; object-fit:cover; mix-blend-mode:multiply;
}

/* retrato em pontilhismo — a imagem é maior que a caixa e deslocada (valores
   exatos do Figma); o blend multiply funde o branco da ilustração com o cinza de fundo */
.eco__retrato{ left:0; top:52.25%; width:48.795%; height:47.75%; background:var(--cinza-050); }
.eco__retrato-mask{ position:absolute; inset:0; overflow:hidden; mix-blend-mode:multiply; }
.eco__retrato-mask img{
  position:absolute; left:2.5%; top:-21.37%; width:115.83%; height:167.63%; max-width:none;
}

/* cartão de produtos — seta + pilha de tags, ERP em destaque no meio.
   A pilha é mais alta que a caixa (assim como no Figma): topo e base saem
   cortados pelo overflow:hidden do .eco__item — inclusive "Data Warehouse". */
.eco__produtos{ left:51.026%; top:52.25%; width:35.966%; height:47.75%; background:var(--grafite); }
.eco__arrow{
  position:absolute; left:28.428%; top:42.271%; width:10.098%; height:15.386%;
  transform:rotate(90deg);
}
.eco__arrow svg{ width:100%; height:100%; display:block; }
.eco__stack{
  position:absolute; left:33.976%; top:-4.617%; width:59.792%;
  display:flex; flex-direction:column; align-items:flex-start; gap:0.2482em;
  font-size:var(--tag-fs);
}
.eco__tag{
  background:rgba(255,255,255,.1); color:#fff;
  padding:0.2069em 0.3311em; border-radius:0.183em;
  font-weight:600; letter-spacing:var(--track-tight); white-space:nowrap;
}
.eco__erp-wrap{ display:flex; padding-left:0.732em; }
.eco__tag--erp{
  font-size:var(--erp-fs); font-weight:800; letter-spacing:var(--track-tight);
  background:#fff; color:var(--grafite);
  padding:0.0384em 0.331em; border-radius:0.1655em;
}

/* as duas caixas pequenas — ícones centrados, raio menor que as grandes */
.eco__mini{ border-radius:var(--eco-rs); display:flex; align-items:center; justify-content:center; }
.eco__mini--engrenagem{ left:88.663%; top:52.25%; width:11.337%; height:21.8%; background:var(--grafite); }
.eco__mini--engrenagem img{ width:93.54%; height:auto; }
.eco__mini--frasco{ left:88.663%; top:78.199%; width:11.337%; height:21.8%; background:var(--cinza-050); }
.eco__mini--frasco img{ width:31.15%; height:auto; }

@media (prefers-reduced-motion: reduce){
  .eco__arrow{ transform:rotate(90deg); } /* decorativa e estática — não há o que reduzir */
}

@media (max-width:860px){
  .eco-sec{ padding-block:clamp(40px,15.24vw,64px); }
  .eco{
    --eco-rb: 17.716px;
    --eco-rs: 14.975px;
    --tag-fs: clamp(16px, 4.403vw, 18.491px);
    --erp-fs: clamp(24px, 6.989vw, 29.352px);
    aspect-ratio: 380 / 537.241;
  }
  .eco__logo{ width:44.343%; height:31.371%; }
  .eco__logo img{ width:63.59%; }
  .eco__foto{ left:48.552%; top:0; width:51.448%; height:31.315%; }
  .eco__dados{ left:0; top:68.671%; width:44.272%; height:31.315%; }
  .eco__dados-img{ left:0; top:-0.131%; width:99.61%; height:99.61%; }
  .eco__retrato{ left:0; top:34.328%; width:73.196%; height:31.315%; }
  .eco__retrato-mask img{ left:-0.08%; top:-7.96%; width:115.75%; height:134%; }
  .eco__produtos{ left:49.507%; top:68.634%; width:50.493%; height:31.353%; }
  .eco__arrow{ left:26.271%; top:38.792%; width:13.59%; height:15.47%; }
  .eco__stack{ left:33.732%; top:-8.363%; width:80.386%; }
  .eco__mini--engrenagem{ left:78.656%; top:34.328%; width:21.298%; height:14.325%; }
  .eco__mini--engrenagem img{ width:92.52%; }
  .eco__mini--frasco{ left:78.656%; top:51.379%; width:21.298%; height:14.325%; }
  .eco__mini--frasco img{ width:30.8%; }
}

/* ==========================================================================
   FOOTER — Figma [NOVO] Portal Consistem, node 763:3886
   ========================================================================== */
.ft{
  background:var(--grafite); color:#fff;
  border-radius:32px 32px 0 0;
  padding-block:clamp(48px,8vw,64px);
}
.ft__in{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(20px,3vw,32px);
}
.ft__logo{ height:40px; width:auto; }
.ft__tag{ margin:0; max-width:46ch; color:var(--grafite-300); }
.ft__copy{ margin:0; font-size:14px; color:#fff; }
.ft__social{ display:flex; gap:16px; align-items:center; }
.ft__social a{ display:flex; color:rgba(255,255,255,.6); transition:color .2s ease; }
.ft__social a:hover{ color:#fff; }
.ft__social svg{ display:block; width:16px; height:16px; }

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  .dimsvg__d, .dim__card{ transition:none; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1080px){
  .dim.is-scrolly .dim__track{ height:320vh; } /* 280vh de etapas + 40vh de espera (ver data-hold-vh) */
}

@media (max-width:860px){
  body{ font-size:16px; }
  .manifesto{ grid-template-columns:1fr; }
  .evol__in{ flex-direction:column; align-items:flex-start; }

  /* bento: empilha na ordem lógica — logo, cores, tipo, foto, fechamento.
     as colunas viram "display:contents" (somem do layout) para que os 5
     cards fiquem todos diretos no fluxo do .bento e o :order os reordene. */
  .bento{ display:flex; flex-direction:column; gap:16px; }
  .bento__col, .bento__row{ display:contents; }
  .id-card--logo{ order:1; }
  .id-card--cores{ order:2; flex:none; }
  .id-card--tipo{ order:3; }
  .id-card--foto{ order:4; }
  .id-card--fechamento{ order:5; }

  /* mobile (Figma 757:3208): a ilustração é grande e sangra pelo canto
     inferior esquerdo; o texto fica no topo, sobre a área limpa. */
  .stipple{ min-height:600px; }
  .stipple__bg{
    left:-12%; bottom:-50%; top:auto; right:auto;
    width:126%; height:auto; max-width:none;
  }
  .stipple__txt{
    min-height:0;
    justify-content:flex-start;
    padding:clamp(26px,7vw,34px);
    padding-bottom:0;
  }
  .stipple{ grid-template-columns:1fr; }

  /* mobile: o painel continua travado, mas diagrama e texto empilham dentro dele.
     A base sai do painel (o JS a move), então sobra altura para os dois. */
  .dim__grid{ grid-template-columns:1fr; gap:clamp(28px,7vw,44px); }
  /* diagrama acima. O clip contém o deslocamento do SVG (margin-left abaixo):
     a faixa cortada é só canvas vazio do viewBox, e sem ele a página ganha
     scroll horizontal no mobile. */
  .dim__viz{ display:flex; justify-content:center; overflow:hidden; }
  .dim.is-scrolly .dim__track{ height:300vh; } /* 260vh de etapas + 40vh de espera (ver data-hold-vh) */
  /* esse gap não tem efeito sozinho no mobile — a base sai do painel (JS),
     então .dim__panel fica só com um filho; o respiro até o bloco Confiança
     vem do padding-bottom aqui + padding-top que .dim__basewrap ganha abaixo */
  .dim.is-scrolly .dim__panel{ padding-block:clamp(28px,6vw,48px); }

  /* maior e centralizado: altura fixa e largura pelo aspecto.
     O viewBox tem ~20% de vazio à direita (os rótulos terminam em x≈710 de 900);
     o deslocamento compensa isso e centra o desenho, não a caixa. */
  .dimsvg{
    width:auto; max-width:100%; max-height:none;
    height:min(38svh, 300px);
    margin-left:25%;
    /* margin-top mesmo: .dim__viz tem order:2 (regra de desktop que também
       vale aqui, nunca foi resetada pro mobile) — isso inverte a ordem
       visual, o diagrama vem DEPOIS do texto/cards/barras de progresso,
       colado nas barras. O respiro precisa ir acima dele. */
    margin-top:32px;
  }

  .dim__h2{ max-width:none; }
  .dim__cards{ margin-top:clamp(18px,4vw,26px); }
  .dim__card h3{ font-size:clamp(26px,7vw,34px); }
  .dim__prog{ margin-top:clamp(20px,4vw,28px); }
  .dim__prog li{ width:auto; flex:1; }

  /* fora do painel: ganha o respiro de uma faixa própria — padding-top é
     o que separa o bloco Confiança do painel/diagrama, que agora só tem um
     filho ali dentro (a base saiu), então nada mais criava esse espaço */
  .dim__basewrap{ padding-block:clamp(32px,8vw,48px) clamp(56px,10vw,80px); }
  .dim__base{ padding:20px 22px; gap:8px 16px; }
  .dim__base__name{ font-size:clamp(22px,5.5vw,26px); }
  .dim__base__txt{ font-size:15px; }

  /* o hero sticky atrapalha em telas curtas: volta ao fluxo normal */
  .hero{ position:relative; height:auto; }
  .hero__in{ min-height:100svh; }
}

@media (max-width:620px){
  :root{ --gut:18px; }
  .pilares{ grid-template-columns:1fr; }
  .dim__base{ grid-template-columns:1fr; }
  .dim__base__name{ white-space:normal; }
  .btn{ width:100%; }
  .hero__cta, .cta__btns{ width:100%; }
  .hero__title{ font-size:36px; }
}