/* Reset e configurações globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* O cabeçalho é fixo (80px): sem isto as âncoras param com o título
       escondido atrás da barra. */
    scroll-padding-top: 90px;
}

body {
    font-family: var(--fonte-corpo);
    line-height: 1.6;
    color: #ffffff;
    background-color: #000000;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------------------------------------------------------------------
   PALETA DA MARCA — unico lugar do site com valor hex.

   Os NOMES das variaveis sao os mesmos do Cartolaser.Site (--cor-dourada e
   companhia) porque 1.500 linhas de CSS e os <style> inline das paginas dependem
   deles; renomear tudo agora seria um diff enorme sem ganho. O que muda e o VALOR.
   --cor-destaque e o apelido novo, usado no codigo escrito para este site.

   Os valores saem do LOGO, nao de gosto: o fundo do badge e preto puro e o tom de
   destaque medido no arquivo (anel, raio e o texto "corte e gravacao") e o teal
   #5dc7b3. O wordmark do logo e BRANCO, e por isso o nome no cabecalho tambem e.

   Teal, e nao o bronze da Cartolaser: sao marcas diferentes, e reaproveitar o
   dourado faria os dois sites parecerem a mesma empresa.
   --------------------------------------------------------------------------- */
:root {
    --cor-primaria: #000000;    /* preto puro, igual ao fundo do logo */
    --cor-secundaria: #5dc7b3;
    --cor-dourada: #5dc7b3;    /* teal do logo — destaque principal */
    --cor-dourada-escura: #35a191;
    --cor-dourada-clara: #a7e8dc;
    --cor-bronze: #3fb8ae;     /* segundo tom do gradiente */
    --cor-texto-claro: #ffffff;
    --cor-texto-cinza: #cccccc;
    --cor-fundo-card: #0b1211;
    --cor-borda: #1c2b28;

    /* Apelido para o codigo novo deste site. Aponta para o mesmo valor de
       --cor-dourada: dois nomes, uma cor, zero divergencia. */
    --cor-destaque: var(--cor-dourada);

    /* --- Camada visual (2026) -------------------------------------------
       Os nomes acima NÃO mudam: todo o CSS do site e os <style> inline de
       cada página dependem deles. O que vem abaixo é acréscimo.
       Os canais RGB soltos existem para montar rgba() com opacidade
       variável — antes cada sombra chutava um dourado diferente
       (201,169,110 / 212,175,55), nenhum deles a cor da marca. */
    --dourada-rgb: 93, 199, 179;
    --bronze-rgb: 63, 184, 174;
    --clara-rgb: 167, 232, 220;

    --grad-dourado: linear-gradient(135deg, var(--cor-dourada), var(--cor-bronze));
    --grad-texto-dourado: linear-gradient(120deg, var(--cor-dourada-clara), var(--cor-bronze) 55%, var(--cor-dourada));
    --grad-linha: linear-gradient(90deg, transparent, rgba(var(--dourada-rgb), .55), transparent);

    --raio-sm: 8px;
    --raio-md: 14px;
    --raio-lg: 22px;
    --raio-pill: 999px;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .6);
    --sombra-2: 0 10px 30px -10px rgba(0, 0, 0, .7);
    --sombra-3: 0 24px 60px -20px rgba(0, 0, 0, .85);
    --brilho-dourado: 0 0 0 1px rgba(var(--dourada-rgb), .35),
                      0 18px 45px -18px rgba(var(--dourada-rgb), .45);

    --ease-suave: cubic-bezier(.22, 1, .36, 1);
    --dur-rapida: .2s;
    --dur-media: .45s;
    --dur-lenta: .9s;

    --fonte-titulo: 'Sora', 'Roboto', sans-serif;
    --fonte-corpo: 'Roboto', sans-serif;

    /* Textura de grão: SVG inline (feTurbulence) em vez de PNG — um gradiente
       liso em tela grande denuncia "template", e um arquivo de ruído seria
       mais um request por página. */
    --textura-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)' opacity='.5'/%3E%3C/svg%3E");
}

h1, h2, h3, h4,
.nome-empresa {
    font-family: var(--fonte-titulo);
    letter-spacing: -.015em;
}

::selection {
    background: rgba(var(--dourada-rgb), .45);
    color: #fff;
}

html {
    scrollbar-color: var(--cor-dourada) #0a0a0a;
}

