/* ==========================================================================
   Evolui — site institucional
   Cores, fontes e espacamentos da Evolui vem de tokens.css.
   As telas de cliente entram como captura de imagem, entao nenhuma cor de
   terceiro entra nesta folha: a paleta aqui e so a da Evolui.
   Animacao segue a regra dupla do design system: marketing e cinematico,
   a interface do produto dentro do demo continua contida.
   ========================================================================== */

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

/* Altura da barra fixa. O hero desconta para caber em uma tela; as ancoras
   do menu descontam para nao aterrissar por baixo da barra. */
:root{--altura-topo:76px}
@media (min-width:900px){:root{--altura-topo:80px}}
section[id]{scroll-margin-top:var(--altura-topo)}
html{scroll-behavior:smooth}
body{background:var(--ink-950);color:var(--text-on-dark);overflow-x:hidden}
img{max-width:100%;display:block}

/* --- Utilitarios de marca ------------------------------------------------ */

.micro-label{margin:0}
.acento{color:var(--gold-400)}
.acento-claro{color:var(--accent-strong)}
.ponto{color:var(--gold-500)}

.pular{position:absolute;left:var(--space-4);top:-6rem;z-index:30;
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  background:var(--gold-500);color:var(--text-on-gold);
  font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-sm);
  text-decoration:none;transition:top var(--duration-fast) var(--ease-out)}
.pular:focus{top:var(--space-4);color:var(--text-on-gold);text-decoration:none}

/* --- Header -------------------------------------------------------------- */

.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:var(--ink-950);
  background:color-mix(in srgb, var(--ink-950) 84%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-on-dark)}

.marca{display:inline-flex;align-items:baseline;gap:10px;
  min-height:44px;padding:var(--space-2) var(--space-2) var(--space-2) 0;
  font-family:var(--font-display);font-weight:var(--weight-extrabold);
  font-size:var(--text-xl);letter-spacing:-.03em;
  color:var(--text-on-dark);text-decoration:none;border-radius:var(--radius-sm)}
.marca svg{align-self:center}
.marca:hover{color:var(--text-on-dark);text-decoration:none}
.marca:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* --- Navegacao ----------------------------------------------------------- */
/* A barra comeca transparente por cima do video e ganha fundo depois que a
   pagina rola. Sem JS ela fica transparente, o que continua legivel: todas
   as secoes por baixo sao escuras. */

.topo{background:transparent;backdrop-filter:none;border-bottom-color:transparent;
  transition:background var(--duration-base) var(--ease-out),
             border-color var(--duration-base) var(--ease-out)}
.topo.rolado{background:color-mix(in srgb, var(--ink-950) 84%, transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--border-on-dark)}

.menu{display:none;gap:var(--space-1);margin-left:auto}
.menu a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 var(--space-3);border-radius:var(--radius-sm);
  font-family:var(--font-display);font-size:var(--text-sm);
  font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-on-dark-muted);text-decoration:none;
  transition:color var(--duration-fast) var(--ease-out)}
.menu a:hover{color:var(--gold-400);text-decoration:none}
.menu a:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.topo .topo-cta{display:none}

.hamburguer{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;
  border:0;background:transparent;color:var(--text-on-dark);cursor:pointer;
  border-radius:var(--radius-sm)}
.hamburguer:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* --- Menu de tela cheia -------------------------------------------------- */

.menu-tela{position:fixed;inset:0;z-index:40;background:var(--ink-950);
  display:flex;flex-direction:column;
  padding:var(--space-4) var(--space-5) var(--space-10)}
.menu-tela[hidden]{display:none}
.menu-tela-topo{display:flex;align-items:center;justify-content:space-between}
.menu-tela-topo .marca{cursor:default}
.menu-tela-topo .hamburguer{margin-left:0}

.menu-tela-links{display:flex;flex-direction:column;justify-content:center;
  flex:1;gap:var(--space-2)}
