/* ============================================================
   FONTES AUTO-HOSPEDADAS (woff2, subset latino)
   ------------------------------------------------------------
   Antes carregadas via Google Fonts (render-blocking + conexão
   externa). Agora locais em ../fonts: elimina o round-trip ao
   Google e o CSS de fontes do caminho crítico. font-display:swap
   mantém o texto visível enquanto a fonte carrega. Só os pesos
   realmente usados no projeto estão aqui (Space Grotesk 500/600/700,
   Inter 400/500/600, JetBrains Mono 400/500/600).
   ============================================================ */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-600.woff2') format('woff2');
}

/* ============================================================
   VITOR LOMBARD ROCHA — PORTFÓLIO
   Stylesheet principal

   Conceito visual: "console de engenharia".
   Fundo navy profundo + constelação de partículas, destaque
   ciano (cor do Go), tipografia técnica (Space Grotesk / Inter /
   JetBrains Mono). Tudo escuro, premium e discreto.
   ============================================================ */

/* ----- Reset & base ----------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

:root {
    /* Fundos */
    --bg: #0A0F1E;            /* base navy-quase-preto */
    --bg-2: #0C1322;          /* seções alternadas */
    --surface: #111A2E;       /* cards */
    --surface-2: #16213B;     /* hover / elevado */

    /* Linhas e bordas */
    --border: rgba(148, 163, 184, 0.12);
    --border-strong: rgba(148, 163, 184, 0.22);

    /* Texto */
    --text: #E6ECF5;
    --text-muted: #93A1B5;
    --text-dim: #73839C;

    /* Destaque — ciano (Go) + índigo para profundidade */
    --accent: #38BDF8;
    --accent-2: #818CF8;
    --accent-soft: rgba(56, 189, 248, 0.10);
    --accent-line: rgba(56, 189, 248, 0.30);
    --gradient: linear-gradient(120deg, #38BDF8, #818CF8);

    /* Status / utilidades */
    --ok: #34D399;            /* ponto "disponível" */

    /* Superfícies de componentes (variáveis → permitem tema claro) */
    --header-bg: rgba(10, 15, 30, 0.55);
    --header-bg-scrolled: rgba(10, 15, 30, 0.78);
    --menu-bg: rgba(12, 19, 34, 0.97);
    --terminal-bg: rgba(13, 20, 36, 0.85);
    --input-bg: rgba(10, 15, 30, 0.6);
    --cat-bg: rgba(10, 15, 30, 0.7);
    --chip-bg: rgba(255, 255, 255, 0.02);
    --chip-bg-2: rgba(255, 255, 255, 0.03);
    --hover-tint: rgba(255, 255, 255, 0.04);
    --particle-rgb: 56, 189, 248;   /* cor das partículas (ciano) */
    --thumb-bg: #0D1526;                    /* base das capas de projeto / banners */
    --scrollbar-thumb: #243049;
    --scrollbar-thumb-hover: #2f3d5c;

    /* Sombras / brilhos */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
    --glow: 0 12px 40px rgba(56, 189, 248, 0.18);

    /* Fontes */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

    /* Layout */
    --maxw: 1180px;
    --header-h: 76px;
}

/* ----- Tema claro ------------------------------------------- */
/* Mantém a identidade ciano/índigo, mas escurece o destaque
   o suficiente para legibilidade sobre fundos claros. */
[data-theme="light"] {
    --bg: #F4F7FB;
    --bg-2: #EAEFF6;
    --surface: #FFFFFF;
    --surface-2: #F0F4F9;

    --border: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.18);

    --text: #0F1B2E;
    --text-muted: #475569;
    --text-dim: #566377;

    --accent: #0370AB;
    --accent-2: #6366F1;
    --accent-soft: rgba(2, 132, 199, 0.10);
    --accent-line: rgba(2, 132, 199, 0.30);
    --gradient: linear-gradient(120deg, #0EA5E9, #6366F1);

    --ok: #059669;

    --header-bg: rgba(244, 247, 251, 0.70);
    --header-bg-scrolled: rgba(244, 247, 251, 0.88);
    --menu-bg: rgba(255, 255, 255, 0.97);
    --terminal-bg: rgba(255, 255, 255, 0.90);
    --input-bg: rgba(255, 255, 255, 0.80);
    --cat-bg: rgba(255, 255, 255, 0.82);
    --chip-bg: rgba(15, 23, 42, 0.03);
    --chip-bg-2: rgba(15, 23, 42, 0.04);
    --hover-tint: rgba(15, 23, 42, 0.05);
    --particle-rgb: 2, 132, 199;
    --thumb-bg: #EAEFF6;
    --scrollbar-thumb: #C5CFDD;
    --scrollbar-thumb-hover: #AEB9CB;

    --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08);
    --glow: 0 12px 40px rgba(2, 132, 199, 0.16);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;   /* remove o "quadrado" azul ao tocar no mobile */
}

/* Cursor: normal (do sistema) no tema escuro; preto no tema claro.
   A seta preta tem contorno branco fino pra ficar visível mesmo sobre
   elementos escuros. Links/campos mantêm seus cursores (mãozinha/texto). */
[data-theme="light"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M2.5%201.5%20L2.5%2016%20L6%2012.6%20L8.4%2017.8%20L10.4%2016.9%20L8%2011.8%20L13%2011.8%20Z%22%20fill%3D%22%23000000%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 2, auto;
}

/* wrapper do efeito elástico — SEM transform/will-change permanentes.
   Em repouso é um bloco comum (não vira containing block), então
   position: sticky em descendentes (ex.: .case-aside) funciona normalmente.
   A composição na GPU é ligada só durante o overscroll, via JS (will-change). */
.elastic-wrap { will-change: auto; }

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

ul {
    list-style: none;
}

a {
    color: inherit;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

::selection {
    background: rgba(56, 189, 248, 0.30);
    color: #fff;
}

/* ----- Canvas de partículas (constelação ao fundo) ---------- */
#bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
}

/* Halo de luz suave atrás do conteúdo, fixo */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 40rem at 75% -5%, rgba(56, 189, 248, 0.10), transparent 60%),
        radial-gradient(50rem 40rem at 0% 10%, rgba(129, 140, 248, 0.08), transparent 55%);
}

[data-theme="light"] body::before {
    background:
        radial-gradient(60rem 40rem at 75% -5%, rgba(2, 132, 199, 0.07), transparent 60%),
        radial-gradient(50rem 40rem at 0% 10%, rgba(99, 102, 241, 0.06), transparent 55%);
}

[data-theme="light"] ::selection {
    background: rgba(2, 132, 199, 0.22);
    color: var(--text);
}

/* ----- Utilitários ------------------------------------------ */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Etiqueta monoespaçada usada como "eyebrow" das seções.
   Carrega informação real (índice + nome do arquivo), no espírito
   de um terminal — não é só decoração. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--accent);
    text-transform: lowercase;
    margin-bottom: 1rem;
}

.eyebrow::before {
    content: '';
    width: 1.8rem;
    height: 1px;
    background: var(--accent-line);
}

.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ----- Botões ----------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.6rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Botão primário com gradiente */
.btn--primary {
    background: var(--gradient);
    color: #06121f;
    box-shadow: 0 6px 24px rgba(var(--particle-rgb), 0.22);
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary.is-visible:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--glow);
}


/* No tema claro o gradiente vivo + glow ciano ficava forte demais; aqui um
   azul mais discreto e sombra leve (o tema escuro continua igual). */
