/* --------------------------------------------------------------------------
   A fonte
   --------------------------------------------------------------------------
   O Inter mora no nosso servidor (public/fonts), e não no Google: são duas
   conexões a menos antes do primeiro texto aparecer, e nenhuma visita ao
   site passa por fora daqui.

   É um arquivo só por alfabeto, com todos os pesos dentro (fonte variável).
   O `unicode-range` faz o navegador baixar o segundo apenas se a página
   tiver algum caractere que não está no primeiro.

   `swap`: o texto aparece na hora, com a fonte do sistema, e troca quando o
   Inter chega.

   O endereço não leva `?v=`: ele tem que ser igual ao do `preload` no
   <head>, senão o navegador baixa a fonte duas vezes. Para trocar a fonte um
   dia, troque o nome do arquivo.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Home pública — Bastidor com Crachá
   --------------------------------------------------------------------------
   Só a home carrega este arquivo, e ela NÃO carrega o app.css: as cores são
   as mesmas do painel (os tokens abaixo repetem os de lá), mas os
   componentes são outros, e nomes em comum como .btn e .linha brigariam
   entre as duas folhas.

   A página, de cima para baixo:

     · a capa — o nome gigante atrás do busto, que se abre no scroll;
     · por trás da tela — um clique no Iarandu Trade, em seis passos que
       levam a cena presa ao lado;
     · o Sobre, com o crachá pendurado sob o menu: arrasta, balança, vira;
     · as Tecnologias, bolhas que flutuam;
     · os Reconhecimentos, diplomas em quadros pendurados na parede;
     · a Experiência, uma carteira de trabalho aberta;
     · a Formação, três elementos de uma tabela periódica;
     · o guia — o rosto que desce para o canto e comenta cada seção.

   O movimento mora em public/js/home.js. Desde 24/09/2026 ele roda também
   com "Reduzir movimento" ligado no aparelho (decisão do dono). Sem script
   a página aparece inteira (as entradas só se escondem com a classe `js`
   no <html>).
   ========================================================================== */

:root,
[data-theme="dark"] {
    --bg:           #121214;
    --bg-fundo:     #0c0c0e;
    --card:         #1c1c20;
    --card-2:       #232328;
    --card-3:       #2b2b32;
    --borda:        rgba(255, 255, 255, .08);
    --borda-h:      rgba(255, 255, 255, .16);
    --t1:           #ececf0;
    --t2:           #a8a8b4;
    /* --t3 aparece em texto pequeno: clareado até passar de 4,5:1 */
    --t3:           #8a8a96;
    --accent:       #5b9cf6;
    --accent-bg:    rgba(91, 156, 246, .10);
    --accent-bd:    rgba(91, 156, 246, .30);
    --accent-glow:  rgba(91, 156, 246, .12);
    /* O que é preenchido de azul (botão, selo) usa um azul mais fundo que o
       acento, com texto branco: branco sobre #5b9cf6 fica em 2,8:1, e sobre
       #2563eb chega a 5,2:1. O acento claro continua nos textos e detalhes. */
    --btn:          #2563eb;
    --btn-h:        #1d4ed8;
    --btn-borda:    #1e3a8a;
    --sobre-btn:    #ffffff;
    --tema-trilho:  #0c0c0e;
    --tema-borda:   rgba(255, 255, 255, .12);
    --tema-bola:    #2b2b32;
    --tema-bola-borda: rgba(255, 255, 255, .08);
    --tema-icone:   #5b9cf6;
    --tema-estrela: #5b9cf6;
    --poco:         #0c0c0e;
    --tecla-cima:   #2e2e35;
    --tecla-baixo:  #232328;
    --tecla-sombra: rgba(0, 0, 0, .55);
    --no-ar:        #34d399;
    /* o verde de status quando vira texto (em vigor, cursando, liberado) */
    --no-ar-texto:  #34d399;
    --sombra:       0 24px 48px rgba(0, 0, 0, .40);
    --sombra-leve:  0 10px 24px rgba(0, 0, 0, .28);
    --chao:         rgba(0, 0, 0, .55);
    --halo:         rgba(91, 156, 246, .30);
    --cordao:       #1f4a92;
    --cordao-texto: rgba(255, 255, 255, .72);
    --plastico:     linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .10));
    --plastico-borda: rgba(255, 255, 255, .20);
    --capa-tinta:   #e3e8f2;
    --ease:         cubic-bezier(.16, 1, .3, 1);
    color-scheme: dark;
}

[data-theme="light"] {
    --bg:           #f4f6fa;
    --bg-fundo:     #eef1f7;
    --card:         #ffffff;
    --card-2:       #f7f9fc;
    --card-3:       #e7ecf4;
    --borda:        rgba(0, 0, 0, .07);
    --borda-h:      rgba(0, 0, 0, .18);
    --t1:           #0f172a;
    --t2:           #475569;
    /* no claro, acento e --t3 mais fundos: #3b82f6 e #78849a ficavam em
       3,4:1 sobre o fundo, abaixo dos 4,5:1 que texto pequeno pede */
    --t3:           #5f6b7f;
    --accent:       #2563eb;
    --accent-bg:    rgba(59, 130, 246, .08);
    --accent-bd:    rgba(59, 130, 246, .28);
    --accent-glow:  rgba(59, 130, 246, .07);
    --btn:          #2563eb;
    --btn-h:        #1d4ed8;
    --btn-borda:    #1e40af;
    --sobre-btn:    #ffffff;
    --tema-trilho:  #e7ecf4;
    --tema-borda:   rgba(15, 23, 42, .10);
    --tema-bola:    #ffffff;
    --tema-bola-borda: rgba(15, 23, 42, .06);
    --tema-icone:   #2563eb;
    --tema-estrela: rgba(37, 99, 235, .6);
    --poco:         #e2e8f1;
    --tecla-cima:   #ffffff;
    --tecla-baixo:  #eef2f8;
    --tecla-sombra: rgba(15, 23, 42, .16);
    --no-ar:        #10b981;
    /* #10b981 como texto fica em 2,5:1 no branco; #047857 passa de 4,8:1 */
    --no-ar-texto:  #047857;
    --sombra:       0 20px 44px rgba(15, 23, 42, .10);
    --sombra-leve:  0 8px 20px rgba(15, 23, 42, .07);
    --chao:         rgba(15, 23, 42, .18);
    --halo:         rgba(59, 130, 246, .20);
    --cordao:       #2563eb;
    --cordao-texto: rgba(255, 255, 255, .86);
    --plastico:     linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(226, 233, 244, .75) 60%, rgba(255, 255, 255, .9));
    --plastico-borda: rgba(15, 23, 42, .14);
    --capa-tinta:   #0f172a;
    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--t2);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    transition: background .3s, color .3s;
    /* `clip`, e não `hidden`: hidden cria um contêiner de rolagem e mata o
       position:sticky de tudo que estiver dentro. */
    overflow-x: clip;
}

h1, h2, h3 { margin: 0; color: var(--t1); letter-spacing: -.03em; text-wrap: pretty; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
main { display: block; }
[hidden] { display: none !important; }

/* os ícones vêm do sprite (partials/home/icones); o sprite em si não
   ocupa espaço nem aparece */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; }

/* para quem navega pelo teclado: aparece só com foco */
.pular {
    position: absolute;
    left: max(12px, env(safe-area-inset-left, 0px));
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--btn);
    color: var(--sobre-btn);
    font-weight: 700;
    transition: top .2s var(--ease);
}

.pular:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */

.topo {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 20px;
    /* Os lados respeitam a câmera do iPhone deitado (01/10/2026); em pé e
       no computador a área segura é 0 e fica o 28 de sempre. */
    padding: 0 max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--borda);
}

/* 7px a mais em cima e embaixo: a área de toque chega a 44px sem mexer no desenho */
.marca { display: flex; align-items: center; gap: 11px; padding-block: 7px; margin-block: -7px; }
.marca__nome { white-space: nowrap; }
.topo__links a { white-space: nowrap; }

/* entre 1001 e 1180px o topo leva tudo: nome, seis links, idioma, tema e
   Entrar. Aqui ele fica mais apertado, em vez de quebrar em duas linhas. */
@media (min-width: 1001px) and (max-width: 1100px) {
    /* nessa faixa o nome escrito não cabe junto com os seis links em
       espanhol: fica só o selo, que já leva à home */
    .marca__nome { display: none; }
}

@media (min-width: 1001px) and (max-width: 1180px) {
    .topo { gap: 12px; padding: 0 18px; }
    .topo__links { gap: 0; }
    .topo__links a { padding: 0 8px; font-size: 13.5px; }
    .topo__acoes { gap: 6px; }
    .idiomas { padding: 2px; }
    .idiomas__op { min-width: 28px; height: 26px; padding: 0 5px; font-size: 11px; }
}

.marca__selo {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--btn);
    color: var(--sobre-btn);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -.02em;
}

.marca__nome { font-weight: 700; font-size: 15.5px; color: var(--t1); letter-spacing: -.02em; }

.topo__links { display: flex; gap: 2px; margin-left: auto; }
.topo__acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.topo__links a {
    position: relative;
    height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--t2);
    transition: color .2s var(--ease);
}

.topo__links a:hover,
.topo__links a[aria-current="true"] { color: var(--t1); }

.topo__links a::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 5px;
    height: 1.5px;
    border-radius: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform .3s var(--ease);
}

.topo__links a[aria-current="true"]::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   O interruptor de tema
   --------------------------------------------------------------------------
   Um trilho com uma bola que desliza: à esquerda é dia (sol), à direita é
   noite (lua, com três estrelas acendendo no trilho). As cores são as do
   site — trilho e bola nos cinzas, o ícone no azul — e a altura é a do
   Entrar ao lado: o único azul cheio do topo continua sendo o Entrar.

   O sol vira lua pela máscara — uma "sombra" redonda entra por cima e
   morde o círculo, e os raios giram e somem.

   A bola passa um pouco do ponto e volta: é a mola que dá o jeito de
   interruptor de verdade.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   O idioma — três teclas
   --------------------------------------------------------------------------
   Um painel de verdade, como os outros objetos de pegar do site (o crachá,
   as bolhas, os diplomas): três teclas num poço, a escolhida fica afundada
   e acende a luzinha de cima. No toque ela afunda na hora, antes de a
   página nova chegar (o home.js troca a classe e segura a navegação uns
   instantes, para dar tempo de ver).

   São links comuns: sem JavaScript, o servidor guarda a escolha num cookie
   e devolve a página pronta. No celular as teclas saem do topo (que já está
   cheio) e aparecem maiores dentro do menu.
   -------------------------------------------------------------------------- */

.idiomas,
.menu-celular__idiomas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 11px;
    background: var(--poco);
    transition: background .45s var(--ease);
}

.idiomas { width: 126px; height: 38px; }

