:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --text: #161616;
    --muted: #5a6472;
    --line: #e6e8ec;
    /* Azul da marca, na mesma família do hero para que as seções claras
       conversem com ele em vez de puxarem para o verde do tema antigo. */
    --accent: #1f5fc4;
    --accent-2: #123a75;

    /* Faixa usada nas seções que antes alternavam com o bege. Agora é branco
       igual ao body, então não há alternância visível — mudar só este valor
       (para algo como #f7f8fa) devolve o ritmo entre seções sem tocar em
       mais nada. */
    --surface-alt: #f7f8fa;

    /* Largura máxima do conteúdo. O hero usava 1180px e as demais seções
       1280px (max-w-7xl), o que além de deixar as margens largas
       desalinhava o título do hero em relação ao logo da navbar.
       Unificado aqui: mudar este valor move as bordas do site inteiro.
       Alargar não piora a leitura porque título e parágrafo do hero têm
       largura própria (620px) — o que muda é só a margem lateral. */
    --container: 90rem;

    /* Hero escuro: amostrado da arte em assets/img/hero.png para o fundo
       do CSS emendar sem costura visível com a imagem. */
    --hero-bg: #0c1424;
    --hero-accent: #2f7dfb;
    --hero-accent-strong: #1a63e8;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* A pilula flutuante termina em 81px. 6rem (96px) deixa a secao
       respirar em vez de encostar nela ao clicar numa ancora. */
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    background: #ffffff;
    color: var(--text);
    /* `clip` e não `hidden`: com overflow-x:hidden o navegador promove o
       overflow-y computado para `auto`, e o body vira um contêiner de
       rolagem próprio — o que conflita com o Lenis, que controla a rolagem
       no nível da janela. `clip` contém o transbordo horizontal sem criar
       contêiner algum. */
    overflow-x: clip;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    position: relative;
}

body > nav,
body > section,
body > footer {
    position: relative;
    z-index: 1;
}

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

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

/* =================================================================
   Navbar em pílula flutuante

   Deixou de ser barra de largura total: agora é um bloco centralizado,
   destacado do topo, sobre o conteúdo. O estado `is-over-hero` continua
   sendo aplicado por script.js ao #site-nav; aqui ele muda o vidro de
   claro para escuro em vez de sumir com o fundo, porque uma pílula
   transparente deixaria os links soltos no ar.
   ================================================================= */
.nav-shell {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0.85rem 1rem 0;
}

.nav-pill {
    padding: 0.5rem 0.6rem 0.5rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: 0 8px 30px rgba(17, 17, 17, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted);
    transition: color 180ms ease;
}

.nav-link:hover {
    color: var(--accent);
}

.nav-cta {
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: none;
}

.nav-cta:hover {
    transform: none;
    box-shadow: none;
}

.nav-tagline {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
    transition: color 240ms ease;
}

.nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 1px solid rgba(17, 17, 17, 0.10);
    color: var(--text);
    background: transparent;
}

/* ---- Sobre o hero escuro ---- */
#site-nav.is-over-hero .nav-pill {
    background: rgba(12, 20, 36, 0.55);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

/* O !important vence a classe `hover:text-blue-700` que a normalização
   de paleta pinta com !important mais abaixo. */
#site-nav.is-over-hero .font-display,
#site-nav.is-over-hero .nav-link {
    color: #ffffff !important;
}

#site-nav.is-over-hero .nav-link:hover {
    color: var(--hero-accent) !important;
}

#site-nav.is-over-hero .nav-tagline {
    color: rgba(255, 255, 255, 0.55);
}

#site-nav.is-over-hero .nav-burger {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.24);
}

#site-nav.is-over-hero .nav-cta {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

#site-nav.is-over-hero .nav-cta:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.85);
}

/* ---- Painel mobile ----
   Card arredondado logo abaixo da pílula, em vez da faixa colada no topo. */
