/* ===== FONTES ===== */

@font-face {
    font-family: "inter";
    src: url(../fonts/inter-regular.woff2) format(woff2);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "inter";
    src: url(../fonts/inter-medium.woff2) format(woff2);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "inter";
    src: url(../fonts/inter-semibold.woff2) format(woff2);
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "inter";
    src: url(../fonts/inter-bold.woff2) format(woff2);
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "jetbrains";
    src: url(../fonts/jetbrainsmono-regular.woff2) format(woff2);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "jetbrains";
    src: url(../fonts/jetbrainsmono-medium.woff2) format(woff2);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ===== REGRAS GERAIS ===== */

/*reset*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*folga acima da seção quando um link leva até ela (de 1024px para cima, ver o bloco do cabeçalho)*/
html {
    scroll-padding-top: 16px;
}

body {
    background-color: #0D1117;
    color: #C9D1D9;
    font-family: inter, system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

img {
    display: block;
    max-width: 100%;
}

ul {
    list-style: none;
}

h1,
h2,
h3 {
    color: #E6EDF3;
    line-height: 1.2;
}

a {
    color: #7CC4FF;
    text-underline-offset: 3px;
}

a:hover {
    color: #A5D6FF;
}

/*contorno ao navegar com a tecla Tab*/
:focus-visible {
    outline: 2px solid #7CC4FF;
    outline-offset: 3px;
    border-radius: 2px;
}

/*esconde da tela, mas o leitor de tela lê (ex: aviso de link que abre em nova aba)*/
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*link "Pular para o conteúdo": fica escondido acima da tela*/
.pular-conteudo {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 20;
    font-weight: 600;
    text-decoration: none;
    color: #0D1117;
    background-color: #7CC4FF;
    border-radius: 8px;
    padding: 12px 24px;
}

/*aparece quando recebe o foco pelo Tab (a cor repete a de cima para o a:hover não trocar)*/
.pular-conteudo:focus {
    top: 16px;
    color: #0D1117;
}

/*fundo: cobre a tela toda, fica atrás de tudo e não recebe clique*/
.fundo {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-image: radial-gradient(circle at top right, #7CC4FF14, #7CC4FF00 600px);
}

/*cada camada é um ponto no canto; as partículas são as sombras dele*/
.fundo-camada {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    border-radius: 50%;
}

/*as 14 partículas aparecem duas vezes: na tela e 100vh abaixo, para o loop não ter buraco*/
.fundo-camada-1 {
    box-shadow:
        5vw 12vh #7CC4FF80, 18vw 45vh #C9D1D966, 27vw 80vh #7CC4FF59, 36vw 22vh #C9D1D940,
        44vw 63vh #7CC4FF66, 52vw 8vh #C9D1D959, 61vw 38vh #7CC4FF40, 69vw 90vh #C9D1D980,
        76vw 54vh #7CC4FF59, 83vw 17vh #C9D1D966, 91vw 72vh #7CC4FF80, 97vw 35vh #C9D1D940,
        12vw 96vh #7CC4FF66, 58vw 75vh #C9D1D959,
        5vw 112vh #7CC4FF80, 18vw 145vh #C9D1D966, 27vw 180vh #7CC4FF59, 36vw 122vh #C9D1D940,
        44vw 163vh #7CC4FF66, 52vw 108vh #C9D1D959, 61vw 138vh #7CC4FF40, 69vw 190vh #C9D1D980,
        76vw 154vh #7CC4FF59, 83vw 117vh #C9D1D966, 91vw 172vh #7CC4FF80, 97vw 135vh #C9D1D940,
        12vw 196vh #7CC4FF66, 58vw 175vh #C9D1D959;
}

/*camada 2: pontos de 2px*/
.fundo-camada-2 {
    width: 2px;
    height: 2px;
    box-shadow:
        9vw 30vh #C9D1D959, 15vw 70vh #7CC4FF66, 24vw 5vh #C9D1D940, 33vw 50vh #7CC4FF80,
        41vw 88vh #C9D1D966, 49vw 27vh #7CC4FF59, 57vw 60vh #C9D1D940, 66vw 14vh #7CC4FF66,
        73vw 78vh #C9D1D959, 80vw 42vh #7CC4FF40, 88vw 6vh #C9D1D966, 94vw 58vh #7CC4FF59,
        3vw 84vh #C9D1D940, 70vw 97vh #7CC4FF66,
        9vw 130vh #C9D1D959, 15vw 170vh #7CC4FF66, 24vw 105vh #C9D1D940, 33vw 150vh #7CC4FF80,
        41vw 188vh #C9D1D966, 49vw 127vh #7CC4FF59, 57vw 160vh #C9D1D940, 66vw 114vh #7CC4FF66,
        73vw 178vh #C9D1D959, 80vw 142vh #7CC4FF40, 88vw 106vh #C9D1D966, 94vw 158vh #7CC4FF59,
        3vw 184vh #C9D1D940, 70vw 197vh #7CC4FF66;
}

/*camada 3: pontos de 1px mais fracos*/
.fundo-camada-3 {
    box-shadow:
        2vw 40vh #7CC4FF26, 11vw 20vh #C9D1D933, 21vw 62vh #7CC4FF33, 30vw 93vh #C9D1D926,
        39vw 3vh #7CC4FF26, 47vw 46vh #C9D1D933, 55vw 84vh #7CC4FF33, 64vw 28vh #C9D1D926,
        72vw 66vh #7CC4FF26, 79vw 9vh #C9D1D933, 86vw 50vh #7CC4FF33, 95vw 86vh #C9D1D926,
        35vw 74vh #7CC4FF26, 99vw 18vh #C9D1D933,
        2vw 140vh #7CC4FF26, 11vw 120vh #C9D1D933, 21vw 162vh #7CC4FF33, 30vw 193vh #C9D1D926,
        39vw 103vh #7CC4FF26, 47vw 146vh #C9D1D933, 55vw 184vh #7CC4FF33, 64vw 128vh #C9D1D926,
        72vw 166vh #7CC4FF26, 79vw 109vh #C9D1D933, 86vw 150vh #7CC4FF33, 95vw 186vh #C9D1D926,
        35vw 174vh #7CC4FF26, 99vw 118vh #C9D1D933;
}

/*barra de progresso da rolagem: fina, no topo da tela, acima do cabeçalho; começa vazia (scaleX 0)*/
.progresso {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 30;
    background-color: #7CC4FF;
    transform-origin: left;
    transform: scaleX(0);
    pointer-events: none;
}

/*logos e ícones (GitHub, LinkedIn, conversa, copiar, site, detalhes, machado e o download do currículo):
o arquivo vira máscara e pega a cor do texto*/
.logo-rede,
.inicio-botao-curriculo-icone {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.logo-github {
    -webkit-mask-image: url(../img/icones/ui-github.svg);
    mask-image: url(../img/icones/ui-github.svg);
}

.logo-linkedin {
    -webkit-mask-image: url(../img/icones/ui-linkedin.svg);
    mask-image: url(../img/icones/ui-linkedin.svg);
}

.logo-conversa {
    -webkit-mask-image: url(../img/icones/ui-conversa.svg);
    mask-image: url(../img/icones/ui-conversa.svg);
}

.logo-copiar {
    -webkit-mask-image: url(../img/icones/ui-copiar.svg);
    mask-image: url(../img/icones/ui-copiar.svg);
}

.logo-site {
    -webkit-mask-image: url(../img/icones/ui-site.svg);
    mask-image: url(../img/icones/ui-site.svg);
}

.logo-detalhes {
    -webkit-mask-image: url(../img/icones/ui-detalhes.svg);
    mask-image: url(../img/icones/ui-detalhes.svg);
}

.logo-machado {
    -webkit-mask-image: url(../img/icones/ui-machado.svg);
    mask-image: url(../img/icones/ui-machado.svg);
}

/*padding de todas as seções (elas se separam só pelo espaço, sem linha)*/
main > section {
    padding: 96px max(32px, calc((100% - 1040px) / 2));
}

/*rótulo(título) pequeno no inicio de cada seção (PROJETOS, SOBRE MIM...)*/
main h2 {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7CC4FF;
    margin-bottom: 12px;
}

/*título(<p>) grande logo abaixo do rótulo(titulo) de cada seção*/
main h2 + p {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #E6EDF3;
    margin-bottom: 40px;
}

/*balãozinho com o nome, escondido acima do botão ou do logo (Início, Projetos, Tecnologias, Experiência, Contato e rodapé).
O leitor de tela usa o texto oculto ou o aria-label de cada botão*/
.inicio-icone-rotulo,
.projeto-acao-rotulo,
.tecnologias-nome,
.experiencia-logo-rotulo,
.contato-dica {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    color: #E6EDF3;
    background-color: #0D1117;
    border: 1px solid #30363D;
    border-radius: 6px;
    padding: 4px 8px;
    pointer-events: none;
    opacity: 0;
}

/*8px entre o balãozinho e o botão (no Contato ele fica colado, porque o botão de copiar já é maior que o ícone)*/
.inicio-icone-rotulo,
.projeto-acao-rotulo,
.tecnologias-nome,
.experiencia-logo-rotulo {
    margin-bottom: 8px;
}

/*conteúdo das seções começa invisível (só com JavaScript ligado). A seção fica parada para o menu acertar a parada*/
.js .revelar:not(.visivel) > * {
    opacity: 0;
}

/*conteúdo aparece quando o JavaScript coloca a classe visivel na seção.
É animação, e não transição, para não brigar com o hover dos cartões depois de terminar*/
.js .revelar.visivel > * {
    animation: revelar-aparecer 0.5s ease-out;
}

/*rótulo "próxima seção" (montado pelo script.js): nome da seção em maiúsculas com uma linha fina embaixo.
Escondido aqui; só aparece no computador em tela cheia, ver o fim deste bloco.
O "Voltar ao topo" usa o mesmo estilo, mas está no index.html*/
.proxima-secao {
    display: none;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    font-family: inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: #C9D1D9;
    border-radius: 6px;
    padding: 0 12px;
}

/*linha vertical fina embaixo do nome, no centro*/
.proxima-secao::after {
    content: "";
    width: 2px;
    height: 28px;
    margin-top: 8px;
    background-color: #C9D1D9;
}

.proxima-secao:focus-visible {
    color: #7CC4FF;
}

/*"Voltar ao topo" (último rótulo): aparece em todas as larguras, no fim do contato, com a linha em cima do texto.
Fica aqui, junto dos outros rótulos, porque a regra da tela cheia (no fim deste bloco) precisa vir depois desta*/
.proxima-secao-topo {
    display: flex;
    margin: 32px auto 0;
}

.proxima-secao-topo::after {
    content: none;
}

.proxima-secao-topo::before {
    content: "";
    width: 2px;
    height: 28px;
    margin-bottom: 8px;
    background-color: #C9D1D9;
}

@keyframes revelar-aparecer {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*mesma animação subindo 24px (usada só com movimento)*/
@keyframes revelar-subir {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/*partículas sobem uma tela inteira; no fim, a cópia de baixo está onde a de cima começou*/
@keyframes fundo-subir {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100vh);
    }
}

/*linha do rótulo da próxima seção cresce até o tamanho todo e volta*/
@keyframes proxima-linha {
    0%,
    100% {
        transform: scaleY(0.4);
    }

    50% {
        transform: scaleY(1);
    }
}

/*seções com menos respiro no tablet e no celular*/
@media (max-width: 899px) {

    main > section {
        padding: 48px 32px;
    }
}

/*e menos ainda no celular*/
@media (max-width: 599px) {

    main > section {
        padding: 32px 20px;
    }
}

/*tela cheia: computador com janela de pelo menos 640px de altura, uma seção por tela*/
@media (min-width: 1024px) and (min-height: 640px) {

    /*cada seção ocupa no mínimo uma tela, com o conteúdo centralizado na vertical.
    62px em cima (altura do cabeçalho aberto) e 80px embaixo (espaço do link da próxima seção).
    100svh logo depois de 100vh: quem entende svh usa ele, quem não entende fica com o vh.
    Se o conteúdo for mais alto que a tela, a seção cresce e nada é cortado*/
    main > section {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
        min-height: 100svh;
        padding-top: 62px;
        padding-bottom: 80px;
    }

    /*rótulo da próxima seção no pé de cada seção, centralizado (margin auto com left e right 0).
    Mede 55px (texto de 19px, 8px e a linha de 28px): cabe nos 80px de baixo da seção*/
    .proxima-secao {
        position: absolute;
        bottom: 24px;
        left: 0;
        right: 0;
        display: flex;
        margin: 0 auto;
    }
}

/*movimento: só para quem não pediu menos movimento*/
@media (prefers-reduced-motion: no-preference) {

    /*links do menu e rótulos deslizam até a seção (com movimento reduzido, vão direto).
    Só depois que a página carrega (classe rolagem-suave, colocada pelo script.js): assim, quem chega
    por um link com âncora (#projetos) já abre na seção, sem deslizar desde o topo*/
    html.rolagem-suave {
        scroll-behavior: smooth;
    }

    /*conteúdo das seções sobe um pouco enquanto aparece*/
    .js .revelar:not(.visivel) > * {
        transform: translateY(24px);
    }

    .js .revelar.visivel > * {
        animation-name: revelar-subir;
    }

    /*partículas do fundo sobem sem parar, cada camada numa velocidade*/
    .fundo-camada-1 {
        animation: fundo-subir 60s linear infinite;
    }

    .fundo-camada-2 {
        animation: fundo-subir 90s linear infinite;
    }

    .fundo-camada-3 {
        animation: fundo-subir 120s linear infinite;
    }

    /*linha dos rótulos da próxima seção pulsa, crescendo a partir do texto:
    de cima para baixo e, no "Voltar ao topo", de baixo para cima*/
    .proxima-secao::after {
        transform-origin: top;
        animation: proxima-linha 2s ease-in-out infinite;
    }

    .proxima-secao-topo::before {
        transform-origin: bottom;
        animation: proxima-linha 2s ease-in-out infinite;
    }

    /*"Pular para o conteúdo" afunda no clique, como os outros botões, e volta suave*/
    .pular-conteudo {
        transition: transform 80ms ease-out;
    }

    .pular-conteudo:active {
        transform: translateY(1px) scale(0.97);
        transition: transform 80ms ease-out;
    }
}

/*mouse: link da próxima seção fica azul*/
@media (hover: hover) {

    .proxima-secao:hover {
        color: #7CC4FF;
    }
}

/* ===== CABEÇALHO E MENU ===== */

/*cabeçalho: só o menu, no centro, sem fundo e sem borda (só existe de 1024px para cima)*/
.cabecalho {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 14px;
    padding: 16px max(32px, calc((100% - 1040px) / 2));
}

/*menu: Projetos, Tecnologias... espaçamento*/
.menu ul {
    display: flex;
    justify-content: center;
    gap: 28px;
}

/*menu: Projetos, Sobre... cinza e sem sublinhado*/
.menu a {
    position: relative;
    color: #8B96A5;
    text-decoration: none;
}

/*menu: Projetos, Sobre... hover*/
.menu a:hover {
    color: #E6EDF3;
}

/*menu: link da seção que está na tela*/
.menu a.ativo {
    color: #7CC4FF;
}

/*sublinhado do menu: começa encolhido à esquerda*/
.menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background-color: #7CC4FF;
    transform: scaleX(0);
    transform-origin: left;
}

/*sublinhado cheio no hover, no foco pelo teclado e no link ativo*/
.menu a:hover::after,
.menu a:focus-visible::after,
.menu a.ativo::after {
    transform: scaleX(1);
}

/*linha do enfeite do cabeçalho se desenha (de largura 0 até a largura toda)*/
@keyframes cabecalho-linha-desenhar {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/*tracinho do enfeite cresce de baixo para cima*/
@keyframes cabecalho-tracinho-crescer {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

/*celular e tablet: de 1023px para baixo não existe cabeçalho nem menu*/
@media (max-width: 1023px) {

    /*a navegação é pela rolagem (a barra de progresso e o "Pular para o conteúdo" continuam)*/
    .cabecalho {
        display: none;
    }
}

/*computador: de 1024px para cima o cabeçalho esconde no topo da página*/
@media (min-width: 1024px) {

    /*começa escondido acima da tela (só com JavaScript, pela classe .js no html).
    Continua no lugar e focável: o Tab ainda chega nos links*/
    .js .cabecalho {
        transform: translateY(-100%);
        opacity: 0;
    }

    /*desce quando a pessoa rola a página ou quando um link do menu recebe foco*/
    .js .cabecalho.cabecalho-visivel {
        transform: translateY(0);
        opacity: 1;
    }

    /*cabeçalho aberto mede 61,4px (23px em cima, linha de 22,4px dos links, 16px embaixo)*/
    html {
        scroll-padding-top: 62px;
    }

    /*menu flutuando sobre o conteúdo (o cabeçalho não tem fundo); 23px em cima para caber o enfeite
    e deixar 12px entre a linha e o topo das letras*/
    .cabecalho {
        padding-top: 23px;
    }

    /*sombra escura em volta das letras, para lerem bem por cima de caixas e imagens
    (quatro camadas: as menores deixam o contorno mais escuro, as maiores espalham)*/
    .menu a {
        text-shadow: 0 0 2px #0D1117, 0 0 4px #0D1117, 0 0 8px #0D1117, 0 0 16px #0D1117;
    }

    /*enfeite em forma de ⊥: linha horizontal de 120px a 14px do topo...*/
    .cabecalho::before {
        content: "";
        position: absolute;
        top: 14px;
        left: 0;
        right: 0;
        width: 120px;
        height: 2px;
        margin: 0 auto;
        background-color: #C9D1D9;
        transform-origin: center;
    }

    /*...e tracinho de 5px saindo do meio dela para cima (de 9px a 14px do topo,
    6px abaixo da barra de progresso, que vai de 0 a 3px)*/
    .cabecalho::after {
        content: "";
        position: absolute;
        top: 9px;
        left: 0;
        right: 0;
        width: 2px;
        height: 5px;
        margin: 0 auto;
        background-color: #C9D1D9;
        transform-origin: bottom;
    }
}

/*tela cheia: cabeçalho fixo por cima da primeira tela*/
@media (min-width: 1024px) and (min-height: 640px) {

    /*sem scroll-padding: cada seção já tem o próprio espaço em cima.
    Sem scroll-snap: a roda já vai de seção em seção pelo script.js, e o encaixe puxava de volta a rolagem dentro da Formação*/
    html {
        scroll-padding-top: 0;
    }

    /*cabeçalho fixo: não ocupa espaço no alto da página, então a primeira tela começa colada no topo*/
    .cabecalho {
        position: fixed;
        left: 0;
        right: 0;
    }

    /*foco pelo teclado nunca fica atrás do cabeçalho*/
    main a,
    main button {
        scroll-margin-top: 80px;
    }
}

/*cabeçalho e sublinhado do menu com movimento*/
@media (prefers-reduced-motion: no-preference) {

    /*sublinhado do menu cresce da esquerda para a direita*/
    .menu a::after {
        transition: transform 0.2s ease-out;
    }

    /*cabeçalho desce e aparece suave (só muda de estado de 1024px para cima)*/
    .cabecalho {
        transition: transform 300ms ease-out, opacity 300ms ease-out;
    }

    /*quando o cabeçalho aparece, a linha se desenha do centro para os lados e depois o tracinho cresce para cima.
    O backwards deixa os dois encolhidos durante o atraso (os enfeites só existem de 1024px para cima)*/
    .js .cabecalho.cabecalho-visivel::before {
        animation: cabecalho-linha-desenhar 300ms ease-out 150ms backwards;
    }

    .js .cabecalho.cabecalho-visivel::after {
        animation: cabecalho-tracinho-crescer 150ms ease-out 400ms backwards;
    }
}

/* ===== INÍCIO ===== */

/*o início ocupa a tela inteira em todas as larguras, com o conteúdo no centro (na vertical pelo flex, na horizontal pelo text-align).
100svh logo depois de 100vh: quem entende svh usa ele. É min-height: se o conteúdo for mais alto que a tela, a seção cresce*/
#inicio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 128px;
    padding-bottom: 128px;
    text-align: center;
}

#inicio h1 {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

/*a parte visível do nome não é copiada: quem copia leva só o texto oculto "Marco Antônio Machado"*/
.inicio-nome [aria-hidden="true"] {
    user-select: none;
}

/*sobrenome no lugar de "Machado": ícone e <machado /> juntos, na linha de base do nome
(inline-flex faz os dois quebrarem de linha juntos quando não cabem)*/
.inicio-sobrenome {
    display: inline-flex;
    align-items: baseline;
    font-family: jetbrains, ui-monospace, monospace;
    font-weight: 700;
    color: #7CC4FF;
}

/*ícone do machado do tamanho da letra (a cor vem do color pelo currentColor do .logo-rede)*/
.inicio-sobrenome .logo-machado {
    width: 1em;
    height: 1em;
    margin-right: 0.2em;
}

/*na fonte mono o espaço tem a largura de uma letra (0,6em) e fica grande antes do />.
O word-spacing tira 0,3em: sobra um espaço normal, do tamanho do espaço do Inter*/
.inicio-sobrenome-texto {
    word-spacing: -0.3em;
}

/*cargo em maiúsculas espaçadas; o padding-left compensa o espaço que sobra depois da última letra*/
.inicio-cargo {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    padding-left: 0.25em;
    color: #C9D1D9;
    margin-bottom: 32px;
}

/*linha das tecnologias: altura de uma linha*/
.inicio-tecnologias {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 22px;
    line-height: 36px;
    height: 36px;
    overflow: hidden;
    color: #7CC4FF;
    margin-bottom: 40px;
}

/*caixa da palavra: largura fixa para a tarja ter sempre o mesmo tamanho*/
.inicio-palavra-caixa {
    position: relative;
    display: inline-block;
    min-width: 260px;
    text-align: center;
}

/*botões do topo numa linha, no centro*/
.inicio-botoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/*botão quadrado só com ícone (GitHub, LinkedIn e conversa); relative para o balãozinho*/
.inicio-icone {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #161B22;
    border: 1px solid #30363D;
    border-radius: 8px;
}

/*ícone de 24px; a cor fica no próprio ícone para o a:hover não trocar*/
.inicio-icone .logo-rede {
    width: 24px;
    height: 24px;
    color: #C9D1D9;
}

/*Baixar currículo: botão azul cheio com a mesma altura dos ícones, texto no meio e ícone de download à direita*/
.inicio-botao-curriculo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    color: #0D1117;
    background-color: #7CC4FF;
    border: 1px solid #7CC4FF;
    border-radius: 8px;
    padding: 0 20px;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

/*ícone de download do Baixar currículo, um pouco maior que as logos*/
.inicio-botao-curriculo-icone {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    -webkit-mask-image: url(../img/icones/download.svg);
    mask-image: url(../img/icones/download.svg);
}

/*foco pelo teclado: borda e ícone azuis, contorno 2px afastado 2px (vale também para o Baixar currículo)*/
.inicio-icone:focus-visible,
.inicio-botao-curriculo:focus-visible {
    border-color: #7CC4FF;
    outline-offset: 2px;
}

/*Baixar currículo no foco: fundo clareia como no hover*/
.inicio-botao-curriculo:focus-visible {
    background-color: #A5D6FF;
}

.inicio-icone:focus-visible .logo-rede {
    color: #7CC4FF;
}

/*balãozinho aparece no foco pelo teclado*/
.inicio-icone:focus-visible .inicio-icone-rotulo {
    opacity: 1;
}

/*golpe do machado (a cada 3s, pelo cicloTopo do script.js): puxa para trás, golpeia aos 55% (330ms), quica e volta*/
@keyframes marca-golpe {
    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-45deg);
    }

    55% {
        transform: rotate(22deg);
    }

    70% {
        transform: rotate(-6deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/*tremida do sobrenome no impacto do golpe*/
@keyframes marca-tremida {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-3px);
    }

    40% {
        transform: translateX(3px);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }
}

/*tarja da palavra cresce até cobrir a caixa inteira*/
@keyframes inicio-tarja-cobrir {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/*tarja encolhe até sumir*/
@keyframes inicio-tarja-descobrir {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/*Início no tablet e no celular: nome menor e menos respiro*/
@media (max-width: 899px) {

    #inicio {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    #inicio h1 {
        font-size: 44px;
    }
}

/*Início no celular*/
@media (max-width: 599px) {

    #inicio {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #inicio h1 {
        font-size: 34px;
    }

    .inicio-cargo {
        font-size: 14px;
    }

    /*a lista parada (sem JavaScript) quebra em duas linhas; a palavra que rola continua com 36px pelo line-height*/
    .inicio-tecnologias {
        height: auto;
    }
}

/*botões do Início ficam embaixo dos ícones no celular e no tablet*/
@media (max-width: 1023px) {

    /*sempre em duas linhas: os 3 ícones em cima e o Baixar currículo embaixo.
    O ::after é uma peça invisível de largura toda entre os dois (order 1): ele quebra a linha depois dos ícones.
    Ele forma uma linha de altura 0, então o row-gap vira 0 e o espaço de 12px fica na margem do botão*/
    .inicio-botoes {
        row-gap: 0;
    }

    .inicio-botoes::after {
        content: "";
        flex-basis: 100%;
        order: 1;
    }

    .inicio-botao-curriculo {
        order: 2;
        margin-top: 12px;
    }
}

/*Início na tela cheia: o mesmo espaço das outras seções (o #inicio de cima vence o main > section)*/
@media (min-width: 1024px) and (min-height: 640px) {

    #inicio {
        padding-top: 62px;
        padding-bottom: 80px;
    }
}

/*Início com movimento*/
@media (prefers-reduced-motion: no-preference) {

    /*Baixar currículo: borda, fundo e a subida do hover mudam suave*/
    .inicio-botao-curriculo {
        transition: border-color 0.2s ease-out, background-color 0.2s ease-out, transform 0.2s ease-out;
    }

    /*botões de ícone sobem 2px no hover e no foco; o ícone e o balãozinho mudam suave*/
    .inicio-icone {
        transition: border-color 0.2s ease-out, transform 0.2s ease-out;
    }

    .inicio-icone .logo-rede {
        transition: color 0.2s ease-out;
    }

    .inicio-icone-rotulo {
        transition: opacity 0.2s ease-out;
    }

    .inicio-icone:focus-visible,
    .inicio-botao-curriculo:focus-visible {
        transform: translateY(-2px);
    }

    /*machado gira pelo cabo (canto de baixo à esquerda)*/
    .inicio-sobrenome .logo-machado {
        transform-origin: left bottom;
    }

    /*golpe do machado e tremida do sobrenome: classes colocadas e tiradas pelo cicloTopo do script.js*/
    .inicio-sobrenome .logo-machado.golpeando {
        animation: marca-golpe 600ms ease-in-out;
    }

    .inicio-sobrenome.tremendo {
        animation: marca-tremida 300ms;
    }

    /*cor do sobrenome muda suave no hover*/
    .inicio-sobrenome {
        transition: color 0.2s ease-out;
    }

    /*tarja azul sobre a palavra, começa encolhida na esquerda*/
    .inicio-palavra-caixa::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: #7CC4FF;
        transform: scaleX(0);
        transform-origin: left center;
    }

    /*cobrindo: cresce da esquerda para a direita (classe colocada pelo script.js)*/
    .inicio-palavra-caixa.cobrindo::after {
        animation: inicio-tarja-cobrir 300ms ease-in forwards;
    }

    /*descobrindo: encolhe em direção à direita, revelando a palavra nova*/
    .inicio-palavra-caixa.descobrindo::after {
        transform-origin: right center;
        animation: inicio-tarja-descobrir 300ms ease-out forwards;
    }
}

/*Início com mouse*/
@media (hover: hover) {

    /*botões de ícone do topo: borda e ícone azuis, balãozinho aparece*/
    .inicio-icone:hover {
        border-color: #7CC4FF;
    }

    .inicio-icone:hover .logo-rede {
        color: #7CC4FF;
    }

    .inicio-icone:hover .inicio-icone-rotulo {
        opacity: 1;
    }

    /*Baixar currículo: fundo clareia (a cor do texto repete a do botão para o a:hover não trocar)*/
    .inicio-botao-curriculo:hover {
        color: #0D1117;
        background-color: #A5D6FF;
    }

    /*mouse no sobrenome: fica branco (o ícone acompanha pelo currentColor)*/
    .inicio-sobrenome:hover {
        color: #E6EDF3;
    }
}

/*Início com mouse e movimento: botões de ícone e o Baixar currículo sobem 2px*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    .inicio-icone:hover,
    .inicio-botao-curriculo:hover {
        transform: translateY(-2px);
    }
}

/*botões do Início afundam no clique: 1px para baixo e 3% menores, em 80ms (ao soltar, voltam com a transição normal).
Fica depois do bloco do mouse: com a mesma especificidade, o :active vence o translateY do hover*/
@media (prefers-reduced-motion: no-preference) {

    .inicio-botao-curriculo:active,
    .inicio-icone:active {
        transform: translateY(1px) scale(0.97);
        transition: transform 80ms ease-out;
    }
}

/* ===== SOBRE MIM ===== */

/*abaixo de 900px tudo numa coluna: título, cartão e parágrafos. De 900px para cima, ver o fim deste bloco*/

/*cartão horizontal: foto à esquerda e Local e Formação à direita, centralizados na vertical entre si.
Largura do conteúdo, até 420px (a folga fica igual dos dois lados), alinhado à esquerda como o texto, 32px até os parágrafos.
Mesma moldura das caixas de Tecnologias (mais grossa embaixo e à direita), sem fundo*/
.sobre-cartao {
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    max-width: 420px;
    margin-bottom: 32px;
    border: 1px solid #30363D;
    border-right: 3px solid #1A3350;
    border-bottom: 3px solid #1A3350;
    border-radius: 12px;
    padding: 20px;
}

/*foto redonda de 80px; flex-shrink 0 não deixa ela encolher quando o texto aperta*/
.sobre-foto {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #30363D;
    border-radius: 50%;
}

/*Local e Formação um embaixo do outro, alinhados à esquerda, 12px entre eles*/
.sobre-cartao dl {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/*rótulos (LOCAL, FORMAÇÃO) e valores*/
#sobre dt {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8B96A5;
    margin-bottom: 4px;
}

#sobre dd {
    font-size: 15px;
    color: #E6EDF3;
}