.idiomas__op {
    position: relative;
    display: grid;
    place-items: center;
    padding-top: 6px;           /* o lugar da luzinha, em cima da sigla */
    border-radius: 8px;
    background: linear-gradient(var(--tecla-cima), var(--tecla-baixo));
    box-shadow: 0 1.5px 0 var(--tecla-sombra), inset 0 0 0 1px var(--borda);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--t2);
    text-decoration: none;
    transition: translate .12s var(--ease), box-shadow .12s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

/* a luzinha: apagada em todas, acesa na escolhida */
.idiomas__op::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--t3);
    opacity: .35;
    transition: background .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
}

/* Hover só onde há um ponteiro que paira (01/10/2026, o mesmo do painel).
   No celular o :hover fica GRUDADO no que se tocou (o cartão levantado, o
   botão aceso). Todo :hover de enfeite mora num @media (hover: hover), no
   mesmo lugar de antes; o computador não muda. */
@media (hover: hover) { .idiomas__op:hover { color: var(--t1); } }

/* a escolhida, e a que está sendo apertada: afundadas no poço */
.idiomas__op--agora,
.idiomas__op:active {
    translate: 0 1.5px;
    box-shadow: 0 0 0 var(--tecla-sombra), inset 0 1px 3px var(--tecla-sombra);
}

.idiomas__op--agora,
.idiomas__op--agora:hover {
    background: var(--tecla-baixo);
    color: var(--accent);
}

.idiomas__op--agora::before {
    background: var(--accent);
    opacity: 1;
    box-shadow: 0 0 6px var(--accent);
}

/* abaixo de 1000px o topo não comporta mais nada: as teclas estão no menu */
@media (max-width: 1000px) {
    .topo__acoes .idiomas { display: none; }
}

.menu-celular__rotulo, .menu-celular__idiomas { display: none; }

@media (max-width: 1000px) {
    /* o rótulo separa as teclas da lista de seções */
    .menu-celular__rotulo {
        display: block;
        margin-top: 18px;
        text-align: center;
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--t3);
    }

    /* no meio e com largura de leitura: na tela deitada elas atravessariam
       a tela inteira */
    .menu-celular__idiomas {
        display: grid;
        width: 100%;
        max-width: 420px;
        height: 52px;
        gap: 4px;
        margin: 10px auto 0;
        padding: 4px;
        border-radius: 14px;
    }

    /* o `a` na tecla: sem ele, a regra dos links do menu ganharia — ela dá
       altura, borda embaixo e pinta o item atual de azul */
    .menu-celular .menu-celular__idiomas a.idiomas__op {
        display: grid;
        place-items: center;
        height: auto;
        padding: 7px 6px 0;
        border: 0;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .04em;
        color: var(--t2);
    }

    .menu-celular .menu-celular__idiomas a.idiomas__op--agora { color: var(--accent); }

    .menu-celular__idiomas .idiomas__op::before {
        top: 7px;
        width: 5px;
        height: 5px;
        margin-left: -2.5px;
    }
}

.tema {
    --mola: cubic-bezier(.34, 1.4, .64, 1);
    position: relative;
    flex-shrink: 0;
    width: 68px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--tema-borda);
    background: var(--tema-trilho);
    cursor: pointer;
    overflow: hidden;
    /* durante a troca, o interruptor fica numa camada própria, acima do
       círculo que cobre a página — ele não some no meio da animação */
    view-transition-name: tema-interruptor;
    transition: background .45s var(--ease), border-color .45s var(--ease);
}

@media (hover: hover) { .tema:hover { border-color: var(--accent-bd); } }
.tema:focus-visible { border-radius: 999px; }

.tema__bola {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tema-bola);
    color: var(--tema-icone);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22), inset 0 0 0 1px var(--tema-bola-borda);
    transition: translate .55s var(--mola), scale .2s var(--ease), background .45s var(--ease), color .45s var(--ease);
}

[data-theme="dark"] .tema__bola { translate: 30px 0; }
.tema:active .tema__bola { scale: .88; }

.tema__bola svg { width: 17px; height: 17px; overflow: visible; }

.tema__astro,
.tema__raios {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform .55s var(--mola), opacity .3s var(--ease);
}

.tema__sombra { transition: transform .55s var(--ease); }

/* dia: sol pequeno, raios à mostra, a sombra longe */
.tema__astro { transform: scale(.7); }
.tema__sombra { transform: translate(10px, -10px); }

/* noite: o círculo cresce, a sombra morde, os raios giram e somem */
[data-theme="dark"] .tema__astro { transform: scale(1.12); }
[data-theme="dark"] .tema__sombra { transform: translate(0, 0); }
[data-theme="dark"] .tema__raios { transform: rotate(-90deg) scale(.4); opacity: 0; }

/* estrela de quatro pontas, e não ponto: em 2px um ponto parece sujeira
   na tela; a forma de estrela se lê mesmo pequena */
.tema__estrela {
    position: absolute;
    fill: var(--tema-estrela);
    opacity: 0;
    scale: 0;
    rotate: -90deg;
    transition: opacity .3s var(--ease), scale .45s var(--mola), rotate .45s var(--ease);
}

.tema__estrela:nth-child(1) { left: 8px; top: 6px; width: 8px; height: 8px; }
.tema__estrela:nth-child(2) { left: 21px; top: 12px; width: 5px; height: 5px; }
.tema__estrela:nth-child(3) { left: 11px; top: 22px; width: 6px; height: 6px; }

/* acendem uma depois da outra, quando a bola já passou; ao apagar, somem
   juntas e sem espera */
[data-theme="dark"] .tema__estrela { opacity: 1; scale: 1; rotate: 0deg; }
[data-theme="dark"] .tema__estrela:nth-child(1) { transition-delay: .2s; }
[data-theme="dark"] .tema__estrela:nth-child(2) { transition-delay: .3s; }
[data-theme="dark"] .tema__estrela:nth-child(3) { transition-delay: .4s; }

/* --------------------------------------------------------------------------
   A troca de tema
   --------------------------------------------------------------------------
   Com View Transitions, o tema novo nasce num círculo a partir do
   interruptor e cobre a página (o raio e o centro vêm do home.js). Sem
   suporte, fica o esmaecer de cor do body.
   -------------------------------------------------------------------------- */

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(tema-interruptor) { display: none; }
::view-transition-new(tema-interruptor) { animation: none; }


/* --------------------------------------------------------------------------
   A troca de idioma
   --------------------------------------------------------------------------
   Trocar de idioma é abrir um link: quem devolve a página no idioma novo é
   o servidor. Então quem anima é o navegador, na passagem de uma página
   para a outra — o idioma novo abre num círculo que nasce na sigla tocada,
   o mesmo gesto do tema. A tecla já afundou no toque, então a página que
   sai e a que chega mostram a mesma escolha.

   Tudo isso só vale enquanto o <html> leva `data-troca="idioma"` (quem marca
   é o script do <head>, na chegada). Sem a marca — navegador sem transição
   entre páginas, movimento reduzido ou qualquer outra navegação — a troca é
   direta.
   -------------------------------------------------------------------------- */

/* o `@view-transition` que liga isto mora no <head> da página: aqui ele
   chegaria tarde demais para o navegador decidir. */

/* O círculo em si é desenhado pelo script do <head>, direto na camada da
   página nova: é bem mais barato que passar o ponto por variáveis no <html>.
   Aqui só se desliga o esmaecer padrão das duas camadas — e a mistura que
   somava as duas páginas e clareava o meio do círculo. */
[data-troca="idioma"]::view-transition-old(root),
[data-troca="idioma"]::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}


.progresso { position: absolute; left: 0; bottom: -1px; width: 100%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

/* --------------------------------------------------------------------------
   O menu do celular
   --------------------------------------------------------------------------
   Abaixo de 1000px os links do topo somem; um botão redondo, no mesmo
   estilo do interruptor, abre a lista embaixo do menu. As três linhas
   viram um X.
   -------------------------------------------------------------------------- */

.menu-btn {
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--tema-borda);
    background: var(--tema-trilho);
    color: var(--t1);
    cursor: pointer;
    transition: border-color .2s var(--ease), background .45s var(--ease);
}

@media (hover: hover) { .menu-btn:hover { border-color: var(--accent-bd); } }

.menu-btn__linhas { position: relative; display: block; width: 16px; height: 12px; }

.menu-btn__linhas span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top .3s var(--ease), rotate .3s var(--ease), opacity .2s var(--ease);
}

.menu-btn__linhas span:nth-child(1) { top: 0; }
.menu-btn__linhas span:nth-child(2) { top: 5px; }
.menu-btn__linhas span:nth-child(3) { top: 10px; }

.menu-btn[aria-expanded="true"] .menu-btn__linhas span:nth-child(1) { top: 5px; rotate: 45deg; }
.menu-btn[aria-expanded="true"] .menu-btn__linhas span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__linhas span:nth-child(3) { top: 5px; rotate: -45deg; }

.menu-celular {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    /* celular deitado: se a lista não couber, ela rola por dentro */
    max-height: calc(100svh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px));
    background: var(--bg);
    border-bottom: 1px solid var(--borda);
    box-shadow: var(--sombra-leve);
    visibility: hidden;
    opacity: 0;
    translate: 0 -8px;
    transition: opacity .22s var(--ease), translate .3s var(--ease), visibility 0s linear .3s;
}

.menu-celular[data-aberto="true"] {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: opacity .22s var(--ease), translate .3s var(--ease);
    /* o resto da página escurece: a sombra enorme só vale para baixo */
    box-shadow: var(--sombra-leve), 0 0 0 100vmax rgba(0, 0, 0, .5);
    clip-path: inset(0 0 -100vmax 0);
}

.menu-celular a:not(.btn) {
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 17px;
    font-weight: 600;
    color: var(--t1);
    border-bottom: 1px solid var(--borda);
}

.menu-celular a[aria-current="true"] { color: var(--accent); }
/* o Entrar do menu: mais discreto que a lista de seções, no meio e do
   tamanho do texto, não da largura da tela */
.menu-celular .btn { display: none; align-self: center; margin-top: 16px; height: 40px; padding: 0 30px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .18s var(--ease), box-shadow .18s var(--ease);
}

.btn--primario { background: var(--btn); color: var(--sobre-btn); font-weight: 700; box-shadow: 0 3px 0 var(--btn-borda); }
@media (hover: hover) { .btn--primario:hover { background: var(--btn-h); } }
.btn--primario:active { transform: translateY(3px); box-shadow: 0 0 0 var(--btn-borda); }
.btn--secundario { border-color: var(--borda-h); color: var(--t1); }
@media (hover: hover) { .btn--secundario:hover { background: var(--card); } }
.btn--secundario:active { transform: translateY(2px); }
.btn .icone { width: 17px; height: 17px; flex-shrink: 0; }

/* o Entrar do topo: a mesma pílula, menor */
.btn--baixo { height: 38px; padding: 0 16px; font-size: 14px; box-shadow: 0 2px 0 var(--btn-borda); }
.btn--baixo:active { transform: translateY(2px); }

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */

.limite { max-width: 1160px; margin: 0 auto; padding: 0 max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px)); }
.secao { padding-block: 112px; }
.secao--fundo { background: var(--bg-fundo); border-block: 1px solid var(--borda); }
.secao--curta { padding-block: 88px; }
.secao--curta > .limite { margin-bottom: 30px; }

.etiqueta {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

.titulo { font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; line-height: 1.12; }
.titulo--menor { font-size: clamp(24px, 3vw, 32px); }
.apoio { font-size: 17px; line-height: 1.72; color: var(--t2); max-width: 64ch; margin-top: 16px; }

/* --------------------------------------------------------------------------
   TOPO — capa de revista
   --------------------------------------------------------------------------
   O nome em tipografia gigante atrás, o busto na frente cobrindo parte das
   letras. No scroll o nome se abre ao meio e o busto afunda; no ponteiro, o
   nome anda a favor e o busto contra — dois planos, e a diferença entre eles
   é a profundidade.
   -------------------------------------------------------------------------- */

.hero {
    --afasta: 0;
    position: relative;
    overflow: hidden;
    min-height: min(calc(100svh - 64px), 820px);
    display: grid;
    align-items: end;
    border-bottom: 1px solid var(--borda);
}

.hero__fundo {
    position: absolute;
    inset: 0;
    background: radial-gradient(760px 560px at 50% 62%, var(--accent-glow), transparent 70%);
    pointer-events: none;
}

.capa__visual { position: absolute; inset: 0; }

/* O espaço entre as letras mora em --espaco. Mais espaço pede letra um
   pouco menor: com -0,01em e 20vw sobram ~90px de cada lado no computador,
   e no celular (21vw) a palavra fecha na mesma margem de 20px do texto. */
.capa__palavra {
    --px: 0;
    --espaco: -.01em;
    position: absolute;
    left: 0;
    right: 0;
    top: 7%;
    display: flex;
    justify-content: center;
    font-size: clamp(88px, 20vw, 320px);
    font-weight: 900;
    line-height: .78;
    letter-spacing: var(--espaco);
    color: var(--capa-tinta);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.capa__metade { display: inline-block; will-change: transform; }
.capa__metade--esq { transform: translate3d(calc(var(--px) * 1px - var(--afasta) * 1px), 0, 0); }
.capa__metade--dir { transform: translate3d(calc(var(--px) * 1px + var(--afasta) * 1px), 0, 0); }

/* o navegador põe o espaçamento também depois do Y; a margem devolve, e a
   palavra fica no centro de verdade */
.capa__metade--dir { margin-right: calc(-1 * var(--espaco)); }

/* a largura inteira, e não left:50% + translate: com left:50% o busto só
   tem meia tela para caber, e o max-width da foto encolhia ela no celular */
.capa__busto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.retrato { position: relative; display: grid; place-items: end center; }

.retrato__brilho {
    position: absolute;
    left: -8%;
    right: -8%;
    top: 0;
    bottom: 30%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--halo), transparent 64%);
    filter: blur(22px);
    pointer-events: none;
    will-change: transform;
}

/* entra uma vez; começa em .35, não em zero, para estar visível em repouso */
.retrato__entra {
    position: relative;
    animation: retratoEntra 1.1s var(--ease) .1s both;
    transform: translate3d(0, calc(var(--desce, 0) * 1px), 0);
}

@keyframes retratoEntra {
    from { opacity: .35; translate: 0 44px; }
    to   { opacity: 1;   translate: 0 0; }
}

/* a base e as laterais do moletom somem em degradê */
.retrato__foto {
    display: block;
    will-change: transform;
    -webkit-mask-image:
        linear-gradient(to bottom, #000 78%, transparent 100%),
        linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, #000 78%, transparent 100%),
        linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-composite: intersect;
}

.retrato__foto img {
    display: block;
    width: auto;
    /* o terceiro termo segura o busto longe do texto da esquerda: a parte
       visível do busto ocupa ~61% da altura, e o texto termina 368px
       antes do centro; ver as faixas abaixo */
    height: min(78svh, 690px, calc(164.5vw - 1210px));
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
}

/* o degradê de baixo funde o busto no fundo e dá contraste ao texto */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(to top, var(--bg) 6%, color-mix(in srgb, var(--bg) 72%, transparent) 46%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* width: 100% é obrigatório aqui: o .hero é grid, e num item de grid a
   margem automática do .limite impede que ele estique — sem isso o rodapé
   encolhe para o centro e cai em cima do busto */
.capa__rodape {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    padding-block: 40px 44px;
}

.capa__esq { max-width: 340px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.hero__ola { font-size: 15px; font-weight: 600; color: var(--accent); }

h1 {
    font-size: clamp(24px, 2.3vw, 31px);
    line-height: 1.07;
    font-weight: 800;
    letter-spacing: -.04em;
    text-wrap: balance;
}

h1 mark { background: none; color: var(--accent); }

.hero__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__acoes .btn { height: 46px; padding: 0 20px; font-size: 15px; }

.capa__dir { margin: 0; display: flex; flex-direction: column; gap: 14px; text-align: right; max-width: 250px; }
.capa__dir dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.capa__dir dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--t1); line-height: 1.4; }

/* notebook pequeno (901–1100px): texto mais estreito e busto contido, para
   o "Ver os projetos" não cair em cima do moletom */
@media (min-width: 901px) and (max-width: 1100px) {
    .capa__esq { max-width: 300px; }
    .retrato__foto img { height: min(78svh, 690px, calc(164.5vw - 1079px)); }
}

/* tela grande: a capa ocupa mais altura, o texto abre para os lados e o
   busto cresce no espaço que sobra */
@media (min-width: 1400px) {
    .hero { min-height: min(calc(100svh - 64px), 960px); }
    .capa__rodape { max-width: 1320px; }
    .retrato__foto img { height: min(78svh, 820px); }
}

/* também no celular grande deitado (até 1000px de largura e pouca altura):
   no desenho do computador o nome gigante passava por cima do texto */
@media (max-width: 900px), (max-width: 1000px) and (max-height: 500px) {
    .hero { min-height: 0; display: block; }
    .hero::after { display: none; }
    /* overflow: ao rolar, o busto desce; cortado aqui, ele some no degradê
       de baixo em vez de passar por cima do texto */
    .capa__visual { position: relative; height: min(118vw, 600px); overflow: hidden; }
    /* o brilho fica só atrás do busto: embaixo do texto ele marcava uma emenda */
    .hero__fundo { bottom: auto; height: min(118vw, 600px); }

    .capa__visual::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 30%;
        background: linear-gradient(to top, var(--bg), transparent);
    }

    .capa__palavra { top: 5%; font-size: 21vw; }
    .retrato__foto img { height: min(100vw, 520px); }
    /* .hero na frente: no celular o .limite (padding: 0 20px) vem depois no
       arquivo e zerava o espaço de cima e de baixo */
    .hero .capa__rodape { flex-direction: column; align-items: flex-start; gap: 28px; padding-block: 8px 56px; }
    .capa__esq { max-width: none; }
    .capa__dir { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 14px 28px; max-width: none; }
}

/* --------------------------------------------------------------------------
   POR TRÁS DA TELA — um clique, em seis passos
   --------------------------------------------------------------------------
   No computador, duas colunas: o texto e os seis passos à esquerda, a cena
   presa à direita, no meio da tela. No celular, a cena fica presa logo
   abaixo do menu e os passos passam por baixo dela, como cartões. A
   rolagem só escolhe o passo (home.js); a cena anda até ele no próprio
   tempo.

   A cena é um caminho em 3D. Cada objeto mora a uma distância da tela (--z,
   em px, negativo = mais fundo) e a câmera anda para dentro (--cam). A tela
   abre ao meio como porta (--abre); cada regra é um painel fechado, em duas
   folhas, que abre quando responde (--solta, data-ok); o arquivo recebe as
   linhas novas no fim.

   Sem brilho, sem grade, sem luz: tudo aqui é um pedaço de interface de
   verdade, com as mesmas bordas e sombras dos cartões da página. Os tamanhos
   internos da cena são em em, a partir de --palco-letra; cada tela só troca
   esse número e a altura (--palco-alto).

   Todo texto do caminho fica de frente para quem olha: nada é lido de lado.
   -------------------------------------------------------------------------- */

.camadas {
    --palco-alto: 500px;
    --palco-letra: 16px;
    /* o espaço de baixo fica fora da grade: a cena presa se solta ali, e
       não encostada no começo do Sobre */
    padding-block: 112px 120px;
}

.camadas__grade {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    grid-template-areas: "texto palco" "passos palco";
    column-gap: 48px;
}

.camadas__texto { grid-area: texto; display: flex; flex-direction: column; align-items: flex-start; }

/* a cena, presa no meio da altura livre abaixo do menu */
.camadas__palco {
    grid-area: palco;
    position: sticky;
    top: calc(64px + max(12px, (100vh - 64px - var(--palco-alto) - 30px) / 2));
    align-self: start;
    min-width: 0;
    display: grid;
    gap: 12px;
}

/* um ponto por passo: o atual comprido, os que já foram meio acesos */
.camadas__pontos { display: flex; justify-content: center; gap: 8px; padding-block: 6px 4px; }
.camadas__pontos i { width: 8px; height: 8px; border-radius: 50%; background: var(--card-3); transition: width .3s var(--ease), background .3s var(--ease); }
.camadas__pontos i.feito { background: color-mix(in srgb, var(--accent) 45%, var(--card-3)); }
.camadas__pontos i.agora { width: 22px; border-radius: 999px; background: var(--accent); }

/* ---- os passos ---- */

.camadas__passos { grid-area: passos; margin: 0; padding: 0 0 12vh; list-style: none; }

.camadas__passo {
    min-height: 64vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* sem script, todos os passos ficam acesos */
.js .camadas__passo { opacity: .28; transition: opacity .4s var(--ease); }
.js .camadas__passo.ativo { opacity: 1; }

.camadas__passo small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.camadas__passo h3 { margin-top: 8px; font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--t1); text-wrap: balance; }
.camadas__passo p { margin-top: 10px; max-width: 36ch; font-size: 16.5px; line-height: 1.6; color: var(--t2); }

/* ---- o palco ---- */

.voo {
    --cam: 0;
    --abre: 0;
    position: relative;
    height: var(--palco-alto);
    font-size: var(--palco-letra);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--borda-h);
    isolation: isolate;
    perspective: 900px;
    background: var(--bg-fundo);
}

/* um chão, só um tom: dá onde apoiar o olho sem desenhar nada */
.voo::before {
    content: "";
    position: absolute;
    inset: 55% 0 0;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--t1) 5%, transparent));
    pointer-events: none;
}

.voo__mundo {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--cam) * 1px));
    transition: opacity .35s var(--ease);
}

