/* ==========================================================================
   WP SOLUÇÕES — refino visual
   Carregada depois de production-site.css, em todas as páginas do site.

   Não muda estrutura nem conteúdo: só a camada de acabamento — profundidade
   no topo das páginas internas, cartões com hierarquia melhor, foco e
   rolagem consistentes. Vive num arquivo separado justamente para poder sair
   inteira se não agradar: apague o <link> e o site volta ao estado anterior.
   ========================================================================== */

/* -------------------------------------------------- comportamento base --- */

html{
  scroll-behavior:smooth;
  /* Âncora não pode parar embaixo do cabeçalho fixo. */
  scroll-padding-top:86px;
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

.wp-site ::selection{background:rgba(15,98,254,.22);color:var(--ink)}

/* Um anel de foco só, igual no site inteiro. Antes cada componente resolvia
   o seu, e em vários o foco do teclado simplesmente não aparecia. */
.wp-site a:focus-visible,
.wp-site button:focus-visible,
.wp-site .wp-btn:focus-visible,
.wp-site input:focus-visible,
.wp-site textarea:focus-visible,
.wp-site select:focus-visible{
  outline:2px solid var(--blue-500);
  outline-offset:3px;
  border-radius:8px;
}

/* ------------------------------------------- topo das páginas internas --- */

/* O topo era uma faixa azul chapada com um anel no canto. Ao lado da home,
   que tem profundidade, as páginas internas pareciam de outro site. Aqui
   voltam as camadas: duas auroras, a grade fina e uma borda que dissolve na
   seção seguinte em vez de cortar reto. */
.wp-site .page-hero{
  background-color:#040d24;
  background-image:
    radial-gradient(50% 78% at 88% -20%,rgba(0,212,255,.30),transparent 62%),
    /* A segunda aurora sobe mais do que parece necessario: nas paginas de
       topo curto (contato, duvidas) um brilho ancorado no rodape nao chega a
       aparecer, e a faixa fica chapada. */
    radial-gradient(52% 104% at 0% 104%,rgba(15,98,254,.42),transparent 66%),
    linear-gradient(122deg,#030a1c 0%,#08245a 58%,#0754ad 142%);
  padding-block:clamp(54px,5.4vw,78px) clamp(62px,6vw,88px);
}
.wp-site .page-hero::before{
  opacity:.55;
  background-size:64px 64px;
  mask-image:radial-gradient(78% 110% at 72% -10%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(78% 110% at 72% -10%,#000 0%,transparent 72%);
}
/* A faixa que dissolve no conteúdo. `inset:auto 0 0` em vez de `bottom:0`
   isolado porque o ::after herdado já posiciona o anel por `top`. */
.wp-site .page-hero .container-xl::after{
  content:"";position:absolute;left:50%;bottom:calc(-1 * clamp(62px,6vw,88px));
  width:100vw;height:clamp(62px,6vw,88px);transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,11,30,.32));
}

.wp-site .page-hero h1{letter-spacing:-.035em}
.wp-site .page-hero p{color:#C9DAF7}

/* O caminho de navegação vira uma pílula: some no fundo escuro quando é só
   texto cinza-azulado sobre azul. */
.wp-site .breadcrumb-trail{
  display:inline-flex;padding:7px 14px;margin-bottom:20px;
  border-radius:999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:.78rem;
}
.wp-site .breadcrumb-trail i{font-size:.6rem;opacity:.6}

.wp-site .page-hero__signal{
  background:linear-gradient(140deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 24px 54px rgba(0,5,20,.32);
}

/* --------------------------------------------------- cartões e seções --- */

/* O cartao do catalogo ja tinha o fio de luz no topo (theme.css: nasce com
   scaleX(.18) e completa no hover) -- redefinir aqui apagava aquele tracinho
   inicial, que e o que sugere o movimento. O que falta e o levantar. */
.wp-site .service-full,
.wp-site .seg-jornada__passos>li{
  transition:transform var(--med) var(--ease-out),box-shadow var(--med) var(--ease-out),
             border-color var(--med) var(--ease-out);
}
.wp-site .service-full:hover,
.wp-site .seg-jornada__passos>li:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 56px rgba(10,27,66,.13);
  border-color:var(--slate-200);
}

/* Os passos da jornada nao tinham fio nenhum. */
.wp-site .seg-jornada__passos>li{position:relative;overflow:hidden}
.wp-site .seg-jornada__passos>li::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--blue-600),var(--cyan-400));
  transform:scaleX(.18);transform-origin:left;
  transition:transform var(--med) var(--ease-out);
}
.wp-site .seg-jornada__passos>li:hover::before{transform:scaleX(1)}