/*parágrafos sobre mim, com largura confortável de leitura*/
#sobre > div p {
    max-width: 65ch;
    margin-bottom: 20px;
}

#sobre > div p:last-child {
    margin-bottom: 0;
}

/*Sobre mim no tablet e no celular: 32px do título até o cartão*/
@media (max-width: 899px) {

    #sobre h2 + p {
        margin-bottom: 32px;
    }
}

/*Sobre mim no celular: parágrafos justificados, com hifenização*/
@media (max-width: 599px) {

    #sobre > div p {
        text-align: justify;
        hyphens: auto;
    }
}

/*de 900px para cima: sobre mim em duas colunas, como a Experiência*/
@media (min-width: 900px) {

    /*título em cima e, embaixo, cartão (280px) à esquerda e parágrafos à direita, 48px entre eles.
    O align-content centraliza o bloco na vertical quando a seção ocupa a tela cheia*/
    #sobre {
        display: grid;
        grid-template-columns: 280px 1fr;
        column-gap: 48px;
        align-content: center;
    }

    /*rótulo e título na largura toda*/
    #sobre h2,
    #sobre h2 + p {
        grid-column: 1 / 3;
    }

    /*cartão vertical: foto em cima, Local e Formação embaixo, tudo no centro.
    Estica até a altura dos parágrafos (stretch da grade) e o conteúdo fica no meio dele*/
    .sobre-cartao {
        flex-direction: column;
        justify-content: center;
        gap: 24px;
        width: auto;
        max-width: none;
        margin-bottom: 0;
        text-align: center;
    }

    .sobre-foto {
        width: 112px;
        height: 112px;
    }

    /*textos do cartão vertical maiores e 22px entre Local e Formação
    (no celular continuam menores: com 17px "Engenharia da Computação" quebra em 393px e 375px)*/
    .sobre-cartao dl {
        gap: 22px;
    }

    #sobre dt {
        font-size: 12px;
    }

    #sobre dd {
        font-size: 17px;
    }
}