.menu-tela-links a{display:block;padding:var(--space-3) 0;
  font-family:var(--font-display);font-size:clamp(30px,8.6vw,var(--text-4xl));
  font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-tight);
  color:var(--text-on-dark);text-decoration:none;
  opacity:0;transform:translateY(14px);
  animation:entra .5s var(--ease-out) forwards}
.menu-tela-links a:nth-child(1){animation-delay:.04s}
.menu-tela-links a:nth-child(2){animation-delay:.10s}
.menu-tela-links a:nth-child(3){animation-delay:.16s}
.menu-tela-links a:nth-child(4){animation-delay:.22s}
.menu-tela-links a:hover{color:var(--gold-400);text-decoration:none}
.menu-tela-links a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.menu-tela-cta{width:100%}

body.menu-aberto{overflow:hidden}

@media (min-width:900px){
  .menu{display:flex}
  .topo .topo-cta{display:inline-flex;margin-left:var(--space-4)}
  .hamburguer{display:none}
  .menu-tela{display:none}
}

/* Sem JS o hamburguer nao abre nada, entao o menu horizontal aparece sempre. */
html:not(.js) .hamburguer{display:none}
html:not(.js) .menu{display:flex;flex-wrap:wrap;justify-content:flex-end}

/* --- Botoes -------------------------------------------------------------- */

.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 var(--space-6);border-radius:var(--radius-lg);
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:var(--text-base);line-height:1;text-decoration:none;
  transition:background var(--duration-fast) var(--ease-out),
             color var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-out)}
.btn:hover{text-decoration:none}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn-ouro{background:var(--gold-500);color:var(--text-on-gold)}
.btn-ouro:hover{background:var(--gold-600);color:var(--text-on-gold)}
.btn-fantasma{background:transparent;color:var(--text-on-dark);
  border:1px solid var(--border-on-dark)}
.btn-fantasma:hover{background:var(--ink-800);color:var(--text-on-dark);
  border-color:var(--neutral-700)}
.btn-compacto{min-height:44px;padding:0 var(--space-4);font-size:var(--text-sm)}
.btn-grande{min-height:60px;padding:0 var(--space-8);font-size:var(--text-lg);
  margin-top:var(--space-4)}

/* --- Secoes e trilho ----------------------------------------------------- */

.secao{padding:var(--space-16) var(--space-5)}
.secao-escura{background:var(--ink-950)}
.secao-clara{background:var(--neutral-50);color:var(--text-body)}
.secao-clara h2,.secao-clara h3{color:var(--text-primary)}

.trilho{max-width:1180px;margin:0 auto;display:grid;gap:var(--space-5)}
/* Sem isto, um filho largo (a galeria) estica a coluna em vez de rolar. */
.trilho > *{min-width:0}

.titulo-secao{font-size:clamp(1.7rem,4.8vw,var(--text-4xl));
  max-width:20ch;text-wrap:balance;margin:0 0 var(--space-8)}
.secao-escura .titulo-secao{color:var(--text-on-dark)}

@media (min-width:900px){
  .topo{padding:var(--space-4) var(--space-8)}
  .secao{padding:calc(var(--space-16) * 1.6) var(--space-8)}
  .trilho{grid-template-columns:minmax(9rem,14%) 1fr;gap:var(--space-8);align-items:start}
  .trilho > .micro-label{padding-top:.6em;position:relative}
  .trilho > .micro-label::after{content:"";position:absolute;left:0;bottom:-.9em;
    width:var(--space-8);height:1px;
    background:linear-gradient(90deg,var(--gold-500),transparent)}
}

/* ==========================================================================
   ANIMACAO — marketing, liberdade cinematica (regra dupla do design system)
   ========================================================================== */

.entra{opacity:0;transform:translateY(18px);
  animation:entra .62s var(--ease-out) forwards;
  animation-delay:calc(var(--i,0) * 90ms + 120ms)}
.entra[data-entra="0"]{--i:0}
.entra[data-entra="1"]{--i:1}
.entra[data-entra="2"]{--i:2}
.entra[data-entra="3"]{--i:3}
.entra[data-entra="4"]{--i:4}
.entra[data-entra="5"]{--i:5}
@keyframes entra{to{opacity:1;transform:none}}

