/* ==========================================================================
   Moza · páginas
   Depende de moza.css. Cada seção é um tempo: entrada, sustentação, saída.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */
.topo{position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background var(--medio),backdrop-filter var(--medio)}
.topo--rolado{background:rgba(5,7,10,.72);backdrop-filter:saturate(140%) blur(18px)}
.topo__linha{display:flex;align-items:center;gap:var(--s3);min-height:64px;padding-block:12px}
.topo__marca{display:flex;align-items:center;min-height:44px;flex:0 0 auto;line-height:0;
  opacity:0;transition:opacity var(--lento)}
.topo--rolado .topo__marca{opacity:1}
.topo__marca svg{width:82px;height:auto}
.topo__nav{display:none;gap:var(--s4);margin-inline:auto}
.topo__nav a{font-family:var(--f-display);font-size:14px;letter-spacing:.02em;
  color:var(--mudo);text-decoration:none;padding:8px 0;transition:color var(--medio)}
.topo__nav a:hover,.topo__nav a[aria-current="true"]{color:var(--claro)}
.topo__cta{display:none;margin-left:auto;padding:11px 22px;font-size:13.5px}
.topo__zap{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--fio-2);border-radius:999px;color:var(--ciano)}
.topo__zap svg{width:19px;height:19px}
@media (min-width:900px){
  .topo__nav{display:flex}.topo__cta{display:inline-flex}.topo__zap{display:none}
}

/* --------------------------------------------------------------------------
   Hero · a luz
   A palavra existe desde o começo e não se vê. O centro é a única coisa acesa.
   O cursor carrega luz; a rolagem faz a luz crescer a partir do centro.
   -------------------------------------------------------------------------- */
/* isolation:isolate é obrigatório aqui. A textura e os véus vivem em z-index
   negativo, e sem um contexto de empilhamento próprio eles caem atrás do
   fundo da própria seção: a foto carrega, ocupa a tela inteira, e não pinta
   um pixel. Custou uma tarde para achar. */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(var(--s4),6vh,var(--s5));
  padding:clamp(96px,14vh,150px) 0 clamp(var(--s5),9vh,var(--s6));overflow:hidden}

.marca{position:relative;width:min(88vw,1000px);aspect-ratio:780/176;
  --mx:39.9%;--my:48.9%;--raio:150px}
.marca__camada{position:absolute;inset:0}
.marca__camada svg{width:100%;height:100%;display:block;overflow:visible}
.marca__traco{fill:none;stroke-width:26;stroke-linecap:round;stroke-linejoin:round}

/* A palavra apagada: presente, quase invisível */
.marca__camada--base .marca__traco{stroke:rgba(230,237,243,.055)}

/* A palavra acesa, revelada só onde a luz alcança */
.marca__camada--luz .marca__traco{stroke:var(--claro)}
.marca__camada--luz{
  -webkit-mask-image:radial-gradient(circle var(--raio) at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,.72) 48%, transparent 76%);
  mask-image:radial-gradient(circle var(--raio) at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,.72) 48%, transparent 76%)}

/* O centro. Sempre aceso, e a luz que ele lança no escuro em volta. */
.marca__brasa{position:absolute;left:39.9%;top:48.9%;width:46%;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(0,180,255,.24) 0%,rgba(0,180,255,.07) 34%,transparent 66%);
  animation:respira 5.5s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.82;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
.marca__ponto{fill:var(--ciano)}

.hero__copy{display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  text-align:center;padding-inline:clamp(22px,5vw,var(--s5));max-width:660px}
.hero__copy .corpo{max-width:44ch}
.hero__botoes{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
  margin-top:var(--s1)}
@media (max-width:520px){.hero__botoes{width:100%}.hero__botoes .btn{flex:1 1 100%;justify-content:center}}

.hero__deixa{position:absolute;left:50%;bottom:clamp(20px,4vh,34px);transform:translateX(-50%);
  margin:0;font-family:var(--f-display);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mudo);opacity:.5;pointer-events:none}
@media (max-height:700px){.hero__deixa{display:none}}

/* --------------------------------------------------------------------------
   Tese · uma frase sozinha na tela
   -------------------------------------------------------------------------- */
.tese{max-width:22ch;margin-inline:auto;text-align:center}
.tese b{font-weight:300;color:var(--claro)}
.tese span{color:#3C4854}

/* --------------------------------------------------------------------------
   O espelho
   -------------------------------------------------------------------------- */
.dores{display:grid;gap:var(--s4);margin-top:clamp(var(--s4),5vw,var(--s5))}
.dores>*{min-width:0}
@media (min-width:820px){.dores{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}
.dor{display:flex;flex-direction:column;gap:12px;padding-top:var(--s3);
  border-top:1px solid var(--fio-2)}
.dor h3{margin:0;font-family:var(--f-display);font-weight:300;font-size:1.32rem;
  line-height:1.18;letter-spacing:-.016em;color:var(--claro)}
.dor p{margin:0;color:var(--mudo);font-size:17px;line-height:1.55}

/* --------------------------------------------------------------------------
   O método · cada etapa é um tempo
   -------------------------------------------------------------------------- */
.etapas{display:grid;gap:clamp(var(--s4),6vw,var(--s6));margin-top:clamp(var(--s4),5vw,var(--s5))}
.etapa{display:grid;gap:var(--s3);max-width:760px;margin-inline:auto;text-align:center;
  justify-items:center}
.etapa__papel{margin:0;font-family:var(--f-display);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ciano)}
.etapa__nome{margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.05;letter-spacing:-.028em;color:var(--claro)}
.etapa__frase{margin:0;color:var(--mudo);max-width:46ch;
  font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.48}
.etapa__itens{list-style:none;margin:var(--s1) 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px var(--s2);justify-content:center;max-width:56ch}
.etapa__itens li{font-family:var(--f-display);font-size:14.5px;letter-spacing:.02em;
  color:var(--mudo);padding:7px 15px;border:1px solid var(--fio);border-radius:999px}

/* --------------------------------------------------------------------------
   A prova · aqui entram o número e as fotos
   -------------------------------------------------------------------------- */
.placar{display:grid;gap:var(--s4);margin-top:clamp(var(--s4),5vw,var(--s5));
  text-align:center;justify-items:center}
@media (min-width:760px){.placar{grid-template-columns:repeat(3,1fr);gap:var(--s5)}}
.placar div{display:grid;gap:12px;justify-items:center}
.placar dt{font-family:var(--f-display);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mudo)}
.placar dd{margin:0}
.placar dd small{display:block;margin-top:var(--s2);font-size:14px;color:var(--mudo);
  line-height:1.5;max-width:24ch;font-family:var(--f-corpo);letter-spacing:0}