.nav-panel {
    margin-top: 0.6rem;
    padding: 0.6rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(17, 17, 17, 0.08);
    box-shadow: 0 12px 34px rgba(17, 17, 17, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nav-panel a {
    display: block;
    padding: 0.7rem 0.9rem;
    border-radius: 0.8rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
}

.nav-panel a:hover {
    background: #f2f4f7;
    color: var(--accent);
}

.nav-panel .nav-panel-cta {
    margin-top: 0.2rem;
    background: var(--accent);
    color: #ffffff;
    text-align: center;
}

.nav-panel .nav-panel-cta:hover {
    background: var(--accent-2);
    color: #ffffff;
}

.hero-gradient {
    position: relative;
    min-height: 100vh;
    background-color: var(--hero-bg);
    color: #ffffff;
}

/* Camada da arte de fundo. Fica em ::before (e não em background-image na
   própria seção) para que o degradê de legibilidade seja empilhado por cima
   sem depender da ordem de background-layers. */
.hero-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../img/hero.jpg');
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Escurece o lado esquerdo para garantir contraste do texto sobre a arte,
   qualquer que seja a largura da viewport. */
.hero-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(12, 20, 36, 0.94) 0%,
        rgba(12, 20, 36, 0.82) 34%,
        rgba(12, 20, 36, 0.35) 56%,
        rgba(12, 20, 36, 0) 76%
    );
    pointer-events: none;
}

.hero-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 7rem 2rem 4rem;
}

/* O container do Tailwind usado por todas as outras seções e pela navbar,
   trazido para a mesma medida do hero. Precisa de !important porque o
   Tailwind por CDN injeta seu <style> em tempo de execução, e sem isso a
   ordem da cascata deixa de ser previsível. */
.max-w-7xl {
    max-width: var(--container) !important;
}

/* Mais largo que o título/parágrafo de propósito: a faixa de métricas
   precisa de espaço para caber em duas linhas, como no layout. */
.hero-content {
    max-width: 780px;
}

.hero-title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(2.3rem, 4.4vw, 4.2rem);
    line-height: 1.06;
    font-weight: 600;
    max-width: 620px;
    margin: 0 0 1.2rem;
    letter-spacing: -0.04em;
    color: #ffffff;
}

.hero-title .accent {
    color: var(--hero-accent);
    /* A Sora é larga: sem isto a quebra cai no meio do destaque
       ("vende / de verdade"). Mesmo no celular a frase cabe numa linha. */
    white-space: nowrap;
}

.hero-copy {
    max-width: 620px;
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.74);
    margin: 0 0 1.7rem;
}

.hero-copy strong {
    color: #ffffff;
    font-weight: 600;
}

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

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-radius: 999px;
    font-weight: 600;
    transition: 180ms ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(31, 95, 196, 0.18);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(31, 95, 196, 0.24);
}

.btn-secondary {
    border: 1px solid rgba(31, 95, 196, 0.20);
    background: rgba(255, 255, 255, 0.9);
    color: var(--accent);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    border-color: rgba(31, 95, 196, 0.32);
    background: #ffffff;
}

/* ---- Botões dentro do hero escuro ----
   Escopados em .hero-gradient: o resto do site usa o par claro padrão.
   Forma no estilo Apple: pílula completa, sem sombra colorida, sem
   deslocamento no hover e peso 500 — a mudança de estado é só de cor. */
.hero-gradient .btn-primary,
.hero-gradient .btn-secondary {
    padding: 0.72rem 1.4rem;
    border-radius: 980px;
    font-weight: 500;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
}

/* O primário é preenchido: é o botão que gera contato, e com os dois
   transparentes lado a lado ele não se destacava. Usa o azul forte e não
   o --hero-accent porque branco sobre #2f7dfb fica em 3,9:1, abaixo do
   mínimo de 4,5:1 para texto desse tamanho; sobre #1a63e8 fica em 5,3:1. */
.hero-gradient .btn-primary,
#ia .btn-primary,
#cta .btn-primary {
    background: var(--hero-accent-strong);
    border: 1px solid var(--hero-accent-strong);
    color: #ffffff;
    box-shadow: none;
}

/* #1c6bfa: um passo mais claro, ainda acima de 4,5:1 com o branco. */
.hero-gradient .btn-primary:hover,
#ia .btn-primary:hover,
#cta .btn-primary:hover {
    background: #1c6bfa;
    border-color: #1c6bfa;
    box-shadow: none;
    transform: none;
}

.hero-gradient .btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.26);
    color: #ffffff;
}

.hero-gradient .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.50);
    transform: none;
}

