/* ==========================================================================
   Portfólio Ryan Zinedine
   Dark editorial: pouca cor, muito contraste tipográfico e espaço.
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* superfícies */
    --fundo: #000000;
    --fundo-alt: #0b0b0b;
    --cartao: #121215;
    --linha: #212126;
    --linha-forte: #34343c;

    /* texto */
    --texto: #f4f4f5;
    --texto-suave: #a5a5ae;
    --texto-fraco: #8a8a93;

    /* acento */
    --acento: #22d3ee;
    --acento-fraco: rgba(34, 211, 238, 0.14);

    --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --acento-2: #a78bfa;
    --vidro: rgba(255, 255, 255, 0.035);
    --vidro-borda: rgba(255, 255, 255, 0.08);

    /* conteúdo ocupa quase toda a tela, com margem que cresce junto, até 1880px */
    --largura: 1880px;
    --margem: clamp(1.25rem, 5vw, 6rem);
    --raio-lg: 24px;
    --raio: 16px;
    --raio-sm: 10px;
    --transicao: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    /* a letra cresce um pouco em telas grandes: 16px no notebook, até 20px em monitores largos */
    font-size: clamp(16px, 0.3vw + 12px, 20px);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* clip (e nao hidden) corta o excesso lateral sem quebrar o header sticky */
    overflow-x: clip;
}

/* âncora não pode parar embaixo do header fixo */
section[id],
main[id] {
    scroll-margin-top: 6rem;
}

body {
    font-family: var(--corpo);
    font-size: 1rem;
    line-height: 1.7;
    background: var(--fundo);
    color: var(--texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* malha de cor no fundo: fica fixa, atras de tudo, e nunca entra no layout */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
        radial-gradient(38% 30% at 12% 0%, rgba(34, 211, 238, 0.16), transparent 70%),
        radial-gradient(32% 26% at 92% 14%, rgba(167, 139, 250, 0.12), transparent 70%),
        radial-gradient(46% 34% at 50% 100%, rgba(34, 211, 238, 0.07), transparent 72%);
    pointer-events: none;
}

/* grao: tira o aspecto liso demais dos gradientes */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

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

a {
    color: inherit;
    text-decoration: none;
}

code {
    font-family: var(--mono);
    font-size: 0.87em;
    color: var(--texto);
    background: var(--fundo-alt);
    border: 1px solid var(--linha);
    border-radius: 5px;
    padding: 0.05em 0.35em;
}

strong {
    color: var(--texto);
    font-weight: 600;
}

::selection {
    background: var(--acento);
    color: #06070a;
}

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
    border-radius: 3px;
}

/* o sprite de ícones não deve ocupar espaço na página */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 17px;
    height: 17px;
    flex: none;
}

.icon-sm {
    width: 13px;
    height: 13px;
    flex: none;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--acento);
    color: #06070a;
    font-weight: 600;
    padding: 0.7rem 1.1rem;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    left: 0;
}

/* ------------------------------------------------------------- header --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.85rem var(--margem) 0;
}

/* a barra flutua como uma pilula de vidro em vez de colar no topo da tela */
.header-pill {
    position: relative;
    /* acima do painel do menu (z-index 90), senao o botao de fechar some */
    z-index: 95;
    max-width: var(--largura);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 1.1rem;
    background: rgba(14, 14, 17, 0.72);
    border: 1px solid var(--vidro-borda);
    border-radius: 100px;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: box-shadow var(--transicao), border-color var(--transicao), background var(--transicao);
}

/* a classe entra pelo script quando a pagina sai do topo */
.rolou .header-pill {
    background: rgba(12, 12, 15, 0.86);
    border-color: rgba(255, 255, 255, 0.11);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.75);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--texto);
}

.brand-mark {
    width: 30px;
    height: 26px;
    transition: transform var(--transicao);
}

.brand:hover .brand-mark {
    transform: translateY(-1px);
}

.brand-name {
    font-family: var(--display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.nav-menu ul {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    list-style: none;
}

.nav-menu a {
    position: relative;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--texto-suave);
    transition: color var(--transicao);
}

.nav-menu a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 1px;
    background: var(--acento);
    transition: width var(--transicao);
}

.nav-menu a:hover {
    color: var(--texto);
}

.nav-menu a:not(.nav-cta):hover::after {
    width: 100%;
}

.nav-cta {
    color: var(--texto);
    border: 1px solid var(--linha-forte);
    border-radius: 100px;
    padding: 0.4rem 1rem;
    transition: border-color var(--transicao), background var(--transicao);
}