/* cada objeto some quando chega perto da câmera e quando está longe demais */
.voo__obj {
    --z: 0;
    --v: calc(var(--z) + var(--cam));
    --perto: clamp(0, min(calc((-1 * var(--v) - 40) / 80), calc((3200 + var(--v)) / 600)), 1);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(calc(var(--z) * 1px));
    opacity: var(--perto);
    pointer-events: none;
}

/* ---- a tela, em duas metades que abrem como porta ---- */

.voo__porta {
    width: min(32.5em, calc(100% - 24px));
    /* some na primeira metade da abertura: meia tela voando não se lê */
    opacity: calc(1 - var(--abre) * 2);
}

.voo__porta--esq {
    clip-path: inset(0 50% 0 0);
    transform-origin: 0 50%;
    transform: translate(-50%, -50%) translateX(calc(var(--abre) * -60%)) rotateY(calc(var(--abre) * 30deg));
}

.voo__porta--dir {
    clip-path: inset(0 0 0 50%);
    transform-origin: 100% 50%;
    transform: translate(-50%, -50%) translateX(calc(var(--abre) * 60%)) rotateY(calc(var(--abre) * -30deg));
}

/* ---- as regras: painéis fechados no caminho ---- */

.voo__folha {
    --solta: 0;
    width: min(34em, 100%);
    height: 17em;
    opacity: calc(var(--perto) * (1 - var(--solta) * 2));
}

.voo__folha--esq {
    clip-path: inset(0 50% 0 0);
    transform: translate(-50%, -50%) translateZ(calc(var(--z) * 1px)) translateX(calc(var(--solta) * -55%)) rotateY(calc(var(--solta) * 24deg));
}

.voo__folha--dir {
    clip-path: inset(0 0 0 50%);
    transform: translate(-50%, -50%) translateZ(calc(var(--z) * 1px)) translateX(calc(var(--solta) * 55%)) rotateY(calc(var(--solta) * -24deg));
}

.regra {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85em;
    padding: 1.5em 2em;
    border-radius: 1.1em;
    background: var(--card);
    border: 1px solid var(--borda-h);
    box-shadow: var(--sombra);
    text-align: center;
}

.regra__n {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t3);
}

.regra__n .icone { display: block; width: 1.3em; height: 1.3em; }

.regra__pergunta {
    max-width: 16em;
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--t1);
    text-wrap: balance;
}

.regra__resposta {
    display: inline-flex;
    align-items: center;
    height: 2.3em;
    padding: 0 1em;
    border-radius: 999px;
    border: 1px solid var(--borda-h);
    background: var(--card-2);
    color: var(--t3);
    font-size: .95em;
    font-weight: 700;
    transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}

.regra__ok { display: none; align-items: center; gap: .4em; }
.regra__ok .icone { width: 1.1em; height: 1.1em; }
.regra__aberta { display: none; }

[data-ok="true"] .regra__espera,
[data-ok="true"] .regra__fechada { display: none; }
[data-ok="true"] .regra__ok { display: inline-flex; }
[data-ok="true"] .regra__aberta { display: block; color: var(--no-ar-texto); }

[data-ok="true"] .regra__resposta {
    color: var(--no-ar-texto);
    border-color: color-mix(in srgb, var(--no-ar) 45%, transparent);
    background: color-mix(in srgb, var(--no-ar) 12%, transparent);
}

/* ---- o arquivo ---- */

.voo__arquivo { width: min(36em, 100%); }

.arquivo {
    border-radius: 1.1em;
    background: var(--card);
    border: 1px solid var(--borda-h);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.arquivo__topo {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .9em 1.2em;
    border-bottom: 1px solid var(--borda);
    font-size: .95em;
    color: var(--t1);
}

.arquivo__topo .icone { width: 1.25em; height: 1.25em; color: var(--accent); }

.arquivo__linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 3.4em;
    align-items: center;
    gap: 1em;
    padding: .7em 1.2em;
    font-size: .95em;
}

.arquivo__linha + .arquivo__linha { border-top: 1px solid var(--borda); }
.arquivo__linha b { font-weight: 600; color: var(--t1); }
.arquivo__linha span { color: var(--t3); font-variant-numeric: tabular-nums; text-align: right; }
.arquivo__linha--antiga b { font-weight: 500; color: var(--t2); }

.arquivo__linha em {
    justify-self: end;
    padding: .15em .6em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--no-ar) 14%, transparent);
    color: var(--no-ar-texto);
    font-style: normal;
    font-size: .78em;
    font-weight: 700;
}

/* as linhas novas entram fechadas e se abrem quando são gravadas; o
   overflow segura o texto dentro da linha enquanto ela cresce */
.arquivo__linha--nova {
    overflow: hidden;
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    border-top-color: transparent;
    transition: max-height .45s var(--ease), padding .45s var(--ease), opacity .35s var(--ease), background .6s var(--ease);
}

.arquivo__linha--nova[data-ok="true"] {
    max-height: 3.2em;
    padding-block: .7em;
    opacity: 1;
    border-top-color: var(--borda);
    background: color-mix(in srgb, var(--no-ar) 7%, transparent);
}

.arquivo__pe {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .85em 1.2em;
    border-top: 1px solid var(--borda);
    color: var(--t3);
    font-size: .9em;
    font-weight: 600;
    opacity: .35;
    transition: opacity .35s var(--ease), color .35s var(--ease);
}

.arquivo__pe .icone { width: 1.15em; height: 1.15em; }
.arquivo__pe[data-ok="true"] { opacity: 1; color: var(--no-ar-texto); }

/* ---- a ficha do pedido, no canto ---- */

.voo__ficha {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 28px);
    padding: 7px 8px 7px 12px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--borda-h);
    box-shadow: var(--sombra-leve);
    font-size: 13px;
    opacity: 0;
    translate: 0 -6px;
    transition: opacity .3s var(--ease), translate .3s var(--ease);
}

.voo[data-viagem="true"] .voo__ficha { opacity: 1; translate: 0 0; }

.voo__ficha b { font-weight: 700; color: var(--t1); white-space: nowrap; }

.voo__estado {
    padding: 3px 9px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.voo__estado[hidden] { display: none; }
.voo__estado--processo { color: var(--accent); background: var(--accent-bg); }
.voo__estado--neutro { color: var(--t2); background: var(--card-2); border: 1px solid var(--borda); }
.voo__estado--ok { color: var(--no-ar-texto); background: color-mix(in srgb, var(--no-ar) 14%, transparent); }

/* ---- o fim: a mesma tela, com o pedido concluído ---- */

.voo__volta {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: min(32.5em, calc(100% - 24px));
    display: grid;
    gap: .6em;
    translate: -50% -50%;
    scale: .96;
    opacity: 0;
    transition: opacity .45s var(--ease), scale .45s var(--ease);
    pointer-events: none;
}

.voo__volta small {
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t3);
}

.voo[data-fim="true"] .voo__volta { opacity: 1; scale: 1; }
.voo[data-fim="true"] .voo__mundo,
.voo[data-fim="true"] .voo__ficha { opacity: 0; }

/* ---- a tela do Iarandu Trade ---- */

.tela {
    width: 100%;
    border-radius: 1em;
    background: var(--card);
    border: 1px solid var(--borda-h);
    box-shadow: var(--sombra);
    overflow: hidden;
    text-align: left;
}

.tela__barra { display: flex; align-items: center; gap: .4em; padding: .75em 1em; border-bottom: 1px solid var(--borda); }
.tela__ponto { width: .55em; height: .55em; border-radius: 50%; background: var(--borda-h); }
.tela__url { margin-left: .5em; font-size: .72em; color: var(--t3); }
.tela__corpo { padding: 1.1em 1.1em 1em; }
.tela__t { font-size: 1.15em; font-weight: 700; color: var(--t1); letter-spacing: -.02em; }
.tela__s { font-size: .78em; color: var(--t3); }

.tela__contadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; margin-top: 1em; }

.tela__contador {
    padding: .6em .7em;
    border-radius: .7em;
    background: var(--card-2);
    border: 1px solid var(--borda);
}

.tela__contador b {
    display: block;
    font-size: 1.35em;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--t1);
    font-variant-numeric: tabular-nums;
}

.tela__contador:first-child b { color: var(--accent); }
.tela__contador span { display: block; margin-top: .2em; font-size: .7em; color: var(--t3); white-space: nowrap; }

.tela__tabela { margin-top: .8em; border-top: 1px solid var(--borda); }

.tela__linha {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6em;
    margin-inline: -.45em;
    padding: .6em .45em;
    border-radius: .6em;
    font-size: .88em;
    color: var(--t2);
    transition: background .3s var(--ease), color .3s var(--ease);
}

.tela__linha + .tela__linha { border-top: 1px solid var(--borda); }
.voo[data-clicou="true"] .tela__linha[data-clique] { background: var(--accent-bg); color: var(--t1); }
.tela__linha--feita { background: color-mix(in srgb, var(--no-ar) 9%, transparent); color: var(--t1); }

/* o status do pedido, com os mesmos nomes que o Trade usa */
.tela__status {
    margin-left: auto;
    padding: .2em .7em;
    border-radius: 999px;
    font-style: normal;
    font-size: .85em;
    font-weight: 700;
    white-space: nowrap;
}

.tela__status--processo { color: var(--accent); background: var(--accent-bg); }
.tela__status--concluido { color: var(--no-ar-texto); background: color-mix(in srgb, var(--no-ar) 14%, transparent); }
.tela__status--pago { color: var(--t2); background: var(--card-2); border: 1px solid var(--borda); }

/* o cursor e a marca do clique — uma vez só, na hora do clique */
.clique {
    position: absolute;
    left: 3.4em;
    top: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    transition: opacity .25s var(--ease);
}

.voo[data-clicou="true"] .clique { opacity: 1; }

.clique .icone {
    position: absolute;
    left: -.2em;
    top: -.2em;
    width: 1.35em;
    height: 1.35em;
    color: #fff;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .75));
}

.clique__onda {
    position: absolute;
    left: -.8em;
    top: -.8em;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0;
}

.voo[data-clicou="true"] .clique__onda { animation: onda .8s var(--ease) .15s both; }