[data-theme="light"] .btn--primary {
    background: linear-gradient(120deg, #54A4E6, #7D90E4);
    color: #0a1322;
    box-shadow: 0 4px 12px -3px rgba(2, 132, 199, 0.20);
}
[data-theme="light"] .btn--primary:hover,
[data-theme="light"] .btn--primary:focus-visible,
[data-theme="light"] .btn--primary.is-visible:hover {
    box-shadow: 0 6px 16px -3px rgba(2, 132, 199, 0.26);
}

/* Botão secundário "ghost" com borda */
.btn--ghost {
    background: var(--chip-bg);
    color: var(--text);
    border-color: var(--border-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible,
.btn--ghost.is-visible:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: var(--accent-line);
    color: var(--text);
    background: var(--accent-soft);
}

.btn--sm {
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    border-radius: 0.55rem;
}

.btn--block {
    width: 100%;
}

/* ----- Header / navegação ----------------------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-h);
    z-index: 1000;
    display: flex;
    align-items: center;
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Ganha uma linha sutil ao rolar (classe adicionada via JS) */
.header.scrolled {
    border-bottom-color: var(--border);
    background: var(--header-bg-scrolled);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    transition: transform 0.25s ease;
}

.logo-link:hover { transform: translateY(-1px); }

.logo-mark {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent);
    font-weight: 600;   /* mesmo peso do logo (JBM 600); evita faux-bold */
}

.logo-link .logo-dim { color: var(--text-dim); }

.nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.nav a {
    position: relative;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.nav a .nav-index {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent);
    margin-right: 0.35rem;
}

.nav a:hover,
.nav a:focus-visible,
.nav a.active {
    color: var(--text);
    background: var(--hover-tint);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* ----- Botão de tema (claro/escuro) ------------------------- */
/* ============================================================
   BOTÃO DE IDIOMA — mostra só o idioma ATUAL (PT ⇄ EN).
   Minimalista, sem caixa: as duas siglas ficam empilhadas na
   mesma célula (padrão do sol/lua do tema); a ativa é visível e,
   na troca, uma rola para cima enquanto a outra entra por baixo,
   com a mesma mola dos ícones do tema. Estado EN = classe .is-en
   (aplicada pelo i18n.js).
   ============================================================ */
.lang-toggle {
    display: inline-grid;
    place-items: center;
    position: relative;
    overflow: hidden;                      /* esconde a sigla que rola p/ fora */
    width: 2rem;
    height: 2rem;                          /* quadrado: o hover fica 1:1 (o
                                              flex do header centraliza na
                                              altura do botão de tema) */
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0.4rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.25s ease;
}

/* hover/foco acendem só a sigla (o botão TEM o tamanho da sigla) */
.lang-toggle:hover,
.lang-toggle:focus-visible {
    background: var(--accent-soft);
}
.lang-toggle:hover .lt-label,
.lang-toggle:focus-visible .lt-label {
    color: var(--accent);
}

.lang-toggle .lt-label {
    grid-area: 1 / 1;                      /* empilhadas na mesma célula */
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
    pointer-events: none;
    user-select: none;
    transition:
        opacity 0.3s ease,
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);  /* mesma mola do tema */
}

/* PT visível por padrão; EN esperando embaixo */
.lang-toggle .lt-pt { opacity: 1; transform: translateY(0); }
.lang-toggle .lt-en { opacity: 0; transform: translateY(0.9rem); }

/* em inglês: PT rola para cima e some; EN assume o lugar */
.lang-toggle.is-en .lt-pt { opacity: 0; transform: translateY(-0.9rem); }
.lang-toggle.is-en .lt-en { opacity: 1; transform: translateY(0); }

/* ============================================================
   TROCA DE IDIOMA — a página "recarrega" com a mesma animação
   de entrada (fadeUp). O i18n.js aplica .i18n-out no <html>,
   troca os textos e então .i18n-in, que roda o fadeUp de novo
   no conteúdo (header fica parado — o clique não pula).
   ============================================================ */
.i18n-out main,
.i18n-out footer {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.i18n-in main,
.i18n-in footer {
    animation: fadeUp 0.6s ease both;
}

.theme-toggle {
    display: inline-grid;
    place-items: center;
    position: relative;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 0.55rem;
    color: var(--text);
    width: 2.6rem;
    height: 2.6rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--accent);
    border-color: var(--accent-line);
    background: var(--accent-soft);
    transform: translateY(-1px);
}

/* Sol e lua ficam empilhados na MESMA célula do grid; a troca é
   feita por opacity + rotate + scale (e não mais por display:none,
   que impedia qualquer transição). */
.theme-toggle .icon {
    grid-area: 1 / 1;
    width: 1.15rem;
    height: 1.15rem;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* tema ESCURO -> sol em cena, lua girada pra fora */
.theme-toggle .ic-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle .ic-moon {
    opacity: 0;
    transform: rotate(-120deg) scale(0.3);
}

/* tema CLARO -> lua em cena, sol sai girando pro lado oposto */
[data-theme="light"] .theme-toggle .ic-sun {
    opacity: 0;
    transform: rotate(120deg) scale(0.3);
}

[data-theme="light"] .theme-toggle .ic-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* "pop" do botão + anel que se expande, disparados pela classe
   .is-switching que o main.js adiciona no clique */
.theme-toggle::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid var(--accent);
    opacity: 0;
    pointer-events: none;
}

.theme-toggle.is-switching {
    animation: tt-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle.is-switching::after {
    animation: tt-ring 0.55s ease-out;
}

@keyframes tt-pop {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(0.86) rotate(-10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes tt-ring {
    0%   { opacity: 0.5; transform: scale(0.85); }
    100% { opacity: 0;   transform: scale(1.45); }
}

/* acessibilidade: quem pediu menos movimento recebe só um fade curto */
@media (prefers-reduced-motion: reduce) {
    /* idioma: a sigla troca com um fade curto, sem rolagem;
       a troca de página vira corte seco */
    .lang-toggle .lt-label {
        transition: opacity 0.15s linear;
        transform: none !important;
    }
    .i18n-out main, .i18n-out footer { transition: none; }
    .i18n-in main, .i18n-in footer { animation: none; }

    .theme-toggle .icon {
        transition: opacity 0.15s linear;
        transform: none !important;
    }

    .theme-toggle.is-switching,
    .theme-toggle.is-switching::after {
        animation: none;
    }
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 0.55rem;
    color: var(--text);
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.5rem;
    cursor: pointer;
    place-items: center;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
    color: var(--accent);
    border-color: var(--accent-line);
    background: var(--accent-soft);
    transform: translateY(-1px);
}

/* barras do hambúrguer que viram um "X" ao abrir */
.menu-toggle .mt-bars {
    position: relative;
    width: 18px;
    height: 13px;
}
.menu-toggle .mt-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), opacity 0.2s ease, top 0.3s cubic-bezier(.4, 0, .2, 1);
}
.menu-toggle .mt-bars span:nth-child(1) { top: 0; }
.menu-toggle .mt-bars span:nth-child(2) { top: 5.5px; }
.menu-toggle .mt-bars span:nth-child(3) { top: 11px; }
.menu-toggle[aria-expanded="true"] .mt-bars span:nth-child(1) { top: 5.5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .mt-bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .mt-bars span:nth-child(3) { top: 5.5px; transform: rotate(-45deg); }

/* ----- Seções (espaçamento base) ---------------------------- */
.section {
    padding-block: clamp(2.5rem, 5vw, 4.75rem);
    position: relative;
}
/* 1ª seção logo abaixo do header fixo: no desktop fica igual; no mobile o topo
   nunca fica menor que a altura do header + folga (senão o conteúdo encosta nele) */
.section--page-top {
    padding-top: max(clamp(2.5rem, 5vw, 4.75rem), calc(var(--header-h) + 2.5rem));
}
.section--page-top .section-head { margin-bottom: 1.5rem; }

/* linha do topo: eyebrow centralizado + botão redondo "voltar" na ponta esquerda */
.page-top-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 2.4rem;
    margin-bottom: 1rem;
}
.page-top-row .eyebrow { margin-bottom: 0; }
/* sem o traço à esquerda aqui: como o .page-top-row já centraliza (justify-content:center)
   e o botão "voltar" é absoluto (fora do fluxo), o texto fica centralizado de fato. */
.page-top-row .eyebrow::before { display: none; }
/* botão "voltar" do todos-projetos (ancorado à esquerda, centralizado na vertical) */
.back-round {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.back-round:hover {
    color: var(--accent);
    border-color: var(--accent-line);
    transform: translateY(calc(-50% - 2px));
}
.back-round .icon { width: 16px; height: 16px; }

/* botão-bolha "voltar" das páginas de projeto — mesma animação dos botões do carrossel */
.back-bubble {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.back-bubble .icon { width: 16px; height: 16px; }

.section--alt {
    background: linear-gradient(180deg, transparent, var(--bg-2) 12%, var(--bg-2) 88%, transparent);
}

/* #sobre é a 1ª seção após o hero: padding-top menor p/ encostar mais no hero */
#sobre { padding-top: clamp(2.8rem, 5vw, 3.6rem); }

.section-head {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head.center {
    margin-inline: auto;
    text-align: center;
}

.section-head.center .eyebrow { justify-content: center; }

.section-title {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 600;
}

.section-desc {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    min-height: auto;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: clamp(2rem, 3.5vw, 2.6rem);
}

.hero .container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    width: 100%;
}

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: clamp(0.6rem, 3vw, 0.82rem);   /* encolhe no mobile p/ caber numa linha */
    white-space: nowrap;                       /* nunca quebra a linha */
    color: var(--text-muted);
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 2rem;
    background: var(--chip-bg);
    margin-bottom: 1.8rem;
}

.status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
    animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
    70%  { box-shadow: 0 0 0 0.6rem rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.hero .role {
    font-family: var(--font-mono);
    font-size: clamp(1rem, 2vw, 1.35rem);
    color: var(--text-muted);
    margin-bottom: 1.6rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
}

/* prompt ">" antes dos termos */
.hero .role::before {
    content: '> ';
    color: var(--accent);
    margin-right: 0.15em;
}

/* termos: ímpares em cinza, pares em destaque — alterna sozinho
   conforme novos termos são adicionados no HTML */
.role-term { color: var(--text-muted); }
.role-term:nth-of-type(even) { color: var(--accent); }

/* separador "·" entre os termos */
.role-term:not(:first-of-type)::before {
    content: '·';
    color: var(--text-dim);
    margin: 0 0.5em;
}

.hero .summary {
    max-width: 46ch;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    margin-bottom: 2.2rem;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 2rem;
}

/* botão CV mostra texto completo no desktop e "Baixar CV" só no mobile */
.btn--cv .cv-short { display: none; }

.hero-meta {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}

.social-links {
    display: flex;
    gap: 0.6rem;
}

.social-links a {
    display: inline-grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.6rem;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 1.15rem;
    transition: transform 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, background-color 0.25s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
    transform: translateY(-3px);
    color: var(--accent);
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

.hero-meta .meta-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.5;
}

/* ----- Terminal (elemento-assinatura do hero) --------------- */
.terminal {
    position: relative;
    background: var(--terminal-bg);
    border: 1px solid var(--border-strong);
    border-radius: 0.9rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 8px rgba(5, 8, 18, 0.30),
        0 18px 40px -12px rgba(5, 8, 18, 0.55),
        0 44px 80px -34px rgba(5, 8, 18, 0.65),
        0 0 70px rgba(var(--particle-rgb), 0.07);
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: translateZ(0);
}

/* Palco do tilt 3D: dá perspectiva e segura a aura de brilho (sem clipar). */
.hero-visual { perspective: 1100px; }
.ide-stage {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
}
/* aura de gradiente atrás do IDE — profundidade e brilho (estilo "glow"). */
.ide-stage::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 1rem;
    background: linear-gradient(135deg, #38BDF8 0%, #818CF8 48%, #C084FC 100%);
    filter: blur(26px);
    opacity: 0.14;
    z-index: -1;
    transform: translateZ(-70px) scale(0.97);
    transition: opacity 0.45s ease;
}
.ide-stage:hover::before { opacity: 0.26; }
[data-theme="light"] .ide-stage::before { opacity: 0.22; }
[data-theme="light"] .ide-stage:hover::before { opacity: 0.32; }
[data-theme="light"] .terminal {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 3px 10px rgba(15, 23, 42, 0.12),
        0 20px 44px -14px rgba(15, 23, 42, 0.24),
        0 46px 80px -32px rgba(15, 23, 42, 0.30),
        0 0 60px rgba(var(--particle-rgb), 0.05);
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    background: var(--chip-bg-2);
    border-bottom: 1px solid var(--border);
}

.terminal-bar .dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #2b3a52;
}

.terminal-bar .dot.r { background: #ff5f57; }
.terminal-bar .dot.y { background: #febc2e; }
.terminal-bar .dot.g { background: #28c840; }

.terminal-bar .term-title {
    margin-left: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-dim);
}

.terminal-body {
    padding: 1.3rem 1.4rem 1.6rem;
    font-family: var(--font-mono);
    font-size: 0.86rem;
    line-height: 1.85;
    min-height: 16rem;
}

.terminal-body .line { white-space: pre-wrap; word-break: break-word; }
.term-prompt { color: var(--accent); }
.term-flag { color: var(--accent-2); }
.term-str { color: #7ee0b8; }
[data-theme="light"] .term-str { color: #0f8a5f; }
.term-key { color: #e6ecf5; }
[data-theme="light"] .term-key { color: #1e2a44; }
.term-comment { color: var(--text-dim); }
.term-out { color: var(--text-muted); }

/* Cursor piscando ao final da digitação */
.term-cursor {
    display: inline-block;
    width: 0.55rem;
    height: 1.05rem;
    background: var(--accent);
    vertical-align: -0.15em;
    animation: blink 1.05s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ============================================================
   SOBRE
   ============================================================ */
.about-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
/* permite que texto e card encolham até a largura do container (sem vazar p/ direita) */
.about-grid > * { min-width: 0; }

.about-text p {
    color: var(--text-muted);
    margin-bottom: 1.1rem;
    max-width: 60ch;
}

.about-text p strong { color: var(--text); font-weight: 600; }

.about-focus {
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.about-focus span {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--chip-bg);
}

/* "Ler mais": recorta o texto em ~10 linhas (quando passa disso) com um
   leve fade, e mostra um botão no estilo do site para abrir o restante.
   O JS (about-readmore.js) controla quando aplicar e o limite de linhas. */
.about-text-body {
    position: relative;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.about-text-body.clamped {
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .about-text-body { transition: none; }
}
.about-more {
    margin-top: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.98rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.about-more:hover { opacity: 0.7; }
.about-chevron { width: 17px; height: 17px; transition: transform 0.35s ease; }
.about-more.is-open .about-chevron { transform: rotate(180deg); }

/* Cartão lateral "perfil rápido" */
.about-card {
    position: relative;
    background:
        /* reflexo metálico diagonal (luz nos cantos) */
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 20%,
            transparent 42%,
            transparent 60%,
            rgba(255, 255, 255, 0.015) 80%,
            rgba(255, 255, 255, 0.06) 100%),
        /* brilho de canto ciano */
        radial-gradient(125% 80% at 100% 0%, rgba(var(--particle-rgb), 0.08), transparent 55%),
        /* superfície translúcida (frosted) */
        color-mix(in srgb, var(--surface) 55%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.6rem;
    /* bisel metálico: realce claro no topo, sombra na base */
    box-shadow:
        var(--shadow-card),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    overflow: hidden;
}
/* fio de gradiente sutil no topo (toque "console") */
.about-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-line) 25%, var(--accent-line) 75%, transparent);
    pointer-events: none;
}

.about-card h3 {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 1.2rem;
    font-weight: 500;
}

.about-card dl {
    display: grid;
    gap: 0.9rem;
}

.about-card .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.about-card .row:last-child { border-bottom: 0; padding-bottom: 0; }

.about-card dt {
    color: var(--text-dim);
    font-size: 0.85rem;
    font-family: var(--font-mono);
}

.about-card dd {
    color: var(--text);
    font-size: 0.9rem;
    text-align: right;
    font-weight: 500;
}

/* Estatísticas dentro do card "// em números"
   Desktop: cards separados, um abaixo do outro (1 coluna).
   Mobile (card ocupa a largura toda): grade 2x2. */
.about-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.about-stat {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--surface) 32%, transparent);
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    transition: transform 0.3s cubic-bezier(.2, .7, .2, 1),
                border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.about-stat:hover {
    border-color: var(--accent-line);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: 0 10px 26px rgba(var(--particle-rgb), 0.13);
    transform: translateY(-3px);
}
.about-stat:hover .num { filter: drop-shadow(0 0 12px rgba(var(--particle-rgb), 0.30)); }

.about-stat .num {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: filter 0.3s ease;
}

.about-stat .num .suffix { font-size: 0.9em; margin-left: 0.04em; }

.about-stat .label {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: break-word;
}


.tech-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.tech-group {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 1.4rem 1.5rem;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.tech-group:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
}

.tech-group h3 {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 1.1rem;
}

.tech-group h3 .hash { color: var(--accent); }

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.badge {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text);
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--chip-bg);
    transition: transform 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, background-color 0.2s ease;
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.badge-ico {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
}

/* cores de marca dos ícones de stack */
.ic-go      { color: #00ADD8; }
.ic-python  { color: #3776AB; }
.ic-js      { color: #F7DF1E; }
.ic-node    { color: #5FA04E; }
.ic-jwt     { color: var(--text); }
.ic-pg      { color: #4169E1; }
.ic-mysql   { color: #4479A1; }
.ic-docker  { color: #2496ED; }
.ic-k8s     { color: #326CE5; }
.ic-grafana { color: #F46800; }
.ic-prom    { color: #E6522C; }
.ic-cpp     { color: #00599C; }
.ic-java    { color: #E76F00; }
.ic-html5   { color: #E34F26; }
.ic-css     { color: #1572B6; }
.ic-git     { color: #F03C2E; }
.ic-postman { color: #FF6C37; }
.ic-insomnia{ color: #8B5CF6; }
.ic-bootstrap{ color: #7952B3; }
.ic-wireshark{ color: #1679A7; }

/* Ícone colorido no título de cada card (um por categoria) */
.tg-ico {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    background: color-mix(in srgb, currentColor 14%, transparent);
    flex-shrink: 0;
}
.tg-ico .icon { width: 1rem; height: 1rem; }
.tg-ico--front { color: #38BDF8; }   /* Front-end    — azul    */
.tg-ico--back  { color: #34D399; }   /* Back-end     — verde   */
.tg-ico--lang  { color: #F59E0B; }   /* Linguagens   — âmbar   */
.tg-ico--db    { color: #A78BFA; }   /* Banco        — violeta */
.tg-ico--ops   { color: #FB7185; }   /* Cloud&DevOps — rosa    */
.tg-ico--tools { color: #2DD4BF; }   /* Ferramentas  — teal    */

.badge:hover {
    transform: translateY(-2px);
    color: var(--accent);
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

/* no hover do badge, ícone acompanha a cor de destaque */
.badge:hover .badge-ico { color: currentColor; }

/* ============================================================
   PORTFÓLIO (seção central)
   ============================================================ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* ---- Carrossel do "todos os projetos" (grade 3 col, páginas de 6) ---- */
.proj-carousel .projects-grid { grid-template-columns: repeat(3, 1fr); }
.pc-viewport { overflow: hidden; }
.pc-track {
    display: flex;
    touch-action: pan-y;        /* deixa a rolagem vertical livre no toque */
    user-select: none;
    will-change: transform;
}
.pc-slide { flex: 0 0 100%; min-width: 0; }

.pc-controls {
    display: flex;
    align-items: center;
    justify-content: center;    /* centralizado na página */
    gap: 1.1rem;
    margin-bottom: 2.2rem;
}
.pc-arrow {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.pc-arrow:hover { color: var(--accent); border-color: var(--accent-line); transform: translateY(-2px); }
.pc-arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; transform: none; }
.pc-arrow .icon { width: 16px; height: 16px; }
.pc-next .icon { transform: rotate(180deg); }   /* seta para a direita */

.pc-dots { display: flex; align-items: center; gap: 0.5rem; }
.pc-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--border-strong);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}
.pc-dot.is-active { width: 22px; background: var(--gradient); }

/* "Projetos em destaque": cards mais compactos.
   A capa vira uma faixa baixa (em vez de 16/9) e o corpo fica mais justo. */
.projects-grid .project-thumb {
    aspect-ratio: auto;
    height: 150px;
}
.projects-grid .project-thumb .thumb-glyph {
    font-size: clamp(1.1rem, 2.4vw, 1.6rem);
}
.projects-grid .project-body { padding: 1.1rem 1.2rem; }
.projects-grid .project-body p { margin-bottom: 0.85rem; }
.projects-grid .project-tags { margin-bottom: 1rem; }

/* botão "Todos os projetos" abaixo da grade de destaque */
.projects-more {
    display: flex;
    justify-content: center;
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

/* Botão "Todos os projetos" um pouco maior em destaque */
.projects-more .btn {
    padding: 1.05rem 2.5rem;
    font-size: 1.05rem;
    border-radius: 0.85rem;
}
.projects-more .btn .icon { width: 1.15em; height: 1.15em; }

/* página "todos os projetos": cards empilhados, um abaixo do outro */
.projects-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 940px;
    margin: 0 auto;
}

/* a partir de telas médias: card na horizontal (capa à esquerda,
   conteúdo à direita) → blocos bem mais baixos e largos */
@media (min-width: 640px) {
    .projects-stack .project-card {
        flex-direction: row;
        align-items: stretch;
    }
    .projects-stack .project-thumb {
        aspect-ratio: auto;
        width: 34%;
        min-width: 200px;
        max-width: 300px;
        border-bottom: none;
        border-right: 1px solid var(--border);
    }
    .projects-stack .project-body {
        padding: 1.1rem 1.4rem;
    }
    .projects-stack .project-body p { margin-bottom: 0.85rem; }
    .projects-stack .project-tags { margin-bottom: 1rem; }
    .projects-stack .project-card:hover { transform: translateY(-3px); }
}

.project-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-line);
    box-shadow: var(--shadow-card), 0 0 50px rgba(var(--particle-rgb), 0.10);
}

/* Capa: gradiente + "janela de código" estilizada como thumbnail.
   Quando o Vitor tiver screenshots reais, basta trocar por <img>. */
.project-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(129, 140, 248, 0.16), transparent 55%),
        var(--thumb-bg);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.project-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ancora o corte à esquerda: o nome do projeto (na zona segura do banner)
       fica sempre visível, independente da proporção da caixa (home largo,
       todos-projetos quase-quadrado, mobile 2 colunas). */
    object-position: left center;
}

.project-thumb .thumb-glyph {
    font-family: var(--font-mono);
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    color: rgba(230, 236, 245, 0.85);
    letter-spacing: 0.02em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* No tema claro a capa é clara, então o glyph quase-branco sumia: cor escura
   legível no estado normal. O hover continua indo para --accent (animação mantida). */
[data-theme="light"] .project-thumb .thumb-glyph {
    color: var(--text-muted);
    text-shadow: none;
}

.project-card:hover .thumb-glyph { color: var(--accent); }

.project-cat {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text);
    background: color-mix(in srgb, var(--cat-bg) 52%, transparent);   /* mais transparente */
    border: 1px solid var(--border-strong);
    padding: 0.3rem 0.65rem;
    border-radius: 0.45rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
/* tema claro: translúcido, porém mais branco */
[data-theme="light"] .project-cat {
    background: color-mix(in srgb, #ffffff 48%, transparent);
}
/* telas muito pequenas: badge mais compacto e com folga garantida das bordas */
@media (max-width: 480px) {
    .project-cat {
        max-width: calc(100% - 1.7rem);   /* 0.85rem de folga de cada lado → não encosta */
        font-size: 0.66rem;
        padding: 0.26rem 0.55rem;
        line-height: 1.2;
    }
}

/* A categoria aparece só ao passar o mouse (telas com hover). No mobile/touch,
   onde não existe hover, ela continua sempre visível. Vale p/ index e todos-projetos. */
@media (hover: hover) {
    .project-cat {
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .project-card:hover .project-cat,
    .project-card:focus-within .project-cat {
        opacity: 1;
        transform: translateY(0);
    }
}

/* No mobile/touch (sem hover) a categoria entra animada quando o card aparece,
   em vez de ficar estática. */
@media (hover: none) {
    .project-cat {
        opacity: 0;
        transform: translateY(-6px);
    }
    .project-card.is-visible .project-cat {
        animation: catReveal 0.55s cubic-bezier(.16, 1, .3, 1) 0.2s forwards;
    }
}
@keyframes catReveal { to { opacity: 1; transform: translateY(0); } }

.project-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-body h3 {
    font-size: 1.25rem;
    margin-bottom: 0.55rem;
}

.project-body h3 a {
    color: var(--text);
    transition: color 0.25s ease;
}

.project-card:hover .project-body h3 a { color: var(--accent); }

.project-body p {
    color: var(--text-muted);
    font-size: 0.93rem;
    margin-bottom: 1.1rem;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.3rem;
}

.project-tags span {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
}

.project-actions {
    display: flex;
    gap: 0.7rem;
    margin-top: auto;
}

/* Permite que os botões fiquem acima do link que cobre o card */
.project-actions .btn { position: relative; z-index: 2; flex: 1; }

/* Link invisível que cobre o card inteiro → leva ao estudo de caso.
   Os botões Demonstração/Código ficam acima (z-index maior). */
.project-cover-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.project-card { position: relative; }

/* ============================================================
   EXPERIÊNCIA & FORMAÇÃO (timeline)
   ============================================================ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;   /* topo alinhado: títulos "Experiência" e "Formação" na mesma linha */
}

.timeline {
    position: relative;
    padding-left: 1.8rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 1px;
    background: var(--border-strong);
}

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

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

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.8rem;
    top: 0.35rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--particle-rgb), 0.10);
}

.timeline-item .period {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--accent);
    margin-bottom: 0.3rem;
}

.timeline-item h3 {
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
}

.timeline-item .org {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.timeline-item ul {
    display: grid;
    gap: 0.35rem;
}

.timeline-item li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.timeline-item li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* ---- Experiências: descrição recolhível (desktop + mobile) ----
   Cada experiência abre/fecha a lista (a educação não tem lista, é ignorada).
   Recolhido por padrão; o toggle "detalhes" expande com animação. */
.exp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.exp-toggle:hover { opacity: 0.7; }
.exp-chevron { width: 15px; height: 15px; transition: transform 0.35s ease; }
.exp-toggle.is-open .exp-chevron { transform: rotate(180deg); }

.exp-desc {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(.4, 0, .2, 1);
}
.exp-desc.open { grid-template-rows: 1fr; }
.exp-desc-inner { overflow: hidden; min-height: 0; }

.exp-card {
    margin-top: 0.55rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--cat-bg);                 /* translúcido, igual aos chips */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* delay na abertura: a altura abre primeiro, depois o conteúdo aparece (UX) */
.exp-desc.open .exp-card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease 0.12s, transform 0.35s ease 0.12s;
}

/* ----- Tecnologias: cabeçalho vira toggle SÓ no mobile/estreito ----------
   No desktop/web normal, os chips ficam sempre visíveis (estado atual). */
.tg-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: default;            /* desktop: não parece clicável */
}
.tg-chevron {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex: none;
    color: var(--accent);
    transition: transform 0.35s ease;
    display: none;              /* escondido no desktop */
}
/* título: pode quebrar/hifenizar palavras longas pra não empurrar a seta */
.tg-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.tg-toggle.is-open .tg-chevron { transform: rotate(180deg); }
.tg-desc { display: block; }   /* normal: chips sempre visíveis */

/* Modo recolhível — ativado por JS (.is-collapsible) quando ALGUM card passa
   de 3 linhas de chips. Aí todos os grupos recolhem e o título vira toggle. */
.tech-groups.is-collapsible { align-items: start; }   /* cada card cresce só quando ABERTO; cabeçalhos são igualados via JS */
.tech-groups.is-collapsible .tg-toggle { cursor: pointer; gap: 0.5rem; }
.tech-groups.is-collapsible .tech-group { position: relative; padding-bottom: 1.9rem; }
.tech-groups.is-collapsible .tg-chevron {
    display: block;
    position: absolute;        /* canto inferior direito do card → título usa a largura toda */
    right: 0.7rem;
    bottom: 0.45rem;
    margin: 0;                 /* anula o margin-left:auto */
}
.tech-groups.is-collapsible .tech-group h3 { margin-bottom: 0; }
.tech-groups.is-collapsible .tg-desc {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s cubic-bezier(.4, 0, .2, 1);
}
.tech-groups.is-collapsible .tg-desc.open { grid-template-rows: 1fr; }
.tech-groups.is-collapsible .tg-desc-inner { overflow: hidden; min-height: 0; }
.tech-groups.is-collapsible .tg-desc .badges { padding-top: 0.85rem; }
/* evita animação ao trocar de modo (só os cliques do usuário animam) */
.tech-groups.tg-no-anim .tg-desc { transition: none !important; }

.col-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* espaçamento do título "Certificações" (antes era inline) */
.col-title--gap { margin-top: 2.4rem; }

/* separador horizontal fino — mesma cor da linha vertical da timeline (var(--border-strong)).
   Fica oculto no desktop (as colunas já separam) e aparece só quando empilha. */
.tl-divider {
    display: none;
    width: 60%;                 /* mais curta, alinhada à esquerda (junto dos títulos) */
    height: 1px;
    border: 0;
    background: var(--border-strong);
    margin: 1.8rem 0 2.4rem;    /* mais respiro acima (norte) */
}

.col-title .col-ico {
    color: var(--accent);
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

.col-title .hash { color: var(--accent); }

/* Certificações / cursos — lista compacta */
.cert-list {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 2 cards por linha (N×2); ímpar deixa o último sozinho */
    gap: 0.8rem;
    margin-top: 2.2rem;
}

.cert-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.cert-item:hover {
    border-color: var(--accent-line);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}
.cert-item:hover .cert-name { color: var(--accent); }

.cert-item .cert-mark {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.cert-item .cert-body { min-width: 0; flex: 1; }
.cert-item .cert-name { font-size: 0.92rem; color: var(--text); transition: color 0.25s ease; }
.cert-item .cert-by { font-size: 0.8rem; color: var(--text-dim); font-family: var(--font-mono); }

/* seta "verificar" — aparece e assenta no hover/foco */
.cert-item .cert-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-dim);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.cert-item:hover .cert-arrow,
.cert-item:focus-visible .cert-arrow {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--accent);
}

/* ============================================================
   CONTATO
   ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    column-gap: clamp(2rem, 5vw, 3.5rem);
    row-gap: 1.2rem;
    align-items: stretch;          /* cada célula preenche a altura da sua linha */
}
/* ordem dos itens: [texto+canais | formulário] / [linguagens | calendário] */

/* texto+canais preenche a altura da linha (canais se distribuem se sobrar espaço) */
.contact-info { display: flex; flex-direction: column; }
.contact-info .contact-channels { flex: 0 0 auto; }

/* o formulário cresce para acompanhar a altura do bloco texto+canais */
.contact-form { display: flex; flex-direction: column; }
.contact-form .form-field--msg { flex: 1; display: flex; flex-direction: column; }
/* min-height menor: com um card a menos na coluna da esquerda
   (WhatsApp removido), a textarea encolhe junto e as duas colunas
   continuam com a mesma altura (o flex:1 cuida do resto). */
.contact-form .form-field--msg textarea { flex: 1; min-height: 5rem; }

/* Botão "Enviar mensagem": largura do conteúdo (não ocupa a linha toda)
   e alinhado à esquerda — sobrescreve o width:100% do .btn--block. */
.contact-form button[type="submit"] {
    width: auto;
    align-self: center;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
}

.contact-info p { color: var(--text-muted); margin-bottom: 1.4rem; max-width: 42ch; }

/* Chamada do contato — título grande em duas tonalidades + disponibilidade */
.contact-info .contact-avail {
    color: var(--accent);
    max-width: 46ch;
    line-height: 1.6;
    margin-bottom: 0.55rem;
}
.contact-mode {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 1.6rem;
}

.contact-channels { display: grid; gap: 0.7rem; }

.channel {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.channel:hover {
    border-color: var(--accent-line);
    transform: translateY(-3px);
    background: var(--accent-soft);
}

.channel .ch-icon {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.55rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.channel .ch-label { font-size: 0.76rem; color: var(--text-dim); font-family: var(--font-mono); }
.channel .ch-value { font-size: 0.95rem; color: var(--text); font-weight: 500; }

/* evita overflow horizontal no mobile: e-mails/URLs longos podem quebrar e as
   caixas podem encolher abaixo do tamanho do conteúdo */
.contact-channels, .channel { min-width: 0; }
.channel > span:not(.ch-icon) { min-width: 0; }
.channel .ch-label, .channel .ch-value { overflow-wrap: anywhere; }
.contact-form, .leetcode-card, .github-langs, .github-contrib { min-width: 0; }

/* permite selecionar/copiar os dados de contato com o mouse.
   o anchor é um link (arrastável por padrão): desligar o "drag"
   do link é o que libera a seleção de texto dentro dele. */
.channel {
    -webkit-user-drag: none;
    user-select: text;
    -webkit-user-select: text;
}
.channel .ch-icon { -webkit-user-drag: none; user-select: none; }
.channel .ch-label,
.channel .ch-value {
    user-select: text;
    -webkit-user-select: text;
    -webkit-user-drag: none;
    cursor: text;
}

/* Formulário */
.contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    box-shadow: var(--shadow-card);
}

/* Card do gráfico de contribuições do GitHub */
.github-contrib {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.4rem 1.6rem 1.5rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.github-contrib:hover {
    border-color: var(--accent-line);
    transform: translateY(-3px);
}

.github-contrib .gc-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--accent);
    margin-bottom: 1.1rem;
}

.github-contrib .gc-head .icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* área do calendário — centralizada dentro do card */
.github-contrib .gc-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

.github-contrib .gc-svg {
    display: block;
    width: 100%;
    max-width: 660px;   /* tamanho natural; centraliza quando o card é maior */
    height: auto;
}

/* quadradinhos arredondados; cor por nível usando a cor do tema */
.gc-cell { stroke: rgba(127, 127, 127, 0.06); stroke-width: 1; }
.gc-cell.l0 { fill: rgba(var(--particle-rgb), 0.10); }
.gc-cell.l1 { fill: rgba(var(--particle-rgb), 0.34); }
.gc-cell.l2 { fill: rgba(var(--particle-rgb), 0.55); }
.gc-cell.l3 { fill: rgba(var(--particle-rgb), 0.78); }
.gc-cell.l4 { fill: rgba(var(--particle-rgb), 1); }

.gc-label {
    fill: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 9px;
}

.gc-msg {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-dim);
}

/* ----- Card "linguagens mais usadas" (espelha o de contribuições) ----- */
.github-langs {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.4rem 1.6rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.github-langs .gl-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centra barra+legenda no espaço abaixo do título */
}
.github-langs:hover {
    border-color: var(--accent-line);
    transform: translateY(-3px);
}
.github-langs .gc-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--accent);
    margin-bottom: 0.9rem;
}
.github-langs .gc-head .icon { width: 1rem; height: 1rem; }

/* barra empilhada */
.gl-bar {
    display: flex;
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--chip-bg);
}
.gl-bar > span { height: 100%; }

/* legenda em 2 colunas */
.gl-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 1rem;
    margin-top: 0.85rem;
}
.gl-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    min-width: 0;
}
.gl-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0; }
.gl-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-pct { margin-left: auto; font-family: var(--font-mono); color: var(--text-dim); flex-shrink: 0; }

/* ----- Card LeetCode (mesmo estilo dos cards do GitHub) ----- */
.leetcode-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;               /* preenche o vão entre os canais e o formulário */
    margin-top: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.4rem 1.6rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.leetcode-card:hover,
.leetcode-card.is-visible:hover { border-color: var(--accent-line); transform: translateY(-3px); }
/* Depois da entrada (scroll reveal), o elemento herda a transição de 0.7s do
   .reveal — aqui forçamos 0.25s para a elevação do hover ficar igual à dos
   cards do GitHub, mantendo o fade-in (opacity) na mesma velocidade. */
.leetcode-card.is-visible { transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.leetcode-card .gc-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--accent);
    margin-bottom: 1rem;
}
.leetcode-card .gc-head .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.leetcode-card .lc-ico { color: #FFA116; }      /* laranja do LeetCode */

.lc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.lc-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1.05rem;
}
.lc-total { font-size: 0.9rem; color: var(--text-muted); }
.lc-total strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    margin-right: 0.35rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lc-accept { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); white-space: nowrap; }

.lc-diffs { display: flex; flex-direction: column; gap: 0.72rem; }
.lc-d-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.32rem; }
.lc-d-name { font-size: 0.82rem; color: var(--text); font-weight: 500; }
.lc-d-count { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); }
.lc-d-bar {
    display: block;
    width: 100%;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--chip-bg);
    overflow: hidden;
}
.lc-d-bar > span { display: block; height: 100%; border-radius: 999px; }


.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-field { margin-bottom: 1.1rem; }

.form-field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}

.form-field label .field-opt {
    color: var(--text-dim);
    font-weight: 400;
    text-transform: none;
}

.form-field input,
.form-field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    background: var(--input-bg);
    border: 1px solid var(--border-strong);
    border-radius: 0.6rem;
    padding: 0.8rem 0.95rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-field textarea { resize: vertical; min-height: 8rem; }

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-dim); }
[data-theme="light"] .form-field input::placeholder,
[data-theme="light"] .form-field textarea::placeholder { color: #9aa6b6; }

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--particle-rgb), 0.14);
}

/* ============================================================
   PREENCHIMENTO AUTOMÁTICO (autofill)
   O navegador pinta um fundo claro nos campos autopreenchidos e
   ignora background-color. O box-shadow interno recobre esse fundo
   com a cor do tema; a transition longa impede o flash de cor.
   ============================================================ */

/* campos normais (Nome, E-mail, Assunto) */
.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus,
.form-field input:-webkit-autofill:active,
.form-field textarea:-webkit-autofill,
.form-field textarea:-webkit-autofill:hover,
.form-field textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px #0D1324 inset;   /* ≈ --input-bg sobre o card (escuro) */
    caret-color: var(--text);
    transition: background-color 9999s ease-out 0s;
}

/* tema claro: o campo é branco */
[data-theme="light"] .form-field input:-webkit-autofill,
[data-theme="light"] .form-field input:-webkit-autofill:hover,
[data-theme="light"] .form-field input:-webkit-autofill:focus,
[data-theme="light"] .form-field textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
}

/* telefone: NÃO leva box-shadow (a moldura é o .phone-group);
   mantém transparente e só evita o flash */
.phone-group #telefone-input:-webkit-autofill,
.phone-group #telefone-input:-webkit-autofill:hover,
.phone-group #telefone-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    transition: background-color 9999s ease-out 0s;
}

/* ----- Telefone com seletor de país (bandeira no fim) ----- */
.phone-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--border-strong);
    border-radius: 0.6rem;
    padding: 0 0.4rem 0 0.95rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.phone-group:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--particle-rgb), 0.14);
}
/* código do país à esquerda (vazio = Brasil, sem +55) */
.phone-code {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text-muted);
}
.phone-code:empty { display: none; }
/* input fica "transparente" dentro do grupo (o grupo é a moldura) */
.phone-group #telefone-input {
    flex: 1;
    min-width: 0;
    width: auto;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0.8rem 0;
    box-shadow: none;
}
.phone-group #telefone-input:focus { outline: none; border: none; box-shadow: none; }
/* botão da bandeira (abre o menu) */
.phone-flag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0.4rem 0.45rem;
    border-radius: 0.45rem;
    color: var(--text-dim);
    transition: background-color 0.2s ease;
}
.phone-flag:hover,
.phone-flag:focus-visible { background: var(--hover-tint); outline: none; }
.phone-flag-svg {
    display: block;
    width: 21px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.phone-chevron { width: 13px; height: 13px; transition: transform 0.25s ease; }
.phone-flag[aria-expanded="true"] .phone-chevron { transform: rotate(180deg); }
/* menu de países */
.phone-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 40;
    min-width: 13rem;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--menu-bg);
    border: 1px solid var(--border-strong);
    border-radius: 0.7rem;
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* estado fechado (anima a partir do cantinho do botão) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.phone-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.5, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
    .phone-menu { transition: none; }
}
.phone-opt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}
.phone-opt:hover,
.phone-opt.is-active { background: var(--accent-soft); }
.phone-opt .opt-flag {
    display: block;
    flex-shrink: 0;
    width: 21px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.phone-opt .opt-name { flex: 1; min-width: 0; }
.phone-opt .opt-code {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* ============================================================
   MODAL DE CONFIRMAÇÃO (anti-spam) do formulário
   ============================================================ */
.cf-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.cf-modal[hidden] { display: none; }

.cf-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 9, 18, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cf-modal.is-open .cf-modal__backdrop { opacity: 1; }

.cf-modal__card {
    position: relative;
    width: 100%;
    max-width: 27rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    padding: 1.8rem;
    box-shadow: var(--shadow-card), var(--glow);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.cf-modal.is-open .cf-modal__card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.cf-modal__x {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.cf-modal__x:hover { color: var(--text); border-color: var(--border-strong); }
.cf-modal__x .icon { width: 1rem; height: 1rem; }

.cf-modal__title {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
}

.cf-modal__desc {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-bottom: 1.3rem;
}

/* caixa "Não sou um robô" no estilo de um captcha */
.cf-check {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.7rem;
    background: var(--chip-bg);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.cf-check:hover { border-color: var(--accent-line); }

/* esconde o checkbox nativo, usa a caixinha custom */
.cf-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.cf-check__box {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border: 2px solid var(--border-strong);
    border-radius: 0.4rem;
    color: #06121f;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cf-check__box .icon { width: 1rem; height: 1rem; opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; }

.cf-check input:checked + .cf-check__box {
    background: var(--accent);
    border-color: var(--accent);
}
.cf-check input:checked + .cf-check__box .icon { opacity: 1; transform: scale(1); }

.cf-check input:focus-visible + .cf-check__box {
    box-shadow: 0 0 0 3px rgba(var(--particle-rgb), 0.18);
}

.cf-check__label { font-size: 0.95rem; color: var(--text); }

.cf-modal__error {
    margin-top: 0.9rem;
    color: #f87171;
    font-size: 0.85rem;
}

.cf-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.5rem;
}

.cf-modal__actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ----- Popup de agradecimento (sucesso do envio) ----- */
.cf-modal--success .cf-modal__card { text-align: center; }
.cf-modal__actions--center { justify-content: center; }

.cf-success__badge {
    display: inline-grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--gradient);
    color: #06121f;                 /* check escuro sobre o ciano (igual aos botões) */
    box-shadow: var(--glow);
    transform: scale(0.5);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s;
}
.cf-modal--success.is-open .cf-success__badge { transform: scale(1); }
.cf-success__badge .icon { width: 1.6rem; height: 1.6rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--border);
    padding-block: 3rem 2.5rem;
}

.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
}

.footer-brand {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text);
}

.footer-social { display: flex; gap: 0.6rem; }

.footer-social a {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.55rem;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 1.05rem;
    transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.footer-social a:hover { transform: translateY(-3px); color: var(--accent); border-color: var(--accent-line); }

.footer .copyright {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
}

.footer .built {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-dim);
}

.footer .built .accent { color: var(--accent); }

/* ============================================================
   PÁGINA DE PROJETO (estudo de caso)
   ============================================================ */
.case-hero {
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 3rem;
}
/* "voltar aos projetos" e o eyebrow ficam lado a lado no desktop.
   Para alinharem perfeitamente, os dois compartilham a mesma fonte,
   entrelinha e margem — assim o centro de cada caixa coincide.
   No mobile eles quebram em linhas separadas; isto não atrapalha. */
.case-hero .back-link,
.case-hero .eyebrow {
    vertical-align: middle;
    font-size: 0.8rem;
    line-height: 1;
    margin-bottom: 1.5rem;
}
.case-hero .back-link { margin-right: 0.75rem; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.8rem;
    transition: color 0.25s ease, transform 0.2s ease;
}

.back-link:hover { color: var(--accent); }
.back-link:hover .back-bubble,
.back-link:hover .back-label { transform: translateY(-2px); }
.back-link:hover .back-bubble {
    color: var(--accent);
    border-color: var(--accent-line);
}
.back-label { transition: transform 0.2s ease; }

.case-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin-bottom: 1rem;
}