.nav-cta:hover {
    border-color: var(--acento);
    background: var(--acento-fraco);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    padding-right: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 22px;
    height: 2px;
    margin-left: auto;
    border-radius: 2px;
    background: var(--texto);
    transition: transform var(--transicao), width var(--transicao);
}

.bar:nth-child(2) {
    width: 14px;
}

.menu-toggle.open .bar:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.menu-toggle.open .bar:nth-child(2) {
    width: 22px;
    transform: translateY(-4px) rotate(-45deg);
}

/* --------------------------------------------------------------- main --- */
main {
    flex: 1;
    width: 100%;
    max-width: calc(var(--largura) + 2 * var(--margem));
    margin: 0 auto;
    padding: 0 var(--margem) 2rem;
}

section {
    padding: 5.5rem 0;
    border-top: 1px solid var(--linha);
}

.section-head {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-bottom: 3rem;
}

.section-num {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--acento);
    letter-spacing: 0.08em;
}

.section-head h2 {
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--texto-suave);
}

/* comentário de código, como no banner do LinkedIn */
.section-head h2::before {
    content: '// ';
    color: var(--acento-2);
}

p {
    color: var(--texto-suave);
    max-width: 66ch;
}

p + p {
    margin-top: 1.1rem;
}

/* --------------------------------------------------------------- hero --- */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(15rem, 26vw, 20rem);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding: clamp(3rem, 9vh, 5.5rem) 0 5rem;
    border-top: none;
}

/* retrato: moldura de vidro com um halo por tras, no lugar do circulo
   pequeno de sempre. */
.hero-foto {
    position: relative;
    justify-self: end;
    width: 100%;
    max-width: 20rem;
}

.hero-foto::before {
    content: '';
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(34, 211, 238, 0.22), transparent 72%);
    z-index: -1;
}

.hero-foto img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 28px;
    border: 1px solid var(--vidro-borda);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9);
}

/* o brilho do hero agora vem da malha do body::before */

.eyebrow {
    font-family: var(--mono);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--texto-suave);
    background: var(--vidro);
    border: 1px solid var(--vidro-borda);
    border-radius: 100px;
    padding: 0.4rem 0.95rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
    animation: pulsar 2.4s ease-out infinite;
}

@keyframes pulsar {
    70% {
        box-shadow: 0 0 0 7px rgba(74, 222, 128, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

.hero h1 {
    font-family: var(--display);
    font-size: clamp(2.6rem, 6.6vw, 4.2rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    margin-bottom: 0.5rem;
    /* o degrade para de clarear bem antes do fundo: o tom mais escuro
       ainda passa no contraste AA. */
    background: linear-gradient(168deg, #ffffff 12%, #c9c9d4 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* sobrenome em ciano, igual ao banner */
.hero h1 .destaque {
    color: var(--acento);
    -webkit-text-fill-color: var(--acento);
}

.hero-cargo {
    font-family: var(--display);
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 1.5rem;
    background: linear-gradient(100deg, var(--acento) 10%, var(--acento-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lead {
    font-size: clamp(1rem, 1.5vw, 1.08rem);
    max-width: 52ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.4rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--texto);
    background: var(--vidro);
    border: 1px solid var(--vidro-borda);
    border-radius: 100px;
    padding: 0.68rem 1.3rem;
    transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
}

.btn:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--texto);
    color: #08080a;
    border-color: var(--texto);
    font-weight: 600;
}

.btn-primary:hover {
    background: #fff;
    border-color: #fff;
}

.hero-stack {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin-top: 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--linha);
}

/* -------------------------------------------------------------- sobre --- */
.bento {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-items: start;
    gap: 1.25rem;
}

.bento-card {
    position: relative;
    background: linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--vidro-borda);
    border-radius: var(--raio-lg);
    padding: clamp(1.5rem, 3.4vw, 2.25rem);
}

/* o cartao de texto ocupa as duas linhas da coluna, mas cada cartao
   guarda a propria altura: e o desencontro que faz o bento funcionar. */
.bento-texto {
    grid-row: 1 / span 2;
}

.bento-ferramentas .tags {
    margin-top: 1.1rem;
}

.lead {
    font-family: var(--display);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--texto);
    margin-bottom: 1.6rem;
}

.aside-title {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin-bottom: 1.2rem;
}

.stack dt:first-of-type {
    padding-top: 0;
}

.dt-nota {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--texto-fraco);
    border: 1px solid var(--linha);
    border-radius: 100px;
    padding: 0.05rem 0.45rem;
    margin-left: 0.4rem;
}

.stack dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    padding-top: 1rem;
}

.stack dd {
    font-size: 0.92rem;
    color: var(--texto);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--linha);
}