/* A miniatura do card respira ao passar o mouse, sem empurrar o texto. */
.wp-site .service-full__print img{transition:transform var(--med) var(--ease-out)}
.wp-site .service-full:hover .service-full__print img{transform:scale(1.045)}

/* O olho do eyebrow: o tracinho antes do texto ganha gradiente. */
.wp-site .eyebrow::before{
  background:linear-gradient(90deg,var(--blue-600),var(--cyan-400));
}

/* ------------------------------------------------------------ botões --- */

.wp-site .wp-btn{position:relative;overflow:hidden}
.wp-site .wp-btn-primary{
  box-shadow:0 14px 30px rgba(15,98,254,.32),inset 0 1px 0 rgba(255,255,255,.22);
}
.wp-site .wp-btn-primary:hover{
  box-shadow:0 18px 38px rgba(15,98,254,.4),inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateY(-2px);
}
.wp-site .wp-btn-primary:active{transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .wp-site .service-full,.wp-site .seg-jornada__passos>li,
  .wp-site .wp-btn-primary,.wp-site .service-full__print img{transition:none}
  .wp-site .service-full:hover,.wp-site .seg-jornada__passos>li:hover,
  .wp-site .wp-btn-primary:hover{transform:none}
  .wp-site .service-full:hover .service-full__print img{transform:none}
}

/* ----------------------------------------------------- cartões de valor --- */

/* Os três cartões de "Nossos valores" eram os únicos da casa sem tratamento:
   caixa branca, ícone pequeno, sem reação ao mouse. Ficavam parecendo de
   outro site ao lado dos cartões do catálogo. */
.wp-site .value-card{
  position:relative;overflow:hidden;
  transition:transform var(--med) var(--ease-out),box-shadow var(--med) var(--ease-out),
             border-color var(--med) var(--ease-out);
}
.wp-site .value-card::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--blue-600),var(--cyan-400));
  transform:scaleX(.18);transform-origin:left;
  transition:transform var(--med) var(--ease-out);
}
.wp-site .value-card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 56px rgba(10,27,66,.13);
  border-color:var(--slate-200);
}
.wp-site .value-card:hover::before{transform:scaleX(1)}
.wp-site .value-card .system-icon{
  box-shadow:0 12px 26px rgba(11,79,209,.22);
  transition:transform var(--med) var(--ease-out);
}
.wp-site .value-card:hover .system-icon{transform:translateY(-2px) rotate(-3deg)}

/* --------------------------------------------------------- marca no sobre --- */

/* O painel da marca na página Sobre era uma caixa escura com o ícone dentro.
   Um halo atrás e o ícone maior transformam "imagem colocada ali" em peça
   de identidade. */
.wp-site .about-visual{position:relative;isolation:isolate}
.wp-site .about-visual::after{
  content:"";position:absolute;z-index:-1;inset:-8% -6%;
  background:radial-gradient(52% 52% at 50% 45%,rgba(0,212,255,.28),transparent 70%);
  filter:blur(6px);pointer-events:none;
}
.wp-site .about-brand-icon{
  position:relative;z-index:1;
  filter:drop-shadow(0 26px 48px rgba(0,80,190,.45));
  transition:transform var(--med) var(--ease-out);
}
/* As duas etiquetas vinham ANTES da imagem no HTML e nenhuma tinha camada:
   o simbolo da marca, grande e opaco, era pintado por cima e comia metade
   de "Sistemas integrados". Lia-se "...temas integrados". */
