/* TechJá — folha de estilo do site.
   Extraída do <style> inline do index.html em 05/10/2026, quando o site
   deixou de ser uma página só. Paleta e tipografia vêm do design-guide.md
   desta pasta — extraídas do que já está no ar, nada inventado. */

:root{
  /* Paleta oficial da TechJá — extraída do site no ar, nada inventado. */
  --azul:#0089CC;          /* azul do logo (amostrado do PNG) */
  --azul-fundo:#2F478E;    /* primária do kit Elementor */
  --azul-claro:#81A0D2;    /* acento do kit Elementor */
  --azul-escuro:#1E2F63;   /* sombra da primária, para fundos */
  --tinta:#1D1D1D;         /* preto do logotipo */
  --cinza:#54595F;
  --texto:#5E6368;
  --gelo:#F3F7FC;
  --borda:#E2EAF4;
  --zap:#25D366;

  /* ===== COR DOS BOTÕES — o interruptor fica aqui =====
     Todos os CTAs da página (hero, cards de orçamento, especialista, loja e o
     botão flutuante) leem estas quatro linhas. Trocar aqui troca a página toda.

     TESTE EM CURSO desde 04/10/2026: VERDE (WhatsApp).
     Para voltar ao AZUL da marca, use:
       --cta:#0089CC;  --cta-2:#0A6FB0;  --cta-txt:#fff;      --cta-rgb:0,137,204;  */
  --cta:#25D366;          /* cor principal do botão */
  --cta-2:#17B352;        /* fim do degradê */
  --cta-txt:#0B2B16;      /* cor do texto sobre o botão */
  --cta-rgb:37,211,102;   /* mesma cor em RGB, para o brilho */
  --container:1180px;
  --raio:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--tinta);
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Roboto Slab","Roboto",Georgia,serif; line-height:1.15; margin:0 0 .5em}
p{margin:0 0 1em}
a{color:var(--azul-fundo)}
img{max-width:100%; height:auto; display:block}
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 20px}
.secao{padding:72px 0}
@media (max-width:680px){
  .secao{padding:48px 0}
  .secao-cab{margin-bottom:28px}
}
.secao-cab{max-width:46em; margin:0 auto 42px}
.secao-cab.centro{text-align:center}
.secao-cab h2{font-size:clamp(1.7rem,4vw,2.4rem); color:var(--azul-fundo)}
/* Caixa alta por CSS, e não digitada no HTML: leitor de tela soletra palavra toda
   em maiúscula, e assim o texto do código continua legível. */
.secao-cab h2.caps{text-transform:uppercase; letter-spacing:.03em}
.cta-centro{text-align:center; margin:38px 0 0}
#diferenciais .secao-cab p{color:var(--tinta)}
.secao-cab p{color:var(--texto); font-size:1.05rem; margin:0}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:999px; font-weight:700; font-size:1rem;
  text-decoration:none; line-height:1.1; border:0; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn svg{width:22px; height:22px; flex:0 0 22px}
