/* =================================================================
   estilo.css — Design System do portfólio
   Estilo: Editorial Minimalista + atmosfera "Reflect" (dark, glow,
   microinterações suaves). Modo B (PHP puro, zero build).
   Cores: near-black azulado (base) + amber #F5A623 (acento)
   Fontes: Inter (auto-hospedada em assets/fonts — sem Google Fonts)
   ================================================================= */

/* ---------- FONTE INTER (auto-hospedada) ----------
   Subset "latin" (cobre o português). font-display:swap = o texto aparece
   na hora com a fonte de sistema e troca para a Inter sem travar o render.
   Sem requisição externa (melhor performance + privacidade/LGPD). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-latin-800-normal.woff2') format('woff2'); }

/* ---------- TOKENS (variáveis em HSL) ----------
   Dark por padrão: canvas quase-preto com leve viés azul (herança navy).
   Superfícies "vidro" usam o foreground com baixa opacidade para bordas
   finas, no espírito do reflect.app. */
:root {
    /* Canvas e superfícies */
    --background:    222 44% 5%;    /* near-black azulado */
    --background-2:  220 40% 7%;    /* faixas alternadas */
    --surface:       218 34% 9%;    /* cartões / superfícies de vidro */
    --surface-2:     216 30% 13%;   /* hover / preenchimentos sutis */
    --foreground:    210 30% 97%;   /* texto principal (quase branco) */
    --muted:         214 16% 68%;   /* texto secundário */
    --muted-2:       214 12% 50%;   /* texto terciário */

    /* Bordas e véus translúcidos (estética reflect: hairlines de luz) */
    --linha:         210 30% 97% / 0.08;   /* borda padrão */
    --linha-forte:   210 30% 97% / 0.14;   /* borda em hover/foco */
    --vidro:         218 34% 9% / 0.6;      /* fundo de vidro */

    /* Acento amber */
    --primary:        37 96% 58%;   /* #F5A623 amber */
    --primary-hover:  37 96% 64%;
    --primary-foreground: 222 44% 6%;       /* texto sobre o amber */
    --primary-glow:   37 96% 58% / 0.18;

    /* Glow ambiente do hero (frio, no estilo reflect) */
    --glow-a: 218 90% 60% / 0.22;   /* azul */
    --glow-b: 268 80% 62% / 0.16;   /* violeta */

    /* Estados */
    --success:       150 55% 48%;
    --warning:        37 96% 58%;
    --destructive:     0 72% 58%;

    /* Raio e sombra */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --sombra-card:  0 1px 0 hsl(210 30% 97% / 0.04) inset, 0 20px 40px -24px hsl(222 60% 2% / 0.8);
    --sombra-forte: 0 40px 90px -30px hsl(222 60% 1% / 0.85);

    /* Largura máxima de conteúdo */
    --container: 1180px;

    /* Curvas de animação */
    --ease-suave: cubic-bezier(.22, .61, .36, 1);
    --ease-saida: cubic-bezier(.4, 0, .2, 1);

    /* Marquee "Websites Institucionais" + grade Projetos (AJUSTE AQUI) */
    --pf-velocidade: 45s;      /* VELOCIDADE do marquee (.hero-pf__cartao--h); maior = mais lento */
    --pf-hero-passo: 4.5s;     /* VELOCIDADE do carrossel do hero (.hero-pf__cartao): segundos por card; maior = mais lento */
    --pf-card-largura: 420px;  /* largura do card paisagem (.hero-pf__cartao--h) */
    --pf-card-altura: 240px;   /* altura do card paisagem */
    --pf-gap: 24px;            /* espaçamento entre cards, entre faixas e na grade Projetos */

    /* Fontes: Inter em tudo, com pesos diferentes por papel.
       Fallback para a stack de sistema caso o Google Fonts falhe. */
    --fonte-sistema: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fonte-display: "Inter", var(--fonte-sistema);  /* títulos: peso 700/800 */
    --fonte-ui:      "Inter", var(--fonte-sistema);  /* UI: peso 500/600 */
    --fonte-corpo:   "Inter", var(--fonte-sistema);  /* corpo: peso 400 */
}