/*Sobre mim na tela cheia: parágrafos com até 80ch (com o cartão ao lado, a coluna deles já é mais estreita que isso)*/
@media (min-width: 1024px) and (min-height: 640px) {

    #sobre > div p {
        max-width: 80ch;
    }
}

/*Sobre mim com mouse: moldura de baixo e da direita do cartão fica azul*/
@media (hover: hover) {

    .sobre-cartao {
        transition: border-color 0.2s ease-out;
    }

    .sobre-cartao:hover {
        border-right-color: #7CC4FF;
        border-bottom-color: #7CC4FF;
    }
}

/*Sobre mim com mouse e movimento: cartão sobe 1px*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    .sobre-cartao {
        transition: border-color 0.2s ease-out, transform 0.2s ease-out;
    }

    /*relative só no hover, para a faixa invisível de baixo (fora do hover a caixa fica como antes)*/
    .sobre-cartao:hover {
        position: relative;
        transform: translateY(-1px);
    }

    /*faixa invisível de 1px embaixo do cartão, logo depois da borda de 3px: cobre o espaço que ele sobe,
    para o hover não ligar e desligar sem parar com o mouse na beirada de baixo*/
    .sobre-cartao:hover::after {
        content: "";
        position: absolute;
        top: calc(100% + 3px);
        left: 0;
        right: 0;
        height: 1px;
    }
}