@keyframes onda {
    from { scale: .3; opacity: .9; }
    to   { scale: 1.9; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Gramática de hover, para a página inteira
   -------------------------------------------------------------------------- */

.bloco {
    background: var(--card);
    border: 1px solid var(--borda);
    border-radius: 18px;
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

@media (hover: hover) { .bloco:hover { border-color: var(--borda-h); transform: translateY(-2px); box-shadow: var(--sombra-leve); } }

/* --------------------------------------------------------------------------
   Sobre
   -------------------------------------------------------------------------- */

.sobre { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 72px; align-items: start; }

/* o cordão passa por cima da borda da seção; `clip`, e não `hidden`, para
   não matar o sticky do cabide */
#sobre { overflow: clip; }

/* ---- o cabide: preso logo abaixo do menu enquanto o Sobre passa ---- */

.sobre__cabide {
    --clipe: 110px;            /* onde as duas fitas se juntam, em repouso */
    position: sticky;
    top: 64px;
    z-index: 2;
    height: 640px;
}

/* as fitas: um SVG que sobe 240px acima do cabide — atrás do menu quando
   o cabide está preso, cortado na borda da seção quando não está. O
   home.js acerta o viewBox para 1 unidade = 1px e redesenha as curvas. */
.cordao {
    position: absolute;
    left: 0;
    top: -240px;
    width: 100%;
    height: calc(100% + 240px);
    overflow: visible;
    pointer-events: none;
}

.cordao__borda,
.cordao__fita { fill: none; }

.cordao__borda { stroke: color-mix(in srgb, var(--cordao) 70%, #000); stroke-width: 18; }
.cordao__fita  { stroke: var(--cordao); stroke-width: 14; }

/* a fita de trás, um tom mais escura: as duas não parecem coladas */
.cordao__lado--tras .cordao__fita { stroke: color-mix(in srgb, var(--cordao) 82%, #000); }

.cordao__texto {
    fill: var(--cordao-texto);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .26em;
    dominant-baseline: central;
}

/* ---- o que balança: a presilha, o gancho e o porta-crachá ----
   Um ponto sem tamanho, na junta das fitas; o home.js move e gira esse
   ponto, e tudo o que está pendurado vem junto. */
.pendulo {
    position: absolute;
    left: 50%;
    top: var(--clipe);
    width: 0;
    height: 0;
    perspective: 1200px;
    perspective-origin: 0 250px;
    will-change: transform;
}

.presilha {
    position: absolute;
    left: -16px;
    top: -12px;
    z-index: 2;
    width: 32px;
    height: 22px;
    border-radius: 5px 5px 9px 9px;
    background: linear-gradient(90deg, #7f889a, #eef1f6 34%, #b9c0cd 62%, #7a8396);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(0, 0, 0, .18);
}

/* o rebite */
.presilha::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: #697184;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .5);
}

/* o gancho giratório, que desce da presilha e entra na fenda */
.gancho {
    position: absolute;
    left: -8px;
    top: 4px;
    z-index: 1;
    width: 16px;
    height: 38px;
    border: 3px solid #aab2c1;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.cracha {
    position: absolute;
    left: -134px;
    top: 24px;
    width: 268px;
    height: 444px;
    transform-origin: 50% 16px;
    transform-style: preserve-3d;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}

.cracha:active { cursor: grabbing; }
.cracha:focus-visible { outline-offset: 6px; border-radius: 22px; }

/* cada face é o plástico do porta-crachá, com o cartão dentro */
.cracha__face {
    position: absolute;
    inset: 0;
    padding: 40px 10px 10px;
    border-radius: 20px;
    background: var(--plastico);
    border: 1px solid var(--plastico-borda);
    box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .22);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cracha__verso { transform: rotateY(180deg); }

.cracha__fenda {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 60px;
    height: 9px;
    margin-left: -30px;
    border-radius: 999px;
    background: var(--bg);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .12);
}

/* o reflexo que corre pelo plástico conforme o crachá gira */
.cracha__brilho {
    --luz: 0;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .20) 46%, rgba(255, 255, 255, .05) 52%, transparent 60%);
    background-size: 300% 100%;
    background-position: calc(50% + var(--luz) * 1%) 0;
    pointer-events: none;
}

/* ---- o cartão (proporção de um cartão de verdade, 54 × 86 mm) ---- */

.cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

.cartao__topo {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 88px;
    flex-shrink: 0;
    padding: 0 14px 30px;
    color: #fff;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, .16), transparent 60%),
        linear-gradient(150deg, var(--btn), color-mix(in srgb, var(--btn) 50%, #000));
}

.cartao__selo {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #fff;
    color: var(--btn);
    font-size: 14px;
    font-weight: 900;
}

.cartao__marca { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

.cartao__foto {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 104px;
    height: 124px;
    margin-left: -52px;
    border-radius: 10px;
    border: 3px solid var(--card);
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, var(--card)), var(--card-2));
    box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
}

/* ampliada por tamanho, e não por transform: dentro de um plano 3D com
   backface-visibility, o Chrome descarta a camada de uma imagem escalada */
.cartao__foto img {
    position: absolute;
    left: -16%;
    top: -2%;
    width: 132%;
    height: auto;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.cartao__corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 94px 16px 12px;
    text-align: center;
}

.cartao__nome { font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--t1); letter-spacing: -.02em; }
.cartao__cargo { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--accent); }

.cartao__dados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--borda-h);
    text-align: left;
}

.cartao__dados dt { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.cartao__dados dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--t1); }

.cartao__barras { display: flex; gap: 2px; width: 100%; height: 22px; margin-top: auto; opacity: .45; }
.cartao__barras i { background: var(--t1); border-radius: 1px; }

.cartao__faixa {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    height: 28px;
    padding-left: .3em;
    background: var(--btn);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.cartao__tarja {
    flex-shrink: 0;
    height: 34px;
    margin-top: 20px;
    background: linear-gradient(180deg, #202329, #0a0b0e);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.cartao__verso { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 18px 18px 14px; }
.cartao__verso h3 { font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.cartao__verso p { font-size: 13.5px; line-height: 1.55; color: var(--t2); }
.cartao__acoes { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.cartao__acoes .btn { width: 100%; height: 42px; font-size: 14.5px; }

/* a dica some na primeira vez que a pessoa mexe no crachá */
.cracha__dica {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    margin: 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--t3);
    transition: opacity .5s var(--ease);
}

.sobre__cabide.mexeu .cracha__dica { opacity: 0; }
html:not(.js) .cracha__dica { display: none; }

.sobre__texto .prosa { margin-top: 28px; }

.prosa { display: flex; flex-direction: column; gap: 18px; max-width: 64ch; }
.prosa p { font-size: 16px; line-height: 1.82; color: var(--t2); }
.prosa p:first-child { font-size: 17.5px; line-height: 1.72; color: var(--t1); }

.capacidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.capacidade { padding: 20px 20px 20px 18px; display: flex; gap: 13px; align-items: flex-start; }

.capacidade__ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--accent-bg);
    border: 1px solid var(--accent-bd);
    color: var(--accent);
    flex-shrink: 0;
}

.capacidade__ic .icone { width: 16px; height: 16px; }
.capacidade__n { font-size: 14.5px; font-weight: 600; color: var(--t1); }
.capacidade__d { font-size: 13px; line-height: 1.55; color: var(--t2); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Processo e números
   -------------------------------------------------------------------------- */

.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-top: 44px; }
.passo { padding: 28px 26px; display: flex; flex-direction: column; gap: 11px; }

.passo__n {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--accent-bg);
    border: 1px solid var(--accent-bd);
    color: var(--accent);
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.passo h3 { font-size: 18px; font-weight: 700; }
.passo p { font-size: 15px; line-height: 1.68; color: var(--t2); }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 16px; margin-top: 16px; }
.numero { padding: 24px 22px; }
.numero__v { font-size: 38px; font-weight: 800; color: var(--t1); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.numero__r { font-size: 13.5px; line-height: 1.55; color: var(--t2); margin-top: 10px; }

/* tablet e celular deitado: duas etapas por linha e a terceira na largura
   toda (antes ela sobrava sozinha ao lado de um buraco); os quatro números
   numa fila só */
@media (min-width: 721px) and (max-width: 1000px) {
    .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .passo:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .passo:last-child:nth-child(odd) p { max-width: 62ch; }
    .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* celular: os números dois a dois — um embaixo do outro, os quatro
   tomavam uma tela inteira */
@media (max-width: 720px) {
    .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
    .numero { padding: 20px 16px; }
    .numero__v { font-size: 34px; }
}

/* --------------------------------------------------------------------------
   Projetos
   -------------------------------------------------------------------------- */

/* Cada projeto é um cartão em duas partes: o texto e a tela pública do
   site, reta, numa janela de navegador. O cartão não sobe no hover — só a
   janela e o botão mudam a borda. */

.obras { display: flex; flex-direction: column; gap: 18px; margin-top: 44px; }

.obra {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    overflow: hidden;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--borda);
}

.obra--inversa .obra__texto { order: 2; }
.obra__texto { padding: 34px 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.obra__selo {
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-bg);
    border: 1px solid var(--accent-bd);
    border-radius: 999px;
    padding: 5px 13px;
}

.obra h3 { font-size: 23px; font-weight: 700; line-height: 1.22; text-wrap: balance; }
.obra__quem { font-size: 15.5px; font-weight: 600; color: var(--t1); line-height: 1.55; }
.obra__oque { font-size: 15.5px; line-height: 1.72; color: var(--t2); }

.obra__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.obra__lista li {
    position: relative;
    padding: 10px 0 10px 16px;
    border-top: 1px solid var(--borda);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--t2);
}

.obra__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.obra__link {
    align-self: flex-start;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--borda-h);
    background: var(--card-2);
    color: var(--t1);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .25s var(--ease), color .25s var(--ease);
}

@media (hover: hover) { .obra__link:hover { border-color: var(--accent-bd); color: var(--accent); } }
.obra__link .icone { width: 14px; height: 14px; color: var(--accent); }

/* celular estreito: um endereço comprido quebra depois de um ponto (o
   <wbr> vem do HTML) e o botão cresce em altura, sem passar do cartão */
@media (max-width: 440px) {
    .obra__link { max-width: 100%; height: auto; min-height: 40px; padding-block: 9px; line-height: 1.3; }
}

.obra__tela {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 32px;
    background: var(--bg);
    border-left: 1px solid var(--borda);
}

.obra--inversa .obra__tela { border-left: 0; border-right: 1px solid var(--borda); }

.janela {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--borda-h);
    background: var(--card-2);
    box-shadow: var(--sombra-leve);
    transition: border-color .25s var(--ease);
}

@media (hover: hover) { a.janela:hover { border-color: var(--accent-bd); } }

.janela__barra { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--borda); }
/* os três pontos da janela: vermelho, âmbar e verde, como em qualquer
   navegador. Eram três bolinhas cinzas, e a "janela" não parecia uma. */