/* Tema claro opcional (<html class="light">) */
.light {
    --background:    210 40% 98%;
    --background-2:  210 36% 96%;
    --surface:       0 0% 100%;
    --surface-2:     210 30% 95%;
    --foreground:    218 44% 11%;
    --muted:         214 16% 36%;
    --muted-2:       214 12% 48%;
    --linha:         218 30% 12% / 0.1;
    --linha-forte:   218 30% 12% / 0.18;
    --vidro:         0 0% 100% / 0.7;
    --primary-foreground: 0 0% 100%;
    --glow-a: 218 90% 60% / 0.12;
    --glow-b: 268 80% 62% / 0.08;
    --sombra-card: 0 1px 0 hsl(0 0% 100% / 0.6) inset, 0 18px 40px -26px hsl(218 40% 30% / 0.3);
    --sombra-forte: 0 30px 70px -32px hsl(218 40% 30% / 0.35);
}

/* ---------- RESET LEVE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--fonte-corpo);
    font-size: 17px;
    line-height: 1.65;
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: hsl(var(--primary) / 0.85); color: hsl(var(--primary-foreground)); }

/* Foco acessível e consistente em tudo que é interativo */
:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- ATMOSFERA (glow ambiente estilo reflect) ----------
   Camada fixa atrás de tudo: dois orbs de luz fria + leve grão. */
.atmosfera {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(60% 50% at 50% -8%, hsl(var(--glow-a)), transparent 70%),
        radial-gradient(45% 40% at 85% 0%, hsl(var(--glow-b)), transparent 70%);
}
/* Grão sutil sobre o glow para não "estourar" o gradiente */
.atmosfera::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---------- LAYOUT ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 48px);
}

/* ---------- CABEÇALHO (flutuante, vidro) ---------- */
/* Barra flutuante (pílula): a faixa sticky é transparente e centraliza;
   só a .cabecalho__barra tem fundo e encaixa no conteúdo. */
.cabecalho {
    position: sticky;
    top: clamp(14px, 2vw, 24px);
    z-index: 50;
    display: flex;
    justify-content: center;
    padding-inline: 20px;
    padding-top: clamp(14px, 2vw, 24px);
    pointer-events: none;                      /* deixa o clique passar pela área transparente */
}
.cabecalho__barra {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.8vw, 20px);
    width: min(1240px, 100%);   /* barra larga (até 1240px), encolhe em telas menores */
    padding: 11px 12px 11px 24px;
    background: hsl(var(--vidro));
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid hsl(var(--linha-forte));
    border-radius: var(--radius-pill);
    box-shadow: var(--sombra-card);
}
/* Marca à esquerda; navegação + toggle agrupados à direita */
.cabecalho .nav { margin-left: auto; }