/* Grão: camada fixa por cima de tudo, opacidade mínima e sem capturar
   clique. Fica aqui em vez de dentro do hero porque, misturado às camadas
   de gradiente do hero (blend overlay), o ruído clareava o preto inteiro
   para cinza-carvão. */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    background-image: var(--textura-grao);
    opacity: .022;
}

/* Anel de foco único para todo o site — não existia nenhum, e o navegador
   perde o outline padrão em vários destes elementos por causa dos estilos
   de :hover. Navegação por teclado ficava invisível. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--cor-dourada-clara);
    outline-offset: 3px;
    border-radius: var(--raio-sm);
}

/* Header */
.cabecalho {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, .82);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
    z-index: 1000;
    border-bottom: 1px solid var(--cor-borda);
    transition: background var(--dur-media) var(--ease-suave),
                border-color var(--dur-media) var(--ease-suave),
                box-shadow var(--dur-media) var(--ease-suave);
}

/* Barra de progresso de leitura. O scaleX vem do JS em --progresso (0..1);
   sem JS ela simplesmente fica em 0 e ninguém vê. */
.cabecalho::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--grad-dourado);
    transform: scaleX(var(--progresso, 0));
    transform-origin: left center;
    will-change: transform;
}

.cabecalho--rolado {
    background: rgba(0, 0, 0, .96);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: rgba(var(--dourada-rgb), .35);
    box-shadow: var(--sombra-2);
}

.navegacao .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
    transition: padding var(--dur-media) var(--ease-suave);
}

.cabecalho--rolado .navegacao .container {
    padding: .55rem 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: width var(--dur-media) var(--ease-suave),
                height var(--dur-media) var(--ease-suave),
                box-shadow var(--dur-media) var(--ease-suave);
}

.cabecalho--rolado .logo-img {
    width: 32px;
    height: 32px;
}

.logo a:hover .logo-img {
    box-shadow: 0 0 0 2px rgba(var(--dourada-rgb), .6);
}

/* Branco, como no logo. O teal fica no simbolo e nos destaques — nome em teal ao
   lado de um badge teal virava um bloco so de cor. */
.nome-empresa {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cor-texto-claro);
    letter-spacing: 2px;
}

.menu-navegacao {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Gap fixo de 2rem não cabia: entre ~1100 e ~1400px os itens encolhiam e o
       texto quebrava DENTRO do link ("Caixa / 3D", "Sob / medida"), desalinhando
       a barra inteira. Agora o espaçamento cede antes do texto. */
    gap: clamp(.75rem, 1.4vw, 1.75rem);
}

.menu-navegacao li {
    flex: 0 0 auto;
}

.menu-navegacao a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    color: var(--cor-texto-claro);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--dur-rapida) ease;
    position: relative;
}

.menu-navegacao a:hover {
    color: var(--cor-dourada);
}

.menu-navegacao a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--grad-dourado);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-media) var(--ease-suave);
}

.menu-navegacao a:hover::after,
.menu-navegacao a.ativo::after {
    transform: scaleX(1);
}

/* Seção em vista, marcada pelo JS: o menu passa a dizer onde o visitante
   está, não só para onde ele pode ir. */
.menu-navegacao a.ativo {
    color: var(--cor-dourada);
}

/* Loja / Caixa 3D / Sob medida: as ações, separadas por um filete dos links
   institucionais. Douradas porque é onde o visitante clica quando decidiu. */
.menu-destaque a {
    color: var(--cor-dourada);
}

.menu-destaque--primeiro {
    padding-left: clamp(.75rem, 1.4vw, 1.75rem);
    border-left: 1px solid var(--cor-borda);
}

/* Ícone de conta e hamburger: bloco fixo à direita, fora do <ul>. Fora do menu
   porque conta é ação, não navegação — e como texto ("Entrar") roubava a
   largura que os outros itens precisavam para caber em uma linha. */
.acoes-cabecalho {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.acao-conta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-claro);
    text-decoration: none;
    font-size: 1rem;
    transition: color var(--dur-rapida) ease,
                border-color var(--dur-rapida) ease,
                background var(--dur-rapida) ease,
                width var(--dur-media) var(--ease-suave),
                height var(--dur-media) var(--ease-suave);
}

.acao-conta:hover,
.acao-conta:focus-visible {
    color: var(--cor-dourada);
    border-color: rgba(var(--dourada-rgb), .55);
    background: rgba(var(--dourada-rgb), .12);
}