.janela__barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--borda-h); }
.janela__barra i:nth-child(1) { background: #ff5f57; }
.janela__barra i:nth-child(2) { background: #f5b93a; }
.janela__barra i:nth-child(3) { background: #2bc653; }
.janela__barra span { margin-left: 8px; overflow: hidden; font-size: 11.5px; color: var(--t3); white-space: nowrap; text-overflow: ellipsis; }
.janela img { display: block; width: 100%; height: auto; aspect-ratio: 960 / 555; object-fit: cover; object-position: top; background: var(--card-3); }

.obra__nota { font-size: 12.5px; line-height: 1.5; color: var(--t3); text-align: center; }

/* --------------------------------------------------------------------------
   Tecnologias — a nuvem de bolhas
   -------------------------------------------------------------------------- */

/* Cada tecnologia é uma bolha que flutua com as outras (home.js move cada
   uma pelo transform); o clique abre a ficha ao lado. No celular a ficha
   sobe de baixo, por cima da página. */

.tec-apoio { margin-top: 12px; }

.tec-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 32px;
    align-items: center;
    margin-top: 12px;
}

/* ---- as bolhas ---- */

.bolhas {
    position: relative;
    height: 480px;
    overflow: hidden;
    /* a ordem das bolhas fica aqui dentro: nenhuma passa por cima da
       ficha do celular */
    isolation: isolate;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

/* o home.js posiciona cada bolha pelo transform, a partir do canto */
.bolha {
    --d: 104px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: var(--d);
    height: var(--d);
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--borda-h);
    background: var(--card);
    box-shadow: var(--sombra-leve);
    color: var(--t1);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: grab;
    will-change: transform;
    transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}

.bolha .icone { width: 30%; height: 30%; }
.bolha--t1 { --d: 86px; font-size: 12px; }
.bolha--t3 { --d: 134px; font-size: 16px; font-weight: 700; }

@media (hover: hover) { .bolha:hover { border-color: var(--accent-bd); } }
.bolha.arrastada { cursor: grabbing; }

.bolha[aria-pressed="true"] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, var(--card));
    box-shadow: 0 0 0 3px var(--accent-bg), var(--sombra-leve);
}

/* no claro, os logos amarelos (JavaScript, Linux) sumiam no branco: um
   contorno de meio pixel devolve a forma sem mudar a cor da marca */
[data-theme="light"] .bolha .icone,
[data-theme="light"] .ficha__logo .icone { filter: drop-shadow(0 0 .6px rgba(15, 23, 42, .45)); }

.bolhas__dica { margin-top: 2px; text-align: center; font-size: 13px; color: var(--t3); }

/* ---- a ficha ---- */

.tec-painel {
    position: relative;
    min-height: 400px;
    padding: 26px 26px 24px;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--borda);
}

.tec-convite { display: grid; place-content: center; gap: 10px; min-height: 348px; text-align: center; font-size: 15px; line-height: 1.6; color: var(--t3); }
.tec-convite b { font-size: 18px; color: var(--t1); }
.tec-painel.escolhido .tec-convite { display: none; }

.tec-painel__fechar {
    position: absolute;
    top: 14px;
    right: 14px;
    display: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--borda-h);
    background: var(--card-2);
    color: var(--t1);
    cursor: pointer;
}

.tec-painel__fechar .icone { width: 16px; height: 16px; }

.ficha { display: grid; gap: 20px; }
.js .ficha { display: none; }
.js .ficha.atual { display: grid; animation: aparecer .35s var(--ease); }

@keyframes aparecer {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
}

.ficha__topo { display: flex; align-items: center; gap: 14px; padding-right: 40px; }

.ficha__logo {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--marca) 14%, var(--card-2));
    border: 1px solid color-mix(in srgb, var(--marca) 30%, transparent);
}

.ficha__logo .icone { width: 30px; height: 30px; }
.ficha h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--t1); }
.ficha__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.ficha__tag { padding: 2px 9px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--borda); color: var(--t2); font-size: 12px; font-weight: 600; }
.ficha__tag--forte { background: var(--accent-bg); border-color: var(--accent-bd); color: var(--accent); }

.ficha dl { display: grid; gap: 16px; margin: 0; }
.ficha dl > div { display: grid; gap: 5px; padding-top: 14px; border-top: 1px solid var(--borda); }
.ficha dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.ficha dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--t2); }
.ficha dd ul { display: grid; gap: 4px; margin: 0; padding-left: 18px; }

.tec-fundo { display: none; }

/* ---- sem script: os nomes em fila e todas as fichas abertas ---- */

html:not(.js) .bolhas { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-block: 12px; }
html:not(.js) .bolha { position: static; cursor: default; }
html:not(.js) .bolhas__dica,
html:not(.js) .tec-convite { display: none; }
html:not(.js) .tec-grade { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .tec-painel { display: grid; gap: 28px; }

/* --------------------------------------------------------------------------
   Reconhecimentos — os diplomas em quadros na parede
   --------------------------------------------------------------------------
   Parados de propósito: o papel com a moldura dupla dourada e o selo de
   metal já dizem "documento oficial". Cada diploma fica num quadro de
   madeira escura pendurado num prego, como o crachá no cordão do Sobre.
   No celular, um embaixo do outro.
   -------------------------------------------------------------------------- */

.honra--ouro { --metal-luz: #f4e3ae; --metal: #c9a24c; --metal-escuro: #8a6b27; --metal-texto: #4f3b0e; }
.honra--prata { --metal-luz: #f4f6f9; --metal: #b8c0cb; --metal-escuro: #7b8594; --metal-texto: #333b47; }

.diplomas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    /* espaço para o arame e o prego acima dos quadros */
    margin-top: 84px;
}

/* ---- o quadro ---- */

.quadro { position: relative; display: grid; margin: 0; }

/* o arame vai do prego até as duas argolas atrás do quadro; a moldura,
   que vem depois, cobre as pontas */
.quadro__arame {
    position: absolute;
    left: 20%;
    top: -44px;
    width: 60%;
    height: 50px;
    overflow: visible;
    color: var(--t3);
}

.quadro__prego {
    position: absolute;
    left: 50%;
    top: -50px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e6e9ee, #8a929c 60%, #4d545c);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

/* madeira escura nos dois temas: um quadro é um objeto, não muda com a luz */
.quadro__moldura {
    position: relative;
    display: grid;
    padding: 12px;
    border-radius: 3px;
    background: linear-gradient(145deg, #463a30, #221c17);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 2px 0 rgba(255, 255, 255, .08), 0 18px 34px var(--chao);
}

/* ---- o diploma ---- */

.dip {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 8px;
    padding: 34px 28px 100px;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--borda);
    border-radius: 6px;
    box-shadow: var(--sombra-leve);
}

/* a moldura dupla dourada, desenhada no próprio papel */
.dip::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid color-mix(in srgb, #c9a24c 70%, transparent);
    outline: 3px double color-mix(in srgb, #c9a24c 45%, transparent);
    outline-offset: -8px;
    pointer-events: none;
}

.dip__quando { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.dip__nome { margin: 8px 0 0; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--t1); }
.dip__traco { width: 60px; height: 2px; background: color-mix(in srgb, #c9a24c 70%, transparent); }
.dip__texto { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.6; color: var(--t2); }

/* o lacre de metal no pé do diploma */
.dip__selo {
    position: absolute;
    left: 50%;
    bottom: 28px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-left: -27px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--metal-luz), var(--metal) 55%, var(--metal-escuro));
    color: var(--metal-texto);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
}

.dip__selo .icone { width: 23px; height: 23px; }

/* em fila, a linha da instituição ocupa sempre duas linhas: os títulos
   ficam na mesma altura mesmo quando um nome é mais comprido */
@media (min-width: 901px) {
    .dip__quando { min-height: 3em; }
}

/* dentro do quadro, o papel encosta na madeira: sem borda nem canto */
.quadro__moldura .dip { border: 0; border-radius: 0; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .28); }

/* abaixo disso, três colunas apertam demais o nome das instituições; o
   espaço entre os quadros cabe o arame do de baixo */
@media (max-width: 900px) {
    .diplomas { grid-template-columns: minmax(0, 1fr); gap: 76px; margin-top: 72px; }
}

/* tablet e celular deitado (721–900px): dois quadros em cima e o terceiro
   no meio, embaixo, como numa parede — um por linha, eles ficavam largos
   demais para o pouco texto */
@media (min-width: 721px) and (max-width: 900px) {
    .diplomas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
    .diplomas > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
    .dip__quando { min-height: 3em; }
}

/* --------------------------------------------------------------------------
   Experiência — a carteira de trabalho
   --------------------------------------------------------------------------
   Uma folha de "Contrato de trabalho" por empregador. No computador as
   folhas vão em pares, como a carteira aberta, com a dobra no meio; no
   celular, uma embaixo da outra. A capa tem o azul do cordão do crachá.
   -------------------------------------------------------------------------- */

.ctps {
    --ctps-capa: var(--cordao);
    --ctps-linha: rgba(91, 156, 246, .045);
    display: grid;
    gap: 20px;
    margin-top: 44px;
}

/* no claro, o azul da capa é o do botão pressionado: o branco fica em 6,7:1
   (no #2563eb, o resumo ficava abaixo de 4,5:1) */
[data-theme="light"] .ctps {
    --ctps-capa: #1d4ed8;
    --ctps-linha: rgba(37, 99, 235, .05);
}

.ctps__capa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    padding: 16px 24px;
    border-radius: 10px;
    /* só escurece para o canto: o texto nunca fica sobre um azul mais claro */
    background: linear-gradient(160deg, var(--ctps-capa), color-mix(in srgb, var(--ctps-capa) 80%, #000));
    color: #fff;
    box-shadow: var(--sombra-leve);
}

.ctps__capa b { font-size: 12.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.ctps__capa span { font-size: 14px; color: rgba(255, 255, 255, .9); }

.ctps__aberta {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 8px;
    box-shadow: var(--sombra-leve);
}

/* a dobra entre as duas folhas */
.ctps__aberta::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 40px;
    margin-left: -20px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, .14) 44%, rgba(0, 0, 0, .24) 50%, rgba(0, 0, 0, .14) 56%, transparent);
    pointer-events: none;
}

.ctps__folha {
    padding: 24px 30px 28px;
    background-color: var(--card);
    /* o fundo de segurança do papel: um trançado bem fraco */
    background-image:
        repeating-linear-gradient(45deg, var(--ctps-linha) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(-45deg, var(--ctps-linha) 0 1px, transparent 1px 8px);
}

.ctps__topo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--accent);
}

.ctps__rotulo { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.ctps__topo > span { font-size: 12.5px; font-weight: 600; color: var(--t3); font-variant-numeric: tabular-nums; }

.ctps__folha dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; margin: 0; }

.ctps__folha dt,
.ctps__folha dd { padding: 8px 0; border-bottom: 1px dotted var(--borda-h); }

.ctps__folha dt { padding-top: 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.ctps__folha dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--t1); }
.ctps__folha dd small { display: block; font-size: 13px; color: var(--t2); }
.ctps__folha dl > :nth-last-child(-n + 2) { border-bottom: 0; }
.ctps__folha dd.ctps__nota { font-size: 14px; line-height: 1.6; color: var(--t2); }

/* o carimbo do contrato em vigor */
.ctps__vigor {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1.5px solid var(--no-ar-texto);
    border-radius: 5px;
    color: var(--no-ar-texto);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    transform: rotate(-4deg);
    vertical-align: 1px;
}

@media (max-width: 900px) {
    .ctps__aberta { grid-template-columns: minmax(0, 1fr); }
    .ctps__aberta::after { display: none; }
    .ctps__folha + .ctps__folha { border-top: 1px solid var(--borda-h); }
}