.case-hero .case-sub {
    color: var(--text-muted);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    max-width: 60ch;
    margin-bottom: 1.8rem;
}

.case-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.5rem; }

.case-banner {
    aspect-ratio: 21 / 9;
    /* Em telas grandes o banner ficava alto demais e escondia o conteúdo
       abaixo. O max-height limita essa altura (a proporção continua valendo
       nas telas menores, onde o banner já fica baixo). */
    max-height: clamp(240px, 37vh, 340px);
    border-radius: 1rem;
    border: 1px solid var(--border);
    background:
        radial-gradient(100% 120% at 0% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(100% 120% at 100% 100%, rgba(129, 140, 248, 0.16), transparent 55%),
        var(--thumb-bg);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.case-banner img { width: 100%; height: 100%; object-fit: cover; }

.case-banner .banner-glyph {
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: rgba(230, 236, 245, 0.55);
}

.case-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.case-content h2 {
    font-size: 1.5rem;
    margin: 2.4rem 0 0.9rem;
}

.case-content h2:first-child { margin-top: 0; }

.case-content p,
.case-content li {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 0.9rem;
}

.case-content ul { display: grid; gap: 0.5rem; margin: 0.5rem 0 1.4rem; }

.case-content ul li {
    position: relative;
    padding-left: 1.3rem;
    margin-bottom: 0;
}

.case-content ul li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--accent);
}