/* Logado usa o mesmo ícone: o anel dourado é o único sinal de que a sessão
   está aberta. */
.acao-conta--logado {
    color: var(--cor-dourada);
    border-color: rgba(var(--dourada-rgb), .55);
}

.cabecalho--rolado .acao-conta {
    width: 34px;
    height: 34px;
}

.menu-mobile {
    display: none;
    font-size: 1.5rem;
    color: var(--cor-dourada);
    cursor: pointer;
    background: none;
    border: none;
    padding: .25rem .4rem;
    line-height: 1;
}

/* Seção Hero */
.secao-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.secao-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(var(--dourada-rgb), .10) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(var(--clara-rgb), .07) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(var(--bronze-rgb), .05) 0%, transparent 50%);
    pointer-events: none;
}

/* Aurora: dois blobs dourados desfocados à deriva. É o único movimento
   contínuo grande que o site mantém — dá vida ao topo sem virar carrossel
   de animações (antes eram sete loops infinitos simultâneos). */
.secao-hero::after {
    content: '';
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background:
        radial-gradient(38% 32% at 22% 38%, rgba(var(--dourada-rgb), .30), transparent 70%),
        radial-gradient(30% 26% at 76% 64%, rgba(var(--bronze-rgb), .18), transparent 70%);
    filter: blur(70px);
    opacity: .3;
    animation: deriva 26s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes deriva {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    50%  { transform: translate3d(2%, 3%, 0) scale(1.08); }
    100% { transform: translate3d(4%, -3%, 0) scale(1.02); }
}

/* Vinheta: fecha o hero no preto da seção seguinte em vez de cortar seco.
   Fica no box-shadow inset porque ::before e ::after já estão ocupados
   (grão e aurora) e um terceiro elemento só para isso é desperdício. */
.secao-hero {
    box-shadow: inset 0 -120px 90px -70px #000;
}

.secao-hero .container {
    position: relative;
    z-index: 1;
}

.conteudo-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
    padding-top: 80px;
}

.titulo-principal {
    font-size: clamp(2.2rem, 5.2vw, 4.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    margin-bottom: 1.5rem;
    text-wrap: balance;
}

/* ESCOPO NO TÍTULO DO HERO, não solto: `.destaque` também é usada em
   Loja/Index.cshtml no card do plano em destaque (.plano-card.destaque), e
   `-webkit-text-fill-color` é HERDADO — solta, esta regra deixava o card
   inteiro (título, preço, itens, botão) com texto invisível. */
.titulo-principal .destaque {
    /* Fallback antes do clip: navegador sem background-clip:text mostra
       dourado sólido em vez de texto transparente (invisível). */
    color: var(--cor-dourada);
    background: var(--grad-texto-dourado);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

/* Sublinha mais fina e desvanecendo à direita: com 3px cheios nas duas
   palavras douradas o título ganhava duas barras e virava tabela. */
.titulo-principal .destaque::after {
    content: '';
    position: absolute;
    bottom: .04em;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cor-dourada), rgba(var(--bronze-rgb), .15));
    border-radius: 2px;
}

.subtitulo {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--cor-texto-cinza);
    margin-bottom: 2.5rem;
    line-height: 1.75;
    max-width: 52ch;
}

.botoes-acao {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: var(--raio-pill);
    font-weight: 600;
    font-family: var(--fonte-titulo);
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform var(--dur-media) var(--ease-suave),
                box-shadow var(--dur-media) var(--ease-suave),
                background var(--dur-media) var(--ease-suave),
                color var(--dur-media) var(--ease-suave),
                border-color var(--dur-media) var(--ease-suave);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* As camadas de hover ficam em z-index NEGATIVO (o .botao tem
   `isolation: isolate`, então o -1 não escapa do botão): pintam acima do
   fundo e abaixo do conteúdo. Proteger os filhos com z-index positivo não
   servia — o rótulo do botão é um text node solto, sem elemento para
   receber z-index, e o preenchimento dourado passava por cima dele. Sobrava
   só o ícone, que é um elemento. */

.botao-primario {
    background: var(--grad-dourado);
    color: var(--cor-primaria);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset,
                0 8px 20px -10px rgba(var(--dourada-rgb), .8);
}

/* Varredura de brilho: passa uma vez por hover, não em loop. */
.botao-primario::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .55s var(--ease-suave);
}

