/* Suavização do scroll agora é feita pelo ScrollSmoother (js/scroll-smoother-init.js) — deixar
   scroll-behavior:smooth aqui também faria os dois "brigarem" pelo controle da rolagem. */
body {
    font-family: 'Smooch Sans', sans-serif;
}
.hero-bg {
    background:
        radial-gradient(ellipse at 75% 15%, rgba(255, 77, 0, 0.10) 0%, transparent 45%),
        #0c0c0c;
}
.btn-group {
    background: rgba(216, 216, 212, 0.05);
    border: 1px solid rgba(216, 216, 212, 0.12);
    padding: 6px;
}

/* Diagrama de automação: grid de pontos de fundo */
.flow-dot-grid {
    background-image: radial-gradient(#1f1f1f 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Foto institucional do hero: duotone preto/laranja em CSS puro. grayscale tira a cor
   original da foto; o gradiente do ::after, com mix-blend-mode:color, devolve só matiz e
   saturação (preservando a luminosidade real da imagem por baixo) — dá o efeito duotone sem
   precisar de filtro SVG, e funciona com qualquer foto que for colocada aqui. isolation:isolate
   impede esse blend de "vazar" e misturar com o fundo da página atrás da foto. */
.hero-duotone {
    isolation: isolate;
    background: #0c0c0c;
}
.hero-duotone img {
    filter: grayscale(1) contrast(1.05);
    mix-blend-mode: luminosity;
}
.hero-duotone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #0c0c0c 10%, #ff4d00 130%);
    mix-blend-mode: color;
}

@media (prefers-reduced-motion: reduce) {
    .sobre-badge { animation: none; }
    .frame-line::after { animation: none; opacity: 0; }
}

/* Sobre: selo circular que gira sem parar, puramente decorativo (não depende de scroll nem de
   GSAP), igual ao selo "OPEN FOR SELECT PROJECTS" do catalinvintila.design. */
.sobre-badge {
    animation: sobreBadgeSpin 12s linear infinite;
}
@keyframes sobreBadgeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Título do hero: cada linha é animada via GSAP/ScrollTrigger (JS no fim do arquivo),
   deslizando levemente pro lado conforme a página rola. display:block preserva a quebra
   de linha que antes vinha do <br>, e overflow-hidden na section evita barra de rolagem
   horizontal enquanto as linhas se movem. letter-spacing aqui sobrescreve o tracking-tighter
   do <h1> (a letter-spacing declarada direto no elemento sempre vence a herdada do pai),
   abrindo o espaço entre as letras. margin-top cria um respiro extra entre cada frase, além
   do que o leading do <h1> já dá. */
.hero-line {
    display: block;
    will-change: transform;
}
.hero-line + .hero-line {
    margin-top: 0.1em;
}

/* Bordas laterais com "partícula" escorrendo: mesma técnica vista em
   mina-massoud.onrender.com/#Home (CSS de produção real do site deles), com a cor trocada pro
   laranja da marca e um box-shadow em volta pra ficar "neon" (lá é branco puro, sem brilho). A
   linha em si (.frame-line) é só um traço de 1px bem apagado, fixo do topo ao fundo do elemento
   pai (a section, ou um palco dentro dela); o efeito de movimento é só o ::after: um bloco curto
   (18vh) com gradiente transparente→laranja, que sobe do topo (-50%, ou seja, começa acima do
   próprio pai) até passar do fundo (110%) em loop infinito — a "cabeça" acesa fica embaixo do
   bloco, o rastro apagado fica em cima, dando a leitura de algo escorrendo pra baixo, não
   subindo. Left/right usam clamp em vez de left-6/right-6 fixos pra a borda acompanhar
   suavemente o padding do conteúdo em qualquer largura de tela, sem quebrar em degraus como as
   classes de padding do Tailwind. Generalizada (era .hero-frame-line, só do hero) porque agora
   é reaproveitada em mais de uma section — ver onde é usada no HTML. */
.frame-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(216, 216, 212, 0.08);
    overflow: hidden;
    pointer-events: none;
}
/* Seções claras (Sobre, Método, Por que Nexus — bg-paper) usam ink em vez de paper no traço de
   fundo: rgba(paper) em cima do próprio paper ficaria quase invisível. O "cometa" laranja do
   ::after não muda — já contrasta em qualquer fundo. */