/* ---- Faixa de métricas ---- */
.hero-metrics {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 2.6rem 0 0;
    max-width: 780px;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1 1 0;
    min-width: 190px;
    padding: 0.3rem 1.4rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.metric-card:first-child {
    padding-left: 0;
    border-left: 0;
}

.metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    background: rgba(47, 125, 251, 0.14);
    border: 1px solid rgba(47, 125, 251, 0.28);
    color: var(--hero-accent);
}

.metric-text {
    display: block;
    min-width: 0;
}

.metric-card strong {
    display: block;
    font-size: 0.98rem;
    color: #ffffff;
    margin-bottom: 0.15rem;
}

.metric-card .metric-text span {
    display: block;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.86rem;
    line-height: 1.4;
}

.project-card,
.glass-card {
    background: var(--surface);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 1.3rem;
    box-shadow: 0 15px 35px rgba(17, 17, 17, 0.04);
}

.card-hover {
    transition: 220ms ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(17, 17, 17, 0.08);
}



/* Os estados iniciais invisíveis abaixo dependem de JS para serem revertidos.
   Por isso ficam atrás da classe `js` (adicionada no <head>, removida em
   script.js quando o GSAP não carrega ou o usuário pede menos movimento):
   sem essa trava, um CDN fora do ar deixaria metade da página invisível. */
.js .scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
}

.gradient-text {
    color: var(--accent);
}

.text-gray-400,
.text-gray-300,
.text-gray-500,
.text-gray-200,
.text-white {
    color: var(--muted) !important;
}

/* bg-blue/purple/cyan-500/20 e border-blue/purple/cyan-500/* foram removidos
   destas duas listas: são redeclarados mais abaixo com a cor da paleta, que
   vence por ordem de cascata. Aqui eram regras mortas. */
.bg-white\/5,
.bg-green-500\/20,
.bg-pink-500\/20,
.bg-dark-900,
.bg-dark-800,
.bg-dark-700,
.bg-dark-600 {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.border-white\/5,
.border-white\/10,
.border-white\/20,
.border-pink-500\/20 {
    border-color: rgba(17, 17, 17, 0.08) !important;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #eceef2;
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-2);
}

/* =================================================================
   Normalização de paleta

   O HTML veio de um tema escuro e carrega classes de sete matizes
   (blue, purple, cyan, pink, green, yellow, orange). A config do
   Tailwind remapeia só três delas; as outras renderizavam nas cores
   cruas da biblioteca — daí o rosa-choque nos cards de projeto e o
   acento diferente em cada seção.

   Aqui tudo que é decorativo converge para o azul da marca. Só
   permanecem distintas as cores que carregam informação: problema,
   solução e resultado.
   ================================================================= */

.text-blue-400, .text-blue-300, .text-blue-700, .hover\:text-blue-700,
.text-purple-400, .text-purple-300,
.text-cyan-400, .text-cyan-300,
.text-pink-400, .text-pink-300,
.text-yellow-400, .text-yellow-300,
.text-orange-400, .text-orange-300,
.text-green-400, .text-green-300 {
    color: var(--accent) !important;
}

/* Sem exceção: todo acento decorativo, inclusive o rótulo "PROBLEMA"
   dos cards de projeto, usa o azul da marca. */
.text-red-400, .text-red-300 {
    color: var(--accent) !important;
}

/* Ladrilhos de ícone: uma única lavagem azul no lugar de sete.
   Seletor de atributo em vez de classe escapada porque a barra de
   `bg-blue-500/20` exigiria escapar cada variação de opacidade. */
[class*="bg-blue-500/"],
[class*="bg-purple-500/"],
[class*="bg-cyan-500/"],
[class*="bg-pink-500/"],
[class*="bg-green-500/"],
[class*="bg-yellow-500/"],
[class*="bg-orange-500/"] {
    background-color: rgba(31, 95, 196, 0.10) !important;
}

[class*="border-blue-500/"],
[class*="border-purple-500/"],
[class*="border-cyan-500/"],
[class*="border-pink-500/"],
[class*="border-yellow-500/"],
[class*="border-green-500/"] {
    border-color: rgba(31, 95, 196, 0.20) !important;
}

/* =================================================================
   Ritmo das seções

   Antes a sequência era bege, bege, cinza, cinza, bege, oliva,
   cinza — sem alternância e com emendas duras. Hoje todas as seções
   claras são brancas, com hero, IA e CTA em navy quebrando a página.
   
   ================================================================= */
