/* ==========================================================================
   Moza · sistema
   Fundo escuro é a base (seção 06 do brandbook). Ciano é acento único, teto de
   ~5% da área. Duas famílias: Jost no display, Manrope no corpo.

   A escala tipográfica é grande de propósito. Manchete aqui é fragmento curto
   com ponto final, não frase explicativa, e por isso pode ocupar a tela.
   ========================================================================== */

@font-face{font-family:'Jost';src:url('../fonts/jost-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-var.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;

  --breu:#05070A;            /* o chão, mais fundo que o preto de tela */
  --chao:#05070A;            /* o chão vivo: deriva de seção em seção */
  --breu-2:#0A0E13;
  --breu-3:#10161D;
  --claro:#E6EDF3;
  --mudo:#78848F;
  --ciano:#00B4FF;
  --tinta:#123A5F;

  --fio:rgba(230,237,243,.07);
  --fio-2:rgba(230,237,243,.15);

  --f-display:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --f-corpo:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --s1:8px;  --s2:16px; --s3:22px; --s4:34px; --s5:50px;
  --s6:70px; --s7:96px;  --s8:124px;

  --largura:1120px;
  --canto:2px;
  --lento:900ms cubic-bezier(.16,1,.3,1);
  --medio:520ms cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--chao);
  transition:background 1400ms linear}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:transparent;color:var(--claro);
  font-family:var(--f-corpo);font-size:18.5px;line-height:1.56;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
.etiqueta{margin:0;font-family:var(--f-display);font-weight:400;font-size:12.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mudo)}
.etiqueta--ciano{color:var(--ciano)}

/* Manchete de tela: fragmento curto, corpo grande, tracking apertado */
.tela{margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(2.6rem,7.2vw,5.6rem);line-height:1.02;letter-spacing:-.032em;
  text-wrap:balance}
.titulo{margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.026em;
  text-wrap:balance}
.sub{margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.45rem,2.6vw,1.95rem);line-height:1.18;letter-spacing:-.014em}

.corpo{margin:0;color:var(--mudo);max-width:58ch;font-size:18.5px;line-height:1.55}
.corpo--g{font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.45}
.corpo strong{color:var(--claro);font-weight:600}

/* Número grande com rótulo pequeno. Só onde o número é o assunto. */
.cifra{margin:0;font-family:var(--f-display);font-weight:300;
  font-size:clamp(3.4rem,9vw,6.5rem);line-height:.92;letter-spacing:-.045em;
  color:var(--claro);font-variant-numeric:tabular-nums}
.cifra em{font-style:normal;color:var(--ciano)}

/* --------------------------------------------------------------------------
   Estrutura. Cada seção é um tempo: entrada, sustentação, saída.
   -------------------------------------------------------------------------- */
.secao{padding-block:clamp(var(--s6),8.5vw,var(--s8));position:relative}
.secao--curta{padding-block:clamp(var(--s5),6vw,var(--s6))}
.env{width:100%;max-width:var(--largura);margin-inline:auto;
  padding-inline:clamp(22px,5vw,var(--s5))}
.env--estreito{max-width:800px}
.centro{text-align:center;display:flex;flex-direction:column;align-items:center}
.centro .corpo{margin-inline:auto}

/* --------------------------------------------------------------------------
   Botão
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--f-display);font-size:14.5px;font-weight:400;letter-spacing:.06em;
  text-decoration:none;padding:16px 30px;border-radius:999px;
  border:1px solid transparent;transition:background var(--medio),color var(--medio),
  border-color var(--medio),transform 180ms ease}
.btn:active{transform:scale(.985)}
.btn--primario{background:var(--ciano);color:#04141F;font-weight:500}
.btn--primario:hover{background:#38C7FF}
.btn--fantasma{background:transparent;color:var(--claro);border-color:var(--fio-2)}
.btn--fantasma:hover{border-color:var(--claro)}
.btn .seta{transition:transform var(--medio)}
.btn:hover .seta{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   Acessibilidade e movimento
   -------------------------------------------------------------------------- */