.revela{opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.revela.dentro{opacity:1;transform:none}
.revela.dentro ~ .revela.dentro{transition-delay:60ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entra,.revela{opacity:1 !important;transform:none !important;
    animation:none !important;transition:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* --- Problema ------------------------------------------------------------ */

.dores{list-style:none;padding:0;margin:0 0 var(--space-12);display:grid;gap:var(--space-8)}
.dores li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);
  align-items:baseline;
  font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:clamp(1.3rem,3.6vw,var(--text-3xl));
  line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);
  color:var(--text-on-dark);max-width:24ch}
.dor-n{font-family:var(--font-mono);font-size:var(--text-sm);
  font-weight:var(--weight-regular);color:var(--gold-500)}

.virada{margin:0 0 var(--space-6);max-width:32ch;
  font-family:var(--font-display);font-size:var(--text-2xl);
  font-weight:var(--weight-semibold);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);color:var(--neutral-500)}
.virada strong{color:var(--text-on-dark);font-weight:var(--weight-extrabold)}

.entregavel{margin:0;max-width:52ch;font-size:var(--text-base);
  line-height:var(--leading-normal);color:var(--text-on-dark-muted);
  padding-left:var(--space-5);border-left:1px solid var(--border-on-dark)}

/* --- Sobre e contato ----------------------------------------------------- */

.apoio-longo{font-size:var(--text-lg);line-height:var(--leading-normal);
  color:var(--text-on-dark-muted);max-width:52ch;margin:0}
.apoio-longo strong{color:var(--text-on-dark);font-weight:var(--weight-semibold)}

.contato{text-align:center}
.contato-conteudo{max-width:1180px;margin:0 auto;display:grid;
  justify-items:center;gap:var(--space-4)}
.contato .titulo-secao{max-width:16ch;margin:0}
.contato-apoio{color:var(--text-body);font-size:var(--text-lg);
  max-width:42ch;margin:0;line-height:var(--leading-normal)}

/* --- Rodape -------------------------------------------------------------- */

.rodape{border-top:1px solid var(--border-on-dark);
  padding:var(--space-10) var(--space-5);display:flex;
  flex-direction:column;gap:var(--space-3)}
.rodape-marca{display:inline-flex;align-items:baseline;gap:9px;
  font-family:var(--font-display);font-weight:var(--weight-extrabold);
  font-size:var(--text-lg);letter-spacing:-.03em}
.rodape-marca svg{align-self:center}
.rodape p{margin:0;color:var(--text-on-dark-muted);font-size:var(--text-sm);max-width:52ch}
.rodape-links{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-2)}
.rodape-links a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--gold-400);font-size:var(--text-sm);
  font-family:var(--font-display);font-weight:var(--weight-medium);
  border-radius:var(--radius-sm)}
.rodape-links a:hover{color:var(--gold-300)}
.rodape-links a:focus-visible{outline:none;box-shadow:var(--focus-ring)}

@media (min-width:900px){
  .rodape{padding:var(--space-10) var(--space-8)}
}

/* ==========================================================================
   HERO — palco de video
   Camadas, de baixo para cima: video HLS, brilho eliptico borrado, grade
   vertical, varredura dourada, veu de gradientes. Tudo acima do video e
   CSS/SVG, entao o hero fica inteiro mesmo sem o video carregar — que e o
   caso no preview em artifact, onde a CSP bloqueia o stream.
   O ouro no lugar do verde/ciano do layout de referencia: a paleta e a da
   Evolui, definida em tokens.css.
   ========================================================================== */

.hero{position:relative;min-height:calc(100svh - var(--altura-topo));display:flex;flex-direction:column;
  justify-content:center;padding:var(--space-16) var(--space-5) var(--space-12);
  overflow:hidden;isolation:isolate;background:var(--ink-950)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-600),transparent);opacity:.5}

.palco{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink-950)}