.frame-line--on-light {
    background: rgba(12, 12, 12, 0.08);
}
.frame-line--left {
    left: clamp(1.5rem, 4vw, 6rem);
}
.frame-line--right {
    right: clamp(1.5rem, 4vw, 6rem);
}
.frame-line::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -50%;
    width: 100%;
    height: 18vh;
    background: linear-gradient(to bottom, rgba(255, 77, 0, 0) 0%, rgba(255, 77, 0, 0.85) 70%, #ff8a4d 100%);
    box-shadow: 0 0 10px 1px rgba(255, 77, 0, 0.7), 0 0 22px 5px rgba(255, 77, 0, 0.3);
    animation: frameLineDrop 13s cubic-bezier(0.4, 0.26, 0, 0.97) infinite;
}
/* A borda direita cai fora de sincronia com a esquerda (mesmo truque do site de referência,
   que também escalona os delays entre as 3 linhas dele) — as duas caindo juntas, sempre no
   mesmo instante, ficaria mecânico demais. */
.frame-line--right::after {
    animation-delay: 4.4s;
}
@keyframes frameLineDrop {
    0% { top: -50%; }
    100% { top: 110%; }
}

/* Navbar: link reto, uppercase, sem pílula de fundo — sublinhado fino crescendo da
   esquerda pra direita no hover, no espírito editorial da referência */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 250ms ease-out;
}
.nav-link:hover::after {
    transform: scaleX(1);
}

/* Card de vendas: destaca a linha e a área do gráfico ao passar o mouse por cima */
.sales-line {
    transition: stroke-width 200ms ease, filter 200ms ease;
}
.sales-area {
    opacity: 0.8;
    transition: opacity 200ms ease;
}
#sales-chart-svg:hover .sales-line {
    stroke-width: 4;
    filter: drop-shadow(0 0 8px rgba(255, 138, 77, 0.55));
}
#sales-chart-svg:hover .sales-area {
    opacity: 1;
}

/* Módulos do sistema: nós da árvore e pontos de conexão */
.tree-node,
.tree-child,
#tree-root,
#tree-overview {
    transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
    cursor: default;
}
.tree-node {
    background: #161616;
    border: 1px solid rgba(216, 216, 212, 0.15);
    color: #d8d8d4;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 10px 18px;
    white-space: nowrap;
}
.tree-child {
    background: rgba(22, 22, 22, 0.6);
    border: 1px solid rgba(216, 216, 212, 0.1);
    color: rgba(216, 216, 212, 0.65);
    font-size: 12px;
    padding: 8px 16px;
    white-space: nowrap;
}
/* Hover: cada nó ganha destaque e "levanta" um pouco, pra não ficar estático */
.tree-node:hover,
.tree-child:hover {
    border-color: rgba(255, 77, 0, 0.6);
    background: rgba(255, 77, 0, 0.12);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}
#tree-root:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(255, 77, 0, 0.35);
}
#tree-overview:hover {
    border-color: rgba(255, 77, 0, 0.5);
    transform: translateY(-3px);
}
.tree-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    transform: translate(-50%, -50%);
}

/* Navbar: estado "encolhido" ao rolar a página — mais reto/editorial que uma pílula,
   só ganha um fundo opaco e uma borda inferior mais visível */
#site-nav {
    width: 100%;
    transition: background-color 300ms ease-out, border-color 300ms ease-out;
}
#site-nav.nav-scrolled {
    background-color: rgba(12, 12, 12, 0.92);
    border-color: rgba(216, 216, 212, 0.1);
    backdrop-filter: blur(6px);
}
/* Nav sobre fundo claro: enquanto a seção "Sobre" estiver atrás da nav (ver js/navbar-scroll.js),
   o texto (pensado pro fundo escuro do hero) precisa virar escuro pra continuar legível. O
   seletor com #site-nav garante especificidade suficiente pra vencer as utilities text-paper/*
   do Tailwind sem precisar de !important. O link "Contato" (laranja) fica de fora — laranja já
   funciona em cima de claro ou escuro.
   Bug corrigido aqui: só trocar a cor do TEXTO pra escuro não bastava — o fundo da nav
   continuava vindo de #site-nav.nav-scrolled (preto a 92%), então virava texto escuro em cima
   de fundo escuro, quase invisível (e por isso "difícil de clicar": dava pra clicar, só não dava
   pra ver onde). O fundo também precisa virar claro aqui; mesma especificidade de
   #site-nav.nav-scrolled, então por vir depois no arquivo já venceria, mas o seletor combinado
   deixa isso explícito em vez de depender da ordem. */