.obras{display:grid;gap:var(--s2);margin-top:clamp(var(--s4),5vw,var(--s5))}
.obras>*{min-width:0}
@media (min-width:820px){
  .obras{grid-template-columns:1.35fr 1fr;gap:var(--s3)}
  .obras figure:first-child{grid-row:span 2}
}
.obra{margin:0;display:flex;flex-direction:column;gap:14px}
.obra picture{display:block;border-radius:var(--canto);overflow:hidden;
  border:1px solid var(--fio);background:var(--breu-2);height:100%}
.obra img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.62) contrast(1.14) brightness(.78);
  transition:filter var(--lento),transform 1200ms cubic-bezier(.16,1,.3,1)}
.obra:hover img{filter:saturate(.92) contrast(1.04) brightness(.96);transform:scale(1.015)}
.obra figcaption{display:grid;gap:4px}
.obra__nome{margin:0;font-family:var(--f-display);font-size:14.5px;color:var(--claro)}
.obra__linha{margin:0;font-size:15.5px;color:var(--mudo);line-height:1.45}

.caso{display:grid;gap:var(--s4);margin-top:clamp(var(--s4),5vw,var(--s5));
  max-width:880px;margin-inline:auto}
@media (min-width:760px){.caso{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.caso__bloco{display:grid;gap:10px;align-content:start}
.caso__rot{margin:0;font-family:var(--f-display);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ciano)}
.caso__bloco h3{margin:0;font-family:var(--f-display);font-weight:300;font-size:1.35rem;
  line-height:1.16;letter-spacing:-.018em;color:var(--claro)}
.caso__bloco p{margin:0;color:var(--mudo);font-size:17px;line-height:1.55}

/* --------------------------------------------------------------------------
   Quem somos
   -------------------------------------------------------------------------- */
.socios{display:grid;gap:var(--s4);margin-top:clamp(var(--s4),5vw,var(--s5));max-width:820px;
  margin-inline:auto}
.socios>*{min-width:0}
@media (min-width:640px){.socios{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.socio{display:flex;flex-direction:column;gap:var(--s2);align-items:center;text-align:center}
.socio__retrato{width:120px;height:120px;border-radius:999px;border:1px solid var(--fio-2);
  background:var(--breu-2);display:grid;place-items:center;overflow:hidden}
.socio__retrato img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.socio__retrato svg{width:34px;height:34px;opacity:.35}
.socio__papel{margin:0;font-family:var(--f-display);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ciano)}
.socio__nome{margin:0;font-family:var(--f-display);font-weight:300;font-size:1.6rem;
  letter-spacing:-.02em;color:var(--claro)}
.socio p:last-child{margin:0;color:var(--mudo);font-size:17px;line-height:1.5;max-width:32ch}

/* --------------------------------------------------------------------------
   Perguntas
   -------------------------------------------------------------------------- */
.faq{max-width:760px;margin:clamp(var(--s4),5vw,var(--s5)) auto 0;
  border-top:1px solid var(--fio)}
.pergunta{border-bottom:1px solid var(--fio)}
.pergunta>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:var(--s3);
  padding-block:var(--s3);font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.3;letter-spacing:-.014em;
  color:var(--claro);transition:color var(--medio)}
.pergunta>summary::-webkit-details-marker{display:none}
.pergunta>summary:hover{color:var(--ciano)}
.pergunta__sinal{flex:0 0 auto;width:13px;height:13px;margin-top:8px;position:relative}
.pergunta__sinal::before,.pergunta__sinal::after{content:"";position:absolute;left:0;top:6px;
  width:13px;height:1px;background:var(--ciano);transition:transform var(--medio)}
.pergunta__sinal::after{transform:rotate(90deg)}
.pergunta[open] .pergunta__sinal::after{transform:rotate(0)}
.pergunta__resposta{margin:0;padding:0 0 var(--s3) calc(13px + var(--s3));color:var(--mudo);
  max-width:56ch;line-height:1.62}

/* --------------------------------------------------------------------------
   Chamada e rodapé
   -------------------------------------------------------------------------- */
.chamada{position:relative;overflow:hidden;border-top:1px solid var(--fio)}
.chamada::before{content:"";position:absolute;left:50%;top:50%;width:min(90vw,780px);
  aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(0,180,255,.11) 0%,transparent 62%)}
.chamada .env{position:relative}

.rodape{border-top:1px solid var(--fio);padding-block:clamp(var(--s5),8vw,var(--s6))}
.rodape__grade{display:grid;gap:var(--s4)}
.rodape__grade>*{min-width:0}
@media (min-width:760px){.rodape__grade{grid-template-columns:1.2fr 1fr;gap:var(--s5)}}
.rodape__marca svg{width:104px;height:auto}
.rodape__contatos{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rodape__contatos a{display:inline-flex;align-items:center;min-height:44px;color:var(--mudo);
  text-decoration:none;font-size:17px;transition:color var(--medio)}
.rodape__contatos a:hover{color:var(--ciano)}
.rodape__legal{margin:var(--s5) 0 0;padding-top:var(--s3);border-top:1px solid var(--fio);
  font-size:15px;color:var(--mudo);line-height:1.6;max-width:72ch}

/* --------------------------------------------------------------------------
   Até onde a gente entra
   Fecha a seção do método respondendo "quem executa, eu ou vocês?". É
   profundidade de execução, não card de plano: por isso não tem borda de
   cartão, não fica ao lado de nada e não repete a palavra plano.
   -------------------------------------------------------------------------- */
.entrega{max-width:700px;margin:clamp(var(--s5),7vw,var(--s6)) auto 0;
  display:grid;gap:var(--s3);text-align:center;justify-items:center;
  padding-top:clamp(var(--s4),5vw,var(--s5));border-top:1px solid var(--fio)}
.entrega__abre{margin:0;color:var(--mudo);max-width:48ch;
  font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.48}
.entrega__nome{margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;letter-spacing:-.024em;color:var(--claro)}
.entrega__nome em{font-style:normal;color:var(--ciano)}
.entrega__corpo{margin:0;color:var(--mudo);max-width:54ch;font-size:17.5px;line-height:1.55}

/* O pivô: é a frase que o cliente leva embora */
.entrega__pivo{margin:var(--s2) 0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.22;letter-spacing:-.02em;
  color:var(--claro);max-width:34ch;text-wrap:balance}

/* A saída manda a escolha para a reunião, que é o que segura o plano único */
.entrega__saida{margin:0;font-family:var(--f-display);font-size:15.5px;
  letter-spacing:.03em;color:var(--mudo);max-width:40ch}

/* --------------------------------------------------------------------------
   Duplo · texto de um lado, objeto travado do outro
   O padrão de seção de recurso da Apple: a mídia fica presa no meio da tela
   enquanto o texto rola, e troca de estado a cada batida. No celular não
   existe espaço para duas colunas, então o objeto sai e o texto assume.
   -------------------------------------------------------------------------- */
.duplo__grade{display:grid;gap:var(--s4)}
.duplo__grade>*{min-width:0}

.duplo__texto{display:grid}
.batida{min-height:auto;display:grid;align-content:center;gap:var(--s3);
  padding-block:clamp(var(--s4),5vh,var(--s5))}

.duplo__pino{display:none}

@media (min-width:900px){
  .duplo__grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(var(--s5),6vw,var(--s7));align-items:start}
  /* A coluna do objeto entra na ordem visual da direita, mas no DOM ela vem
     depois do texto: leitor de tela e teclado leem o conteúdo primeiro. */
  .duplo__pino{display:block;position:sticky;top:76px;height:calc(100svh - 76px);
    grid-column:2;grid-row:1}
  .duplo__texto{grid-column:1;grid-row:1}
  .batida{min-height:56svh}
}