.wp-site .about-chip{z-index:2}

/* No celular o painel encolhe e a etiqueta de baixo, ancorada pela direita,
   passava da borda -- ficava lendo "Sistemas integrado". Ancorando as duas
   pela esquerda e limitando a largura, nenhuma sai do painel em largura
   nenhuma. */
@media(max-width:640px){
  .wp-site .about-chip{
    left:14px;right:auto;max-width:calc(100% - 28px);
    font-size:.68rem;padding:7px 11px;
  }
  .wp-site .about-chip--1{top:14px}
  .wp-site .about-chip--2{bottom:14px}
}
.wp-site .about-visual:hover .about-brand-icon{transform:translateY(-6px) scale(1.02)}

/* ------------------------------------------------------------ perguntas --- */

.wp-site .faq-item{
  position:relative;overflow:hidden;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
/* Barra da marca na pergunta aberta: sem ela, aberta e fechada só se
   distinguem pelo sinal de mais virado, que é pequeno demais para orientar
   a leitura numa lista de seis. */
.wp-site .faq-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--blue-600),var(--cyan-400));
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--med) var(--ease-out);
}
.wp-site .faq-item:has(.collapse.show)::before{transform:scaleY(1)}
.wp-site .faq-item:has(.collapse.show){box-shadow:var(--shadow-md)}
.wp-site .faq-trigger{transition:color var(--fast) var(--ease)}
.wp-site .faq-trigger:hover{color:var(--blue-700)}

/* ------------------------------------------------------------- formulário --- */

.wp-site input:not([type=checkbox]):not([type=radio]),
.wp-site textarea,
.wp-site select{
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             background-color var(--fast) var(--ease);
}
.wp-site input:not([type=checkbox]):not([type=radio]):hover,
.wp-site textarea:hover,
.wp-site select:hover{border-color:var(--slate-300)}
.wp-site input:not([type=checkbox]):not([type=radio]):focus,
.wp-site textarea:focus,
.wp-site select:focus{
  border-color:var(--blue-500);
  box-shadow:0 0 0 4px rgba(15,98,254,.12);
  background:#fff;
}

/* ---------------------------------------------------------------- rodapé --- */

/* Fio da marca no alto: separa o rodapé do conteúdo sem precisar de borda
   dura, e é o mesmo gesto do topo das páginas. */
.wp-site .site-footer{position:relative}
.wp-site .site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue-600),var(--cyan-400),transparent);
  opacity:.55;
}

.wp-site .footer-col h4{position:relative;padding-bottom:10px}
.wp-site .footer-col h4::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-400));
}

/* Sublinhado que cresce da esquerda. Um rodapé com dez links iguais não dá
   nenhum retorno ao passar o mouse; este dá, e sem mexer no espaçamento. */
.wp-site .footer-col ul a{
  position:relative;display:inline-block;
  transition:color var(--fast) var(--ease);
}
.wp-site .footer-col ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--med) var(--ease-out);
}
.wp-site .footer-col ul a:hover::after{transform:scaleX(1)}

.wp-site .footer-social a{
  transition:transform var(--fast) var(--ease),background-color var(--fast) var(--ease);
}
.wp-site .footer-social a:hover{transform:translateY(-2px)}

/* ------------------------------------------------------- chamada final --- */

.wp-site .final-cta--premium{position:relative;overflow:hidden}
.wp-site .final-cta--premium::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 78% at 88% 8%,rgba(0,212,255,.20),transparent 66%);
}
.wp-site .final-cta--premium>*{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .wp-site .value-card,.wp-site .value-card .system-icon,
  .wp-site .about-brand-icon,.wp-site .footer-col ul a::after,
  .wp-site .footer-social a{transition:none}
  .wp-site .value-card:hover,.wp-site .footer-social a:hover{transform:none}
  .wp-site .value-card:hover .system-icon,
  .wp-site .about-visual:hover .about-brand-icon{transform:none}
}

/* --------------------------------------------------- galeria do sistema --- */