#processo,
#projetos,
#contato {
    background: var(--surface-alt);
}

/* Redundante desde que o body virou branco, mas mantida como ponto de
   ajuste: se algum dia as seções voltarem a alternar de cor, esta é a
   única que precisa continuar branca por causa das artes dos cards. */
#sobre {
    background: #ffffff;
}

/* =================================================================
   Alinhamento dos cards

   Os cards têm textos de comprimentos diferentes, então a linha de
   benefício (serviços) e a fila de tags (projetos) paravam em alturas
   distintas, deixando a grade visualmente irregular. Distribuir o
   conteúdo em coluna e empurrar o último bloco com margin-top:auto
   encosta esses elementos na base de todos.
   ================================================================= */
#servicos .grid > div,
.projects-track > div {
    display: flex;
    flex-direction: column;
}

#servicos .grid > div > div:last-child {
    margin-top: auto;
    padding-top: 0.5rem;
}

.projects-track > div > div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.projects-track > div .flex.flex-wrap {
    margin-top: auto;
}

/* =================================================================
   Galeria horizontal de projetos

   Sem a classe `hscroll` (JS off, GSAP fora do ar, motion reduzido)
   a trilha é uma grade vertical normal — os cinco cards continuam
   acessíveis. O modo horizontal só entra quando há script para
   movê-lo, senão os dois últimos ficariam presos fora da tela.
   ================================================================= */
.projects-track {
    display: grid;
    gap: 2rem;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .projects-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .projects-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0 2rem;
    }

    .hscroll .projects-viewport {
        overflow: hidden;
    }

    .hscroll .projects-track {
        display: flex;
        width: max-content;
        max-width: none;
        margin: 0;
        gap: 2rem;
        /* Alinha o primeiro card com a margem do container centralizado. */
        padding: 0 max(2rem, calc((100vw - var(--container)) / 2 + 2rem));
        will-change: transform;
    }

    .hscroll .projects-track > div {
        flex: 0 0 380px;
    }
}

/* Capas dos cards de projeto: uma única faixa navy no lugar de cinco
   gradientes distintos (havia magenta e verde puros do Tailwind). */