.botao-primario:hover::before {
    transform: translateX(120%);
}

.botao-primario:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset,
                0 16px 34px -12px rgba(var(--dourada-rgb), .95);
}

.botao-secundario {
    background: transparent;
    color: var(--cor-dourada);
    border-color: var(--cor-dourada);
}

/* Preenchimento crescendo da esquerda em vez de troca seca de background.
   Translúcido, e não o gradiente sólido do primário: preenchido por igual
   os dois botões ficavam idênticos no hover e a hierarquia sumia — este é
   a ação secundária. */
.botao-secundario::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(var(--dourada-rgb), .32), rgba(var(--bronze-rgb), .18));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-media) var(--ease-suave);
}

.botao-secundario:hover::before {
    transform: scaleX(1);
}

.botao-secundario:hover {
    color: var(--cor-dourada-clara);
    border-color: var(--cor-dourada-clara);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -16px rgba(var(--dourada-rgb), .6);
}

.botao:active {
    transform: translateY(0) scale(.985);
}

.destaque-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--dourada-rgb), .10) 0%, transparent 70%);
    border-radius: 50%;
    position: relative;
    /* O parallax vem do JS em --parallax (px). Ficar no transform do CSS
       deixa o JS só escrevendo uma variável — antes ele sobrescrevia
       style.transform e matava qualquer outro efeito no elemento. */
    transform: translate3d(0, var(--parallax, 0px), 0);
}

/* Anel cônico dourado atrás do ícone: sugere a cabeça do laser girando. */
.destaque-visual::before {
    content: '';
    position: absolute;
    width: min(320px, 78%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(var(--dourada-rgb), .85) 60deg,
        transparent 140deg,
        rgba(var(--clara-rgb), .5) 220deg,
        transparent 320deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: girar 18s linear infinite;
}

.destaque-visual::after {
    content: '';
    position: absolute;
    width: min(260px, 62%);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(var(--dourada-rgb), .25);
}

@keyframes girar {
    to { transform: rotate(1turn); }
}

.icone-principal {
    font-size: clamp(5rem, 11vw, 8rem);
    color: var(--cor-dourada);
    position: relative;
    filter: drop-shadow(0 0 28px rgba(var(--dourada-rgb), .5));
    animation: pulsar 4s ease-in-out infinite;
}

/* Só opacidade: a escala anterior fazia o ícone "respirar" e chamava
   atenção para si em vez de para o título. */
@keyframes@keyframes pulsar {
    0%, 100% { opacity: .9; }
    50%      { opacity: 1; }
}

/* Cue de scroll no fim do hero */
.hero-cue {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 1rem;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--cor-dourada);
    border: 1px solid rgba(var(--dourada-rgb), .45);
    text-decoration: none;
    background: rgba(0, 0, 0, .35);
    animation: cue-desce 2.4s ease-in-out infinite;
    transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease;
}

.hero-cue:hover {
    background: var(--cor-dourada);
    color: #000;
}

@keyframes cue-desce {
    0%, 100% { transform: translateY(0); opacity: .7; }
    50%      { transform: translateY(7px); opacity: 1; }
}

/* Seções gerais */
.secao-sobre,
.secao-produtos,
.secao-servicos,
.secao-contato {
    padding: 5rem 0;
    position: relative;
}

/* Hairline dourado no topo das seções: encerra a alternância seca de
   #0a0a0a e gradiente, que fazia as seções colidirem sem transição. */
.secao-sobre::before,
.secao-servicos::before,
.secao-contato::before,
.secao-equipamentos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, 92%);
    height: 1px;
    background: var(--grad-linha);
    opacity: .7;
}

.secao-sobre {
    background: #0a0a0a;
}

.secao-produtos {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
}

.secao-servicos {
    background: #0a0a0a;
}

.secao-contato {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
}

.titulo-secao {
    text-align: center;
    margin-bottom: 4rem;
}

.titulo-secao h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    color: var(--cor-dourada);
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    text-wrap: balance;
    background: var(--grad-texto-dourado);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.titulo-secao h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--cor-dourada), var(--cor-bronze));
    border-radius: 2px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-lenta) var(--ease-suave) .15s;
}

/* A sublinha cresce quando o bloco entra em cena (classe do reveal). */
.titulo-secao.revelado h2::after,
html:not(.js) .titulo-secao h2::after {
    transform: translateX(-50%) scaleX(1);
}