/* Botão hambúrguer — escondido no desktop, exibido no mobile */
.nav-toggle {
    display: none; flex: 0 0 auto;
    width: 40px; height: 40px; padding: 0;
    align-items: center; justify-content: center;
    border: 1px solid hsl(var(--linha-forte)); border-radius: var(--radius-pill);
    background: hsl(var(--surface-2)); color: hsl(var(--foreground)); cursor: pointer;
    transition: border-color .2s;
}
.nav-toggle:hover { border-color: hsl(var(--primary) / 0.6); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle__fechar { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__abrir { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__fechar { display: block; }

/* Toggle de tema (switch lua/sol) */
.tema {
    position: relative; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: space-between;
    width: 76px; height: 34px; padding: 0 10px;
    border: 1px solid hsl(var(--linha-forte)); border-radius: var(--radius-pill);
    background: hsl(var(--surface-2)); cursor: pointer;
    transition: border-color .2s;
}
.tema:hover { border-color: hsl(var(--primary) / 0.6); }
.tema__icone { position: relative; z-index: 1; width: 15px; height: 15px; color: hsl(var(--muted-2)); transition: color .25s; }
.tema__knob {
    position: absolute; top: 50%; left: 4px;
    width: 30px; height: 26px; transform: translateY(-50%);
    border-radius: var(--radius-pill);
    background: hsl(var(--primary));
    box-shadow: 0 2px 10px hsl(var(--primary) / 0.5);
    transition: transform .28s var(--ease-suave);
}
.tema[aria-checked="true"] .tema__knob { transform: translate(38px, -50%); }
/* ícone "ativo" fica sobre o knob, com cor de contraste */
.tema[aria-checked="false"] .tema__icone--lua,
.tema[aria-checked="true"]  .tema__icone--sol { color: hsl(var(--primary-foreground)); }
.marca { display: inline-flex; align-items: baseline; gap: 10px; transition: opacity .2s; }
.marca:hover { opacity: .85; }
.marca__nome {
    font-family: var(--fonte-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    white-space: nowrap;
}
.marca__sub {
    font-family: var(--fonte-ui);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: hsl(var(--primary));
}
.nav { display: flex; align-items: center; gap: 8px; font-family: var(--fonte-ui); font-size: 0.92rem; }
.nav a {
    color: hsl(var(--muted));
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    transition: color .2s, background-color .2s;
}
.nav a:hover { color: hsl(var(--foreground)); background: hsl(var(--surface-2)); }
.nav a.nav__cta {
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--linha-forte));
}
.nav a.nav__cta:hover { border-color: hsl(var(--primary) / 0.6); background: hsl(var(--primary-glow)); }

/* ---------- HERO ---------- */
.hero {
    padding-block: clamp(72px, 14vw, 150px) clamp(40px, 7vw, 80px);
    position: relative;
}
.hero__rotulo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--fonte-ui);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    font-weight: 500;
    color: hsl(var(--muted));
    padding: 7px 14px 7px 12px;
    border: 1px solid hsl(var(--linha));
    border-radius: var(--radius-pill);
    background: hsl(var(--surface) / 0.5);
    margin: 0 0 26px;
}
.hero__rotulo::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: hsl(var(--primary));
    box-shadow: 0 0 0 4px hsl(var(--primary-glow));
}
.hero__titulo {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    max-width: 17ch;
    margin: 0 0 26px;
    background: linear-gradient(180deg, hsl(var(--foreground)) 0%, hsl(var(--foreground) / 0.72) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero__intro {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: hsl(var(--muted));
    max-width: 54ch;
    margin: 0;
    line-height: 1.6;
}

/* ---------- TÍTULO DE SEÇÃO ---------- */
.secao-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(28px, 4vw, 44px);
    padding-bottom: 18px;
    border-bottom: 1px solid hsl(var(--linha));
}
.secao-cabecalho__titulo {
    font-family: var(--fonte-ui);
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: hsl(var(--muted));
    margin: 0;
}
.secao-cabecalho__contagem {
    font-family: var(--fonte-ui);
    font-size: 0.8rem;
    color: hsl(var(--muted-2));
    font-variant-numeric: tabular-nums;
}

/* ---------- GRADE DE PROJETOS ---------- */
.secao-projetos { padding-bottom: clamp(72px, 11vw, 130px); }
.grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: clamp(22px, 3vw, 36px);
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: hsl(var(--surface));
    border: 1px solid hsl(var(--linha));
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    transition: transform .4s var(--ease-suave), border-color .3s, box-shadow .4s;
}
/* Glow de acento que aparece no hover (atrás do conteúdo) */
.card::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(120% 80% at 50% 0%, hsl(var(--primary) / 0.5), transparent 60%);
    opacity: 0;
    transition: opacity .4s;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}
.card:hover {
    transform: translateY(-6px);
    border-color: hsl(var(--linha-forte));
    box-shadow: var(--sombra-card);
}
.card:hover::before { opacity: 1; }
.card__imagem {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: hsl(var(--surface-2));
}
.card__imagem img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease-suave);
}
.card:hover .card__imagem img { transform: scale(1.06); }
/* Seta que surge no hover, canto superior direito da imagem */
.card__seta {
    position: absolute;
    top: 14px; right: 14px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    background: hsl(var(--background) / 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid hsl(var(--linha-forte));
    color: hsl(var(--foreground));
    opacity: 0;
    transform: translateY(-6px) scale(.9);
    transition: opacity .3s, transform .3s var(--ease-suave);
}
.card:hover .card__seta { opacity: 1; transform: translateY(0) scale(1); }
.card__seta svg { width: 17px; height: 17px; }
.card__corpo { padding: 22px 24px 26px; }
.card__categoria {
    display: inline-block;
    font-family: var(--fonte-ui);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: hsl(var(--primary));
    margin-bottom: 12px;
}
.card__titulo {
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.card__cliente {
    font-family: var(--fonte-ui);
    font-size: 0.84rem;
    color: hsl(var(--muted-2));
    margin: 0 0 12px;
}
.card__desc { font-size: 0.95rem; color: hsl(var(--muted)); margin: 0; }

/* ---------- PÁGINA DE PROJETO ---------- */
.projeto { padding-block: 32px clamp(72px, 11vw, 130px); }
.voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-ui);
    font-size: 0.9rem;
    color: hsl(var(--muted));
    margin-bottom: 40px;
    padding: 8px 16px 8px 12px;
    border: 1px solid hsl(var(--linha));
    border-radius: var(--radius-pill);
    transition: color .2s, border-color .2s, transform .2s var(--ease-suave);
}
.voltar:hover { color: hsl(var(--foreground)); border-color: hsl(var(--linha-forte)); transform: translateX(-3px); }
.projeto__cabecalho { max-width: 62ch; margin-bottom: 40px; }
.projeto__categoria {
    font-family: var(--fonte-ui);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    font-weight: 500;
    color: hsl(var(--primary));
}
.projeto__titulo {
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: clamp(2.3rem, 5.5vw, 3.8rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 16px 0 12px;
}
.projeto__meta { font-family: var(--fonte-ui); color: hsl(var(--muted)); margin: 0; }
.projeto__capa {
    margin-block: 16px 60px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid hsl(var(--linha));
}
.projeto__capa img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--sombra-forte);
}
.projeto__conteudo {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 84px);
    align-items: start;
}
.projeto__texto { font-size: 1.1rem; color: hsl(var(--foreground)); line-height: 1.75; }
.projeto__texto p { margin: 0 0 1.3em; color: hsl(var(--foreground) / 0.9); }