.project-cover {
    background: linear-gradient(135deg, #10294f 0%, var(--accent) 100%);
}

/* A capa tem altura fixa (h-48); object-fit evita que as artes distorçam.
   O leve zoom no hover substitui o `group-hover:scale-110` que existia no
   ícone antes de as imagens entrarem. */
.project-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.group:hover .project-cover img {
    transform: scale(1.06);
}

/* As tags herdavam fundo e texto da mesma matiz, ficando ilegíveis
   nos cards rosa e verde. */
.projects-track .flex.flex-wrap > span {
    background-color: rgba(31, 95, 196, 0.10) !important;
    color: var(--accent) !important;
}

/* =================================================================
   Seção de processo

   Era um grid de duas colunas: card de etapas à esquerda, três cards
   à direita. As artes que substituíram os três cards são faixas de
   4,5:1 — na coluna estreita renderizariam a 41% do tamanho original
   e o texto embutido nelas ficaria ilegível. Por isso a seção virou
   uma coluna só, com as faixas em largura total.
   ================================================================= */

@media (min-width: 768px) {
    /* Em largura total as quatro etapas empilhadas deixariam linhas
       longas demais; em duas colunas a medida volta ao confortável. */
}

.process-banners {
    display: grid;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
}

.process-banners img {
    width: 100%;
    height: auto;
    aspect-ratio: 1535 / 341;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
}

/* =================================================================
   Lenis — rolagem com inércia

   Regras exigidas pela lib. A classe `lenis` é aplicada ao <html>
   pela própria biblioteca quando ela assume a rolagem; enquanto isso
   não acontece (JS off, motion reduzido) nada aqui tem efeito e o
   scroll nativo continua valendo.
   ================================================================= */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* O scroll suave nativo briga com o do Lenis: os dois tentam animar
   a mesma rolagem e o resultado trava. Quando o Lenis está no
   comando, o nativo sai. */
html.lenis {
    scroll-behavior: auto;
}

/* =================================================================
   Escala tipográfica das seções

   Os títulos internos ficaram pequenos perto do hero, que agora usa
   clamp até 4.4rem. Isto aproxima os dois sem mexer no HTML.
   ================================================================= */
/* `balance` distribui as palavras entre as linhas. Sem ele a Sora, que é
   larga, deixava uma palavra sozinha na segunda linha ("negócio",
   "reais", "Solutions"). */
section h2,
section h2.font-display {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    line-height: 1.14;
    letter-spacing: -0.035em;
    text-wrap: balance;
    margin: 0 0 1rem;
}

/* Cabeçalho comum a todas as seções: rótulo, título e linha de apoio,
   centralizados. Antes Sobre, IA e Contato tinham o título dentro da
   coluna de texto, alinhado à esquerda, enquanto as demais já eram
   centralizadas — três tratamentos diferentes para a mesma coisa. */
.section-head {
    max-width: 52rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.section-kicker {
    display: inline-block;
    margin-bottom: 1.1rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(31, 95, 196, 0.10);
    border: 1px solid rgba(31, 95, 196, 0.22);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-head p,
.section-lead {
    margin: 0 auto;
    max-width: 42rem;
    font-size: 1.05rem;
    color: var(--muted);
}

/* Na faixa navy o rótulo precisa do azul claro do hero para ter contraste. */
#ia .section-kicker {
    background: rgba(47, 125, 251, 0.14);
    border-color: rgba(47, 125, 251, 0.32);
    color: var(--hero-accent);
}

#ia .section-head h2 {
    color: #ffffff;
}

/* =================================================================
   Cards em imagem da seção Sobre

   As quatro artes já trazem fundo, cantos arredondados e texto próprios,
   então não vão dentro de um painel: seria card sobre card. A proporção
   fixa e o object-fit garantem que as quatro ocupem exatamente a mesma
   área, mesmo tendo 1px de diferença de altura entre si.
   ================================================================= */
/* O texto fica numa medida legível no centro; os cards ocupam a largura
   inteira logo abaixo. Presos na coluna estreita anterior eles renderizavam
   a 320px contra 732px do original — 44% de escala, e a descrição dentro da
   arte caía para cerca de 8px na tela. */
.about-text {
    max-width: 62rem;
    margin: 0 auto 4rem;
}

.about-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-cards img {
    width: 100%;
    height: auto;
    aspect-ratio: 732 / 538;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
}

/* Halo atrás do card da seção Sobre. Era um gradiente que caía nos
   verdes remapeados do Tailwind e puxava a seção para o oliva. */

/* =================================================================
   Seção de Inteligência Artificial

   Faixa navy, ecoando o hero. Além de destacar o diferencial, quebra o
   trecho claro longo que ia de Serviços até Projetos.

   As classes utilitárias do Tailwind não servem aqui: `text-gray-400`
   e afins são forçadas para `var(--muted)` pela normalização de paleta,
   que assume fundo claro e ficaria ilegível sobre o navy.
   ================================================================= */
#ia {
    background: var(--hero-bg);
    color: #ffffff;
}

.ia-layout {
    display: grid;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 1024px) {
    /* Três colunas: arte, argumento, cards. A arte fica estreita de
       propósito — é apoio visual, e a mão aponta para cima e para a
       direita, na direção do texto e dos cards. */
    .ia-layout {
        grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.3fr);
        gap: 3rem;
        align-items: center;
    }
}

.ia-media {
    display: flex;
    justify-content: center;
}

.ia-media img {
    width: 150px;
    height: auto;
    /* A arte é um recorte com fundo transparente; a sombra a descola do
       navy sem precisar de moldura. */
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
}

@media (min-width: 1024px) {
    .ia-media img {
        width: 100%;
        max-width: 190px;
    }
}

.ia-lead {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    margin: 0 0 2rem;
    max-width: 46ch;
}

/* Mesma forma dos botões do hero; as cores vêm da regra do primário
   preenchido, junto dos botões do hero. */
#ia .btn-primary {
    border-radius: 980px;
    padding: 0.72rem 1.4rem;
    font-weight: 500;
}

.ia-grid {
    display: grid;
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) {
    .ia-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ia-card {
    padding: 1.6rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background 220ms ease, border-color 220ms ease;
}

.ia-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(47, 125, 251, 0.45);
}

.ia-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
}

.ia-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
}