/* --- Video --------------------------------------------------------------- */
/* Comeca invisivel e so aparece quando comeca a tocar: sem isso, um <video>
   sem stream pisca um retangulo preto por cima do brilho. */
.palco-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;border:0;
  /* Traz o video para a identidade: tira a cor de origem e reconstroi em
     ouro. Vale para qualquer clipe que entre aqui depois, nao so este. */
  filter:grayscale(1) sepia(1) saturate(1.75) brightness(1.04) contrast(1.06);
  transition:opacity 1.2s var(--ease-out)}
.palco-video.tocando{opacity:.6}

/* --- Brilho central ------------------------------------------------------ */
.palco-brilho{position:absolute;left:50%;top:-8%;translate:-50% 0;
  width:118%;max-width:1180px;height:56%;pointer-events:none;
  animation:pulsa 9s var(--ease-out) infinite alternate}
@keyframes pulsa{from{opacity:.5;transform:scaleY(.92)}to{opacity:1;transform:scaleY(1.08)}}

/* --- Grade vertical (25% / 50% / 75%) ------------------------------------ */
.palco-grade{position:absolute;inset:0;display:none}
.palco-grade i{position:absolute;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.10)}
.palco-grade i:nth-child(1){left:25%}
.palco-grade i:nth-child(2){left:50%}
.palco-grade i:nth-child(3){left:75%}

/* --- Varredura ----------------------------------------------------------- */
.palco-varredura{position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 40%,rgba(210,166,59,.16) 50%,transparent 60%);
  animation:varre 7s var(--ease-out) infinite}
@keyframes varre{0%{transform:translateX(-70%)}60%,100%{transform:translateX(70%)}}

/* --- Veu de leitura ------------------------------------------------------ */
/* Da esquerda e de baixo: e onde mora o texto. */
.palco-veu{position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink-950) 0%,rgba(10,10,11,.74) 32%,transparent 74%),
             linear-gradient(0deg,var(--ink-950) 1%,rgba(10,10,11,.58) 24%,transparent 60%)}

/* --- Conteudo ------------------------------------------------------------ */

.hero-conteudo{position:relative;max-width:1180px;margin:0 auto;width:100%}

/* --- Titulo -------------------------------------------------------------- */

.hero h1{margin:var(--space-4) 0 0;display:flex;flex-direction:column;gap:.22em;
  text-wrap:balance}
/* A premissa recua em tamanho E em peso: o olho pega a correcao primeiro. */
.h1-premissa{color:var(--neutral-500);font-weight:var(--weight-semibold);
  font-size:clamp(15px,2.4vw,21px);letter-spacing:0;max-width:34ch}
.h1-virada{color:var(--text-on-dark);font-weight:var(--weight-extrabold);
  text-transform:uppercase;letter-spacing:-.028em;line-height:1.02;
  font-size:clamp(40px,6.6vw,72px);max-width:15ch}

.hero-desc{margin:var(--space-6) 0 0;max-width:512px;font-size:14px;
  line-height:var(--leading-normal);color:rgba(245,242,233,.7)}