/* Ficha técnica (campos opcionais) */
.ficha {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    padding: 10px 28px;
    background: hsl(var(--surface) / 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid hsl(var(--linha));
    border-radius: var(--radius);
}
.ficha__item { padding-block: 16px; border-bottom: 1px solid hsl(var(--linha)); }
.ficha__item:last-child { border-bottom: 0; }
.ficha__rotulo {
    display: block;
    font-family: var(--fonte-ui);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: hsl(var(--muted-2));
    margin-bottom: 7px;
}
.ficha__valor { font-size: 1rem; color: hsl(var(--foreground)); }
.ficha__item--destaque .ficha__valor {
    font-family: var(--fonte-display);
    font-size: 1.6rem;
    line-height: 1.1;
    color: hsl(var(--primary));
}

/* Botão (CTA) */
.botao {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--fonte-ui);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 13px 26px;
    border-radius: var(--radius-pill);
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s, transform .2s var(--ease-suave), box-shadow .25s;
}
.botao:hover {
    background: hsl(var(--primary-hover));
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px hsl(var(--primary) / 0.6);
}
.botao--fantasma {
    background: transparent;
    color: hsl(var(--foreground));
    border-color: hsl(var(--linha-forte));
}
.botao--fantasma:hover { background: hsl(var(--surface-2)); box-shadow: none; }
.projeto__cta { margin-top: 16px; }

/* ---------- GALERIA ---------- */
.galeria { margin-top: clamp(56px, 9vw, 96px); }
.galeria__titulo {
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: -0.025em;
    margin: 0 0 26px;
}
.galeria__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.galeria__item {
    padding: 0; margin: 0; border: 1px solid hsl(var(--linha)); cursor: pointer;
    background: hsl(var(--surface-2));
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    transition: border-color .3s, transform .3s var(--ease-suave);
}
.galeria__item:hover { border-color: hsl(var(--linha-forte)); transform: translateY(-3px); }
.galeria__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease-suave), opacity .3s;
}
.galeria__item:hover img { transform: scale(1.07); opacity: .94; }

/* ---------- LIGHTBOX ---------- */
.lightbox {
    position: fixed; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: hsl(222 60% 2% / 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 100;
    padding: 4vw;
}
.lightbox.aberto { display: flex; animation: lb-fade .25s var(--ease-suave); }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img {
    max-width: 92vw; max-height: 88vh;
    border-radius: var(--radius-sm);
    box-shadow: var(--sombra-forte);
}
.lightbox__fechar, .lightbox__nav {
    position: absolute;
    background: hsl(var(--surface) / 0.7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--linha-forte));
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s var(--ease-suave);
}
.lightbox__fechar:hover, .lightbox__nav:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transform: scale(1.06); }
.lightbox__fechar { top: 24px; right: 24px; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }

/* ---------- ESTADO VAZIO ---------- */
.vazio {
    text-align: center;
    padding: clamp(56px, 11vw, 110px) 0;
    color: hsl(var(--muted));
}
.vazio__dica { font-size: 0.95rem; color: hsl(var(--muted-2)); }
code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    background: hsl(var(--surface-2));
    border: 1px solid hsl(var(--linha));
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.88em;
}

/* ---------- RODAPÉ ---------- */
.rodape {
    border-top: 1px solid hsl(var(--linha));
    padding-block: clamp(48px, 7vw, 72px);
    margin-top: 40px;
    background: hsl(var(--background-2) / 0.4);
}
.rodape__interno {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px 48px;
    align-items: start;
}
.rodape__marca .marca__nome { font-size: 1.5rem; }
.rodape__frase { color: hsl(var(--muted)); margin: 12px 0 0; max-width: 38ch; }
.rodape__links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    font-family: var(--fonte-ui);
}
.rodape__links a {
    color: hsl(var(--muted));
    transition: color .2s, transform .2s var(--ease-suave);
}
.rodape__links a:hover { color: hsl(var(--primary)); transform: translateX(3px); }
.rodape__copy {
    grid-column: 1 / -1;
    font-size: 0.82rem;
    color: hsl(var(--muted-2));
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid hsl(var(--linha));
}