/* --------------------------------------------------------- experiência -- */
.exp {
    position: relative;
    background: linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--vidro-borda);
    border-radius: var(--raio-lg);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    overflow: hidden;
}

/* o brilho segue o cursor: as coordenadas chegam pelo script em --mx/--my */
.spot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%),
            rgba(34, 211, 238, 0.13), transparent 68%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.spot:hover::before {
    opacity: 1;
}

.exp + .exp {
    margin-top: 1.5rem;
}

.exp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--linha);
}

.exp-head h3 {
    font-family: var(--display);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.exp-org {
    font-size: 0.92rem;
    color: var(--texto-suave);
    margin-top: 0.2rem;
}

.exp-period {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acento);
    background: var(--acento-fraco);
    border-radius: 100px;
    padding: 0.25rem 0.75rem;
}

.exp-lead {
    font-size: 1.02rem;
    color: var(--texto);
    margin-bottom: 1.3rem;
}

.exp-list {
    list-style: none;
    display: grid;
    gap: 0.7rem;
    max-width: 68ch;
}

.exp-list li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--texto-suave);
}

.exp-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 1px;
    background: var(--acento);
}

/* ----------------------------------------------------------- etiquetas -- */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin-top: 1.5rem;
}

/* cada tecnologia leva a propria cor; o que nao tem marca cai no cinza */
.tags li {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--marca, var(--texto-suave));
    background: var(--vidro);
    border: 1px solid var(--vidro-borda);
    border-radius: 100px;
    padding: 0.24rem 0.66rem;
}

.tags li[style] {
    background: color-mix(in srgb, var(--marca) 9%, transparent);
    border-color: color-mix(in srgb, var(--marca) 32%, transparent);
}

/* --------------------------------------------------------------- chips -- */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--texto);
    background: var(--vidro);
    border: 1px solid var(--vidro-borda);
    border-radius: 100px;
    padding: 0.3rem 0.72rem 0.3rem 0.55rem;
    transition: border-color var(--transicao), background var(--transicao);
}

.chip:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
}

/* a cor da marca fica so no icone: o texto continua no branco do site */
.chip-ico {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--marca, var(--texto-suave));
}

/* --------------------------------------------------------------- links -- */
.links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.6rem;
}

.link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--texto);
    border-bottom: 1px solid var(--linha-forte);
    padding-bottom: 3px;
    transition: color var(--transicao), border-color var(--transicao);
}

.link .icon-sm {
    transition: transform var(--transicao);
}

.link:hover {
    color: var(--acento);
    border-color: var(--acento);
}

.link:hover .icon-sm {
    transform: translate(2px, -2px);
}

/* ------------------------------------------------------------ projetos -- */
.projetos {
    display: grid;
    gap: 2rem;
}

.proj {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--vidro-borda);
    border-radius: var(--raio-lg);
    overflow: hidden;
    transition: border-color var(--transicao), transform var(--transicao);
}

.proj:hover {
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}





/* capa dos projetos: a logo sobre a grade de pontos, com o brilho na cor do projeto */
.capa {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    overflow: hidden;
    background:
        radial-gradient(55% 55% at 50% 45%, color-mix(in srgb, var(--cor) 26%, transparent), transparent 72%),
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
        #060606;
}

.capa img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--cor) 40%, transparent));
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.capa-path {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--texto-fraco);
}

.proj-capa {
    border-right: 1px solid var(--vidro-borda);
    min-height: 100%;
}

.proj-capa img {
    width: 136px;
    height: 136px;
}

.mini .capa {
    padding: 2.25rem 1rem 1.6rem;
    border-bottom: 1px solid var(--vidro-borda);
}

.mini .capa img {
    width: 96px;
    height: 96px;
}

/* botão de trailer: mesmo visual dos links do card */
.link-trailer {
    background: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    font-family: inherit;
    cursor: pointer;
    color: var(--acento);
}

.link-trailer .icon-sm {
    width: 0.8em;
    height: 0.8em;
}

.link-dur {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--texto-fraco);
}

/* player do trailer narrado */
.trailer-modal {
    margin: auto;
    width: min(92vw, 1100px);
    max-width: none;
    padding: 0;
    border: 1px solid var(--vidro-borda);
    border-radius: 14px;
    background: #000;
    overflow: visible;
}

.trailer-modal::backdrop {
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
}

.trailer-modal video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.trailer-fechar {
    position: absolute;
    top: -2.9rem;
    right: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--vidro-borda);
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.trailer-fechar:hover {
    border-color: var(--acento);
    color: var(--acento);
}