.acoes{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.acoes .btn{border-radius:var(--radius-full)}
.btn-seta{gap:var(--space-2);text-transform:uppercase;letter-spacing:.05em;
  font-weight:var(--weight-bold);font-size:var(--text-sm)}
.btn-seta svg{transition:transform var(--duration-base) var(--ease-out)}
.btn-seta:hover svg{transform:translateX(4px)}

.rolar{position:absolute;left:50%;bottom:var(--space-6);translate:-50% 0;
  width:26px;height:44px;border:1px solid var(--border-on-dark);
  border-radius:var(--radius-full);display:grid;place-items:start center;padding-top:8px}
.rolar span{width:3px;height:7px;border-radius:var(--radius-full);
  background:var(--gold-500);animation:rola 1.9s var(--ease-out) infinite}
.rolar:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@keyframes rola{0%{opacity:0;transform:translateY(0)}30%{opacity:1}
  70%{opacity:1;transform:translateY(12px)}100%{opacity:0;transform:translateY(14px)}}

@media (min-width:900px){
  .palco-grade{display:block}
  .hero{padding-left:var(--space-8);padding-right:var(--space-8)}
}

/* ==========================================================================
   Sem JS, nada pode sumir
   .revela comeca invisivel e so o JS a revela. Se o script falhar, a pagina
   inteira abaixo do hero desapareceria. A classe .js no <html> inverte isso.
   ========================================================================== */

html:not(.js) .revela{opacity:1;transform:none}

/* Menos movimento: zera tambem os atrasos, senao o conteudo fica em branco
   esperando um delay que nunca vai animar. */
@media (prefers-reduced-motion:reduce){
  .palco-brilho,.palco-varredura,.rolar span{animation:none !important}
  .menu-tela-links a{opacity:1 !important;transform:none !important;animation:none !important}
  .fontes,.resolvido{transition:none !important;transition-delay:0s !important}
  *,*::before,*::after{animation-delay:0s !important;transition-delay:0s !important}
}

/* ==========================================================================
   Botoes do hero com a mesma largura
   ========================================================================== */

.btn-par{min-width:15rem}
@media (max-width:420px){ .btn-par{min-width:0;width:100%} }


/* ==========================================================================
   PROBLEMA — sequencia encenada
   A versao anterior mostrava as tres fontes e a resolucao ao mesmo tempo:
   quatro caixas paradas, sem historia para ler. Agora e uma sequencia com
   tempo: as fontes entram uma a uma, o selo pergunta qual esta certo, e so
   entao elas recuam e a linha unica aparece.
   ========================================================================== */

.conflito{margin:0 0 var(--space-10);position:relative}

.fontes{display:grid;gap:var(--space-3);grid-template-columns:1fr;position:relative;
  transition:opacity .55s var(--ease-out) 2.3s, filter .55s var(--ease-out) 2.3s}

.fonte{padding:var(--space-4);border-radius:var(--radius-md);
  background:var(--ink-900);border:1px solid var(--border-on-dark);
  display:grid;gap:var(--space-2);position:relative;overflow:hidden;
  opacity:0;transform:translateY(10px)}
.conflito.dentro .fonte{animation:entra .45s var(--ease-out) forwards}
.conflito.dentro .fonte:nth-child(2){animation-delay:.15s}
.conflito.dentro .fonte:nth-child(3){animation-delay:.55s}
.conflito.dentro .fonte:nth-child(4){animation-delay:.95s}

.fonte-rot{font-family:var(--font-display);font-size:10px;
  font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--neutral-500)}
.fonte-dado{font-family:var(--font-mono);font-size:var(--text-base);
  color:var(--text-on-dark)}
/* O horario divergente e o ponto: pulsa em ambar quando o selo aparece. */
.fonte-dado b{font-weight:var(--weight-medium);color:var(--text-on-dark)}
.conflito.dentro .fonte-dado b{animation:pisca 1s var(--ease-out) 1.5s 2}
@keyframes pisca{0%,100%{color:var(--text-on-dark)}50%{color:var(--warning)}}

.fonte-caderno::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 17px,rgba(245,242,233,.07) 17px 18px)}
.fonte-planilha::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 42px,rgba(245,242,233,.07) 42px 43px),
             repeating-linear-gradient(180deg,transparent 0 20px,rgba(245,242,233,.07) 20px 21px)}
.fonte-zap .fonte-dado{display:inline-block;padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 2px;
  background:var(--ink-800);font-family:var(--font-body);font-style:italic}

/* O selo que nomeia o conflito. Sem ele o leitor nao sabe o que comparar. */
.conflito-selo{position:absolute;left:50%;top:-14px;translate:-50% 0;z-index:2;
  padding:5px var(--space-4);border-radius:var(--radius-full);
  background:var(--warning);color:#fff;
  font-family:var(--font-display);font-size:11px;font-weight:var(--weight-semibold);
  white-space:nowrap;opacity:0;transform:translateY(6px) scale(.9)}
.conflito.dentro .conflito-selo{
  animation:selo .5s var(--ease-out) 1.5s forwards, sai .4s var(--ease-out) 2.6s forwards}