/* ---------- MICROINTERAÇÕES: SCROLL REVEAL ----------
   Elementos com [data-revelar] começam invisíveis e sobem ao entrar
   na viewport (classe .revelado adicionada por revelar.js).
   --atraso permite escalonar (stagger) os cards. */
[data-revelar] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease-suave), transform .7s var(--ease-suave);
    transition-delay: var(--atraso, 0ms);
    will-change: opacity, transform;
}
[data-revelar].revelado {
    opacity: 1;
    transform: none;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 860px) {
    .projeto__conteudo { grid-template-columns: 1fr; }
    .ficha { position: static; }
    .rodape__interno { grid-template-columns: 1fr; }
    /* Perfil: empilha foto + cartão centralizados e com a MESMA largura,
       para as bordas alinharem. Padding do cartão ajustado p/ mobile. */
    .perfil__interno { flex-direction: column; align-items: center; text-align: center; }
    .perfil__foto { width: 100%; max-width: 440px; }
    .perfil__cartao {
        flex: none; width: 100%; max-width: 440px;
        margin-left: 0; margin-top: 20px;
        padding: 30px 24px;
    }
    .perfil__sociais { justify-content: center; }
}
@media (max-width: 560px) {
    body { font-size: 16px; }
    .grade { grid-template-columns: 1fr; }
    .hero { padding-top: clamp(48px, 16vw, 90px); }

    /* Barra-pílula compacta + menu hambúrguer.
       marca à esquerda; toggle + hambúrguer à direita; a .nav vira
       um painel dropdown que abre abaixo da barra (JS: menu.js). */
    .cabecalho__barra { position: relative; gap: 8px; padding: 8px 8px 8px 14px; }
    .marca__sub { display: none; }
    .marca__nome { font-size: 1.05rem; }
    .nav-toggle { display: inline-flex; }
    .tema { margin-left: auto; }

    .nav {
        position: absolute; top: calc(100% + 12px); right: 0;
        display: flex; flex-direction: column; align-items: stretch; gap: 4px;
        min-width: 220px; margin: 0; padding: 10px;
        background: hsl(var(--surface));
        -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
        border: 1px solid hsl(var(--linha-forte)); border-radius: var(--radius);
        box-shadow: var(--sombra-forte); z-index: 60;
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .2s, transform .2s, visibility .2s;
    }
    .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav a { padding: 12px 14px; border-radius: var(--radius-sm); color: hsl(var(--foreground)); }
    .nav a:hover { background: hsl(var(--surface-2)); }
    .nav a.nav__cta {
        margin-top: 4px; border: 0; justify-content: center; text-align: center;
        background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
    }
}

/* =================================================================
   1) HERO estilo "pulse-fit" (centralizado + carrossel deslizante)
   ================================================================= */
