html { scroll-behavior: smooth; }
        body { overflow-x: hidden; background: #08090b; }

        /* Grão de filme. É o que impede o fundo escuro de parecer um
           retângulo morto de CSS — dá textura sem pedir imagem. */
        .grao::after {
            content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* Revelação no scroll. Sem biblioteca: IntersectionObserver troca
           uma classe. Quem pediu menos movimento no sistema já nasce
           revelado — a animação nunca esconde conteúdo dessa pessoa. */
        .rev { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
        .rev.vis { opacity: 1; transform: none; }
        .rev-d1 { transition-delay: .09s } .rev-d2 { transition-delay: .18s }
        .rev-d3 { transition-delay: .27s } .rev-d4 { transition-delay: .36s }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            .rev { opacity: 1; transform: none; transition: none; }
        }

        .risco { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0)); }
        .num { font-variant-numeric: tabular-nums; }
        .display { line-height: .92; letter-spacing: -.035em; }
        .rail-on { color: #faf9f7; }
        .rail-on .rail-bar { width: 34px; background: #e79f1f; }

        /* O TRILHO SÓ APARECE QUANDO HÁ MARGEM PARA ELE.
           Ele era ligado no breakpoint lg (1024px) e posicionado a 24px
           da borda — mas o conteúdo mora num container de 1500px
           centralizado, então a margem livre à esquerda é
           (janela − 1500) / 2. Para o trilho (24px de recuo + ~110px de
           largura + folga) não pisar no texto, essa margem precisa de
           ~150px, o que só acontece a partir de 1720px de janela.
           Entre 1024 e 1720 ele aparecia EM CIMA das palavras.

           A tela do Victor é 1920 física com escala de 125% do Windows,
           ou seja 1536px para o navegador — bem no meio da faixa
           quebrada. No celular nunca apareceu, e por isso demorou.

           1760 = 1500 do container + 2 × 130 de trilho. Se o container
           mudar de largura, este número muda junto. */
        /* O TOPO ENCOLHE QUANDO SAI DA ABERTURA.
           O mix-blend-difference é bonito sobre fundo liso e vira
           confusão sobre parágrafo — "Souto" e "CONTATO →" ficavam
           escritos por cima do texto. Em vez de matar o efeito, o topo
           passa a ocupar o mínimo depois que a abertura sai da tela:
           a palavra vira o monograma e o "CONTATO" vira só a seta.
           O efeito continua; o que sai é o volume. */
        .topo { transition: padding .45s cubic-bezier(.16,1,.3,1); }
        /* O ENCOLHIMENTO É POR FONT-SIZE, NÃO POR OVERFLOW.
           A primeira versão usava inline-block + overflow:hidden +
           max-width. Funcionava, mas quebrava a linha de base: quando
           uma caixa inline-block tem overflow diferente de visible, a
           linha de base dela passa a ser a borda INFERIOR da caixa, e
           "Souto" saía renderizado como S com "outo" sobrescrito.
           font-size:0 colapsa o vão sem tirar o elemento do fluxo
           inline, então a linha de base continua sendo a do texto. */
        .topo .marca-resto,
        .topo .contato-palavra { font-size: 1em; opacity: 1;
            transition: font-size .45s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
        .topo-min .marca-resto,
        .topo-min .contato-palavra { font-size: 0; opacity: 0; }
        .topo-min .topo-linha { padding-top: .9rem; padding-bottom: .9rem; }
        .topo .contato-seta { display: inline-block; transition: transform .45s cubic-bezier(.16,1,.3,1); }
        .topo-min .contato-seta { transform: translateX(-.15em) scale(1.25); }
        @media (prefers-reduced-motion: reduce) {
            .topo, .topo .marca-resto, .topo .contato-palavra, .topo .contato-seta { transition: none; }
        }

        .trilho { display: none; }
        @media (min-width: 1760px) { .trilho { display: block; } }

        /* A PORTA PARA AS CERTIFICAÇÕES.
           O fundo dela é o fundo DE LÁ (#05100c com campo verde), não o
           do hub. É o que faz o bloco parecer uma janela para outro
           lugar em vez de mais um cartão desta página. */
        .porta-campo {
            background:
              radial-gradient(75% 120% at 12% 50%, rgba(47,180,137,.16), transparent 70%),
              #05100c;
        }
        .porta-emblema { width: 52px; height: 36px; }
        .porta-emblema rect { fill: #6ed3ae; }
        .porta-emblema .base { fill: #2fb489; }
        .porta-seta { transition: transform .35s cubic-bezier(.16,1,.3,1); }
        .group:hover .porta-seta { transform: translateX(.35rem); }
        @media (prefers-reduced-motion: reduce) { .porta-seta { transition: none; } }

.mascote-shadow {
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.5))
          drop-shadow(0 0 60px rgba(231,159,31,.28));
}