/* ===== PROJETOS ===== */

/*a linha dos contadores fica colada no título; o espaço até os cartões vem dela*/
#projetos h2 + p {
    margin-bottom: 0;
}

/*"03 projetos · 02 em andamento" (escrito pelo JavaScript; sem ele fica vazia e só sobra o espaço)*/
.projetos-contadores {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 13px;
    color: #8B96A5;
    margin-top: 8px;
    margin-bottom: 40px;
}

.projetos-numero {
    color: #E6EDF3;
}

/*grade de 3 colunas: três projetos por linha; com mais projetos, eles quebram para uma nova linha.
minmax(0, 1fr): as três colunas ficam sempre com a mesma largura, mesmo com um texto comprido*/
.projetos-lista {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/*cartão de projeto: sem caixa nem fundo. Os cartões da mesma linha têm a mesma altura e o espaço que sobra fica embaixo*/
.projeto {
    display: flex;
    flex-direction: column;
}

/*caixa da imagem: os botões Ver detalhes, Ver site e Ver código ficam por cima dela*/
.projeto-midia {
    position: relative;
}

/*link da imagem para a página do projeto (só nos projetos com página)*/
.projeto-imagem-link {
    display: block;
}

/*imagem (ou o bloco no lugar dela) sempre em 16 por 10, cortando o que sobrar*/
.projeto-imagem,
.projeto-sem-imagem {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 1px solid #30363D;
    border-radius: 12px;
}

/*moldura da imagem: sombra embaixo e um pouco mais escura*/
.projeto-imagem {
    box-shadow: 0 8px 24px #00000059;
    filter: brightness(0.92);
}

/*projeto sem imagem: fundo escuro com o nome no centro*/
.projeto-sem-imagem {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: jetbrains, ui-monospace, monospace;
    color: #8B96A5;
    background-color: #0F141C;
}

.projeto-titulo {
    font-size: 20px;
    font-weight: 600;
    color: #E6EDF3;
    margin-top: 16px;
}

/*título com link (só quando o projeto tem página): ocupa a linha toda, para o clique valer na largura do cartão*/
.projeto-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/*origem do projeto (ex: Projeto pessoal · 2026)*/
.projeto-origem {
    font-size: 14px;
    color: #8B96A5;
    margin-top: 4px;
}

.projeto-descricao {
    font-size: 14px;
    color: #C9D1D9;
    margin-top: 8px;
}

/*pílulas das tecnologias, com contorno azul, 14px abaixo da descrição (também usadas nas páginas de projeto)*/
.projeto-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.projeto-tag {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 12px;
    color: #7CC4FF;
    border: 1px solid #7CC4FF;
    border-radius: 999px;
    padding: 4px 12px;
}

/*botões Ver detalhes, Ver site e Ver código por cima da imagem, com fundo escuro (#0D1117 com 0.72 de opacidade).
Escondidos até o mouse ou o foco chegar na imagem; z-index 1 deixa eles acima do link da imagem.
pointer-events none no bloco: o clique na parte escura passa para o link da imagem; só os botões recebem clique*/
.projeto-acoes {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background-color: #0D1117B8;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
}

/*botão redondo com ícone*/
.projeto-acao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #161B22;
    border: 1px solid #30363D;
    border-radius: 999px;
}