.hero-pf { padding-block: clamp(48px, 9vw, 96px) clamp(48px, 8vw, 88px); overflow: hidden; }
.hero-pf__interno {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 0;
}
.hero-pf__badge {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--fonte-ui);
    text-transform: uppercase; letter-spacing: 0.18em;
    font-size: 0.72rem; font-weight: 500; color: hsl(var(--muted));
    padding: 7px 14px 7px 12px;
    border: 1px solid hsl(var(--linha)); border-radius: var(--radius-pill);
    background: hsl(var(--surface) / 0.5); margin: 0 0 26px;
}
.hero-pf__badge-ponto {
    width: 7px; height: 7px; border-radius: 50%;
    background: hsl(var(--primary)); box-shadow: 0 0 0 4px hsl(var(--primary-glow));
}
.hero-pf__titulo {
    font-family: var(--fonte-display); font-weight: 800;
    font-size: clamp(2.6rem, 6.8vw, 4.8rem);
    line-height: 1.04; letter-spacing: -0.04em;
    margin: 0 0 22px; max-width: 1200px;
    background: linear-gradient(180deg, hsl(var(--foreground)) 0%, hsl(var(--foreground) / 0.72) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-pf__intro {
    font-size: clamp(1.02rem, 1.8vw, 1.2rem); line-height: 1.6;
    color: hsl(var(--muted)); max-width: 1000px; margin: 0 0 32px;
}
.hero-pf__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero-pf__nota {
    margin: 22px 0 0; font-family: var(--fonte-ui); font-style: italic;
    font-size: 0.82rem; color: hsl(var(--muted-2));
}
/* Prova social: pilha de miniaturas sobrepostas + contagem */
.hero-pf__prova { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; }
.hero-pf__avatares { display: flex; }
.hero-pf__avatares img {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    border: 2px solid hsl(var(--background));
    box-shadow: 0 2px 8px hsl(222 60% 2% / 0.4);
    margin-left: -12px;
}
.hero-pf__avatares img:first-child { margin-left: 0; }
.hero-pf__prova span {
    font-family: var(--fonte-ui); font-weight: 500; font-size: 0.9rem;
    color: hsl(var(--muted));
}

/* Carrossel infinito de cartões -------------------------------------- */
.hero-pf__carrossel {
    position: relative; width: 100%; margin-top: clamp(48px, 7vw, 84px);
    /* esmaece as bordas (fade) sem precisar de overlays */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.hero-pf__trilho {
    display: flex; width: max-content;
    animation: deslizar calc(var(--qtd, 6) * var(--pf-hero-passo)) linear infinite;
}
.hero-pf__carrossel:hover .hero-pf__trilho { animation-play-state: paused; }
@keyframes deslizar { to { transform: translateX(-50%); } }

.hero-pf__cartao {
    position: relative; flex: 0 0 auto;
    width: clamp(220px, 24vw, 320px); aspect-ratio: 3 / 4;
    margin-right: clamp(14px, 1.6vw, 24px);
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid hsl(var(--linha));
    box-shadow: var(--sombra-card);
    transition: transform .35s var(--ease-suave), box-shadow .35s var(--ease-suave);
}
.hero-pf__cartao:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--sombra-forte); }
.hero-pf__cartao img { width: 100%; height: 100%; object-fit: cover; }
.hero-pf__cartao::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, hsl(222 60% 2% / 0.78) 100%);
}
.hero-pf__cartao-info {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    display: flex; flex-direction: column; gap: 4px; padding: 22px 20px 18px;
}
.hero-pf__cartao-info em {
    font-family: var(--fonte-ui); font-style: normal; font-size: 0.66rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.16em; color: hsl(var(--primary));
}
.hero-pf__cartao-info strong { font-family: var(--fonte-display); font-weight: 700; font-size: 1.18rem; color: #fff; letter-spacing: -0.01em; }

/* =================================================================
   2) CAMPANHAS — shuffle grid
   ================================================================= */
.campanhas { padding-block: clamp(56px, 9vw, 110px); }
.campanhas__interno {
    display: grid; grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(32px, 5vw, 72px); align-items: center;
}
.campanhas__lead { color: hsl(var(--muted)); margin: 14px 0 26px; max-width: 38ch; }
.shuffle {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.4vw, 16px);
}
.shuffle__item {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: var(--radius-sm); border: 1px solid hsl(var(--linha));
    background: hsl(var(--surface-2));
    will-change: transform; /* p/ a animação FLIP do embaralhar.js */
}
.shuffle__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-suave), opacity .3s; }
.shuffle__item:hover { border-color: hsl(var(--linha-forte)); z-index: 2; }
.shuffle__item:hover img { transform: scale(1.08); }

/* =================================================================
   3) WEBSITES INSTITUCIONAIS — duas faixas marquee (sentidos opostos)
   Reutiliza o MESMO card .hero-pf__cartao; o modifier --h o deixa
   paisagem (formato tela de site). Velocidade/tamanho/gap = vars --pf-*.
   ================================================================= */
.webdesign { padding-block: clamp(40px, 7vw, 80px) clamp(64px, 10vw, 120px); overflow: hidden; }

/* Card paisagem: reaproveita .hero-pf__cartao, só troca proporção/tamanho */
.hero-pf__cartao--h {
    width: var(--pf-card-largura);
    height: var(--pf-card-altura);
    aspect-ratio: auto;            /* anula o 3/4 do card padrão */
    margin-right: var(--pf-gap);   /* espaçamento entre cards = --pf-gap */
}
.hero-pf__cartao--h img { object-position: top; }  /* mostra o topo da tela do site */
/* Degradê escuro→transparente (de baixo p/ cima) na base, atrás do texto,
   p/ garantir contraste sobre screenshots claros/movimentados. */
.hero-pf__cartao--h::after {
    background: linear-gradient(to top,
        hsl(222 60% 2% / 0.92) 0%,
        hsl(222 60% 2% / 0.55) 30%,
        transparent 62%);
}