.titulo-secao p {
    font-size: 1.1rem;
    color: var(--cor-texto-cinza);
    max-width: 62ch;
    margin: .75rem auto 0;
}

/* --- Reveal no scroll ---------------------------------------------------
   O estado inicial é escondido e o JS adiciona .revelado quando o elemento
   entra na viewport. Antes havia `animation: fadeInUp` fixo nos cards: eles
   animavam no load, e o IntersectionObserver que existia no script.js não
   mudava nada (a classe chegava depois do elemento já estar visível).

   O estado escondido é escrito com seletores ESTÁTICOS (as próprias classes
   dos cards) e não por uma classe que o JS adicionaria: o script roda no fim
   do <body>, então marcar os elementos por JS os mostraria por um quadro
   antes de escondê-los. O `html.js` vem de um script de uma linha no <head>
   de cada view — sem JS nada disso se aplica e o conteúdo aparece normal. */
html.js [data-revelar],
html.js .caracteristica,
html.js .cartao-produto,
html.js .servico,
html.js .item-contato,
html.js .titulo-secao,
html.js .sistema-item,
html.js .equipamento,
html.js .comprar-info,
html.js .comprar-imagem {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-lenta) var(--ease-suave),
                transform var(--dur-lenta) var(--ease-suave);
    transition-delay: calc(var(--i, 0) * 90ms);
    will-change: opacity, transform;
}

html.js .revelado {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Entrada do hero: acontece no load (o hero já está em cena), então é
   animation e não observer. */
html.js .texto-hero > *,
html.js .imagem-hero {
    animation: entrada-hero .9s var(--ease-suave) both;
}

html.js .texto-hero > *:nth-child(1) { animation-delay: .05s; }
html.js .texto-hero > *:nth-child(2) { animation-delay: .16s; }
html.js .texto-hero > *:nth-child(3) { animation-delay: .27s; }
html.js .imagem-hero { animation-delay: .2s; }

@keyframes entrada-hero {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* Grade de características */
.grade-caracteristicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

/* Superfície comum dos cards: o "spotlight" que segue o cursor mora aqui.
   Substitui o tilt 3D que o script.js aplicava em style.transform — inline,
   ele vencia o :hover do CSS e cancelava o levantar do card. */
.caracteristica,
.cartao-produto,
.servico {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.caracteristica::after,
.cartao-produto::after,
.servico::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
                rgba(var(--dourada-rgb), .16), transparent 62%);
    opacity: 0;
    transition: opacity var(--dur-media) ease;
}

@media (hover: hover) {
    .caracteristica:hover::after,
    .cartao-produto:hover::after,
    .servico:hover::after {
        opacity: 1;
    }
}

.caracteristica {
    background: var(--cor-fundo-card);
    padding: 2.5rem;
    border-radius: var(--raio-md);
    text-align: center;
    border: 1px solid var(--cor-borda);
    transition: transform var(--dur-media) var(--ease-suave),
                border-color var(--dur-media) ease,
                box-shadow var(--dur-media) ease;
}

.caracteristica::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* Atrás do conteúdo: a varredura passava por cima do texto do card. */
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--dourada-rgb), .10), transparent);
    transition: left .6s ease;
}

.caracteristica:hover::before {
    left: 100%;
}

.caracteristica:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--dourada-rgb), .8);
    box-shadow: var(--brilho-dourado);
}

.icone-caracteristica {
    width: 80px;
    height: 80px;
    background: var(--grad-dourado);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--cor-primaria);
    box-shadow: 0 10px 24px -12px rgba(var(--dourada-rgb), .9);
    transition: transform var(--dur-media) var(--ease-suave);
}

.caracteristica:hover .icone-caracteristica {
    transform: translateY(-2px) scale(1.06);
}

.caracteristica h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--cor-dourada);
}

/* Grade de produtos */
.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
}

.cartao-produto {
    background: var(--cor-fundo-card);
    padding: 2.5rem;
    border-radius: var(--raio-md);
    border: 1px solid var(--cor-borda);
    transition: transform var(--dur-media) var(--ease-suave),
                border-color var(--dur-media) ease,
                box-shadow var(--dur-media) ease;
}

.cartao-produto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
    background: var(--grad-dourado);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-media) var(--ease-suave);
}

.cartao-produto:hover::before {
    transform: scaleX(1);
}