#site-nav.nav-on-light {
    background-color: rgba(216, 216, 212, 0.94);
    border-color: rgba(12, 12, 12, 0.08);
}
#site-nav.nav-on-light,
#site-nav.nav-on-light .nav-link,
#site-nav.nav-on-light button {
    color: #0c0c0c;
}
#site-nav.nav-on-light .nav-link.text-signal-orange {
    color: #ff4d00;
}

/* Menu mobile: painel que desce logo abaixo da barra (ver #mobile-menu no HTML e
   js/mobile-menu.js, que alterna a classe .is-open). Antes não existia nenhum painel — o botão
   de hambúrguer não tinha função alguma, então em telas <lg não dava pra acessar os links da
   navbar de jeito nenhum. Fica sempre no tema escuro da nav "scrolled", independente da seção
   por trás, porque é um painel sólido (quase opaco) sobre o conteúdo, não uma barra translúcida
   como a nav no desktop. */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    background-color: rgba(12, 12, 12, 0.97);
    border-top: 1px solid rgba(216, 216, 212, 0);
    transition: max-height 260ms ease, border-color 260ms ease;
}
.mobile-menu.is-open {
    max-height: 24rem;
    border-top-color: rgba(216, 216, 212, 0.08);
}
.mobile-menu-link {
    display: block;
    padding: 0.9rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(216, 216, 212, 0.7);
    border-bottom: 1px solid rgba(216, 216, 212, 0.06);
}
.mobile-menu-link:last-child {
    border-bottom: none;
}
.mobile-menu-link:hover,
.mobile-menu-link:active {
    color: #d8d8d4;
}
.mobile-menu-link--accent {
    color: #ff4d00;
}

/* Como a Nexus trabalha: nó apagado por padrão, acende em laranja quando o traço da linha do
   tempo (desenhada ao vivo via scroll, ver js/metodo-layout.js e js/metodo-reveal.js) alcança
   ele. Ponto que corre na ponta do traço começa escondido — só aparece enquanto o trecho do
   método está "em desenho" no scroll, sumindo de novo quando a linha termina. */
.metodo-node,
.metodo-label {
    transition: border-color 300ms ease, background-color 300ms ease, transform 300ms ease, color 300ms ease;
}
.metodo-node.is-active {
    border-color: #ff4d00;
    background: rgba(255, 77, 0, 0.18);
    transform: scale(1.3);
}
.metodo-label.is-active {
    color: #ff4d00;
}
.metodo-cursor {
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 200ms ease;
}
/* Em telas <lg os 4 passos empilham numa coluna só (ver comentário em js/metodo-layout.js) e a
   linha do tempo passa pelo centro de cada .metodo-node — que fica encostado na borda esquerda
   do passo. Sem esse respiro, o texto (etapa/título/parágrafo, que começa na mesma borda
   esquerda) ficava por baixo da própria linha. Só empurra o texto pra direita da linha; nada
   mais muda (o layout >=lg não é afetado). */
@media (max-width: 1023px) {
    .metodo-step > *:not(.metodo-node) {
        padding-left: 1.5rem;
    }
}

/* Prova social: card levanta e a borda acende em laranja no hover, mesma linguagem de
   interação já usada em .tree-node/.tree-child (módulos do sistema). */
.testimonial-card {
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 77, 0, 0.4);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

/* Carrossel de depoimentos: ver comentário completo no HTML (#provas-grid) e em
   js/provas-carousel.js — aqui só o layout. Estado padrão (sem JS/Draggable, ou
   prefers-reduced-motion): grid normal que embrulha linha, todo mundo lê os 3 cards rolando a
   página, sem precisar arrastar nada. */