/*ícone de 24px; a cor fica no próprio ícone para o a:hover não trocar*/
.projeto-acao .logo-rede {
    width: 24px;
    height: 24px;
    color: #E6EDF3;
}

/*foco pelo teclado: borda e ícone azuis*/
.projeto-acao:focus-visible {
    border-color: #7CC4FF;
}

.projeto-acao:focus-visible .logo-rede {
    color: #7CC4FF;
}

/*Projetos no tablet e no celular: 32px entre a linha dos contadores e a lista*/
@media (max-width: 899px) {

    .projetos-contadores {
        margin-bottom: 32px;
    }
}

/*Projetos no celular e no tablet: uma coluna no centro*/
@media (max-width: 1023px) {

    /*rótulo, título e contadores dos projetos no centro*/
    #projetos h2,
    #projetos h2 + p,
    .projetos-contadores {
        text-align: center;
    }

    /*projetos um embaixo do outro: uma coluna de até 560px no centro, 64px entre um projeto e o seguinte*/
    .projetos-lista {
        grid-template-columns: minmax(0, 560px);
        justify-content: center;
        gap: 64px;
    }

    /*texto de cada cartão no centro (a imagem continua na largura toda do cartão)*/
    .projeto-titulo,
    .projeto-origem,
    .projeto-descricao {
        text-align: center;
    }

    /*pílulas no centro*/
    .projeto-tags {
        justify-content: center;
    }
}

/*Projetos no computador: 48px entre a linha dos contadores e a grade*/
@media (min-width: 1024px) {

    .projetos-contadores {
        margin-bottom: 48px;
    }
}

/*computador largo: de 1280px para cima os projetos usam uma coluna de até 1200px*/
@media (min-width: 1280px) {

    /*só a seção Projetos fica mais larga (as outras continuam com até 1040px):
    o que passar de 1200px vira padding, metade de cada lado*/
    #projetos {
        padding-left: max(32px, calc((100% - 1200px) / 2));
        padding-right: max(32px, calc((100% - 1200px) / 2));
    }

    /*40px entre os cartões, nas duas direções*/
    .projetos-lista {
        gap: 40px;
    }
}

/*Projetos com movimento*/
@media (prefers-reduced-motion: no-preference) {

    /*botões dos projetos aparecem e somem suave*/
    .projeto-acoes,
    .projeto-acao-rotulo {
        transition: opacity 0.2s ease-out;
    }

    /*botões afundam no clique: 1px para baixo e 3% menores, em 80ms, e voltam suave ao soltar*/
    .projeto-acao {
        transition: transform 80ms ease-out;
    }

    .projeto-acao:active {
        transform: translateY(1px) scale(0.97);
        transition: transform 80ms ease-out;
    }
}