/* Marquee: duas faixas empilhadas com sentidos opostos */
.pf-marquee {
    display: flex; flex-direction: column; gap: var(--pf-gap);
    margin-top: clamp(24px, 4vw, 44px);
    overflow: hidden;
    /* fade nas bordas (igual ao carrossel do hero) */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pf-marquee__trilho { display: flex; width: max-content; }
/* duplicamos a lista no DOM (A B C A B C) e animamos 0 ↔ -50% p/ loop contínuo */
.pf-marquee__faixa--dir .pf-marquee__trilho { animation: pf-marquee-dir var(--pf-velocidade) linear infinite; }
.pf-marquee__faixa--esq .pf-marquee__trilho { animation: pf-marquee-esq var(--pf-velocidade) linear infinite; }
.pf-marquee__faixa:hover .pf-marquee__trilho { animation-play-state: paused; }
@keyframes pf-marquee-esq { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes pf-marquee-dir { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* =================================================================
   4) SISTEMAS WEB & SAAS + UX/UI — grade de telas (reusa .grade/.card)
   ================================================================= */
.sistemas { padding-top: clamp(56px, 9vw, 110px); }

/* =================================================================
   5) PERFIL — foto quadrada + cartão sobreposto
   ================================================================= */
.perfil { padding-block: clamp(56px, 9vw, 120px); }
.perfil__interno { display: flex; align-items: center; }
.perfil__foto {
    width: clamp(300px, 38vw, 470px); aspect-ratio: 1; flex-shrink: 0;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid hsl(var(--linha)); box-shadow: var(--sombra-forte);
}
.perfil__foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil__cartao {
    flex: 1; z-index: 1; margin-left: -80px;
    background: hsl(var(--surface)); border: 1px solid hsl(var(--linha-forte));
    border-radius: var(--radius); box-shadow: var(--sombra-forte);
    padding: clamp(28px, 3vw, 44px);
}
.perfil__nome {
    font-family: var(--fonte-display); font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; margin: 0 0 8px;
}
.perfil__cargo {
    font-family: var(--fonte-ui); font-size: 0.8rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.14em; color: hsl(var(--primary)); margin: 0 0 22px;
}
.perfil__bio { color: hsl(var(--muted)); margin: 0 0 28px; }
.perfil__bio p { margin: 0 0 14px; }
.perfil__bio-extra { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-suave); }
.perfil__bio-extra.is-open { max-height: 1500px; }
.perfil__bio-extra > div > p:last-child { margin-bottom: 0; }
.perfil__mais {
    margin-top: 10px; padding: 8px 18px; border-radius: var(--radius-pill);
    background: transparent; border: 1px solid hsl(var(--linha-forte));
    color: hsl(var(--foreground)); font-family: var(--fonte-ui); font-size: 0.85rem; font-weight: 500;
    cursor: pointer; transition: border-color .2s, background-color .2s;
}
.perfil__mais:hover { border-color: hsl(var(--primary) / 0.6); background: hsl(var(--primary-glow)); }
.perfil__cv { margin: 0 0 22px; }
.perfil__sociais { display: flex; gap: 12px; }
.perfil__social {
    width: 48px; height: 48px; border-radius: var(--radius-pill);
    display: grid; place-items: center;
    background: hsl(var(--foreground)); color: hsl(var(--background));
    transition: transform .2s var(--ease-suave), opacity .2s;
}
.perfil__social:hover { transform: translateY(-3px) scale(1.05); opacity: .88; }
.perfil__social svg { width: 20px; height: 20px; }

/* =================================================================
   PÁGINA "PROJETOS" — galeria masonry (CSS columns)
   ================================================================= */
.galeria-pg { padding-block: clamp(40px, 7vw, 88px); }
.galeria-pg__topo { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.galeria-pg__titulo {
    font-family: var(--fonte-display); font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.03em; margin: 0 0 12px;
}
.galeria-pg__lead { color: hsl(var(--muted)); margin: 0 0 26px; }
.galeria-pg__filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.filtro {
    font-family: var(--fonte-ui); font-size: 0.85rem; font-weight: 500;
    color: hsl(var(--muted)); padding: 8px 16px; border-radius: var(--radius-pill);
    border: 1px solid hsl(var(--linha)); transition: color .2s, border-color .2s, background-color .2s;
}
.filtro:hover { color: hsl(var(--foreground)); border-color: hsl(var(--linha-forte)); }
.filtro--ativo, .filtro--ativo:hover {
    color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); border-color: hsl(var(--primary));
}

/* .proj-card — IDÊNTICO ao card do carrossel da home (.hero-pf__cartao):
   aspecto 3:4, imagem cobrindo, overlay no rodapé (categoria + título),
   hover com lift. Layout em grade uniforme (.grade), não mais masonry. */
.proj-card {
    position: relative; aspect-ratio: 3 / 4; overflow: hidden;
    border-radius: var(--radius); border: 1px solid hsl(var(--linha));
    box-shadow: var(--sombra-card);
    transition: transform .35s var(--ease-suave), box-shadow .35s var(--ease-suave), border-color .3s;
}
.proj-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-suave); }
.proj-card:hover { transform: translateY(-8px) scale(1.02); border-color: hsl(var(--linha-forte)); box-shadow: var(--sombra-forte); }
.proj-card:hover img { transform: scale(1.05); }
.proj-card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 35%, hsl(222 60% 2% / 0.78) 100%);
}
.proj-card__info {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    display: flex; flex-direction: column; gap: 4px; padding: 22px 20px 18px;
}
.proj-card__cat {
    font-family: var(--fonte-ui); font-size: 0.66rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.16em; color: hsl(var(--primary));
}
.proj-card__titulo {
    font-family: var(--fonte-display); font-weight: 700; font-size: 1.18rem;
    color: #fff; letter-spacing: -0.01em; line-height: 1.2;
}