.pino__quadro{position:relative;width:100%;height:100%;display:grid;
  place-items:center;overflow:hidden}
.pino__estado{position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity 700ms cubic-bezier(.16,1,.3,1),transform 900ms cubic-bezier(.16,1,.3,1)}
.pino__estado[data-vivo]{opacity:1;transform:none;pointer-events:auto}

/* Objeto tipográfico: a frase que resume a batida, em corpo grande */
.pino__frase{margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.03em;
  color:var(--claro);text-align:left;max-width:11ch}
.pino__frase em{font-style:normal;color:var(--ciano)}

/* Objeto de método: papel pequeno e nome grande */
.pino__papel{margin:0 0 var(--s2);font-family:var(--f-display);font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ciano)}
.pino__marco{display:grid;justify-items:start;max-width:12ch}

/* Contador de batidas: cinco traços que acendem. Existe porque o método é
   sequência de verdade, não porque numerar é bonito. */
.pino__reguas{display:flex;gap:7px;margin-top:var(--s4)}
.pino__reguas i{width:26px;height:2px;background:var(--fio-2);border-radius:2px;
  transition:background 500ms ease}
.pino__reguas i.aceso{background:var(--ciano)}

/* Objeto de imagem */
.pino__foto{width:100%;height:100%;display:grid;place-items:center}
.pino__foto picture{display:block;width:100%;height:78%;border-radius:var(--canto);
  overflow:hidden;border:1px solid var(--fio)}
.pino__foto img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.6) contrast(1.16) brightness(.76)}
.pino__legenda{margin:var(--s2) 0 0;font-family:var(--f-display);font-size:15px;
  letter-spacing:.02em;color:var(--mudo);text-align:center}

/* No celular a batida perde a altura de tela e vira leitura corrida */
@media (max-width:899px){
  .batida{padding-block:var(--s4);border-top:1px solid var(--fio)}
  .batida:first-child{border-top:0}
}

/* No desktop o objeto travado já mostra o papel e o nome da etapa. Repetir na
   coluna de texto lê como defeito. Some da vista, continua no leitor de tela:
   o objeto é aria-hidden, então quem escuta precisa ouvir daqui. */