@keyframes selo{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sai{to{opacity:0;transform:translateY(-6px) scale(.92)}}

.resolvido{margin-top:var(--space-4);padding:var(--space-5);
  border-radius:var(--radius-md);background:var(--ink-800);
  border:1px solid var(--gold-700);display:grid;gap:var(--space-2);
  opacity:0;transform:translateY(14px)}
.conflito.dentro .resolvido{animation:entra .55s var(--ease-out) 2.5s forwards}
.resolvido-rot{font-family:var(--font-display);font-size:10px;
  font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-400)}
.resolvido-dado{font-family:var(--font-mono);font-size:var(--text-base);color:var(--text-on-dark)}

.conflito.dentro .fontes{opacity:.28;filter:saturate(.4)}

@media (min-width:700px){ .fontes{grid-template-columns:repeat(3,1fr)} }


/* ==========================================================================
   GALERIA — as telas de verdade dos projetos
   Rola para o lado, gruda no centro, e a peca central e a unica em foco:
   as vizinhas recuam em opacidade e escala. Sao capturas reais das paginas,
   nao ilustracao — por isso vale a pena carregar imagem aqui.
   ========================================================================== */

.galeria-palco{max-width:1180px;margin:0 auto var(--space-8);min-width:0}
/* O painel de detalhe volta para a coluna de leitura; a galeria fica larga. */
.caso-envelope{max-width:1180px;margin:0 auto}

.galeria{display:grid;grid-auto-flow:column;grid-auto-columns:min(84vw,300px);
  gap:var(--space-5);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-block:var(--space-2) var(--space-5);
  scrollbar-width:none;
  /* As pecas somem esmaecendo nas bordas da caixa em vez de vazar para fora
     da pagina. Cada lado so ganha a esmaecida quando ha o que esconder dele:
     senao a primeira peca nasceria desbotada. */
  --fade-esq:0px;--fade-dir:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-esq),
                     #000 calc(100% - var(--fade-dir)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-esq),
             #000 calc(100% - var(--fade-dir)),transparent 100%)}
.galeria.tem-antes{--fade-esq:76px}
.galeria.tem-depois{--fade-dir:60px}
.galeria::-webkit-scrollbar{display:none}
.galeria:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-lg)}
.galeria.arrastando{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}

.obra{scroll-snap-align:start;cursor:pointer;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--ink-900);border:1px solid var(--border-on-dark);
  opacity:.62;transform:scale(.965);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),
             border-color var(--duration-base) var(--ease-out)}
.obra.foco{opacity:1;transform:scale(1);border-color:var(--gold-700)}
.obra.foco:hover{border-color:var(--gold-600)}
.obra:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Moldura de navegador: situa a captura como pagina, nao como print solto. */
.cromo{display:flex;align-items:center;gap:6px;
  padding:9px var(--space-4);background:var(--ink-800);
  border-bottom:1px solid var(--border-on-dark)}
.cromo i{width:8px;height:8px;border-radius:var(--radius-full);
  background:var(--ink-600);flex:none}