.provas-viewport {
    overflow: hidden;
}
.provas-track {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .provas-track {
        gap: 2rem;
    }
}
/* Classe ligada pelo JS só depois de confirmar que Draggable+Flip existem de verdade — vira uma
   fileira única (sem quebra de linha) mais estreita que o container da seção, de propósito: só
   ~2 cards cabem inteiros, com uma fatia do terceiro espiando na borda, sinalizando que dá pra
   arrastar mesmo sem seta nenhuma na tela. touch-action:pan-y deixa o dedo ainda rolar a página
   verticalmente num toque vertical; só um arrasto horizontal é capturado pelo Draggable. */
.provas-track--carousel {
    flex-wrap: nowrap;
    max-width: 820px;
    touch-action: pan-y;
    cursor: grab;
}
.provas-track--carousel.is-dragging {
    cursor: grabbing;
}
.provas-track--carousel .testimonial-card {
    flex: 0 0 auto;
    width: min(85vw, 380px);
}
/* Card saindo da fileira (ver js/provas-carousel.js): display:none em vez de remoção
   imediata do DOM, pra o Flip ainda ter um elemento de verdade pra encolher/apagar antes de
   sumir de vez — sem essa classe, o card só desaparecia seco no meio da troca dos outros. */
.provas-track--carousel .testimonial-card.is-leaving {
    display: none;
}

/* Por que escolher a Nexus: cada item recolhe a descrição por padrão. grid-template-rows:0fr é
   o truque que anima uma altura "auto" com transição suave (max-height precisaria de um valor
   chutado em px); o overflow-hidden no filho é obrigatório pro truque funcionar. Cada item abre
   sozinho enquanto passa pela faixa central da tela no scroll (ver js/porque-nexus-reveal.js),
   sem pin — e acende o número/ícone/título em laranja pra marcar qual está em foco. */
.porque-collapse {
    grid-template-rows: 0fr;
    transition: grid-template-rows 450ms ease;
}
.porque-item.is-open .porque-collapse {
    grid-template-rows: 1fr;
}
.porque-num,
.porque-icon,
.porque-title {
    transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.porque-item.is-open .porque-num {
    background: #ff4d00;
    color: #0c0c0c;
}
.porque-item.is-open .porque-icon {
    border-color: #ff4d00;
    color: #ff4d00;
    background: rgba(255, 77, 0, 0.1);
}
.porque-item.is-open .porque-title {
    color: #ff4d00;
}

/* Botão "líquido": só a borda em repouso, sem fundo. A onda (.liquid-btn-wave) é animada via
   GSAP em js/liquid-buttons.js — aqui só o estado de repouso e o corte que esconde a onda
   fora do botão. Sem GSAP, o botão continua um botão normal (borda + texto laranja, só sem
   a animação de preenchimento). */
.liquid-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    background: transparent;
    border: 2px solid #ff4d00;
    color: #ff4d00;
    cursor: pointer;
}
.liquid-btn-fill {
    position: absolute;
    inset: -100% 0 0 0;
    height: 300%;
    color: #ff4d00;
    pointer-events: none;
}
.liquid-btn-wave {
    display: block;
    width: 100%;
    height: 100%;
}
.liquid-btn-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

/* Hub central do palco de "Sistemas conectados": posição fixa, nunca se move (só os itens em
   .sistemas-track se movem via JS) — ver comentário completo no HTML. Escondido no grid estático
   (sem JS/prefers-reduced-motion) porque ali os 4 itens já preenchem o espaço sozinhos, lado a
   lado; o hub só faz sentido como âncora visual quando os itens estão viajando pelo palco de
   tela cheia. */
.sistemas-hub {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(220px, 26vw, 420px);
    pointer-events: none;
}
/* A classe vai no PALCO (não dá pra usar um seletor de irmão aqui: o hub vem ANTES do track no
   HTML de propósito, pra sempre pintar atrás dos itens — e o seletor `~`/`+` do CSS só enxerga
   irmãos que vêm DEPOIS). JS liga essa classe junto com .sistemas-track--animated, ver
   js/sistemas-wheel.js. */
.sistemas-pin-stage.is-animated .sistemas-hub {
    display: block;
}