@media (min-width:900px){
  .batida__cabeca{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* --------------------------------------------------------------------------
   O M
   O símbolo do carrossel, em chapa metálica. O material sai de gradiente e de
   aresta clara, não de imagem: assim ele escala sem perder nitidez e responde
   à luz da seção.
   -------------------------------------------------------------------------- */
.marcaM{width:100%;max-width:min(100%,520px);margin-inline:auto;display:block;overflow:visible}
.marcaM path{filter:drop-shadow(0 26px 60px rgba(0,60,120,.55))}

/* Painel de vidro, o recurso do carrossel que tira a página do preto chato */
.vidro{position:relative;border-radius:26px;padding:clamp(var(--s4),5vw,var(--s6));
  background:linear-gradient(150deg,rgba(120,180,240,.10),rgba(120,180,240,.02) 55%);
  border:1px solid rgba(180,215,255,.16);
  box-shadow:inset 0 1px 0 rgba(220,240,255,.14),0 30px 80px rgba(0,20,45,.5);
  backdrop-filter:blur(2px)}

/* As peças da roda: eixo, centro, raios, aro */
.pecas{display:grid;gap:var(--s4);margin-top:clamp(var(--s4),5vw,var(--s5))}
.pecas>*{min-width:0}
@media (min-width:760px){.pecas{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.peca{display:grid;gap:8px;align-content:start;padding-top:var(--s3);
  border-top:1px solid var(--fio-2)}
.peca h3{margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1;letter-spacing:-.026em;color:var(--ciano)}
.peca p{margin:0;color:var(--mudo);font-size:17.5px;line-height:1.5;max-width:34ch}

/* A régua do rodapé do carrossel, que vira assinatura de seção */
.trilha{display:flex;flex-wrap:wrap;justify-content:center;gap:10px var(--s3);
  margin-top:clamp(var(--s4),5vw,var(--s5));padding-top:var(--s3);
  border-top:1px solid var(--fio)}
.trilha span{font-family:var(--f-display);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mudo);transition:color var(--medio)}
.trilha span[data-aceso]{color:var(--ciano)}

/* O M emerge do fundo. Ele é o objeto que tira a página do preto chato, então
   chega de muito mais longe que o resto e cresce até ocupar o quadro. */
.pino__emergindo{width:100%;display:grid;place-items:center}
.pino__emergindo .marcaM{max-width:100%}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pino__emergindo{
      animation:mEmerge linear both;
      animation-timeline:view();
      animation-range:cover 18% cover 72%;
    }
    @keyframes mEmerge{
      0%   {opacity:0;transform:perspective(1600px) translate3d(0,120px,-1100px) rotateX(26deg) rotateZ(-8deg)}
      70%  {opacity:1;transform:perspective(1600px) translate3d(0,0,0) rotateX(0deg) rotateZ(0deg)}
      100% {opacity:1;transform:perspective(1600px) translate3d(0,0,60px) rotateX(-3deg)}
    }
    /* O painel de vidro chega inteiro, sem o recuo de saída: ele é o repouso
       da página e sair recuando estragaria o efeito de placa iluminada. */
    .vidro{
      animation:vidroChega linear both;
      animation-timeline:view();
      animation-range:entry 6% entry 78%;
    }
    @keyframes vidroChega{
      from{opacity:0;transform:perspective(1400px) translate3d(0,80px,-420px) rotateX(10deg)}
      to  {opacity:1;transform:perspective(1400px) translate3d(0,0,0) rotateX(0deg)}
    }
    /* A trilha do rodapé do carrossel acende o termo da seção */
    .trilha span{animation:trilhaAcende linear both;animation-timeline:view();
      animation-range:entry 30% cover 60%}
    @keyframes trilhaAcende{to{color:var(--claro)}}
    .trilha span[data-aceso]{animation:none;color:var(--ciano)}
  }
}

/* O M também no celular. Lá não existe objeto travado, e ele é justamente o
   que tira a página do preto: não pode faltar na tela pequena. */
.soMovel{display:none}
@media (max-width:899px){
  .soMovel{display:block;margin-top:var(--s5);padding-top:var(--s5);
    border-top:1px solid var(--fio)}
  .soMovel .marcaM{max-width:min(100%,340px)}
}

/* --------------------------------------------------------------------------
   Textura do hero
   O preto do hero com uma imagem escura por baixo, pedido do Kauan. Ela dá
   material sem competir: a marca continua sendo o assunto.
   -------------------------------------------------------------------------- */
/* A foto ganha camada própria. A máscara da luz muda a cada quadro logo
   acima dela, e sem camada separada o navegador refaz a imagem filtrada
   junto, toda vez. */
/* A textura fica maior que o hero de propósito: o afastamento leva a escala
   abaixo de 1 e sem essa folga a borda da foto apareceria. */
.hero__textura{position:absolute;inset:-7%;z-index:-2;display:block;
  pointer-events:none;overflow:hidden}
.hero__textura img{width:100%;height:100%;object-fit:cover;object-position:50% 56%;
  filter:grayscale(.66) brightness(.50) contrast(1.08);opacity:.86;
  transform:scale(var(--zoom,1));transform-origin:50% 56%;
  will-change:transform}
/* No retrato a foto é deitada e o corte come as laterais. Puxar para a roda,
   que é o que precisa sobreviver ao enquadramento. */
@media (max-width:899px){
  .hero__textura img{object-position:60% 56%}
}
/* Dois véus com trabalhos diferentes: o radial afunda as bordas para a marca
   ter onde aparecer, e o linear protege só a faixa de baixo, onde mora a copy.
   Um véu só fazia as duas coisas mal: ou a foto sumia, ou o texto perdia
   contraste. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(5,7,10,0) 26%, rgba(5,7,10,.62) 54%, rgba(5,7,10,.74) 76%, rgba(5,7,10,.94) 100%),
    radial-gradient(122% 96% at 50% 44%, rgba(5,7,10,.40) 0%, rgba(5,7,10,.76) 52%, rgba(5,7,10,.96) 86%)}

/* --------------------------------------------------------------------------
   O cabeçalho acompanha o tom da seção
   Ele é fixo e vive fora das seções, então não herda token nenhum. Quem manda
   é o data-tom no html, escrito pelo mesmo observador que troca o chão.
   -------------------------------------------------------------------------- */
.topo__marca img{transition:opacity var(--medio)}
.topo__marca .naEscura{display:block}
.topo__marca .naClara{display:none}

html[data-tom="claro"] .topo--rolado{
  background:rgba(255,255,255,.82);border-bottom:1px solid rgba(18,58,95,.10)}
html[data-tom="claro"] .topo__nav a{color:#5A7286}
html[data-tom="claro"] .topo__nav a:hover,
html[data-tom="claro"] .topo__nav a[aria-current="true"]{color:#0E2438}
html[data-tom="claro"] .topo__zap{border-color:rgba(18,58,95,.22);color:#0071AD}
html[data-tom="claro"] .topo__marca .naEscura{display:none}
html[data-tom="claro"] .topo__marca .naClara{display:block}

/* --------------------------------------------------------------------------
   O M em fundo claro
   O gradiente do fundo escuro lava sobre o claro. Aqui ele escurece e ganha
   aresta, que é como chapa metálica se comporta contra fundo claro.
   -------------------------------------------------------------------------- */
.tom-claro .marcaM path,.tom-cinza .marcaM path{
  fill:url(#acoClaro);filter:drop-shadow(0 20px 46px rgba(10,45,90,.26))}

/* Foto em fundo claro pede gradação oposta: escurecer sobre branco vira lama.
   Aqui ela clareia e ganha um toque de contraste para não lavar. */
.tom-claro .obra img,.tom-cinza .obra img,
.tom-claro .pino__foto img,.tom-cinza .pino__foto img{
  filter:saturate(.82) contrast(1.06) brightness(1.02)}
.tom-claro .obra:hover img,.tom-cinza .obra:hover img{
  filter:saturate(1) contrast(1.02) brightness(1.04)}

/* O painel de vidro em fundo claro vira placa de luz, não janela escura */
.tom-claro .vidro,.tom-cinza .vidro{
  background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(240,246,252,.7) 55%);
  border-color:rgba(18,58,95,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 60px rgba(16,40,66,.10)}

/* Botão fantasma precisa de borda visível sobre claro */
.tom-claro .btn--fantasma,.tom-cinza .btn--fantasma{color:#0E2438;border-color:rgba(18,58,95,.26)}
.tom-claro .btn--fantasma:hover,.tom-cinza .btn--fantasma:hover{border-color:#0E2438}

/* A régua do carrossel e as etiquetas de peça no claro */
.tom-claro .trilha span[data-aceso],.tom-cinza .trilha span[data-aceso]{color:var(--ciano-texto)}

/* --------------------------------------------------------------------------
   O acervo
   Padrão "Explore os detalhes" da Apple: lista de tópicos de um lado, a obra
   de outro. Clicar troca o painel. Cada tópico tem sua cor, toda ela dentro
   da família do azul da marca: dá vida sem abrir um segundo acento.
   -------------------------------------------------------------------------- */
.acervo{display:grid;gap:var(--s4);margin-top:clamp(var(--s4),5vw,var(--s5))}
.acervo>*{min-width:0}
@media (min-width:900px){
  .acervo{grid-template-columns:minmax(0,280px) minmax(0,1fr);
    gap:clamp(var(--s4),5vw,var(--s6));align-items:start}
}

.acervo__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
@media (max-width:899px){.acervo__lista{flex-direction:row;flex-wrap:wrap}}

.aba{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;
  font-family:var(--f-display);font-size:clamp(1rem,1.6vw,1.15rem);letter-spacing:-.01em;
  color:var(--mudo);background:transparent;border:1px solid var(--fio);
  border-radius:999px;padding:0 20px;min-height:46px;text-align:left;
  transition:color var(--medio),border-color var(--medio),background var(--medio)}
.aba:hover{color:var(--claro);border-color:var(--fio-2)}
.aba[aria-selected="true"]{color:var(--claro);border-color:transparent;
  background:var(--breu-3)}
.aba i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--fio-2);transition:background var(--medio),box-shadow var(--medio)}
.aba[aria-selected="true"] i{background:var(--tomAba);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tomAba) 22%,transparent)}
.aba b{font-weight:400;margin-left:auto;font-size:12px;color:var(--mudo);
  font-variant-numeric:tabular-nums}

.acervo__painel{position:relative}
.acervo__grupo{display:none;gap:var(--s3);grid-template-columns:1fr}
.acervo__grupo[data-vivo]{display:grid;animation:grupoEntra 620ms cubic-bezier(.16,1,.3,1) both}
@media (min-width:640px){.acervo__grupo[data-vivo]{grid-template-columns:1fr 1fr}}
@keyframes grupoEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.obraCard{margin:0;display:flex;flex-direction:column;gap:12px}
.obraCard picture{display:block;border-radius:14px;overflow:hidden;
  border:1px solid var(--fio);background:var(--breu-2);position:relative}
.obraCard img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;
  object-position:50% 0;transition:transform 900ms cubic-bezier(.16,1,.3,1)}
.obraCard:hover img{transform:scale(1.03)}
.obraCard figcaption{display:grid;gap:3px}
.obraCard__nome{margin:0;font-family:var(--f-display);font-size:16.5px;color:var(--claro)}
.obraCard__linha{margin:0;font-size:15px;line-height:1.45;color:var(--mudo)}
/* A série é um trabalho só, em dez vistas. Ela pede grade mais apertada e
   cartão sem legenda: nome e linha embaixo de cada foto repetiriam dez vezes
   a mesma informação. A nota em cima diz o que é, uma vez. */
.acervo__grupo--serie{grid-column:1/-1}
.acervo__nota{grid-column:1/-1;margin:0 0 var(--s2);max-width:62ch;
  font-size:15.5px;line-height:1.5;color:var(--mudo)}
@media (min-width:640px){.acervo__grupo--serie[data-vivo]{grid-template-columns:repeat(3,1fr)}}
.obraCard--vista{gap:0}
.obraCard--vista img{aspect-ratio:640/452;object-position:50% 50%}

.obraCard__tag{position:absolute;left:12px;top:12px;z-index:2;margin:0;
  font-family:var(--f-display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;color:#fff;
  background:color-mix(in srgb,var(--tomAba) 88%,black);
  box-shadow:0 2px 10px rgba(0,20,45,.3)}

/* --------------------------------------------------------------------------
   A roda se montando
   Preenche o objeto travado do método com o próprio assunto da seção: o centro
   existe primeiro, e cada etapa prende um raio nele. Não é enfeite, é o
   argumento desenhado.
   -------------------------------------------------------------------------- */
.rodaMonta{width:min(58%,260px);height:auto;margin-bottom:var(--s4);
  color:var(--claro);display:block}
.rodaMonta circle,.rodaMonta line{transition:opacity 700ms ease,stroke-width 700ms ease}

/* O nome da etapa não pode ser cortado. "Posicionamento" tem 14 caracteres e
   o quadro do objeto travado tem overflow escondido: max-width apertado aqui
   engolia a palavra. */
.pino__marco{max-width:100%}
.pino__frase{max-width:none;overflow-wrap:break-word;hyphens:none}
.pino__marco .pino__frase{font-size:clamp(1.6rem,3.4vw,2.7rem)}

/* --------------------------------------------------------------------------
   O campo · fundo vivo nas faixas de azul
   Ruído em camadas derivando devagar, com vinheta e grão. O grão é o que faz
   a superfície parecer material e não degradê de CSS.
   Referência de técnica: fundos WebGL com simplex noise. O que é nosso é a
   paleta (só azul, acento único) e a força baixa: tem que se notar no canto
   do olho, nunca de frente.
   -------------------------------------------------------------------------- */
.campo{isolation:isolate;overflow:hidden}
.rodape{position:relative}
.campo__tela{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block}
.campo > .env{position:relative;z-index:2}

/* --------------------------------------------------------------------------
   A emenda · a passagem de uma faixa para a outra
   O corte duro entre branco e azul-marinho denuncia que são dois blocos.
   Esta faixa carrega a cor de cima por 130px para dentro da seção de baixo,
   e a troca de tom vira travessia. O valor de --de entra pelo site.js, lido
   do data-chao do irmão anterior, para não haver cor escrita duas vezes.
   -------------------------------------------------------------------------- */
.secao::before,.rodape::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(48px,5vw,80px);z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,var(--de,transparent) 0%,transparent 100%);
  opacity:.5}
/* Degradê linear entre duas claridades distantes passa por um meio lavado e
   a faixa vira névoa. Estes passos desenham uma queda rápida no começo e
   uma cauda longa, que é como a luz realmente se apaga. */
@supports (background:linear-gradient(to bottom,color-mix(in srgb,#000 50%,transparent),transparent)){
  .secao::before,.rodape::before{
    background:linear-gradient(to bottom,
      var(--de,transparent) 0%,
      color-mix(in srgb,var(--de,transparent) 62%,transparent) 14%,
      color-mix(in srgb,var(--de,transparent) 32%,transparent) 34%,
      color-mix(in srgb,var(--de,transparent) 13%,transparent) 58%,
      color-mix(in srgb,var(--de,transparent) 4%,transparent) 79%,
      transparent 100%)}}
.secao > *:not(.campo__tela),.rodape > *:not(.campo__tela){position:relative;z-index:2}
.hero::before{display:none}

/* --------------------------------------------------------------------------
   O pop · o único micro-movimento do botão principal
   Anel que abre e some no clique. Um gesto, num lugar só, no botão que é o
   objetivo do site inteiro.
   -------------------------------------------------------------------------- */
.btn--primario{position:relative;
  transition:background var(--medio),transform 160ms cubic-bezier(.34,1.56,.64,1),box-shadow var(--medio)}
.btn--primario::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid var(--ciano);opacity:0;pointer-events:none}
.btn--primario:hover{transform:translateY(-1px);box-shadow:0 8px 24px -10px rgba(0,180,255,.55)}
.btn--primario:active{transform:translateY(0) scale(.975)}
.btn--primario:active::after{animation:pop 480ms ease-out}
@keyframes pop{
  0%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(1.28)}}
@media (prefers-reduced-motion:reduce){
  .btn--primario{transition:background var(--medio)}
  .btn--primario:hover,.btn--primario:active{transform:none}
  .btn--primario:active::after{animation:none}}

/* --------------------------------------------------------------------------
   O portal
   Um palco travado na tela por várias alturas de rolagem, com as cenas
   atravessando a profundidade uma a uma.

   A classe portal--vivo troca o modo de layout inteiro, não só a animação.
   Sem ela (sem JS, ou com prefers-reduced-motion) o palco é fluxo normal: as
   cenas ficam uma embaixo da outra, legíveis, e a roda fica parada montada.
   Com ela o palco vira grade empilhada, travada e com perspectiva.

   A altura do trilho entra pelo JS, do número de cenas vezes o passo. Não está
   escrita aqui de propósito: acrescentar uma cena no HTML não pede conta nova.
   -------------------------------------------------------------------------- */
.secao--portal{padding-top:clamp(var(--s3),3vw,var(--s5))}
.portal{position:relative}

/* Sem JS (ou com prefers-reduced-motion): fluxo normal, tudo legível, e a
   roda já montada. Os valores abaixo são o estado final; quando o motor roda,
   ele escreve os mesmos nomes no style do elemento e ganha por ser inline. */
.roda{--a:1;--r1:1;--r2:1;--r3:1;--r4:1;--cubo:1;--oco:1}
.portal__palco{display:block;text-align:center}
.portal__palco > .portal__bruma,.portal__palco > .portal__luz{display:none}
.portal__palco > .portal__cena{margin-inline:auto;
  padding-block:clamp(var(--s4),5vw,var(--s6))}
.portal__palco:not(.portal--vivo) > .roda,
.portal__palco:not(.portal--vivo) > .obra{width:min(62vw,380px)}
.portal__palco:not(.portal--vivo) > .portal__m{width:min(52vw,420px)}
.portal__palco > .roda,.portal__palco > .obra,.portal__palco > .portal__m{
  margin:0 auto clamp(var(--s4),5vw,var(--s6))}

/* Com JS */
.portal__palco.portal--vivo{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;text-align:initial;
  perspective:1200px;perspective-origin:50% 46%}
.portal--vivo > *{grid-area:1/1;margin:0}
.portal--vivo > .portal__bruma,.portal--vivo > .portal__luz{display:block}

/* Boca de túnel: o canto fecha um pouco para o meio virar o longe. */
.portal__bruma{width:100%;height:100%;pointer-events:none;
  background:radial-gradient(ellipse 76% 62% at 50% 46%,
    transparent 36%,rgba(14,52,92,.10) 100%)}

.portal__m{width:min(72vw,820px);max-width:none;height:auto;
  transform-origin:50% 50%;will-change:transform,opacity,filter}
/* A sombra do M custa caro quando ele cresce sete vezes: um desfoque de 46px
   vira 320px de raio. A profundidade já vem do foco, então ela sai. Precisa
   vencer a regra de tom, que também escreve filter. */
.tom-claro .portal__m path,.tom-cinza .portal__m path{filter:none}

.portal__luz{width:min(64vw,720px);aspect-ratio:1;border-radius:50%;
  pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(0,180,255,.42) 0%,rgba(0,180,255,.14) 38%,rgba(0,180,255,0) 68%)}

.portal--vivo .portal__m{
  transform:translateZ(calc(var(--mZ,0) * 1px));
  opacity:var(--mOp,1);
  filter:blur(calc(var(--mBorr,0) * 1px))}
.portal--vivo .portal__luz{opacity:var(--luz,0)}

/* No desktop a informação fica de um lado e o objeto do outro, que é o pedido
   antigo do Kauan. Agora a roda tem peso para sustentar essa metade. */
@media (min-width:900px){
  .portal--vivo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .portal--vivo > .portal__cena{grid-area:1/1;justify-self:end;text-align:left;
    max-width:42ch;padding-inline:var(--s5) var(--s4)}
  .portal--vivo > .portal__cena .etiqueta,
  .portal--vivo > .portal__cena .etapa__papel{justify-content:flex-start;text-align:left}
  .portal--vivo > .portal__cena .etapa__itens{justify-content:flex-start}
  .portal--vivo > .portal__cena h2,
  .portal--vivo > .portal__cena h3,
  .portal--vivo > .portal__cena p{margin-inline:0}
  .portal--vivo > .roda,
  .portal--vivo > .obra{grid-area:1/2;justify-self:start;margin-left:-7%}
  .portal--vivo > .portal__m,
  .portal--vivo > .portal__bruma,
  .portal--vivo > .portal__luz{grid-area:1/1/2/3;justify-self:center}
}

@media (max-width:899px){
  .portal__m{width:86vw}
  /* No celular a roda não cerca o texto: ela vira objeto acima dele. Um círculo
     grande o bastante para abraçar um bloco de texto alto não cabe em 393px de
     largura, e o anel acabaria cortando a frase. Duas linhas resolvem. */
  .portal--vivo{grid-template-rows:auto auto;
    align-content:center;justify-items:center;gap:clamp(var(--s3),5vw,var(--s5))}
  .portal--vivo > .roda,
  .portal--vivo > .obra{grid-area:1/1;align-self:end}
  .portal--vivo > .portal__cena{grid-area:2/1;align-self:start}
  .portal--vivo > .portal__m,
  .portal--vivo > .portal__bruma,
  .portal--vivo > .portal__luz{grid-area:1/1/3/2;align-self:center}
}

/* --------------------------------------------------------------------------
   As cenas do portal
   Cada bloco atravessa a tela: nasce longe e desfocado, chega ao plano da
   página, fica um tempo, e recua para trás da câmera enquanto o próximo já
   está vindo. O engate entre um e outro é o que dá a sensação de percurso.
   -------------------------------------------------------------------------- */
.portal__cena{max-width:min(84vw,42ch);text-align:center;pointer-events:none;
  will-change:transform,opacity,filter}
.portal__cena .etiqueta,.portal__cena .etapa__papel{justify-content:center;text-align:center}
.portal--vivo .portal__cena{
  transform:translateZ(calc(var(--z,0) * 1px));
  opacity:var(--op,1);
  filter:blur(calc(var(--borr,0) * 1px))}

/* Um degrau abaixo do display do topo: as batidas são subordinadas ao título
   da seção, e a hierarquia tem que aparecer no tamanho. */
.tela--m{font-size:clamp(2.1rem,5vw,3.6rem)}

/* --------------------------------------------------------------------------
   A roda
   No padrão da referência que o Kauan mandou. Três coisas mudaram e são as
   que separavam o desenho de uma roda de corrida de verdade:

   1. O aro é PRETO BRILHANTE, não cromado. Aro prata é de carro de rua. Em
      peça preta polida o que descreve a forma não é a cor, é a quina: o fio
      de especular na aresta virada para a luz.
   2. Os raios são dez, em Y. Cada um sai do cubo, abre em dois braços perto
      do aro e fecha vinte vãos. Raio reto é desenho de ícone.
   3. O pneu é muito mais gordo. Na referência o aro tem 54% do diâmetro; a
      versão anterior tinha 69%, e era isso que dava leitura de bicicleta.

   A luz vem de uma direção só, em userSpaceOnUse, para todas as peças.
   -------------------------------------------------------------------------- */
.roda{width:min(54vw,780px);height:auto;pointer-events:none;overflow:visible;
  --pneu:1;--faixa:1;--a:1;--r1:1;--r2:1;--r3:1;--r4:1;--r5:1;--cubo:1;--oco:1;--sai:0}
/* Um giro pequeno e um achatamento no eixo Y tiram a simetria perfeita, que é
   o que o olho lê como símbolo em vez de objeto. */
.roda__vista{transform-origin:230px 230px;transform:rotate(-3deg) scaleY(.94)}
.roda__corpo{transform-origin:230px 230px;
  transform:translateX(calc(var(--sai,0) * 760px)) rotate(calc(var(--sai,0) * 430deg))}
.roda__chao{fill:rgba(8,26,52,.30);filter:blur(13px);
  opacity:calc(var(--pneu,0) * .95);
  transform:translateX(calc(var(--sai,0) * 760px))}

/* A largura do pneu: o mesmo anel deslocado atrás. Não gira junto com a roda
   porque o ângulo de quem olha não muda quando a roda anda. */
.roda__profundidade{opacity:var(--pneu,0);
  transform:translateX(calc(var(--sai,0) * 760px))}
.roda__banda{fill:none;stroke:#080B0F;stroke-width:62}

/* ---- pneu ---- */
.roda__pneu{fill:none;stroke:url(#luzPneu);stroke-width:62;
  stroke-dasharray:1125;stroke-dashoffset:calc((1 - var(--pneu,0)) * 1125px);
  transform:rotate(-90deg);transform-origin:230px 230px}
.roda__grao{fill:none;stroke:url(#grao);stroke-width:62;
  mix-blend-mode:overlay;opacity:calc(var(--pneu,0) * .15)}
.roda__ombro{fill:none;stroke:rgba(228,241,255,.30);stroke-width:13;
  stroke-linecap:round;filter:blur(8px);
  opacity:calc(var(--pneu,0) * var(--pneu,0) * var(--pneu,0))}
.roda__recorte{fill:none;stroke:rgba(150,200,255,.24);stroke-width:4;
  stroke-linecap:round;filter:blur(3px);
  opacity:calc(var(--pneu,0) * var(--pneu,0) * var(--pneu,0))}
/* O anel mais claro entre a borracha e o aro. É a peça que faltava para a
   roda ter camadas em vez de ser um disco com um furo no meio. */
.roda__flanco{fill:none;stroke:url(#luzFlanco);stroke-width:35;
  stroke-dasharray:820;stroke-dashoffset:calc((1 - var(--a,0)) * 820px);
  transform:rotate(-90deg);transform-origin:230px 230px}
/* O talão: a sombra onde a borracha encosta no aro. Sem ela as duas peças
   parecem pintadas no mesmo plano. */
.roda__talao{fill:none;stroke:rgba(0,0,0,.6);stroke-width:8;filter:blur(4px);
  opacity:calc(var(--a,0) * var(--pneu,0))}

/* O xadrez do flanco, dissolvendo. Sai de um dasharray que encurta, não de
   doze caminhos desenhados a mão. */
.roda__xadrez{fill:none;stroke:var(--ciano);stroke-width:13;stroke-linecap:butt;
  stroke-dasharray:22 7 19 8 16 9 13 10 10 11 7 12 5 14 4 16 3 18 2 20 2 22;
  opacity:calc(var(--faixa,0) * .95)}

/* ---- aro, preto brilhante ---- */
.roda__poco{fill:url(#luzPoco);opacity:var(--a,0)}
.roda__lip{fill:none;stroke:url(#luzAro);stroke-width:11;
  stroke-dasharray:685;stroke-dashoffset:calc((1 - var(--a,0)) * 685px);
  transform:rotate(-90deg);transform-origin:230px 230px}
.roda__lipLuz{fill:none;stroke:rgba(238,247,255,.6);stroke-width:2.6;
  stroke-linecap:round;filter:blur(1.5px);
  opacity:calc(var(--a,0) * var(--a,0))}

/* ---- raios ---- */
.roda__par{transform-origin:230px 230px;
  transform:rotate(calc((1 - var(--r,0)) * -11deg));
  opacity:var(--r,0)}
.roda__raio{fill:url(#luzRaio)}
/* Em peça preta polida o fio de luz na quina é o que descreve a forma. Sem
   ele o raio vira um recorte chapado. */
.roda__raioLuz{fill:none;stroke:rgba(232,244,255,.38);stroke-width:1.8;
  stroke-linecap:round}

/* ---- cubo ---- */
.roda__cubo{fill:url(#luzCubo);transform-origin:230px 230px;
  transform:scale(calc(.7 + var(--cubo,0) * .3));opacity:var(--cubo,0)}
.roda__cuboAro{fill:none;stroke:rgba(196,218,240,.24);stroke-width:2;
  transform-origin:230px 230px;
  transform:scale(calc(.7 + var(--cubo,0) * .3));opacity:var(--cubo,0)}
.roda__furo{fill:#04070A;transform-origin:230px 230px;
  transform:scale(calc(.5 + var(--cubo,0) * .5));opacity:var(--cubo,0)}

/* O centro que ninguém construiu. Tracejado porque é ausência, não peça. */
.roda__oco{fill:none;stroke:var(--ciano);stroke-width:3;stroke-dasharray:3 11;
  stroke-linecap:round;opacity:calc(var(--oco,0) * .9);
  transform-origin:230px 230px;transform:scale(calc(.62 + var(--oco,0) * .38))}

.roda.tremendo{animation:bamba 2.1s ease-in-out infinite;transform-origin:50% 50%}
@keyframes bamba{
  0%,100%{transform:rotate(0deg)}
  26%{transform:rotate(1.8deg)}
  58%{transform:rotate(-1.3deg)}
  80%{transform:rotate(.7deg)}}
@media (prefers-reduced-motion:reduce){
  .roda.tremendo{animation:none}
}




/* --------------------------------------------------------------------------
   A barra de rolagem da casa
   Substitui a do sistema só onde existe ponteiro fino. Em toque a barra nativa
   já se esconde sozinha e uma barra fixa na borda só atrapalharia.

   Ela não é um tubo com um bastão dentro: é um mapa. Cada seção tem uma marca,
   a marca da seção em que você está fica acesa, e clicar nela pula para lá.
   Numa página com dois trechos travados isso deixa de ser enfeite e vira
   orientação.
   -------------------------------------------------------------------------- */
.rolagem{display:none}
@media (hover:hover) and (pointer:fine){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{width:0;height:0}

  .rolagem{display:block;position:fixed;top:0;right:0;bottom:0;width:18px;
    z-index:60;cursor:pointer;touch-action:none;
    -webkit-user-select:none;user-select:none}
  /* O trilho só aparece quando a mão chega perto. Parado, o que se vê é o punho. */
  .rolagem::before{content:"";position:absolute;top:16px;bottom:16px;right:8px;
    width:2px;border-radius:2px;background:rgba(122,152,184,.20);
    opacity:0;transition:opacity 200ms ease}
  .rolagem:hover::before,.rolagem.pegando::before{opacity:1}

  .rolagem__punho{position:absolute;right:7px;width:4px;min-height:44px;
    border-radius:4px;
    background:linear-gradient(180deg,#0A2340 0%,#0071AD 46%,#00B4FF 100%);
    box-shadow:0 0 14px rgba(0,180,255,.40);
    transition:width 180ms ease,right 180ms ease,box-shadow 180ms ease}
  .rolagem:hover .rolagem__punho,.rolagem.pegando .rolagem__punho{
    width:8px;right:5px;box-shadow:0 0 22px rgba(0,180,255,.75)}

  .rolagem__marca{position:absolute;right:8px;width:2px;height:2px;
    border-radius:50%;background:rgba(122,152,184,.45);
    transform:translateY(-50%);
    transition:background 220ms ease,width 220ms ease,right 220ms ease,
               height 220ms ease,box-shadow 220ms ease}
  .rolagem:hover .rolagem__marca{width:6px;height:6px;right:6px}
  .rolagem__marca.aqui{background:var(--ciano);width:6px;height:6px;right:6px;
    box-shadow:0 0 10px rgba(0,180,255,.9)}
  .rolagem:hover .rolagem__marca.aqui{width:8px;height:8px;right:5px}

  @media (prefers-reduced-motion:reduce){
    .rolagem::before,.rolagem__punho,.rolagem__marca{transition:none}
  }
}

/* --------------------------------------------------------------------------
   As chapas · o desenho do método
   A primeira versão era construção civil em isometria e puxava para
   arquitetura. Esta é a mesma ideia de processo em linguagem de precisão:
   cinco chapas finas que descem e assentam uma sobre a outra, alinhadas por
   dois pinos de registro.

   Empilhamento de passes, como gravura ou montagem ótica. Chapa fora de
   registro não fecha imagem nenhuma, que é exatamente o que a copy da seção
   diz: cinco etapas, uma ordem.

   Cada chapa traz uma marca em fio de cabelo do que aquela etapa faz. Sem
   isso seriam cinco retângulos iguais, e cinco retângulos iguais não contam
   história nenhuma.
   -------------------------------------------------------------------------- */
.obra{width:min(48vw,640px);height:auto;pointer-events:none;overflow:visible;
  --e1:1;--e2:1;--e3:1;--e4:1;--e5:1;--a1:0;--a2:0;--a3:0;--a4:0;--a5:0}
.obra__corpo{transform-origin:250px 300px}

/* A chapa desce e assenta. O gesto é de encaixe, não de aparecimento. */
.obra__camada{transform:translateY(calc((1 - var(--e,0)) * -74px));
  opacity:var(--e,0)}

.obra__chapa{fill:rgba(188,220,255,.055)}
.obra__canto{fill:rgba(188,220,255,.13)}
.obra__borda{fill:none;stroke:rgba(206,229,252,.40);stroke-width:1.4;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.obra__marca{fill:none;stroke:rgba(206,229,252,.30);stroke-width:1;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
/* O ciano passa só na chapa em foco e devolve o traço depois: o que já
   assentou continua visível, que é o ponto de uma pilha. */
.obra__foco{fill:none;stroke:var(--ciano);stroke-width:2;stroke-linejoin:round;
  opacity:var(--a,0);vector-effect:non-scaling-stroke}
/* Os pinos: o que diz que as chapas só servem alinhadas. */
.obra__pino{fill:none;stroke:rgba(206,229,252,.18);stroke-width:1.4;
  stroke-dasharray:4 5;vector-effect:non-scaling-stroke}

@media (max-width:899px){
  .obra{width:min(80vw,360px)}
}