/*Projetos com mouse*/
@media (hover: hover) {

    /*mouse na imagem ou foco num dos botões mostra os botões sobre a imagem (e eles passam a receber clique)*/
    .projeto-midia:hover .projeto-acoes,
    .projeto-midia:focus-within .projeto-acoes {
        opacity: 1;
    }

    .projeto-midia:hover .projeto-acao,
    .projeto-midia:focus-within .projeto-acao {
        pointer-events: auto;
    }

    /*botão com o mouse em cima: borda e ícone azuis*/
    .projeto-acao:hover {
        border-color: #7CC4FF;
    }

    .projeto-acao:hover .logo-rede {
        color: #7CC4FF;
    }

    /*balãozinho "Ver detalhes" / "Ver site" / "Ver código" no hover ou no foco do botão*/
    .projeto-acao:hover .projeto-acao-rotulo,
    .projeto-acao:focus-visible .projeto-acao-rotulo {
        opacity: 1;
    }

    /*mouse no título com página: o nome fica azul (sem página o título não tem link)*/
    .projeto-link {
        transition: color 0.2s ease-out;
    }

    .projeto-link:hover {
        color: #7CC4FF;
    }

    /*mouse na imagem: a borda dela fica azul*/
    .projeto-imagem,
    .projeto-sem-imagem {
        transition: border-color 0.2s ease-out;
    }

    .projeto-midia:hover .projeto-imagem,
    .projeto-midia:hover .projeto-sem-imagem {
        border-color: #7CC4FF;
    }
}

/*Projetos com mouse e movimento: só a imagem sobe 4px (com os botões por cima)*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    .projeto-midia {
        transition: transform 0.2s ease-out;
    }

    .projeto-midia:hover {
        transform: translateY(-4px);
    }

    /*faixa invisível de 4px embaixo da imagem: cobre o espaço que ela sobe, para o hover não ligar e desligar
    sem parar com o mouse na beirada de baixo*/
    .projeto-midia:hover::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 4px;
    }
}

/*Projetos sem mouse (toque): nada fica escondido esperando hover*/
@media (hover: none) {

    /*botões dos projetos sempre visíveis, no canto de baixo à direita da imagem, sem escurecer a imagem*/
    .projeto-acoes {
        justify-content: flex-end;
        align-items: flex-end;
        gap: 8px;
        padding: 12px;
        background-color: transparent;
        opacity: 1;
    }

    /*botões menores e clicáveis; sem balãozinho (o aria-label já diz o que cada um faz)*/
    .projeto-acao {
        width: 40px;
        height: 40px;
        pointer-events: auto;
    }

    .projeto-acao-rotulo {
        display: none;
    }
}

/* ===== TECNOLOGIAS ===== */

/*rótulo, título e caixas na mesma coluna de até 720px, no centro: o título começa na borda das caixas.
Só margem dos lados, para manter a de baixo de cada texto.
width 100%: na tela cheia a seção é flex, e o margin auto sozinho encolheria cada bloco*/
#tecnologias > h2,
#tecnologias > h2 + p,
.tecnologias-grupos {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/*três caixas uma embaixo da outra (Frontend, Backend e Ferramentas)*/
.tecnologias-grupos {
    display: grid;
    gap: 16px;
}

/*caixa de cada grupo, com moldura mais grossa embaixo e à direita.
Vira uma faixa: rótulo à esquerda (140px) e logos à direita, centralizados na vertical*/
.tecnologias-grupo {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    background-color: #161B22;
    border: 1px solid #30363D;
    border-right: 3px solid #1A3350;
    border-bottom: 3px solid #1A3350;
    border-radius: 12px;
    padding: 24px;
}

/*nome do grupo (FRONTEND, BACKEND...)*/
.tecnologias-rotulo {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7CC4FF;
}

/*logos lado a lado, quebrando linha quando não cabem*/
.tecnologias-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/*relative para o balãozinho do nome se posicionar em cima do logo*/
.tecnologias-item {
    position: relative;
}

.tecnologias-icone {
    width: 48px;
    height: 48px;
}

/*logos das tecnologias sobem 16px enquanto aparecem*/
@keyframes tecnologias-aparecer {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*Tecnologias no celular e no tablet: rótulo em cima e logos embaixo*/
@media (max-width: 899px) {

    .tecnologias-grupo {
        display: block;
    }

    .tecnologias-rotulo {
        margin-bottom: 16px;
    }
}

/*Tecnologias com movimento*/
@media (prefers-reduced-motion: no-preference) {

    /*o bloco dos logos só aparece, sem subir, porque os logos dentro já sobem (senão o movimento soma)*/
    .js #tecnologias:not(.visivel) > .tecnologias-grupos {
        transform: none;
    }

    .js #tecnologias.visivel > .tecnologias-grupos {
        animation-name: revelar-aparecer;
    }

    /*logos começam escondidos e mais baixos*/
    .tecnologias-item {
        opacity: 0;
        transform: translateY(16px);
    }

    /*quando a seção aparece, cada logo sobe no seu tempo (o animation-delay vem do style de cada li)*/
    #tecnologias.visivel .tecnologias-item {
        animation-name: tecnologias-aparecer;
        animation-duration: 400ms;
        animation-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
}

/*Tecnologias com mouse: moldura da caixa fica azul e o nome aparece acima do logo*/
@media (hover: hover) {

    .tecnologias-grupo {
        transition: border-color 0.2s ease-out;
    }

    .tecnologias-grupo:hover {
        border-right-color: #7CC4FF;
        border-bottom-color: #7CC4FF;
    }

    .tecnologias-item:hover .tecnologias-nome {
        opacity: 1;
    }
}

/*Tecnologias com mouse e movimento: caixa sobe 1px e logo sobe 4px*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    .tecnologias-grupo {
        transition: border-color 0.2s ease-out, transform 0.2s ease-out;
    }

    /*relative só no hover, para a faixa invisível de baixo (fora do hover a caixa fica como antes)*/
    .tecnologias-grupo:hover {
        position: relative;
        transform: translateY(-1px);
    }

    /*faixa invisível de 1px embaixo da caixa, logo depois da borda de 3px: evita o tremor na beirada de baixo*/
    .tecnologias-grupo:hover::after {
        content: "";
        position: absolute;
        top: calc(100% + 3px);
        left: 0;
        right: 0;
        height: 1px;
    }

    .tecnologias-icone {
        transition: transform 0.2s ease-out;
    }

    .tecnologias-item:hover .tecnologias-icone {
        transform: translateY(-4px);
    }
}

/* ===== EXPERIÊNCIA ===== */

/*linha embaixo de "Trajetória profissional."*/
#experiencia h2 + p {
    border-bottom: 1px solid #30363D;
    padding-bottom: 24px;
}

/*estágio dividido em duas colunas (logos à esquerda e texto à direita)*/
#experiencia article {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 48px;
    align-items: stretch;
}

/*logos da Agência Fruta e da Beauty Fair */
.experiencia-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

/*relative para o balãozinho do LinkedIn se posicionar em cima da logo; z-index 5 deixa ele acima do que estiver perto*/
.experiencia-logos a {
    position: relative;
}

.experiencia-logo-rotulo {
    z-index: 5;
}

/*balãozinho aparece no foco pelo teclado*/
.experiencia-logos a:focus-visible .experiencia-logo-rotulo {
    opacity: 1;
}

#experiencia img {
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 72px;
    object-fit: contain;
}

/*textos do estágio: rótulo com a data, nome da empresa e parágrafos*/
#experiencia h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
}

.experiencia-texto p {
    max-width: 65ch;
    margin-bottom: 16px;
}

.experiencia-texto p:last-of-type {
    margin-bottom: 0;
}

.experiencia-texto .experiencia-periodo {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B96A5;
    max-width: none;
    margin-bottom: 6px;
}