.cartao-produto:hover {
    transform: translateY(-6px);
    box-shadow: var(--brilho-dourado);
    border-color: rgba(var(--dourada-rgb), .8);
}

.icone-produto {
    width: 70px;
    height: 70px;
    background: var(--grad-dourado);
    border-radius: var(--raio-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: var(--cor-primaria);
    box-shadow: 0 10px 24px -12px rgba(var(--dourada-rgb), .9);
    transition: transform var(--dur-media) var(--ease-suave);
}

.cartao-produto:hover .icone-produto {
    transform: translateY(-2px) rotate(-3deg);
}

.cartao-produto h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--cor-dourada);
}

.cartao-produto p {
    margin-bottom: 1.5rem;
    color: var(--cor-texto-cinza);
    line-height: 1.6;
}

.lista-recursos {
    list-style: none;
}

.lista-recursos li {
    padding: 0.5rem 0;
    padding-left: 1.75rem;
    position: relative;
    color: var(--cor-texto-cinza);
}

.lista-recursos li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: .5rem;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    font-size: .7rem;
    border-radius: 50%;
    background: rgba(var(--dourada-rgb), .18);
    color: var(--cor-dourada-clara);
    font-weight: bold;
}

/* Grade de serviços */
.grade-servicos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.servico {
    background: var(--cor-fundo-card);
    padding: 2rem;
    border-radius: var(--raio-md);
    text-align: center;
    border: 1px solid var(--cor-borda);
    transition: transform var(--dur-media) var(--ease-suave),
                border-color var(--dur-media) ease,
                box-shadow var(--dur-media) ease;
}

.servico:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--dourada-rgb), .8);
    box-shadow: var(--brilho-dourado);
}

.servico i {
    font-size: 2.6rem;
    color: var(--cor-dourada);
    margin-bottom: 1rem;
    display: inline-block;
    transition: transform var(--dur-media) var(--ease-suave);
    filter: drop-shadow(0 6px 14px rgba(var(--dourada-rgb), .5));
}

.servico:hover i {
    transform: translateY(-3px) scale(1.08);
}

.servico h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--cor-dourada);
}

.servico p {
    color: var(--cor-texto-cinza);
    line-height: 1.6;
}

/* Seção de contato */
.grade-contato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.informacoes-contato {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.item-contato {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--cor-fundo-card);
    border-radius: var(--raio-md);
    border: 1px solid var(--cor-borda);
    transition: transform var(--dur-media) var(--ease-suave),
                border-color var(--dur-media) ease,
                box-shadow var(--dur-media) ease;
}

.item-contato:hover {
    border-color: rgba(var(--dourada-rgb), .8);
    transform: translateX(3px);
    box-shadow: var(--sombra-2);
}

.item-contato i {
    font-size: 1.1rem;
    color: var(--cor-dourada-clara);
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--dourada-rgb), .12);
    border: 1px solid rgba(var(--dourada-rgb), .3);
    margin-top: 2px;
}

.item-contato h3 {
    color: var(--cor-dourada);
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
}

.item-contato p {
    color: var(--cor-texto-cinza);
    line-height: 1.5;
}

.formulario-contato {
    background: var(--cor-fundo-card);
    padding: 2.5rem;
    border-radius: var(--raio-lg);
    border: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-3);
}

.grupo-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.formulario-contato input,
.formulario-contato textarea {
    width: 100%;
    padding: 1rem;
    background: var(--cor-primaria);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    color: var(--cor-texto-claro);
    font-family: inherit;
    transition: border-color var(--dur-rapida) ease,
                box-shadow var(--dur-rapida) ease,
                background var(--dur-rapida) ease;
}

.formulario-contato input:hover,
.formulario-contato textarea:hover {
    border-color: rgba(var(--dourada-rgb), .55);
}

.formulario-contato input:focus,
.formulario-contato textarea:focus {
    outline: none;
    border-color: var(--cor-dourada);
    background: #050505;
    box-shadow: 0 0 0 3px rgba(var(--dourada-rgb), .22);
}

/* Campo preenchido continua marcado em dourado: dá o retorno de "ok" sem
   precisar de validação em JS. */
.formulario-contato input:not(:placeholder-shown),
.formulario-contato textarea:not(:placeholder-shown) {
    border-color: rgba(var(--dourada-rgb), .45);
}

.formulario-contato textarea {
    resize: vertical;
    min-height: 120px;
    margin-bottom: 1.5rem;
}