.btn:hover{transform:translateY(-2px)}
.btn-linha{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); padding:13px 24px}
.btn-linha:hover{background:rgba(255,255,255,.12); border-color:#fff}
/* Mesmo botão, para FUNDO CLARO (06/10/2026). A .btn-linha de cima é branca:
   em seção clara ela some, igual ao que tinha acontecido com a .rodape-nav.
   Usar esta em .secao sem .escura. O azul é o --azul-fundo (8,7:1 sobre
   branco) e não o --azul do logo, que tem 3,85:1 e não serve para texto. */
.btn-linha-clara{background:transparent; color:var(--azul-fundo); border:2px solid var(--azul-fundo); padding:13px 24px}
.btn-linha-clara:hover{background:var(--azul-fundo); color:#fff}
/* Botão de ação da página. A cor vem dos tokens --cta lá em cima: nenhum valor
   de cor é escrito aqui, para que a troca seja num lugar só. */
.btn-cta{
  background:linear-gradient(145deg, var(--cta) 0%, var(--cta-2) 100%);
  color:var(--cta-txt);
  box-shadow:0 10px 26px rgba(var(--cta-rgb), .42);
}
.btn-cta:hover{
  background:linear-gradient(145deg, var(--cta) 0%, var(--cta) 100%);
  box-shadow:0 14px 34px rgba(var(--cta-rgb), .55);
}

/* ---------- Topo ---------- */
/* Topo parado: fica no alto da página e sai com a rolagem, em vez de acompanhar
   (04/10/2026). Era `position:sticky`. */
.topo{
  position:static; background:#fff; border-bottom:1px solid var(--borda);
}
/* Topo com a marca sozinha e centralizada — 04/10/2026, a pedido do Gabriel.
   Saíram o telefone e o botão de orçamento: o único caminho para a conversa na
   primeira dobra passa a ser o CTA do hero. */
.topo .container{display:flex; align-items:center; justify-content:center; min-height:78px}
.topo .marca{display:block}
.topo .marca img{width:188px}
@media (max-width:760px){
  .topo .marca img{width:150px}
}

/* ---------- Hero ---------- */
/* O fundo da abertura virou classe para poder repetir em outra seção (04/10/2026). */
.fundo-home{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 480px at 82% 18%, rgba(0,137,204,.55), transparent 62%),
    linear-gradient(145deg, var(--azul-escuro) 0%, var(--azul-fundo) 48%, #1F6FB0 100%);
}
.fundo-home .container{position:relative; z-index:1}
.hero{position:relative; overflow:hidden; color:#fff}
/* Fundo de partículas (04/10/2026) — substituiu a grade de linhas que estava aqui.
   Roda sobre o degradê da marca; se o script não carregar, fica só o degradê. */
#particles-js,#particles-loja{position:absolute; inset:0; z-index:0}
#particles-js canvas,#particles-loja canvas{display:block}
/* Véu que escurece as partículas atrás do texto, para o contraste do h1 não cair. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, rgba(20,34,74,.72) 0%, rgba(20,34,74,.34) 46%, rgba(20,34,74,0) 72%);
}
@media (max-width:940px){
  .hero::after{background:linear-gradient(180deg, rgba(20,34,74,.62) 0%, rgba(20,34,74,.42) 70%, rgba(20,34,74,.2) 100%)}
}
.hero .container{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:52px; align-items:center; padding:84px 0 92px}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.4rem); color:#fff; letter-spacing:-.01em}
.hero h1 .destaque{
  background:linear-gradient(180deg,#8FD6FF 0%, #35B4F0 55%, #0089CC 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{font-size:1.14rem; color:#DCE7F7; max-width:34em}
.hero-acoes{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:32px}
/* Notebook do hero (04/10/2026) — foto gerada com a TELA VAZIA de propósito.
   O logo entra por cima, por CSS, posicionado sobre a área ativa da tela, que foi
   medida na imagem recortada: x de 21,11% a 78,70%, y de 14,26% a 66,54%.
   Essas porcentagens só valem enquanto a imagem não for recortada — se trocar a
   foto, medir de novo antes de mexer em `.hero-logo`. */
/* A moldura existe só para a foto e o logo: as porcentagens do logo são relativas
   a ELA, não ao bloco inteiro. Se o `.hero-nota` entrar aqui dentro, o logo desce. */
.hero-moldura{
  position:relative; container-type:inline-size;
  /* Bem mais larga que a coluna, de propósito: o notebook sangra para fora do
     container e encosta na borda da seção. É o que dá presença de abertura, em vez
     de "foto dentro de uma coluna". O corte fica por conta do overflow do .hero. */
  width:142%; margin-left:-6%;
}
/* Brilho atrás do notebook: é o que o descola do fundo e faz ele parecer à frente,
   em vez de desenhado no degradê da seção. */
.hero-moldura::before{
  content:""; position:absolute; z-index:0;
  left:12%; right:12%; top:16%; bottom:14%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,137,204,.42), rgba(0,137,204,0) 72%);
  filter:blur(26px); pointer-events:none;
}
.hero-foto{
  position:relative; z-index:1;
  width:100%; display:block;
  /* O fundo da foto foi RECORTADO (WebP com transparência), então não há máscara
     nem retângulo para esconder: o notebook é uma silhueta solta sobre o hero.
     Por isso a sombra abaixo acompanha o contorno do equipamento, e não uma caixa. */
  filter:drop-shadow(0 .055em .07em rgba(0,10,32,.42)) drop-shadow(0 .018em .03em rgba(0,10,32,.3))
         brightness(1.04) contrast(1.03);
}
/* Reflexo no chão: a própria foto espelhada. Só funciona porque o fundo foi
   recortado — com fundo retangular isso viraria uma mancha quadrada embaixo.
   O deslocamento de 78% desconta a margem que sobra abaixo do notebook na foto. */
.hero-reflexo{
  position:absolute; left:0; top:78%; width:100%; z-index:0;
  transform:scaleY(-1); opacity:.26; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 58%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 58%, #000 100%);
}
@media (max-width:940px){ .hero-reflexo{display:none} }
/* O conteúdo da tela: logo em cima, nota do Google embaixo (04/10/2026).
   A caixa cobre exatamente a área ativa da tela, e tudo dentro dela é medido em
   `cqw` — 1cqw = 1% da largura da foto. É isso que faz o bloco encolher junto com
   o notebook e nunca vazar da tela, do desktop ao celular. */
.hero-tela{
  position:absolute; z-index:2;
  left:21.11%; top:14.26%; width:57.59%; height:52.28%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2cqw; padding:0 7%; text-align:center;
  text-shadow:0 2px 10px rgba(0,16,40,.6);
}
/* Fundo escuro atrás do logo (08/10/2026). O "JÁ" é azul da marca (#0090D0) e a
   tela da foto é azul-marinho: azul sobre azul, ele sumia. Como o guia de marca
   proíbe mudar a cor do logo, quem muda é o fundo — um "papel de parede" quase
   preto concentrado atrás dele, onde o azul do JÁ passa de ~2,5:1 para ~5:1.
   Fica dentro do stacking context da .hero-tela (z-index:2), então z-index:-1
   põe ele atrás do logo e da nota, mas na frente da foto. */
.hero-tela::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:6%; right:6%; top:2%; height:62%;
  background:radial-gradient(closest-side, rgba(2,6,22,.92), rgba(2,6,22,.55) 55%, rgba(2,6,22,0));
}
/* Brilho mais contido que o de 04/10: com .6 de opacidade o halo azul se
   misturava ao azul do JÁ e apagava o contorno das letras. */