.cromo b{margin-left:var(--space-3);font-family:var(--font-mono);font-size:11px;
  font-weight:var(--weight-regular);color:var(--text-on-dark-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.obra-tela{background:var(--ink-950);display:grid}
.obra-tela img{width:100%;height:auto;display:block;
  aspect-ratio:1088 / 680;object-fit:cover;object-position:top center}

.obra-rot{padding:var(--space-4) var(--space-5) var(--space-5);display:grid;gap:3px}
.obra-tipo{font-family:var(--font-display);font-size:10px;
  font-weight:var(--weight-semibold);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-400)}
.obra-rot h3{margin:0;font-size:var(--text-lg);color:var(--text-on-dark);
  letter-spacing:var(--tracking-tight)}
.obra-rot p{margin:0;font-size:var(--text-sm);color:var(--text-on-dark-muted);
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}

.selo{font-family:var(--font-display);font-size:10px;font-weight:var(--weight-semibold);
  letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;
  border-radius:var(--radius-full);background:var(--ink-800);
  border:1px solid var(--border-on-dark);color:var(--text-on-dark-muted)}
.selo-ar{background:rgba(46,139,91,.16);border-color:rgba(46,139,91,.5);color:#71D6A3}

.obra-vaga{border-style:dashed}
.obra-tela-vaga{aspect-ratio:1088 / 680;display:grid;place-items:center;
  background:var(--ink-800)}
.obra-tela-vaga span{font-family:var(--font-display);font-size:46px;
  font-weight:var(--weight-extrabold);color:var(--gold-500);opacity:.55}

/* --- Controles ----------------------------------------------------------- */

.galeria-controles{display:flex;align-items:center;gap:var(--space-4)}
.gal-btn{width:44px;height:44px;flex:none;border-radius:var(--radius-full);
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--border-on-dark);background:transparent;
  color:var(--text-on-dark);
  transition:background var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out),
             opacity var(--duration-fast) var(--ease-out)}
.gal-btn:hover{background:var(--ink-800);border-color:var(--neutral-700)}
.gal-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.gal-btn[disabled]{opacity:.3;cursor:default;background:transparent}

.gal-trilho{flex:1;height:2px;background:var(--ink-700);
  border-radius:var(--radius-full);overflow:hidden}
.gal-trilho i{display:block;height:100%;background:var(--gold-500);
  border-radius:var(--radius-full);
  transition:width .25s var(--ease-out),margin-left .25s var(--ease-out)}

@media (min-width:820px){
  .galeria{grid-auto-columns:min(520px,46vw)}
}

/* Sem JS ninguem marca o foco, entao todas as pecas ficam legiveis. */
html:not(.js) .obra{opacity:1;transform:none}
html:not(.js) .galeria-controles{display:none}

/* ==========================================================================
   PROCESSO — a rolagem vertical vira avanco horizontal
   A secao fica alta, o miolo gruda na tela e os passos correm para o lado
   conforme se rola. Sem JS ou com menos movimento vira carrossel comum:
   o conteudo nunca depende do efeito para existir.
   ========================================================================== */

.processo-longo{position:relative;background:var(--neutral-50);color:var(--text-body)}
html.js .processo-longo{height:300vh}

.processo-fixo{position:sticky;top:var(--altura-topo);
  height:calc(100svh - var(--altura-topo));
  display:flex;flex-direction:column;justify-content:center;gap:var(--space-10);
  overflow:hidden}

.processo-cab{display:flex;align-items:center;gap:var(--space-6);
  width:100%;max-width:1180px;margin:0 auto;padding:0 var(--space-5)}
.processo-progresso{flex:1;height:2px;background:var(--border-subtle);
  border-radius:var(--radius-full);overflow:hidden}
.processo-progresso i{display:block;height:100%;background:var(--accent-strong);
  transform:scaleX(0);transform-origin:0 50%}

/* A trilha inteira anda: painel de abertura + os quatro passos. O painel
   existe tambem por medida — sem ele, em tela larga sobrava tao pouco
   percurso que o movimento horizontal nao aparecia. */
.processo-trilho{display:flex;gap:var(--space-10);align-items:start;
  padding-left:max(var(--space-5),calc((100vw - 1180px) / 2));
  padding-right:var(--space-16);will-change:transform}
.processo-abre{flex:none;width:min(82vw,520px);display:grid;gap:var(--space-4)}
.processo-abre h2{font-size:clamp(1.7rem,3.4vw,var(--text-4xl));margin:0;
  max-width:16ch;text-wrap:balance}
.processo-dica{margin:0;display:flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-display);font-size:var(--text-sm);
  font-weight:var(--weight-semibold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted)}
.processo-dica svg{animation:cutuca 1.8s var(--ease-out) infinite}
/* A instrucao muda com o gesto: no desktop a rolagem vertical panoramiza,
   no celular a trilha e arrastada com o dedo. */