/*Experiência no tablet e no celular: vira uma coluna, com os logos em cima*/
@media (max-width: 899px) {

    #experiencia article {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    /*logos da bf e fruta, alinhados à esquerda com o texto*/
    .experiencia-logos {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 16px 32px;
    }

    /*balãozinho começa na borda esquerda da logo, para o da Agência Fruta não sair da tela*/
    .experiencia-logo-rotulo {
        left: 0;
        transform: none;
    }
}

/*Experiência no celular*/
@media (max-width: 599px) {

    /*parágrafos justificados, com hifenização*/
    .experiencia-texto p {
        text-align: justify;
        hyphens: auto;
    }

    /*logos no centro*/
    .experiencia-logos {
        justify-content: center;
    }
}

/*Experiência com mouse: balãozinho do LinkedIn aparece no hover da logo*/
@media (hover: hover) {

    .experiencia-logos a:hover .experiencia-logo-rotulo {
        opacity: 1;
    }
}

/*Experiência com movimento: balãozinho aparece e some suave*/
@media (prefers-reduced-motion: no-preference) {

    .experiencia-logo-rotulo {
        transition: opacity 0.2s ease-out;
    }
}

/*Experiência com mouse e movimento: logos sobem 2px*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    .experiencia-logos a {
        transition: transform 0.2s ease-out;
    }

    .experiencia-logos a:hover {
        transform: translateY(-2px);
    }
}

/* ===== FORMAÇÃO ===== */

/*graduação: logo do CESUPA ao lado do curso e da instituição*/
#formacao article {
    display: flex;
    align-items: center;
    gap: 24px;
    border-top: 1px solid #30363D;
    border-bottom: 1px solid #30363D;
    padding: 24px 0;
}

#formacao article img {
    width: 140px;
    height: 72px;
    object-fit: contain;
    border-radius: 15%;
}

.formacao-periodo {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B96A5;
}

#formacao article h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 4px 0;
}

.formacao-instituicao {
    font-size: 15px;
    color: #8B96A5;
}

/*cursos em duas colunas (rótulo "CURSOS" à esquerda e lista à direita)*/
.formacao-cursos {
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 24px;
    padding-top: 24px;
}

.formacao-cursos-rotulo {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B96A5;
    padding-top: 14px;
}

/*cada curso: plataforma em cima, nome embaixo e certificado à direita, centralizado*/
#formacao li {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 32px;
    row-gap: 4px;
    border-bottom: 1px solid #30363D;
    padding: 16px 0;
}

#formacao li h3 {
    grid-row: 2;
    font-size: 16px;
    font-weight: 600;
}

#formacao li p {
    grid-row: 1;
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8B96A5;
}

#formacao li a {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 14px;
}

/*Formação no tablet e no celular: o rótulo "CURSOS" sobe para cima da lista*/
@media (max-width: 899px) {

    .formacao-cursos {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
}

/*Formação no celular: cada curso vira uma coluna*/
@media (max-width: 599px) {

    #formacao li {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /*certificado desce para baixo do nome do curso, com 44px de altura para o toque*/
    #formacao li a {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        padding: 11px 0;
        margin: -11px 0;
    }
}

/* ===== CONTATO ===== */

/*cartão de contato em duas colunas (texto à esquerda e lista à direita).
Mesma moldura do cartão do Sobre mim (mais grossa embaixo e à direita), sem fundo*/
.contato-cartao {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    column-gap: 48px;
    border: 1px solid #30363D;
    border-right: 3px solid #1A3350;
    border-bottom: 3px solid #1A3350;
    border-radius: 12px;
    padding: 48px;
}

/*bolinhas de janela*/
.contato-texto::before {
    content: "● ● ●";
    display: block;
    font-size: 10px;
    letter-spacing: 4px;
    color: #6E7681;
    margin-bottom: 20px;
}

/*"Vamos conversar." e o texto do convite*/
#contato h2 + p {
    margin-bottom: 16px;
}

.contato-convite {
    max-width: 45ch;
    text-wrap: pretty;
}

/*lista de contatos: rótulo à esquerda e link à direita*/
#contato li {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: baseline;
    gap: 16px;
    border-bottom: 1px solid #30363D;
    padding: 14px 0;
}

/*rótulo de cada linha (E-mail, LinkedIn...): só o span filho direto do li, para não pegar o ícone e o balãozinho do botão de copiar*/
#contato li > span {
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8B96A5;
}

/*aviso de nova aba sem maiúsculas, para o leitor de tela não soletrar*/
#contato .visualmente-oculto {
    text-transform: none;
}

/*links quebram só onde pode (o e-mail quebra depois do @)*/
#contato li a {
    overflow-wrap: break-word;
}

/*e-mail, botão copiar e aviso lado a lado*/
.contato-email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

/*botão copiar e-mail: só o ícone, com alvo de toque de 44px. Sem JavaScript ele não funciona, então só aparece com .js.
A margem de -12px em cima e embaixo devolve o espaço: a linha do e-mail não fica mais alta que as outras*/
.contato-copiar {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -12px 0;
    color: #8B96A5;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s;
}

.js .contato-copiar {
    display: inline-flex;
}

/*ícone de 20px; a cor vem do botão (currentColor)*/
.contato-copiar .logo-rede {
    width: 20px;
    height: 20px;
}

/*foco pelo teclado: ícone azul e contorno 2px afastado 2px*/
.contato-copiar:focus-visible {
    color: #7CC4FF;
    outline-offset: 2px;
}

/*copiou: o ícone vira o check azul por 2 segundos (classe colocada pelo JavaScript)*/
.contato-copiar-ok {
    color: #7CC4FF;
}

.contato-copiar-ok .logo-rede {
    -webkit-mask-image: url(../img/icones/ui-check.svg);
    mask-image: url(../img/icones/ui-check.svg);
}

/*balãozinho "Copiar" (o resto do visual está nas regras gerais): o botão não herda a fonte do site*/
.contato-dica {
    font-family: inter, system-ui, sans-serif;
}

/*balãozinho aparece no foco pelo teclado e quando a cópia falha ("Não copiou", mesmo sem hover)*/
.contato-copiar:focus-visible .contato-dica,
.contato-copiar-falhou .contato-dica {
    opacity: 1;
}

/*check do botão de copiar cresce de 80% até o tamanho normal*/
@keyframes contato-check-pulo {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1);
    }
}

/*Contato no tablet e no celular: o cartão vira uma coluna*/
@media (max-width: 899px) {

    .contato-cartao {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }

    /*links do contato com 44px de altura, sem mudar o espaço entre as linhas*/
    #contato li a {
        padding: 9px 0;
        margin: -9px 0;
    }
}

/*Contato no celular: rótulo em cima do link e cartão com menos respiro*/
@media (max-width: 599px) {

    #contato li {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .contato-cartao {
        padding: 32px 24px;
    }
}

/*Contato na tela cheia: contato e rodapé formam a última tela, então o contato desconta os 63px de altura do rodapé*/
@media (min-width: 1024px) and (min-height: 640px) {

    #contato {
        min-height: calc(100vh - 63px);
        min-height: calc(100svh - 63px);
    }
}

/*Contato com movimento*/
@media (prefers-reduced-motion: no-preference) {

    /*check do e-mail copiado entra com um pulinho*/
    .contato-copiar-ok .logo-rede {
        animation: contato-check-pulo 150ms ease-out;
    }

    /*botão de copiar afunda no clique: 1px para baixo e 3% menor, em 80ms, e volta suave ao soltar*/
    .contato-copiar {
        transition: color 0.2s, transform 80ms ease-out;
    }

    .contato-copiar:active {
        transform: translateY(1px) scale(0.97);
        transition: transform 80ms ease-out;
    }
}

/*Contato com mouse*/
@media (hover: hover) {

    /*botão copiar e-mail: ícone azul e balãozinho "Copiar"*/
    .contato-copiar:hover {
        color: #7CC4FF;
    }

    .contato-copiar:hover .contato-dica {
        opacity: 1;
    }

    /*moldura de baixo e da direita do cartão fica azul*/
    .contato-cartao {
        transition: border-color 0.2s ease-out;
    }

    .contato-cartao:hover {
        border-right-color: #7CC4FF;
        border-bottom-color: #7CC4FF;
    }
}