.case-content strong { color: var(--text); }

/* Galeria de screenshots */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1rem 0 1.4rem;
}

.gallery figure {
    aspect-ratio: 16 / 10;
    border-radius: 0.7rem;
    border: 1px solid var(--border);
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(56, 189, 248, 0.12), transparent 55%),
        var(--thumb-bg);
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.gallery figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

/* leve animação ao passar o mouse (só em telas com hover): a moldura sobe um
   pouco e ganha borda/realce, e a imagem dá um zoom suave clipado pela borda. */
@media (hover: hover) {
    .gallery figure:hover {
        transform: translateY(-3px);
        border-color: rgba(56, 189, 248, 0.55);
        box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.6),
                    0 0 16px -1px rgba(56, 189, 248, 0.28);
    }
    .gallery figure:hover img { transform: scale(1.06); }
}

.gallery .ph {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* ---- Lightbox (janela ampliada das screenshots) ---- */
.gallery figure {
    cursor: zoom-in;
    -webkit-touch-callout: none;            /* iOS: sem menu de "abrir/copiar/baixar" */
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;                    /* permite rolar a página; o "segurar" é nosso */
}
.gallery figure img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vmin;
    background: rgba(6, 10, 20, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.45s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }

.lightbox-frame {
    position: relative;
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    padding: 10px;
    border-radius: 16px;
    /* borda em gradiente ciano→índigo (padding-box + border-box) */
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(125deg, #38BDF8, #818CF8) border-box;
    box-shadow:
        0 40px 90px -24px rgba(0, 0, 0, 0.8),
        0 0 42px -6px rgba(56, 189, 248, 0.30);
    transform: translateY(34px) scale(0.88);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(.18, .89, .32, 1.08), opacity 0.4s ease;
}
.lightbox.open .lightbox-frame { transform: translateY(0) scale(1); opacity: 1; }

.lightbox-frame img {
    display: block;
    max-width: 100%;
    max-height: calc(88vh - 20px);
    border-radius: 9px;
    -webkit-user-drag: none;
}
/* durante o "espiar" (segurar a miniatura) o menu nativo fica bloqueado também
   na imagem ampliada; já com a imagem aberta por TOQUE, o menu é permitido */
.lightbox.peeking .lightbox-frame img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.lightbox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.lightbox-close:hover { transform: scale(1.08); color: var(--accent); }
.lightbox-close .icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
    .lightbox, .lightbox-frame { transition: opacity 0.15s ease, visibility 0.15s ease; }
    .lightbox-frame { transform: none; }
}

/* Sidebar do estudo de caso */
.case-aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.6rem;
}