/* trailer: só aparece quando o script confirma que pode tocar; senão, fica a logo */
.capa-trailer {
    display: none;
    width: min(88%, 36rem);
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--vidro-borda);
    background: #0b0b0b;
    box-shadow: 0 28px 70px -24px color-mix(in srgb, var(--cor) 55%, transparent);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.capa.com-trailer .capa-trailer {
    display: block;
}

.capa.com-trailer img {
    display: none;
}

.proj:hover .capa-trailer,
.mini:hover .capa-trailer {
    transform: translateY(-4px) scale(1.02);
}

.proj:hover .capa img,
.mini:hover .capa img {
    transform: translateY(-4px) scale(1.04);
}

.proj-body {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.proj-body h3 {
    font-family: var(--display);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.proj-kicker {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    margin: 0.3rem 0 1.1rem;
}

/* projetos de estudo */
.subhead {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 4rem;
}

.subhead-note {
    font-size: 0.9rem;
    margin-top: 0.35rem;
    margin-bottom: 1.75rem;
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
}

.mini {
    position: relative;
    background: linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--vidro-borda);
    border-radius: var(--raio);
    overflow: hidden;
    transition: border-color var(--transicao), transform var(--transicao);
}

.mini:hover {
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
}

.mini-body {
    position: relative;
    z-index: 1;
}



.mini-body {
    padding: 1.4rem;
}

.mini-body h4 {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}

.mini-body p {
    font-size: 0.9rem;
}

.mini-body .tags {
    margin-top: 1rem;
}

/* linha do tempo curta dentro do card: mostra que o projeto cresceu */
.evolucao {
    list-style: none;
    margin-top: 1.1rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--linha-forte);
    display: grid;
    gap: 0.45rem;
}

.evolucao li {
    position: relative;
    display: grid;
    grid-template-columns: 4.6rem 1fr;
    column-gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--texto-fraco);
}

.evolucao li::before {
    content: "";
    position: absolute;
    left: calc(-0.9rem - 3px);
    top: 0.5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--linha-forte);
}

/* o ponto aceso é a versão atual */
.evolucao li:nth-last-child(2)::before {
    background: var(--acento);
}

.evolucao span {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--texto);
}

.evolucao-proximo {
    font-style: italic;
}

.evolucao-proximo::before {
    background: transparent !important;
    border: 1px dashed var(--texto-fraco);
}

.mini-body .links {
    margin-top: 1.2rem;
    gap: 1.2rem;
}

/* ------------------------------------------------------------- trajeto -- */
.timeline {
    position: relative;
    list-style: none;
    padding-left: 1.9rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 1px;
    background: linear-gradient(180deg, var(--linha-forte), var(--linha), transparent);
}

.timeline-item {
    position: relative;
    padding-bottom: 2.6rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.9rem;
    top: 0.6rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fundo);
    border: 1px solid var(--texto-fraco);
    transition: background var(--transicao), border-color var(--transicao);
}

.timeline-item:first-child::before {
    background: var(--acento);
    border-color: var(--acento);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16);
}

.timeline-item:hover::before {
    background: var(--acento);
    border-color: var(--acento);
}

.timeline-date {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-fraco);
}

.timeline-item h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0.3rem 0 0.5rem;
}

.timeline-tag {
    font-family: var(--corpo);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--acento);
    background: var(--acento-fraco);
    border-radius: 100px;
    padding: 0.16rem 0.6rem;
}

.timeline-item p:not(.timeline-date) {
    font-size: 0.95rem;
}

/* ------------------------------------------------------------- contato -- */
.contato-card {
    position: relative;
    background: linear-gradient(158deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--vidro-borda);
    border-radius: var(--raio-lg);
    padding: clamp(1.75rem, 5vw, 3.25rem);
    overflow: hidden;
}

.contato-card > * {
    position: relative;
    z-index: 1;
}

.contato-lead {
    font-family: var(--display);
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--texto);
    max-width: 26ch;
}

.mail {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--display);
    font-size: clamp(1.05rem, 3vw, 1.65rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--texto);
    border-bottom: 1px solid var(--linha-forte);
    padding-bottom: 0.35rem;
    margin-top: 2rem;
    word-break: break-word;
    transition: color var(--transicao), border-color var(--transicao);
}

.mail .icon-sm {
    width: 16px;
    height: 16px;
    transition: transform var(--transicao);
}

.mail:hover {
    color: var(--acento);
    border-color: var(--acento);
}

.mail:hover .icon-sm {
    transform: translate(3px, -3px);
}

.contato-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    list-style: none;
    margin-top: 2.75rem;
}

.contato-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--texto-suave);
    transition: color var(--transicao);
}

.contato-links a:hover {
    color: var(--texto);
}