/*Contato com mouse e movimento: cartão sobe 1px*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    .contato-cartao {
        transition: border-color 0.2s ease-out, transform 0.2s ease-out;
    }

    /*relative só no hover, para a faixa invisível de baixo (fora do hover a caixa fica como antes)*/
    .contato-cartao:hover {
        position: relative;
        transform: translateY(-1px);
    }

    /*faixa invisível de 1px embaixo do cartão, logo depois da borda de 3px: evita o tremor na beirada de baixo*/
    .contato-cartao:hover::after {
        content: "";
        position: absolute;
        top: calc(100% + 3px);
        left: 0;
        right: 0;
        height: 1px;
    }
}

/* ===== RODAPÉ ===== */

/*rodapé numa linha só: nome à esquerda e os logos à direita*/
.rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 14px;
    color: #8B96A5;
    border-top: 1px solid #30363D;
    padding: 20px max(32px, calc((100% - 1040px) / 2));
}

.rodape-nome {
    font-weight: 600;
    color: #E6EDF3;
}

/*logos pequenos na mesma linha, alinhados ao centro na vertical, 16px entre eles*/
.rodape-construido ul {
    display: flex;
    align-items: center;
    gap: 16px;
}

/*relative para o balãozinho do nome se posicionar em cima do logo*/
.rodape-construido-item {
    position: relative;
}

/*block para o item ter só os 20px do logo, sem o espaço da linha de texto embaixo*/
.rodape-construido-item img {
    display: block;
    width: 20px;
    height: 20px;
}

/*rodapé no tablet e no celular: 32px dos lados (no celular, o bloco de baixo troca para 20px)*/
@media (max-width: 899px) {

    .rodape {
        padding: 20px 32px;
    }
}

/*rodapé no celular: empilhado e centralizado, 12px entre as duas partes*/
@media (max-width: 599px) {

    .rodape {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 20px;
    }
}

/*rodapé com mouse: logos cinza e apagados, ganham a cor e o nome aparece acima no hover*/
@media (hover: hover) {

    .rodape-construido-item img {
        filter: grayscale(1);
        opacity: 0.55;
        transition: filter 0.2s ease-out, opacity 0.2s ease-out;
    }

    .rodape-construido-item:hover img {
        filter: grayscale(0);
        opacity: 1;
    }

    .rodape-construido-item:hover .tecnologias-nome {
        opacity: 1;
    }
}

/*rodapé sem mouse (toque): logos cinza, um pouco mais visíveis, e sem balãozinho*/
@media (hover: none) {

    .rodape-construido-item img {
        filter: grayscale(1);
        opacity: 0.8;
    }

    .rodape-construido-item .tecnologias-nome {
        display: none;
    }
}

/*rodapé com movimento: balãozinho aparece e some suave, no mesmo tempo dos botões dos projetos*/
@media (prefers-reduced-motion: no-preference) {

    .rodape-construido-item .tecnologias-nome {
        transition: opacity 0.2s ease-out;
    }
}

/* ===== PÁGINA DE PROJETO ===== */

/*páginas da pasta projetos/: uma coluna de leitura de até 720px no centro, sem menu e sem rolagem por seção.
O que passar de 720px vira padding, metade de cada lado*/
.pagina {
    padding: 64px max(32px, calc((100% - 720px) / 2));
}

/*botão em pílula "Voltar aos projetos", com a seta à esquerda, no começo e no fim da página.
A borda é cinza para não parecer com as pílulas azuis das tecnologias*/
.pagina-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border: 1px solid #30363D;
    border-radius: 999px;
    background-color: #161B2299;
    color: #8B96A5;
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease-out, border-color 0.2s ease-out, background-color 0.2s ease-out;
}

/*foco pelo teclado: texto, seta e borda azuis*/
.pagina-voltar:focus-visible {
    color: #7CC4FF;
    border-color: #7CC4FF;
    background-color: #7CC4FF14;
}

/*o botão do fim fica 80px abaixo do último bloco, mais do que o espaço entre os blocos (73px)*/
.pagina article + .pagina-voltar {
    margin-top: 80px;
}

.pagina h1 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 40px;
}

.pagina-resumo {
    font-size: 18px;
    margin-top: 12px;
}

/*pílulas alinhadas à esquerda com o texto (nos cartões do index elas ficam no centro abaixo de 1024px)*/
.pagina .projeto-tags {
    justify-content: flex-start;
    margin-top: 20px;
}

/*botões Ver site e Ver código (os mesmos dos cartões) lado a lado*/
.pagina-acoes {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/*imagem grande do projeto: a moldura vem do .projeto-imagem dos cartões*/
.pagina-imagem {
    margin-top: 40px;
}

/*cada bloco de texto, separado do anterior por uma linha*/
.pagina-bloco {
    border-top: 1px solid #30363D;
    padding-top: 32px;
    margin-top: 40px;
}

.pagina-bloco-texto p + p {
    margin-top: 16px;
}

/*listas de tecnologias e da equipe: uma linha cada*/
.pagina-bloco-texto li + li {
    margin-top: 8px;
}

/*nome da tecnologia em destaque*/
.pagina-bloco-texto strong {
    font-weight: 600;
    color: #E6EDF3;
}

/*galeria de imagens: uma coluna (duas a partir de 720px, ver o fim deste bloco)*/
.pagina-galeria {
    display: grid;
    gap: 24px;
}

/*imagens inteiras, sem corte, com a mesma borda e sombra das imagens dos cartões*/
.pagina-galeria img {
    width: 100%;
    height: auto;
    border: 1px solid #30363D;
    border-radius: 12px;
    box-shadow: 0 8px 24px #00000059;
}

.pagina-galeria figcaption,
.pagina-nota {
    font-size: 13px;
    color: #8B96A5;
}

.pagina-galeria figcaption {
    margin-top: 8px;
}

/*cartões de imagem da Teko Lixeira: todas as molduras do mesmo tamanho (16 por 10), com borda azul*/
.pagina-galeria-cartoes img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-color: #7CC4FF;
}

/*título curto do cartão, em cima da descrição*/
.pagina-galeria figcaption strong {
    display: block;
    font-family: jetbrains, ui-monospace, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E6EDF3;
    margin-bottom: 4px;
}

/*linha do crédito do layout do Tecboard*/
.pagina-nota {
    margin-top: 20px;
}

/*página de projeto no celular: menos respiro e título menor*/
@media (max-width: 599px) {

    .pagina {
        padding: 32px 20px 48px;
    }

    .pagina h1 {
        font-size: 32px;
    }
}

/*página de projeto no celular e no tablet: botão de voltar com 44px de altura, para o toque*/
@media (max-width: 1023px) {

    .pagina-voltar {
        min-height: 44px;
    }
}

/*galeria em duas colunas a partir de 720px; minmax(0, 1fr) deixa as duas sempre com a mesma largura*/
@media (min-width: 720px) {

    .pagina-galeria {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*de 900px para cima: rótulo do bloco à esquerda e texto à direita, na mesma linha de base.
Os blocos de imagens continuam com o rótulo em cima, para as imagens usarem a largura toda*/
@media (min-width: 900px) {

    .pagina-bloco {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        column-gap: 32px;
        align-items: baseline;
    }

    .pagina-bloco-galeria {
        display: block;
    }
}

/*página de projeto com movimento: a seta do botão de voltar anda 3px para a esquerda no foco do teclado*/
@media (prefers-reduced-motion: no-preference) {

    .pagina-voltar svg {
        transition: transform 0.2s ease-out;
    }

    .pagina-voltar:focus-visible svg {
        transform: translateX(-3px);
    }
}

/*página de projeto com mouse: botão de voltar fica azul*/
@media (hover: hover) {

    .pagina-voltar:hover {
        color: #7CC4FF;
        border-color: #7CC4FF;
        background-color: #7CC4FF14;
    }
}

/*página de projeto com mouse e movimento: a seta anda 3px para a esquerda*/
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    .pagina-voltar:hover svg {
        transform: translateX(-3px);
    }
}