/* ações da sidebar (Ver projeto / Ver código) — empilhadas no rodapé no desktop */
.aside-actions { display: flex; flex-direction: column; gap: 0.7rem; }
.aside-actions .cta-short { display: none; }

.case-aside h3 {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 1.2rem;
    font-weight: 500;
}

.case-aside .meta-block { margin-bottom: 1.4rem; }
.case-aside .meta-block:last-of-type { margin-bottom: 1.6rem; }

.case-aside .meta-label {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}

.case-aside .meta-val {
    color: var(--text);
    font-size: 0.92rem;
    overflow-wrap: break-word;   /* quebra a palavra antes de invadir as tecnologias */
    hyphens: auto;
}

.case-aside .badges { margin-top: 0.2rem; }

/* ============================================================
   PÁGINA "OBRIGADO"
   ============================================================ */
.thanks {
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem;
}

.thanks .term-mark {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}

.thanks h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin-bottom: 1rem; }
.thanks p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2.2rem; }

/* ============================================================
   ANIMAÇÕES — entrada / scroll reveal
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero anima na carga da página */
.hero-content > * {
    opacity: 0;
    animation: fadeUp 0.8s ease both;
}
.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.hero-content > *:nth-child(3) { animation-delay: 0.25s; }
.hero-content > *:nth-child(4) { animation-delay: 0.35s; }
.hero-content > *:nth-child(5) { animation-delay: 0.45s; }
.hero-content > *:nth-child(6) { animation-delay: 0.55s; }