/* -------------------------------------------------------------- rodapé -- */
.site-footer {
    border-top: 1px solid var(--linha);
    padding: 2.5rem var(--margem);
}

.footer-inner {
    max-width: var(--largura);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem 1.5rem;
}

.site-footer p {
    font-size: 0.78rem;
    color: var(--texto-fraco);
}

/* ----------------------------------------------------------- animações -- */
/* a classe entra pelo script: sem JS (ou se ele quebrar) o conteudo
   continua visivel em vez de sumir da pagina. */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.js .reveal.active {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------- telas largas -- */
/* a partir de notebooks grandes, o layout se espalha em vez de virar uma coluna estreita */
@media (min-width: 1200px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) clamp(20rem, 26vw, 28rem);
        padding-block: clamp(4rem, 10vh, 7rem) 6rem;
    }

    .hero-foto {
        max-width: 28rem;
    }

    .hero h1 {
        font-size: clamp(3.6rem, 5vw, 5.4rem);
    }

    .hero-cargo {
        font-size: clamp(1.3rem, 1.6vw, 1.75rem);
    }

    .hero-lead {
        font-size: clamp(1.08rem, 1vw, 1.2rem);
        max-width: 62ch;
    }

    section {
        padding-block: 6.5rem;
    }

    /* sobre: texto, stack e ferramentas lado a lado */
    .bento {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .bento-texto {
        grid-row: auto;
    }

    /* as duas experiências lado a lado */
    .exps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 1.5rem;
    }

    .exps .exp + .exp {
        margin-top: 0;
    }

    /* trajeto: a linha vertical vira uma grade de três colunas, lida da esquerda para a direita */
    .timeline {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.75rem 2.5rem;
        padding-left: 0;
    }

    .timeline::before {
        display: none;
    }

    .timeline-item {
        padding: 1.6rem 0 0;
        border-top: 1px solid var(--linha-forte);
    }

    .timeline-item::before {
        left: 0;
        top: -4px;
    }

    /* contato: frase e e-mail à esquerda, links empilhados à direita */
    .contato-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 4rem;
    }

    .contato-links {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: column;
        gap: 1.1rem;
        margin-top: 0;
        padding-left: 3rem;
        border-left: 1px solid var(--linha);
    }

    .contato-links a {
        font-size: 1rem;
    }
}

/* -------------------------------------------------------------- tablet -- */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .hero-foto {
        order: -1;
        justify-self: start;
        max-width: 11rem;
    }

    .hero-stack {
        margin-top: 0.5rem;
    }

    .bento {
        grid-template-columns: 1fr;
    }

    .bento-texto {
        grid-row: auto;
    }

    .proj {
        grid-template-columns: 1fr;
    }

    .proj-capa {
        border-right: none;
        border-bottom: 1px solid var(--vidro-borda);
        padding: 2.75rem 1rem 2.25rem;
    }

    .proj-capa img {
        width: 104px;
        height: 104px;
    }
}

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
        position: relative;
        z-index: 95;
    }

    .brand-name {
        display: none;
    }

    /* backdrop-filter faz a pilula virar o ancoramento de qualquer filho
       position:fixed — e o painel do menu abria dentro dela. No celular a
       pilula fica opaca e o painel volta a se medir pela tela. */
    .header-pill {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(13, 13, 16, 0.94);
    }

    .rolou .header-pill {
        background: rgba(11, 11, 14, 0.97);
    }

    /* fechado, o painel fica no lugar e some por clip-path: empurrar com
       translateX jogava 265px para fora e alargava a pagina no celular. */
    .nav-menu {
        position: fixed;
        inset: 0 0 0 32%;
        background: #0e0e11;
        border-left: 1px solid var(--vidro-borda);
        clip-path: inset(0 0 0 100%);
        visibility: hidden;
        transition: clip-path var(--transicao), visibility var(--transicao);
        z-index: 90;
    }

    .nav-menu.active {
        clip-path: inset(0);
        visibility: visible;
    }

    .nav-menu ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
        padding: 6rem 1.75rem 2rem;
    }

    .nav-menu a {
        font-size: 1rem;
    }

    section {
        padding: 4rem 0;
    }

    .section-head {
        margin-bottom: 2.25rem;
    }

    .hero {
        padding-top: 2.5rem;
    }

    .hero-foto {
        max-width: 10.5rem;
    }

    .hero-foto img {
        border-radius: 22px;
    }

    .chip {
        font-size: 0.74rem;
    }

    .timeline {
        padding-left: 1.5rem;
    }

    .timeline-item::before {
        left: -1.5rem;
    }
}

@media (max-width: 420px) {
    .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}