.formulario-contato input::placeholder,
.formulario-contato textarea::placeholder {
    color: #666;
}

.formulario-contato .botao {
    width: 100%;
    justify-content: center;
}

/* Footer */
.rodape {
    background: var(--cor-primaria);
    padding: 3rem 0 1rem;
    border-top: 1px solid var(--cor-borda);
    position: relative;
}

.rodape::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, 92%);
    height: 1px;
    background: var(--grad-linha);
}

.conteudo-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.logo-rodape {
    display: flex;
    align-items: center;
    gap: 10px;
}

.redes-sociais {
    display: flex;
    gap: 1rem;
}

.redes-sociais a {
    width: 45px;
    height: 45px;
    background: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-dourada);
    text-decoration: none;
    transition: all var(--dur-media) var(--ease-suave);
}

.redes-sociais a:hover {
    background: var(--grad-dourado);
    color: var(--cor-primaria);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -12px rgba(var(--dourada-rgb), .9);
}

.linha-divisoria {
    height: 1px;
    background: var(--cor-borda);
    margin: 2rem 0 1rem;
}

.direitos-autorais {
    text-align: center;
    color: var(--cor-texto-cinza);
    font-size: 0.9rem;
}

/* --- Menu mobile -------------------------------------------------------
   Estava sendo injetado como <style> pelo script.js. Injetado depois do
   <link>, qualquer regra dessas ganhava do estilo.css sem aviso; agora
   mora aqui, junto do resto. */
.menu-navegacao.ativo {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    flex-direction: column;
    gap: 0;
    padding: 1rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(var(--dourada-rgb), .3);
    box-shadow: var(--sombra-3);
}

/* Estado BASE visível e a animação só embeleza a entrada: se a animação
   não rodar (movimento reduzido, navegador antigo, aba em segundo plano),
   um menu de navegação invisível deixaria o site sem saída no celular. */