.hero-visual {
    opacity: 0;
    animation: fadeUp 1s ease 0.35s both;
}

/* Hero das páginas de projeto anima na carga — mesma fadeUp do index,
   escalonada: voltar, eyebrow, título, descrição, botões e banner. */
.case-hero .container > * {
    opacity: 0;
    animation: fadeUp 0.8s ease both;
}
.case-hero .container > *:nth-child(1) { animation-delay: 0.05s; }
.case-hero .container > *:nth-child(2) { animation-delay: 0.15s; }
.case-hero .container > *:nth-child(3) { animation-delay: 0.25s; }
.case-hero .container > *:nth-child(4) { animation-delay: 0.35s; }
.case-hero .container > *:nth-child(5) { animation-delay: 0.45s; }
.case-hero .container > *:nth-child(6) { animation-delay: 0.55s; }

/* Reveal no scroll (classe .reveal adicionada via JS) */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   ACESSIBILIDADE — foco visível e movimento reduzido
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero-content > *, .hero-visual { opacity: 1; }
    .case-hero .container > * { opacity: 1; }
    .status-dot { animation: none; }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 3px solid var(--bg);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
html { scrollbar-color: var(--scrollbar-thumb) var(--bg); }

/* ============================================================
   BARRA DE PROGRESSO DE LEITURA (topo)
   Usa --gradient e --particle-rgb → acompanha tema claro/escuro.
   ============================================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--gradient);
    box-shadow: 0 0 10px rgba(var(--particle-rgb), 0.45);
    z-index: 1001;   /* acima do header (1000) */
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress { transition: none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Tablet / desktop pequeno */
@media (max-width: 980px) {
    .nav { display: none; }            /* vira menu mobile */
    .menu-toggle { display: grid; }

    /* Menu mobile: dropdown deslizante a partir do header */
    .nav.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        position: absolute;
        top: var(--header-h);
        right: clamp(1.25rem, 5vw, 2.5rem);
        left: clamp(1.25rem, 5vw, 2.5rem);
        background: var(--menu-bg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid var(--border-strong);
        border-radius: 0.9rem;
        padding: 0.8rem;
        box-shadow: var(--shadow-card);
    }

    .nav.open a { padding: 0.85rem 1rem; }

    .hero .container { grid-template-columns: 1fr; gap: 2.5rem; }
    /* mobile: nome/descrição/botões ACIMA do terminal (ordem natural do DOM) */
    .hero-visual { max-width: 30rem; }

    .about-grid,
    .contact-grid,
    .split { grid-template-columns: 1fr; }

    /* Contato empilhado: "dissolve" o .contact-info (display:contents) pra que
       canais e card LeetCode participem direto do grid, e reordena os blocos.
       Ordem no mobile: canais → formulário → LeetCode → linguagens → contribuições */
    .contact-info { display: contents; }
    .contact-channels { order: 1; }
    .contact-form     { order: 2; }
    .leetcode-card    { order: 3; }
    .github-langs     { order: 4; }
    .github-contrib   { order: 5; }

    /* empilhado: o separador horizontal cuida da divisão entre as seções */
    .split { row-gap: 0; }
    .tl-divider { display: block; }
    .tl-divider + .col-title--gap { margin-top: 0; }

    /* card "// em números" ocupa a largura toda → estatísticas em 2x2 */
    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .about-card { padding: 1.2rem; }
    /* empilha número em cima e rótulo embaixo: o rótulo passa a usar a largura
       inteira da caixa e o texto quebra em palavras inteiras
       (resolve o "experiênci a" / "certificaçõ es" em telas estreitas) */
    .about-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        padding: 0.75rem 0.85rem;
    }
    .about-stat .num { font-size: clamp(1.5rem, 7vw, 1.9rem); }
    .about-stat .label { font-size: clamp(0.72rem, 3.2vw, 0.85rem); line-height: 1.25; }

    .case-layout { grid-template-columns: 1fr; }
    .case-aside { position: static; }
}