/* O selo "Ampliar imagem" ficava permanentemente sobre o canto do print,
   tapando justamente um pedaco da tela que a pagina existe para mostrar.
   Onde ha mouse, ele aparece ao aproximar, junto com um veu que explica que
   a imagem inteira e clicavel. Onde nao ha (celular, tablet), continua fixo:
   sem hover, esconder o selo seria esconder a funcao. */
@media (hover:hover){
  .wp-site .system-gallery__item span{
    left:50%;bottom:50%;transform:translate(-50%,50%) scale(.94);
    opacity:0;padding:11px 16px;font-size:.74rem;
    transition:opacity var(--med) var(--ease-out),transform var(--med) var(--ease-out);
  }
  .wp-site .system-gallery__item::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(3,18,48,.06),rgba(3,18,48,.34));
    opacity:0;transition:opacity var(--med) var(--ease-out);
  }
  .wp-site .system-gallery__item:hover span,
  .wp-site .system-gallery__item:focus-visible span{
    opacity:1;transform:translate(-50%,50%) scale(1);
  }
  .wp-site .system-gallery__item:hover::after,
  .wp-site .system-gallery__item:focus-visible::after{opacity:1}
}

/* A moldura acompanha o gesto do resto do site. */
.wp-site .system-gallery__item{
  transition:border-color var(--med) var(--ease-out),box-shadow var(--med) var(--ease-out),
             transform var(--med) var(--ease-out);
}
.wp-site .system-gallery__item:hover{
  transform:translateY(-3px);
  border-color:var(--sky-300);
  box-shadow:0 26px 54px rgba(8,26,66,.14);
}

/* O print do topo tambem e um link desde a ultima revisao; faltava dizer
   isso ao ponteiro e ao teclado. */
.wp-site .system-detail-showcase__frame a{display:block;cursor:zoom-in}
.wp-site .system-detail-showcase__frame img{transition:transform var(--med) var(--ease-out)}
.wp-site .system-detail-showcase__frame a:hover img{transform:scale(1.015)}

@media(prefers-reduced-motion:reduce){
  .wp-site .system-gallery__item,
  .wp-site .system-gallery__item img,
  .wp-site .system-detail-showcase__frame img{transition:none}
  .wp-site .system-gallery__item:hover,
  .wp-site .system-gallery__item:hover img,
  .wp-site .system-detail-showcase__frame a:hover img{transform:none}
}

/* --------------------------------------------------------- impressão --- */

@media print{
  .wp-site .page-hero{background:#fff !important;color:#000}
  .wp-site .page-hero h1,.wp-site .page-hero p{color:#000}
}


/* =====================================================================
   RETORNO AO MOUSE — dois cliques que não se anunciavam

   Auditoria de 01/10/2026: o mouse foi levado, um a um, a 470 elementos
   clicáveis das 12 páginas públicas, e o estilo computado foi lido antes e
   depois. Quase tudo respondia. Dois não respondiam a nada:

     .brand-logo            o logo do cabeçalho, em TODAS as páginas. Leva
                            para a home e não tinha nenhuma regra :hover em
                            arquivo nenhum.
     .service-full h3 > a   o título de cada sistema em /servicos. É o
                            caminho principal para a página do produto e
                            parecia texto comum.

   Um alvo que não reage ao mouse é lido como "não é clicável" — a pessoa
   não tenta. Por isso isto é correção de uso, não enfeite.

   Fica no fim do refino.css, que é a última folha carregada no site.
   ===================================================================== */
.wp-site .brand-logo { transition: opacity .2s ease, transform .2s ease; }
.wp-site .brand-logo:hover { opacity: .82; transform: translateY(-1px); }

.wp-site .service-full h3 > a { transition: color .2s ease; }
.wp-site .service-full h3 > a:hover {
  color: #0f62fe;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* O arquivo inteiro respeita quem pediu menos movimento; estas duas não
   podem ser exceção. A cor e o sublinhado ficam: eles informam, não animam. */
@media (prefers-reduced-motion: reduce) {
  .wp-site .brand-logo { transition: none; }
  .wp-site .brand-logo:hover { transform: none; }
  .wp-site .service-full h3 > a { transition: none; }
}