@media (max-width: 720px) {
    .ctps__capa { padding: 14px 18px; }
    .ctps__folha { padding: 20px 18px 22px; }
    .ctps__folha dl { grid-template-columns: 90px minmax(0, 1fr); }
    .ctps__folha dd { font-size: 14px; }
}

/* celular estreito: o rótulo em cima do valor — na coluna ao lado, as
   anotações viravam uma tira fina e comprida */
@media (max-width: 440px) {
    .ctps__folha dl { grid-template-columns: minmax(0, 1fr); }
    .ctps__folha dt { padding: 10px 0 0; border-bottom: 0; }
    .ctps__folha dd { padding: 3px 0 10px; }
}

/* só para quem usa leitor de tela */
.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Formação — a tabela periódica
   --------------------------------------------------------------------------
   Três "elementos" com a sigla grande. O tom de cada um (--tom) tinge o
   fundo e a borda; a legenda usa as mesmas classes. Como o fundo mistura o
   tom com --card, o elemento acompanha o tema sozinho.
   -------------------------------------------------------------------------- */

.tom--curso { --tom: #3b82f6; }
.tom--feito { --tom: #10b981; }
.tom--idioma { --tom: #64748b; }

.tabela { margin-top: 44px; }
.tabela__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: 16px; }

.elemento {
    display: grid;
    align-content: start;
    gap: 2px;
    aspect-ratio: 1;
    padding: 16px 18px 18px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--tom) 12%, var(--card));
    border: 2px solid color-mix(in srgb, var(--tom) 70%, transparent);
    box-shadow: var(--sombra-leve);
}

.elemento__cantos { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--t2); font-variant-numeric: tabular-nums; }
.elemento__simbolo { margin-top: 6px; font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--t1); }
.elemento__nome { margin: 10px 0 0; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--t1); }
.elemento__detalhe { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--t2); }

.tabela__legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.tabela__legenda li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t2); }
.tabela__legenda i { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--tom) 30%, var(--card)); border: 2px solid var(--tom); }

/* no tablet as três cabem lado a lado, mas deixam de ser quadradas */
@media (max-width: 900px) {
    .tabela__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .elemento { aspect-ratio: auto; padding: 14px; }
    .elemento__simbolo { font-size: 46px; }
}

/* no celular, uma embaixo da outra: a sigla à esquerda, o texto ao lado */
@media (max-width: 720px) {
    .tabela__grade { grid-template-columns: minmax(0, 1fr); }
    .elemento { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
    .elemento__cantos { grid-column: 1 / -1; }
    .elemento__simbolo { grid-row: span 2; margin: 0; font-size: 46px; }
    .elemento__nome { margin: 0; }
}

/* --------------------------------------------------------------------------
   Contato
   -------------------------------------------------------------------------- */

/* À esquerda o convite; à direita a janela de conversa. As mensagens que
   ainda não chegaram não ocupam lugar (display: none): a conversa cresce
   como uma de verdade, dentro de uma altura mínima que já reserva o
   espaço. A janela segue o tema; o botão do LinkedIn tem a cor da marca. */

.contato { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 56px; }

.contato__texto h2 { margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: var(--t1); }
.contato__texto p { margin: 14px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.7; color: var(--t2); }
.contato__modos { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.contato__modos li { padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--borda-h); font-size: 13px; font-weight: 600; color: var(--t1); }

.chat {
    --msg-ele: #ffffff;
    --msg-voce: #dbe7ff;
    --fundo-chat: #eef2f8;
    width: 100%;
    max-width: 470px;
    justify-self: center;
    overflow: hidden;
    border-radius: 22px;
    background: var(--fundo-chat);
    box-shadow: 0 24px 44px -18px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .06);
}

[data-theme="dark"] .chat { --msg-ele: #262a33; --msg-voce: #1e3a8a; --fundo-chat: #161a21; }

/* o azul fundo do botão pressionado: o branco fica em 6,7:1 */
.chat__topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #1d4ed8; color: #fff; }
.chat__topo b { display: block; font-size: 15.5px; }
.chat__topo small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .85); }

.chat__foto {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: #fff;
    color: #1d4ed8;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}

/* o mesmo recorte do rosto do guia */
.chat__foto img { position: absolute; left: -16%; top: -4%; width: 132%; height: 132%; max-width: none; object-fit: cover; object-position: 50% 10%; }

.chat__conversa { display: grid; align-content: start; gap: 8px; margin: 0; padding: 18px 16px 8px; list-style: none; }

.msg {
    max-width: 84%;
    padding: 9px 13px 10px;
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--t1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    animation: msg-entra .3s var(--ease) both;
}

@keyframes msg-entra { from { opacity: 0; transform: translateY(8px); } }

.msg--ele { justify-self: start; background: var(--msg-ele); border-bottom-left-radius: 4px; }
.msg--voce { justify-self: end; background: var(--msg-voce); border-bottom-right-radius: 4px; }
[data-theme="dark"] .msg--voce { color: #fff; }
.msg.escondida { display: none; }

/* o horário no cantinho e, nas de quem visita, os dois tiques azuis de lida */
.msg__meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -4px 10px; font-size: 11px; line-height: 1; color: var(--t3); font-variant-numeric: tabular-nums; }
.msg--voce .msg__meta { color: color-mix(in srgb, var(--t1) 55%, transparent); }
[data-theme="dark"] .msg--voce .msg__meta { color: rgba(255, 255, 255, .72); }
.msg__visto { width: 16px; height: 10px; fill: none; stroke: #53bdeb; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* os três pontinhos de "digitando" */
.digitando { justify-self: start; display: none; gap: 4px; padding: 12px 14px; border-radius: 16px; border-bottom-left-radius: 4px; background: var(--msg-ele); }
.digitando.ativo { display: inline-flex; }
.digitando i { width: 7px; height: 7px; border-radius: 50%; background: var(--t3); animation: ponto 1s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }

@keyframes ponto { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat__acoes { display: grid; gap: 12px; padding: 12px 16px 18px; }

/* O botão da conversa é o do LinkedIn, no azul da marca: branco sobre
   #0a66c2 dá 5,7:1, sem precisar da sombra no texto que o verde do
   WhatsApp pedia (24/09/2026: o número saiu da página). */
.chat__principal {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: min(100%, 320px);
    height: 44px;
    border-radius: 999px;
    background: #0a66c2;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
    transition: filter .2s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}

@media (hover: hover) { .chat__principal:hover { filter: brightness(1.1); } }
.chat__principal:active { transform: translateY(3px); box-shadow: none; }
.chat__principal .icone { width: 19px; height: 19px; }

.chat__redes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: 13px; color: var(--t2); }

/* cada rede com a cor da marca, no fundo e no texto (contraste do texto
   branco: LinkedIn 5,7:1, GitHub 14,6:1) */
.rede {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
    transition: filter .2s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}

@media (hover: hover) { .rede:hover { filter: brightness(1.1); } }
.rede:active { transform: translateY(2px); box-shadow: none; }
.rede .icone { width: 17px; height: 17px; }

.rede--linkedin { background: #0a66c2; }
.rede--github { background: #24292f; }
.rede--email { background: var(--btn); }

/* no tema escuro o grafite do GitHub some no fundo da conversa */
[data-theme="dark"] .rede--github { border-color: rgba(255, 255, 255, .24); }
/* o convite numa linha só, e as redes juntas embaixo */
.chat__redes > span { flex-basis: 100%; text-align: center; }

/* a última seção termina no rodapé: sem a folga de baixo das outras seções
   (112px) somada à do rodapé, sobrava um vazio grande no fim da página.
   Duas classes, para valer também no celular, onde .secao muda a folga. */
.secao.secao--fim { padding-bottom: 0; }

.rodape {
    margin-top: 36px;
    /* no iPhone, a barra de baixo não cobre o texto */
    padding-block: 26px calc(28px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--borda);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--t3);
}

/* --------------------------------------------------------------------------
   Botão flutuante — o guia
   --------------------------------------------------------------------------
   Desce para o canto quando o topo sai da tela e comenta cada seção uma vez,
   recolhendo o balão sozinho. Some no contato: ali ele já cumpriu o papel.
   -------------------------------------------------------------------------- */

.guia {
    position: fixed;
    right: max(22px, env(safe-area-inset-right, 0px));
    bottom: max(22px, env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
    translate: 0 150%;
    visibility: hidden;
    transition: translate .6s var(--ease), visibility 0s linear .6s;
}

.guia.visivel { translate: 0 0; visibility: visible; transition: translate .6s var(--ease); }
.guia > * { pointer-events: auto; }

.guia__balao {
    position: relative;
    max-width: 290px;
    margin-bottom: 30px;
    padding: 14px 16px;
    border-radius: 16px 16px 4px 16px;
    background: var(--card);
    border: 1px solid var(--borda-h);
    box-shadow: var(--sombra);
    font-size: 14px;
    line-height: 1.55;
    color: var(--t1);
    transform-origin: 100% 100%;
    transition: opacity .35s var(--ease), scale .35s var(--ease);
}

.guia__balao[data-fechado="true"] { opacity: 0; scale: .92; pointer-events: none; }

.guia__texto { padding-right: 20px; transition: opacity .2s var(--ease); }
.guia__texto.trocando { opacity: 0; }
.guia__texto a { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.guia__texto a .icone { width: 13px; height: 13px; }

.guia__fechar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
}

@media (hover: hover) { .guia__fechar:hover { color: var(--t1); background: var(--card-2); } }
.guia__fechar .icone { width: 14px; height: 14px; }

.guia__rosto {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, var(--card)), var(--card-2));
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--sombra-leve);
    transition: transform .25s var(--ease);
}

@media (hover: hover) { .guia__rosto:hover { transform: translateY(-2px); } }

.guia__rosto img {
    position: absolute;
    left: -16%;
    top: -4%;
    width: 132%;
    height: 132%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 10%;
    transition: opacity .25s var(--ease);
}

.guia::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 42px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--btn);
    box-shadow: 0 0 0 2px var(--bg);
    opacity: 0;
    scale: .4;
    transition: opacity .25s var(--ease), scale .25s var(--ease);
    pointer-events: none;
}

.guia.novo::after { opacity: 1; scale: 1; }

/* no dedo: o X cresce para 40px com o ícone no mesmo lugar (o centro
   continua a 20px do canto), e o "Conversar" ganha altura de toque sem
   mudar o espaço que ocupa */
@media (pointer: coarse) {
    .guia__fechar { top: 0; right: 0; width: 40px; height: 40px; }
    .guia__texto a { padding-block: 12px; margin-block: -4px -12px; }
}