/* =================================================================
   Faixa de tecnologias

   Fica no fluxo branco, separada por um filete em vez de mudar o fundo,
   para não depender de mudança de cor de seção.

   Os logos são SVG de caminho único aplicados como máscara, e não como
   <img>: assim herdam a cor do texto e ficam todos no azul da marca.
   Um <img> colorido traria de volta o arco-íris que a normalização de
   paleta acabou de eliminar.
   ================================================================= */
.tech-band {
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    padding-top: 3.5rem;
}

.tech-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem 2.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 96px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
    transition: color 200ms ease;
}

.tech-item:hover {
    color: var(--accent);
}

.tech-logo {
    width: 2.4rem;
    height: 2.4rem;
    background-color: currentColor;
    -webkit-mask: var(--logo) center / contain no-repeat;
    mask: var(--logo) center / contain no-repeat;
}

.tech-logo[data-tech="vue"]           { --logo: url('../img/tech/vue.svg'); }
.tech-logo[data-tech="node"]          { --logo: url('../img/tech/node.svg'); }
.tech-logo[data-tech="python"]        { --logo: url('../img/tech/python.svg'); }
.tech-logo[data-tech="php"]           { --logo: url('../img/tech/php.svg'); }
.tech-logo[data-tech="java"]          { --logo: url('../img/tech/java.svg'); }
.tech-logo[data-tech="django"]        { --logo: url('../img/tech/django.svg'); }
.tech-logo[data-tech="mysql"]         { --logo: url('../img/tech/mysql.svg'); }
.tech-logo[data-tech="postgresql"]    { --logo: url('../img/tech/postgresql.svg'); }
.tech-logo[data-tech="tailwind"]      { --logo: url('../img/tech/tailwind.svg'); }
.tech-logo[data-tech="chartjs"]       { --logo: url('../img/tech/chartjs.svg'); }
.tech-logo[data-tech="powerapps"]     { --logo: url('../img/tech/powerapps.svg'); }
.tech-logo[data-tech="powerautomate"] { --logo: url('../img/tech/powerautomate.svg'); }
.tech-logo[data-tech="sharepoint"]    { --logo: url('../img/tech/sharepoint.svg'); }

/* =================================================================
   Rodapé
   Os ícones eram glifos soltos sem área de clique definida.
   ================================================================= */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid rgba(17, 17, 17, 0.10);
    transition: color 180ms ease, border-color 180ms ease;
}

.social-link:hover {
    color: var(--accent);
    border-color: rgba(31, 95, 196, 0.35);
}

/* =================================================================
   Faixa de CTA
   Era um gradiente oliva turvo, resultado de `from-blue-600/20` e
   `to-purple-600/20` caindo nos verdes remapeados do Tailwind.
   ================================================================= */
#cta {
    background: var(--hero-bg);
    color: #ffffff;
}

/* Manchas de blur decorativas que só sujavam o fundo escuro. */
#cta > div.absolute {
    display: none;
}

#cta h2,
#cta strong {
    color: #ffffff !important;
}

#cta .gradient-text {
    color: var(--hero-accent) !important;
}

#cta p {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* O primário (WhatsApp) é preenchido pela regra junto dos botões do hero. */
#cta .btn-primary,
#cta .btn-secondary {
    font-weight: 500;
}

#cta .btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: #ffffff;
    box-shadow: none;
}

#cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.85);
    transform: none;
    box-shadow: none;
}

/* Mobile responsiveness fixes.
   767.98px e não 768px: o breakpoint `md` do Tailwind é min-width:768px, então
   em exatamente 768px valiam os dois ao mesmo tempo — navbar desktop convivendo
   com métricas empilhadas e botões de largura mobile. */