/* Sistemas conectados: cada item nasce num grid simples (2 colunas no mobile, 4 no desktop) —
   esse é o estado que fica de pé sem JS e com prefers-reduced-motion. Quando o JS confirma que
   vai animar, ele troca a classe do track pra --animated (ver js/sistemas-wheel.js), que vira
   os itens em position:absolute pra ele poder posicionar cada um via transform a cada frame,
   com left:0/top:0 como base e translate(-50%,-50%) fazendo esse ponto de referência virar o
   CENTRO do item, não o canto — assim x/y calculados no JS (que seguem o arco) apontam direto
   pro centro visual do item, sem contas extras pra compensar a largura/altura dele. */
.sistemas-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
    position: relative;
    padding: 2rem 1.5rem 4rem;
}
@media (min-width: 1024px) {
    .sistemas-track {
        grid-template-columns: repeat(4, 1fr);
    }
}
.sistemas-track--animated {
    display: block;
    height: 100%;
}
.sistemas-track--animated .sistemas-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 20rem;
    will-change: transform, filter, opacity;
}
.sistemas-item {
    text-align: center;
}
/* Badge (ícone + rótulo do módulo) no topo de cada item: mesma composição de 3 partes vista no
   card "Using the best tools" / "The Salo Standard" que o usuário mandou de referência —
   badge → heading grande → parágrafo de apoio. Estilo do badge segue a linguagem de "pílula
   escura" que o resto do site já usa pra chip/label (ex. .tree-node), não uma cópia literal do
   visual do site de referência. */
.sistemas-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(22, 22, 22, 0.8);
    border: 1px solid rgba(216, 216, 212, 0.12);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(216, 216, 212, 0.75);
}
.sistemas-item-badge i {
    font-size: 1rem;
    color: #ff4d00;
}
.sistemas-item h3 {
    font-size: 1.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #d8d8d4;
    margin-top: 1.25rem;
    line-height: 1.15;
}
.sistemas-item p {
    font-size: 0.8125rem;
    color: rgba(216, 216, 212, 0.5);
    margin-top: 0.625rem;
    line-height: 1.5;
}

/* H2 de destaque: perspective pro rotationX de cada letra (ver js/split-heading-reveal.js)
   parecer um "flip" 3D sutil em vez de uma rotação achatada. */
.split-heading {
    perspective: 500px;
}
.split-char {
    transform-style: preserve-3d;
}

/* O problema real: o diagrama de 8 curvas convergindo no hub central (ver
   js/prova-clientes-connectors.js) só faz sentido com largura de sobra — por isso o mínimo de
   1000px (que antes era inline e incondicional, forçando scroll horizontal até em telas
   grandes o suficiente pro grid de 3 colunas) só se aplica a partir do lg, quando o stage
   realmente vira 3 colunas lado a lado. Abaixo disso é 1 coluna só, do tamanho da tela. */
@media (min-width: 1024px) {
    #prova-stage {
        min-width: 1000px;
    }
}

/* Cursor personalizado: bolinha laranja que segue o mouse (com leve atraso via GSAP quickTo,
   ver js/custom-cursor.js) e um rastro de pontinhos que vai apagando atrás dela. Só ativa em
   telas com mouse de verdade (hover:hover + pointer:fine) — em touch o cursor do sistema
   continua normal, então essa regra de esconder o cursor nativo também só vale aí dentro. A
   classe é adicionada pelo JS só depois de confirmar que vai realmente desenhar o cursor
   customizado, então nunca existe uma tela sem cursor nenhum. */
@media (hover: hover) and (pointer: fine) {
    body.has-custom-cursor,
    body.has-custom-cursor a,
    body.has-custom-cursor button {
        cursor: none;
    }
}
#cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 9999px;
    /* Gradiente radial em vez de cor sólida: o centro é opaco, mas a borda já nasce
       transparente, então não tem um contorno duro brigando com o glow do box-shadow por
       fora — as duas camadas se fundem numa mancha de luz só, em vez de "bolinha + auréola". */
    background: radial-gradient(circle, rgba(255, 77, 0, 0.9) 0%, rgba(255, 77, 0, 0.7) 55%, rgba(255, 77, 0, 0) 100%);
    box-shadow: 0 0 16px 4px rgba(255, 77, 0, 0.3);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    will-change: transform;
    transition: opacity 250ms ease;
}
.cursor-trail-dot {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(255, 77, 0, 0.8) 0%, rgba(255, 77, 0, 0) 75%);
    filter: blur(1.5px);
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    will-change: transform;
    transition: opacity 250ms ease;
}