@media (max-width: 720px) {
    .guia { right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
    .guia__balao { max-width: calc(100vw - 110px); font-size: 13.5px; }
    .guia__rosto { width: 54px; height: 54px; }
}

/* --------------------------------------------------------------------------
   Revelação
   -------------------------------------------------------------------------- */

.js .revelar { opacity: 0; translate: 0 20px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.js .revelar.dentro { opacity: 1; translate: 0 0; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {

    /* a cena presa no alto, os passos passando por baixo como cartões */
    .camadas { --palco-alto: 360px; --palco-letra: 13px; padding-block: 88px 96px; }
    .camadas__grade { display: flex; flex-direction: column; }

    .camadas__palco {
        align-self: stretch;
        top: 64px;
        z-index: 5;
        margin: 28px -28px 0;
        padding: 10px 28px 14px;
        gap: 6px;
        background: var(--bg);
    }

    /* embaixo da área presa, o fundo se desfaz: os cartões somem por
       baixo dela aos poucos, em vez de serem cortados por uma linha */
    .camadas__palco::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 32px;
        background: linear-gradient(var(--bg), transparent);
        pointer-events: none;
    }

    .camadas__passos { padding-bottom: 18vh; }
    .camadas__passo { min-height: 58vh; min-height: 58svh; justify-content: flex-start; padding-top: 28px; }
    .js .camadas__passo { opacity: .45; }
    .camadas__passo > div { padding: 18px 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--borda); }
    .camadas__passo.ativo > div { border-color: var(--accent-bd); }
    .camadas__passo h3 { font-size: 21px; }
    .camadas__passo p { font-size: 15.5px; }

    .sobre { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .sobre__cabide { --clipe: 96px; position: relative; top: 0; height: 620px; }
    /* no celular a tela vem antes do texto */
    .obra, .obra--inversa { grid-template-columns: minmax(0, 1fr); }
    .obra--inversa .obra__texto { order: 0; }
    .obra__tela, .obra--inversa .obra__tela { order: -1; padding: 20px; border: 0; border-bottom: 1px solid var(--borda); }
    .topo__links { display: none; }
    .topo__acoes { margin-left: auto; }
    .menu-btn { display: grid; }
    .menu-celular { display: flex; }
    .contato { grid-template-columns: minmax(0, 1fr); gap: 32px; }

    /* a nuvem ocupa a largura toda; a ficha vira uma folha que sobe de baixo */
    .tec-grade { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .bolhas { height: 400px; }
    .bolha { --d: 92px; font-size: 12px; }
    .bolha--t1 { --d: 76px; font-size: 11px; }
    .bolha--t3 { --d: 118px; font-size: 14.5px; }

    .js .tec-painel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        min-height: 0;
        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 26px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        border-radius: 22px 22px 0 0;
        border-bottom: 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .35);
        translate: 0 105%;
        visibility: hidden;
        transition: translate .38s var(--ease), visibility 0s linear .38s;
    }

    .js .tec-painel.aberto { translate: 0 0; visibility: visible; transition: translate .38s var(--ease); }
    .js .tec-painel .tec-convite { display: none; }
    .js .tec-painel__fechar { display: grid; }

    .js .tec-fundo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 89;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s var(--ease);
    }

    .js .tec-fundo.aberto { opacity: 1; pointer-events: auto; }
}

/* tela de computador baixa: a cena encolhe para caber presa */
@media (min-width: 1001px) and (max-height: 760px) {
    .camadas { --palco-alto: 420px; --palco-letra: 13.5px; }
}

@media (min-width: 1001px) and (max-height: 620px) {
    .camadas { --palco-alto: 340px; --palco-letra: 11.5px; }
}

@media (max-width: 720px) {
    .secao { padding-block: 76px; }
    .secao--curta { padding-block: 64px; }
    .limite { padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); }
    .topo { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); gap: 12px; }
    .marca__nome { font-size: 14.5px; }
    .obra__texto { padding: 24px 20px; }
    .obra__tela, .obra--inversa .obra__tela { padding: 14px; }
    .obra h3 { font-size: 21px; }
    .capacidades { grid-template-columns: minmax(0, 1fr); }
    /* lado a lado enquanto couberem (cada um pede 140px); numa tela
       estreita demais, um embaixo do outro */
    .hero__acoes { width: 100%; }
    .hero__acoes .btn { flex: 1 1 140px; height: 44px; padding: 0 14px; font-size: 14.5px; }

    /* no celular o palco é estreito: tudo lá dentro encolhe junto */
    .camadas { --palco-alto: 300px; --palco-letra: 10.5px; padding-block: 64px 80px; }
    .camadas__palco { margin-inline: -20px; padding-inline: 20px; }
    .voo__ficha { left: 8px; top: 8px; gap: 6px; padding: 5px 6px 5px 9px; font-size: 11px; }

    .bolhas { height: 360px; }
    .bolha { --d: 76px; font-size: 11px; }

    .dip { padding: 28px 22px 88px; }
    .dip__nome { font-size: 20px; }
    .dip__texto { font-size: 13.5px; }
    .dip__selo { width: 46px; height: 46px; margin-left: -23px; bottom: 24px; }
    .dip__selo .icone { width: 20px; height: 20px; }
    .bolha--t1 { --d: 66px; font-size: 10.5px; }
    .bolha--t3 { --d: 94px; font-size: 12.5px; }
    .voo__estado { padding: 2px 7px; font-size: 10px; }
}

/* celular deitado: sobra pouca altura, a cena fica bem baixa */
@media (max-width: 1000px) and (max-height: 500px) {
    /* celular deitado: o busto e o nome cabem na altura da tela, e o texto
       aparece logo na primeira rolagem */
    .capa__visual, .hero__fundo { height: calc(100svh - 64px); }
    .capa__palavra { font-size: min(21vw, 34svh); }
    .retrato__foto img { height: calc(100svh - 90px); }
    /* os projetos lado a lado, como no computador: empilhada, cada tela
       passava da altura inteira */
    .obra, .obra--inversa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .obra--inversa .obra__texto { order: 2; }
    .obra__tela, .obra--inversa .obra__tela { order: 0; justify-content: flex-start; padding: 20px; border: 0; border-left: 1px solid var(--borda); }
    .obra--inversa .obra__tela { border-left: 0; border-right: 1px solid var(--borda); }
    /* as bolhas no tamanho do celular, numa área da altura da tela: com
       400px, as de cima ficavam atrás do menu */
    .bolhas { height: max(260px, calc(100svh - 110px)); }
    .bolha { --d: 76px; font-size: 11px; }
    .bolha--t1 { --d: 66px; font-size: 10.5px; }
    .bolha--t3 { --d: 96px; font-size: 12.5px; }
    /* o convite e a conversa lado a lado, como no computador */
    .contato { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: 28px; }
    /* o cartão da tecnologia no meio, com linhas de tamanho de leitura */
    .js .tec-painel { max-width: 600px; margin-inline: auto; max-height: 88svh; }
    /* a cena ao lado dos passos, como no computador: presa em cima ela
       tomava a altura inteira e o texto dos passos ficava cortado */
    .camadas { --palco-alto: calc(100svh - 120px); --palco-letra: min(8.5px, 1.1vw); }
    .camadas__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 24px; }
    .camadas__palco { align-self: start; top: 76px; z-index: auto; margin: 0; padding: 0; background: none; }
    .camadas__palco::after { display: none; }
    .voo__ficha { display: none; }
    .camadas__passos { padding-bottom: 10vh; }
    .camadas__passo { min-height: calc(100svh - 64px); justify-content: center; padding-top: 0; }
}

/* celular estreito: nome + interruptor + Entrar + menu passam de 390px, então
   o Entrar desce para dentro do menu */
@media (max-width: 440px) {
    .topo__acoes > .btn--baixo { display: none; }
    .menu-celular .btn { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Celular e tablet: menos trabalho para a placa de vídeo
   --------------------------------------------------------------------------
   Três efeitos que o computador faz sem sentir e que o celular sente na
   rolagem. A olho nu o desenho fica o mesmo:
   · o topo não desfoca o que passa por baixo dele — o fundo já era 92%
     opaco, então vira fundo sólido;
   · o brilho atrás do busto já é um degradê: o desfoque por cima era
     redundante, e numa camada que se mexe o celular o refazia a cada quadro;
   · os painéis da cena dos Bastidores são desenhados uma vez, no tamanho
     natural, e a câmera só encolhe a imagem pronta. Antes o navegador
     redesenhava o texto de cada painel a cada quadro do voo. Eles nunca
     passam do tamanho natural — somem antes de chegar perto da câmera —,
     então não perdem nitidez.
   Só em aparelho de toque: o computador continua exatamente como estava.
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .topo {
        background: var(--bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .retrato__brilho { filter: none; }

    .voo__obj { will-change: transform; }

    /* 24/09/2026 — "no Android as animações travam".
       · A borda do busto vem pronta no arquivo (wesley-toque.webp): a
         máscara dupla de degradê era refeita pela placa de vídeo a cada
         quadro, porque o busto desce com a rolagem. Medido na capa: 555 ms
         de GPU num arrasto de 1,5 s (CPU 6x mais lenta, tela 390 a 3x).
       · Camada só no que se mexe: no toque o que anda é o .retrato__entra
         (desce com a rolagem); a foto e o halo só se moviam com o mouse. */
    .retrato__foto--pronta {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .retrato__foto, .retrato__brilho { will-change: auto; }
    .retrato__entra { will-change: transform; }

    /* O cordão do crachá é redesenhado a cada quadro do balanço, com o nome
       correndo pela curva: na própria camada, o redesenho não obriga a
       repintar a seção inteira do Sobre. */
    .cordao { will-change: transform; }
}

/* O bloco que desligava o movimento (prefers-reduced-motion) saiu em 24/09/2026: no
   iPhone com "Reduzir movimento" ligado a página ficava sem nenhuma animação
   (troca de tema, crachá, a cena do PI…), e o dono decidiu que ela anima
   sempre, como no computador. Ele sabia do porém: quem liga a opção costuma
   ter enjoo ou tontura com movimento na tela. Para voltar a respeitar a
   opção, o bloco está no backup usley_home_antes_forcar_2409.tgz. */

html { scroll-behavior: smooth; scroll-padding-top: 64px; }
/* sem border-radius aqui: o contorno já segue a curva de cada elemento, e
   forçar 6px deixava os botões em pílula quadrados no foco */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* No Android, tocar num link pinta um retângulo azul por cima dele. Nas
   peças que já respondem ao toque do seu jeito — afundam, giram, se
   arrastam, abrem — ele só atrapalha (na tecla do idioma, cobria o afundar).
   Os links comuns continuam com ele. */
.idiomas__op, .tema, .menu-btn, .btn, .rede, .chat__principal, .cracha, .bolha, .guia__rosto {
    -webkit-tap-highlight-color: transparent;
}

/* O Safari 15 (o iPhone 6s, o 7 e o SE de 1ª geração param nele) não tem
   color-mix(). Uma cor antes dela não serve de reserva: com var() dentro, a
   declaração vale na leitura e só falha no cálculo, e a propriedade cai no
   inicial (fundo transparente, borda sumida). As reservas moram aqui, e só
   quem não tem color-mix() lê este bloco (02/10/2026). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    /* sem isto o topo, que fica por cima do texto, era transparente */
    .topo { background: var(--bg); }
}