/* Telas médias */
@media (max-width: 760px) {
    /* carrossel: volta a 2 colunas no mobile (como o index) */
    .proj-carousel .projects-grid { grid-template-columns: repeat(2, 1fr); }
    /* a galeria de screenshots continua 2x2 também no mobile (era 1 coluna);
       só aperta um pouco o espaçamento nessas telas */
    .gallery { gap: 0.7rem; }

    /* Some o botão "Baixar CV" do header no mobile (já está no hero) */
    .header-actions .btn { display: none; }

    /* aside: no mobile os botões "Ver projeto / Ver código" saem do rodapé e
       vão pro canto superior direito do cartão "// detalhes". Uso GRID (sem
       position) p/ não sobrepor o rodapé: a coluna esquerda leva os detalhes
       e a direita leva as ações no topo. */
    .case-aside {
        display: grid;
        grid-template-columns: 1fr 130px;
        column-gap: 0.9rem;
        align-content: start;
        align-items: start;
    }
    .case-aside > * { min-width: 0; }
    .case-aside > h3 { grid-column: 1; grid-row: 1; }
    .case-aside > .meta-block { grid-column: 1; }                          /* categoria, ano, papel à esquerda */
    .case-aside > .meta-block:has(.badges) {
        grid-column: 2;
        grid-row: 3 / span 2;   /* tecnologias ao lado de ano+papel */
        align-self: start;
    }
    .case-aside > .meta-block:has(.badges) .badge {
        font-size: 0.72rem;
        padding: 0.18rem 0.45rem;   /* badges compactas: cabem em menos linhas */
    }
    .case-aside > .aside-actions {
        grid-column: 2;
        grid-row: 1 / span 2;   /* botões no topo, ao lado de "// detalhes" */
        align-self: start;
        width: 100%;
        gap: 0.6rem;
    }
    .aside-actions .btn {
        padding: 0.5rem 0.5rem;
        font-size: 0.8rem;
        gap: 0.35rem;
        border-radius: 0.55rem;
    }
    .aside-actions .cta-full { display: none; }
    .aside-actions .cta-short { display: inline; }

    /* (1) localização à direita dos ícones sociais (poupa espaço vertical) */
    .hero-meta { flex-wrap: nowrap; gap: 0.7rem; }
    .hero-meta .social-links { gap: 0.45rem; }
    .hero-meta .social-links a { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
    .hero-meta .meta-text { text-align: left; font-size: 0.72rem; line-height: 1.4; }
}

/* Mobile */
@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
    /* certificações continuam 2 por linha no mobile (N×2) p/ reduzir a altura;
       apertamos padding/fonte pra o texto caber sem espremer */
    .cert-list { gap: 0.55rem; }
    .cert-item { padding: 0.65rem 0.7rem; gap: 0.5rem; }
    .cert-item .cert-name { font-size: 0.8rem; line-height: 1.25; overflow-wrap: break-word; }
    .cert-item .cert-by { font-size: 0.7rem; }

    /* tecnologias em 2 colunas no celular: aperta gap, padding dos cards e os
       badges (fonte/padding/ícone menores) p/ caberem sem espremer */
    .tech-groups { gap: 0.6rem; }
    .tech-group { padding: 0.9rem 0.85rem; }
    .tech-group h3 { font-size: 0.82rem; margin-bottom: 0.8rem; gap: 0.5rem; }
    .tech-group .badges { gap: 0.4rem; }
    .tech-group .badge { font-size: 0.72rem; padding: 0.32rem 0.5rem; gap: 0.35rem; }

    /* hero: "Ver projetos" sozinho em cima (linha inteira) e
       "Entrar em contato" + "Baixar CV" lado a lado embaixo */
    .hero-cta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.7rem;
        width: 100%;
    }
    .hero-cta .btn {
        flex: none;
        font-size: 0.85rem;
        padding: 0.8rem 0.7rem;
        gap: 0.45rem;
        white-space: normal;     /* rede de segurança: quebra em vez de vazar */
        line-height: 1.2;
        text-align: center;
    }
    .hero-cta .btn--primary {
        grid-column: 1 / -1;
        justify-self: center;
        width: 55%;
        min-width: 160px;
    }
    .btn--cv .cv-full { display: none; }
    .btn--cv .cv-short { display: inline; }
    .project-actions { flex-direction: column; }
    .case-actions { flex-wrap: nowrap; gap: 0.6rem; }
    .case-actions .btn { flex: 1; min-width: 0; padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* ============================================================
   "Projetos em destaque" no mobile (só a home, .projects-grid).
   Mantém 2 por linha (N×2). Como os cards são grandes, esconde os
   botões "Código / Ver projeto" — o card inteiro continua clicável
   (link esticado leva ao estudo de caso). Aperta capa/corpo p/ caber.
   ============================================================ */
@media (max-width: 600px) {
    .projects-grid { gap: 0.7rem; }
    .projects-grid .project-actions { display: none; }
    .projects-grid .project-thumb { height: 104px; }
    .projects-grid .project-body { padding: 0.85rem 0.9rem; }
    .projects-grid .project-body h3 { font-size: 1rem; margin-bottom: 0.4rem; }
    .projects-grid .project-body p {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0.6rem;
    }
    .projects-grid .project-tags { margin-bottom: 0; }
    .projects-grid .project-tags span { font-size: 0.68rem; padding: 0.22rem 0.5rem; }
}

/* ============================================================
   Página "todos os projetos" (.projects-stack) no mobile (<640px,
   onde os cards são verticais). Mesmo tratamento da home: 2 por
   linha (N×2) e sem os botões "Código / Ver projeto" — o card
   inteiro continua clicável (link esticado). Acima de 640px o
   layout horizontal do desktop fica intocado.
   ============================================================ */
@media (max-width: 639px) {
    .projects-stack {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
    }
    .projects-stack .project-actions { display: none; }
    .projects-stack .project-thumb { aspect-ratio: auto; height: 104px; }
    .projects-stack .project-body { padding: 0.85rem 0.9rem; }
    .projects-stack .project-body h3 { font-size: 1rem; margin-bottom: 0.4rem; }
    .projects-stack .project-body p {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0.6rem;
    }
    .projects-stack .project-tags { margin-bottom: 0; }
    .projects-stack .project-tags span { font-size: 0.68rem; padding: 0.22rem 0.5rem; }
}

/* ============================================================
   "Vamos conversar" no mobile: cards de canal minimalistas —
   só o ícone, sem texto, em 1 linha de 3 acima do formulário.
   O card de localização é escondido. Desktop intocado.
   ============================================================ */
@media (max-width: 600px) {
    .contact-channels { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
    .channel--loc { display: none; }                  /* esconde localização no mobile */
    .channel {
        justify-content: center;                      /* só o ícone, centralizado */
        gap: 0;
        padding: 0.7rem;
    }
    .channel .ch-icon {                               /* ícone "solto": sem a caixinha */
        width: auto;
        height: auto;
        background: none;
        border-radius: 0;
        font-size: 1.25rem;
    }
    .channel br,
    .channel .ch-value,
    .channel .ch-label { display: none; }             /* sem textos: o card é o ícone */
}