.menu-navegacao.ativo li {
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    animation: menu-item .35s var(--ease-suave) both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

.menu-navegacao.ativo li:last-child {
    border-bottom: none;
}

/* Em coluna o filete vertical não separa nada — vira um risco solto na
   lateral. */
.menu-navegacao.ativo .menu-destaque--primeiro {
    padding-left: 0;
    border-left: none;
}

@keyframes menu-item {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* --- Notificações (também vinham do <style> injetado pelo JS) ---------- */
.notificacao {
    font-family: var(--fonte-corpo);
}

.conteudo-notificacao {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fechar-notificacao {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem;
    margin-left: auto;
}

.fechar-notificacao:hover {
    opacity: 0.7;
}

@keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(110%); opacity: 0; }
}

/* Responsividade */
@media (max-width: 900px) {
    .conteudo-hero {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .subtitulo {
        margin-left: auto;
        margin-right: auto;
    }

    .botoes-acao {
        justify-content: center;
    }
}

/* O menu tem 9 itens: abaixo de ~1100px ele não cabe na linha e vazava para
   fora da tela (o hamburger só entrava em 768px). O ícone de conta fica fora
   do <ul> e continua visível junto do hamburger. */
@media (max-width: 1100px) {
    .menu-navegacao {
        display: none;
    }

    .menu-mobile {
        display: block;
    }
}

@media (max-width: 768px) {
    .titulo-principal {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }

    .grade-contato {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .grupo-campos {
        grid-template-columns: 1fr;
    }

    .conteudo-rodape {
        flex-direction: column;
        gap: 2rem;
    }

    .destaque-visual {
        height: 300px;
        /* Parallax só no desktop: em tela pequena o hero já ocupa tudo e o
           deslocamento só criava buraco no layout. */
        transform: none;
    }

    .secao-hero::after {
        opacity: .4;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .grade-caracteristicas,
    .grade-produtos,
    .grade-servicos {
        grid-template-columns: 1fr;
    }

    .grade-caracteristicas {
        gap: 1.5rem;
    }

    .caracteristica,
    .formulario-contato {
        padding: 1.75rem;
    }

    .botao {
        padding: 0.85rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* Movimento reduzido: some tudo que se mexe sozinho e o reveal entrega o
   conteúdo já visível. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    html.js [data-revelar],
    html.js .caracteristica,
    html.js .cartao-produto,
    html.js .servico,
    html.js .item-contato,
    html.js .titulo-secao,
    html.js .sistema-item,
    html.js .equipamento,
    html.js .comprar-info,
    html.js .comprar-imagem,
    html.js .texto-hero > *,
    html.js .imagem-hero {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .titulo-secao h2::after {
        transform: translateX(-50%) scaleX(1) !important;
    }

    .destaque-visual {
        transform: none !important;
    }

    .secao-hero::after {
        opacity: .35;
    }
}

/* ==========================================================================
   Seção Equipamentos — o que é cadastrado no ERP (galeria + vídeo).
   A seção existia no menu do cabeçalho desde sempre, mas não tinha destino
   na página; este bloco é o destino.
   ========================================================================== */

.secao-equipamentos {
    padding: 80px 0;
    background: var(--cor-primaria);
    position: relative;
}

.equipamento {
    display: grid;
    /* A mídia manda no layout (é o que vende a máquina) e o texto acompanha.
       Abaixo de 900px vira uma coluna — ver o media query no fim do bloco. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 36px 0;
    border-top: 1px solid var(--cor-borda);
}

.equipamento:first-of-type {
    border-top: none;
}

.equipamento-midia {
    min-width: 0;   /* sem isto o grid não deixa a imagem encolher e estoura a linha */
}

/* Palco: video e foto ocupam o MESMO espaco, um de cada vez. A altura fica
   travada AQUI (aspect-ratio no palco, filhos absolutos) para permitir o
   crossfade — com display:none nos filhos não há como cruzar as opacidades,
   e a página pulava a cada troca. */
.equipamento-palco {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--raio-md);
    overflow: hidden;
    border: 1px solid var(--cor-borda);
    background: var(--cor-fundo-card);
    box-shadow: var(--sombra-2);
}

.equipamento-imagem,
.equipamento-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    border-radius: 0;
    background: #000;
    transition: opacity .25s ease, transform var(--dur-lenta) var(--ease-suave);
}

.equipamento-imagem {
    object-fit: cover;
}

/* visibility além da opacidade: sem ela o vídeo escondido continuava
   recebendo o clique por cima da foto. */
.equipamento-palco > .oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.equipamento-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.equipamento-miniatura {
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--raio-sm);
    background: none;
    cursor: pointer;
    line-height: 0;
    transition: border-color var(--dur-rapida) ease,
                transform var(--dur-media) var(--ease-suave),
                box-shadow var(--dur-media) ease;
}

.equipamento-miniatura:hover {
    border-color: rgba(var(--dourada-rgb), .7);
    transform: translateY(-2px);
}

.equipamento-miniatura.ativa {
    border-color: var(--cor-dourada);
    transform: scale(1.04);
    box-shadow: 0 8px 18px -8px rgba(var(--dourada-rgb), .9);
}

.equipamento-miniatura img {
    width: 84px;
    height: 62px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.equipamento-miniatura--video {
    position: relative;
}

.equipamento-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    /* Escurece a miniatura sob o icone: o play branco sobre foto clara sumia. */
    background: rgba(0, 0, 0, .45);
    border-radius: 6px;
    pointer-events: none;
}

.equipamento-info h3 {
    color: var(--cor-dourada);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    margin-bottom: 14px;
}

.equipamento-descricao,
.equipamento-especificacoes p {
    color: var(--cor-texto-cinza);
    line-height: 1.7;
    /* O texto é digitado no ERP com quebras de linha — sem isto vira um
       parágrafo corrido e a lista de recursos some. */
    white-space: pre-line;
}

.equipamento-especificacoes {
    margin-top: 20px;
    padding: 16px 18px;
    border-left: 3px solid var(--cor-dourada);
    background: linear-gradient(90deg, rgba(var(--dourada-rgb), .10), var(--cor-fundo-card) 60%);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}

.equipamento-especificacoes h4 {
    color: var(--cor-texto-claro);
    margin-bottom: 8px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.equipamento-info .botao {
    margin-top: 24px;
    display: inline-flex;
}

@media (max-width: 900px) {
    .equipamento {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ---------------------------------------------------------------------------
   Marca e carrinho no cabecalho (proprios deste site)
   --------------------------------------------------------------------------- */

/* SYNC em peso normal, LASER em negrito: separa as duas metades sem precisar de
   duas fontes nem de imagem. */
.nome-empresa strong { font-weight: 800; }

.acao-conta { position: relative; }

.badge-carrinho {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--cor-destaque);
    color: #05070a;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}