:focus-visible{outline:2px solid var(--ciano);outline-offset:4px;border-radius:var(--canto)}
.pular{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ciano);
  color:var(--breu);padding:14px 22px;font-family:var(--f-display);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;border-radius:0 0 var(--canto) 0}
.pular:focus{left:0;top:0}
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Uma entrada só por elemento, longa e suave. Nada de efeito espalhado. */
.entra{opacity:0;transform:translateY(22px);
  transition:opacity var(--lento),transform var(--lento)}
.entra.dentro{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .entra{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   Profundidade
   Um modelo físico só: a página é uma pilha de planos e a rolagem move uma
   câmera por eles. O bloco chega de longe, assenta no plano focal, sustenta,
   e recua quando sai. Entrada, sustentação, saída, agora no eixo Z.

   A perspectiva vai DENTRO do transform de cada bloco, nunca num ancestral:
   transform em ancestral quebra position:sticky, e o site depende de sticky
   nas seções de objeto travado.

   Roda na GPU por animação guiada por rolagem, sem JavaScript. Onde o
   navegador não suporta, o `.entra` clássico assume.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* O JavaScript de entrada para de mandar: quem manda é a rolagem */
    .entra{opacity:1;transform:none;transition:none}

    .entra,.batida{
      animation:atravessa linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
      will-change:transform,opacity;
    }

    @keyframes atravessa{
      0%   {opacity:0;   transform:perspective(1300px) translate3d(0,70px,-300px) rotateX(6deg)}
      24%  {opacity:1;   transform:perspective(1300px) translate3d(0,0,0) rotateX(0deg)}
      76%  {opacity:1;   transform:perspective(1300px) translate3d(0,0,0) rotateX(0deg)}
      100% {opacity:.28; transform:perspective(1300px) translate3d(0,-46px,-330px) rotateX(-5deg)}
    }

    /* Manchete de tela chega um pouco mais fundo, para o corpo alcançar antes */
    .tela,.tese{
      animation:atravessaFundo linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes atravessaFundo{
      0%   {opacity:0;   transform:perspective(1300px) translate3d(0,96px,-480px) rotateX(9deg);letter-spacing:.02em}
      28%  {opacity:1;   transform:perspective(1300px) translate3d(0,0,0) rotateX(0deg);letter-spacing:-.032em}
      74%  {opacity:1;   transform:perspective(1300px) translate3d(0,0,0) rotateX(0deg)}
      100% {opacity:.22; transform:perspective(1300px) translate3d(0,-60px,-420px) rotateX(-7deg)}
    }

    /* O objeto travado vive noutro plano, então deriva contra o texto.
       É essa diferença de velocidade que o olho lê como profundidade. */
    .pino__quadro{
      animation:planoDeriva linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes planoDeriva{
      from{transform:translate3d(0,5%,0) scale(.98)}
      to  {transform:translate3d(0,-5%,0) scale(1.02)}
    }

    /* A imagem deriva dentro da moldura: o truque de profundidade mais antigo
       que existe, e o que faz foto parada parecer filmada. */
    .pino__foto img,.obra img{
      animation:fotoDeriva linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes fotoDeriva{
      from{transform:scale(1.16) translate3d(0,-3.2%,0)}
      to  {transform:scale(1.16) translate3d(0,3.2%,0)}
    }
    .obra:hover img,.pino__foto:hover img{animation-play-state:paused}

    /* O hero: a câmera se afasta e a marca volta para o escuro de onde veio */
    .marca{
      animation:heroRecua linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes heroRecua{
      to{opacity:.2;transform:perspective(1500px) translate3d(0,-9%,-520px) rotateX(11deg)}
    }
    .hero__copy{
      animation:copyRecua linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 88%;
    }
    @keyframes copyRecua{
      to{opacity:0;transform:perspective(1300px) translate3d(0,-30px,-240px)}
    }
  }
}

/* ==========================================================================
   Tons de seção
   O hero é preto. O resto da página joga em branco, cinza e azul.

   Cada variante redefine os tokens dentro do próprio escopo, então todo
   componente acompanha sozinho. Nunca escreva cor literal num componente: se
   escrever, ele quebra na primeira seção de tom diferente.

   As cores de texto vêm do brandbook: azul-tinta #123A5F é a cor de texto em
   peça clara, definida na seção 06. Não é invenção.
   ========================================================================== */

/* Branco, o chão primário do corpo da página */
.tom-claro{
  --breu:#FFFFFF;
  --breu-2:#F4F7FA;
  --breu-3:#EAF0F7;
  --claro:#0E2438;          /* texto principal, azul quase preto */
  --mudo:#5A7286;           /* texto de apoio */
  --fio:rgba(18,58,95,.10);
  --fio-2:rgba(18,58,95,.20);
  --ciano-texto:#0071AD;    /* o ciano puro não passa contraste em texto claro */
  background:#FFFFFF;
  color:#0E2438;
}

/* Cinza frio. O leve viés de azul é o que separa cinza de tecnologia de
   cinza de escritório. */
.tom-cinza{
  --breu:#F2F5F9;
  --breu-2:#FFFFFF;
  --breu-3:#E7EDF4;
  --claro:#0E2438;
  --mudo:#5A7286;
  --fio:rgba(18,58,95,.11);
  --fio-2:rgba(18,58,95,.22);
  --ciano-texto:#0071AD;
  background:#F2F5F9;
  color:#0E2438;
}

/* Azul fundo. Uma faixa saturada, usada em momento de virada, com texto claro
   por cima. É o que impede a página clara de virar relatório corporativo. */
.tom-azul{
  --breu:#0A2340;
  --breu-2:#0E2C4E;
  --breu-3:#12365D;
  --claro:#EAF3FC;
  --mudo:#9DB8D2;
  --fio:rgba(200,225,250,.14);
  --fio-2:rgba(200,225,250,.26);
  --ciano-texto:#5CCBFF;
  background:#0A2340;
  color:#EAF3FC;
}

/* Preto, o tom do hero e do rodapé. Fecha o arco onde ele começou. */
.tom-preto{
  --breu:#05070A;
  --breu-2:#0A0E13;
  --breu-3:#10161D;
  --claro:#E6EDF3;
  --mudo:#78848F;
  --fio:rgba(230,237,243,.07);
  --fio-2:rgba(230,237,243,.15);
  --ciano-texto:#5CCBFF;
  background:#05070A;
  color:#E6EDF3;
}

/* Em tom claro o ciano puro só vive em preenchimento, nunca em texto pequeno */
.tom-claro .etiqueta--ciano,.tom-cinza .etiqueta--ciano,
.tom-claro .peca h3,.tom-cinza .peca h3,
.tom-claro .caso__rot,.tom-cinza .caso__rot,
.tom-claro .etapa__papel,.tom-cinza .etapa__papel,
.tom-claro .pino__papel,.tom-cinza .pino__papel,
.tom-claro .cifra em,.tom-cinza .cifra em,
.tom-claro .entrega__nome em,.tom-cinza .entrega__nome em,
.tom-claro .pino__frase em,.tom-cinza .pino__frase em{color:var(--ciano-texto)}

/* Superfície elevada em tom claro precisa de sombra, não de borda dura.
   Em tom escuro o fio basta, porque o contraste já separa. */
.tom-claro .cartao,.tom-cinza .cartao,
.tom-claro .obra picture,.tom-cinza .obra picture,
.tom-claro .pino__foto picture,.tom-cinza .pino__foto picture{
  box-shadow:0 1px 2px rgba(16,40,66,.05),0 14px 38px rgba(16,40,66,.08)}