@media (max-width: 767.98px) {
    .hero-shell {
        padding: 4.5rem 1rem 3rem;
    }

    .hero-title {
        font-size: clamp(1.7rem, 6.8vw, 2.45rem);
        text-align: center;
    }

    .hero-copy {
        text-align: center;
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    /* Os dois botões do hero empilham; larguras iguais evitam o degrau
       que existia quando só o secundário recebia esta regra. */
    .hero-actions .btn-primary,
    .btn-secondary {
        width: min(92%, 420px);
        min-width: 0 !important;
        padding-left: 1rem;
        padding-right: 1rem;
        justify-content: center;
    }

    .hero-content {
        max-width: none;
    }

    /* As artes do Sobre e do Processo têm o texto desenhado nos pixels, então
       ele encolhe junto com a imagem. Em duas colunas, a 390px, cada card do
       Sobre ficava a 22% do original e a descrição caía para uns 4px. Em uma
       coluna a escala dobra. */
    .about-cards {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* As faixas são 4,5:1 e, em largura total no celular, o texto ficava em
       torno de 6px. Aqui a faixa vira 2:1 e mostra só o trecho da esquerda,
       onde fica o texto (de ~95px a ~700px dos 1535px do original), com uma
       margem dos dois lados. A arte da direita sai de cena, e o texto fica
       com quase o dobro do tamanho. */
    .process-banners img {
        aspect-ratio: 2 / 1;
        object-position: 6% center;
    }

    .hero-metrics {
        flex-direction: column;
        gap: 0.9rem;
        margin-top: 2rem;
    }

    /* Empilhado, o divisor vertical não faz sentido: vira separador de topo. */
    .metric-card {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.9rem 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .metric-card:first-child {
        padding-top: 0;
        border-top: 0;
    }

    /* Allow hero to grow and avoid clipping on small screens */
    .hero-gradient {
        overflow: visible;
        padding-bottom: 2.5rem;
    }

    /* Arte mais leve (28 KB em vez de 82 KB) e enquadrada mais alta, para que
       o notebook caia na faixa acima do texto em vez de atrás dele. */
    .hero-gradient::before {
        background-image: url('../img/hero-mobile.jpg');
        background-position: 62% 22%;
    }

    /* Sem coluna livre à esquerda no celular o texto fica sobre a arte.
       O véu é mais leve no topo (deixa o notebook aparecer) e mais denso na
       faixa central e inferior, onde ficam título, parágrafo e métricas. */
    .hero-gradient::after {
        background: linear-gradient(
            180deg,
            rgba(12, 20, 36, 0.58) 0%,
            rgba(12, 20, 36, 0.78) 32%,
            rgba(12, 20, 36, 0.92) 55%,
            rgba(12, 20, 36, 0.94) 100%
        );
    }

    /* Contact section: center items and stack contact cards */
    #contato .grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #contato .space-y-6 a {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    #contato .space-y-6 a i.ml-auto {
        margin-left: 0 !important;
        margin-top: 0.35rem;
    }

    /* Precisa do `.hidden` no seletor: um `#mobile-menu` puro tem
       especificidade de ID e vence a classe `.hidden` que o JS alterna,
       travando o menu fechado para sempre no mobile. */
    #mobile-menu.hidden { display: none; }
}

/* Os campos do formulário usam `focus:outline-none` do Tailwind, o que apaga
   o anel de foco do navegador. Isto devolve um indicador visível para quem
   navega por teclado, sem afetar o clique do mouse. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

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

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

    .btn-primary:hover,
    .btn-secondary:hover,
    .card-hover:hover {
        transform: none;
    }
}

/* =================================================================
   Prova de conceito: linguagem editorial

   Três padrões de vocabulário comum de design, aplicados ao conteúdo
   e à paleta que já existem aqui — nada da composição de terceiros.

   1. Serifada de alto contraste nos títulos, sem serifa no corpo
   2. Grade bento com larguras alternadas
   3. Elevação por tom, sem contorno

   Para reverter a tipografia, basta remover este bloco `section h2`.
   ================================================================= */
/* ---- Bento de Serviços ----
   São 7 cards. Numa grade uniforme de 3 colunas sobra um órfão na
   última fileira; alternando larguras os 7 fecham a composição:
   2+1, 1+2, 2+1 e um de largura inteira. */
.services-bento {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .services-bento {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .services-bento > div:nth-child(1) { grid-column: span 2; }
    .services-bento > div:nth-child(4) { grid-column: span 2; }
    .services-bento > div:nth-child(5) { grid-column: span 2; }
    .services-bento > div:nth-child(7) { grid-column: span 3; }
}

/* Elevação por tom em vez de contorno: no fundo branco o card precisa
   ser um passo mais escuro, o inverso do que se faz no tema escuro. */
.services-bento > div {
    background: #f6f7f9;
    border: 0;
    box-shadow: none;
    transition: background 220ms ease, transform 220ms ease;
}

.services-bento > div:hover {
    background: #eef1f5;
    transform: translateY(-3px);
    box-shadow: none;
}