.hero-logo{
  width:24cqw; height:auto;
  filter:drop-shadow(0 0 1.6cqw rgba(0,137,204,.38)) drop-shadow(0 0 .4cqw rgba(143,214,255,.22));
}
.hero-nota .nota{display:flex; align-items:center; justify-content:center; gap:1.6cqw}
.hero-nota .nota b{font-size:7.1cqw; font-family:"Roboto Slab",serif; line-height:1; color:#fff}
.hero-nota .estrelas{color:#FFC107; font-size:max(12px,2.8cqw); letter-spacing:.3cqw; line-height:1.2}
.hero-nota .fonte{color:#CBDBF0; font-size:max(11.5px,2.05cqw); display:block; text-align:left}
.hero-nota .legenda{color:#DCE7F7; font-size:max(12px,2.6cqw); line-height:1.4; margin:.8cqw 0 0}
/* Os `max()` acima são o piso de legibilidade: num celular 2,9cqw dá ~10px, que é
   pequeno demais para ler. O bloco continua cabendo dentro da tela com esse piso. */
/* Navegador sem suporte a container queries vê o bloco em tamanho fixo discreto. */
@supports not (width:1cqw){
  .hero-logo{width:48%}
  .hero-nota .nota b{font-size:2rem}
  .hero-nota .estrelas{font-size:.95rem}
  .hero-nota .fonte{font-size:.72rem}
  .hero-nota .legenda{font-size:.8rem}
}
@media (max-width:940px){
  /* `width:100%` é obrigatório aqui, não é enfeite: com `margin:0 auto` o item de
     grid deixa de esticar e passa a ser medido pelo conteúdo — e o conteúdo é a
     `.hero-moldura`, que tem `container-type:inline-size` e por isso não contribui
     com largura nenhuma. Sem esta linha o notebook some no celular. */
  .hero-visual{width:100%; max-width:560px; margin:0 auto}
  .hero-moldura{width:100%; margin-left:0}
}
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr; gap:36px; padding:56px 0 64px}
  /* No celular a imagem sobe para o topo: é ela que mostra a nota do Google, e
     empilhada ela ficava abaixo da dobra (04/10/2026). */
  .hero-visual{order:-1}
}

/* ---------- Grades e cards ---------- */
.grade{display:grid; gap:22px}
.grade-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.grade-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grade-4{grid-template-columns:1fr}}

/* Cards dos diferenciais (04/10/2026) — cartão escuro com borda acesa, no modelo
   que o Gabriel aprovou. São 5 cards em flex, e não grade de 5 colunas, para a
   última linha ficar com 2 cards centralizados em vez de dois buracos. */
.grade-5{display:flex; flex-wrap:wrap; justify-content:center}
.grade-5 > *{flex:0 1 calc(33.333% - 15px)}
/* Os dois últimos ocupam metade cada um: assim a segunda fileira fecha na mesma
   largura da primeira, em vez de ficar escalonada no meio (04/10/2026). */
.grade-5 > *:nth-child(4), .grade-5 > *:nth-child(5){flex:0 1 calc(50% - 11px)}
@media (max-width:980px){.grade-5 > *{flex:0 1 calc(50% - 11px)}}
@media (max-width:620px){.grade-5 > *,.grade-5 > *:nth-child(4),.grade-5 > *:nth-child(5){flex:0 1 100%}}

.card{
  background:#0D0E12; border:2px solid var(--azul); border-radius:12px;
  padding:30px 24px 32px; text-align:center;
  /* O brilho em volta é a assinatura do card: duas camadas, uma curta e acesa e
     outra larga e difusa. Sem a segunda ele vira só uma borda azul. */
  box-shadow:0 0 18px rgba(0,137,204,.5), 0 0 48px rgba(0,137,204,.2);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 0 22px rgba(0,137,204,.7), 0 0 64px rgba(0,137,204,.3);
}
.card .icone{
  margin:0 auto 16px; display:grid; place-items:center; color:var(--azul);
  filter:drop-shadow(0 0 9px rgba(0,137,204,.55));
}
.card .icone svg{width:52px; height:52px}
.card h3{font-size:1.08rem; color:#fff; margin-bottom:.5em}
.card p{font-size:.93rem; line-height:1.6; color:#B9C1CE; margin:0}

/* ---------- Seção escura de orçamento ---------- */
.escura{
  color:#fff;
  background:
    radial-gradient(760px 420px at 18% 10%, rgba(0,137,204,.42), transparent 60%),
    linear-gradient(160deg, var(--azul-escuro) 0%, var(--azul-fundo) 100%);
}
.escura .secao-cab h2{color:#fff}
.escura .secao-cab p{color:#CBDBF0}
/* Card claro, escolhido em 04/10/2026 depois do teste lado a lado contra o preto. */
.card-zap{
  background:#fff; border:1px solid var(--borda);
  border-radius:var(--raio); padding:24px 22px 26px; text-align:center;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 16px 38px rgba(10,18,44,.26);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-zap:hover{transform:translateY(-4px); border-color:var(--azul-claro); box-shadow:0 20px 44px rgba(10,18,44,.32)}
/* A moldura segue a proporção da foto (900x672). Antes era 148px fixos: a foto
   entrava com 214px de altura e era cortada pelo overflow, o que descentralizava
   o equipamento — mais visível no celular, onde o card é largo. */
.card-zap .arte{
  aspect-ratio:900/672; border-radius:12px; display:grid; place-items:center;
  color:#9FDCFF;
  background:linear-gradient(160deg, rgba(0,137,204,.3), rgba(30,47,99,.55));
  border:1px dashed rgba(143,214,255,.45);
  overflow:hidden;
}
.card-zap .arte svg{width:62px; height:62px}
/* Cards com foto real (900x672, fundo preto) — 04/10/2026. */
.card-zap .arte.foto{padding:0; border:1px solid var(--borda); background:#000}
.card-zap .arte.foto img{width:100%; height:100%; object-fit:contain}
.card-zap h3{font-size:1.14rem; color:var(--azul-fundo); margin:0}
.card-zap p{font-size:.92rem; color:var(--texto); margin:0; flex:1}
.card-zap p b{color:var(--tinta)}
.card-zap .btn{
  width:100%; white-space:nowrap;
  font-size:.92rem; padding:14px 14px; gap:8px;   /* cabe em uma linha no card estreito */
}
.card-zap .btn svg{width:19px; height:19px; flex:0 0 19px}

/* ---------- Avaliações ---------- */
/* Carrossel no modelo aprovado em 04/10/2026: resumo à esquerda, cards escuros
   deslizando à direita, com setas. */
.aval{background:var(--gelo)}
.aval-grid{display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:center}
@media (max-width:860px){.aval-grid{grid-template-columns:1fr; gap:26px}}
.aval-resumo{text-align:center}
.aval-resumo .selo{
  font-family:"Roboto",sans-serif; font-weight:900; font-size:1.5rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--azul-fundo); margin:0 0 6px;
}
.aval-estrelas{color:#FFC107; font-size:1.6rem; letter-spacing:4px; line-height:1.1}
.aval-estrelas.peq{font-size:1rem; letter-spacing:2px}
.aval-resumo .base{color:var(--texto); font-size:.93rem; margin:8px 0 14px}
.aval-resumo .base b{color:var(--tinta)}
.aval-resumo .g-marca{height:30px; width:auto; margin:0 auto; display:block}

/* --- trilho --- */
.aval-carrossel{position:relative; min-width:0}
.aval-trilho{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:4px 2px 14px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.aval-trilho::-webkit-scrollbar{display:none}
.aval-card{
  flex:0 0 282px; scroll-snap-align:start; margin:0; position:relative;
  background:#0D0E12; border:1px solid rgba(0,137,204,.5); border-radius:14px;
  padding:20px 20px 26px; color:#fff;
  box-shadow:0 10px 26px rgba(14,22,48,.18);
}
@media (max-width:420px){.aval-card{flex:0 0 86%}}
.aval-topo{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.aval-avatar{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:1.15rem;
  background:var(--c, var(--azul-fundo));
}
.aval-quem{display:flex; flex-direction:column; min-width:0; flex:1}
.aval-quem b{font-size:.98rem; color:#fff; line-height:1.25}
.aval-quem small{font-size:.82rem; color:#A7B3C4}
.aval-topo .g{width:20px; height:20px; flex:0 0 20px}
.aval-card blockquote{margin:10px 0 0; color:#D7DEE9; font-size:.94rem; line-height:1.55}
.aval-aspas{
  position:absolute; right:16px; bottom:8px; font-size:3.2rem; line-height:1;
  color:rgba(0,137,204,.45); font-family:Georgia,serif; pointer-events:none;
}
/* --- setas --- */
.aval-seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:#0D0E12; color:#fff; border:1px solid rgba(0,137,204,.6);
  display:grid; place-items:center; box-shadow:0 6px 18px rgba(14,22,48,.28);
  transition:background .15s ease, transform .15s ease;
}
.aval-seta:hover{background:var(--azul-fundo)}
.aval-seta[data-dir="-1"]{left:-14px}
.aval-seta[data-dir="1"]{right:-14px}
.aval-seta svg{width:18px; height:18px}
.aval-seta[hidden]{display:none}

.aval-link{text-align:center; margin:26px 0 0}
/* Links de texto com área de toque de 44px: no celular, link com 19px de altura
   é o tipo de alvo que a pessoa erra e desiste. */
.aval-link a{font-weight:700; text-decoration:none; display:inline-block; padding:12px 8px}
.aval-link a:hover{text-decoration:underline}
.loja-lista a{display:inline-block; padding:9px 0}

/* ---------- Loja ---------- */
.loja-grid{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center}
@media (max-width:860px){.loja-grid{grid-template-columns:1fr}}
.loja-lista{list-style:none; padding:0; margin:0 0 26px}
.loja-lista li{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.16)}
.loja-lista li:last-child{border-bottom:0}
.loja-lista svg{width:22px; height:22px; color:#8FD6FF; flex:0 0 22px; margin-top:5px}
.loja-lista b{display:block; color:#fff}
.loja-lista span{color:#fff; font-size:.97rem}
/* Links em branco também: o azul claro perdia legibilidade sobre o fundo da seção.
   O sublinhado fica para continuar sinalizando que é clicável. */
.loja-lista a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.loja-lista a:hover{text-decoration-thickness:2px}
#loja .secao-cab h2{color:#fff}
#loja .secao-cab p{color:#CBDBF0}
.mapa{border-radius:var(--raio); overflow:hidden; border:1px solid rgba(255,255,255,.2); line-height:0}
.mapa iframe{width:100%; height:380px; border:0}

/* ---------- Rodapé ---------- */
/* Rodapé claro (04/10/2026). Como o fundo virou branco, o logo tem de ser a versão
   normal — a negativa tem o "TECH" branco e sumiria aqui. */
/* Rodapé enxuto (04/10/2026): só a linha legal. Contato, endereço e horário saíram
   daqui porque já estão, completos, na seção "Venha até a loja", logo acima. */
.rodape{background:#fff; color:var(--texto); padding:26px 0; font-size:.93rem; border-top:1px solid var(--borda)}
.rodape-base{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.84rem; color:var(--texto)}

/* ---------- Botão flutuante ---------- */
.zap-flutuante{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(145deg, var(--cta) 0%, var(--cta-2) 100%);
  display:grid; place-items:center; color:var(--cta-txt);
  box-shadow:0 12px 30px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.zap-flutuante svg{width:32px; height:32px}
@media print{.zap-flutuante{display:none}}

/* =====================================================================
   PÁGINAS DE TEXTO (05/10/2026)

   Nasceu com a /politica-de-privacidade/. Serve qualquer página que seja
   só leitura — sobre, termos, e as páginas de serviço quando chegarem.
   Largura menor de propósito: linha longa demais cansa e derruba leitura.
   ===================================================================== */
.texto-legal{max-width:760px}
.texto-legal h1{font-size:clamp(28px,4vw,40px); color:var(--azul-fundo)}
.texto-legal h2{font-size:clamp(20px,2.6vw,25px); color:var(--azul-fundo); margin-top:2em}
.texto-legal p,
.texto-legal li{color:var(--texto); line-height:1.7}
.texto-legal ul{margin:0 0 1em; padding-left:1.3em}
.texto-legal li{margin-bottom:.5em}
.texto-legal strong{color:var(--tinta)}
.texto-legal .legal-data{color:var(--cinza); font-size:14px; margin-bottom:2em}

/* =====================================================================
   AVISO DE COOKIE (05/10/2026)

   Informa, não bloqueia — então é barra discreta no rodapé, não modal.
   `hidden` no HTML e revelada pelo site.js; o seletor abaixo só existe
   para o caso de alguém remover o atributo sem querer.
   ===================================================================== */
.cookie[hidden]{display:none}
.cookie{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
  display:flex; gap:14px; align-items:center; justify-content:center;
  flex-wrap:wrap;
  max-width:860px; margin:0 auto;
  padding:14px 18px;
  background:#fff; border:1px solid var(--borda); border-radius:14px;
  box-shadow:0 10px 30px rgba(30,47,99,.16);
}
.cookie p{margin:0; font-size:14px; color:var(--texto); line-height:1.5}
.cookie .btn{padding:9px 20px; font-size:14px; white-space:nowrap}
@media (max-width:680px){
  /* Sobe a barra para não cobrir o botão flutuante do WhatsApp, que é o
     CTA principal do site — aviso de cookie não pode esconder conversão. */
  .cookie{bottom:88px; flex-direction:column; align-items:stretch; text-align:center}
}

/* =====================================================================
   PÁGINAS DE SERVIÇO (05/10/2026)

   Nasceram com a /servicos/assistencia-tecnica-notebook/, a primeira URL
   própria de serviço que este site tem. A home reaproveita quase tudo —
   aqui só o que ela não tinha: trilha e passos.
   ===================================================================== */

/* ---------- Trilha (breadcrumb) ---------- */
.trilha{border-bottom:1px solid var(--borda); background:var(--gelo)}
.trilha .container{padding-top:12px; padding-bottom:12px; font-size:14px; color:var(--cinza)}
.trilha a{color:var(--azul-fundo); text-decoration:none}
.trilha a:hover{text-decoration:underline}
.trilha span[aria-hidden]{margin:0 6px; color:var(--azul-claro)}

/* ---------- Passos do "como funciona" ----------
   Numeração por contador de CSS, e não digitada no HTML: a ordem muda sem
   ninguém ter que renumerar na mão, que é onde o erro aparece. */
.passos{counter-reset:passo; list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media (max-width:1080px){.passos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.passos{grid-template-columns:1fr}}
.passos li{
  counter-increment:passo; position:relative;
  padding:28px 22px 24px; border:1px solid var(--borda); border-radius:12px;
  background:#fff;
}
.passos li::before{
  content:counter(passo);
  display:grid; place-items:center;
  width:36px; height:36px; margin-bottom:14px;
  border-radius:999px; background:var(--azul-fundo); color:#fff;
  font-weight:900; font-size:1rem;
}
.passos strong{display:block; color:var(--tinta); margin-bottom:.4em; font-size:1.02rem}
.passos span{display:block; color:var(--texto); font-size:.94rem; line-height:1.6}

/* =====================================================================
   COMPONENTES DE PÁGINA DE SERVIÇO — molde da GN, pele da TechJá
   (05/10/2026)

   A estrutura (hero de serviço, rótulo, FAQ em <details>, relacionados e
   CTA final) veio página a página do site da GN, que é chassi testado.
   As CORES não vieram: a GN é tema escuro com card em degradê; a TechJá
   é clara, com seções escuras pontuais. Cada regra abaixo foi reescrita
   nos tokens desta marca.
   ===================================================================== */

/* ---------- Rótulo acima do H2 ---------- */
.rotulo{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--azul); margin-bottom:12px;
}
.escura .rotulo{color:#8FD6FF}

/* ---------- Abertura da página de serviço ---------- */
.hero-servico{padding:48px 0 56px; position:relative; overflow:hidden}
.hero-servico::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 340px at 88% 0%, rgba(0,137,204,.10), transparent 62%);
}
.hero-servico .container{position:relative}
.hero-servico h1{max-width:16em; color:var(--azul-fundo)}
.hero-servico .hero-sub{font-size:1.08rem; color:var(--texto); max-width:40em}
.hero-servico-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:52px; align-items:center}
.hero-servico-img img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:0 22px 50px rgba(30,47,99,.18);
}
@media (max-width:860px){
  .hero-servico-grid{grid-template-columns:1fr; gap:30px}
  .hero-servico{padding:32px 0 42px}
}

/* ---------- FAQ ----------
   <details> nativo de propósito: abre sem JS, o Google lê o conteúdo
   fechado, e é o que alimenta o FAQPage do schema. */
.faq{display:grid; gap:12px; max-width:52em; margin:0 auto}
.faq details{
  background:#fff; border:1px solid var(--borda); border-radius:var(--raio);
  padding:18px 22px; transition:border-color .2s ease;
}
.faq details[open]{border-color:var(--azul)}
.faq summary{
  cursor:pointer; list-style:none; font-weight:700; color:var(--tinta);
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--azul); font-size:1.4rem; line-height:1; font-weight:400; flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:14px 0 0; font-size:.96rem; color:var(--texto); line-height:1.7}

/* ---------- Serviços relacionados ----------
   Links internos entre páginas de serviço. Não é enfeite: é o que faz o
   Google achar as páginas novas e o que segura o visitante dentro do site. */
.relacionados{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:980px){.relacionados{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.relacionados{grid-template-columns:1fr}}
.relacionado{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--borda); border-radius:var(--raio);
  padding:14px 16px; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.relacionado:hover{
  border-color:var(--azul); transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(30,47,99,.10);
}
.relacionado img{width:64px; height:48px; flex:none; object-fit:cover; border-radius:6px}
.relacionado b{display:block; color:var(--tinta); font-size:.96rem}
.relacionado em{font-style:normal; font-size:.83rem; color:var(--azul)}

/* ---------- CTA final ----------
   Herda o fundo de .escura; aqui só o enquadramento. */
.cta-final{text-align:center; padding:78px 0; position:relative; overflow:hidden}
.cta-final::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 340px at 50% 100%, rgba(0,137,204,.22), transparent 65%);
}
.cta-final .container{position:relative}
.cta-final h2{margin-bottom:14px; color:#fff}
.cta-final p{max-width:38em; margin-left:auto; margin-right:auto; color:#CBDBF0}
@media (max-width:680px){.cta-final{padding:56px 0}}

/* ---------- Navegação no rodapé (06/10/2026) ----------
   Entrou quando o site passou de 3 para 9 páginas. Não é enfeite: sem link
   apontando para elas, página nova é órfã — o visitante não acha e o Google
   não rastreia. Fica no rodapé de TODAS as páginas, inclusive da home.

   ⚠️ CORRIGIDO EM 06/10/2026 — estava INVISÍVEL.
   Nasceu com `color:#fff` e borda em `rgba(255,255,255,.14)`, cores de rodapé
   escuro. Só que o rodapé virou branco em 04/10 (`.rodape{background:#fff}`),
   então era texto branco sobre fundo branco: o menu estava no HTML, o Google
   rastreava, e nenhum visitante enxergava. As cores agora são as do rodapé
   claro — `--azul-fundo` tem 8,7:1 sobre branco, bem acima do mínimo. */
.rodape-nav{
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center;
  padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid var(--borda);
}
.rodape-nav a{color:var(--azul-fundo); text-decoration:none; font-size:.94rem; font-weight:700}
.rodape-nav a:hover{text-decoration:underline; text-underline-offset:3px}