.dica-curta{display:none}
@media (max-width:820px){
  .dica-longa{display:none}
  .dica-curta{display:inline}
}
@keyframes cutuca{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

.passos-h{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-10)}
.passos-h li{flex:none;width:min(78vw,430px);display:grid;
  gap:var(--space-3);align-content:start}
.passos-h h3{font-size:var(--text-2xl);margin:0;letter-spacing:var(--tracking-tight)}
.passos-h p{margin:0;color:var(--text-body);line-height:var(--leading-normal)}
.passo-num{width:40px;height:40px;border-radius:var(--radius-full);
  display:grid;place-items:center;
  background:var(--neutral-50);border:1px solid var(--accent-strong);
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent-strong)}

/* No celular a secao nao gruda. Prender uma tela inteira para mostrar um
   painel curto deixa a maior parte dela vazia, e no telefone o gesto
   natural para andar de lado ja e deslizar o dedo. */
@media (max-width:820px){
  html.js .processo-longo{height:auto;padding:var(--space-16) 0}
  .processo-fixo{position:static;height:auto;gap:var(--space-8)}
  .processo-trilho{overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline-start:var(--space-5);
    padding-bottom:var(--space-4);transform:none !important;
    scrollbar-width:none}
  .processo-trilho::-webkit-scrollbar{display:none}
  .passos-h li,.processo-abre{scroll-snap-align:start}
  .processo-progresso{display:none}
}

/* Sem JS: carrossel horizontal comum, sem grudar. */
html:not(.js) .processo-longo{padding:var(--space-16) 0}
html:not(.js) .processo-fixo{position:static;height:auto}
html:not(.js) .processo-trilho{overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline-start:var(--space-5);padding-bottom:var(--space-4)}
html:not(.js) .passos-h li,html:not(.js) .processo-abre{scroll-snap-align:start}
html:not(.js) .processo-progresso{display:none}

@media (prefers-reduced-motion:reduce){
  html.js .processo-longo{height:auto;padding:var(--space-16) 0}
  .processo-fixo{position:static;height:auto}
  .processo-trilho{overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline-start:var(--space-5);
    padding-bottom:var(--space-4);transform:none !important}
  .processo-dica svg{animation:none}
  .passos-h li,.processo-abre{scroll-snap-align:start}
  .processo-progresso{display:none}
}

/* ==========================================================================
   DETALHE — o painel que abre ao clicar numa solucao
   Estava dentro do bloco da orbita e saiu junto quando a orbita virou grade.
   ========================================================================== */

.caso-detalhe{position:relative;margin:0 0 var(--space-8);
  padding:var(--space-6);border-radius:var(--radius-lg);
  background:var(--ink-900);border:1px solid var(--gold-700)}
.caso-detalhe[hidden]{display:none}

.detalhe-fechar{position:absolute;right:var(--space-4);top:var(--space-4);
  min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-md);
  border:1px solid var(--border-on-dark);background:transparent;cursor:pointer;
  color:var(--text-on-dark-muted);font-family:var(--font-display);
  font-size:var(--text-sm);font-weight:var(--weight-medium);
  transition:color var(--duration-fast) var(--ease-out),
             background var(--duration-fast) var(--ease-out)}
.detalhe-fechar:hover{color:var(--text-on-dark);background:var(--ink-800)}
.detalhe-fechar:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.detalhe-corpo h3{margin:0 var(--space-16) var(--space-2) 0;
  font-size:var(--text-2xl);color:var(--text-on-dark);max-width:22ch;
  letter-spacing:var(--tracking-tight)}
.detalhe-linha{display:grid;gap:var(--space-2);margin-top:var(--space-5);
  padding-top:var(--space-4);border-top:1px solid var(--border-on-dark)}
.detalhe-rot{font-family:var(--font-display);font-size:10px;
  font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-400)}
.detalhe-linha p{margin:0;color:var(--text-on-dark-muted);
  line-height:var(--leading-normal);max-width:56ch}

@media (max-width:520px){
  .detalhe-fechar{position:static;margin-bottom:var(--space-4)}
  .detalhe-corpo h3{margin-right:0}
}