/* Grade da página Projetos: 4 colunas no desktop, 2 em tablet, 1 no mobile.
   Escopada em .galeria-pg p/ não afetar a .grade da home (auto-fill). */
.galeria-pg .grade { grid-template-columns: repeat(4, 1fr); gap: var(--pf-gap); }
@media (max-width: 1024px) { .galeria-pg .grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .galeria-pg .grade { grid-template-columns: 1fr; } }

/* =================================================================
   PÁGINA 404 — não encontrado (reusa tokens/tipografia)
   ================================================================= */
.erro404 { padding-block: clamp(72px, 13vw, 150px); }
.erro404__interno { text-align: center; max-width: 560px; margin-inline: auto; }
.erro404__codigo {
    font-family: var(--fonte-display); font-weight: 800; line-height: 1;
    font-size: clamp(5rem, 18vw, 11rem); letter-spacing: -0.04em; margin: 0;
    background: linear-gradient(180deg, hsl(var(--foreground)) 0%, hsl(var(--foreground) / 0.3) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.erro404__titulo {
    font-family: var(--fonte-display); font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: -0.03em; margin: 6px 0 14px;
}
.erro404__texto { color: hsl(var(--muted)); margin: 0 auto 30px; }
.erro404__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* =================================================================
   PÁGINAS DE DOCUMENTO (Política de Privacidade etc.)
   ================================================================= */
.doc { padding-block: clamp(40px, 7vw, 88px); }
.doc__interno { max-width: 760px; margin-inline: auto; }
.doc__titulo {
    font-family: var(--fonte-display); font-weight: 800;
    font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.03em; margin: 0 0 6px;
}
.doc__data { color: hsl(var(--muted-2)); font-family: var(--fonte-ui); font-size: 0.85rem; margin: 0 0 32px; }
.doc h2 {
    font-family: var(--fonte-display); font-weight: 700;
    font-size: 1.3rem; letter-spacing: -0.01em; margin: 36px 0 12px;
}
.doc p, .doc li { color: hsl(var(--muted)); line-height: 1.75; }
.doc strong { color: hsl(var(--foreground)); font-weight: 600; }
.doc a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.doc ul { padding-left: 1.2em; margin: 0 0 4px; }
.doc li { margin-bottom: 8px; }
.doc__id {
    background: hsl(var(--surface)); border: 1px solid hsl(var(--linha));
    border-radius: var(--radius-sm); padding: 20px 22px; margin: 4px 0;
}
.doc__id dt {
    font-family: var(--fonte-ui); font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.12em; color: hsl(var(--muted-2)); margin-top: 12px;
}
.doc__id dt:first-child { margin-top: 0; }
.doc__id dd { margin: 2px 0 0; color: hsl(var(--foreground)); }

/* Responsivo dos blocos novos */
@media (max-width: 920px) {
    .campanhas__interno { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .hero-pf__prova { flex-direction: column; gap: 10px; }
    /* No mobile, encolhe o card paisagem do marquee p/ caber melhor */
    .hero-pf__cartao--h { --pf-card-largura: 300px; --pf-card-altura: 172px; }
}

/* Respeita quem prefere menos animação: desliga reveal e transições */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; animation: none !important; }
    [data-revelar] { opacity: 1; transform: none; }
}